feat(应用管理): 新增规则编辑和查看功能

- 新增规则编辑对话框组件 RuleEditDialog
- 新增规则查看对话框组件 RuleViewDialog
- 实现规则列表页面的新增、编辑和查看功能
- 优化规则列表的展示和操作
This commit is contained in:
陈昱达
2025-07-24 14:08:20 +08:00
parent 08127364ca
commit e2c2d034fb
5 changed files with 700 additions and 37 deletions

View File

@@ -1,11 +1,11 @@
module.exports = {
presets: ['@vue/app'],
plugins: [
[
'transform-remove-console',
{
exclude: ['warn', 'error'] // 可选:保留 warn 和 error
}
]
// [
// 'transform-remove-console',
// {
// exclude: ['warn', 'error'] // 可选:保留 warn 和 error
// }
// ]
]
}

View File

@@ -1,6 +1,10 @@
import request from '@/assets/js/utils/request'
import getUrl from '@/assets/js/utils/get-url'
// 导出规则相关API
export * from './rule'
// 导出记录相关API
export * from './record'
// 查询审批单风险筛查结果
export function queryResult(data) {
return request({

View File

@@ -0,0 +1,308 @@
<template>
<el-dialog
:title="dialogTitle"
:visible.sync="dialogVisible"
width="600px"
@close="handleClose"
>
<el-form
ref="ruleForm"
:model="ruleForm"
:rules="rules"
label-width="120px"
v-loading="loading"
>
<!-- 规则类型下拉选择 -->
<el-form-item label="规则类型" prop="ruleType">
<el-select
v-model="ruleForm.ruleType"
placeholder="请选择规则类型"
style="width: 100%"
>
<el-option
v-for="item in ruleTypeList"
:key="item.typeCode"
:label="item.typeName"
:value="item.typeCode"
>
</el-option>
</el-select>
</el-form-item>
<!-- 字段类型下拉选择 -->
<el-form-item label="字段类型" prop="ruleField">
<el-select
v-model="ruleForm.ruleField"
placeholder="请选择字段类型"
style="width: 100%"
>
<el-option
v-for="item in fieldTypeList"
:key="item.fieldName"
:label="item.fieldComment"
:value="item.fieldName"
>
</el-option>
</el-select>
</el-form-item>
<!-- 规则描述文本域 -->
<el-form-item label="规则描述" prop="ruleDesc">
<el-input
type="textarea"
v-model="ruleForm.ruleDesc"
placeholder="请输入规则描述"
:rows="3"
></el-input>
</el-form-item>
<!-- 风险提示话术输入框 -->
<el-form-item label="风险提示话术" prop="riskScript">
<el-input
v-model="ruleForm.riskScript"
placeholder="请输入风险提示话术"
></el-input>
</el-form-item>
<!-- 校验内容类型 -->
<!-- <el-form-item label="校验内容类型" prop="checkType">-->
<!-- <el-select -->
<!-- v-model="ruleForm.checkType" -->
<!-- placeholder="请选择校验内容类型" -->
<!-- style="width: 100%"-->
<!-- >-->
<!-- <el-option label="表单信息" :value="1"></el-option>-->
<!-- <el-option label="文本文件" :value="2"></el-option>-->
<!-- <el-option label="图片" :value="3"></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- &lt;!&ndash; 风险类型 &ndash;&gt;-->
<!-- <el-form-item label="风险类型" prop="riskType">-->
<!-- <el-select -->
<!-- v-model="ruleForm.riskType" -->
<!-- placeholder="请选择风险类型" -->
<!-- style="width: 100%"-->
<!-- >-->
<!-- <el-option-->
<!-- v-for="item in riskTypeList"-->
<!-- :key="item.riskTypeCode"-->
<!-- :label="item.riskType"-->
<!-- :value="item.riskTypeCode">-->
<!-- </el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- &lt;!&ndash; 运行类型 &ndash;&gt;-->
<!-- <el-form-item label="运行类型" prop="runType">-->
<!-- <el-radio-group v-model="ruleForm.runType">-->
<!-- <el-radio label="ai">AI</el-radio>-->
<!-- <el-radio label="func">函数</el-radio>-->
<!-- </el-radio-group>-->
<!-- </el-form-item>-->
</el-form>
<span slot="footer" class="dialog-footer">
<el-button
type="primary"
@click="handleSubmit"
:loading="submitLoading"
size="medium"
> </el-button
>
<el-button @click="handleClose" size="medium"> </el-button>
</span>
</el-dialog>
</template>
<script>
import { createRule, updateRule, queryRuleDetail } from '@/api/riskCheck/rule'
export default {
name: 'RuleEditDialog',
props: {
// 对话框是否可见
visible: {
type: Boolean,
default: false
},
// 是否为编辑模式
isEdit: {
type: Boolean,
default: false
},
// 当前规则数据
ruleData: {
type: Object,
default: () => ({})
},
// 规则类型选项列表
ruleTypeOptions: {
type: Array,
default: () => []
},
// 字段类型选项列表
fieldTypeOptions: {
type: Array,
default: () => []
},
// 风险类型选项列表
riskTypeOptions: {
type: Array,
default: () => []
}
},
data() {
return {
loading: false,
submitLoading: false,
// 表单数据
ruleForm: {
id: '',
ruleType: '',
ruleField: '',
ruleDesc: '',
riskScript: '',
checkType: 1,
riskType: '',
ruleStatus: 0,
runType: 'ai'
},
// 表单验证规则
rules: {
ruleType: [
{ required: true, message: '请选择规则类型', trigger: 'change' }
],
ruleField: [
{ required: true, message: '请选择字段类型', trigger: 'change' }
],
ruleDesc: [
{ required: true, message: '请输入规则描述', trigger: 'blur' }
],
riskScript: [
{ required: true, message: '请输入风险提示话术', trigger: 'blur' }
],
checkType: [
{ required: true, message: '请选择校验内容类型', trigger: 'change' }
],
riskType: [
{ required: true, message: '请选择风险类型', trigger: 'change' }
],
runType: [
{ required: true, message: '请选择运行类型', trigger: 'change' }
]
}
}
},
computed: {
// 对话框标题
dialogTitle() {
return this.isEdit ? '编辑规则' : '新增规则'
},
// 对话框可见性
dialogVisible: {
get() {
return this.visible
},
set(val) {
this.$emit('update:visible', val)
}
},
// 规则类型选项列表
ruleTypeList() {
return this.ruleTypeOptions.length > 0
? this.ruleTypeOptions
: [
{ typeName: '基本信息', typeCode: 'basic_rule' },
{ typeName: '投保信息', typeCode: 'insurance_rule' }
]
},
// 字段类型选项列表
fieldTypeList() {
return this.fieldTypeOptions.length > 0
? this.fieldTypeOptions
: [
{ fieldComment: '保险期限(天)', fieldName: 'insurance_period' },
{ fieldComment: '投保金额', fieldName: 'insurance_amount' }
]
},
// 风险类型选项列表
riskTypeList() {
return this.riskTypeOptions.length > 0
? this.riskTypeOptions
: [
{
riskType: '费率与投保方案不合理风险',
riskTypeCode: 'rate_plan_risk'
},
{
riskType: '保险责任不明确风险',
riskTypeCode: 'insurance_liability_risk'
}
]
}
},
watch: {
// 监听规则数据变化
ruleData: {
handler(val) {
if (val && Object.keys(val).length > 0) {
this.ruleForm = Object.assign({}, val)
} else {
this.ruleForm = {
id: '',
ruleType: '',
ruleField: '',
ruleDesc: '',
riskScript: '',
checkType: 1,
riskType: '',
ruleStatus: 0,
runType: 'ai'
}
}
},
immediate: true
}
},
methods: {
// 关闭对话框
handleClose() {
this.$refs.ruleForm.resetFields()
this.$emit('update:visible', false)
},
// 提交表单
handleSubmit() {
this.$refs.ruleForm.validate(valid => {
if (valid) {
this.submitLoading = true
// 根据是否为编辑模式调用不同接口
const request = this.isEdit ? updateRule : createRule
const params = Object.assign({}, this.ruleForm)
request(params)
.then(response => {
this.$message.success(`${this.dialogTitle}成功`)
this.$emit('success', response)
this.handleClose()
})
.catch(error => {
this.$message.error(
`${this.dialogTitle}失败: ` + (error.message || '未知错误')
)
})
.finally(() => {
this.submitLoading = false
})
}
})
}
}
}
</script>
<style lang="scss" scoped>
.dialog-footer {
text-align: right;
}
</style>

View File

@@ -0,0 +1,246 @@
<template>
<el-dialog
title="查看规则"
:visible.sync="dialogVisible"
width="600px"
@close="handleClose"
>
<el-form
ref="ruleForm"
:model="ruleForm"
label-width="120px"
v-loading="loading"
>
<!-- 规则类型 -->
<el-form-item label="规则类型">
<el-select
v-model="ruleForm.ruleType"
placeholder="请选择规则类型"
style="width: 100%"
disabled
>
<el-option
v-for="item in ruleTypeList"
:key="item.typeCode"
:label="item.typeName"
:value="item.typeCode"
>
</el-option>
</el-select>
</el-form-item>
<!-- 字段类型 -->
<el-form-item label="字段类型">
<el-select
v-model="ruleForm.ruleField"
placeholder="请选择字段类型"
style="width: 100%"
disabled
>
<el-option
v-for="item in fieldTypeList"
:key="item.fieldName"
:label="item.fieldComment"
:value="item.fieldName"
>
</el-option>
</el-select>
</el-form-item>
<!-- 规则描述 -->
<el-form-item label="规则描述">
<el-input
type="textarea"
v-model="ruleForm.ruleDesc"
placeholder="请输入规则描述"
:rows="3"
disabled
></el-input>
</el-form-item>
<!-- 风险提示话术 -->
<el-form-item label="风险提示话术">
<el-input
v-model="ruleForm.riskScript"
placeholder="请输入风险提示话术"
disabled
></el-input>
</el-form-item>
<!-- &lt;!&ndash; 校验内容类型 &ndash;&gt;-->
<!-- <el-form-item label="校验内容类型">-->
<!-- <el-select -->
<!-- v-model="ruleForm.checkType" -->
<!-- placeholder="请选择校验内容类型" -->
<!-- style="width: 100%"-->
<!-- disabled-->
<!-- >-->
<!-- <el-option label="表单信息" :value="1"></el-option>-->
<!-- <el-option label="文本文件" :value="2"></el-option>-->
<!-- <el-option label="图片" :value="3"></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- &lt;!&ndash; 风险类型 &ndash;&gt;-->
<!-- <el-form-item label="风险类型">-->
<!-- <el-select -->
<!-- v-model="ruleForm.riskType" -->
<!-- placeholder="请选择风险类型" -->
<!-- style="width: 100%"-->
<!-- disabled-->
<!-- >-->
<!-- <el-option-->
<!-- v-for="item in riskTypeList"-->
<!-- :key="item.riskTypeCode"-->
<!-- :label="item.riskType"-->
<!-- :value="item.riskTypeCode">-->
<!-- </el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- &lt;!&ndash; 运行类型 &ndash;&gt;-->
<!-- <el-form-item label="运行类型">-->
<!-- <el-radio-group v-model="ruleForm.runType" disabled>-->
<!-- <el-radio label="ai">AI</el-radio>-->
<!-- <el-radio label="func">函数</el-radio>-->
<!-- </el-radio-group>-->
<!-- </el-form-item>-->
<!-- 规则状态 -->
<!-- <el-form-item label="规则状态">-->
<!-- <el-switch-->
<!-- v-model="ruleForm.ruleStatus"-->
<!-- :active-value="1"-->
<!-- :inactive-value="0"-->
<!-- active-text="启用"-->
<!-- inactive-text="未启用"-->
<!-- disabled-->
<!-- >-->
<!-- </el-switch>-->
<!-- </el-form-item>-->
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose" size="medium"> </el-button>
</span>
</el-dialog>
</template>
<script>
import { queryRuleDetail } from '@/api/riskCheck/rule'
export default {
name: 'RuleViewDialog',
props: {
// 对话框是否可见
visible: {
type: Boolean,
default: false
},
// 当前规则数据
ruleData: {
type: Object,
default: () => ({})
},
// 规则类型选项列表
ruleTypeOptions: {
type: Array,
default: () => []
},
// 字段类型选项列表
fieldTypeOptions: {
type: Array,
default: () => []
},
// 风险类型选项列表
riskTypeOptions: {
type: Array,
default: () => []
}
},
data() {
return {
loading: false,
// 表单数据
ruleForm: {
id: '',
ruleType: '',
ruleField: '',
ruleDesc: '',
riskScript: '',
checkType: 1,
riskType: '',
ruleStatus: 0,
runType: 'ai'
}
}
},
computed: {
// 对话框可见性
dialogVisible: {
get() {
return this.visible
},
set(val) {
this.$emit('update:visible', val)
}
},
// 规则类型选项列表
ruleTypeList() {
return this.ruleTypeOptions.length > 0
? this.ruleTypeOptions
: [
{ typeName: '基本信息', typeCode: 'basic_rule' },
{ typeName: '投保信息', typeCode: 'insurance_rule' }
]
},
// 字段类型选项列表
fieldTypeList() {
return this.fieldTypeOptions.length > 0
? this.fieldTypeOptions
: [
{ fieldComment: '保险期限(天)', fieldName: 'insurance_period' },
{ fieldComment: '投保金额', fieldName: 'insurance_amount' }
]
},
// 风险类型选项列表
riskTypeList() {
return this.riskTypeOptions.length > 0
? this.riskTypeOptions
: [
{
riskType: '费率与投保方案不合理风险',
riskTypeCode: 'rate_plan_risk'
},
{
riskType: '保险责任不明确风险',
riskTypeCode: 'insurance_liability_risk'
}
]
}
},
watch: {
// 监听规则数据变化
ruleData: {
handler(val) {
if (val && Object.keys(val).length > 0) {
this.ruleForm = Object.assign({}, val)
}
},
immediate: true
}
},
methods: {
// 关闭对话框
handleClose() {
this.$emit('update:visible', false)
}
}
}
</script>
<style lang="scss" scoped>
.dialog-footer {
text-align: right;
}
</style>

View File

@@ -19,7 +19,12 @@
>
<!-- 规则类型下拉选择 -->
<el-form-item label="规则类型" prop="ruleType">
<el-select v-model="queryParams.ruleType" size="medium" clearable placeholder="请选择规则类型">
<el-select
v-model="queryParams.ruleType"
size="medium"
clearable
placeholder="请选择规则类型"
>
<el-option
v-for="item in ruleTypeList"
:label="item.typeName"
@@ -28,10 +33,15 @@
></el-option>
</el-select>
</el-form-item>
<!-- 字段类型下拉选择 -->
<el-form-item label="字段类型" prop="ruleField">
<el-select v-model="queryParams.ruleField" size="medium" clearable placeholder="请选择字段类型">
<el-select
v-model="queryParams.ruleField"
size="medium"
clearable
placeholder="请选择字段类型"
>
<el-option
v-for="item in fieldTypeList"
:label="item.fieldComment"
@@ -40,7 +50,7 @@
></el-option>
</el-select>
</el-form-item>
<!-- 规则描述输入框 -->
<el-form-item label="规则描述" prop="ruleDesc">
<el-input
@@ -49,10 +59,15 @@
placeholder="请输入规则描述"
></el-input>
</el-form-item>
<!-- 规则状态下拉选择 -->
<el-form-item label="规则状态" prop="ruleStatus">
<el-select v-model="queryParams.ruleStatus" size="medium" clearable placeholder="请选择规则状态">
<el-select
v-model="queryParams.ruleStatus"
size="medium"
clearable
placeholder="请选择规则状态"
>
<el-option
v-for="item in statusList"
:label="item.label"
@@ -62,7 +77,7 @@
</el-select>
</el-form-item>
</el-form>
<!-- 查询操作按钮 -->
<div class="mt15 flex align-items-c justify-content-b">
<el-button size="medium" type="primary" @click="handleQuery"
@@ -75,7 +90,7 @@
</div>
</div>
</div>
<!-- 规则列表表格 -->
<r-table
:columns="tableConfig.columns"
@@ -87,21 +102,60 @@
:currentPage="tableConfig.currentPage"
:pageSize="tableConfig.pageSize"
/>
<!-- 规则编辑对话框 -->
<rule-edit-dialog
:visible.sync="editDialogVisible"
:is-edit="isEdit"
:rule-data="currentRuleData"
:rule-type-options="ruleTypeList"
:field-type-options="fieldTypeList"
:risk-type-options="riskTypeList"
@success="handleEditSuccess"
/>
<!-- 规则查看对话框 -->
<rule-view-dialog
:visible.sync="viewDialogVisible"
:rule-data="currentRuleData"
:rule-type-options="ruleTypeList"
:field-type-options="fieldTypeList"
:risk-type-options="riskTypeList"
/>
</div>
</template>
<script>
import {
getRulePage,
deleteRule,
batchSwitchStatus
import {
getRulePage,
deleteRule,
batchSwitchStatus,
queryRuleDetail,
getRuleList,
batchAddRuleType,
batchAddField,
batchAddRiskType
} from '@/api/riskCheck/rule'
import RuleEditDialog from './components/RuleEditDialog.vue'
import RuleViewDialog from './components/RuleViewDialog.vue'
export default {
name: 'EmployRule',
components: {
RuleEditDialog,
RuleViewDialog
},
data() {
return {
loading: false,
// 编辑对话框是否可见
editDialogVisible: false,
// 查看对话框是否可见
viewDialogVisible: false,
// 是否为编辑模式
isEdit: false,
// 当前规则数据
currentRuleData: {},
// 查询参数
queryParams: {
page: 1,
@@ -121,18 +175,26 @@ export default {
{ fieldComment: '保险期限(天)', fieldName: 'insurance_period' },
{ fieldComment: '投保金额', fieldName: 'insurance_amount' }
],
// 规则状态选项列表
statusList: [
{ label: '启用', value: 1 },
{ label: '未启用', value: 0 }
// 风险类型选项列表
riskTypeList: [
{
riskType: '费率与投保方案不合理风险',
riskTypeCode: 'rate_plan_risk'
},
{
riskType: '保险责任不明确风险',
riskTypeCode: 'insurance_liability_risk'
}
],
// 规则状态选项列表
statusList: [{ label: '启用', value: 0 }, { label: '未启用', value: 1 }],
// 表格配置项
tableConfig: {
total: 0,
currentPage: 1,
pageSize: 10,
columns: [
{ prop: 'index', key: '序号', width: 60 },
{ type: 'index', key: '序号', width: 60 },
{ prop: 'ruleType', key: '规则类型' },
{ prop: 'ruleField', key: '字段类型' },
{ prop: 'ruleDesc', key: '规则描述' },
@@ -145,11 +207,11 @@ export default {
'el-tag',
{
props: {
type: params.row.ruleStatus === 1 ? 'success' : 'info',
type: params.row.ruleStatus === 0 ? 'success' : 'info',
size: 'small'
}
},
params.row.ruleStatus === 1 ? '启用' : '未启用'
params.row.ruleStatus === 0 ? '启用' : '未启用'
)
}
},
@@ -214,7 +276,7 @@ export default {
params.row.ruleStatus === 1
? 'el-icon-remove-outline'
: 'el-icon-circle-check',
title: params.row.ruleStatus === 1 ? '用' : '用'
title: params.row.ruleStatus === 1 ? '用' : '用'
},
on: { click: () => this.handleToggleStatus(params.row) }
},
@@ -237,16 +299,18 @@ export default {
getList() {
this.loading = true
const params = Object.assign({}, this.queryParams)
getRulePage(params)
.then(response => {
// 根据实际API返回结构调整兼容Vue2语法
var content = response.content || {}
var content = response.content.content || {}
this.tableData = content.list || []
this.tableConfig.total = content.total || 0
})
.catch(error => {
this.$message.error('获取规则列表失败: ' + (error.message || '未知错误'))
this.$message.error(
'获取规则列表失败: ' + (error.message || '未知错误')
)
})
.finally(() => {
this.loading = false
@@ -264,22 +328,61 @@ export default {
},
// 新增按钮点击事件
handleAdd() {
this.$message.info('新增功能待实现')
this.isEdit = false
this.currentRuleData = {}
this.editDialogVisible = true
},
// 查看详情按钮点击事件
handleView(row) {
this.$message.info('查看详情功能待实现')
this.loading = true
this.viewDialogVisible = true
// 获取规则详情
queryRuleDetail({ id: row.id })
.then(response => {
this.currentRuleData = response.content.content || {}
})
.catch(error => {
this.$message.error(
'获取规则详情失败: ' + (error.message || '未知错误')
)
this.viewDialogVisible = false
})
.finally(() => {
this.loading = false
})
},
// 编辑按钮点击事件
handleEdit(row) {
this.$message.info('编辑功能待实现')
this.isEdit = true
this.loading = true
// 获取规则详情
queryRuleDetail({ id: row.id })
.then(response => {
this.currentRuleData = response.content.content || {}
this.editDialogVisible = true
})
.catch(error => {
this.$message.error(
'获取规则详情失败: ' + (error.message || '未知错误')
)
})
.finally(() => {
this.loading = false
})
},
// 编辑成功回调
handleEditSuccess() {
this.getList() // 刷新列表
},
// 启用/停用按钮点击事件
handleToggleStatus(row) {
// 1 停用 0 启用
// 启用的数据能停用,停用的数据反之
const newStatus = row.ruleStatus === 1 ? 'disabled' : 'enable'
const statusText = row.ruleStatus === 1 ? '停用' : '启用'
const newStatus = row.ruleStatus === 0 ? 'enable' : 'disabled'
const statusText = row.ruleStatus === 0 ? '停用' : '启用'
this.$messageBox(
() => {
// 调用批量启用/停用接口传入当前行的ID
@@ -290,7 +393,9 @@ export default {
row.ruleStatus = row.ruleStatus === 1 ? 0 : 1
})
.catch(error => {
this.$message.error(`${statusText}失败: ` + (error.message || '未知错误'))
this.$message.error(
`${statusText}失败: ` + (error.message || '未知错误')
)
})
},
`确认${statusText}该规则吗?`,
@@ -348,4 +453,4 @@ export default {
}
}
}
</style>
</style>