Update 优化更新工作流UI界面

UI/VAP_V3.VUE/src/api/workflow/_processInstance.ts

@@ -16,14 +16,14 @@ class processInstanceApi {
 		})
 	}
 
-		/**
+	/**
 	 * 通过业务id获取历史流程图
 	 */
 	flowHisTaskList = (businessId: string | number) => {
 		return Rs.get({
-			url: `/workflow/instance/flowHisTaskList/${businessId}` + '?t' + Math.random(),
-		});
-	};
+			url: `/workflow/instance/flowHisTaskList/${businessId}` + "?t" + Math.random()
+		})
+	}
 
 	/**
 	 * 分页查询当前登录人单据
@@ -32,11 +32,10 @@ class processInstanceApi {
 	 */
 	getPageByCurrent = (query: any) => {
 		return Rs.get({
-			url: '/workflow/instance/pageByCurrent',
+			url: "/workflow/instance/pageByCurrent",
 			params: query
-		});
-	};
-
+		})
+	}
 
 	/**
 	 * 撤销流程
@@ -47,8 +46,8 @@ class processInstanceApi {
 		return Rs.put({
 			url: `/workflow/instance/cancelProcessApply`,
 			data: data
-		});
-	};
+		})
+	}
 
 	/**
 	 * 获取流程变量
@@ -57,9 +56,9 @@ class processInstanceApi {
 	 */
 	instanceVariable = (instanceId: string | number) => {
 		return Rs.get({
-			url: `/workflow/instance/instanceVariable/${instanceId}`,
-		});
-	};
+			url: `/workflow/instance/instanceVariable/${instanceId}`
+		})
+	}
 
 	/**
 	 * 删除
@@ -68,9 +67,19 @@ class processInstanceApi {
 	 */
 	deleteByInstanceIds = (instanceIds: Array<string | number> | string | number) => {
 		return Rs.del({
-			url: `/workflow/instance/deleteByInstanceIds/${instanceIds}`,
-		});
-	};
+			url: `/workflow/instance/deleteByInstanceIds/${instanceIds}`
+		})
+	}
+
+	/**
+	 * 删除历史流程实例
+	 * @param instanceIds
+	 */
+	deleteHisByInstanceIds(instanceIds: Array<string | number> | string | number) {
+		return Rs.del({
+			url: `/workflow/instance/deleteHisByInstanceIds/${instanceIds}`
+		})
+	}
 	/**
 	 * 作废流程
 	 * @param data 参数
@@ -80,8 +89,8 @@ class processInstanceApi {
 		return Rs.post({
 			url: `/workflow/instance/invalid`,
 			data: data
-		});
-	};
+		})
+	}
 
 	//-----------------
 	//通过业务id获取历史流程图
@@ -121,6 +130,16 @@ class processInstanceApi {
 			url: `/workflow/instance/deleteFinishAndHisInstance/${businessKeys}`
 		})
 	}
-
+	/**
+	 * 修改流程变量
+	 * @param data 参数
+	 * @returns
+	 */
+	updateVariable(data: any) {
+		return Rs.put({
+			url: `/workflow/instance/updateVariable`,
+			data: data
+		})
+	}
 }
 export default processInstanceApi

UI/VAP_V3.VUE/src/api/workflow/_task.ts

@@ -54,9 +54,6 @@ class taskApi {
 		})
 	}
 
