byte-sailing-mobile/src/views/JXSK/salesContract/add.vue

<template>
  <div class="form">
    <van-nav-bar
      title="销售合同"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    >
    </van-nav-bar>
    <testForm
      v-model="formData.data"
      :formOption="formOption"
      :formConfig="formConfig"
      :rules="rules"
      @onSubmit="onSubmit"
      ref="formDom"
    ></testForm>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted } 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 formDom = ref(null);
const formData = reactive({
  data: {
    salesContractDetailsList: [],
  },
});
const rules = {
  customerId: [{ required: true, message: "请选择客户名称" }],
  deliveryDate: [{ required: true, message: "请选择交货期限" }],
  payMethod: [{ required: true, message: "请选择付款方式" }],
  freightPayer: [{ required: true, message: "请选择运费支付方" }],
  productId: [{ required: true, message: "请选择产品名称" }],
  isCustomized: [{ required: true, message: "请选择是否定制" }],
  unitPrice: [{ required: true, message: "请输入单价" }],
  quantity: [{ required: true, message: "请输入数量" }],
};
const formOption = reactive({
  readonly: false, //用于控制整个表单是否只读
  disabled: false,
  labelAlign: "top",
  scroll: true,
  labelWidth: "62pk",
  hiddenSubmitBtn: false,
  btnConfig: {
    isNeed: true,
    prop: "salesContractDetailsList",
    plain: true,
    listTitle: "合同明细",
    listConfig: [
      {
        type: "picker",
        label: "产品名称",
        prop: "productId",
        itemType: "onePicker",
        showPicker: false,
        readonly: false,
        fieldNames: {
          text: "label",
          value: "value",
        },
        data: [],
      },
      {
        type: "picker",
        label: "是否定制",
        prop: "isCustomized",
        itemType: "onePicker",
        showPicker: false,
        readonly: false,
        fieldNames: {
          text: "label",
          value: "value",
        },
        data: [
          {
            label: "是",
            value: "1",
          },
          {
            label: "否",
            value: "0",
          },
        ],
      },
      {
        type: "input",
        itemType: "number",
        label: "单价",
        prop: "unitPrice",
        clearable: true,
        changeFn: (index, val) => {
          changeAmount(index);
        },
      },
      {
        type: "input",
        itemType: "number",
        label: "数量",
        prop: "quantity",
        clearable: true,
        changeFn: (index, val) => {
          changeAmount(index);
        },
      },
      {
        type: "input",
        itemType: "number",
        label: "金额小计",
        prop: "total",
        placeholder: "根据单价、数量自动计算",
        readonly: true,
      },
    ],
    clickFn: () => {
      if (
        formData.data.salesContractDetailsList &&
        formData.data.salesContractDetailsList.length > 0
      ) {
        formData.data.salesContractDetailsList.push({
          productId: "",
          quantity: "",
        });
      } else {
        formData.data.salesContractDetailsList = [
          {
            productId: "",
            quantity: "",
          },
        ];
      }
    },
  },
});
const formConfig = reactive([
  {
    type: "picker",
    label: "客户名称",
    prop: "customerId",
    itemType: "onePicker",
    showPicker: false,
    fieldNames: {
      text: "label",
      value: "value",
    },
    data: [],
  },
  {
    type: "picker",
    label: "交货期限",
    prop: "deliveryDate",
    itemType: "datePicker",
    showPicker: false,
    split: "-",
    columnsType: ["year", "month", "day"],
  },
  {
    type: "picker",
    label: "付款方式",
    prop: "payMethod",
    itemType: "onePicker",
    showPicker: false,
    fieldNames: {
      text: "label",
      value: "value",
    },
    data: [],
  },
  {
    type: "picker",
    label: "运费支付方",
    prop: "freightPayer",
    itemType: "onePicker",
    showPicker: false,
    fieldNames: {
      text: "label",
      value: "value",
    },
    data: [
      {
        label: "甲方",
        value: "0",
      },
      {
        label: "乙方",
        value: "1",
      },
    ],
  },
  {
    type: "input",
    itemType: "textarea",
    label: "备注",
    prop: "remark",
  },
  {
    type: "input",
    itemType: "number",
    label: "合同总金额",
    prop: "total",
    readonly: true,
  },
]);
const onClickLeft = () => history.back();
const fundsPaymentMethod = ref([]);
const customerData = ref([]);
const productData = ref([]);
const getDict = () => {
  proxy.getDictOne(["funds_payment_method"]).then((res) => {
    fundsPaymentMethod.value = res["funds_payment_method"].data.map((x) => ({
      label: x.dictValue,
      value: x.dictKey,
    }));
    formConfig[2].data = fundsPaymentMethod.value;
  });
  proxy.post("/customer/page", { pageNum: 1, pageSize: 9999 }).then((res) => {
    customerData.value = res.data.rows.map((x) => ({
      label: x.name,
      value: x.id,
    }));
    formConfig[0].data = customerData.value;
  });
  proxy
    .post("/productInfo/page", { pageNum: 1, pageSize: 9999, definition: "1" })
    .then((res) => {
      productData.value = res.data.rows.map((x) => ({
        label: x.name,
        value: x.id,
      }));
      formOption.btnConfig.listConfig[0].data = productData.value;
    });
};

const getDetails = (id) => {
  proxy.post("/salesContract/detail", { id }).then((res) => {
    if (res.data && res.data.contractDetailsList.length > 0) {
      res.data.salesContractDetailsList = res.data.contractDetailsList;
    } else {
      res.data.salesContractDetailsList = [];
    }
    formData.data = res.data;
    changeAmount();
  });
};

onMounted(() => {
  getDict();
  if (route.query.id) {
    getDetails(route.query.id);
    formOption.readonly = true; //全部只读
    formOption.hiddenSubmitBtn = true; //隐藏提交按钮
    formOption.btnConfig.isNeed = false;
  }
});

const onSubmit = () => {
  if (formData.data.salesContractDetailsList.length > 0) {
    proxy
      .post("/flowProcess/initiate", {
        flowKey: "jxst_sales_contract_flow",
        data: formData.data,
      })
      .then(
        () => {
          showSuccessToast("操作成功");
          setTimeout(() => {
            onClickLeft();
          }, 500);
        },
        (err) => {
          return showFailToast(err.message);
        }
      );
  } else {
    return showFailToast("请添加合同明细！");
  }
};

const changeAmount = (index) => {
  let total = 0;
  for (let i = 0; i < formData.data.salesContractDetailsList.length; i++) {
    const element = formData.data.salesContractDetailsList[i];
    if (element.unitPrice && element.quantity) {
      element.total = parseFloat(element.unitPrice * element.quantity).toFixed(
        2
      );
      total += Number(element.total);
    }
  }
  if (total) {
    formData.data.total = total.toFixed(2);
  }
};
</script>
<style lang="scss" scoped>
.form {
  margin-bottom: 60px;
}
</style>