档案管理-页面

src/assets/styles/archives-manage.scss

@@ -8,6 +8,7 @@ $arcCyan: #0FBED9;
 
 ::v-deep.input-prepend{
   position: relative;
+  z-index: 1001;
   .el-input__inner {
     padding-left: 80px;
   }
@@ -22,6 +23,14 @@ $arcCyan: #0FBED9;
     line-height: 32px;
     .el-input__inner {
       padding-left: 15px;
+      color: #339CFF;
+    }
+    .el-input__inner:hover,
+    .el-input__inner:focus{
+      color: #339CFF;
+    }
+    .el-select__caret{
+      color: #339CFF;
     }
   }
 }
@@ -114,7 +123,6 @@ $arcCyan: #0FBED9;
     &.is-disabled{
       color: #666;
     }
-    
   }
   .iconfont{
     line-height: 30px;
@@ -215,6 +223,8 @@ $arcCyan: #0FBED9;
   }
 }
 .upload-file{
+  position: relative;
+  z-index: 1001;
   .upload-curd{
     display: flex;
     flex-direction: row;
@@ -296,3 +306,204 @@ $arcCyan: #0FBED9;
   color: #fff;
   line-height: 32px;
 }
+
+// 绑定标签
+.bindingDialog{
+  ::v-deep.el-dialog{
+    width: 720px;
+  }
+  ::v-deep.el-dialog__body{
+    padding: 35px 35px 58px 35px;
+  }
+}
+.rebinding {
+  display: flex;
+  justify-content: space-between;
+  padding: 50px 65px 35px 65px;
+  span{
+    display: block;
+    width: 60px;
+    line-height: 36px;
+    color: #3A99FD;
+  }
+  ::v-deep.el-input {
+    .el-input__inner{
+      font-size: 14px;
+      height: 36px;
+      line-height: 36px;
+      color: #fff;
+      border: 1px solid #3A99FD;
+      background-color: transparent;
+    }
+  }
+}
+
+.binding-flow{
+  .step-item{
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    z-index: 1;
+    &::before{
+      content: "";
+      position: absolute;
+      left: 15px;
+      top: 10px;
+      width: 1px;
+      height: 100%;
+      background-color: #3A99FD;
+      z-index: 1;
+    }
+    &:last-child::before{
+      display: none;
+    }
+  }
+  .step-left-num{
+    position: relative;
+    display: block;
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 50%;
+    font-size: 16px;
+    text-align: center;
+    color: #fff;
+    border: 1px solid #339CFF;
+    background-color:#031435;
+    z-index: 4;
+    &.step-active{
+      background-color: #339CFF;
+    }
+    &.step-loading{
+      &::before,
+      &::after{
+        content: "";
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        border: 1px solid #13439E;
+        box-shadow: inset 0px 0px 8px 1px #13439E;
+        margin: -20px 0 0 -20px;
+        z-index: 1;
+      }
+      &::before{
+        animation: halo 2s linear 0.5s infinite;
+      }
+      &::after{
+        animation: halo 2s linear 1.5s infinite;
+      }
+    }
+  }
+  // 晕开效果
+  @keyframes halo {
+    0% {
+      transform: scale(1);
+      -webkit-transform: scale(1);
+      opacity: 0.0;
+    }
+    25% {
+      transform: scale(1);
+      -webkit-transform: scale(1);
+      opacity: 0.1;
+    }
+    50% {
+      transform: scale(1);
+      -webkit-transform: scale(1);
+      opacity: 0.3;
+    }
+    75% {
+      transform: scale(1.2);
+      -webkit-transform: scale(1.2);
+      opacity: 0.5;
+    }
+    100% {
+      transform: scale(1.5);
+      -webkit-transform: scale(1.5);
+      opacity: 0.0;
+    }
+  }
+  .step-right-cont{
+    flex: 1;
+    margin-left: 12px;
+    .step-title{
+      line-height: 30px;
+      color: #339CFF;
+      span{
+        padding-left: 10px;
+        font-weight: bold;
+        color: #fff;
+      }
+    }
+    .step-tip{
+      padding: 0 10px;
+      height: 40px;
+      line-height: 40px;
+      color: #13439E;
+      background-color: #02255F;
+      border-radius: 4px;
+      &.tip-active{
+        color: #339CFF;
+      }
+      &.tip-error{
+        color: #EF3147;
+      }
+    }
+  }
+}
+
+// 分卷装盒
+.partPackingDialog{
+  ::v-deep .el-dialog{
+    width: 950px !important;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    margin-top: 2vh !important;
+  }
+  ::v-deep .el-dialog__body{
+    padding: 0;
+  }
+  ::v-deep .dialog-footer{
+    margin: 20px auto 0 auto;
+    padding-bottom: 20px;
+  }
+  .packing-head{
+    border-bottom: 1px solid #339CFF;
+    .head-search{
+      margin-bottom: 0;
+    }
+  }
+}
+.part-packing-cont{
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.part-packing-item{
+  width: calc(100vh/2);
+  .part-packing-title{
+    padding: 0 30px;
+    height: 40px;
+    line-height: 40px;
+    font-size: 16px;
+    font-weight: normal;
+    color: #fff;
+  }
+  ::v-deep.el-table{
+    overflow-x: hidden;
+    overflow-y: auto;
+    // background: #02255F;
+    border: 2px solid #02255f;
+    border-top: none;
+    // border-right: none;
+    .el-table__body-wrapper{
+      background-color: #031435;
+    }
+  }
+}

src/assets/styles/yxk-admin.scss

@@ -883,5 +883,51 @@ input[type='number'] {
   }
 }
 
-
-
+// alert 样式
+.el-message-box{
+  position: relative;
+  width: 588px;
+  border: 2px solid #339CFF;
+  border-bottom: none;
+  border-radius: 4px 4px 0 0;
+  background-color: #031435;
+  overflow: visible;
+  &::after{
+    position: absolute;
+    left: -2px;
+    bottom: -30px;
+    content: "";
+    width: 589px;
+    height: 30px;
+    background:  url(~@/assets/images/alert_bottom.png) no-repeat;
+    background-size: contain;
+  }
+  .el-message-box__header{
+    padding: 18px 60px;
+    background-color: #339CFF;
+    .el-message-box__title{
+      font-weight: bold;
+      color: #fff;
+    }
+    .el-message-box__headerbtn{
+      top: -36px;
+      right: -16px;
+    }
+    .el-icon-close{
+        font-family: "iconfont" !important;
+        font-style: normal;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        font-size: 24px;
+        color: #339cff;
+      &::before{
+        content: "\E60C";
+      }
+    }
+  }
+  .el-message-box__content{
+    height: 110px;
+    padding: 35px 60px 15px 60px;
+    color: #fff;
+  }
+}

src/views/archivesManage/archivesList/archivesDetail.vue

@@ -25,21 +25,29 @@
       </div>
       <crudOperation :permission="permission">
         <template v-slot:right>
+          <!-- 删除btn 多选 -->
           <el-button v-permission="permission.del" icon="el-icon-delete" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections.length === 0" @click="toDelete(crud.selections)">删除</el-button>
+          <!-- 导出btn -->
           <el-button v-if="selectedCategory.isType !== 1 && selectedCategory.isType !== 2" v-permission="permission.download" :loading="crud.downloadLoading" :disabled="!crud.data.length" size="mini" icon="el-icon-download" @click="crud.doExport">导出</el-button>
+          <!-- 上传附件btn 针对卷内/文件 单选 -->
           <el-button v-if="selectedCategory.isType === 4 || selectedCategory.isType === 5" :disabled="crud.selections.length !== 1" size="mini" icon="el-icon-download" @click="uploadFile">上传附件</el-button>
         </template>
         <template v-slot:rightButtonGroup>
           <div v-if="selectedCategory.isType === 3 || selectedCategory.isType === 5" class="archives-handler-btn">
-            <el-button class="packing-btn iconfont icon-weibiaoti-2" type="primary" @click="packingVisible=true">装盒</el-button>
-            <el-button v-if="selectedCategory.isType === 3" class="part-btn iconfont icon-weibiaoti-2" type="primary">分卷装盒</el-button>
+            <!-- 装盒btn 多选  -->
+            <el-button class="packing-btn iconfont icon-weibiaoti-2" type="primary" :disabled="crud.selections.length === 0" @click="handlePacking(crud.selections)">装盒</el-button>
+            <!-- 分卷装盒btn 针对案卷-单选 -->
+            <el-button v-if="selectedCategory.isType === 3" class="part-btn iconfont icon-weibiaoti-2" type="primary" :disabled="crud.selections.length !== 1" @click="handlePartPacking(crud.selections)">分卷装盒</el-button>
             <!-- <el-button class="warehousing-btn iconfont icon-weibiaoti-2" type="primary">入库</el-button> -->
-            <el-button class="lending-btn iconfont icon-weibiaoti-2" type="primary">借阅</el-button>
-            <el-button class="binding-btn iconfont icon-weibiaoti-2" type="primary">绑定标签</el-button>
+            <!-- 借阅btn 多选 -->
+            <el-button class="lending-btn iconfont icon-weibiaoti-2" :disabled="crud.selections.length === 0" type="primary" @click="lengingVisible=true">借阅</el-button>
+            <!-- 绑定标签btn 单选 -->
+            <el-button class="binding-btn iconfont icon-weibiaoti-2" type="primary" :disabled="crud.selections.length !== 1" @click="handleBinding(crud.selections)">绑定标签</el-button>
           </div>
         </template>
       </crudOperation>
     </div>
+
     <!--新增 / 编辑 表单组件-->
     <el-dialog class="preview-dialog" :modal-append-to-body="false" :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title">
       <span class="dialog-right-top" />
@@ -66,7 +74,7 @@
     </el-dialog>
 
     <!-- 删除档案 -->
-    <el-dialog title="删除档案" :visible.sync="deleteVisible" :before-close="handleClose">
+    <el-dialog title="删除档案" :visible.sync="deleteVisible" :close-on-click-modal="false" :before-close="handleClose">
       <span class="dialog-right-top" />
       <span class="dialog-left-bottom" />
       <div class="setting-dialog">
@@ -123,25 +131,26 @@
     <pagination />
 
     <!-- 档案详情 -->
-    <el-dialog class="upload-dialog" title="档案详情" :visible.sync="archivesInfoVisible" :before-close="handleClose">
+    <ArchivesInfo ref="archivesInfo" />
+    <!-- 装盒 -->
+    <Packing ref="packing" />
+    <!-- 装盒 -->
+    <PartPacking ref="partPacking" />
+    <!-- 绑定标签 -->
+    <Binding ref="bind" :is-binding="isBinding" />
+    <!-- 借阅 -->
+    <el-dialog title="借阅" :visible.sync="lengingVisible" :close-on-click-modal="false" :before-close="handleClose">
       <span class="dialog-right-top" />
       <span class="dialog-left-bottom" />
       <div class="setting-dialog">
-        <ArchivesInfo />
-        <div slot="footer" class="dialog-footer">
-          <el-button type="primary" @click.native="handleDeltConfirm">确定</el-button>
+        <div class="dialog-delt">
+          <p><span>确定将当前档案加入借阅列表？</span></p>
         </div>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click.native="lengingVisible=false">确定</el-button>
         </div>
-    </el-dialog>
-
-    <el-dialog class="upload-dialog" title="装盒" :visible.sync="packingVisible" :before-close="handleClose">
-      <span class="dialog-right-top" />
-      <span class="dialog-left-bottom" />
-      <div class="setting-dialog">
-        <Packing />
       </div>
     </el-dialog>
-
   </div>
 </template>
 
@@ -153,12 +162,14 @@ import crudOperation from '@crud/CRUD.operation'
 import rrOperation from '@crud/RR.operation'
 import pagination from '@crud/Pagination'
 import PreviewForm from '@/views/components/category/PreviewForm'
-import UploadFile from './module/uploadFile'
-import ArchivesInfo from './module/archivesInfo'
-import Packing from './module/packing'
+import UploadFile from './module/uploadFile/index'
+import ArchivesInfo from './module/archivesInfo/index'
+import Packing from './module/packing/index'
+import PartPacking from './module/partPacking/index'
+import Binding from './module/binding/index'
 
 export default {
-  components: { crudOperation, rrOperation, pagination, PreviewForm, UploadFile, ArchivesInfo, Packing },
+  components: { crudOperation, rrOperation, pagination, PreviewForm, UploadFile, ArchivesInfo, Packing, Binding, PartPacking },
   mixins: [
     presenter(),
     header(),
@@ -220,15 +231,16 @@ export default {
       tableDisplayFields: [], // table-list-title字段
       getTableDisplayFieldsLoading: false, // table-loading
       formPreviewData: [], // 预览界面data
-      isEditOrAdd: '',
-      selectedData: null,
+      isEditOrAdd: '', // 判断crud-add/edit-btn
+      selectedData: null, // table已选择的
       archivesTabIndex: 0, // 新增
-      tabDisabled: true,
       arcId: null, // 档案ID
-      arrySort: [],
+      arrySort: [], // 多项sort-query
       uploadFileVisible: false, // 上传附件
       archivesInfoVisible: false, // 档案详情
-      packingVisible: false // 装盒
+      lengingVisible: false, // 借阅
+      isBinding: false // 判断是否已绑定标签
+
     }
   },
   watch: {
@@ -298,11 +310,9 @@ export default {
       this.selectedData = crud.selections
       this.archivesTabIndex = 0
       if (this.isEditOrAdd === 'add') {
-        this.tabDisabled = true
         this.arcId = null
       } else if (this.isEditOrAdd === 'edit') {
         this.arcId = this.selectedData[0].id
-        this.tabDisabled = false
       }
       this.form.dictionaryConfigId = {}
       this.formPreviewData = []
@@ -332,7 +342,7 @@ export default {
     },
     // table - 双击查看详情
     tableDoubleClick(row) {
-      this.archivesInfoVisible = true
+      this.$refs.archivesInfo.archivesInfoVisible = true
       const params = {
         categoryId: this.selectedCategory.id,
         archivesId: row.id
@@ -383,11 +393,31 @@ export default {
         this.$refs.table.doLayout()
       })
     },
+    // 上传附件
     uploadFile() {
       this.uploadFileVisible = true
     },
     uploadFileSave() {
       this.uploadFileVisible = false
+    },
+    // 绑定
+    handleBinding(data) {
+      this.$refs.bind.bindingVisible = true
+      if (data.tid == null) {
+        this.isBinding = false
+        this.$refs.bind.bindingTitle = '绑定标签'
+      } else {
+        this.isBinding = true
+        this.$refs.bind.bindingTitle = '重新绑定'
+      }
+    },
+    // 装盒
+    handlePacking(data) {
+      this.$refs.packing.packingVisible = true
+    },
+    // 分卷装盒
+    handlePartPacking(data) {
+      this.$refs.partPacking.partPackingVisible = true
     }
   }
 }

src/views/archivesManage/archivesList/module/archivesInfo.vue

@@ -1,90 +0,0 @@
-<template>
-  <div class="archives-info-wrap">
-    <!-- tab -->
-    <ul class="archives-tab">
-      <li :class="{'active': archivesTabIndex == 0}" @click="changeActiveTab(0)">基本信息</li>
-      <li :class="{'active': archivesTabIndex == 1}" @click="changeActiveTab(1)">附件</li>
-      <li :class="{'active': archivesTabIndex == 2}" @click="changeActiveTab(2)">元数据</li>
-    </ul>
-    <!-- 基本信息 -->
-    <div v-if="archivesTabIndex==0" class="base-info">
-      <el-row>
-        <el-col :span="12" class="base-info-item">
-          <span>全宗号：</span>
-          <p>父区域-子区域-设备1-1区1列1节1层左边</p>
-        </el-col>
-        <el-col :span="12" class="base-info-item">
-          <span>TID：</span>
-          <p>E2806894200040159AF8AD06</p>
-        </el-col>
-        <el-col :span="12" class="base-info-item">
-          <span>全宗号：</span>
-          <p>父区域-子区域-设备1-1区1列1节1层左边</p>
-        </el-col>
-        <el-col :span="12" class="base-info-item">
-          <span>TID：</span>
-          <p>E2806894200040159AF8AD06</p>
-        </el-col>
-      </el-row>
-    </div>
-    <!-- 附件 -->
-    <UploadFile v-if="archivesTabIndex==1" :is-upload-detail="false" />
-    <!-- 元数据 -->
-    <div v-if="archivesTabIndex==2">
-      <pre v-highlightjs="xml_show">
-        <code class="highlight_s" />
-      </pre>
-    </div>
-  </div>
-</template>
-
-<script>
-import vkbeautify from 'vkbeautify'
-import { form } from '@crud/crud'
-import UploadFile from './uploadFile'
-export default {
-  name: 'ArchivesInfo',
-  components: { UploadFile },
-  mixins: [
-    form({})
-  ],
-  data() {
-    return {
-      archivesTabIndex: 0,
-      textareaoutput: null,
-      xml_show: null
-    }
-  },
-  created() {
-  },
-  mounted() {
-    this.setXml()
-  },
-  methods: {
-    setXml() {
-      const xmlstr = `<?xml version="1.0" encoding="UTF-8"?>
-          <note>
-          <to>Tove</to>
-          <from>Jani</from> 
-          <heading>Reminder</heading>
-          <body>Don't forget me this weekend!</body>
-          </note>`
-
-      this.xml_show = vkbeautify.xml(xmlstr)
-
-      console.log('xmlstr:', xmlstr)
-      console.log('xml转json:', this.$x2js.xml2js(xmlstr))
-      console.log('json转xml:', this.$x2js.js2xml(this.$x2js.xml2js(xmlstr)))
-      this.textareaoutput = xmlstr
-    },
-    changeActiveTab(index) {
-      this.archivesTabIndex = index
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "~@/assets/styles/archives-manage.scss";
-
-</style>

src/views/archivesManage/archivesList/module/archivesInfo/index.vue

@@ -0,0 +1,103 @@
+<template>
+  <el-dialog class="upload-dialog" title="档案详情" :close-on-click-modal="false" :visible.sync="archivesInfoVisible" :before-close="handleClose">
+    <span class="dialog-right-top" />
+    <span class="dialog-left-bottom" />
+    <div class="setting-dialog">
+      <div class="archives-info-wrap">
+        <!-- tab -->
+        <ul class="archives-tab">
+          <li :class="{'active': archivesTabIndex == 0}" @click="changeActiveTab(0)">基本信息</li>
+          <li :class="{'active': archivesTabIndex == 1}" @click="changeActiveTab(1)">附件</li>
+          <li :class="{'active': archivesTabIndex == 2}" @click="changeActiveTab(2)">元数据</li>
+        </ul>
+        <!-- 基本信息 -->
+        <div v-if="archivesTabIndex==0" class="base-info">
+          <el-row>
+            <el-col :span="12" class="base-info-item">
+              <span>全宗号：</span>
+              <p>父区域-子区域-设备1-1区1列1节1层左边</p>
+            </el-col>
+            <el-col :span="12" class="base-info-item">
+              <span>TID：</span>
+              <p>E2806894200040159AF8AD06</p>
+            </el-col>
+            <el-col :span="12" class="base-info-item">
+              <span>全宗号：</span>
+              <p>父区域-子区域-设备1-1区1列1节1层左边</p>
+            </el-col>
+            <el-col :span="12" class="base-info-item">
+              <span>TID：</span>
+              <p>E2806894200040159AF8AD06</p>
+            </el-col>
+          </el-row>
+        </div>
+        <!-- 附件 -->
+        <UploadFile v-if="archivesTabIndex==1" :is-upload-detail="false" />
+        <!-- 元数据 -->
+        <div v-if="archivesTabIndex==2">
+          <pre v-highlightjs="xml_show">
+            <code class="highlight_s" />
+          </pre>
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click.native="handleDeltConfirm">确定</el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import vkbeautify from 'vkbeautify'
+import { form } from '@crud/crud'
+import UploadFile from '../uploadFile/index'
+export default {
+  name: 'ArchivesInfo',
+  components: { UploadFile },
+  mixins: [
+    form({})
+  ],
+  data() {
+    return {
+      archivesInfoVisible: false,
+      archivesTabIndex: 0,
+      textareaoutput: null,
+      xml_show: null
+    }
+  },
+  created() {
+  },
+  mounted() {
+    this.setXml()
+  },
+  methods: {
+    setXml() {
+      const xmlstr = `<?xml version="1.0" encoding="UTF-8"?>
+          <note>
+          <to>Tove</to>
+          <from>Jani</from> 
+          <heading>Reminder</heading>
+          <body>Don't forget me this weekend!</body>
+          </note>`
+      this.xml_show = vkbeautify.xml(xmlstr)
+      // console.log('xmlstr:', xmlstr)
+      // console.log('xml转json:', this.$x2js.xml2js(xmlstr))
+      // console.log('json转xml:', this.$x2js.js2xml(this.$x2js.xml2js(xmlstr)))
+      this.textareaoutput = xmlstr
+    },
+    changeActiveTab(index) {
+      this.archivesTabIndex = index
+    },
+    // 删除 - 关闭
+    handleClose(done) {
+      this.archivesInfoVisible = false
+      done()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/archives-manage.scss";
+
+</style>

src/views/archivesManage/archivesList/module/binding/index.vue

@@ -0,0 +1,133 @@
+<template>
+  <div>
+    <el-dialog class="bindingDialog" :title="bindingTitle" :visible.sync="bindingVisible" :close-on-click-modal="false" :before-close="handleClose">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <div class="binding-wrap">
+          <div v-if="isBinding" class="rebinding">
+            <span>TID</span>
+            <el-input v-model="tidCode" placeholder="请输入内容" />
+          </div>
+          <div v-else class="binding-flow">
+            <div class="step-item">
+              <!-- step-active 完成  step-loading 进行种 -->
+              <span class="step-left-num step-active">1</span>
+              <div class="step-right-cont">
+                <p class="step-title">第一步<span>连接读写器</span></p>
+                <p class="step-tip tip-active">连接成功</p>
+              <!-- err: 连接失败，请检查网络 -->
+              <!-- err: 当前电脑未绑定读写器，请到档案设备里进行绑定 -->
+              </div>
+            </div>
+            <div class="step-item">
+              <span class="step-left-num step-active step-loading">2</span>
+              <div class="pulse1" />
+              <div class="pulse2" />
+              <div class="pulse3" />
+              <div class="step-right-cont">
+                <p class="step-title">第二步<span>放入标签</span></p>
+                <p class="step-tip tip-error">请放入标签</p>
+              <!-- tip: 已放入标签 -->
+              <!-- err: 未读取到标签，请重新放入 -->
+              </div>
+            </div>
+            <div class="step-item">
+              <span class="step-left-num">3</span>
+              <div class="step-right-cont">
+                <p class="step-title">第三步<span>读取标签</span></p>
+                <p class="step-tip">放入标签后开始读取标签</p>
+              <!-- tip: 读取成功 -->
+              <!-- err: 当前标签存在多个，请取出多余的标签只保留一张！ -->
+              </div>
+            </div>
+            <div class="step-item">
+              <span class="step-left-num">4</span>
+              <div class="step-right-cont">
+                <p class="step-title">第四步<span>开始绑定</span></p>
+                <p class="step-tip">标签读取成功后，开始绑定档案</p>
+              <!-- tip: 绑定中 -->
+              <!-- err: 当前标签已被绑定，是否覆盖？  -->
+              <!-- 3s后 弹出覆盖绑定dialog -->
+              <!-- tip: 已覆盖 -->
+              <!-- err: 绑定失败，请拿走当前标签  -->
+              </div>
+            </div>
+            <div class="step-item">
+              <span class="step-left-num">5</span>
+              <div class="step-right-cont">
+                <p class="step-title">第五步<span>绑定成功</span></p>
+                <p class="step-tip">当前标签与档案绑定成功</p>
+              <!-- tip: 绑定成功 -->
+              </div>
+            </div>
+          </div>
+          <div v-if="isBinding" slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="isBinding=false">下一步</el-button>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+
+    <!-- 是否覆盖 -->
+    <el-dialog title="覆盖绑定" :append-to-body="true" :visible.sync="coverBindingVisible" :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">确定覆盖</el-button>
+          <el-button type="text" @click="coverBindingVisible=false">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Binging',
+  components: {},
+  mixins: [],
+  props: {
+    isBinding: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      bindingVisible: false, // 绑定标签
+      bindingTitle: '绑定标签',
+      tidCode: null,
+      coverBindingVisible: false
+    }
+  },
+  mounted() {
+    // test
+    // setTimeout(() => {
+    //   this.coverBindingVisible = true
+    // }, 4000)
+  },
+  methods: {
+    // 右边初始化数据是空
+    // [CRUD.HOOK.beforeRefresh]() {
+    //   if (this.$refs.dictDetail) {
+    //     this.$refs.dictDetail.query.id = ''
+    //   }
+    //   return true
+    // },
+    // 关闭
+    handleClose(done) {
+      this.coverBindingVisible = false
+      done()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/archives-manage.scss";
+</style>

src/views/archivesManage/archivesList/module/packing.vue

@@ -1,109 +0,0 @@
-<template>
-  <div class="upload-file">
-    <div class="head-container packing-head">
-      <div class="head-search">
-        <!-- 搜索 -->
-        <el-input v-model="query[inputSelect]" clearable size="small" placeholder="请输入" style="width: 245px;" class="input-prepend filter-item" @keyup.enter.native="crud.toQuery">
-          <el-select slot="prepend" v-model="inputSelect" style="width: 90px" @change="querySelect">
-            <el-option
-              v-for="item in queryOption"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
-        </el-input>
-        <rrOperation />
-      </div>
-      <div class="selct-data-head">
-        <p>数据来源：文件  2条数据</p>
-      </div>
-    </div>
-    <!--表格渲染-->
-    <el-table
-      ref="table"
-      :data="tableData"
-      style="min-width: 100%"
-      height="calc(100vh - 382px)"
-      @row-click="clickRowHandler"
-      @selection-change="selectionChangeHandler"
-    >
-      <el-table-column type="index" label="序号" width="80" align="center" />
-      <el-table-column prop="fileName" label="已装" min-width="100" align="center" />
-      <el-table-column prop="fileFormat" label="盒名称" min-width="60" align="center" />
-      <el-table-column prop="fileSize" label="TID" min-width="120" align="center" />
-      <el-table-column prop="fileDpi" label="条形码" min-width="120" align="center" />
-      <el-table-column prop="create_date" label="操作" min-width="100" align="center">
-        <template>
-          <el-button class="packing-handle-btn iconfont icon-weibiaoti-2" @click="open">装盒</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
-</template>
-
-<script>
-import { header, form } from '@crud/crud'
-import rrOperation from '@crud/RR.operation'
-import data from './data.json'
-export default {
-  name: 'Packing',
-  components: { rrOperation },
-  mixins: [
-    header(),
-    form({})
-  ],
-  data() {
-    return {
-      tableData: [],
-      selections: [],
-      inputSelect: null,
-      queryOption: [
-        { value: '1', label: '盒名称' },
-        { value: '2', label: 'TID' },
-        { value: '3', label: '条形码' }
-      ]
-    }
-  },
-  created() {
-    this.tableData = data.data
-    // 初始化带select的输入框的 - 搜索
-    this.inputSelect = this.queryOption[0].value
-  },
-  methods: {
-    // 搜索-select
-    querySelect(val) {
-      this.inputSelect = val
-    },
-    open() {
-      this.$alert('装盒成功', '提示', {
-        showConfirmButton: false
-      }).then(() => {
-        console.log('then')
-      }).catch((err) => {
-        console.log(err)
-      })
-    },
-    // table
-    clickRowHandler(row) {
-      this.$refs.table.clearSelection()
-      this.$refs.table.toggleRowSelection(row)
-    },
-    // table
-    selectionChangeHandler(val) {
-      this.selections = val
-      console.log(this.selections)
-    },
-    // dialog - close
-    handleClose(done) {
-      this.showCoverVisible = false
-      done()
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "~@/assets/styles/archives-manage.scss";
-
-</style>

src/views/archivesManage/archivesList/module/packing/index.vue

@@ -0,0 +1,116 @@
+<template>
+  <el-dialog class="upload-dialog" title="装盒" :visible.sync="packingVisible" :close-on-click-modal="false" :before-close="handleClose">
+    <span class="dialog-right-top" />
+    <span class="dialog-left-bottom" />
+    <div class="setting-dialog">
+      <div class="upload-file">
+        <div class="head-container packing-head">
+          <div class="head-search">
+            <!-- 搜索 -->
+            <el-input v-model="query[inputSelect]" clearable size="small" placeholder="请输入" style="width: 245px;" class="input-prepend filter-item" @keyup.enter.native="crud.toQuery">
+              <el-select slot="prepend" v-model="inputSelect" style="width: 90px" @change="querySelect">
+                <el-option
+                  v-for="item in queryOption"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-input>
+            <rrOperation />
+          </div>
+          <div class="selct-data-head">
+            <p>数据来源：文件  2条数据</p>
+          </div>
+        </div>
+        <!--表格渲染-->
+        <el-table
+          ref="table"
+          :data="tableData"
+          style="min-width: 100%"
+          height="calc(100vh - 382px)"
+          @row-click="clickRowHandler"
+          @selection-change="selectionChangeHandler"
+        >
+          <el-table-column type="index" label="序号" width="80" align="center" />
+          <el-table-column prop="fileName" label="已装" min-width="100" align="center" />
+          <el-table-column prop="fileFormat" label="盒名称" min-width="60" align="center" />
+          <el-table-column prop="fileSize" label="TID" min-width="120" align="center" />
+          <el-table-column prop="fileDpi" label="条形码" min-width="120" align="center" />
+          <el-table-column prop="create_date" label="操作" min-width="100" align="center">
+            <template>
+              <el-button class="packing-handle-btn iconfont icon-weibiaoti-2" @click="open">装盒</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </el-dialog>
+
+</template>
+
+<script>
+import { header, form } from '@crud/crud'
+import rrOperation from '@crud/RR.operation'
+import data from '../data.json'
+export default {
+  name: 'Packing',
+  components: { rrOperation },
+  mixins: [
+    header(),
+    form({})
+  ],
+  data() {
+    return {
+      tableData: [],
+      selections: [],
+      inputSelect: null,
+      queryOption: [
+        { value: '1', label: '盒名称' },
+        { value: '2', label: 'TID' },
+        { value: '3', label: '条形码' }
+      ],
+      packingVisible: false // 装盒
+    }
+  },
+  created() {
+    this.tableData = data.data
+    // 初始化带select的输入框的 - 搜索
+    this.inputSelect = this.queryOption[0].value
+  },
+  methods: {
+    // 搜索-select
+    querySelect(val) {
+      this.inputSelect = val
+    },
+    open() {
+      this.$alert('装盒成功！', '提示', {
+        showConfirmButton: false
+      }).then(() => {
+        console.log('then')
+      }).catch((err) => {
+        console.log(err)
+      })
+    },
+    // table
+    clickRowHandler(row) {
+      this.$refs.table.clearSelection()
+      this.$refs.table.toggleRowSelection(row)
+    },
+    // table
+    selectionChangeHandler(val) {
+      this.selections = val
+    },
+    // dialog - close
+    handleClose(done) {
+      this.showCoverVisible = false
+      done()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/archives-manage.scss";
+
+</style>

src/views/archivesManage/archivesList/module/partPacking/index.vue

@@ -0,0 +1,160 @@
+<template>
+  <el-dialog class="partPackingDialog" title="分卷装盒" :close-on-click-modal="false" :visible.sync="partPackingVisible" :before-close="handleClose">
+    <span class="dialog-right-top" />
+    <span class="dialog-left-bottom" />
+    <div class="setting-dialog">
+      <div class="part-packing-wrap" style="height: calc(100vh - 230px);">
+        <div class="head-container packing-head">
+          <div class="head-search">
+            <!-- 搜索 -->
+            <el-input v-model="query[inputSelect]" clearable size="small" placeholder="请输入" style="width: 245px;" class="input-prepend filter-item" @keyup.enter.native="crud.toQuery">
+              <el-select slot="prepend" v-model="inputSelect" style="width: 90px" @change="querySelect">
+                <el-option
+                  v-for="item in queryOption"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-input>
+            <rrOperation />
+          </div>
+        </div>
+        <div class="part-packing-cont">
+          <div class="part-packing-item">
+            <h5 class="part-packing-title">盒列表-待选</h5>
+            <el-table
+              ref="tableBoxWaiting"
+              :data="tableData"
+              style="width: 100%"
+              height="calc(100vh/2 - 200px)"
+            >
+              <el-table-column type="index" label="序号" width="55" align="center" />
+              <el-table-column prop="fileName" label="已装" width="60" align="center" />
+              <el-table-column prop="fileFormat" label="盒名称" show-overflow-tooltip align="center" />
+              <el-table-column prop="fileSize" label="TID" show-overflow-tooltip align="center" />
+              <el-table-column prop="fileDpi" label="条形码" show-overflow-tooltip align="center" />
+              <el-table-column prop="create_date" label="操作" align="center">
+                <template>
+                  <el-button class="packing-handle-btn iconfont icon-weibiaoti-2">装盒</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <div class="part-packing-item">
+            <h5 class="part-packing-title">盒列表-已选</h5>
+            <el-table
+              ref="tableBoxSelected"
+              :data="tableData"
+              style="width: 100%"
+              height="calc(100vh/2 - 200px)"
+            >
+              <el-table-column type="index" label="序号" width="55" align="center" />
+              <el-table-column prop="fileName" label="已装" width="60" align="center" />
+              <el-table-column prop="fileFormat" label="盒名称" show-overflow-tooltip align="center" />
+              <el-table-column prop="fileSize" label="TID" show-overflow-tooltip align="center" />
+              <el-table-column prop="fileDpi" label="条形码" show-overflow-tooltip align="center" />
+              <el-table-column prop="create_date" label="操作" align="center">
+                <template>
+                  <el-button class="packing-handle-btn iconfont icon-weibiaoti-2">撤销</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <div class="part-packing-item">
+            <h5 class="part-packing-title">档案列表-待选</h5>
+            <el-table
+              ref="arcListWaiting"
+              :data="tableData"
+              style="width: 100%"
+              height="calc(100vh/2 - 200px)"
+              @row-click="clickRowHandler"
+              @selection-change="selectionChangeHandler"
+            >
+              <el-table-column type="selection" width="55" align="center" />
+              <el-table-column type="index" label="序号" width="55" align="center" />
+              <el-table-column prop="fileName" label="全宗号" show-overflow-tooltip align="center" />
+              <el-table-column prop="fileFormat" label="档号" show-overflow-tooltip align="center" />
+              <el-table-column prop="fileSize" label="归档年度" show-overflow-tooltip align="center" />
+              <el-table-column prop="fileDpi" label="保密程度" show-overflow-tooltip align="center" />
+            </el-table>
+          </div>
+          <div class="part-packing-item">
+            <h5 class="part-packing-title">档案列表-已选</h5>
+            <el-table
+              ref="arcListSelected"
+              :data="tableData"
+              style="width: 100%"
+              height="calc(100vh/2 - 200px)"
+            >
+              <el-table-column type="index" label="序号" width="55" align="center" />
+              <el-table-column prop="fileName" label="全宗号" show-overflow-tooltip align="center" />
+              <el-table-column prop="fileFormat" label="档号" show-overflow-tooltip align="center" />
+              <el-table-column prop="fileSize" label="归档年度" show-overflow-tooltip align="center" />
+              <el-table-column prop="fileDpi" label="保密程度" show-overflow-tooltip align="center" />
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="partPackingVisible=false">保存</el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { header, form } from '@crud/crud'
+import rrOperation from '@crud/RR.operation'
+import data from '../data.json'
+export default {
+  name: 'PartPacking',
+  components: { rrOperation },
+  mixins: [
+    header(),
+    form({})
+  ],
+  data() {
+    return {
+      partPackingVisible: false,
+      tableData: [],
+      selections: null,
+      inputSelect: null,
+      queryOption: [
+        { value: '1', label: '盒名称' },
+        { value: '2', label: 'TID' },
+        { value: '3', label: '条形码' }
+      ]
+    }
+  },
+  created() {
+    this.tableData = data.data
+    // 初始化带select的输入框的 - 搜索
+    this.inputSelect = this.queryOption[0].value
+  },
+  methods: {
+    // 搜索-select
+    querySelect(val) {
+      this.inputSelect = val
+    },
+    // table
+    clickRowHandler(row) {
+      this.$refs.arcListWaiting.toggleRowSelection(row)
+    },
+    // table
+    selectionChangeHandler(val) {
+      this.selections = val
+      console.log(this.selections)
+    },
+    // 关闭
+    handleClose(done) {
+      this.coverBindingVisible = false
+      done()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/archives-manage.scss";
+</style>

src/views/archivesManage/archivesList/module/uploadFile.vue → src/views/archivesManage/archivesList/module/uploadFile/index.vue

@@ -71,7 +71,7 @@
     </el-dialog>
 
     <!-- 删除附件 -->
-    <el-dialog title="删除附件" :append-to-body="true" :visible.sync="deleteVisible" :before-close="handleClose">
+    <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">
@@ -89,7 +89,7 @@
 <script>
 import { form } from '@crud/crud'
 import Sortable from 'sortablejs'
-import data from './data.json'
+import data from '../data.json'
 export default {
   name: 'UploadFile',
   components: {},
@@ -116,7 +116,6 @@ export default {
   },
   created() {
     this.tableData = data.data
-    console.log(this.isUploadDetail)
   },
   methods: {
     // 新增