diff --git a/dangan-ui/public/index.html b/dangan-ui/public/index.html
index c45933b..925455c 100644
--- a/dangan-ui/public/index.html
+++ b/dangan-ui/public/index.html
@@ -195,7 +195,7 @@
     }
   </style>
   </head>
-  <body style="overflow-x: hidden">
+  <body>
     <div id="app">
 	    <div id="loader-wrapper">
 		    <div id="loader"></div>
diff --git a/dangan-ui/src/api/system/user.js b/dangan-ui/src/api/system/user.js
index 91d77c0..6909081 100644
--- a/dangan-ui/src/api/system/user.js
+++ b/dangan-ui/src/api/system/user.js
@@ -142,6 +142,15 @@ export function userMenuTreeselect(userId) {
   })
 }
 
+// 获取目录下拉树列表
+export function catalogTreeselect(query) {
+  return request({
+    url: '/dangan/catalog/treeselect',
+    method: 'get',
+    params: query
+  })
+}
+
 // 修改用户目录权限
 export function userMuRelation(data) {
   return request({
diff --git a/dangan-ui/src/utils/watermark.js b/dangan-ui/src/utils/watermark.js
index 2de9783..810f272 100644
--- a/dangan-ui/src/utils/watermark.js
+++ b/dangan-ui/src/utils/watermark.js
@@ -33,8 +33,8 @@ let setWatermark = (str,date) => {
   div.style.left = '0px'
   div.style.position = 'absolute'
   div.style.zIndex = '100'
-  div.style.width = document.documentElement.clientWidth + 'px'
-  div.style.height = document.documentElement.clientHeight + 'px'
+  div.style.width = (document.documentElement.clientWidth-30) + 'px'
+  div.style.height = (document.documentElement.clientHeight-30) + 'px'
   div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
   //   document.body.appendChild(div)
   div.style.opacity = '0.6' // 水印的透明度
diff --git a/dangan-ui/src/views/dangan/collection/index.vue b/dangan-ui/src/views/dangan/collection/index.vue
new file mode 100644
index 0000000..15412d8
--- /dev/null
+++ b/dangan-ui/src/views/dangan/collection/index.vue
@@ -0,0 +1,129 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <!--档案目录数据-->
+      <el-col :span="4" :xs="24">
+        <div class="head-container">
+          <el-input
+            v-model="muName"
+            placeholder="请输入档案目录名称"
+            clearable
+            size="small"
+            prefix-icon="el-icon-search"
+            style="margin-bottom: 20px"
+          />
+        </div>
+        <div class="head-container">
+          <el-tree
+            :data="dangAnOptions"
+            :props="defaultProps"
+            :expand-on-click-node="false"
+            :filter-node-method="filterNode"
+            ref="tree"
+            node-key="id"
+            default-expand-all
+            highlight-current
+            @node-click="handleNodeClick"
+          />
+        </div>
+      </el-col>
+      <!--档案上传-->
+      <el-col :span="20" :xs="24">
+        <div style="display: flex; justify-content: space-between">
+          <el-button icon="el-icon-upload2" type="primary">点击上传</el-button>
+          <el-button icon="el-icon-full-screen" type="primary">OCR识别</el-button>
+        </div>
+
+        <div style="margin-top: 20px;">
+          <el-empty :image-size="240"></el-empty>
+        </div>
+
+      </el-col>
+
+    </el-row>
+
+  </div>
+</template>
+
+<script>
+import { catalogTreeselect } from "@/api/system/user";
+import { getToken } from "@/utils/auth";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+
+export default {
+  name: "Collection",
+  components: { Treeselect },
+  data() {
+    return {
+      // 档案目录树选项
+      dangAnOptions: undefined,
+      // 档案目录名称
+      muName: undefined,
+      defaultProps: {
+        children: "children",
+        label: "label"
+      },
+      // 档案导入参数
+      upload: {
+        // 是否禁用上传
+        isUploading: false,
+        // 是否更新已经存在的档案数据
+        updateSupport: 0,
+        // 设置上传的请求头部
+        headers: { Authorization: "Bearer " + getToken() },
+        // 上传的地址
+        url: process.env.VUE_APP_BASE_API + "/system/user/importData"
+      },
+    };
+  },
+  watch: {
+    // 根据名称筛选档案目录树
+    muName(val) {
+      this.$refs.tree.filter(val);
+    }
+  },
+  created() {
+    this.getDeptTree();
+  },
+  methods: {
+    /** 查询档案目录下拉树结构 */
+    getDeptTree() {
+      catalogTreeselect().then(response => {
+        this.dangAnOptions = response.data;
+      });
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.queryParams.deptId = data.id;
+      this.handleQuery();
+    },
+    /** 导入按钮操作 */
+    handleImport() {
+      this.upload.title = "档案上传";
+      this.upload.open = true;
+    },
+    // 文件上传中处理
+    handleFileUploadProgress(event, file, fileList) {
+      this.upload.isUploading = true;
+    },
+    // 文件上传成功处理
+    handleFileSuccess(response, file, fileList) {
+      this.upload.open = false;
+      this.upload.isUploading = false;
+      this.$refs.upload.clearFiles();
+      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
+      this.getList();
+    },
+    // 提交上传文件
+    submitFileForm() {
+      this.$refs.upload.submit();
+    }
+  }
+};
+</script>
