byte-sailing-mobile/src/views/product-material/product-library/add.vue

<template>
	<div class="form">
		<van-nav-bar
			:title="$t('productLibrary.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 } 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: "cascader",
    label: proxy.t('productLibrary.productClassification'),
    prop: "productClassifyId",
    itemType: "common",
    showPicker: false,
    // data: classification.value,
    data: [],
    fieldNames: {
      text: "label",
      value: "id",
      children: "children",
    },
    // onChangeFn: (option) => {
    //   // console.log("aa");
    // },
    // finishFn: (current, option) => {
    //   current.showPicker = false;
    // },
  },
  {
    type: "picker",
    label: proxy.t('productLibrary.productType'),
    prop: "type",
    itemType: "onePicker",
    showPicker: false,
    fieldNames: {
      text: "label",
      value: "id",
    },
    data: [
      {
        label: proxy.t('productLibrary.finishedProduct'),
        id: "10",
      },
      {
        label: proxy.t('productLibrary.semifinishedProduct'),
        id: "2",
      },
    ],
  },
  {
    type: "input",
    itemType: "text",
    label: proxy.t('productLibrary.productName'),
    prop: "name",
    clearable: true,
  },
  {
    type: "input",
    itemType: "text",
    label: proxy.t('productLibrary.specificationModel'),
    prop: "spec",
    clearable: true,
  },
  {
    type: "picker",
    label: proxy.t('productLibrary.unit'),
    prop: "unit",
    itemType: "onePicker",
    showPicker: false,
    fieldNames: {
      text: "dictValue",
      value: "dictKey",
    },
    data: []
  },
  {
    type: "upload",
    label: proxy.t('productLibrary.fileUpload'),
    prop: "fileList",
  },
  {
    type: "input",
    itemType: "textarea",
    label: proxy.t('productLibrary.remarks'),
    prop: "remark",
  },
]);
const rules = {
  productClassifyId: [{ required: true, message: proxy.t('productLibrary.productClassificationCanNotBeEmpty') }],
  type: [{ required: true, message: proxy.t('productLibrary.productTypeCanNotBeEmpty') }],
  name: [{ required: true, message: proxy.t('productLibrary.productNameCanNotBeEmpty') }],
  spec: [{ required: true, message: proxy.t('productLibrary.specificationModelCanNotBeEmpty') }],
  unit: [{ required: true, message: proxy.t('productLibrary.unitCanNotBeEmpty') }],
  select: [{ required: true, message: proxy.t('productLibrary.pleaseSelect') }],
  date: [{ required: true, message: proxy.t('productLibrary.pleaseSelectTime') }],
  common: [{ required: true, message: proxy.t('productLibrary.pleaseSelectCascader') }],
  // city: [{ required: true, message: "请选择城市" }],
};
const unitList = ref([]);

const getDict = () => {
  proxy
    .post("/dictTenantData/page", {
      pageNum: 1,
      pageSize: 999,
      tenantId: getUserInfo().tenantId,
      dictCode: "unit",
    })
    .then((res) => {
      formConfig[4].data = res.data.rows
    })
}
getDict()
const fileList = ref([]);
const onClickLeft = () => history.back();
const onSubmit = () => {
  console.log(formData)
  
  proxy.post("/productInfo/" + route.query.type, formData.data).then(() => {
    showSuccessToast(proxy.t('common.addSuccess'));
    setTimeout(() => {
      history.back();
    }, 500);
  });
};
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(() => {
  proxy.post("/productClassify/tree", { parentId: "", name: "", definition: "1" }).then((res) => {
    formConfig[0].data = res.data;
    let classList = treeToList(res.data);
    if (route.query.id) {
      proxy.post("/productInfo/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.value.fileList = res.data[route.query.id];
      //     fileList.value = res.data[route.query.id].map((item) => {
      //       return {
      //         ...item,
      //         url: item.fileUrl,
      //       };
      //     });
      //   } else {
      //     formData.value.fileList = [];
      //     fileList.value = [];
      //   }
      // });
    }else {
      
    }
  });
});
</script>