1

src/views/processApproval/components/EhsdPriceSheet.vue

@@ -0,0 +1,1329 @@
+<template>
+  <div class="form">
+    <van-tabs v-model:active="active">
+      <van-tab :title="proxy.t('contract.transactionInformation')" />
+      <van-tab title="付款信息" />
+      <van-tab :title="proxy.t('contract.commodityInformation')" />
+      <van-tab :title="proxy.t('contract.otherCharges')" />
+      <!-- <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">付款信息</div>
+        <testForm
+          v-model="formData.data"
+          :formOption="formOption"
+          :formConfig="formConfigOne"
+          :rules="rules"
+          ref="formDom2"
+        >
+        </testForm>
+      </div>
+      <div class="common-process-card" v-show="active == 2">
+        <div class="common-title">商品信息</div>
+        <testForm
+          v-model="formData.data"
+          :formOption="formGoodsOption"
+          :formConfig="formEmptyConfig"
+          :rules="rules"
+          ref="formDom3"
+        >
+        </testForm>
+      </div>
+      <div class="common-process-card" v-show="active == 3">
+        <div class="common-title">其他收费</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>
+    </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 innerMethod = ref([]);
+const outsideMethod = ref([]);
+
+const formData = reactive({
+  data: {
+    quotationProductList: [],
+    quotationPayList: [],
+    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 formOption = reactive({
+  readonly: false,
+  disabled: false,
+  labelAlign: "top",
+  scroll: true,
+  labelWidth: "62pk",
+  hiddenSubmitBtn: true,
+});
+const formConfig = reactive([
+  {
+    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: false,
+  },
+  {
+    type: "input",
+    label: proxy.t("contract.cityText"),
+    prop: "sellCity",
+    itemType: "text",
+    readonly: false,
+  },
+  {
+    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;
+                }
+              }
+            }
+            // 回填客户的账户信息
+            formData.data.beneficiaryName = res.data.beneficiaryName;
+            formData.data.beneficiaryBank = res.data.beneficiaryBank;
+            formData.data.beneficiaryBankAddress =
+              res.data.beneficiaryBankAddress;
+            formData.data.beneficiaryAccountNumber =
+              res.data.beneficiaryAccountNumber;
+
+            formData.data.swiftCode = res.data.swiftCode;
+            formData.data.beneficiaryAddress = res.data.beneficiaryAddress;
+            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 formConfigOne = reactive([
+  {
+    type: "picker",
+    label: "币种",
+    prop: "currency",
+    itemType: "onePicker",
+    showPicker: false,
+    fieldNames: {
+      text: "label",
+      value: "value",
+    },
+    data: [],
+    readonly: false,
+  },
+  // {
+  //   type: "input",
+  //   label: "汇率",
+  //   prop: "rate",
+  //   itemType: "number",
+  //   readonly: false,
+  // },
+  {
+    type: "picker",
+    label: "付款方式",
+    prop: "paymentMethod",
+    itemType: "onePicker",
+    showPicker: false,
+    fieldNames: {
+      text: "label",
+      value: "value",
+    },
+    data: [],
+    readonly: false,
+  },
+  {
+    type: "input",
+    label: "预付比例",
+    prop: "advanceRatio",
+    itemType: "number",
+    readonly: false,
+  },
+  {
+    type: "input",
+    label: "付款条件",
+    prop: "remark",
+    itemType: "textarea",
+  },
+  {
+    type: "title",
+    title: "交付信息",
+  },
+  {
+    type: "input",
+    label: "报价有效期 (天)",
+    prop: "effective",
+    itemType: "number",
+    readonly: false,
+  },
+  {
+    type: "picker",
+    label: "交货期限",
+    prop: "deliveryTime",
+    itemType: "datePicker",
+    showPicker: false,
+    split: "-",
+    columnsType: ["year", "month", "day"],
+  },
+  {
+    type: "picker",
+    label: "运输方式",
+    prop: "transportMethod",
+    itemType: "onePicker",
+    showPicker: false,
+    fieldNames: {
+      text: "label",
+      value: "value",
+    },
+    data: [],
+    readonly: false,
+  },
+  {
+    type: "input",
+    label: "运输说明",
+    prop: "transportRemark",
+    itemType: "text",
+  },
+]);
+const formGoodsOption = reactive({
+  readonly: false,
+  disabled: false,
+  labelAlign: "top",
+  scroll: true,
+  labelWidth: "62pk",
+  hiddenSubmitBtn: true,
+  btnConfig: {
+    isNeed: true,
+    prop: "quotationProductList",
+    plain: true,
+    listTitle: "商品信息",
+    listConfig: [
+      {
+        type: "picker",
+        label: "商品名称",
+        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];
+            if (list[0].ehsdJson) {
+              let ehsdJson = JSON.parse(list[0].ehsdJson);
+              if (ehsdJson) {
+                formData.data[propName][index].productName =
+                  ehsdJson.nameEnglish || "";
+                formData.data.contractShipmentList[index].productName =
+                  ehsdJson.nameEnglish || list[0][data.fieldNames.text];
+                formData.data.contractShipmentList[index].productCode =
+                  list[0].code;
+                formData.data[propName][index].productModel =
+                  ehsdJson.productLong +
+                  "*" +
+                  ehsdJson.productWide +
+                  "*" +
+                  ehsdJson.productHigh;
+                // 包装方式
+                let str = "";
+                let strOne = "";
+                if (ehsdJson.innerPackMethod) {
+                  let innerPackMethodArr = ehsdJson.innerPackMethod.split(",");
+                  innerPackMethodArr = innerPackMethodArr.map((x) =>
+                    proxy.dictValueLabel(x, innerMethod.value)
+                  );
+                  str += innerPackMethodArr.join(",");
+                }
+                if (ehsdJson.outerPackMethod) {
+                  let outerPackMethodArr = ehsdJson.outerPackMethod.split(",");
+                  outerPackMethodArr = outerPackMethodArr.map((x) =>
+                    proxy.dictValueLabel(x, outsideMethod.value)
+                  );
+                  strOne += outerPackMethodArr.join(",");
+                }
+                formData.data[propName][index].packMethod = str + "," + strOne;
+              }
+            }
+          } 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: "商品名称",
+        prop: "productName",
+        itemType: "text",
+      },
+      {
+        type: "input",
+        label: "尺寸 cm*cm*cm",
+        prop: "productModel",
+        itemType: "text",
+      },
+      {
+        type: "input",
+        label: "包装方式",
+        prop: "packMethod",
+        itemType: "text",
+      },
+      {
+        type: "input",
+        label: "数量",
+        prop: "quantity",
+        itemType: "number",
+        changeFn: () => {
+          calculatedAmount();
+        },
+      },
+      {
+        type: "input",
+        label: "单价",
+        prop: "price",
+        itemType: "number",
+        changeFn: () => {
+          calculatedAmount();
+        },
+      },
+      {
+        type: "picker",
+        label: "贸易方式",
+        prop: "tradeMethods",
+        itemType: "onePicker",
+        showPicker: false,
+        fieldNames: {
+          text: "label",
+          value: "value",
+        },
+        data: [],
+        readonly: false,
+      },
+      {
+        type: "input",
+        label: "金额",
+        prop: "amount",
+        itemType: "number",
+        changeFn: () => {
+          calculatedAmount();
+        },
+      },
+    ],
+    clickFn: () => {
+      if (
+        formData.data.quotationProductList &&
+        formData.data.quotationProductList.length > 0
+      ) {
+        formData.data.quotationProductList.push({
+          productId: null,
+          productName: null,
+          productModel: null,
+          quantity: null,
+          price: null,
+          amount: null,
+          remark: null,
+        });
+        formData.data.contractShipmentList.push({
+          productId: null,
+          productName: null,
+          productCode: null,
+          shipmentTime: null,
+          quantity: null,
+          remark: null,
+        });
+      } else {
+        formData.data.quotationProductList = [
+          {
+            productId: null,
+            productName: null,
+            productModel: null,
+            quantity: null,
+            price: null,
+            amount: null,
+            remark: null,
+          },
+        ];
+        formData.data.contractShipmentList = [
+          {
+            productId: null,
+            productName: null,
+            productCode: null,
+            shipmentTime: null,
+            quantity: null,
+            remark: null,
+          },
+        ];
+      }
+    },
+    deleteFn: (index) => {
+      formData.data.quotationProductList.splice(index, 1);
+      formData.data.contractShipmentList.splice(index, 1);
+      handleChangeAmount();
+    },
+  },
+});
+const formEmptyConfig = reactive([]);
+
+const formAmountProjectConfig = reactive([
+  {
+    type: "title",
+    title: "合同总金额",
+  },
+  {
+    type: "input",
+    label: "合同总金额",
+    prop: "amount",
+    itemType: "text",
+    readonly: true,
+  },
+]);
+const formProjectOption = reactive({
+  readonly: false,
+  disabled: false,
+  labelAlign: "top",
+  scroll: true,
+  labelWidth: "62pk",
+  hiddenSubmitBtn: true,
+  btnConfig: {
+    isNeed: true,
+    prop: "quotationPayList",
+    plain: true,
+    listTitle: "收费项目",
+    listConfig: [
+      {
+        type: "input",
+        label: "收费项目",
+        prop: "payName",
+        itemType: "text",
+      },
+      {
+        type: "input",
+        label: "金额",
+        prop: "amount",
+        itemType: "number",
+        changeFn: () => {
+          handleChangeAmount();
+        },
+      },
+      {
+        type: "input",
+        label: "备注",
+        prop: "remark",
+        itemType: "textarea",
+      },
+    ],
+    clickFn: () => {
+      if (
+        formData.data.quotationPayList &&
+        formData.data.quotationPayList.length > 0
+      ) {
+        formData.data.quotationPayList.push({
+          payName: null,
+          amount: null,
+          remark: null,
+        });
+      } else {
+        formData.data.quotationPayList = [
+          {
+            payName: null,
+            amount: null,
+            remark: null,
+          },
+        ];
+      }
+    },
+    deleteFn: (index) => {
+      formData.data.quotationPayList.splice(index, 1);
+      handleChangeAmount();
+    },
+  },
+});
+
+const formShipmentOption = reactive({
+  readonly: false,
+  disabled: false,
+  labelAlign: "top",
+  scroll: true,
+  labelWidth: "62pk",
+  hiddenSubmitBtn: true,
+  btnConfig: {
+    isNeed: false,
+    prop: "contractShipmentList",
+    plain: true,
+    listTitle: "商品",
+    listConfig: [
+      {
+        type: "picker",
+        label: "出货日期",
+        prop: "shipmentTime",
+        itemType: "datePicker",
+        showPicker: false,
+        split: "-",
+        columnsType: ["year", "month", "day"],
+      },
+      {
+        type: "input",
+        label: "商品编码",
+        prop: "productCode",
+        itemType: "text",
+      },
+      {
+        type: "input",
+        label: "商品名称",
+        prop: "productName",
+        itemType: "text",
+      },
+      {
+        type: "input",
+        label: "出货数量",
+        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 getProduct = () => {
+  return new Promise((resolve, reject) => {
+    proxy
+      .post("productInfo/getConditionProductList", {
+        pageNum: 1,
+        pageSize: 9999,
+        definition: "1",
+      })
+      .then((res) => {
+        if (res.data.rows && res.data.rows.length > 0) {
+          const data = res.data.rows.map((item) => {
+            return {
+              ...item,
+              label: item.name,
+              value: item.id,
+            };
+          });
+          resolve(data);
+        }
+      });
+  });
+};
+
+const getProductOne = () => {
+  return new Promise((resolve, reject) => {
+    proxy
+      .post("productInfo/getCustomerProductList", {
+        pageNum: 1,
+        pageSize: 9999,
+        definition: "1",
+        customerId: "",
+      })
+      .then((res) => {
+        if (res.data.rows && res.data.rows.length > 0) {
+          const data = res.data.rows.map((item) => {
+            return {
+              ...item,
+              label: item.name,
+              value: item.id,
+            };
+          });
+          resolve(data);
+        }
+      });
+  });
+};
+const getDict = () => {
+  let query = {
+    pageNum: 1,
+    pageSize: 999,
+    tenantId: getUserInfo().tenantId,
+  };
+
+  proxy
+    .post("/contractTemplate/page", { pageNum: 1, pageSize: 999 })
+    .then((res) => {
+      formConfig[0].data = res.data.rows.map((item) => {
+        return {
+          ...item,
+          label: item.templateName,
+          value: item.id,
+        };
+      });
+    });
+  // 卖方
+  proxy.post("/corporation/page", { pageNum: 1, pageSize: 999 }).then((res) => {
+    formConfig[2].data = res.data.rows.map((item) => {
+      return {
+        ...item,
+        label: item.name,
+        value: item.id,
+      };
+    });
+  });
+  // 买方
+  proxy
+    .post("/customer/selPage", {
+      pageNum: 1,
+      pageSize: 999,
+    })
+    .then((res) => {
+      formConfig[8].data = res.data.rows.map((x) => ({
+        ...x,
+        label: x.name,
+        value: x.id,
+      }));
+    });
+  // 产品
+  Promise.all([getProduct(), getProductOne()]).then((res) => {
+    formGoodsOption.btnConfig.listConfig[0].data = res[0].concat(res[1]);
+  });
+  // 包装方式
+  proxy
+    .post("/dictTenantData/page", {
+      ...query,
+      dictCode: "inner_packaging_method_ehsd",
+    })
+    .then((res) => {
+      if (res.data.rows && res.data.rows.length > 0) {
+        innerMethod.value = res.data.rows.map((item) => {
+          return {
+            label: item.dictValue,
+            value: item.dictKey,
+          };
+        });
+      }
+    });
+  // 包装方式
+  proxy
+    .post("/dictTenantData/page", {
+      ...query,
+      dictCode: "outside_packaging_method_ehsd",
+    })
+    .then((res) => {
+      if (res.data.rows && res.data.rows.length > 0) {
+        outsideMethod.value = res.data.rows.map((item) => {
+          return {
+            label: item.dictValue,
+            value: item.dictKey,
+          };
+        });
+      }
+    });
+
+  // 币种
+  proxy
+    .post("/dictTenantData/page", { ...query, dictCode: "account_currency" })
+    .then((res) => {
+      if (res.data.rows && res.data.rows.length > 0) {
+        formConfigOne[0].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) {
+        formConfigOne[1].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) {
+  //       formConfigOne[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) {
+        formGoodsOption.btnConfig.listConfig[6].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) {
+        formConfigOne[7].data = res.data.rows.map((item) => {
+          return {
+            label: item.dictValue,
+            value: item.dictKey,
+          };
+        });
+      }
+    });
+  // if (["10", "20"].includes(route.query.processType)) {
+  //   proxy
+  //     .post("/customer/selPage", { pageNum: 1, pageSize: 50 })
+  //     .then((res) => {
+  //       formConfig[8].data = res.data.rows.map((x) => ({
+  //         ...x,
+  //         label: x.name,
+  //         value: x.id,
+  //       }));
+  //     });
+  // }
+};
+getDict();
+const calculatedAmount = () => {
+  if (
+    formData.data.quotationProductList &&
+    formData.data.quotationProductList.length > 0
+  ) {
+    for (let i = 0; i < formData.data.quotationProductList.length; i++) {
+      let money = 0;
+      if (
+        formData.data.quotationProductList[i].quantity &&
+        formData.data.quotationProductList[i].price
+      ) {
+        money = Number(
+          Math.round(
+            Number(formData.data.quotationProductList[i].quantity) *
+              Number(formData.data.quotationProductList[i].price) *
+              10000
+          ) / 10000
+        );
+      }
+      formData.data.quotationProductList[i].amount = money;
+    }
+  }
+  handleChangeAmount();
+};
+const handleChangeAmount = () => {
+  let money = 0;
+  let amountProduct = 0;
+  let amountProject = 0;
+  if (
+    formData.data.quotationProductList &&
+    formData.data.quotationProductList.length > 0
+  ) {
+    for (let i = 0; i < formData.data.quotationProductList.length; i++) {
+      if (formData.data.quotationProductList[i].amount) {
+        money = Number(
+          Math.round(
+            (Number(money) +
+              Number(formData.data.quotationProductList[i].amount)) *
+              10000
+          ) / 10000
+        );
+        amountProduct = Number(
+          Math.round(
+            (Number(amountProduct) +
+              Number(formData.data.quotationProductList[i].amount)) *
+              10000
+          ) / 10000
+        );
+      }
+    }
+  }
+  if (
+    formData.data.quotationPayList &&
+    formData.data.quotationPayList.length > 0
+  ) {
+    for (let i = 0; i < formData.data.quotationPayList.length; i++) {
+      if (formData.data.quotationPayList[i].amount) {
+        money = Number(
+          Math.round(
+            (Number(money) + Number(formData.data.quotationPayList[i].amount)) *
+              10000
+          ) / 10000
+        );
+        amountProject = Number(
+          Math.round(
+            (Number(amountProject) +
+              Number(formData.data.quotationPayList[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.quotationProductList &&
+          formData.data.quotationProductList.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) {
+    formData.data.quotationProductList = formData.data.quotationProductList.map(
+      (item) => {
+        let ehsdJson = JSON.stringify({
+          packMethod: item.packMethod,
+          tradeMethods: item.tradeMethods,
+        });
+        return {
+          ...item,
+          ehsdJson: ehsdJson,
+        };
+      }
+    );
+    return formData.data;
+  }
+};
+let status = ref(true);
+onMounted(() => {
+  if (route.query && route.query.businessId) {
+    let businessId = route.query.businessId;
+    proxy.post("/saleQuotation/detail", { id: businessId }).then((res) => {
+      res.data.countryId = res.data.buyCountryId;
+      res.data.provinceId = res.data.buyProvinceId;
+      res.data.cityId = res.data.buyCityId;
+      for (const key in res.data) {
+        formData.data[key] = res.data[key];
+      }
+      if (formData.data.ehsdJson) {
+        let ehsdJson = JSON.parse(formData.data.ehsdJson);
+        if (ehsdJson.deliveryTime) {
+          formData.data.deliveryTime = ehsdJson.deliveryTime;
+        }
+      }
+      formData.data.sellCity =
+        formData.data.sellCountryName +
+        " " +
+        formData.data.sellProvinceName +
+        " " +
+        formData.data.sellCityName;
+      formData.data.countryCityName =
+        formData.data.buyCountryName +
+        " " +
+        formData.data.buyProvinceName +
+        " " +
+        formData.data.buyCityName;
+
+      if (formData.data.buyCorporationName) {
+        proxy
+          .post("/customer/selPage", {
+            keyword: formData.data.buyCorporationName,
+          })
+          .then((res) => {
+            formConfig[8].data = res.data.rows.map((x) => ({
+              ...x,
+              label: x.name,
+              value: x.id,
+            }));
+          });
+      }
+
+      if (
+        formData.data.quotationProductList &&
+        formData.data.quotationProductList.length > 0
+      ) {
+        for (let i = 0; i < formData.data.quotationProductList.length; i++) {
+          const e = formData.data.quotationProductList[i];
+          if (e.ehsdJson) {
+            let obj = JSON.parse(e.ehsdJson);
+            e.packMethod = obj.packMethod;
+            e.tradeMethods = obj.tradeMethods;
+          }
+        }
+      }
+
+      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;
+      }
+      setTimeout(() => {
+        formDom1.value.formDataShowLabelOne();
+        formDom2.value.formDataShowLabelOne();
+      }, 200);
+    });
+  }
+});
+watch(
+  refProps.queryData,
+  () => {
+    console.log(refProps.queryData, "aa");
+    return;
+    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(() => {});
+</script>
+<style lang="scss" scoped></style>

src/views/processApproval/components/EhsdPurchase.vue

@@ -58,6 +58,17 @@
           :rules="rules"
           ref="formDom5"
         >
+          <template #remark>
+            <div>
+              <van-button
+                plain
+                type="primary"
+                size="mini"
+                @click="showRemark = true"
+                >查看</van-button
+              >
+            </div>
+          </template>
         </testForm>
       </div>
       <div class="common-process-card" v-show="active == 4">
@@ -72,6 +83,16 @@
         </testForm>
       </div>
     </van-tabs>
+    <van-popup
+      closeable
+      v-model:show="showRemark"
+      position="bottom"
+      :style="{ height: '40%' }"
+    >
+      <div style="padding: 10px; padding-bottom: 70px" class="remark-class">
+        <div v-html="formData.data.remark"></div>
+      </div>
+    </van-popup>
   </div>
 </template>
 
@@ -383,10 +404,9 @@ const formAmountProjectConfig = reactive([
     changeFn: (val, data) => {},
   },
   {
-    type: "input",
+    type: "slot",
     label: "条款内容",
-    prop: "remark",
-    itemType: "textarea",
+    slotName: "remark",
     readonly: false,
   },
   {
@@ -597,6 +617,30 @@ const getProduct = () => {
   });
 };
 
+const getProductOne = () => {
+  return new Promise((resolve, reject) => {
+    proxy
+      .post("productInfo/getCustomerProductList", {
+        pageNum: 1,
+        pageSize: 9999,
+        definition: "1",
+        customerId: "",
+      })
+      .then((res) => {
+        if (res.data.rows && res.data.rows.length > 0) {
+          const data = res.data.rows.map((item) => {
+            return {
+              ...item,
+              label: item.name,
+              value: item.id,
+            };
+          });
+          resolve(data);
+        }
+      });
+  });
+};
+
 const getMaterial = () => {
   return new Promise((resolve, reject) => {
     proxy
@@ -650,8 +694,11 @@ const getDict = () => {
   });
 
   // 产品
-  Promise.all([getProduct(), getMaterial()]).then((res) => {
-    formGoodsOption.btnConfig.listConfig[0].data = res[0].concat(res[1]);
+  Promise.all([getProduct(), getProductOne(), getMaterial()]).then((res) => {
+    formGoodsOption.btnConfig.listConfig[0].data = res[0].concat(
+      res[1],
+      res[2]
+    );
   });
 
   // 付款方式
@@ -972,5 +1019,13 @@ defineExpose({
   tabsChange,
 });
 onMounted(() => {});
+const showRemark = ref(false);
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.remark-class {
+  img {
+    max-width: calc(100vw - 20px) !important;
+    object-fit: contain;
+  }
+}
+</style>

src/views/processApproval/components/EhsdPurchaseChange.vue

@@ -58,6 +58,17 @@
           :rules="rules"
           ref="formDom5"
         >
+          <template #remark>
+            <div>
+              <van-button
+                plain
+                type="primary"
+                size="mini"
+                @click="showRemark = true"
+                >查看</van-button
+              >
+            </div>
+          </template>
         </testForm>
       </div>
       <div class="common-process-card" v-show="active == 4">
@@ -72,6 +83,16 @@
         </testForm>
       </div>
     </van-tabs>
+    <van-popup
+      closeable
+      v-model:show="showRemark"
+      position="bottom"
+      :style="{ height: '40%' }"
+    >
+      <div style="padding: 10px; padding-bottom: 70px" class="remark-class">
+        <div v-html="formData.data.remark"></div>
+      </div>
+    </van-popup>
   </div>
 </template>
 
@@ -383,10 +404,9 @@ const formAmountProjectConfig = reactive([
     changeFn: (val, data) => {},
   },
   {
-    type: "input",
+    type: "slot",
     label: "条款内容",
-    prop: "remark",
-    itemType: "textarea",
+    slotName: "remark",
     readonly: false,
   },
   {
@@ -597,6 +617,30 @@ const getProduct = () => {
   });
 };
 
+const getProductOne = () => {
+  return new Promise((resolve, reject) => {
+    proxy
+      .post("productInfo/getCustomerProductList", {
+        pageNum: 1,
+        pageSize: 9999,
+        definition: "1",
+        customerId: "",
+      })
+      .then((res) => {
+        if (res.data.rows && res.data.rows.length > 0) {
+          const data = res.data.rows.map((item) => {
+            return {
+              ...item,
+              label: item.name,
+              value: item.id,
+            };
+          });
+          resolve(data);
+        }
+      });
+  });
+};
+
 const getMaterial = () => {
   return new Promise((resolve, reject) => {
     proxy
@@ -650,8 +694,11 @@ const getDict = () => {
   });
 
   // 产品
-  Promise.all([getProduct(), getMaterial()]).then((res) => {
-    formGoodsOption.btnConfig.listConfig[0].data = res[0].concat(res[1]);
+  Promise.all([getProduct(), getProductOne(), getMaterial()]).then((res) => {
+    formGoodsOption.btnConfig.listConfig[0].data = res[0].concat(
+      res[1],
+      res[2]
+    );
   });
 
   // 付款方式
@@ -972,5 +1019,13 @@ defineExpose({
   tabsChange,
 });
 onMounted(() => {});
+const showRemark = ref(false);
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.remark-class {
+  img {
+    max-width: calc(100vw - 20px) !important;
+    object-fit: contain;
+  }
+}
+</style>

src/views/processApproval/components/SendPurchasePayment.vue

@@ -400,22 +400,24 @@ const fundsPaymentMethod = ref([]);
 const contractList = ref([]);
 const changeSupply = (val, flag) => {
   if (val) {
-    proxy.get("/purchase/getListBySupplyId", { supplyId: val }).then((res) => {
-      if (res.data && res.data.length > 0) {
-        contractList.value = res.data.map((item) => {
-          return {
-            value: item.id,
-            label: item.code,
-            amount: item.amount,
-            sumPayMoney: item.sumPayMoney,
-            sumInvoiceMoney: item.sumInvoiceMoney,
-          };
-        });
-      } else {
-        contractList.value = [];
-      }
-      formOption.btnConfig.listConfig[0].data = contractList.value;
-    });
+    proxy
+      .get("/ehsdPurchase/getListBySupplyId", { supplyId: val })
+      .then((res) => {
+        if (res.data && res.data.length > 0) {
+          contractList.value = res.data.map((item) => {
+            return {
+              value: item.id,
+              label: item.code,
+              amount: item.amount,
+              sumPayMoney: item.sumPayMoney,
+              sumInvoiceMoney: item.sumInvoiceMoney,
+            };
+          });
+        } else {
+          contractList.value = [];
+        }
+        formOption.btnConfig.listConfig[0].data = contractList.value;
+      });
   } else {
     contractList.value = [];
   }

src/views/processApproval/processDtl.vue

@@ -122,7 +122,8 @@
             style="backround: #f1f1f1"
           />
         </div>
-        <div class="load-btn-box">
+        <div style="height: 10px"></div>
+        <!-- <div class="load-btn-box">
           <van-button
             size="small"
             type="primary"
@@ -134,7 +135,7 @@
             @click="handleSubmit(i.type)"
             >{{ i.name }}
           </van-button>
-        </div>
+        </div> -->
         <div class="content">
           <div class="foot-btn-warp">
             <div class="agree-btn" @click="handleSubmit(1)">同意</div>
@@ -150,7 +151,7 @@ import { ref, getCurrentInstance, onMounted, reactive } from "vue";
 import { useRoute } from "vue-router";
 import SendSubscribe from "./components/SendSubscribe";
 import SendFunds from "./components/SendFunds";
-import PriceSheet from "./components/PriceSheet";
+// import PriceSheet from "./components/PriceSheet";
 import Contract from "./components/Contract";
 import EhsdContract from "./components/EhsdContract";
 import EhsdContractChange from "./components/EhsdContractChange";
@@ -158,6 +159,7 @@ import EhsdSample from "./components/EhsdSample";
 import EhsdSampleChange from "./components/EhsdSampleChange";
 import EhsdPurchase from "./components/EhsdPurchase";
 import EhsdPurchaseChange from "./components/EhsdPurchaseChange";
+import EhsdPriceSheet from "./components/EhsdPriceSheet";
 
 import SendPurchase from "./components/SendPurchase";
 import SendPurchasePayment from "./components/SendPurchasePayment";
@@ -215,8 +217,8 @@ let componentObj = ref({
   },
   sale_quotation_flow: {
     title: "报价单",
-    component: PriceSheet,
-    backUrl: "/main/priceSheet",
+    component: EhsdPriceSheet,
+    backUrl: "/main/working",
     tabsNum: 4,
   },
   contract_flow: {
@@ -233,7 +235,7 @@ let componentObj = ref({
   pay_flow: {
     title: "采购付款",
     component: SendPurchasePayment,
-    backUrl: "/main/purchasePayment",
+    backUrl: "/main/working",
   },
   contract_update_flow: {
     title: "销售合同变更",