CN-1040: adminiastration底下各table的customization功能更新

src/assets/css/components/components/table/common.scss

@@ -1,5 +1,5 @@
 .pop-custom {
-  padding: 0 12px 12px 12px;
+  padding: 12px;
   border: 1px solid #EBEEF5;
   position: absolute;
   top: 55px;
@@ -103,3 +103,54 @@
     border-radius: 2px 0px 0px 2px;
   }
 }
+
+.list {
+  list-style: none;
+  padding-inline-start: 0 !important;
+  max-height: 358px !important;
+  overflow: auto;
+  margin: 0 0;
+
+  .drag-move {
+    transition: transform 0.3s;
+  }
+
+  .list-item:last-child {
+    margin-bottom: 6px;
+  }
+
+  .list-item {
+    width: 100%;
+    color: #575757;
+    margin-bottom: 0;
+    height: 24px;
+    line-height: 24px;
+    text-align: left;
+    font-weight: 400;
+    font-size: 12px;
+
+    .icon-drag {
+      cursor: move;
+      margin-left: 6px;
+      margin-right: 3px;
+    }
+
+    .el-checkbox__input.is-checked .el-checkbox__inner {
+      background-color: #38ACD2;
+      border-color: #38ACD2;
+      border-radius: 2px;
+    }
+
+    .el-checkbox__input .el-checkbox__inner {
+      background-color: #F2F7F9;
+      border: 1px solid rgba(0, 0, 0, 0.15);
+      border-radius: 2px;
+    }
+
+    .el-checkbox__input.is-checked + .el-checkbox__label, .el-checkbox__input + .el-checkbox__label {
+      font-size: 12px;
+      color: #575757;
+      font-weight: 400;
+    }
+  }
+}

src/components/table/ColumnCustomize.vue

@@ -1,39 +1,59 @@
 <template>
   <div class="pop-custom" v-ele-click-outside="esc">
-    <div class="pop-title">{{$t('overall.select')}}</div>
+    <transition-group name="dragTabs" class="list" tag="ul" ref="tabs">
-    <div class="pop-box custom-labels">
+      <li v-for="(item, index) in custom"
-      <div style="height: 100%; border-radius:2%; border:1px solid #DCDFE6; overflow: auto;">
+          :key="item.label"
-        <!--NotSet 为true不可设置-->
+          class="list-item"
-        <div
+          @dragenter="dragenter($event, index)"
-          v-for="(item,index) in custom"
+          @dragover="dragover($event, index)"
-          :key="index"
+          @dragstart="dragstart(index)"
-          class="custom-label"
+          :draggable="!item.sortable"
-          @click="handler(item,index)"
-          :id="'element-set-el-'+index"
       >
-          <i class="cn-icon cn-icon-check" v-if="!allowedAll && !item.allowed && (index === 0 || index === 1 || item.visibility === 'disabled')"></i>
+        <i class="cn-icon-sort cn-icon icon-drag" :key="item.label"></i>
-          <i v-else class="cn-icon cn-icon-check" v-show="item.show"></i>
+        <el-checkbox
-          <span>{{item.label}}</span>
+            @change="tabChange(index)"
-        </div>
+            :disabled="item.disabled"
+            v-model="item.show"
+            :label="$t(item.label) "
+            size="small"
+            :key="item.label"/>
+      </li>
+    </transition-group>
+    <!--暂时保留之前代码-->
+    <!--    <div class="pop-title">{{$t('overall.select')}}</div>-->
+    <!--    <div class="pop-box custom-labels">-->
+    <!--      <div style="height: 100%; border-radius:2%; border:1px solid #DCDFE6; overflow: auto;">-->
+    <!--        &lt;!&ndash;NotSet 为true不可设置&ndash;&gt;-->
+    <!--        <div-->
+    <!--          v-for="(item,index) in custom"-->
+    <!--          :key="index"-->
+    <!--          class="custom-label"-->
+    <!--          @click="handler(item,index)"-->
+    <!--          :id="'element-set-el-'+index"-->
+    <!--        >-->
+    <!--          <i class="cn-icon cn-icon-check" v-if="!allowedAll && !item.allowed && (index === 0 || index === 1 || item.visibility === 'disabled')"></i>-->
+    <!--          <i v-else class="cn-icon cn-icon-check" v-show="item.show"></i>-->
+    <!--          <span>{{item.label}}</span>-->
+    <!--        </div>-->
 