-
-	
-	
 	//任务驳回
 	backProcess = (data: any) => {
 		return Rs.post({
@@ -70,13 +67,12 @@ class taskApi {
 	 * @param taskId
 	 * @returns
 	 */
-  getTask = (taskId: string) => {
+	getTask = (taskId: string) => {
 		return Rs.get({
-			url: '/workflow/task/getTask/' + taskId,
-		});
-	};
+			url: "/workflow/task/getTask/" + taskId
+		})
+	}
 
-	
 	//修改任务办理人
 	updateAssignee = (taskIds: string[], userId: string) => {
 		return Rs.put({
@@ -103,11 +99,11 @@ class taskApi {
 	 * 获取可驳回得任务节点
 	 * @returns
 	 */
-	getBackTaskNode = (definitionId: string, nodeCode: string) => {
+	getBackTaskNode = (taskId: string | number, nodeCode: string) => {
 		return Rs.get({
-			url: `/workflow/task/getBackTaskNode/${definitionId}/${nodeCode}`,
-		});
-	};
+			url: `/workflow/task/getBackTaskNode/${taskId}/${nodeCode}`
+		})
+	}
 
 	/**
 	 * 任务操作 操作类型，委派 delegateTask、转办 transferTask、加签 addSignature、减签 reductionSignature
@@ -117,8 +113,8 @@ class taskApi {
 		return Rs.post({
 			url: `/workflow/task/taskOperation/${operation}`,
 			data: data
-		});
-	};
+		})
+	}
 
 	/**
 	 * 获取当前任务办理人
@@ -127,21 +123,32 @@ class taskApi {
 	 */
 	currentTaskAllUser = (taskId: string | number) => {
 		return Rs.get({
-			url: `/workflow/task/currentTaskAllUser/${taskId}`,
-		});
-	};
+			url: `/workflow/task/currentTaskAllUser/${taskId}`
+		})
+	}
 
 	/**
 	 * 获取下一节点写
 	 * @param data参数
 	 * @returns
 	 */
-  getNextNodeList = (data: any): any => {
+	getNextNodeList = (data: any): any => {
 		return Rs.post({
-			url: '/workflow/task/getNextNodeList',
+			url: "/workflow/task/getNextNodeList",
 			data: data
-		});
-	};
+		})
+	}
 
+	/**
+	 * 催办任务
+	 * @param data参数
+	 * @returns
+	 */
+	urgeTask = (data: any): any => {
+		return Rs.post({
+			url: "/workflow/task/urgeTask",
+			data: data
+		})
+	}
 }
 export default taskApi

UI/VAP_V3.VUE/src/components/process/MessageType.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{ title: string }>(), { title: "提示" })
+const emits = defineEmits<{
+	(e: "submit", v: any): void
+	(e: "cancel"): void
+}>()
+const modalRef = ref()
+const formRef = ref()
+const form = ref<Record<string, any>>({
+	message: undefined,
+	messageType: ["1"]
+})
+const rules = reactive<Record<string, any>>({
+	messageType: [
+		{
+			required: true,
+			message: "请选择消息提醒",
+			trigger: "change"
+		}
+	],
+	message: [
+		{
+			required: true,
+			message: "请输入消息内容",
+			trigger: "blur"
+		}
+	]
+})
+
+function onSubmit() {
+	if (!formRef.value) return
+	formRef.value.validate().then((valid) => {
+		if (valid) {
+			emits("submit", form.value)
+			close()
+		}
+	})
+}
+//取消
+function onCancel() {
+	modalRef.value!.hide()
+	emits("cancel")
+}
+
+function handleReset() {
+	form.value.taskIdList = []
+	form.value.message = ""
+	form.value.messageType = ["1"]
+}
+function open(ids: string[]) {
+	handleReset()
+	form.value.taskIdList = ids
+	modalRef.value!.show()
+}
+function close() {
+	handleReset()
+	onCancel()
+}
+
+function init() {
+	//
+}
+
+onMounted(init)
+defineExpose({
+	open,
+	close
+})
+</script>
+<template>
+	<div class="app-container">
+		<VbModal
+			v-model:modal="modalRef"
+			:save-auto-close="false"
+			:title="title"
+			@cancel="onCancel"
+			@confirm="onSubmit">
+			<template #body>
+				<el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
+					<el-form-item label="消息提醒" prop="messageType">
+						<el-checkbox-group v-model="form.messageType">
+							<el-checkbox value="1" name="type" disabled>站内信</el-checkbox>
+							<el-checkbox value="2" name="type">邮件</el-checkbox>
+							<el-checkbox value="3" name="type">短信</el-checkbox>
+						</el-checkbox-group>
+					</el-form-item>
+					<el-form-item label="消息内容" prop="message">
+						<el-input v-model="form.message" type="textarea" resize="none" />
+					</el-form-item>
+				</el-form>
+			</template>
+		</VbModal>
+	</div>
+</template>

UI/VAP_V3.VUE/src/components/process/SubmitVerify.vue

