From 3f398494f7a399fdd9f9b9973e566069045e804b Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Fri, 5 May 2023 17:31:46 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B5=81=E7=A8=8B=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/icon/arrow.png              | Bin 0 -> 217 bytes
 src/assets/styles/archives-manage.scss        |  14 --
 src/assets/styles/mixin.scss                  |  12 ++
 src/assets/styles/yxk-admin.scss              |  23 +++
 src/views/system/processManage/index.vue      |   5 +-
 .../processManage/modelDesign/index.vue       |  11 +-
 .../processManage/processDeployment/index.vue | 190 ++++++++++++++----
 .../processDeployment/module/form.vue         | 139 +++++++++++++
 .../processManage/runningProcess/index.vue    |  93 ++++++++-
 .../module/approvalList/index.vue             |  52 +++++
 .../module/businessDetails/index.vue          |  52 +++++
 .../runningProcess/module/detail.vue          | 172 ++++++++++++++++
 .../module/processImg/index.vue               |  17 ++
 .../runningProcess/module/taskList/index.vue  |  52 +++++
 14 files changed, 778 insertions(+), 54 deletions(-)
 create mode 100644 src/assets/images/icon/arrow.png
 create mode 100644 src/views/system/processManage/processDeployment/module/form.vue
 create mode 100644 src/views/system/processManage/runningProcess/module/approvalList/index.vue
 create mode 100644 src/views/system/processManage/runningProcess/module/businessDetails/index.vue
 create mode 100644 src/views/system/processManage/runningProcess/module/detail.vue
 create mode 100644 src/views/system/processManage/runningProcess/module/processImg/index.vue
 create mode 100644 src/views/system/processManage/runningProcess/module/taskList/index.vue

