历史消息模块，销售合同变更模块

src/components/common-list.vue

@@ -11,6 +11,9 @@
             :disabled="optionalValue ? optionalValue != i[optionalKey] : false"
           ></van-checkbox>
         </div>
+        <p>
+          
+        </p>
         <div
           class="center-content"
           style="line-height: 24px"
@@ -24,7 +27,7 @@
               </slot>
             </span>
             <span v-else>
-              {{ i[j.prop] }}
+              {{ i[j.prop] || ''}}
             </span>
           </div>
         </div>

src/lang/cn.js

@@ -60,6 +60,15 @@ export const lang = {
 		selectDate:'选择日期',
 		selectTime:'选择时间',
 	},
+	historyMessage:{
+		//历史消息，全部，消息类型,发送时间,消息内容
+		name:'历史消息',
+		all:'全部',
+		messageType:'消息类型',
+		sendTime:'发送时间',
+		messageContent:'消息内容',
+		
+	},
 	processApproval: {
 		//流程办理，流程类型，流程标题，发起人
 		name: '流程办理',

src/lang/cnLXF.js

@@ -86,7 +86,7 @@ export function cnLXF() {
       followUpRecord: "添加跟进记录",
       date: "跟进时间",
       dateMsg: "请选择跟进时间",
-      customerName: "跟进人",
+      customerName1: "跟进人",
       content: "跟进记录",
       contentTwo: "跟进内容",
       contentTwoMsg: "请输入跟进内容",

src/router/index.js

@@ -508,8 +508,12 @@ const routes = [{
 				path: "standardProductLibraryAdd",
 				name: "标准产品库添加",
 				component: () => import("../views/product-material/standard-product-library/add.vue"),
+			},
+			{
+				path: "historyMessage",
+				name: "历史消息",
+				component: () => import("../views/message/historyMessage.vue"),
 			}
-			
 		]
 	},
 ]

src/views/message/historyMessage.vue

@@ -0,0 +1,136 @@
+<template>
+    <van-nav-bar
+      :title="$t('historyMessage.name')"
+      left-text=""
+      left-arrow
+      @click-left="onClickLeft"
+      @click-right="onClickRight"
+    >
+      
+    </van-nav-bar>
+    <van-search
+      v-model="req.keyword"
+      :placeholder="$t('common.pleaseEnterKeywords')"
+      @search="onRefresh"
+    />
+    <van-pull-refresh v-model="loading" @refresh="onRefresh">
+      <div class="list">
+        <van-list
+          v-model:loading="loading"
+          :finished="finished"
+          :finished-text="$t('common.noMore')"
+          @load="getList"
+          style="margin-bottom: 60px"
+        >
+          <commonList :data="listData" @onClick="toDtl" :config="listConfig">
+            <template #typeName="{ row }">
+              <div>消息通知</div>
+            </template>
+          </commonList>
+        </van-list>
+      </div>
+    </van-pull-refresh>
+  </template>
+  <script setup>
+  import { ref, getCurrentInstance } from "vue";
+  import commonList from "@/components/common-list.vue";
+  
+  const proxy = getCurrentInstance().proxy;
+  const onClickLeft = () => proxy.$router.push("/main/working");
+  const req = ref({
+    pageNum: 1,
+    keyword: null,
+  });
+  const finished = ref(false);
+  const onRefresh = () => {
+    req.value.pageNum = 1;
+    finished.value = false;
+    getList("refresh");
+  };
+  const loading = ref(false);
+  const listData = ref([]);
+  const statusData = ref([
+    {
+      label: "草稿",
+      value: 0,
+    },
+    {
+      label: "审批中",
+      value: 10,
+    },
+    {
+      label: "驳回",
+      value: 20,
+    },
+    {
+      label: "审批通过",
+      value: 30,
+    },
+    {
+      label: "终止",
+      value: 99,
+    },
+  ]);
+  const payStatusData = ref([]);
+  const getDict = () => {
+    proxy.getDictOne(["pay_status"]).then((res) => {
+      payStatusData.value = res["pay_status"].data.map((x) => ({
+        label: x.dictValue,
+        value: x.dictKey,
+      }));
+    });
+  };
+  getDict();
+  const getList = (type) => {
+    loading.value = true;
+    proxy
+      .post("/pushInfo/page", req.value)
+      .then((res) => {
+        listData.value =
+          type === "refresh"
+            ? res.data.rows
+            : listData.value.concat(res.data.rows);
+        if (req.value.pageNum * 10 >= res.data.total) {
+          finished.value = true;
+        }
+        req.value.pageNum++;
+        loading.value = false;
+      })
+      .catch(() => {
+        loading.value = false;
+      });
+  };
+  const toDtl = (row) => {};
+  const onClickRight = () => {
+    proxy.$router.push({
+      path: "/main/processDtl",
+      query: {
+        flowKey: "pay_flow",
+      },
+    });
+  };
+  const listConfig = ref([
+    {
+      type: "slot",
+      label: proxy.t("historyMessage.messageType"),
+      slotName: "typeName",
+    },
+    {
+      label: proxy.t("historyMessage.sendTime"),
+      prop: "createTime",
+    },
+    {
+      label: proxy.t("historyMessage.messageContent"),
+      prop: "title",
+    },
+    
+   
+  ]);
+  </script>
+  
+  <style lang="scss" scoped>
+  .list {
+    min-height: 70vh;
+  }
+  </style>
+  

