byte-sailing-mobile/src/views/processApproval/components/PriceSheet.vue

<template>
  <div class="form">
    <van-tabs v-model:active="active">
      <van-tab :title="proxy.t('priceSheet.transactionInformation')" />
      <van-tab :title="proxy.t('priceSheet.quotationDetails')" />
      <van-tab :title="proxy.t('priceSheet.otherCharges')" />
      <van-tab :title="proxy.t('priceSheet.otherInformation')" />
      <div class="common-process-card" v-show="active == 0">
        <div class="common-title">{{ proxy.t("priceSheet.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("priceSheet.quotationDetails") }}</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("priceSheet.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("priceSheet.otherInformation") }}</div>
        <testForm v-model="formData.data" :formOption="formOption" :formConfig="formDeliveryConfig" :rules="rulesTwo" ref="formDom6"> </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: {
    quotationProductList: [],
    quotationPayList: [],
  },
});
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("priceSheet.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("priceSheet.sellerInformation"),
  },
  {
    type: "picker",
    label: proxy.t("priceSheet.sellCorporationId"),
    prop: "sellCorporationId",
    itemType: "onePicker",
    showPicker: false,
    fieldNames: {
      text: "label",
      value: "value",
    },
    data: [],
    readonly: true,
  },
  {
    type: "input",
    label: proxy.t("priceSheet.cityText"),
    prop: "sellCity",
    itemType: "text",
    readonly: true,
  },
  {
    type: "input",
    label: proxy.t("priceSheet.address"),
    prop: "sellAddress",
    itemType: "textarea",
  },
  {
    type: "input",
    label: proxy.t("priceSheet.contactName"),
    prop: "sellContactName",
    itemType: "text",
  },
  {
    type: "input",
    label: proxy.t("priceSheet.contactNumber"),
    prop: "sellContactNumber",
    itemType: "text",
  },
  {
    type: "title",
    title: proxy.t("priceSheet.buyerInformation"),
  },
  {
    type: "picker",
    label: proxy.t("priceSheet.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("priceSheet.cityText"),
    prop: "countryCity",
    itemType: "city",
    showPicker: false,
  },
  {
    type: "input",
    label: proxy.t("priceSheet.address"),
    prop: "buyAddress",
    itemType: "textarea",
  },
  {
    type: "input",
    label: proxy.t("priceSheet.postalCode"),
    prop: "buyPostalCode",
    itemType: "text",
  },
  {
    type: "input",
    label: proxy.t("priceSheet.contactName"),
    prop: "buyContactName",
    itemType: "text",
  },
  {
    type: "input",
    label: proxy.t("priceSheet.contactNumber"),
    prop: "buyContactNumber",
    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: proxy.t("priceSheet.commodityInformation"),
    listConfig: [
      {
        type: "picker",
        label: proxy.t("priceSheet.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("priceSheet.productRepeat"));
          }
          formData.data[propName][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;
          } 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;
          data.showPicker = false;
        },
      },
      {
        type: "input",
        label: proxy.t("priceSheet.productName"),
        prop: "productName",
        itemType: "text",
      },
      {
        type: "input",
        label: proxy.t("priceSheet.productModel"),
        prop: "productModel",
        itemType: "text",
      },
      {
        type: "input",
        label: proxy.t("priceSheet.quantity"),
        prop: "quantity",
        itemType: "number",
        changeFn: () => {
          calculatedAmount();
        },
      },
      {
        type: "input",
        label: proxy.t("priceSheet.price"),
        prop: "price",
        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,
        });
      } else {
        formData.data.quotationProductList = [
          {
            productId: null,
            productName: null,
            productModel: null,
            quantity: null,
            price: null,
            amount: null,
            remark: null,
          },
        ];
      }
    },
    deleteFn: (index) => {
      formData.data.quotationProductList.splice(index, 1);
      handleChangeAmount();
    },
  },
});
const formEmptyConfig = reactive([]);
const formAmountProductConfig = reactive([
  {
    type: "input",
    label: proxy.t("priceSheet.amountProduct"),
    prop: "amountProduct",
    itemType: "text",
    readonly: true,
    placeholder: proxy.t("priceSheet.amountProductPlaceholder"),
  },
]);
const formAmountProjectConfig = reactive([
  {
    type: "input",
    label: proxy.t("priceSheet.amountProject"),
    prop: "amountProject",
    itemType: "text",
    readonly: true,
    placeholder: proxy.t("priceSheet.amountProjectPlaceholder"),
  },
]);
const formProjectOption = reactive({
  readonly: false,
  disabled: false,
  labelAlign: "top",
  scroll: true,
  labelWidth: "62pk",
  hiddenSubmitBtn: true,
  btnConfig: {
    isNeed: true,
    prop: "quotationPayList",
    plain: true,
    listTitle: proxy.t("priceSheet.chargeItem"),
    listConfig: [
      {
        type: "input",
        label: proxy.t("priceSheet.chargeItem"),
        prop: "payName",
        itemType: "text",
      },
      {
        type: "input",
        label: proxy.t("priceSheet.amount"),
        prop: "amount",
        itemType: "number",
        changeFn: () => {
          handleChangeAmount();
        },
      },
      {
        type: "input",
        label: proxy.t("priceSheet.remark"),
        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 formDeliveryConfig = reactive([
  {
    type: "title",
    title: proxy.t("priceSheet.quotedAmount"),
  },
  {
    type: "picker",
    label: proxy.t("priceSheet.currency"),
    prop: "currency",
    itemType: "onePicker",
    showPicker: false,
    fieldNames: {
      text: "label",
      value: "value",
    },
    data: [],
  },
  {
    type: "input",
    label: proxy.t("priceSheet.amountAll"),
    prop: "amount",
    itemType: "text",
    readonly: true,
    placeholder: proxy.t("priceSheet.amountAllPlaceholder"),
  },
  {
    type: "input",
    label: proxy.t("priceSheet.effective"),
    prop: "effective",
    itemType: "digit",
  },
  {
    type: "picker",
    label: proxy.t("priceSheet.paymentMethod"),
    prop: "paymentMethod",
    itemType: "onePicker",
    showPicker: false,
    fieldNames: {
      text: "label",
      value: "value",
    },
    data: [],
  },
  {
    type: "input",
    label: proxy.t("priceSheet.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: "title",
    title: proxy.t("priceSheet.deliveryInformation"),
  },
  {
    type: "picker",
    label: proxy.t("priceSheet.tradeMethods"),
    prop: "tradeMethods",
    itemType: "onePicker",
    showPicker: false,
    fieldNames: {
      text: "label",
      value: "value",
    },
    data: [],
  },
  {
    type: "picker",
    label: proxy.t("priceSheet.transportMethod"),
    prop: "transportMethod",
    itemType: "onePicker",
    showPicker: false,
    fieldNames: {
      text: "label",
      value: "value",
    },
    data: [],
  },
  {
    type: "input",
    label: proxy.t("priceSheet.transportRemark"),
    prop: "transportRemark",
    itemType: "text",
  },
  {
    type: "input",
    label: proxy.t("priceSheet.remarks"),
    prop: "remark",
    itemType: "textarea",
  },
  {
    type: "input",
    label: proxy.t("priceSheet.warranty"),
    prop: "warranty",
    itemType: "digit",
  },
]);
const rules = {
  contractTemplateId: [{ required: true, message: proxy.t("priceSheet.contractTemplateIdMsg") }],
  sellCorporationId: [{ required: true, message: proxy.t("priceSheet.sellCorporationIdMsg") }],
  buyCorporationId: [{ required: true, message: proxy.t("priceSheet.buyCorporationIdMsg") }],
  sellCity: [{ required: true, message: proxy.t("priceSheet.cityMsg") }],
  countryCity: [{ required: true, message: proxy.t("priceSheet.cityMsg") }],
  sellAddress: [{ required: true, message: proxy.t("priceSheet.addressMsg") }],
  buyAddress: [{ required: true, message: proxy.t("priceSheet.addressMsg") }],
  sellContactName: [{ required: true, message: proxy.t("priceSheet.contactNameMsg") }],
  sellContactNumber: [{ required: true, message: proxy.t("priceSheet.contactNumberMsg") }],
  // buyPostalCode: [{ required: true, message: proxy.t("priceSheet.postalCodeMsg") }],
  buyContactName: [{ required: true, message: proxy.t("priceSheet.contactNameMsg") }],
  buyContactNumber: [{ required: true, message: proxy.t("priceSheet.contactNumberMsg") }],
  productId: [{ required: true, message: proxy.t("priceSheet.productIdMsg") }],
  productName: [{ required: true, message: proxy.t("priceSheet.productNameMsg") }],
  productModel: [{ required: true, message: proxy.t("priceSheet.productModelMsg") }],
  quantity: [{ required: true, message: proxy.t("priceSheet.quantityMsg") }],
  price: [{ required: true, message: proxy.t("priceSheet.priceMsg") }],
  payName: [{ required: true, message: proxy.t("priceSheet.chargeItemMsg") }],
  amount: [{ required: true, message: proxy.t("priceSheet.amountMsg") }],
};
const rulesTwo = {
  currency: [{ required: true, message: proxy.t("priceSheet.currencyMsg") }],
  effective: [{ required: true, message: proxy.t("priceSheet.effectiveMsg") }],
  paymentMethod: [{ required: true, message: proxy.t("priceSheet.paymentMethodMsg") }],
  advanceRatio: [{ required: true, message: proxy.t("priceSheet.advanceRatioMsg") }],
  tradeMethods: [{ required: true, message: proxy.t("priceSheet.tradeMethodsMsg") }],
  transportMethod: [{ required: true, message: proxy.t("priceSheet.transportMethodMsg") }],
  transportRemark: [{ required: true, message: proxy.t("priceSheet.transportRemarkMsg") }],
  remark: [{ required: true, message: proxy.t("priceSheet.remarksMsg") }],
};
const getDict = () => {
  let query = {
    pageNum: 1,
    pageSize: 999,
    tenantId: getUserInfo().tenantId,
  };
  proxy.post("/contractTemplate/page", { pageNum: 1, pageSize: 999 }).then((res) => {
    if (res.data.rows && res.data.rows.length > 0) {
      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) => {
    if (res.data.rows && res.data.rows.length > 0) {
      formConfig[2].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[4].data = res.data.rows.map((item) => {
        return {
          label: item.dictValue,
          value: item.dictKey,
        };
      });
    }
  });
  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[8].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[8].data = res.data.rows.map((item) => {
          return {
            ...item,
            label: item.name,
            value: item.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("priceSheet.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;
  }
};
const status = ref(false);
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;
      }
      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>