diff --git a/src/assets/images/icon/arrow.png b/src/assets/images/icon/arrow.png
new file mode 100644
index 0000000000000000000000000000000000000000..b6fbf2bba475cf9aa38ad9684bcad72ea55d7873
GIT binary patch
literal 217
zcmeAS@N?(olHy`uVBq!ia0vp^oIuRV!3HF!2OrA@QjEnx?oJHr&dIz4awdDaIEF}s
zC#Mwr&N}m9{>0`)^Xq|ZIt^Ff&bCx;ex6>vtp30GpX7usi8oGGi@MIeoi3|(?0>tY
zW78SA_(%VZ|K$HX{^9tv#P$cw8=U&TbNTS-wEs8!vz}3#iBavl|5KhG9?Ac8f3~GQ
zNJ&Web-rrGL;1&Z>UUQ}KkPcdWou_{{O7;?!2<_=v^P#nJiA|Z&sK#(2BsQ)NAs7T
R_5+>A;OXk;vd$@?2>_B!TY&%o

literal 0
HcmV?d00001

diff --git a/src/assets/styles/archives-manage.scss b/src/assets/styles/archives-manage.scss
index 29c8bfe..4f740d7 100644
--- a/src/assets/styles/archives-manage.scss
+++ b/src/assets/styles/archives-manage.scss
@@ -687,20 +687,6 @@
   background-color: #011E4F !important;
 }
 
-.el-tag.el-tag--info {
-  margin: 0 0 0 8px;
-  height: 20px;
-  line-height: 20px;
-  font-size: 12px;
-  background-color: #E8F2FF;
-  border: none;
-  color: #0348F3;
-}
-
-.el-tag.el-tag--info .el-tag__close {
-  background-color: #0348F3;
-}
-
 //出入库
 .dpflex {
   display: flex;
diff --git a/src/assets/styles/mixin.scss b/src/assets/styles/mixin.scss
index 25b3bcd..184752e 100644
--- a/src/assets/styles/mixin.scss
+++ b/src/assets/styles/mixin.scss
@@ -868,6 +868,7 @@
     padding: 20px 0;
   }
 }
+
 @mixin elTag-style{
   [data-theme="dark"] & {
     border: 1px solid $mainColor;
@@ -880,6 +881,17 @@
   }
 }
 
+@mixin select-elTag-style{
+  [data-theme="dark"] & {
+    color: #fff;
+    background-color: #02255f;
+  }
+  [data-theme="light"] & {
+    color: #0348F3;
+    background-color: #EEF5FE;
+  }
+}
+
 @mixin prepend-input{
   [data-theme="dark"] & {
     border: 1px solid $mainColor;
diff --git a/src/assets/styles/yxk-admin.scss b/src/assets/styles/yxk-admin.scss
index 72ff41f..6c4915c 100644
--- a/src/assets/styles/yxk-admin.scss
+++ b/src/assets/styles/yxk-admin.scss
@@ -138,6 +138,15 @@
       }
     }
   }
+  .el-select{
+    margin-right: 10px;
+    .el-input__inner{
+      height: 30px !important;
+      line-height: 30px !important;
+      background-color: transparent;
+      @include pagination-input;
+    }
+  }
 }
 
 .el-tabs{
@@ -1503,6 +1512,20 @@ input[type ='number'] {
   color: #f65163;
 }
 
+
+.el-tag.el-tag--info {
+  margin: 0 0 0 8px;
+  height: 20px;
+  line-height: 20px;
+  font-size: 12px;
+  border: none;
+  @include select-elTag-style;
+}
+
+.el-tag.el-tag--info .el-tag__close {
+  @include select-elTag-style;
+}
+
 // table 选中状态
 .el-table__body .rowStyle>td {
   color: #fff !important;
diff --git a/src/views/system/processManage/index.vue b/src/views/system/processManage/index.vue
index 8e37042..c9efe16 100644
--- a/src/views/system/processManage/index.vue
+++ b/src/views/system/processManage/index.vue
@@ -59,7 +59,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.tab-content{
+[data-theme=dark] .tab-content{
+  height: calc(100vh - 200px) !important;
+}
+[data-theme=light] .tab-content{
   height: calc(100vh - 179px);
 }
 </style>
diff --git a/src/views/system/processManage/modelDesign/index.vue b/src/views/system/processManage/modelDesign/index.vue
index b64ba60..4f9f803 100644
--- a/src/views/system/processManage/modelDesign/index.vue
+++ b/src/views/system/processManage/modelDesign/index.vue
@@ -1,5 +1,14 @@
 <template>
-  <div>模型设计</div>
+  <div>模型设计
+    <!-- http://192.168.99.84:8080/flowable-ui/modeler/#/processes -->
+    <iframe
+      ref="iframe"
+      class="iframe_box"
+      src="http://192.168.99.84:8080/flowable-ui/modeler/#/processes"
+      frameborder="0"
+      scrolling="no"
+    />
+  </div>
 </template>
 
 <script>
diff --git a/src/views/system/processManage/processDeployment/index.vue b/src/views/system/processManage/processDeployment/index.vue
index 849d514..f9cbadb 100644
--- a/src/views/system/processManage/processDeployment/index.vue
+++ b/src/views/system/processManage/processDeployment/index.vue
@@ -2,43 +2,41 @@
   <div class="process-dep-container">
     <div class="head-container">
       <div class="head-left">
-        <el-button size="mini">
+        <el-button size="mini" @click="handleForm(0)">
           <i class="iconfont icon-xinzeng" />
           新增
         </el-button>
-        <el-button size="mini">
+        <el-button size="mini" :disabled="selectedItem.length === 0" @click="handleForm(1,selectedItem)">
           <i class="iconfont icon-bianji" />
           编辑
         </el-button>
-        <el-button size="mini">
+        <el-button size="mini" @click="exportVisible=true">
           <i class="iconfont icon-daochu" />
           导出
         </el-button>
       </div>
-      <div class="head-right">
-        <el-button size="mini">
-          <i class="iconfont icon-jihuo" />
-          激活
-        </el-button>
-        <el-button size="mini">
-          <i class="iconfont icon-guaqi" />
-          挂起
-        </el-button>
+      <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)">
+            <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)">
+            <i class="iconfont icon-guaqi" />
+            挂起
+          </el-button>
+        </div>
+        <el-select v-model="query.enabled" clearable size="small" placeholder="状态" class="filter-item" style="width: 100px">
+          <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>
       </div>
     </div>
     <div class="process-dep-main">
       <ul class="process-list">
-        <li>
-          <p>流程A</p>
-          <span class="process-on" />
-        </li>
-        <li>
-          <p>流程B</p>
-          <span class="process-on" />
-        </li>
-        <li>
-          <p>流程C</p>
-          <span class="process-off" />
+        <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>
       </ul>
       <div class="process-info">
@@ -57,19 +55,147 @@
         </div>
       </div>
     </div>
+    <eForm ref="mform" />
+    <!-- 导出dialog -->
+    <el-dialog class="tip-dialog" :visible.sync="exportVisible" :modal-append-to-body="false" :close-on-click-modal="false" 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" :modal-append-to-body="false" :close-on-click-modal="false" 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>
   </div>
 </template>
 
 <script>
+import eForm from './module/form.vue'
+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
+        }
+      ],
+      query: {
+        enabled: 'true'
+      },
+      isActive: -1,
+      selectedItem: [],
+      exportVisible: false,
+      activateVisible: false,
+      activateName: '',
+      enabledTypeOptions: [
+        { key: 'true', display_name: '启用' },
+        { key: 'false', display_name: '挂起' }
+      ]
+    }
+  },
+  methods: {
+    selectProcess(item, index) {
+      this.selectedItem = []
+      this.selectedItem.push(item)
+      this.isActive = index
+    },
+    handleForm(type) {
+      this.$refs.mform.uploadVisible = true
+      if (type === 0) {
+        this.$refs.mform.title = '新增流程'
+      } else {
+        this.$refs.mform.title = '编辑流程'
+      }
+    },
+    activateHandle(type) {
+      this.activateVisible = true
+      if (type === 1) {
+        this.activateName = '激活'
+      } else {
+        this.activateName = '挂起'
+      }
+    }
+  }
+}
 </script>
 
 <style lang='scss' scoped>
