fans-mobile/src/views/oa/processingBill/add.vue

<template>
  <div class="form">
    <van-nav-bar :title="$t('claim.name')" :left-text="$t('common.back')" left-arrow @click-left="onClickLeft">
    </van-nav-bar>
    <testForm v-model="formData.data" :formOption="formOption" :formConfig="formConfig" :rules="rules" @onSubmit="onSubmit" ref="formDom">
      <template #file>
        <div style="width:100%">
          <div v-for="file in formData.data.fileList" :key="file.id" style="color: #409eff;cursor: pointer;"
               @click="onPreviewFile(file.fileName,file.fileUrl)">
            {{file.fileName}}
          </div>
        </div>
      </template>
    </testForm>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted, computed } from "vue";
import { showSuccessToast, showFailToast } from "vant";
import { useRoute } from "vue-router";
import testForm from "@/components/testForm/index.vue";
const proxy = getCurrentInstance().proxy;
const route = useRoute();
const contractorData = ref([]);
const formDom = ref(null);
const formData = reactive({
  data: {},
});
const rules = {
  contractId: [
    {
      required: true,
      message: proxy.t("claim.contractCanNotBeEmpty"),
    },
  ],
  money: [
    {
      required: true,
      message: proxy.t("claim.relatedAmountCanNotBeEmpty"),
    },
  ],
};
const formOption = reactive({
  readonly: false, //用于控制整个表单是否只读
  disabled: false,
  labelAlign: "top",
  scroll: true,
  labelWidth: "62pk",
  submitBtnText: proxy.t("common.submit"),
  hiddenSubmitBtn: false,
  btnConfig: {
    isNeed: true,
    listTitle: proxy.t("claim.relatedContract"),
    prop: "claimContractList",
    plain: true,
    listConfig: [
      {
        type: "input",
        itemType: "text",
        label: "认领时间",
        prop: "createTime",
      },
      {
        type: "input",
        itemType: "text",
        label: "认领人",
        prop: "claimUserName",
      },
      {
        type: "picker",
        label: proxy.t("claim.contractCode"),
        prop: "contractId",
        itemType: "onePicker",
        showPicker: false,
        readonly: false,
        fieldNames: {
          text: "code",
          value: "id",
        },
        data: [],
      },
      {
        type: "input",
        itemType: "number",
        label: "认领金额",
        prop: "money",
      },
    ],
    clickFn: () => {
      if (
        formData.data.claimContractList &&
        formData.data.claimContractList.length > 0
      ) {
        formData.data.claimContractList.push({
          contractId: "",
          contractCode: "",
          money: "",
        });
      } else {
        formData.data.claimContractList = [
          {
            contractId: "",
            contractCode: "",
            money: "",
          },
        ];
      }
    },
  },
});
const formConfig = computed(() => [
  {
    type: "title",
    title: "基本信息",
  },
  {
    type: "input",
    label: "提交时间",
    prop: "applyTime",
    itemType: "text",
    readonly: true,
  },
  {
    type: "input",
    label: "提交人",
    prop: "createUserName",
    itemType: "text",
    readonly: true,
  },
  {
    type: "input",
    label: "所属公司",
    prop: "companyName",
    itemType: "text",
    readonly: true,
  },
  {
    type: "input",
    label: "所属部门",
    prop: "deptName",
    itemType: "text",
    readonly: true,
  },
  {
    type: "picker",
    label: "承包单位",
    prop: "contractorId",
    itemType: "onePicker",
    showPicker: false,
    fieldNames: {
      text: "label",
      value: "value",
    },
    data: contractorData.value,
    readonly: false,
  },
  {
    type: "input",
    label: "账期",
    prop: "accountPeriod",
    itemType: "text",
    readonly: true,
  },
  {
    type: "input",
    label: "账期金额",
    prop: "accountPeriodAmount",
    itemType: "text",
    readonly: true,
  },
  {
    type: "input",
    label: "预付金额",
    prop: "prepaidAmount",
    itemType: "text",
    readonly: true,
  },
  {
    type: "input",
    label: "最终金额",
    prop: "finalAmount",
    itemType: "text",
    readonly: true,
  },
  {
    type: "input",
    label: "说明",
    prop: "remark",
    itemType: "textarea",
    readonly: true,
  },
  {
    type: "slot",
    label: "账单附件",
    slotName: "file",
  },
]);
const onClickLeft = () => history.back();
const getDict = () => {
  proxy
    .post("/contractor/page", {
      pageNum: 1,
      pageSize: 9999,
    })
    .then((res) => {
      contractorData.value = res.data.rows.map((item) => {
        return {
          label: item.name,
          value: item.id,
        };
      });
    });
};
onMounted(() => {
  getDict();
  formOption.btnConfig.isNeed = false;
  formOption.readonly = true;
  formOption.hiddenSubmitBtn = true;
  proxy.post("/epibolyBill/detail", { id: route.query.id }).then(
    (res) => {
      formData.data = res.data;
      let businessId = route.query.id;
      proxy
        .post("/fileInfo/getList", { businessIdList: [businessId] })
        .then((res) => {
          let fileObj = res.data;
          if (fileObj[businessId] && fileObj[businessId].length > 0) {
            formData.data.fileList = fileObj[businessId]
              .filter((x) => x.businessType == "0")
              .map((item) => {
                return {
                  ...item,
                  name: item.fileName,
                  url: item.fileUrl,
                };
              });
          } else {
            formData.data.fileList = [];
          }
        });
    },
    (err) => {
      return showFailToast(err.message);
    }
  );
});

const onSubmit = () => {
  if (route.query.isClaim != "1") {
    if (formData.data.claimContractList.length > 0) {
      let list = formData.data.claimContractList;
      for (let i = 0; i < list.length; i++) {
        const e = list[i];
        if (!(Number(e.money) > 0)) {
          return showFailToast(
            proxy.t("claim.relatedAmountMustBeGreaterThanZero")
          );
        }
      }
      const total = list.reduce((total, x) => (total += Number(x.money)), 0);
      if (total > Number(formData.data.waitAmount)) {
        return showFailToast(
          proxy.t("claim.relatedAmountTotalNotBeGreaterThanAccountAmount")
        );
      }
      formData.data.amount = total;
      proxy.post("/claim/add", formData.data).then(
        () => {
          showSuccessToast(proxy.t("common.operationSuccessful"));
          setTimeout(() => {
            onClickLeft();
          }, 500);
        },
        (err) => {
          return showFailToast(err.message);
        }
      );
    } else {
      return showFailToast(proxy.t("claim.addDetails"));
    }
  } else {
    proxy.post("/claim/delete", { id: route.query.id }).then(
      () => {
        showSuccessToast(proxy.t("common.operationSuccessful"));
        setTimeout(() => {
          onClickLeft();
        }, 500);
      },
      (err) => {
        return showFailToast(err.message);
      }
    );
  }
};
</script>
<style lang="scss" scoped>
</style>