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

<template>
  <div class="form">
    <van-tabs v-model:active="active">
      <van-tab :title="proxy.t('contract.transactionInformation')" />
      <van-tab :title="proxy.t('contract.commodityInformation')" />
      <van-tab :title="proxy.t('contract.otherCharges')" />
      <van-tab :title="proxy.t('contract.deliveryInformation')" />
      <van-tab :title="proxy.t('contract.shipmentPlan')" />
      <div class="common-process-card" v-show="active == 0">
        <div class="common-title">
          {{ proxy.t("contract.transactionInformation") }}
        </div>
        <testForm
          v-model="formData.data"
          :formOption="formOption"
          :formConfig="formConfig"
          :rules="rules"
          ref="formDom1"
        >
        </testForm>
      </div>
      <div class="common-process-card" v-show="active == 1">
        <div class="common-title">
          {{ proxy.t("contract.commodityInformation") }}
        </div>
        <testForm
          v-model="formData.data"
          :formOption="formGoodsOption"
          :formConfig="formEmptyConfig"
          :rules="rules"
          ref="formDom2"
        >
        </testForm>
        <testForm
          v-model="formData.data"
          :formOption="formOption"
          :formConfig="formAmountProductConfig"
          :rules="rules"
          ref="formDom3"
        >
        </testForm>
      </div>
      <div class="common-process-card" v-show="active == 2">
        <div class="common-title">{{ proxy.t("contract.otherCharges") }}</div>
        <testForm
          v-model="formData.data"
          :formOption="formProjectOption"
          :formConfig="formEmptyConfig"
          :rules="rules"
          ref="formDom4"
        >
        </testForm>
        <testForm
          v-model="formData.data"
          :formOption="formOption"
          :formConfig="formAmountProjectConfig"
          :rules="rules"
          ref="formDom5"
        >
        </testForm>
      </div>
      <div class="common-process-card" v-show="active == 3">
        <div class="common-title">
          {{ proxy.t("contract.deliveryInformation") }}
        </div>
        <testForm
          v-model="formData.data"
          :formOption="formOption"
          :formConfig="formDeliveryConfig"
          :rules="rulesTwo"
          ref="formDom6"
        >
        </testForm>
      </div>
      <div class="common-process-card" v-show="active == 4">
        <div class="common-title">{{ proxy.t("contract.shipmentPlan") }}</div>
        <testForm
          v-model="formData.data"
          :formOption="formShipmentOption"
          :formConfig="formEmptyConfig"
          :rules="rulesTwo"
          ref="formDom7"
        >
        </testForm>
      </div>
    </van-tabs>
  </div>
</template>

<script setup>
import {
  ref,
  getCurrentInstance,
  onMounted,
  defineProps,
  defineExpose,
  watch,
  reactive,
  toRefs,
} from "vue";
import { useRoute } from "vue-router";
import testForm from "@/components/testForm/index.vue";
import { getUserInfo } from "@/utils/auth";
import { showFailToast } from "vant";

