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

CN-1612 feat: 部分css重构内容: Administration下的界面、tabs和分页

Browse Source
This commit is contained in:
刘洪洪
2024-04-08 11:06:28 +08:00
parent 8e5a45bfcf
commit 26e3b7a4eb
20 changed files with 308 additions and 383 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/assets/css/common/right-box-common.scss
View File

@@ -73,10 +73,6 @@ $border-radius-small: 2px;
} }
} }
.container__form {
}
.el-form-item__content { .el-form-item__content {
.input-box { .input-box {
.el-textarea { .el-textarea {
@@ -369,7 +365,6 @@ $border-radius-small: 2px;
.el-switch { .el-switch {
--el-switch-on-color: #699DC9; --el-switch-on-color: #699DC9;
--el-switch-off-color: #C0CEDB;
} }
.el-textarea__inner { .el-textarea__inner {

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

@@ -54,6 +54,10 @@
} }
.top-tool-search { .top-tool-search {
.top-tool-search__display {
display: flex;
}
.top-tool-btn { .top-tool-btn {
border-left: none; border-left: none;
} }
@@ -73,6 +77,10 @@
} }
} }
.top-tool-btn__border {
border-radius: 0 2px 2px 0 !important;
}
.top-tool-btn--search:hover { .top-tool-btn--search:hover {
border-left: none !important; border-left: none !important;
} }
@@ -103,6 +111,7 @@
.top-tool-left { .top-tool-left {
display: flex; display: flex;
min-width: 300px;
} }
.top-tool-btn-group { .top-tool-btn-group {
@@ -265,40 +274,6 @@
} }
} }
/*.operation-dropdown-text {
display: inline-block;
font-size: 13px;
}
.search-box {
padding: 0 20px 20px;
}
.click-search-dropdown {
width: calc(100% - 300px) !important;
left: 270px !important;
margin-top: -3px !important;
box-shadow: none;
border-radius: 0;
border-color: #c7c7c7;
.popper__arrow {
display: none;
}
.el-cascader-menu__list {
display: flex;
flex-wrap: wrap;
width: 100%;
max-height: 120px;
}
}
.el-popper.el-cascader__dropdown.click-search-dropdown::after {
content: '';
position: absolute;
top: -1px;
height: 1px;
background-color: white;
}*/
.col-resize-area { .col-resize-area {
position: absolute; position: absolute;
top: 0; top: 0;
@@ -341,10 +316,10 @@
} }
.padding-r-20 { .padding-r-20 {
padding-right: 20px padding-right: 20px;
} }
.tooltip-column-name { .tooltip-column-name {
color: #aeb0b9; color: var(--el-color-info-light-3);
height: 40px; height: 40px;
} }

22
src/assets/css/components/components/common/chart-tab.scss
View File

@@ -5,10 +5,11 @@
position: absolute; position: absolute;
height: 3px; height: 3px;
top: 0; top: 0;
background-color: #046EC9; background-color: var(--el-color-primary);
border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;
transition: all linear .2s; transition: all linear var(--el-transition-duration-fast);
} }
.el-tabs.el-tabs--border-card { .el-tabs.el-tabs--border-card {
position: absolute; position: absolute;
top: 3px; top: 3px;
@@ -16,22 +17,24 @@
border: none; border: none;
box-shadow: none; box-shadow: none;
&>.el-tabs__header { & > .el-tabs__header {
//background-color: white; background-color: var(--el-fill-color-blank);
background-color: $--select-bg-color-1; border-color: var(--el-border-color-light);
border-color: $--border-color-2;
.el-tabs__nav-wrap { .el-tabs__nav-wrap {
padding-left: 27px; padding-left: 27px;
} }
.el-tabs__item:first-child { .el-tabs__item:first-child {
margin-left: 0; margin-left: 0;
} }
} }
.el-tabs__content { .el-tabs__content {
display: none; display: none;
} }
} }
.el-tabs__nav { .el-tabs__nav {
z-index: 1; z-index: 1;
display: inline-block; display: inline-block;
@@ -42,7 +45,7 @@
line-height: 35px; line-height: 35px;
.chart-tabs__label { .chart-tabs__label {
color: $--text-color-1; color: var(--el-text-color-primary);
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
box-sizing: border-box; box-sizing: border-box;
@@ -53,12 +56,13 @@
font-weight: normal; font-weight: normal;
} }
} }
&.is-active { &.is-active {
.chart-tabs__label { .chart-tabs__label {
color: $--text-color-1; color: var(--el-text-color-primary);
i { i {
color: #046EC9; color: var(--el-color-primary);
} }
} }
} }

107
src/assets/css/components/components/common/pagination.scss
View File

