From aab525d4db4607d56500c287476f71480d97ed4e Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Tue, 9 May 2023 13:10:20 +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/styles/archives-manage.scss        |  79 +---
 src/assets/styles/yxk-admin.scss              |  77 ++--
 .../components/archivesDetail/anjuan.vue      | 353 ++++++++++++++++++
 .../archivesDetail/{index.vue => juannei.vue} | 153 ++++++--
 .../components/archivesDetail/project.vue     | 353 ++++++++++++++++++
 .../archivesDetail/uploadFile/index.vue       | 340 -----------------
 .../processManage/historicalProcess/index.vue |  93 ++++-
 .../processManage/modelDesign/index.vue       |   2 +-
 .../module/businessDetails/index.vue          |  10 +-
 .../runningProcess/module/detail.vue          |   9 -
 .../runningProcess/module/taskList/index.vue  |  13 +-
 .../module/taskList/module/detail.vue         | 166 ++++++++
 12 files changed, 1163 insertions(+), 485 deletions(-)
 create mode 100644 src/views/components/archivesDetail/anjuan.vue
 rename src/views/components/archivesDetail/{index.vue => juannei.vue} (57%)
 create mode 100644 src/views/components/archivesDetail/project.vue
 delete mode 100644 src/views/components/archivesDetail/uploadFile/index.vue
 create mode 100644 src/views/system/processManage/runningProcess/module/taskList/module/detail.vue

diff --git a/src/assets/styles/archives-manage.scss b/src/assets/styles/archives-manage.scss
index 4f740d7..385b01f 100644
--- a/src/assets/styles/archives-manage.scss
+++ b/src/assets/styles/archives-manage.scss
@@ -186,36 +186,6 @@
   border-radius: 26px;
 }
 
-// archives - tab
-.archives-tab{
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  padding: 0 35px;
-  font-size: 16px;
-  border-bottom: 1px solid $mainColor;
-  z-index: 1001;
-  li{
-    padding: 22px 14px 14px 14px;
-    color: $mainColor;
-    cursor: pointer;
-    &.active{
-      position: relative;
-      color: #fff;
-      &::after{
-        content: "";
-        position: absolute;
-        left: 0;
-        bottom: -1px;
-        width: 100%;
-        height: 3px;
-        border-radius: 3px;
-        background-color: #fff;
-      }
-    }
-  }
-}
-
 // 上传附件
 .upload-dialog{
   .el-dialog{
@@ -278,45 +248,6 @@
   border-color:  $arcRed;
 }
 
-// .drag-tip {
-//   display: block;
-//   padding-left: 20px;
-//   padding-bottom: 10px;
-//   font-style: normal;
-//   font-weight: bold;
-//   color: #fff;
-// }
-
-// 档案详情
-.base-info{
-  padding: 20px 20px 0 60px;
-  color: #fff;
-  .base-info-item{
-    display: flex;
-    flex-direction: row;
-    margin-bottom: 20px;
-    span{
-      display: block;
-      width: 160px;
-      margin-right: 5px;
-      text-align: right;
-      color: #3A99FD;
-    }
-  }
-}
-// 元数据
-.hljs{
-  padding: 0 30px;
-  color: #fff !important;
-  background-color: transparent !important;
-  font-family: "Sans Mono", "Consolas", "Courier", monospace;
-  font-size: 12px;
-  .hljs-attribute{
-    display: inline-block;
-    margin: 2px 0 !important;
-  }
-}
-
 .selct-data-head{
   color: #fff;
   line-height: 30px;
@@ -521,11 +452,11 @@
   }
 }
 
-.item-content{
-  max-height: calc(100vh - 410px);
-  overflow: hidden;
-  overflow-y: scroll;
-}
+// .item-content{
+//   max-height: calc(100vh - 410px);
+//   overflow: hidden;
+//   overflow-y: scroll;
+// }
 
 .upload-btn{
   position: relative;
diff --git a/src/assets/styles/yxk-admin.scss b/src/assets/styles/yxk-admin.scss
index bc36398..c8b512c 100644
--- a/src/assets/styles/yxk-admin.scss
+++ b/src/assets/styles/yxk-admin.scss
@@ -84,9 +84,23 @@
 }
 
 .detail-tab{
-  @include row_tab_style;
+  margin-top: 0;
+  .head-container{
+    margin: 20px 20px 20px 0;
+  }
   .tab-nav{
     margin: 25px 0 18px 0;
+    color: #545B65;
+    padding: 0 0 0 20px;
+    border-bottom: 1px solid #EDEFF3;
+    li{
+      margin-right: 60px;
+      &.active-tab-nav{
+        padding-bottom: 13px;
+        color: #0348F3;
+        border-bottom: 3px solid #0348F3;
+      }
+    }
   }
 }
 
@@ -169,10 +183,7 @@
   margin-left: 0 !important;
   margin-right: 0 !important;
 }
