workflow
This commit is contained in:
parent
a95db059bf
commit
11142df98c
|
|
@ -27,3 +27,13 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.el-step__head.is-process>.is-text{
|
||||
color: #ffffff;
|
||||
background: #409EFF;
|
||||
border-color: #409EFF;
|
||||
}
|
||||
.el-step__title.is-process{
|
||||
color: #409EFF;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -35,6 +35,14 @@ export function getWfStateList(id) {
|
|||
method: 'get'
|
||||
})
|
||||
}
|
||||
//工单流转step
|
||||
export function getWfFlowSteps(id) {
|
||||
return request({
|
||||
url: `/wf/ticket/${id}/flowsteps/`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
//流转状态创建
|
||||
export function createWfState(data) {
|
||||
return request({
|
||||
|
|
@ -43,6 +51,15 @@ export function createWfState(data) {
|
|||
data
|
||||
})
|
||||
}
|
||||
//处理工单
|
||||
export function ticketHandle(id,data) {
|
||||
return request({
|
||||
url: `/wf/ticket/${id}/handle/`,
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
//流转状态更新
|
||||
export function updateWfState(id, data) {
|
||||
return request({
|
||||
|
|
@ -121,7 +138,7 @@ export function deleteWfTransition(id, data) {
|
|||
data
|
||||
})
|
||||
}
|
||||
//工单详情
|
||||
//工单列表
|
||||
export function getTickets(query) {
|
||||
return request({
|
||||
url: `/wf/ticket/`,
|
||||
|
|
@ -129,3 +146,17 @@ export function getTickets(query) {
|
|||
params:query
|
||||
})
|
||||
}
|
||||
//工单详情
|
||||
export function getTicketDetail(id) {
|
||||
return request({
|
||||
url: `/wf/ticket/${id}/`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
//工单详情
|
||||
export function getTicketTransitions(id) {
|
||||
return request({
|
||||
url: `/wf/ticket/${id}/transitions/`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,11 @@
|
|||
<template slot-scope="scope">{{ scope.row.title }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="当前状态">
|
||||
<template slot-scope="scope">{{ scope.row.act_state }}</template>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.act_state===1">已提交</span>
|
||||
<span v-else-if="scope.row.act_state===4">已完成</span>
|
||||
<span v-else>审批中</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column width="180" label="创建时间">
|
||||
<template slot-scope="scope">{{ scope.row.create_time }}</template>
|
||||
|
|
@ -15,6 +19,7 @@
|
|||
<el-table-column align="center" label="操作" width="220px">
|
||||
<template slot-scope="scope">
|
||||
<el-link v-if="stateSteps==scope.row.act_state" type="danger" @click="handlePicture(scope)">查看流程图</el-link>
|
||||
<el-link v-else type="danger" @click="handleDetail(scope)">工单详情</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
|
@ -35,20 +40,50 @@
|
|||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog :visible.sync="limitedStep"
|
||||
title="工单流程">
|
||||
<el-steps :active="actives" spac="400px" align-center="" style="padding-top: 20px;">
|
||||
<el-step :title="item.name" v-for="item in flowSteps "
|
||||
:key="item.id" @click.native=stepclick(item.id)>
|
||||
</el-step>
|
||||
</el-steps>
|
||||
<el-row>
|
||||
<el-col :span="1" style="height: 1px;"></el-col>
|
||||
<el-col :span="11">
|
||||
<div class="listItem"><span>流水号：</span>{{ticketDetail.sn}}</div>
|
||||
<div class="listItem"><span>开始时间：</span>{{}}</div>
|
||||
<div class="listItem" v-if="ticketDetail.workflow_"><span>请假类型：</span>{{ticketDetail.workflow_.name}}</div>
|
||||
<div class="listItem"><span>创建人：</span>{{}}</div>
|
||||
<div class="listItem" v-if="ticketDetail.workflow_"><span>请假原因：</span>{{ticketDetail.workflow_.name}}</div>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<div class="listItem"><span>标题：</span>{{ticketDetail.title}}</div>
|
||||
<div class="listItem"><span>结束时间：</span>{{}}</div>
|
||||
<div class="listItem"><span>创建时间：</span>{{ticketDetail.create_time}}</div>
|
||||
<div class="listItem" v-if="ticketDetail.ticket_data"><span>请假天数：</span>{{ticketDetail.ticket_data.days}}</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="text-align: center">
|
||||
<el-button v-for="item in operationBtn" :key="item.id" class="filter-item" type="primary" @click="operationSubmit">{{item.name}}</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script src="https://d3js.org/d3.v4.min.js"></script>
|
||||
<!--<script src="https://d3js.org/d3.v4.min.js"></script>-->
|
||||
<script>
|
||||
import {getWfStateList,getTickets } from "@/api/workflow";
|
||||
import {getWfStateList,getTickets,ticketHandle,getWfFlowSteps,getTicketDetail,getTicketTransitions } from "@/api/workflow";
|
||||
import Pagination from "@/components/Pagination";
|
||||
import dagreD3 from 'dagre-d3'
|
||||
import * as d3 from 'd3'
|
||||
export default {
|
||||
name: "ticket",
|
||||
components: { Pagination },
|
||||
inject:['reload'],
|
||||
data(){
|
||||
return{
|
||||
total:0,
|
||||
actives:4,
|
||||
ticketId:0,
|
||||
pageForm:{
|
||||
page:1,
|
||||
page_size:20,
|
||||
|
|
@ -58,24 +93,27 @@
|
|||
stateSteps:0,
|
||||
keyword:'',
|
||||
tickets:[],
|
||||
ticketDetail:{},
|
||||
dialogVisible:false,
|
||||
listLoading:false,
|
||||
limitedStep:false,
|
||||
nodes: [],
|
||||
tooltip:null,
|
||||
edges: []
|
||||
edges: [],
|
||||
flowSteps:[],
|
||||
operationBtn:[],
|
||||
}
|
||||
},
|
||||
created(){
|
||||
activated(){
|
||||
this.workflow = this.$route.params.workflow;
|
||||
|
||||
let workflow = localStorage.getItem('workflow');
|
||||
if(this.workflow){
|
||||
this.pageForm.workflow = parseInt(this.workflow);
|
||||
if(workflow){
|
||||
localStorage.removeItem('workflow');
|
||||
localStorage.setItem('workflow',this.$route.params.workflow)
|
||||
localStorage.setItem('workflow',this.pageForm.workflow)
|
||||
}else{
|
||||
localStorage.setItem('workflow',this.$route.params.workflow)
|
||||
localStorage.setItem('workflow',this.pageForm.workflow)
|
||||
}
|
||||
}else{
|
||||
this.workflow =workflow ;
|
||||
|
|
@ -86,9 +124,11 @@
|
|||
},
|
||||
methods:{
|
||||
getList(){
|
||||
this.listLoading = true;
|
||||
getTickets( this.pageForm).then((res)=>{
|
||||
if(res.data.results){
|
||||
this.tickets = res.data.results;
|
||||
this.listLoading = false;
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -106,7 +146,6 @@
|
|||
nodes.push(obj)
|
||||
}
|
||||
this.nodes = nodes;
|
||||
console.log(nodes)
|
||||
this.getEdges(nodes);
|
||||
}
|
||||
});
|
||||
|
|
@ -121,7 +160,6 @@
|
|||
edge.push(obj);
|
||||
}
|
||||
this.edges = edge;
|
||||
console.log(edge)
|
||||
},
|
||||
handleFilter(){},
|
||||
handlePicture(){
|
||||
|
|
@ -137,7 +175,6 @@
|
|||
marginx: 50,
|
||||
marginy: 50,
|
||||
});
|
||||
console.log(g);
|
||||
// 添加节点
|
||||
this.nodes.forEach((item) => {
|
||||
g.setNode(item.id, {
|
||||
|
|
@ -181,13 +218,36 @@
|
|||
})
|
||||
|
||||
},
|
||||
handleDetail(scope){
|
||||
// this.limitedStep = true;
|
||||
this.ticketId = scope.row.id;
|
||||
getWfFlowSteps( scope.row.id).then((res)=>{
|
||||
if(res.data){
|
||||
this.flowSteps = res.data;
|
||||
}
|
||||
});
|
||||
getTicketDetail( scope.row.id).then((res)=>{
|
||||
if(res.data){
|
||||
this.ticketDetail = res.data;
|
||||
this.actives = res.data.act_state;
|
||||
this.limitedStep = true;
|
||||
}
|
||||
});
|
||||
getTicketTransitions(scope.row.id).then(res=>{
|
||||
this.operationBtn = res.data;
|
||||
})
|
||||
},
|
||||
operationSubmit(){
|
||||
// let transition = {transition:this.operationBtn[0].id};
|
||||
// ticketHandle(this.ticketId,transition).then(res=>{
|
||||
// })
|
||||
},
|
||||
stepclick(){},
|
||||
closeMark(){
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -221,12 +281,10 @@
|
|||
svg {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.node rect {
|
||||
stroke: #606266;
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.edgePath path {
|
||||
stroke: #606266;
|
||||
fill: #333;
|
||||
|
|
@ -235,4 +293,14 @@
|
|||
.el-icon-close{
|
||||
cursor: pointer;
|
||||
}
|
||||
.listItem{
|
||||
margin-top: 15px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.listItem>span{
|
||||
width: 100px;
|
||||
text-align: right;
|
||||
margin-right: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue