mirror of
http://112.124.100.131/ebiz-ai/ebiz-ai-knowledge-manage.git
synced 2025-12-09 02:46:50 +08:00
feat(knowledge): 添加元数据功能
- 新增元数据组件,用于管理文档的元数据 - 在知识详情页面添加元数据按钮,可打开元数据抽屉- 实现元数据的添加、编辑和删除功能 - 优化菜单和角色对话框的样式和布局
This commit is contained in:
236
src/views/knowledge/detail/components/meteData/Index.vue
Normal file
236
src/views/knowledge/detail/components/meteData/Index.vue
Normal 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>
|
||||||
@@ -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: {
|
||||||
|
|||||||
@@ -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 = {}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -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 = {}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -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) }
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user