11

src/components/testForm/index.vue

@@ -10,7 +10,113 @@
       ref="testForm"
     >
       <van-cell-group inset>
-        <van-field
+        <div v-for="(i, index) in formConfig" :key="index">
+          <van-field
+            v-if="i.type == 'input'"
+            v-model="formData[i.prop]"
+            :label="i.label"
+            :name="i.prop"
+            :type="i.itemType ? i.itemType : 'text'"
+            :placeholder="i.placeholder ? i.placeholder : '请输入'"
+            :clearable="i.clearable ? i.clearable : false"
+          >
+          </van-field>
+          <van-field v-if="i.type == 'switch'" :label="i.label" :name="i.prop">
+            <template #input>
+              <van-switch v-model="formData[i.prop]" />
+            </template>
+          </van-field>
+          <van-field
+            v-if="i.type == 'checkbox'"
+            :label="i.label"
+            :name="i.prop"
+          >
+            <template #input>
+              <van-checkbox-group
+                v-model="formData[i.prop]"
+                direction="horizontal"
+              >
+                <van-checkbox
+                  shape="square"
+                  v-for="j in i.data"
+                  :key="j.value"
+                  :name="j.value"
+                  >{{ j.text }}</van-checkbox
+                >
+              </van-checkbox-group>
+            </template>
+          </van-field>
+          <van-field v-if="i.type == 'radio'" :label="i.label" :name="i.prop">
+            <template #input>
+              <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-field>
+          <van-field
+            v-if="i.type == 'picker' && i.itemType == 'onePicker'"
+            :label="i.label"
+            :name="i.prop"
+            v-model="formData[i.prop + 'Name']"
+            is-link
+            readonly
+            @click="i.showPicker = true"
+          >
+          </van-field>
+          <van-popup
+            v-model:show="i.showPicker"
+            round
+            position="bottom"
+            v-if="i.type == 'picker' && i.itemType == 'onePicker'"
+          >
+            <van-picker
+              :columns="i.pickerOption.columns"
+              @cancel="i.showPicker = false"
+              @confirm="(option) => onConfirmPicker(option, i, index)"
+            />
+          </van-popup>
+
+          <van-field
+            v-if="i.type == 'picker' && i.itemType == 'datePicker'"
+            :label="i.label"
+            :name="i.prop"
+            v-model="formData[i.prop]"
+            is-link
+            readonly
+            @click="i.showPicker = true"
+          >
+          </van-field>
+          <van-popup
+            v-model:show="i.showPicker"
+            round
+            position="bottom"
+            v-if="i.type == 'picker' && i.itemType == 'datePicker'"
+          >
+            <van-date-picker
+              @confirm="(option) => onConfirmPicker(option, i, index)"
+              @cancel="i.showPicker = false"
+              :min-date="i.minDate"
+              :max-date="i.maxDate"
+              :columns-type="i.columnsType"
+            />
+          </van-popup>
+          <van-field v-if="i.type == 'slot'" :label="i.label">
+            <template #input>
+              <div>
+                <slot :name="i.slotName"> {{ i.slotName }}插槽占位符 </slot>
+              </div>
+            </template>
+          </van-field>
+        </div>
+        <!-- <van-field
           v-for="i in formConfig"
           v-model="formData[i.prop]"
           :name="i.prop"
@@ -23,21 +129,26 @@
           :clearable="i.clearable ? i.clearable : false"
           @click="handleClickFiel(i)"
         >
-          <template #input v-if="i.fielSlot == 'switch'">
+          <template #input v-if="i.type == 'switch'">
             <van-switch v-model="formData[i.prop]" />
           </template>
 
-          <template #input v-else-if="i.fielSlot == 'groupChecked'">
+          <template #input v-else-if="i.type == 'checkbox'">
             <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
+                shape="square"
+                v-for="j in i.data"
+                :key="j.value"
+                :name="j.value"
+                >{{ j.text }}</van-checkbox
+              >
             </van-checkbox-group>
           </template>
 
-          <template #input v-else-if="i.fielSlot == 'radio'">
+          <template #input v-else-if="i.type == 'radio'">
             <van-radio-group v-model="formData[i.prop]" direction="horizontal">
               <van-radio
                 v-for="j in i.data"
@@ -47,37 +158,7 @@
               >
             </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-field> -->
       </van-cell-group>
       <div style="margin: 16px">
         <van-button round block type="primary" native-type="submit">
