init

src/components/table/CnDataList.vue

@@ -0,0 +1,95 @@
+<template>
+  <div :class="from" class="list-page">
+    <!-- 主页面 -->
+    <div class="main-list">
+      <!-- 顶部工具栏 -->
+      <div class="main-container">
+        <div class="top-tools">
+          <div class="top-tool-left" style="min-width: 300px">
+            <slot name="top-tool-left"></slot>
+          </div>
+          <div class="top-tool-right">
+            <div v-if="showLayout.indexOf('searchInput') > -1" class="top-tool-search margin-r-20"></div>
+            <slot name="top-tool-right"></slot>
+            <button v-if="showLayout.indexOf('elementSet') > -1"  class="top-tool-btn"
+                    type="button" @click="tools.showCustomTableTitle = true">
+              <i class="cn-icon-gear cn-icon"></i>
+            </button>
+          </div>
+        </div>
+        <div class="cn-table">
+          <slot></slot>
+        </div>
+        <div class="cn-pagination">
+          <slot name="pagination"></slot>
+        </div>
+      </div>
+      <!-- 自定义table列 -->
+      <transition name="el-zoom-in-top">
+        <column-customize
+          v-if="tools.showCustomTableTitle"
+          :tableId="tableId"
+          ref="customTableTitle"
+          :custom-table-title="customTableTitle"
+          :original-table-title="tableTitle"
+          @close="tools.showCustomTableTitle = false"
+          @update="updateCustomTableTitle"
+        ></column-customize>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script>
+import columnCustomize from '@/components/table/ColumnCustomize'
+import { fromRoute } from '@/utils/constants'
+
+export default {
+  name: 'cnDataList',
+  components: {
+    columnCustomize
+  },
+  props: {
+    from: {
+      type: String,
+      default: ''
+    },
+    tableId: {
+      type: String
+    },
+    tableTitle: {
+      type: Array
+    },
+    customTableTitle: {
+      type: Array
+    },
+    layout: {
+      type: Array,
+      default () { return [] }
+    }
+  },
+  data () {
+    return {
+      fromRoute: fromRoute,
+      tools: {
+        showCustomTableTitle: false // 自定义列弹框是否显示
+      },
+      showLayout: []
+    }
+  },
+  methods: {
+    updateCustomTableTitle (custom) {
+      this.$emit('update:customTableTitle', custom)
+    }
+  },
+  watch: {
+    layout: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        this.showLayout = [...n]
+      }
+    }
+  }
+}
+</script>

src/components/table/ColumnCustomize.vue

