diff --git a/src/assets/styles/mixin.scss b/src/assets/styles/mixin.scss
index 081fd62..0a672c7 100644
--- a/src/assets/styles/mixin.scss
+++ b/src/assets/styles/mixin.scss
@@ -526,6 +526,20 @@
   }
 }
 
+@mixin checkboxAnddisabled-style{
+  [data-theme="dark"] & {
+    border-color: $mainColor;
+    background: transparent;
+  }
+  [data-theme="light"] & {
+    border-color:#BECEFB;
+    background-color: #E9EEFD;
+    &::after{
+      border-color:#BECEFB;
+    }
+  }
+}
+
 @mixin checkbox-active-style{
   [data-theme="dark"] & {
     border-color: $mainColor;
@@ -916,10 +930,12 @@
 
 @mixin prepend-input{
   [data-theme="dark"] & {
+    border:none;
     border-right: 1px solid $mainColor;
     color: #339cff !important;
   }
   [data-theme="light"] & {
+    border:none;
     border-right: 1px solid #E3E7EE;
     color: #545B65 !important;
   }
@@ -1030,6 +1046,11 @@
       border: 1px solid #FFA5A0;
       opacity: 0.6;
     }
+    &.soon-state{
+      color: #FF8329;
+      border: 1px solid #FEBD98;
+      opacity: 0.6;
+    }
   }
   [data-theme="light"] & {
     &.ing-state{
@@ -1047,5 +1068,10 @@
       background-color: #FFEBEA;
       border: 1px solid #FFA5A0;
     }
+    &.soon-state{
+      color: #FF8329;
+      background-color: #FFF3E5;
+      border: 1px solid #FEBD98
+    }
   }
 }
\ No newline at end of file
diff --git a/src/assets/styles/yxk-admin.scss b/src/assets/styles/yxk-admin.scss
index 797eced..ebf7f2d 100644
--- a/src/assets/styles/yxk-admin.scss
+++ b/src/assets/styles/yxk-admin.scss
@@ -1319,6 +1319,10 @@ input[type ='number'] {
   @include checkbox-disabled-style;
 }
 
