新数据结构入口改造

hookehuyr
Commit e4bc61bdafbd7b486c4c30fca17bcc78dc433852 e4bc61bd 1 parent 10055536
Showing 3 changed files with 43 additions and 79 deletions
src/api/form.js
src/hooks/useComponentType.js
src/views/index.vue
--- a/src/api/form.js
View file @e4bc61b
+++ b/src/api/form.js
View file @e4bc61b
 /*
  * @Date: 2022-06-17 14:54:29
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-12-06 11:22:36
+ * @LastEditTime: 2022-12-16 15:57:01
  * @FilePath: /data-table/src/api/form.js
  * @Description: 表单接口
  */
@@ -9,7 +9,7 @@ import { fn, fetch } from '@/api/fn';
 const Api = {
   FORM_ADD: '/srv/?a=add_form',
-  FORM_QUERY: '/srv/?a=query_form',
+  FORM_QUERY: '/srv/?a=query_form_all_field',
   ADD_FORM_FIELD: '/srv/?a=add_form_field',
   ADD_FORM_SETTING: '/srv/?a=add_form_setting',
   QUERY_FORM_SETTING: '/srv/?a=query_form_setting',
--- a/src/hooks/useComponentType.js
View file @e4bc61b
+++ b/src/hooks/useComponentType.js
View file @e4bc61b
@@ -30,7 +30,7 @@ import ButtonField from '@/components/ButtonField/index.vue'
 /**
  * 生成自定义组件类型
  * @param {*} data
- * @type text 单行文本 TextField
+ * @type input 单行文本 TextField
  * @type textarea 多行文本 TextareaField
  * @type radio 单项选择 RadioField
  * @type checkbox 多项选择 CheckboxField
@@ -60,102 +60,102 @@ export function createComponentType(data) {
     if (item.component_props.required) {
       item.rules = [{ required: true, message: item.placeholder ? item.placeholder : '必填项不能为空' }]
     }
-    if (item.component_props.name === 'text') {
+    if (item.component_props.tag === 'input') {
       item.type = 'text';
       item.name = item.key;
       item.component = TextField;
     }
-    if (item.component_props.name === 'textarea') {
+    if (item.component_props.tag === 'textarea') {
       item.type = 'textarea';
       item.name = item.key;
       // item.rows = 10;
       item.autosize = true;
       item.component = TextareaField;
     }
-    if (item.component_props.name === 'number') {
+    if (item.component_props.tag === 'number') {
       item.name = item.key;
       item.component = NumberField;
     }
-    if (item.component_props.name === 'radio') {
+    if (item.component_props.tag === 'radio') {
       item.component = RadioField;
     }
-    if (item.component_props.name === 'checkbox') {
+    if (item.component_props.tag === 'checkbox') {
       item.component = CheckboxField;
     }
-    if (item.component_props.name === 'picker') {
+    if (item.component_props.tag === 'picker') {
       item.component = PickerField;
     }
-    if (item.component_props.name === 'area_picker') {
+    if (item.component_props.tag === 'area_picker') {
       item.component = AreaPickerField;
     }
-    if (item.component_props.name === 'date_picker') {
+    if (item.component_props.tag === 'date_picker') {
       item.component = DatePickerField;
     }
-    if (item.component_props.name === 'time_picker') {
+    if (item.component_props.tag === 'time_picker') {
       item.component = TimePickerField;
     }
-    if (item.component_props.name === 'datetime_picker') {
+    if (item.component_props.tag === 'datetime_picker') {
       item.component = DateTimePickerField;
     }
-    if (item.component_props.name === 'image_uploader') {
+    if (item.component_props.tag === 'image_uploader') {
       item.component = ImageUploaderField;
     }
-    if (item.component_props.name === 'file_uploader') {
+    if (item.component_props.tag === 'file_uploader') {
       item.component = FileUploaderField;
     }
-    if (item.component_props.name === 'phone') {
+    if (item.component_props.tag === 'phone') {
       item.name = item.key;
       item.component = PhoneField;
     }
-    if (item.component_props.name === 'email') {
+    if (item.component_props.tag === 'email') {
       item.name = item.key;
       item.component = EmailField;
     }
-    if (item.component_props.name === 'sign') {
+    if (item.component_props.tag === 'sign') {
       item.name = item.key;
       item.component = SignField;
     }
-    if (item.component_props.name === 'rate_picker') {
+    if (item.component_props.tag === 'rate_picker') {
       item.name = item.key;
       item.component = RatePickerField;
     }
-    if (item.component_props.name === 'calendar') {
+    if (item.component_props.tag === 'calendar') {
       item.name = item.key;
       item.component = CalendarField;
     }
-    if (item.component_props.name === 'id_code') {
+    if (item.component_props.tag === 'id_code') {
       item.name = item.key;
       item.component = IdentityField;
     }
-    if (item.component_props.name === 'desc') {
+    if (item.component_props.tag === 'desc') {
       item.name = item.key;
       item.component = DesField;
     }
-    if (item.component_props.name === 'divider') {
+    if (item.component_props.tag === 'divider') {
       item.name = item.key;
       item.component = DividerField;
     }
-    if (item.component_props.name === 'video') {
+    if (item.component_props.tag === 'video') {
       item.name = item.key;
       item.component = VideoField;
     }
-    if (item.component_props.name === 'marquee') {
+    if (item.component_props.tag === 'marquee') {
       item.name = item.key;
       item.component = MarqueeField;
     }
-    if (item.component_props.name === 'contact') {
+    if (item.component_props.tag === 'contact') {
       item.name = item.key;
       item.component = ContactField;
     }
-    if (item.component_props.name === 'rule') {
+    if (item.component_props.tag === 'rule') {
       item.name = item.key;
       item.component = RuleField;
     }
-    if (item.component_props.name === 'button') {
+    if (item.component_props.tag === 'button') {
       item.name = item.key;
       item.component = ButtonField;
     }
-    if (item.component_props.name === 'multi_rule') {
+    if (item.component_props.tag === 'multi_rule') {
       item.name = item.key;
       item.value = [];
       item.component = MultiRuleField;
--- a/src/views/index.vue
View file @e4bc61b
+++ b/src/views/index.vue
View file @e4bc61b
 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-12-09 15:25:00
+ * @LastEditTime: 2022-12-16 16:38:31
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
 -->
@@ -122,40 +122,11 @@ const model = $route.query.model;
 const formatData = (data) => {
   const arr = [];
   data.forEach((field) => {
+    const { interaction_type, data_type, field_id, field_name, ...component_props } = field;
     // 生成组件属性
-    const component_props = {
-      name: field.component_code,
-    };
-    if (field.component_type === "h5edit") {
-      // 编辑组件
-      field.property_list.forEach((prop) => {
-        const key = prop["property_code"];
-        const obj = {
-          [key]:
-            prop["setting_value"].length > 1
-              ? prop["setting_value"]
-              : prop["setting_value"][0],
-        };
-        Object.assign(component_props, obj);
-      });
-    } else {
-      // 展示组件
-      field.property_list.forEach((prop) => {
-        const key = prop["property_code"];
-        const obj = {
-          [key]:
-            key !== 'label'
-              ? prop["setting_value"]
-              : prop["setting_value"][0],
-        };
-        Object.assign(component_props, obj);
-      });
-    }
-    // 绑定组件名称标识
     const temp = {
-      key: field.field_name,
+      key: field_name,
       value: component_props.default ? component_props.default : "",
-      component: field.component_code,
       component_props,
     };
     arr.push(temp);
@@ -173,19 +144,19 @@ const rate_picker = ref([]);
 // 动态绑定ref数据
 const setRefMap = (el, item) => {
   if (el) {
-    if (item.component_props.name === "area_picker") {
+    if (item.component_props.tag === "area_picker") {
       area_picker.value.push(el);
     }
-    if (item.component_props.name === "image_uploader") {
+    if (item.component_props.tag === "image_uploader") {
       image_uploader.value.push(el);
     }
-    if (item.component_props.name === "file_uploader") {
+    if (item.component_props.tag === "file_uploader") {
       file_uploader.value.push(el);
     }
-    if (item.component_props.name === "sign") {
+    if (item.component_props.tag === "sign") {
       sign.value.push(el);
     }
-    if (item.component_props.name === "rate_picker") {
+    if (item.component_props.tag === "rate_picker") {
       rate_picker.value.push(el);
     }
   }
@@ -201,27 +172,20 @@ onMounted(async () => {
     .querySelector("body")
     .setAttribute("style", `background-color: ${styleColor.backgroundColor}`);
   const { data } = await queryFormAPI({ form_code: $route.query.code });
-  const form_data = data[0];
+  const form_data = data;
+  // 表单网页标题
   useTitle(form_data.name);
   // 重构数据结构
   let page_header = {};
   let page_commit = {};
   let page_form = [];
   form_data.field_list.forEach((element) => {
-    if (element.component_code === "page_header") {
+    if (element.tag === "page_header") {
       // 页眉组件
-      const list = element.property_list;
+      page_header = element;
-      list.forEach((ele) => {
+    } else if (element.tag === "page_commit") {
-        page_header[ele["property_code"]] =
-          ele.setting_value.length > 1 ? ele.setting_value : ele.setting_value[0];
-      });
-    } else if (element.component_code === "page_commit") {
       // 提交按钮
-      const list = element.property_list;
+      page_commit = element;
-      list.forEach((ele) => {
-        page_commit[ele["property_code"]] =
-          ele.setting_value.length > 1 ? ele.setting_value : ele.setting_value[0];
-      });
     } else {
       page_form.push(element);
     }