修改监控流程页面【为改完】

src/assets/css/process.scss

@@ -13,7 +13,7 @@
 .procedure{
 
 }
-.content{
+.process_content{
   margin-top: 25px;
   width:100%;
   padding: 10px 30px;

src/components/ProcessMixin.vue

@@ -0,0 +1,94 @@
+<!-- 流程组件公共数据 -->
+<script>
+
+    export default {
+        name: 'ProcessMixins',
+        mixins: [],
+        components: {},
+        data() {
+            return {
+                processTypeList: [
+                    // {
+                    //     label: '法规入库流程',
+                    //     value: '1'
+                    // },
+                ],
+                formDisableFlag: false,
+                pickerOptions: {
+                    disabledDate(time) {
+                        const start = new Date(new Date().toLocaleDateString());
+                        start.setTime(start.getTime());
+                        return time.getTime() < start
+                    }
+                },
+                nowOrder: '',
+                nowOrderBy: '',
+            }
+        },
+        methods: {
+            // 表格排序
+            sortChange(sortObj, tableName) {
+                // console.log(sortObj)
+                this.nowOrderBy = sortObj.prop
+                if (sortObj.order === 'ascending') {
+                    this.nowOrder = 'asc'
+                } else if (sortObj.order === 'descending') {
+                    this.nowOrder = 'desc'
+                } else {
+                    this.nowOrder = ''
+                    this.nowOrderBy = ''
+                }
+                this[tableName]()
+            },
+            /**
+             * @description: 根据流程类型获取流程名称
+             * @date: 2020-11-25 15:47:12
+             * @auth: chenxiaoxi
+             */
+            getPrcName(prcType) {
+                let prcName = ''
+                this.processTypeList.map(item => {
+                    if (item.value === prcType) {
+                        prcName = item.label
+                    }
+                })
+                return prcName
+            },
+
+
+
+            /**
+             * @description: 对表单部分字段进行校验
+             * @date: 2021-01-15 10:00:16
+             * @auth: chenxiaoxi
+             */
+            handleValidField(field) {
+                this.$refs['prcForm'].validateField(field)
+            },
+
+            /**
+             * @description: 查询下一节点处理人(高级经理)
+             * @date: 2021-03-11
+             * @auth: WangXu
+             */
+            getResByCurrentRoleId(roleIds, roleName, callback) {
+                // 获取当前 foRoleId  有 otherFORoleId 就一定是 其他起草人填写的 FO
+                // 否则一定是主起草人填写的 FO
+                this.$http.get('sys/role/getParentsByFOs', {
+                    ids: roleIds, // 当前登录人的角色
+                    roleHierarchyName: roleName // 上级角色
+                }, {}, res => {
+                    if (res.ok) {
+                        callback.call(this, res.data)
+                    } else {
+                        this.$message.warning(res.message)
+                    }
+                })
+            },
+        },
+        computed: {},
+        watch: {},
+        mounted() {
+        }
+    }
+</script>

src/router/modules/userCenter.js

@@ -26,7 +26,7 @@ const routes = [
         {
           path:'monitorViews',
           name:'monitorViews',
-          component: () => import('../../views/userCenter/processCenter/monitorProcesses/monitorViews.vue')
+          component: () => import('../../views/userCenter/processCenter/monitorProcesses/monitorDetail.vue')
         }
       ]
     }

src/views/permissionApplication/examine.vue

@@ -4,7 +4,7 @@
     <div class="process_box">
       <process-header :title="'权限审批'" :proceesNum="'proceesNum'"></process-header>
       <div class="procedure">
-        <div class="content">
+        <div class="process_content">
           <span class="base_title">基础信息</span>
           <el-row>
             <report-table v-model="tableData" @updateTable="(newValue)=>{tableData=newValue}" :disabled="formControl"></report-table>
@@ -35,11 +35,11 @@
             </el-form>
           </el-row>
         </div>
-        <div class="content">
+        <div class="process_content">
           <span class="base_title">审批历史</span>
           <process-approval-history></process-approval-history>
         </div>
-        <div class="content">
+        <div class="process_content">
           <span class="base_title">审核信息</span>
           <audit-operation ref="operationRef"></audit-operation>
         </div>

src/views/permissionApplication/launch.vue

@@ -3,7 +3,7 @@
     <div class="process_box">
       <process-header :title="'发起流程'"></process-header>
       <div class="procedure">
-        <div class="content">
+        <div class="process_content">
           <span class="base_title">基础信息</span>
           <el-row>
             <report-table v-model="tableData" @updateTable="(newValue)=>{tableData=newValue}"></report-table>
@@ -34,11 +34,11 @@
             </el-form>
           </el-row>
         </div>
-        <div class="content" v-if="initShow">
+        <div class="process_content" v-if="initShow">
           <span class="base_title">审批历史</span>
           <process-approval-history></process-approval-history>
         </div>
-        <div class="content">
+        <div class="process_content">
           <span class="base_title">指派信息</span>
           <el-form ref="assignFormRef" :model="assignForm" label-width="150px"
                  :rules="assignFormRules"  class="label-input-form" size="medium">

src/views/userCenter/processCenter.vue

@@ -87,10 +87,18 @@ import tabs from '../userCenter/processCenter/tabs.vue'
         align-items: center;
         margin: 20px 0 0 22px;
         .item{
-        width: 300px;
+          width: 300px;
-        display: flex;
+          display: flex;
-        align-items: center;
+          align-items: center;
+          font-size: 14px;
+          font-weight: 400;
+          color: #595959;
+          margin-right: 5px;
+          padding-left: 22px;
         }
+      ::v-deep .el-input{
+          width: 200px;
+      }
 
     }
     .tabs{
@@ -98,7 +106,5 @@ import tabs from '../userCenter/processCenter/tabs.vue'
     }
 
 }
