修改 新增履约模板

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

@@ -7,13 +7,18 @@
           class="top486">
     <a-spin :spinning="loading">
       <div class="listed">
-        <a-form class="inlineForm dialogForm">
+        <a-form class="inlineForm dialogForm"
+                ref="formRef"
+                :model="formState"
+                :rules="rules">
           <div class="formBar">
             <a-row :gutter="24">
               <a-col :span="24">
-                <a-form-item label="模版名称">
+                <a-form-item label="模版名称"
+                             name="name">
                   <a-input class="commonInput"
-                           value="30天账期"
+                           v-model:value="formState.name"
+                           placeholder="30天账期"
                            style="width: 260px" />
                 </a-form-item>
               </a-col>
@@ -25,10 +30,11 @@
               <a-col :span="4">操作</a-col>
             </a-row>
             <a-row class="tableContent"
-                   v-for="(parent, index) in tableList"
-                   :key="index + '11'">
+                   v-for="(parent, index) in formState.domains"
+                   :key="parent">
               <a-col :span="7">
-                <a-form-item :name="['domains',index, 'steptypeid']">
+                <a-form-item :name="['domains',index, 'steptypeid']"
+                             :rules="rules.domains.steptypeid">
                   <a-select class="inlineFormSelect dialogTableSelect"
                             style="width: 108px"
                             placeholder="请选择"
@@ -42,15 +48,18 @@
                 </a-form-item>
               </a-col>
               <a-col :span="6">
-                <a-form-item :name="['domains',index, 'stepvalue']">
+                <a-form-item :name="['domains',index, 'stepvalue']"
+                             :rules="rules.domains.stepvalue">
                   <a-input-number class="commonInput dialogTableInput"
+                                  :disabled="isSummary(parent)"
                                   style="width: 100px"
                                   type="number"
                                   v-model:value="parent.stepvalue"></a-input-number>
                 </a-form-item>
               </a-col>
               <a-col :span="7">
-                <a-form-item :name="['domains',index, 'stepdays']">
+                <a-form-item :name="['domains',index, 'stepdays']"
+                             :rules="rules.domains.stepdays">
                   <a-input-number class="commonInput dialogTableInput"
                                   style="width: 122px"
                                   type="number"
@@ -63,8 +72,8 @@
                      aria-hidden="true">
                   <use xlink:href="#icon-shanchu" />
                 </svg>
-                <PlusCircleOutlined v-if="index === (tableList.length - 1)"
-                                    @click="addTemp(index)" />
+                <PlusCircleOutlined v-if="showAddTempBtn(index)"
+                                    @click="addTemp()" />
               </a-col>
             </a-row>
             <div class="noticeTip">
@@ -90,7 +99,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, reactive, ref, UnwrapRef } from 'vue';
+import { defineComponent, PropType, reactive, Ref, ref, UnwrapRef } from 'vue';
 import { Des } from '@/common/components/commonDes';
 import { _closeModal } from '@/common/setup/modal/modal';
 import Drawer from '@/common/components/drawer/index.vue';
@@ -103,6 +112,101 @@ import { useQueryData } from '@/common/setup/request';
 import { AddPerformanceTemp, PerfomanceStempTempInfo } from '@/services/proto/performance/interface';
 import { validateAction } from '@/common/setup/form';
 import { PermanceTemp, PermanceTempForm } from './interface';
