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

<template>
  <div class="form">
    <van-tabs v-model:active="active">
      <van-tab :title="proxy.t('funds.basicInformation')"> </van-tab>
      <van-tab :title="proxy.t('funds.claimDetails')"> </van-tab>
      <van-tab :title="proxy.t('funds.receiptPaymentInformation')"> </van-tab>
      <div class="common-process-card" v-show="active == 0">
        <div class="common-title">{{ proxy.t("funds.basicInformation") }}</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("funds.claimDetails") }}</div>
        <testForm v-model="formData.data" :formOption="formDetailOption" :formConfig="formDetailConfig" :rules="rules" ref="formDom2"> </testForm>
        <testForm v-model="formData.data" :formOption="formDetailTwoOption" :formConfig="formDetailTwoConfig" :rules="rules" ref="formDom3"> </testForm>
      </div>
      <div class="common-process-card" v-show="active == 2">
        <div class="common-title">{{ proxy.t("funds.receiptPaymentInformation") }}</div>
        <testForm v-model="formData.data" :formOption="formReceiptPaymentOption" :formConfig="formReceiptPaymentConfig" :rules="rules" ref="formDom4">
        </testForm>
      </div>
    </van-tabs>
  </div>
</template>

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

// 接收父组件的传值
const props = defineProps({
  queryData: String,
});
const proxy = getCurrentInstance().proxy;
const route = useRoute();
const active = ref(0);
const oldType = ref("");
const formData = reactive({
  data: {
    corporationId: null,
    departmentId: null,
    type: null,
    advanceId: null,
    currency: null,
    paymentRemarks: null,
    accountRequestFundsDetailList: [],
    total: null,
    quantity: null,
    paymentMethod: null,
    accountManagementId: null,
    username: null,
    accountOpening: null,
    openingBank: null,
    interbankNumber: null,
  },
});
const formDom1 = ref(null);
const formDom2 = ref(null);
const formDom3 = ref(null);
const formDom4 = 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("funds.corporationId"),
    prop: "corporationId",
    itemType: "onePicker",
    showPicker: false,
    fieldNames: {
      text: "label",
      value: "value",
    },
    data: [],
    changeFn: (val, item) => {
      formData.data.corporationId = val.selectedValues[0];
      let list = item.data.filter((aa) => aa[item.fieldNames.value] == val.selectedValues[0]);
      if (list && list.length > 0) {
        formData.data.corporationIdName = list[0][item.fieldNames.text];
      } else {
        formData.data.corporationIdName = "";
      }
      if (formData.data.type == "3") {
        getAdvanceList();
      }
      item.showPicker = false;
    },
  },
  {
    type: "picker",
    label: proxy.t("funds.departmentId"),
    prop: "departmentId",
    itemType: "onePicker",
    showPicker: false,
    fieldNames: {
      text: "label",
      value: "value",
    },
    data: [],
  },
  {
    type: "picker",
    label: proxy.t("funds.type"),
    prop: "type",
    itemType: "onePicker",
    showPicker: false,
    fieldNames: {
      text: "label",
      value: "value",
    },
    data: [],
    changeFn: (val, item) => {
      if (val.selectedValues[0] === "3" || oldType.value === "3") {
        for (let text in formData.data) {
          if (text === "advanceId") {
            formData.data.advanceId = "";
          } else if (["corporationId", "corporationIdName", "type", "typeName", "paymentTime", "paymentTimeName"].includes(text)) {
          } else if (text === "accountRequestFundsDetailList") {
            formData.data.accountRequestFundsDetailList = [];
          } else if (text === "fileList") {
            formData.data.fileList = [];
          } else {
            delete formData.data[text];
          }
        }
      }
      oldType.value = JSON.parse(JSON.stringify(val.selectedValues[0]));
      formData.data.type = JSON.parse(JSON.stringify(val.selectedValues[0]));
      let list = item.data.filter((aa) => aa[item.fieldNames.value] == val.selectedValues[0]);
      if (list && list.length > 0) {
        formData.data.typeName = list[0][item.fieldNames.text];
      } else {
        formData.data.typeName = "";
      }
      if (val.selectedValues[0] === "3") {
        formConfig[3].type = "picker";
        getAdvanceList();
      } else {
        formConfig[3].type = "pickerAAA";
      }
      item.showPicker = false;
    },
  },
  {
    type: "pickerAAA",
    label: proxy.t("funds.advanceId"),
    prop: "advanceId",
    itemType: "onePicker",
    showPicker: false,
    fieldNames: {
      text: "label",
      value: "value",
    },
    data: [],
    changeFn: (val, item) => {
      formData.data.advanceId = val.selectedValues[0];
      let list = item.data.filter((aa) => aa[item.fieldNames.value] == val.selectedValues[0]);
      if (list && list.length > 0) {
        formData.data.advanceIdName = list[0][item.fieldNames.text];
      } else {
        formData.data.advanceIdName = "";
      }
      if (val.selectedValues && val.selectedValues.length > 0) {
        proxy.post("/accountRequestFunds/detail", { id: val.selectedValues[0] }).then((res) => {
          formData.data.departmentId = res.data.departmentId;
          formData.data.currency = res.data.currency;
          formData.data.paymentRemarks = res.data.paymentRemarks;
          formData.data.accountRequestFundsDetailList = res.data.accountRequestFundsDetailList.map((item) => {
            return {
              costType: item.costType,
              amount: item.amount,
              contractId: item.contractId,
              advanceAmount: item.amount,
              remarks: item.remarks,
            };
          });
          handleChangeAmount();
          formData.data.advanceAmounts = res.data.total;
          formData.data.quantity = res.data.quantity;
          formData.data.paymentMethod = res.data.paymentMethod;
          formData.data.accountManagementId = res.data.accountManagementId;
          formData.data.name = res.data.name;
          formData.data.accountOpening = res.data.accountOpening;
          formData.data.openingBank = res.data.openingBank;
          formData.data.interbankNumber = res.data.interbankNumber;
          formDom1.value.formDataShowLabelOne();
          formDom2.value.formDataListShowLabelOne();
          formDom4.value.formDataShowLabelOne();
        });
      }
      item.showPicker = false;
    },
  },
  {
    type: "picker",
    label: proxy.t("funds.currency"),
    prop: "currency",
    itemType: "onePicker",
    showPicker: false,
    fieldNames: {
      text: "label",
      value: "value",
    },
    data: [],
  },
  {
    type: "input",
    label: proxy.t("funds.paymentRemarks"),
    prop: "paymentRemarks",
    itemType: "textarea",
  },
]);
const formDetailOption = reactive({
  readonly: false, //用于控制整个表单是否只读
  disabled: false,
  labelAlign: "top",
  scroll: true,
  labelWidth: "62pk",
  hiddenSubmitBtn: true,
  btnConfig: {
    isNeed: true,
    prop: "accountRequestFundsDetailList",
    plain: true,
    listTitle: proxy.t("funds.claimDetails"),
    listConfig: [
      {
        type: "picker",
        label: proxy.t("funds.costType"),
        prop: "costType",
        itemType: "onePicker",
        showPicker: false,
        readonly: false,
        fieldNames: {
          text: "label",
          value: "value",
        },
        data: [],
      },
      {
        type: "picker",
        label: proxy.t("funds.contractId"),
        prop: "contractId",
        itemType: "onePicker",
        showPicker: false,
        readonly: false,
        fieldNames: {
          text: "label",
          value: "value",
        },
        data: [],
      },
      {
        type: "input",
        label: proxy.t("funds.amount"),
        prop: "amount",
        itemType: "number",
        changeFn: () => {
          handleChangeAmount();
        },
      },
      {
        type: "input",
        label: proxy.t("funds.remarks"),
        prop: "remarks",
        itemType: "textarea",
      },
    ],
    clickFn: () => {
      if (formData.data.accountRequestFundsDetailList && formData.data.accountRequestFundsDetailList.length > 0) {
        formData.data.accountRequestFundsDetailList.push({
          costType: null,
          contractId: null,
          amount: null,
          remarks: null,
        });
      } else {
        formData.data.accountRequestFundsDetailList = [
          {
            costType: null,
            contractId: null,
            amount: null,
            remarks: null,
          },
        ];
      }
    },
    deleteFn: (index) => {
      formData.data.accountRequestFundsDetailList.splice(index, 1);
      handleChangeAmount();
    },
  },
});
const formDetailConfig = reactive([]);
const formDetailTwoOption = reactive({
  readonly: false, //用于控制整个表单是否只读
  disabled: false,
  labelAlign: "top",
  scroll: true,
  labelWidth: "62pk",
  hiddenSubmitBtn: true,
});
const formDetailTwoConfig = reactive([
  {
    type: "input",
    label: proxy.t("funds.total"),
    prop: "total",
    itemType: "number",
    readonly: true,
  },
  {
    type: "input",
    label: proxy.t("funds.quantity"),
    prop: "quantity",
    itemType: "number",
  },
]);
const formReceiptPaymentOption = reactive({
  readonly: false, //用于控制整个表单是否只读
  disabled: false,
  labelAlign: "top",
  scroll: true,
  labelWidth: "62pk",
  hiddenSubmitBtn: true,
});
const formReceiptPaymentConfig = reactive([
  {
    type: "picker",
    label: proxy.t("funds.paymentMethod"),
    prop: "paymentMethod",
    itemType: "onePicker",
    showPicker: false,
    fieldNames: {
      text: "label",
      value: "value",
    },
    data: [],
  },
  {
    type: "picker",
    label: proxy.t("funds.accountManagementId"),
    prop: "accountManagementId",
    itemType: "onePicker",
    showPicker: false,
    fieldNames: {
      text: "label",
      value: "value",
    },
    data: [],
  },
  {
    type: "input",
    label: proxy.t("funds.username"),
    prop: "name",
    itemType: "text",
  },
  {
    type: "input",
    label: proxy.t("funds.accountOpening"),
    prop: "accountOpening",
    itemType: "text",
  },
  {
    type: "input",
    label: proxy.t("funds.openingBank"),
    prop: "openingBank",
    itemType: "text",
  },
  {
    type: "input",
    label: proxy.t("funds.interbankNumber"),
    prop: "interbankNumber",
    itemType: "text",
  },
]);
const rules = {
  corporationId: [{ required: true, message: proxy.t("funds.corporationIdMsg") }],
  departmentId: [{ required: true, message: proxy.t("funds.departmentIdMsg") }],
  type: [{ required: true, message: proxy.t("funds.typeMsg") }],
  advanceId: [{ required: true, message: proxy.t("funds.advanceIdMsg") }],
  currency: [{ required: true, message: proxy.t("funds.currencyMsg") }],
  costType: [{ required: true, message: proxy.t("funds.costTypeMsg") }],
  contractId: [{ required: true, message: proxy.t("funds.contractIdMsg") }],
  amount: [{ required: true, message: proxy.t("funds.amountMsg") }],
  remarks: [{ required: true, message: proxy.t("funds.remarksMsg") }],
  quantity: [{ required: true, message: proxy.t("funds.quantityMsg") }],
  paymentMethod: [{ required: true, message: proxy.t("funds.paymentMethodMsg") }],
  accountManagementId: [{ required: true, message: proxy.t("funds.accountManagementIdMsg") }],
};
const getAdvanceList = () => {
  proxy
    .post("/accountRequestFunds/page", {
      pageNum: 1,
      pageSize: 999,
      type: "1",
      writeOffStatus: "0",
      corporationId: formData.data.corporationId,
      status: "30",
      createUser: getUserInfo().userId,
    })
    .then((res) => {
      if (res.data.rows && res.data.rows.length > 0) {
        formConfig[3].data = res.data.rows.map((item) => {
          return {
            label: item.createTime.substr(0, 10) + "  " + item.currency + " " + item.total,
            value: item.id,
          };
        });
      }
    });
};
const getDict = () => {
  let query = {
    pageNum: 1,
    pageSize: 999,
    tenantId: getUserInfo().tenantId,
  };
  proxy.post("/corporation/page", { pageNum: 1, pageSize: 9999 }).then((res) => {
    if (res.data.rows && res.data.rows.length > 0) {
      formConfig[0].data = res.data.rows.map((item) => {
        return {
          label: item.name,
          value: item.id,
        };
      });
    }
  });
  proxy.get("/tenantDept/list", query).then((res) => {
    if (res.data && res.data.length > 0) {
      formConfig[1].data = res.data
        .filter((item) => item.parentId != "0")
        .map((item) => {
          return {
            label: item.deptName,
            value: item.deptId,
          };
        });
    }
  });
  proxy.post("/dictTenantData/page", { ...query, dictCode: "founds_type" }).then((res) => {
    if (res.data.rows && res.data.rows.length > 0) {
      formConfig[2].data = 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) {
      formConfig[4].data = res.data.rows.map((item) => {
        return {
          label: item.dictValue,
          value: item.dictKey,
        };
      });
    }
  });
  proxy.post("/dictTenantData/page", { ...query, dictCode: "funds_cost_type" }).then((res) => {
    if (res.data.rows && res.data.rows.length > 0) {
      formDetailOption.btnConfig.listConfig[0].data = res.data.rows.map((item) => {
        return {
          label: item.dictValue,
          value: item.dictKey,
        };
      });
    }
  });
  proxy.post("/contract/page1", { pageNum: 1, pageSize: 9999, status: 30 }).then((res) => {
    if (res.data.rows && res.data.rows.length > 0) {
      formDetailOption.btnConfig.listConfig[1].data = res.data.rows.map((item) => {
        return {
          label: item.code,
          value: item.id,
        };
      });
    }
  });
  proxy.post("/dictTenantData/page", { ...query, dictCode: "funds_payment_method" }).then((res) => {
    if (res.data.rows && res.data.rows.length > 0) {
      formReceiptPaymentConfig[0].data = res.data.rows.map((item) => {
        return {
          label: item.dictValue,
          value: item.dictKey,
        };
      });
    }
  });
  proxy.post("/accountManagement/page", { pageNum: 1, pageSize: 9999 }).then((res) => {
    if (res.data.rows && res.data.rows.length > 0) {
      formReceiptPaymentConfig[1].data = res.data.rows.map((item) => {
        return {
          label: item.alias,
          value: item.id,
        };
      });
    }
  });
};
getDict();
const handleChangeAmount = () => {
  let sum = 0;
  for (let i = 0; i < formData.data.accountRequestFundsDetailList.length; i++) {
    const e = formData.data.accountRequestFundsDetailList[i];
    if (e.amount) {
      sum = Number(parseFloat(Number(sum) + Number(e.amount)).toFixed(2));
    }
  }
  formData.data.total = sum;
};
const handleSubmit = async () => {
  return formData.data;
};
watch(
  props.queryData,
  () => {
    if (props.queryData && [10, 20, 30].includes(route.query.processType)) {
      for (const key in props.queryData) {
        formData.data[key] = props.queryData[key];
      }
    }
  },
  {
    deep: true,
  }
);
defineExpose({
  handleSubmit,
});
onMounted(() => {});
</script>
<style lang="scss" scoped></style>