From a63543a5c793c8954fa2f9da0ee4fb215c62d8c2 Mon Sep 17 00:00:00 2001 From: 疯狂的狮子Li <15040126243@163.com> Date: 星期一, 20 五月 2024 10:26:46 +0800 Subject: [PATCH] !118 ♥️发布 5.2.0-BETA 公测版本 Merge pull request !118 from 疯狂的狮子Li/dev --- src/views/workflow/processDefinition/index.vue | 517 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 517 insertions(+), 0 deletions(-) diff --git a/src/views/workflow/processDefinition/index.vue b/src/views/workflow/processDefinition/index.vue new file mode 100644 index 0000000..1dacb80 --- /dev/null +++ b/src/views/workflow/processDefinition/index.vue @@ -0,0 +1,517 @@ +<template> + <div class="p-2"> + <el-row :gutter="20"> + <!-- 娴佺▼鍒嗙被鏍� --> + <el-col :lg="4" :xs="24" style=""> + <el-card shadow="hover"> + <el-input v-model="categoryName" placeholder="璇疯緭鍏ユ祦绋嬪垎绫诲悕" prefix-icon="Search" clearable /> + <el-tree + ref="categoryTreeRef" + class="mt-2" + node-key="id" + :data="categoryOptions" + :props="{ label: 'categoryName', children: 'children' }" + :expand-on-click-node="false" + :filter-node-method="filterNode" + highlight-current + default-expand-all + @node-click="handleNodeClick" + ></el-tree> + </el-card> + </el-col> + <el-col :lg="20" :xs="24"> + <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="璇疯緭鍏ユ祦绋嬪畾涔夊悕绉�" clearable @keyup.enter="handleQuery" /> + </el-form-item> + <el-form-item label="娴佺▼瀹氫箟KEY" prop="key"> + <el-input v-model="queryParams.key" placeholder="璇疯緭鍏ユ祦绋嬪畾涔塊EY" clearable @keyup.enter="handleQuery" /> + </el-form-item> + <el-form-item> + <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button> + <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> + </el-form-item> + </el-form> + </el-card> + </div> + </transition> + <el-card shadow="hover"> + <template #header> + <el-row :gutter="10" class="mb8"> + <el-col :span="1.5"> + <el-button type="danger" icon="Delete" :disabled="multiple" @click="handleDelete()">鍒犻櫎</el-button> + </el-col> + <el-col :span="1.5"> + <el-button type="primary" icon="UploadFilled" @click="uploadDialog.visible = true">閮ㄧ讲娴佺▼鏂囦欢</el-button> + </el-col> + <right-toolbar v-model:showSearch="showSearch" @query-table="getList"></right-toolbar> + </el-row> + </template> + + <el-table v-loading="loading" border :data="processDefinitionList" @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 align="center" prop="name" label="娴佺▼瀹氫箟鍚嶇О" :show-overflow-tooltip="true"></el-table-column> + <el-table-column align="center" prop="key" label="鏍囪瘑KEY" width="80"></el-table-column> + <el-table-column align="center" prop="version" label="鐗堟湰鍙�" width="80"> + <template #default="scope"> v{{ scope.row.version }}.0</template> + </el-table-column> + <el-table-column align="center" prop="resourceName" label="娴佺▼XML" width="100" :show-overflow-tooltip="true"> + <template #default="scope"> + <el-link type="primary" @click="clickPreview(scope.row.id, 'xml')">{{ scope.row.resourceName }}</el-link> + </template> + </el-table-column> + <el-table-column align="center" prop="diagramResourceName" label="娴佺▼鍥剧墖" width="100" :show-overflow-tooltip="true"> + <template #default="scope"> + <el-link type="primary" @click="clickPreview(scope.row.id, 'bpmn')">{{ scope.row.diagramResourceName }}</el-link> + </template> + </el-table-column> + <el-table-column align="center" prop="suspensionState" label="鐘舵��" width="80"> + <template #default="scope"> + <el-tag v-if="scope.row.suspensionState == 1" type="success">婵�娲�</el-tag> + <el-tag v-else type="danger">鎸傝捣</el-tag> + </template> + </el-table-column> + <el-table-column align="center" prop="deploymentTime" label="閮ㄧ讲鏃堕棿" width="120" :show-overflow-tooltip="true"></el-table-column> + <el-table-column align="center" label="琛ㄥ悕/琛ㄥ崟KEY" width="120" :show-overflow-tooltip="true"> + <template #default="scope"> + <span v-if="scope.row.wfDefinitionConfigVo"> + {{ scope.row.wfDefinitionConfigVo.tableName }} + </span> + </template> + </el-table-column> + <el-table-column fixed="right" label="鎿嶄綔" align="center" width="220" class-name="small-padding fixed-width"> + <template #default="scope"> + <el-row :gutter="10" class="mb8"> + <el-col :span="1.5"> + <el-button + link + type="primary" + size="small" + :icon="scope.row.suspensionState === 1 ? 'Lock' : 'Unlock'" + @click="handleProcessDefState(scope.row)" + > + {{ scope.row.suspensionState === 1 ? '鎸傝捣娴佺▼' : '婵�娲绘祦绋�' }} + </el-button> + </el-col> + <el-col :span="1.5"> + <el-button link type="primary" size="small" icon="Document" @click="getProcessDefinitionHitoryList(scope.row.id, scope.row.key)"> + 鍘嗗彶鐗堟湰 + </el-button> + </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="Sort" @click="handleConvertToModel(scope.row)"> 杞崲妯″瀷 </el-button> + </el-col> + <el-col :span="1.5"> + <el-button link type="primary" size="small" icon="Tickets" @click="handleDefinitionConfigOpen(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="getList" + /> + </el-card> + </el-col> + </el-row> + <!-- 棰勮鍥剧墖鎴杧ml --> + <process-preview ref="previewRef" /> + + <!-- 閮ㄧ讲鏂囦欢 --> + <el-dialog v-if="uploadDialog.visible" v-model="uploadDialog.visible" :title="uploadDialog.title" width="30%"> + <div v-loading="uploadDialogLoading"> + <div class="mb5"> + <el-text class="mx-1" size="large"><span class="text-danger">*</span>璇烽�夋嫨閮ㄧ讲娴佺▼鍒嗙被锛�</el-text> + <el-tree-select + v-model="selectCategory" + :data="categoryOptions" + :props="{ value: 'categoryCode', label: 'categoryName', children: 'children' }" + filterable + value-key="categoryCode" + :render-after-expand="false" + check-strictly + style="width: 240px" + /> + </div> + <el-upload + class="upload-demo" + drag + multiple + accept="application/zip,application/xml,.bpmn" + :before-upload="handlerBeforeUpload" + :http-request="handerDeployProcessFile" + > + <el-icon class="UploadFilled"><upload-filled /></el-icon> + <div class="el-upload__text"><em>鐐瑰嚮涓婁紶锛岄�夋嫨BPMN娴佺▼鏂囦欢</em></div> + <div class="el-upload__text">浠呮敮鎸� .zip銆�.bpmn20.xml銆乥pmn 鏍煎紡鏂囦欢</div> + <div class="el-upload__text">PS:濡傝嫢閮ㄧ讲璇烽儴缃蹭粠鏈」鐩ā鍨嬬鐞嗗鍑虹殑鏁版嵁</div> + </el-upload> + </div> + </el-dialog> + + <!-- 鍘嗗彶鐗堟湰 --> + <el-dialog v-if="processDefinitionDialog.visible" v-model="processDefinitionDialog.visible" :title="processDefinitionDialog.title" width="70%"> + <el-table v-loading="loading" :data="processDefinitionHistoryList" @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 align="center" prop="name" label="娴佺▼瀹氫箟鍚嶇О" :show-overflow-tooltip="true" min-width="80"></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> + </el-table-column> + <el-table-column align="center" prop="resourceName" label="娴佺▼XML" min-width="80" :show-overflow-tooltip="true"> + <template #default="scope"> + <el-link type="primary" @click="clickPreviewXML(scope.row.id)">{{ scope.row.resourceName }}</el-link> + </template> + </el-table-column> + <el-table-column align="center" prop="diagramResourceName" label="娴佺▼鍥剧墖" min-width="80" :show-overflow-tooltip="true"> + <template #default="scope"> + <el-link type="primary" @click="clickPreviewImg(scope.row.id)">{{ scope.row.diagramResourceName }}</el-link> + </template> + </el-table-column> + <el-table-column align="center" prop="suspensionState" label="鐘舵��" min-width="70"> + <template #default="scope"> + <el-tag v-if="scope.row.suspensionState == 1" type="success">婵�娲�</el-tag> + <el-tag v-else type="danger">鎸傝捣</el-tag> + </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-row :gutter="10" class="mb8"> + <el-col :span="1.5"> + <el-button + link + type="primary" + size="small" + :icon="scope.row.suspensionState === 1 ? 'Lock' : 'Unlock'" + @click="handleProcessDefState(scope.row)" + > + {{ scope.row.suspensionState === 1 ? '鎸傝捣娴佺▼' : '婵�娲绘祦绋�' }} + </el-button> + </el-col> + <el-col :span="1.5"> + <el-button type="text" size="small" icon="Tickets" @click="handleDefinitionConfigOpen(scope.row)">缁戝畾涓氬姟</el-button> + </el-col> + </el-row> + <el-row :gutter="10" class="mb8"> + <el-col :span="1.5"> + <el-button link type="primary" icon="Sort" size="small" @click="handleConvertToModel(scope.row)"> 杞崲妯″瀷 </el-button> + </el-col> + <el-col :span="1.5"> + <el-button link type="primary" icon="Delete" size="small" @click="handleDelete(scope.row)">鍒犻櫎</el-button> + </el-col> + </el-row> + </template> + </el-table-column> + </el-table> + </el-dialog> + + <!-- 琛ㄥ崟閰嶇疆 --> + <el-dialog + v-model="definitionConfigDialog.visible" + :title="definitionConfigDialog.title" + width="650px" + append-to-body + :close-on-click-modal="false" + > + <el-form :model="definitionConfigForm" label-width="auto"> + <el-form-item label="娴佺▼KEY"> + <el-input v-model="definitionConfigForm.processKey" disabled /> + </el-form-item> + <el-form-item label="琛ㄥ悕" prop="formId"> + <el-input v-model="definitionConfigForm.tableName" placeholder="绀轰緥:test_leave" /> + </el-form-item> + <el-form-item label="澶囨敞"> + <el-input v-model="definitionConfigForm.remark" type="textarea" resize="none" /> + </el-form-item> + </el-form> + + <template #footer> + <div class="dialog-footer"> + <el-button @click="definitionConfigDialog.visible = false">鍙栨秷</el-button> + <el-button type="primary" @click="handlerSaveForm">淇濆瓨</el-button> + </div> + </template> + </el-dialog> + </div> +</template> + +<script lang="ts" setup name="processDefinition"> +import { + listProcessDefinition, + definitionImage, + definitionXml, + deleteProcessDefinition, + updateDefinitionState, + convertToModel, + deployProcessFile, + getListByKey +} from '@/api/workflow/processDefinition'; +import { getByTableNameNotDefId, getByDefId, saveOrUpdate } from '@/api/workflow/definitionConfig'; +import ProcessPreview from './components/processPreview.vue'; +import { listCategory } from '@/api/workflow/category'; +import { CategoryVO } from '@/api/workflow/category/types'; +import { ProcessDefinitionQuery, ProcessDefinitionVO } from '@/api/workflow/processDefinition/types'; +import { DefinitionConfigForm } from '@/api/workflow/definitionConfig/types'; +import { UploadRequestOptions, ElMessage, ElMessageBox } from 'element-plus'; + +const { proxy } = getCurrentInstance() as ComponentInternalInstance; + +const previewRef = ref<InstanceType<typeof ProcessPreview>>(); +const queryFormRef = ref<ElFormInstance>(); +const categoryTreeRef = ref<ElTreeInstance>(); +const definitionConfigForm = ref<DefinitionConfigForm>({}); + +type CategoryOption = { + categoryCode: string; + categoryName: string; + children?: CategoryOption[]; +}; + +const loading = ref(true); +const ids = ref<Array<any>>([]); +const deploymentIds = ref<Array<any>>([]); +const keys = ref<Array<any>>([]); +const single = ref(true); +const multiple = ref(true); +const showSearch = ref(true); +const total = ref(0); +const uploadDialogLoading = ref(false); +const processDefinitionList = ref<ProcessDefinitionVO[]>([]); +const processDefinitionHistoryList = ref<ProcessDefinitionVO[]>([]); +const categoryOptions = ref<CategoryOption[]>([]); +const categoryName = ref(''); +/** 閮ㄧ讲鏂囦欢鍒嗙被閫夋嫨 */ +const selectCategory = ref(); + +const uploadDialog = reactive<DialogOption>({ + visible: false, + title: '閮ㄧ讲娴佺▼鏂囦欢' +}); + +const processDefinitionDialog = reactive<DialogOption>({ + visible: false, + title: '鍘嗗彶鐗堟湰' +}); + +const definitionConfigDialog = reactive<DialogOption>({ + visible: false, + title: '娴佺▼瀹氫箟閰嶇疆' +}); + +// 鏌ヨ鍙傛暟 +const queryParams = ref<ProcessDefinitionQuery>({ + pageNum: 1, + pageSize: 10, + name: undefined, + key: undefined, + categoryCode: undefined +}); + +onMounted(() => { + getList(); + getTreeselect(); +}); + +/** 鑺傜偣鍗曞嚮浜嬩欢 */ +const handleNodeClick = (data: CategoryVO) => { + queryParams.value.categoryCode = data.categoryCode; + if (data.categoryCode === 'ALL') { + queryParams.value.categoryCode = ''; + } + handleQuery(); +}; +/** 閫氳繃鏉′欢杩囨护鑺傜偣 */ +const filterNode = (value: string, data: any) => { + if (!value) return true; + return data.categoryName.indexOf(value) !== -1; +}; +/** 鏍规嵁鍚嶇О绛涢�夐儴闂ㄦ爲 */ +watchEffect( + () => { + categoryTreeRef.value.filter(categoryName.value); + }, + { + flush: 'post' // watchEffect浼氬湪DOM鎸傝浇鎴栬�呮洿鏂颁箣鍓嶅氨浼氳Е鍙戯紝姝ゅ睘鎬ф帶鍒跺湪DOM鍏冪礌鏇存柊鍚庤繍琛� + } +); + +/** 鏌ヨ娴佺▼鍒嗙被涓嬫媺鏍戠粨鏋� */ +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 handleQuery = () => { + queryParams.value.pageNum = 1; + getList(); +}; +/** 閲嶇疆鎸夐挳鎿嶄綔 */ +const resetQuery = () => { + queryFormRef.value?.resetFields(); + queryParams.value.categoryCode = ''; + queryParams.value.pageNum = 1; + queryParams.value.pageSize = 10; + handleQuery(); +}; +// 澶氶�夋閫変腑鏁版嵁 +const handleSelectionChange = (selection: any) => { + ids.value = selection.map((item: any) => item.id); + deploymentIds.value = selection.map((item: any) => item.deploymentId); + keys.value = selection.map((item: any) => item.key); + single.value = selection.length !== 1; + multiple.value = !selection.length; +}; +//鍒嗛〉 +const getList = async () => { + loading.value = true; + const resp = await listProcessDefinition(queryParams.value); + processDefinitionList.value = resp.rows; + total.value = resp.total; + loading.value = false; +}; +//鑾峰彇鍘嗗彶娴佺▼瀹氫箟 +const getProcessDefinitionHitoryList = async (id: string, key: string) => { + processDefinitionDialog.visible = true; + loading.value = true; + const resp = await getListByKey(key); + if (resp.data && resp.data.length > 0) { + processDefinitionHistoryList.value = resp.data.filter((item: any) => item.id !== id); + } + loading.value = false; +}; + +type PreviewType = 'xml' | 'bpmn'; +//棰勮 鍏叡鏂规硶 +const clickPreview = async (id: string, type: PreviewType) => { + loading.value = true; + const resp = await definitionXml(id); + if (previewRef.value) { + const xmlStr = resp.data.xmlStr; + loading.value = false; + previewRef.value.openDialog(xmlStr, type); + } +}; + +/** 鍒犻櫎鎸夐挳鎿嶄綔 */ +const handleDelete = async (row?: ProcessDefinitionVO) => { + const id = row?.id || ids.value; + const deployIds = row?.deploymentId || deploymentIds.value; + const defKeys = row?.key || keys.value; + await proxy?.$modal.confirm('鏄惁纭鍒犻櫎娴佺▼瀹氫箟KEY涓恒��' + defKeys + '銆戠殑鏁版嵁椤癸紵'); + loading.value = true; + await deleteProcessDefinition(deployIds, id).finally(() => (loading.value = false)); + await getList(); + proxy?.$modal.msgSuccess('鍒犻櫎鎴愬姛'); +}; +/** 鎸傝捣/婵�娲� */ +const handleProcessDefState = async (row: ProcessDefinitionVO) => { + let msg: string; + if (row.suspensionState === 1) { + msg = `鏆傚仠鍚庯紝姝ゆ祦绋嬩笅鐨勬墍鏈変换鍔¢兘涓嶅厑璁稿線鍚庢祦杞紝鎮ㄧ‘瀹氭寕璧枫��${row.name || row.key}銆戝悧锛焋; + } else { + msg = `鍚姩鍚庯紝姝ゆ祦绋嬩笅鐨勬墍鏈変换鍔¢兘鍏佽寰�鍚庢祦杞紝鎮ㄧ‘瀹氭縺娲汇��${row.name || row.key}銆戝悧锛焋; + } + await proxy?.$modal.confirm(msg); + loading.value = true; + await updateDefinitionState(row.id).finally(() => (loading.value = false)); + await getList(); + proxy?.$modal.msgSuccess('鎿嶄綔鎴愬姛'); +}; +/** 娴佺▼瀹氫箟杞崲涓烘ā鍨� */ +const handleConvertToModel = async (row: ProcessDefinitionVO) => { + await proxy?.$modal.confirm('鏄惁纭杞崲娴佺▼瀹氫箟key涓恒��' + row.key + '銆戠殑鏁版嵁椤癸紵'); + await convertToModel(row.id).finally(() => (loading.value = false)); + getList(); + proxy?.$modal.msgSuccess('鎿嶄綔鎴愬姛'); +}; + +//涓婁紶鏂囦欢鍓嶇殑閽╁瓙 +const handlerBeforeUpload = () => { + if (selectCategory.value === 'ALL') { + proxy?.$modal.msgError('椤剁骇鑺傜偣涓嶅彲浣滀负鍒嗙被锛�'); + return false; + } + if (!selectCategory.value) { + proxy?.$modal.msgError('璇烽�夋嫨宸︿晶瑕佷笂浼犵殑鍒嗙被锛�'); + return false; + } +}; +//閮ㄧ讲鏂囦欢 +const handerDeployProcessFile = (data: UploadRequestOptions): XMLHttpRequest => { + let formData = new FormData(); + uploadDialogLoading.value = true; + formData.append('file', data.file); + formData.append('categoryCode', selectCategory.value); + deployProcessFile(formData) + .then(() => { + uploadDialog.visible = false; + proxy?.$modal.msgSuccess('閮ㄧ讲鎴愬姛'); + handleQuery(); + }) + .finally(() => { + uploadDialogLoading.value = false; + }); + return; +}; +//鎵撳紑娴佺▼瀹氫箟閰嶇疆 +const handleDefinitionConfigOpen = async (row: ProcessDefinitionVO) => { + definitionConfigDialog.visible = true; + definitionConfigForm.value.processKey = row.key; + definitionConfigForm.value.definitionId = row.id; + definitionConfigForm.value.version = row.version; + const resp = await getByDefId(row.id); + if (resp.data) { + definitionConfigForm.value = resp.data; + } else { + definitionConfigForm.value.tableName = undefined; + definitionConfigForm.value.remark = undefined; + } +}; +//淇濆瓨琛ㄥ崟 +const handlerSaveForm = async () => { + getByTableNameNotDefId(definitionConfigForm.value.tableName, definitionConfigForm.value.definitionId).then((res) => { + if (res.data && res.data.length > 0) { + ElMessageBox.confirm('琛ㄥ悕宸茶銆�' + res.data[0].processKey + '銆戠増鏈瑅' + res.data[0].version + '.0缁戝畾纭鍚庡皢浼氬垹闄ょ粦瀹氱殑娴佺▼KEY!', '鎻愮ず', { + confirmButtonText: '纭', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + saveOrUpdate(definitionConfigForm.value).then((resp) => { + if (resp.code === 200) { + proxy?.$modal.msgSuccess('鎿嶄綔鎴愬姛'); + definitionConfigDialog.visible = false; + getList(); + } + }); + }); + } else { + saveOrUpdate(definitionConfigForm.value).then((resp) => { + if (resp.code === 200) { + proxy?.$modal.msgSuccess('鎿嶄綔鎴愬姛'); + definitionConfigDialog.visible = false; + getList(); + } + }); + } + }); +}; +</script> -- Gitblit v1.9.3