mirror of
http://112.124.100.131/ebiz-ai/ebiz-ai-knowledge-manage.git
synced 2025-12-09 02:46:50 +08:00
6edd89b937
1. 修复了规则修改功能中组件显示错误问题 - 更新handleEdit函数中的条件判断逻辑，使其根据字符串类型的ruleType正确判断应显示哪个编辑组件 - 解决了无论规则类型如何都显示同一个组件的问题 2. 新增规则添加功能 - 添加add-rules组件，支持新增规则功能 3. 优化规则详情查看功能 - 完善Info组件，提升用户体验 4. 更新API配置 - 将API地址更新为生产环境地址
281 lines
8.5 KiB
Vue
281 lines
8.5 KiB
Vue
<script>
|
||
import { deleteRule, getRuleList } from '@/api/rules/index'
|
||
import EditPromptRule from './components/edit-prompt-rule/Index.vue'
|
||
import EditSplitRule from './components/edit-split-rule/Index.vue'
|
||
import AddRules from './components/add-rules/index.vue'
|
||
import Info from './components/info/index.vue'
|
||
import { h } from 'vue'
|
||
|
||
export default {
|
||
name: 'rules',
|
||
data() {
|
||
return {
|
||
columns: [],
|
||
tableConfig: {
|
||
columns: [
|
||
{ prop: 'ruleName', key: '规则名称' },
|
||
{ prop: 'ruleType', key: '规则类型' },
|
||
{ prop: 'createdDate', key: '创建时间' },
|
||
{
|
||
key: '操作',
|
||
render: (h, params) => {
|
||
return h('div', [
|
||
h('el-button', { props: { type: 'text', size: 'mini' }, on: { click: () => this.handleInfoVisiable(params.row) } }, '查看详情'),
|
||
h('el-button', { props: { type: 'text', size: 'mini' }, on: { click: () => this.handleEdit(params.row) } }, '修改'),
|
||
h('el-button', { props: { type: 'text', size: 'mini' }, on: { click: () => this.handleDelete(params.row) } }, '删除')
|
||
])
|
||
}
|
||
}
|
||
]
|
||
},
|
||
// 弹窗配置
|
||
dialogOptions: {
|
||
title: '',
|
||
visible: false,
|
||
width: '50%',
|
||
currentComponent: void 0,
|
||
currentRow: void 0
|
||
},
|
||
// 分页配置
|
||
currentPage: 1,
|
||
dirtyTable: { status: false },
|
||
tableData: [],
|
||
// 查询表单
|
||
form: {
|
||
query: true,
|
||
pickerOptions: void 0,
|
||
ruleType: '',
|
||
ruleName: '',
|
||
createdDate: []
|
||
}
|
||
}
|
||
},
|
||
provide() {
|
||
return {
|
||
dialogOptions: this.dialogOptions,
|
||
tableData: this.tableData
|
||
}
|
||
},
|
||
components: {
|
||
EditPromptRule,
|
||
EditSplitRule,
|
||
AddRules,
|
||
Info
|
||
},
|
||
computed: {
|
||
// 当前的分页数据
|
||
currentTableDate() {
|
||
let filteredData
|
||
// 过滤 table 列表,如果 form 相关项是空的，就不过滤
|
||
if (this.form.query) {
|
||
// 过滤 ruleType
|
||
const map = {
|
||
1: '提示词规则',
|
||
2: '知识拆分规则'
|
||
}
|
||
filteredData = this.tableData.filter(item => {
|
||
if (!this.form.ruleType) return true
|
||
return map[item.ruleType] === this.form.ruleType
|
||
})
|
||
|
||
// 过滤 ruleName
|
||
filteredData = filteredData.filter(item => {
|
||
if (!this.form.ruleName) return true
|
||
return item.ruleName === this.form.ruleName
|
||
})
|
||
|
||
// 过滤 createdDate
|
||
filteredData = filteredData.filter(item => {
|
||
if (!this.form.createdDate.length) return true
|
||
return item.createdDate >= this.form.createdDate[0] && item.createdDate <= this.form.createdDate[1]
|
||
})
|
||
} else {
|
||
filteredData = this.tableData
|
||
}
|
||
|
||
// TODO: 分页数据
|
||
const start = (this.currentPage - 1) * 10
|
||
const end = this.currentPage * 10
|
||
|
||
return filteredData.slice(start, end)
|
||
},
|
||
getTableData() {
|
||
// 需要处理 规则类型， 因为规则类型都是数字，需要转换成中文
|
||
return this.tableData.map(item => ({
|
||
...item,
|
||
ruleType: item.ruleType === 1 ? '提示词规则' : '知识拆分规则'
|
||
}))
|
||
},
|
||
// 查询表单的 ruleTypeOptions
|
||
ruleTypeOptions() {
|
||
const map = {
|
||
1: '提示词规则',
|
||
2: '知识拆分规则'
|
||
}
|
||
// 去重所有 ruleType， 然后映射成 option
|
||
const res = [...new Set(this.tableData.map(item => item.ruleType))].map(type => map[type])
|
||
return res
|
||
},
|
||
// 查询表单的 ruleNameOptions
|
||
ruleNameOptions() {
|
||
const res = [...new Set(this.tableData.map(item => item.ruleName))]
|
||
return res
|
||
}
|
||
},
|
||
watch: {
|
||
form: {
|
||
handler() {},
|
||
deep: true
|
||
}
|
||
},
|
||
beforeMount() {
|
||
getRuleList().then(res => {
|
||
const { content } = res.content
|
||
|
||
this.tableData = content.list
|
||
})
|
||
},
|
||
methods: {
|
||
handleCurrentChange(val) {
|
||
this.currentPage = val
|
||
},
|
||
// 处理查看规则详情
|
||
handleInfoVisiable(row) {
|
||
this.dialogOptions.title = '查看规则详情'
|
||
this.dialogOptions.currentComponent = 'Info'
|
||
this.dialogOptions.visible = true
|
||
this.dialogOptions.currentRow = row
|
||
},
|
||
// 处理修改规则
|
||
handleEdit(row, index) {
|
||
this.dialogOptions.title = '修改规则'
|
||
this.dialogOptions.currentComponent = row.ruleType === '知识拆分规则' ? 'EditPromptRule' : 'EditSplitRule'
|
||
this.dialogOptions.visible = true
|
||
this.dialogOptions.currentRow = row
|
||
},
|
||
// 处理删除规则
|
||
handleDelete(row, index) {
|
||
deleteRule([row.id])
|
||
.then(() => {
|
||
this.tableData.splice(index, 1)
|
||
})
|
||
.catch(err => {
|
||
this.$notify.error({
|
||
title: '删除失败',
|
||
message: h('i', { style: 'color: teal' }, '删除时出现错误，稍后再试' + err)
|
||
})
|
||
})
|
||
},
|
||
// 处理查询
|
||
handleQuery() {
|
||
this.form.query = true
|
||
},
|
||
// 处理重置
|
||
handleReset() {
|
||
this.form = {
|
||
query: true,
|
||
pickerOptions: void 0,
|
||
ruleType: '',
|
||
ruleName: '',
|
||
createdDate: []
|
||
}
|
||
},
|
||
// 处理新增
|
||
handleAdd() {
|
||
this.dialogOptions.title = '新增规则'
|
||
this.dialogOptions.visible = true
|
||
this.dialogOptions.currentComponent = "AddRules"
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="rules-container container">
|
||
<el-card>
|
||
<!-- <template #header>
|
||
<div class="card-header">
|
||
<h3>规则管理</h3>
|
||
</div>
|
||
</template> -->
|
||
<div class="card-body">
|
||
<el-form :model="form" label-width="100px">
|
||
<!-- 查询条件 -->
|
||
<el-row>
|
||
<!-- 规则类型 -->
|
||
<el-col :span="8">
|
||
<el-form-item label="规则类型">
|
||
<el-select v-model="form.ruleType" placeholder="请选择规则类型">
|
||
<el-option v-for="item in ruleTypeOptions" :key="item" :label="item" :value="item"> </el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<!-- 规则名称 -->
|
||
<el-col :span="8">
|
||
<el-form-item label="规则名称">
|
||
<el-select v-model="form.ruleName" placeholder="请选择规则名称">
|
||
<el-option v-for="item in ruleNameOptions" :key="item" :label="item" :value="item"> </el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<!-- 创建时间 -->
|
||
<el-col :span="8">
|
||
<el-form-item label="创建时间">
|
||
<el-date-picker
|
||
v-model="form.createdDate"
|
||
type="daterange"
|
||
unlink-panels
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
:picker-options="form.pickerOptions"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<!-- 功能按钮组： 查询、重置、新增规则 -->
|
||
<el-row class="p25">
|
||
<el-col :span="16">
|
||
<el-button type="primary" @click="handleQuery">查询</el-button>
|
||
<el-button type="info" @click="handleReset">重置</el-button>
|
||
<el-button type="primary" @click="handleAdd">新增规则</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
</div>
|
||
|
||
<!-- 下方规则列表 -->
|
||
<div class="p20">
|
||
<r-table :columns="tableConfig.columns" :data="getTableData" :deletion="false"></r-table>
|
||
</div>
|
||
<!-- 分页 -->
|
||
<el-row>
|
||
<el-col :span="24" class="flex" style="justify-content: right;">
|
||
<el-pagination
|
||
background
|
||
layout="prev, pager, next"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="currentPage"
|
||
:hide-on-single-page="true"
|
||
:total="tableData.length"
|
||
>
|
||
</el-pagination>
|
||
</el-col>
|
||
</el-row>
|
||
</el-card>
|
||
<!-- 规则详情弹窗 -->
|
||
<el-drawer :visible.sync="dialogOptions.visible" size="50%" :title="dialogOptions.title">
|
||
<!-- diglog 弹窗内容组件 -->
|
||
<component
|
||
class="container"
|
||
v-if="dialogOptions.visible"
|
||
:is="dialogOptions.currentComponent"
|
||
:data="tableData"
|
||
:columns="columns"
|
||
:currentRow="dialogOptions.currentRow"
|
||
/>
|
||
</el-drawer>
|
||
</div>
|
||
</template>
|