sasp-flow-render 1.0.1

package/src/components/flowInst/flowInstList.vue

@@ -0,0 +1,818 @@
+<template>
+    <el-container style="height: 100%;">
+        <el-header style="height: auto;">
+            <div class="search-form-parent el-card">
+                <el-form :inline="true" :model="crud.searchForm" size="small" class="demo-form-inline"
+                         @keyup.enter.native="doSearch()" onSubmit="return false;">
+                    <el-form-item label="事项概述"
+                                  v-if="isShow('draft,pending,processed,finished,rescinded,discontinue,flowQuery')">
+                        <el-input v-model="crud.searchForm.flowSummary"></el-input>
+                    </el-form-item>
+                    <el-form-item label="启动人"
+                                  v-if="isShow('pending,processed,finished,rescinded,discontinue,flowQuery')">
+                        <el-select v-model="crud.searchForm.startUserName" style="width: 90px;" filterable allow-create clearable>
+                            <el-option v-for="item in userArr" :key="item.id" :value="item.id" :label="item.userName">
+
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+
+                    <el-form-item label="当前处理人" v-if="isShow('flowQuery')">
+                        <el-select v-model="crud.searchForm.dealUserId" style="width: 90px;" filterable allow-create clearable>
+                            <el-option v-for="item in userArr" :key="item.id" :value="item.id" :label="item.userName">
+
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="当前任务" v-if="isShow('pending,processed,flowQuery')">
+                        <el-select v-model="crud.searchForm.currentNode" filterable clearable style="width: 130px;">
+                            <el-option v-for="(nodeName,nodeIdStr) in flowNodeNameObj" :key="nodeIdStr" :value="nodeIdStr"
+                                       :label="nodeName"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="流程状态" v-if="isShow('flowQuery')">
+                        <el-select v-model="crud.searchForm.flowStatus" style="width: 130px;" clearable>
+                            <el-option v-for="(value,key) in flowStatusForm" :key="key" :value="key"
+                                       :label="value"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="启动时间" v-if="isShow('processed,finished,rescinded,discontinue,flowQuery')">
+                        <el-date-picker v-model="crud.searchForm.startTime" type="daterange" value-format="yyyy-MM-dd"
+                                        style="width: 240px;"
+                                        range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间">
+                        </el-date-picker>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button type="primary" icon="el-icon-search" @click="doSearch()">查询</el-button>
+                        <el-button icon="el-icon-close" @click="resetSearch()">清空</el-button>
+                    </el-form-item>
+                </el-form>
+            </div>
+        </el-header>
+        <el-main style="height: 100%;padding:0 10px">
+            <el-container style="height: 100%">
+                <el-header style="height: auto;padding:10px 0;">
+                    <div v-if="isShow('draft')">
+                        <el-button type="primary" icon="el-icon-circle-plus-outline" size="small" round
+                                   @click="openAddFlowForm()">新增
+                        </el-button>
+                        <el-button type="danger" icon="el-icon-circle-close" size="small" round @click="deleteFlow()">
+                            删除
+                        </el-button>
+                        <!--                        <el-button type="warning" icon="saspiconfont liuchengtu1" size="small" round>流程图</el-button>-->
+                    </div>
+                </el-header>
+                <el-main style="height: 100%;padding: 0;" class="main-box">
+                    <el-table :data="crud.dataStore.records" :ref="crud.tableRef"
+                              v-if="showModel=='list'" stripe border height="100%" style="width: 100%;">
+                        <el-table-column type="selection" width="40" align="center"
+                                         v-if="isShow('draft')"></el-table-column>
+                        <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
+                        <el-table-column label="事项概述" prop="flowSummary" show-overflow-tooltip :formatter="formatterFlowSummary"></el-table-column>
+                        <el-table-column label="启动人" prop="startUserId" v-if="isNotShow('draft')" width="100" align="center">
+                            <template slot-scope="scope">
+                                {{userMap[scope.row.startUserId]}}
+                            </template>
+                        </el-table-column>
+                        <el-table-column :label="tabType=='draft'?'创建时间':'启动时间'" prop="saspStartTime" width="180" align="center"></el-table-column>
+                        <el-table-column label="办结时间" prop="finishedTime" width="180" align="center"
+                                         v-if="isShow('finished')"></el-table-column>
+                        <el-table-column label="撤销时间" prop="revokedTime" width="180" align="center"
+                                         v-if="isShow('rescinded')"></el-table-column>
+                        <el-table-column label="中止时间" prop="discontinueTime" width="180" align="center"
+                                         v-if="isShow('discontinue')"></el-table-column>
+                        <el-table-column label="当前任务" prop="currentNodeName" width="150" align="center"
+                                         v-if="!isShow('draft')" show-overflow-tooltip>
+                            <template slot-scope="scope">
+                                {{formatterCurrentNodeName(scope.row)}}
+                                <span v-if="scope.row.operateStatus == '0' && scope.row.agentType == '0'">(正常)</span>
+                                <span v-if="scope.row.operateStatus == '1'"
+                                      style="color: rgba(14,192,82,1);">(加签)</span>
+                                <span v-if="scope.row.operateStatus == '3'"
+                                      style="color: rgba(52,133,255,1);">(转签)</span>
+                                <span v-if="scope.row.operateStatus == '2'"
+                                      style="color: rgba(249,61,61,1);">(退回)</span>
+                                <span v-if="scope.row.operateStatus == '4'"
+                                      style="color: rgba(249,61,61,1);">(取回)</span>
+                                <span v-if="scope.row.agentType == '1'" style="color: rgba(52,204,255,1);">(已代理)</span>
+                                <span v-if="scope.row.agentType == '2'" style="color: rgba(251,124,87,1);">(代理)</span>
+                                <span v-if="scope.row.hangUp == '1'" style="color: rgba(254,195,35,1);">(已挂起)</span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="当前处理人" prop="currentDealer" width="150" :formatter="formaterDealer"
+                                         show-overflow-tooltip align="center" v-if="isShow(['processed','flowQuery'])">
+                        </el-table-column>
+                        <el-table-column label="流程状态" prop="flowStatus" width="100"
+                                         show-overflow-tooltip align="center" v-if="isShow(['flowQuery'])">
+                            <template slot-scope="scope">
+                                <el-tag :type="(flowStatusObj[scope.row.flowStatus] || {})['type']">
+                                    {{(flowStatusTagObj[scope.row.flowStatus] || {})["name"] || '其他'}}
+                                </el-tag>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="操作" align="center" :width="currentOptColumnWidth">
+                            <template slot-scope="scope">
+                                <el-button
+                                        v-for="buttonObj in nodeListButtonObj[scope.row.currentNode || (flowVersionNodeObj[scope.row.version][startNodeKeyObj[scope.row.version]] || {}).id] || []"
+                                        :key="buttonObj.type" size="small" type="primary"
+                                        v-if="judgeListButton(tabType,buttonObj.type)"
+                                        @click="listButtonOpt(buttonObj.type,scope.row)"
+                                        :icon="buttonIcon[buttonObj.type]" :type="buttonType[buttonObj.type]">
+                                    {{buttonObj.showName}}
+                                </el-button>
+                                <el-button v-if="scope.row.currentNode == 'end'" size="small"
+                                           @click="listButtonOpt('view',scope.row)"
+                                           icon="el-icon-view" type="primary">
+                                    查看
+                                </el-button>
+                                <el-button v-if="scope.row.currentNode == 'end'" size="small"
+                                           @click="listButtonOpt('flowRecord',scope.row)"
+                                           icon="saspiconfont pl-icon-liuchengtu" type="primary">
+                                    流转记录
+                                </el-button>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                    <div v-if="showModel=='card'" :ref="crud.tableRef" style="width: 100%;margin-top: 5px;">
+                        <div v-if="crud.dataStore.total>0" v-for="(item,index) in crud.dataStore.records" :key="index"
+                             :class="mycardclass">
+                            <el-card class="box-card" shadow="always"
+                                     :style="{'cursor':tabType == 'draft'? 'pointer':'default'}">
+                                <div slot="header" class="clearfix" @click="clickCard(item,index)">
+                                    <div class="cardhead">
+                                        <span class="cardhead-title">{{item['startUserName']}}</span>
+                                        <el-tag v-if="item['currentNodeName']!='' && item['currentNodeName']!=undefined && !isShow('draft')"
+                                                size="small" class="cardhead-tag"
+                                                style="background-color: rgba(255,140,25,0.20);color: rgba(255,140,25,1);">
+                                            {{item['currentNodeName']}}
+                                        </el-tag>
+                                        <el-tag v-if="item['operateStatus']=='1'" size="small" class="cardhead-tag"
+                                                style="background-color: rgba(14,192,82,0.20);color: rgba(14,192,82,1);">
+                                            加签
+                                        </el-tag>
+                                        <el-tag v-if="item['operateStatus']=='3'" size="small" class="cardhead-tag"
+                                                style="background-color: rgba(52,133,255,0.20);color: rgba(52,133,255,1);">
+                                            转签
+                                        </el-tag>
+                                        <el-tag v-if="item['operateStatus']=='2'" size="small" class="cardhead-tag"
+                                                style="background-color: rgba(249,61,61,0.20);color: rgba(249,61,61,1);">
+                                            退回
+                                        </el-tag>
+                                        <el-tag v-if="item['operateStatus']=='4'" size="small" class="cardhead-tag"
+                                                style="background-color: rgba(249,61,61,0.20);color: rgba(249,61,61,1);">
+                                            取回
+                                        </el-tag>
+                                        <el-tag v-if="item['agentType']=='1'" size="small" class="cardhead-tag"
+                                                style="background-color:  rgba(52,204,255,0.20);color: rgba(52,204,255,1)">
+                                            已代理
+                                        </el-tag>
+                                        <el-tag v-if="item['agentType']=='2'" size="small" class="cardhead-tag"
+                                                style="background-color: rgba(251,124,87,0.20);color: rgba(251,124,87,1)">
+                                            代理
+                                        </el-tag>
+                                        <el-tag v-if="item['hangUp']=='1'" size="small" class="cardhead-tag"
+                                                style="background-color: rgba(254,195,35,0.20);color: rgba(254,195,35,1)">
+                                            已挂起
+                                        </el-tag>
+
+                                        <!--<el-tag size="small" class="cardhead-tag" style="background-color: rgba(254,195,35,0.20);color: rgba(254,195,35,1)">挂起</el-tag>-->
+                                        <i :id="'checkCard_'+index" class="el-icon-check"
+                                           style="cursor:pointer;visibility:hidden;position:absolute;top:12px;right: 10px;font-size: 30px;color:#409EFF;"></i>
+                                    </div>
+                                </div>
+                                <div class="mycardBody" @click="clickCard(item,index)">
+                                    <div class="cardbody-box" style="border-bottom: 1px dashed #E4EAF7;">
+                                        <div class="cardbody-title">事项概述：</div>
+                                        <el-tooltip class="item" effect="dark" :content="item['flowSummary']" placement="right-start">
+                                            <div class="cardbody-content">{{item['flowSummary']}}</div>
+                                        </el-tooltip>
+                                    </div>
+                                    <div class="cardbody-box" style="border-bottom: 1px dashed #E4EAF7;">
+                                        <div class="cardbody-title">启动人：</div>
+                                        <div class="cardbody-content">{{item['startUserName']}}</div>
+                                    </div>
+                                    <div class="cardbody-box">
+                                        <div class="cardbody-title">启动时间：</div>
+                                        <div class="cardbody-content">{{item['saspStartTime']}}</div>
+                                    </div>
+                                </div>
+                                <div class="mycardFoot">
+                                    <el-button
+                                            v-for="buttonObj in nodeListButtonObj[item.currentNode || (flowVersionNodeObj[scope.row.version][startNodeKeyObj[scope.row.version]] || {}).id]"
+                                            :key="buttonObj.type" size="small" round
+                                            v-if="judgeListButton(tabType,buttonObj.type)"
+                                            :class="cardButtonClass[buttonObj.type]"
+                                            @click="listButtonOpt(buttonObj.type,item)">
+                                        {{buttonObj.showName}}
+                                    </el-button>
+
+                                    <el-button v-if="item.currentNode == 'end'" size="small"
+                                               @click="listButtonOpt('view',item)"
+                                               :class="cardButtonClass['view']"
+                                               round  type="primary">
+                                        查看
+                                    </el-button>
+                                    <el-button v-if="item.currentNode == 'end'" size="small"
+                                               @click="listButtonOpt('flowRecord',item)"
+                                               :class="cardButtonClass['flowRecord']"
+                                               round type="primary">
+                                        流转记录
+                                    </el-button>
+                                </div>
+                            </el-card>
+                        </div>
+                        <div v-if="crud.dataStore.total==0" style="margin-top: 10%;text-align: center;">
+                            <img :src="cardNullUrl"/>
+                        </div>
+                    </div>
+                </el-main>
+            </el-container>
+        </el-main>
+        <el-footer style="padding: 16px 10px;">
+            <el-pagination
+                    :ref="crud.pageRef"
+                    :page-sizes="crud.pageSizes"
+                    :page-size="crud.pageSize"
+                    :current-page="crud.page"
+                    :total="crud.dataStore.total"
+                    @size-change="crud.sizeChange()"
+                    @current-change="crud.currentPage()"
+                    layout="total, sizes, prev, pager, next, jumper">
+            </el-pagination>
+        </el-footer>
+    </el-container>
+</template>
+
+<script>
+    import {Replace} from "sasp-base";
+    import FlowChart from "../flowChart";
+    import FlowRoamRecord from "../flowRoamRecords";
+
+    export default {
+        name: "flowInstList",
+        components: {FlowRoamRecord, FlowChart, Replace},
+        props: {
+            tabType: {type: String, default: "draft"},
+            flowDefine: {
+                type: Object, default: () => {
+                    return {};
+                }
+            },//工作流配置信息
+            formId: {type: String, default: ""},
+            startNodeKey: {type: String, default: ""},//开始节点key
+            flowNodeIdToInfo: {
+                type: Object, default: () => {
+                    return {};
+                }
+            },
+            flowNodeNameObj:{
+                type: Object, default: () => {
+                    return {};
+                }
+            }, //根据节点名称分组的节点id （相同用逗号分隔）
+            nodeListButtonObj: {
+                type: Object, default: () => {
+                    return {};
+                }
+            },//节点行按钮
+            optColumnWidth: {type: Number, default: 0},
+            showModel: {type: String, default: "list"},//流程状态
+
+            // 初始化查询
+            initSearch: {
+                type: Boolean, default() {
+                    return false;
+                }
+            },
+
+            // 打开流程图回调函数
+            openFlowChart: {
+                type: Function, default() {
+
+                }
+            },
+
+            // 打开流转记录回调函数
+            openFlowRecord: {
+                type: Function, default() {
+
+                }
+            },
+
+            // 打开添加窗口回调函数
+            openAddFlowForm: {
+                type: Function, default() {
+
+                }
+            },
+
+            // 打开修改窗口回调函数
+            openUpdateFlowForm: {
+                type: Function, default() {
+
+                }
+            },
+
+            // 打开批量修改窗口回调函数
+            openBatchUpdateFlowForm: {
+                type: Function, default() {
+
+                }
+            },
+
+            // 打开查看窗口回调函数
+            openViewFlowForm: {
+                type: Function, default() {
+
+                }
+            },
+
+            //所有版本开始节点
+            startNodeKeyObj:{
+                type: Object, default: () => {
+                    return {};
+                }
+            },
+            //所有版本节点信息
+            flowVersionNodeObj: {
+                type: Object, default: () => {
+                    return {};
+                }
+            },
+            //用户
+            userArr: {
+                type: Array, default: () => {
+                    return [];
+                }
+            },
+            userMap:{type: Object,default:()=>{return {};}},
+
+            instQueryPower:{type:String,default:""}
+
+        },
+        data() {
+
+            let objSearchUrl = {
+                "draft": this.api.plFlowInst.findFlowInstPage,
+                "pending": this.api.plFlowInst.findInstPending,
+                "processed": this.api.plFlowInst.findInstProcessed,
+                "finished": this.api.plFlowInst.findInstFinished,
+                "flowQuery": this.api.plFlowInst.findInstQueryNew,
+                "rescinded": this.api.plFlowInst.findRescinded,
+                "discontinue": this.api.plFlowInst.finDiscontinue,
+            };
+
+            return {
+                crud: new this.CrudUtil({
+                    vue: this,
+                    entityName: "plFlowInst",
+                    url: this.api.plFlowInst.url,
+                    searchUrl: objSearchUrl[this.tabType],
+                    noClearSearchColumns: this.initNoClearSearch(),
+                    initNoSearch: true,
+                }),
+                loginUser: this.CACHE_GLOBAL.getLoginUser(),//当前登录用户
+                userDept: this.CACHE_GLOBAL.getLoginDept(),
+                flowStatusObj: {//流程状态
+                    all: '',
+                    draft: 0,
+                    pending: 1,
+                    rescinded: 2,
+                    discontinue: 3,
+                    finished: 4
+                },
+
+                flowStatusForm: {
+                    "0": "草稿",
+                    "1": "处理中",
+                    "2": "已撤销",
+                    // "3": "已中止",
+                    "4": "已办结"
+                },
+
+                flowStatusTagObj:{
+                    "0":{"name":"草稿","type":"info"},
+                    "1":{"name":"处理中","type":"success"},
+                    "2":{"name":"已撤销","type":"danger"},
+                    "3":{"name":"已中止","type":"warning"},
+                    "4":{"name":"已办结","type":"primary"},
+                },
+
+                flowStatusObjNamme: {
+                    all: '全部',
+                    draft: '草稿',
+                    pending: '待处理',
+                    rescinded: '已撤销',
+                    discontinue: '已中止',
+                    finished: '已办结'
+                },
+
+                buttonIcon: {
+                    update: "el-icon-edit",
+                    deal: "el-icon-edit",
+                    flowRecord: "saspiconfont pl-icon-liuchengtu",
+                    flowChart: "saspiconfont pl-icon-gongzuoliuchengtu",
+                    view: "el-icon-view",
+                },
+
+                buttonType: {
+                    update: "primary",//修改
+                    deal: "primary",//处理
+                    flowRecord: "primary",//流转记录
+                    flowChart: "primary",//流程图
+                    view: "primary",//查看
+                },
+
+                operateStatus: {
+                    0: "正常",
+                    1: "加签",
+                    2: "取回",
+                    3: "转签",
+                    4: "已代理",
+                    5: "代理"
+                },
+
+                flowStatusTagType: {
+                    "0": "info", // 草稿
+                    "1": "success", // 处理中
+                    "2": "warning", // 撤销
+                    "3": "danger", //
+                    "4": "primary", //
+                },
+
+                mycardclass: "myelcard4",//默认卡片样式
+                cardClickArr: [],//卡片选中数组
+                cardNullUrl: require("../../assets/images/card_zwsj.png"),//卡片暂无数据图标
+                cardButtonClass: {
+                    "update": "myDealButton",
+                    "flowRecord": "myFlowRecordButton",
+                    "flowChart": "myFlowChartButton",
+                    "deal": "myDealButton",
+                    "view": "myDealButton"
+                },
+                currentOptColumnWidth: this.optColumnWidth,
+                screenWidth:"",
+                screenHeight:"",
+            }
+        },
+        created() {
+            this.init();
+            this.getListButton();
+            if (this.showModel == "card") {
+                this.checkScreenWidth();
+                window.addEventListener('resize', () => { //监听浏览器窗口大小改变
+                    //浏览器变化执行动作
+                    this.checkScreenWidth();
+                });
+            }
+        },
+        mounted() {
+        },
+        methods: {
+
+            /**
+             * 根据类型加载不需要清楚的
+             */
+            initNoClearSearch() {
+                if (this.isShow(['draft', 'pending', 'processed', 'rescinded', 'discontinue', 'finished'])) {
+                    return ["flowId", "flowStatus", "dealUserId", "created", "nodeType"];
+                } else if (this.isShow(['flowQuery'])) {
+                    return ["flowId", "created", "nodeType","instQueryPower","queryOrderSetting"];
+                }
+            },
+
+            init() {
+                this.crud.searchForm["flowId"] = this.flowDefine.id;
+                let flowStatus = this.flowStatusObj[this.tabType];
+                this.crud.searchForm["nodeType"] = this.tabType;
+                if (this.tabType == "draft") {
+                    this.crud.searchForm["created"] = this.loginUser.id;
+                }
+                if (this.tabType == "pending" || this.tabType == "processed" || this.tabType == "finished"
+                    || this.tabType == "rescinded" || this.tabType == "discontinue") {
+                    this.crud.searchForm["dealUserId"] = this.loginUser.id;
+                    flowStatus = this.flowStatusObj[this.tabType] || "1";
+                }
+                if(this.tabType == "flowQuery"){
+                    this.crud.searchForm["instQueryPower"] = this.instQueryPower;
+                    this.crud.searchForm["created"] = this.loginUser.id;
+                    this.crud.searchForm["queryOrderSetting"] = this.flowDefine.queryOrderSetting;
+                }
+                this.$set(this.crud.searchForm, 'flowStatus', flowStatus);
+                this.crud.search();
+
+            },
+
+            /**
+             * 列表操作按钮显示
+             */
+            getListButton() {
+                Object.values(this.nodeListButtonObj).forEach(arr => {
+                    if (this.isShow("processed,finished,discontinue,flowQuery") && JSON.stringify(arr).indexOf("view") == -1) {//已处理、已办结、已中止、流程查询
+                        let obj = {};
+                        obj.isUse = "1";
+                        obj.showName = "查看";
+                        obj.type = "view";
+                        arr.unshift(obj);
+                    }
+                    arr.forEach(item => {
+                        if (item.type == "update") {//修改
+                            item.order = 0;
+                        }
+                        if (item.type == "deal") {//处理
+                            item.order = 1;
+                        }
+                        if (item.type == "view") {//查看
+                            item.order = 2;
+                        }
+                        if (item.type == "flowChart") {//流程图
+                            item.order = 3;
+                        }
+                        if (item.type == "flowRecord") {//流转记录
+                            item.order = 4;
+                        }
+                    });
+                    arr = arr.sort(sortBy("order"));
+                });
+
+                //按钮排序
+                function sortBy(props) {
+                    return function (a, b) {
+                        return a[props] - b[props];
+                    }
+                }
+            },
+
+            /**
+             * 判断列表操作按钮显示
+             */
+            judgeListButton(tabType, button) {
+                let objTabTypeBtn = {
+                    "draft": "update", // 草稿---修改
+                    "pending": "update,deal,flowChart,flowRecord", // 待处理---修改、处理、流程图、流转记录
+                    "processed": "view,flowChart,flowRecord", // 已处理---查看、流程图、流转记录
+                    "finished": "view,flowRecord", // 已办结---查看、流转记录
+                    "rescinded": "view,flowRecord", // 已撤销---查看、流转记录
+                    "discontinue": "view,flowRecord", // 已中止---查看、流转记录
+                    "flowQuery": "view,flowChart,flowRecord" // 流程查询---查看、流程图、流转记录
+                };
+                return objTabTypeBtn[tabType].indexOf(button) > -1;
+            },
+            /**
+             * 判断浏览器分辨率
+             */
+            checkScreenWidth() {
+                let clientWidth = document.body.clientWidth;
+                this.screenWidth = window.screen.width;
+                this.screenHeight = window.screen.height;
+                let befroeClass = JSON.parse(JSON.stringify(this.mycardclass));
+                if (this.screenWidth <= "1280") {//一行2个
+                    this.mycardclass = "myelcard2";
+                    this.crud.pageSizes = [10, 30, 50, 100];
+                    this.crud.pageSize = 10;
+                } else if (this.screenWidth <= "1536") {//一行3个
+                    this.mycardclass = "myelcard3";
+                    this.crud.pageSizes = [9, 30, 60, 90];
+                    this.crud.pageSize = 9;
+                    if (clientWidth < 1000) {
+                        this.mycardclass = "myelcard2";
+                        this.crud.pageSizes = [10, 30, 50, 100];
+                        this.crud.pageSize = 10;
+                    }
+                } else if (this.screenWidth <= "1920") {//一行4个
+                    this.mycardclass = "myelcard4";
+                    this.crud.pageSizes = [12, 40, 80, 120];
+                    this.crud.pageSize = 12;
+                    if (clientWidth < 1200) {
+                        this.mycardclass = "myelcard2";
+                        this.crud.pageSizes = [10, 30, 50, 100];
+                        this.crud.pageSize = 10;
+                    } else if (clientWidth < 1534) {
+                        this.mycardclass = "myelcard3";
+                        this.crud.pageSizes = [9, 30, 60, 90];
+                        this.crud.pageSize = 9;
+                    }
+                } else if (this.screenWidth <= "2560") {//一行5个
+                    this.mycardclass = "myelcard5";
+                    this.crud.pageSizes = [10, 30, 50, 100];
+                    this.crud.pageSize = 10;
+                    if (clientWidth < 1261) {
+                        this.mycardclass = "myelcard2";
+                        this.crud.pageSizes = [10, 30, 50, 100];
+                        this.crud.pageSize = 10;
+                    } else if (clientWidth < 1521) {
+                        this.mycardclass = "myelcard3";
+                        this.crud.pageSizes = [9, 30, 60, 90];
+                        this.crud.pageSize = 9;
+                    } else if (clientWidth < 1722) {
+                        this.mycardclass = "myelcard4";
+                        this.crud.pageSizes = [12, 40, 80, 120];
+                        this.crud.pageSize = 12;
+                    }
+                } else {//一行6个
+                    this.mycardclass = "myelcard6";
+                    this.crud.pageSizes = [12, 36, 60, 120];
+                    this.crud.pageSize = 12;
+                    if (clientWidth < 1630) {
+                        this.mycardclass = "myelcard2";
+                        this.crud.pageSizes = [10, 30, 50, 100];
+                        this.crud.pageSize = 10;
+                    } else if (clientWidth < 1979) {
+                        this.mycardclass = "myelcard3";
+                        this.crud.pageSizes = [9, 30, 60, 90];
+                        this.crud.pageSize = 9;
+                    } else if (clientWidth < 2201) {
+                        this.mycardclass = "myelcard4";
+                        this.crud.pageSizes = [12, 40, 80, 120];
+                        this.crud.pageSize = 12;
+                    } else if (clientWidth < 2947) {
+                        this.mycardclass = "myelcard5";
+                        this.crud.pageSizes = [10, 30, 50, 100];
+                        this.crud.pageSize = 10;
+                    }
+                }
+                if (befroeClass != this.mycardclass) {
+                    this.crud.search();
+                }
+            },
+
+            /**
+             * 点击卡片选中
+             */
+            clickCard(data, index) {
+                if (this.tabType == "draft") {
+                    let show = document.getElementById("checkCard_" + index).style.visibility;
+                    if (show == "hidden") {
+                        this.$set(data, "idIndex", index);
+                        this.cardClickArr.push(data);
+                        document.getElementById("checkCard_" + index).style.visibility = "visible";
+                    } else {
+                        let beforeIndex = this.cardClickArr.findIndex(val => {
+                            if (val['DATA_ID'] == data['DATA_ID']) {
+                                return true;
+                            }
+                        });
+                        if (beforeIndex >= 0) {
+                            this.cardClickArr.splice(beforeIndex, 1);
+                        }
+                        document.getElementById("checkCard_" + index).style.visibility = "hidden";
+                    }
+                }
+            },
+            /**
+             * 查询方法
+             */
+            doSearch(type) {
+                let timeArr = this.crud.searchForm.startTime || [];
+                if (timeArr.length > 0 && timeArr[0]) {
+                    this.crud.searchForm.startTimeStart = timeArr[0] + " 00:00:00";
+                }
+                if (timeArr.length > 0 && timeArr[1]) {
+                    this.crud.searchForm.startTimeEnd = timeArr[1] + " 23:59:59";
+                }
+                this.$emit("initTabNum");
+                if (type == "noMessage") {
+                    this.crud.search();
+                } else {
+                    this.crud.doSearch();
+                }
+            },
+
+            /**
+             * 清空
+             */
+            resetSearch() {
+                this.crud.resetSearch();
+                this.$emit("initTabNum");
+            },
+
+            isShow(typeArr) {
+                if (typeArr.indexOf(this.tabType) > -1) {
+                    return true;
+                } else {
+                    return false;
+                }
+            },
+
+            isNotShow(typeArr) {
+                if (typeArr.indexOf(this.tabType) == -1) {
+                    return true;
+                } else {
+                    return false;
+                }
+            },
+
+            /**
+             * 删除
+             */
+            deleteFlow() {
+                let selection = "";
+                if (this.showModel == "card") {
+                    selection = JSON.parse(JSON.stringify(this.cardClickArr));
+                } else {
+                    selection = this.$refs[this.crud.tableRef].selection;
+                }
+                if (selection.length == 0) {
+                    this.$message({type: "warning", message: "请勾选需要删除的数据！"});
+                    return;
+                }
+                this.$confirm('确定要删除所选项吗?', '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning'
+                }).then(() => {
+                    let flowInstIds = "";
+                    selection.forEach(row => {
+                        flowInstIds += "," + row.id;
+                    });
+                    this.axios.post(this.api.plFlowInst.deleteFlowInst, {
+                        flowInstIds: flowInstIds.substring(1)
+                    }).then(res => {
+                        if (res && res.data && res.data.operateSuccess) {
+                            this.$message({type: "success", message: "删除成功！"});
+                            this.crud.search();
+                            this.$emit("initTabNum");
+                        } else {
+                            this.$message({type: "error", message: "删除失败！"});
+                        }
+                    })
+                })
+            },
+
+            /**
+             * 按钮操作事件
+             */
+            listButtonOpt(buttonType, row, type) {
+                if (buttonType == "update") {//修改
+                    this.openUpdateFlowForm(row,'update');
+                } else if (buttonType == "deal") {//处理
+                    this.openUpdateFlowForm(row,'handle');
+                } else if (buttonType == "view") {//查看
+                    this.openViewFlowForm(row);
+                } else if (buttonType == "flowChart") {
+                    this.openFlowChart(row);
+                } else if (buttonType == "flowRecord") {
+                    this.openFlowRecord(row);
+                }
+            },
+
+            /**
+             * 打开批量处理页面方法
+             */
+            // async openFlowBatchPendingDialog() {
+            //     if (this.crud.dataStore.records.length == 0) {
+            //         this.$message({
+            //             showClose: true,
+            //             message: '当前没有可处理的流程'
+            //         });
+            //     } else {
+            //         this.openBatchUpdateFlowForm(this.crud.dataStore.records);
+            //     }
+            //
+            // },
+
+            /**
+             * 格式化当前任务
+             */
+            formatterCurrentNodeName(row){
+                let currentNodeName = row.currentNodeName;
+                if(!currentNodeName){
+                    if(row.flowStatus != '0'){
+                        currentNodeName = "结束";
+                    }else {
+                        currentNodeName = "开始";
+                    }
+                }
+                return currentNodeName;
+            },
+
+            /**
+             * 格式化流程概要
+             * @param row
+             * @param column
+             * @param cellValue
+             * @returns {*}
+             */
+            formatterFlowSummary(row, column, cellValue){
+                cellValue = Replace.text(null,cellValue || '');
+                return cellValue;
+            },
+            formaterDealer(row, column, cellValue){
+                let arr = [];
+                (cellValue || "").split(",").forEach(dealer => {
+                    arr.push(this.userMap[dealer] || dealer);
+                })
+                return arr.join(",");
+            },
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "css/flowInstList";
+</style>
+<style lang="scss">
+    .el-tooltip__popper{
+        max-width: 800px !important;
+    }
+</style>