update

src/services/go/wrtrade/index.ts

@@ -377,7 +377,7 @@ export function queryQueryWrFriend(newuserid?: string): Promise<QueryWrFriendApp
 
 /**
  * /WrTrade2/QueryPermancePlanTmp 查询履约模板
- * @param QueryWrFriendApply
+ * @param QueryPermancePlanTmpReq
  */
 export function queryQueryPermancePlanTmp(param: QueryPermancePlanTmpReq): Promise<QueryPermancePlanTmpRsp[]> {
     return commonSearch_go('/WrTrade2/QueryPermancePlanTmp', param).catch((err) => {

src/views/market/spot_trade/components/detail/index.vue

@@ -1,33 +1,36 @@
 <template>
-    <!-- 买卖大厅详情 -->
-    <Drawer
-        :title="'详情'"
-        :placement="'right'"
-        :visible="visible"
-        class="top top486"
-        @cancel="cancel"
-    >
-        <div class="detailCont">
-            <div class="rows">
-                <div class="row" v-for="item in lstitem" :key="item.name">
-                    <div class="left">{{item.name}}</div>
-                    <div class="right">{{item.value}}</div>
-                </div>
-            </div>
-            <div class="ruleTitle">履约规则：</div>
-            <div class="rulesCont">
-                <a-row>
-                    <a-col :span="24" class="ruleCol">
-                        <div class="line" v-for="item in lststep" :key="item.autoid">
-                            <!-- <div class="no">{{index + 1}}</div> -->
-                            <div class="name">{{item.steptypename}}</div>
-                            <div class="time">{{item.stepdate}}</div>
-                        </div>
-                    </a-col>
-                </a-row>
-            </div>
+  <!-- 买卖大厅详情 -->
+  <Drawer :title="'详情'"
+          :placement="'right'"
+          :visible="visible"
+          class="top top486"
+          @cancel="cancel">
+    <div class="detailCont">
+      <div class="rows">
+        <div class="row"
+             v-for="item in lstitem"
+             :key="item.name">
+          <div class="left">{{item.name}}</div>
+          <div class="right">{{item.value}}</div>
         </div>
-    </Drawer>
+      </div>
+      <div class="ruleTitle">履约规则：</div>
+      <div class="rulesCont">
+        <a-row>
+          <a-col :span="24"
+                 class="ruleCol">
+            <div class="line"
+                 v-for="item in lststep"
+                 :key="item.autoid">
+              <!-- <div class="no">{{index + 1}}</div> -->
+              <div class="name">{{item.steptypename}}</div>
+              <div class="time">{{item.stepdate}}</div>
+            </div>
+          </a-col>
+        </a-row>
+      </div>
+    </div>
+  </Drawer>
 </template>
 
 <script lang="ts">

src/views/market/spot_trade/warehouse_receipt_trade/warehouse_receipt_trade_blocs/components/post-buying/addPermance.vue

@@ -0,0 +1,148 @@
+<template>
+  <!--新增履约模板-->
+  <Drawer :title="'新增履约模板'"
+          :placement="'right'"
+          :visible="visible"
+          @cancel="cancel"
+          class="top486">
+    <a-spin :spinning="loading">
+      <div class="listed">
+        <a-form class="inlineForm dialogForm">
+          <a-input-search placeholder="搜索朋友编码或名称"
+                          class="searchFriendInput noSuffixInput"
+                          enter-button
+                          v-model:value="searchValue"
+                          @search="handleSearch">
+            <template #prefix>
+              <SearchOutlined />
+            </template>
+          </a-input-search>
+          <div class="formBar">
+            <!-- <a-checkbox-group class="commonCheckboxGroup"> -->
+            <div class="item"
+                 v-for="(item, index) in getViewFriends()"
+                 :key="index + '11'">
+              <a-checkbox v-model:checked="item.checked">
+                <span>{{item.frienduserid}} {{ item.friendname }}</span>
+              </a-checkbox>
+            </div>
+            <!-- </a-checkbox-group> -->
+          </div>
+          <a-row :gutter="24">
+            <a-col :span="24"
+                   class="fixedBtns">
+              <a-form-item class="btnCenter">
+                <a-button class="listedBtn"
+                          @click="submit">确定</a-button>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+    </a-spin>
+  </Drawer>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref } from 'vue';
+import { Des } from '@/common/components/commonDes';
+import { _closeModal } from '@/common/setup/modal/modal';
+import Drawer from '@/common/components/drawer/index.vue';
+import { PlusOutlined, MinusOutlined, SearchOutlined } from '@ant-design/icons-vue';
+import { QueryWrFriendApplyRsp } from '@/services/go/wrtrade/interface';
+import { TempWrOrderQuoteDetail } from '@/views/market/spot_trade/components/post_buying/interface';
+import { queryQueryWrFriend } from '@/services/go/wrtrade';
+import { message } from 'ant-design-vue';
+
+interface FriendList extends QueryWrFriendApplyRsp {
+    checked: boolean;
+}
+
+export default defineComponent({
+    emits: ['cancel', 'update'],
+    name: 'warehouse_receipt_trade_blocs_delisting',
+    components: { Des, Drawer, PlusOutlined, MinusOutlined, SearchOutlined },
+    setup(props, context) {
+        const { visible, cancel } = _closeModal(context);
+        const loading = ref<boolean>(false);
+        const searchValue = ref<string>('');
+        const myFriends = ref<FriendList[]>([]);
+        // 查询好友列表
+        function queryMyFriend(value?: string) {
+            loading.value = true;
+            queryQueryWrFriend(value)
+                .then((res) => {
+                    if (res) {
+                        myFriends.value = [];
+                        res.forEach((el) => {
+                            myFriends.value.push({ ...el, checked: false });
+                        });
+                    }
+                })
+                .catch((err: string) => message.error(err))
+                .finally(() => {
+                    loading.value = false;
+                });
+        }
+        queryMyFriend();
+        function getViewFriends() {
+            if (searchValue.value) {
+                return myFriends.value.filter((el) => String(el.frienduserid).includes(searchValue.value));
+            } else {
+                return myFriends.value;
+            }
+        }
+        function submit() {
+            const result: string[] = [];
+            myFriends.value.forEach((el) => {
+                if (el.checked) {
+                    result.push(el.frienduserid);
+                }
+            });
+            if (result.length) {
+                context.emit('update', result);
+            } else {
+                message.warn('请选择朋友');
+            }
+        }
+        function handleSearch(value: string) {
+            // const findResult = myFriends.value.find((e) => String(e.frienduserid).includes(value));
+            // if (findResult) {
+            //     searchFriend.value = [findResult];
+            // } else {
+            //     queryMyFriend(value);
+            // }
+        }
+        return {
+            loading,
+            myFriends,
+            cancel,
+            visible,
+            submit,
+            searchValue,
+            getViewFriends,
+        };
+    },
+});
+</script>
+
+<style lang="less" scoped>
+.listed {
+    padding: 18px 20px 0;
+    .formBar {
+        height: calc(100% - 120px);
+        padding: 0 20px 0 13px;
+        margin-top: 16px;
+        background: #08131f;
+        border: 1px solid #10202f;
+        .item {
+            width: 100%;
+            height: 50px;
+            line-height: 50px;
+            border-bottom: 1px solid #10202f;
+            font-size: 16px;
+            color: #ffffff;
+        }
+    }
+}
+</style>

src/views/market/spot_trade/warehouse_receipt_trade/warehouse_receipt_trade_blocs/components/post-buying/index.vue

@@ -75,18 +75,14 @@
               </a-form-item>
             </a-col>
 
-            <a-col :span="24">
+            <a-col :span="24"
+                   @click="openPermance">
               <a-form-item label="履约方式">
                 <span class="white ml8">选择履约模板</span>
               </a-form-item>
             </a-col>
-            <a-col :span="24">
-              <a-form-item label="指定朋友"
-                           @click="openFriend">
-                <span class="white ml8">选择朋友</span>
-              </a-form-item>
-            </a-col>
-            <a-col :span="24">
+            <a-col :span="24"
+                   @click="openFriend">
               <a-form-item label="指定朋友">
                 <span class="white ml8">选择朋友</span>
               </a-form-item>
@@ -122,9 +118,14 @@
       </a-form>
     </div>
   </Drawer>
+  <!-- 选择朋友 -->
   <Friend v-if="showFriend"
           @cancel="chooseFriend"
           @update="chooseFriend" />
+  <!-- 选择履约模板 -->
+  <Permance v-if="showPermance"
+            @cancel="choosePermance"
+            @update="choosePermance" />
 </template>
 
 <script lang="ts">
@@ -142,7 +143,7 @@ import { v4 as uuidv4 } from 'uuid';
 import moment, { Moment } from 'moment';
 import { getMarketRunByTradeMode } from '@/services/bus/market';
 import { QueryOrderQuoteMyqQsp, WrOrderQuote } from '@/services/go/wrtrade/interface';
-import { handleChooseFriend, handleForm } from './setup';
+import { handleForm, hanldeOpenAndCloseComponent } from './setup';
 import { validateAction } from '@/common/setup/form';
 import { FormParam } from './interface';
 import { EnumRouterName } from '@/common/constants/enumRouterName';
@@ -151,11 +152,12 @@ import { BuyOrSell } from '@/common/constants/enumCommon';
 import { getCanUseMoney } from '@/services/bus/account';
 import { TempWrOrderQuoteDetail } from '@/views/market/spot_trade/components/post_buying/interface';
 import Friend from './friend.vue';
+import Permance from './permancePlanTmp.vue';
 
 export default defineComponent({
     emits: ['cancel', 'update'],
     name: ModalEnum.spot_trade_warehouse_post_buying,
-    components: { Des, Drawer, PlusOutlined, MinusOutlined, Friend },
+    components: { Des, Drawer, PlusOutlined, MinusOutlined, Friend, Permance },
     props: {
         selectedRow: {
             type: Object as PropType<TempWrOrderQuoteDetail>,
@@ -166,7 +168,9 @@ export default defineComponent({
         const { visible, cancel } = _closeModal(context);
         const { rules, formState, formRef } = handleForm();
         // 选择朋友
-        const { showFriend, frineds, chooseFriend, openFriend } = handleChooseFriend();
+        const { show: showFriend, selected: frineds, close: chooseFriend, open: openFriend } = hanldeOpenAndCloseComponent<number[]>();
+        // 履约模板
+        const { show: showPermance, selected: selectedPermance, close: choosePermance, open: openPermance } = hanldeOpenAndCloseComponent<number>();
         const loading = ref<boolean>(false);
         const accountList = getAccountTypeList([2]);
         if (accountList.length) {
@@ -257,6 +261,10 @@ export default defineComponent({
             showFriend,
             chooseFriend,
             openFriend,
+
+            showPermance,
+            choosePermance,
+            openPermance,
         };
     },
 });

src/views/market/spot_trade/warehouse_receipt_trade/warehouse_receipt_trade_blocs/components/post-buying/permancePlanTmp.vue

@@ -0,0 +1,89 @@
+<template>
+  <!--选择履约模板-->
+  <Drawer :title="'选择履约模板'"
+          :placement="'right'"
+          :visible="visible"
+          @cancel="cancel"
+          class="top486">
+    <a-spin :spinning="loading">
+      <div>
+        <div class="rulesCont"
+             v-for="item in tableList"
+             :key="item.autoid">
+          <div>{{item.templatename}}</div>
+          <a-row>
+            <a-col :span="24"
+                   class="ruleCol">
+              <div class="line"
+                   v-for="sub in item.LstStep"
+                   :key="sub.autoid">
+                <!-- <div class="no">{{index + 1}}</div> -->
+                <div class="name">{{sub.templatename}}</div>
+                <div class="time">{{sub.stepdate}}</div>
+              </div>
+            </a-col>
+          </a-row>
+        </div>
+      </div>
+    </a-spin>
+  </Drawer>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref } from 'vue';
+import { Des } from '@/common/components/commonDes';
+import { _closeModal } from '@/common/setup/modal/modal';
+import Drawer from '@/common/components/drawer/index.vue';
+import { PlusOutlined, MinusOutlined, SearchOutlined } from '@ant-design/icons-vue';
+import { QueryPermancePlanTmpReq, QueryPermancePlanTmpRsp, QueryWrFriendApplyRsp } from '@/services/go/wrtrade/interface';
+import { TempWrOrderQuoteDetail } from '@/views/market/spot_trade/components/post_buying/interface';
+import { queryQueryPermancePlanTmp, queryQueryWrFriend } from '@/services/go/wrtrade';
+import { message } from 'ant-design-vue';
+import { getUsrId } from '@/services/bus/user';
+import { queryResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
+import { queryTableList } from '@/common/setup/table';
+
+export default defineComponent({
+    emits: ['cancel', 'update'],
+    name: 'queryQueryPermancePlanTmp',
+    components: { Des, Drawer, PlusOutlined, MinusOutlined, SearchOutlined },
+    setup(props, context) {
+        const { visible, cancel } = _closeModal(context);
+
+        const param: QueryPermancePlanTmpReq = {
+            userid: getUsrId(),
+            tmptype: '2',
+        };
+        const { loading, tableList, queryTable } = queryTableList<QueryPermancePlanTmpRsp>();
+        queryTable(queryQueryPermancePlanTmp, param);
+
+        return {
+            loading,
+            cancel,
+            visible,
+            tableList,
+        };
+    },
+});
+</script>
+
+<style lang="less" scoped>
+.listed {
+    padding: 18px 20px 0;
+    .formBar {
+        height: calc(100% - 120px);
+        padding: 0 20px 0 13px;
+        margin-top: 16px;
+        background: #08131f;
+        border: 1px solid #10202f;
+        .item {
+            width: 100%;
+            height: 50px;
+            line-height: 50px;
+            border-bottom: 1px solid #10202f;
+            font-size: 16px;
+            color: #ffffff;
+        }
+    }
+}
+</style>

src/views/market/spot_trade/warehouse_receipt_trade/warehouse_receipt_trade_blocs/components/post-buying/setup.ts

@@ -39,17 +39,18 @@ export function handleForm() {
     return { rules, formState, formRef }
 }
 
-export function handleChooseFriend() {
-    const showFriend = ref<boolean>(false)
-    const frineds = ref<number[]>([]) // 选中的朋友 id 列表
-    function chooseFriend(value: number[]) {
+// 处理组件打开与关闭通用逻辑
+export function hanldeOpenAndCloseComponent<T>() {
+    const show = ref<boolean>(false)
+    const selected = ref<T>() // 选中的朋友 id 列表
+    function close(value: any) {
         if (value) {
-            frineds.value = value
+            selected.value = value
         }
-        showFriend.value = false
+        show.value = false
     }
-    function openFriend() {
-        showFriend.value = true
+    function open() {
+        show.value = true
     }
-    return { showFriend, frineds, chooseFriend, openFriend }
+    return { show, selected, close, open }
 }