wdly-mobile/src/views/processApproval/components/WdlyPurchase.vue

<template>
  <div class="form">
    <van-tabs v-model:active="active">
      <van-tab title="采购信息" />
      <van-tab title="采购明细" />
      <van-tab title="其他费用" />

      <div class="common-process-card" v-show="active == 0">
        <testForm
          v-model="formData.data"
          :formOption="formOption"
          :formConfig="formConfig"
          :rules="rules"
          ref="formDom1"
        >
        </testForm>
      </div>
      <div class="common-process-card" v-show="active == 1">
        <testForm
          v-model="formData.data"
          :formOption="formOptionOne"
          :formConfig="formConfigOne"
          :rules="rules"
          ref="formDom2"
        >
        </testForm>
      </div>
      <div class="common-process-card" v-show="active == 2">
        <testForm
          v-model="formData.data"
          :formOption="formOptionTwo"
          :formConfig="formConfigTwo"
          :rules="rules"
          ref="formDom3"
        >
        </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: {
    purchaseDetailList: [],
  },
});
const formDom1 = ref(null);
const formDom2 = ref(null);
const formDom3 = ref(null);

const formOption = reactive({
  readonly: false,
  disabled: false,
  labelAlign: "top",
  scroll: true,
  labelWidth: "62pk",
  hiddenSubmitBtn: true,
});
const formOptionOne = reactive({
  readonly: false,
  disabled: false,
  labelAlign: "top",
  scroll: true,
  labelWidth: "62pk",
  hiddenSubmitBtn: true,
  btnConfig: {
    isNeed: false,
    prop: "purchaseDetailList",
    plain: true,
    listTitle: "采购明细",
    listConfig: [
      {
        type: "input",
        label: "物品编码",
        prop: "productCustomCode",
        itemType: "text",
        readonly: true,
      },
      {
        type: "input",
        label: "物品名称",
        prop: "productName",
        itemType: "text",
        readonly: true,
      },
      {
        type: "picker",
        label: "单位",
        prop: "productUnit",
        itemType: "onePicker",
        showPicker: false,
        fieldNames: {
          text: "label",
          value: "value",
        },
        data: [],
      },
      {
        type: "input",
        label: "申购数量",
        prop: "subscribeCount",
        itemType: "text",
        readonly: true,
      },
      {
        type: "input",
        label: "已采购数量",
        prop: "purchaseCount",
        itemType: "text",
        readonly: true,
      },
      {
        type: "input",
        label: "本次采购",
        prop: "count",
        itemType: "text",
        readonly: true,
      },
      {
        type: "input",
        label: "单价",
        prop: "price",
        itemType: "text",
        readonly: true,
      },
      {
        type: "input",
        label: "金额",
        prop: "amount",
        itemType: "text",
        readonly: true,
      },
    ],
    clickFn: () => {},
    deleteFn: (index) => {},
  },
});
const formOptionTwo = reactive({
  readonly: false,
  disabled: false,
  labelAlign: "top",
  scroll: true,
  labelWidth: "62pk",
  hiddenSubmitBtn: true,
  btnConfig: {
    isNeed: false,
    prop: "otherFeeList",
    plain: true,
    listTitle: "采购明细",
    listConfig: [
      {
        type: "input",
        label: "费用名称",
        prop: "name",
        itemType: "text",
        readonly: true,
      },

      {
        type: "input",
        label: "金额",
        prop: "price",
        itemType: "text",
        readonly: true,
      },
      {
        type: "input",
        label: "备注",
        prop: "remark",
        itemType: "textarea",
        readonly: true,
      },
    ],
    clickFn: () => {},
    deleteFn: (index) => {},
  },
});
const formConfig = reactive([
  {
    type: "title",
    title: "基本信息",
  },
  {
    type: "input",
    label: "采购部门",
    prop: "deptName",
    itemType: "text",
    readonly: true,
  },
  {
    type: "input",
    label: "采购人",
    prop: "purchaseName",
    itemType: "text",
    readonly: true,
  },
  {
    type: "picker",
    label: "采购时间",
    prop: "purchaseTime",
    itemType: "datePickerTime",
    readonly: true,
  },
  {
    type: "title",
    title: "合同信息",
  },
  {
    type: "picker",
    label: "供应商",
    prop: "supplyId",
    itemType: "onePicker",
    showPicker: false,
    fieldNames: {
      text: "name",
      value: "id",
    },
    data: [],
  },
  {
    type: "picker",
    label: "是否合同",
    prop: "isAgreement",
    itemType: "onePicker",
    showPicker: false,
    fieldNames: {
      text: "label",
      value: "value",
    },
    data: [
      {
        label: "是",
        value: "1",
      },
      {
        label: "否",
        value: "0",
      },
    ],
  },
  {
    type: "picker",
    label: "付款方式",
    prop: "paymentMethod",
    itemType: "onePicker",
    showPicker: false,
    fieldNames: {
      text: "label",
      value: "value",
    },
    data: [],
  },
  {
    type: "input",
    label: "采购单号",
    prop: "contractCode",
    itemType: "text",
    readonly: true,
  },
  {
    type: "input",
    label: "采购总金额",
    prop: "amount",
    itemType: "text",
    readonly: true,
  },
  {
    type: "title",
    title: "其他信息",
  },
  {
    type: "input",
    label: "采购说明",
    prop: "purchaseContent",
    itemType: "textarea",
    readonly: true,
  },
]);
const formConfigOne = reactive([
  {
    type: "input",
    label: "明细金额小计",
    prop: "productAmount",
    itemType: "text",
    readonly: true,
  },
]);
const formConfigTwo = reactive([
  {
    type: "input",
    label: "运费",
    prop: "freight",
    itemType: "text",
    readonly: true,
  },
  {
    type: "input",
    label: "优惠",
    prop: "preferential",
    itemType: "text",
    readonly: true,
  },
  {
    type: "input",
    label: "其他费用小计",
    prop: "otherAmount",
    itemType: "text",
    readonly: true,
  },
]);
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") },
  ],
};
const productUnit = ref([]);
const fundsPaymentMethod = ref([]);
const supplierData = ref([]);
const getDict = () => {
  let query = {
    pageNum: 1,
    pageSize: 999,
    tenantId: getUserInfo().tenantId,
  };
  proxy
    .post("/supplierInfo/page", { pageNum: 1, pageSize: 9999 })
    .then((res) => {
      supplierData.value = res.data.rows;
      formConfig[5].data = supplierData.value;
    });
  proxy
    .post("/dictTenantData/page", {
      ...query,
      dictCode: "unit",
    })
    .then((res) => {
      if (res.data.rows && res.data.rows.length > 0) {
        productUnit.value = res.data.rows.map((item) => {
          return {
            label: item.dictValue,
            value: item.dictKey,
          };
        });
        formOptionOne.btnConfig.listConfig[2].data = productUnit.value;
      }
    });
  proxy
    .post("/dictTenantData/page", {
      ...query,
      dictCode: "funds_payment_method",
    })
    .then((res) => {
      if (res.data.rows && res.data.rows.length > 0) {
        fundsPaymentMethod.value = res.data.rows.map((item) => {
          return {
            label: item.dictValue,
            value: item.dictKey,
          };
        });
        formConfig[7].data = fundsPaymentMethod.value;
      }
    });
};
getDict();