@@ -98,6 +179,7 @@ import {
   reactive,
   computed,
   toRefs,
+  watch,
 } from "vue";
 
 const props = defineProps({
@@ -140,61 +222,73 @@ const getReadonly = (i) => {
 };
 //
 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;
-  }
+const handleClickFiel = (index) => {
+  formConfig.value[index].showPicker = true;
+  console.log(formConfig.value[index].showPicker, "ass");
 };
 
-onMounted(() => {
-  pickerData.value = formConfig.value.filter((x) => x.name == "picker");
-  console.log(pickerData.value, "wss");
-});
+// onMounted(() => {
+//   pickerData.value = formConfig.value.filter((x) => x.name == "picker");
+//   console.log(pickerData.value, "wss");
+// });
 
 const testForm = ref(null); // 延迟使用，因为还没有返回跟挂载
 
 const formDataInit = () => {
+  const formConfigCopy = {};
   var map = {
     input: "",
-    radio: null,
-    select: null,
+    radio: "",
+    switch: false,
     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: {},
+    picker: "",
   };
-  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") {
+  for (let i = 0; i < formConfig.value.length; i++) {
+    const element = formConfig.value[i];
+    if (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];
+    if (element.type === "picker") {
+      formData.value[element.prop] = map[element.type];
+      formData.value[element.prop + "Name"] = map[element.type];
+    }
+    if (map[element.type] != undefined) {
+      formData.value[element.prop] = map[element.type];
     }
   }
-
   emit("update:modelValue", formData.value);
+  console.log(formData.value, "wass");
 };
 
 formDataInit();
+
+const onConfirmPicker = (option, item, index) => {
+  switch (item.itemType) {
+    case "onePicker": {
+      formData.value[item.prop + "Name"] = option.selectedOptions[0].text;
+      formData.value[item.prop] = option.selectedOptions[0].value;
+      formConfig.value[index].showPicker = false;
+    }
+    case "datePicker": {
+      formData.value[item.prop] = option.selectedValues.join(
+        item.split ? item.split : "-"
+      );
+      formConfig.value[index].showPicker = false;
+    }
+  }
+};
+
+watch(
+  formData.value,
+  (val) => {
+    emit("update:modelValue", val);
+  },
+  {
+    deep: true,
+  }
+);
 </script>
 
 <style lang="scss" scoped>

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

@@ -36,30 +36,48 @@ const formOption = reactive({
 
 const formConfig = reactive([
   {
+    type: "input",
     itemType: "text",
     label: "姓名",
     prop: "name",
     clearable: true,
   },
   {
+    type: "input",
+    itemType: "textarea",
+    label: "富文本",
+    prop: "reamlke",
+  },
+  {
+    type: "input",
     itemType: "password",
     label: "密码",
     prop: "password",
   },
   {
+    type: "switch",
     label: "开关",
-    prop: "switch",
-    fielSlot: "switch",
+    prop: "switch1",
   },
   {
+    type: "checkbox",
     label: "复选框组",
-    prop: "groupChecked",
-    fielSlot: "groupChecked",
+    prop: "checkbox",
+    data: [
+      {
+        text: "1",
+        value: "1",
+      },
+      {
+        text: "2",
+        value: "2",
+      },
+    ],
   },
   {
+    type: "radio",
     label: "单选框",
     prop: "radio",
-    fielSlot: "radio",
     data: [
       {
         label: "dan1",
@@ -72,24 +90,38 @@ const formConfig = reactive([
     ],
   },
   {
-    name: "picker",
+    type: "picker",
     label: "选择器",
     prop: "select",
-    // isLink: true,
+    itemType: "onePicker",
     showPicker: false,
     pickerOption: {
-      data: [
+      columns: [
         {
-          text: "1",
+          text: "100",
           value: "1",
         },
         {
-          text: "2",
+          text: "2000",
           value: "2",
         },
       ],
     },
   },
+  {
+    type: "picker",
+    label: "时间选择器",
+    prop: "date",
+    itemType: "datePicker",
+    showPicker: false,
+    split: "-",
+    columnsType: ["year", "month"], //只选年月
+  },
+  {
+    type: "slot",
+    slotName: "测试",
+    label: "1646",
+  },
 ]);
 const rules = {
   name: [{ required: true, message: "请填写姓名" }],