feat(applicationManagement): 新增雇则风筛记录和规则管理页面- 添加雇则风筛记录页面,实现记录列表展示、多条件查询和记录操作功能

- 添加雇则风筛规则管理页面,实现规则列表展示、多条件查询和规则操作功能
- 优化页面结构,增加查询条件区域、记录/规则列表表格和操作按钮
- 添加归属机构、规则类型等下拉选项数据
- 实现查询、重置、查看详情等基本功能
This commit is contained in:
陈昱达
2025-07-24 10:28:10 +08:00
parent f9b3698c48
commit 4764c6e1e4
2 changed files with 67 additions and 2 deletions

View File

@@ -1,5 +1,13 @@
<!--
雇则风筛记录页面
功能包括
1. 记录列表展示支持分页
2. 多条件查询审批单号被保人名称归属机构提交时间
3. 记录操作查看详情
-->
<template> <template>
<div class="render-container employ-record"> <div class="render-container employ-record">
<!-- 查询条件区域 -->
<div class="filter-container"> <div class="filter-container">
<div class="flex align-items-c justify-content-b"> <div class="flex align-items-c justify-content-b">
<el-form <el-form
@@ -9,6 +17,7 @@
ref="queryParams" ref="queryParams"
inline inline
> >
<!-- 审批单号输入框 -->
<el-form-item label="审批单号" prop="approvalNo"> <el-form-item label="审批单号" prop="approvalNo">
<el-input <el-input
v-model="queryParams.approvalNo" v-model="queryParams.approvalNo"
@@ -16,6 +25,8 @@
placeholder="请输入审批单号" placeholder="请输入审批单号"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<!-- 被保人名称输入框 -->
<el-form-item label="被保人名称" prop="insuredName"> <el-form-item label="被保人名称" prop="insuredName">
<el-input <el-input
v-model="queryParams.insuredName" v-model="queryParams.insuredName"
@@ -23,6 +34,8 @@
placeholder="请输入被保人名称" placeholder="请输入被保人名称"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<!-- 归属机构下拉选择 -->
<el-form-item label="归属机构" prop="institution"> <el-form-item label="归属机构" prop="institution">
<el-select v-model="queryParams.institution" size="medium" clearable placeholder="请选择归属机构"> <el-select v-model="queryParams.institution" size="medium" clearable placeholder="请选择归属机构">
<el-option <el-option
@@ -33,6 +46,8 @@
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- 提交时间范围选择 -->
<el-form-item label="提交时间" prop="submitTime"> <el-form-item label="提交时间" prop="submitTime">
<el-date-picker <el-date-picker
v-model="queryParams.submitTime" v-model="queryParams.submitTime"
@@ -45,6 +60,8 @@
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- 查询操作按钮 -->
<div class="mt15 flex align-items-c justify-content-b"> <div class="mt15 flex align-items-c justify-content-b">
<el-button size="medium" type="primary" @click="handleQuery" <el-button size="medium" type="primary" @click="handleQuery"
>查询</el-button >查询</el-button
@@ -53,6 +70,8 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 记录列表表格 -->
<r-table <r-table
:columns="tableConfig.columns" :columns="tableConfig.columns"
:data="tableData" :data="tableData"
@@ -72,6 +91,7 @@ export default {
data() { data() {
return { return {
loading: false, loading: false,
// 查询参数
queryParams: { queryParams: {
page: 1, page: 1,
pageSize: 10, pageSize: 10,
@@ -80,6 +100,7 @@ export default {
institution: '', institution: '',
submitTime: [] submitTime: []
}, },
// 归属机构选项列表
institutionList: [ institutionList: [
{ label: '机构1', value: 1 }, { label: '机构1', value: 1 },
{ label: '机构2', value: 2 }, { label: '机构2', value: 2 },
@@ -102,6 +123,7 @@ export default {
isRedraw: true, isRedraw: true,
render: (h, params) => { render: (h, params) => {
return h('div', [ return h('div', [
// 查看详情按钮
h( h(
'el-button', 'el-button',
{ {
@@ -121,6 +143,7 @@ export default {
} }
] ]
}, },
// 表格数据
tableData: [] tableData: []
} }
}, },
@@ -128,7 +151,7 @@ export default {
this.getList() this.getList()
}, },
methods: { methods: {
// 获取列表 // 获取记录列表数据
getList() { getList() {
this.loading = true this.loading = true
// 这里应该调用实际的API接口 // 这里应该调用实际的API接口
@@ -149,21 +172,26 @@ export default {
this.loading = false this.loading = false
}, 500) }, 500)
}, },
// 查询按钮点击事件
handleQuery() { handleQuery() {
this.queryParams.page = 1 this.queryParams.page = 1
this.getList() this.getList()
}, },
// 重置按钮点击事件
resetQuery() { resetQuery() {
this.$refs.queryParams.resetFields() this.$refs.queryParams.resetFields()
this.handleQuery() this.handleQuery()
}, },
// 查看详情按钮点击事件
handleView(row) { handleView(row) {
this.$message.info('查看详情功能待实现') this.$message.info('查看详情功能待实现')
}, },
// 分页大小改变事件
handleSizeChange(val) { handleSizeChange(val) {
this.queryParams.pageSize = val this.queryParams.pageSize = val
this.getList() this.getList()
}, },
// 当前页码改变事件
handleCurrentChange(val) { handleCurrentChange(val) {
this.queryParams.page = val this.queryParams.page = val
this.getList() this.getList()

View File

@@ -1,5 +1,13 @@
<!--
雇则风筛规则管理页面
功能包括
1. 规则列表展示支持分页
2. 多条件查询规则类型字段类型规则描述规则状态
3. 规则操作查看详情编辑删除启用/停用
-->
<template> <template>
<div class="render-container employ-rule"> <div class="render-container employ-rule">
<!-- 查询条件区域 -->
<div class="filter-container"> <div class="filter-container">
<div class="flex align-items-c justify-content-b"> <div class="flex align-items-c justify-content-b">
<el-form <el-form
@@ -9,6 +17,7 @@
ref="queryParams" ref="queryParams"
inline inline
> >
<!-- 规则类型下拉选择 -->
<el-form-item label="规则类型" prop="ruleType"> <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 <el-option
@@ -19,6 +28,8 @@
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- 字段类型下拉选择 -->
<el-form-item label="字段类型" prop="fieldType"> <el-form-item label="字段类型" prop="fieldType">
<el-select v-model="queryParams.fieldType" size="medium" clearable placeholder="请选择字段类型"> <el-select v-model="queryParams.fieldType" size="medium" clearable placeholder="请选择字段类型">
<el-option <el-option
@@ -29,6 +40,8 @@
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- 规则描述输入框 -->
<el-form-item label="规则描述" prop="ruleDesc"> <el-form-item label="规则描述" prop="ruleDesc">
<el-input <el-input
v-model="queryParams.ruleDesc" v-model="queryParams.ruleDesc"
@@ -36,6 +49,8 @@
placeholder="请输入规则描述" placeholder="请输入规则描述"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<!-- 规则状态下拉选择 -->
<el-form-item label="规则状态" prop="status"> <el-form-item label="规则状态" prop="status">
<el-select v-model="queryParams.status" size="medium" clearable placeholder="请选择规则状态"> <el-select v-model="queryParams.status" size="medium" clearable placeholder="请选择规则状态">
<el-option <el-option
@@ -47,6 +62,8 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- 查询操作按钮 -->
<div class="mt15 flex align-items-c justify-content-b"> <div class="mt15 flex align-items-c justify-content-b">
<el-button size="medium" type="primary" @click="handleQuery" <el-button size="medium" type="primary" @click="handleQuery"
>查询</el-button >查询</el-button
@@ -58,6 +75,8 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 规则列表表格 -->
<r-table <r-table
:columns="tableConfig.columns" :columns="tableConfig.columns"
:data="tableData" :data="tableData"
@@ -77,6 +96,7 @@ export default {
data() { data() {
return { return {
loading: false, loading: false,
// 查询参数
queryParams: { queryParams: {
page: 1, page: 1,
pageSize: 10, pageSize: 10,
@@ -85,16 +105,19 @@ export default {
ruleDesc: '', ruleDesc: '',
status: '' status: ''
}, },
// 规则类型选项列表
ruleTypeList: [ ruleTypeList: [
{ label: '类型1', value: 1 }, { label: '类型1', value: 1 },
{ label: '类型2', value: 2 }, { label: '类型2', value: 2 },
{ label: '类型3', value: 3 } { label: '类型3', value: 3 }
], ],
// 字段类型选项列表
fieldTypeList: [ fieldTypeList: [
{ label: '字段类型1', value: 1 }, { label: '字段类型1', value: 1 },
{ label: '字段类型2', value: 2 }, { label: '字段类型2', value: 2 },
{ label: '字段类型3', value: 3 } { label: '字段类型3', value: 3 }
], ],
// 规则状态选项列表
statusList: [ statusList: [
{ label: '启用', value: 0 }, { label: '启用', value: 0 },
{ label: '停用', value: 1 } { label: '停用', value: 1 }
@@ -131,6 +154,7 @@ export default {
isRedraw: true, isRedraw: true,
render: (h, params) => { render: (h, params) => {
return h('div', [ return h('div', [
// 查看详情按钮
h( h(
'el-button', 'el-button',
{ {
@@ -145,6 +169,7 @@ export default {
}, },
'' ''
), ),
// 编辑按钮
h( h(
'el-button', 'el-button',
{ {
@@ -159,6 +184,7 @@ export default {
}, },
'' ''
), ),
// 删除按钮
h( h(
'el-button', 'el-button',
{ {
@@ -173,6 +199,7 @@ export default {
}, },
'' ''
), ),
// 启用/停用按钮(根据当前状态显示不同图标)
h( h(
'el-button', 'el-button',
{ {
@@ -194,6 +221,7 @@ export default {
} }
] ]
}, },
// 表格数据
tableData: [] tableData: []
} }
}, },
@@ -201,7 +229,7 @@ export default {
this.getList() this.getList()
}, },
methods: { methods: {
// 获取列表 // 获取规则列表数据
getList() { getList() {
this.loading = true this.loading = true
// 这里应该调用实际的API接口 // 这里应该调用实际的API接口
@@ -222,23 +250,29 @@ export default {
this.loading = false this.loading = false
}, 500) }, 500)
}, },
// 查询按钮点击事件
handleQuery() { handleQuery() {
this.queryParams.page = 1 this.queryParams.page = 1
this.getList() this.getList()
}, },
// 重置按钮点击事件
resetQuery() { resetQuery() {
this.$refs.queryParams.resetFields() this.$refs.queryParams.resetFields()
this.handleQuery() this.handleQuery()
}, },
// 新增按钮点击事件
handleAdd() { handleAdd() {
this.$message.info('新增功能待实现') this.$message.info('新增功能待实现')
}, },
// 查看详情按钮点击事件
handleView(row) { handleView(row) {
this.$message.info('查看详情功能待实现') this.$message.info('查看详情功能待实现')
}, },
// 编辑按钮点击事件
handleEdit(row) { handleEdit(row) {
this.$message.info('编辑功能待实现') this.$message.info('编辑功能待实现')
}, },
// 启用/停用按钮点击事件
handleToggleStatus(row) { handleToggleStatus(row) {
// 启用的数据能停用,停用的数据反之 // 启用的数据能停用,停用的数据反之
const newStatus = row.status === 0 ? 1 : 0; const newStatus = row.status === 0 ? 1 : 0;
@@ -255,14 +289,17 @@ export default {
'提示' '提示'
) )
}, },
// 分页大小改变事件
handleSizeChange(val) { handleSizeChange(val) {
this.queryParams.pageSize = val this.queryParams.pageSize = val
this.getList() this.getList()
}, },
// 当前页码改变事件
handleCurrentChange(val) { handleCurrentChange(val) {
this.queryParams.page = val this.queryParams.page = val
this.getList() this.getList()
}, },
// 删除按钮点击事件
handleDelete(row) { handleDelete(row) {
this.$messageBox( this.$messageBox(
() => { () => {