新增集合组组件功能

hookehuyr
Commit 12a3121191938514635631abf951e41ac5e23512 12a31211 1 parent 54b39411
Showing 8 changed files with 118 additions and 17 deletions
.env.development
components.d.ts
src/components/GroupField/index.vue
src/components/NameField/index.vue
src/components/RadioField/index.vue
src/components/TextField/index.vue
src/hooks/useComponentType.js
src/views/index.vue
--- a/.env.development
View file @12a3121
+++ b/.env.development
View file @12a3121
@@ -16,7 +16,7 @@ VITE_PIN =
 # 反向代理服务器地址
 # VITE_PROXY_TARGET = https://oa.anxinchashi.com/
-VITE_PROXY_TARGET = http://oa.onwall.cn
+VITE_PROXY_TARGET = http://oa-dev.onwall.cn
 # VITE_PROXY_TARGET = https://www.wxgzjs.cn/
 # PC端地址
--- a/components.d.ts
View file @12a3121
+++ b/components.d.ts
View file @12a3121
@@ -21,6 +21,7 @@ declare module '@vue/runtime-core' {
     EmailField: typeof import('./src/components/EmailField/index.vue')['default']
     FileUploaderField: typeof import('./src/components/FileUploaderField/index.vue')['default']
     GenderField: typeof import('./src/components/GenderField/index.vue')['default']
+    GroupField: typeof import('./src/components/GroupField/index.vue')['default']
     IdentityField: typeof import('./src/components/IdentityField/index.vue')['default']
     ImageUploaderField: typeof import('./src/components/ImageUploaderField/index.vue')['default']
     MarqueeField: typeof import('./src/components/MarqueeField/index.vue')['default']
--- a/src/components/GroupField/index.vue 0 → 100644
View file @12a3121
+++ b/src/components/GroupField/index.vue 0 → 100644
View file @12a3121
--- a/src/components/NameField/index.vue
View file @12a3121
+++ b/src/components/NameField/index.vue
View file @12a3121
 <!--
  * @Date: 2022-08-29 14:31:20
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-02-01 11:21:00
+ * @LastEditTime: 2024-05-27 17:47:52
  * @FilePath: /data-table/src/components/NameField/index.vue
  * @Description: 姓名输入框
 -->
 <template>
   <div v-if="HideShow" class="name-field-page">
-    <div class="label">
+    <div :class="[isGroup ? 'group-label' : 'label']">
       <span v-if="item.component_props.required">&nbsp;*</span>
       {{ item.component_props.label }}
     </div>
@@ -29,10 +29,17 @@
 const props = defineProps({
   item: Object,
 });
+
 // 隐藏显示
 const HideShow = computed(() => {
   return !props.item.component_props.disabled
-})
+});
+
+// 集合组标识
+const isGroup = computed(() => {
+  return props.item.component_props.is_field_group
+});
+
 onMounted(() => {
   props.item.value = props.item.component_props.default;
 })
@@ -48,6 +55,20 @@ onMounted(() => {
       color: red;
     }
   }
+
+  .group-label {
+    padding: 0.75rem 0 0.75rem 1rem;
+    font-size: 0.9rem;
+    font-weight: bold;
+    background-color: #f9f9f9;
+    color: #666;
+    border-top: 1px solid #eee;
+    border-bottom: 1px solid #eee;
+
+    span {
+      color: red;
+    }
+  }
 }
 :deep(.van-field__body) {
--- a/src/components/RadioField/index.vue
View file @12a3121
+++ b/src/components/RadioField/index.vue
View file @12a3121
 <!--
  * @Date: 2022-08-30 11:34:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-03-28 16:19:08
+ * @LastEditTime: 2024-05-27 14:27:25
  * @FilePath: /data-table/src/components/RadioField/index.vue
  * @Description: 单项选择控件
 -->
--- a/src/components/TextField/index.vue
View file @12a3121
+++ b/src/components/TextField/index.vue
View file @12a3121
 <!--
  * @Date: 2022-08-29 14:31:20
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-05-25 18:29:39
+ * @LastEditTime: 2024-05-28 10:05:08
  * @FilePath: /data-table/src/components/TextField/index.vue
  * @Description: 单行文本输入框(微信扫描功能)
 -->
 <template>
   <div v-if="HideShow" class="text-field-page">
-    <div class="label">
+    <div :class="[isGroup ? 'group-label' : 'label']">
       <span v-if="item.component_props.required">&nbsp;*</span>
       {{ item.component_props.label }}
     </div>
@@ -30,10 +30,16 @@ import wx from 'weixin-js-sdk'
 const props = defineProps({
   item: Object,
 });
+
 // 隐藏显示
 const HideShow = computed(() => {
   return !props.item.component_props.disabled
-})
+});
+
+// 集合组标识
+const isGroup = computed(() => {
+  return props.item.component_props.is_field_group
+});
 const $route = useRoute();
 // 默认识别类型
