Merge remote-tracking branch 'origin/zhoulingpo' into lixuetao

# Conflicts:
#	vue.config.js

.gitignore

@@ -1,13 +1,16 @@
 .DS_Store
 node_modules
 /dist
+
 *.zip
 
 
 # local env files
 .env.local
 .env.*.local
-
+vue.config.js
+.elslintignore
+.gitignore
 # Log files
 npm-debug.log*
 yarn-debug.log*
@@ -15,6 +18,7 @@ yarn-error.log*
 pnpm-debug.log*
 
 # Editor directories and files
+
 .idea
 .vscode
 *.suo
@@ -23,4 +27,5 @@ pnpm-debug.log*
 *.sln
 *.sw?
 *.lock
-*-lock.json
+*-lock.json
+

package.json

@@ -9,6 +9,7 @@
     "vueui": "vue ui"
   },
   "dependencies": {
+    "@johmun/vue-tags-input": "^2.1.0",
     "axios": "^0.24.0",
     "core-js": "^3.19.1",
     "echarts": "^5.2.2",

src/api/modules/permissionProcess.js

@@ -0,0 +1,12 @@
+
+import { instance as request } from '@/utils/request'
+
+export default {
+  getReportLisy (data) {
+    return request({
+      url: '/api/report/addReportPage',
+      method: 'post',
+      data: data
+    })
+  },
+}

src/api/modules/process.js

@@ -0,0 +1,112 @@
+import { instance as request } from '@/utils/request'
+
+export default {
+  getRoleAndUserByOrgIdPage (data) {
+    return request({
+      url: '/api/sys/user/list',
+      method: 'get',
+      params: data
+    })
+  },
+
+  // 获取审批历史
+  getHistory (data) {
+    return request({
+      url: '/api/task/get_list_by_instance',
+      method: 'get',
+      params: data
+    })
+  },
+  //部署接口
+  deploy (data) {
+    return request({
+      url: '/api/deploy',
+      method: 'get',
+      params: data
+    })
+  },
+  //获取流程配置列表
+  getModelListPage (data){
+    return request({
+      url: '/api/modelListPage',
+      method: 'get',
+      params: data
+    })
+  },
+  //新增模板
+  addModel (data){
+    return request({
+      url: '/api/createModel',
+      method: 'get',
+      params: data
+    })
+  },
+  //删除模板
+  deleteModel (data){
+    return request({
+      url: '/api/deleteModel',
+      method: 'get',
+      params: data
+    })
+  },
+  //转办
+  changeAssignee (data){
+    return request({
+      url: '/api/changeAssigneeNew',
+      method: 'get',
+      params: data
+    })
+  },
+  // 获取一般的数据
+  getAlreadData(data) {
+    return request({
+      url: '/api/haveFinishedFlowDetail',
+      method: 'get',
+      params: data
+    })
+  },
+  // 催办
+  urgePerson(data) {
+    return request({
+      url: '/api/person/personMsg/saveNew',
+      method: 'post',
+      data: data
+    })
+  },
+  // 导出
+  exportStandard(data) {
+    return request({
+      url: '/api/task/historyExport',
+      method: 'get',
+      params: data ,
+      responseType:'blob'
+    })
+  },
+  // 通用流程提交
+  completeTask(data){
+    return request({
+      url: '/api/completeTask',
+      method: 'post',
+      data: data
+    })
+  },
+  // 通用流程详细信息查询
+  getProcessDetail( data ){
+    return request({
+      url: '/api/queryDetail',
+      method: 'get',
+      params: data
+
+    })
+  },
+  // 停用流程发起
+  startProcess(data) {
+    return request({
+      url: '/api/startProcess',
+      method: 'post',
+      data: data
+
+    })
+  }
+
+}

src/api/modules/processCenter.js

@@ -1,19 +1,58 @@
 import { instance as request } from '@/utils/request'
-export default{
+export default {
-    //查询
+  finishProcessPage (data) {
-    search(data){
+    return request({
-        return request({
+      url: '/api/doneProcess',
-            url: '',
+      method: 'post',
-            method: 'POST',
+      data: data
-            data
+    })
-          })
+  },
-    },
+  gencyProcessPage(data) {
-    //重置
+    return request({
-    reset(data){
+      url: '/api/todoTaskList',
-        return request({
+      method: 'post',
-            url: '',
+      data: data
-            method: 'POST',
+    })
-            data
+  },
-          })
+  monitorProcessesPage(data) {
-    }
+    return request({
-}
+      url: '/api/allProcess',
+      method: 'post',
+      data: data
+    })
+  },
+  sentProcessPage(data) {
+    return request({
+      url: '/api/issuedProcess',
+      method: 'post',
+      data: data
+    })
+  },
+
+
+  // 获取监控流程详情
+  getMonitorPageList(data){
+    return request({
+      url: '/api/task/get_list_by_instance',
+      method: 'GET',
+      params: data
+    })
+  },
+  // 获取监控流程详情
+  getMonitorImg(data){
+    return request({
+      url: '/api/instance/getImg',
+      method: 'GET',
+      params: data,
+      responseType: 'blob',
+    })
+  },
+  //强制撤回
+  getBack(data){
+    return request({
+      url: '/api/forceRecall',
+      method: 'GET',
+      params: data
+    })
+  }
+}

src/api/modules/report.js

@@ -18,10 +18,10 @@ export default {
       params: data
     })
   },
