任务管理

flowable-front/src/components/views/myCompanyTask.vue

@@ -0,0 +1,228 @@
+<template>
+	<div style = "margin: 50px 24px;">
+		<el-form ref="form" label-width="80px" :inline="true" size = "mini">
+			<el-form-item label="任务名称">
+				<el-input v-model="excutionName" clearable placeholder="请输入"></el-input>
+			</el-form-item>
+			<el-form-item label="流程名称">
+				<el-input v-model="processDefName" clearable placeholder="请输入"></el-input>
+			</el-form-item>
+			<el-form-item>
+				<el-button type="cyan" icon="el-icon-search" size="mini" @click="getMyCompanyTask(1)">搜索</el-button>
+				<el-button icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
+			</el-form-item>
+		</el-form>
+		<el-table
+			:data="tableData"
+			stripe
+			border
+			style="width: 100%">
+			<el-table-column
+				type="index"
+				align = "center"
+				width="50">
+			</el-table-column>
+			<el-table-column
+			prop="name"
+			label="任务名称"
+			:show-overflow-tooltip = true
+			align = "center">
+			</el-table-column>
+			<el-table-column
+			prop="processDefinitionName"
+			show-overflow-tooltip
+			align = "center"
+			label="流程名称">
+			</el-table-column>
+			<el-table-column
+			align = "center"
+			show-overflow-tooltip
+			label="流程状态">
+				<template slot-scope="scope">
+					<span>{{(scope.row.deleteReason != null?'审批拒绝':(scope.row.endTime == null?'审批中':'审批完成'))}}</span>
+				</template>
+			</el-table-column>
+			<el-table-column
+			align = "center"
+			show-overflow-tooltip
+			label="拒绝原因">
+				<template slot-scope="scope">
+					<span>{{(scope.row.deleteReason == null?'':scope.row.deleteReason)}}</span>
+				</template>
+			</el-table-column>
+			<el-table-column
+			align = "center"
+			:show-overflow-tooltip = true
+			label="创建日期">
+					<template slot-scope="scope">
+			          <span>{{ parseTime(new Date(scope.row.startTime), '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+			        </template>
+			</el-table-column>
+			<el-table-column
+			  label="操作"
+			  align = "center"
+			  width="200">
+				<template slot-scope="scope">
+					<el-button @click="deleteDialog(scope.row)" type="text" size="small" v-if="scope.row.deleteReason == null && scope.row.endTime == null">撤回</el-button>
+					<el-button @click="showHisTaskForm(scope.row)" type="text" size="small">流程进度</el-button>
+				</template>
+			</el-table-column>
+		</el-table>
+		
+		<el-pagination
+		  v-show="total != 0"
+		  background
+		  layout="prev, pager, next"
+		  :total="total" 
+		  :current-page="pageNum"
+		  :page-size = "pageSize"
+		  @current-change="getMyCompanyTask">
+		</el-pagination>
+		
+		<!-- 终止原因弹窗 -->
+		<el-dialog title="撤回流程" :visible.sync="dialogFormVisible"
+		    v-loading="tableloading">
+		  <el-form>
+			<el-form-item label="撤回原因">
+			  <el-input v-model="reason" autocomplete="off" type= "textarea" :rows= "6" maxlength="200" ></el-input>
+			</el-form-item>
+		  </el-form>
+		  <div slot="footer" class="dialog-footer">
+			<el-button @click="dialogFormVisible = false">取 消</el-button>
+			<el-button type="primary" @click="deleteProcess()">确 定</el-button>
+		  </div>
+		</el-dialog>
+		
+		<el-dialog title="流程进度" :visible.sync="hisTaskForm">
+			<div>
+				<el-steps direction="vertical" :active="histaskList[histaskList.length-1] && histaskList[histaskList.length-1].activityType == 'endEvent' ? histaskList.length : histaskList.length-1" finish-status="success" space = "60px">
+					<el-step :title="item.name" v-for="item in histaskList">
+						<template slot="description">
+								<span v-if="item.activityType == 'userTask'">办理人:  {{item.displayName}}</span>  节点名称:  {{item.activityName}}   任务接收时间  {{item.startTime}}     任务办结时间  {{item.endTime}}
+								<div v-if="item.deleteReason != null" class="text item">
+									{{'拒绝原因: ' + item.deleteReason }}
+								</div>
+								<div v-else v-for="comment in item.commentList" class="text item">
+									{{'审批意见: ' + comment.message }}
+								</div>
+						</template>
+					</el-step>
+				</el-steps>
+				<el-image :src="processImgUrl">
+				</el-image>
+			</div>
+			<div slot="footer" class="dialog-footer">
+				<el-button @click="hisTaskForm = false">关 闭</el-button>
+			</div>
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+export default {
+	data() {
+	  return {
+		tableData: [],
+		userId : '',
+		users : [],
+		reason : '',
+		dialogFormVisible : false,
+		hisTaskForm : false,
+		tempRow : null,
+		histaskList : [],
+		processImgUrl : '',
+		pageNum : 1,
+		pageSize : 10,
+		total : 0,
+		excutionName : '',
+		processDefName : '',
+		tableloading:false
+	  }
+	},
+	mounted() {
+		// this.getUsers();
+		this.getMyCompanyTask(1);
+	},
+	methods: {
+		getUsers() {
+			this.Axios.post('/api/flow/getUserInf').then(response => {
+				if (!!response.data) {
+					this.users = response.data.userList;
+				} else {
+					this.users = [];
+				}
+			}).catch(err => {
+				console.log(err)
+				this.$message.error('请求失败!');
+			})
+		},
+		getMyCompanyTask(e) {
+			this.pageNum = e;
+			this.Axios.post('/api/flow/myCompanyTask',  'excutionName='+this.excutionName +
+														'&processDefName='+this.processDefName +
+														'&pageNum='+this.pageNum+
+														'&pageSize='+this.pageSize).then(response => {
+				if (!!response.data) {
+					this.total = response.data.total;
+					this.tableData = response.data.data;
+				} else {
+					this.tableData = [];
+				}
+			}).catch(err => {
+				console.log(err)
+				this.$message.error('请求失败!');
+			})
+		},
+		
+		/** 终止流程弹窗打开 */
+		deleteDialog (r) {
+			this.dialogFormVisible = true;
+			this.tempRow = r;
+		},
+		
+		/** 终止流程提交 */
+		deleteProcess () {
+			this.tableloading = true
+			console.log("ceshi");
+			this.Axios.post('/api/flow/deleteProcessInstanceById', 'processInstanceId='+this.tempRow.id + '&reason=' + this.reason +'&flag=recall').then(response => {
+				if (!!response.data) {
+					this.dialogFormVisible = false;
+					this.$message({
+						message: '保存成功!',
+						type: 'success'
+					});
+				}
+				this.reason = '';
+				this.tableloading = false
+				this.getMyCompanyTask(this.pageNum);
+			}).catch(err => {
+				console.log(err)
+				this.$message.error('请求失败!');
+				this.tableloading = false
+			})
+		},
+		
+		/** 流程进度查看 */
+		showHisTaskForm(r) {
+			this.hisTaskForm = true;
+			this.processImgUrl = '/api/flow/genProcessDiagram?processId=' + r.id;
+			this.Axios.post('/api/flow/getProcessHisTaskList', 'processId=' + r.id).then(response => {
+				if (!!response.data.data) {
+					this.histaskList = response.data.data;
+				}
+			}).catch(err => {
+				console.log(err)
+				this.$message.error('请求失败!');
+			})
+		},
+		reset() {
+			this.excutionName = '';
+			this.processDefName = '';
+			this.getMyCompanyTask(1);
+		}
+	}
+}
+</script>
+
+<style>
+</style>