// 接收父组件的传值
const props = defineProps({
  queryData: Object,
});
const refProps = toRefs(props);
const proxy = getCurrentInstance().proxy;
const route = useRoute();
const active = ref(0);
const tabsChange = () => {
  active.value++;
};
const formData = reactive({
  data: {
    contractType: "1",
    contractProductList: [],
    contractProjectList: [],
    contractShipmentList: [],
  },
});
const formDom1 = ref(null);
const formDom2 = ref(null);
const formDom3 = ref(null);
const formDom4 = ref(null);
const formDom5 = ref(null);
const formDom6 = ref(null);
const formDom7 = ref(null);
const formOption = reactive({
  readonly: false,
  disabled: false,
  labelAlign: "top",
  scroll: true,
  labelWidth: "62pk",
  hiddenSubmitBtn: true,
});
const formConfig = reactive([
  {
    type: "picker",
    label: proxy.t("contract.contractType"),
    prop: "contractType",
    itemType: "onePicker",
    showPicker: false,
    fieldNames: {
      text: "label",
      value: "value",
    },
    data: [],
  },
  {
    type: "picker",
    label: proxy.t("contract.contractTemplateId"),
    prop: "contractTemplateId",
    itemType: "onePicker",
    showPicker: false,
    fieldNames: {
      text: "label",
      value: "value",
    },
    data: [],
    changeFn: (val, data) => {
      proxy.formChange(val, data, formData);
      formData.data.sellCorporationId = "";
      formData.data.sellCountryName = "";
      formData.data.sellProvinceName = "";
      formData.data.sellCityName = "";
      formData.data.sellAddress = "";
      formData.data.sellContactName = "";
      formData.data.sellContactNumber = "";
      if (val.selectedValues[0]) {
        proxy
          .post("/contractTemplate/detail", { id: val.selectedValues[0] })
          .then((res) => {
            formData.data.sellCorporationId = res.data.corporationId;
            if (res.data.corporationId) {
              proxy
                .post("/corporation/detail", { id: res.data.corporationId })
                .then((detailCorporation) => {
                  let sellCity = "";
                  if (detailCorporation.data.countryEnStr) {
                    formData.data.sellCountryName =
                      detailCorporation.data.countryEnStr;
                    sellCity = detailCorporation.data.countryEnStr;
                  }
                  if (detailCorporation.data.provinceEnStr) {
                    formData.data.sellProvinceName =
                      detailCorporation.data.provinceEnStr;
                    sellCity =
                      sellCity + " " + detailCorporation.data.provinceEnStr;
                  }
                  if (detailCorporation.data.cityEnStr) {
                    formData.data.sellCityName =
                      detailCorporation.data.cityEnStr;
                    sellCity =
                      sellCity + " " + detailCorporation.data.cityEnStr;
                  }
                  if (detailCorporation.data.addressEn) {
                    formData.data.sellAddress =
                      detailCorporation.data.addressEn;
                  }
                  formData.data.sellCity = sellCity;
                  formDom1.value.formDataShowLabelOne();
                });
            }
            formData.data.sellContactName = res.data.contactName;
            formData.data.sellContactNumber = res.data.contactNumber;
            formDom1.value.formDataShowLabelOne();
          });
      }
      data.showPicker = false;
    },
  },
  {
    type: "title",
    title: proxy.t("contract.sellerInformation"),
  },
  {
    type: "picker",
    label: proxy.t("contract.sellCorporationId"),
    prop: "sellCorporationId",
    itemType: "onePicker",
    showPicker: false,
    fieldNames: {
      text: "label",
      value: "value",
    },
    data: [],
    readonly: true,
  },
  {
    type: "input",
    label: proxy.t("contract.cityText"),
    prop: "sellCity",
    itemType: "text",
    readonly: true,
  },
  {
    type: "input",
    label: proxy.t("contract.address"),
    prop: "sellAddress",
    itemType: "textarea",
  },
  {
    type: "input",
    label: proxy.t("contract.contactName"),
    prop: "sellContactName",
    itemType: "text",
  },
  {
    type: "input",
    label: proxy.t("contract.contactNumber"),
    prop: "sellContactNumber",
    itemType: "text",
  },
  {
    type: "title",
    title: proxy.t("contract.buyerInformation"),
  },
  {
    type: "picker",
    label: proxy.t("contract.buyCorporationId"),
    prop: "buyCorporationId",
    itemType: "onePicker",
    showPicker: false,
    fieldNames: {
      text: "label",
      value: "value",
    },
    data: [],
    changeFn: (val, data) => {
      proxy.formChange(val, data, formData);
      formData.data.buyContactName = "";
      formData.data.buyContactNumber = "";
      if (val.selectedValues[0]) {
        proxy
          .post("/customer/detail", { id: val.selectedValues[0] })
          .then((res) => {
            if (
              res.data.customerUserList &&
              res.data.customerUserList.length > 0
            ) {
              formData.data.buyContactName = res.data.customerUserList[0].name;
              if (res.data.customerUserList[0].contactJson) {
                let contactJson = JSON.parse(
                  res.data.customerUserList[0].contactJson
                );
                if (contactJson && contactJson.length > 0) {
                  formData.data.buyContactNumber = contactJson[0].contactNo;
                }
              }
            }
            let countryCityName = "";
            if (res.data.countryName) {
              countryCityName = res.data.countryName;
              if (res.data.provinceName) {
                countryCityName = countryCityName + " " + res.data.provinceName;
                if (res.data.cityName) {
                  countryCityName = countryCityName + " " + res.data.cityName;
                }
              }
            }
            formData.data.countryCityName = countryCityName;
            if (res.data.cityId) {
              formData.data.countryCity = res.data.cityId;
            } else if (res.data.provinceId) {
              formData.data.countryCity = res.data.provinceId;
            } else if (res.data.countryId) {
              formData.data.countryCity = res.data.countryId;
            } else {
              formData.data.countryCity = "";
            }
            formData.data.countryId = res.data.countryId;
            formData.data.provinceId = res.data.provinceId;
            formData.data.cityId = res.data.cityId;
            formData.data.buyPostalCode = res.data.zipCode;
            formData.data.buyAddress = res.data.address;
          });
      } else {
        formData.data.countryId = "";
        formData.data.provinceId = "";
        formData.data.cityId = "";
        formData.data.buyPostalCode = "";
        formData.data.buyAddress = "";
      }
      data.showPicker = false;
    },
  },
  {
    type: "cascader",
    label: proxy.t("contract.cityText"),
    prop: "countryCity",
    itemType: "city",
    showPicker: false,
  },
  {
    type: "input",
    label: proxy.t("contract.address"),
    prop: "buyAddress",
    itemType: "textarea",
  },
  {
    type: "input",
    label: proxy.t("contract.postalCode"),
    prop: "buyPostalCode",
    itemType: "text",
  },
  {
    type: "input",
    label: proxy.t("contract.contactName"),
    prop: "buyContactName",
    itemType: "text",
  },
  {
    type: "input",
    label: proxy.t("contract.contactNumber"),
    prop: "buyContactNumber",
    itemType: "text",
  },
]);
const formGoodsOption = reactive({
  readonly: false,
  disabled: false,
  labelAlign: "top",
  scroll: true,
  labelWidth: "62pk",
  hiddenSubmitBtn: true,
  btnConfig: {
    isNeed: true,
    prop: "contractProductList",
    plain: true,
    listTitle: proxy.t("contract.commodityInformation"),
    listConfig: [
      {
        type: "picker",
        label: proxy.t("contract.productId"),
        prop: "productId",
        itemType: "onePicker",
        showPicker: false,
        readonly: false,
        fieldNames: {
          text: "label",
          value: "value",
        },
        data: [],
        changeFn: (val, data, index, indexTwo, propName) => {
          let selectList = formData.data[propName].filter(
            (item, itemIndex) =>
              item[data.prop] === val.selectedValues[0] && itemIndex !== index
          );
          if (selectList && selectList.length > 0) {
            return showFailToast(proxy.t("contract.productRepeat"));
          }
          formData.data[propName][index][data.prop] = val.selectedValues[0];
          formData.data.contractShipmentList[index][data.prop] =
            val.selectedValues[0];
          let list = data.data.filter(
            (item) => item[data.fieldNames.value] == val.selectedValues[0]
          );
          if (list && list.length > 0) {
            formData.data[propName][index][data.prop + "Name"] =
              list[0][data.fieldNames.text];
            let name = list[0].name;
            if (list[0].standardJson) {
              let standardJson = JSON.parse(list[0].standardJson);
              if (standardJson && standardJson.englishName) {
                name = standardJson.englishName;
              }
            }
            formData.data[propName][index].productName = name;
            formData.data[propName][index].productModel = list[0].spec;
            formData.data.contractShipmentList[index].productName = name;
          } else {
            formData.data[propName][index][data.prop + "Name"] = "";
          }
          formData.data[propName][index].quantity = null;
          formData.data[propName][index].price = null;
          formData.data[propName][index].amount = null;
          formData.data[propName][index].remark = null;
          formData.data.contractShipmentList[index].shipmentTime = null;
          formData.data.contractShipmentList[index].quantity = null;
          formData.data.contractShipmentList[index].remark = null;
          data.showPicker = false;
        },
      },
      {
        type: "input",
        label: proxy.t("contract.productName"),
        prop: "productName",
        itemType: "text",
      },
      {
        type: "input",
        label: proxy.t("contract.productModel"),
        prop: "productModel",
        itemType: "text",
      },
      {
        type: "input",
        label: proxy.t("contract.quantity"),
        prop: "quantity",
        itemType: "number",
        changeFn: () => {
          calculatedAmount();
        },
      },
      {
        type: "input",
        label: proxy.t("contract.price"),
        prop: "price",
        itemType: "number",
        changeFn: () => {
          calculatedAmount();
        },
      },
    ],
    clickFn: () => {
      if (
        formData.data.contractProductList &&
        formData.data.contractProductList.length > 0
      ) {
        formData.data.contractProductList.push({
          productId: null,
          productName: null,
          productModel: null,
          quantity: null,
          price: null,
          amount: null,
          remark: null,
        });
        formData.data.contractShipmentList.push({
          productId: null,
          productName: null,
          shipmentTime: null,
          quantity: null,
          remark: null,
        });
      } else {
        formData.data.contractProductList = [
          {
            productId: null,
            productName: null,
            productModel: null,
            quantity: null,
            price: null,
            amount: null,
            remark: null,
          },
        ];
        formData.data.contractShipmentList = [
          {
            productId: null,
            productName: null,
            shipmentTime: null,
            quantity: null,
            remark: null,
          },
        ];
      }
    },
    deleteFn: (index) => {
      formData.data.contractProductList.splice(index, 1);
      formData.data.contractShipmentList.splice(index, 1);
      handleChangeAmount();
    },
  },
});
const formEmptyConfig = reactive([]);
const formAmountProductConfig = reactive([
  {
    type: "input",
    label: proxy.t("contract.amountProduct"),
    prop: "amountProduct",
    itemType: "text",
    readonly: true,
    placeholder: proxy.t("contract.amountProductPlaceholder"),
  },
]);
const formAmountProjectConfig = reactive([
  {
    type: "input",
    label: proxy.t("contract.amountProject"),
    prop: "amountProject",
    itemType: "text",
    readonly: true,
    placeholder: proxy.t("contract.amountProjectPlaceholder"),
  },
]);
const formProjectOption = reactive({
  readonly: false,
  disabled: false,
  labelAlign: "top",
  scroll: true,
  labelWidth: "62pk",
  hiddenSubmitBtn: true,
  btnConfig: {
    isNeed: true,
    prop: "contractProjectList",
    plain: true,
    listTitle: proxy.t("contract.chargeItem"),
    listConfig: [
      {
        type: "input",
        label: proxy.t("contract.chargeItem"),
        prop: "payName",
        itemType: "text",
      },
      {
        type: "input",
        label: proxy.t("contract.amount"),
        prop: "amount",
        itemType: "number",
        changeFn: () => {
          handleChangeAmount();
        },
      },
      {
        type: "input",
        label: proxy.t("contract.remark"),
        prop: "remark",
        itemType: "textarea",
      },
    ],
    clickFn: () => {
      if (
        formData.data.contractProjectList &&
        formData.data.contractProjectList.length > 0
      ) {
        formData.data.contractProjectList.push({
          payName: null,
          amount: null,
          remark: null,
        });
      } else {
        formData.data.contractProjectList = [
          {
            payName: null,
            amount: null,
            remark: null,
          },
        ];
      }
    },
    deleteFn: (index) => {
      formData.data.contractProjectList.splice(index, 1);
      handleChangeAmount();
    },
  },
});
const formDeliveryConfig = reactive([
  {
    type: "title",
    title: proxy.t("contract.collectionInformation"),
  },
  {
    type: "picker",
    label: proxy.t("contract.currency"),
    prop: "currency",
    itemType: "onePicker",
    showPicker: false,
    fieldNames: {
      text: "label",
      value: "value",
    },
    data: [],
  },
  {
    type: "input",
    label: proxy.t("contract.amountAll"),
    prop: "amount",
    itemType: "text",
    readonly: true,
    placeholder: proxy.t("contract.amountAllPlaceholder"),
  },
  {
    type: "picker",
    label: proxy.t("contract.paymentMethod"),
    prop: "paymentMethod",
    itemType: "onePicker",
    showPicker: false,
    fieldNames: {
      text: "label",
      value: "value",
    },
    data: [],
  },
  {
    type: "input",
    label: proxy.t("contract.advanceRatio"),
    prop: "advanceRatio",
    itemType: "number",
    inputFn: (val) => {
      if (val) {
        if (val > 100) {
          formData.data.advanceRatio = 100;
        } else if (val < 0) {
          formData.data.advanceRatio = 0;
        }
      }
    },
  },
  {
    type: "picker",
    label: proxy.t("contract.shroffAccountId"),
    prop: "shroffAccountId",
    itemType: "onePicker",
    showPicker: false,
    fieldNames: {
      text: "label",
      value: "value",
    },
    data: [],
  },
  {
    type: "title",
    title: proxy.t("contract.deliveryInformation"),
  },
  {
    type: "picker",
    label: proxy.t("contract.tradeMethods"),
    prop: "tradeMethods",
    itemType: "onePicker",
    showPicker: false,
    fieldNames: {
      text: "label",
      value: "value",
    },
    data: [],
  },
  {
    type: "picker",
    label: proxy.t("contract.transportMethod"),
    prop: "transportMethod",
    itemType: "onePicker",
    showPicker: false,
    fieldNames: {
      text: "label",
      value: "value",
    },
    data: [],
  },
  {
    type: "input",
    label: proxy.t("contract.transportRemark"),
    prop: "transportRemark",
    itemType: "text",
  },
  {
    type: "input",
    label: proxy.t("contract.remarks"),
    prop: "remark",
    itemType: "textarea",
  },
  {
    type: "input",
    label: proxy.t("contract.warranty"),
    prop: "warranty",
    itemType: "digit",
  },
  {
    type: "input",
    label: proxy.t("contract.deliveryTime"),
    prop: "deliveryTime",
    itemType: "digit",
  },
]);
const formShipmentOption = reactive({
  readonly: false,
  disabled: false,
  labelAlign: "top",
  scroll: true,
  labelWidth: "62pk",
  hiddenSubmitBtn: true,
  btnConfig: {
    isNeed: false,
    prop: "contractShipmentList",
    plain: true,
    listTitle: proxy.t("contract.commodity"),
    listConfig: [
      {
        type: "input",
        label: proxy.t("contract.productName"),
        prop: "productName",
        itemType: "text",
        readonly: true,
        placeholder: proxy.t("contract.productNamePlaceholder"),
      },
      {
        type: "picker",
        label: proxy.t("contract.shipmentTime"),
        prop: "shipmentTime",
        itemType: "datePicker",
        showPicker: false,
        split: "-",
        columnsType: ["year", "month", "day"],
      },
      {
        type: "input",
        label: proxy.t("contract.quantityShipment"),
        prop: "quantity",
        itemType: "number",
      },
    ],
  },
});
const rules = {
  contractType: [
    { required: true, message: proxy.t("contract.contractTypeMsg") },
  ],
  contractTemplateId: [
    { required: true, message: proxy.t("contract.contractTemplateIdMsg") },
  ],
  sellCorporationId: [
    { required: true, message: proxy.t("contract.sellCorporationIdMsg") },
  ],
  buyCorporationId: [
    { required: true, message: proxy.t("contract.buyCorporationIdMsg") },
  ],
  sellCity: [{ required: true, message: proxy.t("contract.cityMsg") }],
  countryCity: [{ required: true, message: proxy.t("contract.cityMsg") }],
  sellAddress: [{ required: true, message: proxy.t("contract.addressMsg") }],
  buyAddress: [{ required: true, message: proxy.t("contract.addressMsg") }],
  sellContactName: [
    { required: true, message: proxy.t("contract.contactNameMsg") },
  ],
  sellContactNumber: [
    { required: true, message: proxy.t("contract.contactNumberMsg") },
  ],
  // buyPostalCode: [{ required: true, message: proxy.t("contract.postalCodeMsg") }],
  buyContactName: [
    { required: true, message: proxy.t("contract.contactNameMsg") },
  ],
  buyContactNumber: [
    { required: true, message: proxy.t("contract.contactNumberMsg") },
  ],
  productId: [{ required: true, message: proxy.t("contract.productIdMsg") }],
  productName: [
    { required: true, message: proxy.t("contract.productNameMsg") },
  ],
  productModel: [
    { required: true, message: proxy.t("contract.productModelMsg") },
  ],
  quantity: [{ required: true, message: proxy.t("contract.quantityMsg") }],
  price: [{ required: true, message: proxy.t("contract.priceMsg") }],
  payName: [{ required: true, message: proxy.t("contract.chargeItemMsg") }],
  amount: [{ required: true, message: proxy.t("contract.amountMsg") }],
};
const rulesTwo = {
  currency: [{ required: true, message: proxy.t("contract.currencyMsg") }],
  paymentMethod: [
    { required: true, message: proxy.t("contract.paymentMethodMsg") },
  ],
  advanceRatio: [
    { required: true, message: proxy.t("contract.advanceRatioMsg") },
  ],
  shroffAccountId: [
    { required: true, message: proxy.t("contract.shroffAccountIdMsg") },
  ],
  tradeMethods: [
    { required: true, message: proxy.t("contract.tradeMethodsMsg") },
  ],
  transportMethod: [
    { required: true, message: proxy.t("contract.transportMethodMsg") },
  ],
  transportRemark: [
    { required: true, message: proxy.t("contract.transportRemarkMsg") },
  ],
  remark: [{ required: true, message: proxy.t("contract.remarksMsg") }],
};
const getDict = () => {
  let query = {
    pageNum: 1,
    pageSize: 999,
    tenantId: getUserInfo().tenantId,
  };
  proxy
    .post("/dictTenantData/page", { ...query, dictCode: "contract_type" })
    .then((res) => {
      if (res.data.rows && res.data.rows.length > 0) {
        formConfig[0].data = res.data.rows.map((item) => {
          return {
            label: item.dictValue,
            value: item.dictKey,
          };
        });
      }
    });
  proxy
    .post("/contractTemplate/page", { pageNum: 1, pageSize: 999 })
    .then((res) => {
      if (res.data.rows && res.data.rows.length > 0) {
        formConfig[1].data = res.data.rows.map((item) => {
          return {
            ...item,
            label: item.templateName,
            value: item.id,
          };
        });
      }
    });
  proxy.post("/corporation/page", { pageNum: 1, pageSize: 999 }).then((res) => {
    if (res.data.rows && res.data.rows.length > 0) {
      formConfig[3].data = res.data.rows.map((item) => {
        return {
          ...item,
          label: item.name,
          value: item.id,
        };
      });
    }
  });
  if (!["10", "20"].includes(route.query.processType)) {
    proxy
      .post("/productInfo/page", {
        pageNum: 1,
        pageSize: 99999,
        definition: "1",
      })
      .then((res) => {
        if (res.data.rows && res.data.rows.length > 0) {
          formGoodsOption.btnConfig.listConfig[0].data = res.data.rows.map(
            (item) => {
              return {
                ...item,
                label: item.name,
                value: item.id,
              };
            }
          );
        }
      });
  }

  proxy
    .post("/dictTenantData/page", { ...query, dictCode: "account_currency" })
    .then((res) => {
      if (res.data.rows && res.data.rows.length > 0) {
        formDeliveryConfig[1].data = res.data.rows.map((item) => {
          return {
            label: item.dictValue,
            value: item.dictKey,
          };
        });
      }
    });
  proxy
    .post("/dictTenantData/page", {
      ...query,
      dictCode: "funds_payment_method",
    })
    .then((res) => {
      if (res.data.rows && res.data.rows.length > 0) {
        formDeliveryConfig[3].data = res.data.rows.map((item) => {
          return {
            label: item.dictValue,
            value: item.dictKey,
          };
        });
      }
    });
  proxy
    .post("/accountManagement/page", { pageNum: 1, pageSize: 999 })
    .then((res) => {
      if (res.data.rows && res.data.rows.length > 0) {
        formDeliveryConfig[5].data = res.data.rows.map((item) => {
          return {
            ...item,
            label: item.alias,
            value: item.id,
          };
        });
      }
    });
  proxy
    .post("/dictTenantData/page", { ...query, dictCode: "trade_mode" })
    .then((res) => {
      if (res.data.rows && res.data.rows.length > 0) {
        formDeliveryConfig[7].data = res.data.rows.map((item) => {
          return {
            label: item.dictValue,
            value: item.dictKey,
          };
        });
      }
    });
  proxy
    .post("/dictTenantData/page", { ...query, dictCode: "shipping_method" })
    .then((res) => {
      if (res.data.rows && res.data.rows.length > 0) {
        formDeliveryConfig[8].data = res.data.rows.map((item) => {
          return {
            label: item.dictValue,
            value: item.dictKey,
          };
        });
      }
    });
  if (["10", "20"].includes(route.query.processType)) {
    proxy.post("/customer/page", { pageNum: 1, pageSize: 999 }).then((res) => {
      if (res.data.rows && res.data.rows.length > 0) {
        formConfig[9].data = res.data.rows.map((item) => {
          return {
            ...item,
            label: item.name,
            value: item.id,
          };
        });
      }
    });
  } else {
    proxy
      .post("/customer/privateSeaPage", { pageNum: 1, pageSize: 999 })
      .then((res) => {
        if (res.data.rows && res.data.rows.length > 0) {
          formConfig[9].data = res.data.rows.map((item) => {
            return {
              ...item,
              label: item.name,
              value: item.id,
            };
          });
        }
      });
  }
};
getDict();
const calculatedAmount = () => {
  if (
    formData.data.contractProductList &&
    formData.data.contractProductList.length > 0
  ) {
    for (let i = 0; i < formData.data.contractProductList.length; i++) {
      let money = 0;
      if (
        formData.data.contractProductList[i].quantity &&
        formData.data.contractProductList[i].price
      ) {
        money = Number(
          Math.round(
            Number(formData.data.contractProductList[i].quantity) *
              Number(formData.data.contractProductList[i].price) *
              10000
          ) / 10000
        );
      }
      formData.data.contractProductList[i].amount = money;
    }
  }
  handleChangeAmount();
};
const handleChangeAmount = () => {
  let money = 0;
  let amountProduct = 0;
  let amountProject = 0;
  if (
    formData.data.contractProductList &&
    formData.data.contractProductList.length > 0
  ) {
    for (let i = 0; i < formData.data.contractProductList.length; i++) {
      if (formData.data.contractProductList[i].amount) {
        money = Number(
          Math.round(
            (Number(money) +
              Number(formData.data.contractProductList[i].amount)) *
              10000
          ) / 10000
        );
        amountProduct = Number(
          Math.round(
            (Number(amountProduct) +
              Number(formData.data.contractProductList[i].amount)) *
              10000
          ) / 10000
        );
      }
    }
  }
  if (
    formData.data.contractProjectList &&
    formData.data.contractProjectList.length > 0
  ) {
    for (let i = 0; i < formData.data.contractProjectList.length; i++) {
      if (formData.data.contractProjectList[i].amount) {
        money = Number(
          Math.round(
            (Number(money) +
              Number(formData.data.contractProjectList[i].amount)) *
              10000
          ) / 10000
        );
        amountProject = Number(
          Math.round(
            (Number(amountProject) +
              Number(formData.data.contractProjectList[i].amount)) *
              10000
          ) / 10000
        );
      }
    }
  }
  formData.data.amount = money;
  formData.data.amountProduct = amountProduct;
  formData.data.amountProject = amountProject;
};
const handleSubmit = async () => {
  const flag = await formDom1.value.validateForm().then((status) => {
    if (status) {
      active.value = 0;
      return false;
    } else {
      if (
        !(
          formData.data.contractProductList &&
          formData.data.contractProductList.length > 0
        )
      ) {
        active.value = 1;
        showFailToast(proxy.t("contract.pleaseAddProduct"));
        return false;
      }
      return formDom2.value.validateForm().then((status1) => {
        if (status1) {
          active.value = 1;
          return false;
        } else {
          return formDom4.value.validateForm().then((status2) => {
            if (status2) {
              active.value = 2;
              return false;
            } else {
              return formDom6.value.validateForm().then((status3) => {
                if (status3) {
                  active.value = 3;
                  return false;
                } else {
                  return true;
                }
              });
            }
          });
        }
      });
    }
  });
  if (flag) {
    return formData.data;
  }
};
let status = ref(true);
watch(
  refProps.queryData,
  () => {
    if (
      refProps.queryData.value &&
      ["10", "20", "30"].includes(route.query.processType)
    ) {
      for (const key in refProps.queryData.value) {
        formData.data[key] = refProps.queryData.value[key];
      }
      if (["10", "20"].includes(route.query.processType)) {
        formGoodsOption.btnConfig.listConfig[0].data =
          formData.data.contractProductList.map((item) => {
            return {
              ...item,
              label: item.name,
              value: item.productId,
            };
          });
      }
      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>