/** * @Description: * @author wx * @date 2023/03/30 */ <template> <div class="process-info-com"> <dee-form read-only :form-data="formData" :form="clickItem" /> <templateXml :item="clickItem" @clickTaskNode="clickTaskNode" @getTaskNodes="getTaskNodes" /> <el-collapse v-model="taskActNames" @change="handleChange"> <el-collapse-item title="节点参与者列表" name="1"> <dee-up-table ref="multipleTable" table-height="auto" :columns="tableColums" :data="tableData" :row-class-name="tableRowClassName" /> </el-collapse-item> <el-collapse-item title="已执行/执行中任务" name="2"> <dee-up-table table-height="auto" :columns="taskTableColums" :data="taskTableData" :row-class-name="tableRowClassName" /> </el-collapse-item> </el-collapse> </div> </template> <script> import templateXml from './templateXml' import { getParticipantListByInstId, getInstTaskHisTory, getParticipantPlugin } from '@/api/workflow/userSettings' import { getAllUsers } from '@/api/workflow/userSystem' import view from './view' export default { name: 'ProcessInfo', components: { templateXml }, mixins: [view], props: { clickItem: { type: Object, default: null } }, data() { return { taskActNames: ['1'], tableData: [], taskTableData: [], allTypeObj: [], clickTaskNodeKey: '', tasksIndexObj: null } }, computed: {}, watch: { clickItem: { deep: true, immediate: true, handler: function(val) { if (val && val.id) { this.getParticipantListByInstId() } } }, tasksIndexObj: { immediate: true, handler: function(val) { if (val && this.tableData.length) { this.tableData = this.tableData.map(item => { item.taskIndex = val[item.taskKey] return item }).sort((a, b) => { return a.taskIndex - b.taskIndex }) } } } }, created() { getParticipantPlugin().then(res => { res.items.forEach(r => { this.$set(this.allTypeObj, r.name, r.label) }) }) }, mounted() {}, methods: { getTaskNodes(tasksIndexObj) { this.tasksIndexObj = tasksIndexObj }, getParticipantListByInstId() { getParticipantListByInstId(this.clickItem.id).then(res => { let allUserIds = [] this.tableData = res.items ? res.items.map((r, index) => { let assignIds = [] const pluginName = [] const pluginShowContent = [] r.dxWfParticipantInfoVOList.forEach(el => { assignIds = assignIds.concat(el.participantList || []) pluginName.push(el.participantInfoExtVO.pluginName) pluginShowContent.push(el.participantInfoExtVO.pluginShowContent) }) r.taskIndex = this.tasksIndexObj ? this.tasksIndexObj[r.taskKey] : index + 1 r.pluginName = pluginName r.pluginShowContent = pluginShowContent.join(',') r.assignIds = assignIds allUserIds = allUserIds.concat(assignIds) return r }).sort((a, b) => { return a.taskIndex - b.taskIndex }) : [] if (allUserIds.length) { this.getUsers(allUserIds) } this.getInstTaskHisTory() }) }, getInstTaskHisTory() { getInstTaskHisTory(this.clickItem.id).then(data => { this.taskTableData = data.items.content ? data.items.content.map(x => { const findItem = this.tableData.find(item => item.taskKey === x.taskDefinitionKey) x.taskName = x.aliasName || x.name x.pluginName = findItem.pluginName return x }) : [] }) }, getUsers(allUserIds) { const params = { 'indices': [ 'USERS' ], 'pageFrom': 1, 'pageSize': 100, 'openProps': [ { 'name': 'userAccounts', 'pageFrom': 1, 'pageSize': 9999 } ], 'sortItem': [ { 'fieldName': 'modifyTime', 'sortOrder': 'desc' } ], 'keyWord': null, 'searchItems': { 'operator': 'AND', 'items': [] } } if (allUserIds && allUserIds.length) { params.searchItems.children = [ { 'items': [ { 'fieldName': 'id', 'operator': 'IN', 'value': allUserIds } ] } ] } getAllUsers(params).then(res => { const items = res.items.content const userListOptions = items.map(item => { return { label: item.userName, value: item.id, style: { display: 'block' } } }) this.tableData.forEach((x, index) => { if (x.assignIds.length) { const assignName = x.assignIds.map(r => { return userListOptions.find(y => y.value + '' === r + '').label }) this.$set(this.tableData[index], 'assignName', assignName.join(',')) } }) }) }, clickTaskNode(taskNodeKey) { this.clickTaskNodeKey = taskNodeKey }, tableRowClassName({ row, rowIndex }) { if (row.taskKey === this.clickTaskNodeKey || row.taskDefinitionKey === this.clickTaskNodeKey) { return 'workflow-theme-row' } return '' }, handleChange(val) { } } } </script> <style lang='scss'> .process-info-com{ .el-collapse-item__header{ font-weight: bold; } } </style>