<template>
|
<div>
|
<div v-if="currentView === 'list'">
|
<!-- 创建知识库按钮 -->
|
<div class="header-container">
|
<el-input style="width: 200px;margin-right: 50px;" v-model="TreeDataPool.searchInput" placeholder="搜索" clearable @input="querySearchAsync('camera')">
|
<i class="el-icon-search el-input__icon" style="color: #dcdfe6" slot="prefix" @click="searchAreaData"></i>
|
</el-input>
|
<el-button type="primary" @click="openDialog('create')">
|
<i class="el-icon-plus"></i> 创建知识库
|
</el-button>
|
</div>
|
|
<!-- 通用弹窗组件 -->
|
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px" custom-class="custom-dialog"
|
@open="handleDialogOpen" @closed="handleDialogClose">
|
<el-form label-width="100px" :disabled="isViewMode" ref="form" :rules="formRules" :model="currentFile">
|
<el-form-item label="名称" prop="title">
|
<el-input v-model="currentFile.title" placeholder="请输入知识库名称" />
|
</el-form-item>
|
|
<el-form-item label="描述" prop="content">
|
<el-input type="textarea" :rows="6" v-model="currentFile.content" resize="none">
|
</el-input>
|
</el-form-item>
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="handleConfirm" v-if="!isViewMode">
|
确 定
|
</el-button>
|
</span>
|
</el-dialog>
|
|
<div class="file-manager-container">
|
|
<el-row v-if="files.length > 0" :gutter="20">
|
<el-col v-for="(file, index) in files" :key="file.checkId" :span="5" class="file-col">
|
<el-card class="file-card" @click.native="handleView(file)">
|
<!-- 文件标题部分 -->
|
<div class="file-header">
|
<span class="file-index" hidden>{{ index + 1 }}</span>
|
<i class="el-icon-document file-icon"></i>
|
<div class="file-title">{{ file.title }}</div>
|
</div>
|
|
<!-- 文件描述 -->
|
<div class="file-desc">
|
<!-- {{ file.content }} -->
|
</div>
|
|
<!-- 操作按钮组 -->
|
<div class="file-actions">
|
<el-button type="text" @click.stop="openDialog('edit', file)">
|
<i class="el-icon-edit"></i> 编辑
|
</el-button>|
|
<el-button type="text" @click.stop="handleView(file)"> <!-- 修改查看按钮事件 -->
|
<i class="el-icon-view"></i> 查看
|
</el-button>|
|
<el-button type="text" @click.stop="handleDelete(file)">
|
<i class="el-icon-delete"></i> 删除
|
</el-button>
|
</div>
|
</el-card>
|
</el-col>
|
</el-row>
|
|
<!-- 新增空状态显示 -->
|
<el-empty v-else description="暂无数据"></el-empty>
|
|
</div>
|
<div class="footer-container">
|
<el-pagination @current-change="handleCurrentChange" :page-size="16" layout="prev, pager, next"
|
:total="this.pagination.total">
|
</el-pagination>
|
</div>
|
</div>
|
<!-- 知识库详情视图 -->
|
<KnowLedgeFilesView v-if="currentView === 'detail'" :knowledge-id="currentKnowledgeId" @back="handleBackToList" />
|
</div>
|
</template>
|
|
<script>
|
import FileAPI from '@/api/KnowledgeView.ts'
|
import KnowLedgeFilesView from './KnowLedgeFilesView.vue' // 引入组件
|
|
export default {
|
components: {
|
KnowLedgeFilesView
|
},
|
data() {
|
return {
|
currentView: 'list', // 'list' 或 'detail'
|
currentKnowledgeId: null,
|
formRules: {},
|
pagination: {
|
page: 1,
|
pageSize: 16,
|
total: 0,
|
totalPage: 1
|
},
|
dialogVisible: false,
|
dialogType: 'create',
|
currentFile: this.initFile(),
|
form: {
|
fileName: '',
|
checkContent: '',
|
rangeValue: 0
|
},
|
files: []
|
}
|
},
|
mounted() {
|
this.fetchFiles()
|
},
|
computed: {
|
dialogTitle() {
|
return {
|
create: '创建知识库',
|
edit: '编辑知识库',
|
view: '知识库详情'
|
}[this.dialogType]
|
},
|
isViewMode() {
|
return this.dialogType === 'view'
|
}
|
},
|
methods: {
|
handleDialogOpen() {
|
this.$nextTick(() => {
|
this.$refs.form.clearValidate()
|
})
|
},
|
handleDialogClose() {
|
this.$refs.form.resetFields()
|
this.formRules = {}
|
},
|
async fetchFiles() {
|
try {
|
const res = await FileAPI.getKnowledges({
|
page: this.pagination.page,
|
pageSize: this.pagination.pageSize
|
})
|
const totalPage = res.data.pagination.totalPage
|
const currentPage = this.pagination.page > totalPage
|
? totalPage
|
: res.data.pagination.page
|
this.pagination = {
|
...this.pagination,
|
page: currentPage,
|
total: res.data.pagination.total,
|
totalPage: totalPage
|
}
|
this.files = res.data.list
|
this.pagination.total = res.data.pagination.total
|
this.pagination.totalPage = res.data.pagination.totalPage
|
} catch (error) {
|
this.$message.error('获取列表失败')
|
console.error('API Error:', error)
|
}
|
},
|
initFile() {
|
return {
|
id: null,
|
title: '',
|
content: ''
|
}
|
},
|
openDialog(type, file = null) {
|
if (type != 'view') {
|
this.formRules = {
|
title: [
|
{ required: true, message: '文件名称不能为空', trigger: 'blur' }
|
],
|
content: [
|
{ required: true, message: '检测内容不能为空', trigger: 'blur' }
|
]
|
}
|
}
|
this.dialogType = type
|
this.currentFile = file ? { ...file } : this.initFile()
|
this.dialogVisible = true
|
},
|
handleConfirm() {
|
this.$refs.form.validate(valid => {
|
if (valid) {
|
const operation = {
|
create: this.createFile,
|
edit: this.updateFile
|
}[this.dialogType]
|
|
operation && operation(this.currentFile)
|
this.dialogVisible = false
|
}
|
})
|
},
|
async createFile(file) {
|
try {
|
await FileAPI.createKnowledge({
|
title: file.title,
|
content: file.content
|
})
|
this.$message.success('添加成功')
|
this.fetchFiles()
|
} catch (error) {
|
this.$message.error('添加失败')
|
console.error('API Error:', error)
|
}
|
},
|
async updateFile(file) {
|
try {
|
await FileAPI.updateKnowledge({
|
id: file.id,
|
title: file.title,
|
content: file.content
|
})
|
this.$message.success('编辑成功')
|
this.fetchFiles()
|
} catch (error) {
|
this.$message.error('编辑失败')
|
console.error('API Error:', error)
|
}
|
},
|
handleCurrentChange(page) {
|
this.pagination.page = page
|
this.fetchFiles()
|
},
|
async handleDelete(file) {
|
this.$confirm('即将删除该知识库及其所有文件，所有内容将无法找回, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(async () => {
|
try {
|
await FileAPI.deleteKnowledgee({
|
id: file.id
|
}).then((rsp) => {
|
if (rsp && rsp.status === 200) {
|
// 删除成功后自动修正页码
|
if (this.files.length === 1 && this.pagination.page > 1) {
|
this.pagination.page -= 1
|
}
|
this.fetchFiles()
|
|
this.$message({
|
type: "success",
|
message: "删除成功"
|
})
|
} else {
|
this.$message({
|
type: "error",
|
message: rsp.msg
|
})
|
}
|
})
|
} catch (error) {
|
this.$message.error('删除失败')
|
console.error('API Error:', error)
|
}
|
}).catch(() => {
|
// this.$message({
|
// type: 'info',
|
// message: '已取消删除'
|
// });
|
});
|
},
|
// 新增：处理查看知识库详情
|
handleView(file) {
|
this.currentKnowledgeId = file.id
|
this.currentView = 'detail'
|
// this.$router.push({
|
// name: 'KnowledgeFiles',
|
// params: { id: file.id }
|
// })
|
},
|
// 返回列表方法
|
handleBackToList() {
|
this.currentView = 'list'
|
},
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
/* 新增按钮容器样式 */
|
.header-container {
|
display: flex;
|
justify-content: flex-end;
|
margin-top: 10px;
|
margin-right: 20px;
|
|
|
}
|
|
.footer-container {}
|
|
.file-manager-container {
|
min-height: 750px;
|
padding: 20px;
|
background: #fff;
|
position: relative;
|
/* 新增定位基准 */
|
|
.new-task-btn {
|
/* 移除绝对定位 */
|
position: absolute;
|
right: 30px;
|
top: 20px;
|
}
|
|
.file-col {
|
margin-bottom: 20px;
|
width: 300px;
|
}
|
|
.file-card {
|
cursor: pointer;
|
transition: all 0.3s;
|
border: 2px solid transparent;
|
|
// &.selected {
|
// border-color: #409EFF;
|
// }
|
|
.file-header {
|
display: flex;
|
align-items: center;
|
margin-bottom: 12px;
|
|
.file-index {
|
width: 24px;
|
height: 24px;
|
background: #409EFF;
|
color: white;
|
border-radius: 50%;
|
text-align: center;
|
line-height: 24px;
|
margin-right: 8px;
|
}
|
|
.file-icon {
|
color: #409EFF;
|
font-size: 24px;
|
margin-right: 8px;
|
}
|
|
.file-title {
|
font-weight: bold;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
}
|
|
.file-desc {
|
color: #666;
|
font-size: 12px;
|
line-height: 1.5; // 根据实际字体大小调整
|
height: 3em; // 2行 x 1.5行高 = 3em（推荐使用相对单位）
|
overflow: hidden;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-line-clamp: 2;
|
-webkit-box-orient: vertical;
|
margin-bottom: 12px;
|
text-align: left;
|
// 新增以下两行
|
word-wrap: break-word;
|
white-space: normal; // 或使用 pre-line
|
|
}
|
|
.file-actions {
|
width: 250px;
|
border-top: 1px solid #eee;
|
padding-top: 12px;
|
// text-align: right;
|
|
.el-button {
|
padding: 0 8px;
|
color: #666;
|
|
i {
|
margin-right: 4px;
|
}
|
}
|
}
|
}
|
}
|
|
/* 弹窗样式 */
|
:deep(.custom-dialog) {
|
border-radius: 8px;
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
.el-dialog__header {
|
border-bottom: 1px solid #ebeef5;
|
padding: 16px 20px;
|
|
.el-dialog__title {
|
font-size: 16px;
|
color: #303133;
|
}
|
}
|
|
.el-dialog__body {
|
padding: 20px 30px;
|
}
|
|
.dialog-input {
|
width: 80%;
|
|
.el-input__inner {
|
border-color: #dcdfe6;
|
}
|
}
|
|
.dialog-textarea {
|
.el-textarea__inner {
|
font-family: 'Microsoft YaHei', sans-serif;
|
line-height: 1.6;
|
color: #606266;
|
border-color: #dcdfe6;
|
}
|
}
|
|
.dialog-slider {
|
width: 70%;
|
margin-right: 20px;
|
flex: 1; // 滑块自适应宽度
|
}
|
|
.score-value {
|
color: rgb(4, 8, 12);
|
font-weight: bold;
|
margin-right: 15px;
|
}
|
|
.dialog-footer {
|
.el-button {
|
padding: 10px 20px;
|
|
&--primary {
|
background: #409EFF;
|
border-color: #409EFF;
|
}
|
}
|
}
|
}
|
|
.content-pre {
|
white-space: pre-wrap;
|
word-break: break-word;
|
margin: 0;
|
font-size: 13px;
|
line-height: 1.6;
|
}
|
</style>
|
