refactor: 重构二次暂存

BoBoooooo · Apr 7, 2021 · 70129a2 · 70129a2
1 parent 4f90bb3
commit 70129a2
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 74 deletions.
diff --git a/src/component/form-designer/src/GenerateForm.vue b/src/component/form-designer/src/GenerateForm.vue
@@ -29,6 +29,7 @@
           :models="models"
           :key="index"
           :data="data"
+          v-on="$listeners"
           :item="item"
           :readOnly="readOnly"
           :rules="rules"
@@ -225,12 +226,6 @@ export default class GenerateForm extends Vue {
     field.rules = field.rules.filter((_) => !_.required);
   }
 
-  getTableSelection($event, item) {
-    const tableSelections = {};
-    tableSelections[item.model] = $event;
-    this.$emit('table-selections', tableSelections);
-  }
-
   generateModel(genList, initValue = true) {
     // 遍历设计的结构
     for (let i = 0; i < genList.length; i += 1) {
@@ -311,45 +306,6 @@ export default class GenerateForm extends Vue {
     });
   }
 
-  labelWidth(item) {
-    const { type, labelWidth } = item;
-    let label = 'text,comment'.includes(type) ? '0px' : labelWidth || undefined;
-    if (label) {
-      label = label.toString();
-      if (!label.includes('px')) {
-        label += 'px';
-      }
-    }
-    return label;
-  }
-
-  // 单元格中为input,select,textarea时会默认聚焦
-  clickTdAutoFocus(event, td) {
-    // 判断单元格中是否有组件
-    if (td.list.length > 0) {
-      const dom = event.target;
-      const [target] = td.list;
-      // 当点击单元格时,聚焦组件
-      if (dom.tagName === 'TD') {
-        switch (target.type) {
-          case 'input':
-            dom.getElementsByTagName('INPUT')[0].focus();
-            break;
-          case 'select':
-            dom.getElementsByTagName('INPUT')[0].focus();
-            break;
-          case 'textarea':
-            dom.getElementsByTagName('TEXTAREA')[0].focus();
-            break;
-          default:
-            return false;
-        }
-      }
-      return false;
-    }
-    return false;
-  }
-
   // 重置表单
   resetForm() {
     this.$refs.generateForm.resetFields();
@@ -373,22 +329,6 @@ export default class GenerateForm extends Vue {
     return new Promise((resolve) => resolve(this.filterFormData()));
   }
 
-  // 生成的按钮点击
-  btnOnClick(event) {
-    this.$emit('btn-on-click', {
-      event,
-      model: this.models,
-    });
-  }
-
-  // 图表点击
-  chartOnClick(chart) {
-    this.$emit('chart-on-click', {
-      chart,
-      model: this.models,
-    });
-  }
-
   // 表单默认值回填单独拉出来封装
   setDefaultValue(config) {
     // 如果时间选择器需要默认值,默认回填当前日期
@@ -442,7 +382,6 @@ export default class GenerateForm extends Vue {
 </script>
 <style lang="scss" scoped>
 @import './styles/table-form.scss';
-@import './styles/grid-table-form.scss';
 
 .dev-module {
   position: absolute;

diff --git a/src/component/form-designer/src/GenerateLayout.vue b/src/component/form-designer/src/GenerateLayout.vue
@@ -20,15 +20,6 @@
       >
         <!-- 遍历生成该列所有组件 -->
         <template v-for="citem in col.list">
-          <!-- 如果一个元素的type是blank就加载插槽 -->
-          <el-form-item v-if="citem.type == 'blank'" :label-width="citem.options.hiddenLabel ? '0' : labelWidth(citem)" v-show="!citem.hidden" :prop="citem.model" :key="citem.key">
-            <template slot="label">
-              <template v-if="!citem.options.hiddenLabel">
-                <span>{{ citem.name }}</span>
-              </template>
-            </template>
-            <slot :name="citem.model" :widget="citem" :model="models"></slot>
-          </el-form-item>
           <GenerateLayout
             v-if="citem.type.includes('grid') || citem.type.includes('tabs')"
             :item="citem"
@@ -90,16 +81,16 @@
           }"
         >
           <GenerateLayout
-            v-if="citem.type.includes('grid') || citem.type.includes('tabs')"
-            :item="citem"
+            v-if="col.type.includes('grid') || col.type.includes('tabs')"
+            :item="col"
             :readOnly="readOnly"
             :models="models"
             :rules="rules"
             :remote="remote"
             :formTableConfig="formTableConfig"
             :data="col"
             :deviceMode="deviceMode"
-            :key="citem.key"
+            :key="col.key"
           ></GenerateLayout>
           <GenerateFormItem
             v-else
@@ -214,12 +205,43 @@ export default defineComponent({
       return props.data.config && props.data.config.isTableClass && list.every((_) => _.hidden) && item.columns.length === 1;
     };
 
+    // 单元格中为input,select,textarea时会默认聚焦
+    const clickTdAutoFocus = (event, td) => {
+      // 判断单元格中是否有组件
+      if (td.list.length > 0) {
+        const dom = event.target;
+        const [target] = td.list;
+        // 当点击单元格时,聚焦组件
+        if (dom.tagName === 'TD') {
+          switch (target.type) {
+            case 'input':
+              dom.getElementsByTagName('INPUT')[0].focus();
+              break;
+            case 'select':
+              dom.getElementsByTagName('INPUT')[0].focus();
+              break;
+            case 'textarea':
+              dom.getElementsByTagName('TEXTAREA')[0].focus();
+              break;
+            default:
+              return false;
+          }
+        }
+        return false;
+      }
+      return false;
+    };
+
     return {
       getTableSelection,
       btnOnClick,
       chartOnClick,
       isNoBorder,
+      clickTdAutoFocus,
     };
   },
 });
 </script>
+<style lang="scss" scoped>
+@import './styles/grid-table-form.scss';
+</style>