wilson
/
krd-srm-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'master' of http://192.168.1.89:3000/wilson/krd-srm-vue

master
yanyan 4 weeks ago
parent
98ef60cf1d f28b40e2a1
commit
6f9c4d2cfe
5 changed files with 1648 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 79
      src/api/workFlow/workFlow.js
  2. 2
      src/views/modules/srmSupplier/supplierList.vue
  3. 524
      src/views/modules/workFlow/flowInstanceList.vue
  4. 472
      src/views/modules/workFlow/flowTaskList.vue
  5. 572
      src/views/modules/workFlow/flowTemplateList.vue

79
src/api/workFlow/workFlow.js
View File

@ -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)

2
src/views/modules/srmSupplier/supplierList.vue
View File

@ -1107,7 +1107,7 @@ export default {
this.$nextTick(() => {
let strVal = ''
if (val === 1100) {
strVal = this.searchData.supplierNo
strVal = this.searchData.supplierNo?this.searchData.supplierNo:''
}
if (this.tagNo === 521) {
strVal = this.currentSupplier.supplierGroup1

524
src/views/modules/workFlow/flowInstanceList.vue
View File

@ -0,0 +1,524 @@
<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-input v-model="searchData.orderRef1" 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="orderRef1" 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="orderRef1">
<el-input v-model="addFormData.orderRef1" 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: '',
orderRef1: '',
orderType: '',
status: ''
},
// 节点实例
nodeLoading: false,
nodeInstanceList: [],
// 当前登录用户
currentUser: this.$store.state.user.username,
// 新增对话框
addDialogVisible: false,
addLoading: false,
addFormData: {
site: this.$store.state.user.site,
orderRef1: '',
orderType: '产品资料',
flowCode: ''
},
addFormRules: {
site: [{ required: true, message: '请输入工厂编码', trigger: 'blur' }],
orderRef1: [{ 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,
orderRef1: '',
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>

472
src/views/modules/workFlow/flowTaskList.vue
View File

@ -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>

572
src/views/modules/workFlow/flowTemplateList.vue
View File

@ -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