档案管理

src/assets/styles/archives-manage.scss

@@ -4,11 +4,12 @@ $arcPurple:#563BE1;
 $arcYellow:#FD8042;
 $arcRed:#F65163;
 $arcGreen: #1AAE93;
+$arcCyan: #0FBED9;
 
 .container-main{
   .left-tree-item{
     margin-bottom: 20px;
-    height: calc(100vh/2 - 105px);
+    min-height: calc(100vh/2 - 105px);
     &:last-child{
       margin-bottom: 0;
     }
@@ -47,20 +48,48 @@ $arcGreen: #1AAE93;
     &.packing-btn{
       border-color: $arcPurple;
       background-color: $arcPurple;
+      &.is-disabled{
+        border-color:#2B1D70;
+        background-color: #2B1D70;
+      }
+    }
+    &.part-btn{
+      border-color: $arcCyan;
+      background-color: $arcCyan;
+      &.is-disabled{
+        border-color:#075E6C;
+        background-color: #075E6C;
+      }
     }
     &.warehousing-btn{
       border-color: $arcYellow;
       background-color: $arcYellow;
+      &.is-disabled{
+        border-color:#7E4021;
+        background-color: #7E4021;
+      }
     }
     &.lending-btn{
       border-color: $arcRed;
       background-color: $arcRed;
+      &.is-disabled{
+        border-color:#7A2831;
+        background-color: #7A2831;
+      }
     }
     &.binding-btn{
       border-color: $arcGreen;
       background-color: $arcGreen;
+      &.is-disabled{
+        border-color:#0D5649;
+        background-color: #0D5649;
       }
     }
+    &.is-disabled{
+      color: #666;
+    }
+    
+  }
   .iconfont{
     line-height: 30px;
   }
@@ -69,13 +98,13 @@ $arcGreen: #1AAE93;
 .archives-table{
   ::v-deep td.el-table__cell .row-state{
     display: block;
-    height: 32px;
-    line-height: 30px;
-    padding: 0 16px;
+    height: 26px;
+    line-height: 24px;
+    padding: 0 14px;
     margin: 0 6px;
     border-width: 1px;
     border-style: solid;
-    border-radius: 30px;
+    border-radius: 26px;
   }
   .row-packing{
     color: $arcPurple;
@@ -112,7 +141,7 @@ $arcGreen: #1AAE93;
   ::v-deep .is-scrolling-left,
   ::v-deep .is-scrolling-middle,
   ::v-deep .is-scrolling-right{
-    height: calc(100vh - 430px) !important;
+    min-height: calc(100vh - 430px) !important;
   }
 }
 ::v-deep .archives-table.el-table .el-table__fixed-right{

src/assets/styles/yxk-admin.scss

@@ -841,6 +841,11 @@
 .preview-dialog{
   .el-dialog{
     width: 680px !important;
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    margin-top: 2vh !important;
     .preview-content{
       max-height: calc(100vh - 330px) !important;
       overflow: hidden !important;

src/views/archivesManage/archivesList/archivesDetail.vue

@@ -6,7 +6,7 @@
         <div class="head-search">
           <!-- 搜索 -->
           <el-input v-model="query.blurry" 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.enabled" clearable size="small" placeholder="状态" class="filter-item" style="width: 126px" @change="crud.toQuery">
+          <el-select v-model="query.enabled" clearable size="small" placeholder="状态" class="filter-item" style="width: 100px" @change="crud.toQuery">
             <i slot="prefix" class="iconfont icon-zhuangtai-fanbai" />
             <el-option v-for="item in stateOptions" :key="item.key" :label="item.label" :value="item.key" />
           </el-select>
@@ -18,6 +18,7 @@
         <template v-slot:rightButtonGroup>
           <div class="archives-handler-btn">
             <el-button class="packing-btn iconfont icon-weibiaoti-2" type="primary">装盒</el-button>
+            <el-button class="part-btn iconfont icon-weibiaoti-2" type="primary">分卷装盒</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>
@@ -157,13 +158,11 @@ export default {
       // },
       stateOptions: [
         { key: '1', label: '全部' },
-        { key: '2', label: '已装盒' },
-        { key: '3', label: '未装盒' },
-        { key: '4', label: '已入库' },
-        { key: '5', label: '未入库' },
-        { key: '6', label: '已借阅' },
-        { key: '7', label: '可借阅' },
-        { key: '8', label: '不可借阅' }
+        { key: '2', label: '未装' },
+        { key: '3', label: '未入' },
+        { key: '4', label: '在库' },
+        { key: '5', label: '待借' },
+        { key: '6', label: '已借' }
       ],
       permission: {
         add: ['admin', 'archivesList:add'],
@@ -190,6 +189,9 @@ export default {
         this.crud.query.categoryId = newValue.id
         this.crud.refresh()
       }
+    },
+    tableDisplayFields(val) {
+      this.doLayout()
     }
   },
   methods: {
@@ -224,6 +226,12 @@ export default {
         return true
       })
     },
+    /* 重新渲染table组件 防止table-fixed 错位 配合watch-table数据 */
+    doLayout() {
+      this.$nextTick(() => {
+        this.$refs.table.doLayout()
+      })
+    },
     // // 获取数据前设置默认参数
     // [CRUD.HOOK.beforeRefresh]() {
     //   this.crud.query.id = this.dicPid

src/views/archivesManage/archivesList/index.vue

@@ -8,7 +8,7 @@
           <span class="left-bottom-line" />
           <div class="tree-title">档案门类</div>
           <!--门类树状结构-->
-          <el-tree ref="tree" v-loading="crud.loading" :data="crud.data" :props="defaultProps" node-key="id" :expand-on-click-node="false" highlight-current @node-click="handleNodeClick" />
+          <el-tree ref="archivesTree" v-loading="crud.loading" :data="crud.data" :props="defaultProps" node-key="id" :expand-on-click-node="false" highlight-current @node-click="handleNodeClick" />
         </div>
         <div class="container-left left-tree-item">
           <span class="right-top-line" />
@@ -63,6 +63,49 @@ export default {
     //   }
     //   return true
     // },
+    // 逆归实现 获取指定元素
+    findNode(tree, func) {
+      for (const node of tree) {
+        if (func(node)) return node
+        if (node.children) {
+          const res = this.findNode(node.children, func)
+          if (res) return res
+        }
+      }
+      return null
+    },
+    // 展开选中的父级
+    expandParents(node) {
+      node.expanded = true
+      if (node.parent) {
+        this.expandParents(node.parent)
+      }
+    },
+    [CRUD.HOOK.afterRefresh]() {
+      let currentKey
+      if (localStorage.getItem('currentArchivesKey')) {
+        currentKey = JSON.parse(localStorage.getItem('currentArchivesKey'))
+      } else {
+        if (this.crud.data[0].isType === 1) {
+          currentKey = this.findNode(this.crud.data[0].children, (node) => {
+            return node.isType !== 1
+          })
+        } else {
+          currentKey = this.crud.data[0]
+        }
+      }
+      // 设置某个节点的当前选中状态
+      this.$refs.archivesTree.setCurrentKey(currentKey.id)
+      this.$nextTick(() => {
+        // 设置某个节点的父级展开
+        const selectedKey = this.$refs.archivesTree.getCurrentNode()
+        if (this.$refs.archivesTree.getNode(selectedKey) && this.$refs.archivesTree.getNode(selectedKey).parent) {
+          this.expandParents(this.$refs.archivesTree.getNode(selectedKey).parent)
+        }
+        // 选中节点的门类详情
+        this.handleNodeClick(selectedKey)
+      })
+    },
     // 选中字典后，设置字典详情数据
     handleNodeClick(val) {
       if (val) {
@@ -72,6 +115,8 @@ export default {
         // this.$refs.dictDetail.dicPid = val.id
         // this.$refs.dictDetail.crud.toQuery()
         // this.activeAddBtn = true
+        // 缓存当前的选中的
+        localStorage.setItem('currentArchivesKey', JSON.stringify(val))
       }
     }
   }