+import { getUserId } from '@/services/bus/account';
+
+// 初始化 模板
+const initTemp = (): PermanceTemp => {
+    return { steptypeid: undefined, stepindex: 1, stepvalue: null, isauto: 0, remark: '', stepdays: null, steptypename: '' };
+};
+
+// 新增 模板
+const useAddTemp = (formState: UnwrapRef<PermanceTempForm>) => {
+    const temp = initTemp();
+    function addTemp() {
+        formState.domains.push(temp);
+    }
+    function showAddTempBtn(index: number) {
+        return index === formState.domains.length - 1;
+    }
+    return { addTemp, showAddTempBtn };
+};
+
+// 删除 模板
+const useDeleteTemp = (formState: UnwrapRef<PermanceTempForm>) => {
+    function deleteTemp(index: number) {
+        formState.domains.splice(index, 1);
+    }
+    return { deleteTemp };
+};
+
+// 编辑 模板
+const useEditeTemp = (typeList: Ref<QueryWrPerformanceStepTypeRsp[]>) => {
+    function findTemp(item: PermanceTemp) {
+        return typeList.value.find((el) => el.steptypeid === item.steptypeid);
+    }
+    // 汇总
+    function isSummary({ steptypename }: PermanceTemp) {
+        return steptypename === '买方支付汇总' || steptypename === '卖方收款汇总' ? true : false;
+    }
+    // 切换步骤类型
+    function stepTypeChange(item: PermanceTemp) {
+        const stepType = findTemp(item)!;
+        item.steptypename = stepType.steptypename;
+        // 卖方收款汇总值必须为100%；
+        if (isSummary(item)) {
+            item.stepvalue = 100;
+        }
+    }
+    return { isSummary, stepTypeChange };
+};
+
+// 表单
+const userForm = () => {
+    const temp = initTemp();
+    const formRef = ref();
+    const formState: UnwrapRef<PermanceTempForm> = reactive({ domains: [temp], name: '' });
+    const findIndex = (name: string): number => formState.domains.findIndex((temp) => temp.steptypename === name);
+    const findItem = (name: string) => formState.domains.find((temp) => temp.steptypename === name);
+    // 配置卖方收款之前要有买方支付
+    function validateSepeTypeId(value: any) {
+        const sellIndex = findIndex('卖方收款');
+        if (sellIndex !== -1) {
+            const buyIndex = findIndex('买方支付');
+            if (buyIndex > sellIndex) {
+                return Promise.reject('配置卖方收款之前要有买方支付');
+            }
+        }
+        return Promise.resolve();
+    }
+    function validateStepValue() {
+        const sell = findItem('卖方收款');
+        const buy = findItem('买方支付');
+        if (sell && buy) {
+            const buyValue = sell.stepvalue;
+            const sellValue = sell.stepvalue;
+            if (buyValue && sellValue && sellValue > buyValue) {
+                return Promise.reject('卖方收款不能多于买方付款');
+            }
+        }
+        return Promise.resolve();
+    }
+    const rules = {
+        name: { required: true, message: '请输入模版名称', trigger: 'blur' },
+        domains: {
+            steptypeid: [
+                { required: true, message: '请选择步骤类型' },
+                { required: true, validator: validateSepeTypeId },
+            ],
+            stepvalue: [
+                { required: true, message: '请输入步骤值', trigger: 'blur' },
+                { required: true, validator: validateStepValue },
+            ],
+            stepdays: { required: true, message: '请输入距离上一步天数', trigger: 'blur' },
+        },
+    };
+
+    return { formRef, formState, rules };
+};
 
 export default defineComponent({
     emits: ['cancel', 'update'],
@@ -111,58 +215,36 @@ export default defineComponent({
     setup(props, context) {
         const { visible, cancel } = _closeModal(context);
         const loading = ref<boolean>(false);
+        // 步骤类型
         const { list } = useQueryData<QueryWrPerformanceStepTypeRsp>(queryWrPerformanceStepType);
-        const temp: PermanceTemp = { steptypeid: undefined, stepindex: 1, stepvalue: null, isauto: 0, remark: '', stepdays: null };
-        const tableList = ref<PermanceTemp[]>([temp]);
-        // 新增
-        function addTemp(index: number) {
-            tableList.value.push(temp);
-        }
-        // 删除
-        function deleteTemp(index: number) {
-            tableList.value.splice(index, 1);
-        }
-        function stepTypeChange(item: PermanceTemp) {
-            const stepType = list.value.find((el) => el.steptypeid === item.steptypeid)!;
-            const { steptypename } = stepType;
-            // 买方支付汇总值必须为100%；
-            // 卖方收款汇总值必须为100%；
-            if (steptypename === '买方支付汇总' || steptypename === '卖方收款汇总') {
-                item.stepvalue = 100;
-            }
-        }
-        // 表单
-        const formRef = ref();
-        const formState: UnwrapRef<PermanceTempForm> = reactive({ domains: [] });
-        const rules = {
-            domains: {
-                steptypeid: { required: true, message: '请选择步骤类型', trigger: 'change' },
-                stepvalue: { required: true, message: '请输入步骤值', trigger: 'blur' },
-                stepdays: { required: true, message: '请输入距离上一步天数', trigger: 'blur' },
-            },
-        };
+        const { formRef, formState, rules } = userForm();
+
         function submit() {
-            validateAction<PermanceTempForm>(formRef, formState).then((res) => {});
-        }
-        function handleSearch(value: string) {
-            // const findResult = myFriends.value.find((e) => String(e.frienduserid).includes(value));
-            // if (findResult) {
-            //     searchFriend.value = [findResult];
-            // } else {
-            //     queryMyFriend(value);
-            // }
+            validateAction<PermanceTempForm>(formRef, formState).then((res) => {
+                // const performancesteps:PerfomanceStempTempInfo[] = res.domains.map(el => {
+                //   const { }
+                //   return el
+                // })
+                // const param: AddPerformanceTemp  = {
+                //   autoid: 0,
+                //   templatename: res.name,
+                //   userid: getUserId(),
+                //   performancesteps:
+                // }
+            });
         }
         return {
             loading,
             list,
-            tableList,
-            addTemp,
-            deleteTemp,
-            stepTypeChange,
-
+            formRef,
+            formState,
+            rules,
+            submit,
+            ...useAddTemp(formState),
+            ...useDeleteTemp(formState),
+            ...useEditeTemp(list),
             cancel,
             visible,
-            submit,
         };
     },
 });

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

@@ -17,8 +17,10 @@ export interface PermanceTemp {
     isauto: number; // 是否自动是否自动 - 0:不自动 1:自动
     remark: string; // 备注
     stepindex: number; //步骤序号
+    steptypename: string; //步骤名
 }
 
 export interface PermanceTempForm {
-    domains: PermanceTemp[]
+    domains: PermanceTemp[],
+    name: string,
 }