CN-971知识库列表改版
This commit is contained in:
hyx
@@ -2,13 +2,12 @@
|
|||||||
&.list-page {
|
&.list-page {
|
||||||
height: calc(100% - 52px);
|
height: calc(100% - 52px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.type-tag {
|
.type-tag {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
background-color: #EBF7FA;
|
background-color: #EBF7FA;
|
||||||
color: #046ECA;
|
color: #046ECA;
|
||||||
box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
|
box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -21,10 +20,457 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
padding-bottom: 8px;
|
padding-bottom: 8px;
|
||||||
padding-top: 20px;
|
padding-top: 20px;
|
||||||
margin-left: 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 {
|
.edit-knowledge-base {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
@@ -35,7 +481,6 @@
|
|||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
color: #353636;
|
color: #353636;
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit-knowledge-base__body {
|
.edit-knowledge-base__body {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: calc(100% - 147px);
|
height: calc(100% - 147px);
|
||||||
@@ -48,7 +493,6 @@
|
|||||||
.el-step {
|
.el-step {
|
||||||
transition: flex-basis ease-in-out .28s;
|
transition: flex-basis ease-in-out .28s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-step__head {
|
.el-step__head {
|
||||||
.el-step__line {
|
.el-step__line {
|
||||||
top: 26px;
|
top: 26px;
|
||||||
@@ -96,7 +540,6 @@
|
|||||||
height: 260px;
|
height: 260px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-collapse-item {
|
.el-collapse-item {
|
||||||
min-height: 58px;
|
min-height: 58px;
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -111,45 +554,37 @@
|
|||||||
&.focusing:focus:not(:hover) {
|
&.focusing:focus:not(:hover) {
|
||||||
color: unset;
|
color: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-sub-title {
|
.form-sub-title {
|
||||||
padding-left: 35px;
|
padding-left: 35px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
[role|=tab] {
|
[role|=tab] {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-collapse-item__arrow {
|
.el-collapse-item__arrow {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
color: #38ACD2;
|
color: #38ACD2;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-collapse-item__wrap {
|
.el-collapse-item__wrap {
|
||||||
padding-left: 35px;
|
padding-left: 35px;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-collapse-item__content {
|
.el-collapse-item__content {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-bottom: 20px;
|
padding-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
.form-input .el-input__inner{
|
||||||
.form-input .el-input__inner {
|
|
||||||
padding-right: 50px !important;
|
padding-right: 50px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.upload-error-tip, .preview-error-tip {
|
.upload-error-tip, .preview-error-tip {
|
||||||
color: $--color-danger;
|
color: $--color-danger;
|
||||||
}
|
}
|
||||||
|
|
||||||
.upload-error-tip {
|
.upload-error-tip {
|
||||||
margin-top: -11px;
|
margin-top: -11px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-upload {
|
.el-upload {
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
|
|
||||||
@@ -157,7 +592,6 @@
|
|||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #999999;
|
color: #999999;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-upload-dragger {
|
.el-upload-dragger {
|
||||||
width: 320px;
|
width: 320px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
@@ -165,11 +599,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-upload--error .el-upload-dragger {
|
.el-upload--error .el-upload-dragger {
|
||||||
border-color: $--color-danger;
|
border-color: $--color-danger;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-upload-list {
|
.el-upload-list {
|
||||||
.el-upload-list__item {
|
.el-upload-list__item {
|
||||||
padding: 0 5px;
|
padding: 0 5px;
|
||||||
@@ -183,11 +615,9 @@
|
|||||||
.el-icon-close {
|
.el-icon-close {
|
||||||
top: 11px;
|
top: 11px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-icon-close-tip {
|
.el-icon-close-tip {
|
||||||
top: 11px;
|
top: 11px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-progress.el-progress--line {
|
.el-progress.el-progress--line {
|
||||||
top: unset;
|
top: unset;
|
||||||
}
|
}
|
||||||
@@ -210,7 +640,6 @@
|
|||||||
.el-form-item {
|
.el-form-item {
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-form-item__content {
|
.el-form-item__content {
|
||||||
line-height: unset;
|
line-height: unset;
|
||||||
|
|
||||||
@@ -219,7 +648,6 @@
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #353636;
|
color: #353636;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-textarea__inner {
|
.el-textarea__inner {
|
||||||
padding-left: 8px;
|
padding-left: 8px;
|
||||||
}
|
}
|
||||||
@@ -233,7 +661,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.skeleton-border {
|
.skeleton-border {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
@@ -244,11 +671,9 @@
|
|||||||
.skeleton-item-row:not(:nth-of-type(6)) {
|
.skeleton-item-row:not(:nth-of-type(6)) {
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-skeleton__item {
|
.el-skeleton__item {
|
||||||
background: #F5F8FA;
|
background: #F5F8FA;
|
||||||
}
|
}
|
||||||
|
|
||||||
.skeleton-tip {
|
.skeleton-tip {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
@@ -258,7 +683,6 @@
|
|||||||
color: #353636;
|
color: #353636;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.imported-tip {
|
.imported-tip {
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
@@ -270,7 +694,6 @@
|
|||||||
color: #38ACD2;
|
color: #38ACD2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.imported-table-box {
|
.imported-table-box {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 394px !important;
|
height: 394px !important;
|
||||||
@@ -281,7 +704,6 @@
|
|||||||
&.imported-table-box--error {
|
&.imported-table-box--error {
|
||||||
border-color: $--color-danger;
|
border-color: $--color-danger;
|
||||||
}
|
}
|
||||||
|
|
||||||
.imported-table {
|
.imported-table {
|
||||||
padding: 0 12px;
|
padding: 0 12px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -292,12 +714,10 @@
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #353636;;
|
color: #353636;;
|
||||||
}
|
}
|
||||||
|
|
||||||
td {
|
td {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #353636;
|
color: #353636;
|
||||||
}
|
}
|
||||||
|
|
||||||
.imported-data-msg, .imported-data-item, .imported-data-value {
|
.imported-data-msg, .imported-data-item, .imported-data-value {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -317,7 +737,6 @@
|
|||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.imported-data-msg {
|
.imported-data-msg {
|
||||||
width: 140px;
|
width: 140px;
|
||||||
}
|
}
|
||||||
@@ -331,11 +750,9 @@
|
|||||||
color: #111;
|
color: #111;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-icon-success {
|
.el-icon-success {
|
||||||
color: #749F4D;
|
color: #749F4D;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-icon-error {
|
.el-icon-error {
|
||||||
color: #E26154;
|
color: #E26154;
|
||||||
}
|
}
|
||||||
@@ -386,11 +803,9 @@
|
|||||||
border: none;
|
border: none;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-pagination .el-pager li {
|
.el-pagination .el-pager li {
|
||||||
color: #353636;
|
color: #353636;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-pagination .el-pager li.active {
|
.el-pagination .el-pager li.active {
|
||||||
background-color: #38ACD2;
|
background-color: #38ACD2;
|
||||||
color: white;
|
color: white;
|
||||||
@@ -415,14 +830,13 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit-knowledge-base__footer {
|
.edit-knowledge-base__footer {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
height: 60px;
|
height: 60px;
|
||||||
margin-top: 3px;
|
margin-top: 3px;
|
||||||
box-shadow: 0 -1px 4px 0 rgba(0, 0, 0, 0.10);
|
box-shadow: 0 -1px 4px 0 rgba(0,0,0,0.10);
|
||||||
|
|
||||||
.footer__btn {
|
.footer__btn {
|
||||||
margin: 0 10px;
|
margin: 0 10px;
|
||||||
@@ -438,30 +852,25 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background-color linear .2s, color linear .1s;
|
transition: background-color linear .2s, color linear .1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer__btn:hover:not(.footer__btn--disabled) {
|
.footer__btn:hover:not(.footer__btn--disabled) {
|
||||||
background-color: lighten(#699DC9, 10%);
|
background-color: lighten(#699DC9, 10%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer__btn--light {
|
.footer__btn--light {
|
||||||
background-color: #F5F6F7;
|
background-color: #F5F6F7;
|
||||||
border: 1px solid $--border-color-primary;
|
border: 1px solid $--border-color-primary;
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.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: white;
|
||||||
border-color: lighten(#38ACD2, 40%);
|
border-color: lighten(#38ACD2, 40%);
|
||||||
color: #38ACD2;
|
color: #38ACD2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer__btn--disabled {
|
.footer__btn--disabled {
|
||||||
opacity: .6;
|
opacity: .6;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.addTagBtn {
|
.addTagBtn {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 9px;
|
bottom: 9px;
|
||||||
@@ -492,6 +901,103 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
font-family:NotoSansHans-Medium !important;
|
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-face {
|
||||||
font-family: "cn-icon"; /* Project id 2614877 */
|
font-family: "cn-icon"; /* Project id 2614877 */
|
||||||
src: url('iconfont.woff2?t=1680168392586') format('woff2'),
|
src: url('iconfont.woff2?t=1682420421444') format('woff2'),
|
||||||
url('iconfont.woff?t=1680168392586') format('woff'),
|
url('iconfont.woff?t=1682420421444') format('woff'),
|
||||||
url('iconfont.ttf?t=1680168392586') format('truetype');
|
url('iconfont.ttf?t=1682420421444') format('truetype');
|
||||||
}
|
}
|
||||||
|
|
||||||
.cn-icon {
|
.cn-icon {
|
||||||
@@ -13,6 +13,102 @@
|
|||||||
-moz-osx-font-smoothing: grayscale;
|
-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 {
|
.cn-icon-save:before {
|
||||||
content: "\e7d1";
|
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>
|
<template>
|
||||||
<el-table
|
<el-checkbox-group v-model="checkList" @change="" style="display:flex;flex-flow:row wrap;">
|
||||||
id="knowledgeBaseTable"
|
<div @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)" v-for="data in tableData" :key="data.id" class="card-item" style="">
|
||||||
ref="dataTable"
|
<div class="card-content">
|
||||||
:data="tableData"
|
<div class="card-title">
|
||||||
:height="height"
|
<div class="card-title-name">
|
||||||
border
|
{{data.tagName}}
|
||||||
@header-dragend="dragend"
|
</div>
|
||||||
@sort-change="tableDataSort"
|
<div class="card-title-more">
|
||||||
@selection-change="selectionChange"
|
<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)">
|
||||||
<el-table-column
|
<div class="card-title-more-edit" @click="edit(data.id)" >{{$t('overall.edit')}}</div>
|
||||||
:resizable="false"
|
<div class="card-title-more-delete" @click="del(data)" >{{$t('overall.delete')}}</div>
|
||||||
align="center"
|
</div>
|
||||||
type="selection"
|
<el-checkbox @change="(val) => {checkboxStatusChange(val,data)}" style="position: absolute;right: -12px;" v-if="isSelectedStatus" :key="data.id" :label="data"><br></el-checkbox>
|
||||||
width="55">
|
|
||||||
</el-table-column>
|
</div>
|
||||||
<el-table-column
|
</div>
|
||||||
v-for="(item, index) in customTableTitles"
|
<div class="card-id">ID:{{data.id}}</div>
|
||||||
:key="`col-${index}`"
|
<div class="card-desc">{{data.remark?data.remark:'—'}}</div>
|
||||||
:fixed="item.fixed"
|
</div>
|
||||||
:label="item.label"
|
<div class="card-operate__footer">
|
||||||
:min-width="`${item.minWidth}`"
|
<div class="card-type">{{data.tagType}}</div>
|
||||||
:prop="item.prop"
|
<el-switch class="card-enable"
|
||||||
:resizable="true"
|
disabled
|
||||||
:sort-orders="['ascending', 'descending']"
|
v-model="data.status"
|
||||||
:sortable="item.sortable"
|
active-color="#38ACD2"
|
||||||
:width="`${item.width}`"
|
inactive-color="#C0CEDB"
|
||||||
class="data-column"
|
>
|
||||||
>
|
</el-switch>
|
||||||
<template #header>
|
</div>
|
||||||
<span class="data-column__span">{{item.label}}</span>
|
</div>
|
||||||
<div class="col-resize-area"></div>
|
</el-checkbox-group>
|
||||||
</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>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -75,62 +39,87 @@ import { knowledgeBaseType } from '@/utils/constants'
|
|||||||
export default {
|
export default {
|
||||||
name: 'knowledgeBaseTable',
|
name: 'knowledgeBaseTable',
|
||||||
mixins: [table],
|
mixins: [table],
|
||||||
data () {
|
props: {
|
||||||
return {
|
isSelectedStatus: {
|
||||||
tableTitle: [ // 原table列
|
type: Boolean
|
||||||
{
|
|
||||||
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'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
data () {
|
||||||
tagTypeText () {
|
return {
|
||||||
return function (type) {
|
tableTitle: [],
|
||||||
const t = knowledgeBaseType.find(t => t.value === type)
|
checkList: []
|
||||||
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>
|
</script>
|
||||||
|
|||||||
@@ -38,6 +38,7 @@ export default {
|
|||||||
scrollbarWrap: null,
|
scrollbarWrap: null,
|
||||||
delFlag: false,
|
delFlag: false,
|
||||||
disableEdit: false, // 编辑按钮是否不可用，当选择多条记录的时候你，编辑按钮不可用
|
disableEdit: false, // 编辑按钮是否不可用，当选择多条记录的时候你，编辑按钮不可用
|
||||||
|
disableDelete: true,
|
||||||
operationWidth: '165' // 操作列宽
|
operationWidth: '165' // 操作列宽
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -73,15 +74,54 @@ export default {
|
|||||||
break
|
break
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
selectionChange (objs) {
|
checkboxStatusChange (isCheck, data) {
|
||||||
this.batchDeleteObjs = objs
|
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) {
|
if (this.batchDeleteObjs.length > 1) {
|
||||||
this.disableEdit = true
|
this.disableEdit = true
|
||||||
} else {
|
} else {
|
||||||
this.disableEdit = false
|
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) {
|
if (params) {
|
||||||
this.searchLabel = { ...this.searchLabel, ...params }
|
this.searchLabel = { ...this.searchLabel, ...params }
|
||||||
}
|
}
|
||||||
@@ -128,6 +168,8 @@ export default {
|
|||||||
})
|
})
|
||||||
}).catch(e => {})
|
}).catch(e => {})
|
||||||
},
|
},
|
||||||
|
delSelectionChange () {
|
||||||
|
},
|
||||||
delBatch () {
|
delBatch () {
|
||||||
const ids = []
|
const ids = []
|
||||||
if (this.batchDeleteObjs && this.batchDeleteObjs.length > 0) {
|
if (this.batchDeleteObjs && this.batchDeleteObjs.length > 0) {
|
||||||
@@ -157,8 +199,21 @@ export default {
|
|||||||
}
|
}
|
||||||
}).finally(() => {
|
}).finally(() => {
|
||||||
this.tools.loading = false
|
this.tools.loading = false
|
||||||
|
/*
|
||||||
|
if(this.isSelectedStatus != undefined){
|
||||||
|
this.isSelectedStatus = false
|
||||||
|
this.disableDelete = true
|
||||||
|
this.batchDeleteObjs = []
|
||||||
|
} */
|
||||||
})
|
})
|
||||||
}).catch(() => {})
|
}).catch(() => {})
|
||||||
|
.finally(() => {
|
||||||
|
if (this.isSelectedStatus != undefined) {
|
||||||
|
this.isSelectedStatus = false
|
||||||
|
this.disableDelete = true
|
||||||
|
this.batchDeleteObjs = []
|
||||||
|
}
|
||||||
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
newObject () {
|
newObject () {
|
||||||
@@ -309,7 +364,9 @@ export default {
|
|||||||
},
|
},
|
||||||
dragend () {
|
dragend () {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs.dataTable.$refs.dataTable.doLayout()
|
if (this.$refs.dataTable.$refs.dataTable) {
|
||||||
|
this.$refs.dataTable.$refs.dataTable.doLayout()
|
||||||
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
tableDataSort (orderBy) {
|
tableDataSort (orderBy) {
|
||||||
|
|||||||
@@ -33,7 +33,9 @@ export default {
|
|||||||
customTableTitle (n) {
|
customTableTitle (n) {
|
||||||
if (n) {
|
if (n) {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.$refs.dataTable.doLayout()
|
if (this.$refs.dataTable) {
|
||||||
|
this.$refs.dataTable.doLayout()
|
||||||
|
}
|
||||||
}, 200)
|
}, 200)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -107,6 +109,9 @@ export default {
|
|||||||
selectionChange (objs) {
|
selectionChange (objs) {
|
||||||
this.$emit('selectionChange', objs)
|
this.$emit('selectionChange', objs)
|
||||||
},
|
},
|
||||||
|
checkboxStatusChange (isCheck, data) {
|
||||||
|
this.$emit('checkboxStatusChange', isCheck, data)
|
||||||
|
},
|
||||||
dragend () {
|
dragend () {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs.dataTable.doLayout()
|
this.$refs.dataTable.doLayout()
|
||||||
|
|||||||
@@ -1,55 +1,94 @@
|
|||||||
<template>
|
<template>
|
||||||
<div style="height: 100%;" class="knowledge-base">
|
<div style="height: 100%;overflow:auto;" class="knowledge-base">
|
||||||
<div class="top-title">
|
<div class="top-title">
|
||||||
{{$t('overall.knowledgeBase')}}
|
{{$t('overall.knowledgeBase')}}
|
||||||
</div>
|
</div>
|
||||||
<cn-data-list
|
<div class="knowledge-base__content" style="">
|
||||||
ref="dataList"
|
<div class="left-filter" style="">
|
||||||
:tableId="tableId"
|
<knowledge-filter ref="knowledgeFilter"
|
||||||
v-model:custom-table-title="tools.customTableTitle"
|
@reload="reload"
|
||||||
:api="url"
|
@clearList="clearList"></knowledge-filter>
|
||||||
from="knowledge-base"
|
</div>
|
||||||
:layout="['columnCustomize','elementSet','search']"
|
<div class="right-list-card" style="">
|
||||||
@search="search"
|
<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"
|
||||||
<template v-slot:top-tool-left>
|
style="width:72px;"
|
||||||
<button id="knowledge-base-add" :title="$t('knowledgeBase.createKnowledgeBase')" class="top-tool-btn margin-r-10 top-tool-btn--create"
|
@click="jumpToCreatePage">
|
||||||
@click="jumpToCreatePage">
|
<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="knowledge-base-edit" :title="$t('knowledgeBase.select')" class="top-tool-btn margin-r-10"
|
||||||
<button id="knowledge-base-edit" :title="$t('knowledgeBase.editKnowledgeBase')" class="top-tool-btn margin-r-10" :disabled="disableEdit"
|
style="width:72px;"
|
||||||
@click="editSelectRecord">
|
@click="toSelect">
|
||||||
<i class="cn-icon-edit cn-icon" ></i>
|
<i class="cn-icon-xuanzebianji cn-icon" ></i>
|
||||||
<span>{{$t('overall.edit')}}</span>
|
<span>{{$t('overall.select')}}</span>
|
||||||
</button>
|
</button>
|
||||||
<button id="knowledge-base-delete" :title="$t('knowledgeBase.deleteKnowledgeBase')" class="top-tool-btn margin-r-10"
|
<button id="knowledge-base-delete" :title="$t('knowledgeBase.deleteKnowledgeBase')" class="top-tool-btn margin-r-10"
|
||||||
@click="delBatch">
|
style="width:72px;" :disabled="disableDelete"
|
||||||
<i class="cn-icon-delete cn-icon"></i>
|
@click="toDelete">
|
||||||
<span>{{$t('overall.delete')}}</span>
|
<i class="cn-icon-delete cn-icon"></i>
|
||||||
</button>
|
<span>{{$t('overall.delete')}}</span>
|
||||||
</template>
|
</button>
|
||||||
<template v-slot:default>
|
<div class="top-tool-search margin-l-10" style="">
|
||||||
<knowledge-base-table
|
<el-input v-model="keyWord" size="small" @keyup.enter="onSearch"></el-input>
|
||||||
ref="dataTable"
|
<button class="top-tool-btn top-tool-btn--search" style="border-radius: 0 2px 2px 0 !important;" @click="onSearch">
|
||||||
v-loading="tools.loading"
|
<i class="el-icon-search"></i>
|
||||||
:api="url"
|
</button>
|
||||||
:custom-table-title="tools.customTableTitle"
|
</div>
|
||||||
:height="mainTableHeight"
|
</div>
|
||||||
:table-data="tableData"
|
<div class="cards" style="" >
|
||||||
@delete="del"
|
<knowledge-base-table
|
||||||
@edit="edit"
|
ref="dataTable"
|
||||||
@orderBy="tableDataSort"
|
v-loading="tools.loading"
|
||||||
@reload="getTableData"
|
:api="url"
|
||||||
@selectionChange="selectionChange"
|
:custom-table-title="tools.customTableTitle"
|
||||||
></knowledge-base-table>
|
:table-data="tableData"
|
||||||
</template>
|
:is-selected-status="isSelectedStatus"
|
||||||
<!-- 分页组件 -->
|
:all-count="18"
|
||||||
<template #pagination>
|
@delete="toDelete"
|
||||||
<pagination ref="pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></pagination>
|
@checkboxStatusChange="checkboxStatusChange"
|
||||||
</template>
|
></knowledge-base-table>
|
||||||
</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>
|
</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>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import cnDataList from '@/components/table/CnDataList'
|
import cnDataList from '@/components/table/CnDataList'
|
||||||
@@ -57,21 +96,103 @@ import dataListMixin from '@/mixins/data-list'
|
|||||||
import KnowledgeBaseTable from '@/components/table/setting/KnowledgeBaseTable'
|
import KnowledgeBaseTable from '@/components/table/setting/KnowledgeBaseTable'
|
||||||
import { api } from '@/utils/api'
|
import { api } from '@/utils/api'
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
|
import KnowledgeFilter from '@/views/setting/KnowledgeFilter'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'knowledgeBase',
|
name: 'knowledgeBase',
|
||||||
components: {
|
components: {
|
||||||
cnDataList,
|
cnDataList,
|
||||||
KnowledgeBaseTable
|
KnowledgeBaseTable,
|
||||||
|
KnowledgeFilter
|
||||||
},
|
},
|
||||||
mixins: [dataListMixin],
|
mixins: [dataListMixin],
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
url: api.knowledgeBase,
|
url: api.knowledgeBase,
|
||||||
tableId: 'knowledgeBaseTable' // 需要分页的table的id，用于记录每页数量
|
tableId: 'knowledgeBaseTable', // 需要分页的table的id，用于记录每页数量
|
||||||
|
isSelectedStatus: false,
|
||||||
|
keyWord: '',
|
||||||
|
showConfirmDialog: false,
|
||||||
|
delItemList: [],
|
||||||
|
secondBatchDeleteObjs: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
watch: {
|
||||||
|
},
|
||||||
methods: {
|
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) {
|
edit (u) {
|
||||||
axios.get(`${this.url}/${u.id}`).then(response => {
|
axios.get(`${this.url}/${u.id}`).then(response => {
|
||||||
if (response.data.code === 200) {
|
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 () {
|
editSelectRecord () {
|
||||||
if (this.batchDeleteObjs.length === 0) {
|
if (this.batchDeleteObjs.length === 0) {
|
||||||
this.$alert(this.$t('tip.pleaseSelectForEdit'), {
|
this.$alert(this.$t('tip.pleaseSelectForEdit'), {
|
||||||
@@ -97,6 +236,15 @@ export default {
|
|||||||
this.jumpToEditPage(this.batchDeleteObjs[0].id)
|
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) {
|
del (row) {
|
||||||
this.$confirm(this.$t('tip.confirmDelete'), {
|
this.$confirm(this.$t('tip.confirmDelete'), {
|
||||||
confirmButtonText: this.$t('tip.yes'),
|
confirmButtonText: this.$t('tip.yes'),
|
||||||
@@ -141,6 +289,93 @@ export default {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</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