修改流程详情

src/pages/processCenter/pages/processDetail/index.vue

@@ -4,12 +4,49 @@
         <div class="flow-chart">
             <div class="flow-header">
                 <div class="back" title="返回" @click="back">
-          <i class="el-icon-back" />
+                    <i class="el-icon-back"/>
                 </div>
                 <!--        <span class="flow-chart-title">{{ $route.params.processNumber }}  {{ $route.params.processTypeName }}  流程图</span>-->
             </div>
             <div class="flow-group" style="margin-top: 30px;overflow: auto;">
-        <img :src="processStep" class="process-img">
+                <img v-if="$route.query.oldAndNew == 'old'" :src="processStep" class="process-img">
+                <div v-else-if="$route.query.oldAndNew == 'new'" class="flow-group-process">
+                    <div class="flow-group-process-stard">
+                        开始
+                    </div>
+                    <div v-for="(item,index) in nameList"
+                         :class="{'flow-group-process-box-one':arrangeFromTheLeft(index + 1)}"
+                         class="flow-group-process-box">
+                        <div v-if="leftArrow(index + 1)"
+                             :class="{'flow-group-process-arrow-left':arrangeFromTheLeft(index + 1)}"
+                             class="flow-group-process-arrow">
+                        </div>
+                        <div class="flow-group-process-content"
+                             :style="backdrop(item.status)"
+                             :class="{'flow-group-process-content-dis':!leftArrow(index + 1)}">
+                            <div class="flow-group-process-content-top">
+                                起草
+                            </div>
+                            <div class="flow-group-process-content-bottom">
+                                {{item.name}}
+                            </div>
+                        </div>
+                        <div v-if="isVerticalLine(index + 1)"
+                             :class="{'flow-group-process-arrow-one':(index + 1) % num == 0 ? true : false}"
+                             class="flow-group-process-arrow"></div>
+                        <div v-if="!arrangeFromTheLeft(index + 1) && (index + 1) == nameList.length
+                             && (index + 1) % num != 0"
+                             :class="{'flow-group-process-arrow-left':arrangeFromTheLeft(index + 1)}"
+                             class="flow-group-process-arrow">
+                        </div>
+                    </div>
+                    <div class="flow-group-process-end"
+                         :style="backdrop(nameList[nameList.length - 1].status == 1 ? 1 : 3)"
+                         :class="{'flow-group-process-end-left':isProcessEnd(nameList.length),
+                         'flow-group-process-end-one':isProcessEndOne(nameList.length),}">
+                        结束
+                    </div>
+                </div>
             </div>
         </div>
         <div class="action-bar">
@@ -77,7 +114,7 @@
                         width="55"
                         align="center"
                 />
-        <el-table-column type="index" width="55" label="序号" align="center" />
+                <el-table-column type="index" width="55" label="序号" align="center"/>
                 <el-table-column
                         prop="name"
                         label="任务步骤"
@@ -152,15 +189,81 @@
 </template>
 
 <script>
-import { mapMutations } from 'vuex'
+    import {mapMutations} from 'vuex'
-import { changeAssigneeNew } from 'api/process'
+    import {changeAssigneeNew} from 'api/process'
-import axios from 'axios'
+    import axios from 'axios'
-import eventBus from '@/common/eventHub'
+    import * as echarts from 'echarts'
+    import eventBus from '@/common/eventHub'
 
