CN-906 feat: 知识库列表、新增功能（细节体验待完善）
This commit is contained in:
chenjinsong
@@ -0,0 +1,331 @@
|
||||
.edit-knowledge-base {
|
||||
height: 100%;
|
||||
|
||||
.edit-knowledge-base__header {
|
||||
padding: 30px 0 30px 20px;
|
||||
font-size: 24px;
|
||||
line-height: 24px;
|
||||
font-weight: 900;
|
||||
color: #353636;
|
||||
}
|
||||
.edit-knowledge-base__body {
|
||||
display: flex;
|
||||
height: calc(100% - 147px);
|
||||
padding-left: 20px;
|
||||
overflow: auto;
|
||||
|
||||
.el-steps {
|
||||
margin-left: 10px;
|
||||
|
||||
.el-step {
|
||||
transition: flex-basis ease-in-out .28s;
|
||||
}
|
||||
.el-step__head {
|
||||
.el-step__line {
|
||||
top: 26px;
|
||||
bottom: 2px;
|
||||
background-color: #38ACD2;
|
||||
border-color: transparent;
|
||||
opacity: 0.66;
|
||||
}
|
||||
|
||||
&.is-finish, &.is-process {
|
||||
.el-step__icon {
|
||||
border-color: #38ACD2;
|
||||
color: white;
|
||||
background: #38ACD2;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-process {
|
||||
.el-step__line {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-wait {
|
||||
.el-step__icon {
|
||||
border-color: #38ACD2;
|
||||
color: #38ACD2;
|
||||
}
|
||||
}
|
||||
|
||||
.el-step__icon-inner {
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-collapse {
|
||||
width: 655px;
|
||||
margin-left: 5px;
|
||||
border: none;
|
||||
|
||||
.el-collapse-item.upload-collapse {
|
||||
.el-collapse-item__wrap {
|
||||
height: 260px;
|
||||
}
|
||||
}
|
||||
.el-collapse-item {
|
||||
min-height: 58px;
|
||||
|
||||
.el-collapse-item__header {
|
||||
height: unset;
|
||||
line-height: unset;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
|
||||
&.focusing:focus:not(:hover) {
|
||||
color: unset;
|
||||
}
|
||||
.form-sub-title {
|
||||
padding-left: 35px;
|
||||
}
|
||||
}
|
||||
.el-collapse-item__header > i {
|
||||
transform: translateX(-630px);
|
||||
color: #38ACD2;
|
||||
font-weight: bold;
|
||||
}
|
||||
.el-collapse-item__header > i.is-active {
|
||||
transform: translateX(-630px) rotate(90deg);
|
||||
}
|
||||
.el-collapse-item__wrap {
|
||||
padding-left: 35px;
|
||||
border: none;
|
||||
}
|
||||
.el-collapse-item__content {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.upload-error-tip, .preview-error-tip {
|
||||
color: $--color-danger;
|
||||
}
|
||||
.upload-error-tip {
|
||||
margin-top: -11px;
|
||||
}
|
||||
.el-upload {
|
||||
margin-top: 12px;
|
||||
|
||||
.upload-tip {
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
}
|
||||
.el-upload-dragger {
|
||||
width: 320px;
|
||||
border-radius: 2px;
|
||||
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
|
||||
}
|
||||
.el-upload--error .el-upload-dragger {
|
||||
border-color: $--color-danger;
|
||||
}
|
||||
.el-upload-list {
|
||||
.el-upload-list__item {
|
||||
padding: 0 5px;
|
||||
margin-top: unset;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
background: #F5F8FA;
|
||||
border-radius: 2px;
|
||||
color: #353636;
|
||||
|
||||
.el-icon-close {
|
||||
top: 11px;
|
||||
}
|
||||
.el-icon-close-tip {
|
||||
top: 11px;
|
||||
}
|
||||
.el-progress.el-progress--line {
|
||||
top: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-form {
|
||||
margin-top: 20px;
|
||||
width: 620px;
|
||||
|
||||
label {
|
||||
padding-bottom: 6px;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
line-height: unset;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item__content {
|
||||
line-height: unset;
|
||||
|
||||
.el-input__inner {
|
||||
padding-left: 8px;
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
}
|
||||
|
||||
.form-select {
|
||||
width: 100%;
|
||||
|
||||
.el-input__inner {
|
||||
background-color: #F5F8FA;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.skeleton-border {
|
||||
position: relative;
|
||||
margin-top: 12px;
|
||||
padding: 15px;
|
||||
border: 1px solid #DCDFE6;
|
||||
border-radius: 2px;
|
||||
|
||||
.skeleton-item-row:not(:nth-of-type(6)) {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.el-skeleton__item {
|
||||
background: #F5F8FA;
|
||||
}
|
||||
.skeleton-tip {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 14px;
|
||||
color: #353636;
|
||||
}
|
||||
}
|
||||
.imported-tip {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 4px;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
|
||||
.cn-icon {
|
||||
font-size: 16px;
|
||||
color: #38ACD2;
|
||||
}
|
||||
}
|
||||
.imported-table-box {
|
||||
position: relative;
|
||||
height: 367px;
|
||||
border: 1px solid #DEDEDE;
|
||||
border-radius: 2px;
|
||||
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
|
||||
&.imported-table-box--error {
|
||||
border-color: $--color-danger;
|
||||
}
|
||||
.imported-table {
|
||||
padding: 0 12px;
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
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;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.imported-data-msg {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.el-icon-close {
|
||||
color: #666;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #111;
|
||||
}
|
||||
}
|
||||
.el-icon-success {
|
||||
color: #749F4D;
|
||||
}
|
||||
.el-icon-error {
|
||||
color: #E26154;
|
||||
}
|
||||
}
|
||||
|
||||
.imported-pagination.pagination {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
margin-top: 4px;
|
||||
padding-top: 8px;
|
||||
height: 42px;
|
||||
border-top: 1px solid #eee;
|
||||
|
||||
.btn-prev, .btn-next, .number {
|
||||
margin: 0 2px;
|
||||
}
|
||||
.el-pager li, .el-pagination .btn-next, .el-pagination .btn-prev {
|
||||
border: none;
|
||||
font-size: 12px;
|
||||
}
|
||||
.el-pagination .el-pager li {
|
||||
color: #353636;
|
||||
}
|
||||
.el-pagination .el-pager li.active {
|
||||
background-color: #38ACD2;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.edit-knowledge-base__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 60px;
|
||||
margin-top: 3px;
|
||||
box-shadow: 0 -1px 4px 0 rgba(0,0,0,0.10);
|
||||
|
||||
.footer__btn {
|
||||
margin: 0 10px;
|
||||
height: 30px;
|
||||
min-width: 74px;
|
||||
padding: 0 15px;
|
||||
color: white;
|
||||
background-color: #38ACD2;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: background-color linear .2s, color linear .1s;
|
||||
}
|
||||
.footer__btn:hover:not(.footer__btn--disabled) {
|
||||
background-color: lighten(#38ACD2, 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,10 +2,10 @@
|
||||
|
||||
/** 重写element-ui变量 **/
|
||||
|
||||
$--color-primary: #0091ff; // 主题色
|
||||
$--color-primary-dark-10: darken(#0091ff, 10%); // 默认主题色 深10%
|
||||
$--color-primary-light-10: lighten(#0091ff, 10%); // 默认主题色 浅10%
|
||||
$--color-primary-light-20: lighten(#0091ff, 20%); // 默认主题色 浅20%
|
||||
$--color-primary: #699DC9; // 主题色
|
||||
$--color-primary-dark-10: darken(#699DC9, 10%); // 默认主题色 深10%
|
||||
$--color-primary-light-10: lighten(#699DC9, 10%); // 默认主题色 浅10%
|
||||
$--color-primary-light-20: lighten(#699DC9, 20%); // 默认主题色 浅20%
|
||||
|
||||
/* menu相关 */
|
||||
$--menu-background-color: #00162B; // menu背景色
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
:page-size="Number(pageObj.pageSize)"
|
||||
:layout="layout"
|
||||
:total="pageObj.total"
|
||||
v-bind="bind"
|
||||
>
|
||||
<el-select v-model="pageSize" :placeholder="pageSize+$t('pageSize')" size="mini"
|
||||
:popper-append-to-body="appendToBody" class="pagination-size-select" @change="size"
|
||||
@@ -42,15 +43,23 @@ export default {
|
||||
layout: {
|
||||
type: String,
|
||||
default: 'total, prev, pager, next, slot'
|
||||
},
|
||||
bind: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
storePageNoOnUrl: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 添加vue3的setup，目的是添加/获取地址栏的参数
|
||||
*/
|
||||
setup () {
|
||||
setup (props) {
|
||||
const { query } = useRoute()
|
||||
const pageSize = ref(defaultPageSize)
|
||||
const currentPageNo = ref(query.pageNo || 1)
|
||||
const currentPageNo = ref(props.storePageNoOnUrl ? (query.pageNo || (props.pageObj.pageNo || 1)) : (props.pageObj.pageNo || 1))
|
||||
|
||||
return {
|
||||
pageSize,
|
||||
|
||||
@@ -44,6 +44,14 @@
|
||||
<span>-</span>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'utime'">
|
||||
<template v-if="scope.row[item.prop]">
|
||||
{{dateFormatByAppearance(scope.row[item.prop])}}
|
||||
</template>
|
||||
<template v-else>
|
||||
<span>-</span>
|
||||
</template>
|
||||
</template>
|
||||
<span v-else>{{scope.row[item.prop]}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@@ -103,7 +111,7 @@ export default {
|
||||
show: true
|
||||
}, {
|
||||
label: this.$t('overall.updateTime'),
|
||||
prop: 'updateTime',
|
||||
prop: 'utime',
|
||||
show: true
|
||||
}
|
||||
]
|
||||
|
||||
@@ -12,7 +12,8 @@ const store = createStore({
|
||||
return {
|
||||
i18n: false,
|
||||
showEntityTypeSelector: false, // 在entity explore页面时，控制header显示实体类型选择框
|
||||
from: '' // entity type
|
||||
from: '', // entity type
|
||||
test: 'jest' // 用于单测的demo
|
||||
}
|
||||
},
|
||||
getters: {
|
||||
@@ -24,6 +25,9 @@ const store = createStore({
|
||||
},
|
||||
entityName (state) {
|
||||
return state.entityName
|
||||
},
|
||||
getTest (state) {
|
||||
return state.test
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
@@ -37,6 +41,9 @@ const store = createStore({
|
||||
},
|
||||
showEntityTypeSelector (state, show) {
|
||||
state.showEntityTypeSelector = show
|
||||
},
|
||||
setTest (state, test) {
|
||||
state.test = test
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -34,7 +34,7 @@ export const api = {
|
||||
// galaxyProxy
|
||||
galaxyProxy: '/galaxy/setting',
|
||||
// 知识库
|
||||
knowledgeBase: '/knowledgeBase',
|
||||
knowledgeBase: '/knowledge',
|
||||
|
||||
// 报告相关
|
||||
reportJob: '/report/job',
|
||||
|
||||
@@ -277,6 +277,21 @@ export const cycle = {
|
||||
pre: 1
|
||||
}
|
||||
|
||||
export const knowledgeBaseType = [
|
||||
{
|
||||
name: 'IP',
|
||||
value: 'ip'
|
||||
},
|
||||
{
|
||||
name: 'Domain',
|
||||
value: 'domain'
|
||||
},
|
||||
{
|
||||
name: 'APP',
|
||||
value: 'app'
|
||||
}
|
||||
]
|
||||
|
||||
export const curTabState = {
|
||||
curTab: 'curTab',
|
||||
tableMetric: 'tableMetric',
|
||||
|
||||
@@ -74,28 +74,6 @@ export default {
|
||||
t: +new Date()
|
||||
}
|
||||
})
|
||||
},
|
||||
getTableData () {
|
||||
this.tools.loading = false
|
||||
this.tableData = [
|
||||
{
|
||||
tagName: '我的IP库',
|
||||
buildIn: 0,
|
||||
id: 1,
|
||||
tagType: 'ip',
|
||||
remark: '我的IP库描述',
|
||||
updateTime: new Date()
|
||||
},
|
||||
{
|
||||
tagName: '我的domain库',
|
||||
buildIn: 0,
|
||||
id: 2,
|
||||
tagType: 'domain',
|
||||
remark: '我的domain库描述',
|
||||
updateTime: new Date()
|
||||
}
|
||||
]
|
||||
this.pageObj.total = 2
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,28 +1,306 @@
|
||||
<template>
|
||||
<el-form :model="editObject" label-position="left" label-width="120px" ref="form">
|
||||
<div class="edit-knowledge-base">
|
||||
<div class="edit-knowledge-base__header">{{$t('knowledgeBase.createKnowledgeBase')}}</div>
|
||||
<div class="edit-knowledge-base__body">
|
||||
<el-steps direction="vertical" :active="activeStep">
|
||||
<el-step v-for="(height, index) in stepHeights" :style="`flex-basis: ${height}px;`" :key="index"></el-step>
|
||||
</el-steps>
|
||||
<el-collapse v-model="activeCollapses">
|
||||
<el-collapse-item name="0">
|
||||
<template #title><div class="form-sub-title">{{$t('knowledgeBase.editInformation')}}</div></template>
|
||||
<el-form :model="editObject" label-position="top" ref="form" :rules="rules">
|
||||
<!--name-->
|
||||
<el-form-item :label="$t('config.roles.name')" prop="name">
|
||||
<el-input maxlength="64" placeholder="" id="role-box-input-name"
|
||||
show-word-limit size="small" type="text" v-model="editObject.tagName"></el-input>
|
||||
<el-form-item :label="$t('config.roles.name')" prop="tagName">
|
||||
<el-input maxlength="64" placeholder="" :disabled="!!editObject.id" show-word-limit size="mini" type="text" v-model="editObject.tagName"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.roles.name')" prop="name">
|
||||
<el-input maxlength="64" placeholder="" id="role-box-input-name"
|
||||
show-word-limit size="small" type="text" v-model="editObject.tagName"></el-input>
|
||||
<el-form-item :label="$t('overall.type')" prop="tagType">
|
||||
<el-select v-model="editObject.tagType"
|
||||
class="form-select"
|
||||
placeholder=" "
|
||||
popper-class="form-select-popper"
|
||||
:disabled="!!editObject.id"
|
||||
size="mini"
|
||||
>
|
||||
<template v-for="type in knowledgeBaseType" :key="type.name">
|
||||
<el-option :label="type.name" :value="type.value"></el-option>
|
||||
</template>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('overall.remark')">
|
||||
<el-input maxlength="256" show-word-limit :rows="2" size='mini' type="textarea" v-model="editObject.remark" id="role-box-input-remark"/>
|
||||
<el-input maxlength="256" show-word-limit :rows="4" size='mini' type="textarea" v-model="editObject.remark" id="role-box-input-remark"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item name="1" class="upload-collapse">
|
||||
<template #title><div class="form-sub-title">{{$t('overall.importFromFile')}}</div></template>
|
||||
<el-upload :action="`${baseUrl}knowledge/import`"
|
||||
:headers="uploadHeaders"
|
||||
:data="uploadParams"
|
||||
:multiple="false"
|
||||
:file-list="fileList"
|
||||
:on-change="fileChange"
|
||||
:on-success="uploadSuccess"
|
||||
:class="uploadErrorTip ? 'el-upload--error' : ''"
|
||||
drag
|
||||
accept=".csv"
|
||||
ref="upload"
|
||||
>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">
|
||||
<div>{{$t('knowledgeBase.dropFileHereOr')}}<em>{{$t('knowledgeBase.clickToUpload')}}</em></div>
|
||||
<div class="upload-tip">{{$t('knowledgeBase.supportCsv')}}</div>
|
||||
</div>
|
||||
</el-upload>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div class="upload-error-tip" v-if="uploadErrorTip">{{uploadErrorTip}}</div>
|
||||
</transition>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item name="2">
|
||||
<template #title><div class="form-sub-title">{{$t('overall.preview')}}</div></template>
|
||||
<div class="skeleton-border" v-if="!uploaded">
|
||||
<el-skeleton>
|
||||
<template #template>
|
||||
<div v-for="item of 6" :key="item" class="skeleton-item-row">
|
||||
<el-skeleton-item variant="text" style="width: calc(33% - 25px); margin-right: 38px;"/>
|
||||
<el-skeleton-item variant="text" style="width: calc(33% - 25px); margin-right: 38px;"/>
|
||||
<el-skeleton-item variant="text" style="width: calc(33% - 26px);"/>
|
||||
</div>
|
||||
</template>
|
||||
</el-skeleton>
|
||||
<div class="skeleton-tip">{{$t('knowledgeBase.skeletonTip')}}</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="imported-tip"><i class="cn-icon cn-icon-baocuo"/>
|
||||
{{$t('knowledgeBase.importTip', { total: originalImportInfo.total, succeeded: originalImportInfo.succeeded, failed: originalImportInfo.failed })}}
|
||||
</div>
|
||||
<div class="imported-table-box" :class="previewErrorTip ? 'imported-table-box--error' : ''">
|
||||
<table class="imported-table" v-if="!importedDataNoData">
|
||||
<tr>
|
||||
<th width="230">{{importedTableFirstColumn}}</th>
|
||||
<th width="180">Label</th>
|
||||
<th>{{$t('overall.import')}}</th>
|
||||
<th width="16"></th>
|
||||
</tr>
|
||||
<tr v-for="(d, i) in showImportedData" :key="importedType + d.tagItem + d.tagValue + i">
|
||||
<td class="imported-data-item" :title="d.tagItem">{{d.tagItem}}</td>
|
||||
<td class="imported-data-value" :title="d.tagValue">{{d.tagValue}}</td>
|
||||
<td class="imported-data-msg" :title="d.msg"><i :class="d.status === 1 ? 'el-icon-success' : 'el-icon-error'"></i> {{d.msg}}</td>
|
||||
<td><i class="el-icon-close" @click="removeImportedData(d)"></i></td>
|
||||
</tr>
|
||||
</table>
|
||||
<chart-no-data v-else></chart-no-data>
|
||||
<Pagination
|
||||
class="imported-pagination"
|
||||
:page-obj="importedPageObj"
|
||||
:store-page-no-on-url="false"
|
||||
layout="prev,pager,next"
|
||||
@pageNo='pageNo'
|
||||
@prev-click="prev"
|
||||
@next-click="next"
|
||||
></Pagination>
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div class="preview-error-tip" v-if="previewErrorTip">{{previewErrorTip}}</div>
|
||||
</transition>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
<div class="edit-knowledge-base__footer">
|
||||
<button class="footer__btn footer__btn--light">
|
||||
<span>{{$t('overall.cancel')}}</span>
|
||||
</button>
|
||||
<button :class="{'footer__btn--disabled': blockOperation.save}" :disabled="blockOperation.save" class="footer__btn" @click="save">
|
||||
<span>{{$t('overall.save')}}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useRoute } from 'vue-router'
|
||||
import { ref } from 'vue'
|
||||
import _ from 'lodash'
|
||||
import { knowledgeBaseType, storageKey } from '@/utils/constants'
|
||||
import i18n from '@/i18n'
|
||||
import Pagination from '@/components/common/Pagination'
|
||||
import ChartNoData from '@/views/charts/charts/ChartNoData'
|
||||
import axios from 'axios'
|
||||
import { api } from '@/utils/api'
|
||||
export default {
|
||||
name: 'CreateKnowledgeBase',
|
||||
components: {
|
||||
Pagination,
|
||||
ChartNoData
|
||||
},
|
||||
methods: {
|
||||
fileChange (files, fileList) {
|
||||
this.fileList = fileList.slice(-1)
|
||||
},
|
||||
uploadSuccess (response) {
|
||||
this.uploaded = response.code === 200
|
||||
if (response.code === 200) {
|
||||
// 上传成功后去掉upload和preview的错误提示
|
||||
this.uploadErrorTip = ''
|
||||
this.previewErrorTip = ''
|
||||
|
||||
this.importedType = this.editObject.tagType
|
||||
const originalImportedData = response.data.data
|
||||
this.originalImportInfo = {
|
||||
total: originalImportedData.length,
|
||||
succeeded: originalImportedData.filter(d => d.status === 1).length,
|
||||
failed: originalImportedData.filter(d => d.status !== 1).length
|
||||
}
|
||||
originalImportedData.sort((a, b) => b.status - a.status)
|
||||
this.importedData = originalImportedData
|
||||
this.handleShowImportedData()
|
||||
}
|
||||
},
|
||||
handleShowImportedData () {
|
||||
const startIndex = (this.importedPageObj.pageNo - 1) * this.importedPageObj.pageSize
|
||||
const endIndex = this.importedPageObj.pageNo * this.importedPageObj.pageSize
|
||||
this.showImportedData = this.importedData.slice(startIndex, endIndex)
|
||||
},
|
||||
pageNo (val) {
|
||||
this.importedPageObj.pageNo = val
|
||||
},
|
||||
prev () {
|
||||
this.importedPageObj.pageNo--
|
||||
},
|
||||
next () {
|
||||
this.importedPageObj.pageNo++
|
||||
},
|
||||
removeImportedData (data) {
|
||||
const toRemoveIndex = this.importedData.findIndex(d => d.tagName === data.tagName && d.tagItem === data.tagItem)
|
||||
this.importedData.splice(toRemoveIndex, 1)
|
||||
this.importedPageObj.total = this.importedData.length
|
||||
this.handleShowImportedData()
|
||||
// 若删除后本页无数据，则页码减1，或者提示无数据
|
||||
if (this.showImportedData.length === 0) {
|
||||
if (this.importedData.length > 0) {
|
||||
this.importedPageObj.pageNo--
|
||||
this.handleShowImportedData()
|
||||
} else {
|
||||
this.importedDataNoData = true
|
||||
}
|
||||
}
|
||||
// 删除后若有错误提示且列表中不再有错误项，则清空错误提示
|
||||
if (!this.hasErrorImportedData() && this.previewErrorTip) {
|
||||
this.previewErrorTip = ''
|
||||
}
|
||||
},
|
||||
save () {
|
||||
if (this.blockOperation.save) { return }
|
||||
this.blockOperation.save = true
|
||||
// 校验form + upload + preview
|
||||
let formValid
|
||||
this.$refs.form.validate(valid => {
|
||||
formValid = valid
|
||||
})
|
||||
|
||||
if (!this.uploaded) {
|
||||
this.uploadErrorTip = this.$t('validate.required')
|
||||
} else {
|
||||
this.uploadErrorTip = ''
|
||||
}
|
||||
|
||||
if (this.importedData.length === 0) {
|
||||
this.previewErrorTip = this.$t('validate.required')
|
||||
} else if (this.hasErrorImportedData()) {
|
||||
this.previewErrorTip = this.$t('validate.pleaseCheckForErrorItem')
|
||||
} else {
|
||||
this.previewErrorTip = ''
|
||||
}
|
||||
|
||||
// 校验通过后组织数据、请求接口
|
||||
if (formValid && !this.uploadErrorTip && !this.previewErrorTip) {
|
||||
try {
|
||||
const postData = {
|
||||
tagName: this.editObject.tagName,
|
||||
tagType: this.editObject.tagType,
|
||||
data: []
|
||||
}
|
||||
this.importedData.forEach(d => {
|
||||
const findData = postData.data.find(d2 => d2.tagValue === d.tagValue)
|
||||
if (findData) {
|
||||
findData.itemList.add(d.tagItem)
|
||||
} else {
|
||||
const set = new Set()
|
||||
set.add(d.tagItem)
|
||||
postData.data.push({
|
||||
tagValue: d.tagValue,
|
||||
itemList: set
|
||||
})
|
||||
}
|
||||
})
|
||||
postData.data.forEach(d => {
|
||||
d.itemList = [...d.itemList]
|
||||
})
|
||||
axios.post(this.url, postData).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
|
||||
this.$router.push({
|
||||
path: this.url,
|
||||
t: +new Date()
|
||||
})
|
||||
} else {
|
||||
this.$message.error(response.msg)
|
||||
}
|
||||
}).finally(() => {
|
||||
this.blockOperation.save = false
|
||||
})
|
||||
} finally {
|
||||
this.blockOperation.save = false
|
||||
}
|
||||
} else {
|
||||
this.blockOperation.save = false
|
||||
}
|
||||
},
|
||||
hasErrorImportedData () {
|
||||
return this.importedData.filter(d => d.status !== 1).length > 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
uploadParams () {
|
||||
return {
|
||||
type: this.editObject.tagType
|
||||
}
|
||||
},
|
||||
importedTableFirstColumn () {
|
||||
const t = this.knowledgeBaseType.find(t => t.value === this.importedType)
|
||||
return t ? t.name : ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
activeCollapses (n) {
|
||||
const index0 = n.indexOf('0')
|
||||
const index1 = n.indexOf('1')
|
||||
if (index0 > -1) {
|
||||
if (this.stepHeights[0] === this.stepHeightConstant.collapse) {
|
||||
this.stepHeights.splice(0, 1, this.stepHeightConstant.first)
|
||||
}
|
||||
} else {
|
||||
if (this.stepHeights[0] === this.stepHeightConstant.first) {
|
||||
this.stepHeights.splice(0, 1, this.stepHeightConstant.collapse)
|
||||
}
|
||||
}
|
||||
if (index1 > -1) {
|
||||
if (this.stepHeights[1] === this.stepHeightConstant.collapse) {
|
||||
this.stepHeights.splice(1, 1, this.stepHeightConstant.second)
|
||||
}
|
||||
} else {
|
||||
if (this.stepHeights[1] === this.stepHeightConstant.second) {
|
||||
this.stepHeights.splice(1, 1, this.stepHeightConstant.collapse)
|
||||
}
|
||||
}
|
||||
},
|
||||
importedData (n) {
|
||||
this.importedPageObj.total = n.length
|
||||
},
|
||||
'importedPageObj.pageNo': {
|
||||
handler (n) {
|
||||
this.handleShowImportedData()
|
||||
}
|
||||
}
|
||||
},
|
||||
setup () {
|
||||
const { query } = useRoute()
|
||||
@@ -32,20 +310,77 @@ export default {
|
||||
tagName: '',
|
||||
buildIn: '',
|
||||
id: '',
|
||||
tagType: '',
|
||||
tagType: 'ip',
|
||||
remark: '',
|
||||
updateTime: ''
|
||||
}
|
||||
// form绑定的对象
|
||||
const editObject = ref(_.cloneDeep(blankObject))
|
||||
// 折叠组件控制
|
||||
const activeCollapses = ref(['0', '1', '2'])
|
||||
// 步骤条控制
|
||||
const activeStep = ref('')
|
||||
const stepHeightConstant = {
|
||||
collapse: 58,
|
||||
first: 333,
|
||||
second: 284
|
||||
}
|
||||
const stepHeights = ref([stepHeightConstant.first, stepHeightConstant.second, stepHeightConstant.collapse])
|
||||
// 表单校验规则
|
||||
const rules = {
|
||||
tagName: [
|
||||
{ required: true, message: i18n.global.t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
tagType: [
|
||||
{ required: true, message: i18n.global.t('validate.required'), trigger: 'change' }
|
||||
]
|
||||
}
|
||||
// 所有导入的数据
|
||||
const importedData = ref([])
|
||||
// 导入数据的原始数量信息
|
||||
const originalImportInfo = ref({
|
||||
total: null,
|
||||
succeeded: null,
|
||||
failed: null
|
||||
})
|
||||
// table中显示的导入的数据
|
||||
const showImportedData = ref([])
|
||||
const importedPageObj = ref({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
total: null
|
||||
})
|
||||
const importedType = ref('')
|
||||
// 没上传过文件的提示
|
||||
const uploadErrorTip = ref('')
|
||||
// 预览区无内容的提示
|
||||
const previewErrorTip = ref('')
|
||||
return {
|
||||
knowledgeBaseId,
|
||||
editObject,
|
||||
blankObject
|
||||
blankObject,
|
||||
activeCollapses,
|
||||
activeStep,
|
||||
stepHeightConstant,
|
||||
stepHeights,
|
||||
knowledgeBaseType,
|
||||
rules,
|
||||
importedData,
|
||||
showImportedData,
|
||||
importedPageObj,
|
||||
importedType,
|
||||
baseUrl: BASE_CONFIG.baseUrl,
|
||||
fileList: ref([]),
|
||||
uploadHeaders: {
|
||||
'Cn-Authorization': localStorage.getItem(storageKey.token)
|
||||
},
|
||||
uploaded: ref(false),
|
||||
importedDataNoData: ref(false),
|
||||
url: api.knowledgeBase,
|
||||
originalImportInfo,
|
||||
uploadErrorTip,
|
||||
previewErrorTip
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user