form表单优化

src/components/testForm/index.vue

@@ -21,10 +21,16 @@
             :clearable="i.clearable ? i.clearable : false"
             :readonly="i.readonly != undefined ? i.readonly : false"
             :rules="getRules(i.prop)"
+            :required="getRequired(i.prop)"
           >
           </van-field>
           <!-- switch -->
-          <van-field v-if="i.type == 'switch'" :label="i.label" :name="i.prop">
+          <van-field
+            v-if="i.type == 'switch'"
+            :label="i.label"
+            :name="i.prop"
+            :required="getRequired(i.prop)"
+          >
             <template #input>
               <van-switch v-model="formData[i.prop]" />
             </template>
@@ -35,6 +41,7 @@
             :label="i.label"
             :name="i.prop"
             :rules="getRules(i.prop)"
+            :required="getRequired(i.prop)"
           >
             <template #input>
               <van-checkbox-group
@@ -57,6 +64,7 @@
             :label="i.label"
             :name="i.prop"
             :rules="getRules(i.prop)"
+            :required="getRequired(i.prop)"
           >
             <template #input>
               <van-radio-group
@@ -83,6 +91,7 @@
             :placeholder="i.placeholder ? i.placeholder : '请选择'"
             @click="() => (!formOption.readonly ? (i.showPicker = true) : '')"
             :rules="getRules(i.prop)"
+            :required="getRequired(i.prop)"
           >
           </van-field>
           <van-popup
@@ -92,7 +101,7 @@
             v-if="i.type == 'picker' && i.itemType == 'onePicker'"
           >
             <van-picker
-              :columns="i.pickerOption.columns"
+              :columns="i.data"
               :columns-field-names="
                 i.fieldNames ? i.fieldNames : onePickerFieldNames
               "
@@ -111,6 +120,7 @@
             :placeholder="i.placeholder ? i.placeholder : '请选择'"
             @click="() => (!formOption.readonly ? (i.showPicker = true) : '')"
             :rules="getRules(i.prop)"
+            :required="getRequired(i.prop)"
           >
           </van-field>
           <van-popup
@@ -138,6 +148,7 @@
             :placeholder="i.placeholder ? i.placeholder : '请选择'"
             @click="() => (!formOption.readonly ? (i.showPicker = true) : '')"
             :rules="getRules(i.prop)"
+            :required="getRequired(i.prop)"
           />
           <van-popup
             v-if="i.type == 'cascader' && i.itemType == 'city'"
@@ -165,6 +176,7 @@
             :placeholder="i.placeholder ? i.placeholder : '请选择'"
             @click="() => (!formOption.readonly ? (i.showPicker = true) : '')"
             :rules="getRules(i.prop)"
+            :required="getRequired(i.prop)"
           />
           <van-popup
             v-if="i.type == 'cascader' && i.itemType == 'common'"
@@ -175,7 +187,7 @@
             <van-cascader
               v-model="formData[i.prop]"
               :title="i.title ? i.title : '请选择'"
-              :options="i.options"
+              :options="i.data"
               :field-names="i.fieldNames ? i.fieldNames : fieldNames"
               @close="i.showPicker = false"
               @change="(option) => commonOnChange(option, i, index)"
@@ -204,7 +216,12 @@
             </template>
           </van-field>
           <!-- 插槽 -->
-          <van-field v-if="i.type == 'slot'" :label="i.label">
+          <van-field
+            v-if="i.type == 'slot'"
+            :label="i.label"
+            :rules="getRules(i.prop)"
+            :required="getRequired(i.prop)"
+          >
             <template #input>
               <div>
                 <slot :name="i.slotName"> {{ i.slotName }}插槽占位符 </slot>
@@ -242,6 +259,7 @@
             :clearable="i.clearable ? i.clearable : false"
             :readonly="i.readonly != undefined ? i.readonly : false"
             :rules="getRules(i.prop)"
+            :required="getRequired(i.prop)"
           >
           </van-field>
           <!-- 单选 -->
@@ -255,6 +273,7 @@
             :placeholder="i.placeholder ? i.placeholder : '请选择'"
             @click="handleListItemClick(i, index, sonIndex)"
             :rules="getRules(i.prop)"
+            :required="getRequired(i.prop)"
           >
           </van-field>
           <!-- 时间选择器 -->
@@ -268,6 +287,7 @@
             :placeholder="i.placeholder ? i.placeholder : '请选择'"
             @click="handleListItemClick(i, index, sonIndex)"
             :rules="getRules(i.prop)"
+            :required="getRequired(i.prop)"
           >
           </van-field>
         </div>
@@ -281,7 +301,7 @@
           v-if="item.type == 'picker' && item.itemType == 'onePicker'"
         >
           <van-picker
