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

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

const tableRef = ref()
const modalRef = ref()
const opts = reactive({
	columns: [
		{ field: "id", name: "主键", width: 100, isSort: true, visible: false, tooltip: true },
		{ field: "businessCode", name: "业务编码", visible: true, width: "auto", tooltip: true },
		{ field: "businessTitle", name: "业务标题", visible: true, width: "auto", tooltip: true },
		{ field: "flowName", name: "流程定义名称", visible: true, width: 120, tooltip: true },
		{ field: "flowCode", name: "流程定义编码", visible: true, width: 120, tooltip: true },
		{ field: "categoryName", name: "流程分类", visible: true, width: 120, tooltip: true },
		{ field: "nodeName", name: "任务名称", visible: true, width: 150, tooltip: true },
		{ field: "createByName", name: "申请人", width: 140, visible: true, tooltip: true },
		{ field: "assigneeName", name: "办理人", width: 300, visible: true, tooltip: true },
		{ field: "flowStatus", name: "流程状态", width: 100, visible: true, tooltip: true },
		{ field: "flowTaskStatus", name: "任务状态", width: 100, visible: true, tooltip: true },
		{ field: "createTime", name: "创建时间", visible: true, width: 150, tooltip: true },
		{ field: "actions", name: `操作`, width: 80 }
	] as any[],
	queryParams: {
		nodeName: undefined,
		flowName: undefined,
		flowCode: undefined,
		createByIds: undefined
	},
	searchFormItems: [
		{
			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
		},
		{
			field: "flowCode",
			label: "流程定义编码",
			class: "w-100",
			required: false,
			placeholder: "请输入流程定义编码",
			component: "I",
			listeners: {
				keyup: (e: KeyboardEvent) => {
					if (e.code == "Enter") {
						handleQuery()
					}
				}
			},
			span: 5
		}
	] as any,
	tableListFun: apis.workflow.taskApi.getPageByTaskFinish,
	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")
	//
}

function handleView(row: any) {
	wfTaskJump(row, "view")
}
const userSelectRef = ref()
const selectUserIds = ref<Array<number | string>>([])
const userSelectCount = ref(0)
function handleOpenSelectUser() {
	userSelectRef.value.open()
}
//确认选择申请人
function onUserSelect(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
	}
}
</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 #flowName="{ row }">
				<span>{{ row.flowName }}v{{ row.version }}.0</span>
			</template>
			<template #assigneeName="{ row }">
				<el-tag type="success">
					{{ row.assigneeName || "无" }}
				</el-tag>
			</template>
			<template #flowStatus="{ row }">
				<DictTag type="wf_business_status" :value="row.flowStatus"></DictTag>
			</template>
			<template #flowTaskStatus="{ row }">
				<DictTag type="wf_task_status" :value="row.flowTaskStatus"></DictTag>
			</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>
			</template>
		</VbDataTable>
		<UserSelect
			ref="userSelectRef"
			:multiple="true"
			:data="selectUserIds"
			@confirm="onUserSelect"></UserSelect>
	</div>
</template>