mirror of
https://gitee.com/hhyykk/ipms-sjy-ui.git
synced 2025-06-20 15:22:00 +08:00
104 lines
3.2 KiB
Vue
104 lines
3.2 KiB
Vue
<template>
|
||
<el-table :data="tasks" border header-cell-class-name="table-header-gray">
|
||
<el-table-column label="审批节点" prop="name" min-width="120" align="center" />
|
||
<el-table-column label="审批人" min-width="100" align="center">
|
||
<template #default="scope">
|
||
{{ scope.row.assigneeUser?.nickname || scope.row.ownerUser?.nickname }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
:formatter="dateFormatter"
|
||
align="center"
|
||
label="开始时间"
|
||
prop="createTime"
|
||
min-width="140"
|
||
/>
|
||
<el-table-column
|
||
:formatter="dateFormatter"
|
||
align="center"
|
||
label="结束时间"
|
||
prop="endTime"
|
||
min-width="140"
|
||
/>
|
||
<el-table-column align="center" label="审批状态" prop="status" min-width="90">
|
||
<template #default="scope">
|
||
<dict-tag :type="DICT_TYPE.BPM_TASK_STATUS" :value="scope.row.status" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="审批建议" prop="reason" min-width="200">
|
||
<template #default="scope">
|
||
{{ scope.row.reason }}
|
||
<el-button
|
||
class="ml-10px"
|
||
size="small"
|
||
v-if="scope.row.formId > 0"
|
||
@click="handleFormDetail(scope.row)"
|
||
>
|
||
<Icon icon="ep:document" /> 查看表单
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="耗时" prop="durationInMillis" min-width="100">
|
||
<template #default="scope">
|
||
{{ formatPast2(scope.row.durationInMillis) }}
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<!-- 弹窗：表单 -->
|
||
<Dialog title="表单详情" v-model="taskFormVisible" width="600">
|
||
<form-create
|
||
ref="fApi"
|
||
v-model="taskForm.value"
|
||
:option="taskForm.option"
|
||
:rule="taskForm.rule"
|
||
/>
|
||
</Dialog>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import { dateFormatter, formatPast2 } from '@/utils/formatTime'
|
||
import { propTypes } from '@/utils/propTypes'
|
||
import { DICT_TYPE } from '@/utils/dict'
|
||
import type { ApiAttrs } from '@form-create/element-ui/types/config'
|
||
import { setConfAndFields2 } from '@/utils/formCreate'
|
||
import * as TaskApi from '@/api/bpm/task'
|
||
|
||
defineOptions({ name: 'BpmProcessInstanceTaskList' })
|
||
|
||
const props = defineProps({
|
||
loading: propTypes.bool.def(false), // 是否加载中
|
||
id: propTypes.string // 流程实例的编号
|
||
})
|
||
const tasks = ref([]) // 流程任务的数组
|
||
|
||
/** 查看表单 */
|
||
const fApi = ref<ApiAttrs>() // form-create 的 API 操作类
|
||
const taskForm = ref({
|
||
rule: [],
|
||
option: {},
|
||
value: {}
|
||
}) // 流程任务的表单详情
|
||
const taskFormVisible = ref(false)
|
||
const handleFormDetail = async (row: any) => {
|
||
// 设置表单
|
||
setConfAndFields2(taskForm, row.formConf, row.formFields, row.formVariables)
|
||
// 弹窗打开
|
||
taskFormVisible.value = true
|
||
// 隐藏提交、重置按钮，设置禁用只读
|
||
await nextTick()
|
||
fApi.value.fapi.btn.show(false)
|
||
fApi.value?.fapi?.resetBtn.show(false)
|
||
fApi.value?.fapi?.disabled(true)
|
||
}
|
||
|
||
/** 只有 loading 完成时，才去加载流程列表 */
|
||
watch(
|
||
() => props.loading,
|
||
async (value) => {
|
||
if (value) {
|
||
tasks.value = await TaskApi.getTaskListByProcessInstanceId(props.id)
|
||
}
|
||
}
|
||
)
|
||
</script>
|