+.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner{
+  @include checkboxAnddisabled-style;
+}
+
 .el-radio-button__orig-radio:checked+.el-radio-button__inner{
   color: #0348F3;
   background-color: #E8F2FF;
@@ -1744,7 +1748,7 @@ input[type ='number'] {
     background-color: transparent;
     border: none !important;
     height: 32px;
-    line-height: 32px;
+    line-height: 30px;
     .el-input__inner {
       padding: 0 10px !important;
       border-radius: 3px 0 0 3px;
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 3c0edae..8326434 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -8,7 +8,7 @@
         <span @click="changetheme('dark')">深色主题</span>
         <span @click="changetheme('light')">浅色主题</span>
       </div>
-
+      <div style="font-size: 18px; color: #1C1C1C; margin-right: 30px; cursor: pointer;" class="iconfont icon-jieyueche-ding" />
       <!-- 消息中心 -->
       <el-dropdown ref="messageDrop" class="message-center right-menu-item hover-effect" trigger="click">
         <div class="message-icon">
diff --git a/src/views/archiveUtilize/archiveEditing/index.vue b/src/views/archiveUtilize/archiveEditing/index.vue
index 975ca73..86e02fe 100644
--- a/src/views/archiveUtilize/archiveEditing/index.vue
+++ b/src/views/archiveUtilize/archiveEditing/index.vue
@@ -1,20 +1,115 @@
 <template>
-  <div>档案编研</div>
+  <div class="app-container tab-container">
+    <div class="head-container" style="display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px;">
+      <div class="head-search" style="margin-bottom: 0;">
+        <el-input
+          v-model="keyWord"
+          size="small"
+          clearable
+          placeholder="输入关键字可模糊检索"
+          style="width: 245px;"
+          class="filter-item"
+          @clear="crud.toQuery"
+          @keyup.enter.native="crud.toQuery"
+        />
+        <date-range-picker v-model="burryTime" class="date-item" />
+        <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>
+        <el-checkbox v-model="myEditing" style="line-height: 32px; padding-left: 10px;">我参与得编研</el-checkbox>
+      </div>
+      <crudOperation />
+    </div>
+    <el-table
+      ref="table"
+      :data="crud.data"
+      style="width: 100%;"
+      height="calc(100vh - 330px)"
+      @row-click="clickRowHandler"
+      @cell-dblclick="tableDoubleClick"
+      @selection-change="crud.selectionChangeHandler"
+    >
+
+      <el-table-column type="selection" :reserve-selection="true" width="55" align="center" />
+      <el-table-column prop="username" label="编研主题" />
+      <el-table-column prop="username" label="编研类型" align="center" />
+      <el-table-column prop="username" label="主编人" align="center" />
+      <el-table-column prop="username" label="其他编研人员" align="center" />
+      <el-table-column prop="createTime" label="开始时间" width="200">
+        <template slot-scope="scope">
+          <div>{{ scope.row.createTime | parseTime }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="createTime" label="结束时间" width="200">
+        <template slot-scope="scope">
+          <div>{{ scope.row.createTime | parseTime }}</div>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination v-if="crud.data.length !== 0" />
+  </div>
 </template>
 
-<script >
+<script>
+import CRUD, { presenter, crud } from '@crud/crud'
+import pagination from '@crud/Pagination'
+import DateRangePicker from '@/components/DateRangePicker'
+import crudOperation from '@crud/CRUD.operation'
+
 export default {
   name: 'ArchiveEditing',
+  components: { pagination, DateRangePicker, crudOperation },
+  mixins: [presenter(), crud()],
+  cruds() {
+    return CRUD({
+      url: 'api/log/initLog',
+      title: '借阅记录',
+      optShow: {
+        add: true,
+        edit: true,
+        del: true,
+        download: false,
+        reset: false,
+        group: false
+      }
+    })
+  },
+  props: {
+    activeIndex: {
+      type: Number,
+      default: 0
+    }
+  },
   data() {
     return {
+      keyWord: null,
+      options: [
+        { value: 'username', label: '利用人' },
+        { value: 'account', label: '利用事由' }
+      ],
+      optionVal: '',
+      burryTime: null,
+      myEditing: false
     }
   },
   mounted() {
   },
   methods: {
+    [CRUD.HOOK.beforeRefresh]() {
+    },
+    resetQuery() {
+
+    },
+    clickRowHandler(row) {
+      // this.$refs.table.clearSelection()
+      this.$refs.table.toggleRowSelection(row)
+    },
+    tableDoubleClick(row) {
+    },
+    handleCloseDialog(done) {
+    }
   }
 }
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 </style>
diff --git a/src/views/archiveUtilize/archiveSearch/index.vue b/src/views/archiveUtilize/archiveSearch/index.vue
index a79c85e..0ae4359 100644
--- a/src/views/archiveUtilize/archiveSearch/index.vue
+++ b/src/views/archiveUtilize/archiveSearch/index.vue
@@ -98,7 +98,7 @@
         </div>
       </div>
     </div>
-    <ResultList v-else />
+    <ResultList v-else :is-common="isCommon" @close-result="closeResult" />
   </div>
 </template>
 
@@ -366,6 +366,10 @@ export default {
     },
     handleSearch() {
       this.isResult = true
+    },
+    closeResult() {
+      this.isResult = false
+      this.isCommon = false
     }
   }
 }
@@ -478,6 +482,7 @@ export default {
       span{
         font-size: 14px;
         // padding: 0 12px;
+        cursor: pointer;
       }
       span.active{
         color: #0348F3;
diff --git a/src/views/archiveUtilize/archiveSearch/module/resultList.vue b/src/views/archiveUtilize/archiveSearch/module/resultList.vue
index 0ecf383..77a764f 100644
--- a/src/views/archiveUtilize/archiveSearch/module/resultList.vue
+++ b/src/views/archiveUtilize/archiveSearch/module/resultList.vue
@@ -97,24 +97,67 @@
               <el-button slot="append" icon="el-icon-search">搜索</el-button>
             </el-input>
           </div>
-          <span class="change-search">高级搜索</span>
+          <span class="change-search" @click="returnAdvanced">高级检索</span>
         </div>
         <div class="search-tip">
-          检索 “<span>合同</span>” 成功获得<i>30</i>条结果
+          <div v-if="isCommon">检索 “<span>合同</span>” 成功获得<i>30</i>条结果</div>
+          <div v-else>检索成功获得<i>30</i>条结果<p>高级检索 点击查看检索条件</p></div>
         </div>
       </div>
       <div class="result-list">
-        <div class="result-item">1</div>
+        <div class="result-item" @dblclick="handleDetail">
+          <div class="result-item-title"><span>案卷</span><p>档案题名</p></div>
+          <p class="result-item-content" v-html="highlightedText" />
+          <div class="result-item-info">
+            <p>档号：WS-2022-001</p>
+            <p>全宗：全宗A</p>
+            <p>档案门类：文书档案（案卷）</p>
+            <p>档案分类：文书档案（案卷）</p>
+          </div>
+          <div class="item-top-tag">
+            <span>实体</span>
+            <span>标签</span>
+            <span>装盒</span>
+            <span>入库</span>
+            <span>借阅</span>
+          </div>
+          <div class="item-bottom-handle">
+            <span @click.stop="handleDetail">查看详情</span>
+            <i class="iconfont icon-liuchengfaqi" @click.stop="initiateLending" />
+            <i class="iconfont icon-jiarujieyueche" @click.stop="addLending" />
+          </div>
+        </div>
+        <!--分页组件-->
+        <el-pagination
+          v-if="listData.length !== 0"
+          :current-page="page.page"
+          :total="page.total"
+          :page-size="page.size"
+          :pager-count="5"
+          layout="total, prev, pager, next, sizes"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentPage"
+        />
       </div>
     </div>
+    <!-- 档案详情 -->
+    <ArchivesInfo ref="archivesInfo" :selected-category="selectedCategory" :arc-id="arcId" />
   </div>
 </template>
 
 <script >
 import { FetchFondsAll } from '@/api/system/fonds'
 import { FetchCategoryMenu } from '@/api/system/category/category'
+import ArchivesInfo from '@/views/components/archivesDetail/detail.vue'
 export default {
   name: 'ResultList',
+  components: { ArchivesInfo },
+  props: {
+    isCommon: {
+      type: Boolean,
+      default: true
+    }
+  },
   data() {
     return {
       activeNames: ['1'],
@@ -125,7 +168,7 @@ export default {
       filterLevelText: '',
       levelOptions: [
         {
-          label: '原文',
+          label: '电子原文',
           value: '4'
         },
         {
@@ -143,9 +186,66 @@ export default {
       ],
       filterClassifyText: '',
       classifyOptions: [],
-      statusOptions: [],
+      statusOptions: [
+        {
+          label: '未装盒',
+          value: '未装盒'
+        },
+        {
+          label: '已装盒',
+          value: '已装盒'
+        },
+        {
+          label: '未入库',
+          value: '未入库'
+        },
+        {
+          label: '已入库',
+          value: '已入库'
+        },
+        {
+          label: '无实体',
+          value: '无实体'
+        },
+        {
+          label: '有实体',
+          value: '有实体'
+        },
+        {
+          label: '实体在库',
+          value: '实体在库'
+        },
+        {
+          label: '实体待借',
+          value: '实体待借'
+        },
+        {
+          label: '实体已借',
+          value: '实体已借'
+        }
+      ],
       status: null,
-      keyword: ''
+      keyword: '合同',
+      listData: [],
+      str: '《福建省电力零售市场购售电合同》(以下简称《合同文本》)适用于福建省电力市场零售用户与售电公司之间签订的零售市场购售电合同...在本合同履行期限届满之前,因一方原因导致合同不能继续履行,另一方可在履行期限届满前解除合同并要求其承担相应的违约责任...9.2 本合同部分条款的无效,不影响其他条款及本合同的效力。...七、争议的解决方式凡因执行本合同所发生的与本合同有关的一切争议...九、合同生效及其他9.1 本合同范本在福建省电力交易中心平台上公示...',
+      selectedCategory: {
+        id: 'DAAC5ED3F86D6481C3C1A5',
+        arrangeType: 3
+      },
+      arcId: 'E7DBAF69F1691B063A3129',
+      page: {
+        page: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  computed: {
+    highlightedText() {
+      return this.str.replace(
+        new RegExp(this.keyword, 'g'),
+        `<span style="color: #ED4A41">${this.keyword}</span>`
+      )
     }
   },
   watch: {
@@ -163,11 +263,8 @@ export default {
     }
   },
   mounted() {
-    // 延迟模拟请求数据
-    setTimeout(() => {
-      this.getFondsDatas()
-      this.getCategoryDataTree()
-    }, 300)
+    this.getFondsDatas()
+    this.getCategoryDataTree()
   },
   methods: {
     getFondsDatas() {
@@ -241,6 +338,77 @@ export default {
     getLevelCheckedKeys() {
       const checkedKeys = this.$refs.treeLevel.getCheckedNodes()
       console.log('levelsKeys', checkedKeys)
+    },
+    returnAdvanced() {
+      this.$emit('close-result')
+    },
+    handleDetail() {
+      // this.arcId = row.id
+      this.$nextTick(() => {
+        // if (this.selectedCategory.arrangeType !== 1) {
+        //   this.$refs.archivesInfo.isHasFile = false
+        //   if (this.activeIndex === 1) {
+        //     this.$refs.archivesInfo.detailTitle = '文件详情'
+        //     this.$refs.archivesInfo.isHasFile = true
+        //     this.$refs.archivesInfo.getDetial(3, this.arcId)
+        //   } else {
+        //     this.$refs.archivesInfo.detailTitle = '案卷详情'
+        //     this.$refs.archivesInfo.getDetial(2, this.arcId)
+        //   }
+        // } else {
+        //   this.$refs.archivesInfo.isHasFile = true
+        //   this.$refs.archivesInfo.detailTitle = '文件详情'
+        //   this.$refs.archivesInfo.getDetial(3, this.arcId)
+        // }
+
+        // this.$nextTick(() => {
+        //   this.$refs.archivesInfo.isHasFile = true
+        //   this.$refs.archivesInfo.detailTitle = '卷内详情'
+        //   this.$refs.archivesInfo.archivesInfoVisible = true
+        //   this.$refs.archivesInfo.archivesTabIndex = 0
+        //   this.$refs.archivesInfo.getDetial(3, this.arcId)
+        // })
+
+        // this.$nextTick(() => {
+        //   this.$refs.archivesInfo.detailTitle = '项目详情'
+        //   this.$refs.archivesInfo.archivesInfoVisible = true
+        //   this.$refs.archivesInfo.archivesTabIndex = 0
+        //   this.$refs.archivesInfo.getDetial(1, this.arcId)
+        // })
+
+        this.$refs.archivesInfo.archivesInfoVisible = true
+        this.$refs.archivesInfo.archivesTabIndex = 0
+      })
+    },
+    initiateLending() {
+      this.$confirm('当前档案即将发起借阅' + '<span>你是否还要继续？</span>', '提示', {
+        confirmButtonText: '继续',
+        cancelButtonText: '取消',
+        type: 'warning',
+        dangerouslyUseHTMLString: true
+      }).then(() => {
+        this.$message.success('确定发起借阅')
+      }).catch(() => {
+      })
+    },
+    addLending() {
+      console.log('加入借阅')
+      this.$confirm('当前档案是否加入借阅车' + '<span>你是否还要继续？</span>', '提示', {
+        confirmButtonText: '继续',
+        cancelButtonText: '取消',
+        type: 'warning',
+        dangerouslyUseHTMLString: true
+      }).then(() => {
+        this.$message.success('确定加入借阅车')
+      }).catch(() => {
+      })
+    },
+    handleSizeChange(size) {
+      this.page.size = size
+      this.page.page = 1
+    },
+    handleCurrentPage(val) {
+      this.page.page = val
     }
   }
 }
@@ -271,10 +439,6 @@ export default {
         border-radius: 3px 3px 3px 3px;
         opacity: 1;
         border: 1px solid #CBD1DC;
-        .el-collapse-item__arrow{
-          // margin: 0;
-          // text-align: right;
-        }
         .el-icon-arrow-right:before{
           font-family: "iconfont" !important;
           font-style: normal;
@@ -350,6 +514,7 @@ export default {
         }
       }
       .change-search{
+        cursor: default;
         margin-left: 12px;
         font-size: 14px;
         color: #0348F3;
@@ -357,6 +522,7 @@ export default {
       }
       .search-tip{
         font-size: 14px;
+        line-height: 22px;
         color: #545B65;
         span{
           color: #ED4A41;
@@ -365,15 +531,97 @@ export default {
           font-style: normal;
           padding: 0 4px;
         }
+        p{
+          display: inline-block;
+          padding-left: 12px;
+          font-size: 12px;
+          color: #A6ADB6;
+        }
       }
     }
     .result-list{
       padding: 20px;
       .result-item{
+        position: relative;
         padding: 16px 16px 10px 16px;
         margin-bottom: 16px;
+        font-size: 14px;
         background-color: #fff;
         border-radius: 3px;
+        .result-item-title{
+          display: flex;
+          justify-content: flex-start;
+          margin-bottom: 8px;
+          font-size: 16px;
+          line-height: 24px;
+          color: #0C0E1E;
+          span{
+            display: block;
+            padding: 0 8px;
+            margin-right: 6px;
+            height: 22px;
+            line-height: 22px;
+            font-size: 12px;
+            border-radius: 3px;
+            background-color: #CAE1FF;
+            color: #0348F3;
+          }
+        }
+        .result-item-content{
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 1;
+          color: #545B65;
+        }
+        .result-item-info{
+          margin-top: 4px;
+          font-size: 12px;
+          line-height: 20px;
+          color: #868E98;
+        }
+        .item-top-tag{
+          position: absolute;
+          right: 16px;
+          top: 16px;
+          display: flex;
+          justify-content: flex-start;
+          flex-wrap: nowrap;
+          align-items: center;
+          span{
+            display: block;
+            width: 42px;
+            height: 22px;
+            line-height: 22px;
+            text-align: center;
+            font-size: 12px;
+            background-color: #E8F8F5;
+            border: 1px solid #B1EBDF;
+            border-radius: 3px;
+            color: #2ECAAC;
+            margin-left: 10px;
+          }
+        }
+        .item-bottom-handle{
+          position: absolute;
+          right: 16px;
+          bottom: 10px;
+          display: flex;
+          justify-content: flex-start;
+          flex-wrap: nowrap;
+          align-items: center;
+          font-size: 14px;
+          color: #0348F3;
+          cursor: pointer;
+          span{
+            display: block;
+          }
+          i{
+            display: block;
+            margin-left: 26px;
+          }
+        }
       }
     }
   }
diff --git a/src/views/archiveUtilize/utillizeRecord/index.vue b/src/views/archiveUtilize/utillizeRecord/index.vue
index a1a71d0..f2c8547 100644
--- a/src/views/archiveUtilize/utillizeRecord/index.vue
+++ b/src/views/archiveUtilize/utillizeRecord/index.vue
@@ -1,20 +1,45 @@
 <template>
-  <div>借阅记录</div>
+  <div class="app-container tab-container">
+    <div class="tab-content">
+      <span class="right-top-line" />
+      <span class="left-bottom-line" />
+      <span class="right-bottom-line" />
+      <ul class="tab-nav">
+        <li :class="{ 'active-tab-nav': activeIndex == 0 }" @click="changeActiveTab(0)">利用中<i /></li>
+        <li :class="{ 'active-tab-nav': activeIndex == 1 }" @click="changeActiveTab(1)">已到期<i /></li>
+        <!-- 最右侧装饰img -->
+        <span class="tab-right-img" />
+      </ul>
+      <RecordList :active-index="activeIndex" @handleTab="getRecordId" />
+    </div>
+  </div>
 </template>
 
-<script >
+<script>
+import RecordList from './recordList'
+
 export default {
   name: 'UtillizeRecord',
+  components: {
+    RecordList
+  },
   data() {
     return {
+      activeIndex: 0,
+      currentRecordId: null
     }
   },
-  mounted() {
-  },
   methods: {
+    getRecordId(index, id) {
+      this.changeActiveTab(index)
+      this.currentRecordId = id
+    },
+    changeActiveTab(data) {
+      this.activeIndex = data
+    }
   }
 }
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 </style>
diff --git a/src/views/archiveUtilize/utillizeRecord/recordList.vue b/src/views/archiveUtilize/utillizeRecord/recordList.vue
new file mode 100644
index 0000000..3400336
--- /dev/null
+++ b/src/views/archiveUtilize/utillizeRecord/recordList.vue
@@ -0,0 +1,307 @@
+<template>
+  <div class="recordList-main">
+    <div class="head-container">
+      <div class="head-search">
+        <el-input
+          v-model="keyWord"
+          size="small"
+          clearable
+          placeholder="请输入关键词"
+          style="width: 300px;"
+          class="input-prepend filter-item"
+          @clear="crud.toQuery"
+          @keyup.enter.native="crud.toQuery"
+        >
+          <el-select slot="prepend" v-model="optionVal" style="width: 92px">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-input>
+        <div class="start-date">
+          <span>开始时间</span>
+          <date-range-picker v-model="startTime" class="date-item" />
+        </div>
+        <div class="end-date">
+          <span>结束时间</span>
+          <date-range-picker v-model="endTime" class="date-item" />
+        </div>
+        <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>
+    </div>
+    <el-table
+      ref="table"
+      :data="crud.data"
+      style="width: 100%;"
+      height="calc(100% - 100px)"
+      @cell-dblclick="tableDoubleClick"
+      @selection-change="crud.selectionChangeHandler"
+    >
+      <el-table-column prop="createTime" label="利用开始时间" width="200">
+        <template slot-scope="scope">
+          <div>{{ scope.row.createTime | parseTime }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="createTime" label="利用结束时间" width="200">
+        <template slot-scope="scope">
+          <div>{{ scope.row.createTime | parseTime }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="username" label="利用人" align="center" width="120" />
+      <el-table-column prop="description" label="利用事由" />
+      <el-table-column prop="browser" label="包含实体借阅" align="center" width="110">
+        <template>
+          <div>
+            <span class="iconfont icon-fou" />
+            <span class="iconfont icon-shi" />
+            <span class="iconfont icon-dengdai" />
+            <span class="iconfont icon-cuowu1" />
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="browser" label="是否已归还" align="center" width="110">
+        <template>
+          <div>
+            <span class="iconfont icon-fou" />
+            <span class="iconfont icon-shi" />
+            <span class="iconfont icon-dengdai" />
+            <span class="iconfont icon-cuowu1" />
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="createTime" label="状态" align="center" width="110">
+        <template>
+          <div>
+            <span class="row-state soon-state">即将到期</span>
+            <!-- <span class="row-state end-state">利用中</span>
+            <span class="row-state cancel-state">已过期</span> -->
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination v-if="crud.data.length !== 0" />
+
+    <el-dialog title="利用详情" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="lendDetail" :before-close="handleCloseDialog">
+      <div class="setting-dialog">
+        <el-form ref="form" :model="form" inline label-width="100px">
+          <el-form-item label="利用人" prop="user">
+            <el-input v-model="form.user" style="width: 280px;" disabled />
+          </el-form-item>
+          <el-form-item label="利用流程" prop="process">
+            <el-input v-model="form.process" style="width: 280px;" disabled />
+          </el-form-item>
+          <el-form-item label="开始时间" prop="startDate">
+            <el-input v-model="form.startDate" style="width: 280px;" disabled />
+          </el-form-item>
+          <el-form-item label="结束时间" prop="endDate">
+            <el-input v-model="form.endDate" style="width: 280px;" disabled />
+          </el-form-item>
+          <el-row>
+            <el-form-item label="利用事由" prop="remark">
+              <el-input v-model="form.remark" type="textarea" :rows="4" style="width: 703px;" disabled />
+            </el-form-item>
+          </el-row>
+          <el-row>
+            <el-form-item label="状态" prop="status">
+              <span class="row-state soon-state">即将到期</span>
+              <span class="row-state end-state">利用中</span>
+              <span class="row-state cancel-state">已过期</span>
+            </el-form-item>
+          </el-row>
+        </el-form>
+        <el-table
+          ref="table"
+          :data="detailArcData"
+          style="width: 100%;"
+          height="calc(100vh - 560px)"
+        >
+          <el-table-column type="index" label="序号" align="center" width="55" />
+          <el-table-column prop="title" label="档案文件">
+            <template>
+              <div class="title-style"><span>文件</span>【档号】题名</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="description" label="利用方式" width="340">
+            <template>
+              <el-checkbox-group v-model="checkList" class="checkbox-style">
+                <el-checkbox label="电子查看" disabled />
+                <el-checkbox label="下载" disabled />
+                <el-checkbox label="打印" disabled />
+                <el-checkbox label="实体借阅" disabled />
+              </el-checkbox-group>
+            </template>
+          </el-table-column>
+          <el-table-column prop="createTime" label="实体借阅状态" align="center" width="110">
+            <template>
+              <div>
+                <span class="row-state soon-state">即将到期</span>
+                <!-- <span class="row-state end-state">利用中</span>
+            <span class="row-state cancel-state">已过期</span> -->
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click.native="handleCloseDialog">关闭</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import CRUD, { presenter, crud } from '@crud/crud'
+import pagination from '@crud/Pagination'
+import DateRangePicker from '@/components/DateRangePicker'
+
+export default {
+  name: 'RecordList',
+  components: { pagination, DateRangePicker },
+  mixins: [presenter(), crud()],
+  cruds() {
+    return CRUD({
+      url: 'api/log/initLog',
+      title: '借阅记录',
+      optShow: {
+        add: false,
+        edit: false,
+        del: false,
+        download: false,
+        reset: false,
+        group: false
+      }
+    })
+  },
+  props: {
+    activeIndex: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      selections: [],
+      keyWord: null,
+      options: [
+        { value: 'username', label: '利用人' },
+        { value: 'account', label: '利用事由' }
+      ],
+      optionVal: '',
+      startTime: null,
+      endTime: null,
+      lendDetail: false,
+      form: {
+        user: '张三',
+        process: '档案借阅流程-张三-2023-01-01',
+        startDate: '2016-09-21 08:50:08',
+        endDate: '2016-10-21 08:50:08',
+        remark: '利用事由'
+      },
+      detailArcData: [],
+      checkList: ['电子查看', '实体借阅']
+    }
+  },
+  watch: {
+    activeIndex: function(newValue, oldValue) {
+      console.log('newValue', newValue)
+      this.crud.query.isType = newValue
+      this.crud.toQuery()
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    [CRUD.HOOK.beforeRefresh]() {
+      this.crud.query.isType = this.activeIndex
+    },
+    resetQuery() {
+
+    },
+    tableDoubleClick(row) {
+      this.lendDetail = true
+    },
+    handleCloseDialog(done) {
+      this.lendDetail = false
+      // 关闭弹框
+      // done()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.recordList-main{
+  height: calc(100vh - 236px);
+  .start-date,
+  .end-date{
+    display: flex;
+    justify-content: flex-start;
+    padding-left: 8px;
+    font-size: 14px;
+    line-height: 30px;
+    color: #0C0E1E;
+    span{
+      display: block;
+      margin-right: 8px;
+    }
+  }
+  .iconfont{
+    font-size: 14px;
+  }
+  .icon-fou{
+    color: #A6ADB6;
+  }
+  .icon-shi{
+    color: #12C37A;
+  }
+  .icon-dengdai{
+    color: #FF8329;
+  }
+  .icon-cuowu1{
+    color: #ED4A41;
+  }
+  .row-state{
+    width: 56px;
+    padding: 0;
+    text-align: center;
+  }
+}
+.title-style{
+  span{
+    display: inline-block;
+    width: 42px;
+    height: 22px;
+    line-height: 22px;
+    text-align: center;
+    font-size: 12px;
+    color: #0348F3;
+    background-color: #CAE1FF;
+    border-radius: 3px;
+  }
+}
+::v-deep .el-dialog{
+  width: 860px !important;
+  .el-form-item .el-form-item__content{
+    width: 280px;
+  }
+  .dialog-footer{
+    margin-top: 15px !important;
+  }
+}
+::v-deep .el-checkbox-group{
+  .el-checkbox{
+    margin-right: 10px !important;
+  }
+}
+::v-deep .el-pagination{
+  margin: 24px 0 10px 0 !important
+}
+
+::v-deep .input-prepend .el-input__inner{
+  padding-left: 100px;
+}
+</style>
diff --git a/src/views/components/archivesDetail/anjuan.vue b/src/views/components/archivesDetail/anjuan.vue
index e1bf840..30a431b 100644
--- a/src/views/components/archivesDetail/anjuan.vue
+++ b/src/views/components/archivesDetail/anjuan.vue
@@ -86,7 +86,7 @@
 <script>
 import { form } from '@crud/crud'
 import { FetchArchivesDetails, FetchArchivesMetadata } from '@/api/archivesManage/archivesList'
-import JuanneiDetail from './juannei.vue'
+import JuanneiDetail from './juannei'
 export default {
   name: 'ArchivesInfo',
   components: { JuanneiDetail },
diff --git a/src/views/components/archivesDetail/detail.vue b/src/views/components/archivesDetail/detail.vue
new file mode 100644
index 0000000..55b1148
--- /dev/null
+++ b/src/views/components/archivesDetail/detail.vue
@@ -0,0 +1,248 @@
+<template>
+  <el-dialog class="detail-dialog" :title="detailTitle" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="archivesInfoVisible" :before-close="handleClose">
+    <!-- <span class="dialog-right-top" />
+    <span class="dialog-left-bottom" /> -->
+    <div class="setting-dialog">
+      <div class="detail-tab tab-content">
+        <!-- tab -->
+        <ul class="tab-nav">
+          <li :class="{'active-tab-nav': archivesTabIndex == 0}" @click="changeActiveTab(0)">基本信息</li>
+          <li v-if="isHasFile" :class="{'active-tab-nav': archivesTabIndex == 1}" @click="changeActiveTab(1)">附件</li>
+          <li :class="{'active-tab-nav': archivesTabIndex == 2}" @click="changeActiveTab(2)">元数据</li>
+        </ul>
+        <!-- 基本信息 -->
+        <div v-if="archivesTabIndex==0" class="base-info item-content">
+          <el-row>
+            <el-col v-for="(item,index) in archivesDetailsData" :key="index" :span="item.isLine ? 24 : 12" class="base-info-item">
+              <span>{{ item.fieldCnName }}：</span>
+              <p :style="{ width: ( item.editLength ? item.editLength+'px' : '' ), flex: ( !item.editLength ? 1 : '' )}">{{ item.context }}</p>
+            </el-col>
+          </el-row>
+        </div>
+        <!-- 附件 -->
+        <UploadFile v-if="archivesTabIndex==1" ref="uploadFile" class="item-content" :is-upload-detail="false" :selected-category="selectedCategory" :arc-id="arcId" />
+        <!-- 元数据 -->
+        <div v-if="archivesTabIndex==2" class="metadata-cont item-content">
+          <pre v-highlightjs="xml_show">
+            <code class="highlight_s">
+              {[xml_show]}
+            </code>
+          </pre>
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { FetchDetailsById, FetchArchivesMetadata } from '@/api/collect/collect'
+import UploadFile from './uploadFile/index'
+export default {
+  name: 'ArchivesInfo',
+  components: { UploadFile },
+  props: {
+    selectedCategory: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    },
+    arcId: {
+      type: String,
+      default: function() {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      detailTitle: '',
+      isHasFile: false, // 卷内/文件才有附件
+      isDetailsInfo: false, // 项目不显示最下面5行基本信息
+      archivesInfoVisible: false,
+      archivesTabIndex: 0,
+      archivesDetailsData: [],
+      archivesDetailsMetadata: [],
+      xml_show: null
+    }
+  },
+  created() {
+  },
+  mounted() {
+  },
+  methods: {
+    getDetial(collectLevel, rowId) {
+      console.log(this.arcId)
+      const params = {
+        'categoryId': this.selectedCategory.id,
+        'categoryLevel': collectLevel,
+        'id': rowId
+      }
+      console.log(params)
+      FetchDetailsById(params).then(data => {
+        this.archivesDetailsData = data.showFiled
+          .filter(field => field.fieldName in data.echo)
+          .map(field => ({
+            editLength: field.editLength,
+            isLine: field.isLine,
+            fieldCnName: field.fieldCnName,
+            fieldName: field.fieldName,
+            context: data.echo[field.fieldName]
+          }))
+      })
+      const metaDataParams = {
+        'categoryId': this.selectedCategory.id,
+        'categoryLevel': collectLevel,
+        'archivesId': rowId
+      }
+      console.log('metaData', metaDataParams)
+      FetchArchivesMetadata(metaDataParams).then(data => {
+        this.archivesDetailsMetadata = data
+      })
+    },
+    setXml() {
+      const xmlstr = this.archivesDetailsMetadata
+      // console.log('xmlstr:', xmlstr)
+      // console.log('xml转json:', this.$x2js.xml2js(xmlstr))
+      // console.log('json转xml:', this.$x2js.js2xml(this.$x2js.xml2js(xmlstr)))
+      // this.xml_show = vkbeautify.xml(xmlstr)
+      this.xml_show = this.showXml(xmlstr)
+    },
+    changeActiveTab(index) {
+      this.archivesTabIndex = index
+      if (this.archivesTabIndex === 2) {
+        this.setXml()
+      }
+      this.$nextTick(() => {
+        if (this.$refs.uploadFile) {
+          this.$refs.uploadFile.tableData = []
+          this.$refs.uploadFile.getFileList()
+        }
+      })
+    },
+    // 删除 - 关闭
+    handleClose(done) {
+      this.archivesInfoVisible = false
+      done()
+    },
+    // xml格式化
+    showXml(str) {
+      var that = this
+      var text = str
+      // 去掉多余的空格
+      text =
+        '\n' +
+        text
+          .replace(/(<\w+)(\s.*?>)/g, function($0, name, props) {
+            return name + ' ' + props.replace(/\s+(\w+=)/g, ' $1')
+          })
+          .replace(/>\s*?</g, '>\n<')
+      // 把注释编码
+      text = text
+        .replace(/\n/g, '\r')
+        .replace(/<!--(.+?)-->/g, function($0, text) {
+          var ret = '<!--' + escape(text) + '-->'
+          return ret
+        })
+        .replace(/\r/g, '\n')
+
+      // 调整格式
+      var rgx = /\n(<(([^\?]).+?)(?:\s|\s*?>|\s*?(\/)>)(?:.*?(?:(?:(\/)>)|(?:<(\/)\2>)))?)/gm
+      var nodeStack = []
+      var output = text.replace(rgx, function(
+        $0,
+        all,
+        name,
+        isBegin,
+        isCloseFull1,
+        isCloseFull2,
+        isFull1,
+        isFull2
+      ) {
+        var isClosed =
+          isCloseFull1 === '/' ||
+          isCloseFull2 === '/' ||
+          isFull1 === '/' ||
+          isFull2 === '/'
+        var prefix = ''
+        if (isBegin === '!') {
+          prefix = that.getPrefix(nodeStack.length)
+        } else {
+          if (isBegin !== '/') {
+            prefix = that.getPrefix(nodeStack.length)
+            if (!isClosed) {
+              nodeStack.push(name)
+            }
+          } else {
+            nodeStack.pop()
+            prefix = that.getPrefix(nodeStack.length)
+          }
+        }
+        var ret = '\n' + prefix + all
+        return ret
+      })
+      var outputText = output.substring(1)
+      // 把注释还原并解码，调格式
+      outputText = outputText
+        .replace(/\n/g, '\r')
+        .replace(/(\s*)<!--(.+?)-->/g, function($0, prefix, text) {
+          if (prefix.charAt(0) === '\r') prefix = prefix.substring(1)
+          text = unescape(text).replace(/\r/g, '\n')
+          var ret =
+            '\n' + prefix + '<!--' + text.replace(/^\s*/gm, prefix) + '-->'
+          return ret
+        })
+      outputText = outputText.replace(/\s+$/g, '').replace(/\r/g, '\r\n')
+      return outputText
+    },
+    getPrefix(prefixIndex) {
+      var span = '    '
+      var output = []
+      for (var i = 0; i < prefixIndex; ++i) {
+        output.push(span)
+      }
+      return output.join('')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.base-info,
+.metadata-cont{
+  background-color: #F6F8FC;
+
+}
+// 档案详情
+.base-info{
+  padding: 20px 0;
+  overflow: hidden;
+  overflow-y: scroll;
+  .base-info-item{
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 20px;
+    color: #545B65;
+    span{
+      display: block;
+      width: 120px;
+      margin-right: 5px;
+      text-align: right;
+      color: #0C0E1E;
+    }
+  }
+}
+
+code.hljs {
+  font-size: 12px;
+  color: #0C0E1E !important;
+  height: 530px !important;
+}
+::v-deep .hljs-name{
+  color: #0C0E1E !important;
+}
+.base-info .base-info-item span.el-tag{
+  width: auto;
+  color: #fff;
+}
+</style>
diff --git a/src/views/components/archivesDetail/uploadFile/index.vue b/src/views/components/archivesDetail/uploadFile/index.vue
new file mode 100644
index 0000000..28f8056
--- /dev/null
+++ b/src/views/components/archivesDetail/uploadFile/index.vue
@@ -0,0 +1,350 @@
+<template>
+  <div class="upload-file">
+    <!-- 上传附件curd -->
+    <div v-if="isUploadDetail" class="upload-curd">
+      <div class="upload-btn">
+        <el-button icon="el-icon-plus" size="small" type="primary">添加</el-button>
+        <input id="upFile" type="file" name="upFile" @change="changeFile($event)">
+      </div>
+      <el-button icon="el-icon-delete" :disabled="selections.length === 0" @click="toDelete(selections)">删除</el-button>
+      <el-button icon="el-icon-sort" @click="showSort">排序</el-button>
+    </div>
+
+    <!--表格渲染-->
+    <el-table
+      ref="table"
+      :data="tableData"
+      style="min-width: 100%"
+      height="calc(100vh - 382px)"
+      @row-click="clickRowHandler"
+      @selection-change="selectionChangeHandler"
+    >
+      <el-table-column v-if="isUploadDetail" type="selection" width="55" align="center" />
+      <el-table-column type="index" label="序号" width="55" align="center" />
+      <el-table-column prop="file_name" label="文件名称" show-overflow-tooltip min-width="140" align="center" />
+      <el-table-column prop="file_type" label="格式" min-width="60" align="center" />
+      <el-table-column prop="file_size" label="大小" min-width="85" align="center">
+        <template slot-scope="scope">
+          {{ (scope.row.file_size / 1024).toFixed(2) + 'kB' }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="file_dpi" label="分辨率" min-width="85" align="center" />
+      <el-table-column prop="file_thumbnail" label="缩览图" min-width="60" align="center">
+        <template slot-scope="scope">
+          <div v-if="scope.row.file_type === 'jpg' || scope.row.file_type === 'jpeg' || scope.row.file_type === 'png' || scope.row.file_type === 'bmp'|| scope.row.file_type === 'gif'">
+            <img width="60px" height="32px" class="screenshot" :src="baseApi+ '/downloadFile' +scope.row.file_path" :onerror="defaultImg" @click="showCoverPreview(scope.row)">
+          </div>
+          <div v-else>
+            <svg-icon icon-class="fujian" class-name="svg-style" />
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="create_time" label="创建时间" min-width="110" align="center" />
+      <!-- && !recycleMain.isRecycle -->
+      <el-table-column v-if="!isUploadDetail " label="操作" min-width="100" align="center">
+        <template slot-scope="scope">
+          <el-button class="file-down iconfont icon-weibiaoti-2" @click="downloadFile(scope.row)">下载</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 点击缩略图看大图 -->
+    <el-dialog class="preview-dialog" :append-to-body="true" :close-on-click-modal="false" :before-close="handleClose" :visible="showCoverVisible" title="查看大图">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog" style="max-height:calc(100vh - 230px); overflow:auto;">
+        <img style="max-width:100%; object-fit: contain;" :src="previewSrc" :onerror="defaultImg">
+      </div>
+    </el-dialog>
+
+    <!-- 排序 -->
+    <el-dialog :close-on-click-modal="false" :append-to-body="true" title="排序" :visible.sync="sortVisible" @opened="opened">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <i class="drag-tip">提示：请通过拖动鼠标来调整当前顺序</i>
+        <el-table :data="sortTableData" class="file-sort" style="width: 100%;max-height: 70vh;" row-key="id">
+          <el-table-column type="index" label="序号" width="100" align="center" />
+          <el-table-column prop="file_name" label="文件名称" />
+        </el-table>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click.native="handleSort">保存</el-button>
+        </div>
+      </div>
+    </el-dialog>
+
+    <!-- 删除附件 -->
+    <el-dialog title="删除附件" :append-to-body="true" :close-on-click-modal="false" :visible.sync="deleteVisible" :before-close="handleClose">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <div class="dialog-delt">
+          <p><span>确定删除已选择的附件吗？</span></p>
+        </div>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click.native="handleDeltConfirm">确定</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+// import { FetchInitArchiveFilesView, FetchEditFile, FetchDeleteFile, FetchFileSort } from '@/api/archivesManage/archivesList'
+import { FetchInitFileCategoryView } from '@/api/collect/collect'
+import { archivesUpload } from '@/utils/upload'
+import { downloadFile, getCurrentTime } from '@/utils/index'
+import { mapGetters } from 'vuex'
+import { form } from '@crud/crud'
+import Sortable from 'sortablejs'
+export default {
+  name: 'UploadFile',
+  components: {},
+  mixins: [
+    form({})
+  ],
+  // inject: ['recycleMain'],
+  props: {
+    isUploadDetail: {
+      type: Boolean,
+      default: true
+    },
+    selectedCategory: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    },
+    arcId: {
+      type: String,
+      default: function() {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      defaultImg: 'this.src="' + require('@/assets/images/cover-bg.png') + '"',
+      tableData: [], // 附件list
+      selections: [], // table - 选中的
+      showCoverVisible: false, // 查看大图dialog
+      sortTableData: [], // 排序data
+      sortVisible: false, // 排序dialog
+      deleteVisible: false, // 删除附件 dialog
+      deleteData: [], // 删除选中的data
+      file: null, // 附件 change
+      fileNames: '', // 附件 - name
+      formatType: '', // 附件 - type
+      postfix: '', // 附件 - 文件后缀
+      fileSize: '', // 附件 - 大小
+      filePath: '', // 附件 - path
+      px: '', // 附件 - 分辨率
+      nowDate: '', // 当前时间
+      previewSrc: '' // 查看大图src
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'baseApi'
+    ])
+  },
+  watch: {
+    arcId: function(newValue, oldValue) {
+    }
+  },
+  methods: {
+    // 选择附件
+    async changeFile(e) {
+      this.file = e.target.files[0]
+      this.fileSize = this.file.size
+      this.formatType = this.file.type.substring(0, this.file.type.indexOf('/'))
+      this.fileNames = this.file.name
+      this.postfix = this.file.name.substring(
+        this.fileNames.lastIndexOf('.') + 1,
+        this.fileNames.length
+      )
+      if (this.formatType === 'image') {
+        const fileBase64 = await this.getBase64(this.file)
+        const res = await this.getImgPx(fileBase64)
+        this.px = res.width + 'px*' + res.height + 'px'
+      } else {
+        this.px = ''
+      }
+      // 上传附件
+      archivesUpload(this.baseApi + '/api/archives/uploadFile', this.file, this.categoryId).then(res => {
+        if (res.data.code === 200) {
+          this.filePath = res.data.data
+          this.uploadSave()
+        }
+      })
+    },
+    // 上传附件 - 选择上传即保存
+    uploadSave() {
+      this.nowDate = getCurrentTime()
+      const json = {
+        'file_name': this.fileNames,
+        'file_size': this.fileSize,
+        'file_type': this.postfix,
+        'file_path': this.filePath,
+        'sequence': null,
+        'archive_id': this.arcId,
+        'file_dpi': this.px,
+        'file_thumbnail': '',
+        'create_time': this.nowDate,
+        'id': null
+      }
+      const arrayUpload = []
+      arrayUpload.push(json)
+      const params = {
+        'categoryId': this.categoryId,
+        'jsonString': JSON.stringify(arrayUpload)
+      }
+      console.log(params)
+      // FetchEditFile(params).then(data => {
+      //   this.$message.success('上传附件成功!')
+      //   this.crud.refresh()
+      //   this.getFileList()
+      // })
+    },
+    // 将上传的图片转为base64
+    getBase64(file) {
+      const reader = new FileReader()
+      reader.readAsDataURL(file)
+      return new Promise((resolve) => {
+        reader.onload = () => {
+          resolve(reader.result)
+        }
+      })
+    },
+    // 获取图片的分辨率
+    getImgPx(img) {
+      const image = new Image()
+      image.src = img
+      return new Promise((resolve) => {
+        image.onload = () => {
+          const width = image.width
+          const height = image.height
+          resolve({ width, height })
+        }
+      })
+    },
+    // 上传list
+    getFileList() {
+      const params = {
+        'categoryId': this.selectedCategory.id,
+        'archivesId': this.arcId,
+        'page': 0,
+        'size': 10
+      }
+      console.log(params)
+      FetchInitFileCategoryView(params).then(data => {
+        console.log('darta', data)
+        this.tableData = data.returnlist
+      })
+    },
+    // 下载附件
+    downloadFile(row) {
+      const url = this.baseApi + '/downloadFile' + row.file_path
+      fetch(url).then(res => res.blob()).then(blob => {
+        downloadFile(blob, row.file_name.split('.')[0], row.file_type)
+      }).catch(() => {
+        this.$message.error('下载文件失败!')
+      })
+    },
+    // 选择删除
+    toDelete(data) {
+      this.deleteData = data
+      this.deleteVisible = true
+    },
+    // 确认删除
+    handleDeltConfirm() {
+      this.deleteVisible = false
+      const ids = []
+      this.deleteData.forEach(val => {
+        ids.push(val.id)
+      })
+      const params = {
+        'ids': ids,
+        'categoryId': this.categoryId
+      }
+      console.log(params)
+      // 删除fetch
+      // FetchDeleteFile(params).then(res => {
+      //   this.crud.delAllLoading = false
+      //   this.$message.success('删除成功!')
+      //   this.crud.refresh()
+      //   this.getFileList()
+      // })
+    },
+    // 排序 -  行拖拽
+    rowDrop(className, targetName) {
+      // 此时找到的元素是要拖拽元素的父容器
+      const tbody = document.querySelector('.' + className + ' .el-table__body-wrapper tbody')
+      const that = this
+      Sortable.create(tbody, {
+        // 指定父元素下可被拖拽的子元素
+        draggable: '.el-table__row',
+        onEnd({ newIndex, oldIndex }) {
+          if (newIndex === oldIndex) return
+          that[targetName].splice(newIndex, 0, that[targetName].splice(oldIndex, 1)[0])
+        }
+      })
+    },
+    // 排序
+    opened() {
+      this.rowDrop('file-sort', 'sortTableData')
+    },
+    showSort() {
+      this.sortVisible = true
+      this.sortTableData = JSON.parse(JSON.stringify(this.tableData))
+    },
+    // 排序 - 保存
+    handleSort() {
+      const ids = []
+      const sequences = []
+      this.sortTableData.map((value, index) => {
+        ids.push(value.id)
+        sequences.push(index + 1)
+      })
+      const params = {
+        'categoryId': this.categoryId,
+        'ids': ids,
+        'sequences': sequences
+      }
+      console.log(params)
+      // FetchFileSort(params).then((res) => {
+      //   this.sortVisible = false
+      //   this.$message.success('附件排序成功!')
+      //   this.crud.refresh()
+      //   this.getFileList()
+      // })
+    },
+    // table
+    clickRowHandler(row) {
+      this.$refs.table.toggleRowSelection(row)
+    },
+    // table
+    selectionChangeHandler(val) {
+      this.selections = val
+    },
+    // dialog - close
+    handleClose(done) {
+      this.showCoverVisible = false
+      done()
+    },
+    // 查看大图
+    showCoverPreview(row) {
+      this.showCoverVisible = true
+      this.previewSrc = this.baseApi + '/downloadFile' + row.file_path
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.svg-style{
+  width: 60px;
+  height: 32px;
+}
+
+</style>
diff --git a/src/views/system/processManage/index.vue b/src/views/system/processManage/index.vue
index 782aea8..1a63754 100644
--- a/src/views/system/processManage/index.vue
+++ b/src/views/system/processManage/index.vue
@@ -18,10 +18,10 @@
 </template>
 
 <script>
-import processDeployment from './processDeployment/index.vue'
-import modelDesign from './modelDesign/index.vue'
-import runningProcess from './runningProcess/index.vue'
-import historicalProcess from './historicalProcess/index.vue'
+import processDeployment from './processDeployment/index'
+import modelDesign from './modelDesign/index'
+import runningProcess from './runningProcess/index'
+import historicalProcess from './historicalProcess/index'
 
 export default {
   name: 'ProcessManage',