流程管理

src/api/system/flowable.js

@@ -9,7 +9,7 @@ export function FetchInitFlowAll(params) {
   })
 }
 
-// 获取全部流程列表
+// 获取运行中/历史流程列表
 export function FetchFlowList(params) {
   return request({
     url: 'api/flowable/getFlowList',
@@ -18,20 +18,49 @@ export function FetchFlowList(params) {
   })
 }
 
-export function add(data) {
+// 部署
+export function FetchDeloy(data) {
   return request({
-    url: 'api/fourTests/editFourTests',
+    url: 'api/flowable/deploy',
     method: 'post',
     data
   })
 }
 
-export function edit(data) {
+// 激活挂起
+export function FetchSuspendActivate(params) {
+  return request({
+    url: 'api/flowable/suspendActivate',
+    method: 'get',
+    params
+  })
+}
+
+// 根据key获取历史版本
+export function FetchAllByKey(params) {
+  return request({
+    url: 'api/flowable/getAllByKey',
+    method: 'get',
+    params
+  })
+}
+
+// 下载
+export function FetchLeadingOutModelXml(params) {
+  return request({
+    url: 'api/flowable/leadingOutModelXml',
+    method: 'get',
+    params
+  })
+}
+
+// 部署
+export function FetchGenProcessDiagram(data) {
   return request({
-    url: 'api/fourTests/editFourTests',
+    url: 'api/flowable/genProcessDiagram',
     method: 'post',
     data
   })
 }
 
-export default { FetchInitFlowAll, add, edit }
+export default { FetchInitFlowAll, FetchFlowList, FetchDeloy, FetchSuspendActivate, FetchAllByKey, FetchLeadingOutModelXml }

src/utils/request.js

@@ -38,6 +38,8 @@ service.interceptors.response.use(
       return response.data.data
     } else if (response.data instanceof Blob) {
       return response.data
+    } else if (response.data) {
+      return response.data
     } else {
       Message.error({
         message: errorMsg,

src/utils/upload.js

@@ -20,3 +20,14 @@ export function archivesUpload(api, file, categoryId) {
   }
   return axios.post(api, data, config)
 }
+
+// 上传模型
+export function modelUpload(api, file, name) {
+  var data = new FormData()
+  data.append('multipartFile', file)
+  data.append('name', name)
+  const config = {
+    headers: { 'Authorization': getToken() }
+  }
+  return axios.post(api, data, config)
+}

src/views/system/fieldCorresManage/index.vue

@@ -33,6 +33,12 @@
             编辑
           </el-button>
         </template>
+        <template v-slot:right>
+          <el-button :loading="crud.downloadLoading" size="mini" :disabled="crud.selections.length === 0" @click="doExport(crud.selections)">
+            <i class="iconfont icon-daochu" />
+            导出
+          </el-button>
+        </template>
       </crudOperation>
     </div>
     <!--表单渲染-->
@@ -115,6 +121,9 @@ import rrOperation from '@crud/RR.operation'
 import crudOperation from '@crud/CRUD.operation'
 import eForm from './module/form'
 import DetailModule from './module/detail'
+import { exportFile } from '@/utils/index'
+import qs from 'qs'
+import { mapGetters } from 'vuex'
 
 // crud交由presenter持有
 const defaultForm = { documentId: null, categoryId: null }
@@ -131,7 +140,7 @@ export default {
         edit: false,
         del: true,
         reset: false,
-        download: true,
+        download: false,
         group: false
       }
     })
@@ -158,6 +167,11 @@ export default {
       }
     }
   },
+  computed: {
+    ...mapGetters([
+      'baseApi'
+    ])
+  },
   created() {
     this.getCategoryDataTree()
     this.getDocumentDataTree()
@@ -317,6 +331,26 @@ export default {
         console.log(err)
       })
     },
