基础功能
帮助提示，用于标注某个注解说明。
当ibps-help元素中注入对应数据后得效果，此处应用在系统附件菜单的预览功能。
<template>
<div class="main-container">
<ibps-crud
ref="crud"
:height="height"
:data="listData"
:toolbars="listConfig.toolbars"
:search-form="listConfig.searchForm"
:pk-key="pkKey"
:columns="listConfig.columns"
:row-handle="listConfig.rowHandle"
:pagination="pagination"
:loading="loading"
:index-row="false"
:identity="identity"
@column-link-click="handleLinkClick"
@action-event="handleAction"
@sort-change="handleSortChange"
@pagination-change="handlePaginationChange"
>
<template slot="headerIcon" slot-scope="scope">
<span>{{ scope.column.label }}</span>
<ibps-help
width="100%"
:title="$t('platform.bpmn.bpm-task.about-candidate')"
:content="` ${$t('platform.bpmn.bpm-task.detailed-one')}<br>
${$t('platform.bpmn.bpm-task.detailed-tow')}<br>
${$t('platform.bpmn.bpm-task.detailed-four')}<br>
${$t('platform.bpmn.bpm-task.detailed-three')}<br>`"
/>
</template>
</ibps-crud>
<approve-dialog
:visible="dialogFormVisible"
:title="title"
:task-id="editId"
:action="action"
class="bpm-task-dialog"
@callback="search"
@close="visible => dialogFormVisible = visible"
/>
<!-- 人员选择器 -->
<ibps-employee-selector-dialog
:visible="selectorVisible"
:value="[]"
multiple
@close="visible => selectorVisible = visible"
@action-event="handleSelectorActionEvent"
/>
<bpmn-formrender
:visible="bpmnFormrenderDialogVisible"
:task-id="editId"
@callback="search"
@close="visible => bpmnFormrenderDialogVisible = visible"
/>
</div>
</template>
<script>
import { queryPageList, remove, batchSuspendProcess, batchRecoverProcess, assignee } from '@/api/platform/bpmn/bpmTask'
import ActionUtils from '@/utils/action'
import FixHeight from '@/mixins/height'
import Identity from '@/constants/identity'
export default {
components: {
'ibps-employee-selector-dialog': () => import('@/business/platform/org/employee/dialog'),
'approve-dialog': () => import('@/business/platform/bpmn/form-ext/approve'),
'bpmn-formrender': () => import('@/business/platform/bpmn/form/dialog')
},
mixins: [FixHeight],
data() {
return {
identity: Identity.IBPS.BPMN.BPM_TASK_MGR,
dialogFormVisible: false, // 弹窗
bpmnFormrenderDialogVisible: false, // 表单
editId: '', // 编辑dialog需要使用
action: 'agree', // 打开弹窗的动作
pkKey: 'id', // 主键 如果主键不是pk需要传主键
selectorVisible: false,
ids: '',
title: '',
loading: true,
height: document.clientHeight,
listData: [],
pagination: {},
sorts: {},
listConfig: {
toolbars: [
{ key: 'agree', type: 'primary', label: this.$t('platform.bpmn.bpm-task.agree') },
{ key: 'stop', label: this.$t('platform.bpmn.bpm-task.stop') },
{ key: 'suspend', label: this.$t('platform.bpmn.bpm-task.suspend') },
{ key: 'recover', label: this.$t('platform.bpmn.bpm-task.recover') },
{ key: 'assignee', label: this.$t('platform.bpmn.bpm-task.assignee') }
],
searchForm: {
forms: [
{ prop: 'Q^subject_^SL', label: this.$t('platform.bpmn.bpm-task.request-title') },
{ prop: 'Q^NAME_^SL', label: this.$t('platform.bpmn.bpm-task.current-node'), fieldType: 'languageSelect' },
{
prop: ['Q^CREATE_TIME_^DL', 'Q^CREATE_TIME_^DG'],
label: this.$t('common.field.createTime'),
fieldType: 'daterange'
}
]
},
// 表格字段配置
columns: [
{ prop: 'subject', label: this.$t('platform.bpmn.bpm-task.request-title'), link: 'dialog' },
{ prop: 'name', label: this.$t('platform.bpmn.bpm-task.current-node'), width: 200, slotName: 'trans' },
{ prop: 'ownerName', label: this.$t('platform.bpmn.bpm-task.candidate'), width: 200, headerName: 'headerIcon' },
{ prop: 'partyTypeName', label: this.$t('platform.bpmn.bpm-task.range-of-candidates'), width: 200 },
{ prop: 'createTime', label: this.$t('common.field.createTime'), sortable: 'custom', width: 150 }
],
rowHandle: {
actions: [{
key: 'assignee',
label: this.$t('platform.bpmn.bpm-task.designated-executor')
}, {
key: 'approve',
label: this.$t('platform.bpmn.bpm-task.approve')
}]
}
}
}
},
created() {
this.loadData()
},
beforeDestroy() {
this.listData = null
this.pagination = null
this.sorts = null
this.listConfig = null
},
methods: {
// 加载数据
loadData() {
this.loading = true
queryPageList(this.getSearcFormData()).then(response => {
// Modify by Fuyu 国际化内容显示 at 2021-03-30
// for (const i in response.data.dataResult) {
// const item = response.data.dataResult[i]
// if (item.subject.indexOf(this.$t('platform.bpmn.common.initiate')) > -1) {
// const index = item.subject.indexOf(this.$t('platform.bpmn.common.initiate'))
// const fix = item.subject.substr(0, index + 2)
// const trans = item.subject.substr(index + 2, item.subject.length - 1)
// item.subject = fix + (this.$t(trans) || trans) || fix + trans
// }
// if (item.ownerName.length > 0) { // 候选人
// const split = item.ownerName.split(',')
// let ownerNameTrans = ''
// for (const i in split) {
// split[i] = this.$t(split[i])
// ownerNameTrans = ownerNameTrans + split[i] + (i < split.length - 1 ? ',' : '')
// }
// item.ownerName = ownerNameTrans
// }
// if (item.partyTypeName.length > 0) { // 候选人范围
// const split = item.partyTypeName.split(',')
// let partyTypeNameTrans = ''
// for (const i in split) {
// split[i] = this.$t(split[i])
// partyTypeNameTrans = partyTypeNameTrans + split[i] + (i < split.length - 1 ? ',' : '')
// }
// item.partyTypeName = partyTypeNameTrans
// }
// }
ActionUtils.handleListData(this, response.data)
this.loading = false
}).catch(() => {
this.loading = false
})
},
/**
* 获取格式化参数
*/
getSearcFormData() {
return ActionUtils.formatParams(
this.$refs['crud'] ? this.$refs['crud'].getSearcFormData() : {},
this.pagination,
this.sorts)
},
/**
* 处理分页事件
*/
handlePaginationChange(page) {
ActionUtils.setPagination(this.pagination, page)
this.loadData()
},
/**
* 处理排序
*/
handleSortChange(sort) {
ActionUtils.setSorts(this.sorts, sort)
this.loadData()
},
/**
* 查询
*/
search() {
this.loadData()
},
/**
* 重置查询
*/
resetSearch() {
this.$refs['crud'] ? this.$refs['crud'].resetSearch() : null
ActionUtils.setFirstPagination(this.pagination)
this.search()
},
/**
* 处理按钮事件
*/
handleAction(command, position, selection, data) {
switch (command) {
case 'search':// 查询
ActionUtils.setFirstPagination(this.pagination)
this.search()
break
case 'resetSearch':// 重置查询
this.resetSearch()
break
case 'stop':// 终止
ActionUtils.selectedMultiRecord(selection).then((ids) => {
this.handleBatchApprove(ids, 'stop')
this.title = this.$t('platform.bpmn.bpm-task.batch-termination-process')
}).catch(() => { })
break
case 'agree':// 同意
ActionUtils.selectedMultiRecord(selection).then((ids) => {
this.handleBatchApprove(ids, 'agree')
this.title = this.$t('platform.bpmn.bpm-task.batch-approval')
}).catch(() => { })
break
case 'suspend':// 挂起
ActionUtils.selectedMultiRecord(selection).then((ids) => {
this.handleSuspend(ids)
}).catch(() => { })
break
case 'recover':// 恢复
ActionUtils.selectedMultiRecord(selection).then((ids) => {
this.handleRecover(ids)
}).catch(() => { })
break
case 'assignee':// 指定执行人
ActionUtils.selectedMultiRecord(selection).then((ids) => {
this.handleAssignee(ids)
}).catch(() => { })
break
case 'approve':// 审批
ActionUtils.selectedMultiRecord(selection).then((ids) => {
this.handleApprove(ids)
}).catch(() => { })
break
default:
break
}
},
/**
* 处理审批
*/
handleBatchApprove(id = '', action = 'agree') {
this.editId = id
this.action = action
this.dialogFormVisible = true
},
/**
* 处理删除
*/
handleRemove(ids) {
remove({ levelIds: ids }).then(response => {
ActionUtils.removeSuccessMessage()
this.search()
}).catch(() => {})
},
/**
* 批量挂起任务
*/
handleSuspend(ids) {
this.$confirm(this.$t('platform.bpmn.bpm-task.batch-hang-up-process'), this.$t('common.msg.info')).then(() => {
batchSuspendProcess({ taskIds: ids }).then(() => {
ActionUtils.successMessage(this.$t('platform.bpmn.bpm-task.process-task-suspended-successfully'))
this.search()
}).catch(error => {
console.error(error)
})
})
},
/**
* 批量挂起任务
*/
handleRecover(ids) {
this.$confirm(this.$t('platform.bpmn.bpm-task.batch-recovery-process'), this.$t('common.msg.info')).then(() => {
batchRecoverProcess({ taskIds: ids }).then(() => {
ActionUtils.successMessage(this.$t('platform.bpmn.bpm-task.recovery-process-task-succeeded'))
this.search()
}).catch(error => {
console.error(error)
})
})
},
/**
* 指定执行人
*/
handleAssignee(ids) {
this.ids = ids
this.selectorVisible = true
},
handleSelectorActionEvent(buttonKey, data) {
switch (buttonKey) {
case 'confirm':// 确定
this.handleConfirm(data)
break
}
},
handleConfirm(data) {
assignee({
taskId: this.ids,
userId: data.map((d) => { return d.id }).join(',')
}).then(response => {
this.selectorVisible = false
ActionUtils.success(this.$t('platform.bpmn.bpm-task.designated-executor-succeeded'))
this.search()
})
},
/**
* 审批
*/
handleApprove(id) {
this.bpmnFormrenderDialogVisible = true
this.editId = id
},
handleLinkClick(data, columns) {
this.handleApprove(data[this.pkKey])
}
}
}
</script>
文档更新时间: 2021-05-14 18:09 作者：admin
