zcdsj
/
hberp
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

workflowBranch

This commit is contained in:
shijing 2021-10-12 10:37:38 +08:00
parent ae58c3bd59
commit 898fd9b320
7 changed files with 920 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
hb_client/src/api/workflow.js
View File

@ -176,3 +176,11 @@ export function getTicketTransitions(id) {
method: 'get'
})
}
//工单流转记录
export function getTicketFlowlog(id) {
return request({
url: `/wf/ticket/${id}/flowlogs/`,
method: 'get'
})
}

7
hb_client/src/router/index.js
View File

@ -305,6 +305,13 @@ export const asyncRoutes = [
meta: { title: '人员信息详情', icon: 'example', perms: ['workflow_manage'] },
hidden: true
},
{
path: 'ticketHandle',
name: 'ticketHandle',
component: () => import('@/views/workflow/ticketHandle'),
meta: { title: '工单处理', icon: 'example', perms: ['workflow_manage'] },
hidden: true
},
]
},
{

19
hb_client/src/views/workflow/configuration.vue
View File

@ -27,9 +27,20 @@ import TST from "@/views/workflow/transitions"
};
},
created() {
this.ID = this.$route.params.workflow;
let id = sessionStorage.getItem('configurationId');
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: {
handleClick(tab, event) {
@ -38,4 +49,4 @@ import TST from "@/views/workflow/transitions"
}
};
</script>
</script>

170
hb_client/src/views/workflow/index.vue
View File

@ -50,13 +50,13 @@
{{ !!(scope.row.view_permission_check)?'是':'否' }}
</template>
</el-table-column>
<el-table-column width="180" label="创建时间">
<el-table-column width="180" label="创建时间">
<template slot-scope="scope">{{ scope.row.create_time }}</template>
</el-table-column>
<el-table-column
align="center"
label="操作"
width="220px"
width="300px"
>
<template slot-scope="scope">
<el-link
@ -76,6 +76,10 @@
type="primary"
@click="handleTicket(scope)"
>查看工单</el-link>
<el-link
type="primary"
@click="handleWatch(scope)"
>查看流程图</el-link>
</template>
</el-table-column>
</el-table>
@ -87,6 +91,21 @@
@pagination="getList"
/>
</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
:visible.sync="dialogVisible"
:title="dialogType === 'edit' ? '编辑工作流' : '新增工作流'">
@ -139,12 +158,14 @@
</el-dialog>
</div>
</template>
<script src="https://d3js.org/d3.v4.min.js"></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 vueJsonEditor from 'vue-json-editor'
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import dagreD3 from 'dagre-d3'
import * as d3 from 'd3'
const defaultworkflow = {
name: "",
number: "",
@ -163,6 +184,7 @@ export default {
title_template:'',
content_template:'',
},
limitedWatch:false,
view_permission_check:false,
hasJsonFlag:true, // json是否验证通过
hasJsonFlag1:true, // json是否验证通过
@ -179,6 +201,8 @@ export default {
listLoading: true,
dialogVisible: false,
dialogType: "new",
watchedName:'',
watchedCreateTime:'',
rule1: {
name: [{ 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) {
// console.log('更改value:', value);
// 实时保存
@ -349,3 +463,51 @@ export default {
},
};
</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>

386
hb_client/src/views/workflow/ticket.vue
View File

@ -62,7 +62,7 @@
<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-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>
</el-table-column>
</el-table>
@ -106,8 +106,6 @@
<el-table-column align="center" label="操作">
<template slot-scope="scope">
<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>
</el-table-column>
</el-table>
@ -152,7 +150,7 @@
<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-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>
</el-table-column>
</el-table>
@ -195,9 +193,8 @@
</el-table-column>
<el-table-column align="center" label="操作">
<template slot-scope="scope">
<el-link v-if="scope.row.act_state==4" 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 type="danger" @click="handleDetail(scope)">处理</el-link>-->
<el-link type="danger" @click="handlePicture(scope)">查看流程图</el-link>
<el-link v-if="scope.row.act_state==1" type="danger" @click="handleDetail(scope)">处理</el-link>
</template>
</el-table-column>
</el-table>
@ -212,13 +209,19 @@
<div class="svgMark" v-if="dialogVisible" @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>
<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>
<svg height=600 id="mySvg">
<!--<g id="svgG"></g>-->
<!--<rect></rect>-->
<svg height=800 id="mySvg" style="width:100%!important;">
</svg>
</div>
</div>
@ -307,7 +310,7 @@
</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="内容" />
<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
@ -335,7 +338,7 @@
</el-form>
</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>
<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-dialog>
<el-dialog :visible.sync="limitedAdd" title="新增工单">
@ -433,12 +436,10 @@
</div>
</template>
<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>
import { upUrl, upHeaders } from "@/api/file";
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 dagreD3 from 'dagre-d3'
import * as d3 from 'd3'
@ -449,6 +450,7 @@
data(){
return{
step:4,
sort:0,
total:0,
actives:4,
ticketId:0,
@ -472,10 +474,11 @@
handleRule:{},
upUrl: upUrl(),
upHeaders: upHeaders(),
stateSteps:0,
keyword:'',
workflow:'',
watchedName:'',
watchedCreateTime:'',
logs:[],
tickets:[],
workflows:[],
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) {
console.log(tab, event);
console.log(this.pageForm.category);
@ -542,7 +554,6 @@
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;
@ -610,9 +621,7 @@
this.addForm.transition = res.data[i].id;
}
}
})
},
handlePreview(file) {
if ("url" in file) {
@ -652,138 +661,210 @@
},
handlePicture(scope){
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.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;
getWfFlowSteps( scope.row.id).then((res)=>{
// that.getStates();
// that.getTicketFlowlogs(ticketId);
getWfFlowSteps( ticketId).then((res)=>{
if(res.data){
debugger;
//流程步骤数组
that.flowSteps = res.data;
getTicketDetail( ticketId).then((res)=>{
if(res.data){
debugger;
that.tooltip = that.createTooltip();
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]);
that.limitedStep = true;
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: 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;
ticketHandle(this.ticketId,this.handleForm).then(res=>{
if (res.data){
@ -861,4 +942,37 @@
margin-right: 10px;
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>

462
hb_client/src/views/workflow/ticketHandle.vue Normal file
View File

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

27
hb_client/src/views/workflow/transitions.vue
View File

@ -97,10 +97,14 @@
</el-select>
</el-form-item>
<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 label="属性类型" prop="attribute_type">
<el-select style="width: 100%" v-model="wftransition.attribute_type" placeholder="请选择">
<el-option
v-for="item in options"
@ -126,13 +130,13 @@
<script>
import {getWfStateList, getWfTransitionList, createWfTransition,updateWfTransition,deleteWfTransition } from "@/api/workflow";
import checkPermission from "@/utils/permission";
import vueJsonEditor from 'vue-json-editor'
import { genTree } from "@/utils"
const defaultwftransition = {
name: "",
};
export default {
components: { },
components: { vueJsonEditor },
name: "TST",
props: ["ID"],
data() {
@ -211,13 +215,11 @@ export default {
this.wftransition = Object.assign({}, scope.row); // copy obj
this.dialogType = "edit";
this.dialogVisible = true;
this.$nextTick(() => {
this.$refs["Form"].clearValidate();
});
// this.wftransition.condition_expression = JSON.stringify(scope.row.condition_expression)
// this.$nextTick(() => {
// this.$refs["Form"].clearValidate();
// });
},
async confirm(form) {
this.$refs[form].validate((valid) => {
if (valid) {
@ -245,8 +247,6 @@ export default {
}
});
},
handleDelete(scope) {
this.$confirm("确认删除?", "警告", {
confirmButtonText: "确认",
@ -262,9 +262,6 @@ export default {
console.error(err);
});
},
},
};
</script>