From 5e440a7dc434c43eb828fa62cf9c12b0078b8565 Mon Sep 17 00:00:00 2001 From: 疯狂的狮子Li <15040126243@163.com> Date: 星期一, 20 一月 2025 11:36:18 +0800 Subject: [PATCH] !173 发布 5.3.0-BETA 公测版本 Merge pull request !173 from 疯狂的狮子Li/dev --- src/views/workflow/processInstance/index.vue | 359 ++++++++++++++++++++++++++++++++++------------------------- 1 files changed, 206 insertions(+), 153 deletions(-) diff --git a/src/views/workflow/processInstance/index.vue b/src/views/workflow/processInstance/index.vue index 7c60880..b58b189 100644 --- a/src/views/workflow/processInstance/index.vue +++ b/src/views/workflow/processInstance/index.vue @@ -10,7 +10,7 @@ class="mt-2" node-key="id" :data="categoryOptions" - :props="{ label: 'categoryName', children: 'children' }" + :props="{ label: 'label', children: 'children' }" :expand-on-click-node="false" :filter-node-method="filterNode" highlight-current @@ -20,23 +20,31 @@ </el-card> </el-col> <el-col :lg="20" :xs="24"> - <div class="mb-[10px]"> - <el-card shadow="hover" class="text-center"> - <el-radio-group v-model="tab" @change="changeTab(tab)"> - <el-radio-button value="running">杩愯涓�</el-radio-button> - <el-radio-button value="finish">宸插畬鎴�</el-radio-button> - </el-radio-group> - </el-card> - </div> + <!-- <div class="mb-[10px]"> + <el-card shadow="hover" class="text-center"> + <el-radio-group v-model="tab" @change="changeTab(tab)"> + <el-radio-button value="running">杩愯涓�</el-radio-button> + <el-radio-button value="finish">宸插畬鎴�</el-radio-button> + </el-radio-group> + </el-card> + </div>--> <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave"> <div v-show="showSearch" class="mb-[10px]"> <el-card shadow="hover"> - <el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true" label-width="120px"> - <el-form-item label="娴佺▼瀹氫箟鍚嶇О" prop="name"> - <el-input v-model="queryParams.name" placeholder="璇疯緭鍏ユ祦绋嬪畾涔夊悕绉�" @keyup.enter="handleQuery" /> + <el-form v-show="showSearch" ref="queryFormRef" :model="queryParams" :inline="true"> + <el-form-item> + <el-badge :value="userSelectCount" :max="10" class="item"> + <el-button type="primary" @click="openUserSelect">閫夋嫨鐢宠浜�</el-button> + </el-badge> </el-form-item> - <el-form-item label="娴佺▼瀹氫箟KEY" prop="key"> - <el-input v-model="queryParams.key" placeholder="璇疯緭鍏ユ祦绋嬪畾涔塊EY" @keyup.enter="handleQuery" /> + <el-form-item label="浠诲姟鍚嶇О" prop="nodeName"> + <el-input v-model="queryParams.nodeName" placeholder="璇疯緭鍏ヤ换鍔″悕绉�" @keyup.enter="handleQuery" /> + </el-form-item> + <el-form-item label="娴佺▼瀹氫箟鍚嶇О" label-width="100" prop="flowName"> + <el-input v-model="queryParams.flowName" placeholder="璇疯緭鍏ユ祦绋嬪畾涔夊悕绉�" @keyup.enter="handleQuery" /> + </el-form-item> + <el-form-item label="娴佺▼瀹氫箟缂栫爜" label-width="100" prop="flowCode"> + <el-input v-model="queryParams.flowCode" placeholder="璇疯緭鍏ユ祦绋嬪畾涔夌紪鐮�" @keyup.enter="handleQuery" /> </el-form-item> <el-form-item> <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button> @@ -52,69 +60,77 @@ <el-col :span="1.5"> <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">鍒犻櫎</el-button> </el-col> - <right-toolbar v-model:showSearch="showSearch" @query-table="handleQuery"></right-toolbar> + <right-toolbar v-model:show-search="showSearch" @query-table="handleQuery"></right-toolbar> </el-row> </template> - - <el-table v-loading="loading" border :data="processInstanceList" @selection-change="handleSelectionChange"> - <el-table-column type="selection" width="55" align="center" /> - <el-table-column align="center" type="index" label="搴忓彿" width="60"></el-table-column> - <el-table-column :show-overflow-tooltip="true" align="center" label="娴佺▼瀹氫箟鍚嶇О"> - <template #default="scope"> - <span>{{ scope.row.processDefinitionName }}v{{ scope.row.processDefinitionVersion }}.0</span> - </template> - </el-table-column> - <el-table-column align="center" prop="processDefinitionKey" label="娴佺▼瀹氫箟KEY"></el-table-column> - <el-table-column align="center" prop="processDefinitionVersion" label="鐗堟湰鍙�" width="90"> - <template #default="scope"> v{{ scope.row.processDefinitionVersion }}.0</template> - </el-table-column> - <el-table-column v-if="tab === 'running'" align="center" prop="isSuspended" label="鐘舵��" min-width="70"> - <template #default="scope"> - <el-tag v-if="!scope.row.isSuspended" type="success">婵�娲�</el-tag> - <el-tag v-else type="danger">鎸傝捣</el-tag> - </template> - </el-table-column> - <el-table-column align="center" label="娴佺▼鐘舵��" min-width="70"> - <template #default="scope"> - <dict-tag :options="wf_business_status" :value="scope.row.businessStatus"></dict-tag> - </template> - </el-table-column> - <el-table-column align="center" prop="startTime" label="鍚姩鏃堕棿" width="160"></el-table-column> - <el-table-column v-if="tab === 'finish'" align="center" prop="endTime" label="缁撴潫鏃堕棿" width="160"></el-table-column> - <el-table-column label="鎿嶄綔" align="center" :width="130"> - <template #default="scope"> - <el-row v-if="tab === 'running'" :gutter="10" class="mb8"> - <el-col :span="1.5"> - <el-popover :ref="`popoverRef${scope.$index}`" trigger="click" placement="left" :width="300"> - <el-input v-model="deleteReason" resize="none" :rows="3" type="textarea" placeholder="璇疯緭鍏ヤ綔搴熷師鍥�" /> - <div style="text-align: right; margin: 5px 0px 0px 0px"> - <el-button size="small" text @click="cancelPopover(scope.$index)">鍙栨秷</el-button> - <el-button size="small" type="primary" @click="handleInvalid(scope.row)">纭</el-button> - </div> - <template #reference> - <el-button link type="primary" size="small" icon="CircleClose">浣滃簾</el-button> - </template> - </el-popover> - </el-col> - <el-col :span="1.5"> - <el-button link type="primary" size="small" icon="Delete" @click="handleDelete(scope.row)">鍒犻櫎</el-button> - </el-col> - </el-row> - <el-row :gutter="10" class="mb8"> - <el-col :span="1.5"> - <el-button link type="primary" size="small" icon="View" @click="handleView(scope.row)">鏌ョ湅</el-button> - </el-col> - </el-row> - </template> - </el-table-column> - </el-table> - <pagination - v-show="total > 0" - v-model:page="queryParams.pageNum" - v-model:limit="queryParams.pageSize" - :total="total" - @pagination="handleQuery" - /> + <el-tabs v-model="tab" @tab-click="changeTab"> + <el-tab-pane name="running" label="杩愯涓�"></el-tab-pane> + <el-tab-pane name="finish" label="宸插畬鎴�"></el-tab-pane> + <el-table v-loading="loading" border :data="processInstanceList" @selection-change="handleSelectionChange"> + <el-table-column type="selection" width="55" align="center" /> + <el-table-column align="center" type="index" label="搴忓彿" width="60"></el-table-column> + <el-table-column :show-overflow-tooltip="true" align="center" label="娴佺▼瀹氫箟鍚嶇О"> + <template #default="scope"> + <span>{{ scope.row.flowName }}v{{ scope.row.version }}</span> + </template> + </el-table-column> + <el-table-column align="center" prop="nodeName" label="浠诲姟鍚嶇О"></el-table-column> + <el-table-column align="center" prop="flowCode" label="娴佺▼瀹氫箟缂栫爜"></el-table-column> + <el-table-column align="center" prop="createByName" label="鐢宠浜�"></el-table-column> + <el-table-column align="center" prop="version" label="鐗堟湰鍙�" width="90"> + <template #default="scope"> v{{ scope.row.version }}.0</template> + </el-table-column> + <el-table-column v-if="tab === 'running'" align="center" prop="isSuspended" label="鐘舵��" min-width="70"> + <template #default="scope"> + <el-tag v-if="!scope.row.isSuspended" type="success">婵�娲�</el-tag> + <el-tag v-else type="danger">鎸傝捣</el-tag> + </template> + </el-table-column> + <el-table-column align="center" label="娴佺▼鐘舵��" min-width="70"> + <template #default="scope"> + <dict-tag :options="wf_business_status" :value="scope.row.flowStatus"></dict-tag> + </template> + </el-table-column> + <el-table-column align="center" prop="createTime" label="鍚姩鏃堕棿" width="160"></el-table-column> + <el-table-column v-if="tab === 'finish'" align="center" prop="updateTime" label="缁撴潫鏃堕棿" width="160"></el-table-column> + <el-table-column label="鎿嶄綔" align="center" :width="165"> + <template #default="scope"> + <el-row v-if="tab === 'running'" :gutter="10" class="mb8"> + <el-col :span="1.5"> + <el-popover :ref="`popoverRef${scope.$index}`" trigger="click" placement="left" :width="300"> + <el-input v-model="deleteReason" resize="none" :rows="3" type="textarea" placeholder="璇疯緭鍏ヤ綔搴熷師鍥�" /> + <div style="text-align: right; margin: 5px 0px 0px 0px"> + <el-button size="small" text @click="cancelPopover(scope.$index)">鍙栨秷</el-button> + <el-button size="small" type="primary" @click="handleInvalid(scope.row)">纭</el-button> + </div> + <template #reference> + <el-button type="danger" size="small" icon="CircleClose">浣滃簾</el-button> + </template> + </el-popover> + </el-col> + <el-col :span="1.5"> + <el-button type="danger" size="small" icon="Delete" @click="handleDelete(scope.row)">鍒犻櫎 </el-button> + </el-col> + </el-row> + <el-row :gutter="10" class="mb8"> + <el-col :span="1.5"> + <el-button type="primary" size="small" icon="View" @click="handleView(scope.row)">鏌ョ湅</el-button> + </el-col> + <el-col :span="1.5"> + <el-button type="primary" size="small" icon="Document" @click="handleInstanceVariable(scope.row)"> 鍙橀噺 </el-button> + </el-col> + </el-row> + </template> + </el-table-column> + </el-table> + <pagination + v-show="total > 0" + v-model:page="queryParams.pageNum" + v-model:limit="queryParams.pageSize" + :total="total" + @pagination="handleQuery" + /> + </el-tabs> </el-card> </el-col> </el-row> @@ -122,6 +138,7 @@ <el-table v-loading="loading" :data="processDefinitionHistoryList"> <el-table-column fixed align="center" type="index" label="搴忓彿" width="60"></el-table-column> <el-table-column fixed align="center" prop="name" label="娴佺▼瀹氫箟鍚嶇О"></el-table-column> + <el-table-column fixed align="center" prop="nodeName" label="浠诲姟鍚嶇О"></el-table-column> <el-table-column align="center" prop="key" label="鏍囪瘑Key"></el-table-column> <el-table-column align="center" prop="version" label="鐗堟湰鍙�" width="90"> <template #default="scope"> v{{ scope.row.version }}.0</template> @@ -133,42 +150,55 @@ </template> </el-table-column> <el-table-column align="center" prop="deploymentTime" label="閮ㄧ讲鏃堕棿" :show-overflow-tooltip="true"></el-table-column> - <el-table-column fixed="right" label="鎿嶄綔" align="center" width="200" class-name="small-padding fixed-width"> - <template #default="scope"> - <el-button link type="primary" size="small" icon="Sort" @click="handleChange(scope.row.id)">鍒囨崲</el-button> - </template> - </el-table-column> </el-table> </el-dialog> + <!-- 娴佺▼鍙橀噺寮�濮� --> + <el-dialog v-model="variableVisible" draggable title="娴佺▼鍙橀噺" width="60%" :close-on-click-modal="false"> + <el-card v-loading="variableLoading" class="box-card"> + <template #header> + <div class="clearfix"> + <span + >娴佺▼瀹氫箟鍚嶇О锛�<el-tag>{{ processDefinitionName }}</el-tag></span + > + </div> + </template> + <div class="max-h-500px overflow-y-auto"> + <VueJsonPretty :data="formatToJsonObject(variables)" /> + </div> + </el-card> + </el-dialog> + <!-- 娴佺▼鍙橀噺缁撴潫 --> + + <!-- 鐢宠浜� --> + <UserSelect ref="userSelectRef" :multiple="true" :data="selectUserIds" @confirm-call-back="userSelectCallBack"></UserSelect> </div> </template> <script lang="ts" setup> -import { - getPageByRunning, - getPageByFinish, - deleteRunAndHisInstance, - deleteFinishAndHisInstance, - deleteRunInstance -} from '@/api/workflow/processInstance'; -import { getListByKey, migrationDefinition } from '@/api/workflow/processDefinition'; -import { listCategory } from '@/api/workflow/category'; -import { CategoryVO } from '@/api/workflow/category/types'; -import { ProcessInstanceQuery, ProcessInstanceVO } from '@/api/workflow/processInstance/types'; +import { pageByRunning, pageByFinish, deleteByInstanceIds, instanceVariable, invalid } from '@/api/workflow/instance'; +import { categoryTree } from '@/api/workflow/category'; +import { CategoryTreeVO } from '@/api/workflow/category/types'; +import { FlowInstanceQuery, FlowInstanceVO } from '@/api/workflow/instance/types'; import workflowCommon from '@/api/workflow/workflowCommon'; import { RouterJumpVo } from '@/api/workflow/workflowCommon/types'; +import VueJsonPretty from 'vue-json-pretty'; +import 'vue-json-pretty/lib/styles.css'; +import UserSelect from '@/components/UserSelect/index.vue'; //瀹℃壒璁板綍缁勪欢 const { proxy } = getCurrentInstance() as ComponentInternalInstance; const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status')); const queryFormRef = ref<ElFormInstance>(); const categoryTreeRef = ref<ElTreeInstance>(); +import { ref } from 'vue'; +import { UserVO } from '@/api/system/user/types'; +const userSelectRef = ref<InstanceType<typeof UserSelect>>(); // 閬僵灞� const loading = ref(true); // 閫変腑鏁扮粍 const ids = ref<Array<any>>([]); -// 閫変腑涓氬姟id鏁扮粍 -const businessKeys = ref<Array<any>>([]); +// 閫変腑瀹炰緥id鏁扮粍 +const instanceIds = ref<Array<number | string>>([]); // 闈炲崟涓鐢� const single = ref(true); // 闈炲涓鐢� @@ -177,10 +207,15 @@ const showSearch = ref(true); // 鎬绘潯鏁� const total = ref(0); -// 娴佺▼瀹氫箟id -const processDefinitionId = ref<string>(''); + +// 娴佺▼鍙橀噺鏄惁鏄剧ず +const variableVisible = ref(false); +const variableLoading = ref(true); +const variables = ref<string>(''); +//娴佺▼瀹氫箟鍚嶇О +const processDefinitionName = ref(); // 妯″瀷瀹氫箟琛ㄦ牸鏁版嵁 -const processInstanceList = ref<ProcessInstanceVO[]>([]); +const processInstanceList = ref<FlowInstanceVO[]>([]); const processDefinitionHistoryList = ref<Array<any>>([]); const categoryOptions = ref<CategoryOption[]>([]); const categoryName = ref(''); @@ -191,7 +226,7 @@ }); type CategoryOption = { - categoryCode: string; + id: string; categoryName: string; children?: CategoryOption[]; }; @@ -199,20 +234,27 @@ const tab = ref('running'); // 浣滃簾鍘熷洜 const deleteReason = ref(''); + +//鐢宠浜篿d +const selectUserIds = ref<Array<number | string>>([]); +//鐢宠浜洪�夋嫨鏁伴噺 +const userSelectCount = ref(0); // 鏌ヨ鍙傛暟 -const queryParams = ref<ProcessInstanceQuery>({ +const queryParams = ref<FlowInstanceQuery>({ pageNum: 1, pageSize: 10, - name: undefined, - key: undefined, - categoryCode: undefined + nodeName: undefined, + flowName: undefined, + flowCode: undefined, + createByIds: [], + category: undefined }); /** 鑺傜偣鍗曞嚮浜嬩欢 */ -const handleNodeClick = (data: CategoryVO) => { - queryParams.value.categoryCode = data.categoryCode; - if (data.categoryCode === 'ALL') { - queryParams.value.categoryCode = ''; +const handleNodeClick = (data: CategoryTreeVO) => { + queryParams.value.category = data.id; + if (data.id === '0') { + queryParams.value.category = ''; } handleQuery(); }; @@ -233,11 +275,8 @@ /** 鏌ヨ娴佺▼鍒嗙被涓嬫媺鏍戠粨鏋� */ const getTreeselect = async () => { - const res = await listCategory(); - categoryOptions.value = []; - const data: CategoryOption = { categoryCode: 'ALL', categoryName: '椤剁骇鑺傜偣', children: [] }; - data.children = proxy?.handleTree<CategoryOption>(res.data, 'id', 'parentId'); - categoryOptions.value.push(data); + const res = await categoryTree(); + categoryOptions.value = res.data; }; /** 鎼滅储鎸夐挳鎿嶄綔 */ @@ -251,22 +290,24 @@ /** 閲嶇疆鎸夐挳鎿嶄綔 */ const resetQuery = () => { queryFormRef.value?.resetFields(); - queryParams.value.categoryCode = ''; + queryParams.value.category = ''; queryParams.value.pageNum = 1; queryParams.value.pageSize = 10; + queryParams.value.createByIds = []; + userSelectCount.value = 0; handleQuery(); }; // 澶氶�夋閫変腑鏁版嵁 -const handleSelectionChange = (selection: ProcessInstanceVO[]) => { +const handleSelectionChange = (selection: FlowInstanceVO[]) => { ids.value = selection.map((item: any) => item.id); - businessKeys.value = selection.map((item: any) => item.businessKey); + instanceIds.value = selection.map((item: FlowInstanceVO) => item.id); single.value = selection.length !== 1; multiple.value = !selection.length; }; //鍒嗛〉 const getProcessInstanceRunningList = () => { loading.value = true; - getPageByRunning(queryParams.value).then((resp) => { + pageByRunning(queryParams.value).then((resp) => { processInstanceList.value = resp.rows; total.value = resp.total; loading.value = false; @@ -275,7 +316,7 @@ //鍒嗛〉 const getProcessInstanceFinishList = () => { loading.value = true; - getPageByFinish(queryParams.value).then((resp) => { + pageByFinish(queryParams.value).then((resp) => { processInstanceList.value = resp.rows; total.value = resp.total; loading.value = false; @@ -283,15 +324,15 @@ }; /** 鍒犻櫎鎸夐挳鎿嶄綔 */ -const handleDelete = async (row: any) => { - const businessKey = row.businessKey || businessKeys.value; - await proxy?.$modal.confirm('鏄惁纭鍒犻櫎涓氬姟id涓恒��' + businessKey + '銆戠殑鏁版嵁椤癸紵'); +const handleDelete = async (row: FlowInstanceVO) => { + const instanceIdList = row.id || instanceIds.value; + await proxy?.$modal.confirm('鏄惁纭鍒犻櫎锛�'); loading.value = true; if ('running' === tab.value) { - await deleteRunAndHisInstance(businessKey).finally(() => (loading.value = false)); + await deleteByInstanceIds(instanceIdList).finally(() => (loading.value = false)); getProcessInstanceRunningList(); } else { - await deleteFinishAndHisInstance(businessKey).finally(() => (loading.value = false)); + await deleteByInstanceIds(instanceIdList).finally(() => (loading.value = false)); getProcessInstanceFinishList(); } proxy?.$modal.msgSuccess('鍒犻櫎鎴愬姛'); @@ -299,22 +340,22 @@ const changeTab = async (data: string) => { processInstanceList.value = []; queryParams.value.pageNum = 1; - if ('running' === data) { + if ('running' === data.paneName) { getProcessInstanceRunningList(); } else { getProcessInstanceFinishList(); } }; /** 浣滃簾鎸夐挳鎿嶄綔 */ -const handleInvalid = async (row: ProcessInstanceVO) => { - await proxy?.$modal.confirm('鏄惁纭浣滃簾涓氬姟id涓恒��' + row.businessKey + '銆戠殑鏁版嵁椤癸紵'); +const handleInvalid = async (row: FlowInstanceVO) => { + await proxy?.$modal.confirm('鏄惁纭浣滃簾锛�'); loading.value = true; if ('running' === tab.value) { let param = { - businessKey: row.businessKey, - deleteReason: deleteReason.value + id: row.id, + comment: deleteReason.value }; - await deleteRunInstance(param).finally(() => (loading.value = false)); + await invalid(param).finally(() => (loading.value = false)); getProcessInstanceRunningList(); proxy?.$modal.msgSuccess('鎿嶄綔鎴愬姛'); } @@ -322,41 +363,53 @@ const cancelPopover = async (index: any) => { (proxy?.$refs[`popoverRef${index}`] as any).hide(); //鍏抽棴寮圭獥 }; -//鑾峰彇娴佺▼瀹氫箟 -const getProcessDefinitionHitoryList = (id: string, key: string) => { - processDefinitionDialog.visible = true; - processDefinitionId.value = id; - loading.value = true; - getListByKey(key).then((resp) => { - if (resp.data && resp.data.length > 0) { - processDefinitionHistoryList.value = resp.data.filter((item: any) => item.id !== id); - } - loading.value = false; - }); -}; -//鍒囨崲娴佺▼鐗堟湰 -const handleChange = async (id: string) => { - await proxy?.$modal.confirm('鏄惁纭鍒囨崲锛�'); - loading.value = true; - migrationDefinition(processDefinitionId.value, id).then((resp) => { - proxy?.$modal.msgSuccess('鎿嶄綔鎴愬姛'); - getProcessInstanceRunningList(); - processDefinitionDialog.visible = false; - loading.value = false; - }); -}; /** 鏌ョ湅鎸夐挳鎿嶄綔 */ const handleView = (row) => { const routerJumpVo = reactive<RouterJumpVo>({ - wfDefinitionConfigVo: row.wfDefinitionConfigVo, - wfNodeConfigVo: row.wfNodeConfigVo, - businessKey: row.businessKey, + businessId: row.businessId, taskId: row.id, - type: 'view' + type: 'view', + formCustom: row.formCustom, + formPath: row.formPath }); workflowCommon.routerJump(routerJumpVo, proxy); }; +//鏌ヨ娴佺▼鍙橀噺 +const handleInstanceVariable = async (row: FlowInstanceVO) => { + variableLoading.value = true; + variableVisible.value = true; + processDefinitionName.value = row.flowName; + let data = await instanceVariable(row.id); + variables.value = data.data.variable; + variableLoading.value = false; +}; + +/** + * json杞负瀵硅薄 + * @param data 鍘熷鏁版嵁 + */ +function formatToJsonObject(data: string) { + try { + return JSON.parse(data); + } catch (error) { + return data; + } +} + +//鎵撳紑鐢宠浜洪�夋嫨 +const openUserSelect = () => { + userSelectRef.value.open(); +}; +//纭閫夋嫨鐢宠浜� +const userSelectCallBack = (data: UserVO[]) => { + userSelectCount.value = 0; + if (data && data.length > 0) { + userSelectCount.value = data.length; + selectUserIds.value = data.map((item) => item.userId); + queryParams.value.createByIds = selectUserIds.value; + } +}; onMounted(() => { getProcessInstanceRunningList(); getTreeselect(); -- Gitblit v1.9.3