hz/ebiz-ai-knowledge-manage
1
0
Fork 0
mirror of http://112.124.100.131/ebiz-ai/ebiz-ai-knowledge-manage.git synced 2025-12-08 02:16:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 界面调整

Browse Source 
1. 代码 format
2. 增加 el-card 标题
This commit is contained in:
Huangzhe
2025-04-14 17:37:56 +08:00
parent 254d05724c
commit 90164a84df
3 changed files with 145 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
src/views/rules/Index.vue
View File

@@ -1,38 +1,47 @@
<script> <script>
import { deleteRule, getRuleList } from '@/api/rules/index' import { deleteRule, getRuleList } from "@/api/rules/index";
import EditPromptRule from './components/edit-prompt-rule/Index.vue' import EditPromptRule from "./components/edit-prompt-rule/Index.vue";
import EditSplitRule from './components/edit-split-rule/Index.vue' import EditSplitRule from "./components/edit-split-rule/Index.vue";
import AddRules from './components/add-rules/index.vue' import AddRules from "./components/add-rules/index.vue";
import Info from './components/info/index.vue' import Info from "./components/info/index.vue";
import { h } from 'vue' import { h } from "vue";
export default { export default {
name: 'rules', name: "rules",
data() { data() {
return { return {
columns: [], columns: [],
tableConfig: { tableConfig: {
columns: [ columns: [
{ prop: 'ruleName', key: '规则名称' }, { prop: "ruleName", key: "规则名称" },
{ prop: 'ruleType', key: '规则类型' }, { prop: "ruleType", key: "规则类型" },
{ prop: 'createdDate', key: '创建时间' }, { prop: "createdDate", key: "创建时间" },
{ {
key: '操作', key: "操作",
render: (h, params) => { render: (h, params) => {
return h('div', [ return h("div", [
h('el-button', { props: { type: 'text', size: 'mini' }, on: { click: () => this.handleInfoVisiable(params.row) } }, '查看详情'), h("el-button", {
h('el-button', { props: { type: 'text', size: 'mini' }, on: { click: () => this.handleEdit(params.row) } }, '修改'), props: { type: "text", size: "mini" },
h('el-button', { props: { type: 'text', size: 'mini' }, on: { click: () => this.handleDelete(params.row) } }, '删除') 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, params.index) }
}, "删除")
]);
} }
} }
] ]
}, },
// 弹窗配置 // 弹窗配置
dialogOptions: { dialogOptions: {
title: '', title: "",
visible: false, visible: false,
width: '50%', width: "50%",
currentComponent: void 0, currentComponent: void 0,
currentRow: void 0 currentRow: void 0
}, },
@@ -44,17 +53,17 @@ export default {
form: { form: {
query: true, query: true,
pickerOptions: void 0, pickerOptions: void 0,
ruleType: '', ruleType: "",
ruleName: '', ruleName: "",
createdDate: [] createdDate: []
} }
} };
}, },
provide() { provide() {
return { return {
dialogOptions: this.dialogOptions, dialogOptions: this.dialogOptions,
tableData: this.tableData tableData: this.tableData
} };
}, },
components: { components: {
EditPromptRule, EditPromptRule,
@@ -65,129 +74,131 @@ export default {
computed: { computed: {
// 当前的分页数据 // 当前的分页数据
currentTableDate() { currentTableDate() {
let filteredData let filteredData;
// 过滤 table 列表,如果 form 相关项是空的，就不过滤 // 过滤 table 列表,如果 form 相关项是空的，就不过滤
if (this.form.query) { if (this.form.query) {
// 过滤 ruleType // 过滤 ruleType
const map = { const map = {
1: '提示词规则', 1: "提示词规则",
2: '知识拆分规则' 2: "知识拆分规则"
} };
filteredData = this.tableData.filter(item => { filteredData = this.tableData.filter(item => {
if (!this.form.ruleType) return true if (!this.form.ruleType) return true;
return map[item.ruleType] === this.form.ruleType return map[item.ruleType] === this.form.ruleType;
}) });
// 过滤 ruleName // 过滤 ruleName
filteredData = filteredData.filter(item => { filteredData = filteredData.filter(item => {
if (!this.form.ruleName) return true if (!this.form.ruleName) return true;
return item.ruleName === this.form.ruleName return item.ruleName === this.form.ruleName;
}) });
// 过滤 createdDate // 过滤 createdDate
filteredData = filteredData.filter(item => { filteredData = filteredData.filter(item => {
if (!this.form.createdDate.length) return true if (!this.form.createdDate.length) return true;
return item.createdDate >= this.form.createdDate[0] && item.createdDate <= this.form.createdDate[1] return item.createdDate >= this.form.createdDate[0] && item.createdDate <= this.form.createdDate[1];
}) });
} else { } else {
filteredData = this.tableData filteredData = this.tableData;
} }
// TODO: 分页数据 // TODO: 分页数据
const start = (this.currentPage - 1) * 10 const start = (this.currentPage - 1) * 10;
const end = this.currentPage * 10 const end = this.currentPage * 10;
return filteredData.slice(start, end) return filteredData.slice(start, end);
}, },
getTableData() { getTableData() {
// 需要处理 规则类型， 因为规则类型都是数字，需要转换成中文 // 需要处理 规则类型， 因为规则类型都是数字，需要转换成中文
return this.currentTableDate.map(item => ({ return this.currentTableDate.map(item => ({
...item, ...item,
ruleType: item.ruleType === 1 ? '提示词规则' : '知识拆分规则' ruleType: item.ruleType === 1 ? "提示词规则" : "知识拆分规则"
})) }));
}, },
// 查询表单的 ruleTypeOptions // 查询表单的 ruleTypeOptions
ruleTypeOptions() { ruleTypeOptions() {
const map = { const map = {
1: '提示词规则', 1: "提示词规则",
2: '知识拆分规则' 2: "知识拆分规则"
} };
// 去重所有 ruleType， 然后映射成 option // 去重所有 ruleType， 然后映射成 option
const res = [...new Set(this.tableData.map(item => item.ruleType))].map(type => map[type]) const res = [...new Set(this.tableData.map(item => item.ruleType))].map(type => map[type]);
return res return res;
}, },
// 查询表单的 ruleNameOptions // 查询表单的 ruleNameOptions
ruleNameOptions() { ruleNameOptions() {
const res = [...new Set(this.tableData.map(item => item.ruleName))] const res = [...new Set(this.tableData.map(item => item.ruleName))];
return res return res;
} }
}, },
watch: { watch: {
form: { form: {
handler() {}, handler() {
},
deep: true deep: true
} }
}, },
beforeMount() { beforeMount() {
getRuleList().then(res => { getRuleList().then(res => {
const { content } = res.content const { content } = res.content;
this.tableData = content.list this.tableData = content.list;
}) });
}, },
methods: { methods: {
handleCurrentChange(val) { handleCurrentChange(val) {
this.currentPage = val this.currentPage = val;
}, },
// 处理查看规则详情 // 处理查看规则详情
handleInfoVisiable(row) { handleInfoVisiable(row) {
this.dialogOptions.title = '查看规则详情' this.dialogOptions.title = "查看规则详情";
this.dialogOptions.currentComponent = 'Info' this.dialogOptions.currentComponent = "Info";
this.dialogOptions.visible = true this.dialogOptions.visible = true;
this.dialogOptions.currentRow = row this.dialogOptions.currentRow = row;
}, },
// 处理修改规则 // 处理修改规则
handleEdit(row, index) { handleEdit(row, index) {
this.dialogOptions.title = '修改规则' this.dialogOptions.title = "修改规则";
this.dialogOptions.currentComponent = row.ruleType === '知识拆分规则' ? 'EditPromptRule' : 'EditSplitRule' this.dialogOptions.currentComponent = row.ruleType === "知识拆分规则" ? "EditPromptRule" : "EditSplitRule";
this.dialogOptions.visible = true this.dialogOptions.visible = true;
this.dialogOptions.currentRow = row this.dialogOptions.currentRow = row;
}, },
// 处理删除规则 // 处理删除规则
handleDelete(row, index) { handleDelete(row, index) {
deleteRule([row.id]) deleteRule([row.id])
.then(() => { .then(() => {
this.tableData.splice(index, 1) // 删除当前行
this.tableData.splice(index, 1);
}) })
.catch(err => { .catch(err => {
this.$notify.error({ this.$notify.error({
title: '删除失败', title: "删除失败",
message: h('i', { style: 'color: teal' }, '删除时出现错误，稍后再试' + err) message: h("i", { style: "color: teal" }, "删除时出现错误，稍后再试" + err)
}) });
}) });
}, },
// 处理查询 // 处理查询
handleQuery() { handleQuery() {
this.form.query = true this.form.query = true;
}, },
// 处理重置 // 处理重置
handleReset() { handleReset() {
this.form = { this.form = {
query: true, query: true,
pickerOptions: void 0, pickerOptions: void 0,
ruleType: '', ruleType: "",
ruleName: '', ruleName: "",
createdDate: [] createdDate: []
} };
}, },
// 处理新增 // 处理新增
handleAdd() { handleAdd() {
this.dialogOptions.title = '新增规则' this.dialogOptions.title = "新增规则";
this.dialogOptions.visible = true this.dialogOptions.visible = true;
this.dialogOptions.currentComponent = "AddRules" this.dialogOptions.currentComponent = "AddRules";
} }
} }
} };
</script> </script>
<template> <template>
@@ -206,7 +217,7 @@ export default {
<el-col :span="8"> <el-col :span="8">
<el-form-item label="规则类型"> <el-form-item label="规则类型">
<el-select v-model="form.ruleType" placeholder="请选择规则类型"> <el-select v-model="form.ruleType" placeholder="请选择规则类型">
<el-option v-for="item in ruleTypeOptions" :key="item" :label="item" :value="item"> </el-option> <el-option v-for="item in ruleTypeOptions" :key="item" :label="item" :value="item"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
@@ -214,22 +225,16 @@ export default {
<el-col :span="8"> <el-col :span="8">
<el-form-item label="规则名称"> <el-form-item label="规则名称">
<el-select v-model="form.ruleName" placeholder="请选择规则名称"> <el-select v-model="form.ruleName" placeholder="请选择规则名称">
<el-option v-for="item in ruleNameOptions" :key="item" :label="item" :value="item"> </el-option> <el-option v-for="item in ruleNameOptions" :key="item" :label="item" :value="item"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<!-- 创建时间 --> <!-- 创建时间 -->
<el-col :span="8"> <el-col :span="8">
<el-form-item label="创建时间"> <el-form-item label="创建时间">
<el-date-picker <el-date-picker v-model="form.createdDate" type="daterange" unlink-panels range-separator="至"
v-model="form.createdDate" start-placeholder="开始日期" end-placeholder="结束日期"
type="daterange" :picker-options="form.pickerOptions">
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="form.pickerOptions"
>
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
</el-col> </el-col>
@@ -252,14 +257,8 @@ export default {
<!-- 分页 --> <!-- 分页 -->
<el-row> <el-row>
<el-col :span="24" class="flex" style="justify-content: right;"> <el-col :span="24" class="flex" style="justify-content: right;">
<el-pagination <el-pagination background layout="prev, pager, next" @current-change="handleCurrentChange"
background :current-page="currentPage" :hide-on-single-page="true" :total="tableData.length">
layout="prev, pager, next"
@current-change="handleCurrentChange"
:current-page="currentPage"
:hide-on-single-page="true"
:total="tableData.length"
>
</el-pagination> </el-pagination>
</el-col> </el-col>
</el-row> </el-row>
@@ -267,14 +266,8 @@ export default {
<!-- 规则详情弹窗 --> <!-- 规则详情弹窗 -->
<el-drawer :visible.sync="dialogOptions.visible" size="50%" :title="dialogOptions.title"> <el-drawer :visible.sync="dialogOptions.visible" size="50%" :title="dialogOptions.title">
<!-- diglog 弹窗内容组件 --> <!-- diglog 弹窗内容组件 -->
<component <component class="container" v-if="dialogOptions.visible" :is="dialogOptions.currentComponent" :data="tableData"
class="container" :columns="columns" :currentRow="dialogOptions.currentRow" />
v-if="dialogOptions.visible"
:is="dialogOptions.currentComponent"
:data="tableData"
:columns="columns"
:currentRow="dialogOptions.currentRow"
/>
</el-drawer> </el-drawer>
</div> </div>
</template> </template>

88
src/views/rules/components/edit-prompt-rule/Index.vue
View File

@@ -1,51 +1,50 @@
<script> <script>
import { getRuleDetail } from '@/api/rules/index' import { addPromptRule, getRuleDetail, updatePromptRule } from "@/api/rules/index";
import { addPromptRule, updatePromptRule } from '@/api/rules/index'
export default { export default {
name: 'EditPromptRule', name: "EditPromptRule",
data() { data() {
return { return {
// 规则名称、属性、属性描述、关键词、题词示例、提示词 // 规则名称、属性、属性描述、关键词、题词示例、提示词
form: { form: {
id: '', id: "",
ruleName: '', ruleName: "",
createdDate: '', createdDate: "",
ruleType: 2, ruleType: 2,
ruleList: [] ruleList: []
} }
} };
}, },
props: { props: {
type: { type: {
type: String, type: String,
default: 'edit' default: "edit"
} }
}, },
inject: ['dialogOptions', 'tableData'], inject: ["dialogOptions", "tableData"],
methods: { methods: {
handleAdd() { handleAdd() {
const payload = { const payload = {
attribute: '', attribute: "",
attributeDesc: '', attributeDesc: "",
keyword: '', keyword: "",
example: '', example: "",
prompt: '' prompt: ""
} };
this.form.ruleList.push(payload) this.form.ruleList.push(payload);
}, },
handleDelete() { handleDelete() {
// TODO: 删除数据到后端 // TODO: 删除数据到后端
if (this.form.ruleList.length > 0) { if (this.form.ruleList.length > 0) {
this.form.ruleList.pop() this.form.ruleList.pop();
} }
}, },
save() { save() {
console.log('save this form ', this.form) console.log("save this form ", this.form);
// 判断是新增还是更新，新增调用 addPromptRule，更新调用 updatePromptRule // 判断是新增还是更新，新增调用 addPromptRule，更新调用 updatePromptRule
if (this.type === 'add') { if (this.type === "add") {
// 配置对应表单 // 配置对应表单
// 添加时，需要删除 id // 添加时，需要删除 id
delete this.form.id; delete this.form.id;
@@ -56,48 +55,47 @@ export default {
addPromptRule(this.form) addPromptRule(this.form)
.then(() => { .then(() => {
console.log('add prompt rule success') this.dialogOptions.visible = false;
this.dialogOptions.visible = false
// 可以添加成功提示 // 可以添加成功提示
this.$message && this.$message.success('保存成功') this.$message && this.$message.success("保存成功");
// 向 tableData 最上面添加数据 // 向 tableData 最上面添加数据
this.tableData.unshift(this.form) this.tableData.unshift(this.form);
}) })
.catch(err => { .catch(err => {
console.error(`add prompt rule failed: ${err}`) console.error(`add prompt rule failed: ${err}`);
// 可以添加错误提示 // 可以添加错误提示
this.$message && this.$message.error('保存失败') this.$message && this.$message.error("保存失败");
}) });
} else { } else {
updatePromptRule(this.form) updatePromptRule(this.form)
.then(() => { .then(() => {
console.log('update prompt rule success') console.log("update prompt rule success");
this.dialogOptions.visible = false this.dialogOptions.visible = false;
// 可以添加成功提示 // 可以添加成功提示
this.$message && this.$message.success('保存成功') this.$message && this.$message.success("保存成功");
}) })
.catch(err => { .catch(err => {
console.error(`update prompt rule failed: ${err}`) console.error(`update prompt rule failed: ${err}`);
// 可以添加错误提示 // 可以添加错误提示
this.$message && this.$message.error('保存失败') this.$message && this.$message.error("保存失败");
}) });
} }
} }
}, },
beforeMount() { beforeMount() {
// 如果是新增，不去请求接口 // 如果是新增，不去请求接口
if (this.type === 'add') { if (this.type === "add") {
return return;
} }
// 获取当前行数据 // 获取当前行数据
const { currentRow } = this.dialogOptions const { currentRow } = this.dialogOptions;
// 获取规则详情 // 获取规则详情
getRuleDetail(currentRow.id) getRuleDetail(currentRow.id)
.then(res => { .then(res => {
const { content } = res.content const { content } = res.content;
console.log('origin query request', content) console.log("origin query request", content);
// 一次性设置表单数据，确保响应式更新 // 一次性设置表单数据，确保响应式更新
this.form = { this.form = {
@@ -106,13 +104,13 @@ export default {
ruleName: content.ruleName, ruleName: content.ruleName,
createdDate: content.createdDate, createdDate: content.createdDate,
ruleList: Array.isArray(content.ruleList) ? content.ruleList : [] ruleList: Array.isArray(content.ruleList) ? content.ruleList : []
} };
}) })
.catch(err => { .catch(err => {
console.error('获取规则详情失败:', err) console.error("获取规则详情失败:", err);
}) });
} }
} };
</script> </script>
<template> <template>
@@ -121,7 +119,10 @@ export default {
<el-form-item label="规则名称"> <el-form-item label="规则名称">
<el-input v-model="form.ruleName"></el-input> <el-input v-model="form.ruleName"></el-input>
</el-form-item> </el-form-item>
<el-card v-for="(item, index) in form.ruleList" :key="index"> <el-card v-for="(item, index) in form.ruleList" :key="index" class="mt10">
<template #header>
<span>题词 {{ index + 1 }}</span>
</template>
<el-form-item label="属性"> <el-form-item label="属性">
<el-input v-model="item.attribute"></el-input> <el-input v-model="item.attribute"></el-input>
</el-form-item> </el-form-item>
@@ -142,7 +143,7 @@ export default {
</el-form-item> </el-form-item>
</el-card> </el-card>
</el-form> </el-form>
<div slot="footer" class="dialog-footer flex" style="justify-content: space-between;"> <div slot="footer" class="dialog-footer flex mt10" style="justify-content: space-between;">
<div> <div>
<el-button type="primary" @click="handleAdd">+ 新增题词</el-button> <el-button type="primary" @click="handleAdd">+ 新增题词</el-button>
<el-button type="info" @click="handleDelete">- 删除题词</el-button> <el-button type="info" @click="handleDelete">- 删除题词</el-button>
@@ -154,4 +155,3 @@ export default {
</div> </div>
</div> </div>
</template> </template>

10
src/views/rules/components/edit-split-rule/Index.vue
View File

@@ -87,7 +87,7 @@ export default {
// 可以添加成功提示 // 可以添加成功提示
this.$message && this.$message.success("保存成功"); this.$message && this.$message.success("保存成功");
// 向 tableData 最上面添加数据 // 向 tableData 最上面添加数据
this.tableData.unshift(this.form) this.tableData.unshift(this.form);
}) })
.catch(err => { .catch(err => {
console.error(`add split rule failed: ${err}`); console.error(`add split rule failed: ${err}`);
@@ -120,7 +120,11 @@ export default {
<el-form-item label="规则名称"> <el-form-item label="规则名称">
<el-input v-model="form.ruleName"></el-input> <el-input v-model="form.ruleName"></el-input>
</el-form-item> </el-form-item>
<el-card v-for="(item, index) in form.ruleList" :key="index"> <el-card v-for="(item, index) in form.ruleList" :key="index" class="mt10">
<template #header>
<span>拆分规则 {{ index + 1 }}</span>
</template>
<el-form-item label="样式"> <el-form-item label="样式">
<el-input v-model="item.titleLevel"></el-input> <el-input v-model="item.titleLevel"></el-input>
</el-form-item> </el-form-item>
@@ -132,7 +136,7 @@ export default {
</el-form-item> </el-form-item>
</el-card> </el-card>
</el-form> </el-form>
<div slot="footer" class="dialog-footer flex" style="justify-content: space-between;"> <div slot="footer" class="dialog-footer flex mt15" style="justify-content: space-between;">
<!-- 只有当点击保存的时候才能和服务端通信新增和删除 --> <!-- 只有当点击保存的时候才能和服务端通信新增和删除 -->
<div> <div>
<el-button type="primary" @click="handleAdd">+ 新增拆分</el-button> <el-button type="primary" @click="handleAdd">+ 新增拆分</el-button>