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

workflowRefresh

This commit is contained in:
shijing 2021-10-08 08:39:16 +08:00
parent 12c0ad0267
commit 35ab5f1c79
3 changed files with 363 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -154,6 +154,14 @@ export function createTicket(data) {
data
})
}
//接单
export function ticketAccpet(id,data) {
return request({
url: `/wf/ticket/${id}/accpet/`,
method: 'post',
data
})
}
//工单详情
export function getTicketDetail(id) {
return request({

61
hb_client/src/views/workflow/state.vue
View File

@ -148,6 +148,28 @@
</el-option>
</el-select>
</el-form-item>
<el-form-item label="字段状态">
<el-button @click="addWordStatusChange">添加修改</el-button>
<el-row v-for="(item,$index) in statusChange" :key="item+$index" style="margin-top: 10px">
<el-col :span="11">
<el-select style="width: 100%" v-model="item.name" placeholder="请选择字段">
<el-option v-for="item in customfieldList" :key="item.id" :label="item.field_name" :value="item.field_key">
</el-option>
</el-select>
</el-col>
<el-col :span="1" style="height: 1px;"></el-col>
<el-col :span="8">
<el-select style="width: 100%" v-model="item.value" placeholder="请选择状态">
<el-option label="只读" value="1"></el-option>
<el-option label="必填" value="2"></el-option>
<el-option label="可选" value="3"></el-option>
</el-select>
</el-col>
<el-col :span="2" style="text-align: center" v-if="$index!==0">
<i class="el-icon-remove-outline" @click.prevent="removeStatusChange($index)" style="color: red;font-size: 16px;"></i>
</el-col>
</el-row>
</el-form-item>
</el-form>
<div style="text-align: right">
<el-button type="danger" @click="dialogVisible = false">取消</el-button>
@ -157,7 +179,7 @@
</div>
</template>
<script>
import { getWfStateList, createWfState,updateWfState,deleteWfState } from "@/api/workflow";
import { getWfStateList, createWfState,updateWfState,deleteWfState,getWfCustomfieldList } from "@/api/workflow";
import { getOrganizationList,getUserList } from "@/api/user";
import checkPermission from "@/utils/permission";
const defaultwfstate = {
@ -177,14 +199,17 @@ export default {
enable_retreat:'',
participant_type:'',
participant:'',
distribute_type:'',
distribute_type:'',//分发类型
state_fields:{}//字段状态是否可写
},
statusChange:[],
participant:'',
participants:[],
is_hidden:false,
enable_retreat:false,
staffs:[],
departments:[],
customfieldList:[],
/*wfstateList: {
count:0
},*/
@ -271,6 +296,12 @@ export default {
}
});
getWfCustomfieldList(this.ID).then((response) => {
if (response.data) {
this.customfieldList = response.data;
}
});
},
getUser(){
getUserList({}).then(res=>{
@ -305,6 +336,17 @@ export default {
this.wfstate = Object.assign({}, scope.row); // copy obj
this.participants = this.wfstate.participant;
this.participant = this.wfstate.participant;
/////
debugger;
console.log(this.wfstate.state_fields);
let arr = [];
for (let pro in this.wfstate.state_fields) {
let obj = new Object();
obj.name = pro;
obj.value = this.wfstate.state_fields[pro];
arr.push(obj)
}
this.statusChange = arr;
this.wfstate.distribute_type = this.wfstate.distribute_type.toString();
this.dialogType = "edit";
this.dialogVisible = true;
@ -312,12 +354,27 @@ export default {
this.$refs["Form"].clearValidate();
});
},
addWordStatusChange(){
this.statusChange.push({name:'',value:''})
},
removeStatusChange(index){
this.statusChange.splice(index, 1)
},
//编辑新建
async confirm(form) {
this.$refs[form].validate((valid) => {
if (valid) {
const isEdit = this.dialogType === "edit";
// this.wfstate.participant = 1;
let state_fields = {};
if(this.statusChange.length>0){
for(let i=0;i<this.statusChange.length;i++){
state_fields[this.statusChange[i].name] = this.statusChange[i].value;
}
}
debugger;
console.log(state_fields);
this.wfstate.state_fields = state_fields;
this.wfstate.participant = this.participant!==''?this.participant:this.participants;
if (isEdit) {
updateWfState(this.wfstate.id, this.wfstate).then((res) => {

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

@ -27,8 +27,8 @@
<el-button type="primary" icon="el-icon-plus" @click="handleCreate">新增</el-button>
</div>
</el-card>
<el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
<el-tab-pane label="待处理" name="first">
<el-tabs v-model="pageForm.category" type="border-card" @tab-click="handleClick">
<el-tab-pane label="待处理" name="duty">
<el-table :data="tickets"
border fit stripe
style="width: 100%"
@ -60,8 +60,8 @@
</el-table-column>
<el-table-column align="center" label="操作">
<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>
<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>-->
</template>
</el-table-column>
@ -73,15 +73,29 @@
@pagination="getList"
/>
</el-tab-pane>
<el-tab-pane label="已处理" name="second">
<el-table :data="tickets" border fit stripe style="width: 100%" >
<el-tab-pane label="我处理" name="worked">
<el-table :data="tickets"
border fit stripe
style="width: 100%"
height="100"
highlight-current-row
v-el-height-adaptive-table="{bottomOffset: 60}">
<el-table-column label="工单标题" min-width="100" prop="title">
</el-table-column>
<el-table-column label="当前状态" min-width="100">
<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>
<el-tag v-if="scope.row.act_state==0" label="草稿中" value="scope.row.act_state">草稿中</el-tag>
<el-tag v-else-if="scope.row.act_state==1" label="进行中" value="scope.row.act_state">进行中</el-tag>
<el-tag v-else-if="scope.row.act_state==2" label="被退回" value="scope.row.act_state">被退回</el-tag>
<el-tag v-else-if="scope.row.act_state==3" label="被撤回" value="scope.row.act_state">被撤回</el-tag>
<el-tag v-else-if="scope.row.act_state==4" label="已完成" value="scope.row.act_state">已完成</el-tag>
<el-tag v-else-if="scope.row.act_state==5" label="已关闭" value="scope.row.act_state">已关闭</el-tag>
</template>
</el-table-column>
<el-table-column label="进行状态" min-width="100">
<template slot-scope="scope">
<span v-if="scope.row.state_.type==0">{{scope.row.state_.name}}中</span>
<span v-else>已{{scope.row.state_.name}}</span>
</template>
</el-table-column>
<el-table-column label="类型" min-width="100">
@ -91,8 +105,9 @@
</el-table-column>
<el-table-column align="center" label="操作">
<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>
<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>
@ -103,17 +118,29 @@
@pagination="getList"
/>
</el-tab-pane>
<el-tab-pane label="已发起" name="third">
<!--<el-button type="primary" icon="el-icon-plus" @click="handleusedstepCreate"-->
<!--&gt;新增</el-button>-->
<el-table :data="tickets" border fit stripe style="width: 100%" >
<el-tab-pane label="我发起" name="owner">
<el-table :data="tickets"
border fit stripe
style="width: 100%"
height="100"
highlight-current-row
v-el-height-adaptive-table="{bottomOffset: 60}">
<el-table-column label="工单标题" min-width="100" prop="title">
</el-table-column>
<el-table-column label="当前状态" min-width="100">
<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>
<el-tag v-if="scope.row.act_state==0" label="草稿中" value="scope.row.act_state">草稿中</el-tag>
<el-tag v-else-if="scope.row.act_state==1" label="进行中" value="scope.row.act_state">进行中</el-tag>
<el-tag v-else-if="scope.row.act_state==2" label="被退回" value="scope.row.act_state">被退回</el-tag>
<el-tag v-else-if="scope.row.act_state==3" label="被撤回" value="scope.row.act_state">被撤回</el-tag>
<el-tag v-else-if="scope.row.act_state==4" label="已完成" value="scope.row.act_state">已完成</el-tag>
<el-tag v-else-if="scope.row.act_state==5" label="已关闭" value="scope.row.act_state">已关闭</el-tag>
</template>
</el-table-column>
<el-table-column label="进行状态" min-width="100">
<template slot-scope="scope">
<span v-if="scope.row.state_.type==0">{{scope.row.state_.name}}中</span>
<span v-else>已{{scope.row.state_.name}}</span>
</template>
</el-table-column>
<el-table-column label="类型" min-width="100">
@ -123,7 +150,9 @@
</el-table-column>
<el-table-column align="center" label="操作">
<template slot-scope="scope">
<el-link type="danger" @click="handleDetail(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-if="scope.row.act_state==4" type="success" @click="handlePicture(scope)">查看流程图</el-link>
</template>
</el-table-column>
</el-table>
@ -134,15 +163,29 @@
@pagination="getList"
/>
</el-tab-pane>
<el-tab-pane label="抄送我" name="fourth">
<el-table :data="tickets" border fit stripe style="width: 100%" >
<el-tab-pane label="抄送我" name="relation">
<el-table :data="tickets"
border fit stripe
style="width: 100%"
height="100"
highlight-current-row
v-el-height-adaptive-table="{bottomOffset: 60}">
<el-table-column label="工单标题" min-width="100" prop="title">
</el-table-column>
<el-table-column label="当前状态" min-width="100">
<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>
<el-tag v-if="scope.row.act_state==0" label="草稿中" value="scope.row.act_state">草稿中</el-tag>
<el-tag v-else-if="scope.row.act_state==1" label="进行中" value="scope.row.act_state">进行中</el-tag>
<el-tag v-else-if="scope.row.act_state==2" label="被退回" value="scope.row.act_state">被退回</el-tag>
<el-tag v-else-if="scope.row.act_state==3" label="被撤回" value="scope.row.act_state">被撤回</el-tag>
<el-tag v-else-if="scope.row.act_state==4" label="已完成" value="scope.row.act_state">已完成</el-tag>
<el-tag v-else-if="scope.row.act_state==5" label="已关闭" value="scope.row.act_state">已关闭</el-tag>
</template>
</el-table-column>
<el-table-column label="进行状态" min-width="100">
<template slot-scope="scope">
<span v-if="scope.row.state_.type==0">{{scope.row.state_.name}}中</span>
<span v-else>已{{scope.row.state_.name}}</span>
</template>
</el-table-column>
<el-table-column label="类型" min-width="100">
@ -152,8 +195,8 @@
</el-table-column>
<el-table-column align="center" label="操作">
<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>
<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>-->
</template>
</el-table-column>
@ -173,9 +216,9 @@
<el-step :title="item.name" v-for="item in flowSteps " :key="item.id">
</el-step>
</el-steps>
<svg height=600 id="svg">
<g id="svgG"/>
<rect/>
<svg height=600 id="mySvg">
<!--<g id="svgG"></g>-->
<!--<rect></rect>-->
</svg>
</div>
</div>
@ -186,15 +229,110 @@
</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>{{ticketDetail.create_time}}</div>
</el-col>
<el-col :span="11">
<div class="listItem"><span>标题：</span>{{ticketDetail.title}}</div>
<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-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'" style="margin-bottom: 0">
<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"
:on-remove="handleRemove"
: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-col>
<el-form-item label="审批意见">
<el-input v-model="handleForm.suggestion" placeholder="审批意见"/>
</el-form-item>
</el-col>
</el-col>
</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>
@ -219,13 +357,13 @@
<template v-if="item.field_type=='string'">
<el-input v-model="item.default_value" :placeholder="item.description" />
</template>
<template v-if="item.field_type=='int'">
<template v-if="item.field_type==='int'">
<el-input v-model="item.default_value" type="number" :placeholder="item.description" oninput="value=value.replace(/[^\d]/g,'')" />
</template>
<template v-if="item.field_type=='float'">
<template v-if="item.field_type==='float'">
<el-input v-model="item.default_value" type="number" :placeholder="item.description" />
</template>
<template v-if="item.field_type=='date'">
<template v-if="item.field_type==='date'">
<el-date-picker
v-model="item.default_value"
type="date"
@ -235,7 +373,7 @@
>
</el-date-picker>
</template>
<template v-if="item.field_type=='datetime'">
<template v-if="item.field_type==='datetime'">
<el-date-picker
v-model="item.default_value"
type="datetime"
@ -245,7 +383,7 @@
>
</el-date-picker>
</template>
<template v-if="item.field_type=='select'">
<template v-if="item.field_type==='select'">
<el-select style="width: 100%" v-model="item.default_value" placeholder="请选择">
<el-option
v-for="item1 in item.field_choice"
@ -256,7 +394,7 @@
</el-option>
</el-select>
</template>
<template v-if="item.field_type=='selects'">
<template v-if="item.field_type==='selects'">
<el-select style="width: 100%" multiple v-model="item.default_value" placeholder="请选择">
<el-option
v-for="item1 in item.field_choice"
@ -267,10 +405,10 @@
</el-option>
</el-select>
</template>
<template v-if="item.field_type=='textarea'">
<el-input type="textarea" :rows="3" v-model="item.default_value" placeholder="指导书内容" />
<template v-if="item.field_type==='textarea'">
<el-input type="textarea" :rows="3" v-model="item.default_value" placeholder="内容" />
</template>
<template v-if="item.field_type=='file'">
<template v-if="item.field_type==='file'">
<el-upload
ref="upload"
:action="upUrl"
@ -295,9 +433,11 @@
</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,getWfTransitionList,
import {getWorkflowList,getWfCustomfieldList,createTicket,getWfStateList,getTickets,ticketAccpet,getWfTransitionList,
ticketHandle,getWfFlowSteps,getTicketDetail,getTicketTransitions } from "@/api/workflow";
import Pagination from "@/components/Pagination";
import dagreD3 from 'dagre-d3'
@ -316,6 +456,7 @@
page:1,
page_size:20,
workflow:'',
category:'duty',
},
addForm:{
title:'',
@ -323,10 +464,16 @@
ticket_data:{},
transition:''
},
handleForm:{
transition:'',
ticket_data:{},
suggestion:'',
},
handleRule:{},
upUrl: upUrl(),
upHeaders: upHeaders(),
stateSteps:0,
activeName:'first',
keyword:'',
workflow:'',
tickets:[],
@ -370,25 +517,6 @@
this.getList();
this.getStates();
this.getWorkFlow();
/* 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.pageForm.workflow)
}else{
localStorage.setItem('workflow',this.pageForm.workflow)
}
}else{//无传参
if(workflow){
this.workflow =workflow ;
this.pageForm.workflow =workflow ;
}else{}
}
debugger;
this.getList();
this.getStates();*/
},
methods:{
getList(){
@ -403,20 +531,11 @@
},
handleClick(tab, event) {
console.log(tab, event);
console.log(this.pageForm.category);
debugger;
//page、pageSize、total、tickets都要发生变化
let paneName = tab.paneName;
this.activeName = paneName;
if(paneName=='first'){
}else if(paneName=='second'){
}else if(paneName=='third'){
}else if(paneName=='fourth'){
}
this.getList();
},
//获取工作流所有状态
getStates(){
if(this.pageForm.workflow!==''){
getWfStateList(this.pageForm.workflow).then((response) => {
@ -437,6 +556,7 @@
});
}
},
//获取工作流
getWorkFlow(){
let listForm = {page:0};
getWorkflowList(listForm).then((response) => {
@ -445,6 +565,7 @@
}
});
},
//获取过程标记
getEdges(nodes){
let edge = [];
for(let i=1;i<nodes.length;i++){
@ -531,10 +652,13 @@
},
handlePicture(scope){
let that = this;
this.dialogVisible = true;
that.pageForm.workflow = scope.row.workflow;
// that.getStates();
getWfFlowSteps( scope.row.id).then((res)=>{
if(res.data){
that.flowSteps = res.data;
getTicketDetail( ticketId).then((res)=>{
getTicketDetail( scope.row.id).then((res)=>{
if(res.data){
that.ticketDetail = res.data;
let state = res.data.state;
@ -542,66 +666,96 @@
return item.id==state;
})
this.actives = that.flowSteps.indexOf(dat[0]);
that.limitedStep = true;
}
});
}
});
// this.$router.push({name:"test"})
this.dialogVisible = true;
//获取D3
this.$nextTick(()=>{
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
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.edges.forEach(item => {
g.setEdge(item.source, item.target, {
// 边标签
label: item.label,
// 边样式
style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px" // 根据后台数据来改变连线的颜色
// 添加节点
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
});
});
});
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('svg');
let svgGroup = svg.select('g');
// 在绘图容器上运行渲染器生成流程图.
render(d3.select("svg g"), g);
// 链接关系
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;
@ -614,16 +768,9 @@
if(res.data){
that.ticketDetail = res.data;
let state = res.data.state;
debugger;
console.log(state)
console.log(that.flowSteps)
debugger;
let dat = that.flowSteps.filter((item)=>{
return item.id==state;
})
console.log(dat)
console.log(that.flowSteps.indexOf(dat[0]))
debugger;
this.actives = that.flowSteps.indexOf(dat[0]);
that.limitedStep = true;
}
@ -636,13 +783,23 @@
})
},
operationSubmit(){
let transition = {transition:this.operationBtn[0].id,ticket_data:this.ticketDetail.ticket_data};
ticketHandle(this.ticketId,transition).then(res=>{
this.handleForm.transition = this.operationBtn[0].id;
this.handleForm.ticket_data = this.ticketDetail.ticket_data;
ticketHandle(this.ticketId,this.handleForm).then(res=>{
if (res.data){
this.limitedStep = false;
}
})
},
//接单
handleGetTicket(scope){
let ticketId = scope.row.id;
ticketAccpet(ticketId,{}).then(res=>{
if(res.code===200){
this.getList();
}
})
},
stepclick(){},
closeMark(){
this.dialogVisible = false;