diff --git a/src/api/collect/collect.js b/src/api/collect/collect.js
index 162fb2b..7068abb 100644
--- a/src/api/collect/collect.js
+++ b/src/api/collect/collect.js
@@ -232,7 +232,7 @@ export function FetchFourCheck(data) {
   })
 }
 
-// 归档
+// 归档确定
 export function FetchBecomeDocumentConfirm(data) {
   return request({
     url: 'api/collect/becomeDocumentConfirm',
diff --git a/src/views/archiveUtilize/utillizeRecord/recordList.vue b/src/views/archiveUtilize/utillizeRecord/recordList.vue
index 74e3393..8600b82 100644
--- a/src/views/archiveUtilize/utillizeRecord/recordList.vue
+++ b/src/views/archiveUtilize/utillizeRecord/recordList.vue
@@ -1,8 +1,9 @@
 <template>
-  <div class="recordList-main">
+  <div :class="{'recordList-main': !isUserCenter, 'user-record': isUserCenter}">
     <div class="head-container">
       <div class="head-search">
         <el-input
+          v-if="!isUserCenter"
           v-model="typeValue"
           size="small"
           clearable
@@ -23,6 +24,13 @@
           </el-select>
         </el-input>
         <date-range-picker v-model="blurryTime" class="date-item" />
+        <el-select v-if="isUserCenter" v-model="status" clearable size="small" placeholder="状态" class="filter-item" style="width: 100px" @change="crud.toQuery">
+          <i slot="prefix" class="iconfont icon-zhuangtai" />
+          <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+        <el-select v-if="isUserCenter" v-model="isEntity" clearable size="small" class="filter-item" style="width: 100px" @change="crud.toQuery">
+          <el-option v-for="item in isEntityOptions" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
         <el-button class="filter-item filter-search" size="mini" type="success" icon="el-icon-search" @click="crud.toQuery">搜索</el-button>
         <el-button class="filter-item  filter-refresh" size="mini" type="warning" icon="el-icon-refresh-left" @click="resetQuery()">重置</el-button>
       </div>
@@ -46,7 +54,7 @@
           <div>{{ scope.row.giveEndTime | parseTime }}</div>
         </template>
       </el-table-column>
-      <el-table-column prop="nickName" label="利用人" align="center" width="120" />
+      <el-table-column v-if="!isUserCenter" prop="nickName" label="利用人" align="center" width="120" />
       <el-table-column prop="borrowReason" label="利用事由" />
       <el-table-column prop="isEntityBorrow" label="包含实体借阅" align="center" width="110">
         <template slot-scope="scope">
@@ -164,6 +172,10 @@ export default {
     activeIndex: {
       type: Number,
       default: 0
+    },
+    isUserCenter: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -195,6 +207,19 @@ export default {
           value: 4,
           label: '实体借阅'
         }
+      ],
+      statusOptions: [
+        { value: 1, label: '利用中' },
+        { value: 2, label: '即将到期' },
+        { value: 3, label: '逾期' },
+        { value: 4, label: '已完成' }
+      ],
+      status: null,
+      isEntity: 1,
+      isEntityOptions: [
+        { value: 1, label: '全部' },
+        { value: 2, label: '包含实体' },
+        { value: 3, label: '不包含实体' }
       ]
     }
   },
@@ -259,6 +284,8 @@ export default {
         this.crud.query.startTime = null
         this.crud.query.endTime = null
       }
+      this.crud.query.status = this.status
+      this.crud.query.isEntity = this.isEntity
     },
     resetQuery() {
       this.clearInputValue()
@@ -266,6 +293,10 @@ export default {
       this.blurryTime = []
       this.crud.query.startTime = null
       this.crud.query.endTime = null
+      this.status = null
+      this.isEntity = 1
+      // this.crud.query.status = null
+      // this.crud.query.isEntity = 1
       this.crud.toQuery()
     },
     getBusinessFlowDetails(row) {
@@ -338,6 +369,10 @@ export default {
     text-align: center;
   }
 }
+.user-record{
+  padding: 0 0 0 20px;
+  height: calc(100vh - 320px);
+}
 .title-style{
   span{
     display: inline-block;
diff --git a/src/views/system/archivesCategory/processManage/index.vue b/src/views/system/archivesCategory/processManage/index.vue
index 860e197..13d8d47 100644
--- a/src/views/system/archivesCategory/processManage/index.vue
+++ b/src/views/system/archivesCategory/processManage/index.vue
@@ -5,7 +5,6 @@
       <p>{{ item.flowName }}<i class="iconfont icon-shezhi" @click="toProcessSelected(item)" /></p>
       <el-switch v-model="item.status" class="isEnable-chapter" @change="changeCategoryState(item)" />
     </div>
-
     <eForm ref="cuform" :selected-category="selectedCategory" :edit-info-flow="editInfoFlow" @refresh="getInitCategoryFlowBase" />
   </div>
 </template>
@@ -60,7 +59,8 @@ export default {
       })
     },
     getInitFlowByCategoryId() {
-      FetchInitFlowByCategoryId({ 'categoryId': this.selectedCategory.id }).then((res) => {
+      console.log(this.selectedCategory)
+      FetchInitFlowByCategoryId({ 'categoryId': this.selectedCategory.pid !== '0' ? this.selectedCategory.id : null }).then((res) => {
         this.flowSetting = res
         this.flowBaseList.forEach(item => {
           this.flowSetting.forEach(v => {
@@ -76,7 +76,7 @@ export default {
     },
     toProcessSelected(item) {
       const params = {
-        'categoryId': this.selectedCategory.id,
+        'categoryId': this.selectedCategory.pid !== '0' ? this.selectedCategory.id : null,
         'manageId': item.id
       }
       FetchgetCategoryFlow(params).then((res) => {
diff --git a/src/views/system/archivesCategory/processManage/module/form.vue b/src/views/system/archivesCategory/processManage/module/form.vue
index 76cea88..6cb1865 100644
--- a/src/views/system/archivesCategory/processManage/module/form.vue
+++ b/src/views/system/archivesCategory/processManage/module/form.vue
@@ -206,7 +206,7 @@ export default {
             return json
           })
           const params = {
-            'categoryId': this.selectedCategory.id,
+            'categoryId': this.selectedCategory.pid !== '0' ? this.selectedCategory.id : null,
             'detailsDTOs': detailsDTOs,
             'flowId': this.selectFlowVal.modelId,
             'flowName': this.selectFlowVal.deployName,
diff --git a/src/views/system/processManage/runningProcess/module/detail.vue b/src/views/system/processManage/runningProcess/module/detail.vue
index f0fcbc9..9feac60 100644
--- a/src/views/system/processManage/runningProcess/module/detail.vue
+++ b/src/views/system/processManage/runningProcess/module/detail.vue
@@ -2,10 +2,18 @@
   <el-dialog class="detail-dialog" :visible.sync="detailVisible" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body title="流程详情">
     <div class="setting-dialog">
       <ul class="detail-info">
-        <li><span>流程名称：</span>{{ selectRow.flowableName }}</li>
-        <li><span>流程结果：</span><p :class="['row-state', !isHistroy?'ing-state':(selectRow.endTime?'end-state':'cancel-state')]">{{ !isHistroy ? '进行中' : ( selectRow.endTime ? '已完成' : '已取消') }}</p></li>
-        <li><span>所属全宗：</span>全宗A</li>
-        <li v-if="selectRow.endTime"><span>结束时间：</span>{{ selectRow.endTime | parseTime }}</li>
+        <li><span>流程名称：</span>{{ selectRow.flowableName || selectRow.title }}</li>
+        <li v-if="!isCenterProcess"><span>流程结果：</span><p :class="['row-state', !isHistroy?'ing-state':(selectRow.endTime?'end-state':'cancel-state')]">{{ !isHistroy ? '进行中' : ( selectRow.endTime ? '已完成' : '已取消') }}</p></li>
+        <li v-if="isCenterProcess">
+          <span>流程结果：</span>
+          <p v-if="selectRow.status === 1" class="row-state ing-state">运行中</p>
+          <p v-if="selectRow.status === 2" class="row-state case-cancel">已取消</p>
+          <p v-if="selectRow.status === 3" class="row-state end-state">已完成</p>
+          <p v-if="selectRow.status === 4" class="row-state cancel-state">不通过</p>
+        </li>
+        <!-- 等门类树更改之后再显示 -->
+        <!-- <li><span>所属全宗：</span>全宗A</li> -->
+        <li v-if="selectRow.endTime || selectRow.complete_time"><span>结束时间：</span>{{ (selectRow.endTime || selectRow.complete_time) | parseTime }}</li>
         <li v-else><span>结束时间：</span>-</li>
       </ul>
       <!-- 归档 / 退档 -->
@@ -78,6 +86,10 @@ export default {
     isHistroy: {
       type: Boolean,
       default: false
+    },
+    isCenterProcess: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -113,7 +125,7 @@ export default {
     },
     getProcessImg() {
       this.srcImg = ''
-      FetchGenProcessDiagram({ 'processId': this.selectRow.procinstId }).then((res) => {
+      FetchGenProcessDiagram({ 'processId': this.selectRow.procInstId }).then((res) => {
         this.srcImg = res
       }).catch(err => {
         console.log(err)
@@ -121,7 +133,7 @@ export default {
     },
     getTaskByProcinstId() {
       this.taskTableList = []
-      FetchTaskByProcinstId({ 'procinstId': this.selectRow.procinstId }).then((res) => {
+      FetchTaskByProcinstId({ 'procinstId': this.selectRow.procInstId }).then((res) => {
         this.taskTableList = res
       }).catch(err => {
         console.log(err)
diff --git a/src/views/system/user/center.vue b/src/views/system/user/center.vue
index b3ec03f..e217a25 100644
--- a/src/views/system/user/center.vue
+++ b/src/views/system/user/center.vue
@@ -40,7 +40,8 @@
             <li :class="{'active-tab-nav': activeIndex == 0}" @click="handleClick(0)">用户资料<i /></li>
             <li :class="{'active-tab-nav': activeIndex == 1}" @click="handleClick(1)">消息中心<i /></li>
             <li :class="{'active-tab-nav': activeIndex == 2}" @click="handleClick(2)">流程中心<i /></li>
-            <li :class="{'active-tab-nav': activeIndex == 3}" @click="handleClick(3)">操作日志<i /></li>
+            <li :class="{'active-tab-nav': activeIndex == 3}" @click="handleClick(3)">我的利用<i /></li>
+            <li :class="{'active-tab-nav': activeIndex == 4}" @click="handleClick(4)">操作日志<i /></li>
             <!-- 最右侧装饰img -->
             <span class="tab-right-img" />
           </ul>
@@ -74,8 +75,10 @@
           </div>
           <!-- 流程中心 -->
           <processCenter v-if="activeIndex == 2" />
+          <!-- 利用中心 -->
+          <utillizeList v-if="activeIndex == 3" :is-user-center="true" />
           <!-- 操作日志 -->
-          <div v-if="activeIndex == 3" class="tab-item" style="padding-left: 20px;">
+          <div v-if="activeIndex == 4" class="tab-item" style="padding-left: 20px;">
             <OperateLog :is-center="isCenter" />
           </div>
         </div>
@@ -97,12 +100,13 @@ import { isvalidPhone } from '@/utils/validate'
 // import crud from '@/mixins/crud'
 import { editUser } from '@/api/system/user'
 import Avatar from '@/assets/images/avatar.png'
-import messageCenter from './messageCenter/index.vue'
-import processCenter from './processCenter/index.vue'
+import messageCenter from './messageCenter/index'
+import processCenter from './processCenter/index'
+import utillizeList from '@/views/archiveUtilize/utillizeRecord/recordList'
 import OperateLog from '@/views/system/log/operateLog/index'
 export default {
   name: 'Center',
-  components: { updatePass, updateEmail, myUpload, messageCenter, processCenter, OperateLog },
+  components: { updatePass, updateEmail, myUpload, messageCenter, processCenter, utillizeList, OperateLog },
   // mixins: [crud],
   data() {
     // 自定义验证
@@ -171,14 +175,14 @@ export default {
     },
     handleClick(index) {
       this.activeIndex = index
-      if (this.activeIndex === 2) {
-        this.init()
-      }
+      // if (this.activeIndex === 2) {
+      //   this.init()
+      // }
+    },
+    beforeInit() {
+      this.url = 'api/logs/user'
+      return true
     },
-    // beforeInit() {
-    //   this.url = 'api/logs/user'
-    //   return true
-    // },
     cropUploadSuccess(jsonData, field) {
       store.dispatch('GetInfo').then(() => {})
     },
diff --git a/src/views/system/user/messageCenter/module/list.vue b/src/views/system/user/messageCenter/module/list.vue
index b7cb605..3a75b4f 100644
--- a/src/views/system/user/messageCenter/module/list.vue
+++ b/src/views/system/user/messageCenter/module/list.vue
@@ -37,7 +37,7 @@
 </template>
 
 <script>
-import detail from '../../processCenter/module/detail.vue'
+import detail from '../../processCenter/module/form'
 export default {
   name: 'MessageList',
   components: { detail },
diff --git a/src/views/system/user/processCenter/index.vue b/src/views/system/user/processCenter/index.vue
index a56e726..7187eec 100644
--- a/src/views/system/user/processCenter/index.vue
+++ b/src/views/system/user/processCenter/index.vue
@@ -7,80 +7,94 @@
       <li :class="{'active-li': listIndex == 3}" @click="handleClick(3)">赋权审批流程</li>
       <li :class="{'active-li': listIndex == 4}" @click="handleClick(4)">内部移交流程</li>
       <li :class="{'active-li': listIndex == 5}" @click="handleClick(5)">外部移交流程</li>
-      <li :class="{'active-li': listIndex == 6}" @click="handleClick(6)">外部接受流程</li>
-      <li :class="{'active-li': listIndex == 7}" @click="handleClick(7)">开放鉴定流程</li>
-      <li :class="{'active-li': listIndex == 8}" @click="handleClick(8)">销毁鉴定流程</li>
+      <li :class="{'active-li': listIndex == 6}" @click="handleClick(6)">开放鉴定流程</li>
+      <li :class="{'active-li': listIndex == 7}" @click="handleClick(7)">销毁鉴定流程</li>
     </ul>
     <div class="process-right">
       <div class="head-container" style="display: flex; justify-content: space-between;">
         <div>
-          <el-input v-model="title" clearable size="small" placeholder="输入关键字搜索" prefix-icon="el-icon-search" class="filter-item" style="width: 225px;" @keyup.enter.native="crud.toQuery" />
+          <el-input v-model="title" clearable size="small" placeholder="输入关键字搜索" prefix-icon="el-icon-search" class="filter-item" style="width: 225px;" @clear="crud.toQuery" @keyup.enter.native="crud.toQuery" />
           <date-range-picker v-model="blurryTime" class="date-item" />
           <el-button icon="el-icon-search" size="mini" class="user-search-btn" @click="crud.toQuery">搜索</el-button>
         </div>
-        <el-select v-model="status" placeholder="请选择" style="width: 97px;" @change="crud.toQuery">
-          <el-option
-            v-for="item in options"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
+
+        <div>
+          <el-select v-model="type" placeholder="请选择" style="width: 97px;" @change="crud.toQuery">
+            <el-option
+              v-for="item in dealOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+          <el-select v-model="status" placeholder="请选择" style="width: 97px;" @change="crud.toQuery">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </div>
       </div>
       <el-table
         ref="table"
         v-loading="crud.loading"
         :data="crud.data"
-        :row-class-name="cell"
         height="500px"
         @row-click="clickRowHandler"
+        @cell-dblclick="tableDoubleClick"
         @selection-change="selectionChangeHandler"
       >
-        <el-table-column type="isHandle" label="处理" width="100" align="center">
-          <!--  slot-scope="scope" -->
-          <template>
-            <span class="deal-state" @click="dealWithCont">处理</span>
-            <!-- <span class="deal-off">处理</span> -->
+        <el-table-column type="isHandle" label="处理" width="70" align="center">
+          <template slot-scope="scope">
+            <span v-if="type===1 && scope.row.status === 1" class="deal-state" @click="dealWithCont(scope.row)">处理</span>
+            <span v-else class="deal-off">处理</span>
           </template>
         </el-table-column>
-        <el-table-column prop="create_time" label="创建时间" align="center" min-width="180">
+        <el-table-column prop="createTime" label="创建时间" align="center" min-width="160">
           <template slot-scope="scope">
-            <div>{{ scope.row.create_time | parseTime }}</div>
+            <div>{{ scope.row.createTime | parseTime }}</div>
           </template>
         </el-table-column>
-        <el-table-column prop="pushUserName" label="创建人" align="center" min-width="100" />
-        <el-table-column prop="noticeContent" :show-overflow-tooltip="true" label="所属流程" min-width="200" />
-        <el-table-column prop="nodes" label="当前节点" align="center" min-width="150" />
-        <el-table-column prop="operable" label="可操作者" align="center" min-width="150" />
-        <el-table-column prop="approver" label="审批者" align="center" min-width="150" />
-        <el-table-column prop="states" label="状态" align="center" min-width="150" />
-        <el-table-column prop="end_time" label="完成时间" align="center" min-width="180">
+        <el-table-column prop="createBy" label="创建人" align="center" min-width="80" />
+        <el-table-column prop="title" :show-overflow-tooltip="true" label="所属流程" min-width="200" />
+        <el-table-column prop="currentNode" :show-overflow-tooltip="true" label="当前节点" align="center" min-width="120" />
+        <el-table-column prop="operator" :show-overflow-tooltip="true" label="可操作者" align="center" min-width="180" />
+        <!-- <el-table-column prop="approver" label="审批者" align="center" min-width="150" /> -->
+        <!-- 1.运行中 2.取消 3.完成 4.审核不通过 -->
+        <el-table-column prop="status" label="状态" align="center" min-width="80">
           <template slot-scope="scope">
-            <div>{{ scope.row.end_time | parseTime }}</div>
+            <div v-if="scope.row.status === 1" class="row-state ing-state">运行中</div>
+            <div v-if="scope.row.status === 2" class="row-state case-cancel">已取消</div>
+            <div v-if="scope.row.status === 3" class="row-state end-state">已完成</div>
+            <div v-if="scope.row.status === 4" class="row-state cancel-state">不通过</div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="complete_time" label="完成时间" align="center" min-width="160">
+          <template slot-scope="scope">
+            <div v-if="scope.row.complete_time">{{ scope.row.complete_time | parseTime }}</div>
+            <div v-else>-</div>
           </template>
         </el-table-column>
       </el-table>
-      <el-pagination
-        :page-size.sync="page.size"
-        :total="page.total"
-        :current-page.sync="page.page"
-        style="margin-top: 8px;"
-        layout="total, prev, pager, next, sizes"
-        @size-change="sizeChangeHandler($event)"
-        @current-change="pageChangeHandler"
-      />
+      <pagination />
     </div>
-    <detail ref="detail" />
+    <eForm ref="eForm" />
+    <detial ref="processDetail" :is-center-process="true" />
   </div>
 </template>
 
 <script>
+
 import DateRangePicker from '@/components/DateRangePicker'
 import CRUD, { presenter, header, crud } from '@crud/crud'
-import detail from './module/detail.vue'
+import pagination from '@crud/Pagination'
+import eForm from './module/form.vue'
+import detial from '@/views/system/processManage/runningProcess/module/detail'
 export default {
   name: 'ProcessCenter',
-  components: { DateRangePicker, detail },
+  components: { DateRangePicker, pagination, eForm, detial },
   mixins: [presenter(), crud(), header()],
   cruds() {
     return CRUD({
@@ -91,36 +105,44 @@ export default {
   },
   data() {
     return {
-      tableData: [],
       selections: [],
       blurryTime: null,
       title: null,
-      page: {
-        total: 0,
-        size: 10,
-        page: 1
-      },
-      isLoading: false,
+      dealOptions: [{
+        value: 1,
+        label: '我收到'
+      }, {
+        value: 2,
+        label: '我发起'
+      }],
       options: [{
-        value: '选项1',
+        value: 1,
         label: '待处理'
       }, {
-        value: '选项2',
-        label: '已处理'
+        value: 2,
+        label: '已取消'
+      }, {
+        value: 3,
+        label: '已完成'
       }, {
-        value: '选项3',
+        value: 4,
+        label: '未通过'
+      }, {
+        value: null,
         label: '全部'
       }],
-      status: '',
-      listIndex: 0
+      type: 1,
+      status: null,
+      listIndex: 0,
+      businessType: null
     }
   },
   created() {
-    this.getTableData()
   },
   methods: {
     [CRUD.HOOK.beforeRefresh]() {
       this.crud.query.title = this.title
+      this.crud.query.type = this.type
       this.crud.query.status = this.status
       if (this.blurryTime) {
         this.crud.query.startTime = this.blurryTime[0]
@@ -132,32 +154,45 @@ export default {
     },
     handleClick(index) {
       this.listIndex = index
-    },
-    dealWithCont() {
-      this.$refs.detail.detailVisible = true
-    },
-    getTableData() {
-      this.isLoading = true
+      // 1.归档 index=1  2.退回 index=2  3.开放 index=6  4.销毁index=7   5.利用index=3   6.内部移交index=4  7.外部移交index=5
+      switch (index) {
+        case 0:
+          this.businessType = null
+          break
+        case 1:
+          this.businessType = 1
+          break
+        case 2:
+          this.businessType = 2
+          break
+        case 3:
+          this.businessType = 5
+          break
+        case 4:
+          this.businessType = 6
+          break
+        case 5:
+          this.businessType = 7
+          break
+        case 6:
+          this.businessType = 3
+          break
+        case 7:
+          this.businessType = 4
+          break
+      }
+      this.crud.query.businessType = this.businessType
       this.crud.toQuery()
-      // getUserNotice(this.getParams()).then(res => {
-      //   this.page.total = res.totalElements
-      //   const table = res.content
-      //   table.forEach(item => {
-      //     item.pushUserName = item.noticeUsers[0].pushUserName
-      //     item.isRead = item.noticeUsers[0].isRead
-      //   })
-      //   this.tableData = table
-      //   this.isLoading = false
-      // })
     },
-    getParams() {
-      const params = {
-        page: this.page.page - 1,
-        size: this.page.size,
-        createTime: this.query.createTime,
-        sort: 'createTime,desc'
-      }
-      return params
+    dealWithCont(row) {
+      this.$refs.eForm.formVisible = true
+      this.$refs.eForm.selectRow = row
+    },
+    // table - 双击查看详情
+    tableDoubleClick(row) {
+      this.$refs.processDetail.detailVisible = true
+      this.$refs.processDetail.selectRow = row
+      this.$refs.processDetail.activeIndex = 0
     },
     clickRowHandler(row) {
       // this.$refs.table.clearSelection()
@@ -165,26 +200,6 @@ export default {
     },
     selectionChangeHandler(val) {
       this.selections = val
-    },
-    cell({ row }) {
-      if (row.isRead) { // 已读
-        return 'read-color'
-      }
-    },
-    // 每页条数改变
-    sizeChangeHandler(e) {
-      this.loading = true
-      this.page.size = e
-      this.page.page = 1
-      this.getTableData()
-      this.loading = false
-    },
-    // 当前页改变
-    pageChangeHandler(e) {
-      this.loading = true
-      this.page.page = e
-      this.getTableData()
-      this.loading = false
     }
   }
 }
@@ -199,6 +214,7 @@ export default {
   border-radius: 3px;
 }
 .deal-state{
+  margin: 0 auto;
   color: #0348F3;
   border: 1px solid #0348F3;
   cursor: pointer;
@@ -207,6 +223,7 @@ export default {
   opacity: 0.4;
   color: #0348F3;
   border: 1px solid #0348F3;
+  cursor: not-allowed;
 }
 .el-pagination{
   margin: 20px 0 10px 0 !important
diff --git a/src/views/system/user/processCenter/module/detail.vue b/src/views/system/user/processCenter/module/detail.vue
deleted file mode 100644
index be615c0..0000000
--- a/src/views/system/user/processCenter/module/detail.vue
+++ /dev/null
@@ -1,137 +0,0 @@
-<template>
-  <el-dialog class="detail-dialog" :visible.sync="detailVisible" :modal-append-to-body="false" :close-on-click-modal="false" append-to-body title="流程处理">
-    <div class="setting-dialog">
-      <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>
-        </ul>
-      </div>
-      <div v-if="activeIndex == 0">
-        <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="opinion">
-          <h5>归档审批</h5>
-          <div class="opinion-form">
-            <span>审批意见</span>
-            <el-input v-model="opinionTxt" placeholder="请输入" type="textarea" :rows="10" />
-          </div>
-        </div>
-      </div>
-      <div v-if="activeIndex == 1" class="detail-img">
-        <img src="~@/assets/images/system/process-img.png" alt="">
-      </div>
-      <div v-if="activeIndex == 2">
-        <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>
-        </div>
-        <businessDetails />
-      </div>
-      <div slot="footer" class="dialog-footer">
-        <el-button>驳回</el-button>
-        <el-button type="primary" @click="detailVisible=false">审批</el-button>
-      </div>
-    </div>
-  </el-dialog>
-</template>
-
-<script>
-import businessDetails from '@/views/system/processManage/runningProcess/module/businessDetails/index.vue'
-export default {
-  name: 'Detail',
-  components: {
-    businessDetails
-  },
-  data() {
-    return {
-      detailVisible: false,
-      activeIndex: 0,
-      opinionTxt: null
-    }
-  },
-  computed: {
-  },
-  methods: {
-    changeActiveTab(data) {
-      this.activeIndex = data
-    }
-  }
-}
-</script>
-
-<style lang='scss' scoped>
-.detail-dialog{
-  .detail-info,
-  .detail-list{
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    padding: 10px 18px;
-    font-size: 14px;
-    line-height: 30px;
-    color: #545B65;
-    background-color: #F6F8FC;
-    p{
-      width: 50%;
-      span{
-        display: inline-block;
-        width: 75px;
-        text-align: right;
-        color: #0C0E1E;
-      }
-    }
-  }
-  .opinion{
-    margin-top: 28px;
-    h5{
-      margin-bottom: 18px;
-      font-size: 16px;
-      color: #0C0E1E;
-      text-align: center;
-    }
-    .opinion-form{
-      display: flex;
-      justify-content: space-between;
-      span{
-        display: block;
-        width: 83px;
-        margin-right: 12px;
-        line-height: 30px;
-        text-align: right;
-        color: #545B65;
-      }
-      ::v-deep .el-textarea__inner{
-        border-color: #E6E8ED;
-      }
-    }
-  }
-  .detail-img{
-    width: 818px;
-    height: 404px;
-    overflow: hidden;
-    overflow-y: scroll;
-    img{
-      display: block;
-      width: 100%;
-    }
-  }
-  .detail-list{
-    margin-bottom: 16px;
-    p{
-      width: 33%;
-    }
-  }
-}
-</style>
diff --git a/src/views/system/user/processCenter/module/form.vue b/src/views/system/user/processCenter/module/form.vue
new file mode 100644
index 0000000..8e4c275
--- /dev/null
+++ b/src/views/system/user/processCenter/module/form.vue
@@ -0,0 +1,179 @@
+<template>
+  <el-dialog class="detail-dialog" :visible.sync="formVisible" :modal-append-to-body="false" :close-on-click-modal="false" append-to-body title="流程处理">
+    <div class="setting-dialog">
+      <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> -->
+        </ul>
+      </div>
+      <div v-if="activeIndex == 0">
+        <div class="detail-info">
+          <p><span>流程名称：</span>{{ selectRow && selectRow.title }}</p>
+          <p><span>启动时间：</span>{{ selectRow && selectRow.createTime | parseTime }}</p>
+          <p><span>实例ID：</span>{{ selectRow && selectRow.procInstId }}</p>
+          <p><span>发起人：</span>{{ selectRow && selectRow.createBy }}</p>
+        </div>
+        <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>
+        </div>
+        <div class="opinion">
+          <!-- <h5>归档审批</h5> -->
+          <div class="opinion-form">
+            <!-- <span>审批意见</span>
+            <el-input v-model="opinionTxt" placeholder="请输入" type="textarea" :rows="2" /> -->
+            <el-form ref="form" :model="form" inline label-width="100px">
+              <el-form-item label="审批意见" prop="opinion" :rules="[{ required: true, message: '请输入审批意见', trigger: 'blur' }]">
+                <el-input v-model="form.opinion" type="textarea" :rows="3" style="width: 700px;" />
+              </el-form-item>
+            </el-form>
+          </div>
+        </div>
+        <businessDetails />
+      </div>
+      <div v-if="activeIndex == 1" class="detail-img">
+        <img src="~@/assets/images/system/process-img.png" alt="">
+      </div>
+      <!-- <div v-if="activeIndex == 2">
+        <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>
+        </div>
+        <businessDetails />
+      </div> -->
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="submitOpinion(false)">驳回</el-button>
+        <el-button type="primary" @click="submitOpinion(true)">审批</el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { FetchBecomeDocumentConfirm } from '@/api/collect/collect'
+import businessDetails from '@/views/system/processManage/runningProcess/module/businessDetails/index.vue'
+export default {
+  name: 'Form',
+  components: {
+    businessDetails
+  },
+  data() {
+    return {
+      formVisible: false,
+      activeIndex: 0,
+      form: {
+        opinion: null
+      },
+      selectRow: null
+    }
+  },
+  computed: {
+  },
+  methods: {
+    changeActiveTab(data) {
+      this.activeIndex = data
+    },
+    submitOpinion(type) {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          const params = {
+            'id': this.selectRow.id,
+            'isPass': type,
+            'opinion': this.form.opinion
+          }
+          console.log(params)
+          if (this.selectRow.businessType === 1) {
+            FetchBecomeDocumentConfirm(params).then((res) => {
+              console.log(res)
+            }).catch(err => {
+              console.log(err)
+            })
+          }
+        } else {
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.detail-dialog{
+  .detail-info,
+  .detail-list{
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    padding: 4px 18px;
+    font-size: 14px;
+    line-height: 30px;
+    color: #545B65;
+    background-color: #F6F8FC;
+    p{
+      width: 50%;
+      span{
+        display: inline-block;
+        width: 75px;
+        text-align: right;
+        color: #0C0E1E;
+      }
+    }
+  }
+  .opinion{
+    margin: 10px 0;
+    h5{
+      margin-bottom: 18px;
+      font-size: 16px;
+      color: #0C0E1E;
+      text-align: center;
+    }
+    .opinion-form{
+      display: flex;
+      justify-content: space-between;
+      span{
+        display: block;
+        width: 83px;
+        margin-right: 12px;
+        line-height: 30px;
+        text-align: right;
+        color: #545B65;
+      }
+      ::v-deep .el-textarea__inner{
+        border-color: #E6E8ED;
+      }
+    }
+  }
+  .detail-img{
+    width: 818px;
+    height: 404px;
+    overflow: hidden;
+    overflow-y: scroll;
+    img{
+      display: block;
+      width: 100%;
+    }
+  }
+  .detail-list{
+    // margin-bottom: 16px;
+    padding: 0 18px 4px 18px;
+    p{
+      width: 33%;
+    }
+  }
+}
+</style>