gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
刘洪洪
2023-05-25 18:31:26 +08:00
parent f8db51ea6a
commit 0b0501db4a
6 changed files with 190 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/assets/css/components/components/table/common.scss
View File

@@ -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;
}
}
}

130
src/components/table/ColumnCustomize.vue
View File

@@ -1,39 +1,59 @@
<template>
<div class="pop-custom" v-ele-click-outside="esc">
<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;">
<!--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="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>
<transition-group name="dragTabs" class="list" tag="ul" ref="tabs">
<li v-for="(item, index) in custom"
:key="item.label"
class="list-item"
@dragenter="dragenter($event, index)"
@dragover="dragover($event, index)"
@dragstart="dragstart(index)"
:draggable="!item.sortable"
>
<i class="cn-icon-sort cn-icon icon-drag" :key="item.label"></i>
<el-checkbox
@change="tabChange(index)"
: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 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)">
<span class="top-tool-btn-txt">{{$t('overall.clear')}}</span>
</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)">
<span class="top-tool-btn-txt">{{$t('overall.all')}}</span>
</el-button>
<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">
<span class="top-tool-btn-txt">{{$t('overall.cancel')}}</span>
</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">
<span class="top-tool-btn-txt top-tool-btn-save">{{$t('overall.save')}}</span>
</el-button>
</div>
</div>
<!-- </div>-->
<!-- </div>-->
<!-- <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)">-->
<!-- <span class="top-tool-btn-txt">{{$t('overall.clear')}}</span>-->
<!-- </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)">-->
<!-- <span class="top-tool-btn-txt">{{$t('overall.all')}}</span>-->
<!-- </el-button>-->
<!-- <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">-->
<!-- <span class="top-tool-btn-txt">{{$t('overall.cancel')}}</span>-->
<!-- </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">-->
<!-- <span class="top-tool-btn-txt top-tool-btn-save">{{$t('overall.save')}}</span>-->
<!-- </el-button>-->
<!-- </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,
JSON.stringify(this.custom))
this.esc()
localStorage.setItem(storageKey.tableTitle + '-' + localStorage.getItem(storageKey.username) + '-' + this.tableId, JSON.stringify(this.custom))
// this.esc()
}
},
computed: {

4
src/components/table/administration/OperationLogTable.vue
View File

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

21
src/components/table/administration/RoleTable.vue
View File

@@ -16,8 +16,8 @@
width="55">
</el-table-column>
<el-table-column
v-for="item in customTableTitles"
:key="item.prop"
v-for="(item, index) in customTableTitles"
: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
})
}
}
}
}
}

16
src/components/table/administration/UserTable.vue
View File

@@ -17,8 +17,8 @@
width="55">
</el-table-column>
<el-table-column
v-for="item in customTableTitles"
:key="item.prop"
v-for="(item, index) in customTableTitles"
:key="item.prop+index"
:fixed="item.fixed"
:label="item.label"
:min-width="`${item.minWidth}`"
@@ -51,12 +51,12 @@
</template>
<template v-else-if="item.prop === 'status'">
<el-switch
v-if="scope.row.id"
v-model="scope.row.status"
active-value="1"
:disabled="(scope.row.username === loginName) || (scope.row.username==='admin' && scope.row.id==1) "
inactive-value="0"
@change="()=>{statusChange(scope.row)}">
v-if="scope.row.id"
v-model="scope.row.status"
active-value="1"
:disabled="(scope.row.username === loginName) || (scope.row.username==='admin' && scope.row.id==1) "
inactive-value="0"
@change="()=>{statusChange(scope.row)}">
</el-switch>
</template>
<span v-else>{{scope.row[item.prop]}}</span>

22
src/mixins/data-list.js
View File

@@ -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) => { // 修复切换中英文的问题
if (localStorageTableTitle[index]) {
item.show = localStorageTableTitle[index].show
// this.tools.customTableTitle = this.$refs.dataTable.tableTitle.map((item, index) => { // 修复切换中英文的问题
// if (localStorageTableTitle[index]) {
// 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)