From ad8565d29aae8b8333b8615e7db76643df234cde Mon Sep 17 00:00:00 2001 From: gssong <1742057357@qq.com> Date: 星期四, 21 三月 2024 21:49:34 +0800 Subject: [PATCH] update 调整我的发起,流程定义按钮 --- src/views/workflow/processDefinition/index.vue | 171 ++++++++++++++++++++++++++++++++++++++++++++------------ 1 files changed, 133 insertions(+), 38 deletions(-) diff --git a/src/views/workflow/processDefinition/index.vue b/src/views/workflow/processDefinition/index.vue index 3843573..6dfee4f 100644 --- a/src/views/workflow/processDefinition/index.vue +++ b/src/views/workflow/processDefinition/index.vue @@ -53,12 +53,12 @@ </el-row> </template> - <el-table v-loading="loading" :data="processDefinitionList" @selection-change="handleSelectionChange"> + <el-table border v-loading="loading" :data="processDefinitionList" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55" align="center" /> - <el-table-column fixed align="center" type="index" label="搴忓彿" width="50"></el-table-column> - <el-table-column fixed align="center" prop="name" 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"> + <el-table-column align="center" type="index" label="搴忓彿" width="60"></el-table-column> + <el-table-column align="center" prop="name" label="娴佺▼瀹氫箟鍚嶇О"></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" min-width="80" :show-overflow-tooltip="true"> @@ -71,14 +71,14 @@ <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"> + <el-table-column align="center" prop="suspensionState" label="鐘舵��" min-width="50"> <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"> + <el-table-column fixed="right" label="鎿嶄綔" align="center" width="170" class-name="small-padding fixed-width"> <template #default="scope"> <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> @@ -101,9 +101,17 @@ <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="Document" @click="getProcessDefinitionHitoryList(scope.row.id, scope.row.key)"> - 鍘嗗彶鐗堟湰 - </el-button> + <el-dropdown> + <el-button type="text" size="small"> + 鏇村<el-icon class="el-icon--right"><arrow-down /></el-icon> + </el-button> + <template #dropdown> + <el-dropdown-menu> + <el-dropdown-item @click="getProcessDefinitionHitoryList(scope.row.id, scope.row.key)">鍘嗗彶鐗堟湰</el-dropdown-item> + <el-dropdown-item @click="handleFormOpen(scope.row)">琛ㄥ崟閰嶇疆</el-dropdown-item> + </el-dropdown-menu> + </template> + </el-dropdown> </el-col> </el-row> </template> @@ -125,12 +133,32 @@ <!-- 閮ㄧ讲鏂囦欢 --> <el-dialog v-if="uploadDialog.visible" v-model="uploadDialog.visible" :title="uploadDialog.title" width="30%"> <div v-loading="uploadDialogLoading"> - <el-upload class="upload-demo" drag accept="application/zip,application/xml,.bpmn" :http-request="handerDeployProcessFile"> + <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> + </el-upload> </div> </el-dialog> @@ -138,8 +166,8 @@ <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 fixed align="center" type="index" label="搴忓彿" width="50"></el-table-column> - <el-table-column fixed align="center" prop="name" label="娴佺▼瀹氫箟鍚嶇О"></el-table-column> + <el-table-column align="center" type="index" label="搴忓彿" width="60"></el-table-column> + <el-table-column align="center" prop="name" 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> @@ -183,10 +211,36 @@ <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="Setting" size="small" @click="handleFormOpen(scope.row)"> 琛ㄥ崟閰嶇疆 </el-button> + </el-col> </el-row> </template> </el-table-column> </el-table> + </el-dialog> + <!-- 琛ㄥ崟閰嶇疆 --> + <el-dialog v-model="formDialog.visible" :title="formDialog.title" width="650px" append-to-body :close-on-click-modal="false"> + <el-form :model="formDefinitionForm" label-width="auto"> + <el-form-item label="娴佺▼KEY"> + <el-input v-model="formDefinitionForm.processKey" disabled/> + </el-form-item> + <el-form-item label="璺敱鍦板潃"> + <el-input v-model="formDefinitionForm.path" placeholder="璇峰亣绀轰緥璺敱璇峰~鍐欙細/demo/leaveEdit/index"/> + </el-form-item> + <el-form-item label="澶囨敞"> + <el-input v-model="formDefinitionForm.remark" type="textarea" resize="none"/> + </el-form-item> + </el-form> + + <template #footer> + <div class="dialog-footer"> + <el-button @click="formDialog.visible = false">鍙栨秷</el-button> + <el-button type="primary" @click="handlerSaveForm"> + 淇濆瓨 + </el-button> + </div> + </template> </el-dialog> </div> </template> @@ -194,18 +248,20 @@ <script lang="ts" setup name="processDefinition"> import { listProcessDefinition, - processDefinitionImage, - processDefinitionXml, + definitionImage, + definitionXml, deleteProcessDefinition, - updateProcessDefState, + updateDefinitionState, convertToModel, deployProcessFile, - getProcessDefinitionListByKey + getListByKey } from '@/api/workflow/processDefinition'; import ProcessPreview from './components/processPreview.vue'; import { listCategory } from '@/api/workflow/category'; +import { getByDefId,saveOrUpdate } from '@/api/workflow/formDefinition'; import { CategoryVO } from '@/api/workflow/category/types'; import { ProcessDefinitionQuery, ProcessDefinitionVO } from '@/api/workflow/processDefinition/types'; +import { FormDefinitionForm } from '@/api/workflow/formDefinition/types'; import { UploadRequestOptions } from 'element-plus'; const { proxy } = getCurrentInstance() as ComponentInternalInstance; @@ -232,6 +288,9 @@ const url = ref<string[]>([]); const categoryOptions = ref<CategoryOption[]>([]); const categoryName = ref(''); +/** 閮ㄧ讲鏂囦欢鍒嗙被閫夋嫨 */ +const selectCategory = ref(); +const formDefinitionForm = ref<FormDefinitionForm>({}); const uploadDialog = reactive<DialogOption>({ visible: false, @@ -241,6 +300,11 @@ const processDefinitionDialog = reactive<DialogOption>({ visible: false, title: '鍘嗗彶鐗堟湰' +}); + +const formDialog = reactive<DialogOption>({ + visible: false, + title: '琛ㄥ崟閰嶇疆' }); // 鏌ヨ鍙傛暟 @@ -320,7 +384,7 @@ const getProcessDefinitionHitoryList = async (id: string, key: string) => { processDefinitionDialog.visible = true; loading.value = true; - const resp = await getProcessDefinitionListByKey(key); + const resp = await getListByKey(key); if (resp.data && resp.data.length > 0) { processDefinitionHistoryList.value = resp.data.filter((item: any) => item.id !== id); } @@ -330,7 +394,7 @@ //棰勮鍥剧墖 const clickPreviewImg = async (id: string) => { loading.value = true; - const resp = await processDefinitionImage(id); + const resp = await definitionImage(id); if (previewRef.value) { url.value = []; url.value.push('data:image/png;base64,' + resp.data); @@ -341,7 +405,7 @@ //棰勮xml const clickPreviewXML = async (id: string) => { loading.value = true; - const resp = await processDefinitionXml(id); + const resp = await definitionXml(id); if (previewRef.value) { url.value = []; url.value = resp.data.xml; @@ -367,7 +431,7 @@ } await proxy?.$modal.confirm(msg); loading.value = true; - await updateProcessDefState(row.id).finally(() => (loading.value = false)); + await updateDefinitionState(row.id).finally(() => (loading.value = false)); await getList(); proxy?.$modal.msgSuccess('鎿嶄綔鎴愬姛'); }; @@ -379,25 +443,56 @@ 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(); - if (queryParams.value.categoryCode === 'ALL') { - proxy?.$modal.msgError('椤剁骇鑺傜偣涓嶅彲浣滀负鍒嗙被锛�'); - return; - } - if (!queryParams.value.categoryCode) { - proxy?.$modal.msgError('璇烽�夋嫨宸︿晶瑕佷笂浼犵殑鍒嗙被锛�'); - return; - } - uploadDialogLoading.value = true + uploadDialogLoading.value = true; formData.append('file', data.file); - formData.append('categoryCode', queryParams.value.categoryCode); - deployProcessFile(formData).then(() => { - uploadDialog.visible = false; - proxy?.$modal.msgSuccess('閮ㄧ讲鎴愬姛'); - uploadDialogLoading.value = false - handleQuery(); - }); + formData.append('categoryCode', selectCategory.value); + deployProcessFile(formData) + .then(() => { + uploadDialog.visible = false; + proxy?.$modal.msgSuccess('閮ㄧ讲鎴愬姛'); + handleQuery(); + }) + .finally(() => { + uploadDialogLoading.value = false; + }); + return; }; +//鎵撳紑琛ㄥ崟閰嶇疆 +const handleFormOpen = async (row: ProcessDefinitionVO) => { + formDialog.visible = true + formDefinitionForm.value.processKey = row.key + formDefinitionForm.value.definitionId = row.id + const resp = await getByDefId(row.id) + if(resp.data){ + formDefinitionForm.value = resp.data + }else{ + formDefinitionForm.value.path = undefined + formDefinitionForm.value.remark = undefined + } +} +//淇濆瓨琛ㄥ崟 +const handlerSaveForm = async () => { + await proxy?.$modal.confirm('鏄惁纭淇濆瓨锛�'); + saveOrUpdate(formDefinitionForm.value).then(resp=>{ + if(resp.code === 200){ + proxy?.$modal.msgSuccess('鎿嶄綔鎴愬姛'); + formDialog.visible = false + getList(); + } + }) +} </script> -- Gitblit v1.9.3