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 data
}) })
} }
//接单
export function ticketAccpet(id,data) {
return request({
url: `/wf/ticket/${id}/accpet/`,
method: 'post',
data
})
}
//工单详情 //工单详情
export function getTicketDetail(id) { export function getTicketDetail(id) {
return request({ return request({

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

@ -148,6 +148,28 @@
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </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> </el-form>
<div style="text-align: right"> <div style="text-align: right">
<el-button type="danger" @click="dialogVisible = false">取消</el-button> <el-button type="danger" @click="dialogVisible = false">取消</el-button>
@ -157,7 +179,7 @@
</div> </div>
</template> </template>
<script> <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 { getOrganizationList,getUserList } from "@/api/user";
import checkPermission from "@/utils/permission"; import checkPermission from "@/utils/permission";
const defaultwfstate = { const defaultwfstate = {
@ -177,14 +199,17 @@ export default {
enable_retreat:'', enable_retreat:'',
participant_type:'', participant_type:'',
participant:'', participant:'',
distribute_type:'', distribute_type:'',//分发类型
state_fields:{}//字段状态是否可写
}, },
statusChange:[],
participant:'', participant:'',
participants:[], participants:[],
is_hidden:false, is_hidden:false,
enable_retreat:false, enable_retreat:false,
staffs:[], staffs:[],
departments:[], departments:[],
customfieldList:[],
/*wfstateList: { /*wfstateList: {
count:0 count:0
},*/ },*/
@ -271,6 +296,12 @@ export default {
} }
}); });
getWfCustomfieldList(this.ID).then((response) => {
if (response.data) {
this.customfieldList = response.data;
}
});
}, },
getUser(){ getUser(){
getUserList({}).then(res=>{ getUserList({}).then(res=>{
@ -305,6 +336,17 @@ export default {
this.wfstate = Object.assign({}, scope.row); // copy obj this.wfstate = Object.assign({}, scope.row); // copy obj
this.participants = this.wfstate.participant; this.participants = this.wfstate.participant;
this.participant = 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.wfstate.distribute_type = this.wfstate.distribute_type.toString();
this.dialogType = "edit"; this.dialogType = "edit";
this.dialogVisible = true; this.dialogVisible = true;
@ -312,12 +354,27 @@ export default {
this.$refs["Form"].clearValidate(); this.$refs["Form"].clearValidate();
}); });
}, },
addWordStatusChange(){
this.statusChange.push({name:'',value:''})
},
removeStatusChange(index){
this.statusChange.splice(index, 1)
},
//编辑新建 //编辑新建
async confirm(form) { async confirm(form) {
this.$refs[form].validate((valid) => { this.$refs[form].validate((valid) => {
if (valid) { if (valid) {
const isEdit = this.dialogType === "edit"; const isEdit = this.dialogType === "edit";
// this.wfstate.participant = 1; // 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; this.wfstate.participant = this.participant!==''?this.participant:this.participants;
if (isEdit) { if (isEdit) {
updateWfState(this.wfstate.id, this.wfstate).then((res) => { 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> <el-button type="primary" icon="el-icon-plus" @click="handleCreate">新增</el-button>
</div> </div>
</el-card> </el-card>
<el-tabs v-model="activeName" type="border-card" @tab-click="handleClick"> <el-tabs v-model="pageForm.category" type="border-card" @tab-click="handleClick">
<el-tab-pane label="待处理" name="first"> <el-tab-pane label="待处理" name="duty">
<el-table :data="tickets" <el-table :data="tickets"
border fit stripe border fit stripe
style="width: 100%" style="width: 100%"
@ -60,8 +60,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="stateSteps==scope.row.act_state" type="danger" @click="handlePicture(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 type="danger" @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="danger" @click="handleDetail(scope)">处理</el-link>-->
</template> </template>
</el-table-column> </el-table-column>
@ -73,15 +73,29 @@
@pagination="getList" @pagination="getList"
/> />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="已处理" name="second"> <el-tab-pane label="我处理" name="worked">
<el-table :data="tickets" border fit stripe style="width: 100%" > <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 label="工单标题" min-width="100" prop="title">
</el-table-column> </el-table-column>
<el-table-column label="当前状态" min-width="100"> <el-table-column label="当前状态" min-width="100">
<template slot-scope="scope"> <template slot-scope="scope">
<span v-if="scope.row.act_state===1">已提交</span> <el-tag v-if="scope.row.act_state==0" label="草稿中" value="scope.row.act_state">草稿中</el-tag>
<span v-else-if="scope.row.act_state===4">已完成</span> <el-tag v-else-if="scope.row.act_state==1" label="进行中" value="scope.row.act_state">进行中</el-tag>
<span v-else>审批中</span> <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> </template>
</el-table-column> </el-table-column>
<el-table-column label="类型" min-width="100"> <el-table-column label="类型" min-width="100">
@ -91,8 +105,9 @@
</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="stateSteps==scope.row.act_state" type="danger" @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 type="danger" @click="handleDetail(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>
@ -103,17 +118,29 @@
@pagination="getList" @pagination="getList"
/> />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="已发起" name="third"> <el-tab-pane label="我发起" name="owner">
<!--<el-button type="primary" icon="el-icon-plus" @click="handleusedstepCreate"--> <el-table :data="tickets"
<!--&gt;新增</el-button>--> border fit stripe
<el-table :data="tickets" border fit stripe style="width: 100%" > 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 label="工单标题" min-width="100" prop="title">
</el-table-column> </el-table-column>
<el-table-column label="当前状态" min-width="100"> <el-table-column label="当前状态" min-width="100">
<template slot-scope="scope"> <template slot-scope="scope">
<span v-if="scope.row.act_state===1">已提交</span> <el-tag v-if="scope.row.act_state==0" label="草稿中" value="scope.row.act_state">草稿中</el-tag>
<span v-else-if="scope.row.act_state===4">已完成</span> <el-tag v-else-if="scope.row.act_state==1" label="进行中" value="scope.row.act_state">进行中</el-tag>
<span v-else>审批中</span> <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> </template>
</el-table-column> </el-table-column>
<el-table-column label="类型" min-width="100"> <el-table-column label="类型" min-width="100">
@ -123,7 +150,9 @@
</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 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> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -134,15 +163,29 @@
@pagination="getList" @pagination="getList"
/> />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="抄送我" name="fourth"> <el-tab-pane label="抄送我" name="relation">
<el-table :data="tickets" border fit stripe style="width: 100%" > <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 label="工单标题" min-width="100" prop="title">
</el-table-column> </el-table-column>
<el-table-column label="当前状态" min-width="100"> <el-table-column label="当前状态" min-width="100">
<template slot-scope="scope"> <template slot-scope="scope">
<span v-if="scope.row.act_state===1">已提交</span> <el-tag v-if="scope.row.act_state==0" label="草稿中" value="scope.row.act_state">草稿中</el-tag>
<span v-else-if="scope.row.act_state===4">已完成</span> <el-tag v-else-if="scope.row.act_state==1" label="进行中" value="scope.row.act_state">进行中</el-tag>
<span v-else>审批中</span> <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> </template>
</el-table-column> </el-table-column>
<el-table-column label="类型" min-width="100"> <el-table-column label="类型" min-width="100">
@ -152,8 +195,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="stateSteps==scope.row.act_state" type="danger" @click="handlePicture(scope)">查看流程图</el-link> <el-link v-if="scope.row.act_state==4" type="danger" @click="handlePicture(scope)">查看流程图</el-link>
<el-link v-else type="danger" @click="handleDetail(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="handleDetail(scope)">处理</el-link>-->
</template> </template>
</el-table-column> </el-table-column>
@ -173,9 +216,9 @@
<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="svg"> <svg height=600 id="mySvg">
<g id="svgG"/> <!--<g id="svgG"></g>-->
<rect/> <!--<rect></rect>-->
</svg> </svg>
</div> </div>
</div> </div>
@ -186,15 +229,110 @@
</el-step> </el-step>
</el-steps> </el-steps>
<el-row> <el-row>
<el-col :span="1" style="height: 1px;"></el-col> <el-form ref="Form" :model="handleForm" label-width="100px" label-position="right" :rules="handleRule">
<el-col :span="11"> <el-col :span="12">
<div class="listItem"><span>流水号：</span>{{ticketDetail.sn}}</div> <el-form-item label="标题" style="margin-bottom: 0">
<div class="listItem"><span>创建时间：</span>{{ticketDetail.create_time}}</div> <span>{{ticketDetail.title}}</span>
</el-col> </el-form-item>
<el-col :span="11"> </el-col>
<div class="listItem"><span>标题：</span>{{ticketDetail.title}}</div> <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> </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.name}}</el-button>
@ -219,13 +357,13 @@
<template v-if="item.field_type=='string'"> <template v-if="item.field_type=='string'">
<el-input v-model="item.default_value" :placeholder="item.description" /> <el-input v-model="item.default_value" :placeholder="item.description" />
</template> </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,'')" /> <el-input v-model="item.default_value" type="number" :placeholder="item.description" oninput="value=value.replace(/[^\d]/g,'')" />
</template> </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" /> <el-input v-model="item.default_value" type="number" :placeholder="item.description" />
</template> </template>
<template v-if="item.field_type=='date'"> <template v-if="item.field_type==='date'">
<el-date-picker <el-date-picker
v-model="item.default_value" v-model="item.default_value"
type="date" type="date"
@ -235,7 +373,7 @@
> >
</el-date-picker> </el-date-picker>
</template> </template>
<template v-if="item.field_type=='datetime'"> <template v-if="item.field_type==='datetime'">
<el-date-picker <el-date-picker
v-model="item.default_value" v-model="item.default_value"
type="datetime" type="datetime"
@ -245,7 +383,7 @@
> >
</el-date-picker> </el-date-picker>
</template> </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-select style="width: 100%" v-model="item.default_value" placeholder="请选择">
<el-option <el-option
v-for="item1 in item.field_choice" v-for="item1 in item.field_choice"
@ -256,7 +394,7 @@
</el-option> </el-option>
</el-select> </el-select>
</template> </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-select style="width: 100%" multiple v-model="item.default_value" placeholder="请选择">
<el-option <el-option
v-for="item1 in item.field_choice" v-for="item1 in item.field_choice"
@ -267,10 +405,10 @@
</el-option> </el-option>
</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="item.default_value" placeholder="指导书内容" /> <el-input type="textarea" :rows="3" v-model="item.default_value" placeholder="内容" />
</template> </template>
<template v-if="item.field_type=='file'"> <template v-if="item.field_type==='file'">
<el-upload <el-upload
ref="upload" ref="upload"
:action="upUrl" :action="upUrl"
@ -295,9 +433,11 @@
</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,getWfTransitionList, import {getWorkflowList,getWfCustomfieldList,createTicket,getWfStateList,getTickets,ticketAccpet,getWfTransitionList,
ticketHandle,getWfFlowSteps,getTicketDetail,getTicketTransitions } from "@/api/workflow"; ticketHandle,getWfFlowSteps,getTicketDetail,getTicketTransitions } from "@/api/workflow";
import Pagination from "@/components/Pagination"; import Pagination from "@/components/Pagination";
import dagreD3 from 'dagre-d3' import dagreD3 from 'dagre-d3'
@ -316,6 +456,7 @@
page:1, page:1,
page_size:20, page_size:20,
workflow:'', workflow:'',
category:'duty',
}, },
addForm:{ addForm:{
title:'', title:'',
@ -323,10 +464,16 @@
ticket_data:{}, ticket_data:{},
transition:'' transition:''
}, },
handleForm:{
transition:'',
ticket_data:{},
suggestion:'',
},
handleRule:{},
upUrl: upUrl(), upUrl: upUrl(),
upHeaders: upHeaders(), upHeaders: upHeaders(),
stateSteps:0, stateSteps:0,
activeName:'first',
keyword:'', keyword:'',
workflow:'', workflow:'',
tickets:[], tickets:[],
@ -370,25 +517,6 @@
this.getList(); this.getList();
this.getStates(); this.getStates();
this.getWorkFlow(); 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:{ methods:{
getList(){ getList(){
@ -403,20 +531,11 @@
}, },
handleClick(tab, event) { handleClick(tab, event) {
console.log(tab, event); console.log(tab, event);
console.log(this.pageForm.category);
debugger; debugger;
//page、pageSize、total、tickets都要发生变化 this.getList();
let paneName = tab.paneName;
this.activeName = paneName;
if(paneName=='first'){
}else if(paneName=='second'){
}else if(paneName=='third'){
}else if(paneName=='fourth'){
}
}, },
//获取工作流所有状态
getStates(){ getStates(){
if(this.pageForm.workflow!==''){ if(this.pageForm.workflow!==''){
getWfStateList(this.pageForm.workflow).then((response) => { getWfStateList(this.pageForm.workflow).then((response) => {
@ -437,6 +556,7 @@
}); });
} }
}, },
//获取工作流
getWorkFlow(){ getWorkFlow(){
let listForm = {page:0}; let listForm = {page:0};
getWorkflowList(listForm).then((response) => { getWorkflowList(listForm).then((response) => {
@ -445,6 +565,7 @@
} }
}); });
}, },
//获取过程标记
getEdges(nodes){ getEdges(nodes){
let edge = []; let edge = [];
for(let i=1;i<nodes.length;i++){ for(let i=1;i<nodes.length;i++){
@ -531,10 +652,13 @@
}, },
handlePicture(scope){ handlePicture(scope){
let that = this; let that = this;
this.dialogVisible = true;
that.pageForm.workflow = scope.row.workflow;
// that.getStates();
getWfFlowSteps( scope.row.id).then((res)=>{ getWfFlowSteps( scope.row.id).then((res)=>{
if(res.data){ if(res.data){
that.flowSteps = res.data; that.flowSteps = res.data;
getTicketDetail( ticketId).then((res)=>{ getTicketDetail( scope.row.id).then((res)=>{
if(res.data){ if(res.data){
that.ticketDetail = res.data; that.ticketDetail = res.data;
let state = res.data.state; let state = res.data.state;
@ -542,66 +666,96 @@
return item.id==state; return item.id==state;
}) })
this.actives = that.flowSteps.indexOf(dat[0]); this.actives = that.flowSteps.indexOf(dat[0]);
that.limitedStep = true;
} }
}); });
} }
}); });
// this.$router.push({name:"test"})
this.dialogVisible = true;
//获取D3
this.$nextTick(()=>{ this.$nextTick(()=>{
var g = new dagreD3.graphlib.Graph().setGraph({ getWfStateList(this.pageForm.workflow).then((response) => {
align: 'DL', if (response.data) {
nodesep: 100,
edgesep: 100, let nodes = [];
ranksep: 50, let res = response.data;
marginx: 50, this.stateSteps = res.length;
marginy: 50, for(let i=0;i<res.length;i++){
}); let obj = new Object();
// 添加节点 obj.id = res[i].id;
this.nodes.forEach((item) => { obj.label = res[i].name;
g.setNode(item.id, { obj.shape = res[i].type===0? 'diamond':'rect';
// 节点标签 nodes.push(obj)
label: item.label, }
// 节点形状 that.nodes = nodes;
shape: item.shape, let edge = [];
toolText: item.label, for(let i=1;i<nodes.length;i++){
//节点样式 let obj = new Object();
style: "fill:#fff;stroke:#000", obj.source = nodes[i-1].id;
// 节点样式 obj.target = nodes[i].id;
labelStyle: "fill:#000;", obj.label = i>1?'同意':'';
width: 83, edge.push(obj);
height: 40, }
rx :5, that.edges = edge;
ry :5 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) => {
this.edges.forEach(item => { g.setNode(item.id, {
g.setEdge(item.source, item.target, { // 节点标签
// 边标签 label: item.label,
label: item.label, // 节点形状
// 边样式 shape: item.shape,
style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px" // 根据后台数据来改变连线的颜色 toolText: item.label,
//节点样式
style: "fill:#fff;stroke:#000",
// 节点样式
labelStyle: "fill:#000;",
width: 83,
height: 40,
rx :5,
ry :5
});
}); });
}); // 链接关系
g.nodes().forEach(function (v) { this.edges.forEach(item => {
console.log("Node " + v + ": " + JSON.stringify(g.node(v))); g.setEdge(item.source, item.target, {
}); // 边标签
g.edges().forEach(function (e) { label: item.label,
console.log("Edge " + e.v + " -> " + e.w + ": " + JSON.stringify(g.edge(e))); // 边样式
}); style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px" // 根据后台数据来改变连线的颜色
// 创建渲染器 });
let render = new dagreD3.render(); });
// 选择 svg 并添加一个g元素作为绘图容器. g.nodes().forEach(function (v) {
let svg = d3.select('svg'); console.log("Node " + v + ": " + JSON.stringify(g.node(v)));
let svgGroup = svg.select('g'); });
// 在绘图容器上运行渲染器生成流程图. g.edges().forEach(function (e) {
render(d3.select("svg g"), g); 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){ handleDetail(scope){
// this.limitedStep = true; // this.limitedStep = true;
let that = this; let that = this;
@ -614,16 +768,9 @@
if(res.data){ if(res.data){
that.ticketDetail = res.data; that.ticketDetail = res.data;
let state = res.data.state; let state = res.data.state;
debugger;
console.log(state)
console.log(that.flowSteps)
debugger;
let dat = that.flowSteps.filter((item)=>{ let dat = that.flowSteps.filter((item)=>{
return item.id==state; return item.id==state;
}) })
console.log(dat)
console.log(that.flowSteps.indexOf(dat[0]))
debugger;
this.actives = that.flowSteps.indexOf(dat[0]); this.actives = that.flowSteps.indexOf(dat[0]);
that.limitedStep = true; that.limitedStep = true;
} }
@ -636,13 +783,23 @@
}) })
}, },
operationSubmit(){ operationSubmit(){
let transition = {transition:this.operationBtn[0].id,ticket_data:this.ticketDetail.ticket_data}; this.handleForm.transition = this.operationBtn[0].id;
ticketHandle(this.ticketId,transition).then(res=>{ this.handleForm.ticket_data = this.ticketDetail.ticket_data;
ticketHandle(this.ticketId,this.handleForm).then(res=>{
if (res.data){ if (res.data){
this.limitedStep = false; this.limitedStep = false;
} }
}) })
}, },
//接单
handleGetTicket(scope){
let ticketId = scope.row.id;
ticketAccpet(ticketId,{}).then(res=>{
if(res.code===200){
this.getList();
}
})
},
stepclick(){}, stepclick(){},
closeMark(){ closeMark(){
this.dialogVisible = false; this.dialogVisible = false;