byte-sailing-mobile/src/views/production/workingProcedure/add.vue

<template>
  <div class="form">
    <van-nav-bar
      :title="$t('workingProcedure.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"
    ></testForm>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted, reactive } from "vue";
import { showSuccessToast, showToast, showFailToast } from "vant";
import { useRoute } from "vue-router";
import { getUserInfo } from "@/utils/auth";
import testForm from "@/components/testForm/index.vue";
const proxy = getCurrentInstance().proxy;
const route = useRoute();
const show = ref(false);
const typeModal = ref(false);
const unitModal = ref(false);
const classification = ref([]);
const formData = reactive({
  data: {},
});
const formDom = ref(null);
const formOption = reactive({
  readonly: false, //用于控制整个表单是否只读
  disabled: false,
  labelAlign: "top",
  scroll: true,
  labelWidth: "62pk",
  // hiddenSubmitBtn: true,
});
const formConfig = reactive([
  {
    type: "input",
    itemType: "text",
    label: proxy.t('workingProcedure.processName'),
    prop: "name",
    clearable: true,
  },
  {
    type: "input",
    itemType: "textarea",
    label: proxy.t('workingProcedure.processDescription'),
    prop: "remarks",
  },
  {
    type: "upload",
    label: proxy.t('workingProcedure.processFile'),
    prop: "fileList",
  },
]);
const rules = {
  name: [{ required: true, message:  proxy.t('workingProcedure.workshopTypeCanNotBeEmpty') }],
  fileList: [{ required: true, message:  proxy.t('workingProcedure.pleaseUploadProcessFile') }],
};
const unitList = ref([]);

const getUserList = () => {
  proxy.get("/system/user/list?pageNum=1&pageSize=10000", {}).then((res) => {
    formConfig[2].data = res.rows;
  });
};
getUserList();
const fileList = ref([]);
const onOversize = () => {
  showToast("文件大小不能超过 5MB");
};
const onClickLeft = () => history.back();
const onSubmit = () => {
  console.log(formData);
  if (formData.data.fileList.length > 0) {
    proxy
      .post("/productionProcesses/" + route.query.type, formData.data)
      .then(() => {
        showSuccessToast(route.query.type === "add" ? proxy.t('common.addSuccess') : proxy.t('common.modifySuccess'));
        setTimeout(() => {
          history.back();
        }, 500);
      });
  } else {
    return showFailToast(proxy.t('workingProcedure.pleaseUploadProcessFile'));
  }
};
const treeToList = (arr) => {
  let res = []; // 用于存储递归结果（扁平数据）
  // 递归函数
  let fn = (source) => {
    source.forEach((el) => {
      res.push(el);
      el.children && el.children.length > 0 ? fn(el.children) : ""; // 子级递归
    });
  };
  fn(arr);
  return res;
};
onMounted(() => {
  if (route.query.id) {
    proxy
      .post("/productionProcesses/detail", { id: route.query.id })
      .then((resDetail) => {
        formData.data = resDetail.data;
      });
    proxy
      .post("/fileInfo/getList", { businessIdList: [route.query.id] })
      .then((res) => {
        if (res.data[route.query.id] && res.data[route.query.id].length > 0) {
          formData.data.fileList = res.data[route.query.id];
          formData.data.fileList = formData.data.fileList.map((item) => {
            return {
              ...item,
              url: item.fileUrl,
            };
          });
        } else {
          formData.data.fileList = [];
          fileList.value = [];
        }
      });
  }
});
</script>