qqq

src/components/testForm/index.vue

@@ -0,0 +1,201 @@
+<template>
+  <div>
+    <van-form
+      @submit="onSubmit"
+      :disabled="formOption.disabled"
+      :readonly="formOption.readonly"
+      :label-width="formOption.labelWidth"
+      :label-align="formOption.labelAlign || 'top'"
+      :scroll-to-error="formOption.scroll"
+      ref="testForm"
+    >
+      <van-cell-group inset>
+        <van-field
+          v-for="i in formConfig"
+          v-model="formData[i.prop]"
+          :name="i.prop"
+          :label="i.label"
+          :type="i.itemType ? i.itemType : 'text'"
+          :readonly="getReadonly(i)"
+          :placeholder="i.placeholder"
+          :rules="getRules(i.prop)"
+          :is-link="i.isLink ? i.isLink : i.name == 'picker' ? true : false"
+          :clearable="i.clearable ? i.clearable : false"
+          @click="handleClickFiel(i)"
+        >
+          <template #input v-if="i.fielSlot == 'switch'">
+            <van-switch v-model="formData[i.prop]" />
+          </template>
+
+          <template #input v-else-if="i.fielSlot == 'groupChecked'">
+            <van-checkbox-group
+              v-model="formData[i.prop]"
+              direction="horizontal"
+            >
+              <van-checkbox name="1" shape="square">复选框 1</van-checkbox>
+              <van-checkbox name="2" shape="square">复选框 2</van-checkbox>
+            </van-checkbox-group>
+          </template>
+
+          <template #input v-else-if="i.fielSlot == 'radio'">
+            <van-radio-group v-model="formData[i.prop]" direction="horizontal">
+              <van-radio
+                v-for="j in i.data"
+                :key="j.value"
+                :name="j.value || j.id"
+                >{{ j.label || j.title }}</van-radio
+              >
+            </van-radio-group>
+          </template>
+
+          <!-- <van-popup
+            v-if="i.name == 'picker'"
+            v-model:show="i.showPicker"
+            round
+            :position="
+              i.pickerOption.position ? i.pickerOption.position : 'bottom'
+            "
+          >
+            <van-picker
+              :columns="i.pickerOption.data"
+              @cancel="i.showPicker = false"
+              @confirm="() => onConfirm()"
+            />
+          </van-popup> -->
+        </van-field>
+        <van-popup
+          v-for="i in pickerData"
+          :key="i.prop"
+          v-model:show="i.showPicker"
+          round
+          :position="
+            i.pickerOption.position ? i.pickerOption.position : 'bottom'
+          "
+        >
+          <van-picker
+            :columns="i.pickerOption.data"
+            @cancel="i.showPicker = false"
+            @confirm="() => onConfirm()"
+          />
+        </van-popup>
+      </van-cell-group>
+      <div style="margin: 16px">
+        <van-button round block type="primary" native-type="submit">
+          提交
+        </van-button>
+      </div>
+    </van-form>
+    <!-- <div>{{ num }}</div> -->
+    <div v-for="i in pickerData">{{ i.label }}</div>
+  </div>
+</template>
+
+<script setup>
+import {
+  ref,
+  getCurrentInstance,
+  onMounted,
+  reactive,
+  computed,
+  toRefs,
+} from "vue";
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: false,
+  },
+  formConfig: {
+    type: Array,
+    default: false,
+  },
+  formOption: {
+    type: Object,
+    default: false,
+  },
+  rules: {
+    type: Object,
+    default: false,
+  },
+});
+const proxy = getCurrentInstance().proxy;
+const { formConfig, formOption, rules } = toRefs(props);
+
+const formData = computed(() => {
+  return proxy.modelValue;
+});
+const emit = defineEmits(["update:modelValue"]);
+
+const onSubmit = () => {};
+//根据resurl获取数据
+
+// 获取验证规则
+const getRules = (prop) => {
+  if (rules.value.hasOwnProperty(prop) && rules.value[prop]) {
+    return rules.value[prop];
+  }
+};
+const getReadonly = (i) => {
+  return i.readonly ? i.readonly : i.name == "picker" ? true : false;
+};
+//
+const pickerData = ref([]);
+const handleClickFiel = (i) => {
+  if (i.name && i.name == "picker") {
+    const current = pickerData.value.find((x) => x.name == i.name);
+    current.showPicker = true;
+  }
+};
+
+onMounted(() => {
+  pickerData.value = formConfig.value.filter((x) => x.name == "picker");
+  console.log(pickerData.value, "wss");
+});
+
+const testForm = ref(null); // 延迟使用，因为还没有返回跟挂载
+
+const formDataInit = () => {
+  var map = {
+    input: "",
+    radio: null,
+    select: null,
+    checkbox: [],
+    date: "",
+    datetime: "",
+    daterange: [],
+    datetimerange: [],
+    year: null,
+    month: null,
+    switch: false,
+    inputNumber: 0,
+    cascader: [],
+    Solt: null,
+    Transfer: [],
+    Upload: { path: null, id: null, name: null },
+    password: "",
+    treeSelect: "",
+    json: {},
+  };
+  const formDataCopy = { ...formData.value };
+  for (let i = 0; i < proxy.formConfig.length; i++) {
+    const element = proxy.formConfig[i];
+
+    if (formDataCopy[element.prop] || element.type === "slot") {
+      continue;
+    }
+
+    if (map[element.itemType] != undefined) {
+      formData.value[element.prop] = map[element.itemType];
+    } else {
+      formData.value[element.prop] = element.multiple ? [] : map[element.type];
+    }
+  }
+
+  emit("update:modelValue", formData.value);
+};
+
+formDataInit();
+</script>
+
+<style lang="scss" scoped>
+</style>