src/views/message/index.vue

@@ -20,7 +20,7 @@
                     <van-icon name="arrow" size='16' />
                 </div>
             </li>
-            <li>
+            <li @click="toRouter('historyMessage')">
                 <div class="icon-box" style="background:#A06CFB">
                     <i  class="iconfont icon-iconm_yewtx"></i>
                 </div>

src/views/processApproval/components/ContractAlteration.vue

@@ -0,0 +1,1013 @@
+<template>
+    <div class="form">
+      <van-tabs v-model:active="active">
+        <van-tab :title="proxy.t('contract.transactionInformation')" />
+        <van-tab :title="proxy.t('contract.commodityInformation')" />
+        <van-tab :title="proxy.t('contract.otherCharges')" />
+        <van-tab :title="proxy.t('contract.deliveryInformation')" />
+        <van-tab :title="proxy.t('contract.shipmentPlan')" />
+        <div class="common-process-card" v-show="active == 0">
+          <div class="common-title">{{ proxy.t("contract.transactionInformation") }}</div>
+          <testForm v-model="formData.data" :formOption="formOption" :formConfig="formConfig" :rules="rules" ref="formDom1"> </testForm>
+        </div>
+        <div class="common-process-card" v-show="active == 1">
+          <div class="common-title">{{ proxy.t("contract.commodityInformation") }}</div>
+          <testForm v-model="formData.data" :formOption="formGoodsOption" :formConfig="formEmptyConfig" :rules="rules" ref="formDom2"> </testForm>
+          <testForm v-model="formData.data" :formOption="formOption" :formConfig="formAmountProductConfig" :rules="rules" ref="formDom3"> </testForm>
+        </div>
+        <div class="common-process-card" v-show="active == 2">
+          <div class="common-title">{{ proxy.t("contract.otherCharges") }}</div>
+          <testForm v-model="formData.data" :formOption="formProjectOption" :formConfig="formEmptyConfig" :rules="rules" ref="formDom4"> </testForm>
+          <testForm v-model="formData.data" :formOption="formOption" :formConfig="formAmountProjectConfig" :rules="rules" ref="formDom5"> </testForm>
+        </div>
+        <div class="common-process-card" v-show="active == 3">
+          <div class="common-title">{{ proxy.t("contract.deliveryInformation") }}</div>
+          <testForm v-model="formData.data" :formOption="formOption" :formConfig="formDeliveryConfig" :rules="rulesTwo" ref="formDom6"> </testForm>
+        </div>
+        <div class="common-process-card" v-show="active == 4">
+          <div class="common-title">{{ proxy.t("contract.shipmentPlan") }}</div>
+          <testForm v-model="formData.data" :formOption="formShipmentOption" :formConfig="formEmptyConfig" :rules="rulesTwo" ref="formDom7"> </testForm>
+        </div>
+      </van-tabs>
+    </div>
+  </template>
+  
+  <script setup>
+  import { ref, getCurrentInstance, onMounted, defineProps, defineExpose, watch, reactive, toRefs } from "vue";
+  import { useRoute } from "vue-router";
+  import testForm from "@/components/testForm/index.vue";
+  import { getUserInfo } from "@/utils/auth";
+  import { showFailToast } from "vant";
+  
+  // 接收父组件的传值
+  const props = defineProps({
+    queryData: Object,
+  });
+  const refProps = toRefs(props);
+  const proxy = getCurrentInstance().proxy;
+  const route = useRoute();
+  const active = ref(0);
+  const tabsChange = () => {
+    active.value++;
+  };
+  const formData = reactive({
+    data: {
+      contractType: "1",
+      contractProductList: [],
+      contractProjectList: [],
+      contractShipmentList: [],
+    },
+  });
+  const formDom1 = ref(null);
+  const formDom2 = ref(null);
+  const formDom3 = ref(null);
+  const formDom4 = ref(null);
+  const formDom5 = ref(null);
+  const formDom6 = ref(null);
+  const formDom7 = ref(null);
+  const formOption = reactive({
+    readonly: false,
+    disabled: false,
+    labelAlign: "top",
+    scroll: true,
+    labelWidth: "62pk",
+    hiddenSubmitBtn: true,
+  });
+  const formConfig = reactive([
+    {
+      type: "picker",
+      label: proxy.t("contract.contractType"),
+      prop: "contractType",
+      itemType: "onePicker",
+      showPicker: false,
+      fieldNames: {
+        text: "label",
+        value: "value",
+      },
+      data: [],
+    },
+    {
+      type: "picker",
+      label: proxy.t("contract.contractTemplateId"),
+      prop: "contractTemplateId",
+      itemType: "onePicker",
+      showPicker: false,
+      fieldNames: {
+        text: "label",
+        value: "value",
+      },
+      data: [],
+      changeFn: (val, data) => {
+        proxy.formChange(val, data, formData);
+        formData.data.sellCorporationId = "";
+        formData.data.sellCountryName = "";
+        formData.data.sellProvinceName = "";
+        formData.data.sellCityName = "";
+        formData.data.sellAddress = "";
+        formData.data.sellContactName = "";
+        formData.data.sellContactNumber = "";
+        if (val.selectedValues[0]) {
+          proxy.post("/contractTemplate/detail", { id: val.selectedValues[0] }).then((res) => {
+            formData.data.sellCorporationId = res.data.corporationId;
+            if (res.data.corporationId) {
+              proxy.post("/corporation/detail", { id: res.data.corporationId }).then((detailCorporation) => {
+                let sellCity = "";
+                if (detailCorporation.data.countryEnStr) {
+                  formData.data.sellCountryName = detailCorporation.data.countryEnStr;
+                  sellCity = detailCorporation.data.countryEnStr;
+                }
+                if (detailCorporation.data.provinceEnStr) {
+                  formData.data.sellProvinceName = detailCorporation.data.provinceEnStr;
+                  sellCity = sellCity + " " + detailCorporation.data.provinceEnStr;
+                }
+                if (detailCorporation.data.cityEnStr) {
+                  formData.data.sellCityName = detailCorporation.data.cityEnStr;
+                  sellCity = sellCity + " " + detailCorporation.data.cityEnStr;
+                }
+                if (detailCorporation.data.addressEn) {
+                  formData.data.sellAddress = detailCorporation.data.addressEn;
+                }
+                formData.data.sellCity = sellCity;
+                formDom1.value.formDataShowLabelOne();
+              });
+            }
+            formData.data.sellContactName = res.data.contactName;
+            formData.data.sellContactNumber = res.data.contactNumber;
+            formDom1.value.formDataShowLabelOne();
+          });
+        }
+        data.showPicker = false;
+      },
+    },
+    {
+      type: "title",
+      title: proxy.t("contract.sellerInformation"),
+    },
+    {
+      type: "picker",
+      label: proxy.t("contract.sellCorporationId"),
+      prop: "sellCorporationId",
+      itemType: "onePicker",
+      showPicker: false,
+      fieldNames: {
+        text: "label",
+        value: "value",
+      },
+      data: [],
+      readonly: true,
+    },
+    {
+      type: "input",
+      label: proxy.t("contract.cityText"),
+      prop: "sellCity",
+      itemType: "text",
+      readonly: true,
+    },
+    {
+      type: "input",
+      label: proxy.t("contract.address"),
+      prop: "sellAddress",
+      itemType: "textarea",
+    },
+    {
+      type: "input",
+      label: proxy.t("contract.contactName"),
+      prop: "sellContactName",
+      itemType: "text",
+    },
+    {
+      type: "input",
+      label: proxy.t("contract.contactNumber"),
+      prop: "sellContactNumber",
+      itemType: "text",
+    },
+    {
+      type: "title",
+      title: proxy.t("contract.buyerInformation"),
+    },
+    {
+      type: "picker",
+      label: proxy.t("contract.buyCorporationId"),
+      prop: "buyCorporationId",
+      itemType: "onePicker",
+      showPicker: false,
+      fieldNames: {
+        text: "label",
+        value: "value",
+      },
+      data: [],
+      changeFn: (val, data) => {
+        proxy.formChange(val, data, formData);
+        formData.data.buyContactName = "";
+        formData.data.buyContactNumber = "";
+        if (val.selectedValues[0]) {
+          proxy.post("/customer/detail", { id: val.selectedValues[0] }).then((res) => {
+            if (res.data.customerUserList && res.data.customerUserList.length > 0) {
+              formData.data.buyContactName = res.data.customerUserList[0].name;
+              if (res.data.customerUserList[0].contactJson) {
+                let contactJson = JSON.parse(res.data.customerUserList[0].contactJson);
+                if (contactJson && contactJson.length > 0) {
+                  formData.data.buyContactNumber = contactJson[0].contactNo;
+                }
+              }
+            }
+            let countryCityName = "";
+            if (res.data.countryName) {
+              countryCityName = res.data.countryName;
+              if (res.data.provinceName) {
+                countryCityName = countryCityName + " " + res.data.provinceName;
+                if (res.data.cityName) {
+                  countryCityName = countryCityName + " " + res.data.cityName;
+                }
+              }
+            }
+            formData.data.countryCityName = countryCityName;
+            if (res.data.cityId) {
+              formData.data.countryCity = res.data.cityId;
+            } else if (res.data.provinceId) {
+              formData.data.countryCity = res.data.provinceId;
+            } else if (res.data.countryId) {
+              formData.data.countryCity = res.data.countryId;
+            } else {
+              formData.data.countryCity = "";
+            }
+            formData.data.countryId = res.data.countryId;
+            formData.data.provinceId = res.data.provinceId;
+            formData.data.cityId = res.data.cityId;
+            formData.data.buyPostalCode = res.data.zipCode;
+            formData.data.buyAddress = res.data.address;
+          });
+        } else {
+          formData.data.countryId = "";
+          formData.data.provinceId = "";
+          formData.data.cityId = "";
+          formData.data.buyPostalCode = "";
+          formData.data.buyAddress = "";
+        }
+        data.showPicker = false;
+      },
+    },
+    {
+      type: "cascader",
+      label: proxy.t("contract.cityText"),
+      prop: "countryCity",
+      itemType: "city",
+      showPicker: false,
+    },
+    {
+      type: "input",
+      label: proxy.t("contract.address"),
+      prop: "buyAddress",
+      itemType: "textarea",
+    },
+    {
+      type: "input",
+      label: proxy.t("contract.postalCode"),
+      prop: "buyPostalCode",
+      itemType: "text",
+    },
+    {
+      type: "input",
+      label: proxy.t("contract.contactName"),
+      prop: "buyContactName",
+      itemType: "text",
+    },
+    {
+      type: "input",
+      label: proxy.t("contract.contactNumber"),
+      prop: "buyContactNumber",
+      itemType: "text",
+    },
+  ]);
+  const formGoodsOption = reactive({
+    readonly: false,
+    disabled: false,
+    labelAlign: "top",
+    scroll: true,
+    labelWidth: "62pk",
+    hiddenSubmitBtn: true,
+    btnConfig: {
+      isNeed: true,
+      prop: "contractProductList",
+      plain: true,
+      listTitle: proxy.t("contract.commodityInformation"),
+      listConfig: [
+        {
+          type: "picker",
+          label: proxy.t("contract.productId"),
+          prop: "productId",
+          itemType: "onePicker",
+          showPicker: false,
+          readonly: false,
+          fieldNames: {
+            text: "label",
+            value: "value",
+          },
+          data: [],
+          changeFn: (val, data, index, indexTwo, propName) => {
+            let selectList = formData.data[propName].filter((item, itemIndex) => item[data.prop] === val.selectedValues[0] && itemIndex !== index);
+            if (selectList && selectList.length > 0) {
+              return showFailToast(proxy.t("contract.productRepeat"));
+            }
+            formData.data[propName][index][data.prop] = val.selectedValues[0];
+            formData.data.contractShipmentList[index][data.prop] = val.selectedValues[0];
+            let list = data.data.filter((item) => item[data.fieldNames.value] == val.selectedValues[0]);
+            if (list && list.length > 0) {
+              formData.data[propName][index][data.prop + "Name"] = list[0][data.fieldNames.text];
+              let name = list[0].name;
+              if (list[0].standardJson) {
+                let standardJson = JSON.parse(list[0].standardJson);
+                if (standardJson && standardJson.englishName) {
+                  name = standardJson.englishName;
+                }
+              }
+              formData.data[propName][index].productName = name;
+              formData.data[propName][index].productModel = list[0].spec;
+              formData.data.contractShipmentList[index].productName = name;
+            } else {
+              formData.data[propName][index][data.prop + "Name"] = "";
+            }
+            formData.data[propName][index].quantity = null;
+            formData.data[propName][index].price = null;
+            formData.data[propName][index].amount = null;
+            formData.data[propName][index].remark = null;
+            formData.data.contractShipmentList[index].shipmentTime = null;
+            formData.data.contractShipmentList[index].quantity = null;
+            formData.data.contractShipmentList[index].remark = null;
+            data.showPicker = false;
+          },
+        },
+        {
+          type: "input",
+          label: proxy.t("contract.productName"),
+          prop: "productName",
+          itemType: "text",
+        },
+        {
+          type: "input",
+          label: proxy.t("contract.productModel"),
+          prop: "productModel",
+          itemType: "text",
+        },
+        {
+          type: "input",
+          label: proxy.t("contract.quantity"),
+          prop: "quantity",
+          itemType: "number",
+          changeFn: () => {
+            calculatedAmount();
+          },
+        },
+        {
+          type: "input",
+          label: proxy.t("contract.price"),
+          prop: "price",
+          itemType: "number",
+          changeFn: () => {
+            calculatedAmount();
+          },
+        },
+      ],
+      clickFn: () => {
+        if (formData.data.contractProductList && formData.data.contractProductList.length > 0) {
+          formData.data.contractProductList.push({
+            productId: null,
+            productName: null,
+            productModel: null,
+            quantity: null,
+            price: null,
+            amount: null,
+            remark: null,
+          });
+          formData.data.contractShipmentList.push({
+            productId: null,
+            productName: null,
+            shipmentTime: null,
+            quantity: null,
+            remark: null,
+          });
+        } else {
+          formData.data.contractProductList = [
+            {
+              productId: null,
+              productName: null,
+              productModel: null,
+              quantity: null,
+              price: null,
+              amount: null,
+              remark: null,
+            },
+          ];
+          formData.data.contractShipmentList = [
+            {
+              productId: null,
+              productName: null,
+              shipmentTime: null,
+              quantity: null,
+              remark: null,
+            },
+          ];
+        }
+      },
+      deleteFn: (index) => {
+        formData.data.contractProductList.splice(index, 1);
+        formData.data.contractShipmentList.splice(index, 1);
+        handleChangeAmount();
+      },
+    },
+  });
+  const formEmptyConfig = reactive([]);
+  const formAmountProductConfig = reactive([
+    {
+      type: "input",
+      label: proxy.t("contract.amountProduct"),
+      prop: "amountProduct",
+      itemType: "text",
+      readonly: true,
+      placeholder: proxy.t("contract.amountProductPlaceholder"),
+    },
+  ]);
+  const formAmountProjectConfig = reactive([
+    {
+      type: "input",
+      label: proxy.t("contract.amountProject"),
+      prop: "amountProject",
+      itemType: "text",
+      readonly: true,
+      placeholder: proxy.t("contract.amountProjectPlaceholder"),
+    },
+  ]);
+  const formProjectOption = reactive({
+    readonly: false,
+    disabled: false,
+    labelAlign: "top",
+    scroll: true,
+    labelWidth: "62pk",
+    hiddenSubmitBtn: true,
+    btnConfig: {
+      isNeed: true,
+      prop: "contractProjectList",
+      plain: true,
+      listTitle: proxy.t("contract.chargeItem"),
+      listConfig: [
+        {
+          type: "input",
+          label: proxy.t("contract.chargeItem"),
+          prop: "payName",
+          itemType: "text",
+        },
+        {
+          type: "input",
+          label: proxy.t("contract.amount"),
+          prop: "amount",
+          itemType: "number",
+          changeFn: () => {
+            handleChangeAmount();
+          },
+        },
+        {
+          type: "input",
+          label: proxy.t("contract.remark"),
+          prop: "remark",
+          itemType: "textarea",
+        },
+      ],
+      clickFn: () => {
+        if (formData.data.contractProjectList && formData.data.contractProjectList.length > 0) {
+          formData.data.contractProjectList.push({
+            payName: null,
+            amount: null,
+            remark: null,
+          });
+        } else {
+          formData.data.contractProjectList = [
+            {
+              payName: null,
+              amount: null,
+              remark: null,
+            },
+          ];
+        }
+      },
+      deleteFn: (index) => {
+        formData.data.contractProjectList.splice(index, 1);
+        handleChangeAmount();
+      },
+    },
+  });
+  const formDeliveryConfig = reactive([
+    {
+      type: "title",
+      title: proxy.t("contract.collectionInformation"),
+    },
+    {
+      type: "picker",
+      label: proxy.t("contract.currency"),
+      prop: "currency",
+      itemType: "onePicker",
+      showPicker: false,
+      fieldNames: {
+        text: "label",
+        value: "value",
+      },
+      data: [],
+    },
+    {
+      type: "input",
+      label: proxy.t("contract.amountAll"),
+      prop: "amount",
+      itemType: "text",
+      readonly: true,
+      placeholder: proxy.t("contract.amountAllPlaceholder"),
+    },
+    {
+      type: "picker",
+      label: proxy.t("contract.paymentMethod"),
+      prop: "paymentMethod",
+      itemType: "onePicker",
+      showPicker: false,
+      fieldNames: {
+        text: "label",
+        value: "value",
+      },
+      data: [],
+    },
+    {
+      type: "input",
+      label: proxy.t("contract.advanceRatio"),
+      prop: "advanceRatio",
+      itemType: "number",
+      inputFn: (val) => {
+        if (val) {
+          if (val > 100) {
+            formData.data.advanceRatio = 100;
+          } else if (val < 0) {
+            formData.data.advanceRatio = 0;
+          }
+        }
+      },
+    },
+    {
+      type: "picker",
+      label: proxy.t("contract.shroffAccountId"),
+      prop: "shroffAccountId",
+      itemType: "onePicker",
+      showPicker: false,
+      fieldNames: {
+        text: "label",
+        value: "value",
+      },
+      data: [],
+    },
+    {
+      type: "title",
+      title: proxy.t("contract.deliveryInformation"),
+    },
+    {
+      type: "picker",
+      label: proxy.t("contract.tradeMethods"),
+      prop: "tradeMethods",
+      itemType: "onePicker",
+      showPicker: false,
+      fieldNames: {
+        text: "label",
+        value: "value",
+      },
+      data: [],
+    },
+    {
+      type: "picker",
+      label: proxy.t("contract.transportMethod"),
+      prop: "transportMethod",
+      itemType: "onePicker",
+      showPicker: false,
+      fieldNames: {
+        text: "label",
+        value: "value",
+      },
+      data: [],
+    },
+    {
+      type: "input",
+      label: proxy.t("contract.transportRemark"),
+      prop: "transportRemark",
+      itemType: "text",
+    },
+    {
+      type: "input",
+      label: proxy.t("contract.remarks"),
+      prop: "remark",
+      itemType: "textarea",
+    },
+    {
+      type: "input",
+      label: proxy.t("contract.warranty"),
+      prop: "warranty",
+      itemType: "digit",
+    },
+    {
+      type: "input",
+      label: proxy.t("contract.deliveryTime"),
+      prop: "deliveryTime",
+      itemType: "digit",
+    },
+  ]);
+  const formShipmentOption = reactive({
+    readonly: false,
+    disabled: false,
+    labelAlign: "top",
+    scroll: true,
+    labelWidth: "62pk",
+    hiddenSubmitBtn: true,
+    btnConfig: {
+      isNeed: false,
+      prop: "contractShipmentList",
+      plain: true,
+      listTitle: proxy.t("contract.commodity"),
+      listConfig: [
+        {
+          type: "input",
+          label: proxy.t("contract.productName"),
+          prop: "productName",
+          itemType: "text",
+          readonly: true,
+          placeholder: proxy.t("contract.productNamePlaceholder"),
+        },
+        {
+          type: "picker",
+          label: proxy.t("contract.shipmentTime"),
+          prop: "shipmentTime",
+          itemType: "datePicker",
+          showPicker: false,
+          split: "-",
+          columnsType: ["year", "month", "day"],
+        },
+        {
+          type: "input",
+          label: proxy.t("contract.quantityShipment"),
+          prop: "quantity",
+          itemType: "number",
+        },
+      ],
+    },
+  });
+  const rules = {
+    contractType: [{ required: true, message: proxy.t("contract.contractTypeMsg") }],
+    contractTemplateId: [{ required: true, message: proxy.t("contract.contractTemplateIdMsg") }],
+    sellCorporationId: [{ required: true, message: proxy.t("contract.sellCorporationIdMsg") }],
+    buyCorporationId: [{ required: true, message: proxy.t("contract.buyCorporationIdMsg") }],
+    sellCity: [{ required: true, message: proxy.t("contract.cityMsg") }],
+    countryCity: [{ required: true, message: proxy.t("contract.cityMsg") }],
+    sellAddress: [{ required: true, message: proxy.t("contract.addressMsg") }],
+    buyAddress: [{ required: true, message: proxy.t("contract.addressMsg") }],
+    sellContactName: [{ required: true, message: proxy.t("contract.contactNameMsg") }],
+    sellContactNumber: [{ required: true, message: proxy.t("contract.contactNumberMsg") }],
+    // buyPostalCode: [{ required: true, message: proxy.t("contract.postalCodeMsg") }],
+    buyContactName: [{ required: true, message: proxy.t("contract.contactNameMsg") }],
+    buyContactNumber: [{ required: true, message: proxy.t("contract.contactNumberMsg") }],
+    productId: [{ required: true, message: proxy.t("contract.productIdMsg") }],
+    productName: [{ required: true, message: proxy.t("contract.productNameMsg") }],
+    productModel: [{ required: true, message: proxy.t("contract.productModelMsg") }],
+    quantity: [{ required: true, message: proxy.t("contract.quantityMsg") }],
+    price: [{ required: true, message: proxy.t("contract.priceMsg") }],
+    payName: [{ required: true, message: proxy.t("contract.chargeItemMsg") }],
+    amount: [{ required: true, message: proxy.t("contract.amountMsg") }],
+  };
+  const rulesTwo = {
+    currency: [{ required: true, message: proxy.t("contract.currencyMsg") }],
+    paymentMethod: [{ required: true, message: proxy.t("contract.paymentMethodMsg") }],
+    advanceRatio: [{ required: true, message: proxy.t("contract.advanceRatioMsg") }],
+    shroffAccountId: [{ required: true, message: proxy.t("contract.shroffAccountIdMsg") }],
+    tradeMethods: [{ required: true, message: proxy.t("contract.tradeMethodsMsg") }],
+    transportMethod: [{ required: true, message: proxy.t("contract.transportMethodMsg") }],
+    transportRemark: [{ required: true, message: proxy.t("contract.transportRemarkMsg") }],
+    remark: [{ required: true, message: proxy.t("contract.remarksMsg") }],
+  };
+  const getDict = () => {
+    let query = {
+      pageNum: 1,
+      pageSize: 999,
+      tenantId: getUserInfo().tenantId,
+    };
+    proxy.post("/dictTenantData/page", { ...query, dictCode: "contract_type" }).then((res) => {
+      if (res.data.rows && res.data.rows.length > 0) {
+        formConfig[0].data = res.data.rows.map((item) => {
+          return {
+            label: item.dictValue,
+            value: item.dictKey,
+          };
+        });
+      }
+    });
+    proxy.post("/contractTemplate/page", { pageNum: 1, pageSize: 999 }).then((res) => {
+      if (res.data.rows && res.data.rows.length > 0) {
+        formConfig[1].data = res.data.rows.map((item) => {
+          return {
+            ...item,
+            label: item.templateName,
+            value: item.id,
+          };
+        });
+      }
+    });
+    proxy.post("/corporation/page", { pageNum: 1, pageSize: 999 }).then((res) => {
+      if (res.data.rows && res.data.rows.length > 0) {
+        formConfig[3].data = res.data.rows.map((item) => {
+          return {
+            ...item,
+            label: item.name,
+            value: item.id,
+          };
+        });
+      }
+    });
+    proxy.post("/productInfo/page", { pageNum: 1, pageSize: 9999, definition: "1" }).then((res) => {
+      if (res.data.rows && res.data.rows.length > 0) {
+        formGoodsOption.btnConfig.listConfig[0].data = res.data.rows.map((item) => {
+          return {
+            ...item,
+            label: item.name,
+            value: item.id,
+          };
+        });
+      }
+    });
+    proxy.post("/dictTenantData/page", { ...query, dictCode: "account_currency" }).then((res) => {
+      if (res.data.rows && res.data.rows.length > 0) {
+        formDeliveryConfig[1].data = res.data.rows.map((item) => {
+          return {
+            label: item.dictValue,
+            value: item.dictKey,
+          };
+        });
+      }
+    });
+    proxy.post("/dictTenantData/page", { ...query, dictCode: "funds_payment_method" }).then((res) => {
+      if (res.data.rows && res.data.rows.length > 0) {
+        formDeliveryConfig[3].data = res.data.rows.map((item) => {
+          return {
+            label: item.dictValue,
+            value: item.dictKey,
+          };
+        });
+      }
+    });
+    proxy.post("/accountManagement/page", { pageNum: 1, pageSize: 999 }).then((res) => {
+      if (res.data.rows && res.data.rows.length > 0) {
+        formDeliveryConfig[5].data = res.data.rows.map((item) => {
+          return {
+            ...item,
+            label: item.alias,
+            value: item.id,
+          };
+        });
+      }
+    });
+    proxy.post("/dictTenantData/page", { ...query, dictCode: "trade_mode" }).then((res) => {
+      if (res.data.rows && res.data.rows.length > 0) {
+        formDeliveryConfig[7].data = res.data.rows.map((item) => {
+          return {
+            label: item.dictValue,
+            value: item.dictKey,
+          };
+        });
+      }
+    });
+    proxy.post("/dictTenantData/page", { ...query, dictCode: "shipping_method" }).then((res) => {
+      if (res.data.rows && res.data.rows.length > 0) {
+        formDeliveryConfig[8].data = res.data.rows.map((item) => {
+          return {
+            label: item.dictValue,
+            value: item.dictKey,
+          };
+        });
+      }
+    });
+    if (["10", "20"].includes(route.query.processType)) {
+      proxy.post("/customer/page", { pageNum: 1, pageSize: 999 }).then((res) => {
+        if (res.data.rows && res.data.rows.length > 0) {
+          formConfig[9].data = res.data.rows.map((item) => {
+            return {
+              ...item,
+              label: item.name,
+              value: item.id,
+            };
+          });
+        }
+      });
+    } else {
+      proxy.post("/customer/privateSeaPage", { pageNum: 1, pageSize: 999 }).then((res) => {
+        if (res.data.rows && res.data.rows.length > 0) {
+          formConfig[9].data = res.data.rows.map((item) => {
+            return {
+              ...item,
+              label: item.name,
+              value: item.id,
+            };
+          });
+        }
+      });
+    }
+  };
+  getDict();
+  const calculatedAmount = () => {
+    if (formData.data.contractProductList && formData.data.contractProductList.length > 0) {
+      for (let i = 0; i < formData.data.contractProductList.length; i++) {
+        let money = 0;
+        if (formData.data.contractProductList[i].quantity && formData.data.contractProductList[i].price) {
+          money = Number(Math.round(Number(formData.data.contractProductList[i].quantity) * Number(formData.data.contractProductList[i].price) * 10000) / 10000);
+        }
+        formData.data.contractProductList[i].amount = money;
+      }
+    }
+    handleChangeAmount();
+  };
+  const handleChangeAmount = () => {
+    let money = 0;
+    let amountProduct = 0;
+    let amountProject = 0;
+    if (formData.data.contractProductList && formData.data.contractProductList.length > 0) {
+      for (let i = 0; i < formData.data.contractProductList.length; i++) {
+        if (formData.data.contractProductList[i].amount) {
+          money = Number(Math.round((Number(money) + Number(formData.data.contractProductList[i].amount)) * 10000) / 10000);
+          amountProduct = Number(Math.round((Number(amountProduct) + Number(formData.data.contractProductList[i].amount)) * 10000) / 10000);
+        }
+      }
+    }
+    if (formData.data.contractProjectList && formData.data.contractProjectList.length > 0) {
+      for (let i = 0; i < formData.data.contractProjectList.length; i++) {
+        if (formData.data.contractProjectList[i].amount) {
+          money = Number(Math.round((Number(money) + Number(formData.data.contractProjectList[i].amount)) * 10000) / 10000);
+          amountProject = Number(Math.round((Number(amountProject) + Number(formData.data.contractProjectList[i].amount)) * 10000) / 10000);
+        }
+      }
+    }
+    formData.data.amount = money;
+    formData.data.amountProduct = amountProduct;
+    formData.data.amountProject = amountProject;
+  };
+  const handleSubmit = async () => {
+    const flag = await formDom1.value.validateForm().then((status) => {
+      if (status) {
+        active.value = 0;
+        return false;
+      } else {
+        if (!(formData.data.contractProductList && formData.data.contractProductList.length > 0)) {
+          active.value = 1;
+          showFailToast(proxy.t("contract.pleaseAddProduct"));
+          return false;
+        }
+        return formDom2.value.validateForm().then((status1) => {
+          if (status1) {
+            active.value = 1;
+            return false;
+          } else {
+            return formDom4.value.validateForm().then((status2) => {
+              if (status2) {
+                active.value = 2;
+                return false;
+              } else {
+                return formDom6.value.validateForm().then((status3) => {
+                  if (status3) {
+                    active.value = 3;
+                    return false;
+                  } else {
+                    return true;
+                  }
+                });
+              }
+            });
+          }
+        });
+      }
+    });
+    if (flag) {
+      return formData.data;
+    }
+  };
+  let status = ref(true);
+  watch(
+    refProps.queryData,
+    () => {
+      if (refProps.queryData.value && ["10", "20", "30"].includes(route.query.processType)) {
+        for (const key in refProps.queryData.value) {
+          formData.data[key] = refProps.queryData.value[key];
+        }
+        formDom1.value.formDataShowLabelOne();
+        formDom2.value.formDataListShowLabelOne();
+        formDom6.value.formDataShowLabelOne();
+        if (!formData.data.sellCity) {
+          let sellCity = "";
+          if (formData.data.sellCountryName) {
+            sellCity = formData.data.sellCountryName;
+          }
+          if (formData.data.sellProvinceName) {
+            sellCity = sellCity + " " + formData.data.sellProvinceName;
+          }
+          if (formData.data.sellCityName) {
+            sellCity = sellCity + " " + formData.data.sellCityName;
+          }
+          formData.data.sellCity = sellCity;
+        }
+        if (["10", "20"].includes(route.query.processType)) {
+          formOption.readonly = true;
+          formGoodsOption.readonly = true;
+          formGoodsOption.btnConfig.isNeed = false;
+          formProjectOption.readonly = true;
+          formProjectOption.btnConfig.isNeed = false;
+          formShipmentOption.readonly = true;
+        }
+        handleChangeAmount();
+        if (status.value) {
+          if (!formData.data.countryCityName) {
+            if (formData.data.countryId) {
+              let countryCityName = "";
+              formData.data.countryCity = formData.data.countryId;
+              proxy.post("/customizeArea/list", { parentId: "0" }).then((res) => {
+                let list = res.data.filter((item) => item.id == formData.data.countryId);
+                if (list && list.length > 0) {
+                  countryCityName = list[0].name;
+                  formData.data.countryCityName = countryCityName;
+                }
+                if (formData.data.provinceId) {
+                  formData.data.countryCity = formData.data.provinceId;
+                  proxy.post("/customizeArea/list", { parentId: formData.data.countryId }).then((res) => {
+                    let list = res.data.filter((item) => item.id == formData.data.provinceId);
+                    if (list && list.length > 0) {
+                      countryCityName = countryCityName + " " + list[0].name;
+                      formData.data.countryCityName = countryCityName;
+                    }
+                    if (formData.data.cityId) {
+                      formData.data.countryCity = formData.data.cityId;
+                      proxy.post("/customizeArea/list", { parentId: formData.data.provinceId }).then((res) => {
+                        let list = res.data.filter((item) => item.id == formData.data.cityId);
+                        if (list && list.length > 0) {
+                          countryCityName = countryCityName + " " + list[0].name;
+                          formData.data.countryCityName = countryCityName;
+                        }
+                      });
+                    }
+                  });
+                }
+              });
+            }
+          }
+          status.value = false;
+        }
+      }
+    },
+    {
+      deep: true,
+    }
+  );
+  defineExpose({
+    handleSubmit,
+    tabsChange,
+  });
+  onMounted(() => {
+    proxy.post("/contract/detail", { id: props.queryData.contractId }).then((res) => {
+      
+      for (const key in res.data) {
+        formData.data[key] = res.data[key];
+      }
+      formDom2.value.formDataListShowLabelOne();
+      handleChangeAmount();
+      if (!formData.data.countryCityName) {
+        if (formData.data.buyCountryId) {
+          let countryCityName = "";
+          formData.data.countryCity = formData.data.buyCountryId;
+          proxy.post("/customizeArea/list", { parentId: "0" }).then((res) => {
+            let list = res.data.filter((item) => item.id == formData.data.buyCountryId);
+            if (list && list.length > 0) {
+              countryCityName = list[0].name;
+              formData.data.countryCityName = countryCityName;
+            }
+            if (formData.data.buyProvinceId) {
+              formData.data.countryCity = formData.data.buyProvinceId;
+              proxy.post("/customizeArea/list", { parentId: formData.data.buyCountryId }).then((res) => {
+                let list = res.data.filter((item) => item.id == formData.data.buyProvinceId);
+                if (list && list.length > 0) {
+                  countryCityName = countryCityName + " " + list[0].name;
+                  formData.data.countryCityName = countryCityName;
+                }
+                if (formData.data.buyCityId) {
+                  formData.data.countryCity = formData.data.buyCityId;
+                  proxy.post("/customizeArea/list", { parentId: formData.data.buyProvinceId }).then((res) => {
+                    let list = res.data.filter((item) => item.id == formData.data.buyCityId);
+                    if (list && list.length > 0) {
+                      countryCityName = countryCityName + " " + list[0].name;
+                      formData.data.countryCityName = countryCityName;
+                    }
+                  });
+                }
+              });
+            }
+          });
+        }
+      }
+      
+    })
+  });
+  </script>
+  <style lang="scss" scoped></style>
+  

src/views/processApproval/processDtl.vue

@@ -68,7 +68,7 @@ import PriceSheet from './components/PriceSheet'
 import Contract from './components/Contract'
 import SendPurchase from './components/SendPurchase'
 import SendPurchasePayment from './components/SendPurchasePayment'
-
+import ContractAlteration from './components/ContractAlteration'
 import { showSuccessToast, showFailToast } from 'vant'
 const route = useRoute()
 const proxy = getCurrentInstance().proxy
@@ -125,17 +125,22 @@ let componentObj = ref({
 		backUrl: '/main/contract',
 		tabsNum: 5,
 	},
-	
-		purchase_flow: {
+	purchase_flow: {
 		title: '采购',
 		component: SendPurchase,
 		backUrl: '/main/procureList',
 	},
-		pay_flow: {
+	pay_flow: {
 		title: '采购付款',
 		component: SendPurchasePayment,
 		backUrl: '/main/purchasePayment',
 	},
+	contract_update_flow: {
+		title: '销售合同变更',
+		component: ContractAlteration,
+		backUrl: '/main/contract',
+		tabsNum: 5,
+	},
 })
 
 let dialogVisible = ref(false)