-// .container-left{
-//   // margin-right: 20px;
-//   // @include box_padding;
-// }
+
 .container-left,
 .container-right,
 .container-wrap,
@@ -263,27 +274,6 @@
 .el-button--mini{
   padding: 7px 10px;
 }
-// .el-message-box,
-// .el-popover{
-//   .el-button{
-//     border-color: #dcdfe6;
-//     color: #606266;
-//   }
-  
-//   .el-button:focus, 
-//   .el-button:hover {
-//       color: #1890ff;
-//       border-color: #badeff;
-//       background-color: #e8f4ff;
-//   }
-//   .el-button--primary,
-//   .el-button--primary:focus,
-//   .el-button--primary:hover {
-//     background: #46a6ff;
-//     border-color: #46a6ff;
-//     color: #fff;
-//   }
-// }
 
 .header-container-wrap{
   min-height: auto;
@@ -2087,10 +2077,22 @@ input[type ='number'] {
     }
   }
 }
+
+// 元数据
+.hljs{
+  width: 100%;
+  padding: 0 30px;
+  background-color: transparent !important;
+  font-family: "Sans Mono", "Consolas", "Courier", monospace;
+  font-size: 14px;
+  .hljs-attribute{
+    display: inline-block;
+    margin: 2px 0 !important;
+  }
+}
+
 .java.hljs {
   color: #545B65 !important;
-  background: transparent !important;
-  width: 100%;
   height: 630px !important;
 }
 
