byte-sailing-mobile/src/views/JXSK/mes/task/add.vue

<template>
  <div class="form" style="padding-bottom: 60px">
    <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: {
    list: [],
  },
});
const rules = {
  warehouseName: [{ required: true, message: "仓库名称不能为空" }],
  productName: [{ required: true, message: "物品名称不能为空" }],
  quantity: [{ required: true, message: "入库数量不能为空" }],
};
const formOption = reactive({
  readonly: false, //用于控制整个表单是否只读
  disabled: false,
  labelAlign: "top",
  scroll: true,
  labelWidth: "62pk",
  btnConfig: {
    isNeed: false,
    prop: "list",
    plain: true,
    listTitle: "",
    listConfig: [],
    clickFn: () => {},
  },
});
const formConfig = reactive([
  {
    type: "picker",
    label: "生产计划",
    prop: "warehouseId",
    itemType: "onePicker",
    showPicker: false,
    fieldNames: {
      text: "label",
      value: "value",
    },
    data: [],
  },
  {
    type: "input",
    itemType: "text",
    label: "产品名称",
    prop: "reamlke",
    readonly: true,
  },
  {
    type: "input",
    itemType: "number",
    label: "待排程数量",
    prop: "reamlke",
    readonly: true,
  },
  {
    type: "input",
    itemType: "number",
    label: "任务数量",
    prop: "reamlke",
  },
  {
    type: "picker",
    label: "负责人",
    prop: "warehouseId",
    itemType: "onePicker",
    showPicker: false,
    fieldNames: {
      text: "label",
      value: "value",
    },
    data: [],
  },
  {
    type: "picker",
    label: "完成期限",
    prop: "date",
    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.productName,
          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 = () => {
  proxy.post("/productionTask/add", formData.data).then(
    (res) => {
      setTimeout(() => {
        showSuccessToast("添加成功");
        proxy.$router.push("/main/task");
      }, 500);
    },
    (err) => {
      return showFailToast(err.message);
    }
  );
};
const getDetails = () => {
  proxy.post("/productionTask/detail", { id: route.query.id }).then(
    (res) => {
      console.log(res, "ada");
    },
    (err) => {
      return showFailToast(err.message);
    }
  );
};
onMounted(() => {
  getDict();
  if (route.query.id) {
    getDetails();
  }
});
</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>