-            :columns="item.pickerOption.columns"
+            :columns="item.data"
             :columns-field-names="
               item.fieldNames ? item.fieldNames : onePickerFieldNames
             "
@@ -388,6 +408,12 @@ const getRules = (prop) => {
     return rules.value[prop];
   }
 };
+const getRequired = (prop) => {
+  if (rules.value.hasOwnProperty(prop) && rules.value[prop]) {
+    return true;
+  }
+  return false;
+};
 const getReadonly = (i) => {
   return i.readonly ? i.readonly : i.name == "picker" ? true : false;
 };
@@ -429,7 +455,7 @@ const selectDataEcho = (item, val) => {
     const valueAtt = item.fieldNames
       ? item.fieldNames.value
       : onePickerFieldNames.value;
-    const current = item.pickerOption.columns.find((x) => x[valueAtt] === val);
+    const current = item.data.find((x) => x[valueAtt] === val);
     return current ? current[textAtt] : "";
   } else if (item.type === "cascader" && item.itemType === "common") {
     const textAtt = item.fieldNames ? item.fieldNames.text : fieldNames.text;
@@ -437,100 +463,117 @@ const selectDataEcho = (item, val) => {
     const childrenAtt = item.fieldNames
       ? item.fieldNames.children
       : fieldNames.children;
-    const arr = item.options ? item.options : [];
+    const arr = item.data ? item.data : [];
     const current = recursionFn(arr, val, valueAtt, childrenAtt);
     return current ? current[textAtt] : "";
   }
 };
 
 let btnConfigCopy = {};
