Vue3 重构：流程实例的详情
This commit is contained in:
YunaiV
parent
1a4311309d
commit
c5a3fa1f94
@ -284,7 +284,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
|
||||
},
|
||||
{
|
||||
path: '/process-instance/detail',
|
||||
component: () => import('@/views/bpm/processInstance/detail.vue'),
|
||||
component: () => import('@/views/bpm/processInstance/detail/index.vue'),
|
||||
name: 'BpmProcessInstanceDetail',
|
||||
meta: {
|
||||
noCache: true,
|
||||
|
||||
2
src/types/auto-components.d.ts
vendored
2
src/types/auto-components.d.ts
vendored
@ -73,6 +73,8 @@ declare module '@vue/runtime-core' {
|
||||
ElTabPane: typeof import('element-plus/es')['ElTabPane']
|
||||
ElTabs: typeof import('element-plus/es')['ElTabs']
|
||||
ElTag: typeof import('element-plus/es')['ElTag']
|
||||
ElTimeline: typeof import('element-plus/es')['ElTimeline']
|
||||
ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
|
||||
ElTooltip: typeof import('element-plus/es')['ElTooltip']
|
||||
ElTransfer: typeof import('element-plus/es')['ElTransfer']
|
||||
ElTree: typeof import('element-plus/es')['ElTree']
|
||||
|
||||
@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<Dialog title="转派审批人" v-model="modelVisible" width="500">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="110px"
|
||||
v-loading="formLoading"
|
||||
>
|
||||
<el-form-item label="新审批人" prop="assigneeUserId">
|
||||
<el-select v-model="formData.assigneeUserId" clearable style="width: 100%">
|
||||
<el-option
|
||||
v-for="item in userList"
|
||||
:key="item.id"
|
||||
:label="item.nickname"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
||||
<el-button @click="modelVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import * as TaskApi from '@/api/bpm/task'
|
||||
import * as UserApi from '@/api/system/user'
|
||||
|
||||
const modelVisible = ref(false) // 弹窗的是否展示
|
||||
const formLoading = ref(false) // 表单的加载中
|
||||
const formData = ref({
|
||||
id: '',
|
||||
assigneeUserId: undefined
|
||||
})
|
||||
const formRules = ref({
|
||||
assigneeUserId: [{ required: true, message: '新审批人不能为空', trigger: 'change' }]
|
||||
})
|
||||
|
||||
const formRef = ref() // 表单 Ref
|
||||
const userList = ref<any[]>([]) // 用户列表
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = async (id: string) => {
|
||||
modelVisible.value = true
|
||||
resetForm()
|
||||
formData.value.id = id
|
||||
// 获得用户列表
|
||||
userList.value = await UserApi.getSimpleUserList()
|
||||
}
|
||||
defineExpose({ open }) // 提供 openModal 方法，用于打开弹窗
|
||||
|
||||
/** 提交表单 */
|
||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
||||
const submitForm = async () => {
|
||||
// 校验表单
|
||||
if (!formRef) return
|
||||
const valid = await formRef.value.validate()
|
||||
if (!valid) return
|
||||
// 提交请求
|
||||
formLoading.value = true
|
||||
try {
|
||||
await TaskApi.updateTaskAssignee(formData.value)
|
||||
modelVisible.value = false
|
||||
// 发送操作成功的事件
|
||||
emit('success')
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 重置表单 */
|
||||
const resetForm = () => {
|
||||
formData.value = {
|
||||
id: '',
|
||||
assigneeUserId: undefined
|
||||
}
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
</script>
|
||||
@ -33,31 +33,21 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style="margin-left: 10%; margin-bottom: 20px; font-size: 14px">
|
||||
<XButton
|
||||
pre-icon="ep:select"
|
||||
type="success"
|
||||
title="通过"
|
||||
@click="handleAudit(item, true)"
|
||||
/>
|
||||
<XButton
|
||||
pre-icon="ep:close"
|
||||
type="danger"
|
||||
title="不通过"
|
||||
@click="handleAudit(item, false)"
|
||||
/>
|
||||
<XButton
|
||||
pre-icon="ep:edit"
|
||||
type="primary"
|
||||
title="转办"
|
||||
@click="handleUpdateAssignee(item)"
|
||||
/>
|
||||
<XButton
|
||||
pre-icon="ep:position"
|
||||
type="primary"
|
||||
title="委派"
|
||||
@click="handleDelegate(item)"
|
||||
/>
|
||||
<XButton pre-icon="ep:back" type="warning" title="委派" @click="handleBack(item)" />
|
||||
<el-button type="success" @click="handleAudit(item, true)">
|
||||
<Icon icon="ep:select" /> 通过
|
||||
</el-button>
|
||||
<el-button type="danger" @click="handleAudit(item, false)">
|
||||
<Icon icon="ep:close" /> 不通过
|
||||
</el-button>
|
||||
<el-button type="primary" @click="openTaskUpdateAssigneeForm(item.id)">
|
||||
<Icon icon="ep:edit" /> 转办
|
||||
</el-button>
|
||||
<el-button type="primary" @click="handleDelegate(item)">
|
||||
<Icon icon="ep:position" /> 委派
|
||||
</el-button>
|
||||
<el-button type="warning" @click="handleBack(item)">
|
||||
<Icon icon="ep:back" /> 回退
|
||||
</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-card>
|
||||
@ -85,7 +75,7 @@
|
||||
processInstance.businessKey
|
||||
"
|
||||
>
|
||||
<XButton type="primary" preIcon="ep:view" title="点击查看" />
|
||||
<el-button type="primary"><Icon icon="ep:view" /> 点击查看</el-button>
|
||||
</router-link>
|
||||
</div>
|
||||
</el-card>
|
||||
@ -153,42 +143,8 @@
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<!-- 对话框(转派审批人) -->
|
||||
<XModal v-model="updateAssigneeVisible" title="转派审批人" width="500">
|
||||
<el-form
|
||||
ref="updateAssigneeFormRef"
|
||||
:model="updateAssigneeForm"
|
||||
:rules="updateAssigneeRules"
|
||||
label-width="110px"
|
||||
>
|
||||
<el-form-item label="新审批人" prop="assigneeUserId">
|
||||
<el-select v-model="updateAssigneeForm.assigneeUserId" clearable style="width: 100%">
|
||||
<el-option
|
||||
v-for="item in userOptions"
|
||||
:key="parseInt(item.id)"
|
||||
:label="item.nickname"
|
||||
:value="parseInt(item.id)"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 操作按钮 -->
|
||||
<template #footer>
|
||||
<!-- 按钮：保存 -->
|
||||
<XButton
|
||||
type="primary"
|
||||
:title="t('action.save')"
|
||||
:loading="updateAssigneeLoading"
|
||||
@click="submitUpdateAssigneeForm"
|
||||
/>
|
||||
<!-- 按钮：关闭 -->
|
||||
<XButton
|
||||
:loading="updateAssigneeLoading"
|
||||
:title="t('dialog.close')"
|
||||
@click="updateAssigneeLoading = false"
|
||||
/>
|
||||
</template>
|
||||
</XModal>
|
||||
<!-- 弹窗：转派审批人 -->
|
||||
<TaskUpdateAssigneeForm ref="taskUpdateAssigneeFormRef" @success="getDetail" />
|
||||
</ContentWrap>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
@ -200,13 +156,12 @@ import * as TaskApi from '@/api/bpm/task'
|
||||
import * as ActivityApi from '@/api/bpm/activity'
|
||||
import { formatPast2 } from '@/utils/formatTime'
|
||||
import { setConfAndFields2 } from '@/utils/formCreate'
|
||||
// import { OptionAttrs } from '@form-create/element-ui/types/config'
|
||||
import type { ApiAttrs } from '@form-create/element-ui/types/config'
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
import TaskUpdateAssigneeForm from './TaskUpdateAssigneeForm.vue'
|
||||
|
||||
const { query } = useRoute() // 查询参数
|
||||
const message = useMessage() // 消息弹窗
|
||||
const { t } = useI18n() // 国际化
|
||||
const { proxy } = getCurrentInstance() as any
|
||||
|
||||
// ========== 审批信息 ==========
|
||||
@ -294,55 +249,11 @@ const getTimelineItemType = (item) => {
|
||||
}
|
||||
|
||||
// ========== 审批记录 ==========
|
||||
const updateAssigneeVisible = ref(false)
|
||||
const updateAssigneeLoading = ref(false)
|
||||
const updateAssigneeForm = ref({
|
||||
id: undefined,
|
||||
assigneeUserId: undefined
|
||||
})
|
||||
const updateAssigneeRules = ref({
|
||||
assigneeUserId: [{ required: true, message: '新审批人不能为空', trigger: 'change' }]
|
||||
})
|
||||
const updateAssigneeFormRef = ref()
|
||||
const userOptions = ref<any[]>([])
|
||||
|
||||
// 处理转派审批人
|
||||
const handleUpdateAssignee = (task) => {
|
||||
// 设置表单
|
||||
resetUpdateAssigneeForm()
|
||||
updateAssigneeForm.value.id = task.id
|
||||
// 设置为打开
|
||||
updateAssigneeVisible.value = true
|
||||
}
|
||||
|
||||
// 提交转派审批人
|
||||
const submitUpdateAssigneeForm = async () => {
|
||||
// 1. 校验表单
|
||||
const elForm = unref(updateAssigneeFormRef)
|
||||
if (!elForm) return
|
||||
const valid = await elForm.validate()
|
||||
if (!valid) return
|
||||
|
||||
// 2.1 提交审批
|
||||
updateAssigneeLoading.value = true
|
||||
try {
|
||||
await TaskApi.updateTaskAssignee(updateAssigneeForm.value)
|
||||
// 2.2 设置为隐藏
|
||||
updateAssigneeVisible.value = false
|
||||
// 加载最新数据
|
||||
getDetail()
|
||||
} finally {
|
||||
updateAssigneeLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 重置转派审批人表单
|
||||
const resetUpdateAssigneeForm = () => {
|
||||
updateAssigneeForm.value = {
|
||||
id: undefined,
|
||||
assigneeUserId: undefined
|
||||
}
|
||||
updateAssigneeFormRef.value?.resetFields()
|
||||
/** 转派审批人 */
|
||||
const taskUpdateAssigneeFormRef = ref()
|
||||
const openTaskUpdateAssigneeForm = (id: string) => {
|
||||
taskUpdateAssigneeFormRef.value.open(id)
|
||||
}
|
||||
|
||||
/** 处理审批退回的操作 */
|
||||
@ -375,7 +286,6 @@ const activityList = ref([])
|
||||
|
||||
// ========== 初始化 ==========
|
||||
onMounted(() => {
|
||||
// 加载详情
|
||||
getDetail()
|
||||
// 加载用户的列表
|
||||
UserApi.getSimpleUserList().then((data) => {
|
||||
Loading…
Reference in New Issue
Block a user