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

<script setup lang="ts" name="FormManage">
import apis from "@a"

const tableRef = ref()
const modalRef = ref()
const opts = reactive({
	columns: [
		{ field: "id", name: "主键", width: 100, isSort: true, visible: false, tooltip: true },
		{
			field: "flowName",
			name: "流程定义名称",
			visible: true,
			width: "auto",
			tooltip: true
		},
		{
			field: "flowCode",
			name: "流程定义编码",
			visible: true,
			width: 150,
			tooltip: true
		},
		{ field: "nodeName", name: "任务名称", visible: true, width: 120, tooltip: true },
		{ field: "createByName", name: "申请人", visible: true, width: 120, tooltip: true },
		{ field: "categoryName", name: "流程分类", visible: true, width: 120, tooltip: true },
		{ field: "version", name: "版本号", visible: true, width: 100, tooltip: true },
		{ field: "assigneeName", name: "办理人", width: 300, visible: true, tooltip: true },
		{ field: "flowStatus", name: "流程状态", width: 80, visible: true, tooltip: true },
		{ field: "flowTaskStatus", name: "任务状态", width: 80, visible: true, tooltip: true },
		{ field: "createTime", name: "创建时间", visible: true, width: 155, tooltip: true },
		{ field: "actions", name: `操作`, width: 180 }
	] as any,
	queryParams: {
		runStatus: "1",
		nodeName: undefined,
		flowName: undefined,
		createByIds: undefined
	},
	searchFormItems: [
		{
			field: "runStatus",
			label: "",
			class: "w-100",
			required: false,
			component: "VS",
			data: () => {
				return [
					{ label: "待办任务", value: "1" },
					{ label: "已办任务", value: "2" }
				]
			},
			props: {
				type: "radio"
			},
			listeners: {
				change: (e) => {
					queryParams.value.runStatus = e
					handleQuery()
				}
			},
			span: 4
		},
		{
			field: "nodeName",
			label: "任务名称",
			class: "w-100",
			required: false,
			placeholder: "请输入任务名称",
			component: "I",
			listeners: {
				keyup: (e: KeyboardEvent) => {
					if (e.code == "Enter") {
						handleQuery()
					}
				}
			},
			span: 5
		},
		{
			field: "flowName",
			label: "流程定义名称",
			class: "w-100",
			required: false,
			placeholder: "请输入流程定义名称",
			component: "I",
			listeners: {
				keyup: (e: KeyboardEvent) => {
					if (e.code == "Enter") {
						handleQuery()
					}
				}
			},
			span: 5
		}
	] as any,
	tableListFun: getTableListFun,
	labelWidth: "80px"
})
const { queryParams } = toRefs(opts)

/** 搜索按钮操作 */
function handleQuery(query?: any) {
	query = query || tableRef.value?.getQueryParams() || queryParams.value
	addDateRange(query, query.dateRangeCreateTime)
	addDateRange(query, query.dateRangeUpdateTime, "UpdateTime")
	tableRef.value?.query(query)
}

/** 重置按钮操作 */
function resetQuery(query?: any) {
	query = query || tableRef.value?.getQueryParams() || queryParams.value
	query.dateRangeCreateTime = [] as any
	addDateRange(query, query.dateRangeCreateTime)
	query.dateRangeUpdateTime = [] as any
	addDateRange(query, query.dateRangeUpdateTime, "UpdateTime")
	//
}
const processMeddleRef = ref()
const userSelectRef = ref()
const applyUserSelectRef = ref()
let curRow
function handleUpdateAssignee(row: any) {
	curRow = row
	userSelectRef.value.open()
}
function onSubmitUpdateAssignee(data: any) {
	if (data && data.length > 0) {
		message
			.confirm(`是否将[${curRow.processDefinitionName}]任务的经办人更改为：${data[0].userName}`)
			.then(() => {
				apis.workflow.taskApi.updateAssignee(curRow.id, data[0].userId).then(() => {
					handleQuery()
					message.msgSuccess("修改成功")
				})
			})
	} else {
		message.msgWarning("请选择用户！")
	}
}
function handleView(row: any) {
	wfTaskJump(row, "view")
}
function handleMeddle(row: any) {
	processMeddleRef.value.open(row.id)
}
const selectUserIds = ref([])
const userSelectCount = ref(0)