@@ -228,7 +228,7 @@ function handleBackProcessOpen() {
 	backModalRef.value.show()
 	backButtonDisabled.value = true
 	apis.workflow.taskApi
-		.getNextNodeList(task.value.processInstanceId)
+		.getBackTaskNode(task.value.id, task.value.nodeCode)
 		.then((res: any) => {
 			taskNodeList.value = res.data
 			backForm.value.nodeCode = taskNodeList.value[0].nodeId

UI/VAP_V3.VUE/src/views/workflow/processDefinition/index.vue

@@ -6,6 +6,7 @@ const previewRef = ref()
 const tableRef = ref()
 const modalRef = ref()
 const uploadModalRef = ref()
+const autoPass = ref(false)
 const opts = reactive({
 	columns: [
 		{ field: "id", name: "主键", width: 100, isSort: true, visible: false, tooltip: true },
@@ -106,7 +107,7 @@ const opts = reactive({
 			field: "category",
 			label: "流程分类",
 			class: "w-100",
-			required: false,
+			required: true,
 			placeholder: "请选择流程分类",
 			component: "VST",
 			data: () => categoryOptions.value,
@@ -122,7 +123,7 @@ const opts = reactive({
 			field: "flowName",
 			label: "流程名称",
 			class: "w-100",
-			required: false,
+			required: true,
 			placeholder: "请输入流程定义名称",
 			component: "I"
 		},
@@ -130,10 +131,49 @@ const opts = reactive({
 			field: "flowCode",
 			label: "流程编码",
 			class: "w-100",
-			required: false,
+			required: true,
 			placeholder: "请输入流程定义编码",
 			component: "I"
 		},
+		{
+			field: "modelValue",
+			label: "设计器模式",
+			class: "w-100",
+			required: true,
+			placeholder: "请选择设计器模式",
+			component: "VS",
+			data: [
+				{ label: "经典模式", value: "CLASSICS" },
+				{ label: "仿钉钉模式", value: "MIMIC" }
+			],
+			props: {
+				type: "radio"
+			}
+		},
+		{
+			field: "autoPass",
+			label: "流程配置",
+			class: "w-100",
+			required: false,
+			placeholder: "请选择流程配置",
+			component: "slot"
+		},
+		{
+			field: "formCustom",
+			label: "动态表单",
+			class: "w-100",
+			required: true,
+			placeholder: "请选择是否择动态表单",
+			component: "VS",
+			data: [
+				{ label: "是", value: "Y" },
+				{ label: "否", value: "N" }
+			],
+			props: {
+				type: "radio"
+			}
+		},
+
 		{
 			field: "formPath",
 			label: "表单路径",
@@ -151,9 +191,12 @@ const opts = reactive({
 		category: undefined,
 		flowName: undefined,
 		flowCode: undefined,
-		formPath: undefined
+		formPath: undefined,
+		formCustom: "N",
+		modelValue: "CLASSICS",
+		ext: ""
 	},
-	labelWidth: "80px"
+	labelWidth: "120px"
 })
 const { queryParams, emptyFormData } = toRefs(opts)
 const form = ref<any>(emptyFormData.value)
@@ -214,7 +257,15 @@ function handleCreate() {
 function handleUpdate(row: any) {
 	tableRef.value.defaultHandleFuns.handleUpdate("", row)
 }
-
+function onFormEdit(data: any) {
+	autoPass.value = false
+	if (data.ext != null && data.ext != "") {
+		const extJson = JSON.parse(data.ext)
+		if (extJson.autoPass != null && extJson.autoPass != "") {
+			autoPass.value = extJson.autoPass
+		}
+	}
+}
 /** 部署按钮操作 */
 function handleUpload() {
 	uploadForm.value.category = "0"
@@ -236,6 +287,10 @@ const handleFileChange = (uploadFile: any) => {
 	file.value = uploadFile
 }
 function handleSubmit() {
+	const ext = {
+		autoPass: autoPass.value
+	}
+	form.value.ext = JSON.stringify(ext)
 	apis.workflow.processDefinitionApi.addOrUpdate(form.value).then(() => {
 		handleQuery()
 	})
@@ -332,7 +387,7 @@ function handleDesignView(row) {
 	designModalRef.value.show()
 }
 function getDesignUrl(id, disabled: boolean) {
-	let url = `${import.meta.env.VITE_APP_BASE_API}/.html?id=${id}&disabled=${disabled}`
+	let url = `${import.meta.env.VITE_APP_BASE_API}/.html?id=${id}&onlyDesignShow=${disabled}`
 	url += `&Authorization=Bearer ${getToken()}&clientid=${import.meta.env.VITE_APP_CLIENT_ID}`
 	return url
 }
@@ -405,7 +460,8 @@ onMounted(init)
 					:reset-form-fun="opts.resetForm"
 					v-model:form-data="form"
 					:reset-search-form-fun="resetQuery"
-					:custom-search-fun="handleQuery">
+					:custom-search-fun="handleQuery"
+					@form-edit="onFormEdit">
 					<template #version="{ row }">v{{ row.version }}.0</template>
 					<template #activityStatus="{ row }">
 						<vb-tooltip
@@ -496,7 +552,11 @@ onMounted(init)
 			:form-items="opts.formItems"
 			:label-width="opts.labelWidth"
 			append-to-body
-			@confirm="handleSubmit"></VbModal>
+			@confirm="handleSubmit">
+			<template #autoPass_form>
+				<el-checkbox v-model="autoPass" label="下一节点执行人是当前任务处理人自动审批" />
+			</template>
+		</VbModal>
 		<VbModal
 			v-model:modal="uploadModalRef"
 			title="部署流程"

UI/VAP_V3.VUE/src/views/workflow/processInstance/index.vue

@@ -165,8 +165,20 @@ function handleUpdate(row: any) {
 /** 删除按钮操作 */
 function handleDelete(rows: any[]) {
 	const ids = rows.map((item) => item.id)
-	if (queryParams.value.runStatus == "1") {
-	}
+	message.confirm("是否确认删除流程定义？", "确认删除").then(() => {
+		if (queryParams.value.runStatus == "1") {
+			apis.workflow.processInstanceApi.deleteByInstanceIds(ids).then(() => {
+				message.msgSuccess("删除成功")
+				handleQuery()
+			})
+		} else {
+			apis.workflow.processInstanceApi.deleteHisByInstanceIds(ids).then(() => {
+				message.msgSuccess("删除成功")
+				handleQuery()
+			})
+		}
+	})
+
 	tableRef.value.defaultHandleFuns.handleDelete("", rows)
 }
 function handleExport(rows: any) {
@@ -211,10 +223,10 @@ function handleConfirmInvalid(row: any) {
 }
 function formatToJsonObject(data: string) {
 	try {
-    return JSON.parse(data);
-  } catch (error) {
-    return data;
-  }
+		return JSON.parse(data)
+	} catch (error) {
+		return data
+	}
 }
 
 const pdTableRef = ref()
@@ -251,16 +263,52 @@ const pdVersion = ref("")
 function handleView(row: any) {
 	wfTaskJump(row)
 }
+const instanceId = ref()
 const variableModalRef = ref()
-const variableModalTitle = ref("")
+const variableFormRef = ref()
+const variableForm = ref({
+	instanceId: undefined,
+	key: undefined,
+	value: undefined
+})
+const variableFormRules = reactive<Record<string, any>>({
+	key: [
+		{
+			required: true,
+			message: "请输入KEY",
+			trigger: "blur"
+		}
+	],
+	value: [
+		{
+			required: true,
+			message: "请输入变量值",
+			trigger: "blur"
+		}
+	]
+})
 const variables = ref<any>()
 const flowName = ref("")
 function handleVariable(row: any) {
 	flowName.value = row.flowName
+	instanceId.value = row.id
 	apis.workflow.processInstanceApi.instanceVariable(row.id).then((res: any) => {
 		variables.value = res.data.variable
 		variableModalRef.value.show()
-})
+	})
+}
+function onVariableSubmit() {
+	form.value.instanceId = instanceId.value
+	message.confirm("是否确认保存变量？", "确认保存").then(() => {
+		variableFormRef.value.validate().then(() => {
+			apis.workflow.processInstanceApi.updateVariable(variableForm.value).then((res: any) => {
+				message.msgSuccess("保存成功")
+				apis.workflow.processInstanceApi.instanceVariable(instanceId.value).then((res: any) => {
+					variables.value = res.data.variable
+				})
+			})
+		})
+	})
 }
 function onCategoryChange(data: any) {
 	queryParams.value.category = data.categoryId
@@ -285,10 +333,10 @@ function getTableListFun(query: any) {
 		queryParams.value.runStatus == "1"
 			? apis.workflow.processInstanceApi.getPageByRunning(query).then((res: any) => {
 					resolve(res)
-			  })
+				})
 			: apis.workflow.processInstanceApi.getPageByFinish(query).then((res: any) => {
 					resolve(res)
-			  })
+				})
 	})
 }
 function init() {
@@ -322,9 +370,7 @@ onMounted(init)
 					:check-multiple="true"
 					:reset-search-form-fun="resetQuery"
 					:custom-search-fun="handleQuery">
-					<template #flowName="{ row }">
-						{{ row.flowName }}_V{{ row.version }}
-					</template>
+					<template #flowName="{ row }">{{ row.flowName }}_V{{ row.version }}</template>
 					<template #flowStatus="{ row }">
 						<DictTag type="wf_business_status" :value="row.flowStatus"></DictTag>
 					</template>
@@ -409,16 +455,38 @@ onMounted(init)
 				<VueJsonPretty :data="formatToJsonObject(variables)" />
 				</template>	
 			</VbModal> -->
-			<VbModal v-model:modal="variableModalRef" title="流程变量" :confirm-btn="false" append-to-body>
+		<VbModal
+			v-model:modal="variableModalRef"
+			title="流程变量"
+			:save-auto-close="false"
+			@confirm="onVariableSubmit"
+			append-to-body>
 			<template #body>
-				<span>
-					流程定义名称：
-					<el-tag>{{ flowName }}</el-tag>
-				</span>
-				<dl v-for="(v, index) in formatToJsonObject(variables)" :key="index">
-					<dt>{{ v.key }}：</dt>
-					<dd>{{ v.value }}</dd>
-				</dl>
+				<el-card>
+					<span>
+						流程定义名称：
+						<el-tag>{{ flowName }}</el-tag>
+					</span>
+					<dl v-for="(v, index) in formatToJsonObject(variables)" :key="index">
+						<dt>{{ v.key }}：</dt>
+						<dd>{{ v.value }}</dd>
+					</dl>
+				</el-card>
+				<el-card>
+					<el-form
+						ref="variableFormRef"
+						:model="variableForm"
+						:inline="true"
+						:rules="variableFormRules"
+						label-width="120px">
+						<el-form-item label="变量KEY" prop="key">
+							<el-input v-model="form.key" placeholder="请输入变量KEY" />
+						</el-form-item>
+						<el-form-item label="变量值" prop="value">
+							<el-input v-model="form.value" placeholder="请输入变量值" />
+						</el-form-item>
+					</el-form>
+				</el-card>
 			</template>
 		</VbModal>
 		<VbModal

UI/VAP_V3.VUE/src/views/workflow/task/allTaskWaiting.vue

@@ -138,7 +138,7 @@ function onSubmitUpdateAssignee(data: any) {
 	}
 }
 function handleView(row: any) {
-	wfTaskJump(row)
+	wfTaskJump(row, "view")
 }
 function handleMeddle(row: any) {
 	processMeddleRef.value.open(row.id)
@@ -175,6 +175,20 @@ function getTableListFun(query: any) {
 				})
 	})
 }
+//消息组件
+const messageTypeRef = ref()
+function handleUrgeTaskOpen(row: any) {
+	messageTypeRef.value.open()
+}
+function onUrgeTaskSubmit(data: any) {
+	message.confirm(`是否催办任务`).then(() => {
+		apis.workflow.taskApi.urgeTask(data).then(() => {
+			messageTypeRef.value.close()
+			message.msgSuccess("催办成功")
+			handleQuery()
+		})
+	})
+}
 </script>
 
 <template>
@@ -253,6 +267,17 @@ function getTableListFun(query: any) {
 						</template>
 					</el-button>
 				</vb-tooltip>
+				<vb-tooltip content="催办" placement="top">
+					<el-button
+						link
+						type="primary"
+						@click="handleUrgeTaskOpen(row)"
+						v-hasPermission="'workflow:formManage:edit'">
+						<template #icon>
+							<VbIcon icon-name="notepad-edit" icon-type="duotone" class="fs-3"></VbIcon>
+						</template>
+					</el-button>
+				</vb-tooltip>
 			</template>
 		</VbDataTable>
 		<!-- 选人组件 -->
@@ -268,5 +293,7 @@ function getTableListFun(query: any) {
 			@confirm="onSelectUserCallback"></UserSelect>
 		<!-- 流程干预组件 -->
 		<ProcessMeddle ref="processMeddleRef" @submit="onGetWaitingList"></ProcessMeddle>
+		<!-- 流程催办组件 -->
+		<MessageType ref="messageTypeRef" @submit="onUrgeTaskSubmit"></MessageType>
 	</div>
 </template>