-export default {
+    export default {
         name: 'ProcessDetail',
-  data () {
+        data() {
             return {
+                nameList: [
+                    {
+                        name: '张三1',
+                        status: 1
+                    },
+                    {
+                        name: '张三2',
+                        status: 1
+                    },
+                    {
+                        name: '张三3',
+                        status: 2
+                    },
+                    {
+                        name: '张三4',
+                        status: 3
+                    },
+                    {
+                        name: '张三5',
+                        status: 3
+                    },
+                    {
+                        name: '张三6',
+                        status: 3
+                    },
+                    // {
+                    //     name: '张三7'
+                    // },
+                    // {
+                    //     name: '张三8'
+                    // },
+                    // {
+                    //     name: '张三9'
+                    // },
+                    // {
+                    //     name: '张三10'
+                    // },
+                    // {
+                    //     name: '张三11'
+                    // },
+                    // {
+                    //     name: '张三12'
+                    // },
+                    // {
+                    //     name: '张三13'
+                    // },
+                    // {
+                    //     name: '张三14'
+                    // },
+                    // {
+                    //     name: '张三15'
+                    // },
+                    // {
+                    //     name: '张三16'
+                    // },
+                    // {
+                    //     name: '张三17'
+                    // },
+                    // {
+                    //     name: '张三18'
+                    // },
+                    // {
+                    //     name: '张三19'
+                    // },
+                ],
                 approveShow: false,
                 approveRowIndex: 0,
                 assigneeNewLoading: false, // 调整处理人确定loading
@@ -192,11 +295,36 @@ export default {
                     value: '',
                     valueName: ''
                 },
-      excludeUser: this.$store.getters.userInfo.userId
+                excludeUser: this.$store.getters.userInfo.userId,
+                num: 0,
             }
         },
         methods: {
-    checkedRole (data) {
+            getProcessList() {
+                let query = {
+                    actiProcInstId:this.$route.query.actiProcInstId,
+                    flowType:this.$route.query.flowType,
+                }
+                this.$http.get('/lawss/activiti/getImgDataList', query, {
+                    loading: 'loading',
+                    _this: this
+                }, res => {
+                    // this.detailData = res
+                    this.$nextTick(() => {
+                        let flowGroupProcess = document.getElementsByClassName('flow-group-process')
+                        let num = (flowGroupProcess[0].offsetWidth - 100) / 248
+                        this.num = Math.floor(num)
+                        let width = 248 * this.num
+                        let offsetWidth = flowGroupProcess[0].offsetWidth
+
+                        flowGroupProcess[0].style.width = (offsetWidth - (offsetWidth - 100 - width) + 40) + 'px'
+                        console.log(offsetWidth);
+                        console.log(flowGroupProcess);
+                    })
+                }, e => {
+                })
+            },
+            checkedRole(data) {
                 this.assigneeNewLoading = true
                 changeAssigneeNew({
                     taskId: this.selectPeople.id, // 任务id
@@ -216,12 +344,12 @@ export default {
                 })
             },
             // 汇总流程
-    approveHandler () {
+            approveHandler() {
                 const index = this.detailData.length - 1 // 当前流程任务最后一步index
                 const isEnd = true
-      let row = { ...this.detailData[this.approveRowIndex + 1] }// 汇总页下一步拿到数据
+                let row = {...this.detailData[this.approveRowIndex + 1]}// 汇总页下一步拿到数据
-      if(this.approveRowIndex === this.detailData.length - 1) { // 最后一步
+                if (this.approveRowIndex === this.detailData.length - 1) { // 最后一步
-        row = { ...this.detailData[this.approveRowIndex] }
+                    row = {...this.detailData[this.approveRowIndex]}
                 }
                 row.taskIds = row.id
                 row.taskInfo = row.name
@@ -245,49 +373,49 @@ export default {
                     if (prcType === '1') {
                         // 标准入库流程数据 //第一步
                         this.toProcessDetail('bzrkStep1-1', row)
-        }else if(prcType === '2') {
+                    } else if (prcType === '2') {
                         // 标准调研流程 //第五步
                         this.toProcessDetail('bzdyStep5-1', row)
-        }else if(prcType === '3') {
+                    } else if (prcType === '3') {
                         // 标准征求意见 第七步
                         this.toProcessDetail('bzzqyjStep5-1', row)
-        }else if(prcType === '4') {
+                    } else if (prcType === '4') {
                         // 标准清单发布流程数据 第一步
                         this.toProcessDetail('bzqdfbStep1_1', row)
-        } else if(prcType === '9') {
+                    } else if (prcType === '9') {
                         // 标准解读流程 数据汇总页面 最后一步 暂时没有
                         this.toProcessDetail('bzjdStep6-1', row)
-        }else if (prcType === '5') {
+                    } else if (prcType === '5') {
                         // 标准合规评估流程 最后一步
                         this.toProcessDetail('bzpgStep8-2', row)
-        }else if(prcType === '6') {
+                    } else if (prcType === '6') {
                         // 项目合规评估流程 最后一步
                         // this.toProcessDetail('xmpg2Step12-1',row)
                         this.toProcessDetail('xmpgStep5-1', row)
-        }else if(prcType === '10') {
+                    } else if (prcType === '10') {
                         // 项目清单确认 最后一步
                         this.toProcessDetail('xmqdqrStep4-1', row)
-        }else if (prcType === '8') {
+                    } else if (prcType === '8') {
                         // 未符合项整改 3
                         this.toProcessDetail('wfhxzgStep3-1', row)
-        }else if(prcType === 'buss1') {
+                    } else if (prcType === 'buss1') {
                         // 企标制修订 技术标准 第9
                         this.toProcessDetail('bussLibrary11-1', row)
-        }else if(prcType === 'buss2') {
+                    } else if (prcType === 'buss2') {
                         // 企标 产品标准 6
                         // this.toProcessDetail('bussLibraryProduct6-1', row)
-          const params = { type: '6' }
+                        const params = {type: '6'}
                         this.toProcessDetailForParams('bussLibraryProduct', row, params)
-        }else if(prcType === 'buss3') {
+                    } else if (prcType === 'buss3') {
                         // 企标复审 4
                         this.toProcessDetail('bussFs2-1', row)
-        }else if(prcType === '24') {
+                    } else if (prcType === '24') {
                         // 企标废止 3
                         this.toProcessDetail('qbfzStep4-1', row)
-        }else if(prcType === '25') {
+                    } else if (prcType === '25') {
                         // 企标制修订计划管控 1
                         this.toProcessDetail('qbzxdjhgkStep1-1', row)
-        }else if(prcType === '26') {
+                    } else if (prcType === '26') {
                         // 企标制修订计划立项 1
                         this.toProcessDetail('qbzxdlxStep1-1', row)
                     } else if (prcType === '33') {
@@ -336,10 +464,10 @@ export default {
              * @date 2019/4/22
              * @Description: 查看流程最后一步
              */
-    seeProcessLast () {
+            seeProcessLast() {
                 const index = this.detailData.length - 1 // 当前流程任务最后一步index
                 const isEnd = true
-      const row = { ...this.detailData[0] }
+                const row = {...this.detailData[0]}
                 row.taskIds = row.id
                 row.taskInfo = row.name
                 row.tabsName = this.$route.query.tabsName
@@ -365,101 +493,101 @@ export default {
                     if (prcType === '1') {
                         // 标准入库流程数据
                         this.toProcessDetail('bzrkStep1', row)
-        }else if(prcType === 'laws1') {
+                    } else if (prcType === 'laws1') {
                         // 政策入库
                         // this.toProcessDetail('zcrkStep1',row)
                         this.toProcessDetailForParams('policyWarehousing1', row)
-        }else if(prcType === 'laws2') {
+                    } else if (prcType === 'laws2') {
                         // 政策征求意见流程
                         this.toProcessDetail('zczqyjStep1', row)
-        }else if(prcType === 'laws3') {
+                    } else if (prcType === 'laws3') {
                         // 重点认证标准/政策合规性项目审查流程
                         this.toProcessDetail('zdrzbzORzchgxxmscStep1', row)
-        }else if(prcType === 'buss1') {
+                    } else if (prcType === 'buss1') {
                         // 企标入库
                         this.toProcessDetail('bussLibrary1', row)
-        }else if(prcType === 'buss2') {
+                    } else if (prcType === 'buss2') {
                         // 企标入库
                         // this.toProcessDetail('bussLibraryProduct1', row)
-          const params = { type: '1' }
+                        const params = {type: '1'}
                         this.toProcessDetailForParams('bussLibraryProduct', row, params)
-        }else if(prcType === 'buss3') {
+                    } else if (prcType === 'buss3') {
                         // 企标复审
                         this.toProcessDetail('qbfsStep1', row)
-        }else if(prcType === '4') {
+                    } else if (prcType === '4') {
                         // 标准清单发布流程数据
                         this.toProcessDetail('bzqdfbStep1', row)
-        }else if (prcType === '5') {
+                    } else if (prcType === '5') {
                         // 标准项目合规评估
                         this.toProcessDetail('bzpgStep1', row)
-        }else if(prcType === '6') {
+                    } else if (prcType === '6') {
                         // 标准项目合规评估 项目维度
                         this.toProcessDetail('xmpg2Step1', row)
                     } else if (prcType === '8') {
                         // 未符合项整改
                         this.toProcessDetail('wfhxzgStep1', row)
-        } else if(prcType === '9') {
+                    } else if (prcType === '9') {
                         this.toProcessDetail('bzjdStep1', row)
                         // 标准调研流程
-        }else if(prcType === '2') {
+                    } else if (prcType === '2') {
                         this.toProcessDetail('bzdyStep1', row)
-        }else if(prcType === '3') {
+                    } else if (prcType === '3') {
                         // 标准征求意见
                         this.toProcessDetail('bzzqyjStep1', row)
-        }else if(prcType === '10') {
+                    } else if (prcType === '10') {
                         // 项目清单确认
                         this.toProcessDetail('xmqdqrStep1', row, 'unShowReceipt')
-        }else if(prcType === '14') {
+                    } else if (prcType === '14') {
                         // 加入标准化协会信息备案流程
                         this.toProcessDetail('cywbbzzxdStep1', row,)
-        }else if(prcType === '15') {
+                    } else if (prcType === '15') {
                         // 加入标准化协会信息备案流程
                         this.toProcessDetail('jrbzhxhStep1', row,)
-        } else if(prcType === '16') {
+                    } else if (prcType === '16') {
                         // 外部署名
                         this.toProcessDetail('wbsmStep1', row)
-        }else if(prcType === '20') {
+                    } else if (prcType === '20') {
                         // 入会流程
                         this.toProcessDetail('bzrhStep1', row)
-        } else if(prcType === '21') {
+                    } else if (prcType === '21') {
                         // 参会流程
                         this.toProcessDetail('bzchStep1', row)
-        } else if(prcType === '23') {
+                    } else if (prcType === '23') {
                         // 企标复审
                         this.toProcessDetail('qbfsStep1', row)
-        }else if(prcType === '24') {
+                    } else if (prcType === '24') {
                         // 企标废止
                         this.toProcessDetail('qbfzStep1', row)
-        }else if(prcType === '25') {
+                    } else if (prcType === '25') {
                         // 企标制修订计划管控
                         this.toProcessDetail('qbzxdjhgkStep1', row)
-        }else if(prcType === '26') {
+                    } else if (prcType === '26') {
                         // 企标制修订计划立项
                         this.toProcessDetail('qbzxdlxStep1', row)
-        }else if(prcType === '17') {
+                    } else if (prcType === '17') {
                         // 政策课题入会发起流程
                         this.toProcessDetail('zcrhStep1', row)
-        }else if(prcType === '18') {
+                    } else if (prcType === '18') {
                         // 政策课题参会发起流程
                         this.toProcessDetail('zcchStep1', row)
-        }else if(prcType === '12') {
+                    } else if (prcType === '12') {
                         // 政策课题参会发起流程
                         this.toProcessDetail('zdrzbzORzchgxxmscStep1', row)
-        }else if(prcType === '29') {
+                    } else if (prcType === '29') {
                         // 内外部会议入库
                         // this.toProcessDetail('policyMeetings1',row)
                         this.toProcessDetailForParams('policyMeetings1', row)
-        } else if(prcType === '30') {
+                    } else if (prcType === '30') {
                         // 政策课题入会流程
-          const params = { type: 'step1' }
+                        const params = {type: 'step1'}
                         this.toProcessDetailForParams('policyTopicEnrollment', row, params)
-        } else if(prcType === '31') {
+                    } else if (prcType === '31') {
                         // 政策课题参会流程
-          const params = { type: 'step1' }
+                        const params = {type: 'step1'}
                         this.toProcessDetailForParams('policyTopicParticipation', row, params)
-        } else if(prcType === '32') {
+                    } else if (prcType === '32') {
                         // 政策法规资料入库流程
-          const params = { type: 'step1' }
+                        const params = {type: 'step1'}
                         this.toProcessDetailForParams('policyRegulatoryMaterials', row, params)
                     } else if (prcType === '33') {
                         this.$router.push({
@@ -492,7 +620,7 @@ export default {
                     this.$message.warning('当前流程未全部办理完成，无法查看')
                 }
             },
-    toProcessDetailForParams (componentName, row, params) {
+            toProcessDetailForParams(componentName, row, params) {
                 this.$router.push({
                     name: componentName,
                     query: {
@@ -506,7 +634,7 @@ export default {
                     params
                 })
             },
-    toProcessDetail (componentName, row, unShowReceipt) {
+            toProcessDetail(componentName, row, unShowReceipt) {
                 const data = {
                     name: componentName,
                     query: {
@@ -533,11 +661,11 @@ export default {
                 // this.$router.push(data)
             },
             // table行选择事件
-    tableChange (row) {
+            tableChange(row) {
                 this.tableRow = row
             },
             // 办理任务
-    handlingTasks () {
+            handlingTasks() {
                 // 判断选中一条数据、未完成数据、当前登陆人数据
                 if (this.tableRow.length === 1 && !this.tableRow[0].endTime && this.tableRow[0].assigneeId === this.$store.getters.userInfo.userId) {
                     if (this.$store.state.detailMap !== '') {
@@ -1102,7 +1230,7 @@ export default {
                 }
             },
             // 调整处理人
-    adjustmentHandler () {
+            adjustmentHandler() {
                 if (this.tableRow.length === 1 && !this.tableRow[0].endTime) {
                     this.drawerModal = true
                     this.drawerTitle = '调整处理人'
@@ -1112,7 +1240,7 @@ export default {
                 }
             },
             // 催办
-    urgeRow () {
+            urgeRow() {
                 if (this.tableRow.length === 1 && !this.tableRow[0].endTime) {
                     this.$confirm('您确认要催办该任务吗', '提示', {
                         confirmButtonText: '确定',
@@ -1128,11 +1256,11 @@ export default {
                 }
             },
             // 清空条件
-    clearanceCondition () {
+            clearanceCondition() {
                 this.completeFlagType = true
                 this.tableRow = []
             },
-    back () {
+            back() {
                 this.$router.push({
                     name: 'ProcessCenter',
                     query: {
@@ -1141,7 +1269,7 @@ export default {
                 })
             },
             // 调整处理人确定事件
-    addTree (checkedList) {
+            addTree(checkedList) {
                 if (checkedList.length !== 1) {
                     this.$message.warning('请选择一个处理人进行调整')
                 } else {
@@ -1169,7 +1297,7 @@ export default {
              * @author: chenxiaoxi
              * @date: 2018/10/11 13:41:45
              */
-    urge (row) {
+            urge(row) {
                 this.$http.postData('person/personMsg/saveNew',
                     {
                         msgContent: '流程编号为' + row.prcNum + '的流程，请尽快办理。',
@@ -1188,7 +1316,7 @@ export default {
                     })
             },
             // 请求转换流程图
-    processNum () {
+            processNum() {
                 axios.request({
                     url: '/api/lawss/activiti/getImg?_t=' + new Date().getTime(),
                     responseType: 'blob',
@@ -1203,20 +1331,33 @@ export default {
                 })
             },
             // 请求列表
-    processTable () {
+            processTable() {
-      this.$http.get('lawss/activiti/get_list_by_instance', {
+                let url = ''
+                let query = {}
+                if (this.$route.query.oldAndNew == 'new'){
+                    url = '/lawss/activiti/queryFlowHistoryList'
+                    query = {
+                        actiProcInstId: this.$route.query.actiProcInstId,
+                        flowType: this.$route.query.flowType,
+                    }
+                }else{
+                    url = 'lawss/activiti/get_list_by_instance'
+                    query = {
                         prcNum: this.$route.query.prcNum,
                         sortWord: this.shunxu ? this.paixu : '',
                         shunxu: this.shunxu
-      }, {
+                    }
+                }
+                this.$http.get(url, query, {
                     loading: 'loading',
                     _this: this
                 }, res => {
                     this.detailData = res
-      }, e => {})
+                }, e => {
+                })
             },
-    ...mapMutations([ 'setProcess', 'setHandleInfo', 'setPrcLastDetail' ]),
+            ...mapMutations(['setProcess', 'setHandleInfo', 'setPrcLastDetail']),
-    processFlag (res) {
+            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
@@ -1227,7 +1368,7 @@ export default {
                 return false
             },
             // 导出事件
-    exportStandard () {
+            exportStandard() {
                 const ids = []
                 if (this.tableRow.length > 0) {
                     this.tableRow.map(item => {
@@ -1242,7 +1383,7 @@ export default {
                 this.$message.success('导出信息成功')
             },
             // 表格排序
-    sortChange (sortObj) {
+            sortChange(sortObj) {
                 if (sortObj.column.order !== 'normal') {
                     this.shunxu = ''
                     this.paixu = ''
@@ -1283,7 +1424,7 @@ export default {
                 this.processTable()
             },
             // 流程审批按钮是否显示
-    getApproveShow () {
+            getApproveShow() {
                 this.$http.get('lawss/activiti/get_gather_by_instance', {
                     prcNum: this.$route.query.prcNum,
                     sortWord: this.shunxu ? this.paixu : '',
@@ -1294,17 +1435,96 @@ export default {
                 }, res => {
                     this.approveShow = res[res.length - 1].isGather
                     this.approveRowIndex = res[res.length - 1].index
-      }, e => {})
+                }, e => {
+                })
+            },
+
+            arrangeFromTheLeft(index) {
+                let num = Math.ceil(index / this.num)
+                if (num % 2 == 0) {
+                    return true
+                }
+                return false
+            },
+            leftArrow(index) {
+                let num = Math.ceil(index / this.num)
+                if (num % 2 == 0) {
+                    if (index == this.num * num && this.nameList.length != index) {
+                        return false
+                    }
+                } else {
+                    if (index > this.num) {
+                        if (index == this.num * (num - 1) + 1) {
+                            return false
+                        }
+                    }
+                }
+                return true
+            },
+            isVerticalLine(index) {
+                let num = Math.ceil(index / this.num)
+                if (index % this.num == 0 && this.nameList.length != index) {
+                    return true
+                }
+                if (num == index / this.num && num % 3 == 0) {
+                    return true
+                }
+                if (num == index / this.num && index <= this.num) {
+                    return true
+                }
+                return false
+            },
+            isProcessEnd(index) {
+                let num = Math.ceil(index / this.num)
+                if (num % 2 == 0) {
+                    return false
+                } else {
+                    if (num == index / this.num && index <= this.num) {
+                        return false
+                    }
+                    if (num == index / this.num && num % 3 == 0) {
+                        return false
+                    }
+                    return true
                 }
             },
-  components: {
+            isProcessEndOne(index) {
+                let num = Math.ceil(index / this.num)
+                if (num == index / this.num && index <= this.num) {
+                    return true
+                }
+                if (num == index / this.num && num % 3 == 0) {
+                    return true
+                }
+                return false
             },
+            backdrop(status) {
+                if (status == 1) {
+                    return {
+                        background: '#bcddff',
+                        border: '1px #79c8ff solid',
+                    }
+                } else if (status == 2) {
+                    return {
+                        background: '#ebfccf',
+                        border: '1px #8bcb71 solid',
+                    }
+                } else if (status == 3) {
+                    return {
+                        background: '#fff',
+                        border: '1px #d6d6d6 solid',
+                    }
+                }
+            },
+        },
+
+        components: {},
         props: {},
         computed: {
-    listNoDataText () {
+            listNoDataText() {
                 return this.processType === 1 ? '暂无待办流程' : '暂无已办流程'
             },
-    urgeRowMenu () {
+            urgeRowMenu() {
                 let flag = false
                 this.$store.getters.getMenuList.map((menu) => {
                     if (menu.id === 'ZDE6GT7UG5' || this.loginPeople === this.$store.getters.userInfo.userId) {
@@ -1316,29 +1536,32 @@ export default {
             /**
              * 调整处理人按钮是否显示
              */
-    tzclrEnable () {
+            tzclrEnable() {
                 return this.$route.query.tabsName === 'MonitorProcess'
             }
         },
         watch: {},
-  beforeUpdate () {
+        beforeUpdate() {
             if (this.detailData.length > 0) {
                 sessionStorage.setItem('processInstance', JSON.stringify(this.detailData[0]))
             }
         },
-  mounted () {
+        mounted() {
+
+            this.getProcessList()
             this.processNum()
             this.processTable()
             this.getApproveShow()
         }
-}
+    }
 </script>
 
 <style lang="less" scoped>
-//@import '~styles/mixins';
+    //@import '~styles/mixins';
-#processDetails{
+    #processDetails {
         height: 100%;
-  .flow-chart{
+
+        .flow-chart {
             width: 100%;
             height: 45%;
             background: #F0F0F0;
@@ -1347,33 +1570,195 @@ export default {
             padding: 10px;
             overflow-x: hidden;
             overflow-y: auto;
-    .flow-header{
+
+            .flow-header {
                 height: 30px;
                 line-height: 30px;
                 //.flex();
                 align-items: center;
                 position: absolute;
-      .flow-chart-title{
+
+                .flow-chart-title {
                     font-size: 16px;
                     font-weight: bold;
                     padding: 0 20px;
                     //.ellipsis();
                 }
             }
-    .flow-group{
+
+            .flow-group {
                 width: 100%;
                 height: calc(~'100% - 30px');
-      .process-img{
+
+                .process-img {
                     //width: 100%;
                     //height: 100%;
                 }
+
+                .flow-group-process {
+                    width: 100%;
+                    height: auto;
+                    min-height: 100%;
+                    padding: 20px;
+                    box-sizing: border-box;
+                    /*display: flex;*/
+                    /*align-items: center;*/
+                    /*flex-wrap: wrap;*/
+
+                    .flow-group-process-stard {
+                        width: 100px;
+                        border-radius: 20px;
+                        height: 40px;
+                        background: #bcddff;
+                        border: 1px #79c8ff solid;
+                        font-size: 12px;
+                        color: #000;
+                        text-align: center;
+                        line-height: 40px;
+                        font-weight: 600;
+                        float: inline-start;
+                        margin-top: 18px;
+                    }
+
+                    .flow-group-process-end {
+                        width: 100px;
+                        border-radius: 20px;
+                        height: 40px;
+                        background: #bcddff;
+                        border: 1px #79c8ff solid;
+                        font-size: 12px;
+                        color: #000;
+                        text-align: center;
+                        line-height: 40px;
+                        font-weight: 600;
+                        float: inline-end;
+                        margin-top: 20px;
+                    }
+
+                    .flow-group-process-end-left {
+                        float: inline-start;
+                    }
+
+                    .flow-group-process-end-one {
+                        margin-top: 0;
+                        margin-right: 17px;
+                    }
+
+                    .flow-group-process-arrow {
+                        width: 100px;
+                        height: 1px;
+                        background: #c1c1c1;
+                        margin-right: 8px;
+                    }
+
+                    .flow-group-process-arrow::after {
+                        content: "";
+                        display: inline-block;
+                        position: relative;
+                        left: 100px;
+                        top: -7px;
+                        border-left: 8px solid #c1c1c1;
+                        border-top: 4px solid transparent;
+                        border-bottom: 4px solid transparent;
+                    }
+
+                    .flow-group-process-arrow-one {
+                        width: 30px;
+                        height: 1px;
+                        background: #c1c1c1;
+                        margin-right: 8px;
+                        transform: rotate(90deg);
+                        right: 44px;
+                        position: absolute;
+                        bottom: -16px;
+
+                    }
+
+                    .flow-group-process-arrow-one::after {
+                        content: "";
+                        display: inline-block;
+                        position: relative;
+                        left: 30px;
+                        top: -7px;
+                        border-left: 8px solid #c1c1c1;
+                        border-top: 4px solid transparent;
+                        border-bottom: 4px solid transparent;
+                    }
+
+                    .flow-group-process-arrow-left {
+                        width: 100px;
+                        height: 1px;
+                        background: #c1c1c1;
+                        margin-right: 0;
+                        margin-left: 8px;
+                    }
+
+                    .flow-group-process-arrow-left::after {
+                        content: "";
+                        display: inline-block;
+                        position: relative;
+                        left: -8px;
+                        top: -7px;
+                        border-right: 8px solid #c1c1c1;
+                        border-left: none;
+                        border-top: 4px solid transparent;
+                        border-bottom: 4px solid transparent;
+                    }
+
+                    .flow-group-process-box {
+                        display: flex;
+                        align-items: center;
+                        float: inline-start;
+                        position: relative;
+                        margin-bottom: 40px;
+                    }
+
+                    .flow-group-process-box-one {
+                        float: inline-end;
+                    }
+
+                    .flow-group-process-content {
+                        min-height: 80px;
+                        width: 140px;
+                        background: #bcddff;
+                        border: 1px #79c8ff solid;
+                        font-size: 12px;
+                        color: #000;
+                        text-align: center;
+                        padding: 0 6px;
+                        box-sizing: border-box;
+                        font-weight: 600;
+
+                        .flow-group-process-content-top {
+                            width: 100%;
+                            height: 40px;
+                            line-height: 40px;
+                            font-size: 12px;
+                        }
+
+                        .flow-group-process-content-bottom {
+                            width: 100%;
+                            font-size: 12px;
+                            line-height: 1.4;
+                        }
+
+                        .flow-group-process-arrow-dis {
+                            margin-left: 200px;
                         }
                     }
-  .flow-list{
+
+                    .flow-group-process-content-dis {
+                        margin-left: 208px;
+                    }
+                }
+            }
+        }
+
+        .flow-list {
             width: 100%;
             height: calc(~'55% - 55px');
             border: 1px solid #CCCDCE;
             position: relative;
         }
-}
+    }
 </style>

src/pages/processCenter/pages/processList/tabComponents/alreadyProcess/index.vue

@@ -239,11 +239,23 @@ export default {
       this.queryProcess()
     },
     dealWith (row) { // 查看
+      let oldAndNew = ''
+      const currentDate = new Date().getTime();
+      const date = new Date(row.creatTime);
+      const timestamp = date.getTime();
+      if (currentDate > timestamp){
+        oldAndNew = 'old'
+      }else{
+        oldAndNew = 'new'
+      }
       const routeUrl = this.$router.resolve({
         name: 'ProcessDetail',
         query: {
           prcNum: row.prcNum,
-          tabsName: 'AlreadyProcess'
+          tabsName: 'AlreadyProcess',
+          actiProcInstId: row.prcId,
+          flowType: row.prcType,
+          oldAndNew:oldAndNew,
         }
       })
       window.open(routeUrl.href, '_blank');

src/pages/processCenter/pages/processList/tabComponents/alreadySend/index.vue

@@ -269,11 +269,23 @@ export default {
       this.queryProcess()
     },
     dealWith (row) { // 查看
+      let oldAndNew = ''
+      const currentDate = new Date().getTime();
+      const date = new Date(row.creatTime);
+      const timestamp = date.getTime();
+      if (currentDate > timestamp){
+        oldAndNew = 'old'
+      }else{
+        oldAndNew = 'new'
+      }
       const routeUrl = this.$router.resolve({
         name: 'ProcessDetail',
         query: {
           prcNum: row.prcNum,
-          tabsName: 'AlreadySend'
+          tabsName: 'AlreadySend',
+          actiProcInstId: row.prcId,
+          flowType: row.prcType,
+          oldAndNew:oldAndNew,
         }
       })
       window.open(routeUrl.href, '_blank');

src/pages/processCenter/pages/processList/tabComponents/monitorProcess/index.vue

@@ -242,12 +242,24 @@ export default {
       this.queryProcess()
     },
     dealWith (row) { // 查看
+      let oldAndNew = ''
+      const currentDate = new Date().getTime();
+      const date = new Date(row.creatTime);
+      const timestamp = date.getTime();
+      if (currentDate > timestamp){
+        oldAndNew = 'old'
+      }else{
+        oldAndNew = 'new'
+      }
       const routeUrl = this.$router.resolve({
         name: 'ProcessDetail',
         query: {
           bpnId: row.id,
           prcNum: row.prcNum,
-          tabsName: 'MonitorProcess'
+          tabsName: 'MonitorProcess',
+          actiProcInstId: row.prcId,
+          flowType: row.prcType,
+          oldAndNew:oldAndNew,
         }
       })
       window.open(routeUrl.href, '_blank');

src/pages/processCenter/pages/processList/tabComponents/processCenter/index.vue

@@ -156,7 +156,7 @@
                   <i class="iconfont">&#xe61e;</i>
                   <el-dropdown-menu slot="dropdown">
                     <el-dropdown-item v-btn-permission="'4219fdb5e33dbbc84d845af98c947e66'" :command="[scope.row, '办理']">办理</el-dropdown-item>
-                    <el-dropdown-item v-btn-permission="'5cf95d4e0eaae6118e1375f677a0a08d'":command="[scope.row, '转办']">转办</el-dropdown-item>
+                    <el-dropdown-item v-btn-permission="'5cf95d4e0eaae6118e1375f677a0a08d'" :command="[scope.row, '转办']">转办</el-dropdown-item>
                   </el-dropdown-menu>
                 </el-dropdown>
               </div>