+[data-theme=dark] .process-dep-main{
+  background-color: transparent;
+  border-top: 1px solid #113d72;
+  .process-list{
+    box-shadow: 5px 2px 10px 1px rgba(15,164,222,.16);
+    li{
+      &.active-li,
+      &:hover{
+        background: linear-gradient(90deg, rgba(59, 160, 255, 0) 0%, rgba(42,112,177,0.3) 43%, rgba(51, 156, 255, 0) 100%);
+      }
+    }
+  }
+}
+[data-theme=light] .process-dep-main{
+  background-color: #F5F5F5;
+  border: 1px solid #E6E8ED;
+  .process-list{
+    background-color: #fff;
+    box-shadow: 4px 0px 4px 0px rgba(0,0,0,0.04);
+    li{
+      color: #0C0E1E;
+      &.active-li,
+      &:hover{
+        background-color: #E8F2FF;
+      }
+    }
+
+  }
+  .process-info-txt{
+    color: #0C0E1E;
+    span{
+      color: #545B65;
+    }
+  }
+}
+
+[data-theme=light] .head-container{
+  margin: 20px 0 !important;
+}
 .process-dep-container{
   min-height: calc(100vh - 300px);
 }
 .head-container{
   display: flex;
   justify-content: flex-start;
+
   .head-left{
     width: 342px;
   }
@@ -77,17 +203,17 @@
     flex: 1;
     margin-left: 30px;
   }
+  .filter-item{
+    margin-right: 0;
+  }
 }
 .process-dep-main{
   display: flex;
   justify-content: flex-start;
   height: calc(100vh - 283px);
-  background-color: #F5F5F5 ;
-  border: 1px solid #E6E8ED;
+
   .process-list{
     width: 342px;
-    background-color: #fff;
-    box-shadow: 4px 0px 4px 0px rgba(0,0,0,0.04);
     li{
       display: flex;
       justify-content: space-between;
@@ -96,7 +222,6 @@
       font-size: 14px;
       height: 40px;
       line-height: 40px;
-      color: #0C0E1E;
       cursor: pointer;
       p{
         flex: 1;
@@ -113,10 +238,6 @@
           background-color: #ED4A41;
         }
       }
-      &.active-li,
-      &:hover{
-        background-color: #E8F2FF;
-      }
 
     }
   }
@@ -128,7 +249,6 @@
       justify-content: space-between;
       font-size: 14px;
       line-height: 30px;
-      color: #0C0E1E;
       margin-bottom: 10px;
       .info-left{
         width: 50%;
@@ -137,9 +257,7 @@
         width: 50%;
         text-align: right;
       }
