修改监控流程详情

src/api/modules/process.js

@@ -52,7 +52,7 @@ export default {
   //转办
   changeAssignee (data){
     return request({
-      url: '/api/changeAssignee',
+      url: '/api/changeAssigneeNew',
       method: 'get',
       params: data
     })

src/assets/css/process.scss

@@ -35,13 +35,13 @@
 // 表单的样式
 .label-input-form{
   padding-right: 80px;
-  .el-form-item.el-form-item__label{
+  .el-form-item .el-form-item__label{
     line-height: 40px;
     font-size: 15px;
     color:#555 !important;
   }
-  .el-form-item.el-input__inner,.el-form-item {
+  .el-form-item .el-input__inner {
-
+    height: 40px;
     line-height: 40px;
     font-size: 15px;
   }
@@ -59,3 +59,4 @@
   }
 }
 
+

src/utils/Enum/enum.js

@@ -5,3 +5,10 @@ export const PERMISSION = new Esenum([
   { label: '预览', value: 0 },
   { label: '预览+下载', value: 2 }
 ])
+// 流程状态
+export const PROCESSSTATE = new Esenum(
+  {
+    COMPLETED: {name: '已完成', index: 1},
+    INCOMPLETED: {name: '未完成', index: 0}
+  }
+)

src/utils/request.js

@@ -46,13 +46,14 @@ instance.interceptors.response.use(function (response) {
   // 登录超时
   if (response.data.respCode === '401') {
     store.commit('saveUserInfo', null)
+    store.commit('saveUserInfo', null)
+    store.commit('savePathUrl', null)
+    store.commit('saveMenuName', null)
+    store.commit('saveMenuData', null)
     router.push('/login')
     Message.error('登录超时过期')
     //清除vuex
-    this.$store.commit('saveUserInfo', null)
+
-    this.$store.commit('savePathUrl', null)
-    this.$store.commit('saveMenuName', null)
-    this.$store.commit('saveMenuData', null)
     // var url = 'http://192.168.144.22:9966/login?loginType=1'
     // // var url = 'http://10.64.23.30:7766/home'
     //

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

@@ -33,7 +33,8 @@
     <div class="flow-list">
       <!--      <loading :loading="loading">流程列表加载中</loading>-->
       <vxe-table ref="xTable" :data="detailData" :empty-render="{name: 'NotData'}" align="center" border stripe
-                 v-table-min-height="'calc(100% - 50px)'" max-height="95%">
+                 v-table-min-height="'calc(100% - 50px)'" max-height="95%"
+                 @checkbox-all="selectAllEvent"   @checkbox-change="selectChangeEvent">
         <vxe-column type="checkbox" width="60"></vxe-column>
         <vxe-column show-overflow show-header-overflow field="taskId"
                     title="任务步骤"></vxe-column>
@@ -46,36 +47,13 @@
         <vxe-column show-overflow show-header-overflow field="status"
                     title="状态"></vxe-column>
       </vxe-table>
-      <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>
     <monitorModal ref="monitorModal"></monitorModal>
   </div>
 </template>
 
 <script>
-import axios  from "axios";
+import {PROCESSSTATE} from '@/utils/Enum/enum'
-import { mapMutations } from 'vuex'
 import monitorModal from './monitorModal.vue'
 import ProcessMixin from "@/components/ProcessMixin";
 export default {
@@ -84,6 +62,7 @@ export default {
 
   data () {
     return {
+      PROCESSSTATE,
       assigneeNewLoading: false, // 调整处理人确定loading
       loginPeople: '',
       // 调整处理人抽屉状态
@@ -109,170 +88,52 @@ export default {
       processState: true, // 判断当前流程
       detailsList: [],
       shunxu: '',
-      paixu: ''
+      paixu: '',
+      checkIds: [],
+      checkList: []
     }
   },
   methods: {
-    showDialog() {
+    selectAllEvent ({ checked }) {
-      this.$refs.monitorModal.open()
+      const records = this.$refs.xTable.getCheckboxRecords()
-    },
+      this.checkIds = records.map(item => {
-    formatIssueDate(str) {
+        return item.id
-      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) {
+      this.checkList = records
-        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行选择事件
+    selectChangeEvent ({ checked }) {
-    tableChange (row) {
+      const records = this.$refs.xTable.getCheckboxRecords()
-      this.tableRow = row
+      this.checkIds = records.map(item => {
+        return item.id
+      })
+      this.checkList = records
     },
-    //转办
+    showDialog() {
-    Transfer(){
+      if(this.checkList.length < 0){
-
+        this.$message.warning("至少选择一条数据")
-    },
+      }else{
-    // 催办
+        let check=[]
-    urgeRow () {
+        check = this.checkList.filter(item=>{
-      if (this.tableRow.length === 1 && !this.tableRow[0].endTime) {
+          if(+item.state == this.PROCESSSTATE['COMPLETED'].index){
-        this.$confirm('您确认要催办该任务吗', '提示', {
+              return item
-          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)
           }
         })
+        if(check.length > 0){
+          this.$message.warning("请选择状态为未完成的数据")
+        }else{
+          this.$refs.monitorModal.open(this.checkIds)
+        }
       }
     },
-    // 取消
+    back () {
-    treeCancel () {
+      this.$router.push({
-      this.drawerModal = false
+        path: '/userCenter/processCenter',
-      this.$refs.drawerModalTree.treeReload()
+        query: {
-      this.userId = ''
+          id:'AEHJB8YNJ3',
-    },
+          tabsName: "fourth"
-    // 树点击
+        }
-    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) {
@@ -302,170 +163,18 @@ export default {
           sortWord: this.shunxu ? this.paixu : '',
           shunxu: this.shunxu
       }).then(res=>{
-          this.detailData = [{name:1},{name:1},{name:1},]
+          this.detailData = [{name:1,state:'1'},{name:1},{name:1},]
-          res[res.length - 1].endTime ? this.urgeRowFlag = false : this.urgeRowFlag = true
+          // res[res.length - 1].endTime ? this.urgeRowFlag = false : this.urgeRowFlag = true
       })
     },
-    // 导出事件
-    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: {
     monitorModal
   },
   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>
@@ -523,4 +232,15 @@ export default {
     align-items: center;
   }
 }
+.back{
+  width: 45px;
+  height: 45px;
+  background: #1890FF;
+  color: #fff;
+  text-align: center;
+  line-height: 45px;
+  font-size: 30px;
+  font-weight: 700;
+  cursor: pointer;
+}
 </style>

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

@@ -1,13 +1,15 @@
 <template>
     <div>
-        <el-dialog title="调整处理人" :visible.sync="dialogVisible" :before-close="handleClose">
+        <el-dialog title="调整处理人" :visible.sync="dialogVisible" width="500px">
-            <div class="form-container">
+            <div class="label-input-form addModel">
-                <el-form ref="form" :model="form" label-width="80px" :rules="rules">
+                <el-form ref="form" :model="form" label-width="120px" :rules="rules" class="formData">
-                    <el-form-item label="选择人员" prop="select" >
+                    <el-form-item label="选择人员" prop="assignee" class="el-form-item">
-                        <el-select v-model="form.select" placeholder="请选择调整处理人">
+                      <el-select v-model="form.assignee" class="icon-auth" collapse-tags
-                            <el-option label="张三" value="1"></el-option>
+                                 placeholder="请选择">
-                            <el-option label="李四" value="2"></el-option>
+                        <template v-for="item in userList">
-                        </el-select>
+                          <el-option :label="item.USNAME" :value="item.USID" :key="item.USID"></el-option>
+                        </template>
+                      </el-select>
                     </el-form-item>
                 </el-form>
             </div>
@@ -24,72 +26,89 @@ export default {
     name: 'modal',
     data() {
         return {
+            userList: [],
             dialogVisible: false,
-            form: {},
+            form: {
+              assignee:''
+            },
             rules: {
-                select: [
+              assignee: [
-                    {
+                      {
-                        required: 'true',
+                          required: 'true',
-                        trigger: 'change',
+                          trigger: 'change',
-                        message: '请选择调整处理人'
+                          message: '请选择调整处理人'
-                    }
+                      }
                 ]
-            }
+            },
+           taskId:''
         };
     },
+
+    mounted() {
+      this.sysUserList()
+    },
     methods: {
-        handleClose() {
+      changeSelect(val) {
-          this.dialogVisible = true
+        this.checked = (val.length || this.reportF.reportUserIdList.length) === this.userList.length;
-        },
+        // this.$emit('update:updateMultipleSelect',this.reportF.reportUserIdList);
-        open() {
+      },
-          this.form.name
+      // 获取所有用户
-            this.dialogVisible = true
+      sysUserList() {
-        },
+        this.$api.user.sysUserList({ pageNo: 1, pageSize: 999999 }).then(({ data }) => {
-        submit() {
+          this.userList = data.records;
-            this.$refs.form.validate((valid) => {
+        })
-                if (valid) {
+      },
-                    alert(11)
+      open(taskId) {
-                    this.dialogVisible = false
+        this.taskId=taskId
-                }
+        this.form.name={
-            })
+          assignee:''
         }
+        this.dialogVisible = true
+      },
+      submit() {
+        this.$refs.form.validate((valid) => {
+            if (valid) {
+              let userId=this.form.assignee
+              let assignee=this.$store.getters.userInfo.USID
+                this.$api.process.changeAssignee({
+                  taskId:this.taskId.join(','),
+                  assignee:assignee,
+                  userId: userId,
+                  pId:this.pId
+                })
+                  .then(res=>{
+                    //转办完应该跳到哪个页面？
+                    //转办完这个人还能看到这个监控流程吗
+                    this.dialogVisible = false
+                  })
+
+            }
+        })
+      }
     }
 }
 </script>
 
 <style lang="scss" scoped>
-.dialog-footer {
+.dialog-footer{
-    display: flex;
+  margin: 20px 20px ;
-    justify-content: center;
+  .el-button {
-    margin-bottom: 30px;
+    width: 80px;
-
+    height: 36px;
+    padding: 0;
+    font-size: 14px;
+  }
 }
-
+::v-deep .el-dialog__footer{
-::v-deep .el-dialog {
+  padding-bottom: 20px;
-    width: 600px;
-
 }
-
+.addModel{
-::v-deep .el-dialog .el-dialog__body {
+  padding: 20px;
-    font-size: 50px;
-    height: 230px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
 }
-
+.el-form-item{
-::v-deep .el-input__inner {
+  ::v-deep .el-select{
-    height: 40px;
+    width: 300px;
-    line-height: 40px;
+    vertical-align: center;
+  }
 }
-
+</style>
-::v-deep .el-form-item--mini .el-form-item__label {
-    line-height: 40px !important;
-}
-
-::v-deep .btn {
-    width: 90px;
-    height: 40px;
-    border-radius: 30px;
-    margin-right: 30px;
-}</style>

src/views/userCenter/processCenter/tabs.vue

@@ -2,16 +2,16 @@
     <div>
         <el-tabs v-model="activeName" @tab-click="handleClick">
             <el-tab-pane label="待办流程" name="first">
-                <gencyProcess :firstData="firstData" v-if="activeName=='first'"></gencyProcess>
+                <gencyProcess v-if="activeName=='first'"></gencyProcess>
             </el-tab-pane>
             <el-tab-pane label="已办流程" name="second">
-                <finishProcess :secondData="secondData" v-if="activeName=='second'"></finishProcess>
+                <finishProcess v-if="activeName=='second'"></finishProcess>
             </el-tab-pane>
             <el-tab-pane label="已发流程" name="third">
-                <sentProcess :thirdData="thirdData" v-if="activeName=='third'"></sentProcess>
+                <sentProcess  v-if="activeName=='third'"></sentProcess>
             </el-tab-pane>
             <el-tab-pane label="监控流程" name="fourth">
-                <monitorProcesses :fourthData="fourthData" v-if="activeName=='fourth'"></monitorProcesses>
+                <monitorProcesses  v-if="activeName=='fourth'"></monitorProcesses>
             </el-tab-pane>
         </el-tabs>
     </div>
@@ -46,27 +46,24 @@ export default {
         };
     },
     watch: {
-        tableData(newValue, oldValue) {
+
-          if(this.activeName == 'first'){
-             this.firstData=newValue
-          }else if(this.activeName == 'second'){
-            this.secondData=newValue
-          }else if(this.activeName == 'third'){
-            this.thirdData=newValue
-          }else{
-            this.fourthData=newValue
-          }
-        }
     },
     created () {
-        ;
     },
     mounted () {
-        ;
+      let tabName=this.$route.query.tabsName?this.$route.query.tabsName:'first'
+      this.activeName=tabName
     },
     methods: {
         handleClick(tab, event) {
-            this.$bus.$emit('clearForm')
+          this.$router.push({
+            path: '/userCenter/processCenter',
+            query: {
+              id:'AEHJB8YNJ3',
+              tabsName: this.activeName
+            }
+          })
+          this.$bus.$emit('clearForm')
         }
     }
 }