feat(knowledge): 添加元数据功能

- 新增元数据组件,用于管理文档的元数据
- 在知识详情页面添加元数据按钮,可打开元数据抽屉- 实现元数据的添加、编辑和删除功能
- 优化菜单和角色对话框的样式和布局
This commit is contained in:
du.meimei
2025-04-24 19:58:24 +08:00
parent c1a96c4e29
commit 3fa2fbfc9a
5 changed files with 392 additions and 26 deletions

View File

@@ -0,0 +1,236 @@
<template>
<div class="metaData-container">
<p class="title">
元数据是关于文档的数据用于描述文档的属性元数据可以帮助您更好地组织和管理文档
</p>
<el-button type="primary" size="medium" class="mt20 mb10" @click="addMetaData">
<i class="el-icon-plus"></i>添加元数据</el-button
>
<ul>
<li
v-for="(item, index) in list"
:key="index"
class="block flex justify-content-b"
>
<div class="flex">
<i class="el-icon-date"></i>
<p class="ml5 mr5">{{ item.value }}</p>
<p>{{ item.type }}</p>
</div>
<div class="flex align-items-c">
<div class="amount">{{ item.amount }}个值</div>
<div class="action-buttons">
<el-button type="text" icon="el-icon-edit" @click="editMetaData(index)"></el-button>
<el-button type="text" icon="el-icon-delete" @click="deleteMetaData(index)"></el-button>
</div>
</div>
</li>
</ul>
<div class="flex mt20">
<el-switch
v-model="value">
</el-switch>
<p class="ml5 fwb">内置</p>
<el-tooltip class="item" effect="dark" content="内置元数据是系统预定义的元数据,您可以在此处查看和管理内置元数据。" placement="top">
<i class="el-icon-info ml5" style="color: #909399;"></i>
</el-tooltip>
</div>
<ul>
<li
v-for="(item, index) in dataList"
:key="index"
class="flex justify-content-b"
>
<div class="flex">
<i class="el-icon-date"></i>
<p class="ml5 mr5">{{ item.value }}</p>
<p>{{ item.type }}</p>
</div>
<div>{{item.status}}</div>
</li>
</ul>
<!-- 新增元数据对话框 -->
<el-dialog :title="isEdit ? '编辑元数据' : '新增元数据'" append-to-body :visible.sync="dialogVisible" width="30%">
<el-form :model="metaDataForm" label-width="80px" label-position="top">
<el-form-item label="类型" >
<div class="type-selection">
<div
v-for="type in typeOptions"
:key="type"
class="type-option"
:class="{ active: metaDataForm.type === type }"
@click="metaDataForm.type = type"
>
{{ type }}
</div>
</div>
</el-form-item>
<el-form-item label="名称">
<el-input v-model="metaDataForm.name" placeholder="请输入元数据名称"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="medium" @click="handleCancel">取消</el-button>
<el-button type="primary" size="medium" @click="handleSave">保存</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'meteData',
data() {
return {
list: [
{
value: 'time',
type: 'string',
amount: 0
},
{
value: 'date',
type: 'string',
amount: 0
}
],
dataList: [
{
value: 'document_name',
type: 'string',
status: '已禁用'
},
{
value: 'upload_date',
type: 'string',
status: '已禁用'
}
],
value: false,
// 新增元数据对话框相关数据
dialogVisible: false,
metaDataForm: {
type: 'String',
name: ''
},
typeOptions: ['String', 'Number', 'Time'],
isEdit: false,
currentEditIndex: -1
}
},
methods: {
addMetaData() {
this.dialogVisible = true
this.metaDataForm = {
type: 'String',
name: ''
}
this.isEdit = false
},
handleCancel() {
this.dialogVisible = false
},
handleSave() {
if (!this.metaDataForm.name) {
this.$message.warning('请输入元数据名称')
return
}
if (this.isEdit) {
this.list[this.currentEditIndex].value = this.metaDataForm.name
this.list[this.currentEditIndex].type = this.metaDataForm.type.toLowerCase()
} else {
// 添加新的元数据到列表
this.list.push({
value: this.metaDataForm.name,
type: this.metaDataForm.type.toLowerCase(),
amount: 0
})
}
this.$message.success('保存元数据成功')
this.dialogVisible = false
},
editMetaData(index) {
this.dialogVisible = true
this.metaDataForm = {
type: this.list[index].type,
name: this.list[index].value
}
this.isEdit = true
this.currentEditIndex = index
},
deleteMetaData(index) {
this.$confirm(`确认删除该元数据吗?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.list.splice(index, 1)
this.$message.success('删除元数据成功')
})
}
}
}
</script>
<style lang="scss" scoped>
@import '@/assets/sass/renderSass/theme.scss';
.metaData-container {
.title{
color: #676f83;
font-size: 13px;
font-weight: 400;
line-height: 19px;
}
ul li {
list-style-type: none;
padding: 10px;
border: 1px solid rgb(234, 236, 240);
margin: 10px 0;
border-radius: 8px;
div {
p: first-child {
color:#101828;
}
p:last-child {
color: #676f83;
}
}
.amount {
color: #676f83;
}
.action-buttons {
display: none;
.el-button{
margin: 0;
padding: 0;
}
}
&:hover {
.action-buttons {
display: block;
}
.amount{
display: none;
}
}
}
}
.type-selection {
display: flex;
.type-option {
padding: 0 16px;
border: 1px solid #dcdfe6;
border-radius: 4px;
margin-right: 10px;
cursor: pointer;
&.active {
border-color: $--color-primary;
}
}
}
</style>

View File

@@ -62,13 +62,21 @@
@click="jumpAddKnowledge" @click="jumpAddKnowledge"
>上传知识</el-button >上传知识</el-button
> >
<!-- <el-button-->
<!-- type="primary"-->
<!-- icon="el-icon-s-promotion"-->
<!-- size="medium"-->
<!-- class="line-button"-->
<!-- @click="handleHitTestClick"-->
<!-- >命中测试</el-button-->
<!-- >-->
<el-button <el-button
type="primary" type="primary"
icon="el-icon-s-promotion" icon="el-icon-edit-outline"
size="medium" size="medium"
class="line-button" class="line-button"
@click="handleHitTestClick" @click="handleMetaData"
>命中测试</el-button >元数据</el-button
> >
</div> </div>
</div> </div>
@@ -179,6 +187,15 @@
> >
<hitTest></hitTest> <hitTest></hitTest>
</el-drawer> </el-drawer>
<!--元数据-->
<el-drawer
:title="meteDataDrawer.title"
:visible.sync="meteDataDrawer.visible"
size="30%"
>
<mete-data></mete-data>
</el-drawer>
</div> </div>
</template> </template>
<script> <script>
@@ -198,6 +215,8 @@ import DocumentDrawer from './components/documentDetail/DocumentDrawer.vue'
import knowledgeForm from '@/views/knowledge/detail/components/knowledgeForm.vue' import knowledgeForm from '@/views/knowledge/detail/components/knowledgeForm.vue'
import knowledgePng_1 from '@/assets/images/konwledge/konwledge-1.png' import knowledgePng_1 from '@/assets/images/konwledge/konwledge-1.png'
import hitTest from '@/views/knowledge/detail/components/HitTest/Index.vue' import hitTest from '@/views/knowledge/detail/components/HitTest/Index.vue'
import meteData from '@/views/knowledge/detail/components/meteData/Index.vue'
import MeteData from '@/views/knowledge/detail/components/meteData/Index.vue'
export default { export default {
name: 'index', name: 'index',
@@ -207,6 +226,10 @@ export default {
title: '命中测试', title: '命中测试',
visible: false visible: false
}, },
meteDataDrawer: {
title: '元数据',
visible: false
},
knowledgePng_1, knowledgePng_1,
datasetId: this.$route.query.datasetId, datasetId: this.$route.query.datasetId,
activeName: -1, activeName: -1,
@@ -243,6 +266,7 @@ export default {
props: {}, props: {},
watch: {}, watch: {},
components: { components: {
MeteData,
hitTest, hitTest,
knowledgeForm, knowledgeForm,
DocumentDrawer DocumentDrawer
@@ -437,6 +461,9 @@ export default {
*/ */
handleHitTestClick() { handleHitTestClick() {
this.hitTestConfig.visible = true this.hitTestConfig.visible = true
},
handleMetaData() {
this.meteDataDrawer.visible = true
} }
}, },
filters: { filters: {

View File

@@ -1,44 +1,96 @@
<template> <template>
<el-dialog :title="title" :visible.sync="visible" width="800px" append-to-body @close="handleClose"> <el-dialog
:title="title"
:visible.sync="visible"
width="800px"
append-to-body
@close="handleClose"
>
<el-form ref="form" :model="form" :rules="rules" label-width="100px"> <el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="父级菜单" prop="parentMenuId"> <el-form-item label="父级菜单" prop="parentMenuId">
<el-select v-model="form.parentMenuId" placeholder="请选择菜单类型" clearable size="small" :disabled="isView"> <el-select
<el-option v-for="item in listData" :key="item.id" :label="item.menuName" :value="item.id" /> v-model="form.parentMenuId"
placeholder="请选择菜单类型"
clearable
size="small"
:disabled="isView"
>
<el-option
v-for="item in listData"
:key="item.id"
:label="item.menuName"
:value="item.id"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="菜单名称" prop="menuName"> <el-form-item label="菜单名称" prop="menuName">
<el-input v-model="form.menuName" placeholder="请输入菜单名称" clearable size="small" :disabled="isView" /> <el-input
v-model="form.menuName"
placeholder="请输入菜单名称"
clearable
size="small"
:disabled="isView"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="菜单编码" prop="menuCode"> <el-form-item label="菜单编码" prop="menuCode">
<el-input v-model="form.menuCode" placeholder="请输入菜单编码" clearable size="small" :disabled="isView" /> <el-input
v-model="form.menuCode"
placeholder="请输入菜单编码"
clearable
size="small"
:disabled="isView"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="菜单地址" prop="url"> <el-form-item label="菜单地址" prop="url">
<el-input v-model="form.url" placeholder="请输入菜单地址" clearable size="small" :disabled="isView" /> <el-input
v-model="form.url"
placeholder="请输入菜单地址"
clearable
size="small"
:disabled="isView"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="菜单类型" prop="type"> <el-form-item label="菜单类型" prop="type">
<el-select v-model="form.type" placeholder="请选择菜单类型" clearable size="small" :disabled="isView"> <el-select
<el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" /> v-model="form.type"
placeholder="请选择菜单类型"
clearable
size="small"
:disabled="isView"
>
<el-option
v-for="item in typeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
<div slot="footer" class="dialog-footer" v-if="!isView"> <div slot="footer" class="dialog-footer" v-if="!isView">
<el-button type="primary" size="small" :loading="loading" @click="submitForm"> </el-button> <el-button
type="primary"
size="small"
:loading="loading"
@click="submitForm"
> </el-button
>
<el-button size="small" @click="handleClose"> </el-button> <el-button size="small" @click="handleClose"> </el-button>
</div> </div>
<div slot="footer" class="dialog-footer" v-else> <div slot="footer" class="dialog-footer" v-else>
@@ -85,8 +137,12 @@ export default {
type: '' type: ''
}, },
rules: { rules: {
menuCode: [{ required: true, message: '请输入菜单编码', trigger: 'blur' }], menuCode: [
menuName: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }], { required: true, message: '请输入菜单编码', trigger: 'blur' }
],
menuName: [
{ required: true, message: '请输入菜单名称', trigger: 'blur' }
],
url: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }], url: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
type: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }] type: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }]
}, },
@@ -146,7 +202,9 @@ export default {
const submitData = { ...this.form } const submitData = { ...this.form }
// 根据是否是编辑模式调用不同的API // 根据是否是编辑模式调用不同的API
const apiRequest = this.isEdit ? updateMenu(submitData) : addMenu(submitData) const apiRequest = this.isEdit
? updateMenu(submitData)
: addMenu(submitData)
apiRequest apiRequest
.then(response => { .then(response => {
@@ -156,7 +214,9 @@ export default {
this.handleClose() this.handleClose()
this.form = {} this.form = {}
} else { } else {
this.$message.error(response.msg || (this.isEdit ? '修改失败' : '添加失败')) this.$message.error(
response.msg || (this.isEdit ? '修改失败' : '添加失败')
)
this.form = {} this.form = {}
} }
}) })

View File

@@ -1,28 +1,58 @@
<template> <template>
<el-dialog :title="title" :visible.sync="visible" width="800px" append-to-body @close="handleClose"> <el-dialog
:title="title"
:visible.sync="visible"
width="800px"
append-to-body
@close="handleClose"
>
<el-form ref="form" :model="form" :rules="rules" label-width="100px"> <el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="角色名称" prop="roleName"> <el-form-item label="角色名称" prop="roleName">
<el-input v-model="form.roleName" placeholder="请输入角色名称" clearable size="small" :disabled="isView" /> <el-input
v-model="form.roleName"
placeholder="请输入角色名称"
clearable
size="small"
:disabled="isView"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="角色编码" prop="roleCode"> <el-form-item label="角色编码" prop="roleCode">
<el-input v-model="form.roleCode" placeholder="请输入角色编码" clearable size="small" :disabled="isView" /> <el-input
v-model="form.roleCode"
placeholder="请输入角色编码"
clearable
size="small"
:disabled="isView"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="角色描述" prop="remark"> <el-form-item label="角色描述" prop="remark">
<el-input v-model="form.remark" placeholder="请输入角色描述" clearable size="small" :disabled="isView" /> <el-input
v-model="form.remark"
placeholder="请输入角色描述"
clearable
size="small"
:disabled="isView"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
<div slot="footer" class="dialog-footer" v-if="!isView"> <div slot="footer" class="dialog-footer" v-if="!isView">
<el-button type="primary" size="small" :loading="loading" @click="submitForm"> </el-button> <el-button
type="primary"
size="small"
:loading="loading"
@click="submitForm"
> </el-button
>
<el-button size="small" @click="handleClose"> </el-button> <el-button size="small" @click="handleClose"> </el-button>
</div> </div>
<div slot="footer" class="dialog-footer" v-else> <div slot="footer" class="dialog-footer" v-else>
@@ -66,8 +96,12 @@ export default {
remark: '' remark: ''
}, },
rules: { rules: {
roleCode: [{ required: true, message: '请输入角色编码', trigger: 'blur' }], roleCode: [
roleName: [{ required: true, message: '请输入角色名称', trigger: 'blur' }] { required: true, message: '请输入角色编码', trigger: 'blur' }
],
roleName: [
{ required: true, message: '请输入角色名称', trigger: 'blur' }
]
}, },
loading: false loading: false
} }
@@ -100,7 +134,9 @@ export default {
const submitData = { ...this.form } const submitData = { ...this.form }
// 根据是否是编辑模式调用不同的API // 根据是否是编辑模式调用不同的API
const apiRequest = this.isEdit ? updateRole(submitData) : addRole(submitData) const apiRequest = this.isEdit
? updateRole(submitData)
: addRole(submitData)
apiRequest apiRequest
.then(response => { .then(response => {
@@ -109,7 +145,9 @@ export default {
this.$emit('submit', submitData) this.$emit('submit', submitData)
this.handleClose() this.handleClose()
} else { } else {
this.$message.error(response.msg || (this.isEdit ? '修改失败' : '添加失败')) this.$message.error(
response.msg || (this.isEdit ? '修改失败' : '添加失败')
)
this.form = {} this.form = {}
} }
}) })

View File

@@ -152,7 +152,12 @@ export default {
h( h(
'el-button', 'el-button',
{ {
props: { type: 'text', size: 'mini', icon: 'el-icon-edit-outline', title: '编辑' }, props: {
type: 'text',
size: 'mini',
icon: 'el-icon-edit-outline',
title: '编辑'
},
class: 'normal-button', class: 'normal-button',
on: { click: () => this.handleEdit(params.row) } on: { click: () => this.handleEdit(params.row) }
}, },