<template>
<el-container>
<el-main>
<el-row>
<el-tabs type="border-card" @tab-click="handleClick">
<el-tab-pane label="我的待办">
<!--检索条件-->
<el-row class="toolbar" style="background-color: white;margin-bottom: 10px">
<el-col :span="6">
<el-input v-model="queryinfo.name" placeholder="任务名称" style="width: 200px" clearable>
<template slot="prepend">任务名称</template>
</el-input>
</el-col>
<el-col :span="6">
<el-input v-model="queryinfo.taskDefinitionKey " placeholder="关键字" style="width: 200px" clearable>
<template slot="prepend">关键字</template>
</el-input>
</el-col>
<el-col :span="8">
<el-button type="primary" v-on:click="geMyTask">查询</el-button>
<!-- <el-button type="success" v-on:click="toAddDialog">新增</el-button>-->
</el-col>
</el-row>
<template>
<el-table
v-loading="tableloading"
:data="tableData"
style="width: 100%"
:default-sort = "{prop: 'date', order: 'descending'}"
:header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="mini"
>
<el-table-column
prop="name"
label="任务名称"
width="160">
</el-table-column>
<el-table-column
prop="taskDefinitionKey "
label="关键字">
</el-table-column>
<el-table-column
prop="owner"
label="所有者">
</el-table-column>
<el-table-column
prop="assignee "
label="执行者"
width="160"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="createTime"
label="开始时间"
width="160">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="280">
<template slot-scope="scope">
<el-button type="success" size="mini" @click="checkProcess(scope.$index,scope.row)">查看进度</el-button>
<el-button type="warning" size="mini" @click="getProcessFormInfoPromise(scope.$index,scope.row)">办理任务</el-button>
<el-button type="danger" size="mini" @click="handleTask(scope.$index,scope.row)">驳回</el-button>
</template>
</el-table-column>
</el-table>
</template>
<!--分页模块-->
<el-row style="float: right;margin-top: 20px">
<el-col>
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryinfo.pageNum"
:page-sizes="[10, 20, 30, 40]"
:page-size="queryinfo.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label="我的已办">
<!--检索条件-->
<el-row class="toolbar" style="background-color: white;margin-bottom: 10px">
<el-col :span="6">
<el-input v-model="queryinfo.name" placeholder="任务名称" style="width: 200px" clearable>
<template slot="prepend">任务名称</template>
</el-input>
</el-col>
<el-col :span="6">
<el-input v-model="queryinfo.taskDefinitionKey " placeholder="关键字" style="width: 200px" clearable>
<template slot="prepend">关键字</template>
</el-input>
</el-col>
<el-col :span="8">
<el-button type="primary" v-on:click="getAllList">查询</el-button>
<!-- <el-button type="success" v-on:click="toAddDialog">新增</el-button>-->
</el-col>
</el-row>
<template>
<el-table
v-loading="tableloading"
:data="tableData"
style="width: 100%"
:default-sort = "{prop: 'date', order: 'descending'}"
:header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="mini"
>
<el-table-column
prop="name"
label="任务名称"
width="160">
</el-table-column>
<el-table-column
prop="taskDefinitionKey"
label="关键字">
</el-table-column>
<el-table-column
prop="owner"
label="所有者">
</el-table-column>
<el-table-column
prop="assignee"
label="执行人"
width="160"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="createTime"
label="开始时间"
width="160">
</el-table-column>
<!-- <el-table-column-->
<!-- fixed="right"-->
<!-- label="操作"-->
<!-- width="280">-->
<!-- <template slot-scope="scope">-->
<!-- <el-button type="success" size="mini" @click="sendForm()">实例管理</el-button>-->
<!-- <el-button type="warning" size="mini" @click="remove(scope.$index,scope.row)">删除</el-button>-->
<!-- <el-button type="danger" size="mini" @click="removeDel(scope.$index,scope.row)">彻底删除</el-button>-->
<!-- </template>-->
<!-- </el-table-column>-->
</el-table>
</template>
<!--分页模块-->
<el-row style="float: right;margin-top: 20px">
<el-col>
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryinfo.pageNum"
:page-sizes="[10, 20, 30, 40]"
:page-size="queryinfo.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label="我发起的">
<!--检索条件-->
<el-row class="toolbar" style="background-color: white;margin-bottom: 10px">
<el-col :span="6">
<el-input v-model="queryinfo.name" placeholder="任务名称" style="width: 200px" clearable>
<template slot="prepend">任务名称</template>
</el-input>
</el-col>
<el-col :span="6">
<el-input v-model="queryinfo.taskDefinitionKey " placeholder="关键字" style="width: 200px" clearable>
<template slot="prepend">关键字</template>
</el-input>
</el-col>
<el-col :span="8">
<el-button type="primary" v-on:click="getMyList">查询</el-button>
<!-- <el-button type="success" v-on:click="toAddDialog">新增</el-button>-->
</el-col>
</el-row>
<template>
<el-table
v-loading="tableloading"
:data="tableData"
style="width: 100%"
:default-sort = "{prop: 'date', order: 'descending'}"
:header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="mini"
>
<el-table-column
prop="name"
label="任务名称"
width="160">
</el-table-column>
<el-table-column
prop="taskDefinitionKey"
label="关键字">
</el-table-column>
<el-table-column
prop="owner"
label="所有者">
</el-table-column>
<el-table-column
prop="assignee"
label="执行者"
width="160"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="createTime"
label="开始时间"
width="160">
</el-table-column>
<!-- <el-table-column-->
<!-- fixed="right"-->
<!-- label="操作"-->
<!-- width="280">-->
<!-- <template slot-scope="scope">-->
<!-- <el-button type="success" size="mini" @click="sendForm()">实例管理</el-button>-->
<!-- <el-button type="warning" size="mini" @click="remove(scope.$index,scope.row)">删除</el-button>-->
<!-- <el-button type="danger" size="mini" @click="removeDel(scope.$index,scope.row)">彻底删除</el-button>-->
<!-- </template>-->
<!-- </el-table-column>-->
</el-table>
</template>
<!--分页模块-->
<el-row style="float: right;margin-top: 20px">
<el-col>
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryinfo.pageNum"
:page-sizes="[10, 20, 30, 40]"
:page-size="queryinfo.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</el-col>
</el-row>
</el-tab-pane>
</el-tabs>
</el-row>
</el-main>
<el-dialog title="流程图" :visible.sync="dialogFormVisible" v-loading="dialogloading">
<el-form :model="form">
<el-form-item>
<div class="demo-image__preview">
<el-image
:src="form.url">
</el-image>
</div>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
</div>
</el-dialog>
<el-dialog title="任务表单" :visible.sync="dialogTaskFormVisible" :loading="dialogloading1">
<el-divider content-position="left">已提交表单</el-divider>
<el-row>
<el-col :span="12" v-for="(item,index) in AllTaskFormInfoData" :key="item.id">
<el-input
v-model="item.variableValue"
:disabled="true"
v-if="item.variableType==='string'"
>
<template slot="prepend">{{typeOptions[item.variableName]}}</template>
</el-input>
<el-input
v-model="item.variableValue"
:disabled="true"
v-else-if="item.variableType==='long'"
>
<template slot="prepend">{{typeOptions[item.variableName]}}</template>
</el-input>
<el-input
v-model="item.variableValue"
:disabled="true"
v-else-if="item.variableType==='jodadate'"
>
<template slot="prepend">{{typeOptions[item.variableName]}}</template>
</el-input>
<el-switch
v-model="item.variableValue"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="出库完成"
inactive-text="出库未完成"
v-else-if="item.variableType==='boolean'"
disabled
>
</el-switch>
<span v-else>
{{item.variableName}} = {{item.variableValue}} -[类型] {{item.variableType}}
</span>
</el-col>
</el-row>
<el-divider content-position="left">需要提交的表单</el-divider>
<parser :key="key2" :form-conf="formResource" @submit="handleTask" />
</el-dialog>
</el-container>
</template>
<script>
import {allTask, allTaskHistory, myTask, processDiagram, handleTask, getFormResource,getAllTaskFormInfo} from "../../api/technological";
import {loginedUserInfo} from '@/api/user';
import Parser from 'form-gen-parser'
import jsutil from "@/common/js/util";
export default {
name: "mytask",
components: {
Parser
},
data() {
return{
queryinfo:{
assignee:'',
pageNum:1,
pageSize:10,
},
form: {
url: ''
},
dialogFormVisible: false,
dialogTaskFormVisible: false,
dialogloading: false,
dialogloading1: false,
sysUserName:'',
total:0,
tableData: [],
tableloading:false,
key2: +new Date(),
formResource: {
"fields": [],
"formRef": "formRef",
"formModel": "formModel",
"size": "mini",
"labelPosition": "left",
"labelWidth": 100,
"formRules": "",
"gutter": 5,
"disabled": false,
"span": 12,
"formBtns": true,
"unFocusedComponentBorder": true
},
submitTaskParm:{
"assignee": "",
"cascade": true,
"outcome": "",
"processDefinitionId": "",
"processInstanceId": "",
"taskDefinitionKey": "",
"taskId": "",
"variables": {}
},
AllTaskFormInfoData: [],
typeOptions: {
"truck_type" : "车辆类型",
"truck_quantity" : "车辆数量",
"waybillNo" : "运单列表",
"scheduleTime" : "预定时间",
"userCompanyId" : "企业信息",
"busnessType" : "业务类型",
"candidateUsername" : "用户名称",
"form_wms_truck_plan_outcome" : "表单输出",
"form_truck_form_outcome" : "表单输出",
"form_truck_distribute_outcome" : "表单输出",
"delivery_complete" : "出库完成"
}
}
},
mounted() {
let user = loginedUserInfo();
this.queryinfo.assignee = user.username;
console.log("当前用户名:"+this.queryinfo.assignee);
this.$nextTick(function () {
this.geMyTask();
})
},
methods: {
// 分页
handleSizeChange(val) {
this.queryinfo.pageSize= val
this.getList()
},
handleCurrentChange(val) {
this.queryinfo.pageNum = val
this.getList()
},
//查询我的任务
geMyTask() {
const _this = this
this.tableloading = true;
myTask(this.queryinfo).then((response) => {
const res = response.data
if (res.code != '200') {
return _this.$message.error('获取消息收发记录，失败！')
}
// 获取列表数据
_this.tableData = res.data
// 获取列表的总记录数
_this.total = res.total
this.tableloading = false;
_this.$message.success('获取消息收发记录，成功！')
}).catch(error => {
// 关闭加载
_this.$message.error(error.toString())
this.tableloading = false;
})
},
//查看进度
checkProcess(index,row){
console.log(row)
this.dialogFormVisible = true
this.dialogloading = true;
processDiagram({processId:row.processInstanceId}).then(res =>{
// eslint-disable-next-line no-console
this.form.url=window.URL.createObjectURL(res.data);
this.dialogloading = false;
}).catch(err => {
this.dialogloading = false;
});
},
//获取工单中已完成任务的表单数据的promise
getProcessFormInfoPromise(index,row){
// this.dialogloading1 = true;
this.dialogTaskFormVisible = true
let _this = this;
this.getProcessFormInfo(index,row).then(data =>{
_this.getFormDefine(index,row)
_this.dialogloading1 = false;
}).catch(err => {
_this.$message.error(err)
_this.dialogloading1 = false;
})
},
// 提交任务
handleTask(paras){
this.dialogloading1 = true;
let _this=this
this.submitTaskParm.variables = paras
handleTask(this.submitTaskParm).then(response =>{
const res = response.data
if (res.code != '200') {
this.dialogloading1 = false;
this.dialogTaskFormVisible = false
return _this.$message.error('获取记录失败！')
}
this.$message.success("任务完成"+res.msg);
this.dialogTaskFormVisible = false
this.dialogloading1 = false;
_this.geMyTask()
}).catch(err=>{
_this.$message.error("失败"+err);
_this.dialogTaskFormVisible = false
_this.dialogloading1 = false;
})
},
//我发起的任务
getMyList(){
},
//获取工单中已完成任务的表单数据
getProcessFormInfo(index,row){
let _this = this;
return new Promise((resolve,reject)=> {
getAllTaskFormInfo({processInstanceId:row.processInstanceId}).then(response =>{
const res = response.data
if (res.code != '200') {
_this.$message.error('获取已提交工单数据失败！')
}
const data =res.data;
_this.AllTaskFormInfoData = data
resolve(data);
}).catch(err => {
_this.$message.error(err)
_this.dialogloading = false;
});
})
},
//获取任务的表单定义
getFormDefine(index,row){
this.submitTaskParm.taskId = row.id
let _this = this;
return new Promise((resolve,reject)=> {
getFormResource({taskid:row.id}).then(response =>{
const res = response.data
if (res.code != '200') {
_this.$message.error('提交任务失败！')
}
const data =res.data;
resolve(data);
if (jsutil.checkNull(data)){
_this.key2 = +new Date()
_this.formResource = JSON.parse(data)
}else {
_this.formResource = {
"fields": [],
"formRef": "formRef",
"formModel": "formModel",
"size": "mini",
"labelPosition": "left",
"labelWidth": 100,
"formRules": "",
"gutter": 5,
"disabled": false,
"span": 12,
"formBtns": true,
"unFocusedComponentBorder": true
}
console.log("此任务没有表单定义")
}
}).catch(err => {
_this.$message.error(err)
_this.formResource = {
"fields": [],
"formRef": "formRef",
"formModel": "formModel",
"size": "mini",
"labelPosition": "left",
"labelWidth": 100,
"formRules": "",
"gutter": 5,
"disabled": false,
"span": 12,
"formBtns": true,
"unFocusedComponentBorder": true
}
});
})
},
//查询
getList() {
const _this = this
this.tableloading = true;
allTask(this.queryinfo).then((response) => {
const res = response.data
if (res.code != '200') {
return _this.$message.error('获取消息收发记录，失败！')
}
// 获取列表数据
_this.tableData = res.data
// 获取列表的总记录数
_this.total = res.total
this.tableloading = false;
_this.$message.success('获取消息收发记录，成功！')
}).catch(error => {
// 关闭加载
_this.$message.error(error.toString())
this.tableloading = false;
})
},
handleClick(tab, event){
if (tab.index == 0) {
this.geMyTask();
} else if (tab.index == 1) {
this.getAllList();
} else {
this.getMyList();
}
},
//查询
getAllList() {
const _this = this
this.tableloading = true;
allTaskHistory(this.queryinfo).then((response) => {
const res = response.data
if (res.code != '200') {
return _this.$message.error('获取消息收发记录，失败！')
}
// 获取列表数据
_this.tableData = res.data
// 获取列表的总记录数
_this.total = res.total
this.tableloading = false;
_this.$message.success('获取消息收发记录，成功！')
}).catch(error => {
// 关闭加载
_this.$message.error(error.toString())
this.tableloading = false;
})
},
}
}
</script>
<style scoped>
</style>