yxk-20260424-新增通用查询流程组件v1,传入businessid查询所有相关流程

This commit is contained in:
ye1023
2026-04-24 15:17:40 +08:00
parent 5ee753b967
commit 1307f4e4f9
3 changed files with 218 additions and 67 deletions
+11 -2
View File
@@ -16,6 +16,7 @@ enum Api {
getCategoryData = '/sys/category/loadAllData',
startProcess = '/act/process/extActProcess/startMutilProcess',
startProcessSchedules = '/tasktask/taskTask/flow-schedules',
queryByBusinessId = '/tasktask/taskTask/queryByBusinessId',
}
/**
@@ -165,8 +166,16 @@ export const startProcess = (params) => {
return defHttp.post({
url: Api.startProcess,
params,
})
}
});
};
/**
* 根据业务ID查询流程列表
* @param params
*/
export const queryByBusinessId = (params) =>
defHttp.get({ url: Api.queryByBusinessId, params }, { isTransformResponse: false });
/**
* 【用于评论功能】自定义文件上传-方法
@@ -0,0 +1,124 @@
<template>
<j-modal
:title="title"
:width="1400"
:visible="visible"
:footer="null"
@cancel="handleCancel"
cancelText="关闭"
>
<div class="business-process-list-modal">
<BasicTable @register="registerTable">
<template #action="{ record }">
<TableAction :actions="getTableAction(record)" />
</template>
</BasicTable>
</div>
<BpmPictureModal @register="registerBpmModal" />
</j-modal>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { BasicTable, TableAction, useTable } from '/@/components/Table';
import JModal from '/@/components/Modal/src/JModal/JModal.vue';
import { useModal } from '/@/components/Modal';
import { columns } from '/@/views/taskProcess/TaskTask.data';
import { queryByBusinessId } from '/@/api/common/api';
import { useMessage } from '/@/hooks/web/useMessage';
interface OpenParams {
businessId?: string;
title?: string;
}
const title = ref('流程列表');
const visible = ref(false);
const currentBusinessId = ref('');
const { createMessage } = useMessage();
const [registerBpmModal, { openModal: bpmPicModal }] = useModal();
const [registerTable, { setTableData, setLoading, clearSelectedRowKeys }] = useTable({
rowKey: 'id',
columns,
useSearchForm: false,
canResize: false,
pagination: false,
showIndexColumn: true,
bordered: true,
actionColumn: {
title: '操作',
dataIndex: 'action',
width: 120,
fixed: 'right',
slots: { customRender: 'action' },
},
scroll: {
x: 3600,
},
});
async function loadData() {
if (!currentBusinessId.value) {
setTableData([]);
return;
}
setLoading(true);
try {
const res = await queryByBusinessId({ businessId: currentBusinessId.value });
const list = Array.isArray(res?.result) ? res.result : [];
setTableData(list);
if (!list.length) {
createMessage.warning(res?.message || '未查询到流程数据');
}
} catch (error) {
setTableData([]);
} finally {
setLoading(false);
clearSelectedRowKeys();
}
}
function open(params: OpenParams = {}) {
currentBusinessId.value = params.businessId || '';
title.value = params.title || '流程列表';
visible.value = true;
loadData();
}
function handleCancel() {
visible.value = false;
currentBusinessId.value = '';
setTableData([]);
clearSelectedRowKeys();
}
function handlePreviewPic(record) {
bpmPicModal(true, {
flowCode: record.flowCode,
dataId: record.id,
});
}
function getTableAction(record) {
return [
{
label: '审批历史',
onClick: handlePreviewPic.bind(null, record),
},
];
}
defineExpose({
open,
});
</script>
<style lang="less" scoped>
.business-process-list-modal {
:deep(.vben-basic-table) {
padding: 0;
}
}
</style>
@@ -7,56 +7,57 @@
</a-row>
</a-form>
</div>
<div class="content">
<!--引用表格-->
<BasicTable @register="registerTable" :rowSelection="rowSelection">
<!--插槽:table标题-->
<template #tableTitle>
<a-button type="primary" v-auth="'bgpartymatter:bg_partymatter:add'" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
<a-button type="primary" v-auth="'bgpartymatter:bg_partymatter:exportXls'" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
<j-upload-button type="primary" v-auth="'bgpartymatter:bg_partymatter:importExcel'" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>
<a-dropdown v-if="selectedRowKeys.length > 0">
<template #overlay>
<a-menu>
<a-menu-item key="1" @click="batchHandleDelete">
<Icon icon="ant-design:delete-outlined"></Icon>
删除
</a-menu-item>
</a-menu>
</template>
<a-button v-auth="'bgpartymatter:bg_partymatter:deleteBatch'"
>批量操作
<Icon icon="mdi:chevron-down"></Icon>
</a-button>
</a-dropdown>
<!-- 高级查询 -->
<super-query :config="superQueryConfig" @search="handleSuperQuery" />
</template>
<!--操作栏-->
<template #action="{ record }">
<TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
</template>
<!--字段回显插槽-->
<template v-slot:bodyCell="{ column, record, index, text }">
</template>
</BasicTable>
<!--子表表格tab-->
<a-tabs defaultActiveKey="1" style="margin: 10px">
<a-tab-pane tab="党委会反馈表" key="1" >
<BgPartymatterFeedbackList />
</a-tab-pane>
</a-tabs>
</div>
<div class="content">
<!--引用表格-->
<BasicTable @register="registerTable" :rowSelection="rowSelection">
<!--插槽:table标题-->
<template #tableTitle>
<a-button type="primary" v-auth="'bgpartymatter:bg_partymatter:add'" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
<a-button type="primary" v-auth="'bgpartymatter:bg_partymatter:exportXls'" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
<j-upload-button type="primary" v-auth="'bgpartymatter:bg_partymatter:importExcel'" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>
<a-dropdown v-if="selectedRowKeys.length > 0">
<template #overlay>
<a-menu>
<a-menu-item key="1" @click="batchHandleDelete">
<Icon icon="ant-design:delete-outlined"></Icon>
删除
</a-menu-item>
</a-menu>
</template>
<a-button v-auth="'bgpartymatter:bg_partymatter:deleteBatch'">
批量操作
<Icon icon="mdi:chevron-down"></Icon>
</a-button>
</a-dropdown>
<!-- 高级查询 -->
<super-query :config="superQueryConfig" @search="handleSuperQuery" />
</template>
<!--操作栏-->
<template #action="{ record }">
<TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
</template>
<!--字段回显插槽-->
<template v-slot:bodyCell="{ column, record, index, text }">
</template>
</BasicTable>
<!--子表表格tab-->
<a-tabs defaultActiveKey="1" style="margin: 10px">
<a-tab-pane tab="党委会反馈表" key="1" >
<BgPartymatterFeedbackList />
</a-tab-pane>
</a-tabs>
</div>
<!-- 表单区域 -->
<BgPartymatterModal ref="registerModal" @success="handleSuccess" />
<!-- 审批记录 -->
<BpmPictureModal @register="registerBpmModal" />
<FlowScheduleStartModal ref="flowScheduleModalRef" @confirm="handleFlowScheduleConfirm" />
<BusinessProcessListModal ref="businessProcessListModalRef" />
</div>
</template>
<script lang="ts" name="bgpartymatter-bgPartymatter" setup>
import { ref, reactive, computed, unref, provide } from 'vue';
import { computed, reactive, ref, unref, provide } from 'vue';
import { BasicTable, TableAction } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import { useModal } from '/@/components/Modal';
@@ -65,17 +66,22 @@
import { startProcessSchedules } from '/@/api/common/api';
import BgPartymatterModal from './components/BgPartymatterModal.vue';
import BgPartymatterFeedbackList from './BgPartymatterFeedbackList.vue';
import BusinessProcessListModal from '/src/components/semri/process/BusinessProcessListModal.vue';
import FlowScheduleStartModal from '/src/components/semri/process/FlowScheduleStartModal.vue';
import { columns, superQuerySchema } from './BgPartymatter.data';
import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './BgPartymatter.api';
const FLOW_CODE = 'dev_task_task_001';
const FLOW_NAME = '党委会决议事项';
const BUSINESS_TABLE_NAME = 'bg_partymatter';
const FORM_URL = 'bgpartymatter/components/BgPartymatterForm';
const [registerBpmModal, { openModal: bpmPicModal }] = useModal();
const formRef = ref();
const registerModal = ref();
const flowScheduleModalRef = ref();
const businessProcessListModalRef = ref();
const queryParam = reactive<any>({});
const { createMessage } = useMessage();
//注册table数据
const { tableContext, onExportXls, onImportXls } = useListPage({
tableProps:{
@@ -108,9 +114,9 @@
url: getImportUrl,
success: handleSuccess,
},
})
});
const [registerTable, { reload },{ rowSelection, selectedRowKeys }] = tableContext
const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
const mainId = computed(() => (unref(selectedRowKeys).length > 0 ? unref(selectedRowKeys)[0] : ''));
//下发 mainId,子组件接收
provide('mainId', mainId);
@@ -203,11 +209,15 @@
},
auth: 'bgpartymatter:bg_partymatter:delete'
},
{
label: '审批进度',
onClick: handlePreviewPic.bind(null, record),
ifShow: !!record.bpmStatus && record.bpmStatus !== '1',
},
{
label: '审批进度',
onClick: handlePreviewPic.bind(null, record),
ifShow: !!record.bpmStatus && record.bpmStatus !== '1',
},
{
label: '查询督办流程',
onClick: handleQueryProcess.bind(null, record),
},
];
if (record.bpmStatus == '1' || !record.bpmStatus) {
@@ -227,6 +237,13 @@
});
}
function handleQueryProcess(record) {
businessProcessListModalRef.value?.open({
title: '流程列表',
businessId: record.id,
});
}
async function handleFlowScheduleConfirm({ payload, options }) {
const record = payload?.record || {};
const formatDate = (value, format) => {
@@ -241,16 +258,13 @@
triggerType: options.triggerType,
startTime: options.intervalStartTime,
//流程相关字段
flowCode: 'dev_task_task_001',
formUrl: 'bgpartymatter/components/BgPartymatterForm',
flowName: '党委会决议事项',
// jsonData: { deptid: 'xxx', deptname: 'xxxx1' },
flowCode: FLOW_CODE,
formUrl: FORM_URL,
flowName: FLOW_NAME,
jsonData: record,
//台账相关字段
businessTablename: 'bg_partymatter',
businessTablename: BUSINESS_TABLE_NAME,
businessId: record.id,
// deptLeaderId: 'sdw01',
title: record.title,
content: record.content,
urgencyLevel: record.urgencyLevel,
@@ -262,13 +276,12 @@
};
await startProcessSchedules(params);
// createMessage.success('流程发起成功');
handleSuccess();
}
async function handlePreviewPic(record) {
bpmPicModal(true, {
flowCode: 'dev_task_task_001',
flowCode: FLOW_CODE,
dataId: record.id,
});
}
@@ -322,21 +335,26 @@
.query-group-split-cust{
width: 30px;
display: inline-block;
text-align: center
text-align: center;
}
.ant-form-item:not(.ant-form-item-with-help){
.ant-form-item:not(.ant-form-item-with-help) {
margin-bottom: 16px;
height: 32px;
}
:deep(.ant-picker),:deep(.ant-input-number){
:deep(.ant-picker),
:deep(.ant-input-number) {
width: 100%;
}
}
.erpNativeList {
height: 100%;
.content {
background-color: #fff;
height: 100%;
.content {
background-color: #fff;
height: 100%;
}
}
}
</style>