优化表单组件

src/components/componentscom/investigate/index.vue

@@ -2,20 +2,14 @@
   <div class="investigate" @click="guanbi">
     <!-- 内容 -->
     <div class="title">{{ datas.title }}</div>
-    <div
-      class="rescon"
-      v-for="(item1, index1) in datas.jsonData"
-      :key="index1"
-      @mouseleave="leave()"
-    >
+    <div class="rescon" v-for="(item1, index1) in datas.jsonData" :key="index1">
       <!-- 输入框 -->
       <div v-if="item1.type == 0">
         <van-cell-group>
           <van-field
             :label="item1.name"
             :placeholder="item1.value"
-            :value="item1.value2"
-            readonly="readonly"
+            v-model="item1.value2"
           />
         </van-cell-group>
       </div>
@@ -30,7 +24,7 @@
             :placeholder="'点击选择' + item1.name"
             class="readinput"
             @click="showpic(index1)"
-            :value="item1.value2"
+            v-model="item1.value2"
           />
           <ul :class="{ ulshow: item1.showPicker, ultext: true }">
             <li
@@ -43,11 +37,11 @@
           </ul>
         </div>
       </div>
-
+ 
       <!-- 单选框 -->
       <van-field name="radio" :label="item1.name" v-if="item1.type == 2">
         <template #input>
-          <van-radio-group :value="item1.value2" direction="horizontal">
+          <van-radio-group v-model="item1.value2" direction="horizontal">
             <van-radio
               :name="item"
               v-for="(item, index) in item1.value1"
@@ -66,7 +60,7 @@
         v-if="item1.type == 3"
       >
         <template #input>
-          <van-checkbox-group direction="horizontal">
+          <van-checkbox-group v-model="item1.value2" direction="horizontal">
             <van-checkbox
               :name="item"
               v-for="(item, index) in item1.value1"
@@ -74,12 +68,13 @@
               :shape="item1.name"
               >{{ item }}</van-checkbox
             >
+            <span class="multiple">(多选)</span>
           </van-checkbox-group>
         </template>
       </van-field>
     </div>
     <div class="button">
-      <button>提交</button>
+      <button @click="submit">提交</button>
     </div>
     <!-- 删除组件 -->
     <slot name="deles" />
@@ -97,7 +92,13 @@ export default {
   props: {
     datas: Object,
   },
-  created() {},
+  created() {
+    this.datas.jsonData.forEach((el) => {
+      if (el.type == 3) {
+        el.value2 = []
+      }
+    })
+  },
   mounted() {},
   methods: {
     //点击显示下拉框
@@ -106,25 +107,49 @@ export default {
       this.datas.jsonData.forEach((el) => {
         el.showPicker = false
       })
+      // eslint-disable-next-line vue/no-mutating-props
       this.datas.jsonData[index1].showPicker = !this.datas.jsonData[index1]
         .showPicker
     },
-
-    // //下拉选择
-    xuanze(index1) {
-      this.datas.jsonData[index1].showPicker = false
-    },
-
     //关闭下拉选项
     guanbi() {
       this.datas.jsonData.forEach((el) => {
         el.showPicker = false
       })
     },
-    leave() {
+    //下拉选择
+    xuanze(index1, item) {
+      // this.value = value;
+
+      // eslint-disable-next-line vue/no-mutating-props
+      this.datas.jsonData[index1].value2 = item //保留被选中的值
+
+      // eslint-disable-next-line vue/no-mutating-props
+      this.datas.jsonData[index1].showPicker = false //关闭下拉选择
+    },
+    //保存数据到后台
+    submit() {
+      //判断不能为空，为空则不能提交
+      for (let i = 0; i < this.datas.jsonData.length; i++) {
+        if (this.datas.jsonData[i].value2 == '') {
+          this.$toast(this.datas.jsonData[i].name + '不能为空')
+          return
+        }
+      }
+      //获取要提交的数据
+      this.jsonData = []
       this.datas.jsonData.forEach((el) => {
-        el.showPicker = false
+        let text = {}
+        text.name = el.name
+        text.value = el.value2
+        if (text.value instanceof Array) {
+          console.log(text.value, '111111111')
+          text.value = text.value.join('&')
+        }
+        this.jsonData.push(text)
       })
+      console.log(this.jsonData, '0000000000')
+      //提交信息
     },
     //
   },
@@ -198,9 +223,6 @@ select {
 }
 /deep/.van-field__label {
   width: 100%;
-  // overflow: hidden;
-  // white-space: nowrap;
-  // text-overflow: ellipsis;
   padding-left: 10px;
   border-bottom: 1px solid #dddddd;
   padding-bottom: 10px;
@@ -269,4 +291,10 @@ select {
   margin-top: 6px;
   position: absolute;
 }
-</style>
+.multiple {
+  height: 34px;
+  line-height: 34px;
+  font-size: 14px;
+  color: #aaaaaa;
+}
+</style>