@@ -0,0 +1,172 @@
+<template>
+  <div class="pop-custom">
+    <div class="pop-title">{{$t('overall.select')}}</div>
+    <div class="pop-box custom-labels">
+      <div style="height: 100%; overflow: auto;">
+        <!--NotSet 为true不可设置-->
+        <div
+          v-for="(item,index) in custom"
+          :key="index"
+          class="custom-label"
+          @click="handler(item,index)"
+          :id="'element-set-el-'+index"
+        >
+          <i class="nz-icon nz-icon-check" v-if="!allowedAll && !item.allowed && (index === 0 || index === 1 || item.visibility === 'disabled')"></i>
+          <i v-else class="nz-icon nz-icon-check" v-show="item.show"></i>
+          <span>{{item.label}}</span>
+        </div>
+
+      </div>
+    </div>
+    <div class="custom-bottom-btns">
+      <button v-if="isCancel" :id="tableId+'-element-set-none'" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new is-cancel" type="button" @click="batchHandler(false)">
+        <span class="top-tool-btn-txt">{{$t('overall.clear')}}</span>
+      </button>
+      <button v-if="!isCancel" :id="tableId+'-element-set-all'" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new" type="button" @click="batchHandler(true)">
+        <span class="top-tool-btn-txt">{{$t('overall.all')}}</span>
+      </button>
+      <div>
+        <button :id="tableId+'-element-set-esc'" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new" type="button" @click="esc">
+          <span class="top-tool-btn-txt">{{$t('overall.esc')}}</span>
+        </button>
+        <button :id="tableId+'-element-set-save'" class="nz-btn nz-btn-size-small-new nz-btn-style-normal-new" type="button" @click="save">
+          <span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    customTableTitle: Array, // 自定义的title
+    originalTableTitle: Array, // 原始title
+    tableId: String,
+    allowedAll: { default: false }
+  },
+  data () {
+    return {
+      custom: []
+    }
+  },
+  created () {
+    const localStorageTitle = JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.tableId))
+    if (localStorageTitle) {
+      localStorage.setItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.tableId, JSON.stringify(localStorageTitle))
+    }
+  },
+  watch: {
+    customTableTitle: {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        this.custom = JSON.parse(JSON.stringify(n))
+      }
+    }
+  },
+  methods: {
+    // 悬浮点击空白隐藏
+    esc () {
+      this.$emit('close')
+    },
+    // 全选all true 或者全取消cancel false按钮
+    batchHandler (state) {
+      for (let index = 0; index < this.custom.length; index++) {
+        if (this.custom[index].type !== 'title') {
+          if ((index === 0 || index === 1 || this.custom[index].NotSet)) {
+            this.custom[index].show = true
+          } else {
+            this.custom[index].show = state
+          }
+        }
+      }
+    },
+    // 单选
+    handler (val, index) {
+      if (!this.allowedAll && !val.allowed && (index === 0 || index === 1 || val.NotSet)) {
+      } else {
+        this.custom[index].show = !this.custom[index].show
+      }
+    },
+    // 点击第二个cancel
+    save () {
+      this.$emit('update', this.custom)
+      localStorage.setItem(
+        'nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.tableId,
+        JSON.stringify(this.custom)
+      )
+      this.esc()
+    }
+  },
+  computed: {
+    // 点击all是否是全部取消选中，true为是
+    isCancel () {
+      let isCancel = true
+      for (let i = 0; i < this.custom.length; i++) {
+        if (!this.custom[i].show && this.custom[i].type !== 'title') {
+          isCancel = false
+          break
+        }
+      }
+      return isCancel
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.pop-custom {
+  padding: 0 12px 12px 12px;
+  border: 1px solid #EBEEF5;
+  position: absolute;
+  top: 55px;
+  right: 20px;
+  width: 200px;
+  color: #606266;
+  background: #fff;
+  border-radius: 4px;
+  z-index: 999999;
+}
+.pop-custom-explore {
+  top: 33px;
+}
+.relative-position .pop-custom {
+  top: 33px;
+}
+.custom-labels {
+  margin-top: 12px;
+  width: 100%;
+  height: 300px;
+}
+.custom-labels i {
+  color: #04b330;
+  font-size: 14px;
+  position: absolute;
+  left: 5px;
+  top: 6px;
+}
+.custom-label {
+  padding: 2px 0 2px 25px;
+  position: relative;
+  cursor: default;
+  font-size: 14px;
+}
+.custom-title{
+  padding: 2px 0 2px 2px;
+}
+.custom-label-disabled {
+  cursor: not-allowed;
+  background: #f1f3f4;
+  opacity: 0.7;
+}
+.custom-bottom-btns {
+  margin-top: 7px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.unshow {
+  display: none;
+}
+</style>

src/components/table/settings/UserTable.vue

@@ -0,0 +1,142 @@
+<template>
+  <el-table
+    id="userTable"
+    ref="dataTable"
+    :data="tableData"
+    :height="height"
+    border
+    @header-dragend="dragend"
+    @sort-change="tableDataSort"
+    @selection-change="selectionChange"
+  >
+    <el-table-column
+      :resizable="false"
+      align="center"
+      type="selection"
+      width="55">
+    </el-table-column>
+    <el-table-column
+      v-for="(item, index) in customTableTitle"
+      :key="`col-${index}`"
+      :fixed="item.fixed"
+      :label="item.label"
+      :min-width="`${item.minWidth}`"
+      :prop="item.prop"
+      :resizable="true"
+      :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
+      :width="`${item.width}`"
+    >
+      <template #header>
+        <span class="data-column__span">{{item.label}}</span>
+        <div class="col-resize-area"></div>
+      </template>
+      <template #default="scope" :column="item">
+        <template v-if="item.prop === 'roles'">
+          <template v-if="scope.row[item.prop]">
+            {{scope.row[item.prop].map(t=>t.name).join(',')}}
+          </template>
+          <template v-else>
+            <span>-</span>
+          </template>
+        </template>
+        <template v-else-if="item.prop === 'status'">
+        </template>
+        <span v-else>{{scope.row[item.prop]}}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      :resizable="false"
+      :width="operationWidth"
+      fixed="right">
+      <template #header>
+        <div class="table-operation-title">{{$t('overall.option')}}</div>
+      </template>
+      <template #default="scope">
+        <div class="table-operation-items">
+          <button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="nz-icon nz-icon-view1"></i></button>
+        </div>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+import table from '@/mixins/table'
+import { put } from '@/utils/http'
+
+export default {
+  name: 'userTable',
+  mixins: [table],
+  data () {
+    return {
+      tableTitle: [ // 原始table列
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80,
+          sortable: 'custom'
+        }, {
+          label: this.$t('config.user.name'),
+          prop: 'name',
+          show: true,
+          width: 150,
+          sortable: 'custom'
+        }, {
+          label: this.$t('config.user.username'),
+          prop: 'username',
+          show: true,
+          width: 150
+        }, {
+          label: this.$t('config.user.roles'),
+          prop: 'roles',
+          show: true,
+          width: 150
+        }, {
+          label: 'E-mail',
+          prop: 'email',
+          show: true,
+          minWidth: 150
+        }, {
+          label: this.$t('config.user.lastLoginTime'),
+          prop: 'lastLoginTime',
+          show: true,
+          width: 200
+        }, {
+          label: this.$t('config.user.lastLoginIp'),
+          prop: 'lastLoginIp',
+          show: true,
+          width: 150
+        }, {
+          label: this.$t('config.user.source'),
+          prop: 'source',
+          show: true,
+          width: 150
+        }, {
+          label: this.$t('config.user.enable'),
+          prop: 'status',
+          show: true,
+          width: 100
+        }
+      ]
+    }
+  },
+  methods: {
+    statusChange (user) {
+      if (user.roles) {
+        user.roleIds = user.roles.map(t => t.id)
+      }
+      put(this.url, user).then(response => {
+        if (response.code === 200) {
+          this.rightBox.show = false
+          this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+        } else {
+          this.$message.error(response.msg)
+        }
+        this.$emit('reload')
+      })
+    }
+  }
+}
+</script>