-::v-deep .el-input{
+
-    width: 200px;
-}
 </style>

src/views/userCenter/processCenter/finishProcess.vue

@@ -1,31 +1,36 @@
 <template>
     <div>
-        <el-table :data="tableData" style="width: 100%" border
+      <div class="table">
-            :header-cell-style="{ background: '#DFE6EC', fontWeight: '700', color: '#1F2D3D' }">
+        <vxe-table  ref="xTable" :data="tableData" :empty-render="{name: 'NotData'}" align="center" border stripe v-table-min-height="'calc(100vh - 380px)'">
-            <el-table-column prop="processId" label="流程编号"  align="center">
+          <vxe-column show-overflow show-header-overflow type="seq" title="序号" width="77">
-            </el-table-column>
+            <template #default="{ row, rowIndex }">
-            <el-table-column prop="processName" label="流程名称" align="center">
+              {{ rowIndex + (q.pageNo - 1) * q.pageSize + 1 }}
-            </el-table-column>
+            </template>
-            <el-table-column prop="processPerson" label="发起人"  align="center">
+          </vxe-column>
-            </el-table-column>
+          <vxe-column show-overflow show-header-overflow field="prcNum"
-            <el-table-column prop="now" label="当前处理人"  align="center">
+                      title="流程编号"></vxe-column>
-            </el-table-column>
+          <vxe-column show-overflow show-header-overflow field="prcName" title="流程名称"></vxe-column>
-            <el-table-column prop="last" label="上一处理人"  align="center">
+          <vxe-column show-overflow show-header-overflow field="labelOneName"
-            </el-table-column>
+                      title="发起人"></vxe-column>
-            <el-table-column prop="createTime" label="创建时间"  sortable align="center">
+          <vxe-column show-overflow show-header-overflow field="name" title="当前处理人"></vxe-column>
-            </el-table-column>
+          <vxe-column show-overflow show-header-overflow field="labelOneName"
-            <el-table-column prop="endTime" label="完成时间"  sortable align="center">
+                      title="上一处理人"></vxe-column>
-            </el-table-column>
+          <vxe-column show-overflow show-header-overflow field="name" title="创建时间"></vxe-column>
-            <el-table-column prop="status" label="状态"  align="center">
+          <vxe-column show-overflow show-header-overflow field="labelOneName"
-            </el-table-column>
+                      title="完成时间"></vxe-column>
-            <el-table-column label="操作" width="120" align="center">
+          <vxe-column show-overflow show-header-overflow field="name" title="状态"></vxe-column>
-                <template slot-scope="scope">
+          <vxe-column show-overflow show-header-overflow title="操作" width="200" fixed="right">
-                    <el-button @click.native.prevent="view(scope.$index, tableData)" type="text" size="small">
+            <template #default="{ row }">
-                        查看
+              <el-button @click.native.prevent="view(scope.$index, tableData)" type="text" size="small">
-                    </el-button>
+                查看
-                </template>
+              </el-button>
-            </el-table-column>
+            </template>
-        </el-table>
+          </vxe-column>
+        </vxe-table>
+        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="q.pageNo"
+                       :page-sizes="[5, 10, 20]" :page-size="q.pageSize" layout="total, sizes, prev, pager, next, jumper"
+                       :total="total" />
+      </div>
     </div>
 </template>
 
