fans-mobile/src/views/MES/processes/add.vue

<template>
  <div class="form" style="padding-bottom: 60px">
    <van-nav-bar :title="'工序管理'" :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"></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: {
    productionTaskDetailList: [],
  },
});
const rules = {
  productionPlanId: [
    { required: true, message: proxy.t("task.selectProductionPlan") },
  ],
  dueDate: [
    { required: true, message: proxy.t("task.selectCompletionDeadline") },
  ],
  personLiableId: [
    { required: true, message: proxy.t("task.selectPrincipal") },
  ],
  quantity: [
    { required: true, message: proxy.t("task.taskQuantityCanNotBeEmpty") },
  ],
};
const formOption = reactive({
  readonly: false, //用于控制整个表单是否只读
  disabled: false,
  labelAlign: "top",
  scroll: true,
  labelWidth: "62pk",
  hiddenSubmitBtn: false,
  btnConfig: {
    isNeed: false,
    prop: "productionTaskDetailList",
    plain: true,
    listTitle: proxy.t("common.productDetails"),
    listConfig: [
      {
        type: "input",
        itemType: "text",
        label: proxy.t("receive.productSN"),
        prop: "productSn",
        readonly: true,
      },
      {
        type: "input",
        itemType: "text",
        label: proxy.t("task.currentProcess"),
        prop: "productionProcessesName",
        readonly: true,
      },
      {
        type: "input",
        itemType: "text",
        label: proxy.t("task.accumulatedTimeConsumption"),
        prop: "cumulativeTime",
        readonly: true,
      },
    ],
    clickFn: () => {},
  },
});
const formConfig = reactive([
  // {
  //   type: "picker",
  //   label: proxy.t('task.productionPlan'),
  //   prop: "productionPlanId",
  //   itemType: "onePicker",
  //   showPicker: false,
  //   fieldNames: {
  //     text: "label",
  //     value: "value",
  //   },
  //   data: [],
  //   changeFn: (option, item, index) => {
  //     if (option.selectedOptions[0]) {
  //       formData.data["productionPlanId" + "Name"] =
  //         option.selectedOptions[0].label;
  //       formData.data.productionPlanId = option.selectedOptions[0].value;
  //       formData.data.productName = option.selectedOptions[0].productName;
  //       formData.data.waitQuantity =
  //         option.selectedOptions[0].remainingQuantity;
  //       formData.data.startDate = option.selectedOptions[0].startDate;
  //       formConfig[index].showPicker = false;
  //     } else {
  //       formConfig[index].showPicker = false;
  //     }
  //   },
  // },
  {
    type: "input",
    itemType: "text",
    label: "工序名称",
    prop: "name",
    readonly: true,
  },
  {
    type: "input",
    itemType: "textarea",
    label: "工序说明",
    prop: "remarks",
    readonly: true,
  },
  // {
  //   type: "input",
  //   itemType: "number",
  //   label: proxy.t('task.scheduledQuantity'),
  //   prop: "waitQuantity",
  //   readonly: true,
  // },
  // {
  //   type: "input",
  //   itemType: "number",
  //   label: proxy.t('task.taskQuantity'),
  //   prop: "quantity",
  // },
  // {
  //   type: "picker",
  //   label: proxy.t('task.principal'),
  //   prop: "personLiableId",
  //   itemType: "onePicker",
  //   showPicker: false,
  //   fieldNames: {
  //     text: "label",
  //     value: "value",
  //   },
  //   data: [],
  // },
  // {
  //   type: "picker",
  //   label: proxy.t('task.completionDeadline'),
  //   prop: "dueDate",
  //   itemType: "datePicker",
  //   showPicker: false,
  //   split: "-",
  //   columnsType: ["year", "month", "day"],
  // },
]);
const getDict = () => {
  proxy
    .post("/productionPlan/page", { pageNum: 1, pageSize: 9999 })
    .then((res) => {
      formConfig[0].data = res.data.rows.map((item) => {
        return {
          ...item,
          label: item.code,
          value: item.id,
        };
      });
    });

  proxy.get("/system/user/list?pageNum=1&pageSize=9999").then((res) => {
    formConfig[4].data = res.rows.map((item) => {
      return {
        label: item.userName,
        value: item.userId,
      };
    });
  });
};

const onClickLeft = () => history.back();
const onSubmit = () => {
  if (Number(formData.data.quantity) > Number(formData.data.waitQuantity)) {
    return showFailToast(
      proxy.t("task.taskQuantityCanNotBeGreaterThanTheScheduledQuantity")
    );
  }
  if (proxy.compareTime(formData.data.startDate, formData.data.dueDate)) {
    return showFailToast(
      proxy.t("task.completionDeadlineCanNotBeEarlierThanThePlanStartTime")
    );
  }
  proxy.post("/productionTask/addByJxst", formData.data).then(
    (res) => {
      setTimeout(() => {
        showSuccessToast(proxy.t("common.addSuccess"));
        proxy.$router.push("/main/jxskTask");
      }, 500);
    },
    (err) => {
      return showFailToast(err.message);
    }
  );
};
const getDetails = () => {
  proxy.post("/productionProcesses/detail", { id: route.query.id }).then(
    (res) => {
      formData.data = res.data;
    },
    (err) => {
      return showFailToast(err.message);
    }
  );
};
onMounted(() => {
  // getDict();
  if (route.query.id) {
    getDetails();
    formOption.readonly = true; //全部只读
    formOption.hiddenSubmitBtn = true; //隐藏提交按钮
  }
});
</script>
<style lang="scss" scoped>
.row {
  display: flex;
  padding: 5px 10px 0 10px;
  justify-content: space-between;
  align-items: center;
  .title {
    flex: 1;
  }
  .delete {
    width: 20px;
    cursor: pointer;
    text-align: center;
  }
}
</style>