@@ -1,125 +1,56 @@
//.pagination {
// padding-top: 8px;
// text-align: center;
// max-height: 42px;
//
// .el-pagination {
// max-height: 42px;
// padding-right: 0;
// }
// .pagination-size-select .el-input--small .el-input__inner{
// height: 20px;
// line-height: 20px;
// margin: 5px 0 5px 5px;
// }
// .el-pager li, .el-pagination .btn-next, .el-pagination .btn-prev {
// margin:5px 5px 0 5px;
// padding: 0 4px;
// font-size: 13px;
// min-width: 20px;
// height: 20px;
// line-height: 20px;
// text-align: center;
// border: 1px solid rgba(154,154,154,0.20);
// border-radius: 2px;
// }
// .el-pagination .el-pager li.btn-quicknext, .el-pager li.btn-quickprev {
// line-height: 20px;
// }
// .el-pagination .el-pager .more::before {
// line-height: 20px;
// }
// .el-pagination .el-pager .more {
// background-color: $--content-right-background-color;
// }
// .btn-next, .btn-prev {
// background-color: $--content-right-background-color !important;
// }
// input {
// background-color: $--content-right-background-color !important;
// }
// .el-pager li.number {
// color: #666666;
// letter-spacing: 0;
// font-weight:normal;
// background-color: $--content-right-background-color;
// }
// .el-pager li.number.active {
// color: #FFFFFF;
// letter-spacing: 0;
// }
//
// .el-pagination .el-pager li.active {
// background-color: $--color-primary;
// border-radius: 2px;
// }
// .el-pager li:hover, .el-pagination .btn-next:hover, .el-pagination .btn-prev:hover {
// color: #666666;
// letter-spacing: 0;
// font-weight:normal;
// }
// .el-pagination__sizes .el-input .el-input__inner, .el-pagination__editor.el-input .el-input__inner {
// height: 20px;
// border-color: rgba(154,154,154,0.20);
// }
// .el-pagination__sizes .el-input .el-input__inner:hover {
// border-color: rgba(154,154,154,0.20);
// }
//}
//.entity__pagination .pagination {
// .el-pager li.more + li {
// display: none;
// }
// .el-pager li.number:not(:last-of-type) {
// display: inline-block !important;
// }
//}
.pagination { .pagination {
//max-height: 42px;
padding-top: 8px; padding-top: 8px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.el-pagination__total { .el-pagination__total {
margin-right: 10px; margin-right: 10px;
font-size: 13px; font-size: 13px;
} }
.el-pager li, .el-pagination .btn-next, .el-pagination .btn-prev { .el-pager li, .el-pagination .btn-next, .el-pagination .btn-prev {
margin:5px 5px 0 5px; margin: 5px 5px 0 5px;
padding: 0 4px; padding: 0 4px;
font-size: 13px; font-size: 13px;
min-width: 20px; min-width: 20px;
height: 20px; height: 20px;
line-height: 20px; line-height: 20px;
text-align: center; text-align: center;
border: 1px solid rgba(154,154,154,0.20); border: 1px solid rgba(154, 154, 154, 0.20);
border-radius: 2px; border-radius: 2px;
} }
.el-pagination .btn-prev { .el-pagination .btn-prev {
background-color: $--content-right-background-color !important; background-color: var(--el-bg-color-page) !important;
} }
.el-pager li:hover, .el-pagination .btn-next:hover, .el-pagination .btn-prev:hover { .el-pager li:hover, .el-pagination .btn-next:hover, .el-pagination .btn-prev:hover {
color: #666666; color: var(--el-text-color-regular);
letter-spacing: 0; letter-spacing: 0;
font-weight:normal; font-weight: normal;
} }
.btn-next, .btn-prev { .btn-next, .btn-prev {
background-color: $--content-right-background-color !important; background-color: var(--el-bg-color-page) !important;
} }
.el-pager li.is-active { .el-pager li.is-active {
background-color: #699dc9; background-color: var(--el-color-business);
color: #fff; color: var(--el-color-white);
font-weight: 500; font-weight: 500;
} }
.el-pager li, .el-pagination .btn-next, .el-pagination .btn-prev { .el-pager li, .el-pagination .btn-next, .el-pagination .btn-prev {
margin-top: 0; margin-top: 0;
} }
.el-select { .el-select {
width: 100px !important; width: 100px !important;
margin-left: 3px; margin-left: 3px;
} }
.pagination-size-select .el-select__wrapper{
.pagination-size-select .el-select__wrapper {
width: 100px; width: 100px;
height: 20px; height: 20px;
line-height: 20px; line-height: 20px;
@@ -129,11 +60,11 @@
font-size: 12px; font-size: 12px;
border-radius: 2px; border-radius: 2px;
} }
.el-select__suffix { .el-select__suffix {
svg { svg {
width: 12px; width: 12px;
height: 12px; height: 12px;
} }
} }
//el-icon el-select__caret el-select__icon
} }

11
src/assets/css/components/views/administration/AdministrationTabs.scss
View File

@@ -2,6 +2,12 @@
.administration-tabs { .administration-tabs {
height: 18px; height: 18px;
} }
.administration__tabs {
width: 100%;
padding-bottom: 26px;
}
.administration-container { .administration-container {
height: calc(100% - 86px); height: calc(100% - 86px);
flex-direction: column; flex-direction: column;
@@ -10,10 +16,15 @@
.list-page { .list-page {
.main-container { .main-container {
padding: 0; padding: 0;
.cn-pagination { .cn-pagination {
height: 34px; height: 34px;
} }
} }
} }
.administration-container__body {
height: 100%;
}
} }
} }

51
src/assets/css/components/views/administration/Appearance.scss
View File