@@ -2109,5 +2111,22 @@ input[type ='number'] {
 
 .fixed-table.el-table .el-table__fixed-right{
   @include table-fixed-style;
-  
 }
+
+// 流程管理内 - 档案列表dialog
+.detail-dialog{
+  .el-dialog{
+    width: 860px;
+    .el-dialog__body{
+      padding: 0 0 30px 0;
+    }
+  }
+  .el-pagination{
+    margin: 20px 0 10px 0 !important;
+  }
+}
+
+.item-content{
+  height: calc(100vh - 380px);
+}
+
diff --git a/src/views/components/archivesDetail/anjuan.vue b/src/views/components/archivesDetail/anjuan.vue
new file mode 100644
index 0000000..f26f61b
--- /dev/null
+++ b/src/views/components/archivesDetail/anjuan.vue
@@ -0,0 +1,353 @@
+<template>
+  <div>
+    <el-dialog class="detail-dialog" :title="detailTitle" :close-on-click-modal="false" :visible.sync="archivesInfoVisible" append-to-body :before-close="handleClose">
+      <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 :class="{'active-tab-nav': archivesTabIndex == 1}" @click="changeActiveTab(1)">文件列表</li>
+            <!-- <li v-if="isHasFile" :class="{'active-tab-nav': archivesTabIndex == 2}" @click="changeActiveTab(2)">附件</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" v-show="index<archivesDetailsData.length-5" :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>
+            <el-row v-if="isDetailsInfo">
+              <el-col v-for="(item,index) in archivesDetailsData.slice(archivesDetailsData.length-5,archivesDetailsData.length)" :key="'last'+index" :span=" 12" class="base-info-item">
+                <span>{{ item.fieldCnName }}：</span>
+                <div v-if="item.fieldName === 'folder_location' && item.context" :style="{ width: item.editLength+'px', marginTop:'-6px'}">
+                  <div v-if="item.context.indexOf(',')">
+                    <el-tag
+                      v-for="(val,key) in item.context.split(',')"
+                      :key="key"
+                      :type="val"
+                      effect="dark"
+                    >
+                      {{ val }}
+                    </el-tag>
+                  </div>
+                  <div v-else-if="!item.context.indexOf(',')">
+                    <el-tag effect="dark">{{ item.context }}</el-tag>
+                  </div>
+                </div>
+                <div v-else :style="{ width: item.editLength+'px'}" :class="[ (item.fieldName === 'borrow_type') ? 'row-state row-lending' : '' ]">
+                  {{ item.context }}
+                </div>
+              </el-col>
+            </el-row>
+          </div>
+          <!-- 附件 -->
+          <!-- <UploadFile v-if="archivesTabIndex==1" ref="uploadFile" class="item-content" :is-upload-detail="false" :category-id="categoryId" :arc-id="arcId" /> -->
+          <!-- <ArchivesList v-if="archivesTabIndex==1" ref="dialogList" class="item-content" :is-upload-detail="false" :category-id="categoryId" :arc-id="arcId" /> -->
+          <div v-if="archivesTabIndex==1">
+            <el-table
+              ref="table"
+              :data="tableData"
+              style="min-width: 100%"
+              height="500"
+              @row-click="clickRowHandler"
+              @cell-dblclick="tableDoubleClick"
+              @selection-change="selectionChangeHandler"
+            >
+              <el-table-column type="index" label="序号" width="55" align="center" />
+              <el-table-column prop="isType" label="所属表" align="center" />
+              <el-table-column prop="group" label="所属全宗" min-width="60" align="center" />
+              <el-table-column prop="category" label="门类名称" min-width="85" align="center" />
+              <el-table-column prop="number" label="档号" min-width="85" align="center" />
+              <el-table-column prop="title" label="题名" show-overflow-tooltip min-width="140" align="center" />
+            </el-table>
+            <!-- @size-change="sizeChangeHandler($event)" @current-change="pageChangeHandler"  -->
+            <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" />
+          </div>
+          <!-- 元数据 -->
+          <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 slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="archivesInfoVisible=false">确定</el-button>
+        </div>
+      </div>
+    </el-dialog>
+    <JuanneiDetail ref="juanneiDetail" />
+  </div>
+</template>
+
+<script>
+import { form } from '@crud/crud'
+import { FetchArchivesDetails, FetchArchivesMetadata } from '@/api/archivesManage/archivesList'
+import JuanneiDetail from './juannei.vue'
+export default {
+  name: 'ArchivesInfo',
+  components: { JuanneiDetail },
+  mixins: [
+    form({})
+  ],
+  props: {
+    categoryId: {
+      type: String,
+      default: function() {
+        return ''
+      }
+    },
+    arcId: {
+      type: String,
+      default: function() {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      detailTitle: '',
+      isHasFile: false, // 卷内/文件才有附件
+      isDetailsInfo: false, // 项目不显示最下面5行基本信息
+      isTidOrBorrow: true, // 卷内不显示tid/借阅状态
+      archivesInfoVisible: false,
+      archivesTabIndex: 0,
+      archivesDetailsData: [],
+      archivesDetailsMetadata: [],
+      xml_show: null,
+      page: {
+        total: 0,
+        size: 10,
+        page: 1
+      },
+      tableData: [
+        {
+          isType: '卷案表',
+          group: ' 全宗A',
+          category: '文书档案（案卷）',
+          number: 'DAS-Y-2020-001',
+          title: '人事劳资文件级文书档案人事'
+        }, {
+          isType: '卷案表',
+          group: ' 全宗A',
+          category: '文书档案（案卷）',
+          number: 'DAS-Y-2020-001',
+          title: '人事劳资文件级文书档案人事'
+        }, {
+          isType: '卷案表',
+          group: ' 全宗A',
+          category: '文书档案（案卷）',
+          number: 'DAS-Y-2020-001',
+          title: '人事劳资文件级文书档案人事'
+        }, {
+          isType: '卷案表',
+          group: ' 全宗A',
+          category: '文书档案（案卷）',
+          number: 'DAS-Y-2020-001',
+          title: '人事劳资文件级文书档案人事'
+        }
+      ], // list
+      selections: [] // table - 选中的
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    getDetial(rowId) {
+      const params = {
+        // categoryId: this.categoryId,
+        categoryId: 'B073E8430B85B4821E7360',
+        // archivesId: rowId
+        archivesId: '2946C34412182B73FBC287'
+      }
+      FetchArchivesDetails(params).then(data => {
+        this.archivesDetailsData = data
+        // 案卷 / 文件的借阅状态
+        this.archivesDetailsData.forEach(item => {
+          if (item.fieldName === 'borrow_type') {
+            if (item.context === 1) {
+              item.context = '待登记'
+            } else if (item.context === 2) {
+              item.context = '待借阅'
+            } else if (item.context === 3) {
+              item.context = '待归还'
+            } else if (item.context === 4 || item.context === '' || item.context === null) {
+              item.context = '-'
+            } else if (item.context === -1) {
+              item.context = '在库'
+            }
+          }
+        })
+        // 如果是卷内 - 不显示‘tid’/'借阅状态'
+        if (!this.isTidOrBorrow) {
+          const indexBorrow = this.archivesDetailsData.findIndex(item => item.fieldName === 'borrow_type')
+          const indexTid = this.archivesDetailsData.findIndex(item => item.fieldName === 'tid')
+          this.archivesDetailsData.splice(indexBorrow, 1)
+          this.archivesDetailsData.splice(indexTid, 1)
+        }
+      })
+      FetchArchivesMetadata(params).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('')
+    },
+    // table
+    clickRowHandler(row) {
+      this.$refs.table.toggleRowSelection(row)
+    },
+    // table
+    selectionChangeHandler(val) {
+      this.selections = val
+    },
+    // table - 双击查看详情
+    tableDoubleClick(row) {
+      this.$refs.juanneiDetail.archivesInfoVisible = true
+      this.$refs.juanneiDetail.getDetial()
+      this.$refs.juanneiDetail.detailTitle = '文件详情'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.base-info,
+.metadata-cont{
+  background-color: #F6F8FC;
+}
+
+// .metadata-cont{
+//   overflow: hidden;
+//   overflow-y: scroll;
+// }
+
+// 档案详情
+.base-info{
+  padding: 20px 0;
+  .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 {
+  color: #0C0E1E !important;
+  height: 530px !important;
+}
+::v-deep .hljs-name{
+  color: #0C0E1E !important;
+}
+</style>
diff --git a/src/views/components/archivesDetail/index.vue b/src/views/components/archivesDetail/juannei.vue
similarity index 57%
rename from src/views/components/archivesDetail/index.vue
rename to src/views/components/archivesDetail/juannei.vue
index b30c0c5..d0172a1 100644
--- a/src/views/components/archivesDetail/index.vue
+++ b/src/views/components/archivesDetail/juannei.vue
@@ -1,14 +1,13 @@
 <template>
-  <el-dialog class="upload-dialog" :title="detailTitle" :close-on-click-modal="false" :visible.sync="archivesInfoVisible" append-to-body :before-close="handleClose">
-    <span class="dialog-right-top" />
-    <span class="dialog-left-bottom" />
+  <el-dialog class="detail-dialog" :title="detailTitle" :close-on-click-modal="false" :visible.sync="archivesInfoVisible" append-to-body :before-close="handleClose">
     <div class="setting-dialog">
-      <div class="archives-info-wrap">
+      <div class="detail-tab tab-content">
         <!-- tab -->
-        <ul class="archives-tab">
-          <li :class="{'active': archivesTabIndex == 0}" @click="changeActiveTab(0)">基本信息</li>
-          <li v-if="isHasFile" :class="{'active': archivesTabIndex == 1}" @click="changeActiveTab(1)">附件</li>
-          <li :class="{'active': archivesTabIndex == 2}" @click="changeActiveTab(2)">元数据</li>
+        <ul class="tab-nav">
+          <li :class="{'active-tab-nav': archivesTabIndex == 0}" @click="changeActiveTab(0)">基本信息</li>
+          <li :class="{'active-tab-nav': archivesTabIndex == 1}" @click="changeActiveTab(1)">原文列表</li>
+          <!-- <li v-if="isHasFile" :class="{'active-tab-nav': archivesTabIndex == 2}" @click="changeActiveTab(2)">附件</li> -->
+          <li :class="{'active-tab-nav': archivesTabIndex == 2}" @click="changeActiveTab(2)">元数据</li>
         </ul>
         <!-- 基本信息 -->
         <div v-if="archivesTabIndex==0" class="base-info item-content">
@@ -43,9 +42,42 @@
           </el-row>
         </div>
         <!-- 附件 -->
-        <UploadFile v-if="archivesTabIndex==1" ref="uploadFile" class="item-content" :is-upload-detail="false" :category-id="categoryId" :arc-id="arcId" />
+        <!-- <UploadFile v-if="archivesTabIndex==1" ref="uploadFile" class="item-content" :is-upload-detail="false" :category-id="categoryId" :arc-id="arcId" /> -->
+        <!-- <ArchivesList v-if="archivesTabIndex==1" ref="dialogList" class="item-content" :is-upload-detail="false" :category-id="categoryId" :arc-id="arcId" /> -->
+        <div v-if="archivesTabIndex==1">
+          <el-table
+            ref="table"
+            :data="tableData"
+            style="min-width: 100%"
+            height="500"
+            @row-click="clickRowHandler"
+            @selection-change="selectionChangeHandler"
+          >
+            <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>
+          <!-- @size-change="sizeChangeHandler($event)" @current-change="pageChangeHandler"  -->
+          <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" />
+        </div>
         <!-- 元数据 -->
-        <div v-if="archivesTabIndex==2" class="item-content">
+        <div v-if="archivesTabIndex==2" class="metadata-cont item-content">
           <pre v-highlightjs="xml_show">
             <code class="highlight_s">
               {[xml_show]}
@@ -53,6 +85,9 @@
           </pre>
         </div>
       </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="archivesInfoVisible=false">确定</el-button>
+      </div>
     </div>
   </el-dialog>
 </template>
@@ -60,14 +95,14 @@
 <script>
 import { form } from '@crud/crud'
 import { FetchArchivesDetails, FetchArchivesMetadata } from '@/api/archivesManage/archivesList'
-import UploadFile from './uploadFile/index'
+// import UploadFile from './uploadFile/index'
+// import ArchivesList from './list/index'
 export default {
   name: 'ArchivesInfo',
-  components: { UploadFile },
+  components: { },
   mixins: [
     form({})
   ],
-  inject: ['recycleMain'],
   props: {
     categoryId: {
       type: String,
@@ -92,7 +127,40 @@ export default {
       archivesTabIndex: 0,
       archivesDetailsData: [],
       archivesDetailsMetadata: [],
-      xml_show: null
+      xml_show: null,
+      page: {
+        total: 0,
+        size: 10,
+        page: 1
+      },
+      tableData: [
+        {
+          isType: '卷案表',
+          group: ' 全宗A',
+          category: '文书档案（案卷）',
+          number: 'DAS-Y-2020-001',
+          title: '人事劳资文件级文书档案人事'
+        }, {
+          isType: '卷案表',
+          group: ' 全宗A',
+          category: '文书档案（案卷）',
+          number: 'DAS-Y-2020-001',
+          title: '人事劳资文件级文书档案人事'
+        }, {
+          isType: '卷案表',
+          group: ' 全宗A',
+          category: '文书档案（案卷）',
+          number: 'DAS-Y-2020-001',
+          title: '人事劳资文件级文书档案人事'
+        }, {
+          isType: '卷案表',
+          group: ' 全宗A',
+          category: '文书档案（案卷）',
+          number: 'DAS-Y-2020-001',
+          title: '人事劳资文件级文书档案人事'
+        }
+      ], // list
+      selections: [] // table - 选中的
     }
   },
   mounted() {
@@ -100,8 +168,10 @@ export default {
   methods: {
     getDetial(rowId) {
       const params = {
-        categoryId: this.categoryId,
-        archivesId: rowId
+        // categoryId: this.categoryId,
+        categoryId: 'B073E8430B85B4821E7360',
+        // archivesId: rowId
+        archivesId: '2946C34412182B73FBC287'
       }
       FetchArchivesDetails(params).then(data => {
         this.archivesDetailsData = data
@@ -235,18 +305,53 @@ export default {
         output.push(span)
       }
       return output.join('')
+    },
+    // table
+    clickRowHandler(row) {
+      this.$refs.table.toggleRowSelection(row)
+    },
+    // table
+    selectionChangeHandler(val) {
+      this.selections = val
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-// .base-info .base-info-item span.el-tag{
-//   width: auto;
-//   color: #fff;
-// }
-// ::v-deep .el-dialog .el-dialog__header .el-dialog__headerbtn {
-//   top: 12px;
-//   right: -320px;
-// }
+.base-info,
+.metadata-cont{
+  background-color: #F6F8FC;
+}
+
+// 档案详情
+.base-info{
+  padding: 20px 0;
+  .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 {
+  color: #0C0E1E !important;
+  height: 530px !important;
+}
+::v-deep .hljs-name{
+  color: #0C0E1E !important;
+}
+
+.svg-style{
+  width: 60px;
+  height: 32px;
+}
 </style>
diff --git a/src/views/components/archivesDetail/project.vue b/src/views/components/archivesDetail/project.vue
new file mode 100644
index 0000000..442b694
--- /dev/null
+++ b/src/views/components/archivesDetail/project.vue
@@ -0,0 +1,353 @@
+<template>
+  <div>
+    <el-dialog class="detail-dialog" :title="detailTitle" :close-on-click-modal="false" :visible.sync="archivesInfoVisible" append-to-body :before-close="handleClose">
+      <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 :class="{'active-tab-nav': archivesTabIndex == 1}" @click="changeActiveTab(1)">案卷列表</li>
+            <!-- <li v-if="isHasFile" :class="{'active-tab-nav': archivesTabIndex == 2}" @click="changeActiveTab(2)">附件</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" v-show="index<archivesDetailsData.length-5" :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>
+            <el-row v-if="isDetailsInfo">
+              <el-col v-for="(item,index) in archivesDetailsData.slice(archivesDetailsData.length-5,archivesDetailsData.length)" :key="'last'+index" :span=" 12" class="base-info-item">
+                <span>{{ item.fieldCnName }}：</span>
+                <div v-if="item.fieldName === 'folder_location' && item.context" :style="{ width: item.editLength+'px', marginTop:'-6px'}">
+                  <div v-if="item.context.indexOf(',')">
+                    <el-tag
+                      v-for="(val,key) in item.context.split(',')"
+                      :key="key"
+                      :type="val"
+                      effect="dark"
+                    >
+                      {{ val }}
+                    </el-tag>
+                  </div>
+                  <div v-else-if="!item.context.indexOf(',')">
+                    <el-tag effect="dark">{{ item.context }}</el-tag>
+                  </div>
+                </div>
+                <div v-else :style="{ width: item.editLength+'px'}" :class="[ (item.fieldName === 'borrow_type') ? 'row-state row-lending' : '' ]">
+                  {{ item.context }}
+                </div>
+              </el-col>
+            </el-row>
+          </div>
+          <!-- 附件 -->
+          <!-- <UploadFile v-if="archivesTabIndex==1" ref="uploadFile" class="item-content" :is-upload-detail="false" :category-id="categoryId" :arc-id="arcId" /> -->
+          <!-- <ArchivesList v-if="archivesTabIndex==1" ref="dialogList" class="item-content" :is-upload-detail="false" :category-id="categoryId" :arc-id="arcId" /> -->
+          <div v-if="archivesTabIndex==1">
+            <el-table
+              ref="table"
+              :data="tableData"
+              style="min-width: 100%"
+              height="500"
+              @row-click="clickRowHandler"
+              @cell-dblclick="tableDoubleClick"
+              @selection-change="selectionChangeHandler"
+            >
+              <el-table-column type="index" label="序号" width="55" align="center" />
+              <el-table-column prop="isType" label="所属表" align="center" />
+              <el-table-column prop="group" label="所属全宗" min-width="60" align="center" />
+              <el-table-column prop="category" label="门类名称" min-width="85" align="center" />
+              <el-table-column prop="number" label="档号" min-width="85" align="center" />
+              <el-table-column prop="title" label="题名" show-overflow-tooltip min-width="140" align="center" />
+            </el-table>
+            <!-- @size-change="sizeChangeHandler($event)" @current-change="pageChangeHandler"  -->
+            <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" />
+          </div>
+          <!-- 元数据 -->
+          <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 slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="archivesInfoVisible=false">确定</el-button>
+        </div>
+      </div>
+    </el-dialog>
+    <AnjuanDetail ref="anjuanDetail" />
+  </div>
+</template>
+
+<script>
+import { form } from '@crud/crud'
+import { FetchArchivesDetails, FetchArchivesMetadata } from '@/api/archivesManage/archivesList'
+import AnjuanDetail from './anjuan.vue'
+export default {
+  name: 'ArchivesInfo',
+  components: { AnjuanDetail },
+  mixins: [
+    form({})
+  ],
+  props: {
+    categoryId: {
+      type: String,
+      default: function() {
+        return ''
+      }
+    },
+    arcId: {
+      type: String,
+      default: function() {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      detailTitle: '',
+      isHasFile: false, // 卷内/文件才有附件
+      isDetailsInfo: false, // 项目不显示最下面5行基本信息
+      isTidOrBorrow: true, // 卷内不显示tid/借阅状态
+      archivesInfoVisible: false,
+      archivesTabIndex: 0,
+      archivesDetailsData: [],
+      archivesDetailsMetadata: [],
+      xml_show: null,
+      page: {
+        total: 0,
+        size: 10,
+        page: 1
+      },
+      tableData: [
+        {
+          isType: '卷案表',
+          group: ' 全宗A',
+          category: '文书档案（案卷）',
+          number: 'DAS-Y-2020-001',
+          title: '人事劳资文件级文书档案人事'
+        }, {
+          isType: '卷案表',
+          group: ' 全宗A',
+          category: '文书档案（案卷）',
+          number: 'DAS-Y-2020-001',
+          title: '人事劳资文件级文书档案人事'
+        }, {
+          isType: '卷案表',
+          group: ' 全宗A',
+          category: '文书档案（案卷）',
+          number: 'DAS-Y-2020-001',
+          title: '人事劳资文件级文书档案人事'
+        }, {
+          isType: '卷案表',
+          group: ' 全宗A',
+          category: '文书档案（案卷）',
+          number: 'DAS-Y-2020-001',
+          title: '人事劳资文件级文书档案人事'
+        }
+      ], // list
+      selections: [] // table - 选中的
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    getDetial(rowId) {
+      const params = {
+        // categoryId: this.categoryId,
+        categoryId: 'B073E8430B85B4821E7360',
+        // archivesId: rowId
+        archivesId: '2946C34412182B73FBC287'
+      }
+      FetchArchivesDetails(params).then(data => {
+        this.archivesDetailsData = data
+        // 案卷 / 文件的借阅状态
+        this.archivesDetailsData.forEach(item => {
+          if (item.fieldName === 'borrow_type') {
+            if (item.context === 1) {
+              item.context = '待登记'
+            } else if (item.context === 2) {
+              item.context = '待借阅'
+            } else if (item.context === 3) {
+              item.context = '待归还'
+            } else if (item.context === 4 || item.context === '' || item.context === null) {
+              item.context = '-'
+            } else if (item.context === -1) {
+              item.context = '在库'
+            }
+          }
+        })
+        // 如果是卷内 - 不显示‘tid’/'借阅状态'
+        if (!this.isTidOrBorrow) {
+          const indexBorrow = this.archivesDetailsData.findIndex(item => item.fieldName === 'borrow_type')
+          const indexTid = this.archivesDetailsData.findIndex(item => item.fieldName === 'tid')
+          this.archivesDetailsData.splice(indexBorrow, 1)
+          this.archivesDetailsData.splice(indexTid, 1)
+        }
+      })
+      FetchArchivesMetadata(params).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('')
+    },
+    // table
+    clickRowHandler(row) {
+      this.$refs.table.toggleRowSelection(row)
+    },
+    // table
+    selectionChangeHandler(val) {
+      this.selections = val
+    },
+    // table - 双击查看详情
+    tableDoubleClick(row) {
+      this.$refs.anjuanDetail.archivesInfoVisible = true
+      this.$refs.anjuanDetail.getDetial()
+      this.$refs.anjuanDetail.detailTitle = '案卷详情'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.base-info,
+.metadata-cont{
+  background-color: #F6F8FC;
+}
+
+// .metadata-cont{
+//   overflow: hidden;
+//   overflow-y: scroll;
+// }
+
+// 档案详情
+.base-info{
+  padding: 20px 0;
+  .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 {
+  color: #0C0E1E !important;
+  height: 530px !important;
+}
+::v-deep .hljs-name{
+  color: #0C0E1E !important;
+}
+</style>
diff --git a/src/views/components/archivesDetail/uploadFile/index.vue b/src/views/components/archivesDetail/uploadFile/index.vue
deleted file mode 100644
index 8ef9671..0000000
--- a/src/views/components/archivesDetail/uploadFile/index.vue
+++ /dev/null
@@ -1,340 +0,0 @@
-<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" />
-      <el-table-column v-if="!isUploadDetail && !recycleMain.isRecycle" 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 { 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
-    },
-    categoryId: {
-      type: String,
-      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)
-      }
-      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.categoryId,
-        'archiveId': this.arcId
-      }
-      FetchInitArchiveFilesView(params).then(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
-      }
-      // 删除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
-      }
-      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/historicalProcess/index.vue b/src/views/system/processManage/historicalProcess/index.vue
index a27963e..1b7f7e3 100644
--- a/src/views/system/processManage/historicalProcess/index.vue
+++ b/src/views/system/processManage/historicalProcess/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 '../runningProcess/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/modelDesign/index.vue b/src/views/system/processManage/modelDesign/index.vue
index 4f9f803..da021ac 100644
--- a/src/views/system/processManage/modelDesign/index.vue
+++ b/src/views/system/processManage/modelDesign/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>模型设计
+  <div>
     <!-- http://192.168.99.84:8080/flowable-ui/modeler/#/processes -->
     <iframe
       ref="iframe"
diff --git a/src/views/system/processManage/runningProcess/module/businessDetails/index.vue b/src/views/system/processManage/runningProcess/module/businessDetails/index.vue
index 390774e..95477c2 100644
--- a/src/views/system/processManage/runningProcess/module/businessDetails/index.vue
+++ b/src/views/system/processManage/runningProcess/module/businessDetails/index.vue
@@ -10,15 +10,15 @@
     </el-table>
     <!-- @size-change="sizeChangeHandler($event)" @current-change="pageChangeHandler"  -->
     <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" />
-    <Detail ref="archivesDetail" />
+    <projectDetail ref="archivesDetail" />
   </div>
 </template>
 
 <script>
-import Detail from '@/views/components/archivesDetail/index.vue'
+import projectDetail from '@/views/components/archivesDetail/project.vue'
 export default {
   name: 'BusinessDetails',
-  components: { Detail },
+  components: { projectDetail },
   data() {
     return {
       page: {
@@ -28,7 +28,7 @@ export default {
       },
       tableData: [{
         groups: '全宗A',
-        name: '文书档案（文件）',
+        name: '文书档案（项目）',
         type: '按件整理',
         number: 'DAS-Y-2020-001',
         title: '人事劳资文件级文书档案'
@@ -69,6 +69,8 @@ export default {
     // table - 双击查看详情
     tableDoubleClick(row) {
       this.$refs.archivesDetail.archivesInfoVisible = true
+      this.$refs.archivesDetail.getDetial()
+      this.$refs.archivesDetail.detailTitle = '项目详情'
     },
     // 每页条数改变
     sizeChangeHandler(e) {
diff --git a/src/views/system/processManage/runningProcess/module/detail.vue b/src/views/system/processManage/runningProcess/module/detail.vue
index 1ea97ab..dca16c0 100644
--- a/src/views/system/processManage/runningProcess/module/detail.vue
+++ b/src/views/system/processManage/runningProcess/module/detail.vue
@@ -85,12 +85,6 @@ export default {
 
 <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;
@@ -160,8 +154,5 @@ export default {
       }
     }
   }
-  ::v-deep .el-pagination{
-    margin: 20px 0 10px 0 !important;
-  }
 }
 </style>
diff --git a/src/views/system/processManage/runningProcess/module/taskList/index.vue b/src/views/system/processManage/runningProcess/module/taskList/index.vue
index 4a7c1ff..20715a5 100644
--- a/src/views/system/processManage/runningProcess/module/taskList/index.vue
+++ b/src/views/system/processManage/runningProcess/module/taskList/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-table :data="tableData" style="width: 100%" height="300">
+    <el-table :data="tableData" style="width: 100%" height="300" @cell-dblclick="tableDoubleClick">
       <el-table-column prop="state" label="状态" align="center" width="90px">
         <template slot-scope="scope">
           <div :class="scope.row.state ? 'process-state' :'process-state ing-state'">{{ scope.row.state ? '已完成':'进行中' }}</div>
@@ -13,12 +13,17 @@
     </el-table>
     <!-- @size-change="sizeChangeHandler($event)" @current-change="pageChangeHandler" -->
     <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" />
+    <TaskDetail ref="taskDetail" />
   </div>
 </template>
 
 <script>
-
+import TaskDetail from './module/detail'
 export default {
+  name: 'TaskList',
+  components: {
+    TaskDetail
+  },
   data() {
     return {
       page: {
@@ -71,6 +76,10 @@ export default {
       this.params.page = e - 1
       // this.doQuery(this.params)
       this.loading = false
+    },
+    tableDoubleClick() {
+      this.$refs.taskDetail.taskDetailVisible = true
+      this.$refs.taskDetail.getDetial()
     }
   }
 }
diff --git a/src/views/system/processManage/runningProcess/module/taskList/module/detail.vue b/src/views/system/processManage/runningProcess/module/taskList/module/detail.vue
new file mode 100644
index 0000000..bf50e9c
--- /dev/null
+++ b/src/views/system/processManage/runningProcess/module/taskList/module/detail.vue
@@ -0,0 +1,166 @@
+<template>
+  <div>
+    <el-dialog class="detail-dialog" title="任务详情" :close-on-click-modal="false" :visible.sync="taskDetailVisible" append-to-body :before-close="handleClose">
+      <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 :class="{'active-tab-nav': archivesTabIndex == 1}" @click="changeActiveTab(1)">变量列表</li>
+          </ul>
+          <!-- 基本信息 -->
+          <div v-if="archivesTabIndex==0" class="base-info item-content">
+            <el-row>
+              <el-col :span="12" class="base-info-item">
+                <span>任务名：</span>
+                <p>XXXXX档案题名（文件）</p>
+              </el-col>
+              <el-col :span="12" class="base-info-item">
+                <span>执行人：</span>
+                <p>admin</p>
+              </el-col>
+              <el-col :span="12" class="base-info-item">
+                <span>创建时间：</span>
+                <p>2020-10-01 10:26:32</p>
+              </el-col>
+              <el-col :span="12" class="base-info-item">
+                <span>完成时间：</span>
+                <p>2020-10-01 10:26:32</p>
+              </el-col>
+              <el-col :span="12" class="base-info-item">
+                <span>状态：</span>
+                <p>已完成</p>
+              </el-col>
+            </el-row>
+          </div>
+          <div v-if="archivesTabIndex==1">
+            <el-table
+              ref="table"
+              :data="tableData"
+              style="min-width: 100%"
+              height="500"
+              @row-click="clickRowHandler"
+              @selection-change="selectionChangeHandler"
+            >
+              <el-table-column type="index" label="序号" width="55" align="center" />
+              <el-table-column prop="name" label="变量名" align="center" />
+              <el-table-column prop="value" label="变量值" min-width="60" align="center" />
+            </el-table>
+          </div>
+        </div>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="taskDetailVisible=false">确定</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TaskDetail',
+  props: {
+    categoryId: {
+      type: String,
+      default: function() {
+        return ''
+      }
+    },
+    arcId: {
+      type: String,
+      default: function() {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      isTidOrBorrow: true, // 卷内不显示tid/借阅状态
+      taskDetailVisible: false,
+      archivesTabIndex: 0,
+      page: {
+        total: 0,
+        size: 10,
+        page: 1
+      },
+      tableData: [
+        {
+          name: '变量A',
+          value: '值A'
+        },
+        {
+          name: '变量B',
+          value: '值B'
+        },
+        {
+          name: '变量C',
+          value: '值C'
+        },
+        {
+          name: '变量D',
+          value: '值D'
+        }
+      ], // list
+      selections: [] // table - 选中的
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    changeActiveTab(index) {
+      this.archivesTabIndex = index
+    },
+    // 删除 - 关闭
+    handleClose(done) {
+      this.taskDetailVisible = false
+      done()
+    },
+    // table
+    clickRowHandler(row) {
+      this.$refs.table.toggleRowSelection(row)
+    },
+    // table
+    selectionChangeHandler(val) {
+      this.selections = val
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.base-info,
+.metadata-cont{
+  background-color: #F6F8FC;
+}
+
+// .metadata-cont{
+//   overflow: hidden;
+//   overflow-y: scroll;
+// }
+
+// 档案详情
+.base-info{
+  padding: 20px 0;
+  .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 {
+  color: #0C0E1E !important;
+  height: 530px !important;
+}
+::v-deep .hljs-name{
+  color: #0C0E1E !important;
+}
+</style>