| | |
| | | <div class="container"> |
| | | <el-dialog v-model="visible" draggable title="审批记录" :width="props.width" :height="props.height" :close-on-click-modal="false"> |
| | | <el-tabs v-model="tabActiveName" class="demo-tabs"> |
| | | <el-tab-pane label="流程图" name="bpmn"> |
| | | <BpmnView ref="bpmnViewRef"></BpmnView> |
| | | <el-tab-pane v-loading="loading" label="流程图" name="bpmn"> |
| | | <img :src="imgUrl" width="100%" style="margin: 0 auto" /> |
| | | </el-tab-pane> |
| | | <el-tab-pane label="审批信息" name="info" v-loading="loading"> |
| | | <el-tab-pane v-loading="loading" label="审批信息" name="info"> |
| | | <div> |
| | | <el-table :data="historyList" style="width: 100%" border fit> |
| | | <el-table-column type="index" label="序号" align="center" width="60"></el-table-column> |
| | | <el-table-column prop="name" label="任务名称" sortable align="center"></el-table-column> |
| | | <el-table-column prop="nickName" label="办理人" sortable align="center"> |
| | | <el-table-column prop="nodeName" label="任务名称" sortable align="center"></el-table-column> |
| | | <el-table-column prop="approveName" :show-overflow-tooltip="true" label="办理人" sortable align="center"> |
| | | <template #default="scope"> |
| | | <el-tag type="success">{{ scope.row.nickName||'无' }}</el-tag> |
| | | <template v-if="scope.row.approveName"> |
| | | <el-tag v-for="(item, index) in scope.row.approveName.split(',')" :key="index" type="success">{{ item }}</el-tag> |
| | | </template> |
| | | <template v-else> <el-tag type="success">无</el-tag></template> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="状态" sortable align="center"> |
| | | <el-table-column prop="flowStatus" label="状态" width="80" sortable align="center"> |
| | | <template #default="scope"> |
| | | <el-tag type="success">{{ scope.row.statusName }}</el-tag> |
| | | <dict-tag :options="wf_task_status" :value="scope.row.flowStatus"></dict-tag> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="comment" label="审批意见" sortable align="center"></el-table-column> |
| | | <el-table-column prop="startTime" label="开始时间" sortable align="center"></el-table-column> |
| | | <el-table-column prop="endTime" label="结束时间" sortable align="center"></el-table-column> |
| | | <el-table-column prop="runDuration" label="运行时长" sortable align="center"></el-table-column> |
| | | <el-table-column prop="attachmentList" label="附件" sortable align="center"> |
| | | <el-table-column prop="message" label="审批意见" :show-overflow-tooltip="true" sortable align="center"></el-table-column> |
| | | <el-table-column prop="createTime" label="开始时间" width="160" :show-overflow-tooltip="true" sortable align="center"></el-table-column> |
| | | <el-table-column prop="updateTime" label="结束时间" width="160" :show-overflow-tooltip="true" sortable align="center"></el-table-column> |
| | | <el-table-column |
| | | prop="runDuration" |
| | | label="运行时常" |
| | | width="140" |
| | | :show-overflow-tooltip="true" |
| | | sortable |
| | | align="center" |
| | | ></el-table-column> |
| | | <el-table-column prop="attachmentList" width="120" label="附件" align="center"> |
| | | <template #default="scope"> |
| | | <el-popover v-if="scope.row.attachmentList && scope.row.attachmentList.length > 0" placement="right" :width="310" trigger="click"> |
| | | <template #reference> |
| | | <el-button style="margin-right: 16px">附件</el-button> |
| | | <el-button type="primary" style="margin-right: 16px">附件</el-button> |
| | | </template> |
| | | <el-table border :data="scope.row.attachmentList"> |
| | | <el-table-column prop="name" width="202" :show-overflow-tooltip="true" label="附件名称"></el-table-column> |
| | | <el-table-column prop="originalName" width="202" :show-overflow-tooltip="true" label="附件名称"></el-table-column> |
| | | <el-table-column prop="name" width="80" align="center" :show-overflow-tooltip="true" label="操作"> |
| | | <template #default="tool"> |
| | | <el-button type="text" @click="handleDownload(tool.row.contentId)">下载</el-button> |
| | | <el-button type="text" @click="handleDownload(tool.row.ossId)">下载</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | |
| | | </div> |
| | | </template> |
| | | <script lang="ts" setup> |
| | | import BpmnView from '@/components/BpmnView/index.vue'; |
| | | import processApi from '@/api/workflow/processInstance'; |
| | | import { flowImage } from '@/api/workflow/instance'; |
| | | import { propTypes } from '@/utils/propTypes'; |
| | | import { listByIds } from '@/api/system/oss'; |
| | | |
| | | const { proxy } = getCurrentInstance() as ComponentInternalInstance; |
| | | |
| | | const { wf_task_status } = toRefs<any>(proxy?.useDict('wf_task_status')); |
| | | const props = defineProps({ |
| | | width: propTypes.string.def('70%'), |
| | | width: propTypes.string.def('80%'), |
| | | height: propTypes.string.def('100%') |
| | | }); |
| | | const loading = ref(false); |
| | | const visible = ref(false); |
| | | const historyList = ref<Array<any>>([]); |
| | | const deleteReason = ref<string>(''); |
| | | const tabActiveName = ref('bpmn'); |
| | | |
| | | const bpmnViewRef = ref<BpmnView>(); |
| | | const imgUrl = ref(''); |
| | | |
| | | //初始化查询审批记录 |
| | | const init = async (instanceId: string) => { |
| | | const init = async (businessId: string | number) => { |
| | | visible.value = true; |
| | | loading.value = true; |
| | | tabActiveName.value = 'bpmn' |
| | | tabActiveName.value = 'bpmn'; |
| | | historyList.value = []; |
| | | processApi.getHistoryRecord(instanceId).then((resp) => { |
| | | historyList.value = resp.data.historyRecordList; |
| | | deleteReason.value = resp.data.deleteReason; |
| | | loading.value = false; |
| | | flowImage(businessId).then((resp) => { |
| | | if (resp.data) { |
| | | historyList.value = resp.data.list; |
| | | imgUrl.value = 'data:image/gif;base64,' + resp.data.image; |
| | | if (historyList.value.length > 0) { |
| | | historyList.value.forEach((item) => { |
| | | if (item.ext) { |
| | | getIds(item.ext).then((res) => { |
| | | item.attachmentList = res.data; |
| | | }); |
| | | } else { |
| | | item.attachmentList = []; |
| | | } |
| | | }); |
| | | } |
| | | loading.value = false; |
| | | } |
| | | }); |
| | | await nextTick(() => { |
| | | bpmnViewRef.value.init(instanceId); |
| | | }); |
| | | }; |
| | | const getIds = async (ids: string | number) => { |
| | | const res = await listByIds(ids); |
| | | return res; |
| | | }; |
| | | |
| | | /** 下载按钮操作 */ |