-      </div>
+    <!--      </div>-->
-    </div>
+    <!--    </div>-->
-    <div class="custom-bottom-btns">
+    <!--    <div class="custom-bottom-btns">-->
-      <el-button size="mini" v-if="isCancel" :id="tableId+'-element-set-none'" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new is-cancel" @click="batchHandler(false)">
+    <!--      <el-button size="mini" v-if="isCancel" :id="tableId+'-element-set-none'" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new is-cancel" @click="batchHandler(false)">-->
-        <span class="top-tool-btn-txt">{{$t('overall.clear')}}</span>
+    <!--        <span class="top-tool-btn-txt">{{$t('overall.clear')}}</span>-->
-      </el-button>
+    <!--      </el-button>-->
-      <el-button size="mini" v-if="!isCancel" :id="tableId+'-element-set-all'" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new" @click="batchHandler(true)">
+    <!--      <el-button size="mini" v-if="!isCancel" :id="tableId+'-element-set-all'" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new" @click="batchHandler(true)">-->
-        <span class="top-tool-btn-txt">{{$t('overall.all')}}</span>
+    <!--        <span class="top-tool-btn-txt">{{$t('overall.all')}}</span>-->
-      </el-button>
+    <!--      </el-button>-->
-      <div class="custom-bottom-btns-right">
+    <!--      <div class="custom-bottom-btns-right">-->
-        <el-button size="mini" :id="tableId+'-element-set-esc'" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new" @click="esc">
+    <!--        <el-button size="mini" :id="tableId+'-element-set-esc'" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new" @click="esc">-->
-          <span class="top-tool-btn-txt">{{$t('overall.cancel')}}</span>
+    <!--          <span class="top-tool-btn-txt">{{$t('overall.cancel')}}</span>-->
-        </el-button>
+    <!--        </el-button>-->
-        <el-button size="mini" :id="tableId+'-element-set-save'" class="cn-btn cn-btn-size-small-new cn-btn-style-normal-new" @click="save" style="background-color: #0091ff;color:#DCDFE6">
+    <!--        <el-button size="mini" :id="tableId+'-element-set-save'" class="cn-btn cn-btn-size-small-new cn-btn-style-normal-new" @click="save" style="background-color: #0091ff;color:#DCDFE6">-->
-          <span class="top-tool-btn-txt top-tool-btn-save">{{$t('overall.save')}}</span>
+    <!--          <span class="top-tool-btn-txt top-tool-btn-save">{{$t('overall.save')}}</span>-->
-        </el-button>
+    <!--        </el-button>-->
-      </div>
+    <!--      </div>-->
-    </div>
+    <!--    </div>-->
   </div>
 </template>
 