@@ -34,6 +39,11 @@ export default {
     name: 'finishProcess',
     data() {
         return {
+          q:{
+            pageNo:1,
+            pageSize:10
+          },
+          total: 0,
             tableData: [{
                 processId: '2016-05-1',
                 processName: '王小虎',
@@ -74,6 +84,17 @@ export default {
         }
     },
     methods: {
+      // 单页数据量
+      handleSizeChange(val) {
+        this.q.pageSize = val;
+        this.q.pageNo = 1;
+        this.loadData();
+      },
+      // 第几页
+      handleCurrentChange(val) {
+        this.q.pageNo = val;
+        this.loadData();
+      },
         view() {
             alert(111)
         },
@@ -84,6 +105,13 @@ export default {
 <style lang="scss" scoped>
 ::v-deep .el-table__fixed, ::v-deep .el-table__fixed-right ::before{
    height: 0px !important;
-
 }
-</style>
+.table {
+  margin: 0 14px 0 13px;
+  ::v-deep .el-pagination {
+    margin-top: 13px;
+    padding-left: 20px;
+    padding-bottom: 10px;
+  }
+}
+</style>

src/views/userCenter/processCenter/gencyProcess.vue

@@ -1,26 +1,30 @@
 <template>
   <div>
-    <el-table :data="tableData" style="width: 100%" border :header-cell-style="{
+    <div class="table">
-      background: '#DFE6EC',
+      <vxe-table  ref="xTable" :data="tableData" :empty-render="{name: 'NotData'}" align="center" border stripe v-table-min-height="'calc(100vh - 380px)'">
-      fontWeight: '700',
+        <vxe-column show-overflow show-header-overflow type="seq" title="序号" width="77">
-      color: '#1F2D3D',
+          <template #default="{ row, rowIndex }">
-    }">
+            {{ rowIndex + (q.pageNo - 1) * q.pageSize + 1 }}
-      <el-table-column prop="processId" label="流程编号"  align="center">
+          </template>
-      </el-table-column>
+        </vxe-column>
-      <el-table-column prop="processName" label="流程名称" align="left">
+        <vxe-column show-overflow show-header-overflow field="prcNum"
-      </el-table-column>
+                    title="流程编号"></vxe-column>
-      <el-table-column prop="processPerson" label="发起人"  align="center">
+        <vxe-column show-overflow show-header-overflow field="prcName" title="流程名称"></vxe-column>
-      </el-table-column>
+        <vxe-column show-overflow show-header-overflow field="labelOneName"
-      <el-table-column prop="createTime" label="创建时间" sortable align="center">
+                    title="发起人"></vxe-column>
-      </el-table-column>
+        <vxe-column show-overflow show-header-overflow field="name" title="创建时间"></vxe-column>
-      <el-table-column  label="操作" width="120" align="center">
+        <vxe-column show-overflow show-header-overflow title="操作" width="200" fixed="right">
-        <template slot-scope="scope">
+          <template #default="{ row }">
-          <el-button @click.native.prevent="handle(scope.$index, tableData)" type="text" size="small">
+            <el-button @click.native.prevent="handle(scope.$index, tableData)" type="text" size="small">
-            办理
+              办理
-          </el-button>
+            </el-button>
-        </template>
+          </template>
-      </el-table-column>
+        </vxe-column>
-    </el-table>
+      </vxe-table>
+      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="q.pageNo"
+                     :page-sizes="[5, 10, 20]" :page-size="q.pageSize" layout="total, sizes, prev, pager, next, jumper"
+                     :total="total" />
+    </div>
   </div>
 </template>
 
@@ -29,6 +33,11 @@ export default {
   name: "gencyProcess",
   data() {
     return {
+      q:{
+        pageNo:1,
+        pageSize:10
+      },
+      total: 0,
       tableData: [
         {
           processId: "2016-05-1",
@@ -75,6 +84,17 @@ export default {
       });
     },
   methods: {
+    // 单页数据量
+    handleSizeChange(val) {
+      this.q.pageSize = val;
+      this.q.pageNo = 1;
+      this.loadData();
+    },
+    // 第几页
+    handleCurrentChange(val) {
+      this.q.pageNo = val;
+      this.loadData();
+    },
     handle() {
       alert(111);
     },
@@ -90,4 +110,12 @@ export default {
    height: 0px !important;
 
 }
-</style>
+.table {
+  margin: 0 14px 0 13px;
+  ::v-deep .el-pagination {
+    margin-top: 13px;
+    padding-left: 20px;
+    padding-bottom: 10px;
+  }
+}
+</style>

src/views/userCenter/processCenter/monitorProcesses.vue

@@ -1,31 +1,37 @@
 <template>
     <div>
-        <el-table :data="tableData" style="width: 100%" border
+      <div class="table">
-            :header-cell-style="{ background: '#DFE6EC', fontWeight: '700', color: '#1F2D3D' }">
+        <vxe-table  ref="xTable" :data="tableData" :empty-render="{name: 'NotData'}" align="center" border stripe v-table-min-height="'calc(100vh - 380px)'">
-            <el-table-column prop="processId" label="流程编号" align="center">
+          <vxe-column show-overflow show-header-overflow type="seq" title="序号" width="77">
-            </el-table-column>
+            <template #default="{ row, rowIndex }">
-            <el-table-column prop="processName" label="流程名称"  align="center">
+              {{ rowIndex + (q.pageNo - 1) * q.pageSize + 1 }}
-            </el-table-column>
+            </template>
-            <el-table-column prop="processPerson" label="发起人" align="center">
+          </vxe-column>
-            </el-table-column>
+          <vxe-column show-overflow show-header-overflow field="prcNum"
-            <el-table-column prop="now" label="当前处理人"  align="center">
+                      title="流程编号"></vxe-column>
-            </el-table-column>
+          <vxe-column show-overflow show-header-overflow field="prcName" title="流程名称"></vxe-column>
-            <el-table-column prop="last" label="上一处理人"  align="center">
+          <vxe-column show-overflow show-header-overflow field="labelOneName"
-            </el-table-column>
+                      title="发起人"></vxe-column>
-            <el-table-column prop="createTime" label="创建时间"  sortable align="center">
+          <vxe-column show-overflow show-header-overflow field="name" title="当前处理人"></vxe-column>
-            </el-table-column>
+          <vxe-column show-overflow show-header-overflow field="labelOneName"
-            <el-table-column prop="endTime" label="完成时间"  sortable align="center">
+                      title="上一处理人"></vxe-column>
-            </el-table-column>
+          <vxe-column show-overflow show-header-overflow field="name" title="创建时间"></vxe-column>
-            <el-table-column prop="status" label="状态"  align="center">
+          <vxe-column show-overflow show-header-overflow field="labelOneName"
-            </el-table-column>
+                      title="完成时间"></vxe-column>
-            <el-table-column  label="操作" width="120" align="center">
+          <vxe-column show-overflow show-header-overflow field="name" title="状态"></vxe-column>
-                <template slot-scope="scope">
+          <vxe-column show-overflow show-header-overflow title="操作" width="200" fixed="right">
-                    <el-button @click.native.prevent="view(scope.$index, tableData)" type="text" size="small">
+            <template #default="{ row }">
-                        查看
+              <el-button @click.native.prevent="view(row, tableData)" type="text" size="small">
-                    </el-button>
+                查看
-                </template>
+              </el-button>
-            </el-table-column>
+            </template>
-        </el-table>
+          </vxe-column>
+        </vxe-table>
+        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="q.pageNo"
+                       :page-sizes="[5, 10, 20]" :page-size="q.pageSize" layout="total, sizes, prev, pager, next, jumper"
+                       :total="total" />
+      </div>
+
     </div>
 </template>
 <script>
@@ -33,6 +39,11 @@ export default {
     name: 'monitorProcess',
     data() {
         return {
+          q:{
+            pageNo:1,
+            pageSize:10
+          },
+          total: 0,
             tableData: [{
                 processId: '2016-05-1',
                 processName: '王小虎',
@@ -73,6 +84,17 @@ export default {
       });
     },
     methods: {
+      // 单页数据量
+      handleSizeChange(val) {
+        this.q.pageSize = val;
+        this.q.pageNo = 1;
+        this.loadData();
+      },
+      // 第几页
+      handleCurrentChange(val) {
+        this.q.pageNo = val;
+        this.loadData();
+      },
         view() {
           this.$router.push({
             path: 'monitorViews',
@@ -88,6 +110,13 @@ export default {
 <style lang="scss" scoped>
  ::v-deep .el-table__fixed,.el-table__fixed-right ::before{
    height: 0px !important;
-
 }
-</style>
+ .table {
+   margin: 0 14px 0 13px;
+   ::v-deep .el-pagination {
+     margin-top: 13px;
+     padding-left: 20px;
+     padding-bottom: 10px;
+   }
+ }
+</style>

src/views/userCenter/processCenter/monitorProcesses/monitorDetail.vue

@@ -0,0 +1,595 @@
+<!-- 流程详情 -->
+<template>
+  <div id="processDetails" v-loading="loading">
+    <div class="flow-chart">
+      <div class="flow-header">
+        <div class="back" title="返回" @click="back">
+          <i class="el-icon-back"></i>
+        </div>
+        <!--        <span class="flow-chart-title">{{ $route.params.processNumber }}  {{ $route.params.processTypeName }}  流程图</span>-->
+      </div>
+      <div v-loading="imgLoading" class="flow-group" style="margin-top: 30px;overflow: auto;">
+        <img :src="processStep" class="process-img">
+      </div>
+    </div>
+    <div class="action-bar">
+      <div class="btn">
+        <el-button type="primary" class="inner-btn" @click="showDialog">
+          调整处理人
+        </el-button>
+      </div>
+<!--      <el-button-->
+<!--        v-if="urgeRowFlag"-->
+<!--        class="common-button-default"-->
+<!--        size="small"-->
+<!--        @click="urgeRow"-->
+<!--      >催办</el-button>-->
+<!--      <el-button-->
+<!--        class="common-button-default export-button"-->
+<!--        size="small"-->
+<!--        @click="exportStandard"-->
+<!--      >导出</el-button>-->
+    </div>
+    <div class="flow-list">
+      <el-table
+        height="100%"
+        ref="selection"
+        :data="detailData"
+        tooltip-effect="dark"
+        style="width: 100%"
+        border
+        row-key="id"
+        :no-data-text="listNoDataText"
+        :header-cell-style="{background: '#f8f8f9', color: '#515a6e'}"
+        @selection-change="tableChange"
+      >
+        <el-table-column
+          type="selection"
+          width="55"
+          align="center">
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          label="任务步骤"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="assignee"
+          label="任务受理人"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="createTime"
+          label="创建时间"
+          sortable
+          align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.row.createTime ? formatIssueDate(scope.row.createTime) : '' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="endTime"
+          label="完成时间"
+          align="center"
+          sortable>
+          <template slot-scope="scope">
+            <span>{{ scope.row.endTime ? formatIssueDate(scope.row.endTime) : '' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="approvalOpinion"
+          label="审批意见"
+          align="center">
+          <template slot-scope="scope">
+            <el-tooltip class="item" effect="dark" :content="scope.row.approvalOpinion" placement="top">
+              <span>{{scope.row.approvalOpinion}}</span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <!--        <el-table-column-->
+        <!--          prop="completeFlag"-->
+        <!--          label="状态"-->
+        <!--          align="center">-->
+        <!--          <template slot-scope="scope">-->
+        <!--            <span>{{ scope.row.endTime ? '已完成' : '未完成'}}</span>-->
+        <!--          </template>-->
+        <!--        </el-table-column>-->
+        <!--        <el-table-column label="操作" align="center" width="50">-->
+        <!--          <template slot-scope="scope">-->
+        <!--            <div @click.stop style="display: inline-block">-->
+        <!--              <el-dropdown trigger="click" @command="handleCommand">-->
+        <!--                <i class="iconfont">&#xe61e;</i>-->
+        <!--                <el-dropdown-menu slot="dropdown">-->
+        <!--                  <el-dropdown-item :command="[scope.row, '查看']">查看</el-dropdown-item>-->
+        <!--                  <el-dropdown-item :command="[scope.row, '删除']">删除</el-dropdown-item>-->
+        <!--                </el-dropdown-menu>-->
+        <!--              </el-dropdown>-->
+        <!--            </div>-->
+        <!--          </template>-->
+        <!--        </el-table-column>-->
+      </el-table>
+      <!--      <loading :loading="loading">流程列表加载中</loading>-->
+
+      <el-drawer
+        title="调整处理人"
+        :visible.sync="drawerModal"
+        size="300px"
+        :before-close="treeCancel"
+      >
+        <div class="demo-drawer-content">
+          <dept-tree
+            treeDivId="drawerModalTree"
+            ref="drawerModalTree"
+            @treeClick="selcetTree"
+            allDept
+            showUser
+            :editable="false"
+          >
+          </dept-tree>
+        </div>
+        <div class="demo-drawer-footer">
+          <el-button size="small" class="common-button-primary" icon="el-icon-check" type="primary" :loading="assigneeNewLoading" @click="addTree">确定</el-button>
+          <el-button size="small" class="common-button-default" icon="el-icon-close" @click="treeCancel">取消</el-button>
+        </div>
+      </el-drawer>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapMutations } from 'vuex'
+import ProcessMixin from "@/components/ProcessMixin";
+export default {
+  name: 'processDetail',
+  mixins: [ProcessMixin],
+  data () {
+    return {
+      assigneeNewLoading: false, // 调整处理人确定loading
+      loginPeople: '',
+      // 调整处理人抽屉状态
+      drawerModal: false,
+      urgeRowFlag: true,
+      tasksName: '',
+      selectPeople: '',
+      // loading
+      loading: false,
+      imgLoading: false,
+      // 流程步骤
+      processStep: null,
+      // 当前节点
+      taskKey: 0,
+      // 当前流程类型(1待办/2已办)
+      processType: 1,
+      // 流程列表
+      detailData: [],
+      taskNames: '',
+      userId: '',
+      tableRow: [], // 接受表格数据
+      completeFlagType: true, // 判断当前任务是否完成
+      processState: true, // 判断当前流程
+      detailsList: [],
+      shunxu: '',
+      paixu: ''
+    }
+  },
+  methods: {
+    formatIssueDate(str) {
+      const momentDate = this.$moment(str)
+      if (momentDate.isValid()) {
+        return this.$moment(str).format('YYYY-MM-DD HH:mm:ss')
+      } else {
+        return str
+      }
+    },
+    /**
+     * @author liruohao
+     * @date 2019/4/22
+     * @Description: 查看流程最后一步
+     */
+    seeProcessLast () {
+      let index = this.detailData.length - 1 // 当前流程任务最后一步index
+      let isEnd = true
+      let row = {...this.detailData[index]}
+      row.taskIds = row.id
+      row.taskInfo = row.name
+      row.tabsName = this.$route.query.tabsName
+      let prcType = this.detailData[index].prcType // 流程类型
+      // 判断当前流程是否已全部办理完成
+      this.detailData.map(item => {
+        if (!item.endTime) {
+          isEnd = false
+        }
+      })
+      if (isEnd) {
+        if (this.$store.state.detailMap !== '') {
+          let lastDetailMap = this.$store.getters.getLastDetailMap
+          lastDetailMap.push(this.$store.state.detailMap)
+          this.$store.commit('setLastDetailMap', JSON.stringify(lastDetailMap))
+        }
+        this.$store.commit('setDetailMap', this.$route.path)
+        row.isEnd = isEnd
+        this.setHandleInfo((JSON.stringify(row)))
+        this.setPrcLastDetail((JSON.stringify(row)))
+        // 根据type判断跳转具体流程页面
+        switch (prcType) {
+          case '1':
+            break
+        }
+      } else {
+        this.$message.warning('当前流程未全部办理完成，无法查看')
+      }
+    },
+    // table行选择事件
+    tableChange (row) {
+      this.tableRow = row
+    },
+    //转办
+    Transfer(){
+
+    },
+    // 催办
+    urgeRow () {
+      if (this.tableRow.length === 1 && !this.tableRow[0].endTime) {
+        this.$confirm('您确认要催办该任务吗', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+          confirmButtonClass: 'common-button-primary',
+
+        }).then(() => {
+          this.urge(this.tableRow[0])
+        })
+      } else {
+        this.$message.warning('请选择一条未完成的数据')
+      }
+    },
+    handleCommand (command) {
+      switch (command[1]) {
+        case '查看':
+          this.classAdd(command[0])
+          break
+        case '删除':
+          this.classDel(command[0])
+          break
+      }
+    },
+    // 清空条件
+    clearanceCondition () {
+      this.completeFlagType = true
+      this.tableRow = []
+    },
+    back () {
+      // this.$router.push({
+      //   name: 'ProcessCenter',
+      //   query: {
+      //     tabsName: this.$route.query.tabsName
+      //   }
+      // })
+      //要返回上一级
+      this.$router.back()
+    },
+    // 调整处理人确定事件
+    addTree () {
+      if (this.userId === '') {
+        this.$message.warning('请选择一个处理人进行调整')
+      } else {
+        this.assigneeNewLoading = true
+        changeAssigneeNew({
+          taskId: this.selectPeople.id, // 任务id
+          assignee: this.userId, // 被委托人
+          userId: this.selectPeople.assigneeId, // 委托人
+          pId: this.selectPeople.processInstanceId // 流程实例
+        }).then(res => {
+          this.assigneeNewLoading = false
+          if (res.success) {
+            this.drawerModal = false
+            this.$message.success('调整成功')
+            this.userId = ''
+            this.processNum()
+            this.processTable()
+          } else {
+            this.$message.warning(res.message)
+          }
+        })
+      }
+    },
+    // 取消
+    treeCancel () {
+      this.drawerModal = false
+      this.$refs.drawerModalTree.treeReload()
+      this.userId = ''
+    },
+    // 树点击
+    selcetTree (treeId, treeNode) {
+      this.userId = treeNode.id
+    },
+    selectAll () {
+      let processId = this.$route.params.id
+      let processNumber = this.$route.params.processNumber
+      window.open('/api/activiti/busProcess/exportTaskInfos?id=' + processId + '&taskName=' + this.taskNames + '&processNumber=' + processNumber)
+    },
+    /**
+     * @description: 流程催办
+     * @author: chenxiaoxi
+     * @date: 2018/10/11 13:41:45
+     */
+    urge (row) {
+      this.$http.postData('person/personMsg/saveNew',
+        {
+          msgContent: '流程编号为' + row.prcNum + '的流程，请尽快办理。',
+          msgTitle: '流程编号' + row.prcNum,
+          userId: row.assigneeId,
+          msgType: 'TEXT'
+        },
+        {
+          loading: 'loading',
+          _this: this
+        }, res => {
+          this.clearanceCondition()
+          this.processTable()
+          this.$message.success('催办成功')
+        }, e => {
+        })
+    },
+    // 请求转换流程图
+    processNum (row) {
+      this.imgLoading = true;
+      axios.request({
+        url: '/api/lawss/activiti/getImg?_t=' + new Date().getTime(),
+        responseType: 'blob',
+        method: 'get',
+        params: {
+          prcNum:(row && row.parentFlowNum) || this.$route.query.prcNum,
+        }
+      }).then(res => {
+        // let blob = new Blob([res.data], {type: 'image/jpg'})
+        // let url = window.URL.createObjectURL(res.data)
+        this.processStep = window.URL.createObjectURL(res.data)
+      }).finally(_ => {
+        this.imgLoading = false;
+      })
+    },
+    // 请求列表
+    processTable (row) {
+      this.$http.get('lawss/activiti/get_list_by_instance', {
+        prcNum:(row && row.parentFlowNum) || this.$route.query.prcNum,
+        sortWord: this.shunxu ? this.paixu : '',
+        shunxu: this.shunxu
+      }, {
+        loading: 'loading',
+        _this: this
+      }, res => {
+        this.detailData = res
+        res[res.length - 1].endTime ? this.urgeRowFlag = false : this.urgeRowFlag = true
+      }, e => {})
+    },
+    ...mapMutations(['setProcess', 'setHandleInfo', 'setPrcLastDetail']),
+    processFlag (res) {
+      //   if (res.data.hisTaskExcelVOList[0].processTypeFlag === '1' || res.data.hisTaskExcelVOList[0].processTypeFlag === '2' || res.data.hisTaskExcelVOList[0].processTypeFlag === '3' || res.data.hisTaskExcelVOList[0].processTypeFlag === '4' ||
+      //     res.data.hisTaskExcelVOList[0].processTypeFlag === '5' || res.data.hisTaskExcelVOList[0].processTypeFlag === '6' || res.data.hisTaskExcelVOList[0].processTypeFlag === '8') {
+      //     return false
+      //   } else {
+      //     return true
+      //   }
+      // }
+      return false
+    },
+    // 导出事件
+    exportStandard () {
+      let ids = []
+      let exportName = []
+      // if (this.tableRow.length > 0) {
+      //   this.tableRow.map(item => {
+      //     ids.push(item.id)
+      //   })
+      // } else {
+      //   this.detailData.map(item => {
+      //     ids.push(item.id)
+      //   })
+      // }
+      this.processTypeList.map(item => {
+        if(item.value == this.detailData[0].prcType){
+          exportName = item.label
+        }
+      })
+      this.$http.downGetFun('lawss/activiti/historyExport', {
+        prcNum: this.$route.query.prcNum,
+        sortWord: this.shunxu ? this.paixu : '',
+        shunxu: this.shunxu,
+        exportName: exportName
+      }, {_this: this},data=>{
+        const disposition = data.headers['content-disposition'];
+        let fileName = disposition.substring(disposition.indexOf('fileName=') + 9, disposition.length);
+        var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
+        var isOpera = userAgent.indexOf("Opera") > -1;
+        //判断是否IE浏览器
+        if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
+          fileName = decodeUtf8(fileName)
+        } else {
+          // iso8859-1的字符转换成中文
+          fileName = decodeURI(escape(fileName));
+          // 去掉双引号
+          fileName = fileName.replace(/\"/g, "");
+        }
+        // console.log(fileName, 666)
+        function decodeUtf8(bytes) {
+          var encoded = "";
+          for (var i = 0; i < bytes.length; i++) {
+            encoded += '%' + bytes[i].toString(16);
+          }
+          return decodeURIComponent(encoded);
+        }
+        if (!data.data || data.data.size === 0) {
+          this.$message.warning("文件下载失败")
+          return
+        }
+        if (typeof window.navigator.msSaveBlob !== 'undefined') {
+          window.navigator.msSaveBlob(new Blob([data.data], {type: 'application/zip'}), fileName)
+        } else {
+          let url = window.URL.createObjectURL(new Blob([data.data], {type: 'application/zip'}))
+          let link = document.createElement('a')
+          link.style.display = 'none'
+          link.href = url
+          link.setAttribute('download', fileName)
+          document.body.appendChild(link)
+          link.click()
+          document.body.removeChild(link) //下载完成移除元素
+          window.URL.revokeObjectURL(url) //释放掉blob对象
+        }
+      })
+      // window.location.href = '/api/lawss/activiti/historyExport?sortWord=' + this.shunxu ? this.paixu : '' + '&exportName=' + exportName + '&prcNum=' + this.$route.query.prcNum + '&shunxu=' + this.shunxu
+      // this.$message.success('导出文件成功')
+    },
+    // 表格排序
+    sortChange (sortObj) {
+      if (sortObj.column.order !== 'normal') {
+        this.shunxu = ''
+        this.paixu = ''
+        let order = sortObj.column.order
+        switch (sortObj.column.property) {
+          // 任务步骤
+          case 'name' :
+            // 后台联调
+            this.paixu = 'name'
+            if (order === 'ascending'){
+              this.shunxu = 'asc'
+            } else if (order === 'descending') {
+              this.shunxu = 'desc'
+            }
+            break
+          // 任务受理人
+          case 'assignee' :
+            // 后台联调
+            this.paixu = 'assignee'
+            if (order === 'ascending'){
+              this.shunxu = 'asc'
+            } else if (order === 'descending') {
+              this.shunxu = 'desc'
+            }
+            break
+          // 创建时间
+          case 'createTime' :
+            // 后台联调
+            this.paixu = 'startTime'
+            if (order === 'ascending'){
+              this.shunxu = 'asc'
+            } else if (order === 'descending') {
+              this.shunxu = 'desc'
+            }
+            break
+        }
+      }
+      this.processTable()
+    },
+    queryFlowRelInfoByFlowNum(){
+      this.$http.postData('lawss/activiti/queryFlowRelInfoByFlowNum', {
+        flowNum: this.$route.query.prcNum,
+        flowType: 82
+      }, {
+        loading: 'loading',
+        _this: this
+      }, res => {
+        if (res.success){
+          this.processNum(res.result)
+          this.processTable(res.result)
+        }
+      }, e => {})
+    },
+  },
+  components: {
+  },
+  props: {},
+  computed: {
+    listNoDataText () {
+      return this.processType === 1 ? '暂无待办流程' : '暂无已办流程'
+    },
+    urgeRowMenu () {
+      let flag = false
+      this.$store.getters.getMenuList.map((menu) => {
+        if (menu.id === 'ZDE6GT7UG5' || this.loginPeople === this.$store.getters.userInfo.userId) {
+          flag = true
+        }
+      })
+      return flag
+    },
+    /**
+     * 调整处理人按钮是否显示
+     */
+    tzclrEnable() {
+      return this.$route.query.tabsName === 'MonitorProcess'
+    }
+  },
+  watch: {},
+  beforeUpdate () {
+    if (this.detailData.length > 0) {
+      sessionStorage.setItem('processInstance', JSON.stringify(this.detailData[0]))
+    }
+  },
+  mounted () {
+    if (this.$route.query.prcType == 82){
+      this.queryFlowRelInfoByFlowNum()
+    } else{
+      this.processNum()
+      this.processTable()
+    }
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+//@import '~styles/mixins';
+#processDetails{
+  height: 100%;
+  background-color: #fff;
+  .flow-chart{
+    width: 100%;
+    height: 45%;
+    background: #F0F0F0;
+    border: 1px solid #CCCDCE;
+    border-bottom: none;
+    padding: 10px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    .flow-header{
+      height: 30px;
+      line-height: 30px;
+      //.flex();
+      align-items: center;
+      position: absolute;
+      .flow-chart-title{
+        font-size: 16px;
+        font-weight: bold;
+        padding: 0 20px;
+        //.ellipsis();
+      }
+    }
+    .flow-group{
+      width: 100%;
+      height: calc(100% - 30px);
+      .process-img{
+        //width: 100%;
+        //height: 100%;
+      }
+    }
+  }
+  .flow-list{
+    width: 98%;
+    height: calc(55% - 80px);
+    position: relative;
+    margin: 0 auto;
+  }
+}
+.btn{
+  padding: 20px 13px;
+  .inner-btn{
+    width: 100px;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+</style>

src/views/userCenter/processCenter/sentProcess.vue

@@ -1,110 +1,137 @@
 <template>
-    <div>
+  <div>
-        <el-table :data="tableData" style="width: 100%" border :header-cell-style="{
+    <div class="table">
-            background: '#DFE6EC',
+      <vxe-table ref="xTable" :data="tableData" :empty-render="{name: 'NotData'}" align="center" border stripe
-            fontWeight: '700',
+                 v-table-min-height="'calc(100vh - 380px)'">
-            color: '#1F2D3D',
+        <vxe-column show-overflow show-header-overflow type="seq" title="序号" width="77">
-        }">
+          <template #default="{ row, rowIndex }">
-            <el-table-column prop="processId" label="流程编号"  align="center">
+            {{ rowIndex + (q.pageNo - 1) * q.pageSize + 1 }}
-            </el-table-column>
+          </template>
-            <el-table-column prop="processName" label="流程名称" align="center">
+        </vxe-column>
-            </el-table-column>
+        <vxe-column show-overflow show-header-overflow field="prcNum"
-            <el-table-column prop="processPerson" label="发起人"  align="center">
+                    title="流程编号"></vxe-column>
-            </el-table-column>
+        <vxe-column show-overflow show-header-overflow field="prcName" title="流程名称"></vxe-column>
-            <el-table-column prop="now" label="当前处理人"  align="center">
+        <vxe-column show-overflow show-header-overflow field="creatUserName"
-            </el-table-column>
+                    title="发起人"></vxe-column>
-            <el-table-column prop="last" label="上一处理人"  align="center">
+        <vxe-column show-overflow show-header-overflow field="taskAssignee" title="当前处理人"></vxe-column>
-            </el-table-column>
+        <vxe-column show-overflow show-header-overflow field="taskBackAssignee"
-            <el-table-column prop="createTime" label="创建时间"  sortable align="center">
+                    title="上一处理人"></vxe-column>
-            </el-table-column>
+        <vxe-column show-overflow show-header-overflow field="creatTime" title="创建时间"></vxe-column>
-            <el-table-column prop="endTime" label="完成时间" sortable align="center">
+        <vxe-column show-overflow show-header-overflow field="endTime"
-            </el-table-column>
+                    title="完成时间"></vxe-column>
-            <el-table-column prop="status" label="状态"  align="center">
+        <vxe-column show-overflow show-header-overflow field="isEnd" title="状态"></vxe-column>
-            </el-table-column>
+        <vxe-column show-overflow show-header-overflow title="操作" width="200" fixed="right">
-            <el-table-column  label="操作" width="120" align="center">
+          <template #default="{ row,index }">
-                <template slot-scope="scope">
+            <el-button type="text" size="small">
-                    <el-button @click.native.prevent="view(scope.$index, tableData)" type="text" size="small">
+              查看
-                        查看
+            </el-button>
-                    </el-button>
+            <el-button type="text" size="small">
-
+              <span>强制撤回</span>
-                    <el-button :disabled="tableData[scope.$index].status=='已完成'" @click.native.prevent="back(scope.$index, tableData)" type="text" size="small"
+            </el-button>
-                        >
+          </template>
-                        <span :style="tableData[scope.$index].status=='已完成' ?  {color:icolor } :{color:color}" >强制撤回</span>
+        </vxe-column>
-                      
+      </vxe-table>
-                    </el-button>
+      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="q.pageNo"
-                </template>
+                     :page-sizes="[5, 10, 20]" :page-size="q.pageSize" layout="total, sizes, prev, pager, next, jumper"
-            </el-table-column>
+                     :total="total"/>
-        </el-table>
     </div>
+
+  </div>
 </template>
 
 <script>
 export default {
-    name: "sentProcess",
+  name: "sentProcess",
-    data() {
+  data() {
-        return {
+    return {
-            color:'rgb(236, 128, 141)',
+      color: 'rgb(236, 128, 141)',
-            icolor:'rgb(119,136,153)',
+      icolor: 'rgb(119,136,153)',
-            tableData: [
+      q: {
-                {
+        pageNo: 1,
-                    processId: "2016-05-1",
+        pageSize: 10
-                    processName: "王小虎",
+      },
-                    processPerson: "上海市普陀区金沙江路 1518 弄",
+      total: 0,
-                    createTime: "2023-1-1",
+      tableData: [
-                    status:'已完成'
+        {
-                },
+          processId: "2016-05-1",
-                {
+          processName: "王小虎",
-                    processId: "2016-05-2",
+          processPerson: "上海市普陀区金沙江路 1518 弄",
-                    processName: "王小虎",
+          createTime: "2023-1-1",
-                    processPerson: "上海市普陀区金沙江路 1518 弄",
+          status: '已完成'
-                    createTime: "2023-1-2",
-                },
-                {
-                    processId: "2016-05-3",
-                    processName: "王小虎",
-                    processPerson: "上海市普陀区金沙江路 1518 弄",
-                    createTime: "2023-1-3",
-                },
-                {
-                    processId: "2016-05-4",
-                    processName: "王小虎",
-                    processPerson: "上海市普陀区金沙江路 1518 弄",
-                    createTime: "2023-1-4",
-                },
-            ],
-        };
-    },
-    props:{
-      thirdData:{
-          type:Array,
-          default:[],
-      }
-    },
-    watch: {
-        thirdData(newValue, oldValue) {
-          this.tableData=newValue
-        }
-    },
-    mounted () {
-      this.$bus.$on('getSearchItem',(data)=>{
-          console.log('33',data)
-      });
-    },
-    methods: {
-        view() {
-            alert(111);
         },
-        back(index,tableData) {
+        {
-            console.log('index',index);
+          processId: "2016-05-2",
-            console.log('tableData',tableData);
+          processName: "王小虎",
+          processPerson: "上海市普陀区金沙江路 1518 弄",
+          createTime: "2023-1-2",
         },
+        {
+          processId: "2016-05-3",
+          processName: "王小虎",
+          processPerson: "上海市普陀区金沙江路 1518 弄",
+          createTime: "2023-1-3",
+        },
+        {
+          processId: "2016-05-4",
+          processName: "王小虎",
+          processPerson: "上海市普陀区金沙江路 1518 弄",
+          createTime: "2023-1-4",
+        },
+      ],
+    };
+  },
+  props: {
+    thirdData: {
+      type: Array,
+      default: [],
+    }
+  },
+  watch: {
+    thirdData(newValue, oldValue) {
+      this.tableData = newValue
+    }
+  },
+  mounted() {
+    this.$bus.$on('getSearchItem', (data) => {
+      console.log('33', data)
+    });
+  },
+  methods: {
+    // 单页数据量
+    handleSizeChange(val) {
+      this.q.pageSize = val;
+      this.q.pageNo = 1;
+      this.loadData();
     },
+    // 第几页
+    handleCurrentChange(val) {
+      this.q.pageNo = val;
+      this.loadData();
+    },
+    view() {
+      alert(111);
+    },
+    back(index, tableData) {
+      console.log('index', index);
+      console.log('tableData', tableData);
+    },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
-::v-deep .el-table__fixed, ::v-deep .el-table__fixed-right ::before{
+::v-deep .el-table__fixed, ::v-deep .el-table__fixed-right ::before {
-   height: 0px !important;
+  height: 0px !important;
 
 }
-</style>
+
+.table {
+  margin: 0 14px 0 13px;
+
+  ::v-deep .el-pagination {
+    margin-top: 13px;
+    padding-left: 20px;
+    padding-bottom: 10px;
+  }
+}
+</style>