src/router/index.js

@@ -4,7 +4,9 @@ import {
 } from 'vue-router'
 import login from '../views/login.vue'
 import main from '../views/main.vue'
-import { routesLXF } from './routerLXF.js'
+import {
+	routesLXF
+} from './routerLXF.js'
 
 const routes = [{
 		path: '/',
@@ -41,7 +43,7 @@ const routes = [{
 				name: '经编机',
 				component: () => import('../views/equipment/warpKnitting.vue')
 			},
-			
+
 			{
 				path: 'fermentator/:id',
 				name: '发酵机',
@@ -112,8 +114,8 @@ const routes = [{
 				name: '已采购详情',
 				component: () => import('../views/procurementManagement/purchased/add.vue')
 			},
-			
-			
+
+
 			//仓库模块
 			{
 				path: 'warehouseConfig',
@@ -267,6 +269,11 @@ const routes = [{
 				name: '完工入库新增',
 				component: () => import('../views/MES/produceManage/completeProject/add.vue')
 			},
+			{
+				path: 'completeProjectAdd1',
+				name: 'form表单测试',
+				component: () => import('../views/MES/produceManage/completeProject1/index.vue')
+			},
 		]
 	},
 ]

src/views/MES/produceManage/completeProject1/index.vue

@@ -0,0 +1,109 @@
+<template>
+  <div style="padding-bottom: 60px">
+    <van-nav-bar title="完工入库" left-text="" left-arrow>
+      <template #right> 添加 </template>
+    </van-nav-bar>
+    <van-search v-model="req.keyword" placeholder="请输入搜索关键词" />
+    <testForm
+      v-model="formData.data"
+      :formOption="formOption"
+      :formConfig="formConfig"
+      :rules="rules"
+    ></testForm>
+  </div>
+</template>
+<script setup>
+import { ref, getCurrentInstance, onMounted, reactive } from "vue";
+import commonList from "@/components/common-list.vue";
+import { useRoute } from "vue-router";
+import testForm from "@/components/testForm/index.vue";
+const loading = ref(false);
+const router = useRoute();
+const req = ref({
+  pageNum: 1,
+  keyword: null,
+});
+const finished = ref(false);
+const proxy = getCurrentInstance().proxy;
+
+const formOption = reactive({
+  readonly: false,
+  disabled: false,
+  labelAlign: "top",
+  scroll: true,
+  labelWidth: "62pk",
+});
+
+const formConfig = reactive([
+  {
+    itemType: "text",
+    label: "姓名",
+    prop: "name",
+    clearable: true,
+  },
+  {
+    itemType: "password",
+    label: "密码",
+    prop: "password",
+  },
+  {
+    label: "开关",
+    prop: "switch",
+    fielSlot: "switch",
+  },
+  {
+    label: "复选框组",
+    prop: "groupChecked",
+    fielSlot: "groupChecked",
+  },
+  {
+    label: "单选框",
+    prop: "radio",
+    fielSlot: "radio",
+    data: [
+      {
+        label: "dan1",
+        id: "10",
+      },
+      {
+        title: "dan2",
+        value: "20",
+      },
+    ],
+  },
+  {
+    name: "picker",
+    label: "选择器",
+    prop: "select",
+    // isLink: true,
+    showPicker: false,
+    pickerOption: {
+      data: [
+        {
+          text: "1",
+          value: "1",
+        },
+        {
+          text: "2",
+          value: "2",
+        },
+      ],
+    },
+  },
+]);
+const rules = {
+  name: [{ required: true, message: "请填写姓名" }],
+  password: [{ required: true, message: "请填写密码" }],
+};
+const formData = reactive({
+  data: {},
+});
+
+// getList();
+</script>
+
+<style lang="scss" scoped>
+.list {
+  min-height: 70vh;
+}
+</style>