-const formDataInit = (flag) => {
-  if (!flag) {
-    var map = {
-      input: "",
-      radio: "",
-      switch: false,
-      checkbox: [],
-      date: "",
-      picker: "",
-      cascader: "",
-      upload: [],
-    };
-    // 判断是否需要按钮
-    if (formOption.value.btnConfig && formOption.value.btnConfig.isNeed) {
-      btnConfigCopy = { ...formOption.value.btnConfig };
-      if (formData.value[btnConfigCopy.prop] === undefined) {
-        formData.value[btnConfigCopy.prop] = [];
-      }
-    }
-    // 初始化默认值
-    for (let i = 0; i < formConfig.value.length; i++) {
-      const element = formConfig.value[i];
-      if (element.type === "cascader" && element.itemType === "city") {
-        cityOptionInit();
-        // formData.value[element.prop] = map[element.type];
-        // formData.value[element.prop + "Name"] = map[element.type];
-      }
-      if (
-        formData.value[element.prop] === undefined ||
-        formData.value[element.prop] === ""
-      ) {
-        if (element.type === "slot") {
-          continue;
-        } else if (element.type === "picker" || element.type === "cascader") {
-          if (element.itemType !== "datePicker") {
-            formData.value[element.prop] = map[element.type];
-            formData.value[element.prop + "Name"] = map[element.type];
-          }
-        } else if (map[element.type] != undefined) {
-          formData.value[element.prop] = map[element.type];
-        }
-      }
-    }
-  } else {
-    // 选择框值回显
-    for (let i = 0; i < formConfig.value.length; i++) {
-      const element = formConfig.value[i];
-      if (element.type === "picker" && element.itemType !== "datePicker") {
+const formDataShowLabel = () => {
+  // 选择框值回显
+  for (let i = 0; i < formConfig.value.length; i++) {
+    const element = formConfig.value[i];
+    if (element.type === "picker" && element.itemType !== "datePicker") {
+      if (element.data && element.data.length > 0) {
         formData.value[element.prop + "Name"] = selectDataEcho(
           element,
           formData.value[element.prop]
         );
-      } else if (element.type === "cascader" && element.itemType === "common") {
+      } else {
+        setTimeout(() => {
+          return formDataShowLabel();
+        }, 200);
+      }
+    } else if (element.type === "cascader" && element.itemType === "common") {
+      if (element.data && element.data.length > 0) {
         formData.value[element.prop + "Name"] = selectDataEcho(
           element,
           formData.value[element.prop]
         );
+      } else {
+        setTimeout(() => {
+          return formDataShowLabel();
+        }, 200);
       }
     }
-    if (formOption.value.btnConfig && formOption.value.btnConfig.isNeed) {
-      const list = formData.value[btnConfigCopy.prop];
-      for (let i = 0; i < list.length; i++) {
-        const x = list[i];
-        for (let j = 0; j < btnConfigCopy.listConfig.length; j++) {
-          const listEle = btnConfigCopy.listConfig[j];
-          if (
-            listEle.type === "picker" &&
-            listEle.itemType &&
-            listEle.itemType !== "datePicker"
-          ) {
+  }
+  if (formOption.value.btnConfig && formOption.value.btnConfig.isNeed) {
+    const list = formData.value[btnConfigCopy.prop];
+    for (let i = 0; i < list.length; i++) {
+      const x = list[i];
+      for (let j = 0; j < btnConfigCopy.listConfig.length; j++) {
+        const listEle = btnConfigCopy.listConfig[j];
+        if (
+          listEle.type === "picker" &&
+          listEle.itemType &&
+          listEle.itemType !== "datePicker"
+        ) {
+          if (listEle.data && listEle.data.length > 0) {
             formData.value[btnConfigCopy.prop][i][listEle.prop + "Name"] =
               selectDataEcho(
                 listEle,
                 formData.value[btnConfigCopy.prop][i][listEle.prop]
               );
           } else {
-            continue;
+            setTimeout(() => {
+              return formDataShowLabel();
+            }, 200);
           }
+        } else {
+          continue;
+        }
+      }
+    }
+  }
+};
+const formDataInit = () => {
+  var map = {
+    input: "",
+    radio: "",
+    switch: false,
+    checkbox: [],
+    date: "",
+    picker: "",
+    cascader: "",
+    upload: [],
+  };
+  // 判断是否需要按钮
+  if (formOption.value.btnConfig && formOption.value.btnConfig.isNeed) {
+    btnConfigCopy = { ...formOption.value.btnConfig };
+    if (formData.value[btnConfigCopy.prop] === undefined) {
+      formData.value[btnConfigCopy.prop] = [];
+    }
+  }
+  // 初始化默认值
+  for (let i = 0; i < formConfig.value.length; i++) {
+    const element = formConfig.value[i];
+    if (element.type === "cascader" && element.itemType === "city") {
+      cityOptionInit();
+      // formData.value[element.prop] = map[element.type];
+      // formData.value[element.prop + "Name"] = map[element.type];
+    }
+    if (
+      formData.value[element.prop] === undefined ||
+      formData.value[element.prop] === ""
+    ) {
+      if (element.type === "slot") {
+        continue;
+      } else if (element.type === "picker" || element.type === "cascader") {
+        if (element.itemType !== "datePicker") {
+          formData.value[element.prop] = map[element.type];
+          formData.value[element.prop + "Name"] = map[element.type];
         }
+      } else if (map[element.type] != undefined) {
+        formData.value[element.prop] = map[element.type];
       }
     }
   }
-  console.log(formData.value, "表单值");
+  formDataShowLabel();
   emit("update:modelValue", formData.value);
 };
+formDataInit();
 
-formDataInit(false);
 // 选择框  确定事件
 const onConfirmPicker = (option, item, index) => {
   switch (item.itemType) {

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

@@ -63,18 +63,16 @@ const formOption = reactive({
           text: "att",
           value: "id",
         },
-        pickerOption: {
-          columns: [
-            {
-              att: "ceshi",
-              id: "1",
-            },
-            {
-              att: "ceshi1",
-              id: "2",
-            },
-          ],
-        },
+        data: [
+          {
+            att: "ceshi",
+            id: "1",
+          },
+          {
+            att: "ceshi1",
+            id: "2",
+          },
+        ],
       },
       {
         type: "picker",
@@ -159,18 +157,16 @@ const formConfig = reactive([
       text: "label",
       value: "id",
     },
-    pickerOption: {
-      columns: [
-        {
-          label: "值1",
-          id: "1",
-        },
-        {
-          label: "值2",
-          id: "2",
-        },
-      ],
-    },
+    data: [
+      {
+        label: "值1",
+        id: "1",
+      },
+      {
+        label: "值2",
+        id: "2",
+      },
+    ],
   },
   {
     type: "picker",
@@ -187,8 +183,8 @@ const formConfig = reactive([
     prop: "common",
     itemType: "common",
     showPicker: false,
-    // options: classification.value,
-    options: [],
+    // data: classification.value,
+    data: [],
     fieldNames: {
       text: "label",
       value: "id",
@@ -228,7 +224,7 @@ const rules = {
   select: [{ required: true, message: "请选择" }],
   date: [{ required: true, message: "请选择时间" }],
   common: [{ required: true, message: "请选择级联" }],
-  // city: [{ required: true, message: "请选择城市" }],
+  city: [{ required: true, message: "请选择城市" }],
 };
 const formData = reactive({
   data: {
@@ -293,8 +289,7 @@ onMounted(() => {
       const index = formConfig.findIndex(
         (x) => x.type == "cascader" && x.itemType == "common"
       );
-      formConfig[index].options = classification.value;
-      formDom.value.formDataInit(true);
+      formConfig[index].data = classification.value;
     });
 });
 </script>