@@ -92,16 +98,30 @@ const clickRightIcon = async () => {
     span {
       color: red;
     }
+  }
-    .note-wrapper {
+  .group-label {
-      font-size: 0.9rem;
+    padding: 0.75rem 0 0.75rem 1rem;
-      margin-left: 1rem;
+    font-size: 0.9rem;
-      color: gray;
+    font-weight: bold;
-      padding-bottom: 0.5rem;
+    background-color: #f9f9f9;
-      padding-top: 0.25rem;
+    color: #666;
-      white-space: pre-wrap;
+    border-top: 1px solid #eee;
+    border-bottom: 1px solid #eee;
+
+    span {
+      color: red;
     }
   }
+
+  .note-wrapper {
+    font-size: 0.9rem;
+    margin-left: 1rem;
+    color: gray;
+    padding-bottom: 0.5rem;
+    padding-top: 0.25rem;
+    white-space: pre-wrap;
+  }
 }
 :deep(.van-field__body) {
--- a/src/hooks/useComponentType.js
View file @12a3121
+++ b/src/hooks/useComponentType.js
View file @12a3121
@@ -31,6 +31,7 @@ import NameField from '@/components/NameField/index.vue';
 import GenderField from '@/components/GenderField/index.vue';
 import AppointmentField from '@/components/AppointmentField/index.vue';
 import CustomField from '@/components/CustomField/index.vue';
+import GroupField from '@/components/GroupField/index.vue';
 /**
  * 生成自定义组件类型
@@ -61,6 +62,7 @@ import CustomField from '@/components/CustomField/index.vue';
  * @type name 姓名控件 NameField
  * @type gender 性别控件 GenderField
  * @type appointment 预约控件 AppointmentField
+ * @type group 组集合输入控件 GroupField
  */
 export function createComponentType(data) {
   // 判断类型和使用组件
@@ -189,5 +191,9 @@ export function createComponentType(data) {
       item.name = item.key;
       item.component = CustomField;
     }
+    if (item.component_props.tag === 'group') {
+      item.name = item.key;
+      item.component = GroupField;
+    }
   })
 }
--- a/src/views/index.vue
View file @12a3121
+++ b/src/views/index.vue
View file @12a3121
 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-05-13 14:24:11
+ * @LastEditTime: 2024-05-28 10:39:05
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
 -->
@@ -240,6 +240,59 @@ onMounted(async () => {
       visible: !page_commit.invisible,
     };
   }
+  // TODO：待完善，集合组保存的字段和值怎么处理，都是单条数据都要合并到相应的 group_field_name 下面？
+  // page_form.unshift({
+  //   data_type : "text",
+  //   default : "",
+  //   disabled : false,
+  //   field_id : 1414832,
+  //   field_name : "field_4",
+  //   index : 41,
+  //   interaction_type : "h5edit",
+  //   label : "物品详情",
+  //   name : "name_41",
+  //   placeholder : "请输入",
+  //   readonly : false,
+  //   required : false,
+  //   tag : "group",
+  //   unique : false,
+  //   field_groups: [{
+  //     "tag": "input",
+  //     "name": "input_21",
+  //     "index": 2,
+  //     "label": "物品描述",
+  //     "unique": false,
+  //     "default": "",
+  //     "disabled": false,
+  //     "field_id": 7985071,
+  //     "readonly": false,
+  //     "required": false,
+  //     "data_type": "text",
+  //     "field_name": "field_21",
+  //     "placeholder": "请输入",
+  //     "is_camera_scan": false,
+  //     "camera_scan_type": "",
+  //     "interaction_type": "h5edit",
+  //     "is_edit_camera_scan_result": false,
+  //     "group_field_name" : "field_4",
+  //   },{
+  //     "tag": "name",
+  //     "name": "name_71",
+  //     "index": 7,
+  //     "label": "序列号",
+  //     "unique": false,
+  //     "default": "",
+  //     "disabled": false,
+  //     "field_id": 7995031,
+  //     "readonly": false,
+  //     "required": true,
+  //     "data_type": "text",
+  //     "field_name": "field_91",
+  //     "placeholder": "请输入",
+  //     "interaction_type": "h5edit",
+  //     "group_field_name" : "field_4",
+  //   },]
+  // });
   formData.value = formatData(page_form);
   // TODO：再次提交测试, 需要获取原来表单数据
   // formData.value.forEach((item) => {
@@ -315,7 +368,7 @@ onMounted(async () => {
     },
   ];
   // 生成自定义组件
-  createComponentType(mockData.value);
+  // createComponentType(mockData.value);
   createComponentType(formData.value);
   // 过期时间显示
   notice_text.value = `表单报名将在 ${formSetting.value.sjsj_end_time} 后结束`;