|
@@ -0,0 +1,253 @@
|
|
|
+<script setup lang="ts">
|
|
|
+import AForm from '@/components/AForm/index.vue'
|
|
|
+import { FormConfigType } from '@/components/AForm/type'
|
|
|
+import { ToolbarConfigType } from '@/components/AToolbar/type'
|
|
|
+import { ColumnConfigType } from '@/components/ATable/type'
|
|
|
+import { StrAnyObj, StrAnyObjArr } from '@/typings'
|
|
|
+import {getDoneListApi, getDonePageApi, handleApi} from '@/api/flow/execute'
|
|
|
+import { getChartApi } from '@/api/flow/definition'
|
|
|
+
|
|
|
+const modules = import.meta.glob('@/views/**/*.vue')
|
|
|
+
|
|
|
+const queryRef = ref<InstanceType<typeof AForm>>()
|
|
|
+
|
|
|
+const showQuery = ref<boolean>(true)
|
|
|
+const pageTotal = ref<number>(0)
|
|
|
+
|
|
|
+const queryData = ref<StrAnyObj>({ pageNum: 1, pageSize: 10 })
|
|
|
+const tableData = ref<StrAnyObjArr>([])
|
|
|
+
|
|
|
+const chartVisible = ref(false)
|
|
|
+const imgUrl = ref('')
|
|
|
+
|
|
|
+const doneListVisible = ref(false)
|
|
|
+const doneList = ref([])
|
|
|
+
|
|
|
+const handleData = ref({})
|
|
|
+
|
|
|
+const handleVisible = ref(false)
|
|
|
+const handleComponent = ref(null)
|
|
|
+const businessId = ref(null)
|
|
|
+const taskId = ref(null)
|
|
|
+
|
|
|
+const queryConfig: FormConfigType[] = [
|
|
|
+ {
|
|
|
+ type: 'input',
|
|
|
+ prop: 'nodeName',
|
|
|
+ label: '节点名称'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'select',
|
|
|
+ prop: 'flowStatus',
|
|
|
+ label: '流程状态',
|
|
|
+ dict: 'flow_status'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'datePicker',
|
|
|
+ prop: 'createTime',
|
|
|
+ label: '创建时间',
|
|
|
+ datePickerType: 'date',
|
|
|
+ format: 'YYYY-MM-DD',
|
|
|
+ valueFormat: 'YYYY-MM-DD 00:00:00'
|
|
|
+ }
|
|
|
+]
|
|
|
+
|
|
|
+const toolbarConfig: ToolbarConfigType[] = [
|
|
|
+ {
|
|
|
+ common: 'search',
|
|
|
+ click() {
|
|
|
+ queryData.value.pageNum = 1
|
|
|
+ getPage()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ common: 'reset',
|
|
|
+ click() {
|
|
|
+ queryRef.value?.resetFields()
|
|
|
+ getPage()
|
|
|
+ }
|
|
|
+ }
|
|
|
+]
|
|
|
+
|
|
|
+const columnConfig: ColumnConfigType[] = [
|
|
|
+ {
|
|
|
+ prop: 'flowName',
|
|
|
+ label: '流程名称'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'nodeName',
|
|
|
+ label: '节点名称'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'approver',
|
|
|
+ label: '审批人'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'transferredBy',
|
|
|
+ label: '转办人'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'delegate',
|
|
|
+ label: '委派人'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'flowStatus',
|
|
|
+ label: '流程状态',
|
|
|
+ dict: 'flow_status'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'activityStatus',
|
|
|
+ label: '激活状态',
|
|
|
+ dict: 'activity_status'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'createTime',
|
|
|
+ label: '创建时间'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ width: 200,
|
|
|
+ handleConfig: [
|
|
|
+ {
|
|
|
+ text: '办理',
|
|
|
+ click(row) {
|
|
|
+ const path = `/src/views/${row.formPath}`
|
|
|
+ const module = modules[path]
|
|
|
+ if (!module) {
|
|
|
+ ElMessage.error(`未知流程表单路径:${path}`)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ businessId.value = row.businessId
|
|
|
+ taskId.value = row.id
|
|
|
+ handleComponent.value = markRaw(defineAsyncComponent(module))
|
|
|
+ handleVisible.value = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '流程图',
|
|
|
+ click(row) {
|
|
|
+ getChartApi(row.instanceId).then((resp) => {
|
|
|
+ chartVisible.value = true
|
|
|
+ imgUrl.value = 'data:image/gif;base64,' + resp
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '审批记录',
|
|
|
+ click(row) {
|
|
|
+ getDoneListApi(row.instanceId).then((resp) => {
|
|
|
+ doneListVisible.value = true
|
|
|
+ doneList.value = resp
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+]
|
|
|
+
|
|
|
+const doneListColumnConfig: ColumnConfigType[] = [
|
|
|
+ {
|
|
|
+ prop: 'nodeName',
|
|
|
+ label: '审批节点'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'targetNodeName',
|
|
|
+ label: '跳转节点'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'approver',
|
|
|
+ label: '审批人'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'createTime',
|
|
|
+ label: '审批时间'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'message',
|
|
|
+ label: '审批意见',
|
|
|
+ showOverflowTooltip: true
|
|
|
+ }
|
|
|
+]
|
|
|
+
|
|
|
+const handleConfig: FormConfigType[] = [
|
|
|
+ {
|
|
|
+ type: 'input',
|
|
|
+ itemType: 'textarea',
|
|
|
+ label: '审批意见',
|
|
|
+ prop: 'message',
|
|
|
+ rows: 5
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'slot',
|
|
|
+ label: '审批类型',
|
|
|
+ prop: 'handle'
|
|
|
+ }
|
|
|
+]
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ getPage()
|
|
|
+})
|
|
|
+
|
|
|
+function getPage() {
|
|
|
+ getDonePageApi(queryData.value).then((resp) => {
|
|
|
+ tableData.value = resp.records
|
|
|
+ pageTotal.value = resp.total
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+function handle(handleType) {
|
|
|
+ const message = handleData.value.message
|
|
|
+ handleApi({ taskId: taskId.value, handleType, message }).then(() => {
|
|
|
+ getPage()
|
|
|
+ ElMessage.success('办理成功')
|
|
|
+ this.handleVisible = false
|
|
|
+ })
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-card v-if="showQuery">
|
|
|
+ <a-form ref="queryRef" v-model="queryData" :config="queryConfig" :span="6"> </a-form>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <a-table
|
|
|
+ :data="tableData"
|
|
|
+ :page-total="pageTotal"
|
|
|
+ :toolbar-config="toolbarConfig"
|
|
|
+ :column-config="columnConfig"
|
|
|
+ v-model:showQuery="showQuery"
|
|
|
+ v-model:page-num="queryData.pageNum"
|
|
|
+ v-model:page-size="queryData.pageSize"
|
|
|
+ @page-num-change="getPage"
|
|
|
+ @page-size-change="getPage"
|
|
|
+ >
|
|
|
+ </a-table>
|
|
|
+
|
|
|
+ <a-dialog title="" v-model="handleVisible" width="1200px" :footer="false">
|
|
|
+ <el-card shadow="always">
|
|
|
+ <template #header>流程明细</template>
|
|
|
+ <component :is="handleComponent" :businessId="businessId" />
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <el-card shadow="always" style="margin-top: 20px">
|
|
|
+ <template #header>办理参数</template>
|
|
|
+ <a-form v-model="handleData" :config="handleConfig" :span="24">
|
|
|
+ <template #handle>
|
|
|
+ <el-button type="primary" @click="handle(1)">通 过</el-button>
|
|
|
+ <el-button type="primary" @click="handle(2)">回 退</el-button>
|
|
|
+ <el-button type="primary" @click="handle(3)">拒 绝</el-button>
|
|
|
+ <el-button @click="handleVisible = false">关 闭</el-button>
|
|
|
+ </template>
|
|
|
+ </a-form>
|
|
|
+ </el-card>
|
|
|
+ </a-dialog>
|
|
|
+
|
|
|
+ <a-dialog title="流程图" v-model="chartVisible" width="1200px" :footer="false">
|
|
|
+ <img :src="imgUrl" width="100%" style="margin: 0 auto" alt="" />
|
|
|
+ </a-dialog>
|
|
|
+
|
|
|
+ <a-dialog title="审批记录" v-model="doneListVisible" width="1000px" :footer="false">
|
|
|
+ <a-table :data="doneList" :column-config="doneListColumnConfig" :card="false"> </a-table>
|
|
|
+ </a-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|