-  // 标签管理
+  // 标签增加
   labelAdd (data) {
     return request({
-      url: '/api/label/add',
+      url: 'api/tree-label/add',
       method: 'POST',
       data
     })
@@ -29,7 +29,7 @@ export default {
   // 标签列表
   labelList (data) {
     return request({
-      url: '/api/label/list',
+      url: 'api/tree-label/list',
       method: 'GET',
       params: data
     })
@@ -37,11 +37,16 @@ export default {
   // 标签删除|单个
   labelDeleteId (data) {
     return request({
-      url: `/api/label/delete/${data.id}`,
+      url: `api/tree-label/${data.id}`,
       method: 'POST'
     })
   },
-
+labelUpdate(){
+  return request({
+    url: 'api/tree-label/update',
+    method: 'POST'
+  })
+},
   // 新增或编辑报告
   reportAdd (data) {
     return request({
@@ -129,4 +134,5 @@ export default {
       params: data
     })
   }
+  //
 }

src/assets/css/common.scss

@@ -0,0 +1,47 @@
+.tag-btns {
+  padding-right: 15px;
+}
+.search-area {
+  padding: 0;
+
+  .el-form-item__label {
+    line-height: 35px;
+  }
+
+ .el-form-item__content {
+    line-height: 35px;
+
+    .el-input__inner {
+      height: 25px;
+      line-height: 35px;
+    }
+  }
+}
+.search-new {
+  //width: 100%;
+  background: #FFF;
+  padding: 10px 10px 0;
+
+  .el-button + .el-button {
+    margin-left: 10px;
+  }
+
+  .el-form--inline .el-form-item {
+    display: flex;
+    margin-right: 0;
+
+    input.el-input__inner {
+      width: 100%;
+    }
+
+    .el-form-item__content {
+      //width: 100%;
+      flex: 1;
+
+      .el-select,
+      .el-range-editor {
+        width: 100% !important;
+      }
+    }
+  }
+}

src/assets/css/process.scss

@@ -0,0 +1,65 @@
+//流程样式
+.process{
+  background-color: #fff;
+  width:100%;
+  height: 100%;
+  padding: 10px 20px;
+  overflow: auto;
+}
+.process_box{
+  padding: 10px 30px;
+  border: 1px solid #e8f6fe;
+}
+.procedure{
+
+}
+.process_content{
+  margin-top: 25px;
+  width:100%;
+  padding: 10px 30px;
+  border: 1px solid rgb(242,242,242);
+}
+.base_title{
+  display: inline-block;
+  font-size: 18px;
+  font-weight: 700;
+  color: #555;
+  line-height: 40px;
+  border-bottom: 3px solid #409eff;
+  margin-bottom: 20px;
+}
+.pagination{
+  margin-top: 20px;
+}
+
+// 表单的样式
+.label-input-form{
+  padding-right: 80px;
+  .el-form-item .el-form-item__label{
+    line-height: 40px;
+    font-size: 15px;
+    color:#555 !important;
+  }
+  .el-form-item .el-input__inner {
+    height: 40px;
+    line-height: 40px;
+    font-size: 15px;
+  }
+  .el-select{
+    width: 100%;
+  }
+  .add-form-item{
+    .el-input{
+      width: 100%;
+    }
+    .el-input__inner{
+      height: 40px;
+      line-height: 40px;
+    }
+  }
+}
+.blurcolor{
+  color: #1890FF ;
+  cursor: pointer;
+}
+

src/components/Header.vue

@@ -46,6 +46,7 @@
 <script>
 import { mapGetters } from 'vuex'
 import { BASE_URL } from '../utils/http'
+import store from "../store";
 
 export default {
   name: 'Header',
@@ -76,7 +77,10 @@ export default {
         this.$api.login.logout().then(_ => {
           this.$message.success('退出成功')
           this.$store.commit('saveUserInfo', null)
-
+          this.$store.commit('savePathUrl', null)
+          this.$store.commit('saveMenuName', null)
+          this.$store.commit('saveMenuData', null)
+          this.store.commit('setHandleProcess', null)
           // var sevice = "http://"+window.location.host+"/";
           // var serviceUrl = encodeURIComponent(sevice);
           // 正式

src/components/Menu.vue

@@ -56,6 +56,8 @@ export default {
   },
   methods: {
     handleRouter (item) {
+      this.$store.commit('setActiveTabIndex','')
+      console.log("我点击的",item)
       if (item.belong == 0) {
         this.$store.commit('saveMenuName', item.label)
         if (this.$route.path == '/system/401Page') {
@@ -77,12 +79,16 @@ export default {
             })
           } else {
             this.$store.commit('saveMenuName', item.label)
-            this.$router.push({ name: 'urlIndex', query: param })
+            this.$router.push({ name: 'urlIndex', query: {
+              id:param.id
+              } })
           }
         } else {
           if (this.$route.path === item.href) return
           // delete(this.$route.query.itemHref)
-          this.$router.push({ path: item.href, query: this.$route.query })
+          this.$router.push({ path: item.href, query:  {
+              id:this.$route.query.id
+            } })
         }
       }
     },

src/components/OrgTable.vue

@@ -0,0 +1,907 @@
+<!-- 分页从全公司选择人员 -->
+<template>
+  <div>
+    <!-- 弹窗,dialogModel则作为单独组件使用 -->
+    <el-dialog
+      append-to-body
+      :title="showTitle"
+      :visible.sync="isVisible"
+      :close-on-click-modal="false"
+      class="org-table"
+      @close="handleClose">
+      <template >
+        <div class="search-area search-new">
+          <el-form
+            :model="searchForm"
+            inline
+            class="label-input-form"
+            @keyup.enter.native="handleSearch">
+            <el-row :gutter="24">
+
+              <el-col :xl="8" :lg="8">
+                <el-form-item label="角色名" class="search-item">
+<!--                  <el-input :placeholder="'根据角色名查询'" class="search-item" v-model="searchForm.roleName"/>-->
+                  <el-select v-model="searchForm.roleName" class="icon-auth" placeholder="请选择角色名">
+                    <el-option label="全部" value=""></el-option>
+                    <template v-for="item in roleList">
+                      <el-option :label="item.rname" :value="item.rname" :key="item.rid"></el-option>
+                    </template>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :xl="8" :lg="8">
+                <el-form-item label="用户名" class="search-item">
+                  <!--            <el-input-->
+                  <!--                v-model="searchForm.uname"-->
+                  <!--                placeholder="根据姓名查询"-->
+                  <!--                clearable></el-input>-->
+                  <el-input :placeholder="'请输入用户名'"  v-model="searchForm.account"/>
+                </el-form-item>
+              </el-col>
+              <el-col :xl="8" :lg="24">
+                <el-form-item  class="tag-btns">
+                  <!--                                                                        :loading="loading.searching"-->
+                  <el-button
+                    :disabled="loading.searching"
+                    type="primary"
+                    size="small"
+                    @click="handleSearch">查询
+                  </el-button>
+                  <el-button
+                    size="small"
+                    @click="handleReset">重置
+                  </el-button>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+        <div class="org-user v-class">
+
+          <el-table
+            v-if="isVisible"
+            ref="orgTable"
+            :data="tableData"
+            tooltip-effect="dark"
+            style="width: 100%"
+            border
+            stripe
+            :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }"
+            height="350"
+            v-loading="loading.loadData"
+            :cell-class-name="cellClassName"
+            @select="selectionRow"
+            @select-all="selectionRowAll">
+            <el-table-column v-if="maxSelected && maxSelected == 1" label="" width="35" align="center">
+              <template slot-scope="scope">
+                <el-radio class="tableRadio" v-model="tableChecked" @change="radioChange(scope.row)"
+                          :label="scope.row.USID">{{ null }}
+                </el-radio>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-else
+              type="selection"
+              width="55"
+              align="center"
+              :selectable="isSelectable">
+            </el-table-column>
+            <!--                                v-if="workNumFlag"-->
+            <el-table-column
+              label="用户名"
+              width="120"
+              prop="ACCOUNT"
+              align="center"
+              show-overflow-tooltip>
+            </el-table-column>
+            <el-table-column
+              label="姓名"
+              width="120"
+              :prop="presets ? 'personName':'USNAME'"
+              align="center"
+              show-overflow-tooltip>
+            </el-table-column>
+            <el-table-column
+              prop="ROLENAME"
+              label="角色"
+              align="center"
+              show-overflow-tooltip>
+            </el-table-column>
+            <el-table-column
+              prop="EMAIL"
+              label="邮箱"
+              align="center"
+              show-overflow-tooltip>
+            </el-table-column>
+            <!--                        <el-table-column-->
+            <!--                                :prop="presets?'role':(pageUrl == 'productItem' ? 'projectRoleName' : 'roleNames') "-->
+            <!--                                label="角色"-->
+            <!--                                align="center"-->
+            <!--                                show-overflow-tooltip>-->
+            <!--                            &lt;!&ndash;            <template slot-scope="scope">&ndash;&gt;-->
+            <!--                            &lt;!&ndash;              <div class="tag-wrap">&ndash;&gt;-->
+            <!--                            &lt;!&ndash;                <el-tag&ndash;&gt;-->
+            <!--                            &lt;!&ndash;                  size="small"&ndash;&gt;-->
+            <!--                            &lt;!&ndash;                  v-for="(tag, index) in scope.row.roleName.split(',')"&ndash;&gt;-->
+            <!--                            &lt;!&ndash;                  :key="index">{{ tag }}</el-tag>&ndash;&gt;-->
+            <!--                            &lt;!&ndash;              </div>&ndash;&gt;-->
+            <!--                            &lt;!&ndash;            </template>&ndash;&gt;-->
+            <!--                        </el-table-column>-->
+            <el-table-column
+              label="部门"
+              align="center"
+              show-overflow-tooltip>
+              <template #default="{ row }">{{ row.departmentName || row.DEPARTMENT || row.orgName }}
+              </template>
+            </el-table-column>
+
+          </el-table>
+        </div>
+        <el-pagination
+          class="pagination"
+          :current-page="page"
+          :page-sizes="[5, 10, 20]"
+          :pageSize="pageSize"
+          :total="total"
+          @current-change="handlePageChange"
+          @size-change="handlePageSizeChange"
+          layout="total, sizes, prev, pager, next, jumper"
+        ></el-pagination>
+        <template v-if="btnFlag">
+          <!-- 已选择的用户 -->
+          <template v-if="maxSelected !== 1">
+            <el-divider content-position="left">已选择</el-divider>
+            <div class="checked-user-list">
+              <el-tag
+                size="medium"
+                closable
+                v-for="item in checkedList"
+                :key="item.usid || item.USID || item.id"
+                @close="handleRemove(item)">{{ item.uname || item.USNAME || item.name }}
+              </el-tag>
+              <el-button
+                type="danger"
+                size="mini"
+                @click="handleCleanChecked"
+                v-show="checkedIdList.length > 1">全部删除
+              </el-button>
+            </div>
+          </template>
+          <div style="text-align: right;" class="dialog-footer">
+            <el-button size="small"
+                       type="primary"
+                       class="common-button-primary"
+                       @click="handleConfirm">确 定
+            </el-button>
+            <el-button size="small"
+                       class="common-button-default"
+                       @click="handleCancel">取 消
+            </el-button>
+          </div>
+        </template>
+      </template>
+    </el-dialog>
+
+    <!-- 非弹窗模式使用 -->
+    <el-col :span="span" v-if="!dialogModel">
+      <el-form-item
+        :label="config.attrName"
+        :prop="config.attrField"
+        :label-width="labelWidth"
+        class="add-form-item expand-form-item"
+        :class="{'form-item-disabled': disabled}"
+      >
+        <el-input
+          v-model="checkedName"
+          :placeholder="'请选择' + config.attrName"
+          readonly
+          :disabled="disabled"
+          :id="config.attrField"
+          @click.native="handleChooseByDialog"
+        />
+      </el-form-item>
+    </el-col>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'OrgTable',
+  mixins: [],
+  props: {
+    title: {
+      type: String,
+      default: '组织机构'
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    // 弹窗模式选取
+    dialogModel: {
+      type: Boolean,
+      default: false
+    },
+    config: {
+      type: Object
+    },
+    value: {
+      required: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 栅格比例
+    span: {
+      type: Number,
+      default: 24
+    },
+    // 原数据对象
+    dataModel: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    labelWidth: {
+      type: String,
+      default: '150px'
+    },
+    maxSelected: {
+      type: Number
+    },
+    maxSelectedTips: {
+      type: String
+    },
+    // 不可选人员
+    excludeUser: {
+      type: [Array, String]
+    },
+    defaultCheck: {
+      type: Object
+    },
+    deptZNodes: {
+      type: Array
+    },
+    orgId: {
+      type: String
+    },
+    roleName: {
+      type: String
+    },
+    searchVal: {
+      type: Object
+    },
+    workNumFlag: {
+      type: Boolean,
+      default: false
+    },
+    notUserId: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    idList: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    btnFlag: {
+      type: Boolean,
+      default: true
+    },
+    // 父组件url
+    pageUrl: {
+      type: String,
+      default: null
+    },
+    // 任务处理
+    sarTask: {
+      type: String,
+      default: null
+    },
+    pageId: {
+      type: String,
+      default: null
+    },
+    // preset 审定人员审查人员的接口
+    preset: {
+      type: Boolean,
+      default: false
+    },
+    // people 控制是审查还是审定
+    showTable: {
+      type: String,
+      default: ''
+    },
+    // 哪个流程的制修订
+    zy: {
+      type: Number,
+      default: 0
+    }
+  },
+  data () {
+    return {
+      roleList: [],
+      activeName: 'first',
+      menuTreeLoading: false,
+      zNodesTree: [],
+      checkIdList: [],
+      presets: false,
+      isVisible: false,
+      visibleOrgClearBtn: false,
+      searchForm: {
+        orgId: '',
+        orgName: '',
+        USNAME: '',
+        uname: '',
+        roleName: '',
+        account: ''
+      },
+      tableData: [],
+      tableChecked: null,
+      tableDataSelectedList: [],
+      page: 1,
+      pageSize: 10,
+      total: 0,
+      checkedList: [],
+      loading: {
+        searching: false,
+        loadData: false
+      },
+      orgZNodes: [],
+      // 选中节点id集合
+      checkedIdList: [],
+      // 非弹窗模式
+      treeCheckNode: [],
+      checkedName: '',
+      zNodesRole: [],
+      repeatFlag: false,
+      isShowOrg: true
+    }
+  },
+  methods: {
+
+    /** 获取选择体系的数据 进行赋值 */
+    handleEOCheck (checkedList) {
+      console.log(checkedList, 'pooooooo')
+      // checkedList.children.forEach(item=>{
+      //     item.check
+      // })
+      this.EOCheckList = checkedList
+    },
+    treeClick (treeNode, className) {
+      // console.log(treeNode)
+      if (this.lawsTree == 0 && className.indexOf('ico_docu') < 0) {
+        this.$message.warning('请选择节点！')
+        this.EOCheckList = ''
+        return false
+      }
+      console.log(className, 'pppppiiiii')
+      this.EOCheckList = [treeNode]
+    },
+
+    handleClose () {
+      this.searchForm = {
+        orgId: '',
+        orgName: '',
+        USNAME: '',
+        uname: '',
+        roleId: '',
+        roleName: ''
+      }
+      this.page = 1
+      this.checkedList = []
+      this.checkedIdList = []
+      this.$refs.orgTable.clearSelection()
+    },
+
+    handleCancel () {
+      this.isVisible = false
+    },
+    handleConfirm () {
+      if (this.dialogModel) {
+        if (this.maxSelected && this.maxSelected > -1 && this.checkedList.length > this.maxSelected) {
+          this.$message.warning(this.maxSelectedTips || `${this.title} 只能选择一个用户`)
+          this.isShowOrg = false
+        } else {
+          const checkedIdList = []
+
+          this.checkedList.map(chkItem => {
+            checkedIdList.push(chkItem.usid || chkItem.USID || chkItem.id)
+            console.log(chkItem.uname, chkItem)
+            if (chkItem.uname) {
+              chkItem.uname = chkItem.uname + '_' + chkItem.account
+              chkItem.USNAME = chkItem.USNAME + '_' + chkItem.account
+              chkItem.orgName = chkItem.departmentName ? chkItem.departmentName : chkItem.orgName
+            } else if (!chkItem.uname && chkItem.USNAME) {
+              chkItem.uname = chkItem.USNAME
+              chkItem.USNAME = chkItem.USNAME
+            }
+          })
+          this.$emit('confirm', this.checkedList, checkedIdList)
+
+          this.isVisible = false
+        }
+      } else {
+        switch (this.config.attrType) {
+          // 多选
+          case 'SEL_OPTS':
+            break
+          // 单选
+          default:
+            if (this.checkedList.length > 1) {
+              this.$message.warning(`${this.config.attrName} 只能选择一个用户`)
+            } else {
+              const dataItem = this.checkedList[0]
+              this.checkedName = dataItem.uname || dataItem.USNAME || dataItem.orgName
+              const id = dataItem.id || dataItem.USID || dataItem.usid
+              this.$emit('input', id)
+              this.$emit('on-checked', this.checkedName)
+              this.$emit('on-dept', dataItem.pOrgId, dataItem.pOrgName)
+              setTimeout(() => {
+                this.isVisible = false
+              }, 100)
+            }
+        }
+      }
+    },
+
+    handlePageChange (page) {
+      this.page = page
+      this.getRoleAndUserByOrgIdPage()
+    },
+
+    handlePageSizeChange (pageSize) {
+      this.pageSize = pageSize
+      this.getRoleAndUserByOrgIdPage()
+    },
+
+    handleSearch () {
+      this.page = 1
+      this.loading.searching = true
+      this.getRoleAndUserByOrgIdPage()
+    },
+
+    handleReset () {
+      this.page = 1
+      this.searchForm = {
+        orgId: '',
+        orgName: '',
+        USNAME: '',
+        uname: '',
+        account: '',
+        roleName: ''
+      }
+      this.getRoleAndUserByOrgIdPage()
+    },
+
+    handleSearchOrgChecked (treeId, treeNode) {
+      this.searchForm.orgId = treeNode.id
+      this.searchForm.orgName = treeNode.oldname || treeNode.name
+      $('#orgInput').click()
+    },
+
+    /**
+     * @description: 获取组织机构
+     * @author: chenxiaoxi
+     * @time: 2021-03-21 14:40:59
+     */
+    getOrg () {
+      this.$http.get('sys/org/getTree', {}, { _this: this },
+        res => {
+          if (res.ok) {
+            res.data.map(item => {
+              item.name = item.orgName
+              // item.icon = 'static/images/dept.png'
+            })
+            this.orgZNodes = res.data
+          }
+        }, e => {
+        })
+    },
+
+    /**
+     * @description: 分页查询用户
+     * @author: chenxiaoxi
+     * @time: 2021-03-21 17:08:06
+     */
+    getRoleAndUserByOrgIdPage (types) {
+      console.log(types, 'types')
+      console.log(this.preset, 'types')
+      if (!types) {
+        this.presets = this.preset
+      }
+
+      this.loading.loadData = true
+      if (this.orgId) {
+        if (this.searchForm.orgId === '') {
+          this.searchForm.orgId = this.orgId
+        }
+      }
+      const param = {
+        pageNo: this.page,
+        pageSize: this.pageSize,
+        ...this.searchForm
+      }
+      // let this.notUserId.length > 0 ? this.notUserId.toString() : null
+      // getRoleAndUserByOrgIdPage(
+
+      this.$api.user.sysUserList(param).then((res) => {
+        this.loading.loadData = false
+        this.loading.searching = false
+        if (res.ok) {
+          this.total = res.data.total
+          this.tableData = res.data.records
+          const checkedRow = []
+          this.tableData.map(dataItem => {
+            const id = dataItem.usid || dataItem.USID || dataItem.orgId || dataItem.id
+            if (this.checkedIdList.includes(id)) {
+              checkedRow.push(dataItem)
+            }
+          })
+          this.checkedRow(checkedRow)
+        }
+      })
+    },
+
+    // handleRowSelect(selection, row) {
+    //   const id = row.USID || row.id
+    //   // 当前行选中/取消选中,其他相同用户(角色不同)被选中/取消选中
+    //   this.tableData.map(dataItem => {
+    //     if (dataItem.USID === id || dataItem.id === id) {
+    //       this.$refs['orgTable'].toggleRowSelection(dataItem, selection.includes(row))
+    //     }
+    //   })
+    //   console.log(this.checkedList)
+    // },
+    radioChange (e) {
+      // console.log(e)
+      this.checkedIdList = []
+      this.checkedList = []
+      this.checkedIdList.push(e.USID)
+      this.checkedList.push(e)
+    },
+    selectionRow (selection, row) {
+      const selected = selection.length && selection.indexOf(row) !== -1 // 为true时选中，为 0 时（false）未选中
+      if (selected) {
+        selection.map(selItem => {
+          const id = selItem.USID
+          if (!this.checkedIdList.includes(id)) {
+            this.checkedIdList.push(id)
+            this.checkedList.push(row)
+          }
+        })
+      } else {
+        this.handleRemove(row, 'table')
+      }
+    },
+    selectionRowAll (selection) {
+      if (selection.length > 0) {
+        selection.map(selItem => {
+          const id = selItem.USID
+          if (!this.checkedIdList.includes(id)) {
+            this.checkedIdList.push(id)
+            this.checkedList.push(selItem)
+          }
+        })
+      } else {
+        this.tableData.map(selItem => {
+          this.handleRemove(selItem, 'table')
+        })
+      }
+    },
+
+    handleSelectionChange (selection) {
+      if (selection.length) {
+        selection.map(selItem => {
+          const id = selItem.usid || selItem.USID || selItem.orgId || selItem.id
+          // 如果exclude不含当前行
+          if (!this.excludeIdList.includes(id)) {
+            // 如果下面列表没有,就填到下面列表里
+            if (!this.checkedIdList.includes(id)) {
+              this.checkedList.push(selItem)
+              this.checkedIdList.push(id)
+            }
+          } else {
+            // 如果exclude含当前行,当前行置为未选中状态
+            // this.$message.warning('主起草人/其他起草人不能为同一个人')
+            // this.$nextTick(() => {
+            //   this.$refs['orgTable'].toggleRowSelection(selItem, false)
+            // })
+          }
+        })
+      }
+    },
+
+    handleRemove (user, type) {
+      let delIndex = -1
+      this.checkedList.map((checkedItem, chkIndex) => {
+        if (user.USID === checkedItem.USID) {
+          delIndex = chkIndex
+          if (type !== 'table') {
+            this.checkedRow([checkedItem])
+          }
+          return false
+        }
+      })
+      this.checkedList.splice(delIndex, 1)
+      this.checkedIdList.splice(delIndex, 1)
+    },
+
+    handleOrgDel () {
+      this.searchForm.orgId = ''
+      this.searchForm.orgName = ''
+    },
+
+    /**
+     * @description: 设置选中状态
+     * @author: chenxiaoxi
+     * @time: 2021-03-22 10:06:03
+     */
+    checkedRow (rows) {
+      this.$nextTick(() => {
+        if (rows.length) {
+          rows.forEach(row => {
+            /* 双重for循环，为了解决，第二次点击弹框得时候，删除已选择里面得人员，表格勾选没有取消问题 */
+            for (let i = 0; i < this.tableData.length; i++) {
+              if (this.tableData[i].USID == row.USID) {
+                // console.log(this.tableData[i], '666')
+                this.$refs.orgTable && this.$refs.orgTable.toggleRowSelection(this.tableData[i])
+              }
+            }
+          })
+        } else {
+          this.$refs.orgTable && this.$refs.orgTable.clearSelection()
+        }
+      })
+    },
+
+    cellClassName ({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex === 3) {
+        return 'tag-column'
+      }
+    },
+
+    isSelectable (row, index) {
+      return !this.excludeIdList.includes(row.USID)
+    },
+
+    handleChooseByDialog () {
+      if (!this.dialogModel) {
+        this.checkedName = this.config.valueName || ''
+        if (this.config.value) {
+          this.checkedList = [{
+            USID: this.config.value,
+            USNAME: this.config.valueName
+          }]
+        }
+        const idList = this.config.value === '' || !this.config.value ? [] : this.config.value.split(',')
+        this.checkedIdList = [...idList]
+      }
+      this.isVisible = true
+      this.getRoleAndUserByOrgIdPage()
+    },
+
+    handleMouseEnter () {
+      if (this.searchForm.orgName !== '') {
+        this.visibleOrgClearBtn = true
+      }
+    },
+
+    handleMouseLeave () {
+      this.visibleOrgClearBtn = false
+    },
+    // 角色列表
+    getSysRole () {
+      this.$api.role.getSysRole().then(({ data }) => {
+        this.roleList = data
+      })
+    },
+    handleCleanChecked () {
+      this.$confirm('您是否确定移除全部已选中', '确定移除', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        confirmButtonClass: 'common-button-primary',
+
+        type: 'warning'
+      }).then(() => {
+        this.checkedList = []
+        this.checkedIdList = []
+        this.$refs.orgTable.clearSelection()
+      }).catch(e => {
+      })
+    }
+  },
+  computed: {
+    configContent () {
+      return this.userInfo.configContent
+    },
+
+    placeholder () {
+      return !this.dialogModel && `请选择${this.config.attrName}`
+    },
+    showMessage () {
+      return !this.dialogModel && `${this.config.attrName}不能为空`
+    },
+    isRequired () {
+      return !this.dialogModel && !!this.config.isMust
+    },
+    isString (str) {
+      return (typeof str === 'string') && str.constructor === String
+    },
+    isFO () {
+      return !this.dialogModel && this.config.attrField === 'FO'
+    },
+    ZRBM () {
+      return this.dataModel.ZRBM || ''
+    },
+    showTitle () {
+      return this.dialogModel ? this.title : this.config.attrName
+    },
+    excludeIdList () {
+      return this.excludeUser && this.excludeUser !== '' ? (this.excludeUser instanceof Array ? this.excludeUser : this.excludeUser.split(',')) : []
+    },
+    ...mapGetters(['userInfo'])
+
+  },
+  watch: {
+    visible (val) {
+      this.isVisible = val
+      this.tableChecked = null
+      if (this.maxSelected === 1) {
+        this.isShowOrg = false
+        this.activeName = 'first'
+      } else {
+        this.isShowOrg = true
+      }
+      if (val) {
+        if (this.config.value && this.config.value !== '') {
+          const idList = this.config.value instanceof Array ? this.config.value : (this.config.value === '' ? [] : this.config.value.split(','))
+          const nameList = this.config.valueName instanceof Array ? this.config.valueName.split(',') : (this.config.valueName === '' ? [] : this.config.valueName.split(','))
+          this.checkedIdList = idList
+          const checkedList = []
+          idList.map((id, index) => {
+            checkedList.push({
+              USID: id,
+              USNAME: nameList[index]
+            })
+          })
+
+          if (this.maxSelected == 1) {
+            // debugger
+            this.tableChecked = this.config.value
+            this.isShowOrg = false
+          }
+          // console.log(checkedList, 'checkedList', 'idListDepartment===', idListDepartment, 'nameListDepartment===', nameListDepartment)
+          this.checkedList = checkedList
+        }
+        if (this.searchVal && this.searchVal.type == 'qcrbm') {
+          this.searchForm.orgId = this.searchVal.OrgId
+          this.searchForm.orgName = this.searchVal.orgName
+        } else {
+          this.searchForm.orgId = ''
+          this.searchForm.orgName = ''
+        }
+        this.getRoleAndUserByOrgIdPage()
+      }
+    },
+    isVisible (val) {
+      this.$emit('update:visible', val)
+    },
+    value (newVal, oldVal) {
+      this.checkedName = newVal !== '' ? this.checkedName : ''
+    },
+    deptZNodes: {
+      handler (val) {
+        this.orgZNodes = val
+      }
+    }
+  },
+  mounted () {
+    this.isVisible = this.visible
+    this.getSysRole()
+    if (!this.dialogModel) {
+      this.checkedName = this.config.valueName || ''
+      if (this.config.value !== '') {
+        this.checkedList = [{
+          USID: this.config.value,
+          USNAME: this.config.valueName
+        }]
+        const idList = this.config.value === '' ? [] : this.config.value.split(',')
+        this.checkedIdList = [...idList]
+      }
+    } else {
+      const idList = this.config.value instanceof Array ? this.config.value : (this.config.value === '' ? [] : this.config.value.split(','))
+      const nameList = this.config.valueName instanceof Array ? this.config.valueName.split(',') : (this.config.valueName === '' ? [] : this.config.valueName.split(','))
+      this.checkedIdList = idList
+      const checkedList = []
+      idList.map((id, index) => {
+        checkedList.push({
+          USID: id,
+          USNAME: nameList[index]
+        })
+      })
+      this.checkedList = checkedList
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.org-table {
+  ::v-deep .el-form-item--mini .el-form-item__content{
+    line-height: 40px;
+  }
+  ::v-deep .el-dialog__header {
+    padding: 0 20px;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #ddd;
+  }
+
+  ::v-deep .el-dialog__body {
+    padding: 15px 20px 20px 20px;
+  }
+
+  .checked-user-list {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: flex-start;
+
+    .el-tag {
+      margin: 0 10px 10px 0;
+    }
+
+    .el-button--mini {
+      padding: 0 15px;
+      height: 28px;
+      line-height: 28px;
+    }
+  }
+}
+
+::v-deep .el-popover__reference-wrapper {
+  .el-input__suffix {
+    padding-right: 5px;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+
+::v-deep .tag-column {
+  .cell {
+    padding: 5px 10px;
+    overflow: hidden;
+    text-overflow: clip;
+
+    .tag-wrap {
+      .el-tag {
+        height: auto;
+        white-space: normal;
+        text-align: left;
+      }
+    }
+  }
+}
+.dialog-footer{
+  margin-top: 20px;
+  ::v-deep .el-button {
+    width: 80px;
+    height: 36px;
+    padding: 0;
+    font-size: 14px;
+  }
+}
+
+
+
+</style>

src/components/ProcessApprovalHistory.vue

@@ -0,0 +1,200 @@
+<template>
+  <div class="table-box">
+    <el-table
+      :data="standTableList"
+      style="width: 100%;margin-bottom: 30px"
+      max-height="402"
+      v-loading="loading"
+      :header-cell-style="{ color: '#606266', fontSize: '13px',
+       height: '48px'}"
+      border
+      @sort-change="sortChange">
+<!--      <el-table-column-->
+<!--        show-overflow-tooltip-->
+<!--        prop="orgName"-->
+<!--        align="center"-->
+<!--        label="审批人所在部门">-->
+<!--        <template slot-scope="scope">-->
+<!--          <span >{{ scope.row.orgName }}</span>-->
+<!--        </template>-->
+<!--      </el-table-column>-->
+      <el-table-column
+        prop="assignee"
+        align="center"
+        label="审批人员">
+        <template slot-scope="scope">
+          <span>{{ scope.row.assignee }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="standStateShow"
+        label="审批结果"
+        align="center"
+      >
+        <template slot-scope="scope">
+                      <span v-if="scope.row.approvalResult == '1' || scope.row.approvalResult == '3' ">
+                           同意
+                      </span>
+          <span v-else-if="scope.row.approvalResult == '2'">
+                           不同意
+                      </span>
+          <span v-else></span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="approvalOpinion"
+        align="center"
+        show-overflow-tooltip
+        label="审批意见">
+      </el-table-column>
+      <el-table-column
+        show-overflow-tooltip
+        width="160px"
+        align="center"
+        label="开始时间"
+        prop="startTime"
+      >
+        <template slot-scope="scope">
+          <span> {{formatDate(scope.row.startTime,"yyyy-mm-dd hh:mm:ss")}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        show-overflow-tooltip
+        width="160px"
+        align="center"
+        label="完成时间"
+        prop="endTime"
+     >
+        <template slot-scope="scope">
+        <span>{{formatDate(scope.row.endTime?scope.row.endTime:'',"yyyy-mm-dd hh:mm:ss")}}</span>
+      </template>
+      </el-table-column>
+
+      <el-table-column
+        show-overflow-tooltip
+        width="150px"
+        align="center"
+        label="审批处理时长（天）">
+        <template slot-scope="scope">
+          <span>{{scope.row.endTime ? scope.row.approvalTime : ''}}</span>
+        </template>
+      </el-table-column>
+      <!--              <el-table-column-->
+      <!--                      show-overflow-tooltip-->
+      <!--                      align="center"-->
+      <!--                      prop="approvalFile"-->
+      <!--                      width="150px"-->
+      <!--                      label="附件">-->
+      <!--                  <template slot-scope="scope">-->
+      <!--&lt;!&ndash;                      <span>{{ scope.row.approvalFile }}</span>&ndash;&gt;-->
+      <!--                       <span class="lookFile" @click="lookFile(scope.row.approvalFile)" v-if="scope.row.approvalFile">查看附件</span>-->
+      <!--                       <span v-else>-</span>-->
+      <!--                  </template>-->
+      <!--              </el-table-column>-->
+    </el-table>
+    <el-dialog
+      width='400px'
+      :visible.sync="importModalshowflagtemp"
+      title="查看附件"
+      @close="defaultFileList = []"
+    >
+      <div class="fileList" v-for="(item,index) in defaultFileList" :key="index">
+        <span class="filename" :title="item.name">{{item.name}}</span>
+        <span class="fileDown" @click="fileDown(item.id)">下载</span>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { formatDate } from '@/utils/date'
+export default {
+  name: 'approvalHistory',
+  props: {
+    prcNum:{
+      type:String
+    }
+  },
+  data () {
+    return {
+      formatDate,
+      loading: false,
+      standTableList: [],
+      importModalshowflagtemp: false,
+      defaultFileList: [],
+      uploadPath: 'api/att/attFile/upload'// 上传文件
+    }
+  },
+  created () {
+    this.getListByInstance({})
+  },
+  methods: {
+    // 表格排序
+    sortChange (column, prop, order) {
+      const form = {}
+      form.sortWord = column.prop
+      if (column.order === 'ascending') {
+        form.shunxu = 'asc'
+      } else if (column.order === 'descending') {
+        form.shunxu = 'desc'
+      } else {
+        form.shunxu = ''
+        form.sortWord = ''
+      }
+      this.getListByInstance(form)
+    },
+    formatIssueDate (str) {
+      const momentDate = this.$moment(str)
+      if (momentDate.isValid()) {
+        return this.$moment(str).format('YYYY-MM-DD HH:mm:ss')
+      } else {
+        return str
+      }
+    },
+    getListByInstance (form) {
+      this.$api.process.getHistory({
+        prcNum: this.prcNum,
+        ...form
+      }).then(res => {
+        this.standTableList = res.data
+      })
+    }
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.table-box{
+  width: 100%;
+}
+.lookFile{
+  color: #0c91e5;
+}
+.lookFile:hover{
+  cursor: pointer;
+}
+.fileList{
+  width: 100%;
+  line-height: 2;
+}
+.filename{
+  width: 90%;
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -o-text-overflow: ellipsis;
+  white-space:nowrap;
+}
+.fileDown{
+  color: #0c91e5;
+  position: absolute;
+}
+.fileDown:hover{
+  cursor: pointer;
+}
+
+.file .el-upload{
+  display: none!important;
+}
+</style>

src/components/ProcessChooseTree.vue

@@ -0,0 +1,771 @@
+<!-- 分页从全公司选择人员 -->
+<template>
+  <div>
+    <!-- 弹窗,dialogModel则作为单独组件使用 -->
+    <el-dialog
+      append-to-body
+      :title="showTitle"
+      :visible.sync="isVisible"
+      :close-on-click-modal="false"
+      class="org-table"
+      @close="handleClose">
+      <div class="search-area search-new">
+        <el-form
+          :model="searchForm"
+          inline
+          class="label-input-form"
+          @keyup.enter.native="handleSearch">
+          <el-row :gutter="24">
+
+            <el-col :xl="8" :lg="8">
+          <el-form-item label="角色名" class="search-item">
+            <el-select v-model="searchForm.roleName" class="icon-auth" placeholder="请选择角色名">
+              <el-option label="全部" value=""></el-option>
+              <template v-for="item in roleList">
+                <el-option :label="item.rname" :value="item.rname" :key="item.rid"></el-option>
+              </template>
+            </el-select>
+          </el-form-item>
+            </el-col>
+            <el-col :xl="8" :lg="8">
+          <el-form-item label="用户名" class="search-item">
+            <el-input :placeholder="'请输入用户名'" class="search-item" v-model="searchForm.account"/>
+          </el-form-item>
+            </el-col>
+            <el-col :xl="8" :lg="8">
+          <el-form-item class="search-item btn-box">
+            <el-button
+                :loading="loading.searching"
+                type="primary"
+                class="common-button-primary"
+                size="small"
+                @click="handleSearch">查询
+<!--                <img src="@/assets/images/btn/search.png" alt="">-->
+            </el-button>
+            <el-button
+                class="common-button-default"
+                size="small"
+                @click="handleReset">重置
+<!--                <img src="@/assets/images/btn/reset.png" alt="">-->
+            </el-button>
+          </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+
+      <div class="org-user">
+        <el-table
+            ref="orgTable"
+            :data="tableData"
+            tooltip-effect="dark"
+            style="width: 100%"
+            border
+            stripe
+            :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }"
+            height="350"
+            v-loading="loading.loadData"
+            :cell-class-name="cellClassName"
+            @select="selectionRow"
+            @select-all="selectionRowAll">
+            <el-table-column v-if="maxSelected && maxSelected == 1" label="" width="55" align="center">
+                <template slot-scope="scope">
+                    <el-radio class="tableRadio" v-model="tableChecked" @change="radioChange(scope.row)" :label="scope.row.USID">{{null}}</el-radio>
+                </template>
+            </el-table-column>
+          <el-table-column
+              v-else
+              type="selection"
+              width="55"
+              align="center"
+              :selectable="isSelectable">
+          </el-table-column>
+          <el-table-column
+              label="姓名"
+              width="120"
+              prop="USNAME"
+              align="center">
+          </el-table-column>
+          <el-table-column
+              v-if="workNumFlag"
+              label="用户名"
+              width="120"
+              prop="ACCOUNT"
+              align="center">
+          </el-table-column>
+          <el-table-column
+              prop="EMAIL"
+              label="邮箱"
+              align="center"
+              show-overflow-tooltip>
+          </el-table-column>
+          <el-table-column
+              prop="ROLENAME"
+              label="角色"
+              align="center">
+<!--            <template slot-scope="scope">-->
+<!--              <div class="tag-wrap">-->
+<!--                <el-tag-->
+<!--                  size="small"-->
+<!--                  v-for="(tag, index) in scope.row.roleName.split(',')"-->
+<!--                  :key="index">{{ tag }}</el-tag>-->
+<!--              </div>-->
+<!--            </template>-->
+          </el-table-column>
+          <el-table-column
+            label="部门"
+            align="center">
+            <template #default="{ row }">{{ row.DEPARTMENT  }}</template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <pagination
+        class="pagination"
+        :current-page="page"
+        :page-sizes="[5, 10, 20]"
+        :pageSize="pageSize"
+        :total="total"
+        @current-change="handlePageChange"
+        @size-change="handlePageSizeChange"
+        layout="total, sizes, prev, pager, next, jumper"
+      ></pagination>
+
+      <!-- 已选择的用户 -->
+      <el-divider  v-if="maxSelected !== 1"  content-position="left">已选择</el-divider>
+      <div  v-if="maxSelected !== 1" class="checked-user-list">
+        <el-tag
+          size="medium"
+          closable
+          v-for="item in checkedList"
+          :key="item.usid || item.USID || item.id"
+          @close="handleRemove(item)">{{ item.uname || item.USNAME || item.name }}</el-tag>
+        <el-button
+          type="danger"
+          size="mini"
+          @click="handleCleanChecked"
+          v-show="checkedIdList.length > 1">全部删除</el-button>
+      </div>
+
+      <div slot="footer" class="done">
+        <el-button
+            type="primary"
+            class="common-button-primary"
+            size="small"
+            @click="handleConfirm">确 定</el-button>
+        <el-button
+            size="small"
+            class="common-button-default"
+            @click="handleCancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 非弹窗模式使用 -->
+    <el-col :span="span" v-if="!dialogModel">
+      <el-form-item
+          :label="config.attrName"
+          :prop="config.attrField"
+          :label-width="labelWidth"
+          class="add-form-item expand-form-item"
+          :class="{'form-item-disabled': disabled}"
+      >
+        <el-input
+            v-model="checkedName"
+            :placeholder="'请选择' + config.attrName"
+            readonly
+            :disabled="disabled"
+            :id="config.attrField"
+            @click.native="handleChooseByDialog"
+        />
+      </el-form-item>
+    </el-col>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  name: 'OrgTable',
+  mixins: [],
+  components: {},
+  props: {
+    title: {
+      type: String,
+      default: '组织机构'
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    // 弹窗模式选取
+    dialogModel: {
+      type: Boolean,
+      default: false
+    },
+    config: {
+      type: Object
+    },
+    value: {
+      required: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 栅格比例
+    span: {
+      type: Number,
+      default: 24
+    },
+    // 原数据对象
+    dataModel: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    labelWidth: {
+      type: String,
+      default: '152px'
+    },
+    maxSelected: {
+      type: Number
+    },
+    maxSelectedTips: {
+      type: String
+    },
+    // 不可选人员
+    excludeUser: {
+      type: [Array, String]
+    },
+    defaultCheck: {
+      type: Object
+    },
+    deptZNodes: {
+      type: Array
+    },
+    orgId: {
+      type: String
+    },
+    roleName: {
+      type: String
+    },
+    searchVal: {
+      type: Object
+    },
+    workNumFlag: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      isVisible: false,
+      visibleOrgClearBtn: false,
+      searchForm: {
+        orgId: '',
+        orgName: '',
+        USNAME: '',
+        uname: '',
+        account: '',
+        roleName: ''
+      },
+      tableData: [],
+      tableChecked: null,
+      tableDataSelectedList: [],
+      page: 1,
+      pageSize: 10,
+      total: 0,
+      checkedList: [],
+      loading: {
+        searching: false,
+        loadData: false
+      },
+      orgZNodes: [],
+      // 选中节点id集合
+      checkedIdList: [],
+      // 非弹窗模式
+      treeCheckNode: [],
+      checkedName: '',
+      zNodesRole: [],
+      roleList: [],
+      repeatFlag: false
+    }
+  },
+  methods: {
+    // 角色列表
+    getSysRole () {
+      this.$api.role.getSysRole().then(({ data }) => {
+        this.roleList = data
+      })
+    },
+    handleClose () {
+      this.searchForm = {
+        orgId: '',
+        orgName: '',
+        USNAME: '',
+        uname: ''
+      }
+      this.page = 1
+      this.checkedList = []
+      this.checkedIdList = []
+      this.$refs.orgTable.clearSelection()
+    },
+
+    handleCancel () {
+      this.isVisible = false
+    },
+
+    handleConfirm () {
+      if (this.dialogModel) {
+        if (this.maxSelected && this.maxSelected > -1 && this.checkedList.length > this.maxSelected) {
+          this.$message.warning(this.maxSelectedTips || `${this.title} 只能选择一个用户`)
+        } else {
+          const checkedIdList = []
+          this.checkedList.map(chkItem => {
+            checkedIdList.push(chkItem.usid || chkItem.USID || chkItem.id)
+          })
+          this.$emit('confirm', this.checkedList, checkedIdList)
+          this.isVisible = false
+        }
+      } else {
+        switch (this.config.attrType) {
+          // 多选
+          case 'SEL_OPTS':
+            break
+          // 单选
+          default:
+            if (this.checkedList.length > 1) {
+              this.$message.warning(`${this.config.attrName} 只能选择一个用户`)
+            } else {
+              const dataItem = this.checkedList[0]
+              this.checkedName = dataItem.uname || dataItem.USNAME || dataItem.orgName
+              const id = dataItem.id || dataItem.USID || dataItem.usid
+              this.$emit('input', id)
+              this.$emit('on-checked', this.checkedName)
+              this.$emit('on-dept', dataItem.pOrgId, dataItem.pOrgName)
+              setTimeout(() => {
+                this.isVisible = false
+              }, 100)
+            }
+        }
+      }
+    },
+
+    handlePageChange (page) {
+      this.page = page
+      this.getRoleAndUserByOrgIdPage()
+    },
+
+    handlePageSizeChange (pageSize) {
+      this.pageSize = pageSize
+      this.getRoleAndUserByOrgIdPage()
+    },
+
+    handleSearch () {
+      this.page = 1
+      this.loading.searching = true
+      this.getRoleAndUserByOrgIdPage()
+    },
+
+    handleReset () {
+      this.page = 1
+      this.searchForm = {
+        orgId: '',
+        orgName: '',
+        USNAME: '',
+        uname: '',
+        account: '',
+        roleName: ''
+      }
+      this.getRoleAndUserByOrgIdPage()
+    },
+
+    handleSearchOrgChecked (treeId, treeNode) {
+      this.searchForm.orgId = treeNode.id
+      this.searchForm.orgName = treeNode.oldname || treeNode.name
+      $('#orgInput').click()
+    },
+
+    /**
+     * @description: 获取组织机构
+     * @author: chenxiaoxi
+     * @time: 2021-03-21 14:40:59
+     */
+
+    /**
+     * @description: 分页查询用户
+     * @author: chenxiaoxi
+     * @time: 2021-03-21 17:08:06
+     */
+    getRoleAndUserByOrgIdPage () {
+      this.loading.loadData = true
+      if (this.orgId) {
+        if (this.searchForm.orgId === '') {
+          this.searchForm.orgId = this.orgId
+        }
+      }
+
+      this.$api.process.getRoleAndUserByOrgIdPage({
+        pageNo: this.page,
+        pageSize: this.pageSize,
+        ...this.searchForm
+      }).then(res => {
+        this.loading.loadData = false
+        this.loading.searching = false
+        if (res.ok) {
+          this.total = res.data.total
+          this.tableData = res.data.records
+
+          const checkedRow = []
+          this.tableData.map(dataItem => {
+            const id = dataItem.usid || dataItem.USID || dataItem.orgId || dataItem.id
+            if (this.checkedIdList.includes(id)) {
+              checkedRow.push(dataItem)
+            }
+          })
+          this.checkedRow(checkedRow)
+        }
+      }).catch(e => {
+        this.loading.loadData = false
+        this.loading.searching = false
+      })
+    },
+
+    // handleRowSelect(selection, row) {
+    //   const id = row.USID || row.id
+    //   // 当前行选中/取消选中,其他相同用户(角色不同)被选中/取消选中
+    //   this.tableData.map(dataItem => {
+    //     if (dataItem.USID === id || dataItem.id === id) {
+    //       this.$refs['orgTable'].toggleRowSelection(dataItem, selection.includes(row))
+    //     }
+    //   })
+    //   console.log(this.checkedList)
+    // },
+    radioChange (e) {
+      // console.log(e)
+      this.checkedIdList = []
+      this.checkedList = []
+      this.checkedIdList.push(e.USID)
+      this.checkedList.push(e)
+    },
+    selectionRow (selection, row) {
+      const selected = selection.length && selection.indexOf(row) !== -1 // 为true时选中，为 0 时（false）未选中
+      if (selected) {
+        selection.map(selItem => {
+          const id = selItem.USID
+          if (!this.checkedIdList.includes(id)) {
+            this.checkedIdList.push(id)
+            this.checkedList.push(row)
+          }
+        })
+      } else {
+        this.handleRemove(row, 'table')
+      }
+    },
+    selectionRowAll (selection) {
+      if (selection.length > 0) {
+        selection.map(selItem => {
+          const id = selItem.USID
+          if (!this.checkedIdList.includes(id)) {
+            this.checkedIdList.push(id)
+            this.checkedList.push(selItem)
+          }
+        })
+      } else {
+        this.tableData.map(selItem => {
+          this.handleRemove(selItem, 'table')
+        })
+      }
+    },
+
+    handleSelectionChange (selection) {
+      if (selection.length) {
+        selection.map(selItem => {
+          const id = selItem.usid || selItem.USID || selItem.orgId || selItem.id
+          // 如果exclude不含当前行
+          if (!this.excludeIdList.includes(id)) {
+            // 如果下面列表没有,就填到下面列表里
+            if (!this.checkedIdList.includes(id)) {
+              this.checkedList.push(selItem)
+              this.checkedIdList.push(id)
+            }
+          } else {
+            // 如果exclude含当前行,当前行置为未选中状态
+            // this.$message.warning('主起草人/其他起草人不能为同一个人')
+            // this.$nextTick(() => {
+            //   this.$refs['orgTable'].toggleRowSelection(selItem, false)
+            // })
+          }
+        })
+      }
+    },
+
+    handleRemove (user, type) {
+      let delIndex = -1
+      this.checkedList.map((checkedItem, chkIndex) => {
+        if (user.USID === checkedItem.USID) {
+          delIndex = chkIndex
+          if (type !== 'table') {
+            this.checkedRow([checkedItem])
+          }
+          return false
+        }
+      })
+      this.checkedList.splice(delIndex, 1)
+      this.checkedIdList.splice(delIndex, 1)
+    },
+
+    handleOrgDel () {
+      this.searchForm.orgId = ''
+      this.searchForm.orgName = ''
+    },
+
+    /**
+     * @description: 设置选中状态
+     * @author: chenxiaoxi
+     * @time: 2021-03-22 10:06:03
+     */
+    checkedRow (rows) {
+      this.$nextTick(() => {
+        if (rows.length) {
+          rows.forEach(row => {
+            this.$refs.orgTable && this.$refs.orgTable.toggleRowSelection(row)
+          })
+        } else {
+          this.$refs.orgTable && this.$refs.orgTable.clearSelection()
+        }
+      })
+    },
+
+    cellClassName ({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex === 3) {
+        return 'tag-column'
+      }
+    },
+
+    isSelectable (row, index) {
+      return !this.excludeIdList.includes(row.USID)
+    },
+
+    handleChooseByDialog () {
+      if (!this.dialogModel) {
+        this.checkedName = this.config.valueName || ''
+        if (this.config.value) {
+          this.checkedList = [{
+            USID: this.config.value,
+            USNAME: this.config.valueName
+          }]
+        }
+        const idList = this.config.value === '' || !this.config.value ? [] : this.config.value.split(',')
+        this.checkedIdList = [...idList]
+      }
+      this.isVisible = true
+      this.getRoleAndUserByOrgIdPage()
+    },
+
+    handleMouseEnter () {
+      if (this.searchForm.orgName !== '') {
+        this.visibleOrgClearBtn = true
+      }
+    },
+
+    handleMouseLeave () {
+      this.visibleOrgClearBtn = false
+    },
+
+    handleCleanChecked () {
+      this.$confirm('您是否确定移除全部已选中', '确定移除', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        confirmButtonClass: 'common-button-primary',
+
+        type: 'warning'
+      }).then(() => {
+        this.checkedList = []
+        this.checkedIdList = []
+        this.$refs.orgTable.clearSelection()
+      }).catch(e => {})
+    }
+  },
+  computed: {
+    configContent () {
+      return this.userInfo.configContent
+    },
+
+    placeholder () {
+      return !this.dialogModel && `请选择${this.config.attrName}`
+    },
+    showMessage () {
+      return !this.dialogModel && `${this.config.attrName}不能为空`
+    },
+    isRequired () {
+      return !this.dialogModel && !!this.config.isMust
+    },
+    isString (str) {
+      return (typeof str === 'string') && str.constructor === String
+    },
+    isFO () {
+      return !this.dialogModel && this.config.attrField === 'FO'
+    },
+    ZRBM () {
+      return this.dataModel.ZRBM || ''
+    },
+    showTitle () {
+      return this.dialogModel ? this.title : this.config.attrName
+    },
+    excludeIdList () {
+      return this.excludeUser && this.excludeUser !== '' ? (this.excludeUser instanceof Array ? this.excludeUser : this.excludeUser.split(',')) : []
+    },
+    ...mapGetters(['userInfo'])
+  },
+  watch: {
+    visible (val) {
+      this.isVisible = val
+      this.tableChecked = null
+      if (val) {
+        if (this.config.value && this.config.value !== '') {
+          const idListDepartment = []
+          const nameListDepartment = []
+          const idList = this.config.value instanceof Array ? this.config.value : (this.config.value === '' ? [] : this.config.value.split(','))
+          const nameList = this.config.valueName instanceof Array ? this.config.valueName.split(',') : (this.config.valueName === '' ? [] : this.config.valueName.split(','))
+          if (this.config.valueDepartment) {
+            const idListDepartment = this.config.valueDepartment instanceof Array ? this.config.valueDepartment : (this.config.valueDepartment === '' ? [] : this.config.valueDepartment.split(','))
+            const nameListDepartment = this.config.valueNameDepartment instanceof Array ? this.config.valueNameDepartment.split(',') : (this.config.valueNameDepartment === '' ? [] : this.config.valueNameDepartment.split(','))
+          }
+          this.checkedIdList = idList
+          const checkedList = []
+          idList.map((id, index) => {
+            checkedList.push({
+              USID: id,
+              USNAME: nameList[index],
+              orgId: idListDepartment[index],
+              orgName: nameListDepartment[index]
+            })
+          })
+          if (this.maxSelected == 1) this.tableChecked = this.config.value
+          // console.log(checkedList,'checkedList','idListDepartment===',idListDepartment,'nameListDepartment===',nameListDepartment)
+          this.checkedList = checkedList
+        }
+        if (this.searchVal && this.searchVal.type == 'qcrbm') {
+          this.searchForm.orgId = this.searchVal.OrgId
+          this.searchForm.orgName = this.searchVal.orgName
+        } else {
+          this.searchForm.orgId = ''
+          this.searchForm.orgName = ''
+        }
+        this.getRoleAndUserByOrgIdPage()
+      }
+    },
+    isVisible (val) {
+      this.$emit('update:visible', val)
+    },
+    value (newVal, oldVal) {
+      this.checkedName = newVal !== '' ? this.checkedName : ''
+    },
+    deptZNodes: {
+      handler (val) {
+        this.orgZNodes = val
+      }
+    }
+  },
+  mounted () {
+    this.isVisible = this.visible
+    this.getSysRole()
+    if (!this.dialogModel) {
+      this.checkedName = this.config.valueName || ''
+      if (this.config.value !== '') {
+        this.checkedList = [{
+          USID: this.config.value,
+          USNAME: this.config.valueName
+        }]
+        const idList = this.config.value === '' ? [] : this.config.value.split(',')
+        this.checkedIdList = [...idList]
+      }
+    } else {
+      const idList = this.config.value instanceof Array ? this.config.value : (this.config.value === '' ? [] : this.config.value.split(','))
+      const nameList = this.config.valueName instanceof Array ? this.config.valueName.split(',') : (this.config.valueName === '' ? [] : this.config.valueName.split(','))
+      this.checkedIdList = idList
+      const checkedList = []
+      idList.map((id, index) => {
+        checkedList.push({
+          USID: id,
+          USNAME: nameList[index]
+        })
+      })
+      this.checkedList = checkedList
+    }
+
+    // this.getOrg()
+    // this.getRoleAndUserByOrgIdPage()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.org-table {
+  ::v-deep .el-form-item--mini .el-form-item__content{
+    line-height: 40px;
+  }
+  ::v-deep .el-dialog__header {
+    padding: 0 20px;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #ddd;
+  }
+  ::v-deep .el-dialog__body {
+    padding: 15px 20px 20px 20px;
+  }
+
+  .pagination {
+    position: static;
+  }
+  .checked-user-list {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: flex-start;
+    .el-tag {
+      margin: 0 10px 10px 0;
+    }
+    .el-button--mini {
+      padding: 0 15px;
+      height: 28px;
+      line-height: 28px;
+    }
+  }
+}
+::v-deep .el-popover__reference-wrapper {
+  .el-input__suffix {
+    padding-right: 5px;
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+::v-deep .tag-column {
+  .cell {
+    padding: 5px 10px;
+    overflow: visible;
+    text-overflow: clip;
+    .tag-wrap {
+      .el-tag {
+        height: auto;
+        white-space: normal;
+        text-align: left;
+      }
+    }
+  }
+}
+.done {
+  margin: 30px 20px 10px;
+  text-align: right;
+  padding:20px 0 10px ;
+
+  ::v-deep .el-button {
+    width: 80px;
+    height: 36px;
+    padding: 0;
+    font-size: 14px;
+  }
+}
+</style>

src/components/ProcessFooter.vue

@@ -0,0 +1,402 @@
+<!-- ProcessFooter -->
+<template>
+  <div class="process-footer" v-if="showSave || showSubmit || showCancel">
+    <div class="footer-line"></div>
+    <div class="btn-group-wrap" style="text-align: center">
+      <slot></slot>
+      <el-button
+        type="warning"
+        size="small"
+        class="common-button-warning"
+        @click="handleOnLineEdit"
+        v-if="showEdit">在线编辑</el-button>
+      <!--      <el-button-->
+      <!--        type="primary"-->
+      <!--        round-->
+      <!--        class="common-button-primary"-->
+      <!--        @click="handleEntrust"-->
+      <!--        :loading="isSubmit"-->
+      <!--        v-if="showEntrust">-->
+      <!--        <i class="iconfont" style="font-size: 12px;">&#xe615;</i>-->
+      <!--        委托</el-button>-->
+      <el-button
+        type="primary"
+        size="small"
+        class="common-button-primary"
+        @click="handleSendEmail"
+        :loading="sendEmailLoading"
+        v-if="showSendEmail"
+      >发送邮件</el-button>
+      <el-button
+        type="danger"
+        class="common-button-danger"
+        size="small"
+        @click="handleOver"
+        :loading="submitLoading"
+        v-if="showOver"
+      >撤销申请</el-button>
+      <el-button
+        type="danger"
+        size="small"
+        class="common-button-danger"
+        @click="beforeBack"
+        :loading="isSubmit"
+        v-if="showBack">
+
+        {{ backBTNText }}</el-button>
+      <div style="display: inline-block;">
+        <el-button
+          type="primary"
+          size="large"
+          class="common-button-primary"
+          @click="handleTransfer"
+          :loading="TransferLoading"
+          v-if="showTransfer" round
+        >转办</el-button>
+        <el-button
+          type="primary"
+          size="small"
+          class="common-button-primary"
+          @click="handleSave"
+          :loading="saveLoading"
+          v-if="showSave" round>
+          保存
+        </el-button>
+        <el-button
+          type="primary"
+          size="large"
+          class="common-button-primary resetColor"
+          @click="handleReset"
+          :loading="resetLoading"
+          v-if="showReset" round>
+          重置
+        </el-button>
+        <el-button
+          type="primary"
+          size="large"
+          class="common-button-primary submitColor"
+          @click="handleSubmit"
+          :loading="submitLoading"
+          v-if="showSubmit" round
+        >{{ submitBTNTextShow }}</el-button>
+      </div>
+      <!--      <el-button-->
+      <!--              style="float:right;margin-top: 12px;"-->
+      <!--              type="danger"-->
+      <!--              round-->
+      <!--              class="common-button-danger"-->
+      <!--              @click="cancel"-->
+      <!--              :loading="isSubmit"-->
+      <!--              v-if="showCancel">-->
+      <!--        <i class="iconfont" style="font-size: 12px;">&#xe615;</i>-->
+      <!--        取消 </el-button>-->
+    </div>
+
+    <!-- 组织机构树 -->
+    <!--    <ProcessChooseTree-->
+    <!--      :visible.sync="visibleTree"-->
+    <!--      show-user-->
+    <!--      :dept-select="false"-->
+    <!--      @dblClick="handleAssigneeNew"-->
+    <!--    ></ProcessChooseTree>-->
+
+    <!-- 在线编辑 -->
+<!--    <only-office-edit ref="onlyOffice" :visible.sync="visibleOnlyOffice"></only-office-edit>-->
+
+    <!-- 从全公司选人,2021-03-22(上汽大数据量人员解决方案) -->
+    <org-table
+      v-if="showEntrust"
+      :visible.sync="visibleTree"
+      :config="{
+          value: this.orgTableVal,
+          valueName: this.orgTableName
+        }"
+      title="委托"
+      :exclude-user="userId"
+      :max-selected="1"
+      max-selected-tips="当前任务只能委托给一个人"
+      dialog-model
+      @confirm="handleAssigneeNew"
+    ></org-table>
+  </div>
+</template>
+
+<script>
+
+import { mapGetters } from 'vuex'
+export default {
+  name: 'ProcessFooter',
+  mixins: [],
+  props: {
+    // 是否显示结束流程按钮
+    showOver: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示取消按钮
+    showCancel: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示保存按钮
+    showSave: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示重置按钮
+    showReset: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示发送邮件按钮
+    showSendEmail: {
+      type: Boolean,
+      default: false
+    },
+    // 发送邮件按钮loading
+    sendEmailLoading: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示提交按钮
+    showSubmit: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示委托按钮
+    showEntrust: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示退回按钮
+    showBack: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示转办按钮
+    showTransfer: {
+      type: Boolean,
+      default: false
+    },
+    // 提交按钮loading
+    submitLoading: {
+      type: Boolean,
+      default: false
+    },
+    // 保存按钮loading
+    saveLoading: {
+      type: Boolean,
+      default: false
+    },
+    resetLoading: {
+      type: Boolean,
+      default: false
+    },
+    // 转办按钮loading
+    TransferLoading: {
+      type: Boolean,
+      default: false
+    },
+    // 是否默认委托事件
+    defaultEntrust: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示在线编辑按钮
+    showEdit: {
+      type: Boolean,
+      default: false
+    },
+    // 标准编号(在线编辑)
+    standNo: {
+      type: String
+    },
+    // 未选择标准编号/企标编号进行在线编辑的提示
+    noStandNoTip: {
+      type: String,
+      default: '请选择或输入企标编号后进行在线编辑'
+    },
+    // 审批节点
+    approval: {
+      type: Boolean,
+      default: false
+    },
+    // 带有退回/驳回意见
+    opinion: {
+      type: Boolean,
+      default: false
+    },
+    submitBTNText: {
+      type: String
+    }
+  },
+  data () {
+    return {
+      isSubmit: false,
+      visibleTree: false,
+      visibleOnlyOffice: false,
+      orgTableVal: '',
+      orgTableName: ''
+    }
+  },
+  methods: {
+    handleOver () {
+      this.$emit('over')
+    },
+    handleSave () {
+      this.$emit('save')
+    },
+    handleReset () {
+      this.$emit('reset')
+    },
+    handleSubmit () {
+      this.$emit('submit')
+    },
+    cancel () {
+      if (this.$store.state.detailMap !== '') {
+        this.$router.push({
+          path: this.$store.state.detailMap,
+          query: {
+            tabsName: this.$store.getters.getHandleInfo.tabsName
+          }
+        })
+        this.$store.commit('setDetailMap', '')
+      } else {
+        this.$router.push({
+          name: 'ProcessCenter',
+          query: {
+            tabsName: 'ProcessCenter'
+          }
+        })
+      }
+      // this.$emit('cancel')
+    },
+    handleSendEmail () {
+      this.$emit('sendEmail')
+    },
+    handleTransfer () {
+      this.$emit('transfer')
+    },
+    handleEntrust () {
+      if (this.defaultEntrust) {
+        this.visibleTree = true
+      } else {
+        this.$emit('entrust')
+      }
+    },
+    handleBack () {
+      if (!this.opinion) {
+        this.$confirm(`您确定要${this.approval ? '驳回' : '退回'}该任务吗？`, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+          confirmButtonClass: 'common-button-primary'
+
+        }).then(() => {
+          this.$emit('back')
+        }).catch(() => {})
+      } else {
+        this.$emit('back')
+      }
+    },
+
+    /**
+     * @description: 委托
+     * @date: 2020-12-16 10:11:31
+     * @auth: chenxiaoxi
+     */
+    handleAssigneeNew (checkedList, checkedIdList) {
+      if (!checkedList.length) { return false }
+      const assignee = checkedIdList[0]
+      const assigneeUserName = checkedList[0].userName
+      this.$confirm(`您确定要委托 ${assigneeUserName} 完成该任务吗？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+        confirmButtonClass: 'common-button-primary'
+
+      }).then(() => {
+        changeAssigneeNew({
+          taskId: this.$store.getters.getHandleInfo.taskId, // 任务id
+          assignee, // 被委托人
+          userId: this.$store.getters.userInfo.userId, // 委托人
+          pId: this.$store.getters.getHandleInfo.prcId // 流程实例
+        }).then(res => {
+          if (res.success) {
+            this.$message.success('委托成功')
+            setTimeout(() => {
+              this.$router.push({
+                name: 'ProcessCenter'
+              })
+            }, 100)
+            this.visibleTree = false
+          } else {
+            this.$message.warning(res.message)
+          }
+        })
+      }).catch(() => {})
+    },
+
+    /**
+     * @description: 在线编辑
+     * @date: 2021-01-08 10:32:16
+     * @auth: chenxiaoxi
+     */
+    handleOnLineEdit () {
+      if (!this.standNo || this.standNo === '') {
+        this.$message.warning(this.noStandNoTip)
+      } else {
+        this.visibleOnlyOffice = true
+        this.$nextTick(() => {
+          this.$refs.onlyOffice.officeInit(this.standNo, this.standId)
+        })
+      }
+    },
+
+    beforeBack () {
+      this.handleBack()
+    }
+  },
+  computed: {
+    // 提交按钮文字
+    submitBTNTextShow () {
+      return this.submitBTNText ? this.submitBTNText : this.approval ? '同意' : '提交'
+    },
+    // 退回按钮文字
+    backBTNText () {
+      return this.approval ? '驳回' : '退回'
+    },
+    userId () {
+      return this.userInfo.userId
+    },
+    ...mapGetters(['userInfo'])
+  },
+  watch: {},
+  mounted () {
+    console.log(this.showCancel)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.process-footer {
+  line-height: 50px;
+  text-align: right;
+  background: #fff;
+  z-index: 999;
+  margin-top: 20px;
+  padding: 0;
+  .footer-line {
+    height: 1px;
+    box-shadow: 0 -1px 2px 0px #e8e8e8;
+  }
+}
+.resetColor{
+  background-color:#02a7f0 ;
+  border: none;
+}
+.submitColor{
+  background-color:#8400ff;
+  border: none;
+}
+</style>

src/components/ProcessHeader.vue

@@ -0,0 +1,62 @@
+<!-- 流程信息公共头部 -->
+<template>
+  <div>
+    <div class="prc-header-wrap">
+      <div class="processtitle">{{title}}</div>
+      <div class="processnum" v-if="proceesNum">流程编号:{{proceesNum}}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ProcessHeader',
+  mixins: [],
+  props: {
+    // 渲染的名称
+    title: {
+      type: String,
+      required: true
+    },
+    // 渲染编号
+    proceesNum: {
+      type: String,
+      required: false
+    }
+  },
+  components: {},
+  data () {
+    return {
+      opacityStyle: {},
+      headerFixed: false
+    }
+  },
+  methods: {
+  },
+  computed: {
+  },
+  watch: {},
+  mounted () {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.prc-header-wrap{
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  border-bottom: 1px dotted #ccc;
+  line-height: 40px;
+  color: #555;
+
+}
+.processtitle{
+  font-weight: 700;
+  font-size: 16px;
+}
+.processnum{
+  font-size: 13px;
+}
+</style>

src/components/ProcessMixin.vue

@@ -0,0 +1,129 @@
+<!-- 流程组件公共数据 -->
+<script>
+
+    export default {
+        name: 'ProcessMixins',
+        mixins: [],
+        components: {},
+        data() {
+            return {
+                processTypeList: [
+                    {
+                        label: '权限申请流程',
+                        value: '1'
+                    },
+                ],
+                formDisableFlag: false,
+                nowOrder: '',
+                nowOrderBy: '',
+                searchForm: {},
+                busMes: {
+                  createUser: '',
+                  createUserName: '',
+                  dataJson: '',
+                  dept: '',
+                  id: '',
+                  prcType: '',
+                  submitJson: '',
+                  taskId: '',
+                  userId: '',
+                },
+              processOld:{} , //存储流程的就信息
+              prcId: '',
+              prcNum: '',
+              prcName:''
+            }
+        },
+        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)
+                    }
+                })
+            },
+          // 所有流程的完成任务
+            completeProcess(obj) {
+              this.$api.process.completeTask(obj).then(res=>{
+                this.$message['success']('提交成功')
+                this.$router.push({
+                  path:"/userCenter/processCenter",
+                  query:{
+                    id:'AEHJB8YNJ3'
+                  }
+                })
+              })
+            },
+          // 获取流程详细信息
+            getProcessDetail(){
+             return new Promise((resolve,reject)=>{
+               this.$api.process.getProcessDetail({
+                 prcId: this.prcId,
+                 prcType: this.prcType
+               }).then(res=>{
+                 let data=res.data
+                 this.processOld=data
+                 console.log( this.processOld,"processOld")
+                 resolve()
+               }).catch(err=>{
+                 reject()
+               })
+             })
+            },
+
+        },
+        computed: {},
+        watch: {},
+        mounted() {
+        }
+    }
+</script>

src/main.js

@@ -2,7 +2,9 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
-
+// 流程公共样式
+import './assets/css/process.scss'
+import './assets/css/common.scss'
 import config from '@/utils/config'
 // VXETable
 import 'xe-utils'
@@ -10,6 +12,7 @@ import VXETable from 'vxe-table'
 import 'vxe-table/lib/style.css'
 // ElementUI
 import ElementUI from 'element-ui'
+
 import './assets/css/element-variables.scss'
 // ECharts
 import 'echarts'
@@ -27,6 +30,7 @@ import '@/utils/waterMark'
 import JSEncrypt from '../src/assets/js/jsencrypt.min.js'
 // 富文本引用
 import VueQuillEditor from 'vue-quill-editor'
+
 // require styles 引入样式
 import 'quill/dist/quill.core.css'
 import 'quill/dist/quill.snow.css'
@@ -71,5 +75,8 @@ Vue.config.productionTip = false
 new Vue({
   router,
   store,
+  beforeCreate(){
+		Vue.prototype.$bus = this	//安装全局事件总线
+	},
   render: h => h(App)
 }).$mount('#app')

src/router/modules/permission.js

@@ -0,0 +1,27 @@
+const routes = [
+  {
+    path: '/permission',
+    name: '',
+    component: () => import('../../views/Layout.vue'),
+    children: [
+      {
+        path: 'launch',
+        name: 'urlIndex',
+        component: () => import('../../views/permissionApplication/launch'),
+        meta: {
+          crumb: ['权限申请']
+        }
+      },
+      {
+        path: 'examine',
+        name: 'urlIndex',
+        component: () => import('../../views/permissionApplication/examine'),
+        meta: {
+          crumb: ['权限申请']
+        }
+      }
+    ]
+  }
+]
+
+export default routes

src/router/modules/processCenter.js

@@ -0,0 +1,42 @@
+const routes = [
+    // 用户中心管理
+    {
+      path: '/userCenter',
+      name: 'userCenter',
+      component: () => import('../../views/Layout.vue'),
+      children: [
+        // 流程中心
+        {
+          path: 'processCenter',
+          name: 'processCenter',
+          component: () => import('../../views/userCenter/processCenter.vue'),
+          meta: {
+            crumb: ['流程中心']
+          }
+        },
+        // 流程配置
+        {
+          path: 'processConfig',
+          name: 'processConfig',
+          component: () => import('../../views/userCenter/processConfig/index.vue'),
+          meta: {
+            crumb: ['流程配置']
+          }
+        },
+        {
+          path:'monitorViews',
+          name:'monitorViews',
+          component: () => import('../../views/userCenter/processCenter/monitorProcesses/monitorDetail.vue')
+        },
+
+      ],
+
+    },
+    {
+      path:'/processMapping',
+      name:'processMapping',
+      component: () => import('../../views/userCenter/processConfig/ProcessMapping')
+    }
+  ]
+
+  export default routes

src/router/modules/userCenter.js

@@ -1,22 +0,0 @@
-const routes = [
-    // 用户中心管理
-    {
-      path: '/userCenter',
-      name: 'userCenter',
-      component: () => import('../../views/Layout.vue'),
-      children: [
-        // 流程中心
-        {
-          path: 'processCenter',
-          name: 'processCenter',
-          component: () => import('../../views/userCenter/processCenter.vue'),
-          meta: {
-            crumb: ['流程中心']
-          }
-        },
-      ]
-    }
-  ]
-  
-  export default routes
-  

src/store/index.js

@@ -11,13 +11,24 @@ export default new Vuex.Store({
     rememberData: null,
     menuData: [],
     pathUrl: '',
-    menuName: ''
+    menuName: '',
+    activeTab: '',
+    handleProcess: ''
   },
   getters: {
     menuData: (state) => state.menuData,
-    menuName: (state) => state.menuName
+    menuName: (state) => state.menuName,
+    userInfo: (state) => state.userInfo,
+    activeTab: (state) =>state.activeTab,
+    handleProcess: (state) =>state.handleProcess
   },
   mutations: {
+    setHandleProcess(state, data){
+      state.handleProcess = data
+    },
+    setActiveTabIndex(state, data){
+      state.activeTab = data
+    },
     saveUserInfo (state, data) {
       state.userInfo = data
     },

src/utils/Enum/enum.js

@@ -0,0 +1,8 @@
+// 定义枚举
+import Esenum from './index.js'
+// 权限申请
+export const PERMISSION = new Esenum([
+  { label: '预览', value: "1" },
+  { label: '预览+下载', value: "2" }
+])
+

src/utils/Enum/index.js

@@ -0,0 +1,103 @@
+export default class EsEunm {
+  constructor (obj) {
+    if (!obj) {
+      return
+    }
+    Object.keys(obj).forEach(key => {
+      const item = obj[key]
+      this.addAll(key, item)
+    })
+    return this
+  }
+
+  /**
+   * 添加枚举
+   * @param key
+   * @param item
+   */
+  addAll (key, item) {
+    this[key] = item
+  }
+
+  /**
+   * 获取到所有的枚举值列表
+   * @return {Array} list集合
+   */
+  getItemList () {
+    const optionList = []
+    for (const key in this) {
+      const item = this[key]
+      const option = {}
+      Object.assign(option, item)
+      option.key = key
+      optionList.push(option)
+    }
+    optionList.sort((a, b) => {
+      const value1 = a.index
+      const value2 = b.index
+      return value1 - value2
+    })
+    return optionList
+  }
+
+  /**
+   * 过滤掉不需要的值
+   * @params {Array,String} val 需要过滤掉的枚举对象的name值
+   * @return {Array} list集合
+   */
+  getFilterItemList (val = []) {
+    let filterList = []
+    let valueArr = [] // 接受参数的整理
+    if (Array.isArray(val)) {
+      valueArr = val
+    } else {
+      valueArr.push(val)
+    }
+    const optionList = this.getItemList() // 得到的是list
+    filterList = optionList.filter(item => {
+      if (valueArr.includes(item.name)) {
+        return false
+      }
+      return true
+    })
+    return filterList
+  }
+
+  /**
+   * 根据name获取到index
+   * @params {String} name 枚举的name值
+   * @return {Number} name对应的index值
+   */
+  nameOfIndex (uname) {
+    if (!uname) {
+      return null
+    }
+    let index = ''
+    const optionList = this.getItemList()
+    optionList.forEach(item => {
+      if (uname.toString() === item.name.toString()) {
+        index = +item.index
+      }
+    })
+    return index
+  }
+
+  /**
+   * 根据index获取到name
+   * @params {Number} index 枚举的index值
+   * @return {String} index对应的name值
+   */
+  indexOfName (index) {
+    if (index == undefined) {
+      return null
+    }
+    let uname = ''
+    const optionList = this.getItemList()
+    optionList.forEach(item => {
+      if (item.index !== undefined && item.index !== null && item.index == index) {
+        uname = item.name
+      }
+    })
+    return uname
+  }
+}

src/utils/date.js

@@ -29,6 +29,7 @@ export function formatDate (value, fmt) {
     return fmt
   } else {
     value = value.trim()
+    value = value.replace('T', ' ')
     return value.substr(0, fmt.length)
   }
 }

src/utils/request.js

@@ -46,8 +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
+
     // var url = 'http://192.168.144.22:9966/login?loginType=1'
     // // var url = 'http://10.64.23.30:7766/home'
     //
@@ -81,6 +87,28 @@ instance.interceptors.response.use(function (response) {
   // 登录过期
   if (error.response.status === 401) {
     store.commit('saveUserInfo', null)
+    store.commit('saveUserInfo', null)
+    store.commit('savePathUrl', null)
+    store.commit('saveMenuName', null)
+    store.commit('saveMenuData', null)
+    store.commit('setHandleProcess', null)
+    router.push('/login')
+    Message.error('登录超时过期')
+    // window.open(BASE_URL.BASE_CHANGAN + "/logout?service=" + BASE_URL.BASE_LOCAL + "/login?loginType=1", '_self');
+    // var url = 'http://192.168.144.22:9966/login?loginType=1'
+    // // var url = 'http://10.64.23.30:7766/home'
+    //
+    // return window.open('http://192.168.144.29:9090/cas/login?service='+url, '_self');
+    // // return window.open('https://caddmuat.changan.com.cn/cas/login?service='+url, '_self');
+  }
+  // 登录过期
+  if (error.response.status === 500) {
+    store.commit('saveUserInfo', null)
+    store.commit('saveUserInfo', null)
+    store.commit('savePathUrl', null)
+    store.commit('saveMenuName', null)
+    store.commit('saveMenuData', null)
+    store.commit('setHandleProcess', null)
     router.push('/login')
     Message.error('登录超时过期')
     // window.open(BASE_URL.BASE_CHANGAN + "/logout?service=" + BASE_URL.BASE_LOCAL + "/login?loginType=1", '_self');

src/views/Layout.vue

@@ -81,7 +81,7 @@ export default {
       this.menuData = this.addLevel(treeData, 1)
     },
     getSysMenu () {
-      this.$api.menu.getSysMenu({ roleId: this.$store.state.userInfo.roleIdList[0] }).then(({ data }) => {
+      this.$api.menu.getSysMenu({ roleId: this.$store.getters.userInfo.roleIdList[0] }).then(({ data }) => {
         if (data === null) {
           data = []
         }

src/views/Login.vue

@@ -107,6 +107,9 @@ export default {
           this.verifyCode()
           return this.$message.error(res.data.message)
         }
+        res.data.roleIdList=res.data.roleEOList.map(item=>{
+          return item.id
+        })
         this.$message.success('登录成功')
         this.$store.commit('saveUserInfo', res.data)
         this.$router.push({ path: '/report/list', query: { id: 'AEHJB8YNJ3' } })

src/views/Report/ReportList.vue

@@ -5,9 +5,15 @@
         </div>
         <div class="tag-search">
             <el-row>
-                <el-col :span="24">
+                <el-col :span="6">
                     <div class="tag-item">
-                        <label class="tag-title">报告年份</label>
+                        <label class="tag-title">关键词:</label>
+                        <el-input v-model="q.keyContent" placeholder="请输入报告名称"></el-input>
+                    </div>
+                </el-col>
+                <el-col :span="6">
+                    <div class="tag-item">
+                        <label class="tag-title">报告年份：</label>
                         <el-select v-model="q.year" multiple collapse-tags placeholder="请选择报告年份">
                             <template v-for="item in yearList">
                                 <el-option :label="item" :value="item" :key="item"></el-option>
@@ -15,7 +21,18 @@
                         </el-select>
                     </div>
                 </el-col>
-                <el-col :span="24">
+                <el-col :span="6">
+                    <div class="tag-item">
+                        <label class="tag-title">报告名称:</label>
+                        <el-input v-model="q.name" placeholder="请输入报告名称"></el-input>
+                    </div>
+                </el-col>
+
+                <el-col :span="6" align="right" class="tag-btns">
+                    <el-button type="primary" @click="search">查询</el-button>
+                    <el-button type="default" @click="reset">重置</el-button>
+                </el-col>
+                <!-- <el-col :span="24">
                     <div class="tag-item">
                         <el-tooltip :content="tagData[1].name" placement="top">
                             <label class="tag-title">{{ tagData[1].name }}</label>
@@ -34,8 +51,8 @@
                                :class="{'el-icon-arrow-down': !tagData[1].tagShow, 'el-icon-arrow-up': tagData[1].tagShow}"></i>
                         </div>
                     </div>
-                </el-col>
+                </el-col> -->
-                <el-col :span="24">
+                <!-- <el-col :span="24">
                     <div class="tag-item">
                         <el-tooltip :content="tagData[2].name" placement="top">
                             <label class="tag-title">{{ tagData[2].name }}</label>
@@ -54,8 +71,8 @@
                                :class="{'el-icon-arrow-down': !tagData[2].tagShow, 'el-icon-arrow-up': tagData[2].tagShow}"></i>
                         </div>
                     </div>
-                </el-col>
+                </el-col> -->
-                <el-col :span="24">
+                <!-- <el-col :span="24">
                     <div class="tag-item">
                         <el-tooltip :content="tagData[3].name" placement="top">
                             <label class="tag-title">{{ tagData[3].name }}</label>
@@ -74,22 +91,35 @@
                                :class="{'el-icon-arrow-down': !tagData[3].tagShow, 'el-icon-arrow-up': tagData[3].tagShow}"></i>
                         </div>
                     </div>
-                </el-col>
+                </el-col> -->
-                <el-col :span="12">
+
-                    <div class="tag-item">
+
-                        <label class="tag-title">搜索:</label>
-                        <el-input v-model="q.keyContent" placeholder="请输入搜索内容"></el-input>
-                    </div>
-                </el-col>
-                <el-col :span="12" align="right" class="tag-btns">
-                    <el-button type="primary" @click="search">查询</el-button>
-                    <el-button type="default" @click="reset">重置</el-button>
-                </el-col>
             </el-row>
         </div>
+        <el-row class="tag-btn">
+          <el-button  @click="permissionApp">权限申请</el-button>
+        </el-row>
         <div class="table">
-            <vxe-table :data="tableData" :empty-render="{name: 'NotData'}" align="center" border stripe v-table-min-height="'calc(100vh - 420px)'">
+          <el-row>
-                <vxe-column show-overflow show-header-overflow type="seq" title="序号" width="77">
+          <el-col :span="4" class="treeList">
+            <el-input placeholder="输入关键字进行过滤" v-model="filterText">
+            </el-input>
+            <el-tree
+              class="filter-tree"
+              :data="treeData"
+              show-checkbox
+              node-key="id"
+              default-expand-all
+              :filter-node-method="filterNode"
+              ref="tree"
+            >
+            </el-tree>
+          </el-col>
+          <el-col :span="19">
+            <vxe-table ref="xTable" :data="tableData" :empty-render="{name: 'NotData'}" align="center" border stripe v-table-min-height="'calc(100vh - 420px)'"
+                       @checkbox-all="selectAllEvent" @checkbox-change="selectChangeEvent">
+              <vxe-column type="checkbox" width="60"></vxe-column>
+              <vxe-column show-overflow show-header-overflow type="seq" title="序号" width="77">
                     <template #default="{ row, rowIndex }">
                         {{ rowIndex + (q.pageNo - 1) * q.pageSize + 1 }}
                     </template>
@@ -111,12 +141,12 @@
                                 <div class="tag-info">
                                     <span class="icon-tag-item"><img src="@/assets/imgs/icon-time.png"
                                                                      alt=""><span>{{row.year}}</span></span>
-                                    <span class="icon-tag-item"><img src="@/assets/imgs/icon-tag01.png"
+                                    <!-- <span class="icon-tag-item"><img src="@/assets/imgs/icon-tag01.png"
                                                                      alt=""><span>{{row.labelOneName}}</span></span>
                                     <span class="icon-tag-item"><img src="@/assets/imgs/icon-tag02.png"
                                                                      alt=""><span>{{row.labelTwoName}}</span></span>
                                     <span class="icon-tag-item"><img src="@/assets/imgs/icon-tag03.png"
-                                                                     alt=""><span>{{row.labelThreeName}}</span></span>
+                                                                     alt=""><span>{{row.labelThreeName}}</span></span> -->
                                     <!--<span class="icon-tag-item"><span>{{(row.fileSize / 1024 / 1024).toFixed(2) }}MB</span></span>-->
                                 </div>
                             </div>
@@ -125,10 +155,11 @@
                 </vxe-column>
                 <vxe-column show-overflow show-header-overflow title="操作" width="200" fixed="right">
                     <template #default="{ row }">
-                        <el-button type="text" @click="previewRow(row)">预览</el-button>
+                        <el-button type="text" v-if="row.power == 1" @click="previewRow(row)">预览</el-button>
-<!--                        <el-button type="text" @click="downloadRow(row)">下载</el-button>-->
+                        <el-button type="text" v-if="row.power == 2" @click="downloadRow(row)">下载</el-button>
                     </template>
                 </vxe-column>
+
             </vxe-table>
             <el-pagination
                 @size-change="handleSizeChange"
@@ -138,6 +169,9 @@
                 :page-size="q.pageSize"
                 layout="total, sizes, prev, pager, next, jumper"
                 :total="total"/>
+            </el-col>
+            </el-row>
+
         </div>
 
         <!--预览-->
@@ -208,10 +242,114 @@ export default {
         }
       },
       dialogPreview: false, // 预览
-      content: ''
+      content: '',
+      filterText:'',
+      treeData: [
+                {
+                    id: 0,
+                    label: '根节点',
+                    children: [
+                        {
+                            id: 1,
+                            label: '一级 1',
+                            children: [
+                                {
+                                    id: 4,
+                                    label: '二级 1-1',
+                                    children: [
+                                        {
+                                            id: 9,
+                                            label: '三级 1-1-1'
+                                        },
+                                        {
+                                            id: 10,
+                                            label: '三级 1-1-2'
+                                        }
+                                    ]
+                                }
+                            ]
+                        },
+                        {
+                            id: 2,
+                            label: '一级 2',
+                            children: [
+                                {
+                                    id: 5,
+                                    label: '二级 2-1'
+                                },
+                                {
+                                    id: 6,
+                                    label: '二级 2-2'
+                                }
+                            ]
+                        },
+                        {
+                            id: 3,
+                            label: '一级 3',
+                            children: [
+                                {
+                                    id: 7,
+                                    label: '二级 3-1'
+                                },
+                                {
+                                    id: 8,
+                                    label: '二级 3-2'
+                                }
+                            ]
+                        },
+                    ]
+
+                }
+            ],
+      checkIds: [],
+      checkList: []
     }
   },
+  watch: {
+      filterText(val) {
+        this.$refs.tree.filter(val);
+      }
+    },
   methods: {
+    filterNode(value, data) {
+            if (!value) return true;
+            return data.label.indexOf(value) !== -1;
+        },
+    selectAllEvent ({ checked }) {
+      const records = this.$refs.xTable.getCheckboxRecords()
+      this.checkList= records
+      this.checkIds = records.map(item => {
+        return item.id
+      })
+    },
+    selectChangeEvent ({ checked }) {
+      const records = this.$refs.xTable.getCheckboxRecords()
+      this.checkList= records
+      this.checkIds = records.map(item => {
+        return item.id
+      })
+    },
+    permissionApp () {
+      if(this.checkList.length <1){
+        this.$message.warning("至少选择一条报告进行权限申请")
+        return
+      }
+      // 有预览权限的时候是否还让继续申请
+      let temp=this.checkList.filter(item =>{
+        if(+item.power == 1 || +item.power == 2){
+         return item.name
+        }
+      })
+      if(temp.length>0) {
+        this.$message.warning("当前选择的"+temp.toString()+"已经有权限，无须申请！")
+        return
+      }
+
+      this.$router.push({
+        path: '/permission/launch',
+        query: { id: 'AEHJB8YNJ3', ids: this.checkIds.toString() }
+      })
+    },
     init () {
       this.labelList()
       this.reportDateList()
@@ -354,7 +492,9 @@ export default {
             color: #262626;
         }
     }
-
+    .tag-btn{
+      padding: 10px 13px;
+    }
     .tag-search {
         padding-top: 9px;
 

src/views/Report/reportManager/labelModal.vue

@@ -0,0 +1,155 @@
+<template>
+    <div>
+        <el-dialog title="新增/编辑标签" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
+            <div class="form">
+                <el-form ref="form" :model="form" label-width="80px" :rules="rule">
+                    <el-form-item label="上级标签">
+                        <el-cascader v-model="form.nodeLabel" placeholder="请选择上级标签" :options="cascaderOptions" filterable :props="{ checkStrictly: true }" clearable >
+                        </el-cascader>
+                    </el-form-item>
+
+                    <el-form-item label="标签名称" prop="label">
+                        <el-input v-model="form.label"></el-input>
+                    </el-form-item>
+                    <el-form-item label="排序">
+                        <el-input v-model="form.orderNum"></el-input>
+                    </el-form-item>
+                    <el-form-item label="备注">
+                        <el-input v-model="form.remark"></el-input>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button @click="cancel" class="btn">取消</el-button>
+                        <el-button type="primary" @click="submitForm" class="btn">确定</el-button>
+                    </el-form-item>
+                </el-form>
+            </div>
+
+            <!-- <span slot="footer" class="dialog-footer">
+                <el-button @click="dialogVisible = false">取 消</el-button>
+                <el-button type="primary" @click=" submit">确 定</el-button>
+            </span> -->
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'labelModal',
+    data() {
+        return {
+            dialogVisible: false,
+            form: {
+                label:undefined,
+                name:'',
+                sort:'',
+
+                tip:''
+            },
+            cascaderOptions:[
+
+                ],
+            rule: {
+                name: [
+                    { required: true, trigger: 'blur', message: '请输入标签名称' }
+                ],
+                resource: [
+                    {
+                        required: true, trigger: 'change', message: '请选择标签属性'
+                    }
+                ]
+            },
+        };
+    },
+    methods: {
+        handleClose(done) {
+            // this.$confirm('确认关闭？')
+            //   .then(_ => {
+            //     done();
+            //   })
+            //   .catch(_ => {});
+            done();
+        },
+        open(node, data) {
+            this.dialogVisible = true
+            this.$api.report.labelList().then(res => {
+            console.log('666',res);
+            this.cascaderOptions=res.data
+          })
+            if (node && data) {
+                this.showAddOrUpdateLabel = true
+                this.form.nodeLabel = node.parent.data.label
+                this.form.label = data.label
+                this.form.orderNum = data.orderNum
+                this.form.remark = data.remark
+                this.form={...this.form}
+                this.$refs.form.clearValidate('name')
+                this.$forceUpdate()
+            } else {
+                this.form = {}
+                this.$forceUpdate()
+            }
+        },
+        cancel() {
+            this.dialogVisible = false
+        },
+        submitForm() {
+            this.$refs.form.validate((valid) => {
+                if (valid) {
+                    this.form.parentId=this.form.nodeLabel[this.form.nodeLabel.length - 1]
+                    delete this.form.nodeLabel
+                    this.$api.report.labelAdd(this.form).then(res => {
+                    })
+                    this.dialogVisible = false
+                    this.$bus.$emit('updataList')
+                }
+            })
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.form {
+    padding: 50px;
+
+    .btn {
+        margin-left: 40px;
+        width: 90px;
+        height: 40px;
+        border-radius: 30px;
+        margin-right: 30px;
+    }
+}
+
+.form ::v-deep .el-input__inner {
+    width: 90%
+}
+
+.form ::v-deep .el-select {
+    width: 90%;
+}
+
+.form ::v-deep .el-select .el-input__inner {
+    width: 100%;
+}
+
+::v-deep .el-form-item--mini .el-form-item__label {
+    line-height: 40px !important;
+}
+
+::v-deep .el-input__inner {
+    height: 40px;
+    line-height: 40px;
+    width: 80%;
+}
+::v-deep .el-cascader{
+    height: 40px !important;
+    line-height: 40px !important;
+    width: 90%;
+}
+::v-deep .el-cascader .el-input__inner {
+    height: 40px !important;
+    line-height: 40px !important;
+    width: 100%;
+}
+</style>

src/views/permissionApplication/components/AuditOperation.vue

@@ -0,0 +1,137 @@
+<template>
+    <div class="AuditOperationBox">
+        <el-form
+                ref="examineForm"
+                :model="examineForm"
+                :rules="examineFormRules"
+                size="medium"
+                class="label-input-form prc-content-border">
+<!--          <el-row :gutter="24">-->
+<!--            <el-col :span="9">-->
+<!--              <el-form-item label="选择赋权时间:" prop="date"-->
+<!--                            label-width="132px" class="add-form-item"-->
+<!--                            :class="{'form-item-disabled': formdisableflag}">-->
+<!--                <el-date-picker-->
+<!--                  v-model="examineForm.date"-->
+<!--                  type="date"-->
+<!--                  placeholder="选择赋权时间">-->
+<!--                </el-date-picker>-->
+<!--              </el-form-item>-->
+<!--            </el-col>-->
+<!--          </el-row>-->
+            <el-row :gutter="24">
+                <el-col :span="24">
+                    <el-form-item label="审批结果:" prop="flag"
+                                  label-width="132px" class="add-form-item"
+                                  :class="{'form-item-disabled': formdisableflag}">
+                        <el-radio-group :disabled="formdisableflag" v-model="examineForm.flag" >
+                            <el-radio :label="'1'">同意</el-radio>
+                            <el-radio :label="'2'">不同意</el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="24">
+                <el-col :span="24">
+                    <el-form-item :prop="!formdisableflag?'approvalOpinion':''" label-width="132px" class="add-form-item">
+                        <template slot="label">审批意见:</template>
+                        <el-input :disabled="formdisableflag" :maxlength='1000'
+                                v-model="examineForm.approvalOpinion"
+                                placeholder="请输入审批意见"
+                                :autosize="{ minRows: 2, maxRows: 4}"
+                                type="textarea"
+                        />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+<!--            <el-row :gutter="24">-->
+<!--                <el-col :span="24">-->
+<!--                    <el-form-item label="附件" prop="entStandText" label-width="132px" class="add-form-item"-->
+<!--                                  :class="{'form-item-disabled': formdisableflag}">-->
+<!--                        <el-button-->
+<!--                                size="small"-->
+<!--                                class="form-upload-btn"-->
+<!--                                            icon="el-icon-upload"-->
+<!--                                @click="clickButtonToUpload('approvalFile')"-->
+<!--                        >-->
+<!--                            {{ examineForm.approvalFile === 'null' || examineForm.approvalFile === '' ||-->
+<!--                            examineForm.approvalFile == null ? '点击上传' : '查看已上传的文件' }}-->
+<!--                        </el-button>-->
+<!--                    </el-form-item>-->
+<!--                </el-col>-->
+<!--            </el-row>-->
+        </el-form>
+
+    </div>
+</template>
+
+<script>
+
+export default {
+  name: 'AuditOperation',
+  props: {
+    isDisable:{
+      type:Boolean,
+      default:false
+    },
+    examine:{
+      type:Object
+    }
+  },
+
+  data () {
+    return {
+      examineForm: {
+        planReasonFile: '',
+        oldName: '',
+        flag: '1',
+        approvalOpinion: ''
+      },
+      examineFormRules: {
+        flag: [
+          { required: true, message: '审核结果不能为空', trigger: 'change' }
+        ],
+        approvalOpinion: [
+          { type: 'string', max: 1000, message: '审批意见不能超过1000个字符', trigger: 'blur' }
+        ]
+      },
+      formdisableflag: false
+
+    }
+  },
+  created () {
+    // 判断穿过来的query里的参数 是不是查看
+    if (this.isDisable) {
+      this.examineForm = this.examine
+      this.formdisableflag = true
+    }
+  },
+  methods: {
+
+    /** 在提交表单的校验 通过继续执行 */
+    submit () {
+      this.isSubmit = false
+      this.$refs.examineForm.validate((valid) => {
+        if (valid) {
+          this.isSubmit = true
+          return true
+        } else {
+          this.$message.warning('请检查表单是否填写正确')
+          return false
+        }
+      })
+    }
+
+  }
+}
+</script>
+
+<style scoped>
+    .AssignButton {
+        font-size: 18px;
+    }
+
+    .AssignButton:hover {
+        cursor: pointer;
+    }
+</style>

src/views/permissionApplication/components/reportDialog.vue

@@ -0,0 +1,311 @@
+<template>
+
+  <el-dialog
+    title="添加报告"
+    :visible.sync="dialogVisible"
+    width="50%"
+    class="addreport"
+    :before-close="handleClose">
+      <el-form
+        :model="searchForm "
+        inline
+        class="tag-search "
+        @keyup.enter.native="search">
+
+        <el-row>
+          <el-col :span="8">
+            <div class="tag-item">
+              <label class="tag-title">关键词:</label>
+              <el-input v-model="searchForm.keyContent" placeholder="请输入关键词"></el-input>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="tag-item">
+              <label class="tag-title">报告年份:</label>
+              <el-select v-model="searchForm.year" multiple collapse-tags placeholder="请选择报告年份">
+                <template v-for="item in yearList">
+                  <el-option :label="item" :value="item" :key="item"></el-option>
+                </template>
+              </el-select>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="tag-item">
+              <label class="tag-title">报告名称:</label>
+              <el-input v-model="searchForm.name" placeholder="请输入报告名称"></el-input>
+            </div>
+          </el-col>
+
+          <el-col :span="24" align="right" class="tag-btns">
+            <el-button type="primary" @click="search">查询</el-button>
+            <el-button type="default" @click="reset">重置</el-button>
+          </el-col>
+        </el-row>
+      </el-form>
+    <div class="table">
+      <vxe-table :data="tableData" :empty-render="{name: 'NotData'}" align="center" border stripe height="520px"
+                 ref="xTable" @checkbox-all="selectAllEvent" @checkbox-change="selectChangeEvent">
+        <vxe-column type="checkbox" width="60"></vxe-column>
+        <vxe-column show-overflow show-header-overflow field="name" title="报告名称"></vxe-column>
+        <vxe-column show-overflow show-header-overflow field="year" title="报告年份"></vxe-column>
+        <vxe-column show-overflow show-header-overflow field="department" title="报告部门"></vxe-column>
+        <vxe-column show-overflow show-header-overflow field="confidentialLevel" title="涉密等级"></vxe-column>
+        <vxe-column show-overflow show-header-overflow field="privacyLevel" title="隐私等级"></vxe-column>
+      </vxe-table>
+      <el-pagination
+        class="pagination"
+        @size-change="handleLogSizeChange"
+        @current-change="handleLogCurrentChange"
+        :current-page="q.pageNo"
+        :page-sizes="[5, 10, 20]"
+        :page-size="q.pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"/>
+
+    </div>
+    <div class="done">
+      <el-button  type="primary"  @click.native="savaCheck">确定</el-button>
+      <el-button  type="default" @click.native="handleClose">取消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'reportDialog',
+  data () {
+    return {
+      processTable: [],
+      total: 0,
+      q: {
+        pageSize: 10,
+        pageNo: 1
+      },
+      searchForm: {
+        keyContent:null,
+        name:null,
+        year:null
+      },
+      checkIds: [],
+      dialogVisible: false,
+      tableData: [],
+      ids: [], // 存储已经存在的报告
+      checkList: [],
+      yearList: []
+    }
+  },
+  props: {
+    // 获取已有的数据 在查询全部数据时不展示已有的
+    alreadyData: {
+      type: Array
+    }
+  },
+  methods: {
+    search () {
+      this.q.pageNo = 1
+      this.reportList()
+    },
+    // 日期列表
+    reportDateList () {
+      this.$api.report.reportDateList().then(({ data }) => {
+        this.yearList = data.list
+      })
+    },
+    savaCheck () {
+    //  点击保存 需要把选中的数据传给父组件
+      const name = []
+      const ids = []
+      this.alreadyData.forEach(item => {
+        if (this.checkIds.indexOf(item.reportId) > -1) {
+          name.push(item.name)
+          ids.push(item.reportId)
+        }
+      })
+      this.checkList = this.checkList.filter(item => {
+        return ids.indexOf(item.reportId) === -1
+      })
+      if (name.length > 0) {
+        this.$alert(`报告${name.toString()}已经存在`, '提示', {
+          confirmButtonText: '确定'
+
+        })
+      }
+      // 找出已经存在的数据  用弹窗提示
+      this.$emit('confirm', this.checkList)
+      this.dialogVisible = false
+    },
+    show () {
+      // 调取接口获取数据
+      this.reset()
+      this.ids = this.alreadyData.map(item => item.id)
+      this.reportDateList()
+    },
+    // 重置
+    reset () {
+      this.q = {
+        pageNo: 1,
+        pageSize: 10
+      }
+      this.searchForm={
+        keyContent: null,
+        year: null,
+        name:null
+      }
+      this.total = 0
+      this.tableData = []
+      this.reportList()
+    },
+    // 列表
+    reportList () {
+      this.$api.permissionProcess.getReportLisy({ ...this.q, ...this.searchForm,usid:this.$store.getters.userInfo.USID }).then(({ data }) => {
+        this.tableData = data.records.map(item=>{
+          item.reportId=item['id']
+          delete item['id']
+          return item
+        })
+        this.total = data.total
+        this.q.pageNo = data.current
+        this.q.pageSize = data.size
+        if (!data.records.length && this.q.pageNo !== 1) {
+          this.q.pageNo = 1
+          this.reportList()
+        }
+        this.dialogVisible = true
+      })
+    },
+    handleClose () {
+      this.$refs.xTable.clearSelected()
+      this.dialogVisible = false
+    },
+    handleLogSizeChange (size) {
+      this.q.pageSize = size
+      this.reportList()
+    },
+    handleLogCurrentChange (page) {
+      this.q.pageNo = page
+      this.reportList()
+    },
+    selectAllEvent ({ checked }) {
+      const records = this.$refs.xTable.getCheckboxRecords()
+      this.checkList = records
+      this.checkIds = records.map(item => {
+        return item.reportId
+      })
+    },
+    selectChangeEvent ({ checked }) {
+      const records = this.$refs.xTable.getCheckboxRecords()
+      this.checkList = records
+      this.checkIds = records.map(item => {
+        return item.reportId
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.table{
+  padding: 10px 20px;
+  width: 100%;
+}
+.addreport{
+  ::v-deep .el-dialog__header {
+    padding: 0 20px;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #ddd;
+  }
+
+  ::v-deep .el-dialog__body {
+    padding: 15px 20px 20px 20px;
+  }
+}
+.done {
+  margin: 10px 20px 10px;
+  text-align: right;
+
+  ::v-deep .el-button {
+    width: 80px;
+    height: 36px;
+    padding: 0;
+  }
+}
+.tag-search {
+  padding-top: 9px;
+
+  ::v-deep .el-date-picker,
+  ::v-deep .el-input {
+    width: 200px;
+  }
+
+  .tag-item {
+    margin-bottom: 15px;
+    display: flex;
+
+    .year {
+      ::v-deep .el-input__inner {
+        padding: 0 15px !important;
+      }
+    }
+
+    label.tag-title {
+      font-size: 14px;
+      font-weight: normal;
+      color: #646464;
+      display: inline-block;
+      width: 80px;
+      height: 19px;
+      line-height: 19px;
+      text-align: end;
+      margin-right: 10px;
+      margin-top: 2.5px;
+
+    }
+
+    .tag-show {
+      flex: 1;
+      margin-right: 28px;
+      height: 19px;
+      overflow: hidden;
+      position: relative;
+
+      &.active {
+        height: auto;
+      }
+
+      ::v-deep .check-active{
+        .el-checkbox__label{
+          color: #434343;
+        }
+      }
+
+      ::v-deep .el-checkbox {
+        margin-right: 15px;
+        color: #434343;
+      }
+
+      ::v-deep .el-checkbox__label {
+        min-width: 80px;
+      }
+
+      ::v-deep .el-checkbox-group {
+        display: inline;
+      }
+
+      .el-icon-arrow-down,
+      .el-icon-arrow-up {
+        color: #C0C4CC;
+        cursor: pointer;
+        position: absolute;
+        right: 0;
+        top: 2px;
+      }
+    }
+  }
+
+  .tag-btns {
+    padding-right: 15px;
+  }
+}
+</style>

src/views/permissionApplication/components/reportTable.vue

@@ -0,0 +1,197 @@
+<template>
+  <div class="reportTable">
+    <el-button v-if="!disabled" class="addbtn" size="small" @click="addReport">添加报告</el-button>
+    <el-button v-if="!disabled" class="delbtn" size="small" @click="deleteAll">批量删除</el-button>
+    <div class="table">
+      <vxe-table :data="processTable" :empty-render="{name: 'NotData'}" align="center" border stripe v-table-min-height="500"
+      ref="xTable" @checkbox-all="selectAllEvent" @checkbox-change="selectChangeEvent">
+        <vxe-column type="checkbox" width="60"></vxe-column>
+        <vxe-column show-overflow show-header-overflow field="name" title="报告名称"></vxe-column>
+<!--        <vxe-column show-overflow show-header-overflow field="labelTwoName" :title="tagsForm.tags02.name"></vxe-column>-->
+<!--        <vxe-column show-overflow show-header-overflow field="labelThreeName" :title="tagsForm.tags03.name"></vxe-column>-->
+        <vxe-column show-overflow show-header-overflow field="year" title="报告年份"  width="200" ></vxe-column>
+        <vxe-column show-overflow show-header-overflow field="department" title="报告部门"></vxe-column>
+        <vxe-column show-overflow show-header-overflow field="confidentialLevel" title="涉密等级"></vxe-column>
+        <vxe-column show-overflow show-header-overflow field="privacyLevel" title="隐私等级"></vxe-column>
+        <vxe-column show-overflow show-header-overflow title="操作" width="200" fixed="right" v-if="!disabled">
+          <template #default="{ row }">
+            <el-button type="text" class="del-btn" @click="reportDelete(row.reportId)">删除</el-button>
+            <!--                        <el-button type="text" @click="downloadRow(row)">下载</el-button>-->
+          </template>
+        </vxe-column>
+      </vxe-table>
+      <el-pagination
+        class="pagination"
+        @size-change="handleLogSizeChange"
+        @current-change="handleLogCurrentChange"
+        :current-page="qLog.pageNo"
+        :page-sizes="[5, 10, 20]"
+        :page-size="qLog.pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"/>
+      <reportDialog ref="reportDialog" :tagsForm="tagsForm" :alreadyData="value" @confirm="addReportList"></reportDialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import reportDialog from './reportDialog'
+export default {
+  name: 'reportTable',
+  props: {
+    value: {
+      type: Array,
+      default: new Array([]),
+      required: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: {
+    reportDialog
+  },
+  data () {
+    return {
+      processTable: [],
+      total: 0,
+      qLog: {
+        pageSize: 10,
+        pageNo: 1
+      },
+      copyTableData: [],
+      checkIds: [],
+      tagsForm: {
+        tags01: {
+          name: '',
+          parentId: '0',
+          type: '1',
+          id: '',
+          childList: [
+            // {name: '无', type: '1', id: '', parentId: ''},
+          ]
+        },
+        tags02: {
+          name: '',
+          parentId: '0',
+          type: '2',
+          id: '',
+          childList: [
+            // {name: '无', type: '2', id: '', parentId: ''},
+          ]
+        },
+        tags03: {
+          name: '',
+          parentId: '0',
+          type: '3',
+          id: '',
+          childList: [
+            // {name: '无', type: '3', id: '', parentId: ''},
+          ]
+        }
+      }
+    }
+  },
+  watch: {
+    value () {
+      this.qLog.pageSize = 10
+      this.qLog.pageNo = 1
+      this.total = this.value.length
+      this.processTable = this.value.slice(0, 9)
+      this.pageChage(1)
+    }
+  },
+  created () {
+    // this.copyTableData = JSON.parse(JSON.stringify(this.tableData))
+  },
+  methods: {
+    addReportList (list) {
+      this.$nextTick(()=>{
+        this.$emit('updateTable', [...this.value , ...list])
+      })
+    },
+    pageChage (current) {
+      this.total = this.value.length
+      setTimeout(() => {
+        current = current || this.qLog.pageNo
+        this.qLog.pageNo = current
+        this.processTable = this.value.slice(this.qLog.pageSize * (current - 1), this.qLog.pageSize * current)
+        // console.log(this.pages.size, this.pages.size * (current - 1), this.pages.size * this.pages.current, this.list)
+        if (this.processTable.length < 1 && current > 1) {
+          this.pageChage(current - 1)
+          return false
+        }
+      })
+    },
+    handleLogSizeChange (val) {
+      this.qLog.pageSize = val
+      this.qLog.pageNo = 1
+      this.pageChage(1)
+    },
+    handleLogCurrentChange (val) {
+      this.qLog.pageNo = 1
+      this.pageChage(val)
+    },
+    selectAllEvent ({ checked }) {
+      const records = this.$refs.xTable.getCheckboxRecords()
+      this.checkIds = records.map(item => {
+        return item.reportId
+      })
+    },
+    selectChangeEvent ({ checked }) {
+      const records = this.$refs.xTable.getCheckboxRecords()
+      this.checkIds = records.map(item => {
+        return item.reportId
+      })
+    },
+    addReport () {
+      this.$refs.reportDialog.show()
+    },
+    deleteAll () {
+      this.reportDelete(this.checkIds)
+    },
+    reportDelete (id) {
+      // 删除报告 假删除
+      if (typeof id === 'string') {
+        this.$confirm('此操作将删除所选数据, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.$emit('updateTable', this.value.filter(item => item.reportId !== id))
+        })
+      } else {
+        if (Array.isArray(id)) {
+          this.$confirm('此操作将删除所选数据, 是否继续?', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            this.$emit('updateTable', this.value.filter(item => id.indexOf(item.reportId) === -1))
+          })
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .table{
+    margin-top: 10px;
+  }
+  .reportTable{
+    margin-bottom: 20px;
+  }
+  .addbtn{
+    border: none;
+    background-color: #8400FF;
+    color: #fff;
+  }
+  .delbtn{
+    border: none;
+    background-color: #d9001b;
+    color: #fff;
+  }
+</style>

src/views/permissionApplication/examine.vue

@@ -0,0 +1,227 @@
+<template>
+<!--  此页面主要展示审核和已完成-->
+  <div class="process">
+    <div class="process_box">
+      <process-header :title="'权限审批'" :proceesNum="prcNum"></process-header>
+      <div class="procedure">
+        <div class="process_content">
+          <span class="base_title">基础信息</span>
+          <el-form ref="processFormRef" :model="processForm" label-width="150px"
+                   :rules="processFormRule"  class="label-input-form" size="medium">
+            <el-row>
+              <el-col :span="9">
+                <el-form-item  label="流程名称:" prop="prcName">
+                  <el-input readonly :disabled="formControl "   v-model="processForm.prcName" @click.native="handleCheck('spr1')"
+                            placeholder="请输入流程名称"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+          <el-row>
+            <report-table v-model="tableData" @updateTable="(newValue)=>{tableData=newValue}" :disabled="formControl"></report-table>
+          </el-row>
+          <el-row>
+            <el-form ref="form" :model="applicationForm" label-width="150px"
+                     class="label-input-form" size="medium" :rules="applicationFormRule"
+                     :disabled="formControl">
+              <el-row>
+                <el-col :span="9">
+                  <el-form-item label="申请原因:" prop="applyReason">
+                    <el-input type="textarea" v-model="applicationForm.applyReason" placeholder="请输入申请原因"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="9" :offset="6">
+                  <el-form-item label="选择申请权限:" prop="power">
+                    <el-select v-model="applicationForm.power" placeholder="请选择申请权限">
+                      <el-option
+                        v-for="item in PERMISSION"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value">
+                      </el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </el-row>
+        </div>
+        <div class="process_content">
+          <span class="base_title">审批历史</span>
+          <process-approval-history :prcNum="prcNum"></process-approval-history>
+        </div>
+        <div class="process_content">
+          <span class="base_title">审核信息</span>
+          <audit-operation ref="operationRef" :examine="submitjson" :is-disable="disabled"></audit-operation>
+        </div>
+      </div>
+      <process-footer
+        v-if="!disabled"
+        showCancel
+        :show-transfer="isShowTran"
+        :show-submit="isShowSubmit"
+        :submitLoading="isSubmit"
+        :TransferLoading="tranLoading"
+        @transfer="handleTransfer"
+        @submit="handleSubmit"
+      ></process-footer>
+      <process-choose-tree
+        dialog-model
+        :visible.sync="visibleTree"
+        :maxSelected="1"
+        :config="{value: '',valueName:''}"
+        @confirm="handleDblClick"
+      ></process-choose-tree>
+    </div>
+  </div>
+</template>
+
+<script>
+import processHeader from '@/components/ProcessHeader'
+import processFooter from '@/components/ProcessFooter'
+import processChooseTree from '../../components/ProcessChooseTree'
+import processApprovalHistory from '@/components/ProcessApprovalHistory'
+import auditOperation from './components/AuditOperation'
+import reportTable from './components/reportTable'
+import { PERMISSION } from '@/utils/Enum/enum'
+import processMixin from "../../components/ProcessMixin";
+export default {
+  name: 'launch',
+  mixins: [processMixin],
+  components: {
+    processHeader,
+    reportTable,
+    processFooter,
+    processApprovalHistory,
+    auditOperation,
+    processChooseTree
+  },
+  data () {
+    return {
+      applicationFormRule: {
+        applyReason: [{
+          max: 1000, message: '申请原因最多填写1000字符'
+        }],
+        power: [{
+          required: true,
+          message: '请选择申请权限'
+        }]
+      },
+      processFormRule: {
+        prcName: [{
+          required: true,
+          message: '请输入流程名称',
+          trigger: 'change'
+        },{
+          max: 100,
+          message: '申请原因最多填写100字符',
+          trigger: 'change'
+        }]
+      },
+      processForm: { prcName : ''},
+      visibleTree: false,
+      isSubmit: false,
+      tranLoading: false,
+      isShowTran: true,
+      isShowSubmit: true,
+      formControl: true,
+      disabled:false,
+      assignForm: {},
+      tableData: [],
+      applicationForm: {
+        power:'',
+        applyReason:''
+      },
+      q: {
+        pageSize: 10000,
+        pageNo: 1
+      },
+      PERMISSION,
+      submitjson:{},
+      prcType:1
+    }
+  },
+  created () {
+    this.taskId=this.$store.getters.handleProcess.taskId
+    this.prcNum=this.$store.getters.handleProcess.prcNum
+    this.prcId=this.$store.getters.handleProcess.prcId
+    this.prcName=this.$store.getters.handleProcess.prcName
+    let params={
+      prcId: this.prcId,
+      prcType: this.prcType
+    }
+    if(this.$route.query.type=='yiban'){
+      this.disabled=true
+    }
+    this.getProcessDetail(params).then(res=>{
+      this.tableData = JSON.parse(this.processOld.dataJson)
+      this.applicationForm.power = this.tableData[0].power
+      this.applicationForm.applyReason = this.tableData[0].applyReason
+      this.processForm.prcName = this.prcName
+      this.disabled=false
+      this.formControl= true
+      if(this.$route.query.type=='yiban'){
+          this.disabled=true
+          this.submitjson=JSON.parse(this.processOld.submitJson)
+      }else{
+
+      }
+    })
+
+
+  },
+  methods: {
+    // 获取表格列表 吧查询到的值传给子组件
+    reportList(ids) {
+      this.$api.report.reportList({id: ids}).then(({data}) => {
+        this.tableData = data.records
+      })
+    },
+    // 转办
+    handleTransfer() {
+      this.visibleTree = true
+    },
+    // 选择转办
+    handleDblClick(treeNode) {
+      // taskId: this.$store.getters.getHandleInfo.taskId, // 任务id
+      //   assignee: treeNode[0].userId, // 转办人
+      //   userId: this.$store.getters.userInfo.userId, // dangqian人
+      //   pId: this.$store.getters.getHandleInfo.prcId // 流程实例
+      if( treeNode[0].USID ==  this.$store.getters.userInfo.usid){
+        this.$message.warning("您不能转办给自己")
+      }else{
+        this.$api.process.changeAssignee({
+          taskId: this.taskId,
+          assignee: treeNode[0].USID,
+          userId: this.$store.getters.userInfo.usid,
+          pId: this.prcId
+        }).then(() => {
+          this.$message.success('转办成功')
+          this.$router.push({path: '/userCenter/processCenter', query: {id: this.$route.query.id}})
+          this.visibleTree = false
+        })
+      }
+
+    },
+    handleSubmit() {
+        // if (this.$refs.operationRef.submit()) {
+          // 通过了校验  需要整合参数 拿到原来的dataJson 再把新添加的增进去 在拼成dataJson
+          let submit = JSON.parse(this.processOld.submitJson)
+          let dataJson = this.processOld.dataJson
+          let submitJson = JSON.stringify({...submit, ...this.$refs.operationRef.examineForm})
+           this.completeProcess({
+            dataJson,
+            submitJson,
+            taskId: this.taskId,
+            userId: this.$store.getters.userInfo.usid,
+            prcType: this.prcType
+          })
+        }
+
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/permissionApplication/launch.vue

@@ -0,0 +1,394 @@
+<template>
+  <div class="process">
+    <div class="process_box">
+      <process-header v-if="initShow"  :title="'发起人修改'" :proceesNum="prcNum"></process-header>
+      <process-header v-else :title="'发起流程'"></process-header>
+      <div class="procedure">
+        <div class="process_content">
+          <span class="base_title">基础信息</span>
+          <el-form ref="processFormRef" :model="processForm" label-width="150px"
+                   :rules="processFormRule" class="label-input-form" size="medium">
+            <el-row>
+              <el-col :span="9">
+                <el-form-item label="流程名称:" prop="prcName">
+                  <el-input :disabled="formControl || formControlname" v-model="processForm.prcName"
+                            placeholder="请输入流程名称"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+          <el-row>
+            <report-table v-model="tableData" @updateTable="(newValue)=>{tableData=newValue}" :disabled="showTableD"></report-table>
+          </el-row>
+          <el-row>
+            <el-form ref="applicationFormRef" :model="applicationForm" label-width="150px"
+                     class="label-input-form" size="medium" :rules="applicationFormRule"
+            >
+              <el-row>
+                <el-col :span="9">
+                  <el-form-item label="申请原因:" prop="applyReason">
+                    <el-input :disabled="formControl" type="textarea" v-model="applicationForm.applyReason"
+                              placeholder="请输入申请原因"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="9" :offset="6">
+                  <el-form-item label="选择申请权限:" prop="power">
+                    <el-select :disabled="formControl" v-model="applicationForm.power" placeholder="请选择申请权限">
+                      <el-option
+                        v-for="item in PERMISSION"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value">
+                      </el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </el-row>
+        </div>
+        <div class="process_content" v-if="initShow">
+          <span class="base_title">审批历史</span>
+          <process-approval-history :prcNum="prcNum"></process-approval-history>
+        </div>
+        <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">
+            <el-row>
+              <el-col :span="9">
+                <el-form-item label="选择一级审批人员:" prop="oneApprove">
+                  <el-input readonly :disabled="formControl" v-model="assignForm.oneApproveName"
+                            @click.native="handleCheck('spr1')"
+                            placeholder="请选择一级审批人员"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="9">
+                <el-form-item label="选择二级审批人员:" prop="twoApprove">
+                  <el-input readonly :disabled="formControl" v-model="assignForm.twoApproveName"
+                            @click.native="handleCheck('spr2')"
+                            placeholder="请选择二级审批人员"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                <el-form-item label="说明:">
+                  <el-input type="textarea" :disabled="formControl" v-model="assignForm.remark" placeholder="请输入说明"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+      </div>
+      <process-footer
+        v-if="!formControl"
+        showCancel
+        :show-reset="isShowReset"
+        :show-submit="isShowSubmit"
+        :submitLoading="isSubmit"
+        :resetLoading="resetLoading"
+        @reset="handleReset"
+        @submit="handleSubmit"
+      ></process-footer>
+      <orgTable :visible.sync="visibleOrgTable" title="人员列表" dialog-model :config="{
+      value: orgTableVal,
+        valueName: orgTableValName
+     }" :workNumFlag="true" :maxSelected="1" @confirm="isTreeOk"></orgTable>
+    </div>
+  </div>
+</template>
+
+<script>
+import processHeader from '@/components/ProcessHeader'
+import processFooter from '@/components/ProcessFooter'
+import processApprovalHistory from '@/components/ProcessApprovalHistory'
+import reportTable from './components/reportTable'
+import {PERMISSION} from '@/utils/Enum/enum'
+import orgTable from '../../components/OrgTable'
+import processMixin from "../../components/ProcessMixin";
+
+export default {
+  name: 'launch',
+  components: {
+    processHeader,
+    reportTable,
+    processFooter,
+    processApprovalHistory,
+    orgTable
+  },
+  mixins: [processMixin],
+  data() {
+    return {
+      showTableD: false,
+      initShow: false, // 控制审批历史是否显示 只有在不是第一次的时候才是true
+      treeType: '',
+      orgTableVal: '',
+      orgTableValName: '',
+      visibleOrgTable: false,
+      isSubmit: false,
+      resetLoading: false,
+      isShowReset: true,
+      isShowSubmit: true,
+      formControl: false,
+      formControlname: false,
+      assignForm: {
+        oneApprove: '',
+        twoApprove: '',
+        twoApproveName: '',
+        oneApproveName: '',
+        remark:''
+      },
+      tableData: [],
+      applicationForm: {
+        applyReason: '',
+        power: ''
+      },
+      q: {
+        pageSize: 10000,
+        pageNo: 1
+      },
+      PERMISSION,
+      processForm: {
+        prcName: ''
+      },
+      processFormRule: {
+        prcName: [{
+          required: true,
+          message: '请输入流程名称',
+          trigger: 'change'
+        }, {
+          max: 100,
+          message: '申请原因最多填写100字符',
+          trigger: 'change'
+        }]
+      },
+      applicationFormRule: {
+        applyReason: [{
+          max: 1000, message: '申请原因最多填写1000字符'
+        }],
+        power: [{
+          required: true,
+          message: '请选择申请权限'
+        }]
+      },
+      assignFormRules: {
+        oneApprove: [{
+          required: true,
+          message: '请选择一级审批人员',
+          trigger: 'change'
+        }],
+        twoApprove: [{
+          required: true,
+          message: '请选择二级审批人员',
+          trigger: 'change'
+        }],
+        remark: [{
+          max: 1000, message: '说明最多填写1000字符'
+        }]
+      },
+      prcType: 1,
+      prcName:''
+    }
+  },
+  created() {
+    // 第一次进入此页面 需要清楚校验
+    if (this.$route.query.ids) {
+      if (this.$route.query.ids.split(',').length > 0) {
+        this.reportList(this.$route.query.ids)
+      }
+      this.handleReset()
+    }
+    if (this.$store.getters.handleProcess.taskDefinitionKey == 'aid4') {
+      this.taskId = this.$store.getters.handleProcess.taskId
+      this.prcNum = this.$store.getters.handleProcess.prcNum
+      this.prcId = this.$store.getters.handleProcess.prcId
+      this.prcName = this.$store.getters.handleProcess.prcName
+      this.initShow = true
+      this.formControlname = true
+
+      this.getProcessDetail().then(res => {
+        //基础信息
+        this.tableData = JSON.parse(this.processOld.dataJson)
+        this.applicationForm.power = this.tableData[0].power
+        this.applicationForm.applyReason = this.tableData[0].applyReason
+        this.processForm.prcName =  this.prcName
+        debugger
+        //指派信息
+        ({oneApprove:this.assignForm.oneApprove,oneApproveName:this.assignForm.oneApproveName,twoApprove:this.assignForm.twoApprove,twoApproveName:this.assignForm.twoApproveName,remark:this.assignForm.remark}= JSON.parse(this.processOld.submitJson))
+      })
+    }
+    if (this.$route.query.type == 'yiban') {
+      this.taskId = this.$store.getters.handleProcess.taskId
+      this.prcNum = this.$store.getters.handleProcess.prcNum
+      this.prcId = this.$store.getters.handleProcess.prcId
+      this.prcName = this.$store.getters.handleProcess.prcName
+      this.formControl = true
+      this.initShow = true
+      this.showTableD = true
+      this.getProcessDetail().then(() => {
+        this.tableData = JSON.parse(this.processOld.dataJson)
+        this.applicationForm.power = this.tableData[0].power
+        this.applicationForm.applyReason = this.tableData[0].applyReason
+        this.processForm.prcName = this.prcName
+        //指派信息
+        //   ({ name: a.name, age: a.age } = b)
+        this.assignForm = JSON.parse(this.processOld.submitJson)
+
+      })
+    }
+    console.log(this.PERMISSION, 'ddd')
+  },
+  methods: {
+    handleCheck(name) {
+      if (this.initShow) {
+        return false
+      }
+      this.treeType = name
+      this.orgTableVal = ''
+      this.orgTableValName = ''
+      if (name === 'spr1') {
+        this.orgTableVal = this.assignForm.oneApprove ? this.assignForm.oneApprove : ''
+        this.orgTableValName = this.assignForm.oneApproveName ? this.assignForm.oneApproveName : ''
+      } else {
+        this.orgTableVal = this.assignForm.twoApprove ? this.assignForm.twoApprove : ''
+        this.orgTableValName = this.assignForm.twoApproveName ? this.assignForm.twoApproveName : ''
+      }
+      this.visibleOrgTable = true
+    },
+    // 树点击
+    isTreeOk(checkedList) {
+      // console.log(checkedList)
+      const parts = []
+      const partsName = []
+      console.log(checkedList, '0009999')
+      checkedList.map((item, index) => {
+        parts.push(item.userId || item.USID)
+        partsName.push(item.uname)
+      })
+      this.qcrList = checkedList
+      if (this.treeType === 'spr1') {
+        this.assignForm.oneApprove = parts.toString()
+        this.assignForm.oneApproveName = partsName.toString()
+      } else if (this.treeType === 'spr2') {
+        this.assignForm.twoApprove = parts.toString()
+        this.assignForm.twoApproveName = partsName.toString()
+      }
+      // console.log(this.assignForm.name1Id, this.assignForm.name2Id)
+    },
+    // 获取表格列表 吧查询到的值传给子组件
+    reportList(ids) {
+      this.$api.permissionProcess.getReportLisy({
+        pageSize:1000,
+        pageNo:1,
+        ids: ids.split(',')
+      }).then(({data}) => {
+        this.tableData = data.records.map(item => {
+          item.reportId = item['id']
+          delete item['id']
+          return item
+        })
+      })
+    },
+    handleReset() {
+      this.processForm.prcName = ''
+      if(this.$route.query.taskDefinitionKey == 'aid4'){
+        this.processForm.prcName = this.prcName
+      }
+      this.applicationForm = {
+        applyReason: '',
+        power: ''
+      }
+
+      this.assignForm = {
+        oneApprove: '',
+        twoApprove: ''
+      }
+      this.$nextTick(() => {
+        this.$refs.applicationFormRef.clearValidate()
+        this.$refs.assignFormRef.clearValidate()
+      })
+
+    },
+    // 整理数据
+    organizeData() {
+      let userId = this.$store.getters.userInfo.usid
+      this.tableData = this.tableData.map(item => {
+        item = {...item, ...this.applicationForm, userId: userId}
+        return item
+      })
+    },
+    // 提交
+    handleSubmit() {
+      console.log(this.$store.getters.userInfo.usid, " this.$store.getters.userInfo.USID")
+      this.$refs.assignFormRef.validate(v => {
+        this.$refs.applicationFormRef.validate(m => {
+          this.$refs.processFormRef.validate(z => {
+            if (v && m && z) {
+              // 过了校验  需要把数据都整合 this.tableData  this.applicationForm   this.assignForm
+              // 表格数据没有不能提交  需要提示
+              if (this.tableData.length == 0) {
+                this.$message.warning('至少需要选择一条报告数据')
+              } else {
+                // 调用流程数据
+                console.log("发送数据")
+                // 处理表格数据
+                this.organizeData()
+                //如果不是第一次
+                if (this.initShow) {
+                  let dataJson = JSON.stringify(this.tableData)
+                  let submitJson = JSON.stringify({...this.assignForm, userId: this.$store.getters.userInfo.usid,approvalOpinion:this.assignForm.remark})
+                  this.completeProcess({
+                    dataJson,
+                    submitJson,
+                    taskId: this.taskId,
+                    userId: this.$store.getters.userInfo.usid,
+                    prcType: this.prcType
+                  })
+                } else {
+                  this.startProcess()
+                }
+              }
+            } else {
+              this.$message.warning('请检查表单填写完整')
+            }
+          })
+        })
+      })
+    },
+    //修改参数
+    changeParam() {
+
+    },
+    startProcess() {
+      //把表单都整合到form中
+      // dataJson与submitJson需要发到completeProcess
+      let form = {}
+      form = {
+        approveData: {
+          ...this.applicationForm, ...this.processForm, ...this.assignForm,
+          userId: this.$store.getters.userInfo.usid
+        }, dataMsg: this.tableData
+      }
+
+      form.prcType = this.prcType
+      form.prcName = this.processForm.prcName
+      form.userId = this.$store.getters.userInfo.usid
+      //...this.applicationForm,...this.processForm,
+      let dataJson = JSON.stringify(this.tableData)
+      let submitJson = JSON.stringify({...this.assignForm, userId: this.$store.getters.userInfo.usid,approvalOpinion:this.assignForm.remark})
+      this.$api.process.startProcess(form).then(({data}) => {
+        this.completeProcess({dataJson, submitJson, taskId: data.result, userId: form.userId, prcType: this.prcType})
+      })
+    },
+    //获取流程详细信息
+
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/userCenter/processCenter.vue

@@ -1,69 +1,85 @@
 <template>
-    <div class="content">
+    <div class="content-height content-center">
         <div class="title">
             <span>流程中心</span>
         </div>
-        <div class="searchForm">
+        <div class="search">
-            <div class="item">
+          <el-row>
-                <div>流程编号：</div>
+            <el-col :span="20">
-                <el-input v-model="form.id" ></el-input> 
+            <div class="search-box-left">
-            </div>
+                  <label>流程编号：</label>
-            <div class="item">
+                  <el-input v-model="form.prcNum" placeholder="请输入流程编号"></el-input>
-                <div>流程名称：</div>
+                  <label>流程类型：</label>
-                <el-input v-model="form.name"></el-input> 
+                  <el-select v-model="form.prcType"  collapse-tags placeholder="请选择流程类型">
-            </div>
+                    <template v-for="item in processTypeList">
-            <div class="item">
+                      <el-option :label="item.label" :value="item.value" :key="item.value"></el-option>
-                <el-button type="primary"  @click="search">查询</el-button>
+                    </template>
-                <el-button type="" @click="reset">重置</el-button>
+                  </el-select>
-            </div>
+                  <label>流程名称：</label>
+                  <el-input v-model="form.prcName" placeholder="请输入流程名称"></el-input>
+              </div>
+            </el-col>
+            <el-col :span="4" align="right">
+              <div class="search-box-right">
+                  <el-button type="primary"  @click="search">查询</el-button>
+                  <el-button type="" @click="reset">重置</el-button>
+              </div>
+            </el-col>
+          </el-row>
         </div>
         <div class="tabs">
-            <tabs :tableData="tableData"/>
+            <tabs  @clearForm="reset"/>
         </div>
     </div>
 </template>
 
 <script>
+import ProcessMixin from "../../components/ProcessMixin";
 import tabs from '../userCenter/processCenter/tabs.vue'
     export default {
         name:'processCenter',
+        mixins: [ProcessMixin],
         components:{
           tabs
         },
         data() {
             return {
-                form: {},
+                form: {
-                tableData:[]
+                  prcNum:'',
+                  prcName:''
+                },
+
             }
         },
         created () {
-            ;
         },
         mounted () {
-            ;
+
+          this.$bus.$on('clearForm',()=>{
+              this.form={}
+          });
         },
         methods: {
             //查询
             search() {
+              console.log(this.form)
+                this.$bus.$emit('getSearchItem',this.form)
                 // this.$api.processCenter.search({})
-                this.tableData=[{createTime:'1999-10-1'}]
             },
             //重置
             reset(){
-                this.form={}
+                this.form= {
-                this.tableData=[{createTime:'3000-10-1'}]
+                  prcNum:'',
-                // this.$api.processCenter.reset({})
+                  prcName:''
+                }
+                this.$bus.$emit('getSearchItem',this.form)
             }
         },
     }
 </script>
 
 <style lang="scss" scoped>
-.content{
+.content-center{
-    min-height: calc(100vh - 60px - 20px);
-    box-shadow: 0 6px 11px 0 rgba(163, 163, 163, 0.2);
-    border-radius: 6px;
-    background: #FFFFFF;
     .title {
         border-bottom: 1px solid #EBEEF5;
         height: 42px;
@@ -76,24 +92,62 @@ import tabs from '../userCenter/processCenter/tabs.vue'
             color: #262626;
         }
     }
-    .searchForm{
+  .search {
-        width: 1200px;
+    .search-box-left {
-        display: flex;
+      padding-top: 20px;
-        align-items: center;
+      display: flex;
-        margin: 20px 0 0 22px;
+      justify-content: flex-start;
-        .item{
+      align-items: center;
-        width: 300px;
+
-        display: flex;
+      label {
-        align-items: center;
+        font-size: 14px;
+        font-weight: 400;
+        color: #595959;
+        margin-right: 5px;
+        padding-left: 22px;
+      }
+
+      .year {
+        ::v-deep .el-input__inner {
+          padding: 0 15px !important;
         }
-       
+      }
+
+      ::v-deep .el-input {
+        width: 167px;
+        margin-right: 5px;
+      }
+
+      @media screen and (max-width: 1366px) {
+        ::v-deep .el-input {
+          width: 135px;
+          margin-right: 5px;
+        }
+      }
+
+      ::v-deep .el-button {
+        float: right;
+      }
     }
+
+    .search-box-right {
+      padding-top: 20px;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      padding-right: 14px;
+    }
+
+    .operate-box {
+      padding-left: 13px;
+      padding-bottom: 11px;
+      padding-top: 18px;
+    }
+  }
     .tabs{
         margin: 20px 0 0 13px;
     }
-    
+
 }
-::v-deep .el-input{
+
-    width: 200px;
+</style>
-}
-</style>

src/views/userCenter/processCenter/finishProcess.vue

@@ -1,77 +1,142 @@
 <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.current - 1) * q.size + 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" title="流程编号">
-            <el-table-column prop="now" label="当前处理人"  align="center">
+            <template #default="{ row,index }">
-            </el-table-column>
+              <div class="blurcolor"  @click="view(row)">{{row.prcNum}}</div>
-            <el-table-column prop="last" label="上一处理人"  align="center">
+            </template>
-            </el-table-column>
+          </vxe-column>
-            <el-table-column prop="createTime" label="创建时间"  sortable align="center">
+          <vxe-column show-overflow show-header-overflow field="prcType"
-            </el-table-column>
+                      title="流程类型">
-            <el-table-column prop="endTime" label="完成时间"  sortable align="center">
+              <template #default="{ row,index }">
-            </el-table-column>
+                <div >{{getPrcName(row.prcType)}}</div>
-            <el-table-column prop="status" label="状态"  align="center">
+              </template>
-            </el-table-column>
+          </vxe-column>
-            <el-table-column label="操作" width="120" align="center">
+
-                <template slot-scope="scope">
+          <vxe-column show-overflow show-header-overflow field="prcName" title="流程名称">
-                    <el-button @click.native.prevent="view(scope.$index, tableData)" type="text" size="small">
+            <template #default="{ row,index }">
-                        查看
+              <div class="blurcolor" @click="view(row)">{{row.prcName}}</div>
-                    </el-button>
+            </template>
-                </template>
+          </vxe-column>
-            </el-table-column>
+          <vxe-column show-overflow show-header-overflow field="creatUserName"
-        </el-table>
+                      title="发起人"></vxe-column>
+          <vxe-column show-overflow show-header-overflow field="taskAssignee" title="当前处理人"></vxe-column>
+          <vxe-column show-overflow show-header-overflow field="taskBackAssignee"
+                      title="上一处理人"></vxe-column>
+          <vxe-column show-overflow show-header-overflow field="creatTime" title="创建时间"></vxe-column>
+          <vxe-column show-overflow show-header-overflow field="endTime"
+                      title="完成时间"></vxe-column>
+          <vxe-column show-overflow show-header-overflow field="status" title="状态">
+            <template #default="{ row }">
+              <span v-if="row.isEnd === '0'">未完成</span>
+              <span v-if="row.isEnd === '1'">已完成</span>
+            </template>
+          </vxe-column>
+          <vxe-column show-overflow show-header-overflow title="操作" width="200" fixed="right">
+            <template #default="{ row }">
+              <el-button @click.native.prevent="view(row)" type="text" size="small">
+                查看
+              </el-button>
+            </template>
+          </vxe-column>
+        </vxe-table>
+        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="q.current"
+                       :page-sizes="[5, 10, 20]" :page-size="q.size" layout="total, sizes, prev, pager, next, jumper"
+                       :total="total" />
+      </div>
     </div>
 </template>
 
 <script>
+import ProcessMixin from "../../../components/ProcessMixin";
 export default {
     name: 'finishProcess',
+    mixins:[ProcessMixin],
     data() {
         return {
-            tableData: [{
+          q:{
-                processId: '2016-05-1',
+            current:1,
-                processName: '王小虎',
+            size:10
-                processPerson: '上海市普陀区金沙江路 1518 弄',
+          },
-                createTime: '2023-1-1'
+          total: 0,
-            }, {
+          tableData: []
-                processId: '2016-05-2',
-                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:{
-      secondData:{
+      form:{
-          type:Array,
+          type:Object,
-          default:[],
+          default:{},
       }
     },
-    watch: {
+  watch:{
-        secondData(newValue, oldValue) {
+    form:{
-          this.tableData=newValue
+      handler(){
-        }
+        console.log("我见他",this.form)
-    },
+        this.loadData()
+      },
+      deep:true
+    }
+  },
+    mounted () {
+        this.loadData()
+      },
     methods: {
-        view() {
+      loadData() {
-            alert(111)
+        let userId=this.$store.getters.userInfo.usid
-        },
+        this.$api.processCenter.finishProcessPage({...this.q,...this.form,userId:userId}).then(res=>{
+            this.tableData = res.data.list
+            this.total = res.data.count
+        })
+      },
+      // 单页数据量
+      handleSizeChange(val) {
+        this.q.size = val;
+        this.q.current = 1;
+        this.loadData();
+      },
+      // 第几页
+      handleCurrentChange(val) {
+        this.q.current = val;
+        this.loadData();
+      },
+      view(row) {
+        let params={
+          id: this.$route.query.id,
+          taskId:row.taskId,
+          type:'yiban',
+          taskDefinitionKey: row.taskDefinitionKey,
+          prcNum: row.prcNum,
+          prcId:  row.prcId,
+          prcName:  row.prcName,
+        }
+        this.$store.commit('setHandleProcess',params)
+        switch (row.prcType) {
+          case '1' :
+            if (row.taskDefinitionKey == 'aid1' || row.taskDefinitionKey == 'aid3') {
+              this.$router.push({
+                path: '/permission/launch',
+                query: {
+                  id: this.$route.query.id,
+                  type:'yiban',
+                }
+              })
+            }else{
+              this.$router.push({
+                path: '/permission/examine',
+                query: {
+                  id: this.$route.query.id,
+                  type:'yiban',
+                }
+              })
+            }
+        }
+      },
     }
 }
 </script>
@@ -79,6 +144,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,76 +1,129 @@
 <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.current - 1) * q.size + 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="流程编号">
-      <el-table-column prop="processPerson" label="发起人"  align="center">
+          <template #default="{ row,index }" >
-      </el-table-column>
+            <div class="blurcolor" @click="handle(row)">{{row.prcNum}}</div>
-      <el-table-column prop="createTime" label="创建时间" sortable align="center">
+          </template>
-      </el-table-column>
+        </vxe-column>
-      <el-table-column  label="操作" width="120" align="center">
+        <vxe-column show-overflow show-header-overflow field="prcType"
-        <template slot-scope="scope">
+                    title="流程类型">
-          <el-button @click.native.prevent="handle(scope.$index, tableData)" type="text" size="small">
+          <template #default="{ row,index }">
-            办理
+            <div>{{getPrcName(row.prcType)}}</div>
-          </el-button>
+          </template>
-        </template>
+        </vxe-column>
-      </el-table-column>
+        <vxe-column show-overflow show-header-overflow field="prcName" title="流程名称">
-    </el-table>
+          <template #default="{ row,index }" >
+            <div class="blurcolor" @click="handle(row)">{{row.prcName}}</div>
+          </template>
+        </vxe-column>
+        <vxe-column show-overflow show-header-overflow field="creatUserName"
+                    title="发起人"></vxe-column>
+        <vxe-column show-overflow show-header-overflow field="creatTime" title="创建时间"></vxe-column>
+        <vxe-column show-overflow show-header-overflow title="操作" width="200" fixed="right">
+          <template #default="{ row }">
+            <el-button @click.native.prevent="handle(row)" type="text" size="small">
+              办理
+            </el-button>
+          </template>
+        </vxe-column>
+      </vxe-table>
+      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="q.current"
+                     :page-sizes="[5, 10, 20]" :page-size="q.size" layout="total, sizes, prev, pager, next, jumper"
+                     :total="total" />
+    </div>
   </div>
 </template>
 
 <script>
+import ProcessMixin from "../../../components/ProcessMixin";
 export default {
   name: "gencyProcess",
+  mixins:[ProcessMixin],
   data() {
     return {
-      tableData: [
+      q:{
-        {
+        current:1,
-          processId: "2016-05-1",
+        size:10
-          processName: "王小虎",
+      },
-          processPerson: "上海市普陀区金沙江路 1518 弄",
+      total: 0,
-          createTime: "2023-1-1",
+      tableData: []
-        },
-        {
-          processId: "2016-05-2",
-          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:{
-      firstData:{
+      form:{
-          type:Array,
+        type:Object,
-          default:[],
+        default:{},
       }
     },
+
     watch: {
-      firstData(newValue, oldValue) {
+      form:{
-          this.tableData=newValue
+        handler(){
-        }
+          console.log("我见他",this.form)
+          this.loadData()
+        },
+        deep:true
+      }
     },
-  methods: {
+    mounted () {
-    handle() {
+      this.loadData()
-      alert(111);
+    },
+    methods: {
+      loadData() {
+        let userId=this.$store.getters.userInfo.usid
+        this.$api.processCenter.gencyProcessPage({...this.q,...this.form,userId:userId}).then(res=>{
+          this.tableData = res.data.list
+          this.total = res.data.count
+        })
+      },
+    // 单页数据量
+    handleSizeChange(val) {
+      this.q.size = val;
+      this.q.current = 1;
+      this.loadData();
+    },
+    // 第几页
+    handleCurrentChange(val) {
+      this.q.current = val;
+      this.loadData();
+    },
+    handle(row) {
+      let params={
+        id: this.$route.query.id,
+        taskId:row.taskId,
+        type:'yiban',
+        taskDefinitionKey: row.taskDefinitionKey,
+        prcNum: row.prcNum,
+        prcId:  row.prcId,
+        prcName:  row.prcName,
+      }
+      this.$store.commit('setHandleProcess',params)
+        switch (row.prcType) {
+          case '1' :
+            if (row.taskDefinitionKey == 'aid4') {
+              this.$router.push({
+                path: '/permission/launch',
+                query: {
+                  id: this.$route.query.id
+                }
+              })
+            }else{
+              this.$router.push({
+                path: '/permission/examine',
+                query: {
+                  id: this.$route.query.id
+                }
+              })
+            }
+        }
     },
   },
 };
@@ -81,4 +134,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,75 +1,125 @@
 <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.current - 1) * q.size + 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="流程编号">
-            </el-table-column>
+            <template #default="{ row }">
-            <el-table-column prop="last" label="上一处理人"  align="center">
+              <div class="blurcolor" @click="view(row)">  {{row.prcNum}}</div>
-            </el-table-column>
+            </template>
-            <el-table-column prop="createTime" label="创建时间"  sortable align="center">
+          </vxe-column>
-            </el-table-column>
+          <vxe-column show-overflow show-header-overflow
-            <el-table-column prop="endTime" label="完成时间"  sortable align="center">
+                      title="流程类型">
-            </el-table-column>
+            <template #default="{ row,index }">
-            <el-table-column prop="status" label="状态"  align="center">
+              <div>{{getPrcName(row.prcType)}}</div>
-            </el-table-column>
+            </template>
-            <el-table-column  label="操作" width="120" align="center">
+          </vxe-column>
-                <template slot-scope="scope">
+          <vxe-column show-overflow show-header-overflow title="流程名称">
-                    <el-button @click.native.prevent="view(scope.$index, tableData)" type="text" size="small">
+            <template #default="{ row }" >
-                        查看
+              <div class="blurcolor"  @click="view(row)">{{row.prcName}}</div>
-                    </el-button>
+            </template>
-                </template>
+          </vxe-column>
-            </el-table-column>
+          <vxe-column show-overflow show-header-overflow field="creatUserName"
-        </el-table>
+                      title="发起人"></vxe-column>
+          <vxe-column show-overflow show-header-overflow field="taskAssignee" title="当前处理人"></vxe-column>
+          <vxe-column show-overflow show-header-overflow field="taskBackAssignee"
+                      title="上一处理人"></vxe-column>
+          <vxe-column show-overflow show-header-overflow field="creatTime" title="创建时间"></vxe-column>
+          <vxe-column show-overflow show-header-overflow field="endTime"
+                      title="完成时间"></vxe-column>
+          <vxe-column show-overflow show-header-overflow field="status" title="状态">
+            <template #default="{ row }">
+              <span v-if="row.isEnd === '0'">未完成</span>
+              <span v-if="row.isEnd === '1'">已完成</span>
+            </template>
+          </vxe-column>
+          <vxe-column show-overflow show-header-overflow title="操作" width="200" fixed="right">
+            <template #default="{ row }">
+              <el-button @click.native.prevent="view(row)" type="text" size="small">
+                查看
+              </el-button>
+            </template>
+          </vxe-column>
+        </vxe-table>
+        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="q.current"
+                       :page-sizes="[5, 10, 20]" :page-size="q.size" layout="total, sizes, prev, pager, next, jumper"
+                       :total="total" />
+      </div>
+
     </div>
 </template>
 <script>
+import ProcessMixin from "../../../components/ProcessMixin";
 export default {
     name: 'monitorProcess',
+    mixins:[ProcessMixin],
     data() {
         return {
-            tableData: [{
+          q:{
-                processId: '2016-05-1',
+            current:1,
-                processName: '王小虎',
+            size:10
-                processPerson: '上海市普陀区金沙江路 1518 弄',
+          },
-                createTime: '2023-1-1'
+          total: 0,
-            }, {
+          tableData: []
-                processId: '2016-05-2',
-                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:{
-      fourthData:{
+      form:{
-          type:Array,
+        type:Object,
-          default:[],
+        default:{},
       }
     },
-    watch: {
+  watch:{
-        fourthData(newValue, oldValue) {
+    form:{
-          this.tableData=newValue
+      handler(){
-        }
+        console.log("我见他",this.form)
+        this.loadData()
+      },
+      deep:true
+    }
+  },
+    mounted () {
+      this.loadData()
     },
     methods: {
-        view() {
+      loadData() {
-            alert(111)
+        let userId=this.$store.getters.userInfo.usid
+        this.$api.processCenter.monitorProcessesPage({...this.q,...this.searchForm,userId:userId}).then(res=>{
+          this.tableData = res.data.list
+          this.total = res.data.count
+        })
+      },
+      // 单页数据量
+      handleSizeChange(val) {
+        this.q.size = val;
+        this.q.current = 1;
+        this.loadData();
+      },
+      // 第几页
+      handleCurrentChange(val) {
+        this.q.current = val;
+        this.loadData();
+      },
+        view(row) {
+          let params={
+            id: this.$route.query.id,
+            prcNum: row.prcNum,
+            prcType: row.prcType,
+            prcId: row.prcId,
+          }
+          this.$store.commit('setHandleProcess',params)
+          this.$router.push({
+            path: 'monitorViews',
+            query:{
+                id: this.$route.query.id,
+                tabsName: 'MonitorProcess'
+            }
+          })
         }
     }
 }
@@ -78,6 +128,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,362 @@
+<!-- 流程详情 -->
+<template>
+  <div id="processDetails" class="content-height" 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="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"
+                   v-if="tabsName !=='AlreadyProcess'">
+          调整处理人
+        </el-button>
+<!--       <div v-if="tabsName=='AlreadyProcess'" class="alreadbtn">-->
+<!--         <el-button-->
+<!--           type="primary" class="inner-btn"-->
+<!--           @click="urgeRow"-->
+<!--         >催办</el-button>-->
+<!--         <el-button-->
+<!--           type="primary" class="inner-btn"-->
+<!--           @click="exportStandard"-->
+<!--         >导出</el-button>-->
+<!--       </div>-->
+      </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">
+      <!--      <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%"
+                 @checkbox-all="selectAllEvent"   @checkbox-change="selectChangeEvent">
+        <vxe-column type="checkbox" width="60"></vxe-column>
+        <vxe-column show-overflow show-header-overflow field="name"
+                    title="任务步骤"></vxe-column>
+        <vxe-column show-overflow show-header-overflow field="assignee" title="任务受理人"></vxe-column>
+        <vxe-column show-overflow show-header-overflow field="createTime"
+                    title="创建时间">
+          <template #default="{ row,index }" >
+             {{formatDate(row.createTime,"yyyy-mm-dd hh:mm:ss")}}
+          </template>
+        </vxe-column>
+        <vxe-column show-overflow show-header-overflow field="endTime" title="完成时间">
+          <template #default="{ row,index }" >
+            {{formatDate(row.endTime?row.endTime:'',"yyyy-mm-dd hh:mm:ss")}}
+          </template>
+        </vxe-column>
+        <vxe-column show-overflow show-header-overflow field="approvalOpinion"
+                    title="审批意见"></vxe-column>
+        <vxe-column show-overflow show-header-overflow field="status"
+                    title="状态">
+          <template #default="{ row }">
+            <span v-if="row.endTime">已完成</span>
+            <span v-else>未完成</span>
+          </template>
+        </vxe-column>
+      </vxe-table>
+    </div>
+    <monitorModal ref="monitorModal" :prcId="prcId"></monitorModal>
+  </div>
+</template>
+
+<script>
+import monitorModal from './monitorModal.vue'
+import ProcessMixin from "@/components/ProcessMixin";
+import { formatDate } from '@/utils/date'
+export default {
+  name: 'processDetail',
+  mixins: [ProcessMixin],
+  data () {
+    return {
+      formatDate,
+      assigneeNewLoading: false, // 调整处理人确定loading
+      loginPeople: '',
+      // 调整处理人抽屉状态
+      drawerModal: false,
+      urgeRowFlag: true,
+      tasksName: '',
+      selectPeople: '',
+      // loading
+      loading: false,
+      imgLoading: false,
+      // 流程步骤
+      processStep: null,
+      // 当前节点
+      taskKey: 0,
+      // 当前流程类型
+      prcType: '',
+      // 流程列表
+      detailData: [],
+      taskNames: '',
+      userId: '',
+      tableRow: [], // 接受表格数据
+      completeFlagType: true, // 判断当前任务是否完成
+      processState: true, // 判断当前流程
+      detailsList: [],
+      shunxu: '',
+      paixu: '',
+      checkIds: [],
+      checkList: [],
+      tabsName:'',
+      prcNum:'',
+      prcId:''
+    }
+  },
+  methods: {
+    exportStandard (){
+      let exportName=''
+      let pramas={prcNum: this.$store.getters.handleProcess.prcNum,
+       sortWord: this.shunxu ? this.paixu : '',
+       shunxu: this.shunxu,
+       exportName: exportName}
+       this.processTypeList.some(item=>{
+          if(item.value == this.prcType){
+              exportName=item.label
+          }
+       })
+      this.$api.process.exportStandard(pramas,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对象
+        }
+      })
+    },
+    urgeRow (){
+      if (this.checkList.length === 1 && !this.checkList[0].endTime) {
+        this.$confirm('您确认要催办该任务吗', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+          confirmButtonClass: 'common-button-primary',
+
+        }).then(() => {
+          this.urge(this.checkList[0])
+        })
+      } else {
+        this.$message.warning('请选择一条未完成的数据')
+      }
+    },
+    urge (row) {
+      let params= {
+          msgContent: '流程编号为' + row.prcNum + '的流程，请尽快办理。',
+          msgTitle: '流程编号' + row.prcNum,
+          userId: row.assigneeId,
+          msgType: 'TEXT'
+        }
+      this.$api.process.urgePerson(params,
+        res => {
+          this.processTable()
+          this.$message.success('催办成功')
+        }, e => {
+        })
+    },
+    selectAllEvent ({ checked }) {
+      const records = this.$refs.xTable.getCheckboxRecords()
+      this.checkIds = records.map(item => {
+        return item.id
+      })
+      this.checkList = records
+    },
+    selectChangeEvent ({ checked }) {
+      const records = this.$refs.xTable.getCheckboxRecords()
+      this.checkIds = records.map(item => {
+        return item.id
+      })
+      this.checkList = records
+    },
+    showDialog() {
+      if(this.checkList.length < 1){
+        this.$message.warning("请选择一条数据")
+        return
+      }else{
+        if(this.checkList.length > 2){
+          this.$message.warning("请选择一条数据")
+          return
+        }
+        let check=[]
+        check = this.checkList.filter(item=>{
+          if(item.endTime ){
+              return item
+          }
+        })
+        if(check.length > 0){
+          this.$message.warning("请选择状态为未完成的数据")
+        }else{
+          this.$refs.monitorModal.open(this.checkIds[0].taskId,this.prcId,this.checkList[0].assigneeId)
+        }
+      }
+    },
+    back () {
+      this.$store.commit('setActiveTabIndex',this.tabsName=='AlreadyProcess'?"third":"fourth" )
+      //要返回上一级
+      this.$router.back(-1)
+    },
+    // 请求转换流程图
+    processNum (row) {
+      this.imgLoading = true;
+      // axios.request({
+      //   url: '/libary/api/model/getImg',
+      //   responseType: 'blob',
+      //   method: 'get',
+      //   data: {
+      //     modelId: row?row.id:'111s',
+      //   }
+      // })
+      this.$api.processCenter.getMonitorImg({prcNum:this.prcNum})
+        .then(res => {
+          console.log(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.$api.processCenter.getMonitorPageList({
+          prcNum: this.prcNum,
+          sortWord: this.shunxu ? this.paixu : '',
+          shunxu: this.shunxu
+      }).then(res=>{
+          this.detailData = res.data
+          // res[res.length - 1].endTime ? this.urgeRowFlag = false : this.urgeRowFlag = true
+      })
+    },
+  },
+  components: {
+    monitorModal
+  },
+  props: {},
+  mounted () {
+      this.tabsName=this.$store.getters.handleProcess.tabsName
+      this.prcType=this.$store.getters.handleProcess.prcType
+      this.prcNum=this.$store.getters.handleProcess.prcNum
+      this.prcId=this.$store.getters.handleProcess.prcId
+      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{
+        height: auto;
+        overflow: auto;
+        max-width: 100%;
+        object-fit: none;
+      }
+    }
+  }
+  .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;
+  }
+  .alreadbtn{
+    display: flex;
+  }
+}
+.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

@@ -0,0 +1,158 @@
+<template>
+  <div>
+    <el-dialog title="调整处理人" :visible.sync="dialogVisible" width="500px">
+      <div class="label-input-form addModel">
+        <el-form ref="form" :model="form" label-width="120px" :rules="rules" class="formData">
+<!--          <el-form-item label="选择人员" prop="assignee" class="el-form-item">-->
+<!--            <el-select v-model="form.assignee" class="icon-auth" collapse-tags-->
+<!--                       placeholder="请选择">-->
+<!--              <template v-for="item in userList">-->
+<!--                <el-option :label="item.USNAME" :value="item.USID" :key="item.USID"></el-option>-->
+<!--              </template>-->
+<!--            </el-select>-->
+<!--          </el-form-item>-->
+          <el-form-item label="选择人员:" prop="assignee">
+            <el-input readonly :disabled="diasbleds" v-model="form.assigneeName"
+                      @click.native="handleCheck('clr')"
+                      placeholder="请选择人员"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+      <span slot="footer" class="dialog-footer">
+                <el-button @click="dialogVisible = false" class="btn">取 消</el-button>
+                <el-button type="primary" @click="submit" class="btn">确 定</el-button>
+            </span>
+    </el-dialog>
+    <orgTable :visible.sync="visibleOrgTable" title="人员列表":config="{
+      value: orgTableVal,
+        valueName: orgTableValName
+     }" dialog-model  :workNumFlag="true" :maxSelected="1" @confirm="isTreeOk"></orgTable>
+  </div>
+</template>
+
+<script>
+import orgTable from '@/components/OrgTable'
+export default {
+  name: 'modal',
+  components:{
+    orgTable
+  },
+  data() {
+    return {
+      orgTableVal:'',
+      orgTableValName:'',
+      diasbleds:false,
+      visibleOrgTable: false,
+      userList: [],
+      dialogVisible: false,
+      form: {
+        assignee: '',
+        assigneeName: ''
+      },
+      rules: {
+        assignee: [
+          {
+            required: 'true',
+            trigger: 'change',
+            message: '请选择调整处理人'
+          }
+        ]
+      },
+      taskId: '',
+      pId: ''
+    };
+  },
+
+  mounted() {
+    this.sysUserList()
+  },
+  methods: {
+    isTreeOk(checkedList){
+      const parts = []
+      const partsName = []
+      console.log(checkedList, '0009999')
+      checkedList.map((item, index) => {
+        parts.push(item.userId || item.USID)
+        partsName.push(item.uname)
+      })
+      this.form.assignee= parts.toString()
+      this.form.assigneeName = partsName.toString()
+    },
+    handleCheck(name) {
+      this.orgTableValName = this.form.assigneeName
+      this.orgTableVal = this.form.assignee
+      this.visibleOrgTable = true
+    },
+    changeSelect(val) {
+      this.checked = (val.length || this.reportF.reportUserIdList.length) === this.userList.length;
+      // this.$emit('update:updateMultipleSelect',this.reportF.reportUserIdList);
+    },
+    // 获取所有用户
+    sysUserList() {
+      this.$api.user.sysUserList({pageNo: 1, pageSize: 999999}).then(({data}) => {
+        this.userList = data.records;
+      })
+    },
+    open(taskId, pId,assigneeId) {
+      this.taskId = taskId
+      this.pId = pId
+      this.form.name = {
+        assignee: ''
+      }
+      this.assigneeId=assigneeId
+      this.dialogVisible = true
+    },
+    submit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          let userId = this.form.assignee
+          let assignee = this.assigneeId
+          if (userId == assignee) {
+            this.$message.warning("当前任务受理人就是您选择的人员")
+          } else {
+            this.$api.process.changeAssignee({
+              taskId: this.taskId,
+              assignee: assignee,
+              userId: userId,
+              pId: this.pId
+            })
+              .then(res => {
+                //转办完应该跳到哪个页面？
+                //转办完这个人还能看到这个监控流程吗
+                this.dialogVisible = false
+              })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dialog-footer {
+  margin: 20px 20px;
+
+  .el-button {
+    width: 80px;
+    height: 36px;
+    padding: 0;
+    font-size: 14px;
+  }
+}
+
+::v-deep .el-dialog__footer {
+  padding-bottom: 20px;
+}
+
+.addModel {
+  padding: 20px;
+}
+
+.el-form-item {
+  ::v-deep .el-select {
+    width: 300px;
+    vertical-align: center;
+  }
+}
+</style>

src/views/userCenter/processCenter/sentProcess.vue

@@ -1,102 +1,199 @@
 <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.current - 1) * q.size + 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="流程编号">
-            </el-table-column>
+          <template #default="{ row,index }">
-            <el-table-column prop="now" label="当前处理人"  align="center">
+            <div class="blurcolor" @click="view(row)">{{row.prcNum}}</div>
-            </el-table-column>
+          </template>
-            <el-table-column prop="last" label="上一处理人"  align="center">
+        </vxe-column>
-            </el-table-column>
+        <vxe-column show-overflow show-header-overflow field="prcType"
-            <el-table-column prop="createTime" label="创建时间"  sortable align="center">
+                    title="流程类型">
-            </el-table-column>
+          <template #default="{ row,index }">
-            <el-table-column prop="endTime" label="完成时间" sortable align="center">
+            <div >{{getPrcName(row.prcType)}}</div>
-            </el-table-column>
+          </template>
-            <el-table-column prop="status" label="状态"  align="center">
+        </vxe-column>
-            </el-table-column>
-            <el-table-column  label="操作" width="120" align="center">
-                <template slot-scope="scope">
-                    <el-button @click.native.prevent="view(scope.$index, tableData)" type="text" size="small">
-                        查看
-                    </el-button>
 
-                    <el-button :disabled="tableData[scope.$index].status=='已完成'" @click.native.prevent="back(scope.$index, tableData)" type="text" size="small"
+        <vxe-column show-overflow show-header-overflow field="prcName" title="流程名称">
-                        >
+          <template #default="{ row,index }">
-                        <span style="color: rgb(236, 128, 141)">强制撤回</span>
+            <div class="blurcolor" @click="view(row)">{{row.prcName}}</div>
-                    </el-button>
+          </template>
-                </template>
+        </vxe-column>
-            </el-table-column>
+        <vxe-column show-overflow show-header-overflow field="creatUserName"
-        </el-table>
+                    title="发起人"></vxe-column>
+        <vxe-column show-overflow show-header-overflow field="taskAssignee" title="当前处理人"></vxe-column>
+        <vxe-column show-overflow show-header-overflow field="taskBackAssignee"
+                    title="上一处理人"></vxe-column>
+        <vxe-column show-overflow show-header-overflow field="creatTime" title="创建时间"></vxe-column>
+        <vxe-column show-overflow show-header-overflow field="endTime"
+                    title="完成时间"></vxe-column>
+        <vxe-column show-overflow show-header-overflow field="status" title="状态">
+          <template #default="{ row }">
+            <span v-if="row.isEnd === '0'">未完成</span>
+            <span v-if="row.isEnd === '1'">已完成</span>
+          </template>
+        </vxe-column>
+        <vxe-column show-overflow show-header-overflow title="操作" width="200" fixed="right">
+          <template #default="{ row,index }">
+            <el-button type="text" size="small"  @click="view(row)">
+              查看
+            </el-button>
+            <el-button type="text" size="small" @click="withdraw(row)" v-if="row.isEnd === '0'">
+              <span>强制撤回</span>
+            </el-button>
+          </template>
+        </vxe-column>
+      </vxe-table>
+      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="q.current"
+                     :page-sizes="[5, 10, 20]" :page-size="q.size" layout="total, sizes, prev, pager, next, jumper"
+                     :total="total"/>
     </div>
+
+  </div>
 </template>
 
 <script>
+import ProcessMixin from "../../../components/ProcessMixin";
 export default {
-    name: "sentProcess",
+  name: "sentProcess",
-    data() {
+  mixins: [ProcessMixin],
-        return {
+  data() {
-            tableData: [
+    return {
-                {
+      color: 'rgb(236, 128, 141)',
-                    processId: "2016-05-1",
+      icolor: 'rgb(119,136,153)',
-                    processName: "王小虎",
+      q: {
-                    processPerson: "上海市普陀区金沙江路 1518 弄",
+        current: 1,
-                    createTime: "2023-1-1",
+        size: 10
-                    status:'已完成'
+      },
-                },
+      total: 0,
-                {
+      tableData: []
-                    processId: "2016-05-2",
+    };
-                    processName: "王小虎",
+  },
-                    processPerson: "上海市普陀区金沙江路 1518 弄",
+  props: {
-                    createTime: "2023-1-2",
+    form:{
-                },
+      type:Object,
-                {
+      default:{},
-                    processId: "2016-05-3",
+    }
-                    processName: "王小虎",
+  },
-                    processPerson: "上海市普陀区金沙江路 1518 弄",
+  watch:{
-                    createTime: "2023-1-3",
+    form:{
-                },
+      handler(){
-                {
+        console.log("我见他",this.form)
-                    processId: "2016-05-4",
+        this.loadData()
-                    processName: "王小虎",
+      },
-                    processPerson: "上海市普陀区金沙江路 1518 弄",
+      deep:true
-                    createTime: "2023-1-4",
+    }
-                },
+  },
-            ],
+  mounted () {
-        };
+    this.loadData()
+  },
+  methods: {
+    viewDetails(row) {
+      const prcType = row.prcType
+      console.log(prcType);
+      this.loading = true
+      this.$api.getAlreadData({taskId:row.taskId})
+        .then(res=>{
+            switch (prcType) {
+              case '1':
+                res.isViewDetails = 1
+                res.prcType = prcType
+                res.prcNum = row.prcNum
+                if (res.taskDefinitionKey == 'aid1' ||
+                  res.taskDefinitionKey == 'aid4' ) {
+                    this.$router.push({
+                      path: '/permission/launch',
+                      query: res,
+                    })
+                    return
+                }
+                else{
+                  this.$router.push({
+                    path: '/permission/examine',
+                    query: res,
+                  })
+                }
+            }
+        })
+
     },
-    props:{
+    //撤回
-      thirdData:{
+    withdraw(row){
-          type:Array,
+      this.$confirm('确认强制撤回该条数据？', '强制撤回', {
-          default:[],
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        confirmButtonClass: 'common-button-primary',
+        type: 'warning'
+      }).then(() => {
+        this.$api.processCenter.getBack({prcId: row.prcId}).then(res => {
+          this.$message.success(res.data.message)
+          this.loadData()
+        }).catch(err => {
+          console.log(err)
+        })
+      })
+    },
+    loadData() {
+      let userId=this.$store.getters.userInfo.usid
+      this.$api.processCenter.sentProcessPage({...this.q,...this.form,userId:userId}).then(res=>{
+        this.tableData = res.data.list
+        this.total = res.data.count
+      }).catch(err=>{
+
+      })
+    },
+    // 单页数据量
+    handleSizeChange(val) {
+      this.q.size = val;
+      this.q.current = 1;
+      this.loadData();
+    },
+    // 第几页
+    handleCurrentChange(val) {
+      this.q.current = val;
+      this.loadData();
+    },
+    view(row) {
+      let params={
+        id: this.$route.query.id,
+        prcNum: row.prcNum,
+        prcType: row.prcType,
+        tabsName: 'AlreadyProcess'
       }
-    },
+      this.$store.commit('setHandleProcess',params)
-    watch: {
+      this.$router.push({
-        thirdData(newValue, oldValue) {
+        path: 'monitorViews',
-          this.tableData=newValue
+        query: {
+          id: this.$route.query.id,
+          tabsName: 'AlreadyProcess'
         }
+      })
     },
-    methods: {
+
-        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>

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"></gencyProcess>
+                <gencyProcess v-if="activeName == 'first'" :form="form"></gencyProcess>
             </el-tab-pane>
             <el-tab-pane label="已办流程" name="second">
-                <finishProcess :secondData="secondData"></finishProcess>
+                <finishProcess v-if="activeName=='second'" :form="form"></finishProcess>
             </el-tab-pane>
             <el-tab-pane label="已发流程" name="third">
-                <sentProcess :thirdData="thirdData"></sentProcess>
+                <sentProcess  v-if="activeName=='third'" :form="form"></sentProcess>
             </el-tab-pane>
             <el-tab-pane label="监控流程" name="fourth">
-                <monitorProcesses :fourthData="fourthData"></monitorProcesses>
+                <monitorProcesses  v-if="activeName=='fourth'" :form="form"></monitorProcesses>
             </el-tab-pane>
         </el-tabs>
     </div>
@@ -30,12 +30,6 @@ export default {
         monitorProcesses,
         sentProcess
     },
-    props:{
-        tableData:{
-            type:Array,
-            default:[],
-        }
-    },
     data() {
         return {
             activeName: 'first',
@@ -43,35 +37,38 @@ export default {
             secondData:[],
             thirdData:[],
             fourthData:[],
+            form:[]
         };
     },
     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 () {
-        ;
+      this.$bus.$on('getSearchItem',(data)=>{
+        this.form = JSON.parse(JSON.stringify(data))
+        console.log(this.form,"hhh")
+      })
+      this.activeName=this.$store.getters.activeTab ?this.$store.getters.activeTab:'first'
     },
     methods: {
         handleClick(tab, event) {
-            // console.log(tab, event);
+          this.$emit('clearForm')
+          this.$store.commit('setActiveTabIndex','')
         }
+    },
+    beforeDestroy(){
+      console.log("我不监听了")
+      this.$bus.$off('getSearchItem')
     }
 }
 </script>
 
-<style lang="sass" scoped>
+<style lang="scss" scoped>
-
+::v-deep .el-tabs__header {
-</style>
+  padding: 0;
+  position: relative;
+  margin: 0 14px 15px;
+  }
+</style>

src/views/userCenter/processConfig/ProcessMapping.vue

@@ -0,0 +1,52 @@
+<template>
+    <div class="execution">
+        <basic-container>
+              <iframe class="iframe" :src="src"></iframe>
+        </basic-container>
+    </div>
+</template>
+
+<script>
+    import BasicContainer from './basic-container/index'
+    export default {
+        name: "ProcessMapping",
+        components: {
+            BasicContainer
+        },
+        data() {
+            return {
+                modelId : '',
+                name: '',
+                actUrl: 'http://10.0.10.173:7060/modeler.html?modelId='
+            }
+        },
+        created() {
+            this.modelId = this.$route.query.modelId
+        },
+        computed: {
+            src() {
+                return `${this.actUrl}${this.modelId}`
+            }
+        },
+        methods: {
+            breaks() {
+                this.$router.push({path: '/'})
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .execution{
+        width: 100%;
+    }
+    .iframe{
+        width: 100%;
+        height: auto;
+        min-height: 850px;
+        border: 0;
+        overflow: hidden;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+    }
+</style>

src/views/userCenter/processConfig/basic-container/index.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="basic-container"
+       :class="{'basic-container--block':block}">
+      <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "basicContainer",
+  props: {
+    block: {
+      type: Boolean,
+      default: false,
+    }
+  }
+};
+</script>
+
+<style>
+.basic-container{
+  width: 100%;
+}
+</style>
+

src/views/userCenter/processConfig/components/EditProcess.vue

@@ -0,0 +1,125 @@
+<template>
+  <el-dialog :close-on-click-modal="false"
+    :visible="visible"
+    :title="title"
+    @close="closeDialog"
+    width="400px"
+  >
+    <div>
+      <el-form
+        ref="form"
+        :model="formData"
+        :rules="formRules"
+        class="label-input-form"
+        label-width="100px"
+        inline
+      >
+        <el-form-item label="流程类型" prop="category" class="add-form-item">
+          <el-select v-model="formData.category" placeholder="请选择流程类型" clearable>
+            <el-option v-for="opt in typeList" :value="opt.value" :key="opt.value" :label="opt.label">{{ opt.label}}</el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div slot="footer">
+      <el-button round class="common-button-default" icon="el-icon-close" @click="closeDialog">取消</el-button>
+      <el-button round class="common-button-primary" icon="el-icon-check" type="primary" @click="confirmDialog">确认</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+const formData = {
+  category: '',
+}
+export default {
+  name: 'EditProcessClassification',
+  props: ['data', 'visible'],
+  data() {
+    return {
+      formData: {},
+      formRules: {},
+      typeList: [] // 类型下拉框
+    }
+  },
+
+  computed: {
+    title() {
+      return !!this.data ? '编辑' : '新增'
+    }
+  },
+
+  watch: {
+    data(newValue) {
+      this.formData = newValue || {...formData}
+    },
+    visible(newValue) {
+      this.formData = this.data || {...formData}
+    }
+  },
+
+  mounted() {
+    this.formData = this.data || {...formData}
+  },
+
+  created() {
+    // this.queryTablePage()
+  },
+
+  methods: {
+
+    // 查询、加载表格
+    queryTablePage () {
+      const formData = {
+        // page: this.pageNo,
+        // pageSize: this.$store.getters.userInfo.configContent,
+        // standNumber: this.searchForm.standardKey
+      }
+      this.$http.get('lawss/activiti/categoryList',
+        formData,
+        {
+          _this: this,
+          loading: 'tableDataLoading'
+        },
+        res => {
+          this.typeList = res.result.map(item => {
+            return  {
+              label: item.type,
+              value: item.objectId
+            }
+          })
+          // this.total = res.data.count
+        }, e => {})
+    },
+
+    closeDialog() {
+      // this.visible = false
+      this.$emit('close')
+      this.formData = {}
+    },
+
+    confirmDialog() {
+      const url = !this.data ? 'lawss/activiti/addCategory' : 'lawss/activiti/updatModel'
+      const formData = {
+        modelId: this.formData.id,
+        categoryId: this.formData.category
+      }
+      this.$http.get(url, formData, {
+        _this: this
+      }, res => {
+        if (res.success) {
+          console.log('新增/编辑成功')
+          this.$emit('success')
+          this.$emit('close')
+        }
+
+      }, e => {
+      })
+    }
+  }
+}
+</script>
+
+<style lang="" scoped>
+
+</style>

src/views/userCenter/processConfig/components/EditProcessClassification.vue

@@ -0,0 +1,103 @@
+<template>
+  <el-dialog :close-on-click-modal="false"
+    :visible="visible"
+    :title="title"
+    :before-close="closeDialog"
+    width="400px"
+  >
+    <div>
+      <el-form
+        ref="formData"
+        :model="formData"
+        :rules="formRules"
+        class="label-input-form"
+        label-width="100px"
+        inline
+      >
+        <el-form-item label="流程类型名称" prop="type" class="add-form-item">
+          <el-input v-model="formData.type" placeholder="请输入流程类型名称" ></el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div slot="footer">
+      <el-button round class="common-button-default" icon="el-icon-close" @click="closeDialog">{{$t('m.cancel')}}</el-button>
+      <el-button round class="common-button-primary" icon="el-icon-check" type="primary" @click="confirmDialog">{{$t('m.confirm')}}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+const formData = {
+  type: '',
+}
+export default {
+  name: 'EditProcessClassification',
+  props: ['data', 'visible'],
+  data() {
+    return {
+      formData: {},
+      formRules: {
+        type: [
+          { required: true, message: '请输入流程类型名称', trigger: 'change' }
+        ]
+      }
+    }
+  },
+
+  computed: {
+    title() {
+      return !!this.data ? '编辑' : '新增'
+    }
+  },
+
+  watch: {
+    data(newValue) {
+      this.formData = newValue || {...formData}
+      this.$refs['formData'].resetFields()
+    },
+    visible(newValue) {
+      this.formData = this.data || {...formData}
+    }
+  },
+
+  mounted() {
+    this.formData = this.data || {...formData}
+  },
+
+  methods: {
+    closeDialog() {
+      // this.visible = false
+      this.$refs['formData'].resetFields()
+      this.$emit('close')
+      this.formData = {}
+    },
+
+    confirmDialog() {
+      const url = !this.data ? 'lawss/activiti/addCategory' : 'lawss/activiti/editCategory'
+      const formData = {
+        objectId: this.formData.objectId,
+        type: this.formData.type
+      }
+      this.$refs['formData'].validate((valid) => {
+        if (valid) {
+          this.$http.postData(url, formData, {
+            _this: this
+          }, res => {
+            if (res.success) {
+              console.log('新增/编辑成功')
+              this.$emit('success')
+              this.$emit('close')
+            }
+
+          }, e => {
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="" scoped>
+
+</style>

src/views/userCenter/processConfig/index.vue

@@ -0,0 +1,294 @@
+<template>
+  <div class="content-height configBox">
+    <div class="title">
+      <span>流程配置</span>
+    </div>
+    <div class="search">
+      <el-row>
+<!--        <el-col :span="5">-->
+<!--          <div class="search-box-left">-->
+<!--            <label>流程名称：</label>-->
+<!--            <el-input v-model="processForm.name" ></el-input>-->
+<!--          </div>-->
+<!--        </el-col>-->
+
+<!--      <el-col :span="4" align="right">-->
+<!--        <div class="search-box-right">-->
+<!--          <el-button type="primary"  @click="queryTablePage">查询</el-button>-->
+<!--          <el-button type="" @click="clearAllSearchs">重置</el-button>-->
+<!--        </div>-->
+<!--      </el-col>-->
+        <el-col :span="24">
+          <div class="operate-box">
+            <el-button @click="addRow">新增</el-button>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+
+    <div class="table">
+      <vxe-table  ref="xTable" :data="tableList" :empty-render="{name: 'NotData'}" align="center" border stripe v-table-min-height="'calc(100vh - 320px)'">
+        <vxe-column show-overflow show-header-overflow field="name" title="流程名称"></vxe-column>
+<!--        <vxe-column show-overflow show-header-overflow field="categoryName" title="流程类型"></vxe-column>-->
+        <vxe-column show-overflow show-header-overflow field="createTime" title="创建时间">
+          <template #default="{ row }">
+              {{row.createTime?formatDate(row.createTime,"yyyy-mm-dd HH:mm:ss"):''}}
+          </template>
+        </vxe-column>
+        <vxe-column show-overflow show-header-overflow title="操作" width="250" fixed="right">
+          <template #default="{ row }">
+              <el-button type="text" @click="editRow(row)">编辑</el-button>
+              <el-button type="text" @click="deploy(row)">部署</el-button>
+              <el-button type="text" class="deleRed" @click="deleteRow(row)">删除</el-button>
+          </template>
+        </vxe-column>
+      </vxe-table>
+      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="q.current"
+                     :page-sizes="[5, 10, 20]" :page-size="q.size" layout="total, sizes, prev, pager, next, jumper"
+                     :total="total" />
+      <el-dialog :close-on-click-modal="false"
+                 :visible="visible"
+                 :title="title"
+                 @close="closeDialog"
+                 width="300px"
+                 class="addDialog"
+      >
+        <el-form
+          ref="form"
+          :model="formData"
+          class="addform"
+          label-width="100px"
+          inline
+        >
+          <el-row>
+            <el-form-item label="模型名称" class="add-form-item">
+              <el-input
+                v-model="formData.name"
+                placeholder="请输入模型名称"
+                clearable
+                :maxlength="100"></el-input>
+            </el-form-item>
+          </el-row>
+         <el-row>
+           <el-form-item label="模型描述" class="add-form-item">
+             <el-input
+               v-model="formData.desc"
+               placeholder="请输入模型描述"
+               clearable
+               :maxlength="100"></el-input>
+           </el-form-item>
+         </el-row>
+        </el-form>
+        <div slot="footer" class="add-footer">
+          <el-button size="big"  class="common-button-default"  @click="closeDialog">
+            取消
+          </el-button>
+          <el-button size="big" class="common-button-primary"  type="primary"
+                     @click="confirmDialog">确认
+          </el-button>
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import EditProcess from './components/EditProcess'
+import { formatDate } from '@/utils/date'
+export default {
+  name: 'ProcessClassification',
+  components: { EditProcess },
+  data () {
+    return {
+      formatDate,
+      formData: {
+        name: '',
+        desc: ''
+      },
+      total: 0,
+      q: {
+        current: 1,
+        size: 10
+      },
+      tableList: [{name:1}],
+      processForm: {
+        name: ''
+      },
+      visible:false,
+      title: '添加流程'
+    }
+  },
+  created() {
+    this.queryTablePage()
+  },
+  methods: {
+    deleteRow(row) {
+      this.$confirm('确认删除该条数据？', '删除', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        confirmButtonClass: 'common-button-primary',
+
+        type: 'warning'
+      }).then(() => {
+        this.$api.process.deleteModel({modelId: row.id}).then(res => {
+          this.$message.success(res.data.message)
+          this.queryTablePage()
+        })
+      })
+    },
+    handleCurrentChange(page) {
+      this.q.current = page
+      this.queryTablePage()
+    },
+    handleSizeChange(size) {
+      this.q.size = size
+      this.queryTablePage()
+    },
+    closeDialog() {
+      this.visible=false
+    },
+    editRow(row) {
+      window.open(`/processMapping?id=AEHJB8YNJ3&modelId=${row.id}`)
+      // this.$router.push({
+      //   path: '/userCenter/processMapping',
+      //   query: {id: 'AEHJB8YNJ3',modelId: row.id}
+      // })
+    },
+    //部署
+    deploy(row) {
+      this.$confirm('确认部署该条数据？', '确认部署', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        confirmButtonClass: 'common-button-primary',
+
+        type: 'warning'
+      }).then(() => {
+        this.$api.process.deploy({modelId: row.id}).then(res=>{
+          this.$message.success(res.data.message)
+          this.queryTablePage()
+        })
+      }).catch(() => {
+      })
+    },
+    queryTablePage() {
+      this.$api.process.getModelListPage({...this.q,...this.searchForm}).then(res=>{
+        this.tableList = res.data.result.records
+        this.total = res.data.result.total
+
+      }).catch(err=>{
+
+      })
+
+    },
+    addRow() {
+      this.formData = {
+        name: '',
+        desc: ''
+      }
+      this.visible = true
+    },
+    confirmDialog() {
+      this.$api.process.addModel(this.formData).then(res=> {
+        this.$message.success("新增成功")
+        this.visible = false
+        this.queryTablePage()
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.configBox{
+  .search {
+    .search-box-left {
+      padding-top: 20px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+
+      label {
+        font-size: 14px;
+        font-weight: 400;
+        color: #595959;
+        margin-right: 5px;
+        padding-left: 22px;
+      }
+
+      .year {
+        ::v-deep .el-input__inner {
+          padding: 0 15px !important;
+        }
+      }
+
+      ::v-deep .el-input {
+        width: 167px;
+        margin-right: 5px;
+      }
+
+      @media screen and (max-width: 1366px) {
+        ::v-deep .el-input {
+          width: 135px;
+          margin-right: 5px;
+        }
+      }
+
+      ::v-deep .el-button {
+        float: right;
+      }
+    }
+
+    .search-box-right {
+      padding-top: 20px;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      padding-right: 14px;
+    }
+
+    .operate-box {
+      padding-left: 13px;
+      padding-bottom: 11px;
+      padding-top: 18px;
+    }
+  }
+  .title {
+    border-bottom: 1px solid #EBEEF5;
+    height: 42px;
+    line-height: 42px;
+    margin: 0 18px 0 22px;
+
+    span {
+      font-size: 16px;
+      font-weight: 600;
+      color: #262626;
+    }
+  }
+  .table {
+    margin: 0 14px 0 13px;
+
+    ::v-deep .el-pagination {
+      margin-top: 13px;
+      padding-left: 20px;
+      padding-bottom: 10px;
+    }
+  }
+  .addform{
+    padding: 50px 0;
+    .add-form-item {
+      ::v-deep .el-input__inner {
+        padding: 0 15px !important;
+        width: 250px;
+        height: 40px;
+      }
+    }
+  }
+  .add-footer{
+    padding: 20px 20px;
+  }
+}
+.deleRed{
+  color: red !important;
+}
+
+</style>

vue.config.js

@@ -1,5 +1,6 @@
 const webpack = require('webpack')
 module.exports = {
+  lintOnSave: false,
   // publicPath: '/mi',
   outputDir: 'dist', // 运行时生成的生产环境构建文件的目录(默认''dist''，构建之前会被清除)
   assetsDir: 'static', // 放置生成的静态资源(s、css、img、fonts)的(相对于 outputDir 的)目录(默认'')
@@ -12,12 +13,12 @@ module.exports = {
     proxy: {
       // 配置跨域
       '/api': {
-        target: 'http://127.0.0.1:7060', // 服务器
+        target: 'http://localhost:7060', // 服务器
         changeOrigin: true
       },
       // 请求静态图片配置项
       '/api/home/pic': {
-        target: 'http://10.94.1.164:7061', // 图片请求的nginx网址
+        target: 'http://localhost:7061', // 图片请求的nginx网址
         changeOrigin: true
       }