CN-971知识库列表改版
This commit is contained in:
hyx
@@ -2,7 +2,6 @@
|
||||
&.list-page {
|
||||
height: calc(100% - 52px);
|
||||
}
|
||||
|
||||
.type-tag {
|
||||
display: inline-block;
|
||||
padding: 0 10px;
|
||||
@@ -23,8 +22,455 @@
|
||||
padding-top: 20px;
|
||||
margin-left:20px;
|
||||
}
|
||||
.knowledge-base__content {
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
padding:12px 20px 20px 20px;
|
||||
height:calc(100% - 52px);
|
||||
.left-filter {
|
||||
margin-right:20px;
|
||||
width:320px;
|
||||
min-width:320px;
|
||||
height:100%;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid rgba(226,229,236,1);
|
||||
border-radius: 4px;
|
||||
overflow: auto;
|
||||
.filter-title {
|
||||
height:32px;
|
||||
padding-left:20px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
background: #F7F7F7;
|
||||
box-shadow: 0px 1px 0px 0px rgba(226,229,236,1);
|
||||
border-radius: 4px 4px 0px 0px;
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
font-weight: 500;
|
||||
//font-family: $fontFamily !important;
|
||||
}
|
||||
.knowledge-filter {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 0px;
|
||||
.filter__header {
|
||||
display: flex;
|
||||
flex: 0 0 32px;
|
||||
align-items: center;
|
||||
padding-left: 20px;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
margin-top:15px;
|
||||
span {
|
||||
font-size: 14px;
|
||||
padding-left: 0px;
|
||||
}
|
||||
i {
|
||||
font-size: 12px;
|
||||
transition: all linear .1s;
|
||||
transform: rotate(0) translate(0, 2px);
|
||||
}
|
||||
i.arrow-rotate {
|
||||
transform: rotate(90deg) translate(2px, 3px);
|
||||
}
|
||||
.new-knowledge-filter-header-title {
|
||||
//font-family: $fontFamily !important;
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
font-weight: 500;
|
||||
}
|
||||
.new-knowledge-filter-icon {
|
||||
margin-left: 8px;
|
||||
margin-bottom: 2px;
|
||||
font-weight: bold !important;
|
||||
color: #575757;
|
||||
}
|
||||
}
|
||||
.filter__body {
|
||||
padding: 0px 0 0 20px;
|
||||
|
||||
.el-checkbox-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.el-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px 0;
|
||||
margin-right: 5px;
|
||||
.el-checkbox__input {
|
||||
.el-checkbox__inner {
|
||||
background: #F2F7F9;
|
||||
border: 1px solid rgba(0,0,0,0.15);
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
.el-checkbox__input.is-checked {
|
||||
.el-checkbox__inner {
|
||||
border-color: #38ACD2;
|
||||
background: #38ACD2;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
.el-checkbox__input.is-focus {
|
||||
.el-checkbox__inner {
|
||||
border-color: #38ACD2;
|
||||
}
|
||||
}
|
||||
|
||||
.el-checkbox__label {
|
||||
width: 100%;
|
||||
padding-right:15px;
|
||||
padding-left:7px;
|
||||
}
|
||||
.filter__checkbox-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
//font-family: NotoSansSChineseRegular !important;
|
||||
color: #353636;
|
||||
font-size: 14px;
|
||||
.filter-label {
|
||||
display: flex;
|
||||
//color: #353636;
|
||||
}
|
||||
.filter-count {
|
||||
color: #717171 !important;
|
||||
}
|
||||
.severity-color-block {
|
||||
width: 4px;
|
||||
height: 15px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
&:last-of-type {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.knowledge-filter:last-child {
|
||||
.filter__header {
|
||||
margin-top:10px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right-list-card {
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
justify-content: space-between;
|
||||
width: calc(100% - 50px);
|
||||
max-width: calc(100% - 50px);
|
||||
height:100%;
|
||||
.top-tools {
|
||||
display: flex;
|
||||
align-items : center;
|
||||
flex-direction:row;
|
||||
height:28px;
|
||||
//border:solid 1px red;
|
||||
width:100%;
|
||||
.top-tool-btn {
|
||||
cursor: pointer;
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
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: $fontFamily !important;
|
||||
i {
|
||||
font-size: 14px;
|
||||
color: #575757;
|
||||
margin-right:4px;
|
||||
}
|
||||
}
|
||||
.top-tool-btn:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.66;
|
||||
i {
|
||||
|
||||
}
|
||||
}
|
||||
.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-active-background-color;
|
||||
border: 1px solid $--border-color-primary;
|
||||
i {
|
||||
color: #575757;
|
||||
}
|
||||
}
|
||||
.top-tool-btn--delete.top-tool-btn:focus:not(.cn-btn-disabled) {
|
||||
background-color: $--button-gray-hover-background-color;
|
||||
border-color: #FFC4B9;
|
||||
i {
|
||||
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;
|
||||
}
|
||||
}
|
||||
.top-tool-search {
|
||||
display:flex;
|
||||
width:242px;//calc(100% - 256px);
|
||||
.el-input--small{
|
||||
line-height: 27px;
|
||||
.el-input__inner {
|
||||
height: 28px;
|
||||
border-radius: 2px 0 0 2px;
|
||||
}
|
||||
}
|
||||
.top-tool-btn {
|
||||
border-left: none;
|
||||
border-radius: 0px 2px 2px 0px !important;
|
||||
}
|
||||
.top-tool-btn--search:hover {
|
||||
border-left: none !important;
|
||||
border-radius: 0px 2px 2px 0px !important;
|
||||
}
|
||||
.top-tool-btn--search:focus {
|
||||
border-left: none !important;
|
||||
border-radius: 0px 2px 2px 0px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cards {
|
||||
display: flex;
|
||||
flex-flow:row wrap;
|
||||
margin-bottom:38px;
|
||||
margin-top: 30px;
|
||||
width:100%;
|
||||
height:calc(100% - 152px);
|
||||
overflow-y:auto;
|
||||
.card-item {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid rgba(226,229,236,1);
|
||||
border-radius: 4px;
|
||||
width:282px;
|
||||
height:218px;
|
||||
margin-bottom:30px;
|
||||
margin-right:30px;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
|
||||
.card-content {
|
||||
height:calc(100% - 32px);
|
||||
padding:16px;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
.card-title {
|
||||
//font-family: NotoSansSC-Bold;
|
||||
font-size: 16px;
|
||||
color: #353636;
|
||||
font-weight: 700;
|
||||
margin-bottom:6px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
.card-title-name {
|
||||
|
||||
}
|
||||
.card-title-more {
|
||||
position: relative;
|
||||
.el-checkbox__input.is-checked .el-checkbox__inner {
|
||||
background-color: #38ACD2;
|
||||
border-color: #38ACD2;
|
||||
}
|
||||
.el-checkbox__input.is-checked .el-checkbox__inner::after {
|
||||
left: 5px;
|
||||
top: 2px;
|
||||
}
|
||||
.el-checkbox__inner {
|
||||
border-radius: 50%;
|
||||
width:16px;
|
||||
height:16px;
|
||||
background-color: #DEDEDE;
|
||||
border-color: #DEDEDE;
|
||||
z-index:1;
|
||||
}
|
||||
.el-checkbox__inner::after {
|
||||
left: 5px;
|
||||
top: 2px;
|
||||
transform: rotate(45deg) scaleY(1);
|
||||
|
||||
/*
|
||||
|
||||
box-sizing: content-box;
|
||||
content: "";
|
||||
border: 10px solid red;
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
height: 0.5rem;
|
||||
|
||||
|
||||
width: 0.21429rem;
|
||||
transform: rotate(
|
||||
45deg
|
||||
) scaleY(0);
|
||||
transition: transform .15s ease-in .05s;
|
||||
transform-origin: center;*/
|
||||
}
|
||||
.card-operate {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid rgba(197,197,197,1);
|
||||
box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: -10px;
|
||||
height: 56px;
|
||||
width: 80px;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
padding-top:4px;
|
||||
padding-bottom:4px;
|
||||
font-family: Helvetica;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
.card-title-more-delete {
|
||||
z-index: 1;
|
||||
line-height: 24px;
|
||||
height: 24px;
|
||||
background: #FFFFFF;
|
||||
//box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
|
||||
//border-radius: 2px;
|
||||
padding-left: 9px;
|
||||
color: #666666;
|
||||
}
|
||||
.card-title-more-delete:hover {
|
||||
//background: #EBF1F4;
|
||||
background: #F7F7F7;
|
||||
color: #046ECA;
|
||||
//border: 1px solid rgba(0,0,0,0.15);
|
||||
}
|
||||
.card-title-more-delete:active {
|
||||
background: #F7F7F7;
|
||||
color: #046ECA;
|
||||
//border: 1px solid rgba(0,0,0,0.15);
|
||||
}
|
||||
.card-title-more-edit {
|
||||
z-index: 1;
|
||||
line-height: 24px;
|
||||
height: 24px;
|
||||
background: #FFFFFF;
|
||||
//box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
|
||||
//border-radius: 2px;
|
||||
padding-left: 9px;
|
||||
color: #666666;
|
||||
}
|
||||
.card-title-more-edit:hover {
|
||||
background: #F7F7F7;
|
||||
color: #046ECA;
|
||||
//border: 1px solid rgba(0,0,0,0.15);
|
||||
}
|
||||
.card-title-more-edit:active {
|
||||
background: #F7F7F7;
|
||||
color: #046ECA;
|
||||
//border: 1px solid rgba(0,0,0,0.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.card-id {
|
||||
//font-family: NotoSansSChineseRegular;
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
font-weight: 400;
|
||||
margin-bottom:6px;
|
||||
}
|
||||
.card-desc {
|
||||
//font-family: NotoSansSChineseRegular;
|
||||
font-size: 12px;
|
||||
color: #717171;
|
||||
line-height: 18px;
|
||||
font-weight: 400;
|
||||
margin-bottom:12px;
|
||||
}
|
||||
}
|
||||
.card-operate__footer {
|
||||
height:40px;
|
||||
//border:1px solid #7E9F54;
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
justify-content:space-between ;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
align-items: center;
|
||||
padding-left:16px;
|
||||
padding-right:16px;
|
||||
padding-bottom:20px;
|
||||
.card-type {
|
||||
height:20px;
|
||||
width: fit-content;
|
||||
padding-left:11px;
|
||||
padding-right:11px;
|
||||
background: rgba(56,172,210,0.10);
|
||||
box-shadow: 0px 2px 4px 0px rgba(51,51,51,0.02);
|
||||
border-radius: 10px;
|
||||
font-size: 12px;
|
||||
color: #046ECA;
|
||||
font-weight: 400;
|
||||
}
|
||||
.card-enable {
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-item__enable {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid rgba(226,229,236,1);
|
||||
box-shadow: 3px 3px 11px 0px rgba(0,0,0,0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
.knowledge-pagination {
|
||||
height:56px;
|
||||
width:100%;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px -1px 4px 0px rgba(0,0,0,0.07);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.edit-knowledge-base {
|
||||
height: 100%;
|
||||
|
||||
@@ -35,7 +481,6 @@
|
||||
font-weight: 900;
|
||||
color: #353636;
|
||||
}
|
||||
|
||||
.edit-knowledge-base__body {
|
||||
display: flex;
|
||||
height: calc(100% - 147px);
|
||||
@@ -48,7 +493,6 @@
|
||||
.el-step {
|
||||
transition: flex-basis ease-in-out .28s;
|
||||
}
|
||||
|
||||
.el-step__head {
|
||||
.el-step__line {
|
||||
top: 26px;
|
||||
@@ -96,7 +540,6 @@
|
||||
height: 260px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-collapse-item {
|
||||
min-height: 58px;
|
||||
position: relative;
|
||||
@@ -111,33 +554,27 @@
|
||||
&.focusing:focus:not(:hover) {
|
||||
color: unset;
|
||||
}
|
||||
|
||||
.form-sub-title {
|
||||
padding-left: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
[role|=tab] {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.el-collapse-item__arrow {
|
||||
position: absolute;
|
||||
color: #38ACD2;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.el-collapse-item__wrap {
|
||||
padding-left: 35px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.el-collapse-item__content {
|
||||
position: relative;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-input .el-input__inner{
|
||||
padding-right: 50px !important;
|
||||
}
|
||||
@@ -145,11 +582,9 @@
|
||||
.upload-error-tip, .preview-error-tip {
|
||||
color: $--color-danger;
|
||||
}
|
||||
|
||||
.upload-error-tip {
|
||||
margin-top: -11px;
|
||||
}
|
||||
|
||||
.el-upload {
|
||||
margin-top: 12px;
|
||||
|
||||
@@ -157,7 +592,6 @@
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.el-upload-dragger {
|
||||
width: 320px;
|
||||
border-radius: 2px;
|
||||
@@ -165,11 +599,9 @@
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.el-upload--error .el-upload-dragger {
|
||||
border-color: $--color-danger;
|
||||
}
|
||||
|
||||
.el-upload-list {
|
||||
.el-upload-list__item {
|
||||
padding: 0 5px;
|
||||
@@ -183,11 +615,9 @@
|
||||
.el-icon-close {
|
||||
top: 11px;
|
||||
}
|
||||
|
||||
.el-icon-close-tip {
|
||||
top: 11px;
|
||||
}
|
||||
|
||||
.el-progress.el-progress--line {
|
||||
top: unset;
|
||||
}
|
||||
@@ -210,7 +640,6 @@
|
||||
.el-form-item {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.el-form-item__content {
|
||||
line-height: unset;
|
||||
|
||||
@@ -219,7 +648,6 @@
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
}
|
||||
|
||||
.el-textarea__inner {
|
||||
padding-left: 8px;
|
||||
}
|
||||
@@ -233,7 +661,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.skeleton-border {
|
||||
position: relative;
|
||||
margin-top: 12px;
|
||||
@@ -244,11 +671,9 @@
|
||||
.skeleton-item-row:not(:nth-of-type(6)) {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.el-skeleton__item {
|
||||
background: #F5F8FA;
|
||||
}
|
||||
|
||||
.skeleton-tip {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@@ -258,7 +683,6 @@
|
||||
color: #353636;
|
||||
}
|
||||
}
|
||||
|
||||
.imported-tip {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 4px;
|
||||
@@ -270,7 +694,6 @@
|
||||
color: #38ACD2;
|
||||
}
|
||||
}
|
||||
|
||||
.imported-table-box {
|
||||
position: relative;
|
||||
height: 394px !important;
|
||||
@@ -281,7 +704,6 @@
|
||||
&.imported-table-box--error {
|
||||
border-color: $--color-danger;
|
||||
}
|
||||
|
||||
.imported-table {
|
||||
padding: 0 12px;
|
||||
width: 100%;
|
||||
@@ -292,12 +714,10 @@
|
||||
font-size: 14px;
|
||||
color: #353636;;
|
||||
}
|
||||
|
||||
td {
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
}
|
||||
|
||||
.imported-data-msg, .imported-data-item, .imported-data-value {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@@ -317,7 +737,6 @@
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.imported-data-msg {
|
||||
width: 140px;
|
||||
}
|
||||
@@ -331,11 +750,9 @@
|
||||
color: #111;
|
||||
}
|
||||
}
|
||||
|
||||
.el-icon-success {
|
||||
color: #749F4D;
|
||||
}
|
||||
|
||||
.el-icon-error {
|
||||
color: #E26154;
|
||||
}
|
||||
@@ -386,11 +803,9 @@
|
||||
border: none;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.el-pagination .el-pager li {
|
||||
color: #353636;
|
||||
}
|
||||
|
||||
.el-pagination .el-pager li.active {
|
||||
background-color: #38ACD2;
|
||||
color: white;
|
||||
@@ -415,7 +830,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.edit-knowledge-base__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -438,30 +852,25 @@
|
||||
cursor: pointer;
|
||||
transition: background-color linear .2s, color linear .1s;
|
||||
}
|
||||
|
||||
.footer__btn:hover:not(.footer__btn--disabled) {
|
||||
background-color: lighten(#699DC9, 10%);
|
||||
}
|
||||
|
||||
.footer__btn--light {
|
||||
background-color: #F5F6F7;
|
||||
border: 1px solid $--border-color-primary;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) {
|
||||
background-color: white;
|
||||
border-color: lighten(#38ACD2, 40%);
|
||||
color: #38ACD2;
|
||||
}
|
||||
|
||||
.footer__btn--disabled {
|
||||
opacity: .6;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.addTagBtn {
|
||||
position: absolute;
|
||||
bottom: 9px;
|
||||
@@ -495,3 +904,100 @@
|
||||
font-family:NotoSansHans-Medium !important;
|
||||
}
|
||||
}
|
||||
.del-model-hint {
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
padding-bottom:0px !important;
|
||||
width:480px !important;
|
||||
height:300px !important;
|
||||
.el-dialog__header{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom:1px solid #eee;
|
||||
height:42px;
|
||||
min-height:42px;
|
||||
background: #F7F7F7;
|
||||
box-shadow: 0 1px 0 0 rgba(53,54,54,0.08);
|
||||
padding-left:20px;
|
||||
padding-top:14px;
|
||||
padding-bottom:14px;
|
||||
.el-dialog__headerbtn {
|
||||
display: flex !important;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
padding-right: 5px !important;
|
||||
i {
|
||||
width:10px;
|
||||
height:10px;
|
||||
}
|
||||
}
|
||||
.el-dialog__title {
|
||||
font-size: 14px !important;
|
||||
color: #353636;
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
.el-dialog__body {
|
||||
height:206px;
|
||||
min-height:206px;
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
letter-spacing: 0;
|
||||
line-height: 22px;
|
||||
font-weight: 400;
|
||||
padding-top:8px;
|
||||
padding-right:20px;
|
||||
padding-left:20px;
|
||||
.dialog-message {
|
||||
padding-left:0px !important;
|
||||
padding-right:0px !important;
|
||||
}
|
||||
.dialog-table {
|
||||
margin-top:10px;
|
||||
}
|
||||
.el-checkbox__input.is-checked .el-checkbox__inner {
|
||||
background-color: #38ACD2;
|
||||
border-color: #38ACD2;
|
||||
}
|
||||
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
||||
background-color: #38ACD2;
|
||||
border-color: #38ACD2;
|
||||
}
|
||||
}
|
||||
.el-dialog__footer {
|
||||
height:52px;
|
||||
min-height:52px;
|
||||
border-top:1px solid #eee;
|
||||
box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.07);
|
||||
padding:11px 0px 12px!important;
|
||||
.el-button {
|
||||
padding:8px 21px !important;
|
||||
line-height: 12px;
|
||||
//font-family: NotoSansHans-Medium !important;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
min-height: 28px;
|
||||
}
|
||||
.el-button:nth-child(1) {
|
||||
margin-right:20px;
|
||||
width:80px;
|
||||
height:28px;
|
||||
color: #353636;
|
||||
background: #F5F6F7;
|
||||
border: 1px solid rgba(215,215,215,1);
|
||||
border-radius: 2px;
|
||||
}
|
||||
.el-button:nth-child(2) {
|
||||
width:80px;
|
||||
height:28px;
|
||||
margin-right:20px;
|
||||
margin-left:0px !important;
|
||||
background-color:#2d8cf0;
|
||||
border-color:#2d8cf0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
@font-face {
|
||||
font-family: "cn-icon"; /* Project id 2614877 */
|
||||
src: url('iconfont.woff2?t=1680168392586') format('woff2'),
|
||||
url('iconfont.woff?t=1680168392586') format('woff'),
|
||||
url('iconfont.ttf?t=1680168392586') format('truetype');
|
||||
src: url('iconfont.woff2?t=1682420421444') format('woff2'),
|
||||
url('iconfont.woff?t=1682420421444') format('woff'),
|
||||
url('iconfont.ttf?t=1682420421444') format('truetype');
|
||||
}
|
||||
|
||||
.cn-icon {
|
||||
@@ -13,6 +13,102 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.cn-icon-xuanzebianji:before {
|
||||
content: "\e7eb";
|
||||
}
|
||||
|
||||
.cn-icon-guoqishijian:before {
|
||||
content: "\e7d4";
|
||||
}
|
||||
|
||||
.cn-icon-zhucejigouyouxiang:before {
|
||||
content: "\e7d5";
|
||||
}
|
||||
|
||||
.cn-icon-diliweizhi:before {
|
||||
content: "\e7d6";
|
||||
}
|
||||
|
||||
.cn-icon-xinyudengji:before {
|
||||
content: "\e7d7";
|
||||
}
|
||||
|
||||
.cn-icon-zhuceshijian:before {
|
||||
content: "\e7d8";
|
||||
}
|
||||
|
||||
.cn-icon-APPquancheng:before {
|
||||
content: "\e7d9";
|
||||
}
|
||||
|
||||
.cn-icon-miaoshu:before {
|
||||
content: "\e7da";
|
||||
}
|
||||
|
||||
.cn-icon-jishu:before {
|
||||
content: "\e7db";
|
||||
}
|
||||
|
||||
.cn-icon-zhuceshang:before {
|
||||
content: "\e7dc";
|
||||
}
|
||||
|
||||
.cn-icon-zhucejigou:before {
|
||||
content: "\e7dd";
|
||||
}
|
||||
|
||||
.cn-icon-yunyingshang:before {
|
||||
content: "\e7de";
|
||||
}
|
||||
|
||||
.cn-icon-zileibie:before {
|
||||
content: "\e7df";
|
||||
}
|
||||
|
||||
.cn-icon-APPmingcheng:before {
|
||||
content: "\e7e0";
|
||||
}
|
||||
|
||||
.cn-icon-zhuceguojia:before {
|
||||
content: "\e7e1";
|
||||
}
|
||||
|
||||
.cn-icon-AShao:before {
|
||||
content: "\e7e2";
|
||||
}
|
||||
|
||||
.cn-icon-ASziwang:before {
|
||||
content: "\e7e3";
|
||||
}
|
||||
|
||||
.cn-icon-leibie:before {
|
||||
content: "\e7e4";
|
||||
}
|
||||
|
||||
.cn-icon-a-Domainnameresolution:before {
|
||||
content: "\e7e5";
|
||||
}
|
||||
|
||||
.cn-icon-a-Openport:before {
|
||||
content: "\e7e6";
|
||||
}
|
||||
|
||||
.cn-icon-a-Securityevent:before {
|
||||
content: "\e7e7";
|
||||
}
|
||||
|
||||
.cn-icon-a-DNSPTR:before {
|
||||
content: "\e7e8";
|
||||
}
|
||||
|
||||
.cn-icon-a-Informationaggregation:before {
|
||||
content: "\e7e9";
|
||||
}
|
||||
|
||||
.cn-icon-a-Digitalcertificate:before {
|
||||
content: "\e7ea";
|
||||
}
|
||||
|
||||
.cn-icon-save:before {
|
||||
content: "\e7d1";
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,72 +1,36 @@
|
||||
<template>
|
||||
<el-table
|
||||
id="knowledgeBaseTable"
|
||||
ref="dataTable"
|
||||
:data="tableData"
|
||||
:height="height"
|
||||
border
|
||||
@header-dragend="dragend"
|
||||
@sort-change="tableDataSort"
|
||||
@selection-change="selectionChange"
|
||||
<el-checkbox-group v-model="checkList" @change="" style="display:flex;flex-flow:row wrap;">
|
||||
<div @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)" v-for="data in tableData" :key="data.id" class="card-item" style="">
|
||||
<div class="card-content">
|
||||
<div class="card-title">
|
||||
<div class="card-title-name">
|
||||
{{data.tagName}}
|
||||
</div>
|
||||
<div class="card-title-more">
|
||||
<span v-show="!isSelectedStatus && data.showMore"><i class="cn-icon cn-icon-more-dark" @mouseenter="mouseenterMore(data)" test-id="mouseenter-dark"></i></span>
|
||||
<div class="card-operate" v-show="!isSelectedStatus && data.moreOptions" @mouseleave="mouseleaveMore(data)">
|
||||
<div class="card-title-more-edit" @click="edit(data.id)" >{{$t('overall.edit')}}</div>
|
||||
<div class="card-title-more-delete" @click="del(data)" >{{$t('overall.delete')}}</div>
|
||||
</div>
|
||||
<el-checkbox @change="(val) => {checkboxStatusChange(val,data)}" style="position: absolute;right: -12px;" v-if="isSelectedStatus" :key="data.id" :label="data"><br></el-checkbox>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-id">ID:{{data.id}}</div>
|
||||
<div class="card-desc">{{data.remark?data.remark:'—'}}</div>
|
||||
</div>
|
||||
<div class="card-operate__footer">
|
||||
<div class="card-type">{{data.tagType}}</div>
|
||||
<el-switch class="card-enable"
|
||||
disabled
|
||||
v-model="data.status"
|
||||
active-color="#38ACD2"
|
||||
inactive-color="#C0CEDB"
|
||||
>
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
align="center"
|
||||
type="selection"
|
||||
width="55">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-for="(item, index) in customTableTitles"
|
||||
: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}`"
|
||||
class="data-column"
|
||||
>
|
||||
<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 === 'name'">
|
||||
<template v-if="scope.row.i18n">
|
||||
<span>{{$t(scope.row.i18n)}}</span>
|
||||
</template>
|
||||
<template v-else-if="scope.row.name">
|
||||
<span>{{scope.row.name}}</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span>-</span>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'tagType'">
|
||||
<span class="type-tag">{{tagTypeText(scope.row[item.prop])}}</span>
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'utime' || item.prop === 'ctime'">
|
||||
<template v-if="scope.row[item.prop]">
|
||||
{{dateFormatByAppearance(scope.row[item.prop])}}
|
||||
</template>
|
||||
<template v-else>
|
||||
<span>-</span>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'cuser' || item.prop === 'uuser'">
|
||||
<template v-if="scope.row[item.prop]">
|
||||
{{scope.row[item.prop].username || '-'}}
|
||||
</template>
|
||||
<template v-else>
|
||||
<span>-</span>
|
||||
</template>
|
||||
</template>
|
||||
<span v-else>{{scope.row[item.prop] || '-'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-switch>
|
||||
</div>
|
||||
</div>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -75,62 +39,87 @@ import { knowledgeBaseType } from '@/utils/constants'
|
||||
export default {
|
||||
name: 'knowledgeBaseTable',
|
||||
mixins: [table],
|
||||
props: {
|
||||
isSelectedStatus: {
|
||||
type: Boolean
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
tableTitle: [ // 原table列
|
||||
{
|
||||
label: 'ID',
|
||||
prop: 'id',
|
||||
show: true,
|
||||
width: 100,
|
||||
sortable: 'custom'
|
||||
}, {
|
||||
label: this.$t('config.roles.name'),
|
||||
prop: 'tagName',
|
||||
show: true,
|
||||
sortable: 'custom'
|
||||
}, {
|
||||
label: this.$t('overall.type'),
|
||||
prop: 'tagType',
|
||||
minWidth: 80,
|
||||
show: true
|
||||
}, {
|
||||
label: this.$t('overall.remark'),
|
||||
prop: 'remark',
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: this.$t('overall.createdBy'),
|
||||
prop: 'cuser',
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: this.$t('config.user.createTime'),
|
||||
prop: 'ctime',
|
||||
show: false,
|
||||
sortable: 'custom'
|
||||
},
|
||||
{
|
||||
label: this.$t('overall.updatedBy'),
|
||||
prop: 'uuser',
|
||||
show: false
|
||||
},
|
||||
{
|
||||
label: this.$t('overall.updateTime'),
|
||||
prop: 'utime',
|
||||
show: false,
|
||||
sortable: 'custom'
|
||||
}
|
||||
]
|
||||
tableTitle: [],
|
||||
checkList: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tagTypeText () {
|
||||
return function (type) {
|
||||
const t = knowledgeBaseType.find(t => t.value === type)
|
||||
return t ? t.name : ''
|
||||
watch: {
|
||||
tableData: {
|
||||
handler (n) {
|
||||
if (this.tableData && this.tableData.length > 0) {
|
||||
this.tableData.forEach(item => {
|
||||
item.status = true
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
checkboxStatusChange (val, data) {
|
||||
this.$emit('checkboxStatusChange', val, data)
|
||||
},
|
||||
showSelect () {
|
||||
// this.isSelectedStatus = true
|
||||
},
|
||||
hideSelect () {
|
||||
// this.isSelectedStatus = false
|
||||
},
|
||||
mouseenterMore (card) {
|
||||
this.tableData.forEach(t => {
|
||||
if (t.id === card.id) {
|
||||
t.moreOptions = true
|
||||
}
|
||||
})
|
||||
},
|
||||
mouseleaveMore (card) {
|
||||
this.tableData.forEach(t => {
|
||||
if (t.id === card.id) {
|
||||
t.moreOptions = false
|
||||
}
|
||||
})
|
||||
},
|
||||
mouseenter (card) {
|
||||
this.tableData.forEach(t => {
|
||||
if (t.id === card.id) {
|
||||
t.showMore = true
|
||||
}
|
||||
})
|
||||
},
|
||||
mouseleave (card) {
|
||||
this.tableData.forEach(t => {
|
||||
if (t.id === card.id) {
|
||||
t.showMore = false
|
||||
t.moreOptions = false
|
||||
}
|
||||
})
|
||||
},
|
||||
del (data) {
|
||||
this.$emit('delete', data)
|
||||
},
|
||||
edit (id) {
|
||||
this.$router.push({
|
||||
path: '/knowledgeBase/edit',
|
||||
query: {
|
||||
t: +new Date(),
|
||||
id: id
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.tableData.forEach(item => {
|
||||
item.showMore = false
|
||||
item.moreOptions = false
|
||||
item.status = true
|
||||
})
|
||||
},
|
||||
computed: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -38,6 +38,7 @@ export default {
|
||||
scrollbarWrap: null,
|
||||
delFlag: false,
|
||||
disableEdit: false, // 编辑按钮是否不可用，当选择多条记录的时候你，编辑按钮不可用
|
||||
disableDelete: true,
|
||||
operationWidth: '165' // 操作列宽
|
||||
}
|
||||
},
|
||||
@@ -73,15 +74,54 @@ export default {
|
||||
break
|
||||
}
|
||||
},
|
||||
selectionChange (objs) {
|
||||
this.batchDeleteObjs = objs
|
||||
checkboxStatusChange (isCheck, data) {
|
||||
if (isCheck) {
|
||||
const delObj = this.batchDeleteObjs.find(item => item.id === data.id)
|
||||
if (delObj === undefined) {
|
||||
this.batchDeleteObjs.push(data)
|
||||
}
|
||||
} else {
|
||||
const cancleObjIndex = this.batchDeleteObjs.findIndex(item => item.id === data.id)
|
||||
if (cancleObjIndex > -1) {
|
||||
this.batchDeleteObjs.splice(cancleObjIndex, 1)
|
||||
}
|
||||
}
|
||||
if (this.batchDeleteObjs.length > 1) {
|
||||
this.disableEdit = true
|
||||
} else {
|
||||
this.disableEdit = false
|
||||
}
|
||||
if (this.batchDeleteObjs.length >= 1) {
|
||||
this.disableDelete = false
|
||||
} else {
|
||||
this.disableDelete = true
|
||||
}
|
||||
},
|
||||
getTableData (params) {
|
||||
selectionChange (objs) {
|
||||
this.batchDeleteObjs = []
|
||||
objs.forEach(obj => {
|
||||
const delObj = this.batchDeleteObjs.find(item => item.id === obj.id)
|
||||
if (delObj === undefined) {
|
||||
this.batchDeleteObjs.push(obj)
|
||||
}
|
||||
})
|
||||
if (this.batchDeleteObjs.length > 1) {
|
||||
this.disableEdit = true
|
||||
} else {
|
||||
this.disableEdit = false
|
||||
}
|
||||
if (this.batchDeleteObjs.length >= 1) {
|
||||
this.disableDelete = false
|
||||
} else {
|
||||
this.disableDelete = true
|
||||
}
|
||||
},
|
||||
getTableData (params, isAll, isClearType) {
|
||||
if (isAll) {
|
||||
this.searchLabel = null
|
||||
} else if (isClearType) {
|
||||
this.searchLabel.tagType = ''
|
||||
}
|
||||
if (params) {
|
||||
this.searchLabel = { ...this.searchLabel, ...params }
|
||||
}
|
||||
@@ -128,6 +168,8 @@ export default {
|
||||
})
|
||||
}).catch(e => {})
|
||||
},
|
||||
delSelectionChange () {
|
||||
},
|
||||
delBatch () {
|
||||
const ids = []
|
||||
if (this.batchDeleteObjs && this.batchDeleteObjs.length > 0) {
|
||||
@@ -157,8 +199,21 @@ export default {
|
||||
}
|
||||
}).finally(() => {
|
||||
this.tools.loading = false
|
||||
/*
|
||||
if(this.isSelectedStatus != undefined){
|
||||
this.isSelectedStatus = false
|
||||
this.disableDelete = true
|
||||
this.batchDeleteObjs = []
|
||||
} */
|
||||
})
|
||||
}).catch(() => {})
|
||||
.finally(() => {
|
||||
if (this.isSelectedStatus != undefined) {
|
||||
this.isSelectedStatus = false
|
||||
this.disableDelete = true
|
||||
this.batchDeleteObjs = []
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
newObject () {
|
||||
@@ -309,7 +364,9 @@ export default {
|
||||
},
|
||||
dragend () {
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.dataTable.$refs.dataTable) {
|
||||
this.$refs.dataTable.$refs.dataTable.doLayout()
|
||||
}
|
||||
})
|
||||
},
|
||||
tableDataSort (orderBy) {
|
||||
|
||||
@@ -33,7 +33,9 @@ export default {
|
||||
customTableTitle (n) {
|
||||
if (n) {
|
||||
setTimeout(() => {
|
||||
if (this.$refs.dataTable) {
|
||||
this.$refs.dataTable.doLayout()
|
||||
}
|
||||
}, 200)
|
||||
}
|
||||
}
|
||||
@@ -107,6 +109,9 @@ export default {
|
||||
selectionChange (objs) {
|
||||
this.$emit('selectionChange', objs)
|
||||
},
|
||||
checkboxStatusChange (isCheck, data) {
|
||||
this.$emit('checkboxStatusChange', isCheck, data)
|
||||
},
|
||||
dragend () {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.dataTable.doLayout()
|
||||
|
||||
@@ -1,55 +1,94 @@
|
||||
<template>
|
||||
<div style="height: 100%;" class="knowledge-base">
|
||||
<div style="height: 100%;overflow:auto;" class="knowledge-base">
|
||||
<div class="top-title">
|
||||
{{$t('overall.knowledgeBase')}}
|
||||
</div>
|
||||
<cn-data-list
|
||||
ref="dataList"
|
||||
:tableId="tableId"
|
||||
v-model:custom-table-title="tools.customTableTitle"
|
||||
:api="url"
|
||||
from="knowledge-base"
|
||||
:layout="['columnCustomize','elementSet','search']"
|
||||
@search="search"
|
||||
>
|
||||
<template v-slot:top-tool-left>
|
||||
<div class="knowledge-base__content" style="">
|
||||
<div class="left-filter" style="">
|
||||
<knowledge-filter ref="knowledgeFilter"
|
||||
@reload="reload"
|
||||
@clearList="clearList"></knowledge-filter>
|
||||
</div>
|
||||
<div class="right-list-card" style="">
|
||||
<div class="top-tools" style="">
|
||||
<button id="knowledge-base-add" :title="$t('knowledgeBase.createKnowledgeBase')" class="top-tool-btn margin-r-10 top-tool-btn--create"
|
||||
style="width:72px;"
|
||||
@click="jumpToCreatePage">
|
||||
<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="editSelectRecord">
|
||||
<i class="cn-icon-edit cn-icon" ></i>
|
||||
<span>{{$t('overall.edit')}}</span>
|
||||
<button id="knowledge-base-edit" :title="$t('knowledgeBase.select')" class="top-tool-btn margin-r-10"
|
||||
style="width:72px;"
|
||||
@click="toSelect">
|
||||
<i class="cn-icon-xuanzebianji cn-icon" ></i>
|
||||
<span>{{$t('overall.select')}}</span>
|
||||
</button>
|
||||
<button id="knowledge-base-delete" :title="$t('knowledgeBase.deleteKnowledgeBase')" class="top-tool-btn margin-r-10"
|
||||
@click="delBatch">
|
||||
style="width:72px;" :disabled="disableDelete"
|
||||
@click="toDelete">
|
||||
<i class="cn-icon-delete cn-icon"></i>
|
||||
<span>{{$t('overall.delete')}}</span>
|
||||
</button>
|
||||
</template>
|
||||
<template v-slot:default>
|
||||
<div class="top-tool-search margin-l-10" style="">
|
||||
<el-input v-model="keyWord" size="small" @keyup.enter="onSearch"></el-input>
|
||||
<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 class="cards" style="" >
|
||||
<knowledge-base-table
|
||||
ref="dataTable"
|
||||
v-loading="tools.loading"
|
||||
:api="url"
|
||||
:custom-table-title="tools.customTableTitle"
|
||||
:height="mainTableHeight"
|
||||
:table-data="tableData"
|
||||
@delete="del"
|
||||
@edit="edit"
|
||||
@orderBy="tableDataSort"
|
||||
@reload="getTableData"
|
||||
@selectionChange="selectionChange"
|
||||
:is-selected-status="isSelectedStatus"
|
||||
:all-count="18"
|
||||
@delete="toDelete"
|
||||
@checkboxStatusChange="checkboxStatusChange"
|
||||
></knowledge-base-table>
|
||||
</template>
|
||||
<!-- 分页组件 -->
|
||||
<template #pagination>
|
||||
<pagination ref="pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></pagination>
|
||||
</template>
|
||||
</cn-data-list>
|
||||
</div>
|
||||
<div class="knowledge-pagination" style="">
|
||||
<pagination ref="pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog v-model="showConfirmDialog"
|
||||
:title="$t('overall.hint')"
|
||||
width="480px"
|
||||
custom-class="del-model-hint"
|
||||
:before-close="handleClose">
|
||||
<div class="dialog-message">{{$t('knowledge.deleteDataHint')}}</div>
|
||||
<el-table v-model="delItemList"
|
||||
ref="delDataTable"
|
||||
:data="batchDeleteObjs"
|
||||
@selection-change="secondSelectionChange"
|
||||
height="156px"
|
||||
width="100%"
|
||||
class="dialog-table"
|
||||
:row-style="rowStyle"
|
||||
cell-style="padding:4px 0px;font-size: 12px;color: #353636;font-weight: 400;"
|
||||
header-cell-style="padding:4px 0px;background: #F5F8FA;font-size: 12px;color: #353636;font-weight: 500;"
|
||||
:header-row-style="tableHeaderRowStyle">
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
align="center"
|
||||
type="selection"
|
||||
width="50">
|
||||
</el-table-column>
|
||||
<el-table-column property="id" label="ID" width="112"></el-table-column>
|
||||
<el-table-column property="tagType" label="Type" width="112"></el-table-column>
|
||||
<el-table-column property="tagName" label="Name"></el-table-column>
|
||||
</el-table>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="showConfirmDialog = false">{{ $t('overall.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="submit">{{ $t('tip.confirm') }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import cnDataList from '@/components/table/CnDataList'
|
||||
@@ -57,21 +96,103 @@ import dataListMixin from '@/mixins/data-list'
|
||||
import KnowledgeBaseTable from '@/components/table/setting/KnowledgeBaseTable'
|
||||
import { api } from '@/utils/api'
|
||||
import axios from 'axios'
|
||||
import KnowledgeFilter from '@/views/setting/KnowledgeFilter'
|
||||
|
||||
export default {
|
||||
name: 'knowledgeBase',
|
||||
components: {
|
||||
cnDataList,
|
||||
KnowledgeBaseTable
|
||||
KnowledgeBaseTable,
|
||||
KnowledgeFilter
|
||||
},
|
||||
mixins: [dataListMixin],
|
||||
data () {
|
||||
return {
|
||||
url: api.knowledgeBase,
|
||||
tableId: 'knowledgeBaseTable' // 需要分页的table的id，用于记录每页数量
|
||||
tableId: 'knowledgeBaseTable', // 需要分页的table的id，用于记录每页数量
|
||||
isSelectedStatus: false,
|
||||
keyWord: '',
|
||||
showConfirmDialog: false,
|
||||
delItemList: [],
|
||||
secondBatchDeleteObjs: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
},
|
||||
methods: {
|
||||
onSearch () {
|
||||
const params = {
|
||||
q: this.keyWord
|
||||
}
|
||||
this.search(params)
|
||||
},
|
||||
handleClose () {
|
||||
this.showConfirmDialog = false
|
||||
},
|
||||
showDelDialog () {
|
||||
this.showConfirmDialog = true
|
||||
this.$nextTick(() => {
|
||||
this.batchDeleteObjs.forEach((item) => {
|
||||
this.$refs.delDataTable.toggleRowSelection(item, true)
|
||||
})
|
||||
})
|
||||
},
|
||||
secondSelectionChange (objs) {
|
||||
this.secondBatchDeleteObjs = objs
|
||||
},
|
||||
|
||||
delBatchKnowledge () {
|
||||
const ids = []
|
||||
if (this.secondBatchDeleteObjs && this.secondBatchDeleteObjs.length > 0) {
|
||||
this.secondBatchDeleteObjs.forEach(item => {
|
||||
ids.push(item.id)
|
||||
})
|
||||
}
|
||||
if (ids.length === 0) {
|
||||
this.$alert(this.$t('tip.pleaseSelect'), {
|
||||
confirmButtonText: this.$t('tip.yes'),
|
||||
type: 'warning'
|
||||
}).catch(() => {})
|
||||
} else {
|
||||
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.secondBatchDeleteObjs.forEach((item) => {
|
||||
this.$refs.delDataTable.toggleRowSelection(item, false)
|
||||
})
|
||||
this.$refs.knowledgeFilter.reloadFilter()
|
||||
this.secondBatchDeleteObjs = []
|
||||
this.batchDeleteObjs = []
|
||||
this.getTableData()
|
||||
} else {
|
||||
this.$message.error(response.data.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
this.tools.loading = false
|
||||
if (this.isSelectedStatus != undefined) {
|
||||
this.isSelectedStatus = false
|
||||
this.disableDelete = true
|
||||
this.secondBatchDeleteObjs = []
|
||||
this.batchDeleteObjs = []
|
||||
this.showConfirmDialog = false
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
tableHeaderRowStyle ({ row, rowIndex }) {
|
||||
// if (rowIndex === 0) {
|
||||
// return 'font-weight: 500;font-size: 14px;'
|
||||
// }
|
||||
},
|
||||
rowStyle ({ row, rowIndex }) {
|
||||
// return 'height:32px !important;'//font-size: 14px;color: #666666;font-weight: 400;
|
||||
},
|
||||
submit () {
|
||||
this.delBatchKnowledge()
|
||||
this.showConfirmDialog = false
|
||||
},
|
||||
edit (u) {
|
||||
axios.get(`${this.url}/${u.id}`).then(response => {
|
||||
if (response.data.code === 200) {
|
||||
@@ -87,6 +208,24 @@ export default {
|
||||
}
|
||||
})
|
||||
},
|
||||
reload (params, isAll, isClearType) {
|
||||
this.disableDelete = true
|
||||
this.isSelectedStatus = false
|
||||
this.batchDeleteObjs = []
|
||||
this.secondBatchDeleteObjs = []
|
||||
this.getTableData(params, isAll, isClearType)
|
||||
},
|
||||
clearList () {
|
||||
this.disableDelete = true
|
||||
this.isSelectedStatus = false
|
||||
this.batchDeleteObjs = []
|
||||
this.secondBatchDeleteObjs = []
|
||||
this.tableData = 0
|
||||
this.pageObj.total = 0
|
||||
},
|
||||
toSelect () {
|
||||
this.isSelectedStatus = !this.isSelectedStatus
|
||||
},
|
||||
editSelectRecord () {
|
||||
if (this.batchDeleteObjs.length === 0) {
|
||||
this.$alert(this.$t('tip.pleaseSelectForEdit'), {
|
||||
@@ -97,6 +236,15 @@ export default {
|
||||
this.jumpToEditPage(this.batchDeleteObjs[0].id)
|
||||
}
|
||||
},
|
||||
toDelete (data) {
|
||||
if (data && data.id) {
|
||||
this.secondBatchDeleteObjs = []
|
||||
this.batchDeleteObjs = []
|
||||
this.secondBatchDeleteObjs.push(data)
|
||||
this.batchDeleteObjs.push(data)
|
||||
}
|
||||
this.showDelDialog()
|
||||
},
|
||||
del (row) {
|
||||
this.$confirm(this.$t('tip.confirmDelete'), {
|
||||
confirmButtonText: this.$t('tip.yes'),
|
||||
@@ -141,6 +289,93 @@ export default {
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
||||
},
|
||||
computed: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.del-model__hint {
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
padding-bottom:0px !important;
|
||||
width:480px !important;
|
||||
height:190px;
|
||||
.el-message-box__header{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom:1px solid #eee;
|
||||
height:42px;
|
||||
background: #F7F7F7;
|
||||
box-shadow: 0 1px 0 0 rgba(53,54,54,0.08);
|
||||
padding-left:20px;
|
||||
padding-top:14px;
|
||||
padding-bottom:14px;
|
||||
.el-message-box__headerbtn {
|
||||
display: flex !important;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
padding-right: 5px !important;
|
||||
i {
|
||||
width:10px;
|
||||
height:10px;
|
||||
}
|
||||
}
|
||||
.el-message-box__title {
|
||||
font-size: 14px !important;
|
||||
color: #353636;
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
.el-message-box__content {
|
||||
height:96px;
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
letter-spacing: 0;
|
||||
line-height: 22px;
|
||||
font-weight: 400;
|
||||
padding-top:8px;
|
||||
padding-right:20px;
|
||||
padding-left:20px;
|
||||
.el-message-box__message {
|
||||
padding-left:0px !important;
|
||||
padding-right:0px !important;
|
||||
}
|
||||
}
|
||||
.el-message-box__btns {
|
||||
height:52px;
|
||||
border-top:1px solid #eee;
|
||||
box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.07);
|
||||
padding:11px 0px 12px!important;
|
||||
.el-button--small {
|
||||
padding:8px 21px !important;
|
||||
line-height: 12px;
|
||||
//font-family: NotoSansHans-Medium !important;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
min-height: 28px;
|
||||
}
|
||||
.el-button:nth-child(1) {
|
||||
margin-right:20px;
|
||||
width:80px;
|
||||
height:28px;
|
||||
color: #353636;
|
||||
}
|
||||
.el-button:nth-child(2) {
|
||||
width:80px;
|
||||
height:28px;
|
||||
margin-right:20px;
|
||||
margin-left:0px !important;
|
||||
background-color:#2d8cf0;
|
||||
border-color:#2d8cf0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
187
src/views/setting/KnowledgeFilter.vue
Normal file
187
src/views/setting/KnowledgeFilter.vue
Normal file
@@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="filter-title">
|
||||
{{ $t('knowledge.filters') }}
|
||||
</div>
|
||||
<template v-for="(filter, index) in filterData" :key="index">
|
||||
<div class="knowledge-filter" v-show="filter.data.length > 0">
|
||||
<div class="filter__header" @click="filter.collapse = !filter.collapse">
|
||||
<span class="new-knowledge-filter-header-title">{{filter.title}}</span>
|
||||
<i class="el-icon-arrow-right new-knowledge-filter-icon" :class="{ 'arrow-rotate': !filter.collapse }"></i>
|
||||
</div>
|
||||
<el-collapse-transition>
|
||||
<div class="filter__body" v-show="!filter.collapse">
|
||||
<el-checkbox label="all" v-if="index === 0" key="all" @change="handleCheckedAllChange" v-model="checkAll" :indeterminate="isIndeterminateModel">
|
||||
<div class="filter__checkbox-label">
|
||||
<div class="filter-label" style="">
|
||||
<span>All</span>
|
||||
</div>
|
||||
<div class="filter-count">{{allCount}}</div>
|
||||
</div>
|
||||
</el-checkbox>
|
||||
<el-checkbox-group v-if="index === 0" v-model="filter.value" @change="handleCheckedItemChange">
|
||||
<el-checkbox checked="true" v-for="(d, i) in filter.data" :label="d.value" :key="d.value" >
|
||||
<div class="filter__checkbox-label">
|
||||
<div class="filter-label" style="">
|
||||
<span>{{d.label}}</span>
|
||||
</div>
|
||||
<div class="filter-count" v-if="d.count || d.count === 0">{{d.count}}</div>
|
||||
</div>
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
<el-checkbox-group v-else v-model="filter.value" >
|
||||
<el-checkbox checked="true" v-for="(d, i) in filter.data" :label="d.value" :key="d.value" >
|
||||
<div class="filter__checkbox-label">
|
||||
<div class="filter-label" style="">
|
||||
<span>{{d.label}}</span>
|
||||
</div>
|
||||
<div class="filter-count" v-if="d.count || d.count === 0">{{d.count}}</div>
|
||||
</div>
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</el-collapse-transition>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { api } from '@/utils/api'
|
||||
import { get } from '@/utils/http'
|
||||
|
||||
export default {
|
||||
name: 'KnowledgeFilter',
|
||||
props: {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
url: api.knowledgeBase,
|
||||
checkAll: true,
|
||||
isIndeterminateModel: false,
|
||||
filterData: [
|
||||
{
|
||||
title: this.$t('knowledge.type'),
|
||||
collapse: false,
|
||||
value: [],
|
||||
data: []
|
||||
},
|
||||
{
|
||||
title: this.$t('knowledge.status'),
|
||||
collapse: false,
|
||||
value: [],
|
||||
data: []
|
||||
}
|
||||
],
|
||||
allTableData: [],
|
||||
allCount: 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
},
|
||||
methods: {
|
||||
handleCheckedAllChange (item) {
|
||||
const values = []
|
||||
this.filterData[0].data.forEach(d => {
|
||||
values.push(d.value)
|
||||
})
|
||||
this.filterData[0].value = item ? values : []
|
||||
this.isIndeterminateModel = false
|
||||
if (item) {
|
||||
this.$emit('reload', null, true)
|
||||
} else {
|
||||
this.$emit('clearList')
|
||||
}
|
||||
},
|
||||
handleCheckedItemChange (values) {
|
||||
const len = values.length
|
||||
const allTypeLen = this.filterData[0].data.length
|
||||
let params = {}
|
||||
if (len === 0) {
|
||||
this.isIndeterminateModel = false
|
||||
this.checkAll = false
|
||||
// this.$emit('reload',null,true)
|
||||
this.$emit('clearList')
|
||||
} else if (len > 0 && len < allTypeLen) {
|
||||
this.checkAll = true
|
||||
this.isIndeterminateModel = true
|
||||
const types = []
|
||||
values.forEach(val => {
|
||||
types.push(val)
|
||||
})
|
||||
params = {
|
||||
tagType: types.toString()
|
||||
}
|
||||
this.$emit('reload', params, true)
|
||||
} else if (len === allTypeLen) {
|
||||
this.isIndeterminateModel = false
|
||||
this.checkAll = true
|
||||
this.$emit('reload', null, true)
|
||||
}
|
||||
},
|
||||
getAllTableData (params) {
|
||||
let searchParams = { pageSize: -1 }
|
||||
if (params) {
|
||||
searchParams = { ...searchParams, ...params }
|
||||
}
|
||||
get(this.url, searchParams).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.allTableData = response.data.list
|
||||
this.initAllData()
|
||||
this.initStatusData()
|
||||
} else {
|
||||
console.error(response)
|
||||
}
|
||||
})
|
||||
},
|
||||
initAllData () {
|
||||
this.allCount = this.allTableData.length
|
||||
let ipCount = 0
|
||||
let domainCount = 0
|
||||
let appCount = 0
|
||||
let builtInCount = 0
|
||||
this.allTableData.forEach(data => {
|
||||
if (data.tagType === 'ip') {
|
||||
ipCount++
|
||||
} else if (data.tagType === 'domain') {
|
||||
domainCount++
|
||||
} else if (data.tagType === 'app') {
|
||||
appCount++
|
||||
} else if (data.tagType === 'builtIn') {
|
||||
builtInCount++
|
||||
}
|
||||
})
|
||||
this.filterData[0].data = [
|
||||
// { label: 'All', value: 'all', count: 18 },
|
||||
{ label: 'IP', value: 'ip', count: ipCount },
|
||||
{ label: 'Domain', value: 'domain', count: domainCount },
|
||||
{ label: 'Application', value: 'app', count: appCount },
|
||||
{ label: 'Built-in', value: 'builtIn', count: builtInCount }
|
||||
]
|
||||
},
|
||||
initStatusData () {
|
||||
let enableCount = 0
|
||||
let disableCount = 0
|
||||
this.allTableData.forEach(data => {
|
||||
if (data.status === 'disable') {
|
||||
disableCount++
|
||||
} else {
|
||||
enableCount++
|
||||
}
|
||||
})
|
||||
this.filterData[1].data = [
|
||||
{ label: 'enabled', value: 'enabled', count: enableCount },
|
||||
{ label: 'disable', value: 'ip', count: disableCount }
|
||||
]
|
||||
},
|
||||
reloadFilter () {
|
||||
this.getAllTableData()
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getAllTableData()
|
||||
},
|
||||
computed: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user