-      span{
-        color: #545B65;
-      }
+
     }
     .process-info-img{
       height: calc(100vh - 374px);
diff --git a/src/views/system/processManage/processDeployment/module/form.vue b/src/views/system/processManage/processDeployment/module/form.vue
new file mode 100644
index 0000000..682ecbe
--- /dev/null
+++ b/src/views/system/processManage/processDeployment/module/form.vue
@@ -0,0 +1,139 @@
+<template>
+  <el-dialog
+    class="dialog-middle"
+    append-to-body
+    :close-on-click-modal="false"
+    :before-close="handleClose"
+    :visible="uploadVisible"
+    :title="title"
+  >
+    <div class="setting-dialog">
+      <el-form ref="form" :model="form" inline :rules="rules" size="small" label-width="90px">
+        <el-row>
+          <el-form-item label="流程名称" prop="name">
+            <el-input v-model="form.name" />
+          </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>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="text" @click="uploadVisible = false">
+          取消
+        </el-button>
+        <el-button type="primary" @click="confirmHandle">
+          确定
+        </el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      title: '新增流程',
+      uploadVisible: false,
+      form: {
+        id: null,
+        name: '',
+        model: ''
+      },
+      qiniuData: {
+        key: '',
+        token: ''
+      },
+      // 七牛云的上传地址
+      upload_qiniu_url: 'https://upload.qiniup.com/',
+      // 这是七牛云空间的外链默认域名
+      upload_qiniu_addr: 'qiniu.aiyxlib.com',
+      rules: {
+        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+        model: [{ required: true, message: '请上传模型', trigger: 'blur' }]
+      }
+    }
+  },
+  methods: {
+    handleChange(file, fileList) {
+      this.fileList = fileList.slice(-3)
+    },
+    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!')
+          this.uploadVisible = false
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.upload-wm{
+  display: flex;
+  justify-content: flex-start;
+  ::v-deep .el-form-item__content{
+    display: flex;
+    justify-content: space-between;
+    .upload-btn{
+      margin-right: 0;
+      margin-left: 10px;
+    }
+  }
+
+  ::v-deep .el-upload {
+    .el-button{
+      color: #fff !important;
+      background-color: #1F55EB !important;
+      border: none !important;
+    }
+  }
+}
+</style>
diff --git a/src/views/system/processManage/runningProcess/index.vue b/src/views/system/processManage/runningProcess/index.vue
index 70ceeab..248ac1f 100644
--- a/src/views/system/processManage/runningProcess/index.vue
+++ b/src/views/system/processManage/runningProcess/index.vue
@@ -1,9 +1,98 @@
 <template>
-  <div>运行中流程</div>
+  <div>
+    <!--工具栏-->
+    <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-select
+          v-model="query.value1"
+          multiple
+          collapse-tags
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <date-range-picker v-model="query.createTime" class="date-item" />
+        <rrOperation />
+      </div>
+    </div>
+    <!--表格渲染-->
+    <el-table
+      ref="table"
+      v-loading="crud.loading"
+      :data="crud.data"
+      row-key="id"
+      @select="crud.selectChange"
+      @select-all="crud.selectAllChange"
+      @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="启动时间">
+        <template slot-scope="scope">
+          <div>{{ scope.row.createTime | parseTime }}</div>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!--分页组件-->
+    <pagination v-if="crud.data.length!==0" />
+    <Detail ref="processDetail" />
+  </div>
 </template>
 
 <script>
+import CRUD, { presenter, header, crud } from '@crud/crud'
+import rrOperation from '@crud/RR.operation'
+import DateRangePicker from '@/components/DateRangePicker'
+import pagination from '@crud/Pagination'
+import Detail from './module/detail'
+
+export default {
+  name: 'RunningProcess',
+  components: { rrOperation, DateRangePicker, pagination, Detail },
+  cruds() {
+    return CRUD({ title: '运行中流程', url: 'api/dept', crudMethod: {}})
+  },
+  mixins: [presenter(), header(), crud()],
+  data() {
+    return {
+      options: [{
+        value: '选项1',
+        label: '流程A'
+      }, {
+        value: '选项2',
+        label: '流程B'
+      }, {
+        value: '选项3',
+        label: '流程C'
+      }, {
+        value: '选项4',
+        label: '流程D'
+      }],
+      permission: {
+        add: ['admin', 'dept:add'],
+        edit: ['admin', 'dept:edit'],
+        del: ['admin', 'dept:del']
+      }
+    }
+  },
+  methods: {
+    // table - 双击查看详情
+    tableDoubleClick(row) {
+      this.$refs.processDetail.detailVisible = true
+    }
+  }
+}
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 </style>
diff --git a/src/views/system/processManage/runningProcess/module/approvalList/index.vue b/src/views/system/processManage/runningProcess/module/approvalList/index.vue
new file mode 100644
index 0000000..f77a826
--- /dev/null
+++ b/src/views/system/processManage/runningProcess/module/approvalList/index.vue
@@ -0,0 +1,52 @@
+<template>
+  <el-table
+    :data="tableData"
+    style="width: 100%"
+  >
+    <el-table-column
+      prop="date"
+      label="日期"
+      width="180"
+    />
+    <el-table-column
+      prop="name"
+      label="姓名"
+      width="180"
+    />
+    <el-table-column
+      prop="address"
+      label="地址"
+    />
+  </el-table>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      tableData: [{
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1517 弄'
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1519 弄'
+      }, {
+        date: '2016-05-03',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1516 弄'
+      }]
+    }
+  }
+}
+
+</script>
+
+<style lang='scss' scoped>
+</style>
diff --git a/src/views/system/processManage/runningProcess/module/businessDetails/index.vue b/src/views/system/processManage/runningProcess/module/businessDetails/index.vue
new file mode 100644
index 0000000..f77a826
--- /dev/null
+++ b/src/views/system/processManage/runningProcess/module/businessDetails/index.vue
@@ -0,0 +1,52 @@
+<template>
+  <el-table
+    :data="tableData"
+    style="width: 100%"
+  >
+    <el-table-column
+      prop="date"
+      label="日期"
+      width="180"
+    />
+    <el-table-column
+      prop="name"
+      label="姓名"
+      width="180"
+    />
+    <el-table-column
+      prop="address"
+      label="地址"
+    />
+  </el-table>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      tableData: [{
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1517 弄'
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1519 弄'
+      }, {
+        date: '2016-05-03',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1516 弄'
+      }]
+    }
+  }
+}
+
+</script>
+
+<style lang='scss' scoped>
+</style>
diff --git a/src/views/system/processManage/runningProcess/module/detail.vue b/src/views/system/processManage/runningProcess/module/detail.vue
new file mode 100644
index 0000000..1d71e4f
--- /dev/null
+++ b/src/views/system/processManage/runningProcess/module/detail.vue
@@ -0,0 +1,172 @@
+<template>
+  <el-dialog class="detail-dialog" :visible.sync="detailVisible" :modal-append-to-body="false" :close-on-click-modal="false" title="流程详情">
+    <div class="setting-dialog">
+      <div class="detail-info">
+        <p><span>流程名称：</span>01-归档审批流程</p>
+        <p><span>启动时间：</span>2016-09-21 08:50:08</p>
+        <p><span>实例ID：</span>9af7f46a-ea52- 4aa3-b8c3-9fd484c2af12</p>
+        <p><span>发起人：</span>admin</p>
+      </div>
+      <!--  -->
+      <div class="detail-arrow" @click="isExpend = !isExpend"><i :class="[ isExpend ? 'arrow-up':'']" /></div>
+      <el-collapse-transition>
+        <div v-show="isExpend" class="service-detail">
+          <h4>业务详情</h4>
+          <div class="detail-list">
+            <p><span>业务类型：</span>归档审批</p>
+            <p><span>原始位置：</span>全宗A-整理库-门类A</p>
+            <p><span>目标位置：</span>全宗A-整理库-门类A</p>
+            <p><span>赋权类型：</span>-</p>
+            <p><span>起始时间：</span>-</p>
+            <p><span>终止时间：</span>-</p>
+            <p><span>利用目的：</span>-</p>
+            <p><span>业务状态：</span>已完成</p>
+            <p><span>审批状态：</span>通过</p>
+          </div>
+        </div>
+      </el-collapse-transition>
+      <div class="detail-tab">
+        <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>
+        </ul>
+        <component :is="comName" class="component-cont" />
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="detailVisible=false">确定</el-button>
+      </div>
+    </div>
+  </el-dialog>
+</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'
+export default {
+  name: 'Detail',
+  components: {
+    processImg,
+    businessDetails,
+    taskList,
+    approvalList
+  },
+  data() {
+    return {
+      detailVisible: false,
+      isExpend: false,
+      activeIndex: 0
+    }
+  },
+  computed: {
+    comName: function() {
+      if (this.activeIndex === 0) {
+        return 'processImg'
+      } else if (this.activeIndex === 1) {
+        return 'businessDetails'
+      } else if (this.activeIndex === 2) {
+        return 'taskList'
+      } else if (this.activeIndex === 3) {
+        return 'approvalList'
+      }
+      return 'processImg'
+    }
+  },
+  methods: {
+    changeActiveTab(data) {
+      this.activeIndex = data
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.detail-dialog{
+  ::v-deep .el-dialog{
+    width: 860px;
+    .el-dialog__body{
+      padding: 0 0 30px 0;
+    }
+  }
+  .detail-info,
+  .detail-list{
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    padding-top: 10px;
+    font-size: 14px;
+    line-height: 30px;
+    color: #545B65;
+    p{
+      width: 50%;
+      span{
+        display: inline-block;
+        width: 75px;
+        text-align: right;
+        color: #0C0E1E;
+      }
+    }
+  }
+  .detail-arrow{
+    position: relative;
+    width: 64px;
+    height: 16px;
+    margin: 10px auto;
+    background-color:#E8F2FF;
+    border-radius: 3px;
+    cursor: pointer;
+    i{
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      display: block;
+      width: 9px;
+      height: 5px;
+      margin-top: -2px;
+      margin-left: -4px;
+      background: url('~@/assets/images/icon/arrow.png') no-repeat center center;
+      transition: all ease-in 0.5s;
+      &.arrow-up {
+        transform: rotate(180deg);
+      }
+    }
+
+  }
+  .service-detail{
+    padding: 8px 12px;
+    background-color: #F6F8FC;
+    font-size: 14px;
+    h4{
+      position: relative;
+      padding-left: 10px;
+      color: #0C0E1E;
+      &::before {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 50%;
+        width: 3px;
+        height: 14px;
+        background-color: #0348F3;
+        transform: translateY(-50%);
+      }
+    }
+    .detail-list{
+      p{
+        width: 33%;
+      }
+    }
+  }
+  .tab-nav{
+    margin: 25px 0 18px 0;
+  }
+  .component-cont{
+    max-height: 344px;
+    overflow: hidden;
+    overflow-y: scroll;
+  }
+}
+</style>
diff --git a/src/views/system/processManage/runningProcess/module/processImg/index.vue b/src/views/system/processManage/runningProcess/module/processImg/index.vue
new file mode 100644
index 0000000..b3f398a
--- /dev/null
+++ b/src/views/system/processManage/runningProcess/module/processImg/index.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="tab-img">
+    <img src="~@/assets/images/system/process-img.png" alt="">
+  </div>
+</template>
+
+<script>
+</script>
+
+<style lang='scss' scoped>
+.tab-img{
+  img{
+    display: block;
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/system/processManage/runningProcess/module/taskList/index.vue b/src/views/system/processManage/runningProcess/module/taskList/index.vue
new file mode 100644
index 0000000..f77a826
--- /dev/null
+++ b/src/views/system/processManage/runningProcess/module/taskList/index.vue
@@ -0,0 +1,52 @@
+<template>
+  <el-table
+    :data="tableData"
+    style="width: 100%"
+  >
+    <el-table-column
+      prop="date"
+      label="日期"
+      width="180"
+    />
+    <el-table-column
+      prop="name"
+      label="姓名"
+      width="180"
+    />
+    <el-table-column
+      prop="address"
+      label="地址"
+    />
+  </el-table>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      tableData: [{
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1517 弄'
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1519 弄'
+      }, {
+        date: '2016-05-03',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1516 弄'
+      }]
+    }
+  }
+}
+
+</script>
+
+<style lang='scss' scoped>
+</style>