修改流程中心细节的问题

jero-web/src/common/lang/en-us.js

@@ -729,5 +729,9 @@ module.exports = {
   taskConfirmationProcess:'Task confirmation process',
   notFinished:'not finished',
   Finished:'Finished',
-  theRequirementst:'The engineering interface person confirms the compliance requirements'
+  theRequirementst:'The engineering interface person confirms the compliance requirements',
+  dataLoading:'Data loading...',
+  Submitting:'Submitting',
+  Returning:'Returning',
+  terminationProcessing:'Termination process',
 }

jero-web/src/common/lang/zh-cn.js

@@ -734,5 +734,9 @@ module.exports = {
   taskConfirmationProcess:'任务确认流程',
   notFinished:'未完成',
   Finished:'已完成',
-  theRequirementst:'工程接口人确认符合性要求'
+  theRequirementst:'工程接口人确认符合性要求',
+  dataLoading:'数据加载中...',
+  Submitting:'提交中...',
+  Returning:'退回中',
+  terminationProcessing:'终止流程中',
 }

jero-web/src/components/jero/JLoading.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="loading-box" :style="style" v-if="loading">
+    <div class="loading-content">
+      <a-icon class="loading" type="loading" />
+      <div class="loading-tips">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'JLoading',
+    props: {
+      // 是否显示隐藏
+      loading: {
+        type: Boolean,
+        default: false
+      },
+      // 是否固定
+      fixed: {
+        type: Boolean,
+        default: false
+      },
+    },
+    data() {
+      return {
+        style: {}
+      }
+    },
+    mounted() {
+      if (this.fixed) {
+        const el = $(this.el)
+        const top = `${el.offset().top}px`
+        const left = `${el.offset().left}px`
+        const width = `${el.outerWidth()}px`
+        const height = `${el.outerHeight()}px`
+        this.style = {
+          position: 'fixed',
+          top,
+          left,
+          width,
+          height,
+          'z-index': 1000
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="less">
+  .loading-box{
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 9999900;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.9);
+    border-radius: 8px;
+    user-select: none;
+    .loading-content{
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      color: #21c9cc;
+      transform: translate(-50%, -50%);
+      text-align: center;
+      .loading{
+        font-size:28px ;
+      }
+      .spin-loading{
+        animation: rotating 2s linear infinite;
+      }
+      .loading-tips{
+        margin-top: 5px;
+        font-size: 16px;
+        color: #21c9cc;
+      }
+    }
+  }
+</style>

jero-web/src/components/jero/index.js

@@ -26,7 +26,7 @@ import JSlider from './JSlider.vue'
 import JSwitch from './JSwitch.vue'
 import JTime from './JTime.vue'
 import JTreeTable from './JTreeTable.vue'
-
+import JLoading from './JLoading.vue'
 //jerobiz
 import JSelectDepart from '../jerobiz/JSelectDepart.vue'
 import JSelectMultiUser from '../jerobiz/JSelectMultiUser.vue'
@@ -63,6 +63,7 @@ export default {
     Vue.component('JTreeSelect', JTreeSelect)
     Vue.component('JTreeTable', JTreeTable)
     Vue.component('JUpload', JUpload)
+    Vue.component('JLoading', JLoading)
 
     //jerobiz
     Vue.component('JSelectDepart', JSelectDepart)

jero-web/src/components/layouts/TabLayout.vue

@@ -91,7 +91,8 @@
           this.$route.path == '/ProcessMapping' ||
           this.$route.path == '/virtualListDetails' ||
           this.$route.path == '/ProjectDetails' ||
-          this.$route.path == '/handshakeProcess') {
+          this.$route.path == '/handshakeProcess' ||
+          this.$route.path == '/processDetails') {
           return false
         } else {
           return true

jero-web/src/config/router.config.js

@@ -342,6 +342,11 @@ export const constantRouterMap = [
     name: 'handshakeProcess',
     component: () => import(/* webpackChunkName: "user" */ '@/views/processCenter/processForm/handshakeProcess/index')
   },
+  {
+    path: '/processDetails',
+    name: 'processDetails',
+    component: () => import(/* webpackChunkName: "user" */ '@/views/processCenter/processForm/processDetails/index')
+  },
   {
     path: '/docManage/form/detail',
     name: 'processIndex',

jero-web/src/views/processCenter/components/examineInformation.vue

@@ -54,7 +54,8 @@
               <span class="title-text-text" :title="$t('feedbackMessage')">{{$t('feedbackMessage')}}</span>
             </div>
             <a-form-model-item class="itemModel" prop="standard">
-              <a-textarea placeholder="Basic usage" v-model="formInline.approvalOpinion" :rows="4"/>
+              <a-textarea :placeholder="$t('pleaseEnter')+$t('feedbackMessage')" v-model="formInline.approvalOpinion"
+                          :rows="4"/>
             </a-form-model-item>
           </div>
         </a-col>
@@ -89,26 +90,26 @@
   export default {
     name: 'examineInformation',
     props: {
-      isFlag:{
-         type:Boolean,
-         default:false,
+      isFlag: {
+        type: Boolean,
+        default: false
       },
-      isViewUploadedFiles:{
-        type:Boolean,
-        default:false,
-      },
-      isApprovalOpinion:{
-        type:Boolean,
-        default:false,
+      isViewUploadedFiles: {
+        type: Boolean,
+        default: false
       },
+      isApprovalOpinion: {
+        type: Boolean,
+        default: false
+      }
     },
     components: {
       uploadFile,
       PersonnelSelection
     },
-    computed:{
-      issue(){
-        if (this.$route.query.taskDefinitionKey == 'zrrjsrw'){
+    computed: {
+      issue() {
+        if (this.$route.query.taskDefinitionKey == 'zrrjsrw') {
           return true
         }
         return false

jero-web/src/views/processCenter/processForm/handshakeProcess/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div id="examineBox">
     <headerProcess
       :title="$t('theRequirementst')"
       is-termination-process
@@ -9,36 +9,36 @@
       @submit="submit"
       @sendBack="sendBack"
     />
-    <a-spin tip="加载中..." :spinning="loading">
-      <div class="detail-box" v-if="!loading">
-        <div class="detail-content" style="height: 100%">
-          <projectInformation
-            :projectInformationList="projectInformationList"
-            :url="url"
-            :projectInformationId="this.queryBy.projectLibraryId"
-          />
-          <standardContent
-            :standardContentList="standardContentList"
-            :url="url"
-            :standardContentQuery="queryProject"
-          />
-          <standardContentListTable
-            :standardContentListQuery="queryProject"
-            :url="url
+    <div class="detail-box">
+      <div class="detail-content">
+        <projectInformation
+          v-if="!loading"
+          :projectInformationList="projectInformationList"
+          :url="url"
+          :projectInformationId="this.queryBy.projectLibraryId"
+        />
+        <standardContent
+          v-if="!loading"
+          :standardContentList="standardContentList"
+          :url="url"
+          :standardContentQuery="queryProject"
+        />
+        <standardContentListTable
+          v-if="!loading"
+          :standardContentListQuery="queryProject"
+          :url="url
           "/>
-          <examineInformation
-            :isFlag="isFlag"
-            isViewUploadedFiles
-            isApprovalOpinion
-            ref="examineInformationRef"
-            :url="url"/>
-          <circulationHistory :url="url"/>
-        </div>
+        <examineInformation
+          :isFlag="isFlag"
+          v-if="!loading"
+          isViewUploadedFiles
+          isApprovalOpinion
+          ref="examineInformationRef"
+          :url="url"/>
+        <circulationHistory v-if="!loading" :url="url"/>
       </div>
-    </a-spin>
-    <div>
-
     </div>
+    <JLoading :loading="loading">{{textLoading}}</JLoading>
   </div>
 </template>
 
@@ -157,7 +157,8 @@
         },
         queryBy: {},
         queryProject: {},
-        loading: false
+        loading: false,
+        textLoading:this.$t('dataLoading')
       }
     },
     mounted() {
@@ -183,10 +184,14 @@
     methods: {
       ...mapGetters(['userInfo']),
       terminationProcess(handlingTime) {
+        this.textLoading = this.$t('terminationProcessing')
+        this.loading = true
         this.completeTask({ flag: 2 }, handlingTime)
       },
       submit(handlingTime) {
         this.$refs.examineInformationRef.submit((res) => {
+          this.textLoading = this.$t('Submitting')
+          this.loading = true
           if (!this.isFlag) {
             res.flag = 0
           }
@@ -194,6 +199,8 @@
         })
       },
       sendBack(handlingTime) {
+        this.textLoading = this.$t('Returning')
+        this.loading = true
         this.completeTask({ flag: 1 }, handlingTime)
       },
       queryTaskDetailByTask(callback) {
@@ -209,7 +216,7 @@
         })
       },
       completeTask(value, handlingTime) {
-        let json = Object.assign( this.queryBy,{ handlingTime: handlingTime }, value)
+        let json = Object.assign(this.queryBy, { handlingTime: handlingTime }, value)
         let data = JSON.stringify(json).replace(/\"/g, '\'')
         let query = {
           userid: this.userInfo().id,
@@ -219,10 +226,12 @@
         postAction('/workFlow/completeTask', query).then((res) => {
           if (res.success) {
             this.$message.success(this.$t('OperationSuccessful'))
+            this.loading = false
             this.$router.push({
               path: '/ProcessCenter'
             })
           } else {
+            this.loading = false
             this.$message.warning(this.$t('operationFailed'))
           }
         })
@@ -246,11 +255,20 @@
   }
 </script>
 
-<style scoped>
+<style lang="less" scoped>
   .detail-box {
     padding: 67px 0 0 0;
     background: #ffffff;
     height: 100%;
     overflow: auto;
   }
+
+  #examineBox {
+    display: flex;
+    flex-direction: column;
+    background: #fff;
+    position: relative;
+    height: 100%;
+    overflow-y: auto;
+  }
 </style>

jero-web/src/views/processCenter/processForm/processDetails/index.vue

@@ -1,13 +1,113 @@
 <template>
-
+  <div id="processDetails">
+    <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 class="flow-group" style="margin-top: 30px;overflow: auto;">
+        <img :src="processStep" class="process-img">
+      </div>
+    </div>
+    <div class="action-bar">
+    </div>
+    <div class="flow-list">
+      <circulationHistory/>
+    </div>
+  </div>
 </template>
 
 <script>
+  import circulationHistory from '../../components/circulationHistory'
+  import axios from 'axios'
+  import Vue from 'vue'
+  import { ACCESS_TOKEN } from '@/store/mutation-types'
+
   export default {
-    name: 'processDetails'
+    name: 'processDetails',
+    components: {
+      circulationHistory
+    },
+    data() {
+      return {
+        processStep: null
+      }
+    },
+    mounted() {
+      this.processNum()
+    },
+    methods: {
+      back() {
+
+      },
+      // 请求转换流程图
+      processNum() {
+        axios.request({
+          url: '/jero-boot/workFlow/getImg?_t=' + new Date().getTime(),
+          responseType: 'blob',
+          method: 'get',
+          headers: {
+            'X-Access-Token': Vue.ls.get(ACCESS_TOKEN)
+          },
+          params: {
+            prcNum: this.$route.query.prcNum
+          }
+        }).then(res => {
+          this.processStep = window.URL.createObjectURL(res.data)
+        })
+      }
+    }
   }
 </script>
 
-<style scoped>
+<style lang="less" scoped>
+  //@import '~styles/mixins';
+  #processDetails {
+    height: 100%;
 
+    .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: 100%;
+      height: calc(~'55% - 55px');
+      border: 1px solid #CCCDCE;
+      position: relative;
+    }
+  }
 </style>

jero-web/src/views/processCenter/processList/tabComponents/alreadyProcess/index.vue

@@ -144,8 +144,10 @@
       // 打开查看
       classAdd(row) {
         let newUrl = this.$router.resolve({
-          path: '/handshakeProcess',
-          query: row
+          path: '/processDetails',
+          query: {
+            prcNum: row.prcNum
+          }
         })
         window.open(newUrl.href, '_blank')
       }

jero-web/src/views/processCenter/processList/tabComponents/alreadySend/index.vue

@@ -17,7 +17,7 @@
       <span slot="isEnd" slot-scope="text,record">
            {{text && text == 0 ? $t('notFinished'):$t('Finished')}}
       </span>
-       <span slot="operation" slot-scope="record">
+      <span slot="operation" slot-scope="record">
           <a @click="classAdd(record)" style="margin-right:8px">{{$t('See')}}</a>
       </span>
     </a-table>
@@ -107,7 +107,7 @@
             title: this.$t('cutoffTime'),
             dataIndex: 'taskAffirmDueDate',
             align: 'center',
-            ellipsis: true,
+            ellipsis: true
           },
           {
             title: this.$t('operation'),
@@ -151,13 +151,13 @@
 
       // 打开查看
       classAdd(row) {
-        row.disabled = true
-        this.$router.push({
-          path: '/ProcessDetail',
+        let newUrl = this.$router.resolve({
+          path: '/processDetails',
           query: {
             prcNum: row.prcNum
           }
         })
+        window.open(newUrl.href, '_blank')
       }
     },
     mounted() {
@@ -210,6 +210,7 @@
     position: relative;
     top: 1px;
   }
+
   .page {
     text-align: right;
     margin-top: 20px;

jero-web/src/views/processCenter/processList/tabComponents/monitorProcess/index.vue

@@ -149,14 +149,13 @@
       },
       // 打开查看
       classAdd(row) {
-        console.log('this.$route.path', this.$route.path)
-        this.$store.commit('setDetailMap', this.$route.path)
-        this.$router.push({
-          path: '/ProcessDetail',
+        let newUrl = this.$router.resolve({
+          path: '/processDetails',
           query: {
             prcNum: row.prcNum
           }
         })
+        window.open(newUrl.href, '_blank')
       }
     },
     mounted() {