@@ -48,7 +68,10 @@ export default {
   },
   data () {
     return {
-      custom: []
+      custom: [],
+      dragIndex: -1,
+      selectList: [],
+      lastIndex: -1
     }
   },
   created () {
@@ -63,10 +86,44 @@ export default {
       deep: true,
       handler (n) {
         this.custom = JSON.parse(JSON.stringify(n))
+        this.selectList = this.custom.filter(item => item.show)
       }
     }
   },
   methods: {
+    tabChange () {
+      this.selectList = this.custom.filter(item => item.show)
+      // 最少保留一个选项
+      if (this.selectList.length === 1) {
+        let index = -1
+        this.custom.find((item, i) => {
+          index = i
+          return item.prop === this.selectList[0].prop
+        })
+        this.lastIndex = index
+        this.custom[index].disabled = true
+      } else if (this.lastIndex > -1) {
+        this.custom[this.lastIndex].disabled = false
+        this.lastIndex = -1
+      }
+      this.save()
+    },
+    dragstart (index) {
+      this.dragIndex = index
+    },
+    dragenter (e, index) {
+      e.preventDefault()
+      if (this.dragIndex !== index) {
+        const moving = this.custom[this.dragIndex]
+        this.custom.splice(this.dragIndex, 1)
+        this.custom.splice(index, 0, moving)
+        this.dragIndex = index
+        this.save()
+      }
+    },
+    dragover (e) {
+      e.preventDefault()
+    },
     // 悬浮点击空白隐藏
     esc () {
       this.$emit('close')
@@ -94,9 +151,8 @@ export default {
     // 点击第二个cancel
     save () {
       this.$emit('update', this.custom)
-      localStorage.setItem(storageKey.tableTitle + '-' + localStorage.getItem(storageKey.username) + '-' + this.tableId,
+      localStorage.setItem(storageKey.tableTitle + '-' + localStorage.getItem(storageKey.username) + '-' + this.tableId, JSON.stringify(this.custom))
-        JSON.stringify(this.custom))
+      // this.esc()
-      this.esc()
     }
   },
   computed: {

src/components/table/administration/OperationLogTable.vue

@@ -18,8 +18,8 @@
       width="55">
     </el-table-column>
     <el-table-column
-      v-for="item in customTableTitles"
+      v-for="(item, index) in customTableTitles"
-      :key="item.prop"
+      :key="item.prop+index"
       :fixed="item.fixed"
       :label="item.label"
       :min-width="`${item.minWidth}`"

src/components/table/administration/RoleTable.vue

@@ -16,8 +16,8 @@
       width="55">
     </el-table-column>
     <el-table-column
-      v-for="item in customTableTitles"
+      v-for="(item, index) in customTableTitles"
-      :key="item.prop"
+      :key="item.prop+index"
       :fixed="item.fixed"
       :label="item.label"
       :min-width="`${item.minWidth}`"
@@ -74,7 +74,22 @@ export default {
           prop: 'remark',
           show: true
         }
-      ]
+      ],
+      isRefresh: true
+    }
+  },
+  watch: {
+    customTableTitles (n) {
+      // 数据变化，界面未渲染，vue3.2弃用$set,使用reactive绑定数组，界面也未响应，该方法不优美，后续有更佳替代方案时替换
+      if (n && n.length > 0) {
+        if (n[0].flag === 'drag') {
+          // 重新渲染，会导致界面偶现闪的情况，点击checkbox时界面闪会比较丑，故不处理点击的情况
+          this.isRefresh = false
+          this.$nextTick(() => {
+            this.isRefresh = true
+          })
+        }
+      }
     }
   }
 }

src/components/table/administration/UserTable.vue

@@ -17,8 +17,8 @@
       width="55">
     </el-table-column>
     <el-table-column
-      v-for="item in customTableTitles"
+      v-for="(item, index) in customTableTitles"
-      :key="item.prop"
+      :key="item.prop+index"
       :fixed="item.fixed"
       :label="item.label"
       :min-width="`${item.minWidth}`"

src/mixins/data-list.js

@@ -416,12 +416,24 @@ export default {
     }
     let localStorageTableTitle = localStorage.getItem(storageKey.tableTitle + '-' + localStorage.getItem(storageKey.username) + '-' + this.tableId)
     localStorageTableTitle = localStorageTableTitle ? JSON.parse(localStorageTableTitle) : this.$refs.dataTable.tableTitle
-    this.tools.customTableTitle = this.$refs.dataTable.tableTitle.map((item, index) => { // 修复切换中英文的问题
+    // this.tools.customTableTitle = this.$refs.dataTable.tableTitle.map((item, index) => { // 修复切换中英文的问题
-      if (localStorageTableTitle[index]) {
+    //   if (localStorageTableTitle[index]) {
-        item.show = localStorageTableTitle[index].show
+    //     item.show = localStorageTableTitle[index].show
+    //   }
+    //   return item
+    // })
+
+    // 不够优美，后续修改
+    // 为了避免缓存里的label在切换中英文时不一致，因为在拖拽后，键值不一致了，故根据prop匹配来修改label
+    for (let i = 0; i < localStorageTableTitle.length; i++) {
+      for (let j = 0; j < this.tools.customTableTitle.length; j++) {
+        if (localStorageTableTitle[i].prop === this.tools.customTableTitle.prop) {
+          localStorageTableTitle[i].label = this.tools.customTableTitle.label
+          break
         }
-      return item
+      }
-    })
+    }
+    this.tools.customTableTitle = localStorageTableTitle
     if (localStorageTableTitle && (localStorageTableTitle.length > this.$refs.dataTable.tableTitle.length)) {
       const arr = localStorageTableTitle.splice(this.$refs.dataTable.tableTitle.length, localStorageTableTitle.length)
       this.tools.customTableTitle = this.tools.customTableTitle.concat(arr)