+    doExport(data) {
+      console.log(data)
+      crud.downloadLoading = true
+      this.$confirm('此操作将导出所选数据' + '<span>你是否还要继续？</span>', '提示', {
+        confirmButtonText: '继续',
+        cancelButtonText: '取消',
+        type: 'warning',
+        dangerouslyUseHTMLString: true
+      }).then(() => {
+        const ids = []
+        data.forEach(val => {
+          ids.push(val.id)
+        })
+        const params = {
+          'fieldMates': ids
+        }
+        exportFile(this.baseApi + '/api/fieldMate/download?' + qs.stringify(params, { indices: false }))
+      }).catch(() => {
+      })
+    },
     normalizer(node) {
       if (node.children && !node.children.length) {
         delete node.children

src/views/system/processManage/historicalProcess/index.vue

@@ -32,14 +32,25 @@
       @cell-dblclick="tableDoubleClick"
       @selection-change="crud.selectionChangeHandler"
     >
-      <el-table-column type="selection" align="center" width="55" />
-      <el-table-column label="流程名称" prop="name" />
-      <el-table-column label="实列ID" prop="instanceID" />
-      <el-table-column label="任务ID" prop="serviceID " />
-      <el-table-column label="发起人" prop="initiators" />
-      <el-table-column prop="createTime" label="启动时间">
+      <el-table-column label="发起时间" prop="startTime" align="center" width="160">
         <template slot-scope="scope">
-          <div>{{ scope.row.createTime | parseTime }}</div>
+          <div>{{ scope.row.startTime | parseTime }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column label="发起人" prop="promoter" align="center" width="140" />
+      <el-table-column label="流程名称" prop="flowableName" align="center" />
+      <el-table-column label="当前节点" prop="currentNode" align="center" />
+      <el-table-column label="下一节点" prop="nextNode" align="center" />
+      <el-table-column label="结束时间" prop="endTime" align="center" width="160">
+        <template slot-scope="scope">
+          <div v-if="scope.row.endTime">{{ scope.row.endTime | parseTime }}</div>
+          <div v-else>-</div>
+        </template>
+      </el-table-column>
+      <el-table-column label="流程状态" prop="status" align="center" width="140">
+        <template slot-scope="scope">
+          <div v-if="scope.row.endTime" class="row-state active-state">已完成</div>
+          <div v-else class="row-state disabled-state">已取消</div>
         </template>
       </el-table-column>
     </el-table>
@@ -60,7 +71,7 @@ export default {
   name: 'RunningProcess',
   components: { rrOperation, DateRangePicker, pagination, Detail },
   cruds() {
-    return CRUD({ title: '运行中流程', url: 'api/dept', crudMethod: {}})
+    return CRUD({ title: '运行中流程', url: 'api/flowable/getFlowList', crudMethod: {}})
   },
   mixins: [presenter(), header(), crud()],
   data() {
@@ -86,6 +97,9 @@ export default {
     }
   },
   methods: {
+    [CRUD.HOOK.beforeRefresh]() {
+      this.crud.query.isEnd = true
+    },
     // table - 双击查看详情
     tableDoubleClick(row) {
       this.$refs.processDetail.detailVisible = true
@@ -95,4 +109,39 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@mixin table-fixed-status-style{
+  [data-theme="dark"] & {
+    &.active-state{
+      color: #1aae93;
+      border: 1px solid #1aae93;
+    }
+    &.disabled-state{
+      color: #ED4A41;
+      border: 1px solid #FFA5A0;
+      opacity: 0.6;
+    }
+  }
+  [data-theme="light"] & {
+    &.active-state{
+      color: #2ECAAC;
+      background-color: #E8F8F5;
+      border: 1px solid #B1EBDF;
+    }
+    &.disabled-state{
+      color: #ED4A41;
+      background-color: #FFEBEA;
+      border: 1px solid #FFA5A0;
+    }
+  }
+}
+.row-state{
+  display: inline-block;
+  padding: 0 4px;
+  height: 20px;
+  line-height: 20px;
+  text-align: center;
+  font-size: 12px;
+  border-radius: 3px;
+  @include table-fixed-status-style;
+}
 </style>

src/views/system/processManage/processDeployment/index.vue

@@ -2,31 +2,25 @@
   <div class="process-dep-container">
     <div class="head-container">
       <div class="head-left">
-        <el-button size="mini" @click="handleForm(0)">
+        <el-button size="mini" @click="handleDeloy">
           <i class="iconfont icon-xinzeng" />
-          新增
+          部署
         </el-button>
-        <el-button size="mini" :disabled="selectedItem.length === 0" @click="handleForm(1,selectedItem)">
-          <i class="iconfont icon-bianji" />
-          编辑
-        </el-button>
-        <el-button size="mini" @click="exportVisible=true">
-          <i class="iconfont icon-daochu" />
-          导出
-        </el-button>
-      </div>
-      <div class="head-right" style="display:flex; justify-content: space-between;">
-        <div class="head-operation">
-          <el-button size="mini" :disabled="selectedItem.length===0 || (selectedItem.length !== 0 && selectedItem[0].state === 1)" @click="activateHandle(1)">
+        <el-button size="mini" :disabled="selectedItem.length===0 || (selectedItem.length !== 0 && selectedItem[0].suspensionState === 1)" @click="activateHandle(1)">
           <i class="iconfont icon-jihuo" />
           激活
         </el-button>
-          <el-button size="mini" :disabled="selectedItem.length===0 || (selectedItem.length !== 0 && selectedItem[0].state === 0)" @click="activateHandle(0)">
+        <el-button size="mini" :disabled="selectedItem.length===0 || (selectedItem.length !== 0 && selectedItem[0].suspensionState === 2)" @click="activateHandle(2)">
           <i class="iconfont icon-guaqi" />
           挂起
         </el-button>
+        <el-button size="mini" :disabled="selectedItem.length===0" @click="downloadModel(selectedItem[0])">
+          <i class="iconfont icon-daochu" />
+          导出
+        </el-button>
       </div>
-        <el-select v-model="query.enabled" clearable size="small" placeholder="状态" class="filter-item" style="width: 100px">
+      <div class="head-right">
+        <el-select v-model="query.suspensionState" clearable size="small" placeholder="状态" class="filter-item" style="width: 100px" @change="queryState">
           <i slot="prefix" class="iconfont icon-zhuangtai" />
           <el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
         </el-select>
@@ -34,20 +28,29 @@
     </div>
     <div class="process-dep-main">
       <ul class="process-list">
-        <li v-for="(item,index) in jsonList" :key="index" :class="isActive === index ? 'active-li': ''" @click="selectProcess(item,index)">
-          <p>{{ item.name }}</p>
-          <span :class="item.state ? 'process-on': 'process-off'" />
+        <li v-for="(item,index) in flowableList" :key="index" :class="isActive === index ? 'active-li': ''" @click="selectProcess(item,index)">
+          <p>{{ item.deployName }}</p>
+          <span :class="item.suspensionState === 1 ? 'process-on': 'process-off'" />
         </li>
       </ul>
-      <div class="process-info">
+      <div v-if="isHasModel" class="process-info">
         <div class="process-info-txt">
           <div class="info-left">
-            <p>当前版本：<span>1.0</span></p>
-            <p>部署时间：<span>2022-10-01 10:00:05</span></p>
+            <p>当前版本：
+              <el-select v-model="versionNew" style="width:70px;" @change="selectVersion">
+                <el-option
+                  v-for="item in versionOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </p>
+            <p>部署时间：<span>{{ modelInfo.deploymentTime | parseTime }}</span></p>
           </div>
           <div class="info-right ">
-            <p>运行中：<span>2</span></p>
-            <p>已完成：<span>5</span></p>
+            <p>运行中：<span>{{ modelInfo.runCount }}</span></p>
+            <p>已完成：<span>{{ modelInfo.completeCount }}</span></p>
           </div>
         </div>
         <div class="process-info-img">
@@ -55,95 +58,137 @@
         </div>
       </div>
     </div>
-    <eForm ref="mform" />
-    <!-- 导出dialog -->
-    <el-dialog class="tip-dialog" :visible.sync="exportVisible" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body title="提示">
-      <div class="setting-dialog">
-        <div class="tip-content">
-          <p class="tipMsg">此操作将导出所选数据</p>
-          <span>你是否还要继续?</span>
-        </div>
-        <div slot="footer" class="dialog-footer">
-          <el-button type="text" @click="exportVisible = false">取消</el-button>
-          <el-button type="primary" @click="toExport(crud.selections)">继续</el-button>
-        </div>
-      </div>
-    </el-dialog>
-    <!-- 激活挂起dialog -->
-    <el-dialog class="tip-dialog" :visible.sync="activateVisible" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body title="提示">
-      <div class="setting-dialog">
-        <div class="tip-content">
-          <p class="tipMsg">此操作将{{ activateName }} “ {{ selectedItem.length !== 0 ? selectedItem[0].name : '' }} ”</p>
-          <span>你是否还要继续?</span>
-        </div>
-        <div slot="footer" class="dialog-footer">
-          <el-button type="text" @click="activateVisible = false">取消</el-button>
-          <el-button type="primary" @click="activateVisible = false">继续</el-button>
-        </div>
-      </div>
-    </el-dialog>
+    <eForm ref="mform" @refresh="getList" />
   </div>
 </template>
 
 <script>
-import eForm from './module/form.vue'
+import { FetchInitFlowAll, FetchSuspendActivate, FetchAllByKey, FetchLeadingOutModelXml, FetchGenProcessDiagram } from '@/api/system/flowable'
+import { downloadFile } from '@/utils/index'
+import eForm from './module/form'
 export default {
   name: 'ProcessDeployment',
   components: { eForm },
   data() {
     return {
-      jsonList: [
-        {
-          id: 1,
-          name: '流程A',
-          state: 1
-        },
-        {
-          id: 2,
-          name: '流程B',
-          state: 1
-        },
-        {
-          id: 3,
-          name: '流程C',
-          state: 0
-        }
-      ],
+      flowableList: [],
       query: {
-        enabled: 'true'
+        suspensionState: null
       },
       isActive: -1,
+      isHasModel: false,
       selectedItem: [],
+      modelInfo: {},
+      allVersionModel: [],
+      versionOptions: [],
+      versionNew: null,
       exportVisible: false,
-      activateVisible: false,
       activateName: '',
       enabledTypeOptions: [
-        { key: 'true', display_name: '启用' },
-        { key: 'false', display_name: '挂起' }
+        { key: null, display_name: '全部' },
+        { key: 1, display_name: '启用' },
+        { key: 2, display_name: '挂起' }
       ]
     }
   },
+  mounted() {
+    this.getList()
+  },
   methods: {
+    getList(suspensionState) {
+      this.selectedItem = []
+      this.isActive = -1
+      this.isHasModel = false
+      FetchInitFlowAll({ 'suspensionState': suspensionState }).then((res) => {
+        this.flowableList = res
+      }).catch(err => {
+        console.log(err)
+      })
+    },
+    queryState(val) {
+      this.getList(val)
+    },
     selectProcess(item, index) {
       this.selectedItem = []
       this.selectedItem.push(item)
       this.isActive = index
+      this.isHasModel = true
+      this.modelInfo = item
+      FetchAllByKey({ 'key': item.modelKey }).then(res => {
+        this.allVersionModel = res
+        this.versionOptions = res.map(item => {
+          const json = {}
+          json.value = item.version
+          json.label = item.version
+          return json
+        })
+        this.versionNew = item.version
+        FetchGenProcessDiagram({ 'processId': item.procdefId }).then((res) => {
+          console.log(res)
+        }).catch(err => {
+          console.log(err)
+        })
+      }).catch((err) => {
+        console.log(err)
+      })
+    },
+    selectVersion(val) {
+      this.allVersionModel.filter((item, index) => {
+        if (item.version === val) {
+          this.modelInfo = item
+        }
+      })
     },
-    handleForm(type) {
+    handleDeloy() {
       this.$refs.mform.uploadVisible = true
-      if (type === 0) {
-        this.$refs.mform.title = '新增流程'
-      } else {
-        this.$refs.mform.title = '编辑流程'
+      if (this.isActive !== -1) {
+        this.$refs.mform.form.name = this.selectedItem[0].deployName
       }
     },
     activateHandle(type) {
-      this.activateVisible = true
       if (type === 1) {
         this.activateName = '激活'
       } else {
         this.activateName = '挂起'
       }
+      this.$confirm('此操作将' + this.activateName + '“' + this.selectedItem[0].modelName + '”' + '<span>你是否还要继续？</span>', '提示', {
+        confirmButtonText: '继续',
+        cancelButtonText: '取消',
+        type: 'warning',
+        dangerouslyUseHTMLString: true
+      }).then(() => {
+        const params = {
+          'procdefId': this.selectedItem[0].procdefId,
+          'type': type
+        }
+        FetchSuspendActivate(params).then(res => {
+          if (res === 'SUCCESS') {
+            this.getList()
+          }
+        }).catch((err) => {
+          console.log(err)
+        })
+      }).catch(() => {
+      })
+    },
+    downloadModel(data) {
+      this.$confirm('此操作将导出所选数据' + '<span>你是否还要继续？</span>', '提示', {
+        confirmButtonText: '继续',
+        cancelButtonText: '取消',
+        type: 'warning',
+        dangerouslyUseHTMLString: true
+      }).then(() => {
+        const params = {
+          'deployId': data.deployId
+        }
+        const name = data.modelName
+        FetchLeadingOutModelXml(params).then(result => {
+          downloadFile(result, name, 'xml')
+        }).catch(() => {
+          this.$message.error('下载失败，请检查好网络后重新下载')
+        })
+      }).catch(() => {
+      })
     }
   }
 }
@@ -194,14 +239,21 @@ export default {
 }
 .head-container{
   display: flex;
-  justify-content: flex-start;
+  justify-content: space-between;
 
   .head-left{
     width: 342px;
+    padding: 0 10px;
+    display: flex;
+    justify-content: space-between;
+    ::v-deep .el-button--mini{
+      padding: 7px;
+    }
   }
   .head-right{
     flex: 1;
-    margin-left: 30px;
+    display: flex;
+    justify-content: flex-end;
   }
   .filter-item{
     margin-right: 0;

src/views/system/processManage/processDeployment/module/form.vue

@@ -6,7 +6,7 @@
     append-to-body
     :before-close="handleClose"
     :visible="uploadVisible"
-    :title="title"
+    title="部署流程"
   >
     <div class="setting-dialog">
       <el-form ref="form" :model="form" inline :rules="rules" size="small" label-width="90px">
@@ -16,20 +16,12 @@
           </el-form-item>
         </el-row>
         <el-row>
-          <el-form-item label="上传模型" prop="model" class="upload-wm">
-            <el-input v-model="form.model" style="width:300px;" />
-            <el-upload
-              class="upload-btn"
-              :action="upload_qiniu_url"
-              :show-file-list="false"
-              :on-success="handleAvatarSuccess"
-              :on-error="handleError"
-              :before-upload="beforeAvatarUpload"
-              :data="qiniuData"
-            >
-              <el-button size="small" type="primary"><i class="iconfont icon-shangchuan" />上传</el-button>
-            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
-            </el-upload>
+          <el-form-item label="上传模型" prop="fileName" class="upload-wm">
+            <el-input v-model="form.fileName" readonly style="width:320px;" />
+            <div class="upload-btn">
+              <input type="file" accept=".xml" class="upload-input" @change="handleFileChange">
+              <el-button><i class="iconfont icon-shangchuan2" />上传</el-button>
+            </div>
           </el-form-item>
         </el-row>
       </el-form>
@@ -46,15 +38,16 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+import { modelUpload } from '@/utils/upload'
 export default {
   data() {
     return {
-      title: '新增流程',
+      file: null,
       uploadVisible: false,
       form: {
-        id: null,
-        name: '',
-        model: ''
+        name: null,
+        fileName: null
       },
       qiniuData: {
         key: '',
@@ -66,46 +59,38 @@ export default {
       upload_qiniu_addr: 'qiniu.aiyxlib.com',
       rules: {
         name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
-        model: [{ required: true, message: '请上传模型', trigger: 'blur' }]
+        fileName: [{ required: true, message: '请上传模型', trigger: 'blur' }]
       }
     }
   },
+  computed: {
+    ...mapGetters([
+      'baseApi'
+    ])
+  },
   methods: {
-    handleChange(file, fileList) {
-      this.fileList = fileList.slice(-3)
+    handleFileChange(event) {
+      this.file = event.target.files[0]
+      this.form.fileName = this.file.name
     },
     handleClose() {
       this.uploadVisible = false
     },
-    // 验证文件合法性
-    beforeAvatarUpload(file) {
-      this.qiniuData.key = file.name
-      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
-      const isLt2M = file.size / 1024 / 1024 < 2
-      if (!isJPG) {
-        this.$message.error('图片只支持bmp、jpg、png、gif格式的文件 !')
-      }
-      if (!isLt2M) {
-        this.$message.error('图片大小不能超过 2MB !')
-      }
-      return isJPG && isLt2M
-    },
-    handleAvatarSuccess: function(res, file) {
-      this.form.imageUrl = 'http://' + this.upload_qiniu_addr + '/' + res.key
-      console.log(this.form.imageUrl)
-    },
-    handleError: function(res) {
-      this.$message({
-        message: '上传失败',
-        duration: 2000,
-        type: 'warning'
-      })
-    },
     confirmHandle() {
       this.$refs['form'].validate(valid => {
         if (valid) {
-          alert('submit!')
+          modelUpload(this.baseApi + '/api/flowable/deploy', this.file, this.form.name).then(res => {
+            console.log(res)
+            if (res.data.code === 200) {
+              this.$message({
+                message: '部署成功！',
+                type: 'success',
+                duration: 2500
+              })
               this.uploadVisible = false
+              this.$emit('refresh')
+            }
+          })
         } else {
           console.log('error submit!!')
           return false
@@ -124,8 +109,21 @@ export default {
     display: flex;
     justify-content: space-between;
     .upload-btn{
-      margin-right: 0;
+      position: relative;
+      flex: 1;
       margin-left: 10px;
+      margin-right: 0;
+      .upload-input{
+        position: absolute;
+        left: 0;
+        top: 0;
+        opacity: 0;
+      }
+      .el-button{
+        background-color: #1F55EB;
+        color: #fff;
+        padding: 7px;
+      }
     }
   }
 }

src/views/system/processManage/runningProcess/index.vue

@@ -3,9 +3,9 @@
     <!--工具栏-->
     <div class="head-container">
       <div class="head-search">
-        <el-input v-model="query.name" clearable size="small" placeholder="输入发起人名" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
+        <el-input v-model="query.promoter" clearable size="small" placeholder="输入发起人名" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
         <el-select
-          v-model="query.value1"
+          v-model="query.modelKeys"
           multiple
           collapse-tags
           placeholder="请选择"
@@ -32,14 +32,24 @@
       @cell-dblclick="tableDoubleClick"
       @selection-change="crud.selectionChangeHandler"
     >
-      <el-table-column type="selection" align="center" width="55" />
-      <el-table-column label="流程名称" prop="name" />
-      <el-table-column label="实列ID" prop="instanceID" />
-      <el-table-column label="业务ID" prop="serviceID " />
-      <el-table-column label="发起人" prop="initiators" />
-      <el-table-column prop="createTime" label="启动时间">
+      <el-table-column label="发起时间" prop="startTime" align="center" width="160">
         <template slot-scope="scope">
-          <div>{{ scope.row.createTime | parseTime }}</div>
+          <div>{{ scope.row.startTime | parseTime }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column label="发起人" prop="promoter" align="center" width="140" />
+      <el-table-column label="流程名称" prop="flowableName" align="center" />
+      <el-table-column label="当前节点" prop="currentNode" align="center" />
+      <el-table-column label="下一节点" prop="nextNode" align="center" />
+      <el-table-column label="结束时间" prop="endTime" align="center" width="160">
+        <template slot-scope="scope">
+          <div v-if="scope.row.endTime">{{ scope.row.endTime | parseTime }}</div>
+          <div v-else>-</div>
+        </template>
+      </el-table-column>
+      <el-table-column label="流程状态" prop="status" align="center" width="140">
+        <template>
+          <div class="row-state active-state">进行中</div>
         </template>
       </el-table-column>
     </el-table>
@@ -50,6 +60,7 @@
 </template>
 
 <script>
+import { FetchGenProcessDiagram } from '@/api/system/flowable'
 import CRUD, { presenter, header, crud } from '@crud/crud'
 import rrOperation from '@crud/RR.operation'
 import DateRangePicker from '@/components/DateRangePicker'
@@ -60,7 +71,7 @@ export default {
   name: 'RunningProcess',
   components: { rrOperation, DateRangePicker, pagination, Detail },
   cruds() {
-    return CRUD({ title: '运行中流程', url: 'api/dept', crudMethod: {}})
+    return CRUD({ title: '运行中流程', url: 'api/flowable/getFlowList', crudMethod: {}})
   },
   mixins: [presenter(), header(), crud()],
   data() {
@@ -86,13 +97,46 @@ export default {
     }
   },
   methods: {
+    [CRUD.HOOK.beforeRefresh]() {
+      this.crud.query.isEnd = false
+    },
     // table - 双击查看详情
     tableDoubleClick(row) {
       this.$refs.processDetail.detailVisible = true
+      FetchGenProcessDiagram({ 'processId': row.procinstId }).then((res) => {
+        console.log(res)
+      }).catch(err => {
+        console.log(err)
+      })
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+@mixin table-fixed-status-style{
+  [data-theme="dark"] & {
+    &.active-state{
+      color: #0348F3;
+      border: 1px solid #0348F3 ;
+    }
+  }
+  [data-theme="light"] & {
+    &.active-state{
+      color: #0348F3;
+      background-color: #EEF5FE;
+      border: 1px solid #0348F3;
+    }
+  }
+}
+.row-state{
+  display: inline-block;
+  padding: 0 4px;
+  height: 20px;
+  line-height: 20px;
+  text-align: center;
+  font-size: 12px;
+  border-radius: 3px;
+  @include table-fixed-status-style;
+}
 </style>

src/views/system/processManage/runningProcess/module/detail.vue

@@ -27,12 +27,11 @@
       </el-collapse-transition>
       <div class="detail-tab tab-content">
         <ul class="tab-nav">
-          <li :class="{'active-tab-nav': activeIndex == 0 }" @click="changeActiveTab(0)">流程示意图</li>
-          <li :class="{'active-tab-nav': activeIndex == 1 }" @click="changeActiveTab(1)">业务详情</li>
-          <li :class="{'active-tab-nav': activeIndex == 2 }" @click="changeActiveTab(2)">任务列表</li>
-          <li :class="{'active-tab-nav': activeIndex == 3 }" @click="changeActiveTab(3)">审批列表</li>
+          <li :class="{'active-tab-nav': activeIndex == 0 }" @click="changeActiveTab(0)">档案列表</li>
+          <li :class="{'active-tab-nav': activeIndex == 1 }" @click="changeActiveTab(1)">任务列表</li>
+          <li :class="{'active-tab-nav': activeIndex == 2 }" @click="changeActiveTab(2)">流程图</li>
         </ul>
-        <div v-if="activeIndex == 1 || activeIndex == 2" class="double-click-btn"><i class="iconfont icon-zhuyi-lan" /><span>双击列表数据查看详情</span></div>
+        <div v-if="activeIndex == 0" class="double-click-btn"><i class="iconfont icon-zhuyi-lan" /><span>双击列表数据查看详情</span></div>
         <component :is="comName" class="component-cont" />
       </div>
       <div slot="footer" class="dialog-footer">
@@ -43,10 +42,10 @@
 </template>
 
 <script>
-import processImg from './processImg/index.vue'
-import businessDetails from './businessDetails/index.vue'
-import taskList from './taskList/index.vue'
-import approvalList from './approvalList/index.vue'
+import processImg from './processImg/index'
+import businessDetails from './businessDetails/index'
+import taskList from './taskList/index'
+import approvalList from './approvalList/index'
 export default {
   name: 'Detail',
   components: {
@@ -65,16 +64,14 @@ export default {
   computed: {
     comName: function() {
       if (this.activeIndex === 0) {
-        return 'processImg'
-      } else if (this.activeIndex === 1) {
         return 'businessDetails'
-      } else if (this.activeIndex === 2) {
+      } else if (this.activeIndex === 1) {
         return 'taskList'
-      } else if (this.activeIndex === 3) {
-        return 'approvalList'
-      }
+      } else if (this.activeIndex === 2) {
         return 'processImg'
       }
+      return 'businessDetails'
+    }
   },
   methods: {
     changeActiveTab(data) {

src/views/system/role/index.vue

@@ -49,7 +49,7 @@
             <!-- <el-table-column prop="dataScope" label="数据权限" /> -->
             <!-- <el-table-column prop="level" label="角色级别" /> -->
             <el-table-column :show-overflow-tooltip="true" prop="description" label="描述信息" />
-            <el-table-column prop="users" label="人数" algin="center">
+            <el-table-column prop="users" label="人数" align="center">
               <template slot-scope="scope">
                 <div>{{ scope.row.users.length }}</div>
               </template>