收集库

src/assets/iconfonts/light/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 3966148 */
-  src: url('iconfont.woff2?t=1685929738396') format('woff2'),
-       url('iconfont.woff?t=1685929738396') format('woff'),
-       url('iconfont.ttf?t=1685929738396') format('truetype');
+  src: url('iconfont.woff2?t=1686819523337') format('woff2'),
+       url('iconfont.woff?t=1686819523337') format('woff'),
+       url('iconfont.ttf?t=1686819523337') format('truetype');
 }
 
 .iconfont {

src/assets/styles/mixin.scss

@@ -408,6 +408,12 @@
   }
 }
 
+@mixin tree_classfiy_icon_font{
+  [data-theme="light"] & {
+    color: #3ACFB1;
+  }
+}
+
 @mixin tree_children_padding{
   [data-theme="light"] & {
     padding: 0 !important;

src/assets/styles/yxk-admin.scss

@@ -1719,6 +1719,28 @@ input[type ='number'] {
     @include tree_children_icon_font;
   }
 }
+.iconClassify{
+  font-family: "iconfont" !important;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  &::before{
+    content: "\e648";
+    font-size: 14px;
+    @include tree_classfiy_icon_font;
+  }
+}
+.iconClassify-child{
+  font-family: "iconfont" !important;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  &::before{
+    content: "\e64a";
+    font-size: 14px;
+    @include tree_classfiy_icon_font;
+  }
+}
 // 档案门类-基本信息
 .system-base-info {
   @include category-padding;

src/router/index.js

@@ -9,7 +9,7 @@ import { filterAsyncRouter } from '@/store/modules/permission'
 
 NProgress.configure({ showSpinner: false })// NProgress Configuration
 
-const whiteList = ['/login']// no redirect whitelist
+const whiteList = ['/login', '/collectionLibrary']// no redirect whitelist
 
 router.beforeEach((to, from, next) => {
   if (to.meta.title) {

src/router/routers.js

@@ -62,6 +62,20 @@ export const constantRouterMap = [
     path: '/environmentalScreen',
     component: (resolve) => require(['@/views/environmentalScreen/index'], resolve),
     hidden: true
+  },
+  {
+    path: '/collectReorganizi',
+    component: Layout,
+    hidden: true,
+    redirect: 'noredirect',
+    children: [
+      {
+        path: '/collectionLibrary',
+        component: (resolve) => require(['@/views/collectReorganizi/collectionLibrary/index'], resolve),
+        name: '收集库',
+        meta: { title: '收集库' }
+      }
+    ]
   }
 ]
 

src/views/collectReorganizi/collectionLibrary/index.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="app-container">
+    <div class="container-main" style="justify-content: flex-start;">
+      <div class="elect-cont-left">
+        <div class="container-left">
+          <span class="right-top-line" />
+          <span class="left-bottom-line" />
+          <div class="arc-left-tree">
+            <h3 class="arc-title arc-title-top">档案门类</h3>
+            <el-tree
+              ref="tree"
+              v-loading="crud.loading"
+              class="arc-tree arc-tree-01"
+              :data="crud.data"
+              :props="defaultProps"
+              node-key="id"
+              :expand-on-click-node="false"
+              highlight-current
+              :default-expanded-keys="[1]"
+              :default-checked-keys="[1]"
+              @node-click="handleNodeClick"
+            >
+              <span slot-scope="{ node, data }" class="custom-tree-node">
+                <span v-if="data.isType===1 " class="iconFolder">
+                  {{ data.cnName }}
+                </span>
+                <span v-if="data.isType===2 || data.isType === 3 || data.isType===5" class="iconArch">
+                  {{ data.cnName }}
+                </span>
+                <span v-if="data.isType===4" class="iconFile">
+                  {{ data.cnName }}
+                </span>
+              </span>
+            </el-tree>
+            <h3 class="arc-title arc-title-bottom">快速筛选</h3>
+            <el-tree
+              ref="tree"
+              v-loading="crud.loading"
+              class="arc-tree arc-tree-02"
+              :data="crud.data"
+              :props="defaultProps"
+              node-key="id"
+              :expand-on-click-node="false"
+              highlight-current
+              :default-expanded-keys="[1]"
+              :default-checked-keys="[1]"
+              @node-click="handleNodeClick"
+            >
+              <span slot-scope="{ node, data }" class="custom-tree-node">
+                <span v-if="data.isType===1 " class="iconClassify">
+                  {{ data.cnName }}
+                </span>
+                <span v-if="data.isType===2 || data.isType === 3 || data.isType===5" class="iconClassify-child">
+                  {{ data.cnName }}
+                </span>
+                <span v-if="data.isType===4" class="iconClassify-child">
+                  {{ data.cnName }}
+                </span>
+              </span>
+            </el-tree>
+          </div>
+        </div>
+      </div>
+      <!--用户数据-->
+      <div class="elect-cont-right">
+        <div class="head-container" />
+        <div class="container-right">
+          <span class="right-top-line" />
+          <span class="left-bottom-line" />
+          已整理
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import crudCategory from '@/api/category/category'
+import CRUD, { presenter, header } from '@crud/crud'
+export default {
+  name: 'CollectionLibrary',
+  components: { },
+  cruds() {
+    return [
+      CRUD({
+        title: '收集库', url: 'api/archives-type/menu',
+        crudMethod: { ...crudCategory },
+        optShow: {
+          add: false,
+          edit: false,
+          del: false,
+          download: false,
+          group: false
+        }
+      })
+    ]
+  },
+  mixins: [presenter(), header()],
+  data() {
+    return {
+      defaultProps: {
+        children: 'children',
+        label: 'cnName'
+      }
+    }
+  },
+  created() {
+  },
+  mounted() {
+  },
+  methods: {
+    expandParents(node) {
+      node.expanded = true
+      if (node.parent) {
+        this.expandParents(node.parent)
+      }
+    },
+    handleNodeClick(val) {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.elect-cont-left{
+  width: 296px;
+  padding: 0 !important;
+}
+[data-theme=light] .elect-cont-left .container-left {
+    min-height: calc(100vh - 140px);
+}
+[data-theme=dark] .elect-cont-left .container-left {
+    min-height: calc(100vh - 160px);
+}
+.openSidebar .elect-cont-right {
+    width: calc(100vw - 592px);
+}
+.arc-title{
+  position: relative;
+  height: 48px;
+  line-height: 48px;
+  text-align: center;
+  font-size: 16px;
+  color: #0C0E1E;
+  background-color: #F3F5F8;
+  &::after{
+    content: "";
+    position: absolute;
+    right: 12px;
+    bottom: 0;
+  }
+}
+.arc-title-top{
+  &::after{
+    width: 44px;
+    height: 35px;
+    background: url("~@/assets/images/collect/daml.png") no-repeat;
+    background-size: 100% 100%;
+  }
+}
+.arc-title-bottom{
+  &::after{
+    width: 41px;
+    height: 40px;
+    background: url("~@/assets/images/collect/kssx.png") no-repeat;
+    background-size: 100% 100%;
+  }
+}
+.arc-tree{
+  padding: 0 20px;
+  background-color: red;
+}
+.arc-tree-01{
+  height: 400px;
+  overflow: hidden;
+  overflow-y: scroll;
+}
+.arc-tree-02{
+  height: calc(100vh - 720px);
+  overflow: hidden;
+  overflow-y: scroll;
+}
+::v-deep .el-tree-node__children .custom-tree-node{
+  font-size: 14px;
+}
+</style>