Merge branch 'develop' of https://e.coding.net/ctcdevteam/hberp/hberp into develop
This commit is contained in:
commit
24252555dd
|
|
@ -176,3 +176,11 @@ export function getTicketTransitions(id) {
|
||||||
method: 'get'
|
method: 'get'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//工单流转记录
|
||||||
|
export function getTicketFlowlog(id) {
|
||||||
|
return request({
|
||||||
|
url: `/wf/ticket/${id}/flowlogs/`,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -305,6 +305,13 @@ export const asyncRoutes = [
|
||||||
meta: { title: '人员信息详情', icon: 'example', perms: ['workflow_manage'] },
|
meta: { title: '人员信息详情', icon: 'example', perms: ['workflow_manage'] },
|
||||||
hidden: true
|
hidden: true
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: 'ticketHandle',
|
||||||
|
name: 'ticketHandle',
|
||||||
|
component: () => import('@/views/workflow/ticketHandle'),
|
||||||
|
meta: { title: '工单处理', icon: 'example', perms: ['workflow_manage'] },
|
||||||
|
hidden: true
|
||||||
|
},
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -27,9 +27,20 @@ import TST from "@/views/workflow/transitions"
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
let id = sessionStorage.getItem('configurationId');
|
||||||
this.ID = this.$route.params.workflow;
|
if(this.$route.params.workflow){
|
||||||
|
this.ID = this.$route.params.workflow;
|
||||||
|
if(id){
|
||||||
|
sessionStorage.removeItem('configurationId');
|
||||||
|
sessionStorage.setItem('configurationId',this.$route.params.workflow);
|
||||||
|
}else{
|
||||||
|
sessionStorage.setItem('configurationId',this.$route.params.workflow);
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
if(id){
|
||||||
|
this.ID = id;
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleClick(tab, event) {
|
handleClick(tab, event) {
|
||||||
|
|
|
||||||
|
|
@ -50,13 +50,13 @@
|
||||||
{{ !!(scope.row.view_permission_check)?'是':'否' }}
|
{{ !!(scope.row.view_permission_check)?'是':'否' }}
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column width="180" label="创建时间">
|
<el-table-column width="180" label="创建时间">
|
||||||
<template slot-scope="scope">{{ scope.row.create_time }}</template>
|
<template slot-scope="scope">{{ scope.row.create_time }}</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
align="center"
|
align="center"
|
||||||
label="操作"
|
label="操作"
|
||||||
width="220px"
|
width="300px"
|
||||||
>
|
>
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<el-link
|
<el-link
|
||||||
|
|
@ -76,6 +76,10 @@
|
||||||
type="primary"
|
type="primary"
|
||||||
@click="handleTicket(scope)"
|
@click="handleTicket(scope)"
|
||||||
>查看工单</el-link>
|
>查看工单</el-link>
|
||||||
|
<el-link
|
||||||
|
type="primary"
|
||||||
|
@click="handleWatch(scope)"
|
||||||
|
>查看流程图</el-link>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
|
|
@ -87,6 +91,21 @@
|
||||||
@pagination="getList"
|
@pagination="getList"
|
||||||
/>
|
/>
|
||||||
</el-card>
|
</el-card>
|
||||||
|
<div class="svgMark" v-if="limitedWatch" @click="closeMark">
|
||||||
|
<div class="svgWrapper">
|
||||||
|
<div class="svgItem">工作流流程图<i class="el-dialog__close el-icon el-icon-close" @click="closeMark"></i></div>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">
|
||||||
|
<p>工作流名称 ：{{watchedName}}</p>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<p>创建时间 ：{{watchedCreateTime}}</p>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<svg height=800 id="mySvg" style="width: max-content!important">
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<el-dialog
|
<el-dialog
|
||||||
:visible.sync="dialogVisible"
|
:visible.sync="dialogVisible"
|
||||||
:title="dialogType === 'edit' ? '编辑工作流' : '新增工作流'">
|
:title="dialogType === 'edit' ? '编辑工作流' : '新增工作流'">
|
||||||
|
|
@ -139,12 +158,14 @@
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
<script src="https://d3js.org/d3.v4.min.js"></script>
|
||||||
<script>
|
<script>
|
||||||
import { getWorkflowList, createWorkflow,updateWorkflow,deleteWorkflow,getWfCustomfieldList,getWfStateList } from "@/api/workflow";
|
import { getWfTransitionList,getWorkflowList, createWorkflow,updateWorkflow,deleteWorkflow,getWfCustomfieldList,getWfStateList } from "@/api/workflow";
|
||||||
import checkPermission from "@/utils/permission";
|
import checkPermission from "@/utils/permission";
|
||||||
// import vueJsonEditor from 'vue-json-editor'
|
// import vueJsonEditor from 'vue-json-editor'
|
||||||
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
|
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
|
||||||
|
import dagreD3 from 'dagre-d3'
|
||||||
|
import * as d3 from 'd3'
|
||||||
const defaultworkflow = {
|
const defaultworkflow = {
|
||||||
name: "",
|
name: "",
|
||||||
number: "",
|
number: "",
|
||||||
|
|
@ -163,6 +184,7 @@ export default {
|
||||||
title_template:'',
|
title_template:'',
|
||||||
content_template:'',
|
content_template:'',
|
||||||
},
|
},
|
||||||
|
limitedWatch:false,
|
||||||
view_permission_check:false,
|
view_permission_check:false,
|
||||||
hasJsonFlag:true, // json是否验证通过
|
hasJsonFlag:true, // json是否验证通过
|
||||||
hasJsonFlag1:true, // json是否验证通过
|
hasJsonFlag1:true, // json是否验证通过
|
||||||
|
|
@ -179,6 +201,8 @@ export default {
|
||||||
listLoading: true,
|
listLoading: true,
|
||||||
dialogVisible: false,
|
dialogVisible: false,
|
||||||
dialogType: "new",
|
dialogType: "new",
|
||||||
|
watchedName:'',
|
||||||
|
watchedCreateTime:'',
|
||||||
rule1: {
|
rule1: {
|
||||||
name: [{ required: true, message: "请输入", trigger: "blur" }],
|
name: [{ required: true, message: "请输入", trigger: "blur" }],
|
||||||
description: [{ required: true, message: "请输入", trigger: "blur" }]
|
description: [{ required: true, message: "请输入", trigger: "blur" }]
|
||||||
|
|
@ -289,7 +313,97 @@ export default {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
handleWatch(scope){
|
||||||
|
let that = this;
|
||||||
|
let workFlow = scope.row.id;
|
||||||
|
that.watchedName = scope.row.name;
|
||||||
|
that.watchedCreateTime = scope.row.create_time;
|
||||||
|
that.limitedWatch = true;
|
||||||
|
that.$nextTick(()=>{
|
||||||
|
var g = new dagreD3.graphlib.Graph().setGraph({
|
||||||
|
align: 'DL',
|
||||||
|
nodesep: 100,
|
||||||
|
edgesep: 100,
|
||||||
|
ranksep: 50,
|
||||||
|
marginx: 0,
|
||||||
|
marginy: 50,
|
||||||
|
});
|
||||||
|
//获取state得到节点
|
||||||
|
getWfStateList(workFlow).then((response) => {
|
||||||
|
if (response.data) {
|
||||||
|
let nodes = response.data;
|
||||||
|
// 添加节点
|
||||||
|
nodes.forEach((item) => {
|
||||||
|
g.setNode(item.id, {
|
||||||
|
// 节点标签
|
||||||
|
label: item.name,
|
||||||
|
// 节点形状
|
||||||
|
shape: 'rect',
|
||||||
|
toolText: item.name,
|
||||||
|
//节点样式
|
||||||
|
style: "fill:#fff;stroke:#000",
|
||||||
|
labelStyle: "fill:#000;",
|
||||||
|
// width: 83,
|
||||||
|
// height: 40,
|
||||||
|
rx :5,//矩形节点圆角度
|
||||||
|
ry :5
|
||||||
|
});
|
||||||
|
});
|
||||||
|
g.nodes().forEach(function (v) {
|
||||||
|
console.log("Node " + v + ": " + JSON.stringify(g.node(v)));
|
||||||
|
});
|
||||||
|
//获取流转得到线 链接关系
|
||||||
|
getWfTransitionList(workFlow).then((res)=>{
|
||||||
|
if(res.data){
|
||||||
|
let transitionList = res.data;
|
||||||
|
transitionList.forEach((transitions)=>{
|
||||||
|
let transition0 = transitions;
|
||||||
|
if (transition0.condition_expression.length>3){
|
||||||
|
debugger;
|
||||||
|
g.setNode(transition0.source_state_.id+100000, {label: "条件表达式",style: "stroke: #000;fill: #afa", shape: "diamond"});
|
||||||
|
g.setEdge(transition0.source_state_.id, transition0.source_state_.id+100000, {
|
||||||
|
// 边标签
|
||||||
|
label: transition0.name,
|
||||||
|
style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px"
|
||||||
|
});
|
||||||
|
let condition_expression = JSON.parse(transition0.condition_expression);
|
||||||
|
condition_expression.forEach(condition_expression0=>{
|
||||||
|
g.setEdge(transition0.source_state_.id+100000, condition_expression0.target_state, {
|
||||||
|
label: condition_expression0.label,
|
||||||
|
style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px"
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}else{
|
||||||
|
g.setEdge(transition0.source_state_.id, transition0.destination_state_.id, {
|
||||||
|
// 边标签
|
||||||
|
label: transition0.name,
|
||||||
|
// 边样式
|
||||||
|
style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px" // 根据后台数据来改变连线的颜色
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
g.nodes().length-1
|
||||||
|
g.nodes().forEach(function (v) {
|
||||||
|
console.log("Node " + v + ": " + JSON.stringify(g.node(v)));
|
||||||
|
});
|
||||||
|
|
||||||
|
// 创建渲染器
|
||||||
|
let render = new dagreD3.render();
|
||||||
|
// 选择 svg 并添加一个g元素作为绘图容器.
|
||||||
|
let svg = d3.select('#mySvg');
|
||||||
|
let svgGroup = svg.append('g');
|
||||||
|
// 在绘图容器上运行渲染器生成流程图.
|
||||||
|
render(d3.select("svg g"), g);
|
||||||
|
}else{}
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})
|
||||||
|
},
|
||||||
|
closeMark(){
|
||||||
|
this.limitedWatch = false;
|
||||||
|
},
|
||||||
onJsonChange (value) {
|
onJsonChange (value) {
|
||||||
// console.log('更改value:', value);
|
// console.log('更改value:', value);
|
||||||
// 实时保存
|
// 实时保存
|
||||||
|
|
@ -349,3 +463,51 @@ export default {
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.svgMark{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
overflow: auto;
|
||||||
|
margin: 0;
|
||||||
|
z-index: 2000;
|
||||||
|
background: rgba(0,0,0,.3);
|
||||||
|
}
|
||||||
|
.svgWrapper{
|
||||||
|
background: #fff;
|
||||||
|
width: 800px;
|
||||||
|
margin: 10vh auto 0;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.svgItem{
|
||||||
|
padding: 20px 40px 0 ;
|
||||||
|
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
|
||||||
|
font-size: 18px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
svg {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.node rect {
|
||||||
|
stroke: #606266;
|
||||||
|
fill: #fff;
|
||||||
|
}
|
||||||
|
.edgePath path {
|
||||||
|
stroke: #606266;
|
||||||
|
fill: #333;
|
||||||
|
stroke-width: 1.5px;
|
||||||
|
}
|
||||||
|
g.conditions > rect {
|
||||||
|
fill: #00ffd0;
|
||||||
|
stroke: #000;
|
||||||
|
}
|
||||||
|
.el-icon-close{
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -62,7 +62,7 @@
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<el-link v-if="scope.row.state_.distribute_type==1&&scope.row.participant_type==2" type="danger" @click="handleGetTicket(scope)">接单</el-link>
|
<el-link v-if="scope.row.state_.distribute_type==1&&scope.row.participant_type==2" type="danger" @click="handleGetTicket(scope)">接单</el-link>
|
||||||
<el-link v-else-if="scope.row.act_state==1&&scope.row.participant_type!==2" type="primary" @click="handleDetail(scope)">处理</el-link>
|
<el-link v-else-if="scope.row.act_state==1&&scope.row.participant_type!==2" type="primary" @click="handleDetail(scope)">处理</el-link>
|
||||||
<!--<el-link type="danger" @click="handleDetail(scope)">处理</el-link>-->
|
<el-link type="success" @click="handlePicture(scope)">查看流程图</el-link>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
|
|
@ -106,8 +106,6 @@
|
||||||
<el-table-column align="center" label="操作">
|
<el-table-column align="center" label="操作">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<el-link type="primary" v-if="scope.row.act_state==4" @click="handlePicture(scope)">查看流程图</el-link>
|
<el-link type="primary" v-if="scope.row.act_state==4" @click="handlePicture(scope)">查看流程图</el-link>
|
||||||
<!--<el-link v-else-if="scope.row.act_state==1" type="danger" @click="handleDetail(scope)">处理</el-link>-->
|
|
||||||
<!--<el-link type="danger" @click="handleDetail(scope)">处理</el-link>-->
|
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
|
|
@ -152,7 +150,7 @@
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<el-link v-if="scope.row.state_.distribute_type==1&&scope.row.participant_type==2" type="danger" @click="handleGetTicket(scope)">接单</el-link>
|
<el-link v-if="scope.row.state_.distribute_type==1&&scope.row.participant_type==2" type="danger" @click="handleGetTicket(scope)">接单</el-link>
|
||||||
<el-link v-else-if="scope.row.act_state==1&&scope.row.participant_type!==2" type="primary" @click="handleDetail(scope)">处理</el-link>
|
<el-link v-else-if="scope.row.act_state==1&&scope.row.participant_type!==2" type="primary" @click="handleDetail(scope)">处理</el-link>
|
||||||
<el-link v-if="scope.row.act_state==4" type="success" @click="handlePicture(scope)">查看流程图</el-link>
|
<el-link type="success" @click="handlePicture(scope)">查看流程图</el-link>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
|
|
@ -195,9 +193,8 @@
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column align="center" label="操作">
|
<el-table-column align="center" label="操作">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<el-link v-if="scope.row.act_state==4" type="danger" @click="handlePicture(scope)">查看流程图</el-link>
|
<el-link type="danger" @click="handlePicture(scope)">查看流程图</el-link>
|
||||||
<el-link v-else-if="scope.row.act_state==1" type="danger" @click="handleDetail(scope)">处理</el-link>
|
<el-link v-if="scope.row.act_state==1" type="danger" @click="handleDetail(scope)">处理</el-link>
|
||||||
<!--<el-link type="danger" @click="handleDetail(scope)">处理</el-link>-->
|
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
|
|
@ -212,13 +209,19 @@
|
||||||
<div class="svgMark" v-if="dialogVisible" @click="closeMark">
|
<div class="svgMark" v-if="dialogVisible" @click="closeMark">
|
||||||
<div class="svgWrapper">
|
<div class="svgWrapper">
|
||||||
<div class="svgItem">工单流程图<i class="el-dialog__close el-icon el-icon-close" @click="closeMark"></i></div>
|
<div class="svgItem">工单流程图<i class="el-dialog__close el-icon el-icon-close" @click="closeMark"></i></div>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">
|
||||||
|
<p>工单名称 ：{{watchedName}}</p>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<p>创建时间 ：{{watchedCreateTime}}</p>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
<el-steps :active="actives" spac="400px" align-center="" style="padding-top: 20px;">
|
<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">
|
<el-step :title="item.name" v-for="item in flowSteps " :key="item.id">
|
||||||
</el-step>
|
</el-step>
|
||||||
</el-steps>
|
</el-steps>
|
||||||
<svg height=600 id="mySvg">
|
<svg height=800 id="mySvg" style="width:100%!important;">
|
||||||
<!--<g id="svgG"></g>-->
|
|
||||||
<!--<rect></rect>-->
|
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -307,7 +310,7 @@
|
||||||
</el-select>
|
</el-select>
|
||||||
</template>
|
</template>
|
||||||
<template v-if="item.field_type==='textarea'">
|
<template v-if="item.field_type==='textarea'">
|
||||||
<el-input type="textarea" :rows="3" v-model="ticketDetail.ticket_data[item.field_key]" placeholder="内容" />
|
<el-input type="textarea" :rows="3" v-model="ticketDetail.ticket_data[item.field_key]" placeholder="内容" />
|
||||||
</template>
|
</template>
|
||||||
<template v-if="item.field_type==='file'">
|
<template v-if="item.field_type==='file'">
|
||||||
<el-upload
|
<el-upload
|
||||||
|
|
@ -335,7 +338,7 @@
|
||||||
</el-form>
|
</el-form>
|
||||||
</el-row>
|
</el-row>
|
||||||
<div style="text-align: center">
|
<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>
|
<el-button v-for="item in operationBtn" :key="item.id" class="filter-item" type="primary" @click="operationSubmit(item.id)">{{item.name}}</el-button>
|
||||||
</div>
|
</div>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
<el-dialog :visible.sync="limitedAdd" title="新增工单">
|
<el-dialog :visible.sync="limitedAdd" title="新增工单">
|
||||||
|
|
@ -433,12 +436,10 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script src="https://d3js.org/d3.v4.min.js"></script>
|
<script src="https://d3js.org/d3.v4.min.js"></script>
|
||||||
<!--<script src="http://cpettitt.github.io/project/dagre-d3/v0.3.0/dagre-d3.min.js"></script>-->
|
|
||||||
<!--<script src=" http://d3js.org/d3.v3.min.js "></script>-->
|
|
||||||
<script>
|
<script>
|
||||||
import { upUrl, upHeaders } from "@/api/file";
|
import { upUrl, upHeaders } from "@/api/file";
|
||||||
import {getWorkflowList,getWfCustomfieldList,createTicket,getWfStateList,getTickets,ticketAccpet,getWfTransitionList,
|
import {getWorkflowList,getWfCustomfieldList,createTicket,getWfStateList,getTickets,ticketAccpet,getWfTransitionList,
|
||||||
ticketHandle,getWfFlowSteps,getTicketDetail,getTicketTransitions } from "@/api/workflow";
|
ticketHandle,getWfFlowSteps,getTicketDetail,getTicketTransitions,getTicketFlowlog } from "@/api/workflow";
|
||||||
import Pagination from "@/components/Pagination";
|
import Pagination from "@/components/Pagination";
|
||||||
import dagreD3 from 'dagre-d3'
|
import dagreD3 from 'dagre-d3'
|
||||||
import * as d3 from 'd3'
|
import * as d3 from 'd3'
|
||||||
|
|
@ -449,6 +450,7 @@
|
||||||
data(){
|
data(){
|
||||||
return{
|
return{
|
||||||
step:4,
|
step:4,
|
||||||
|
sort:0,
|
||||||
total:0,
|
total:0,
|
||||||
actives:4,
|
actives:4,
|
||||||
ticketId:0,
|
ticketId:0,
|
||||||
|
|
@ -472,10 +474,11 @@
|
||||||
handleRule:{},
|
handleRule:{},
|
||||||
upUrl: upUrl(),
|
upUrl: upUrl(),
|
||||||
upHeaders: upHeaders(),
|
upHeaders: upHeaders(),
|
||||||
stateSteps:0,
|
|
||||||
|
|
||||||
keyword:'',
|
keyword:'',
|
||||||
workflow:'',
|
workflow:'',
|
||||||
|
watchedName:'',
|
||||||
|
watchedCreateTime:'',
|
||||||
|
logs:[],
|
||||||
tickets:[],
|
tickets:[],
|
||||||
workflows:[],
|
workflows:[],
|
||||||
ticketDetail:{},
|
ticketDetail:{},
|
||||||
|
|
@ -529,6 +532,15 @@
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
getTicketFlowlogs(id){
|
||||||
|
getTicketFlowlog(id).then(res=>{
|
||||||
|
if(res.data){
|
||||||
|
debugger;
|
||||||
|
console.log(res)
|
||||||
|
this.logs = res.data;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
handleClick(tab, event) {
|
handleClick(tab, event) {
|
||||||
console.log(tab, event);
|
console.log(tab, event);
|
||||||
console.log(this.pageForm.category);
|
console.log(this.pageForm.category);
|
||||||
|
|
@ -542,7 +554,6 @@
|
||||||
if (response.data) {
|
if (response.data) {
|
||||||
let nodes = [];
|
let nodes = [];
|
||||||
let res = response.data;
|
let res = response.data;
|
||||||
this.stateSteps = res.length;
|
|
||||||
for(let i=0;i<res.length;i++){
|
for(let i=0;i<res.length;i++){
|
||||||
let obj = new Object();
|
let obj = new Object();
|
||||||
obj.id = res[i].id;
|
obj.id = res[i].id;
|
||||||
|
|
@ -610,9 +621,7 @@
|
||||||
this.addForm.transition = res.data[i].id;
|
this.addForm.transition = res.data[i].id;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
},
|
},
|
||||||
handlePreview(file) {
|
handlePreview(file) {
|
||||||
if ("url" in file) {
|
if ("url" in file) {
|
||||||
|
|
@ -652,138 +661,210 @@
|
||||||
},
|
},
|
||||||
handlePicture(scope){
|
handlePicture(scope){
|
||||||
let that = this;
|
let that = this;
|
||||||
this.dialogVisible = true;
|
that.dialogVisible = true;
|
||||||
|
that.watchedName = scope.row.title;
|
||||||
|
that.watchedCreateTime = scope.row.create_time;
|
||||||
that.pageForm.workflow = scope.row.workflow;
|
that.pageForm.workflow = scope.row.workflow;
|
||||||
// that.getStates();
|
|
||||||
getWfFlowSteps( scope.row.id).then((res)=>{
|
|
||||||
if(res.data){
|
|
||||||
that.flowSteps = res.data;
|
|
||||||
getTicketDetail( scope.row.id).then((res)=>{
|
|
||||||
if(res.data){
|
|
||||||
that.ticketDetail = res.data;
|
|
||||||
let state = res.data.state;
|
|
||||||
let dat = that.flowSteps.filter((item)=>{
|
|
||||||
return item.id==state;
|
|
||||||
})
|
|
||||||
this.actives = that.flowSteps.indexOf(dat[0]);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
this.$nextTick(()=>{
|
|
||||||
getWfStateList(this.pageForm.workflow).then((response) => {
|
|
||||||
if (response.data) {
|
|
||||||
|
|
||||||
let nodes = [];
|
|
||||||
let res = response.data;
|
|
||||||
this.stateSteps = res.length;
|
|
||||||
for(let i=0;i<res.length;i++){
|
|
||||||
let obj = new Object();
|
|
||||||
obj.id = res[i].id;
|
|
||||||
obj.label = res[i].name;
|
|
||||||
obj.shape = res[i].type===0? 'diamond':'rect';
|
|
||||||
nodes.push(obj)
|
|
||||||
}
|
|
||||||
that.nodes = nodes;
|
|
||||||
let edge = [];
|
|
||||||
for(let i=1;i<nodes.length;i++){
|
|
||||||
let obj = new Object();
|
|
||||||
obj.source = nodes[i-1].id;
|
|
||||||
obj.target = nodes[i].id;
|
|
||||||
obj.label = i>1?'同意':'';
|
|
||||||
edge.push(obj);
|
|
||||||
}
|
|
||||||
that.edges = edge;
|
|
||||||
console.log(nodes);
|
|
||||||
console.log(edge);
|
|
||||||
debugger;
|
|
||||||
var g = new dagreD3.graphlib.Graph().setGraph({
|
|
||||||
align: 'DL',
|
|
||||||
nodesep: 100,
|
|
||||||
edgesep: 100,
|
|
||||||
ranksep: 50,
|
|
||||||
marginx: 50,
|
|
||||||
marginy: 50,
|
|
||||||
});
|
|
||||||
// 添加节点
|
|
||||||
this.nodes.forEach((item) => {
|
|
||||||
g.setNode(item.id, {
|
|
||||||
// 节点标签
|
|
||||||
label: item.label,
|
|
||||||
// 节点形状
|
|
||||||
shape: item.shape,
|
|
||||||
toolText: item.label,
|
|
||||||
//节点样式
|
|
||||||
style: "fill:#fff;stroke:#000",
|
|
||||||
// 节点样式
|
|
||||||
labelStyle: "fill:#000;",
|
|
||||||
width: 83,
|
|
||||||
height: 40,
|
|
||||||
rx :5,
|
|
||||||
ry :5
|
|
||||||
});
|
|
||||||
});
|
|
||||||
// 链接关系
|
|
||||||
this.edges.forEach(item => {
|
|
||||||
g.setEdge(item.source, item.target, {
|
|
||||||
// 边标签
|
|
||||||
label: item.label,
|
|
||||||
// 边样式
|
|
||||||
style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px" // 根据后台数据来改变连线的颜色
|
|
||||||
});
|
|
||||||
});
|
|
||||||
g.nodes().forEach(function (v) {
|
|
||||||
console.log("Node " + v + ": " + JSON.stringify(g.node(v)));
|
|
||||||
});
|
|
||||||
g.edges().forEach(function (e) {
|
|
||||||
console.log("Edge " + e.v + " -> " + e.w + ": " + JSON.stringify(g.edge(e)));
|
|
||||||
});
|
|
||||||
// 创建渲染器
|
|
||||||
let render = new dagreD3.render();
|
|
||||||
// 选择 svg 并添加一个g元素作为绘图容器.
|
|
||||||
let svg = d3.select('#mySvg');
|
|
||||||
let svgGroup = svg.append('g');
|
|
||||||
debugger;console.log(g)
|
|
||||||
debugger;console.log(svg)
|
|
||||||
debugger;console.log(document.getElementsByTagName('svg'))
|
|
||||||
debugger;console.log(svgGroup)
|
|
||||||
// 在绘图容器上运行渲染器生成流程图.
|
|
||||||
render(d3.select("svg g"), g);
|
|
||||||
|
|
||||||
}
|
|
||||||
});
|
|
||||||
})
|
|
||||||
|
|
||||||
},
|
|
||||||
//处理工单
|
|
||||||
handleDetail(scope){
|
|
||||||
// this.limitedStep = true;
|
|
||||||
let that = this;
|
|
||||||
that.ticketId = scope.row.id;
|
|
||||||
let ticketId = scope.row.id;
|
let ticketId = scope.row.id;
|
||||||
getWfFlowSteps( scope.row.id).then((res)=>{
|
// that.getStates();
|
||||||
|
// that.getTicketFlowlogs(ticketId);
|
||||||
|
getWfFlowSteps( ticketId).then((res)=>{
|
||||||
if(res.data){
|
if(res.data){
|
||||||
|
debugger;
|
||||||
|
//流程步骤数组
|
||||||
that.flowSteps = res.data;
|
that.flowSteps = res.data;
|
||||||
getTicketDetail( ticketId).then((res)=>{
|
getTicketDetail( ticketId).then((res)=>{
|
||||||
if(res.data){
|
if(res.data){
|
||||||
|
debugger;
|
||||||
|
that.tooltip = that.createTooltip();
|
||||||
that.ticketDetail = res.data;
|
that.ticketDetail = res.data;
|
||||||
let state = res.data.state;
|
let state = res.data.state;
|
||||||
let dat = that.flowSteps.filter((item)=>{
|
let dat = that.flowSteps.filter((item)=>{
|
||||||
return item.id==state;
|
return item.id==state;
|
||||||
})
|
})
|
||||||
this.actives = that.flowSteps.indexOf(dat[0]);
|
that.sort = dat[0].sort;
|
||||||
that.limitedStep = true;
|
that.actives = that.flowSteps.indexOf(dat[0]);
|
||||||
|
if( that.flowSteps.length-that.actives >1){}else{
|
||||||
|
that.actives =that.flowSteps.length;
|
||||||
|
}
|
||||||
|
var g = new dagreD3.graphlib.Graph().setGraph({
|
||||||
|
align: 'DL',
|
||||||
|
nodesep: 100,
|
||||||
|
edgesep: 100,
|
||||||
|
ranksep: 50,
|
||||||
|
marginx: 300,
|
||||||
|
marginy: 50,
|
||||||
|
});
|
||||||
|
//获取state得到节点
|
||||||
|
getWfStateList(that.pageForm.workflow).then((response) => {
|
||||||
|
if (response.data) {
|
||||||
|
let nodes = response.data;
|
||||||
|
// 添加节点
|
||||||
|
nodes.forEach((item) => {
|
||||||
|
/*debugger;
|
||||||
|
console.log(item.sort)
|
||||||
|
console.log(that.state)*/
|
||||||
|
if(item.sort==that.sort){
|
||||||
|
g.setNode(item.id, {
|
||||||
|
// 节点标签
|
||||||
|
label: item.name,
|
||||||
|
// 节点形状
|
||||||
|
shape: 'rect',
|
||||||
|
toolText: item.name,
|
||||||
|
//节点样式
|
||||||
|
style: "fill:#409EFF;stroke:#000",
|
||||||
|
labelStyle: "fill:#000;",
|
||||||
|
rx :5,//矩形节点圆角度
|
||||||
|
ry :5
|
||||||
|
});
|
||||||
|
|
||||||
|
}else{
|
||||||
|
g.setNode(item.id, {
|
||||||
|
// 节点标签
|
||||||
|
label: item.name,
|
||||||
|
// 节点形状
|
||||||
|
shape: 'rect',
|
||||||
|
toolText: item.name,
|
||||||
|
//节点样式
|
||||||
|
style: "fill:#fff;stroke:#000",
|
||||||
|
labelStyle: "fill:#000;",
|
||||||
|
rx :5,//矩形节点圆角度
|
||||||
|
ry :5
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
g.nodes().forEach(function (v) {
|
||||||
|
console.log("Node " + v + ": " + JSON.stringify(g.node(v)));
|
||||||
|
});
|
||||||
|
//获取流转得到线 链接关系
|
||||||
|
getWfTransitionList(that.pageForm.workflow).then((res)=>{
|
||||||
|
if(res.data){
|
||||||
|
let transitionList = res.data;
|
||||||
|
transitionList.forEach((transitions)=>{
|
||||||
|
let transition0 = transitions;
|
||||||
|
debugger;
|
||||||
|
console.log(transition0.condition_expression.length)
|
||||||
|
if (transition0.condition_expression.length>0){
|
||||||
|
g.setNode(transition0.source_state_.id+100000, {label: "条件表达式", style: "fill: #a4d088", shape: "diamond"});
|
||||||
|
g.setEdge(transition0.source_state_.id, transition0.source_state_.id+100000, {
|
||||||
|
// 边标签
|
||||||
|
label: transition0.name,
|
||||||
|
style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px"
|
||||||
|
});
|
||||||
|
let condition_expression = transition0.condition_expression;
|
||||||
|
condition_expression.forEach(condition_expression0=>{
|
||||||
|
g.setEdge(transition0.source_state_.id+100000, condition_expression0.target_state, {
|
||||||
|
label: condition_expression0.label,
|
||||||
|
style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px"
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}else{
|
||||||
|
g.setEdge(transition0.source_state_.id, transition0.destination_state_.id, {
|
||||||
|
// 边标签
|
||||||
|
label: transition0.name,
|
||||||
|
// 边样式
|
||||||
|
style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px" // 根据后台数据来改变连线的颜色
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
g.nodes().length-1
|
||||||
|
g.nodes().forEach(function (v) {
|
||||||
|
console.log("Node " + v + ": " + JSON.stringify(g.node(v)));
|
||||||
|
});
|
||||||
|
// 创建渲染器
|
||||||
|
let render = new dagreD3.render();
|
||||||
|
// 选择 svg 并添加一个g元素作为绘图容器.
|
||||||
|
let svg = d3.select('#mySvg');
|
||||||
|
let svgGroup = svg.append('g');
|
||||||
|
let zoom = d3.zoom()
|
||||||
|
.on("zoom", function() {
|
||||||
|
svgGroup.attr("transform", d3.event.transform);
|
||||||
|
});
|
||||||
|
svg.call(zoom);
|
||||||
|
// 在绘图容器上运行渲染器生成流程图.
|
||||||
|
render(d3.select("svg g"), g);
|
||||||
|
getTicketFlowlog(ticketId).then(res=> {
|
||||||
|
if (res.data) {
|
||||||
|
that.logs = res.data;
|
||||||
|
svgGroup
|
||||||
|
.selectAll('g.node')
|
||||||
|
.on('mouseover', (v) => {
|
||||||
|
// 假如当前toolText为"",则不展示
|
||||||
|
//这里就是自定义tooltip的内容
|
||||||
|
let filList = [],strList = [];
|
||||||
|
filList = nodes.filter((ii) => {
|
||||||
|
return ii.name === g.node(v).label
|
||||||
|
})
|
||||||
|
if (!filList.length) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
filList.map((k) => {
|
||||||
|
let filte = that.logs.filter(item=>{
|
||||||
|
return item.state_.id = k.id;
|
||||||
|
})
|
||||||
|
//每个
|
||||||
|
let str = '处理人：'+filte[0].participant_.name;
|
||||||
|
strList.push(str)
|
||||||
|
})
|
||||||
|
that.tipVisible(strList)
|
||||||
|
})
|
||||||
|
.on('mouseout', () => {
|
||||||
|
this.tipHidden()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
}else{}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
getTicketTransitions(scope.row.id).then(res=>{
|
|
||||||
this.operationBtn = res.data;
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
operationSubmit(){
|
// 创建提示框
|
||||||
this.handleForm.transition = this.operationBtn[0].id;
|
createTooltip() {
|
||||||
|
return d3
|
||||||
|
.select('body')
|
||||||
|
.append('div')
|
||||||
|
.classed('tooltip', true)
|
||||||
|
.style('opacity', 0)
|
||||||
|
.style('display', 'none')
|
||||||
|
},
|
||||||
|
// tooltip显示
|
||||||
|
tipVisible(textContent) {
|
||||||
|
this.tooltip
|
||||||
|
.transition()
|
||||||
|
.duration(400)
|
||||||
|
.style('opacity', 1)
|
||||||
|
.style('display', 'block')
|
||||||
|
.style('color', '#ffffff')
|
||||||
|
.style('z-index', '3999')
|
||||||
|
.style('padding', '20px 30px')
|
||||||
|
.style('border-radius', '5px')
|
||||||
|
.style('position', 'fixed')
|
||||||
|
.style('background', 'rgba(0,0,0,.7)')
|
||||||
|
this.tooltip
|
||||||
|
.html(textContent)
|
||||||
|
.style('left', `${d3.event.pageX + 20}px`)
|
||||||
|
.style('top', `${d3.event.pageY-10}px`)
|
||||||
|
},
|
||||||
|
|
||||||
|
// tooltip隐藏
|
||||||
|
tipHidden() {
|
||||||
|
this.tooltip
|
||||||
|
.transition()
|
||||||
|
.duration(400)
|
||||||
|
.style('opacity', 0)
|
||||||
|
.style('display', 'none')
|
||||||
|
},
|
||||||
|
//处理工单
|
||||||
|
handleDetail(scope){
|
||||||
|
this.$router.push({name:"ticketHandle",params:{ticketId:scope.row.id,workflow:scope.row.workflow}})
|
||||||
|
},
|
||||||
|
operationSubmit(id){
|
||||||
|
this.handleForm.transition = id;
|
||||||
this.handleForm.ticket_data = this.ticketDetail.ticket_data;
|
this.handleForm.ticket_data = this.ticketDetail.ticket_data;
|
||||||
ticketHandle(this.ticketId,this.handleForm).then(res=>{
|
ticketHandle(this.ticketId,this.handleForm).then(res=>{
|
||||||
if (res.data){
|
if (res.data){
|
||||||
|
|
@ -861,4 +942,37 @@
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.tooltip {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: left;
|
||||||
|
border-radius: 3px;
|
||||||
|
box-shadow: rgb(174, 174, 174) 0 0 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 6px;
|
||||||
|
max-width: 300px;
|
||||||
|
word-wrap: break-word;
|
||||||
|
word-break: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip > div {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.node rect {
|
||||||
|
stroke: #333;
|
||||||
|
fill: #999;
|
||||||
|
}
|
||||||
|
.node {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edgePath path {
|
||||||
|
stroke: #333;
|
||||||
|
fill: #333;
|
||||||
|
stroke-width: 1.5px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,462 @@
|
||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<el-card style="margin-bottom: 10px">
|
||||||
|
<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"></el-step>
|
||||||
|
</el-steps>
|
||||||
|
</el-card>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-card>
|
||||||
|
<svg height=800 id="mySvg" style="width:100%!important;"></svg>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="16">
|
||||||
|
<el-card style="margin-left: 10px">
|
||||||
|
<el-form ref="Form" :model="handleForm" label-width="100px" label-position="right" :rules="handleRule">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="标题" style="margin-bottom: 0">
|
||||||
|
<span>{{ticketDetail.title}}</span>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="工作流" style="margin-bottom: 0">
|
||||||
|
<span v-if="ticketDetail.workflow_">{{ticketDetail.workflow_.name}}</span>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="流水号" style="margin-bottom: 0">
|
||||||
|
<span>{{ticketDetail.sn}}</span>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="创建时间" style="margin-bottom: 0">
|
||||||
|
<span>{{ticketDetail.create_time}}</span>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-row style="display: flex;flex-wrap: wrap;width:100%;">
|
||||||
|
<el-col v-for="item in ticketDetail.ticket_data_" :key="item.id" :span="12">
|
||||||
|
<el-form-item :label="item.field_name" v-if="item.field_state==='1'">
|
||||||
|
<span>{{ticketDetail.ticket_data[item.field_key]}}</span>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item :label="item.field_name" v-else>
|
||||||
|
<template v-if="item.field_type=='string'">
|
||||||
|
<el-input v-model="ticketDetail.ticket_data[item.field_key]" :placeholder="item.description"/>
|
||||||
|
</template>
|
||||||
|
<template v-if="item.field_type==='int'">
|
||||||
|
<el-input v-model="ticketDetail.ticket_data[item.field_key]" type="number" :placeholder="item.description" oninput="value=value.replace(/[^\d]/g,'')" />
|
||||||
|
</template>
|
||||||
|
<template v-if="item.field_type==='float'">
|
||||||
|
<el-input v-model="ticketDetail.ticket_data[item.field_key]" type="number" :placeholder="item.description" />
|
||||||
|
</template>
|
||||||
|
<template v-if="item.field_type==='date'">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="ticketDetail.ticket_data[item.field_key]"
|
||||||
|
type="date"
|
||||||
|
placeholder="选择日期"
|
||||||
|
value-format="yyyy-MM-dd"
|
||||||
|
style="width: 100%"
|
||||||
|
>
|
||||||
|
</el-date-picker>
|
||||||
|
</template>
|
||||||
|
<template v-if="item.field_type==='datetime'">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="ticketDetail.ticket_data[item.field_key]"
|
||||||
|
type="datetime"
|
||||||
|
placeholder="选择日期"
|
||||||
|
value-format="yyyy-MM-dd HH:mm:ss"
|
||||||
|
style="width: 100%"
|
||||||
|
>
|
||||||
|
</el-date-picker>
|
||||||
|
</template>
|
||||||
|
<template v-if="item.field_type==='select'">
|
||||||
|
<el-select style="width: 100%" v-model="ticketDetail.ticket_data[item.field_key]" placeholder="请选择">
|
||||||
|
<el-option
|
||||||
|
v-for="item1 in item.field_choice"
|
||||||
|
:key="item1"
|
||||||
|
:label="item1"
|
||||||
|
:value="item1"
|
||||||
|
>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</template>
|
||||||
|
<template v-if="item.field_type==='selects'">
|
||||||
|
<el-select style="width: 100%" multiple v-model="ticketDetail.ticket_data[item.field_key]" placeholder="请选择">
|
||||||
|
<el-option
|
||||||
|
v-for="item1 in item.field_choice"
|
||||||
|
:key="item1"
|
||||||
|
:label="item1"
|
||||||
|
:value="item1"
|
||||||
|
>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</template>
|
||||||
|
<template v-if="item.field_type==='textarea'">
|
||||||
|
<el-input type="textarea" :rows="3" v-model="ticketDetail.ticket_data[item.field_key]" placeholder="内容" />
|
||||||
|
</template>
|
||||||
|
<template v-if="item.field_type==='file'">
|
||||||
|
<el-upload
|
||||||
|
ref="upload"
|
||||||
|
:action="upUrl"
|
||||||
|
:on-preview="handlePreview"
|
||||||
|
:on-success="handleUpSuccess"
|
||||||
|
:headers="upHeaders"
|
||||||
|
:file-list="fileList"
|
||||||
|
:limit="1"
|
||||||
|
accept=".doc,.docx,.xls,.xlsx,.ppt,.pptx"
|
||||||
|
>
|
||||||
|
<el-button size="small" type="primary">上传文件</el-button>
|
||||||
|
</el-upload>
|
||||||
|
</template>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="审批意见">
|
||||||
|
<el-input type="textarea" :rows="3" v-model="handleForm.suggestion" placeholder="审批意见"/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
<div style="text-align: center">
|
||||||
|
<el-button v-for="item in operationBtn" :key="item.id" class="filter-item" type="primary" @click="operationSubmit(item.id)">{{item.name}}</el-button>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script src="https://d3js.org/d3.v4.min.js"></script>
|
||||||
|
<script>
|
||||||
|
import { upUrl, upHeaders } from "@/api/file";
|
||||||
|
import {getWorkflowList,getWfCustomfieldList,getWfStateList,getWfTransitionList,
|
||||||
|
ticketHandle,getWfFlowSteps,getTicketDetail,getTicketTransitions,getTicketFlowlog } from "@/api/workflow";
|
||||||
|
import Pagination from "@/components/Pagination";
|
||||||
|
import dagreD3 from 'dagre-d3'
|
||||||
|
import * as d3 from 'd3'
|
||||||
|
export default {
|
||||||
|
name: "ticketHandle",
|
||||||
|
components: { Pagination },
|
||||||
|
inject:['reload'],
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
step:4,
|
||||||
|
actives:4,
|
||||||
|
ticketId:0,
|
||||||
|
stateSteps:0,
|
||||||
|
handleForm:{
|
||||||
|
transition:'',
|
||||||
|
ticket_data:{},
|
||||||
|
suggestion:'',
|
||||||
|
},
|
||||||
|
tooltip:null,
|
||||||
|
handleRule:{},
|
||||||
|
upUrl: upUrl(),
|
||||||
|
upHeaders: upHeaders(),
|
||||||
|
workflow:'',
|
||||||
|
watchedName:'',
|
||||||
|
watchedCreateTime:'',
|
||||||
|
logs:[],
|
||||||
|
edges: [],
|
||||||
|
nodes: [],
|
||||||
|
tooltip: [],
|
||||||
|
fileList:[],
|
||||||
|
workflows:[],
|
||||||
|
flowSteps:[],
|
||||||
|
ticketDetail:{},
|
||||||
|
operationBtn:[],
|
||||||
|
customfields:[],
|
||||||
|
transitions:[]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
let that = this;
|
||||||
|
let ticketId = that.ticketId = this.$route.params.ticketId;
|
||||||
|
let workflow = that.workflow = this.$route.params.workflow;
|
||||||
|
let handleTicketId = sessionStorage.getItem('handleTicketId');
|
||||||
|
let handleTicketWorkflow = sessionStorage.getItem('handleTicketWorkflow');
|
||||||
|
if(ticketId&&workflow){
|
||||||
|
if(handleTicketId&&handleTicketWorkflow){
|
||||||
|
sessionStorage.removeItem('handleTicketId');
|
||||||
|
sessionStorage.removeItem('handleTicketWorkflow');
|
||||||
|
sessionStorage.setItem('handleTicketId',ticketId);
|
||||||
|
sessionStorage.setItem('handleTicketWorkflow',workflow);
|
||||||
|
}else{
|
||||||
|
sessionStorage.setItem('handleTicketId',ticketId);
|
||||||
|
sessionStorage.setItem('handleTicketWorkflow',workflow);
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
ticketId = that.ticketId = handleTicketId;
|
||||||
|
workflow = that.workflow = handleTicketWorkflow;
|
||||||
|
}
|
||||||
|
getTicketTransitions(ticketId).then(res=>{
|
||||||
|
this.operationBtn = res.data;
|
||||||
|
})
|
||||||
|
getWfFlowSteps( ticketId).then((res)=>{
|
||||||
|
if(res.data){
|
||||||
|
//流程步骤数组
|
||||||
|
that.flowSteps = res.data;
|
||||||
|
getTicketDetail( ticketId).then((res)=>{
|
||||||
|
if(res.data){
|
||||||
|
that.tooltip = that.createTooltip();
|
||||||
|
that.ticketDetail = res.data;
|
||||||
|
let state = res.data.state;
|
||||||
|
let dat = that.flowSteps.filter((item)=>{
|
||||||
|
return item.id==state;
|
||||||
|
})
|
||||||
|
that.sort = dat[0].sort;
|
||||||
|
that.actives = that.flowSteps.indexOf(dat[0]);
|
||||||
|
if( that.flowSteps.length-that.actives >1){}else{
|
||||||
|
that.actives =that.flowSteps.length;
|
||||||
|
}
|
||||||
|
var g = new dagreD3.graphlib.Graph().setGraph({
|
||||||
|
align: 'DL',
|
||||||
|
nodesep: 100,
|
||||||
|
edgesep: 100,
|
||||||
|
ranksep: 50,
|
||||||
|
marginx: 50,
|
||||||
|
marginy: 50,
|
||||||
|
});
|
||||||
|
//获取state得到节点
|
||||||
|
getWfStateList(workflow).then((response) => {
|
||||||
|
if (response.data) {
|
||||||
|
let nodes = response.data;
|
||||||
|
// 添加节点
|
||||||
|
nodes.forEach((item) => {
|
||||||
|
if(item.sort==that.sort){
|
||||||
|
g.setNode(item.id, {
|
||||||
|
// 节点标签
|
||||||
|
label: item.name,
|
||||||
|
// 节点形状
|
||||||
|
shape: 'rect',
|
||||||
|
toolText: item.name,
|
||||||
|
//节点样式
|
||||||
|
style: "fill:#409EFF;stroke:#000",
|
||||||
|
labelStyle: "fill:#000;",
|
||||||
|
rx :5,//矩形节点圆角度
|
||||||
|
ry :5
|
||||||
|
});
|
||||||
|
|
||||||
|
}else{
|
||||||
|
g.setNode(item.id, {
|
||||||
|
// 节点标签
|
||||||
|
label: item.name,
|
||||||
|
// 节点形状
|
||||||
|
shape: 'rect',
|
||||||
|
toolText: item.name,
|
||||||
|
//节点样式
|
||||||
|
style: "fill:#fff;stroke:#000",
|
||||||
|
labelStyle: "fill:#000;",
|
||||||
|
rx :5,//矩形节点圆角度
|
||||||
|
ry :5
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
g.nodes().forEach(function (v) {
|
||||||
|
console.log("Node " + v + ": " + JSON.stringify(g.node(v)));
|
||||||
|
});
|
||||||
|
//获取流转得到线 链接关系
|
||||||
|
getWfTransitionList(workflow).then((res)=>{
|
||||||
|
if(res.data){
|
||||||
|
let transitionList = res.data;
|
||||||
|
transitionList.forEach((transitions)=>{
|
||||||
|
let transition0 = transitions;
|
||||||
|
if (transition0.condition_expression.length>0){
|
||||||
|
g.setNode(transition0.source_state_.id+100000, {label: "条件表达式", style: "fill: #a4d088", shape: "diamond"});
|
||||||
|
g.setEdge(transition0.source_state_.id, transition0.source_state_.id+100000, {
|
||||||
|
// 边标签
|
||||||
|
label: transition0.name,
|
||||||
|
style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px"
|
||||||
|
});
|
||||||
|
let condition_expression = transition0.condition_expression;
|
||||||
|
condition_expression.forEach(condition_expression0=>{
|
||||||
|
g.setEdge(transition0.source_state_.id+100000, condition_expression0.target_state, {
|
||||||
|
label: condition_expression0.label,
|
||||||
|
style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px"
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}else{
|
||||||
|
g.setEdge(transition0.source_state_.id, transition0.destination_state_.id, {
|
||||||
|
// 边标签
|
||||||
|
label: transition0.name,
|
||||||
|
// 边样式
|
||||||
|
style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px" // 根据后台数据来改变连线的颜色
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
g.nodes().length-1
|
||||||
|
g.nodes().forEach(function (v) {
|
||||||
|
console.log("Node " + v + ": " + JSON.stringify(g.node(v)));
|
||||||
|
});
|
||||||
|
// 创建渲染器
|
||||||
|
let render = new dagreD3.render();
|
||||||
|
// 选择 svg 并添加一个g元素作为绘图容器.
|
||||||
|
let svg = d3.select('#mySvg');
|
||||||
|
let svgGroup = svg.append('g');
|
||||||
|
let zoom = d3.zoom()
|
||||||
|
.on("zoom", function() {
|
||||||
|
svgGroup.attr("transform", d3.event.transform);
|
||||||
|
});
|
||||||
|
svg.call(zoom);
|
||||||
|
// 在绘图容器上运行渲染器生成流程图.
|
||||||
|
render(d3.select("svg g"), g);
|
||||||
|
// this.getTicketFlowlogs(ticketId);
|
||||||
|
getTicketFlowlog(ticketId).then(res=>{
|
||||||
|
if(res.data){
|
||||||
|
that.logs = res.data;
|
||||||
|
svgGroup
|
||||||
|
.selectAll('g.node')
|
||||||
|
.on('mouseover', (v) => {
|
||||||
|
// 假如当前toolText为"",则不展示
|
||||||
|
//这里就是自定义tooltip的内容
|
||||||
|
let filList = [], strList = [];
|
||||||
|
filList = nodes.filter((ii) => {
|
||||||
|
return ii.name === g.node(v).label
|
||||||
|
})
|
||||||
|
if (!filList.length) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
filList.map((k) => {
|
||||||
|
let filte = that.logs.filter(item=>{
|
||||||
|
return item.state_.id = k.id;
|
||||||
|
})
|
||||||
|
//每个
|
||||||
|
let str = '处理人：'+filte[0].participant_.name;
|
||||||
|
strList.push(str)
|
||||||
|
})
|
||||||
|
that.tipVisible(strList)
|
||||||
|
})
|
||||||
|
.on('mouseout', () => {
|
||||||
|
this.tipHidden()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
}else{}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
activated(){
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
//工单流转记录
|
||||||
|
getTicketFlowlogs(id){
|
||||||
|
getTicketFlowlog(id).then(res=>{
|
||||||
|
if(res.data){
|
||||||
|
this.logs = res.data;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handlePreview(file) {
|
||||||
|
if ("url" in file) {
|
||||||
|
window.open(file.url);
|
||||||
|
} else {
|
||||||
|
window.open(file.response.data.path);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleUpSuccess(res, file, filelist) {
|
||||||
|
this.process.instruction = res.data.id;
|
||||||
|
},
|
||||||
|
handleRemove(file, filelist){
|
||||||
|
this.process.instruction = null;
|
||||||
|
},
|
||||||
|
// 创建提示框
|
||||||
|
createTooltip() {
|
||||||
|
return d3
|
||||||
|
.select('body')
|
||||||
|
.append('div')
|
||||||
|
.classed('tooltip', true)
|
||||||
|
.style('opacity', 0)
|
||||||
|
.style('display', 'none')
|
||||||
|
},
|
||||||
|
// tooltip显示
|
||||||
|
tipVisible(textContent) {
|
||||||
|
this.tooltip
|
||||||
|
.transition()
|
||||||
|
.duration(400)
|
||||||
|
.style('opacity', 1)
|
||||||
|
.style('display', 'block')
|
||||||
|
.style('color', '#ffffff')
|
||||||
|
.style('z-index', '3999')
|
||||||
|
.style('padding', '20px 30px')
|
||||||
|
.style('border-radius', '5px')
|
||||||
|
.style('position', 'fixed')
|
||||||
|
.style('background', 'rgba(0,0,0,.7)')
|
||||||
|
this.tooltip
|
||||||
|
.html(textContent)
|
||||||
|
.style('left', `${d3.event.pageX + 15}px`)
|
||||||
|
.style('top', `${d3.event.pageY-10}px`)
|
||||||
|
},
|
||||||
|
|
||||||
|
// tooltip隐藏
|
||||||
|
tipHidden() {
|
||||||
|
this.tooltip
|
||||||
|
.transition()
|
||||||
|
.duration(400)
|
||||||
|
.style('opacity', 0)
|
||||||
|
.style('display', 'none')
|
||||||
|
},
|
||||||
|
operationSubmit(id){
|
||||||
|
this.handleForm.transition = id;
|
||||||
|
this.handleForm.ticket_data = this.ticketDetail.ticket_data;
|
||||||
|
let obj = new Object();
|
||||||
|
obj.transition = id;
|
||||||
|
obj.ticket_data = this.ticketDetail.ticket_data;
|
||||||
|
obj.suggestion = this.handleForm.suggestion;
|
||||||
|
console.log(this.handleForm);
|
||||||
|
ticketHandle(this.ticketId,obj).then(res=>{
|
||||||
|
if (res.data){
|
||||||
|
this.$router.replace({name:"ticket"})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.svgWrapper{
|
||||||
|
background: #fff;
|
||||||
|
width: 800px;
|
||||||
|
margin: 10vh auto 0;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.svgItem{
|
||||||
|
padding: 20px 40px 0 ;
|
||||||
|
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
|
||||||
|
font-size: 18px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
svg {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.node rect {
|
||||||
|
stroke: #606266;
|
||||||
|
fill: #fff;
|
||||||
|
}
|
||||||
|
.edgePath path {
|
||||||
|
stroke: #606266;
|
||||||
|
fill: #333;
|
||||||
|
stroke-width: 1.5px;
|
||||||
|
}
|
||||||
|
.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>
|
||||||
|
|
@ -97,10 +97,14 @@
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="条件表达式" prop="condition_expression">
|
<el-form-item label="条件表达式" prop="condition_expression">
|
||||||
<el-input v-model="wftransition.condition_expression"/>
|
<vue-json-editor
|
||||||
|
v-model="wftransition.condition_expression"
|
||||||
|
:showBtns="false"
|
||||||
|
:mode="'code'"
|
||||||
|
lang="zh"
|
||||||
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="属性类型" prop="attribute_type">
|
<el-form-item label="属性类型" prop="attribute_type">
|
||||||
|
|
||||||
<el-select style="width: 100%" v-model="wftransition.attribute_type" placeholder="请选择">
|
<el-select style="width: 100%" v-model="wftransition.attribute_type" placeholder="请选择">
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in options"
|
v-for="item in options"
|
||||||
|
|
@ -126,13 +130,13 @@
|
||||||
<script>
|
<script>
|
||||||
import {getWfStateList, getWfTransitionList, createWfTransition,updateWfTransition,deleteWfTransition } from "@/api/workflow";
|
import {getWfStateList, getWfTransitionList, createWfTransition,updateWfTransition,deleteWfTransition } from "@/api/workflow";
|
||||||
import checkPermission from "@/utils/permission";
|
import checkPermission from "@/utils/permission";
|
||||||
|
import vueJsonEditor from 'vue-json-editor'
|
||||||
import { genTree } from "@/utils"
|
import { genTree } from "@/utils"
|
||||||
const defaultwftransition = {
|
const defaultwftransition = {
|
||||||
name: "",
|
name: "",
|
||||||
};
|
};
|
||||||
export default {
|
export default {
|
||||||
components: { },
|
components: { vueJsonEditor },
|
||||||
name: "TST",
|
name: "TST",
|
||||||
props: ["ID"],
|
props: ["ID"],
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -211,13 +215,11 @@ export default {
|
||||||
this.wftransition = Object.assign({}, scope.row); // copy obj
|
this.wftransition = Object.assign({}, scope.row); // copy obj
|
||||||
this.dialogType = "edit";
|
this.dialogType = "edit";
|
||||||
this.dialogVisible = true;
|
this.dialogVisible = true;
|
||||||
this.$nextTick(() => {
|
// this.wftransition.condition_expression = JSON.stringify(scope.row.condition_expression)
|
||||||
this.$refs["Form"].clearValidate();
|
// this.$nextTick(() => {
|
||||||
});
|
// this.$refs["Form"].clearValidate();
|
||||||
|
// });
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
async confirm(form) {
|
async confirm(form) {
|
||||||
this.$refs[form].validate((valid) => {
|
this.$refs[form].validate((valid) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
|
|
@ -245,8 +247,6 @@ export default {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
handleDelete(scope) {
|
handleDelete(scope) {
|
||||||
this.$confirm("确认删除?", "警告", {
|
this.$confirm("确认删除?", "警告", {
|
||||||
confirmButtonText: "确认",
|
confirmButtonText: "确认",
|
||||||
|
|
@ -262,9 +262,6 @@ export default {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue