group组件删除和提交逻辑调整

hookehuyr
Commit 80d6d5666c21ce2a9e879496a092904628bc1b5f 80d6d566 1 parent 8d24a310
Showing 3 changed files with 150 additions and 55 deletions
components.d.ts
src/components/GroupField/index.vue
src/views/index.vue
--- a/components.d.ts
View file @80d6d56
+++ b/components.d.ts
View file @80d6d56
@@ -77,8 +77,10 @@ declare module '@vue/runtime-core' {
     VanSearch: typeof import('vant/es')['Search']
     VanSwipe: typeof import('vant/es')['Swipe']
     VanSwipeItem: typeof import('vant/es')['SwipeItem']
+    VanTa: typeof import('vant/es')['Ta']
     VanTab: typeof import('vant/es')['Tab']
     VanTabs: typeof import('vant/es')['Tabs']
+    VanTag: typeof import('vant/es')['Tag']
     VanTimePicker: typeof import('vant/es')['TimePicker']
     VanUploader: typeof import('vant/es')['Uploader']
     VideoField: typeof import('./src/components/VideoField/index.vue')['default']
--- a/src/components/GroupField/index.vue
View file @80d6d56
+++ b/src/components/GroupField/index.vue
View file @80d6d56
--- a/src/views/index.vue
View file @80d6d56
+++ b/src/views/index.vue
View file @80d6d56
 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-05-29 14:28:37
+ * @LastEditTime: 2024-06-03 17:06:34
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
 -->
@@ -25,7 +25,7 @@
       <van-form @submit="onSubmit" :scroll-to-error="true">
         <van-cell-group :border="false">
           <component v-for="(item, index) in formData" :id="item.key" :ref="(el) => setRefMap(el, item)" :key="index"
-            :is="item.component" :item="item" @active="onActive" />
+            :is="item.component" :item="item" @active="onActive" @remove="onRemove" />
         </van-cell-group>
         <div v-if="formData.length && PCommit.visible" style="margin: 16px">
           <van-button round block type="primary" native-type="submit" :disabled="submitStatus">
@@ -253,63 +253,129 @@ onMounted(async () => {
   //   name : "name_41",
   //   placeholder : "请输入",
   //   readonly : false,
-  //   required : false,
+  //   required : true,
   //   tag : "tree",
   //   unique : false,
   // });
-  // page_form.unshift({
+  page_form.unshift({
-  //   data_type : "text",
+    data_type : "text",
-  //   default : "",
+    default : "",
-  //   disabled : false,
+    disabled : false,
-  //   field_id : 1414832,
+    field_id : 1414832,
-  //   field_name : "field_4",
+    field_name : "field_4",
-  //   index : 41,
+    index : 41,
-  //   interaction_type : "h5edit",
+    interaction_type : "h5edit",
-  //   label : "物品详情",
+    label : "物品详情",
-  //   name : "name_41",
+    name : "name_41",
-  //   placeholder : "请输入",
+    placeholder : "请输入",
-  //   readonly : false,
+    readonly : false,
-  //   required : false,
+    required : false,
-  //   tag : "group",
+    tag : "group",
-  //   unique : false,
+    unique : false,
-  //   field_groups: [{
+    field_groups: [{
-  //     "tag": "input",
+      "tag": "input",
-  //     "name": "input_21",
+      "name": "input_21",
-  //     "index": 2,
+      "index": 2,
-  //     "label": "物品描述",
+      "label": "物品描述",
-  //     "unique": false,
+      "unique": false,
-  //     "default": "",
+      "default": "",
-  //     "disabled": false,
+      "disabled": false,
-  //     "field_id": 7985071,
+      "field_id": 7985071,
-  //     "readonly": false,
+      "readonly": false,
-  //     "required": false,
+      "required": false,
-  //     "data_type": "text",
+      "data_type": "text",
-  //     "field_name": "field_21",
+      "field_name": "field_10",
-  //     "placeholder": "请输入",
+      "placeholder": "请输入",
-  //     "is_camera_scan": false,
+      "is_camera_scan": false,
-  //     "camera_scan_type": "",
+      "camera_scan_type": "",
-  //     "interaction_type": "h5edit",
+      "interaction_type": "h5edit",
-  //     "is_edit_camera_scan_result": false,
+      "is_edit_camera_scan_result": false,
-  //     "group_field_name" : "field_4",
+      "group_field_name" : "field_4",
-  //   },{
+    },{
-  //     "tag": "name",
+        "tag": "gender",
-  //     "name": "name_71",
+        "name": "gender_3",
-  //     "index": 7,
+        "note": "",
-  //     "label": "序列号",
+        "index": 3,
-  //     "unique": false,
+        "label": "性别",
-  //     "default": "",
+        "options": [
-  //     "disabled": false,
+            {
-  //     "field_id": 7995031,
+                "title": "男",
-  //     "readonly": false,
+                "value": "男",
-  //     "required": true,
+                "checked": false,
-  //     "data_type": "text",
+                "desc_url": "",
-  //     "field_name": "field_91",
+                "is_input": false,
-  //     "placeholder": "请输入",
+                "desc_text": "",
-  //     "interaction_type": "h5edit",
+                "desc_type": "",
-  //     "group_field_name" : "field_4",
+                "desc_btn_name": "",
-  //   },]
+                "input_required": false,
-  // });
+                "input_placeholder": "请输入补充信息"
+            },
+            {
+                "title": "女",
+                "value": "女",
+                "checked": false,
+                "desc_url": "",
+                "is_input": false,
+                "desc_text": "",
+                "desc_type": "",
+                "desc_btn_name": "",
+                "input_required": false,
+                "input_placeholder": "请输入补充信息"
+            }
+        ],
+        "disabled": false,
+        "field_id": 799603,
+        "required": false,
+        "data_type": "text",
+        "direction": "vertical",
+        "field_name": "field_4",
+        "option_map": {
+            "女": {
+                "title": "女",
+                "value": "女",
+                "checked": false,
+                "desc_url": "",
+                "is_input": false,
+                "desc_text": "",
+                "desc_type": "",
+                "desc_btn_name": "",
+                "input_required": false,
+                "input_placeholder": "请输入补充信息"
+            },
+            "男": {
+                "title": "男",
+                "value": "男",
+                "checked": false,
+                "desc_url": "",
+                "is_input": false,
+                "desc_text": "",
+                "desc_type": "",
+                "desc_btn_name": "",
+                "input_required": false,
+                "input_placeholder": "请输入补充信息"
+            }
+        },
+        "interaction_type": "h5edit"
+    },]
+  });
+
+  page_form.push({
+      "tag": "name",
+      "name": "name_2",
+      "index": 2,
+      "label": "姓名",
+      "unique": false,
+      "default": "",
+      "disabled": false,
+      "field_id": 799599,
+      "readonly": false,
+      "required": true,
+      "data_type": "text",
+      "field_name": "field_2",
+      "placeholder": "请输入",
+      "interaction_type": "h5edit"
+  })
   formData.value = formatData(page_form);
   // TODO：再次提交测试, 需要获取原来表单数据
   // formData.value.forEach((item) => {
@@ -645,6 +711,33 @@ const preValidData = (values) => {
   return _.assign(postData.value, rest_data);
 }
+const onRemove = (value) => { // 处理组件删除事件回调, 数据结构是二维数组，删除时返回被删除的一组数据
+  value[0].forEach(item => {
+    for (const key in postData.value) {
+      if (item.key === key) {
+        delete postData.value[key]; // 删除对应的键值对
+      }
+    }
+  });
+}
+
+const adjGroupData = (values) => { // 调整group组件的数据结构
+  // let obj = {
+  //   "field_10_group[0]_7653" : "1",
+  //   "field_10_group[1]_4154" : "11",
+  //   "field_11_group[0]_3440" : "2",
+  //   "field_11_group[1]_4282" : "22"
+  // }
+
+  // let arr = [{
+  //   "field_10": "1",
+  //   "field_11": "2",
+  // }, {
+  //   "field_10": "11",
+  //   "field_11": "22",
+  // }]
+}
+
 const submitStatus = ref(false);
 const onSubmit = async (values) => {