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

CN-926 列表页样式改版

Browse Source
This commit is contained in:
hyx
2023-03-10 20:50:54 +08:00
parent 8f1adef30d
commit 64a6eac4a7
15 changed files with 289 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/assets/css/common/table-common.scss
View File

@@ -14,7 +14,7 @@
z-index: 0;
}
.main-container {
padding: 10px;
padding: 0px;
height: 100%;
background-color: #f6f6f6;
&>div {
@@ -36,7 +36,7 @@
align-items : center;
position: relative;
justify-content: space-between;
padding: 14px 20px;
padding: 12px 20px;
&.top-tools--sub {
align-items: center;
@@ -50,6 +50,12 @@
.top-tool-btn {
border-left: none;
}
.top-tool-btn--search:hover {
border-left: none !important;
}
.top-tool-btn--search:focus {
border-left: none !important;
}
}
.top-tool-right {
@@ -74,17 +80,28 @@
}
.top-tool-btn {
cursor: pointer;
height: 33px;
width: 36px;
height: 28px;
width: 72px;
border: 1px solid $--border-color-primary;
outline: none;
border-radius: $--button-border-radius;
background-color: $--button-gray-background-color;
transition: background-color linear .1s;
font-size:12px;
font-weight: 500;
font-family: NotoSansHans-Medium !important;
i {
font-size: 14px;
color: $--button-gray-color;
color: #575757;
margin-right:4px;
}
}
.top-tool-btn:disabled {
cursor: not-allowed;
opacity: 0.66;
i {
}
}
@@ -94,13 +111,14 @@
color: #666;
}
.top-tool-btn:hover:not(.cn-btn-disabled) {
border: 1px solid $--border-color-primary;
background-color: $--button-gray-hover-background-color;
}
.top-tool-btn:focus:not(.cn-btn-disabled), .top-tool-btn.is-focus {
background-color: $--button-gray-hover-background-color;
border: 1px solid $--color-primary !important;
background-color: $--button-gray-active-background-color;
border: 1px solid $--border-color-primary;
i {
color: $--button-gray-active-color;
color: #575757;
}
}
.top-tool-btn--delete.top-tool-btn:focus:not(.cn-btn-disabled) {
@@ -111,6 +129,56 @@
color: #F0745A;
}
}
.top-tool-btn--create {
background-color: #38ACD2 !important;
border-color: #2E88A6 !important;
color:#FFFFFF;
i {
color: #FFFFFF;
}
}
.top-tool-btn--create:hover {
background-color: #57B8D9 !important;
border-color: #2E88A6 !important;
color:#FFFFFF;
i {
color: #FFFFFF;
}
}
.top-tool-btn--create:focus {
background-color: #31A5CD !important;
border-color: #2E88A6 !important;
color:#FFFFFF !important;
i {
color: #FFFFFF !important;
}
}
.top-tool-btn--create:disabled {
opacity: 0.66;
background-color: #38ACD2 !important;
border-color: #2E88A6 !important;
color:#FFFFFF;
i {
color: #FFFFFF;
}
}
.btn-customize {
color:$blue;
font-size: 12px;
.icon-gear{
color:#2C72C6;
width:12px;
height:12px;
margin-right:2px;
font-size:12px;
}
}
.btn-customize:hover {
cursor:pointer;
}
.top-tool-btn--dropdown {
position: relative;
width: auto;
@@ -130,6 +198,7 @@
width: calc(100% - 40px);
border: 1px solid $--right-box-border-color;
border-bottom: none;
border-radius:4px;
.caret-wrapper {
height: 23px;
@@ -152,7 +221,8 @@
th {
border-color: $--right-box-border-color;
padding: 8px 0;
background: #F9F9F9;
background: #FFF;
border-right:0px;
}
.el-table__header th:first-of-type {
border-left: none;

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

@@ -78,12 +78,28 @@
border-radius: 2px;
background-color: #F9F9F9;
transition: background-color linear .1s;
padding-left:10px;
}
.list-page .top-tools .top-tool-btn--search{
width:28px !important;
height:28px !important;
padding:unset !important;
i {
font-size: 14px;
color: #575757;
margin-right:unset !important;
}
}
.list-page {
.el-input--small{
width: 214px !important;
line-height: 27px;
}
.el-input--small .el-input__inner {
height: 33px;
line-height: 32px;
border-radius: 0px;
height: 28px;
border-radius: 2px 0px 0px 2px;
}
}

13
src/assets/css/components/views/setting/knowledgeBase.scss
View File

@@ -7,6 +7,19 @@
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
border-radius: 12px;
}
.top-title {
font-family: NotoSansHans-Black;
font-size: 24px;
color: #353636;
font-weight: 900;
line-height: 24px;
display: flex;
align-items: center;
padding-bottom: 8px;
padding-top: 20px;
margin-left:20px;
}
}
.edit-knowledge-base {
height: 100%;

6
src/assets/css/themes/theme-dark.scss
View File

@@ -31,12 +31,12 @@ $--button-primary-background-color: $--color-primary; // 普通按钮背景色
$--button-hover-tint-percent: 20%; // 非灰色按钮在鼠标hover时背景色变浅的幅度
$--button-active-shade-percent: 0; // 非灰色按钮在focus时背景色变深的幅度
$--button-gray-color: #666; // 灰色按钮字色
$--button-gray-color: #353636; // 灰色按钮字色
$--button-gray-hover-color: $--button-gray-color; // 灰色按钮hover字色
$--button-gray-active-color: $--color-primary; // 灰色按钮focus字色
$--button-gray-background-color: #F9F9F9; // 灰色按钮背景色
$--button-gray-hover-background-color: #FFF; // 灰色按钮hover背景色
$--button-gray-active-background-color: $--button-gray-hover-background-color; // 灰色按钮focus背景色
$--button-gray-hover-background-color: #EBF1F4; // 灰色按钮hover背景色
$--button-gray-active-background-color: #E0E7EA; // 灰色按钮focus背景色
$--button-gray-border-color: $--border-color-primary; // 灰色按钮边框色
$--button-gray-hover-border-color: $--button-gray-border-color; // 灰色按钮hover边框色
$--button-gray-active-border-color-tint-percent: 30%; // 灰色按钮在focus时边框色相对于主题色变浅的幅度

6
src/assets/css/themes/theme-light.scss
View File

@@ -31,12 +31,12 @@ $--button-primary-background-color: $--color-primary; // 普通按钮背景色
$--button-hover-tint-percent: 20%; // 非灰色按钮在鼠标hover时背景色变浅的幅度
$--button-active-shade-percent: 0; // 非灰色按钮在focus时背景色变深的幅度
$--button-gray-color: #666; // 灰色按钮字色
$--button-gray-color: #353636; // 灰色按钮字色
$--button-gray-hover-color: $--button-gray-color; // 灰色按钮hover字色
$--button-gray-active-color: $--color-primary; // 灰色按钮focus字色
$--button-gray-background-color: #F9F9F9; // 灰色按钮背景色
$--button-gray-hover-background-color: #FFF; // 灰色按钮hover背景色
$--button-gray-active-background-color: $--button-gray-hover-background-color; // 灰色按钮focus背景色
$--button-gray-hover-background-color: #EBF1F4; // 灰色按钮hover背景色
$--button-gray-active-background-color: #E0E7EA; // 灰色按钮focus背景色
$--button-gray-border-color: $--border-color-primary; // 灰色按钮边框色
$--button-gray-hover-border-color: $--button-gray-border-color; // 灰色按钮hover边框色
$--button-gray-active-border-color-tint-percent: 30%; // 灰色按钮在focus时边框色相对于主题色变浅的幅度

19
src/components/table/CnDataList.vue
View File

@@ -7,23 +7,24 @@
<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">
<!-- <el-input v-model="keyWord" value="keyWord"></el-input>
<el-button @click="onSearch" icon="el-icon-search" type="info" size="mini" style="margin-right: 10px"></el-button>-->
<div v-if="showLayout.indexOf('search') > -1" class="top-tool-search margin-r-20">
<div style="display: flex">
<el-input v-model="keyWord" size="small" @keyup.enter="onSearch"></el-input>
<!-- <el-button icon="el-icon-search" @click="onSearch" size="small"></el-button>-->
<button class="top-tool-btn" style="border-radius: 0" @click="onSearch">
<!-- <el-button icon="el-icon-search" @click="onSearch" size="small"></el-button>-->
<button class="top-tool-btn top-tool-btn--search" style="border-radius: 0 2px 2px 0 !important;" @click="onSearch">
<i class="el-icon-search"></i>
</button>
</div>
</div>
</div>
<div class="top-tool-right">
<!-- <el-input v-model="keyWord" value="keyWord"></el-input>
<el-button @click="onSearch" icon="el-icon-search" type="info" size="mini" style="margin-right: 10px"></el-button>-->
<slot name="top-tool-right"></slot>
<button v-if="showLayout.indexOf('elementSet') > -1" class="top-tool-btn" @click="tools.showCustomTableTitle = true">
<i class="cn-icon-gear cn-icon"></i>
</button>
<div v-if="showLayout.indexOf('elementSet') > -1" class="btn-customize" @click="tools.showCustomTableTitle = true">
<i class="cn-icon-gear cn-icon icon-gear"></i> <span> {{$t('network.customize')}}</span>
</div>
</div>
</div>
<div class="cn-table">

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

@@ -47,29 +47,6 @@
<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="cn-icon cn-icon-edit"></i></button>
<el-dropdown size="medium" trigger="hover" @command="tableOperation">
<div class="table-operation-item table-operation-item--more">
<i class="cn-icon cn-icon-more-arrow-down"></i>
</div>
<template #dropdown>
<el-dropdown-menu >
<el-dropdown-item :command="['delete', scope.row]" :disabled="scope.row.id === 1"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</template>
</el-table-column>
</el-table>
</template>

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

@@ -62,29 +62,6 @@
<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="cn-icon cn-icon-edit"></i></button>
<el-dropdown size="medium" trigger="hover" @command="tableOperation">
<div class="table-operation-item table-operation-item--more">
<i class="cn-icon cn-icon-more-arrow-down"></i>
</div>
<template #dropdown>
<el-dropdown-menu >
<el-dropdown-item :command="['delete', scope.row]" :disabled="scope.row.id === 1"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</template>
</el-table-column>
</el-table>
</template>

30
src/components/table/report/ReportTable.vue
View File

@@ -188,22 +188,6 @@
<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="cn-icon cn-icon-bianji"></i></button>
<button class="table-operation-item" @click="tableOperation(['delete', scope.row])"><i
class="cn-icon cn-icon-shanchu"></i></button>
</div>
</template>
</el-table-column>
</el-table>
<div class="table-operation-all">
<el-checkbox v-model="checkboxAll" :indeterminate="isIndeterminate" @change="selectAll(tableData)"></el-checkbox>
@@ -308,6 +292,7 @@ export default {
loadingTableId: '',
loadingPreviewId: '',
downDataList: [],
disableEdit:false,//编辑按钮是否不可用，当选择多条记录的时候你，编辑按钮不可用
// pageObj: {
// pageNo: 1,
// pageSize: 20,
@@ -556,6 +541,12 @@ export default {
})
// this.selectIds = selectIds
}
this.batchDeleteObjs = objs
if(objs.length > 1) {
this.disableEdit = true
}else {
this.disableEdit = false
}
},
/**
* 全选按钮
@@ -574,6 +565,13 @@ export default {
this.$refs.dataTable.clearSelection()
}
this.batchDeleteObjs = objs
if(objs.length > 1) {
this.disableEdit = true
}else {
this.disableEdit = false
}
// this.selectIds = selectIds
},
/**

23
src/components/table/setting/KnowledgeBaseTable.vue
View File

@@ -66,29 +66,6 @@
<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="cn-icon cn-icon-edit"></i></button>-->
<el-dropdown size="medium" trigger="hover" @command="tableOperation">
<div class="table-operation-item table-operation-item--more">
<i class="cn-icon cn-icon-more-arrow-down"></i>
</div>
<template #dropdown>
<el-dropdown-menu >
<el-dropdown-item :command="['delete', scope.row]" :disabled="scope.row.id === 1"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</template>
</el-table-column>
</el-table>
</template>

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

@@ -37,6 +37,7 @@ export default {
tableData: [],
scrollbarWrap: null,
delFlag: false,
disableEdit:false,//编辑按钮是否不可用，当选择多条记录的时候你，编辑按钮不可用
operationWidth: '165' // 操作列宽
}
},
@@ -74,6 +75,11 @@ export default {
},
selectionChange (objs) {
this.batchDeleteObjs = objs
if(this.batchDeleteObjs.length > 1) {
this.disableEdit = true
}else {
this.disableEdit = false
}
},
getTableData (params) {
if (params) {
@@ -115,6 +121,39 @@ export default {
})
})
},
delBatch () {
let ids = []
if(this.batchDeleteObjs && this.batchDeleteObjs.length > 0){
this.batchDeleteObjs.forEach(item =>{
ids.push(item.id)
})
}
if(ids.length === 0){
this.$alert(this.$t('tip.pleaseSelect'),{
confirmButtonText: this.$t('tip.yes'),
type:'warning'
})
}else {
this.$confirm(this.$t('tip.confirmDelete'), {
confirmButtonText: this.$t('tip.yes'),
cancelButtonText: this.$t('tip.no'),
type: 'warning'
}).then(() => {
this.tools.loading = true
axios.delete(this.url + '?ids=' + ids).then(response => {
if (response.data.code === 200) {
this.delFlag = true
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
this.getTableData()
} else {
this.$message.error(response.data.message)
}
}).finally(() => {
this.tools.loading = false
})
})
}
},
newObject () {
return JSON.parse(JSON.stringify(this.blankObject))
},
@@ -153,6 +192,21 @@ export default {
}
})
},
editSelectRecord(){
if(this.batchDeleteObjs.length === 0){
this.$alert(this.$t('tip.pleaseSelectForEdit'),{
confirmButtonText: this.$t('tip.yes'),
type:'warning'
})
}else {
get(`${this.url}/${this.batchDeleteObjs[0].id}`).then(response => {
if (response.code === 200) {
this.object = response.data
this.rightBox.show = true
}
})
}
},
copy (u) {
this.object = { ...u, name: 'Copy from ' + u.name, id: '' }
this.rightBox.show = true

41
src/views/administration/Roles.vue
View File

@@ -9,11 +9,23 @@
:layout="['columnCustomize','elementSet','search']"
@search="search"
>
<template v-slot:top-tool-right>
<button id="roles-add" :title="$t('overall.createRole')" class="top-tool-btn margin-r-10"
type="button" @click="add">
<i class="cn-icon-add cn-icon"></i>
<template v-slot:top-tool-left>
<button id="roles-add" class="top-tool-btn margin-r-10 top-tool-btn--create"
@click="add">
<i class="cn-icon-xinjian cn-icon"></i>
<span>{{$t('overall.create')}}</span>
</button>
<button id="roles-edit" class="top-tool-btn margin-r-10" :disabled="disableEdit"
@click="edit">
<i class="cn-icon-edit cn-icon"></i>
<span>{{$t('overall.edit')}}</span>
</button>
<button id="roles-delete" class="top-tool-btn margin-r-10"
@click="delBatch">
<i class="cn-icon-delete cn-icon"></i>
<span>{{$t('overall.delete')}}</span>
</button>
<delete-button id="role-list-batch-delete" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
</template>
<template v-slot:default>
@@ -78,13 +90,20 @@ export default {
}
},
methods: {
edit (u) {
get(`${this.url}`, { ids: u.id }).then(response => {
if (response.code === 200) {
this.object = response.data.list[0]
this.rightBox.show = true
}
})
edit () {
if(this.batchDeleteObjs.length === 0){
this.$alert(this.$t('tip.pleaseSelectForEdit'),{
confirmButtonText: this.$t('tip.yes'),
type:'warning'
})
}else {
get(`${this.url}`, { ids: this.batchDeleteObjs[0].id }).then(response => {
if (response.code === 200) {
this.object = response.data.list[0]
this.rightBox.show = true
}
})
}
}
}
}

23
src/views/administration/User.vue
View File

@@ -9,14 +9,21 @@
:layout="['columnCustomize','elementSet','search']"
@search="search"
>
<template #top-tool-right>
<button
id="account-add"
class="top-tool-btn margin-r-10"
type="button"
@click="add"
>
<i class="cn-icon-add cn-icon"/>
<template #top-tool-left>
<button id="account-add" class="top-tool-btn margin-r-10 top-tool-btn--create"
@click="add">
<i class="cn-icon-xinjian cn-icon"></i>
<span>{{$t('overall.create')}}</span>
</button>
<button id="account-edit" class="top-tool-btn margin-r-10" :disabled="disableEdit"
@click="editSelectRecord">
<i class="cn-icon-edit cn-icon"></i>
<span>{{$t('overall.edit')}}</span>
</button>
<button id="account-delete" class="top-tool-btn margin-r-10"
@click="delBatch">
<i class="cn-icon-delete cn-icon"></i>
<span>{{$t('overall.delete')}}</span>
</button>
</template>
<template #default>

36
src/views/report/Report.vue
View File

@@ -22,14 +22,21 @@
:layout="['search']"
@search="search"
>
<template #top-tool-right>
<button
id="account-add"
class="top-tool-btn"
type="button"
@click="add"
>
<i class="cn-icon-add cn-icon"/>
<template #top-tool-left>
<button id="account-add" class="top-tool-btn margin-r-10 top-tool-btn--create"
@click="add">
<i class="cn-icon-xinjian cn-icon"></i>
<span>{{$t('overall.create')}}</span>
</button>
<button id="report-edit" class="top-tool-btn margin-r-10" :disabled="disableEdit"
@click="editReport">
<i class="cn-icon-edit cn-icon"></i>
<span>{{$t('overall.edit')}}</span>
</button>
<button id="report-delete" class="top-tool-btn margin-r-10"
@click="delBatch">
<i class="cn-icon-delete cn-icon"></i>
<span>{{$t('overall.delete')}}</span>
</button>
</template>
<template #default>
@@ -287,6 +294,19 @@ export default {
this.object = u
this.rightBox.show = true
},
editReport () {
if(this.batchDeleteObjs.length === 0){
this.$alert(this.$t('tip.pleaseSelectForEdit'),{
confirmButtonText: this.$t('tip.yes'),
type:'warning'
})
}else {
let curRecord = this.batchDeleteObjs[0]
this.initConfig(curRecord)
this.object = curRecord
this.rightBox.show = true
}
},
initConfig (u) {
if (!u.config) {
u.config = {

24
src/views/setting/KnowledgeBase.vue
View File

@@ -1,5 +1,8 @@
<template>
<div style="height: 100%;">
<div style="height: 100%;" class="knowledge-base">
<div class="top-title">
{{$t('overall.knowledgeBase')}}
</div>
<cn-data-list
ref="dataList"
:tableId="tableId"
@@ -9,10 +12,23 @@
:layout="['columnCustomize','elementSet','search']"
@search="search"
>
<template v-slot:top-tool-right>
<button id="knowledge-base-add" :title="$t('knowledgeBase.createKnowledgeBase')" class="top-tool-btn margin-r-10"
<template v-slot:top-tool-left>
<button id="knowledge-base-add" :title="$t('knowledgeBase.createKnowledgeBase')" class="top-tool-btn margin-r-10 top-tool-btn--create"
@click="jumpToCreatePage">
<i class="cn-icon-add cn-icon"></i>
<i class="cn-icon-xinjian cn-icon"></i>
<span>{{$t('overall.create')}}</span>
</button>
<!--
<button id="knowledge-base-edit" :title="$t('knowledgeBase.editKnowledgeBase')" class="top-tool-btn margin-r-10" :disabled="disableEdit"
@click="edit">
<i class="cn-icon-edit cn-icon" ></i>
<span>{{$t('overall.edit')}}</span>
</button>
-->
<button id="knowledge-base-delete" :title="$t('knowledgeBase.deleteKnowledgeBase')" class="top-tool-btn margin-r-10"
@click="delBatch">
<i class="cn-icon-delete cn-icon"></i>
<span>{{$t('overall.delete')}}</span>
</button>
</template>
<template v-slot:default>