收集库 抽屉切换

src/assets/styles/yxk-admin.scss

@@ -72,7 +72,8 @@
 }
 
 .tab-container,
-.category-container{
+.category-container,
+.archives-container{
   .tab-content{
     position: relative;
     @include row_tab_style;
@@ -2289,3 +2290,11 @@ input[type ='number'] {
     border: none !important;
   }
 }
+
+
+.el-drawer.rtl{
+  height: calc(100vh - 138px);
+  top: 118px;
+  box-shadow: -8px 0px 10px 0px rgba(0,0,0,0.08);
+  border: 1px solid #E6E8ED;
+}

src/views/collectReorganizi/collectionLibrary/anjuan/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <el-drawer
+    title="我是案卷"
+    :visible.sync="table"
+    :modal="false"
+    :wrapper-closable="false"
+    direction="rtl"
+    size="60%"
+  >
+    <ul class="tab-nav">
+      <li :class="{ 'active-tab-nav': activeIndex == 0 }" @click="changeActiveTab(0)">已整理<i /></li>
+      <li :class="{ 'active-tab-nav': activeIndex == 1 }" @click="changeActiveTab(1)">未整理<i /></li>
+      <!-- 最右侧装饰img -->
+      <span class="tab-right-img" />
+    </ul>
+    <component :is="comName" />
+    <el-button type="text" @click="openJuannei">打开卷内的Drawer</el-button>
+  </el-drawer>
+</template>
+
+<script>
+export default {
+  name: 'Anjuan',
+  components: { },
+  props: {
+    data: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      table: false,
+      activeIndex: 0
+    }
+  },
+  computed: {
+    comName: function() {
+      if (this.activeIndex === 0) {
+        return 'baseInfo'
+      } else if (this.activeIndex === 1) {
+        return 'arcTableList'
+      }
+      return 'baseInfo'
+    }
+  },
+  created() {
+  },
+  mounted() {
+  },
+  methods: {
+    openJuannei() {
+      // this.$emit('openJuannei', '这是来自案卷的通知')
+      this.$emit('openJuannei')
+    },
+    changeActiveTab(data) {
+      this.activeIndex = data
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+</style>

src/views/collectReorganizi/collectionLibrary/file/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <el-drawer
+    title="我是原文"
+    :visible.sync="table"
+    :modal="false"
+    :wrapper-closable="false"
+    direction="rtl"
+    size="40%"
+  >
+    原文
+  </el-drawer>
+</template>
+
+<script>
+export default {
+  name: 'Project',
+  components: { },
+  data() {
+    return {
+      table: false
+    }
+  },
+  created() {
+  },
+  mounted() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+</style>

src/views/collectReorganizi/collectionLibrary/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <div class="app-container archives-container">
     <div class="container-main" style="justify-content: flex-start;">
       <div class="elect-cont-left">
         <div class="container-left">
@@ -8,7 +8,7 @@
           <div class="arc-left-tree">
             <h3 class="arc-title arc-title-top">档案门类</h3>
             <el-tree
-              ref="tree"
+              ref="archivesTree"
               v-loading="crud.loading"
               class="arc-tree arc-tree-01"
               :data="crud.data"
@@ -63,24 +63,29 @@
       </div>
       <!--用户数据-->
       <div class="elect-cont-right">
-        <div class="head-container" />
-        <div class="container-right">
+        <div class="container-right tab-content">
           <span class="right-top-line" />
           <span class="left-bottom-line" />
-          已整理
+          <Project ref="projectEle" :data="sharedData" @openAnjuan="handleOpenAnjuan" />
+          <Anjuan ref="anjuanEle" :data="sharedData" @openJuannei="handleOpenJuannei" />
+          <Juannei ref="juanneiEle" :data="sharedData" @openFile="handleOpenFile" />
+          <File ref="fileEle" />
         </div>
       </div>
     </div>
-
   </div>
 </template>
 
 <script>
 import crudCategory from '@/api/category/category'
 import CRUD, { presenter, header } from '@crud/crud'
+import Project from './project/index.vue'
+import Anjuan from './anjuan/index.vue'
+import Juannei from './juannei/index.vue'
+import File from './file/index.vue'
 export default {
   name: 'CollectionLibrary',
-  components: { },
+  components: { Project, Anjuan, Juannei, File },
   cruds() {
     return [
       CRUD({
@@ -102,7 +107,9 @@ export default {
       defaultProps: {
         children: 'children',
         label: 'cnName'
-      }
+      },
+      sharedData: '',
+      selectedCategory: {}
     }
   },
   created() {
@@ -110,14 +117,80 @@ export default {
   mounted() {
   },
   methods: {
+
+    // 逆归实现 获取指定元素
+    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'))
+        // 删除门类节点后
+        if (this.$refs.archivesTree.getCurrentKey(currentKey.id) == null) {
+          localStorage.removeItem('currentArchivesKey')
+        }
+        // 缓存的门类节点判断
+        if (currentKey.isType === 1) {
+          if (currentKey.children.length !== 0) {
+            currentKey = this.findNode(currentKey.children, (node) => {
+              return node.isType !== 1
+            })
+          }
+        }
+      } 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]
+        }
+      }
+      if (currentKey.id) {
+        // 设置某个节点的当前选中状态
+        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) {
-
+      console.log(val)
+      this.selectedCategory = val
+      // 缓存当前的选中的
+      localStorage.setItem('currentArchivesKey', JSON.stringify(val))
+    },
+    handleOpenAnjuan(data) {
+      this.$refs.anjuanEle.table = true
+    },
+    handleOpenJuannei() {
+      this.sharedData = '新的数据'
+      this.$refs.juanneiEle.table = true
+    },
+    handleOpenFile() {
+      this.$refs.fileEle.table = true
     }
   }
 }
@@ -137,6 +210,9 @@ export default {
 .openSidebar .elect-cont-right {
   width: calc(100vw - 592px);
 }
+[data-theme=light] .elect-cont-right .container-right.tab-content {
+    min-height: calc(100vh - 200px) !important;
+}
 .arc-title{
   position: relative;
   height: 48px;

src/views/collectReorganizi/collectionLibrary/juannei/index.vue

@@ -0,0 +1,39 @@
+<template>
+  <el-drawer
+    title="我是卷内"
+    :visible.sync="table"
+    :modal="false"
+    :wrapper-closable="false"
+    direction="rtl"
+    size="50%"
+  >
+    卷内
+    <el-button type="text" @click="openFile">打开文件的Drawer</el-button>
+  </el-drawer>
+</template>
+
+<script>
+export default {
+  name: 'Project',
+  components: { },
+  data() {
+    return {
+      table: false
+    }
+  },
+  created() {
+  },
+  mounted() {
+
+  },
+  methods: {
+    openFile() {
+      // this.$emit('openFile', '这是来自卷内的通知')
+      this.$emit('openFile')
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+</style>

src/views/collectReorganizi/collectionLibrary/project/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    项目
+    <el-button type="text" @click="openAnjuan">打开案卷的Drawer</el-button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Project',
+  components: { },
+  props: {
+    data: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  created() {
+  },
+  mounted() {
+  },
+  methods: {
+    openAnjuan() {
+      // this.$emit('openAnjuan', '传值')
+      this.$emit('openAnjuan')
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+</style>