@@ -1,20 +1,24 @@
.appearance{ .appearance {
height: 100%; height: 100%;
display:flex; display: flex;
flex-direction:column; flex-direction: column;
.appearance-form { .appearance-form {
padding-top:40px; padding-top: 40px;
padding-left:100px; padding-left: 100px;
background-color: white; background-color: var(--el-fill-color-blank);
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
.el-form-item { .el-form-item {
margin-bottom: 27px; margin-bottom: 27px;
} }
.el-form-item__content { .el-form-item__content {
width: 600px; width: 600px;
.el-select__wrapper { .el-select__wrapper {
min-height: 32px !important; min-height: 32px !important;
line-height: 32px; line-height: 32px;
@@ -22,53 +26,66 @@
font-size: 13px; font-size: 13px;
} }
} }
.el-form--default.el-form--label-top .el-form-item .el-form-item__label { .el-form--default.el-form--label-top .el-form-item .el-form-item__label {
margin-bottom: 4px; margin-bottom: 4px;
} }
.el-input { .el-input {
width:600px; width: 600px;
} }
.el-form .el-form-item .el-form-item__label { .el-form .el-form-item .el-form-item__label {
padding-bottom: 6px; padding-bottom: 6px;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
} }
.appearance__option {
display: flex;
justify-content: space-between;
} }
}
.edit-appearance-base__footer { .edit-appearance-base__footer {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
height: 100px; height: 100px;
margin-top: 3px; margin-top: 3px;
padding-left:200px; padding-left: 200px;
.footer__btn { .footer__btn {
margin: 0 10px; margin: 0 10px;
height: 30px; height: 30px;
min-width: 74px; min-width: 74px;
padding: 0 15px; padding: 0 15px;
color: white; color: var(--el-color-white);
background-color: #38ACD2; background-color: var(--el-color-business);
border: none; border: none;
border-radius: 4px; border-radius: var(--el-border-radius-base);
outline: none; outline: none;
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
transition: background-color linear .2s, color linear .1s; transition: background-color linear var(--el-transition-duration-fast), color linear .1s;
} }
.footer__btn:hover:not(.footer__btn--disabled) { .footer__btn:hover:not(.footer__btn--disabled) {
background-color: lighten(#38ACD2, 10%); background-color: lighten(#38ACD2, 10%);
} }
.footer__btn--light { .footer__btn--light {
background-color: #F5F6F7; background-color: var(--el-fill-color-light);
border: 1px solid $--border-color-primary; border: 1px solid var(--el-color-info-light-7);
color: #333; color: var(--el-text-color-primary);
} }
.footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) { .footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) {
background-color: white; background-color: var(--el-fill-color-blank);
border-color: lighten(#38ACD2, 40%); border-color: lighten(#38ACD2, 40%);
color: #38ACD2; color: var(--el-color-business);
} }
.footer__btn--disabled { .footer__btn--disabled {
opacity: .6; opacity: .6;
cursor: default; cursor: default;

40
src/assets/css/components/views/administration/License.scss
View File

@@ -1,43 +1,50 @@
.license{ .license {
height: 100%; height: 100%;
.license-form { .license-form {
padding-top:40px; padding-top: 40px;
padding-left:100px; padding-left: 100px;
background-color: white; background-color: var(--el-fill-color-blank);
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
.license-file { .license-file {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 100%; height: 100%;
margin-top: 3px; margin-top: 3px;
.license__btn { .license__btn {
height: 30px; height: 30px;
min-width: 74px; min-width: 74px;
color: white; color: var(--el-color-white);
background-color: #38ACD2; background-color: var(--el-color-business);
border: none; border: none;
border-radius: 4px; border-radius: var(--el-border-radius-base);
outline: none; outline: none;
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
transition: background-color linear .2s, color linear .1s; transition: background-color linear var(--el-transition-duration-fast), color linear .1s;
} }
.license__btn:hover:not(.footer__btn--disabled) { .license__btn:hover:not(.footer__btn--disabled) {
background-color: lighten(#38ACD2, 10%); background-color: lighten(#38ACD2, 10%);
} }
.license__btn--light { .license__btn--light {
background-color: #F5F6F7; background-color: var(--el-fill-color-light);
border: 1px solid $--border-color-primary; border: 1px solid var(--el-color-info-light-7);
color: #333; color: var(--el-text-color-primary);
} }
.license__btn.license__btn--light:hover:not(.license__btn--disabled) { .license__btn.license__btn--light:hover:not(.license__btn--disabled) {
background-color: white; background-color: var(--el-fill-color-blank);
border-color: lighten(#38ACD2, 40%); border-color: lighten(#38ACD2, 40%);
color: #38ACD2; color: var(--el-color-business);
} }
.license__btn--disabled { .license__btn--disabled {
opacity: .6; opacity: .6;
cursor: default; cursor: default;
@@ -46,15 +53,16 @@
.el-form .el-form-item { .el-form .el-form-item {
margin-bottom: 0; margin-bottom: 0;
padding:4px 0; padding: 4px 0;
.el-form-item__label { .el-form-item__label {
color: #262626 !important; color: var(--el-text-color-primary) !important;
font-weight: bold; font-weight: bold;
font-size: 14px; font-size: 14px;
} }
.el-form-item__content { .el-form-item__content {
color: #262626 !important; color: var(--el-text-color-primary) !important;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
} }

15
src/assets/css/components/views/detections/detection-tools.scss
View File

@@ -1,4 +1,5 @@
$color-white: var(--el-color-white); $color-white: var(--el-color-white);
$color-create: var(el-color-business-dark-2);
.top-tools__left { .top-tools__left {
display: flex; display: flex;
@@ -49,18 +50,16 @@ $color-white: var(--el-color-white);
.top-tool-btn--delete.top-tool-btn:focus:not(.cn-btn-disabled) { .top-tool-btn--delete.top-tool-btn:focus:not(.cn-btn-disabled) {
background-color: var(--cn-bg-color-light); background-color: var(--cn-bg-color-light);
//border-color: #FFC4B9;
border-color: var(--el-color-danger-light-5); border-color: var(--el-color-danger-light-5);
i { i {
//color: #F0745A;
color: var(--el-color-danger); color: var(--el-color-danger);
} }
} }
.top-tool-btn--create { .top-tool-btn--create {
background-color: var(--el-color-business) !important; background-color: var(--el-color-business) !important;
border-color: #2E88A6 !important; border-color: $color-create !important;
color: $color-white; color: $color-white;
i { i {
@@ -69,8 +68,8 @@ $color-white: var(--el-color-white);
} }
.top-tool-btn--create:hover { .top-tool-btn--create:hover {
background-color: #57B8D9 !important; background-color: var(--el-color-business-light-2) !important;
border-color: #2E88A6 !important; border-color: $color-create !important;
color: $color-white; color: $color-white;
i { i {
@@ -79,8 +78,8 @@ $color-white: var(--el-color-white);
} }
.top-tool-btn--create:focus { .top-tool-btn--create:focus {
background-color: #31A5CD !important; background-color: var(--el-color-business) !important;
border-color: #2E88A6 !important; border-color: $color-create !important;
color: $color-white !important; color: $color-white !important;
i { i {
@@ -91,7 +90,7 @@ $color-white: var(--el-color-white);
.top-tool-btn--create:disabled { .top-tool-btn--create:disabled {
opacity: 0.66; opacity: 0.66;
background-color: var(--el-color-business) !important; background-color: var(--el-color-business) !important;
border-color: #2E88A6 !important; border-color: $color-create !important;
color: $color-white; color: $color-white;
i { i {

4
src/assets/css/components/views/report/report.scss
View File

@@ -35,10 +35,8 @@ $bg-color-dark: var(--el-border-color-dark);
} }
.cn-report-left-menu.cn-active { .cn-report-left-menu.cn-active {
//background: #F4FAFF; background: var(--el-color-business-light-9);
background: var(--el-color-primary-light-9);
border-radius: 2px; border-radius: 2px;
//color: #0091FF;
color: var(--el-color-business); color: var(--el-color-business);
} }
} }

1
src/components/common/Pagination.vue
View File

@@ -31,7 +31,6 @@ import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
import { ref } from 'vue' import { ref } from 'vue'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
import { parseInt } from 'lodash' import { parseInt } from 'lodash'
import ElConfigProvider from 'element-plus'
import cn from 'element-plus/lib/locale/lang/zh-cn' import cn from 'element-plus/lib/locale/lang/zh-cn'
import en from 'element-plus/lib/locale/lang/en' import en from 'element-plus/lib/locale/lang/en'

47
src/components/rightBox/settings/UserBox.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="right-box right-box-user"> <div class="right-box right-box-user">
<div class="right-box__header"> <div class="right-box__header">
<div class="header__title">{{editObject.id ? $t('config.user.editUser') : $t('config.user.createUser')}}</div> <div class="header__title">{{ editObject.id ? $t('config.user.editUser') : $t('config.user.createUser') }}</div>
<div class="header__operation"> <div class="header__operation">
<span v-cancel="{object: editObject, func: esc}"><i class="cn-icon cn-icon-close"></i></span> <span v-cancel="{object: editObject, func: esc}"><i class="cn-icon cn-icon-close"></i></span>
</div> </div>
@@ -11,12 +11,14 @@
<el-form ref="userForm" :model="editObject" :rules="editObject.id ? rules2 : rules" label-position="top" label-width="120px"> <el-form ref="userForm" :model="editObject" :rules="editObject.id ? rules2 : rules" label-position="top" label-width="120px">
<!--name--> <!--name-->
<el-form-item :label="$t('config.user.name')" prop="name"> <el-form-item :label="$t('config.user.name')" prop="name">
<el-input id="account-input-name" v-model="editObject.name" :disabled="editObject.username==='admin' && editObject.id === 1" <el-input id="account-input-name" v-model="editObject.name"
:disabled="editObject.username==='admin' && editObject.id === 1"
minlength="2" maxlength="64" placeholder="" show-word-limit size="small" type="text"></el-input> minlength="2" maxlength="64" placeholder="" show-word-limit size="small" type="text"></el-input>
</el-form-item> </el-form-item>
<!--username--> <!--username-->
<el-form-item :label="$t('config.user.username')" prop="username"> <el-form-item :label="$t('config.user.username')" prop="username">
<el-input id="account-input-username" v-model="editObject.username" :disabled="editObject.username==='admin' && editObject.id === 1" <el-input id="account-input-username" v-model="editObject.username"
:disabled="editObject.username==='admin' && editObject.id === 1"
minlength="2" maxlength="64" placeholder="" show-word-limit size="small" type="text"></el-input> minlength="2" maxlength="64" placeholder="" show-word-limit size="small" type="text"></el-input>
</el-form-item> </el-form-item>
<!--password--> <!--password-->
@@ -69,22 +71,6 @@
</template> </template>
</el-select> </el-select>
</el-form-item> </el-form-item>
<!--theme-->
<!-- <el-form-item :label="$t('config.user.theme')" prop="i18n">
<el-select id="account-input-roleIds"
v-model="editObject.theme"
class="right-box__select"
clearable
collapse-tags
placeholder=" "
popper-class="right-box-select-dropdown prevent-clickoutside"
size="small">
<template v-for="theme in themeData" :key="theme.value">
<el-option :label="theme.label" :value="theme.value"></el-option>
</template>
</el-select>
</el-form-item>-->
<!--enable-->
<el-form-item :label="$t('config.user.enable')"> <el-form-item :label="$t('config.user.enable')">
<el-switch <el-switch
id="account-input-status" id="account-input-status"
@@ -96,18 +82,17 @@
</el-form-item> </el-form-item>
<el-form-item v-if="editObject.id" :label="$t('config.user.createTime')"> <el-form-item v-if="editObject.id" :label="$t('config.user.createTime')">
<div class="right-box-form-content-txt">{{editObject.ctime}}</div> <div class="right-box-form-content-txt">{{ editObject.ctime }}</div>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
</div> </div>
<div class="right-box__footer"> <div class="right-box__footer">
<button id="asset-edit-cancel" v-cancel="{object: editObject, func: esc}" class="footer__btn footer__btn--light"> <button id="asset-edit-cancel" v-cancel="{object: editObject, func: esc}" class="footer__btn footer__btn--light">
<span>{{$t('overall.cancel')}}</span> <span>{{ $t('overall.cancel') }}</span>
</button> </button>
<button id="asset-edit-save" :class="{'footer__btn--disabled': blockOperation.save}" :disabled="blockOperation.save" class="footer__btn" @click="save"> <button id="asset-edit-save" :class="{'footer__btn--disabled': blockOperation.save}" :disabled="blockOperation.save" class="footer__btn" @click="save">
<span>{{$t('overall.save')}}</span> <span>{{ $t('overall.save') }}</span>
</button> </button>
</div> </div>
</div> </div>
@@ -241,7 +226,9 @@ export default {
} }
}, },
save () { save () {
if (this.blockOperation.save) { return } if (this.blockOperation.save) {
return
}
this.blockOperation.save = true this.blockOperation.save = true
this.$refs.userForm.validate((valid) => { this.$refs.userForm.validate((valid) => {
@@ -250,7 +237,11 @@ export default {
axios.put(this.url, this.editObject).then(res => { axios.put(this.url, this.editObject).then(res => {
this.blockOperation.save = false this.blockOperation.save = false
if (res.status === 200) { if (res.status === 200) {
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') }) this.$message({
duration: 2000,
type: 'success',
message: this.$t('tip.saveSuccess')
})
if (this.editObject.lang && this.editObject.id == localStorage.getItem(storageKey.userId)) { if (this.editObject.lang && this.editObject.id == localStorage.getItem(storageKey.userId)) {
const currentLang = localStorage.getItem(storageKey.language) const currentLang = localStorage.getItem(storageKey.language)
if (currentLang !== this.editObject.lang) { if (currentLang !== this.editObject.lang) {
@@ -271,7 +262,11 @@ export default {
axios.post(this.url, this.editObject).then(res => { axios.post(this.url, this.editObject).then(res => {
this.blockOperation.save = false this.blockOperation.save = false
if (res.status === 200) { if (res.status === 200) {
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') }) this.$message({
duration: 2000,
type: 'success',
message: this.$t('tip.saveSuccess')
})
this.esc(true) this.esc(true)
} else { } else {
this.$message.error(res.data.msg || res.data.message) this.$message.error(res.data.msg || res.data.message)

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

@@ -5,23 +5,18 @@
<div class="main-container"> <div class="main-container">
<!-- 顶部工具栏 --> <!-- 顶部工具栏 -->
<div class="top-tools"> <div class="top-tools">
<div class="top-tool-left" style="min-width: 300px"> <div class="top-tool-left">
<slot name="top-tool-left"></slot> <slot name="top-tool-left"></slot>
<div v-if="showLayout.indexOf('search') > -1" class="top-tool-search margin-r-20"> <div v-if="showLayout.indexOf('search') > -1" class="top-tool-search margin-r-20">
<div style="display: flex"> <div class="top-tool-search__display">
<el-input v-model="keyWord" size="small" @keyup.enter="onSearch"></el-input> <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 top-tool-btn--search top-tool-btn__border" @click="onSearch">
<button class="top-tool-btn top-tool-btn--search" style="border-radius: 0 2px 2px 0 !important;" @click="onSearch">
<el-icon><Search /></el-icon> <el-icon><Search /></el-icon>
<!--<i class="el-icon-search"></i>-->
</button> </button>
</div> </div>
</div> </div>
</div> </div>
<div class="top-tool-right"> <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="small" style="margin-right: 10px"></el-button>-->
<slot name="top-tool-right"></slot> <slot name="top-tool-right"></slot>
<div v-if="showLayout.indexOf('elementSet') > -1" class="btn-customize" @click="tools.showCustomTableTitle = true"> <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> <i class="cn-icon-gear cn-icon icon-gear"></i> <span> {{$t('network.customize')}}</span>

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

@@ -31,25 +31,25 @@
class="data-column" class="data-column"
> >
<template #header> <template #header>
<span class="data-column__span">{{item.label}}</span> <span class="data-column__span">{{ item.label }}</span>
<div class="col-resize-area"></div> <div class="col-resize-area"></div>
</template> </template>
<template #default="scope" :column="item"> <template #default="scope" :column="item">
<template v-if="item.prop === 'name'"> <template v-if="item.prop === 'name'">
<template v-if="scope.row.name"> <template v-if="scope.row.name">
<span>{{$t(scope.row.name)}}</span> <span>{{ $t(scope.row.name) }}</span>
</template> </template>
<template v-else-if="scope.row.i18n"> <template v-else-if="scope.row.i18n">
<span>{{scope.row.i18n}}</span> <span>{{ scope.row.i18n }}</span>
</template> </template>
<template v-else> <template v-else>
<span>-</span> <span>-</span>
</template> </template>
</template> </template>
<span v-else>{{scope.row[item.prop] || '-'}}</span> <span v-else>{{ scope.row[item.prop] || '-' }}</span>
</template> </template>
</el-table-column> </el-table-column>
<template v-slot:empty > <template v-slot:empty>
<div class="table-no-data" v-if="isNoData"> <div class="table-no-data" v-if="isNoData">
<div class="table-no-data__title">{{ $t('npm.noData') }}</div> <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
</div> </div>
@@ -59,6 +59,7 @@
<script> <script>
import table from '@/mixins/table' import table from '@/mixins/table'
export default { export default {
name: 'roleTable', name: 'roleTable',
mixins: [table], mixins: [table],

17
src/views/administration/Appearance.vue
View File

@@ -10,9 +10,9 @@
popper-class="right-box-select-dropdown right-box-select-report " popper-class="right-box-select-dropdown right-box-select-report "
size="small"> size="small">
<template v-for="dateFormat in dateFormatList" :key="dateFormat.id"> <template v-for="dateFormat in dateFormatList" :key="dateFormat.id">
<el-option :label="dateFormat.label" :value="dateFormat.value"> <el-option :label="dateFormat.label" :value="dateFormat.value" class="appearance__option">
<span style="float: left">{{ dateFormat.label }}</span> <span>{{ dateFormat.label }}</span>
<span style="float: right;">{{ dateFormat.example }}</span> <span>{{ dateFormat.example }}</span>
</el-option> </el-option>
</template> </template>
</el-select> </el-select>
@@ -40,7 +40,7 @@
<template v-for="timezone in timezoneList" :key="timezone.id"> <template v-for="timezone in timezoneList" :key="timezone.id">
<el-option :label="timezone.name" :value="timezone.name"> <el-option :label="timezone.name" :value="timezone.name">
<span style="float: left">{{ timezone.name }}</span> <span style="float: left">{{ timezone.name }}</span>
<span style="float: right;">{{ timezone.offset}}</span> <span style="float: right;">{{ timezone.offset }}</span>
</el-option> </el-option>
</template> </template>
</el-select> </el-select>
@@ -48,11 +48,16 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<div class="edit-appearance-base__footer"> <div class="edit-appearance-base__footer">
<button style="position: relative;" :class="{'footer__btn--disabled': blockOperation.save}" :disabled="blockOperation.save" class="footer__btn" @click="save" <button
style="position: relative;"
:class="{'footer__btn--disabled': blockOperation.save}"
:disabled="blockOperation.save"
class="footer__btn"
@click="save"
v-if="hasPermission('editAppearence')" v-if="hasPermission('editAppearence')"
> >
<el-loading size="small" :loading="blockOperation.save"></el-loading> <el-loading size="small" :loading="blockOperation.save"></el-loading>
<span>{{$t('overall.save')}}</span> <span>{{ $t('overall.save') }}</span>
</button> </button>
</div> </div>
</div> </div>

21
src/views/administration/I18n.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div style="height: 100%;"> <div class="administration-container__body">
<cn-data-list <cn-data-list
ref="dataList" ref="dataList"
:tableId="tableId" :tableId="tableId"
@@ -10,21 +10,17 @@
@search="search" @search="search"
> >
<template #top-tool-left> <template #top-tool-left>
<button id="i18n-add" <button id="i18n-add" class="top-tool-btn margin-r-10 top-tool-btn--create" @click="add">
class="top-tool-btn margin-r-10 top-tool-btn--create"
@click="add">
<i class="cn-icon-xinjian cn-icon"></i> <i class="cn-icon-xinjian cn-icon"></i>
<span>{{$t('overall.create')}}</span> <span>{{ $t('overall.create') }}</span>
</button> </button>
<button id="i18n-edit" class="top-tool-btn margin-r-10" :disabled="disableEdit" <button id="i18n-edit" class="top-tool-btn margin-r-10" :disabled="disableEdit" @click="editSelectRecord">
@click="editSelectRecord">
<i class="cn-icon-edit cn-icon"></i> <i class="cn-icon-edit cn-icon"></i>
<span>{{$t('overall.edit')}}</span> <span>{{ $t('overall.edit') }}</span>
</button> </button>
<button id="i18n-delete" class="top-tool-btn margin-r-10" :disabled="disableDelete" <button id="i18n-delete" class="top-tool-btn margin-r-10" :disabled="disableDelete" @click="delBatch">
@click="delBatch">
<i class="cn-icon-delete cn-icon"></i> <i class="cn-icon-delete cn-icon"></i>
<span>{{$t('overall.delete')}}</span> <span>{{ $t('overall.delete') }}</span>
</button> </button>
</template> </template>
<template #default> <template #default>
@@ -90,7 +86,6 @@ export default {
tableId: 'i18nTable' tableId: 'i18nTable'
} }
}, },
methods: { methods: {}
}
} }
</script> </script>

7
src/views/administration/Index.vue
View File

@@ -2,14 +2,14 @@
<div class="administration entity-explorer entity-explorer--show-list"> <div class="administration entity-explorer entity-explorer--show-list">
<!-- 顶部工具栏，在列表页显示 --> <!-- 顶部工具栏，在列表页显示 -->
<div class="explorer-top-tools explorer-detection-top-tools"> <div class="explorer-top-tools explorer-detection-top-tools">
<div class="explorer-top-tools-title">{{$t('overall.administration')}}</div> <div class="explorer-top-tools-title">{{ $t('overall.administration') }}</div>
</div> </div>
<div style="width: 100%;padding-bottom: 26px;"> <div class="administration__tabs">
<chart-tabs :data="tabsData" router></chart-tabs> <chart-tabs :data="tabsData" router></chart-tabs>
</div> </div>
<!-- 内容区 --> <!-- 内容区 -->
<div class="explorer-container administration-container"> <div class="explorer-container administration-container">
<router-view /> <router-view/>
</div> </div>
</div> </div>
</template> </template>
@@ -17,6 +17,7 @@
<script> <script>
import ChartTabs from '@/components/common/ChartTabs' import ChartTabs from '@/components/common/ChartTabs'
import { useStore } from 'vuex' import { useStore } from 'vuex'
export default { export default {
name: 'index', name: 'index',
components: { components: {

24
src/views/administration/License.vue
View File

@@ -3,24 +3,24 @@
<div class="license-form"> <div class="license-form">
<el-form ref="licenseForm" :model="licenseObject" label-position="left" label-width="134px" size="small"> <el-form ref="licenseForm" :model="licenseObject" label-position="left" label-width="134px" size="small">
<el-form-item :label="`${$t('license.type')}：`" prop="type"> <el-form-item :label="`${$t('license.type')}：`" prop="type">
{{licenseObject.type}} {{ licenseObject.type }}
</el-form-item> </el-form-item>
<el-form-item :label="`${$t('license.organization')}：`" prop="organization"> <el-form-item :label="`${$t('license.organization')}：`" prop="organization">
<div class="">{{licenseObject.organization}}</div> <div class="">{{ licenseObject.organization }}</div>
</el-form-item> </el-form-item>
<el-form-item :label="`${$t('license.supportId')}：`" prop="supportID"> <el-form-item :label="`${$t('license.supportId')}：`" prop="supportID">
<div class="">{{licenseObject.supportID}}</div> <div class="">{{ licenseObject.supportID }}</div>
</el-form-item> </el-form-item>
<el-form-item :label="`${$t('license.dateIssued')}：`" prop="dateIssued"> <el-form-item :label="`${$t('license.dateIssued')}：`" prop="dateIssued">
<div class="">{{licenseObject.dateIssued}}</div> <div class="">{{ licenseObject.dateIssued }}</div>
</el-form-item> </el-form-item>
<el-form-item :label="`${$t('license.dateExpires')}：`" prop="dateExpires"> <el-form-item :label="`${$t('license.dateExpires')}：`" prop="dateExpires">
<div class="">{{licenseObject.dateExpires}}</div> <div class="">{{ licenseObject.dateExpires }}</div>
</el-form-item> </el-form-item>
<el-form-item :label="`${$t('license.licenseFile')}：`" > <el-form-item :label="`${$t('license.licenseFile')}：`">
<div class="license-file"> <div class="license-file">
<button style="position: relative;" class="license__btn margin-r-20" @click.prevent="downloadFile"> <button class="license__btn margin-r-20" @click.prevent="downloadFile">
<i class="cn-icon-download1 cn-icon margin-r-6"></i><span>{{$t('license.download')}}</span> <i class="cn-icon-download1 cn-icon margin-r-6"></i><span>{{ $t('license.download') }}</span>
</button> </button>
<el-upload :action="`${baseUrl}sys/license/upload`" <el-upload :action="`${baseUrl}sys/license/upload`"
ref="licenseUpload" ref="licenseUpload"
@@ -34,13 +34,12 @@
:on-change="fileChange" :on-change="fileChange"
:on-success="uploadSuccess" :on-success="uploadSuccess"
:on-error="uploadError"> :on-error="uploadError">
<button style="position: relative;" class="license__btn" @click.prevent=""> <button class="license__btn" @click.prevent="">
<i class="cn-icon-upload1 cn-icon margin-r-6"></i><span>{{$t('license.upload')}}</span> <i class="cn-icon-upload1 cn-icon margin-r-6"></i><span>{{ $t('license.upload') }}</span>
</button> </button>
</el-upload> </el-upload>
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
</div> </div>
@@ -51,6 +50,7 @@ import { storageKey } from '@/utils/constants'
import axios from 'axios' import axios from 'axios'
import { ref } from 'vue' import { ref } from 'vue'
import { dateFormat } from '@/utils/date-util' import { dateFormat } from '@/utils/date-util'
import _ from 'lodash'
export default { export default {
name: 'License', name: 'License',
@@ -109,7 +109,7 @@ export default {
downloadFile () { downloadFile () {
axios.get(this.downloadC2vUrl, { responseType: 'blob' }).then(res => { axios.get(this.downloadC2vUrl, { responseType: 'blob' }).then(res => {
let fileName = '' let fileName = ''
if(res.headers['content-disposition']) { if (res.headers['content-disposition']) {
fileName = res.headers['content-disposition'].split(';')[1].split('filename=')[1] fileName = res.headers['content-disposition'].split(';')[1].split('filename=')[1]
} }

2
src/views/administration/OperationLog.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div style="height: 100%;"> <div class="administration-container__body">
<cn-data-list <cn-data-list
ref="dataList" ref="dataList"
:api="url" :api="url"

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

@@ -1,5 +1,5 @@
<template> <template>
<div style="height: 100%;"> <div class="administration-container__body">
<cn-data-list <cn-data-list
ref="dataList" ref="dataList"
:tableId="tableId" :tableId="tableId"
@@ -14,19 +14,17 @@
v-if="hasPermission('createRole')" v-if="hasPermission('createRole')"
@click="add"> @click="add">
<i class="cn-icon-xinjian cn-icon"></i> <i class="cn-icon-xinjian cn-icon"></i>
<span>{{$t('overall.create')}}</span> <span>{{ $t('overall.create') }}</span>
</button> </button>
<button id="roles-edit" class="top-tool-btn margin-r-10" :disabled="disableEdit" <button id="roles-edit" class="top-tool-btn margin-r-10" :disabled="disableEdit"
v-if="hasPermission('editRole')" v-if="hasPermission('editRole')"
@click="edit"> @click="edit">
<i class="cn-icon-edit cn-icon"></i> <i class="cn-icon-edit cn-icon"></i>
<span>{{$t('overall.edit')}}</span> <span>{{ $t('overall.edit') }}</span>
</button> </button>
<button id="roles-delete" class="top-tool-btn margin-r-10" :disabled="disableDelete" <button id="roles-delete" class="top-tool-btn margin-r-10" :disabled="disableDelete" v-if="hasPermission('deleteRole')" @click="delBatch">
v-if="hasPermission('deleteRole')"
@click="delBatch">
<i class="cn-icon-delete cn-icon"></i> <i class="cn-icon-delete cn-icon"></i>
<span>{{$t('overall.delete')}}</span> <span>{{ $t('overall.delete') }}</span>
</button> </button>
<delete-button id="role-list-batch-delete" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button> <delete-button id="role-list-batch-delete" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
@@ -101,7 +99,8 @@ export default {
this.$alert(this.$t('tip.pleaseSelectForEdit'), { this.$alert(this.$t('tip.pleaseSelectForEdit'), {
confirmButtonText: this.$t('tip.yes'), confirmButtonText: this.$t('tip.yes'),
type: 'warning' type: 'warning'
}).catch(() => {}) }).catch(() => {
})
} else { } else {
axios.get(`${this.url}`, { params: { ids: this.batchDeleteObjs[0].id } }).then(response => { axios.get(`${this.url}`, { params: { ids: this.batchDeleteObjs[0].id } }).then(response => {
if (response.status === 200) { if (response.status === 200) {

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

@@ -1,5 +1,5 @@
<template> <template>
<div style="height: 100%;"> <div class="administration-container__body">
<cn-data-list <cn-data-list
ref="dataList" ref="dataList"
:tableId="tableId" :tableId="tableId"
@@ -14,19 +14,19 @@
v-if="hasPermission('createUser')" v-if="hasPermission('createUser')"
@click="add"> @click="add">
<i class="cn-icon-xinjian cn-icon"></i> <i class="cn-icon-xinjian cn-icon"></i>
<span>{{$t('overall.create')}}</span> <span>{{ $t('overall.create') }}</span>
</button> </button>
<button id="account-edit" class="top-tool-btn margin-r-10" :disabled="disableEdit" <button id="account-edit" class="top-tool-btn margin-r-10" :disabled="disableEdit"
v-if="hasPermission('editUser')" v-if="hasPermission('editUser')"
@click="editSelectRecord"> @click="editSelectRecord">
<i class="cn-icon-edit cn-icon"></i> <i class="cn-icon-edit cn-icon"></i>
<span>{{$t('overall.edit')}}</span> <span>{{ $t('overall.edit') }}</span>
</button> </button>
<button id="account-delete" class="top-tool-btn margin-r-10" :disabled="disableDelete" <button id="account-delete" class="top-tool-btn margin-r-10" :disabled="disableDelete"
v-if="hasPermission('deleteUser')" v-if="hasPermission('deleteUser')"
@click="delBatch"> @click="delBatch">
<i class="cn-icon-delete cn-icon"></i> <i class="cn-icon-delete cn-icon"></i>
<span>{{$t('overall.delete')}}</span> <span>{{ $t('overall.delete') }}</span>
</button> </button>
</template> </template>
<template #default> <template #default>
@@ -55,10 +55,7 @@
:size="700" :size="700"
:with-header="false" :with-header="false"
destroy-on-close> destroy-on-close>
<user-box <user-box :object="object" @close="closeRightBox"/>
:object="object"
@close="closeRightBox"
/>
</el-drawer> </el-drawer>
</div> </div>
</template> </template>