perf: 调整表格设计器代码

BoBoooooo · Mar 8, 2021 · 79fe40f · 79fe40f
1 parent 026e19f
commit 79fe40f
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 51 deletions.
diff --git a/src/component/table-designer/src/MenuBar.vue b/src/component/table-designer/src/MenuBar.vue
@@ -18,12 +18,6 @@
         <el-dropdown-item command="generateTableByForm" v-if="formList.length > 0">
           [请先设置表单]根据表单生成表格
         </el-dropdown-item>
-        <el-dropdown-item command="autoSetSearchable">
-          检索状态：除了操作列，默认所有列都可以作为查询条件。
-        </el-dropdown-item>
-        <el-dropdown-item command="autoSetAlign">
-          对齐方式：表头居中，数字靠右、变长靠左
-        </el-dropdown-item>
         <el-dropdown-item command="autoSetSearchOption" v-if="formList.length > 0">
           [请先设置表单]分析表单配置以设置表格高级搜索options
         </el-dropdown-item>
@@ -204,30 +198,6 @@ export default {
     // 自动设置
     autoSet(command) {
       switch (command) {
-        // 自动设置检索状态
-        case 'autoSetSearchable':
-          this.designedJSON.columns = this.designedJSON.columns.map((item) => {
-            item.searchable = item.slotName === '' || item.slotName == null;
-            return item;
-          });
-          break;
-        // 自动设置表头居中对齐
-        case 'autoSetAlign':
-          this.designedJSON.columns = this.designedJSON.columns.map((item) => {
-            // 操作列
-            if ((item.slotName !== '' && item.slotName != null) || ['年', '时间', '期'].some(c => item.label.includes(c))) {
-              // 列按钮居中
-              item.align = 'center';
-            } else if ((item.slotName !== '' && item.slotName != null) || ['万元', '得票数', '百分比', '人数', '数量'].some(c => item.label.includes(c))) {
-              item.align = 'right';
-            } else {
-              item.align = 'center';
-            }
-            // 表头居中
-            item.headerAlign = 'center';
-            return item;
-          });
-          break;
         // 根据表单设置表格高级搜索
         case 'autoSetSearchOption':
           this.autoSetSearchOption();

diff --git a/src/component/table-designer/src/TableDesigner.vue b/src/component/table-designer/src/TableDesigner.vue
@@ -23,14 +23,14 @@
       </el-col>
       <el-col :span="12">
         <!-- 菜单栏 -->
-        <MenuBar style="float:right" :designedJSON.sync="objJSON" :fieldConfig="fieldConfig" :formList="formList" :minColumnWidth="minColumnWidth" />
+        <MenuBar style="float: right" :designedJSON.sync="objJSON" :fieldConfig="fieldConfig" :formList="formList" :minColumnWidth="minColumnWidth" />
       </el-col>
     </el-row>
 
     <table class="tableDesigner">
       <thead>
         <!-- 遍历columns生成表头 -->
-        <th v-for="column in fieldConfig" :key="column.name" v-if="column.show">
+        <th v-for="column in fieldConfig" :key="column.name">
           <el-tooltip v-if="column.tootip" class="item" effect="dark" :content="column.tootip" placement="top">
             <span>{{ column.name }}</span>
           </el-tooltip>
@@ -42,7 +42,7 @@
         <!-- 遍历生成每一行 -->
         <tr v-for="(item, index) in objJSON.columns" :key="index" class="row">
           <!-- 遍历生成一行中的每一个单元格 -->
-          <td v-for="column in fieldConfig" :key="column.name" v-if="column.show && column.is">
+          <td v-for="column in fieldConfig" :key="column.name">
             <!-- 第一列只有排序图标 -->
             <i v-if="column.is === 'i'" class="el-icon-sort"></i>
             <!-- 只有文本框的列，“最小宽度”字段列特殊处理 -->
@@ -54,7 +54,7 @@
               :class="{ notDefaultWidth: column.field === 'minWidth' && item[column.field] !== 140 }"
             />
             <!-- 下拉菜单列 -->
-            <el-select size="small"  v-else-if="column.is === 'select'" v-model="item[column.field]" :placeholder="column.field">
+            <el-select size="small" v-else-if="column.is === 'select'" v-model="item[column.field]" :placeholder="column.field">
               <el-option v-for="o in column.list" :key="o.label" :label="o.label" :value="o.value"></el-option>
             </el-select>
             <!-- 开关 -->
@@ -63,17 +63,11 @@
             <el-popover v-else-if="column.is === 'popover' && item[column.field]" placement="bottom-start" width="400" trigger="click">
               <!-- 下拉菜单配置 -->
               <SelectConfig :dictList="dictList" :sourceOption.sync="item[column.field]" />
-              <el-button size="small" slot="reference" type="primary">
-                编辑菜单
-              </el-button>
+              <el-button size="small" slot="reference" type="primary"> 编辑菜单 </el-button>
             </el-popover>
-            <el-button size="small" v-else-if="column.is === 'popover'" slot="reference" @click="addOptionToColumn(index)">
-              转为菜单
-            </el-button>
-          </td>
-          <td>
-            <el-tooltip class="item" effect="dark" content="删除当前行" placement="left">
-              <i style="color: red;cursor:pointer" class="el-icon el-icon-delete" @click="removeColumn(index)"></i>
+            <el-button size="small" v-else-if="column.is === 'popover'" slot="reference" @click="addOptionToColumn(index)"> 转为菜单 </el-button>
+            <el-tooltip v-else-if="column.is === 'delete'" class="item" effect="dark" content="删除当前行" placement="left">
+              <i style="color: red; cursor: pointer" class="el-icon el-icon-delete" @click="removeColumn(index)"></i>
             </el-tooltip>
           </td>
         </tr>

diff --git a/src/component/table-designer/src/columnsConfig.ts b/src/component/table-designer/src/columnsConfig.ts
@@ -34,13 +34,6 @@ export default [
     show: true,
     tootip: '默认为文本框，可转为下拉菜单',
   },
-  {
-    name: '列宽',
-    field: 'width',
-    is: 'input',
-    headStyle: 'width:70px',
-    show: false,
-  },
   {
     name: '最小宽',
     field: 'minWidth',
@@ -164,5 +157,6 @@ export default [
   {
     name: '操作',
     show: true,
+    is: 'delete',
   },
 ];