446 lines
12 KiB
Vue
446 lines
12 KiB
Vue
<template>
|
||
<div class="shengPiJiLu-page">
|
||
<!-- 搜索区域组件，具体 props 需根据实际子组件调整 -->
|
||
<GuoYuSheShiShuJuTianBaoSearch @search-finish="handleSearchFinish" @reset="handleReset" />
|
||
<!-- 主表格 -->
|
||
<BasicTable ref="tableRef" :columns="columns" :list-url="queryPageList" :search-params="{}">
|
||
<!-- 使用 bodyCell 插槽自定义单元格渲染 -->
|
||
<template #bodyCell="{ column, record }">
|
||
<template v-if="column.key === 'action' || column.dataIndex === 'action'">
|
||
<div class="flex">
|
||
<a-button type="link" size="small" @click="handleShowApprovalLog(record)">审批详情</a-button>
|
||
<a-button type="link" size="small" @click="handleShowChangeLog(record)">变更详情</a-button>
|
||
</div>
|
||
</template>
|
||
<template v-if="column.dataIndex === 'bizType'">
|
||
{{ handName(record.bizType, yeWuType) }}
|
||
</template>
|
||
<template v-if="column.dataIndex === 'status'">
|
||
{{ handName(record.status, shenStatus) }}
|
||
</template>
|
||
</template>
|
||
</BasicTable>
|
||
|
||
<!-- 审批操作日志弹框 -->
|
||
<a-modal
|
||
v-model:open="approvalLogVisible"
|
||
title="审批操作日志"
|
||
width="1600px"
|
||
:footer="null"
|
||
destroy-on-close="false"
|
||
>
|
||
<div class="approval-log-modal-content">
|
||
<ApprovalLogSearch
|
||
:action-type-dict="actionTypeDict"
|
||
@search-finish="handleApprovalLogSearch"
|
||
@reset="handleApprovalLogReset"
|
||
/>
|
||
<BasicTable
|
||
ref="approvalLogTableRef"
|
||
:columns="approvalLogColumns"
|
||
:list-url="getApprovalLogList"
|
||
>
|
||
<template #bodyCell="{ column, record }">
|
||
<template v-if="column.dataIndex === 'action'">
|
||
{{ handName(record.action, actionTypeDict) }}
|
||
</template>
|
||
</template>
|
||
</BasicTable>
|
||
</div>
|
||
</a-modal>
|
||
|
||
<!-- 数据变更记录弹框 -->
|
||
<a-modal
|
||
v-model:open="changeLogVisible"
|
||
title="数据变更记录"
|
||
width="1600px"
|
||
:footer="null"
|
||
destroy-on-close="false"
|
||
>
|
||
<div class="change-log-modal-content">
|
||
<ChangeLogSearch
|
||
:operation-type-dict="operationTypeDict"
|
||
@search-finish="handleChangeLogSearch"
|
||
@reset="handleChangeLogReset"
|
||
/>
|
||
<BasicTable
|
||
ref="changeLogTableRef"
|
||
:columns="changeLogColumns"
|
||
:list-url="getApprovalChangeLogList"
|
||
>
|
||
<template #bodyCell="{ column, record }">
|
||
<template v-if="column.dataIndex === 'operationType'">
|
||
{{ handName(record.operationType, operationTypeDict) }}
|
||
</template>
|
||
<template v-if="column.dataIndex === 'bizType'">
|
||
{{ handName(record.bizType, yeWuType) }}
|
||
</template>
|
||
<template v-if="column.dataIndex === 'changeJson'">
|
||
<pre style="max-height: 200px; overflow: auto; margin: 0;">{{ record.changeJson }}</pre>
|
||
</template>
|
||
</template>
|
||
</BasicTable>
|
||
</div>
|
||
</a-modal>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, reactive, onMounted } from 'vue';
|
||
import { queryPageList, getApprovalLogList, getApprovalChangeLogList } from '@/api/shengPiJiLu';
|
||
import BasicTable from "@/components/BasicTable/index.vue";
|
||
import GuoYuSheShiShuJuTianBaoSearch from "./shengPiJiLuSearch.vue";
|
||
import ApprovalLogSearch from "./approvalLogSearch.vue";
|
||
import ChangeLogSearch from "./changeLogSearch.vue";
|
||
import { getDictItemsByCode } from '@/api/dict';
|
||
let columns = ref([
|
||
{
|
||
title: '审批批次号',
|
||
dataIndex: 'approvalNo',
|
||
key: 'approvalNo',
|
||
width: 160,
|
||
fixed: 'left'
|
||
},
|
||
{
|
||
title: '业务类型',
|
||
dataIndex: 'bizType',
|
||
key: 'bizType',
|
||
width: 100,
|
||
align: 'center'
|
||
},
|
||
{
|
||
title: '数据条数',
|
||
dataIndex: 'dataCount',
|
||
key: 'dataCount',
|
||
width: 100,
|
||
align: 'center'
|
||
},
|
||
{
|
||
title: '提交人',
|
||
dataIndex: 'applyUserName',
|
||
key: 'applyUserName',
|
||
width: 120,
|
||
align: 'center'
|
||
},
|
||
{
|
||
title: '提交时间',
|
||
dataIndex: 'applyTime',
|
||
key: 'applyTime',
|
||
width: 160,
|
||
align: 'center'
|
||
|
||
},
|
||
{
|
||
title: '审批状态',
|
||
dataIndex: 'status',
|
||
key: 'status',
|
||
width: 80,
|
||
align: 'center',
|
||
|
||
},
|
||
{
|
||
title: '审批人',
|
||
dataIndex: 'approverName',
|
||
key: 'approverName',
|
||
width: 120,
|
||
align: 'center'
|
||
},
|
||
{
|
||
title: '审批时间',
|
||
dataIndex: 'approveTime',
|
||
key: 'approveTime',
|
||
width: 160,
|
||
align: 'center'
|
||
|
||
},
|
||
{
|
||
title: '审批备注',
|
||
dataIndex: 'remark',
|
||
key: 'remark',
|
||
ellipsis: true,
|
||
|
||
},
|
||
{
|
||
title: '操作',
|
||
key: 'action',
|
||
width: 160,
|
||
fixed: 'right',
|
||
align: 'center'
|
||
}
|
||
]);
|
||
const tableRef = ref()
|
||
const handleSearchFinish = (values: any) => {
|
||
console.log(values);
|
||
const filters = [
|
||
values.approvalNo && {
|
||
field: "approvalNo",
|
||
operator: "contains",
|
||
dataType: "string",
|
||
value: values.approvalNo,
|
||
},
|
||
values.status && {
|
||
field: "status",
|
||
operator: "eq",
|
||
dataType: "string",
|
||
value: values.status,
|
||
},
|
||
].filter(Boolean);
|
||
|
||
|
||
const filter = {
|
||
logic: "and",
|
||
filters: filters,
|
||
};
|
||
tableRef.value?.getList(filter);
|
||
};
|
||
const handleReset = (values) => {
|
||
handleSearchFinish(values);
|
||
};
|
||
|
||
// 审批操作日志弹框相关
|
||
const approvalLogVisible = ref(false);
|
||
const approvalLogTableRef = ref();
|
||
|
||
const approvalLogColumns = ref([
|
||
{
|
||
title: '操作类型',
|
||
dataIndex: 'action',
|
||
key: 'action',
|
||
width: 120,
|
||
align: 'center'
|
||
},
|
||
{
|
||
title: '操作人',
|
||
dataIndex: 'operatorName',
|
||
key: 'operatorName',
|
||
width: 150,
|
||
align: 'center'
|
||
},
|
||
{
|
||
title: '操作时间',
|
||
dataIndex: 'operateTime',
|
||
key: 'operateTime',
|
||
width: 180
|
||
},
|
||
{
|
||
title: '创建时间',
|
||
dataIndex: 'createdAt',
|
||
key: 'createdAt',
|
||
width: 180
|
||
},
|
||
{
|
||
title: '审批意见',
|
||
dataIndex: 'commentInfo',
|
||
key: 'commentInfo',
|
||
ellipsis: true,
|
||
},
|
||
|
||
]);
|
||
|
||
// 数据变更记录弹框相关
|
||
const changeLogVisible = ref(false);
|
||
const changeLogTableRef = ref();
|
||
|
||
const changeLogColumns = ref([
|
||
{
|
||
title: '业务类型',
|
||
dataIndex: 'bizType',
|
||
key: 'bizType',
|
||
width: 120,
|
||
align: 'center'
|
||
},
|
||
{
|
||
title: '操作类型',
|
||
dataIndex: 'operationType',
|
||
key: 'operationType',
|
||
width: 120,
|
||
align: 'center'
|
||
},
|
||
{
|
||
title: '操作人',
|
||
dataIndex: 'operatorName',
|
||
key: 'operatorName',
|
||
width: 150,
|
||
align: 'center'
|
||
},
|
||
{
|
||
title: '操作时间',
|
||
dataIndex: 'operateTime',
|
||
key: 'operateTime',
|
||
width: 180
|
||
},
|
||
{
|
||
title: '创建时间',
|
||
dataIndex: 'createdAt',
|
||
key: 'createdAt',
|
||
width: 180
|
||
},
|
||
{
|
||
title: '变更内容',
|
||
dataIndex: 'changeJson',
|
||
key: 'changeJson',
|
||
ellipsis: true
|
||
},
|
||
|
||
]);
|
||
|
||
const currentApprovalId = ref('');
|
||
const actionTypeDict = ref([]);
|
||
const operationTypeDict = ref([]);
|
||
|
||
// 显示审批操作日志弹框
|
||
const handleShowApprovalLog = (record: any) => {
|
||
currentApprovalId.value = record.id;
|
||
approvalLogVisible.value = true;
|
||
// 延迟调用，确保弹框和 BasicTable 组件完全渲染
|
||
setTimeout(() => {
|
||
const filter = {
|
||
logic: "and",
|
||
filters: [
|
||
{
|
||
field: "approvalId",
|
||
operator: "eq",
|
||
dataType: "string",
|
||
value: record.id,
|
||
}
|
||
]
|
||
};
|
||
approvalLogTableRef.value?.getList(filter);
|
||
}, 300);
|
||
};
|
||
|
||
// 审批日志搜索处理
|
||
const handleApprovalLogSearch = (values: any) => {
|
||
console.log('审批日志搜索:', values);
|
||
const filters = [
|
||
{
|
||
field: "approvalId",
|
||
operator: "eq",
|
||
dataType: "string",
|
||
value: currentApprovalId.value,
|
||
},
|
||
values.action && {
|
||
field: "action",
|
||
operator: "eq",
|
||
dataType: "string",
|
||
value: values.action,
|
||
},
|
||
].filter(Boolean);
|
||
|
||
const filter = {
|
||
logic: "and",
|
||
filters: filters,
|
||
};
|
||
approvalLogTableRef.value?.getList(filter);
|
||
};
|
||
|
||
// 审批日志重置处理
|
||
const handleApprovalLogReset = (values: any) => {
|
||
console.log('审批日志重置:', values);
|
||
handleApprovalLogSearch(values);
|
||
};
|
||
|
||
// 显示数据变更记录弹框
|
||
const handleShowChangeLog = (record: any) => {
|
||
currentApprovalId.value = record.id;
|
||
changeLogVisible.value = true;
|
||
// 延迟调用，确保弹框和 BasicTable 组件完全渲染
|
||
setTimeout(() => {
|
||
const filter = {
|
||
logic: "and",
|
||
filters: [
|
||
{
|
||
field: "approvalId",
|
||
operator: "eq",
|
||
dataType: "string",
|
||
value: record.id,
|
||
}
|
||
]
|
||
};
|
||
changeLogTableRef.value?.getList(filter);
|
||
}, 300);
|
||
};
|
||
|
||
// 变更日志搜索处理
|
||
const handleChangeLogSearch = (values: any) => {
|
||
console.log('变更日志搜索:', values);
|
||
const filters = [
|
||
{
|
||
field: "approvalId",
|
||
operator: "eq",
|
||
dataType: "string",
|
||
value: currentApprovalId.value,
|
||
},
|
||
values.operationType && {
|
||
field: "operationType",
|
||
operator: "eq",
|
||
dataType: "string",
|
||
value: values.operationType,
|
||
},
|
||
].filter(Boolean);
|
||
|
||
const filter = {
|
||
logic: "and",
|
||
filters: filters,
|
||
};
|
||
changeLogTableRef.value?.getList(filter);
|
||
};
|
||
|
||
// 变更日志重置处理
|
||
const handleChangeLogReset = (values: any) => {
|
||
console.log('变更日志重置:', values);
|
||
handleChangeLogSearch(values);
|
||
};
|
||
|
||
// 初始化
|
||
onMounted(() => {
|
||
dictNmae()
|
||
});
|
||
const shenStatus = ref([])
|
||
const yeWuType = ref([])
|
||
const dictNmae = () => {
|
||
getDictItemsByCode({ dictCode: 'shenStatus' }).then((res) => {
|
||
shenStatus.value = res.data;
|
||
});
|
||
getDictItemsByCode({ dictCode: 'yeWuType' }).then((res) => {
|
||
yeWuType.value = res.data;
|
||
});
|
||
// TODO: 待补充操作类型字典
|
||
getDictItemsByCode({ dictCode: 'caoType' }).then((res) => {
|
||
actionTypeDict.value = res.data;
|
||
});
|
||
getDictItemsByCode({ dictCode: 'caoTypeTwo' }).then((res) => {
|
||
operationTypeDict.value = res.data;
|
||
});
|
||
}
|
||
const handName = (val: any, arr: any) => {
|
||
let dictName1 = ''
|
||
arr.forEach((item: any) => {
|
||
if (item.itemCode == val) {
|
||
dictName1 = item.dictName
|
||
}
|
||
})
|
||
return dictName1
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.shengPiJiLu-page {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #ffffff;
|
||
padding: 20px;
|
||
}
|
||
|
||
.approval-log-modal-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.change-log-modal-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
</style> |