533 lines
18 KiB
Vue
533 lines
18 KiB
Vue
<template>
|
||
<div style="height: 100%;overflow:auto;" class="knowledge-base">
|
||
<div class="top-title">
|
||
{{$t('overall.knowledgeBase')}}
|
||
</div>
|
||
<div class="knowledge-base__content" >
|
||
<div class="left-filter" style="">
|
||
<knowledge-filter ref="knowledgeFilter"
|
||
:keyWord="keyWord"
|
||
@reload="reload"
|
||
@clearList="clearList"></knowledge-filter>
|
||
</div>
|
||
<div class="right-list-card" >
|
||
<div class="top-tools" >
|
||
<div class="top-tools__left">
|
||
<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 v-if="listMode === 'block'" id="knowledge-base-select" :title="$t('knowledgeBase.select')" class="top-tool-btn margin-r-10"
|
||
style="width:72px;"
|
||
@click="toSelect">
|
||
<i class="cn-icon-select cn-icon" ></i>
|
||
<span>{{$t('overall.select')}}</span>
|
||
</button>
|
||
<button v-if="listMode === 'list'" id="knowledge-base-edit" :title="$t('knowledgeBase.editKnowledgeBase')" class="top-tool-btn margin-r-10" :disabled="disableEdit"
|
||
style="width:72px;"
|
||
@click="editSelectRecord">
|
||
<i class="cn-icon-edit cn-icon" ></i>
|
||
<span>{{$t('overall.edit')}}</span>
|
||
</button>
|
||
<button id="knowledge-base-delete" :title="$t('knowledgeBase.deleteKnowledgeBase')" class="top-tool-btn margin-r-10"
|
||
style="width:72px;" :disabled="disableDelete"
|
||
@click="toDelete">
|
||
<i class="cn-icon-delete cn-icon"></i>
|
||
<span>{{$t('overall.delete')}}</span>
|
||
</button>
|
||
<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="top-tools__right" >
|
||
<el-button-group size="mini">
|
||
<el-button size="mini" @click="modeChange('list')" :class="{'active': listMode === 'list'}"><i class="cn-icon cn-icon-list"></i></el-button>
|
||
<el-button size="mini" @click="modeChange('block')" :class="{'active': listMode === 'block'}"><i class="cn-icon cn-icon-blocks"></i></el-button>
|
||
</el-button-group>
|
||
</div>
|
||
</div>
|
||
<!-- 列表式 -->
|
||
<template v-if="listMode === 'list'">
|
||
<div class="list-mode__row" style="position:relative;">
|
||
<loading :loading="loading"></loading>
|
||
<knowledge-base-table-for-row
|
||
ref="dataTable"
|
||
height="100%"
|
||
:api="url"
|
||
:isNoData="isNoData"
|
||
:custom-table-title="tools.customTableTitle"
|
||
:table-data="tableData"
|
||
:is-selected-status="isSelectedStatus"
|
||
:all-count="18"
|
||
@delete="toDelete"
|
||
@selectionChange="selectionChange"
|
||
@edit="edit"
|
||
@orderBy="tableDataSort"
|
||
@reload="reloadRowList"
|
||
@toggleLoading="toggleLoading"
|
||
></knowledge-base-table-for-row>
|
||
</div>
|
||
</template>
|
||
<!-- 卡片式 -->
|
||
<template v-else-if="listMode === 'block'">
|
||
<div class="list-mode__card" style="position:relative;">
|
||
<loading :loading="loading"></loading>
|
||
<knowledge-base-table-for-card
|
||
ref="dataTableCard"
|
||
:api="url"
|
||
:isNoData="isNoData"
|
||
:custom-table-title="tools.customTableTitle"
|
||
:table-data="tableData"
|
||
:is-selected-status="isSelectedStatus"
|
||
:all-count="18"
|
||
@delete="toDelete"
|
||
@checkboxStatusChange="checkboxStatusChange"
|
||
@reload="reloadRowList"
|
||
@toggleLoading="toggleLoading"
|
||
></knowledge-base-table-for-card>
|
||
</div>
|
||
</template>
|
||
<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="knowledgeId" label="ID" width="50"></el-table-column>
|
||
<el-table-column property="name" label="Name"></el-table-column>
|
||
<el-table-column property="category" label="Category" width="100" :formatter = "categoryFormat"></el-table-column>
|
||
<el-table-column property="source" label="Source" width="110" :formatter = "sourceFormat"></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 dataListMixin from '@/mixins/data-list'
|
||
import KnowledgeBaseTableForCard from '@/components/table/setting/knowledgeBaseTableForCard'
|
||
import KnowledgeBaseTableForRow from '@/components/table/setting/KnowledgeBaseTableForRow'
|
||
import { api } from '@/utils/api'
|
||
import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
|
||
import { knowledgeBaseCategory, knowledgeBaseSource } from '@/utils/constants'
|
||
import axios from 'axios'
|
||
import KnowledgeFilter from '@/views/setting/KnowledgeFilter'
|
||
|
||
export default {
|
||
name: 'knowledgeBase',
|
||
components: {
|
||
KnowledgeBaseTableForCard,
|
||
KnowledgeBaseTableForRow,
|
||
KnowledgeFilter
|
||
},
|
||
mixins: [dataListMixin],
|
||
data () {
|
||
return {
|
||
url: api.knowledgeBase,
|
||
listUrl: api.knowledgeBaseList,
|
||
tableId: 'knowledgeBaseTable', // 需要分页的table的id，用于记录每页数量
|
||
isSelectedStatus: false,
|
||
filterParams: {},
|
||
checkedCategoryIds: [],
|
||
checkedStatusIds: [],
|
||
keyWord: '',
|
||
showConfirmDialog: false,
|
||
delItemList: [],
|
||
secondBatchDeleteObjs: [],
|
||
listMode: 'list' // 列表的模式，list|block
|
||
}
|
||
},
|
||
watch: {
|
||
},
|
||
methods: {
|
||
onSearch () {
|
||
const params = {
|
||
...this.filterParams,
|
||
name: this.keyWord
|
||
}
|
||
this.clearList()
|
||
this.search(params)
|
||
this.$refs.knowledgeFilter.reloadFilter(this.checkedCategoryIds, this.checkedStatusIds)
|
||
},
|
||
reloadRowList () {
|
||
this.getTableData()
|
||
this.$refs.knowledgeFilter.reloadFilter()
|
||
},
|
||
categoryFormat (row, column) {
|
||
const category = row.category
|
||
const t = knowledgeBaseCategory.find(t => t.value === category)
|
||
return t ? t.name : category
|
||
},
|
||
sourceFormat (row, column) {
|
||
const source = row.source
|
||
const t = knowledgeBaseSource.find(t => t.value === source)
|
||
return t ? t.name : source
|
||
},
|
||
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
|
||
},
|
||
selectionChange (objs) {
|
||
this.batchDeleteObjs = []
|
||
objs.forEach(obj => {
|
||
const delObj = this.batchDeleteObjs.find(item => item.knowledgeId === obj.knowledgeId)
|
||
if (delObj === undefined) {
|
||
this.batchDeleteObjs.push(obj)
|
||
}
|
||
})
|
||
if (this.batchDeleteObjs.length === 1) {
|
||
this.disableEdit = false
|
||
} else {
|
||
this.disableEdit = true
|
||
}
|
||
if (this.batchDeleteObjs.length >= 1) {
|
||
this.disableDelete = false
|
||
} else {
|
||
this.disableDelete = true
|
||
}
|
||
},
|
||
checkboxStatusChange (isCheck, data) {
|
||
if (isCheck) {
|
||
const delObj = this.batchDeleteObjs.find(item => item.knowledgeId === data.knowledgeId)
|
||
if (delObj === undefined) {
|
||
this.batchDeleteObjs.push(data)
|
||
}
|
||
} else {
|
||
const cancleObjIndex = this.batchDeleteObjs.findIndex(item => item.knowledgeId === data.knowledgeId)
|
||
if (cancleObjIndex > -1) {
|
||
this.batchDeleteObjs.splice(cancleObjIndex, 1)
|
||
}
|
||
}
|
||
if (this.batchDeleteObjs.length === 1) {
|
||
this.disableEdit = false
|
||
} else {
|
||
this.disableEdit = true
|
||
}
|
||
if (this.batchDeleteObjs.length >= 1) {
|
||
this.disableDelete = false
|
||
} else {
|
||
this.disableDelete = true
|
||
}
|
||
},
|
||
delBatchKnowledge () {
|
||
const ids = []
|
||
if (this.secondBatchDeleteObjs && this.secondBatchDeleteObjs.length > 0) {
|
||
this.secondBatchDeleteObjs.forEach(item => {
|
||
ids.push(item.knowledgeId)
|
||
})
|
||
}
|
||
if (ids.length === 0) {
|
||
this.$alert(this.$t('tip.pleaseSelect'), {
|
||
confirmButtonText: this.$t('tip.yes'),
|
||
type: 'warning'
|
||
}).catch(() => {})
|
||
} else {
|
||
this.toggleLoading(true)
|
||
axios.delete(this.url + '?knowledgeIds=' + 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 = []
|
||
delete this.searchLabel.category
|
||
delete this.searchLabel.source
|
||
this.getTableData()
|
||
} else {
|
||
this.$message.error(response.data.message)
|
||
}
|
||
}).finally(() => {
|
||
this.toggleLoading(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) {
|
||
this.object = response.data.data.list[0]
|
||
console.info(this.object)
|
||
}
|
||
}).catch(e => {
|
||
console.error(e)
|
||
if (e.response.data && e.response.data.message) {
|
||
this.$message.error(e.response.data.message)
|
||
} else {
|
||
this.$message.error(this.$t('tip.somethingWentWrong'))
|
||
}
|
||
})
|
||
},
|
||
reload (params, isAll, isClearType, checkedCategoryIds, checkedStatusIds) {
|
||
this.disableDelete = true
|
||
this.isSelectedStatus = false
|
||
this.batchDeleteObjs = []
|
||
this.secondBatchDeleteObjs = []
|
||
this.filterParams = params
|
||
this.checkedCategoryIds = checkedCategoryIds
|
||
this.checkedStatusIds = checkedStatusIds
|
||
params = {
|
||
...params,
|
||
name: this.keyWord
|
||
}
|
||
this.getTableData(params, isAll, isClearType)
|
||
},
|
||
clearList () {
|
||
this.disableDelete = true
|
||
this.isSelectedStatus = false
|
||
this.batchDeleteObjs = []
|
||
this.secondBatchDeleteObjs = []
|
||
this.tableData = []
|
||
this.pageObj.total = 0
|
||
},
|
||
toSelect () {
|
||
this.$refs.dataTableCard.clearSelect()
|
||
this.isSelectedStatus = !this.isSelectedStatus
|
||
this.disableDelete = true
|
||
this.batchDeleteObjs = []
|
||
this.secondBatchDeleteObjs = []
|
||
},
|
||
editSelectRecord () {
|
||
if (this.batchDeleteObjs.length === 0) {
|
||
this.$alert(this.$t('tip.pleaseSelectForEdit'), {
|
||
confirmButtonText: this.$t('tip.yes'),
|
||
type: 'warning'
|
||
}).catch(() => {})
|
||
} else {
|
||
this.jumpToEditPage(this.batchDeleteObjs[0].knowledgeId)
|
||
}
|
||
},
|
||
toDelete (data) {
|
||
if (data && data.knowledgeId) {
|
||
this.secondBatchDeleteObjs = []
|
||
this.batchDeleteObjs = []
|
||
this.secondBatchDeleteObjs.push(data)
|
||
this.batchDeleteObjs.push(data)
|
||
}
|
||
this.showDelDialog()
|
||
},
|
||
modeChange (mode) {
|
||
this.disableDelete = true
|
||
this.isSelectedStatus = false
|
||
this.batchDeleteObjs = []
|
||
this.secondBatchDeleteObjs = []
|
||
this.listMode = mode
|
||
if (this.$refs.dataTableCard) {
|
||
this.$refs.dataTableCard.clearSelect()
|
||
}
|
||
const { query } = this.$route
|
||
const newUrl = urlParamsHandler(window.location.href, query, { listMode: mode })
|
||
overwriteUrl(newUrl)
|
||
},
|
||
del (row) {
|
||
this.$confirm(this.$t('tip.confirmDelete'), {
|
||
confirmButtonText: this.$t('tip.yes'),
|
||
cancelButtonText: this.$t('tip.no'),
|
||
type: 'warning'
|
||
}).then(() => {
|
||
this.toggleLoading(true)
|
||
axios.delete(this.url + '?knowledgeIds=' + row.id).then(response => {
|
||
if (response.data.code === 200) {
|
||
this.delFlag = true
|
||
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
|
||
delete this.searchLabel.category
|
||
delete this.searchLabel.source
|
||
this.getTableData()
|
||
} else {
|
||
this.$message.error(response.data.message)
|
||
}
|
||
}).catch(e => {
|
||
console.error(e)
|
||
if (e.response.data && e.response.data.message) {
|
||
this.$message.error(e.response.data.message)
|
||
} else {
|
||
this.$message.error(this.$t('tip.somethingWentWrong'))
|
||
}
|
||
}).finally(() => {
|
||
this.toggleLoading(false)
|
||
})
|
||
}).catch(() => {})
|
||
},
|
||
jumpToEditPage (id) {
|
||
const pageNo = this.$router.currentRoute.value.query.pageNo
|
||
this.$router.push({
|
||
path: '/knowledgeBase/edit',
|
||
query: {
|
||
t: +new Date(),
|
||
pageNoForTable: pageNo || 1,
|
||
id: id,
|
||
listMode: this.listMode
|
||
}
|
||
})
|
||
},
|
||
jumpToCreatePage () {
|
||
this.$router.push({
|
||
path: '/knowledgeBase/create',
|
||
query: {
|
||
t: +new Date(),
|
||
listMode: this.listMode
|
||
}
|
||
})
|
||
}
|
||
},
|
||
mounted () {
|
||
const curMode = this.$router.currentRoute.value.query.listMode
|
||
this.listMode = curMode || 'list'
|
||
this.filterParams = {}
|
||
},
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
.el-dialog {
|
||
display: flex;
|
||
flex-direction: column; // 水平分布
|
||
margin: 0 !important;
|
||
position: absolute;
|
||
top: calc(50% - 150px);
|
||
left: calc(50% - 240px);
|
||
}
|
||
</style>
|