5 changed files with 1643 additions and 1 deletions
-
79src/api/workFlow/workFlow.js
-
2src/views/modules/srmSupplier/supplierList.vue
-
519src/views/modules/workFlow/flowInstanceList.vue
-
472src/views/modules/workFlow/flowTaskList.vue
-
572src/views/modules/workFlow/flowTemplateList.vue
@ -0,0 +1,79 @@ |
|||||
|
import { createAPI } from "@/utils/httpRequest.js"; |
||||
|
|
||||
|
// ========== 流程模板相关API - rqrq ==========
|
||||
|
|
||||
|
// 查询流程模板列表
|
||||
|
export const searchTemplateList = data => createAPI(`/workFlow/template/list`, 'post', data) |
||||
|
|
||||
|
// 获取流程模板详情
|
||||
|
export const getTemplateDetail = data => createAPI(`/workFlow/template/detail`, 'post', data) |
||||
|
|
||||
|
// 保存流程模板
|
||||
|
export const saveTemplate = data => createAPI(`/workFlow/template/save`, 'post', data) |
||||
|
|
||||
|
// 删除流程模板
|
||||
|
export const deleteTemplate = data => createAPI(`/workFlow/template/delete`, 'post', data) |
||||
|
|
||||
|
// 启用流程模板
|
||||
|
export const enableTemplate = data => createAPI(`/workFlow/template/enable`, 'post', data) |
||||
|
|
||||
|
// 停用流程模板
|
||||
|
export const disableTemplate = data => createAPI(`/workFlow/template/disable`, 'post', data) |
||||
|
|
||||
|
// 复制流程模板
|
||||
|
export const copyTemplate = data => createAPI(`/workFlow/template/copy`, 'post', data) |
||||
|
|
||||
|
// 查询用户列表（选择审批人）
|
||||
|
export const searchUserList = data => createAPI(`/workFlow/template/searchUserList`, 'post', data) |
||||
|
|
||||
|
// 查询部门列表 - rqrq
|
||||
|
export const searchDepartmentList = data => createAPI(`/workFlow/template/searchDepartmentList`, 'post', data) |
||||
|
|
||||
|
// ========== 审批任务相关API - rqrq ==========
|
||||
|
|
||||
|
// 查询待办任务列表（所有任务）
|
||||
|
export const searchPendingTaskList = data => createAPI(`/workFlow/task/allPendingList`, 'post', data) |
||||
|
|
||||
|
// 查询已办任务列表（所有任务）
|
||||
|
export const searchCompletedTaskList = data => createAPI(`/workFlow/task/allCompletedList`, 'post', data) |
||||
|
|
||||
|
// ========== 流程实例相关API - rqrq ==========
|
||||
|
|
||||
|
// 查询流程实例列表
|
||||
|
export const searchInstanceList = data => createAPI(`/workFlow/instance/list`, 'post', data) |
||||
|
|
||||
|
// 查询节点实例列表
|
||||
|
export const searchNodeInstanceList = data => createAPI(`/workFlow/instance/nodeList`, 'post', data) |
||||
|
|
||||
|
// 创建流程实例（测试用）
|
||||
|
export const createFlowInstance = data => createAPI(`/workFlow/instance/create`, 'post', data) |
||||
|
|
||||
|
// 审批节点实例
|
||||
|
export const approveNodeInstance = data => createAPI(`/workFlow/instance/approve`, 'post', data) |
||||
|
|
||||
|
// 获取流程预览
|
||||
|
export const getFlowPreview = data => createAPI(`/workFlow/instance/flowPreview`, 'post', data) |
||||
|
|
||||
|
// 重新审批流程实例 - rqrq
|
||||
|
export const restartFlowInstance = data => createAPI(`/workFlow/instance/restart`, 'post', data) |
||||
|
|
||||
|
// 获取任务详情
|
||||
|
export const getTaskDetail = data => createAPI(`/workFlow/task/detail`, 'post', data) |
||||
|
|
||||
|
// 查询审批记录
|
||||
|
export const getApprovalHistory = data => createAPI(`/workFlow/task/history`, 'post', data) |
||||
|
|
||||
|
// 审批通过
|
||||
|
export const approveTask = data => createAPI(`/workFlow/task/approve`, 'post', data) |
||||
|
|
||||
|
// 审批驳回
|
||||
|
export const rejectTask = data => createAPI(`/workFlow/task/reject`, 'post', data) |
||||
|
|
||||
|
// 启动审批流程
|
||||
|
export const startFlow = data => createAPI(`/workFlow/task/startFlow`, 'post', data) |
||||
|
|
||||
|
// 获取待办任务数量
|
||||
|
export const getPendingTaskCount = data => createAPI(`/workFlow/task/pendingCount`, 'post', data) |
||||
|
|
||||
|
// 撤回审批
|
||||
|
export const withdrawTask = data => createAPI(`/workFlow/task/withdraw`, 'post', data) |
||||
@ -0,0 +1,519 @@ |
|||||
|
<template> |
||||
|
<div class="customer-css"> |
||||
|
<!-- 查询区域 - rqrq --> |
||||
|
<el-form :inline="true" label-position="top" label-width="100px" style="margin-top: 0px;"> |
||||
|
<el-row> |
||||
|
<el-col :span="24"> |
||||
|
<el-form-item label="单据号:"> |
||||
|
<el-input v-model="searchData.applyNo" style="width: 150px"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="单据类型:"> |
||||
|
<el-select v-model="searchData.orderType" style="width: 130px" clearable> |
||||
|
<el-option label="全部" value=""></el-option> |
||||
|
<el-option label="产品资料" value="产品资料"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="流程状态:"> |
||||
|
<el-select v-model="searchData.status" style="width: 130px" clearable> |
||||
|
<el-option label="全部" value=""></el-option> |
||||
|
<el-option label="运行中" value="RUNNING"></el-option> |
||||
|
<el-option label="已完成" value="COMPLETED"></el-option> |
||||
|
<el-option label="已终止" value="TERMINATED"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label=" "> |
||||
|
<el-button class="customer-bun-min" type="primary" @click="getInstanceList">查询</el-button> |
||||
|
<el-button type="primary" @click="openAddDialog">新增测试</el-button> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-form> |
||||
|
|
||||
|
<!-- 上表：流程实例列表 --> |
||||
|
<div style="font-weight: bold; margin-bottom: 5px;">流程实例列表</div> |
||||
|
<el-table |
||||
|
:height="height1" |
||||
|
:data="instanceList" |
||||
|
border |
||||
|
ref="instanceTable" |
||||
|
highlight-current-row |
||||
|
@row-click="selectInstance" |
||||
|
v-loading="instanceLoading" |
||||
|
style="width: 100%;"> |
||||
|
<el-table-column prop="applyNo" label="单据号" min-width="150" header-align="center" align="center"></el-table-column> |
||||
|
<el-table-column prop="orderType" label="单据类型" min-width="100" header-align="center" align="center"></el-table-column> |
||||
|
<el-table-column prop="flowName" label="流程名称" min-width="150" header-align="center" align="left"></el-table-column> |
||||
|
<el-table-column prop="currentNodeName" label="当前节点" min-width="120" header-align="center" align="center"></el-table-column> |
||||
|
<el-table-column prop="status" label="状态" min-width="80" header-align="center" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span :style="{ color: getStatusColor(scope.row.status) }">{{ getStatusText(scope.row.status) }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="startTime" label="开始时间" min-width="150" header-align="center" align="center"></el-table-column> |
||||
|
<el-table-column prop="applicant" label="申请人" min-width="100" header-align="center" align="center"></el-table-column> |
||||
|
<el-table-column fixed="right" header-align="center" align="center" width="100" label="操作"> |
||||
|
<template slot-scope="scope"> |
||||
|
<a type="text" v-if="scope.row.status === 'COMPLETED' || scope.row.status === 'TERMINATED'" size="small" @click="handleRestart(scope.row)">重新审批</a> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<el-pagination |
||||
|
style="margin-top: 5px" |
||||
|
@size-change="instanceSizeChange" |
||||
|
@current-change="instancePageChange" |
||||
|
:current-page="instancePageIndex" |
||||
|
:page-sizes="[20, 50, 100, 200]" |
||||
|
:page-size="instancePageSize" |
||||
|
:total="instanceTotal" |
||||
|
layout="total, sizes, prev, pager, next, jumper"> |
||||
|
</el-pagination> |
||||
|
|
||||
|
<!-- 下表：节点实例列表 --> |
||||
|
<div style="font-weight: bold; margin: 10px 0 5px 0;">节点审批记录</div> |
||||
|
<el-table |
||||
|
:height="height2" |
||||
|
:data="nodeInstanceList" |
||||
|
border |
||||
|
ref="nodeTable" |
||||
|
highlight-current-row |
||||
|
v-loading="nodeLoading" |
||||
|
style="width: 100%;"> |
||||
|
<el-table-column prop="nodeOrder" label="序号" width="60" header-align="center" align="center"></el-table-column> |
||||
|
<el-table-column prop="nodeName" label="节点名称" min-width="100" header-align="center" align="center"></el-table-column> |
||||
|
<el-table-column prop="departmentName" label="审批部门" min-width="100" header-align="center" align="center"> |
||||
|
<template slot-scope="scope">{{ scope.row.departmentName || '-' }}</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="assigneeName" label="审批人" min-width="80" header-align="center" align="center"></el-table-column> |
||||
|
<el-table-column prop="attemptNo" label="次数" width="60" header-align="center" align="center"></el-table-column> |
||||
|
<el-table-column prop="approveType" label="审批类型" min-width="100" header-align="center" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.approveType === 'SINGLE'">单人审批</span> |
||||
|
<span v-else-if="scope.row.approveType === 'ALL'">会签</span> |
||||
|
<span v-else-if="scope.row.approveType === 'ANY'">或签</span> |
||||
|
<span v-else>{{ scope.row.approveType }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="status" label="状态" min-width="80" header-align="center" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span :style="{ color: getNodeStatusColor(scope.row.status) }">{{ getNodeStatusText(scope.row.status) }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="comment" label="审批意见" min-width="150" header-align="center" align="left" show-overflow-tooltip></el-table-column> |
||||
|
<el-table-column prop="completeTime" label="完成时间" min-width="150" header-align="center" align="center"> |
||||
|
<template slot-scope="scope">{{ scope.row.completeTime || '-' }}</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column fixed="right" header-align="center" align="center" width="100" label="操作"> |
||||
|
<template slot-scope="scope"> |
||||
|
<a type="text" size="small" @click="openApproveDialog(scope.row)">审批</a> |
||||
|
<!-- <el-button v-if="scope.row.status === 'PENDING'" size="mini" type="text" @click="openApproveDialog(scope.row)">审批</el-button>--> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<!-- 新增测试对话框 - rqrq --> |
||||
|
<el-dialog |
||||
|
title="新增审批流程（测试）" |
||||
|
:visible.sync="addDialogVisible" |
||||
|
width="500px" |
||||
|
:close-on-click-modal="false" |
||||
|
v-drag> |
||||
|
<el-form :model="addFormData" :rules="addFormRules" ref="addFormRef" label-position="top"> |
||||
|
<el-form-item label="工厂编码" prop="site"> |
||||
|
<el-input v-model="addFormData.site" placeholder="请输入工厂编码"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="单据号" prop="applyNo"> |
||||
|
<el-input v-model="addFormData.applyNo" placeholder="请输入单据号"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="单据类型" prop="orderType"> |
||||
|
<el-select v-model="addFormData.orderType" style="width: 100%" placeholder="请选择单据类型"> |
||||
|
<el-option label="产品资料" value="产品资料"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="流程编码" prop="flowCode"> |
||||
|
<el-input v-model="addFormData.flowCode" placeholder="请输入流程编码"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<span slot="footer" class="dialog-footer"> |
||||
|
<el-button type="primary" @click="submitAddForm" :loading="addLoading">{{ addLoading ? '创建中...' : '创建' }}</el-button> |
||||
|
<el-button @click="addDialogVisible = false" :disabled="addLoading">取消</el-button> |
||||
|
</span> |
||||
|
</el-dialog> |
||||
|
|
||||
|
<!-- 审批对话框 - rqrq --> |
||||
|
<el-dialog |
||||
|
title="审批" |
||||
|
:visible.sync="approveDialogVisible" |
||||
|
width="550px" |
||||
|
:close-on-click-modal="false" |
||||
|
v-drag> |
||||
|
<el-form :model="approveData" label-position="top"> |
||||
|
<el-row :gutter="20"> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="单据号"> |
||||
|
<el-input v-model="approveData.applyNo" disabled></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="当前节点"> |
||||
|
<el-input v-model="approveData.nodeName" disabled></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row :gutter="20"> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="审批部门"> |
||||
|
<el-input v-model="approveData.departmentName" disabled></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="审批人"> |
||||
|
<el-input v-model="approveData.assigneeName" disabled></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-form-item label="审批意见"> |
||||
|
<el-input type="textarea" v-model="approveData.comment" :rows="3" placeholder="请输入审批意见"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<el-footer style="height:40px;margin-top: 60px;text-align:center"> |
||||
|
|
||||
|
<el-button type="success" @click="submitApprove('APPROVED')" :loading="approveLoading">同意</el-button> |
||||
|
<el-button type="danger" @click="submitApprove('REJECTED')" :loading="approveLoading">驳回</el-button> |
||||
|
<el-button type="info" @click="openFlowPreview">流程预览</el-button> |
||||
|
<el-button @click="approveDialogVisible = false" :disabled="approveLoading">取消</el-button> |
||||
|
|
||||
|
</el-footer> |
||||
|
</el-dialog> |
||||
|
|
||||
|
<!-- 流程预览对话框 - rqrq --> |
||||
|
<el-dialog |
||||
|
title="流程预览" |
||||
|
:visible.sync="previewDialogVisible" |
||||
|
width="700px" |
||||
|
:close-on-click-modal="false" |
||||
|
append-to-body |
||||
|
v-drag> |
||||
|
<div style="margin-bottom: 15px;"> |
||||
|
<span style="font-weight: bold;">流程名称：</span>{{ previewData.flowName }} |
||||
|
<span style="margin-left: 20px; font-weight: bold;">流程编码：</span>{{ previewData.flowCode }} |
||||
|
<span style="margin-left: 20px; font-weight: bold;">版本：</span>{{ previewData.flowVersion }} |
||||
|
</div> |
||||
|
<el-table :data="previewData.nodeList" border style="width: 100%;"> |
||||
|
<el-table-column prop="nodeOrder" label="顺序" width="60" header-align="center" align="center"> |
||||
|
<template slot-scope="scope">{{ scope.$index + 1 }}</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="nodeCode" label="节点编码" min-width="100" header-align="center" align="center"></el-table-column> |
||||
|
<el-table-column prop="nodeName" label="节点名称" min-width="120" header-align="center" align="center"></el-table-column> |
||||
|
<el-table-column prop="nodeType" label="节点类型" min-width="80" header-align="center" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.nodeType === 'START'" style="color: #67C23A">开始</span> |
||||
|
<span v-else-if="scope.row.nodeType === 'END'" style="color: #F56C6C">结束</span> |
||||
|
<span v-else style="color: #409EFF">审批</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="approveType" label="审批类型" min-width="100" header-align="center" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.approveType === 'SINGLE'">单人审批</span> |
||||
|
<span v-else-if="scope.row.approveType === 'ALL'">会签</span> |
||||
|
<span v-else-if="scope.row.approveType === 'ANY'">或签</span> |
||||
|
<span v-else>-</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="departmentName" label="审批部门" min-width="120" header-align="center" align="center"> |
||||
|
<template slot-scope="scope">{{ scope.row.departmentName || '-' }}</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="approverNames" label="审批人" min-width="150" header-align="center" align="left"> |
||||
|
<template slot-scope="scope">{{ scope.row.approverNames || '-' }}</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<span slot="footer" class="dialog-footer"> |
||||
|
<el-button type="primary" @click="previewDialogVisible = false">关闭</el-button> |
||||
|
</span> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { |
||||
|
searchInstanceList, |
||||
|
searchNodeInstanceList, |
||||
|
createFlowInstance, |
||||
|
approveNodeInstance, |
||||
|
getFlowPreview, |
||||
|
restartFlowInstance |
||||
|
} from '@/api/workFlow/workFlow.js' |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
height1: 200, |
||||
|
height2: 200, |
||||
|
// 流程实例 |
||||
|
instanceLoading: false, |
||||
|
instanceList: [], |
||||
|
instancePageIndex: 1, |
||||
|
instancePageSize: 20, |
||||
|
instanceTotal: 0, |
||||
|
currentInstance: null, |
||||
|
searchData: { |
||||
|
site: this.$store.state.user.site, |
||||
|
applyNo: '', |
||||
|
orderType: '', |
||||
|
status: '' |
||||
|
}, |
||||
|
// 节点实例 |
||||
|
nodeLoading: false, |
||||
|
nodeInstanceList: [], |
||||
|
// 当前登录用户 |
||||
|
currentUser: this.$store.state.user.username, |
||||
|
// 新增对话框 |
||||
|
addDialogVisible: false, |
||||
|
addLoading: false, |
||||
|
addFormData: { |
||||
|
site: this.$store.state.user.site, |
||||
|
applyNo: '', |
||||
|
orderType: '产品资料', |
||||
|
flowCode: '' |
||||
|
}, |
||||
|
addFormRules: { |
||||
|
site: [{ required: true, message: '请输入工厂编码', trigger: 'blur' }], |
||||
|
applyNo: [{ required: true, message: '请输入单据号', trigger: 'blur' }], |
||||
|
orderType: [{ required: true, message: '请选择单据类型', trigger: 'change' }], |
||||
|
flowCode: [{ required: true, message: '请输入流程编码', trigger: 'blur' }] |
||||
|
}, |
||||
|
// 审批对话框 |
||||
|
approveDialogVisible: false, |
||||
|
approveLoading: false, |
||||
|
approveData: { |
||||
|
applyNo: '', |
||||
|
nodeCode: '', |
||||
|
nodeName: '', |
||||
|
departmentName: '', // 审批部门 - rqrq |
||||
|
assigneeName: '', |
||||
|
site: '', |
||||
|
orderType: '', |
||||
|
comment: '', |
||||
|
flowCode: '', |
||||
|
flowVersion: null |
||||
|
}, |
||||
|
// 流程预览 |
||||
|
previewDialogVisible: false, |
||||
|
previewData: { |
||||
|
flowCode: '', |
||||
|
flowName: '', |
||||
|
flowVersion: '', |
||||
|
nodeList: [] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.height1 = (window.innerHeight - 250) / 2 |
||||
|
this.height2 = (window.innerHeight - 250) / 2 |
||||
|
}) |
||||
|
this.getInstanceList() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 获取流程实例列表 |
||||
|
getInstanceList() { |
||||
|
this.instanceLoading = true |
||||
|
const params = { |
||||
|
...this.searchData, |
||||
|
limit: this.instancePageSize, |
||||
|
page: this.instancePageIndex |
||||
|
} |
||||
|
searchInstanceList(params).then(({ data }) => { |
||||
|
if (data && data.code === 0) { |
||||
|
this.instanceList = data.page.list |
||||
|
this.instanceTotal = data.page.totalCount |
||||
|
} |
||||
|
this.instanceLoading = false |
||||
|
}) |
||||
|
}, |
||||
|
instanceSizeChange(val) { |
||||
|
this.instancePageSize = val |
||||
|
this.instancePageIndex = 1 |
||||
|
this.getInstanceList() |
||||
|
}, |
||||
|
instancePageChange(val) { |
||||
|
this.instancePageIndex = val |
||||
|
this.getInstanceList() |
||||
|
}, |
||||
|
// 选中流程实例 |
||||
|
selectInstance(row) { |
||||
|
this.currentInstance = row |
||||
|
this.getNodeInstanceList() |
||||
|
}, |
||||
|
// 获取节点实例列表 |
||||
|
getNodeInstanceList() { |
||||
|
if (!this.currentInstance) { |
||||
|
this.nodeInstanceList = [] |
||||
|
return |
||||
|
} |
||||
|
this.nodeLoading = true |
||||
|
searchNodeInstanceList({ |
||||
|
applyNo: this.currentInstance.applyNo, |
||||
|
site: this.currentInstance.site, |
||||
|
orderType: this.currentInstance.orderType |
||||
|
}).then(({ data }) => { |
||||
|
if (data && data.code === 0) { |
||||
|
this.nodeInstanceList = data.rows |
||||
|
} |
||||
|
this.nodeLoading = false |
||||
|
}) |
||||
|
}, |
||||
|
// 状态颜色 |
||||
|
getStatusColor(status) { |
||||
|
switch (status) { |
||||
|
case 'RUNNING': return '#409EFF' |
||||
|
case 'COMPLETED': return '#67C23A' |
||||
|
case 'TERMINATED': return '#F56C6C' |
||||
|
default: return '#909399' |
||||
|
} |
||||
|
}, |
||||
|
getStatusText(status) { |
||||
|
switch (status) { |
||||
|
case 'RUNNING': return '运行中' |
||||
|
case 'COMPLETED': return '已完成' |
||||
|
case 'TERMINATED': return '已终止' |
||||
|
default: return status |
||||
|
} |
||||
|
}, |
||||
|
getNodeStatusColor(status) { |
||||
|
switch (status) { |
||||
|
case 'PENDING': return '#E6A23C' |
||||
|
case 'APPROVED': return '#67C23A' |
||||
|
case 'REJECTED': return '#F56C6C' |
||||
|
case 'SKIPPED': return '#909399' |
||||
|
default: return '#909399' |
||||
|
} |
||||
|
}, |
||||
|
getNodeStatusText(status) { |
||||
|
switch (status) { |
||||
|
case 'PENDING': return '待审批' |
||||
|
case 'APPROVED': return '已通过' |
||||
|
case 'REJECTED': return '已驳回' |
||||
|
case 'SKIPPED': return '已跳过' |
||||
|
default: return status |
||||
|
} |
||||
|
}, |
||||
|
// 打开新增对话框 |
||||
|
openAddDialog() { |
||||
|
this.addFormData = { |
||||
|
site: this.$store.state.user.site, |
||||
|
applyNo: '', |
||||
|
orderType: '产品资料', |
||||
|
flowCode: '' |
||||
|
} |
||||
|
this.addDialogVisible = true |
||||
|
}, |
||||
|
// 提交新增 |
||||
|
submitAddForm() { |
||||
|
this.$refs.addFormRef.validate((valid) => { |
||||
|
if (valid) { |
||||
|
this.addLoading = true |
||||
|
createFlowInstance(this.addFormData).then(({ data }) => { |
||||
|
if (data && data.code === 0) { |
||||
|
this.$message.success('流程实例创建成功') |
||||
|
this.addDialogVisible = false |
||||
|
this.getInstanceList() |
||||
|
} else { |
||||
|
this.$message.error(data.msg || '创建失败') |
||||
|
} |
||||
|
}).finally(() => { |
||||
|
this.addLoading = false |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 打开审批对话框 |
||||
|
openApproveDialog(row) { |
||||
|
this.approveData = { |
||||
|
applyNo: this.currentInstance.applyNo, |
||||
|
nodeCode: row.nodeCode, |
||||
|
nodeName: row.nodeName, |
||||
|
departmentName: row.departmentName || '', // 审批部门 - rqrq |
||||
|
assigneeName: row.assigneeName, |
||||
|
site: this.currentInstance.site, |
||||
|
orderType: this.currentInstance.orderType, |
||||
|
comment: '', |
||||
|
flowCode: this.currentInstance.flowCode, |
||||
|
flowVersion: this.currentInstance.flowVersion |
||||
|
} |
||||
|
this.approveDialogVisible = true |
||||
|
}, |
||||
|
// 提交审批 |
||||
|
submitApprove(action) { |
||||
|
if (action === 'REJECTED' && !this.approveData.comment) { |
||||
|
this.$message.warning('驳回时必须填写审批意见') |
||||
|
return |
||||
|
} |
||||
|
this.approveLoading = true |
||||
|
approveNodeInstance({ |
||||
|
applyNo: this.approveData.applyNo, |
||||
|
nodeCode: this.approveData.nodeCode, |
||||
|
site: this.approveData.site, |
||||
|
orderType: this.approveData.orderType, |
||||
|
action: action, |
||||
|
comment: this.approveData.comment |
||||
|
}).then(({ data }) => { |
||||
|
if (data && data.code === 0) { |
||||
|
this.$message.success(action === 'APPROVED' ? '审批通过成功' : '驳回成功') |
||||
|
this.approveDialogVisible = false |
||||
|
this.getInstanceList() |
||||
|
this.getNodeInstanceList() |
||||
|
} else { |
||||
|
this.$message.error(data.msg || '操作失败') |
||||
|
} |
||||
|
}).finally(() => { |
||||
|
this.approveLoading = false |
||||
|
}) |
||||
|
}, |
||||
|
// 流程预览 |
||||
|
openFlowPreview() { |
||||
|
getFlowPreview({ |
||||
|
flowCode: this.approveData.flowCode, |
||||
|
flowVersion: this.approveData.flowVersion, |
||||
|
site: this.approveData.site |
||||
|
}).then(({ data }) => { |
||||
|
if (data && data.code === 0) { |
||||
|
this.previewData = data.row |
||||
|
this.previewDialogVisible = true |
||||
|
} else { |
||||
|
this.$message.error(data.msg || '获取流程信息失败') |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 重新审批 - rqrq |
||||
|
handleRestart(row) { |
||||
|
this.$confirm('确定要重新发起审批流程吗？', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
restartFlowInstance({ |
||||
|
applyNo: row.applyNo, |
||||
|
site: row.site, |
||||
|
orderType: row.orderType |
||||
|
}).then(({ data }) => { |
||||
|
if (data && data.code === 0) { |
||||
|
this.$message.success('重新审批成功') |
||||
|
this.getInstanceList() |
||||
|
this.nodeInstanceList = [] |
||||
|
this.currentInstance = null |
||||
|
} else { |
||||
|
this.$message.error(data.msg || '操作失败') |
||||
|
} |
||||
|
}) |
||||
|
}).catch(() => {}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
/deep/ .el-dialog__body { |
||||
|
padding: 10px 20px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,472 @@ |
|||||
|
<template> |
||||
|
<div class="customer-css"> |
||||
|
<!-- Tab切换 - rqrq --> |
||||
|
<el-tabs v-model="activeTab" @tab-click="handleTabClick" class="customer-tab" type="border-card"> |
||||
|
<!-- 待办任务 --> |
||||
|
<el-tab-pane label="待办任务" name="pending"> |
||||
|
<el-form :inline="true" label-position="top" label-width="100px" style="margin-top: 0px;"> |
||||
|
<el-row> |
||||
|
<el-col :span="24"> |
||||
|
<el-form-item label="单据号:"> |
||||
|
<el-input v-model="searchData.applyNo" style="width: 150px"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="单据类型:"> |
||||
|
<el-select v-model="searchData.orderType" style="width: 130px" clearable> |
||||
|
<el-option label="全部" value=""></el-option> |
||||
|
<el-option label="产品资料" value="产品资料"></el-option> |
||||
|
|
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label=" "> |
||||
|
<el-button class="customer-bun-min" type="primary" @click="getPendingList">查询</el-button> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-form> |
||||
|
|
||||
|
<el-table |
||||
|
:height="height" |
||||
|
:data="pendingList" |
||||
|
border |
||||
|
ref="pendingTable" |
||||
|
highlight-current-row |
||||
|
v-loading="pendingLoading" |
||||
|
style="margin-top: 0px; width: 100%;"> |
||||
|
<el-table-column prop="applyNo" label="单据号" min-width="150" header-align="center" align="center"></el-table-column> |
||||
|
<el-table-column prop="orderType" label="单据类型" min-width="100" header-align="center" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span >{{ scope.row.orderType }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="flowName" label="流程名称" min-width="150" header-align="center" align="left"></el-table-column> |
||||
|
<el-table-column prop="nodeName" label="当前节点" min-width="120" header-align="center" align="center"></el-table-column> |
||||
|
<el-table-column prop="approveType" label="审批类型" min-width="100" header-align="center" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.approveType === 'SINGLE'">单人审批</span> |
||||
|
<span v-else-if="scope.row.approveType === 'ALL'">会签</span> |
||||
|
<span v-else-if="scope.row.approveType === 'ANY'">或签</span> |
||||
|
<span v-else>{{ scope.row.approveType }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="assigneeName" label="审批人" min-width="100" header-align="center" align="center"></el-table-column> |
||||
|
<el-table-column prop="createdTime" label="接收时间" min-width="150" header-align="center" align="center"></el-table-column> |
||||
|
<el-table-column fixed="right" header-align="center" align="center" width="180" label="操作"> |
||||
|
<template slot-scope="scope"> |
||||
|
<!-- 只有当前用户是审批人才能操作 - rqrq --> |
||||
|
<template v-if="scope.row.assignee === currentUser"> |
||||
|
<el-link style="cursor: pointer; color: #67C23A" @click="approveTask(scope.row)">同意 |</el-link> |
||||
|
<el-link style="cursor: pointer; color: #F56C6C" @click="rejectTask(scope.row)">驳回 |</el-link> |
||||
|
</template> |
||||
|
<el-link style="cursor: pointer" @click="viewHistory(scope.row)">审批记录</el-link> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<el-pagination |
||||
|
style="margin-top: 0px" |
||||
|
@size-change="pendingSizeChange" |
||||
|
@current-change="pendingPageChange" |
||||
|
:current-page="pendingPageIndex" |
||||
|
:page-sizes="[20, 50, 100, 200]" |
||||
|
:page-size="pendingPageSize" |
||||
|
:total="pendingTotal" |
||||
|
layout="total, sizes, prev, pager, next, jumper"> |
||||
|
</el-pagination> |
||||
|
</el-tab-pane> |
||||
|
|
||||
|
<!-- 已办任务 --> |
||||
|
<el-tab-pane label="已办任务" name="completed"> |
||||
|
<el-form :inline="true" label-position="top" label-width="100px" style="margin-top: 0px;"> |
||||
|
<el-row> |
||||
|
<el-col :span="24"> |
||||
|
<el-form-item label="单据号:"> |
||||
|
<el-input v-model="completedSearchData.applyNo" style="width: 150px"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="单据类型:"> |
||||
|
<el-select v-model="completedSearchData.orderType" style="width: 130px" clearable> |
||||
|
<el-option label="全部" value=""></el-option> |
||||
|
<el-option label="产品资料" value="产品资料"></el-option> |
||||
|
|
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="审批结果:"> |
||||
|
<el-select v-model="completedSearchData.status" style="width: 130px" clearable> |
||||
|
<el-option label="全部" value=""></el-option> |
||||
|
<el-option label="已同意" value="APPROVED"></el-option> |
||||
|
<el-option label="已驳回" value="REJECTED"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label=" "> |
||||
|
<el-button class="customer-bun-min" type="primary" @click="getCompletedList">查询</el-button> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-form> |
||||
|
|
||||
|
<el-table |
||||
|
:height="height" |
||||
|
:data="completedList" |
||||
|
border |
||||
|
ref="completedTable" |
||||
|
highlight-current-row |
||||
|
v-loading="completedLoading" |
||||
|
style="margin-top: 0px; width: 100%;"> |
||||
|
<el-table-column prop="applyNo" label="单据号" min-width="150" header-align="center" align="center"></el-table-column> |
||||
|
<el-table-column prop="orderType" label="单据类型" min-width="100" header-align="center" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
|
||||
|
<span>{{ scope.row.orderType }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="flowName" label="流程名称" min-width="150" header-align="center" align="left"></el-table-column> |
||||
|
<el-table-column prop="nodeName" label="审批节点" min-width="120" header-align="center" align="center"></el-table-column> |
||||
|
<el-table-column prop="assigneeName" label="审批人" min-width="100" header-align="center" align="center"></el-table-column> |
||||
|
<el-table-column prop="statusDesc" label="审批结果" min-width="100" header-align="center" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span :style="{ color: scope.row.status === 'APPROVED' ? '#67C23A' : '#F56C6C' }"> |
||||
|
{{ scope.row.statusDesc }} |
||||
|
</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="comment" label="审批意见" min-width="180" header-align="center" align="left" show-overflow-tooltip></el-table-column> |
||||
|
<el-table-column prop="actionTime" label="审批时间" min-width="150" header-align="center" align="center"></el-table-column> |
||||
|
<el-table-column fixed="right" header-align="center" align="center" width="100" label="操作"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-link style="cursor: pointer" @click="viewHistory(scope.row)">审批记录</el-link> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<el-pagination |
||||
|
style="margin-top: 0px" |
||||
|
@size-change="completedSizeChange" |
||||
|
@current-change="completedPageChange" |
||||
|
:current-page="completedPageIndex" |
||||
|
:page-sizes="[20, 50, 100, 200]" |
||||
|
:page-size="completedPageSize" |
||||
|
:total="completedTotal" |
||||
|
layout="total, sizes, prev, pager, next, jumper"> |
||||
|
</el-pagination> |
||||
|
</el-tab-pane> |
||||
|
</el-tabs> |
||||
|
|
||||
|
<!-- 审批对话框 --> |
||||
|
<el-dialog |
||||
|
:title="approvalTitle" |
||||
|
:visible.sync="approvalDialogVisible" |
||||
|
width="500px" |
||||
|
:close-on-click-modal="false" |
||||
|
v-drag> |
||||
|
<el-form :model="approvalData" label-position="top"> |
||||
|
<el-form-item label="单据号"> |
||||
|
<el-input v-model="approvalData.applyNo" disabled></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="当前节点"> |
||||
|
<el-input v-model="approvalData.nodeName" disabled></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="审批意见" :required="approvalAction === 'reject'"> |
||||
|
<el-input type="textarea" v-model="approvalData.comment" :rows="3" placeholder="请输入审批意见"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<span slot="footer" class="dialog-footer"> |
||||
|
<el-button type="primary" @click="submitApproval" :loading="approvalLoading">{{ approvalLoading ? '提交中...' : '确定' }}</el-button> |
||||
|
<el-button type="info" @click="openFlowPreview">流程预览</el-button> |
||||
|
<el-button @click="approvalDialogVisible = false" :disabled="approvalLoading">取消</el-button> |
||||
|
</span> |
||||
|
</el-dialog> |
||||
|
|
||||
|
<!-- 流程预览对话框 - rqrq --> |
||||
|
<el-dialog |
||||
|
title="流程预览" |
||||
|
:visible.sync="previewDialogVisible" |
||||
|
width="700px" |
||||
|
:close-on-click-modal="false" |
||||
|
append-to-body |
||||
|
v-drag> |
||||
|
<div style="margin-bottom: 15px;"> |
||||
|
<span style="font-weight: bold;">流程名称：</span>{{ previewData.flowName }} |
||||
|
<span style="margin-left: 20px; font-weight: bold;">流程编码：</span>{{ previewData.flowCode }} |
||||
|
<span style="margin-left: 20px; font-weight: bold;">版本：</span>{{ previewData.flowVersion }} |
||||
|
</div> |
||||
|
<el-table :data="previewData.nodeList" border style="width: 100%;"> |
||||
|
<el-table-column prop="nodeOrder" label="顺序" width="60" header-align="center" align="center"> |
||||
|
<template slot-scope="scope">{{ scope.$index + 1 }}</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="nodeCode" label="节点编码" min-width="100" header-align="center" align="center"></el-table-column> |
||||
|
<el-table-column prop="nodeName" label="节点名称" min-width="120" header-align="center" align="center"></el-table-column> |
||||
|
<el-table-column prop="nodeType" label="节点类型" min-width="80" header-align="center" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.nodeType === 'START'" style="color: #67C23A">开始</span> |
||||
|
<span v-else-if="scope.row.nodeType === 'END'" style="color: #F56C6C">结束</span> |
||||
|
<span v-else style="color: #409EFF">审批</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="approveType" label="审批类型" min-width="100" header-align="center" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.approveType === 'SINGLE'">单人审批</span> |
||||
|
<span v-else-if="scope.row.approveType === 'ALL'">会签</span> |
||||
|
<span v-else-if="scope.row.approveType === 'ANY'">或签</span> |
||||
|
<span v-else>-</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="departmentName" label="审批部门" min-width="120" header-align="center" align="center"> |
||||
|
<template slot-scope="scope">{{ scope.row.departmentName || '-' }}</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="approverNames" label="审批人" min-width="150" header-align="center" align="left"> |
||||
|
<template slot-scope="scope">{{ scope.row.approverNames || '-' }}</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<span slot="footer" class="dialog-footer"> |
||||
|
<el-button type="primary" @click="previewDialogVisible = false">关闭</el-button> |
||||
|
</span> |
||||
|
</el-dialog> |
||||
|
|
||||
|
<!-- 审批记录对话框 --> |
||||
|
<el-dialog |
||||
|
title="审批记录" |
||||
|
:visible.sync="historyDialogVisible" |
||||
|
width="800px" |
||||
|
:close-on-click-modal="false" |
||||
|
v-drag> |
||||
|
<el-table :data="historyList" border style="width: 100%;"> |
||||
|
<el-table-column prop="nodeName" label="节点" min-width="100" header-align="center" align="center"></el-table-column> |
||||
|
<el-table-column prop="assigneeName" label="审批人" min-width="100" header-align="center" align="center"></el-table-column> |
||||
|
<el-table-column prop="statusDesc" label="结果" min-width="80" header-align="center" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span :style="{ color: scope.row.status === 'APPROVED' ? '#67C23A' : (scope.row.status === 'REJECTED' ? '#F56C6C' : '#909399') }"> |
||||
|
{{ scope.row.statusDesc }} |
||||
|
</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="comment" label="审批意见" min-width="180" header-align="center" align="left" show-overflow-tooltip></el-table-column> |
||||
|
<el-table-column prop="actionTime" label="审批时间" min-width="150" header-align="center" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
{{ scope.row.actionTime || '-' }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<span slot="footer" class="dialog-footer"> |
||||
|
<el-button type="primary" @click="historyDialogVisible = false">关闭</el-button> |
||||
|
</span> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { |
||||
|
searchPendingTaskList, |
||||
|
searchCompletedTaskList, |
||||
|
approveTask, |
||||
|
rejectTask, |
||||
|
getApprovalHistory, |
||||
|
getFlowPreview |
||||
|
} from '@/api/workFlow/workFlow.js' |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
height: 400, |
||||
|
activeTab: 'pending', |
||||
|
// 待办任务 |
||||
|
pendingLoading: false, |
||||
|
pendingList: [], |
||||
|
pendingPageIndex: 1, |
||||
|
pendingPageSize: 20, |
||||
|
pendingTotal: 0, |
||||
|
searchData: { |
||||
|
site: this.$store.state.user.site, |
||||
|
applyNo: '', |
||||
|
orderType: '' |
||||
|
}, |
||||
|
// 已办任务 |
||||
|
completedLoading: false, |
||||
|
completedList: [], |
||||
|
completedPageIndex: 1, |
||||
|
completedPageSize: 20, |
||||
|
completedTotal: 0, |
||||
|
completedSearchData: { |
||||
|
site: this.$store.state.user.site, |
||||
|
applyNo: '', |
||||
|
orderType: '', |
||||
|
status: '' |
||||
|
}, |
||||
|
// 审批对话框 |
||||
|
approvalDialogVisible: false, |
||||
|
approvalTitle: '审批', |
||||
|
approvalAction: '', |
||||
|
approvalLoading: false, |
||||
|
approvalData: { |
||||
|
id: null, |
||||
|
applyNo: '', |
||||
|
nodeName: '', |
||||
|
comment: '', |
||||
|
flowCode: '', |
||||
|
flowVersion: null, |
||||
|
site: '' |
||||
|
}, |
||||
|
// 审批记录 |
||||
|
historyDialogVisible: false, |
||||
|
historyList: [], |
||||
|
// 当前登录用户 - rqrq |
||||
|
currentUser: this.$store.state.user.username, |
||||
|
// 流程预览 - rqrq |
||||
|
previewDialogVisible: false, |
||||
|
previewData: { |
||||
|
flowCode: '', |
||||
|
flowName: '', |
||||
|
flowVersion: '', |
||||
|
nodeList: [] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.height = (window.innerHeight - 300) |
||||
|
} ) |
||||
|
this.getPendingList() |
||||
|
}, |
||||
|
methods: { |
||||
|
handleTabClick(tab) { |
||||
|
if (tab.name === 'pending') { |
||||
|
this.getPendingList() |
||||
|
} else { |
||||
|
this.getCompletedList() |
||||
|
} |
||||
|
}, |
||||
|
// 待办任务 |
||||
|
getPendingList() { |
||||
|
this.pendingLoading = true |
||||
|
const params = { |
||||
|
...this.searchData, |
||||
|
limit: this.pendingPageSize, |
||||
|
page: this.pendingPageIndex |
||||
|
} |
||||
|
searchPendingTaskList(params).then(({ data }) => { |
||||
|
if (data && data.code === 0) { |
||||
|
this.pendingList = data.page.list |
||||
|
this.pendingTotal = data.page.totalCount |
||||
|
} |
||||
|
this.pendingLoading = false |
||||
|
}) |
||||
|
}, |
||||
|
pendingSizeChange(val) { |
||||
|
this.pendingPageSize = val |
||||
|
this.pendingPageIndex = 1 |
||||
|
this.getPendingList() |
||||
|
}, |
||||
|
pendingPageChange(val) { |
||||
|
this.pendingPageIndex = val |
||||
|
this.getPendingList() |
||||
|
}, |
||||
|
// 已办任务 |
||||
|
getCompletedList() { |
||||
|
this.completedLoading = true |
||||
|
const params = { |
||||
|
...this.completedSearchData, |
||||
|
limit: this.completedPageSize, |
||||
|
page: this.completedPageIndex |
||||
|
} |
||||
|
searchCompletedTaskList(params).then(({ data }) => { |
||||
|
if (data && data.code === 0) { |
||||
|
this.completedList = data.page.list |
||||
|
this.completedTotal = data.page.totalCount |
||||
|
} |
||||
|
this.completedLoading = false |
||||
|
}) |
||||
|
}, |
||||
|
completedSizeChange(val) { |
||||
|
this.completedPageSize = val |
||||
|
this.completedPageIndex = 1 |
||||
|
this.getCompletedList() |
||||
|
}, |
||||
|
completedPageChange(val) { |
||||
|
this.completedPageIndex = val |
||||
|
this.getCompletedList() |
||||
|
}, |
||||
|
// 审批通过 |
||||
|
approveTask(row) { |
||||
|
this.approvalTitle = '审批通过' |
||||
|
this.approvalAction = 'approve' |
||||
|
this.approvalData = { |
||||
|
id: row.id, |
||||
|
applyNo: row.applyNo, |
||||
|
nodeName: row.nodeName, |
||||
|
comment: '', |
||||
|
flowCode: row.flowCode, |
||||
|
flowVersion: row.flowVersion, |
||||
|
site: row.site |
||||
|
} |
||||
|
this.approvalDialogVisible = true |
||||
|
}, |
||||
|
// 审批驳回 |
||||
|
rejectTask(row) { |
||||
|
this.approvalTitle = '审批驳回' |
||||
|
this.approvalAction = 'reject' |
||||
|
this.approvalData = { |
||||
|
id: row.id, |
||||
|
applyNo: row.applyNo, |
||||
|
nodeName: row.nodeName, |
||||
|
comment: '', |
||||
|
flowCode: row.flowCode, |
||||
|
flowVersion: row.flowVersion, |
||||
|
site: row.site |
||||
|
} |
||||
|
this.approvalDialogVisible = true |
||||
|
}, |
||||
|
// 提交审批 |
||||
|
submitApproval() { |
||||
|
if (this.approvalAction === 'reject' && !this.approvalData.comment) { |
||||
|
this.$message.warning('驳回时必须填写审批意见') |
||||
|
return |
||||
|
} |
||||
|
this.approvalLoading = true |
||||
|
const action = this.approvalAction === 'approve' ? approveTask : rejectTask |
||||
|
action(this.approvalData).then(({ data }) => { |
||||
|
if (data && data.code === 0) { |
||||
|
this.$message.success(this.approvalAction === 'approve' ? '审批通过成功' : '驳回成功') |
||||
|
this.approvalDialogVisible = false |
||||
|
this.getPendingList() |
||||
|
} else { |
||||
|
this.$message.error(data.msg || '操作失败') |
||||
|
} |
||||
|
}).finally(() => { |
||||
|
this.approvalLoading = false |
||||
|
}) |
||||
|
}, |
||||
|
// 查看审批记录 |
||||
|
viewHistory(row) { |
||||
|
getApprovalHistory({ |
||||
|
applyNo: row.applyNo, |
||||
|
site: row.site, |
||||
|
orderType: row.orderType |
||||
|
}).then(({ data }) => { |
||||
|
if (data && data.code === 0) { |
||||
|
this.historyList = data.rows |
||||
|
this.historyDialogVisible = true |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 流程预览 - rqrq |
||||
|
openFlowPreview() { |
||||
|
getFlowPreview({ |
||||
|
flowCode: this.approvalData.flowCode, |
||||
|
flowVersion: this.approvalData.flowVersion, |
||||
|
site: this.approvalData.site |
||||
|
}).then(({ data }) => { |
||||
|
if (data && data.code === 0) { |
||||
|
this.previewData = data.row |
||||
|
this.previewDialogVisible = true |
||||
|
} else { |
||||
|
this.$message.error(data.msg || '获取流程信息失败') |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
/deep/ .el-tabs__content { |
||||
|
padding: 10px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,572 @@ |
|||||
|
<template> |
||||
|
<div class="customer-css"> |
||||
|
<!-- 查询区域 - rqrq --> |
||||
|
<el-form :inline="true" label-position="top" label-width="100px" style="margin-top: 0px;"> |
||||
|
<el-row> |
||||
|
<el-col :span="24"> |
||||
|
<el-form-item label="流程编码:"> |
||||
|
<el-input v-model="searchData.flowCode" style="width: 130px"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="流程名称:"> |
||||
|
<el-input v-model="searchData.flowName" style="width: 130px"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="单据类型:"> |
||||
|
<el-select v-model="searchData.orderType" style="width: 130px" clearable> |
||||
|
<el-option label="全部" value=""></el-option> |
||||
|
<el-option label="产品资料" value="产品资料"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="状态:"> |
||||
|
<el-select v-model="searchData.status" style="width: 130px" clearable> |
||||
|
<el-option label="全部" value=""></el-option> |
||||
|
<el-option label="启用" value="ACTIVE"></el-option> |
||||
|
<el-option label="停用" value="INACTIVE"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label=" "> |
||||
|
<el-button class="customer-bun-min" type="primary" @click="getMainData">查询</el-button> |
||||
|
<el-button type="primary" @click="addTemplate">新增</el-button> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-form> |
||||
|
|
||||
|
<!-- 列表区域 --> |
||||
|
<el-table |
||||
|
:height="height" |
||||
|
:data="mainDataList" |
||||
|
border |
||||
|
ref="mainTable" |
||||
|
highlight-current-row |
||||
|
@row-click="changeData" |
||||
|
v-loading="dataListLoading" |
||||
|
style="margin-top: 0px; width: 100%;"> |
||||
|
<el-table-column prop="flowCode" label="流程编码" min-width="120" header-align="center" align="center"></el-table-column> |
||||
|
<el-table-column prop="flowVersion" label="版本" min-width="80" header-align="center" align="center"></el-table-column> |
||||
|
<el-table-column prop="flowName" label="流程名称" min-width="180" header-align="center" align="left"></el-table-column> |
||||
|
<el-table-column prop="orderType" label="单据类型" min-width="100" header-align="center" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span >{{ scope.row.orderType }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="status" label="状态" min-width="80" header-align="center" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span :style="{ color: scope.row.status === 'ACTIVE' ? '#67C23A' : '#F56C6C' }"> |
||||
|
{{ scope.row.status === 'ACTIVE' ? '启用' : '停用' }} |
||||
|
</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="createdBy" label="创建人" min-width="100" header-align="center" align="center"></el-table-column> |
||||
|
<el-table-column prop="createdDate" label="创建时间" min-width="150" header-align="center" align="center"></el-table-column> |
||||
|
<el-table-column fixed="right" header-align="center" align="center" width="200" label="操作"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-link style="cursor: pointer" @click="editTemplate(scope.row)">编辑 |</el-link> |
||||
|
<el-link style="cursor: pointer" @click="copyTemplate(scope.row)">复制 |</el-link> |
||||
|
<el-link style="cursor: pointer" @click="toggleStatus(scope.row)"> |
||||
|
{{ scope.row.status === 'ACTIVE' ? '停用' : '启用' }} | |
||||
|
</el-link> |
||||
|
<el-link style="cursor: pointer; color: #F56C6C" @click="deleteTemplate(scope.row)">删除</el-link> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<!-- 分页 --> |
||||
|
<el-pagination |
||||
|
style="margin-top: 0px" |
||||
|
@size-change="sizeChangeHandle" |
||||
|
@current-change="currentChangeHandle" |
||||
|
:current-page="pageIndex" |
||||
|
:page-sizes="[20, 50, 100, 200]" |
||||
|
:page-size="pageSize" |
||||
|
:total="totalPage" |
||||
|
layout="total, sizes, prev, pager, next, jumper"> |
||||
|
</el-pagination> |
||||
|
|
||||
|
<!-- 编辑对话框 --> |
||||
|
<div class="rq "> |
||||
|
<el-dialog |
||||
|
:title="isAdd ? '新增审批流程' : '编辑审批流程'" |
||||
|
:visible.sync="dialogVisible" |
||||
|
width="900px" |
||||
|
top="3vh" |
||||
|
:close-on-click-modal="false" |
||||
|
v-drag> |
||||
|
<el-form :model="formData" :rules="formRules" ref="formRef" label-position="top"> |
||||
|
<el-row :gutter="20"> |
||||
|
<el-col :span="8"> |
||||
|
<el-form-item label="流程编码" prop="flowCode"> |
||||
|
<el-input v-model="formData.flowCode" :disabled="!isAdd" style="width: 100%"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="8"> |
||||
|
<el-form-item label="流程名称" prop="flowName"> |
||||
|
<el-input v-model="formData.flowName" style="width: 100%"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="8"> |
||||
|
<el-form-item label="单据类型" prop="orderType"> |
||||
|
<el-select v-model="formData.orderType" style="width: 100%"> |
||||
|
<el-option label="产品资料" value="产品资料"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row :gutter="20"> |
||||
|
<el-col :span="16"> |
||||
|
<el-form-item label="描述"> |
||||
|
<el-input v-model="formData.description" style="width: 100%"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="8"> |
||||
|
<el-form-item label="状态"> |
||||
|
<el-select v-model="formData.status" style="width: 100%"> |
||||
|
<el-option label="启用" value="ACTIVE"></el-option> |
||||
|
<el-option label="停用" value="INACTIVE"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
<!-- 节点配置 --> |
||||
|
<div style="margin-top: 10px;"> |
||||
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;"> |
||||
|
<span style="font-weight: bold;">审批节点配置</span> |
||||
|
<el-button size="mini" type="primary" @click="addNode">添加节点</el-button> |
||||
|
</div> |
||||
|
<el-table :data="formData.nodeList" border style="width: 100%;" max-height="300"> |
||||
|
<el-table-column prop="nodeOrder" label="顺序" width="60" header-align="center" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
{{ scope.$index + 1 }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="nodeCode" label="节点编码" min-width="100" header-align="center" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<!-- 开始和结束节点不可编辑 - rqrq --> |
||||
|
<el-input v-model="scope.row.nodeCode" size="mini" |
||||
|
:disabled="scope.row.nodeType === 'START' || scope.row.nodeType === 'END'"></el-input> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="nodeName" label="节点名称" min-width="120" header-align="center" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<!-- 开始和结束节点不可编辑 - rqrq --> |
||||
|
<el-input v-model="scope.row.nodeName" size="mini" |
||||
|
:disabled="scope.row.nodeType === 'START' || scope.row.nodeType === 'END'"></el-input> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="nodeType" label="节点类型" width="100" header-align="center" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<!-- 节点类型只显示不可选 - rqrq --> |
||||
|
<span v-if="scope.row.nodeType === 'START'" style="color: #67C23A">开始</span> |
||||
|
<span v-else-if="scope.row.nodeType === 'END'" style="color: #F56C6C">结束</span> |
||||
|
<span v-else style="color: #409EFF">审批</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="approveType" label="审批类型" width="130" header-align="center" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-select v-model="scope.row.approveType" size="mini" style="width: 100%" |
||||
|
:disabled="scope.row.nodeType !== 'APPROVE'" |
||||
|
@change="handleApproveTypeChange(scope.$index, scope.row)"> |
||||
|
<el-option label="单人审批" value="SINGLE"></el-option> |
||||
|
<el-option label="会签" value="ALL"></el-option> |
||||
|
<el-option label="或签" value="ANY"></el-option> |
||||
|
</el-select> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="departmentId" label="审批部门" min-width="150" header-align="center" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-select v-model="scope.row.departmentId" size="mini" style="width: 100%" |
||||
|
:disabled="scope.row.nodeType !== 'APPROVE'" clearable placeholder="选择部门" |
||||
|
@change="handleNodeDeptChange(scope.$index, scope.row)"> |
||||
|
<el-option v-for="dept in nodeDepartmentList" :key="dept.departmentId" |
||||
|
:label="dept.departmentName" :value="dept.departmentId"></el-option> |
||||
|
</el-select> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="approverNames" label="审批人" min-width="150" header-align="center" align="left"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div style="display: flex; align-items: center;"> |
||||
|
<span style="flex: 1;">{{ scope.row.approverNames || '未配置' }}</span> |
||||
|
<el-button size="mini" type="text" @click="selectApprover(scope.$index)" |
||||
|
:disabled="scope.row.nodeType !== 'APPROVE'">选择</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="操作" width="80" header-align="center" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<!-- 开始和结束节点不可删除 - rqrq --> |
||||
|
<el-button size="mini" type="text" style="color: #F56C6C" |
||||
|
@click="removeNode(scope.$index)" |
||||
|
:disabled="scope.row.nodeType === 'START' || scope.row.nodeType === 'END'">删除</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
</el-form> |
||||
|
<span slot="footer" class="dialog-footer"> |
||||
|
<el-button type="primary" @click="saveData" :loading="saveLoading">{{ saveLoading ? '保存中...' : '保存' }}</el-button> |
||||
|
<el-button @click="dialogVisible = false" :disabled="saveLoading">取消</el-button> |
||||
|
</span> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
<!-- 选择审批人对话框 - rqrq --> |
||||
|
<el-dialog :title="isSingleApprove ? '选择审批人（单选）' : '选择审批人（可多选）'" |
||||
|
:visible.sync="approverDialogVisible" width="600px" :close-on-click-modal="false" append-to-body v-drag> |
||||
|
<el-form :inline="true" size="mini"> |
||||
|
<el-form-item label="关键字:"> |
||||
|
<el-input v-model="approverSearchKey" style="width: 200px" placeholder="输入用户名或姓名"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button type="primary" @click="searchApprover">查询</el-button> |
||||
|
</el-form-item> |
||||
|
<el-form-item v-if="isSingleApprove"> |
||||
|
<span style="color: #E6A23C; font-size: 12px;">（单人审批模式，只能选择一人）</span> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<el-table |
||||
|
ref="approverTable" |
||||
|
:data="approverList" |
||||
|
border |
||||
|
height="300" |
||||
|
@selection-change="handleApproverSelection" |
||||
|
@select="handleApproverSelect" |
||||
|
@select-all="handleSelectAll"> |
||||
|
<el-table-column type="selection" width="55"></el-table-column> |
||||
|
<el-table-column prop="approverUsername" label="用户名" min-width="120"></el-table-column> |
||||
|
<el-table-column prop="approverName" label="姓名" min-width="120"></el-table-column> |
||||
|
</el-table> |
||||
|
<span slot="footer" class="dialog-footer"> |
||||
|
<el-button type="primary" @click="confirmApprover">确定</el-button> |
||||
|
<el-button @click="approverDialogVisible = false">取消</el-button> |
||||
|
</span> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { |
||||
|
searchTemplateList, |
||||
|
getTemplateDetail, |
||||
|
saveTemplate, |
||||
|
deleteTemplate, |
||||
|
enableTemplate, |
||||
|
disableTemplate, |
||||
|
copyTemplate, |
||||
|
searchUserList, |
||||
|
searchDepartmentList |
||||
|
} from '@/api/workFlow/workFlow.js' |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
height: 300, |
||||
|
dataListLoading: false, |
||||
|
saveLoading: false, |
||||
|
pageIndex: 1, |
||||
|
pageSize: 20, |
||||
|
totalPage: 0, |
||||
|
mainDataList: [], |
||||
|
currentRow: null, |
||||
|
searchData: { |
||||
|
site: this.$store.state.user.site, |
||||
|
flowCode: '', |
||||
|
flowName: '', |
||||
|
orderType: '', |
||||
|
status: '' |
||||
|
}, |
||||
|
dialogVisible: false, |
||||
|
isAdd: true, |
||||
|
formData: { |
||||
|
id: null, |
||||
|
flowCode: '', |
||||
|
flowName: '', |
||||
|
orderType: '产品资料', |
||||
|
status: 'ACTIVE', |
||||
|
description: '', |
||||
|
site: this.$store.state.user.site, |
||||
|
nodeList: [] |
||||
|
}, |
||||
|
formRules: { |
||||
|
flowCode: [{ required: true, message: '请输入流程编码', trigger: 'blur' }], |
||||
|
flowName: [{ required: true, message: '请输入流程名称', trigger: 'blur' }], |
||||
|
orderType: [{ required: true, message: '请选择单据类型', trigger: 'change' }] |
||||
|
}, |
||||
|
approverDialogVisible: false, |
||||
|
approverSearchKey: '', |
||||
|
approverDeptId: '', // 部门筛选 - rqrq |
||||
|
departmentList: [], // 部门列表 - rqrq |
||||
|
nodeDepartmentList: [], // 节点配置用的部门列表 - rqrq |
||||
|
approverList: [], |
||||
|
selectedApprovers: [], |
||||
|
currentNodeIndex: -1, |
||||
|
isSingleApprove: false // 当前节点是否为单人审批 - rqrq |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.height = (window.innerHeight - 250) |
||||
|
} ) |
||||
|
this.getMainData() |
||||
|
}, |
||||
|
methods: { |
||||
|
getMainData() { |
||||
|
this.dataListLoading = true |
||||
|
this.searchData.limit = this.pageSize |
||||
|
this.searchData.page = this.pageIndex |
||||
|
searchTemplateList(this.searchData).then(({ data }) => { |
||||
|
if (data && data.code === 0) { |
||||
|
this.mainDataList = data.page.list |
||||
|
this.totalPage = data.page.totalCount |
||||
|
} |
||||
|
this.dataListLoading = false |
||||
|
}) |
||||
|
}, |
||||
|
changeData(row) { |
||||
|
this.currentRow = row |
||||
|
}, |
||||
|
sizeChangeHandle(val) { |
||||
|
this.pageSize = val |
||||
|
this.pageIndex = 1 |
||||
|
this.getMainData() |
||||
|
}, |
||||
|
currentChangeHandle(val) { |
||||
|
this.pageIndex = val |
||||
|
this.getMainData() |
||||
|
}, |
||||
|
addTemplate() { |
||||
|
this.isAdd = true |
||||
|
this.formData = { |
||||
|
id: null, |
||||
|
flowCode: '', |
||||
|
flowName: '', |
||||
|
orderType: '产品资料', |
||||
|
status: 'ACTIVE', |
||||
|
description: '', |
||||
|
site: this.$store.state.user.site, |
||||
|
nodeList: [ |
||||
|
{ nodeCode: 'START', nodeName: '开始', nodeType: 'START', nodeOrder: 0, approveType: '', departmentId: '', departmentName: '', approverList: [], approverNames: '' }, |
||||
|
{ nodeCode: 'APPROVE_1', nodeName: '审批', nodeType: 'APPROVE', nodeOrder: 1, approveType: 'SINGLE', departmentId: '', departmentName: '', approverList: [], approverNames: '' }, |
||||
|
{ nodeCode: 'END', nodeName: '结束', nodeType: 'END', nodeOrder: 99, approveType: '', departmentId: '', departmentName: '', approverList: [], approverNames: '' } |
||||
|
] |
||||
|
} |
||||
|
// 加载部门列表 - rqrq |
||||
|
this.loadNodeDepartmentList() |
||||
|
this.dialogVisible = true |
||||
|
}, |
||||
|
editTemplate(row) { |
||||
|
this.isAdd = false |
||||
|
// 先加载部门列表 - rqrq |
||||
|
this.loadNodeDepartmentList() |
||||
|
getTemplateDetail({ id: row.id }).then(({ data }) => { |
||||
|
if (data && data.code === 0) { |
||||
|
this.formData = data.row |
||||
|
// 确保每个节点有 departmentId 和 departmentName 字段 - rqrq |
||||
|
if (this.formData.nodeList) { |
||||
|
this.formData.nodeList.forEach(node => { |
||||
|
// 确保字段存在，避免 v-model 绑定问题 |
||||
|
if (node.departmentId === undefined || node.departmentId === null) { |
||||
|
node.departmentId = '' |
||||
|
} |
||||
|
if (node.departmentName === undefined || node.departmentName === null) { |
||||
|
node.departmentName = '' |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
this.dialogVisible = true |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
copyTemplate(row) { |
||||
|
this.$confirm('确定复制此流程模板吗？将创建新版本。', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
copyTemplate({ id: row.id }).then(({ data }) => { |
||||
|
if (data && data.code === 0) { |
||||
|
this.$message.success('复制成功') |
||||
|
this.getMainData() |
||||
|
} else { |
||||
|
this.$message.error(data.msg || '复制失败') |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
}, |
||||
|
toggleStatus(row) { |
||||
|
const action = row.status === 'ACTIVE' ? disableTemplate : enableTemplate |
||||
|
const tip = row.status === 'ACTIVE' ? '停用' : '启用' |
||||
|
this.$confirm(`确定${tip}此流程模板吗？`, '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
action({ id: row.id }).then(({ data }) => { |
||||
|
if (data && data.code === 0) { |
||||
|
this.$message.success(`${tip}成功`) |
||||
|
this.getMainData() |
||||
|
} else { |
||||
|
this.$message.error(data.msg || `${tip}失败`) |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
}, |
||||
|
deleteTemplate(row) { |
||||
|
this.$confirm('确定删除此流程模板吗？', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
deleteTemplate({ id: row.id }).then(({ data }) => { |
||||
|
if (data && data.code === 0) { |
||||
|
this.$message.success('删除成功') |
||||
|
this.getMainData() |
||||
|
} else { |
||||
|
this.$message.error(data.msg || '删除失败') |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
}, |
||||
|
addNode() { |
||||
|
const lastIndex = this.formData.nodeList.length - 1 |
||||
|
const newNode = { |
||||
|
nodeCode: `APPROVE_${this.formData.nodeList.length}`, |
||||
|
nodeName: '审批节点', |
||||
|
nodeType: 'APPROVE', |
||||
|
nodeOrder: lastIndex, |
||||
|
approveType: 'SINGLE', |
||||
|
departmentId: '', // 部门ID - rqrq |
||||
|
departmentName: '', // 部门名称 - rqrq |
||||
|
approverList: [], |
||||
|
approverNames: '' |
||||
|
} |
||||
|
this.formData.nodeList.splice(lastIndex, 0, newNode) |
||||
|
}, |
||||
|
removeNode(index) { |
||||
|
if (this.formData.nodeList[index].nodeType === 'START' || this.formData.nodeList[index].nodeType === 'END') { |
||||
|
this.$message.warning('开始和结束节点不能删除') |
||||
|
return |
||||
|
} |
||||
|
this.formData.nodeList.splice(index, 1) |
||||
|
}, |
||||
|
selectApprover(index) { |
||||
|
this.currentNodeIndex = index |
||||
|
this.approverSearchKey = '' |
||||
|
this.approverList = [] |
||||
|
this.selectedApprovers = this.formData.nodeList[index].approverList || [] |
||||
|
// 判断是否为单人审批 - rqrq |
||||
|
this.isSingleApprove = this.formData.nodeList[index].approveType === 'SINGLE' |
||||
|
this.approverDialogVisible = true |
||||
|
this.searchApprover() |
||||
|
}, |
||||
|
// 加载节点配置用的部门列表 - rqrq |
||||
|
loadNodeDepartmentList() { |
||||
|
searchDepartmentList({ site: this.searchData.site }).then(({ data }) => { |
||||
|
if (data && data.code === 0) { |
||||
|
this.nodeDepartmentList = data.rows |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 节点部门变更处理 - rqrq |
||||
|
handleNodeDeptChange(index, row) { |
||||
|
// 找到选中的部门名称 |
||||
|
const dept = this.nodeDepartmentList.find(d => d.departmentId === row.departmentId) |
||||
|
row.departmentName = dept ? dept.departmentName : '' |
||||
|
}, |
||||
|
searchApprover() { |
||||
|
searchUserList({ |
||||
|
approverUsername: this.approverSearchKey, |
||||
|
realName: this.searchData.site |
||||
|
}).then(({ data }) => { |
||||
|
if (data && data.code === 0) { |
||||
|
this.approverList = data.rows |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
handleApproverSelection(selection) { |
||||
|
this.selectedApprovers = selection |
||||
|
}, |
||||
|
// 单人审批时限制只能选一个 - rqrq |
||||
|
handleApproverSelect(selection, row) { |
||||
|
if (this.isSingleApprove && selection.length > 1) { |
||||
|
// 单人审批模式，只保留最后选择的一个 |
||||
|
this.$refs.approverTable.clearSelection() |
||||
|
this.$refs.approverTable.toggleRowSelection(row, true) |
||||
|
this.selectedApprovers = [row] |
||||
|
} |
||||
|
}, |
||||
|
// 单人审批时禁止全选 - rqrq |
||||
|
handleSelectAll(selection) { |
||||
|
if (this.isSingleApprove && selection.length > 1) { |
||||
|
this.$message.warning('单人审批模式只能选择一个审批人') |
||||
|
this.$refs.approverTable.clearSelection() |
||||
|
this.selectedApprovers = [] |
||||
|
} |
||||
|
}, |
||||
|
// 审批类型变更时清空审批人（如果从多人改为单人且已有多人） - rqrq |
||||
|
handleApproveTypeChange(index, row) { |
||||
|
if (row.approveType === 'SINGLE' && row.approverList && row.approverList.length > 1) { |
||||
|
row.approverList = [] |
||||
|
row.approverNames = '' |
||||
|
this.$message.warning('单人审批只能配置一个审批人，已清空审批人配置，请重新选择') |
||||
|
} |
||||
|
}, |
||||
|
confirmApprover() { |
||||
|
// 单人审批校验 - rqrq |
||||
|
if (this.isSingleApprove && this.selectedApprovers.length > 1) { |
||||
|
this.$message.warning('单人审批模式只能选择一个审批人') |
||||
|
return |
||||
|
} |
||||
|
if (this.currentNodeIndex >= 0) { |
||||
|
const node = this.formData.nodeList[this.currentNodeIndex] |
||||
|
// 审批人信息（部门信息保存在节点上，不在审批人上）- rqrq |
||||
|
node.approverList = this.selectedApprovers.map(item => ({ |
||||
|
approverUsername: item.approverUsername, |
||||
|
approverName: item.approverName |
||||
|
})) |
||||
|
node.approverNames = this.selectedApprovers.map(item => item.approverName).join(', ') |
||||
|
} |
||||
|
this.approverDialogVisible = false |
||||
|
}, |
||||
|
saveData() { |
||||
|
this.$refs.formRef.validate((valid) => { |
||||
|
if (valid) { |
||||
|
// 验证节点配置 - rqrq |
||||
|
const approveNodes = this.formData.nodeList.filter(n => n.nodeType === 'APPROVE') |
||||
|
for (const node of approveNodes) { |
||||
|
if (!node.approverList || node.approverList.length === 0) { |
||||
|
this.$message.warning(`节点"${node.nodeName}"未配置审批人`) |
||||
|
return |
||||
|
} |
||||
|
// 校验单人审批不能有多个审批人 - rqrq |
||||
|
if (node.approveType === 'SINGLE' && node.approverList.length > 1) { |
||||
|
this.$message.warning(`节点"${node.nodeName}"为单人审批，只能配置一个审批人`) |
||||
|
return |
||||
|
} |
||||
|
} |
||||
|
// 更新节点顺序 |
||||
|
this.formData.nodeList.forEach((node, index) => { |
||||
|
node.nodeOrder = index |
||||
|
}) |
||||
|
this.saveLoading = true |
||||
|
saveTemplate(this.formData).then(({ data }) => { |
||||
|
if (data && data.code === 0) { |
||||
|
this.$message.success('保存成功') |
||||
|
this.dialogVisible = false |
||||
|
this.getMainData() |
||||
|
} else { |
||||
|
this.$message.error(data.msg || '保存失败') |
||||
|
} |
||||
|
}).finally(() => { |
||||
|
this.saveLoading = false |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
/deep/ .el-dialog__body { |
||||
|
padding: 10px 20px; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue