wanglei
2 years ago
parent
bbf1989530
commit
7e73e709c3
@ -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>
|
||||
Loading…
Reference in new issue