perf: 优化表格设计器样式,移除lodash @0.9.2-1

package.json

@@ -67,7 +67,6 @@
     "husky": "^3.0.9",
     "inquirer": "^6.5.2",
     "lint-staged": "^9.2.0",
-    "lodash": "^4.17.14",
     "longest": "^2.0.1",
     "node-sass": "^4.12.0",
     "path": "^0.12.7",
@@ -118,6 +117,7 @@
     "last 2 versions"
   ],
   "dependencies": {
-    "@vue/composition-api": "^1.0.0-rc.1"
+    "@vue/composition-api": "^1.0.0-rc.1",
+    "sortablejs": "^1.13.0"
   }
 }

src/component/crud-table/src/CrudTable.vue

@@ -86,7 +86,6 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import _cloneDeep from 'lodash/cloneDeep';
 import {
   columns, DataSource, DML, Params,
 } from '@/types/common';
@@ -417,7 +416,7 @@ export default defineComponent({
       // 操作列-添加
       actionColumnAdd(row) {
         // 添加成功后需要刷新当前结点的子节点,此处特殊处理
-        currentRow.parentid = _cloneDeep(row).id;
+        currentRow.parentid = JSON.parse(JSON.stringify(row)).id;
         if (props.btnRowAddOnClick) {
           props.btnRowAddOnClick(row);
         } else if (props.prefill) {

src/component/form-designer/src/components/Charts/pieChart.vue

@@ -168,10 +168,6 @@ export default {
       defaultOption.title.right = '38.5%';
       defaultOption.title.textStyle.color = '#000';
       defaultOption.visualMap.inRange = {};
-
-      // if (this.option) {
-      //   this.lodash.merge(defaultOption, this.option);
-      // }
       return defaultOption;
     },
   },

src/component/table-designer/src/MenuBar.vue

@@ -36,8 +36,6 @@
 </template>
 
 <script>
-import _forEach from 'lodash/forEach';
-import _pick from 'lodash/pick';
 import { DML } from '@/types/common';
 import CusDialog from '@/component/common/CusDialog.vue';
 import Clipboard from 'clipboard';
@@ -103,9 +101,8 @@ export default {
           const jsonObj = JSON.parse(res.data.formJson);
           const done = [];
           // 遍历行
-          _forEach(jsonObj.list, (row) => {
-            // 遍历列
-            _forEach(row.columns, (column) => {
+          jsonObj.list.forEach((row) => {
+            row.columns.forEach((column) => {
               const first = column.list[0];
               if (first && 'date,select'.includes(first.type)) {
                 // 从表单复制到表格的属性
@@ -121,7 +118,12 @@ export default {
                   'props',
                   'options',
                 ];
-                const option = _pick(first.options, keyList);
+                const option = {};
+                Object.keys(first.options).forEach((key) => {
+                  if (keyList.includes(key)) {
+                    option[key] = first.options[key];
+                  }
+                });
                 option.type = first.type;
                 // 遍历当前表格配置，加入option
                 for (const col of this.designedJSON.columns) {
@@ -152,6 +154,7 @@ export default {
         // 普通列
         case 'addColumn':
           this.designedJSON.columns.push({
+            id: Math.random(),
             prop: '',
             label: '',
             align: 'center',
@@ -160,12 +163,14 @@ export default {
             minWidth: this.minColumnWidth,
             sortable: 'custom',
             searchable: true,
+            hasChildren: true,
           });
           break;
         // 普通列x10
         case 'addColumnx5':
           for (let i = 0; i < 5; i += 1) {
             this.designedJSON.columns.push({
+              id: Math.random(),
               prop: '',
               label: '',
               align: 'center',
@@ -180,6 +185,7 @@ export default {
         // 操作列
         case 'addActionColumn':
           this.designedJSON.columns.push({
+            id: Math.random(),
             prop: '_action',
             label: '操作',
             minWidth: 180,
@@ -220,6 +226,7 @@ export default {
                 for (const column of row.columns) {
                   const { model } = column.list[0];
                   this.designedJSON.columns.push({
+                    id: Math.random(),
                     prop: model.split('_')[1] || model.split('_')[0],
                     label: column.list[0].name,
                     minWidth: this.minColumnWidth,

src/component/table-designer/src/TableDesigner.vue

@@ -26,59 +26,52 @@
         <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">
-          <el-tooltip v-if="column.tootip" class="item" effect="dark" :content="column.tootip" placement="top">
-            <span>{{ column.name }}</span>
-          </el-tooltip>
-          <span v-else :style="column.headStyle">{{ column.name }}</span>
-        </th>
-      </thead>
-      <!-- 包含可拖动元素的外部标签 -->
-      <Draggable tag="tbody" v-model="objJSON.columns" handle=".el-icon-sort">
-        <!-- 遍历生成每一行 -->
-        <tr v-for="(item, index) in objJSON.columns" :key="index" class="row">
-          <!-- 遍历生成一行中的每一个单元格 -->
-          <td v-for="column in fieldConfig" :key="column.name">
-            <!-- 第一列只有排序图标 -->
-            <i v-if="column.is === 'i'" class="el-icon-sort"></i>
-            <!-- 只有文本框的列，“最小宽度”字段列特殊处理 -->
-            <el-input
-              v-else-if="column.is === 'input'"
-              v-model="item[column.field]"
-              :placeholder="column.field"
-              size="small"
-              :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-option v-for="o in column.list" :key="o.label" :label="o.label" :value="o.value"></el-option>
-            </el-select>
-            <!-- 开关 -->
-            <el-switch size="small" v-else-if="column.is === 'switch'" v-model="item[column.field]"></el-switch>
-            <!-- 高级查询，如果配置了popover同时options存在就显示编辑 -->
-            <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-popover>
-            <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-table stripe fit ref="table" :data="objJSON.columns" style="width: 100%; margin-bottom: 20px" :row-key="(row) => row.id || row.prop" border>
+      <!-- 遍历columns生成表头 -->
+      <el-table-column header-align="center" align="center" :label="column.name" v-for="column in fieldConfig" :key="column.name" :min-width="column.headStyle">
+        <template slot-scope="scope">
+          <!-- 第一列只有排序图标 -->
+          <template v-if="column.is === 'i'">
+            <el-tooltip class="item" effect="dark" content="拖拽可以排序哦~" placement="left">
+              <i style="color: blue; cursor: pointer" class="el-icon-sort"></i>
             </el-tooltip>
-          </td>
-        </tr>
-      </Draggable>
-    </table>
+          </template>
+          <!-- 只有文本框的列，“最小宽度”字段列特殊处理 -->
+          <el-input
+            v-if="column.is === 'input'"
+            v-model="scope.row[column.field]"
+            :placeholder="column.field"
+            size="small"
+            :class="{ notDefaultWidth: column.field === 'minWidth' && scope.row[column.field] !== 140 }"
+          />
+          <!-- 下拉菜单列 -->
+          <el-select size="small" v-else-if="column.is === 'select'" v-model="scope.row[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>
+          <!-- 开关 -->
+          <el-switch size="small" v-else-if="column.is === 'switch'" v-model="scope.row[column.field]"></el-switch>
+          <!-- 高级查询，如果配置了popover同时options存在就显示编辑 -->
+          <el-popover v-else-if="column.is === 'popover' && scope.row[column.field]" placement="bottom-start" width="400" trigger="click">
+            <!-- 下拉菜单配置 -->
+            <SelectConfig :dictList="dictList" :sourceOption.sync="scope.row[column.field]" />
+            <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(scope.$index)"> 转为菜单 </el-button>
+          <!-- 操作列 -->
+          <template v-if="column.is === 'action'">
+            <el-tooltip class="item" effect="dark" content="删除当前行" placement="left">
+              <i style="color: red; cursor: pointer" class="el-icon el-icon-delete" @click="removeColumn(scope.$index)"></i>
+            </el-tooltip>
+          </template>
+        </template>
+      </el-table-column>
+    </el-table>
   </div>
 </template>
 
 <script>
-import Draggable from 'vuedraggable';
 import { DML } from '@/types/common';
+import Sortable from 'sortablejs';
 import MenuBar from './MenuBar.vue';
 import columnsConfig from './columnsConfig.ts';
 import SelectConfig from './SelectConfig.vue';
@@ -92,7 +85,6 @@ export default {
   name: 'TableDesigner',
   components: {
     MenuBar,
-    Draggable,
     SelectConfig,
   },
   props: {
@@ -130,7 +122,21 @@ export default {
       entity: {},
     };
   },
+  mounted() {
+    this.rowDrop();
+  },
   methods: {
+    // 行拖拽
+    rowDrop() {
+      const tbody = this.$refs.table.$el.querySelector('.el-table__body-wrapper tbody');
+      const _this = this;
+      Sortable.create(tbody, {
+        onEnd({ newIndex, oldIndex }) {
+          const currRow = _this.objJSON.columns.splice(oldIndex, 1)[0];
+          _this.objJSON.columns.splice(newIndex, 0, currRow);
+        },
+      });
+    },
     // 删除列
     removeColumn(index) {
       this.objJSON.columns.splice(index, 1);

src/component/table-designer/src/columnsConfig.ts

@@ -11,41 +11,44 @@ export default [
     is: 'i',
     show: true,
     bodyStyle: 'el-icon-sort',
-    tootip: '拖拽我上下滑动可以改变字段顺序',
+    tootip: '拖拽可以排序哦~',
+    headStyle: '30',
   },
   {
     name: '字段',
     field: 'prop',
     is: 'input',
+    headStyle: '100',
     show: true,
   },
   {
     name: '列名',
     field: 'label',
     is: 'input',
-    headStyle: 'width:150px',
+    headStyle: '100',
     show: true,
   },
   {
     name: '高级查询',
     field: 'option',
     is: 'popover',
-    headStyle: 'width:90px',
+    headStyle: '60',
     show: true,
     tootip: '默认为文本框，可转为下拉菜单',
   },
   {
     name: '最小宽',
     field: 'minWidth',
     is: 'input',
-    headStyle: 'width:50px',
+    headStyle: '60',
     tootip: '加粗黑色表示非默认宽度',
     show: true,
   },
   {
     name: '表格对齐',
     field: 'align',
     is: 'select',
+    headStyle: '70',
     list: [
       {
         label: '靠左',
@@ -70,7 +73,7 @@ export default [
     name: '表头对齐',
     field: 'headerAlign',
     is: 'select',
-    headStyle: 'width:50px',
+    headStyle: '70',
     list: [
       {
         label: '靠左',
@@ -95,7 +98,7 @@ export default [
     name: '固定方式',
     field: 'fixed',
     is: 'select',
-    headStyle: 'width:50px',
+    headStyle: '70',
     list: [
       {
         label: '靠左',
@@ -115,15 +118,15 @@ export default [
   {
     name: '溢出隐藏',
     field: 'showOverflowTooltip',
-    headStyle: 'width:80px',
+    headStyle: '50',
     is: 'switch',
     show: true,
   },
   {
     name: '排序方式',
     field: 'sortable',
     is: 'select',
-    headStyle: 'width:120px',
+    headStyle: '100',
     list: [
       {
         label: '不排序',
@@ -143,7 +146,7 @@ export default [
   {
     name: '是否检索',
     field: 'searchable',
-    headStyle: 'width:80px',
+    headStyle: '50',
     is: 'switch',
     tootip: '是否在表格顶部高级查询区域显示',
     show: true,
@@ -152,11 +155,14 @@ export default [
     name: '插槽',
     field: 'slotName',
     is: 'input',
+    headStyle: '110',
     show: true,
   },
   {
     name: '操作',
     show: true,
-    is: 'delete',
+    is: 'action',
+    headStyle: '40',
+
   },
 ];