7 changed files with 812 additions and 118 deletions
@ -0,0 +1,499 @@ |
|||
<template> |
|||
<j-modal class="approval-new-dialog" :title="title" :width="width" :visible="visible" @cancel="handleCancel" |
|||
:footer="null"> |
|||
<!-- <template slot="footer"> |
|||
<w-button type="primary" @click="handleCancel">关闭</w-button> |
|||
</template> --> |
|||
<a-spin :spinning="loading"> |
|||
<div v-if="type === 'submit'"> |
|||
<div> |
|||
<div class="topArea"> |
|||
<div class="topArea_box"> |
|||
<div class="topArea_theme"> |
|||
<div class="topArea_theme_label"> |
|||
主题 |
|||
</div> |
|||
<w-input style="width: 300px;" v-model="themeTitle" /> |
|||
</div> |
|||
<div class="buttonArea"> |
|||
<w-button v-for="item in buttonList" :key="item.name" type="primary" @click="openFlowModal(item)">{{ |
|||
item.name }}</w-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div> |
|||
<w-tabs v-model="activeKey" type="card" style="width: 100%" size="mini"> |
|||
<w-tab-pane tab="流程表格" key="flowTable" :forceRender="true"> |
|||
<a-table ref="table" :columns="submitColumns" :pagination="false" :dataSource="dataSource" bordered |
|||
size="middle" row-key="id" class="j-table-force-nowrap"> |
|||
<span slot="operator" slot-scope="text, record"> |
|||
<span v-if="record.showType === 'text'">{{ record.handlerNames }} </span> |
|||
<!-- <w-input v-else-if="record.showType === 'input'" v-model="operator" /> --> |
|||
<AppprovalUserSelect v-model="record.operator" :disabled="record.disabled" |
|||
v-else-if="record.showType === 'input'" @change="(data) => getOperator(data, record)" /> |
|||
<span v-else></span> |
|||
</span> |
|||
</a-table> |
|||
</w-tab-pane> |
|||
</w-tabs> |
|||
</div> |
|||
</div> |
|||
<div v-if="type === 'audit'"> |
|||
<div> |
|||
<div class="topArea"> |
|||
<div class="topArea_box"> |
|||
<div class="topArea_theme"> |
|||
<!-- <div class="topArea_theme_label"> |
|||
主题 |
|||
</div> --> |
|||
<div> |
|||
{{ themeTitle }} |
|||
</div> |
|||
</div> |
|||
<div class="buttonArea"> |
|||
<!-- 遍历 --> |
|||
<w-button v-for="(item, index) in buttonList" :key="item.name" :type="index === 0 ? 'primary' : ''" |
|||
@click="openFlowModal(item)">{{ |
|||
item.name }}</w-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div> |
|||
<w-tabs v-model="activeKey" type="card" style="width: 100%" size="mini"> |
|||
<w-tab-pane tab="审批记录" key="auditRecord" :forceRender="true"> |
|||
<a-table ref="table" :columns="auditColumns" :pagination="false" :dataSource="dataSource" bordered |
|||
size="middle" row-key="id" class="j-table-force-nowrap" /> |
|||
</w-tab-pane> |
|||
<w-tab-pane tab="日志" key="auditLog" :forceRender="true"> |
|||
<a-table ref="table" :columns="auditColumns" :pagination="false" :dataSource="logList" bordered |
|||
size="middle" row-key="id" class="j-table-force-nowrap" /> |
|||
</w-tab-pane> |
|||
</w-tabs> |
|||
</div> |
|||
</div> |
|||
</a-spin> |
|||
<passModal ref="passModal" @ok="hanledOK" /> |
|||
</j-modal> |
|||
</template> |
|||
|
|||
<script> |
|||
import { postAction } from '@/api/manage'; |
|||
import passModal from './components/passModal.vue'; |
|||
import { mapGetters } from 'vuex'; |
|||
import AppprovalUserSelect from '@/components/AppprovalUserSelect/index'; |
|||
export default { |
|||
name: "ApprovalProgressTemplate", |
|||
components: { |
|||
passModal, |
|||
AppprovalUserSelect |
|||
}, |
|||
data() { |
|||
return { |
|||
loading: false, |
|||
type: 'submit', |
|||
activeKey: 'flowTable', |
|||
title: "提交", |
|||
width: 800, |
|||
visible: false, |
|||
themeTitle: '', |
|||
// 业务id |
|||
businessId: '', |
|||
// 流程id |
|||
flowId: "", |
|||
// 操作人 |
|||
operator: "", |
|||
operatorName: '', |
|||
submitColumns: [ |
|||
{ |
|||
title: '序号', |
|||
dataIndex: 'nodeId', |
|||
key: 'nodeId', |
|||
width: 60, |
|||
align: 'center', |
|||
}, |
|||
{ |
|||
title: '节点', |
|||
align: 'center', |
|||
dataIndex: 'nodeName', |
|||
ellipsis: true, |
|||
width: 200, |
|||
}, |
|||
{ |
|||
title: '处理人', |
|||
align: 'center', |
|||
width: 300, |
|||
dataIndex: 'operator', |
|||
ellipsis: true, |
|||
scopedSlots: { customRender: 'operator' }, |
|||
}, |
|||
{ |
|||
title: '类型', |
|||
align: 'center', |
|||
dataIndex: 'processType', |
|||
ellipsis: true, |
|||
}, |
|||
], |
|||
auditColumns: [ |
|||
{ |
|||
title: '节点', |
|||
align: 'center', |
|||
dataIndex: 'fdNodeId', |
|||
ellipsis: true, |
|||
width: 100, |
|||
}, |
|||
{ |
|||
title: '节点名称', |
|||
align: 'center', |
|||
dataIndex: 'fdNodeName', |
|||
ellipsis: true, |
|||
width: 100, |
|||
}, |
|||
{ |
|||
title: '操作人', |
|||
align: 'center', |
|||
width: 100, |
|||
dataIndex: 'fdHandlerName', |
|||
ellipsis: true, |
|||
}, |
|||
{ |
|||
title: '操作', |
|||
align: 'center', |
|||
dataIndex: 'fdOperationName', |
|||
ellipsis: true, |
|||
width: 100, |
|||
}, |
|||
{ |
|||
title: '附件/审批意见', |
|||
align: 'center', |
|||
dataIndex: 'fdAuditeInfo', |
|||
ellipsis: true, |
|||
width: 200, |
|||
}, |
|||
// { |
|||
// title: '时间', |
|||
// align: 'center', |
|||
// dataIndex: 'time', |
|||
// ellipsis: true, |
|||
// width: 100, |
|||
// }, |
|||
], |
|||
dataSource: [], |
|||
url: { |
|||
// 流程初始化 |
|||
initProcess: '/flow/common/initProcess', |
|||
// 按钮list |
|||
optionList: '/flow/common/optionList', |
|||
// 流程list |
|||
flowList: '/flow/common/info/table', |
|||
// 提交 |
|||
submit: '/flow/common/submit', |
|||
// 审核 |
|||
approve: '/flow/common/approve', |
|||
// 审批记录 |
|||
auditeNote: '/flow/common/auditeNote', |
|||
// 补充审批记录 |
|||
auditeNoteSupply: '/flow/common/info/process', |
|||
// 日志 |
|||
logList: '/flow/common/log/list', |
|||
// 驳回节点列表 |
|||
refuseNode: '/flow/common/refuseNode/process', |
|||
// 查询 |
|||
getFdTemplateCodeApi: '/merger/mergerGoods/v1/check-merger-goods-by-id', |
|||
}, |
|||
buttonList: [], |
|||
fdActivityType: '', |
|||
taskId: "", |
|||
nodeInstanceId: '', |
|||
refuseNodeList: [], |
|||
logList: [], |
|||
fdTemplateCode: 'mergerApply' |
|||
} |
|||
}, |
|||
methods: { |
|||
...mapGetters(['userInfo']), |
|||
async getFlowList() { |
|||
const res = await postAction(this.url.optionList, { |
|||
fdId: this.flowId, |
|||
loginName: this.userInfo().username, |
|||
}); |
|||
const resp = await postAction(this.url.flowList, { |
|||
fdId: this.flowId, |
|||
loginName: this.userInfo().username, |
|||
fdTemplateCode: this.fdTemplateCode, |
|||
}); |
|||
if (res.success) { |
|||
if (res.result.length) { |
|||
this.buttonList = res.result[0].operationList.filter(item => !['沟通', '废弃'].includes(item.name)); |
|||
this.buttonList = this.buttonList.sort((a, b) => a.order - b.order); |
|||
} else { |
|||
this.buttonList = []; |
|||
} |
|||
} else { |
|||
this.$message.error(res.message); |
|||
this.loading = false; |
|||
} |
|||
if (resp.success) { |
|||
this.dataSource = resp.result.processNodes || []; |
|||
this.dataSource.forEach((item) => { |
|||
this.$set(item, 'showType', 'text'); |
|||
if (item.activityType === 'approveNode') { |
|||
item.showType = 'input'; |
|||
item.disabled = !(item.mustSelected || item.canSelected); |
|||
item.operator = item.handlers && item.handlers.length ? item.handlers[0].id : this.operator; |
|||
} |
|||
}); |
|||
} else { |
|||
this.$message.error(res.message); |
|||
this.loading = false; |
|||
} |
|||
setTimeout(() => { |
|||
this.loading = false |
|||
}, 100); |
|||
}, |
|||
async getLogList() { |
|||
const res = await postAction(this.url.optionList, { |
|||
fdId: this.flowId, |
|||
loginName: this.userInfo().username, |
|||
}) |
|||
if (res.success) { |
|||
if (res.result.length) { |
|||
this.buttonList = res.result[0].operationList.filter(item => !['沟通', '废弃'].includes(item.name)); |
|||
this.buttonList = this.buttonList.sort((a, b) => a.order - b.order); |
|||
} else { |
|||
this.buttonList = []; |
|||
} |
|||
} else { |
|||
this.$message.error(res.message); |
|||
this.loading = false; |
|||
} |
|||
const resp = await postAction(this.url.auditeNote, { |
|||
bsId: this.businessId, |
|||
fdId: this.flowId, |
|||
loginName: this.userInfo().username, |
|||
fdTemplateCode: this.fdTemplateCode, |
|||
}) |
|||
const resppp = await postAction(this.url.logList, { |
|||
bsId: this.businessId, |
|||
fdId: this.flowId, |
|||
loginName: this.userInfo().username, |
|||
fdTemplateCode: this.fdTemplateCode, |
|||
}) |
|||
this.logList = JSON.parse(resppp.result); |
|||
if (resp.success) { |
|||
this.dataSource = resp.result; |
|||
const response = await postAction(this.url.auditeNoteSupply, { |
|||
// bsId: this.businessId, |
|||
fdId: this.flowId, |
|||
loginName: this.userInfo().username, |
|||
fdTemplateCode: this.fdTemplateCode, |
|||
}) |
|||
if (response.result.currNodes && response.result.currNodes.length > 0) { |
|||
this.themeTitle = response.result.subject; |
|||
this.nodeInstanceId = response.result.currNodes[0].nodeInstanceId; |
|||
this.dataSource.push({ |
|||
fdNodeId: response.result.currNodeIds, |
|||
fdNodeName: response.result.currNodes[0].nodeName, |
|||
fdHandlerName: response.result.currNodes[0].handlers[0].name, |
|||
fdOperationName: response.result.fdStatus, |
|||
fdAuditeInfo: response.result.nodeDesc, |
|||
}) |
|||
} |
|||
} else { |
|||
this.$message.error(res.message); |
|||
this.loading = false; |
|||
} |
|||
setTimeout(() => { |
|||
this.loading = false; |
|||
}, 100); |
|||
}, |
|||
async openFlowModal(obj) { |
|||
this.operationFlag = obj.operationType; |
|||
this.taskId = obj.operationTaskList[0].fdTaskId; |
|||
this.fdActivityType = obj.operationTaskList[0].fdActivityType; |
|||
let title = ''; |
|||
if (this.operationFlag === 'handler_pass') { |
|||
title = '通过'; |
|||
} else if (this.operationFlag === 'draft_submit') { |
|||
title = '提交'; |
|||
if (!this.operator) { |
|||
return this.$message.info('请先选择处理人') |
|||
} |
|||
} else if (this.operationFlag === 'handler_commission') { |
|||
title = '转办'; |
|||
} else if (this.operationFlag === 'handler_refuse') { |
|||
title = '驳回'; |
|||
const res = await postAction(this.url.refuseNode, { |
|||
fdId: this.flowId, |
|||
loginName: this.userInfo().username, |
|||
nodeInstanceId: this.nodeInstanceId |
|||
}) |
|||
this.refuseNodeList = res.result; |
|||
} else if (['draft_abandon', 'handler_abandon'].includes(this.operationFlag)) { |
|||
title = '废弃'; |
|||
} else if (this.operationFlag === 'handler_communicate') { |
|||
title = '沟通'; |
|||
} |
|||
this.$refs.passModal.show({ |
|||
title, |
|||
flag: this.operationFlag, |
|||
refuseNodeList: this.refuseNodeList |
|||
}) |
|||
}, |
|||
async show(obj) { |
|||
this.type = obj.type; |
|||
this.activeKey = this.type === 'submit' ? 'flowTable' : 'auditRecord'; |
|||
this.businessId = obj.id; |
|||
this.visible = true; |
|||
this.flowId = obj.flowId; |
|||
this.operator = obj.defaultverifyBy || ''; |
|||
this.fdTemplateCode = obj.mergerApplyFactory || 'mergerApplyFactory'; |
|||
this.loading = true; |
|||
this.themeTitle = obj.title || ''; |
|||
if (this.type === 'submit') { |
|||
if (this.flowId) { |
|||
this.getFlowList(); |
|||
} else { |
|||
const res = await postAction(this.url.initProcess, { |
|||
fdTemplateCode: this.fdTemplateCode, |
|||
loginName: this.userInfo().username, |
|||
id: this.businessId |
|||
}) |
|||
if (res.success) { |
|||
this.flowId = res.result; |
|||
this.getFlowList(); |
|||
} else { |
|||
this.$message.error(res.message); |
|||
this.loading = false; |
|||
} |
|||
} |
|||
} else { |
|||
this.title = '审核'; |
|||
this.flowId = obj.flowId; |
|||
this.getLogList(); |
|||
} |
|||
}, |
|||
handleCancel() { |
|||
this.visible = false; |
|||
this.operator = ''; |
|||
}, |
|||
getOperator(data, row) { |
|||
if (data && data.length > 0) { |
|||
row.operatorName = data[0].userName; |
|||
} else { |
|||
row.operatorName = ''; |
|||
} |
|||
}, |
|||
async hanledOK(obj) { |
|||
// 提交 |
|||
if (this.operationFlag === 'draft_submit') { |
|||
let fdUrl = ''; |
|||
if (this.fdTemplateCode === 'mergerApplyFactory') { |
|||
const env = process.env.NODE_ENV === 'prod' ? '' : process.env.NODE_ENV; |
|||
fdUrl = `https://gcs${env ? String(env).toLocaleLowerCase() : ''}.midea.com/#/iflowPage/classifyFactoryApproval`; |
|||
// fdUrl = `https://gcssit.midea.com/#/iflowPage/classifyFactoryApproval`; |
|||
} |
|||
const nodeList = this.dataSource.filter(item => item.activityType === 'approveNode'); |
|||
|
|||
const res = await postAction(this.url.submit, { |
|||
bsId: this.businessId, |
|||
loginName: this.userInfo().username, |
|||
docSubject: this.themeTitle, |
|||
fdId: this.flowId, |
|||
fdTemplateCode: this.fdTemplateCode, |
|||
auditNote: obj.remark, |
|||
processParam: { |
|||
changeNodeHandler: nodeList.map(i => { |
|||
return { |
|||
nodeId: i.nodeId, |
|||
handlers: [ |
|||
{ |
|||
type: "USER", |
|||
id: i.operator, |
|||
name: i.operatorName |
|||
} |
|||
] |
|||
} |
|||
}), |
|||
taskId: this.taskId, |
|||
activityType: this.fdActivityType, |
|||
operationType: this.operationFlag, |
|||
}, |
|||
formParam: { |
|||
formInstanceId: this.businessId, |
|||
fdUrl: fdUrl |
|||
} |
|||
}) |
|||
if (res.success) { |
|||
this.$refs.passModal.handleCancel(); |
|||
this.$refs.passModal.remark = ''; |
|||
this.visible = false; |
|||
this.$refs.passModal.loading = false; |
|||
this.$emit('ok'); |
|||
} else { |
|||
this.$refs.passModal.loading = false; |
|||
this.$message.error(res.message); |
|||
} |
|||
} |
|||
// 审核 |
|||
else { |
|||
const res = await postAction(this.url.approve, { |
|||
fdId: this.flowId, |
|||
auditNote: obj.remark, |
|||
fdTemplateCode: this.fdTemplateCode, |
|||
bsId: this.businessId, |
|||
loginName: this.userInfo().username, |
|||
processParam: { |
|||
jumpToNodeId: obj.node, |
|||
refusePassedToThisNode: obj.refusePassedToThisNode, |
|||
refusePassedToAllApprover: obj.refusePassedToAllApprover, |
|||
toOtherPersons: this.operationFlag === 'handler_commission' ? obj.operator : '', |
|||
toOtherPersonsName: this.operationFlag === 'handler_commission' ? obj.operatorName : '', |
|||
changeNodeHandler: [], |
|||
taskId: this.taskId, |
|||
activityType: this.fdActivityType, |
|||
operationType: this.operationFlag, |
|||
} |
|||
}) |
|||
if (res.success) { |
|||
this.$refs.passModal.handleCancel(); |
|||
this.$refs.passModal.remark = ''; |
|||
this.visible = false; |
|||
this.$refs.passModal.loading = false; |
|||
this.$emit('ok'); |
|||
} else { |
|||
this.$message.error(res.message); |
|||
this.$refs.passModal.loading = false; |
|||
|
|||
} |
|||
} |
|||
|
|||
this.operator = ''; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less"> |
|||
.approval-new-dialog { |
|||
.topArea { |
|||
.topArea_box { |
|||
.topArea_theme { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 20px; |
|||
|
|||
.topArea_theme_label { |
|||
margin-right: 20px; |
|||
} |
|||
} |
|||
|
|||
.buttonArea { |
|||
margin-bottom: 20px; |
|||
|
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue