ehsd-mobile/src/views/processApproval/components/EhsdContractChange.vue

<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>
      <div class="common-process-card" v-show="active == 4">
        <div class="common-title">出货计划</div>
        <testForm
          v-model="formData.data"
          :formOption="formShipmentOption"
          :formConfig="formEmptyConfig"
          :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: {
    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 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) => {},
  },
  {
    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) => {},
  },
  {
    type: "cascader",
    label: proxy.t("contract.cityText"),
    prop: "countryId",
    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: true,
  },
  {
    type: "input",
    label: "汇率",
    prop: "rate",
    itemType: "number",
    readonly: true,
  },
  {
    type: "picker",
    label: "付款方式",
    prop: "paymentMethod",
    itemType: "onePicker",
    showPicker: false,
    fieldNames: {
      text: "label",
      value: "value",
    },
    data: [],
    readonly: true,
  },
  {
    type: "input",
    label: "预付比例",
    prop: "advanceRatio",
    itemType: "number",
    readonly: true,
  },
  {
    type: "input",
    label: "付款条件",
    prop: "remark",
    itemType: "textarea",
  },
  {
    type: "picker",
    label: "收款账号",
    prop: "shroffAccountId",
    itemType: "onePicker",
    showPicker: false,
    fieldNames: {
      text: "label",
      value: "value",
    },
    data: [],
    readonly: true,
  },
  {
    type: "input",
    label: "Beneficiary Name",
    prop: "beneficiaryName",
    itemType: "text",
  },
  {
    type: "input",
    label: "Beneficiary Account Number",
    prop: "beneficiaryAccountNumber",
    itemType: "text",
  },
  {
    type: "input",
    label: "Beneficiary Bank",
    prop: "beneficiaryBank",
    itemType: "text",
  },
  {
    type: "input",
    label: "Swift Code",
    prop: "swiftCode",
    itemType: "text",
  },
  {
    type: "input",
    label: "Beneficiary Bank Address",
    prop: "beneficiaryBankAddress",
    itemType: "text",
  },
  {
    type: "input",
    label: "Beneficiary Address",
    prop: "beneficiaryAddress",
    itemType: "text",
  },
  {
    type: "title",
    title: "交付信息",
  },
  {
    type: "input",
    label: "报价有效期 (天)",
    prop: "effective",
    itemType: "number",
    readonly: true,
  },
  {
    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: true,
  },
  {
    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: "contractProductList",
    plain: true,
    listTitle: "商品信息",
    listConfig: [
      {
        type: "input",
        label: "商品中文名",
        prop: "productCnName",
        itemType: "text",
      },
      {
        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: true,
      },
      {
        type: "input",
        label: "金额",
        prop: "amount",
        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 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: "contractProjectList",
    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.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 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 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("/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) {
        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[2].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[15].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.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);
onMounted(() => {
  if (route.query && route.query.businessId) {
    let businessId = route.query.businessId;
    proxy.post("/contract/detail", { id: businessId }).then((res) => {
      console.log(res, "asda");

      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];
      }
      formData.data.sellCity =
        formData.data.sellCountryName +
        " " +
        formData.data.sellProvinceName +
        " " +
        formData.data.sellCityName;
      formData.data.countryIdName =
        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.contractProductList &&
        formData.data.contractProductList.length > 0
      ) {
        for (let i = 0; i < formData.data.contractProductList.length; i++) {
          const e = formData.data.contractProductList[i];

          if (e.ehsdJson) {
            let obj = JSON.parse(e.ehsdJson);
            console.log(obj, "asda");
            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;
      }
      formDom1.value.formDataShowLabelOne();
      formDom2.value.formDataShowLabelOne();
    });
  }
});
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>