const handleSubmit = async () => {
  const flag = true;
  if (flag) {
    return formData.data;
  }
};
let status = ref(true);
defineExpose({
  handleSubmit,
  tabsChange,
});
onMounted(() => {
  let val = route.query.businessId;
  proxy
    .post("/purchase/detail", {
      id: val,
    })
    .then((res) => {
      let jsonData = {};
      if (res.data.victoriatouristJson) {
        jsonData = JSON.parse(res.data.victoriatouristJson);
      }
      for (const key in res.data) {
        formData.data[key] = res.data[key];
      }
      for (const key in jsonData) {
        formData.data[key] = jsonData[key];
      }
      // formData.data = { ...res.data, ...jsonData };
      formData.data.purchaseDetailList = formData.data.purchaseDetailList.map(
        (x) => ({
          ...x,
          subscribeCount: x.subscribeQuantity,
          purchaseCount: x.purchaseQuantity,
        })
      );
      formData.data.productAmount = formData.data.purchaseDetailList.reduce(
        (val, x) => (val += x.price * x.count),
        0
      );
      formData.data.productAmount = formData.data.productAmount.toFixed(2);
      formData.data.otherAmount = formData.data.otherFeeList.reduce(
        (val, x) => (val += Number(x.price)),
        0
      );
      formData.data.otherAmount = formData.data.otherAmount.toFixed(2);
      console.log(formDom1.value.formDataShowLabelOne, "qwdq");
      formDom1.value.formDataShowLabelOne();
      formDom2.value.formDataListShowLabelOne();
    });

  // proxy.post("/fileInfo/getList", { businessIdList: [val] }).then((fileObj) => {
  //   formData.data.fileList = fileObj[val] || [];
  //   if (formData.data.fileList && formData.data.fileList.length > 0) {
  //     fileList.value = formData.data.fileList.map((item) => {
  //       return {
  //         raw: item,
  //         name: item.fileName,
  //         url: item.fileUrl,
  //       };
  //     });
  //   }
  // });
});
</script>
<style lang="scss" scoped></style>