1009 lines
38 KiB
Python
1009 lines
38 KiB
Python
<template>
|
||
<div class="app-container">
|
||
<el-card style="margin-bottom: 10px">
|
||
<div>
|
||
<el-select v-model="pageForm.workflow" placeholder="工作流" clearable style="width: 200px" class="filter-item" @change="handleFilter">
|
||
<el-option
|
||
v-for="item in workflows"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id"
|
||
/>
|
||
</el-select>
|
||
<el-button
|
||
class="filter-item"
|
||
type="primary"
|
||
icon="el-icon-refresh-left"
|
||
@click="resetFilter"
|
||
>重置</el-button>
|
||
<el-button
|
||
class="filter-item"
|
||
type="primary"
|
||
icon="el-icon-search"
|
||
@click="handleFilter"
|
||
>搜索</el-button>
|
||
</div>
|
||
<div style="margin-top: 10px">
|
||
<el-button type="primary" icon="el-icon-plus" @click="handleCreate">新增</el-button>
|
||
</div>
|
||
</el-card>
|
||
<el-tabs v-model="pageForm.category" type="border-card" @tab-click="handleClick">
|
||
<el-tab-pane label="待处理" name="duty">
|
||
<el-table
|
||
v-loading="listLoading"
|
||
:data="tickets"
|
||
border fit stripe
|
||
style="width: 100%"
|
||
height="100"
|
||
highlight-current-row
|
||
v-el-height-adaptive-table="{bottomOffset: 100}"
|
||
>
|
||
<el-table-column label="工单标题" min-width="100" prop="title">
|
||
</el-table-column>
|
||
<el-table-column label="当前状态" min-width="100">
|
||
<template slot-scope="scope">
|
||
<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">
|
||
<template slot-scope="scope">{{ scope.row.workflow_.name }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="创建时间" min-width="100" prop="create_time">
|
||
</el-table-column>
|
||
<el-table-column align="center" label="操作">
|
||
<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.act_state==3)&&scope.row.participant_type!==2&&scope.row.state_.type===0" type="primary" @click="handleDetail(scope)">处理</el-link>
|
||
<el-link v-if="scope.row.state_.type==1&&userId==1" type="danger" @click="handleClose(scope,'2')">关闭</el-link>
|
||
<!--如果state_.retreat为可退回，则显示撤回按钮 state_.type==1处于草稿状态 -->
|
||
<el-link v-if="scope.row.state_.enable_retreat&&userId==scope.row.create_by&&scope.row.state_.type!==1" type="danger" @click="handleClose(scope,'1')">撤回</el-link>
|
||
<el-link type="success" @click="handleDelete(scope)">删除</el-link>
|
||
<el-link type="success" @click="handlePicture(scope)">查看流程图</el-link>
|
||
<el-link type="success" @click="handleLogs(scope)">工单日志</el-link>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<pagination
|
||
:total="total"
|
||
:page.sync="pageForm.page"
|
||
:limit.sync="pageForm.page_size"
|
||
@pagination="getList"
|
||
/>
|
||
</el-tab-pane>
|
||
<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">
|
||
<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">
|
||
<template slot-scope="scope">{{ scope.row.workflow_.name }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="创建时间" min-width="100" prop="create_time">
|
||
</el-table-column>
|
||
<el-table-column align="center" label="操作">
|
||
<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.act_state==3)&&scope.row.participant_type!==2&&scope.row.state_.type===0" type="primary" @click="handleDetail(scope)">处理</el-link>
|
||
-->
|
||
<el-link v-if="scope.row.state_.type==1&&userId==1" type="danger" @click="handleClose(scope,'2')">关闭</el-link>
|
||
<el-link type="success" @click="handlePicture(scope)">查看流程图</el-link>
|
||
<el-link type="success" @click="handleLogs(scope)">工单日志</el-link>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<pagination
|
||
:total="total"
|
||
:page.sync="pageForm.page"
|
||
:limit.sync="pageForm.page_size"
|
||
@pagination="getList"
|
||
/>
|
||
</el-tab-pane>
|
||
<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">
|
||
<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">
|
||
<template slot-scope="scope">{{ scope.row.workflow_.name }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="创建时间" min-width="100" prop="create_time">
|
||
</el-table-column>
|
||
<el-table-column align="center" label="操作">
|
||
<template slot-scope="scope" v-if="scope.row.state_">
|
||
<el-link v-if="scope.row.state_.enable_retreat&&scope.row.state_.type!==1" type="danger" @click="handleClose(scope,'1')">撤回</el-link>
|
||
<el-link v-if="scope.row.state_.type==1" type="danger" @click="handleClose(scope,'2')">关闭</el-link>
|
||
<el-link type="success" @click="handleDelete(scope)">删除</el-link>
|
||
<el-link type="success" @click="handlePicture(scope)">查看流程图</el-link>
|
||
<el-link type="success" @click="handleLogs(scope)">工单日志</el-link>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<pagination
|
||
:total="total"
|
||
:page.sync="pageForm.page"
|
||
:limit.sync="pageForm.page_size"
|
||
@pagination="getList"
|
||
/>
|
||
</el-tab-pane>
|
||
<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">
|
||
<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">
|
||
<template slot-scope="scope">{{ scope.row.workflow_.name }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="创建时间" min-width="100" prop="create_time">
|
||
</el-table-column>
|
||
<el-table-column align="center" label="操作">
|
||
<template slot-scope="scope">
|
||
<el-link type="danger" @click="handlePicture(scope)">查看流程图</el-link>
|
||
<el-link type="success" @click="handleLogs(scope)">工单日志</el-link>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<pagination
|
||
:total="total"
|
||
:page.sync="pageForm.page"
|
||
:limit.sync="pageForm.page_size"
|
||
@pagination="getList"
|
||
/>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
<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>
|
||
<div style="width: 90%;margin: auto;">
|
||
<svg height=800 id="mySvg" style="width:100%!important;">
|
||
</svg>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<el-dialog :visible.sync="limitedRetreat" :title="handleTitle">
|
||
<el-row>
|
||
<el-form ref="Form" :model="handleForm" label-width="100px" label-position="right">
|
||
<el-col :span="1" style="height: 1px;"></el-col>
|
||
<el-col :span="22" style="margin:3vh 0">
|
||
<el-form-item :label="handleLabel">
|
||
<el-input type="textarea" :rows="3" v-model="handleForm.suggestion" placeholder="撤回原因"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-form>
|
||
</el-row>
|
||
<div style="text-align: center">
|
||
<el-button class="filter-item" type="" @click="handleCancel">取消</el-button>
|
||
<el-button class="filter-item" type="primary" @click="handleSubmit">确定</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
<el-dialog :visible.sync="limitedAdd" title="新增工单">
|
||
<el-form ref="Form" :model="addForm" label-width="100px" label-position="right" :rules="rule1">
|
||
<el-form-item label="名称" prop="title">
|
||
<el-input v-model="addForm.title" placeholder="工单名称" />
|
||
</el-form-item>
|
||
<el-form-item label="工作流">
|
||
<el-select v-model="addForm.workflow" placeholder="工作流" @change="handleWorkflowChange">
|
||
<el-option
|
||
v-for="item in workflows"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item :label="item.field_name" v-for="item in customfields" :key="item.id">
|
||
<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'">
|
||
<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'">
|
||
<el-input v-model="item.default_value" type="number" :placeholder="item.description" />
|
||
</template>
|
||
<template v-if="item.field_type==='date'">
|
||
<el-date-picker
|
||
v-model="item.default_value"
|
||
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="item.default_value"
|
||
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="item.default_value" 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="item.default_value" 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="item.default_value" 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-form>
|
||
<div style="text-align: right">
|
||
<el-button type="danger" @click="limitedAdd = false">取消</el-button>
|
||
<el-button type="primary" @click="confirm('Form')">确认</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
<el-dialog :visible.sync="limitedFlowLogs" title="工单日志">
|
||
<el-table :data="floeLogs" fit stripe
|
||
style="width: 100%;border-top:1px solid #EBEEF5;"
|
||
height="100"
|
||
highlight-current-row
|
||
v-el-height-adaptive-table="{bottomOffset: 60}">
|
||
<el-table-column label="工单标题" min-width="100">
|
||
<template slot-scope="scope" v-if="scope.row.ticket_data">
|
||
<span>{{scope.row.ticket_data.title}}中</span>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- <el-table-column label="当前状态" min-width="100">
|
||
<template slot-scope="scope">
|
||
<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" v-if="scope.row.state_">
|
||
<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">
|
||
<template slot-scope="scope" v-if="scope.row.participant_">{{ scope.row.participant_.name }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作意见" min-width="100" prop="suggestion">
|
||
</el-table-column>
|
||
<el-table-column label="更新时间" min-width="100" prop="update_time">
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script src="https://d3js.org/d3.v4.min.js"></script>
|
||
<script>
|
||
import { upUrl, upHeaders } from "@/api/file";
|
||
import {getWorkflowList,getWfCustomfieldList,createTicket,getWfStateList,getTickets,ticketAccpet,getWfTransitionList,
|
||
ticketHandle,getWfFlowSteps,getTicketDetail,getTicketTransitions,getTicketFlowlog,ticketRetreat,ticketClose,ticketDestory} from "@/api/workflow";
|
||
import Pagination from "@/components/Pagination";
|
||
import dagreD3 from 'dagre-d3'
|
||
import * as d3 from 'd3'
|
||
export default {
|
||
name: "ticket",
|
||
components: { Pagination },
|
||
inject:['reload'],
|
||
data(){
|
||
return{
|
||
step:4,
|
||
sort:0,
|
||
total:0,
|
||
actives:4,
|
||
ticketId:0,
|
||
pageForm:{
|
||
page:1,
|
||
page_size:20,
|
||
workflow:'',
|
||
category:'duty',
|
||
},
|
||
addForm:{
|
||
title:'',
|
||
workflow:'',
|
||
ticket_data:{},
|
||
transition:''
|
||
},
|
||
handleForm:{
|
||
suggestion:'',
|
||
},
|
||
handleRule:{},
|
||
upUrl: upUrl(),
|
||
upHeaders: upHeaders(),
|
||
keyword:'',
|
||
workflow:'',
|
||
watchedName:'',
|
||
watchedCreateTime:'',
|
||
logs:[],
|
||
tickets:[],
|
||
workflows:[],
|
||
ticketDetail:{},
|
||
dialogVisible:false,
|
||
listLoading:false,
|
||
limitedStep:false,
|
||
limitedAdd:false,
|
||
limitedRetreat:false,
|
||
limitedFlowLogs:false,
|
||
floeLogs:[],
|
||
nodes: [],
|
||
tooltip:null,
|
||
edges: [],
|
||
fileList:[],
|
||
flowSteps:[],
|
||
operationBtn:[],
|
||
customfields:[],
|
||
transitions:[],
|
||
handleLabel:'撤回原因',
|
||
handleTitle:'工单撤回',
|
||
rule1:{
|
||
title: [{ required: true, message: "请输入", trigger: "blur" }],
|
||
workflow: [{ required: true, message: "选择", trigger: "blur" }]
|
||
}
|
||
,
|
||
}
|
||
},
|
||
mounted(){
|
||
debugger;
|
||
this.userId = sessionStorage.getItem('userId')
|
||
this.workflow = this.$route.params.workflow;
|
||
if(this.workflow){//有传参
|
||
this.pageForm.workflow = parseInt(this.workflow);
|
||
}
|
||
this.getList();
|
||
this.getStates();
|
||
this.getWorkFlow();
|
||
},
|
||
methods:{
|
||
getList(){
|
||
this.listLoading = true;
|
||
getTickets( this.pageForm).then((res)=>{
|
||
if(res.data.results){
|
||
this.total = res.data.count;
|
||
this.tickets = res.data.results;
|
||
this.listLoading = false;
|
||
}
|
||
})
|
||
},
|
||
getTicketFlowlogs(id){
|
||
getTicketFlowlog(id).then(res=>{
|
||
if(res.data){
|
||
this.logs = res.data;
|
||
}
|
||
})
|
||
},
|
||
handleClick(tab, event) {
|
||
console.log(tab, event);
|
||
this.getList();
|
||
},
|
||
//获取工作流所有状态
|
||
getStates(){
|
||
if(this.pageForm.workflow!==''){
|
||
getWfStateList(this.pageForm.workflow).then((response) => {
|
||
if (response.data) {
|
||
let nodes = [];
|
||
let res = response.data;
|
||
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)
|
||
}
|
||
this.nodes = nodes;
|
||
this.getEdges(nodes);
|
||
}
|
||
});
|
||
}
|
||
},
|
||
//获取工作流
|
||
getWorkFlow(){
|
||
let listForm = {page:0};
|
||
getWorkflowList(listForm).then((response) => {
|
||
if (response.data) {
|
||
this.workflows = response.data;
|
||
}
|
||
});
|
||
},
|
||
//获取过程标记
|
||
getEdges(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);
|
||
}
|
||
this.edges = edge;
|
||
},
|
||
handleFilter(){
|
||
this.pageForm.page=1;
|
||
this.getList();
|
||
this.getStates();
|
||
},
|
||
resetFilter(){
|
||
this.pageForm.workflow = '',
|
||
this.getList();
|
||
},
|
||
handleCreate(){
|
||
this.limitedAdd = true;
|
||
this.addForm.title = '';
|
||
this.addForm.workflow = '';
|
||
this.addForm.ticket_data = {};
|
||
this.addForm.transition = '';
|
||
this.customfields = [];
|
||
this.$nextTick(() => {
|
||
this.$refs["Form"].clearValidate();
|
||
});
|
||
},
|
||
handleWorkflowChange(){
|
||
//获取字段
|
||
getWfCustomfieldList(this.addForm.workflow).then((res)=>{
|
||
this.customfields = res.data;
|
||
})
|
||
//获取流转
|
||
getWfTransitionList(this.addForm.workflow).then((res)=>{
|
||
for (let i=0;i<res.data.length;i++){
|
||
if(res.data[i].source_state_.type ===1){
|
||
debugger;
|
||
this.addForm.transition = res.data[i].id;
|
||
}
|
||
}
|
||
})
|
||
},
|
||
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;
|
||
},
|
||
confirm(form){
|
||
this.$refs[form].validate((valid) => {
|
||
if (valid) {
|
||
let fields = this.customfields;
|
||
let obj = new Object();
|
||
for(let i=0;i<fields.length;i++){
|
||
obj[fields[i].field_key] = fields[i].default_value
|
||
}
|
||
this.addForm.ticket_data = obj;
|
||
debugger;
|
||
console.log(this.addForm)
|
||
createTicket(this.addForm).then((res) => {
|
||
if (res.code >= 200) {
|
||
this.getList();
|
||
this.limitedAdd = false;
|
||
this.$message.success("成功");
|
||
}
|
||
});
|
||
} else {
|
||
return false;
|
||
}
|
||
});
|
||
},
|
||
handleCancel(){
|
||
this.limitedRetreat = false;
|
||
},
|
||
handleSubmit(){
|
||
debugger;
|
||
if(this.handleTitle === '撤回工单'){
|
||
this.$confirm("确认撤回工单吗?", "温馨提示", {
|
||
confirmButtonText: "确认",
|
||
cancelButtonText: "取消",
|
||
type: "warning",
|
||
})
|
||
.then(async () => {
|
||
ticketRetreat(this.retreatId,this.handleForm).then(res=>{
|
||
this.limitedRetreat = false;
|
||
this.getList();
|
||
this.$store.dispatch("user/getCount", {})
|
||
this.$message.success("成功");
|
||
})
|
||
})
|
||
.catch((err) => {
|
||
console.error(err);
|
||
});
|
||
}else{
|
||
this.$confirm("确认关闭工单吗?", "温馨提示", {
|
||
confirmButtonText: "确认",
|
||
cancelButtonText: "取消",
|
||
type: "warning",
|
||
})
|
||
.then(async () => {
|
||
ticketClose(this.retreatId,this.handleForm).then(res=>{
|
||
this.limitedRetreat = false;
|
||
this.getList();
|
||
this.$store.dispatch("user/getCount", {})
|
||
this.$message.success("成功");
|
||
})
|
||
})
|
||
.catch((err) => {
|
||
console.error(err);
|
||
});
|
||
}
|
||
|
||
},
|
||
handleClose(scope,index){
|
||
if(index==='1'){
|
||
this.handleTitle = '撤回工单';
|
||
this.handleLabel='撤回原因';
|
||
}else{
|
||
this.handleTitle = '关闭工单';
|
||
this.handleLabel='关闭原因';
|
||
}
|
||
this.limitedRetreat = true;
|
||
this.retreatId = scope.row.id;
|
||
},
|
||
handleLogs(){},
|
||
handlePicture(scope){
|
||
let that = this;
|
||
that.dialogVisible = true;
|
||
that.watchedName = scope.row.title;
|
||
that.watchedCreateTime = scope.row.create_time;
|
||
that.pageForm.workflow = scope.row.workflow;
|
||
let ticketId = scope.row.id;
|
||
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;
|
||
})
|
||
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({
|
||
rankdir: 'DL',
|
||
nodesep: 100,
|
||
edgesep: 10,//两条线之间的距离
|
||
ranksep: 50,//节点之间的距离
|
||
marginx: 60,
|
||
marginy: 20,
|
||
});
|
||
//获取state得到节点
|
||
getWfStateList(that.pageForm.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(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,
|
||
// curve: d3.curveBasis,
|
||
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,
|
||
// curve: d3.curveBasis,
|
||
style: "fill:#ffffff;stroke:#c0c1c3;stroke-width:1.5px"
|
||
})
|
||
})
|
||
}else{
|
||
g.setEdge(transition0.source_state_.id, transition0.destination_state_.id, {
|
||
// 边标签
|
||
label: transition0.name,
|
||
// curve: d3.curveBasis,
|
||
// 边样式
|
||
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)));
|
||
});
|
||
console.log("1111111111111");
|
||
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');
|
||
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{}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
});
|
||
},
|
||
// 创建提示框
|
||
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}})
|
||
},
|
||
//接单
|
||
handleGetTicket(scope){
|
||
let ticketId = scope.row.id;
|
||
ticketAccpet(ticketId,{}).then(res=>{
|
||
if(res.code===200){
|
||
this.getList();
|
||
}
|
||
})
|
||
},
|
||
handleLogs(scope){
|
||
let id = scope.row.id;
|
||
this.limitedFlowLogs = true;
|
||
getTicketFlowlog(id).then(res=>{
|
||
if(res.data){
|
||
this.floeLogs = res.data;
|
||
}
|
||
})
|
||
},
|
||
handleDelete(scope){
|
||
let data = new Object(),ids=[];
|
||
ids.push(scope.row.id);
|
||
data.ids = ids;
|
||
this.$confirm("确认删除该工单吗?", "温馨提示", {
|
||
confirmButtonText: "确认",
|
||
cancelButtonText: "取消",
|
||
type: "warning",
|
||
}).then(async () => {
|
||
ticketDestory(data).then(res=>{
|
||
if(res.code==200){
|
||
this.getList();
|
||
}
|
||
})
|
||
})
|
||
},
|
||
stepclick(){},
|
||
closeMark(){
|
||
this.dialogVisible = false;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
::-webkit-scrollbar {
|
||
width: 15px;
|
||
}
|
||
::-webkit-scrollbar-track{
|
||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.2);
|
||
background-color: #fefefe;
|
||
border-radius: 7px;
|
||
}
|
||
::-webkit-scrollbar-thumb{
|
||
border-radius: 7px;
|
||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.5);
|
||
background-color: #f5f5f5;
|
||
}
|
||
.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;
|
||
max-height: 80vh;
|
||
overflow-y: scroll;
|
||
}
|
||
.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;
|
||
}
|
||
|
||
|
||
|
||
.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>
|