//打开申请人选择
const handleOpenUserSelect = () => {
	applyUserSelectRef.value.open()
}
const onSelectUserCallback = (data: any) => {
	userSelectCount.value = 0
	selectUserIds.value = []
	queryParams.value.createByIds = []
	if (data && data.length > 0) {
		userSelectCount.value = data.length
		selectUserIds.value = data.map((item) => item.userId)
		queryParams.value.createByIds = selectUserIds.value
	}
}
function onGetWaitingList() {
	queryParams.value.runStatus == "1"
	handleQuery()
}
function getTableListFun(query: any) {
	return new Promise((resolve, reject) => {
		queryParams.value.runStatus == "1"
			? apis.workflow.taskApi.getPageByTaskWait(queryParams.value).then((res: any) => {
					resolve(res)
				})
			: apis.workflow.taskApi.getPageByTaskFinish(queryParams.value).then((res: any) => {
					resolve(res)
				})
	})
}
//消息组件
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>
	<div class="app-container">
		<VbDataTable
			ref="tableRef"
			keyField="id"
			:columns="opts.columns"
			:search-form-items="opts.searchFormItems"
			:remote-fun="opts.tableListFun"
			:modal="modalRef"
			v-model:query-params="queryParams"
			:check-multiple="true"
			:reset-search-form-fun="resetQuery"
			:custom-search-fun="handleQuery">
			<template #processDefinitionName="{ row }">
				<span>{{ row.processDefinitionName }}v{{ row.processDefinitionVersion }}.0</span>
			</template>
			<template #assigneeName="{ row }">
				<template v-if="queryParams.runStatus == '1'">
					<template v-if="row.participantVo && row.assignee === null">
						<el-tag
							class="me-1"
							v-for="(item, index) in row.participantVo.candidateName"
							:key="index"
							type="success">
							{{ item }}
						</el-tag>
					</template>
					<template v-else>
						<el-tag type="success">
							{{ row.assigneeName || "无" }}
						</el-tag>
					</template>
				</template>
				<template v-else>
					<el-tag type="success">
						{{ row.assigneeName || "无" }}
					</el-tag>
				</template>
			</template>
			<template #businessStatus="{ row }">
				<DictTag
					v-if="queryParams.runStatus == '1'"
					type="wf_business_status"
					:value="row.businessStatus"></DictTag>
				<el-tag v-else type="success">已完成</el-tag>
			</template>
			<template #createTime="{ row }">
				<span v-if="queryParams.runStatus == '1'">{{ row.createTime }}</span>
				<span v-else>{{ row.startTime }}</span>
			</template>
			<template #actions="{ row }">
				<vb-tooltip content="流程详情" placement="top">
					<el-button link type="success" @click="handleView(row)">
						<template #icon>
							<VbIcon icon-name="eye" icon-type="duotone" class="fs-3"></VbIcon>
						</template>
					</el-button>
				</vb-tooltip>
				<vb-tooltip v-if="queryParams.runStatus == '1'" content="流程干预" placement="top">
					<el-button link type="success" @click="handleMeddle(row)">
						<template #icon>
							<VbIcon icon-name="abstract-23" icon-type="duotone" class="fs-3"></VbIcon>
						</template>
					</el-button>
				</vb-tooltip>
				<vb-tooltip content="修改经办人" placement="top">
					<el-button
						link
						type="primary"
						@click="handleUpdateAssignee(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>
				<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>
		<!-- 选人组件 -->
		<UserSelect
			ref="userSelectRef"
			:multiple="false"
			@confirm="onSubmitUpdateAssignee"></UserSelect>
		<!-- 选人组件 -->
		<UserSelect
			ref="applyUserSelectRef"
			:multiple="true"
			:data="selectUserIds"
			@confirm="onSelectUserCallback"></UserSelect>
		<!-- 流程干预组件 -->
		<ProcessMeddle ref="processMeddleRef" @submit="onGetWaitingList"></ProcessMeddle>
		<!-- 流程催办组件 -->
		<MessageType ref="messageTypeRef" @submit="onUrgeTaskSubmit"></MessageType>
	</div>
</template>