yxk-20260421-通用发起流程组件

This commit is contained in:
ye1023
2026-04-21 19:12:19 +08:00
parent 3a49966dac
commit 55f91ba764
2 changed files with 203 additions and 46 deletions
@@ -0,0 +1,146 @@
<template>
<j-modal
:title="title"
:width="720"
:visible="visible"
@ok="handleOk"
@cancel="handleCancel"
cancelText="Cancel"
>
<a-form :model="formData" :label-col="{ style: { width: '120px' } }" :wrapper-col="{ span: 16 }">
<a-form-item label="Mode">
<a-radio-group v-model:value="formData.triggerMode">
<a-radio value="immediate">Immediate</a-radio>
<a-radio value="recurring">Recurring</a-radio>
</a-radio-group>
</a-form-item>
<template v-if="formData.triggerMode === 'recurring'">
<a-form-item label="Interval Type">
<JDictSelectTag
v-model:value="formData.intervalType"
dictCode="sup_interval_type"
placeholder="Select interval type"
:getPopupContainer="(node) => node?.parentNode"
/>
</a-form-item>
<a-form-item label="Repeat Count">
<a-input-number
v-model:value="formData.startCount"
:min="1"
:precision="0"
placeholder="Input repeat count"
style="width: 100%"
/>
</a-form-item>
<a-form-item label="Start Time">
<a-date-picker
v-model:value="formData.intervalStartTime"
show-time
valueFormat="YYYY-MM-DD HH:mm:ss"
placeholder="Select start time"
style="width: 100%"
:getPopupContainer="(node) => node?.parentNode"
/>
</a-form-item>
</template>
</a-form>
<template #footer>
<a-button @click="handleCancel">Cancel</a-button>
<a-button type="primary" @click="handleOk">OK</a-button>
</template>
</j-modal>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import JModal from '/src/components/Modal/src/JModal/JModal.vue';
import JDictSelectTag from '/src/components/Form/src/jeecg/components/JDictSelectTag.vue';
import { useMessage } from '/src/hooks/web/useMessage';
interface ModalPayload {
title?: string;
payload?: Record<string, any>;
initialValues?: Record<string, any>;
}
const emit = defineEmits(['confirm']);
const { createMessage } = useMessage();
const title = ref('Start Process');
const visible = ref(false);
const contextData = ref<Record<string, any>>({});
const formData = reactive({
triggerMode: 'immediate',
intervalType: undefined as number | string | undefined,
startCount: undefined as number | undefined,
intervalStartTime: undefined as string | undefined,
});
function resetForm() {
formData.triggerMode = 'immediate';
formData.intervalType = undefined;
formData.startCount = undefined;
formData.intervalStartTime = undefined;
}
function open(data: ModalPayload = {}) {
resetForm();
title.value = data.title || 'Start Process';
contextData.value = data.payload || {};
visible.value = true;
const initialValues = data.initialValues || {};
if (initialValues.triggerType === 1) {
formData.triggerMode = 'recurring';
}
if (initialValues.intervalType !== undefined && initialValues.intervalType !== null && initialValues.intervalType !== '') {
formData.intervalType = initialValues.intervalType;
}
if (initialValues.startCount !== undefined && initialValues.startCount !== null && initialValues.startCount !== '') {
formData.startCount = Number(initialValues.startCount);
}
if (initialValues.intervalStartTime) {
formData.intervalStartTime = initialValues.intervalStartTime;
}
}
function handleCancel() {
visible.value = false;
}
function handleOk() {
if (formData.triggerMode === 'recurring') {
if (!formData.intervalType) {
createMessage.warning('Please select interval type');
return;
}
if (!formData.startCount) {
createMessage.warning('Please input repeat count');
return;
}
if (!formData.intervalStartTime) {
createMessage.warning('Please select start time');
return;
}
}
emit('confirm', {
payload: contextData.value,
options: {
triggerType: formData.triggerMode === 'recurring' ? 2 : 1,
intervalType: formData.triggerMode === 'recurring' ? Number(formData.intervalType) : undefined,
startCount: formData.triggerMode === 'recurring' ? Number(formData.startCount) : undefined,
intervalStartTime: formData.triggerMode === 'recurring' ? formData.intervalStartTime : undefined,
},
});
handleCancel();
}
defineExpose({
open,
});
</script>
@@ -51,36 +51,36 @@
<BgPartymatterModal ref="registerModal" @success="handleSuccess" /> <BgPartymatterModal ref="registerModal" @success="handleSuccess" />
<!-- 审批记录 --> <!-- 审批记录 -->
<BpmPictureModal @register="registerBpmModal" /> <BpmPictureModal @register="registerBpmModal" />
<FlowScheduleStartModal ref="flowScheduleModalRef" @confirm="handleFlowScheduleConfirm" />
</div> </div>
</template> </template>
<script lang="ts" name="bgpartymatter-bgPartymatter" setup> <script lang="ts" name="bgpartymatter-bgPartymatter" setup>
import { ref, reactive, computed, unref, provide } from 'vue'; import { ref, reactive, computed, unref, provide } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table'; import { BasicTable, TableAction } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage' import { useListPage } from '/@/hooks/system/useListPage';
import { useModal } from '/@/components/Modal'; import { useModal } from '/@/components/Modal';
import { dateUtil } from '/@/utils/dateUtil'; import { dateUtil } from '/@/utils/dateUtil';
import BgPartymatterModal from './components/BgPartymatterModal.vue' import { useMessage } from '/@/hooks/web/useMessage';
import { startProcessSchedules } from '/@/api/common/api';
import BgPartymatterModal from './components/BgPartymatterModal.vue';
import BgPartymatterFeedbackList from './BgPartymatterFeedbackList.vue';
import FlowScheduleStartModal from '/src/components/semri/process/FlowScheduleStartModal.vue';
import { columns, superQuerySchema } from './BgPartymatter.data'; import { columns, superQuerySchema } from './BgPartymatter.data';
import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './BgPartymatter.api'; import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './BgPartymatter.api';
import { downloadFile } from '/@/utils/common/renderUtils';
import { useMessage } from '/@/hooks/web/useMessage'; const FLOW_CODE = 'dev_task_task_001';
import JSwitch from '/@/components/Form/src/jeecg/components/JSwitch.vue'; const BUSINESS_TABLE_NAME = 'bg_partymatter';
import JSelectDept from '/@/components/Form/src/jeecg/components/JSelectDept.vue'; const FORM_URL = 'bgpartymatter/components/BgPartymatterForm';
import JSelectUser from '/@/components/Form/src/jeecg/components/JSelectUser.vue';
const [registerBpmModal, { openModal: bpmPicModal }] = useModal(); const [registerBpmModal, { openModal: bpmPicModal }] = useModal();
import BgPartymatterFeedbackList from './BgPartymatterFeedbackList.vue'
import { useUserStore } from '/@/store/modules/user';
import {startProcessSchedules} from "@/api/common/api";
const formRef = ref(); const formRef = ref();
const queryParam = reactive<any>({});
const checkedKeys = ref<Array<string | number>>([]);
const registerModal = ref(); const registerModal = ref();
const userStore = useUserStore(); const flowScheduleModalRef = ref();
const queryParam = reactive<any>({});
const { createMessage } = useMessage(); const { createMessage } = useMessage();
//注册table数据 //注册table数据
const { prefixCls,tableContext,onExportXls,onImportXls } = useListPage({ const { tableContext, onExportXls, onImportXls } = useListPage({
tableProps:{ tableProps:{
title: '党委会', title: '党委会',
api: list, api: list,
@@ -212,53 +212,63 @@
ifShow: !!record.bpmStatus && record.bpmStatus !== '1', ifShow: !!record.bpmStatus && record.bpmStatus !== '1',
}, },
]; ];
if (record.bpmStatus == '1' || !record.bpmStatus) { if (record.bpmStatus == '1' || !record.bpmStatus) {
dropDownAction.push({ dropDownAction.push({
label: '发起流程', label: '发起流程',
popConfirm: { onClick: handleProcess.bind(null, record),
title: '确认提交流程吗?', });
confirm: handleProcess.bind(null, record),
placement: 'topLeft',
}
})
} }
return dropDownAction; return dropDownAction;
} }
/** function handleProcess(record) {
* 提交流程 flowScheduleModalRef.value?.open({
*/ title: 'Start Flow',
async function handleProcess(record) { payload: { record },
initialValues: {
triggerType: record.isNeedInterval, //1立即督办,2重复督办
intervalType: record.intervalType,
startCount: record.startCount,
intervalStartTime: record.intervalStartTime ? dateUtil(record.intervalStartTime).format('YYYY-MM-DD HH:mm:ss') : undefined,
},
});
}
async function handleFlowScheduleConfirm({ payload, options }) {
const record = payload?.record || {};
const formatDate = (value, format) => { const formatDate = (value, format) => {
return value ? dateUtil(value).format(format) : undefined; return value ? dateUtil(value).format(format) : undefined;
}; };
const params = { const params = {
intervalType: record.intervalType ? Number(record.intervalType) : undefined, intervalType: options.intervalType,
startCount: record.startCount ? Number(record.startCount) : undefined, startCount: options.startCount,
taskTask: { taskTask: {
flowCode: 'dev_task_task_001', flowCode: FLOW_CODE,
triggerType: record.isNeedInterval, //1立即督办,2重复督办 triggerType: options.triggerType,
businessId: record.id, businessId: record.id,
businessTablename: 'bg_partymatter', businessTablename: BUSINESS_TABLE_NAME,
title: record.title, title: record.title,
content: record.content, content: record.content,
urgencyLevel: record.urgencyLevel, urgencyLevel: record.urgencyLevel,
deptId: record.responDeptid, deptId: record.responDeptid,
requireFinishDate: formatDate(record.deadline, 'YYYY-MM-DD'), requireFinishDate: formatDate(record.deadline, 'YYYY-MM-DD'),
startTime: formatDate(record.intervalStartTime, 'YYYY-MM-DD HH:mm:ss'), startTime: options.intervalStartTime,
deadline: formatDate(record.deadline, 'YYYY-MM-DD HH:mm:ss'), deadline: formatDate(record.deadline, 'YYYY-MM-DD HH:mm:ss'),
formUrl: 'bgpartymatter/components/BgPartymatterForm', formUrl: FORM_URL,
}, },
} };
await startProcessSchedules(params); await startProcessSchedules(params);
createMessage.success('流程发起成功');
handleSuccess(); handleSuccess();
} }
/**
* 审批进度
*/
async function handlePreviewPic(record) { async function handlePreviewPic(record) {
bpmPicModal(true, { bpmPicModal(true, {
flowCode: 'dev_bg_partymatter_001', flowCode: FLOW_CODE,
dataId: record.id, dataId: record.id,
}); });
} }
@@ -297,6 +307,7 @@
} }
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.jeecg-basic-table-form-container { .jeecg-basic-table-form-container {
padding: 0; padding: 0;