|
|
<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">
|
|
|
<div>
|
|
|
<el-button icon="el-icon-upload2" type="primary" @click="handleUpload">点击上传</el-button>
|
|
|
<el-button icon="el-icon-upload2" type="primary" @click="handleScan">扫描上传</el-button>
|
|
|
</div>
|
|
|
<el-button icon="el-icon-full-screen" type="primary" v-if="pictureRecard.length>0" @click="OCRRecognition">OCR识别</el-button>
|
|
|
</div>
|
|
|
|
|
|
<div style="margin-top: 100px;">
|
|
|
<el-empty :image-size="240" v-if="pictureRecard.length===0"></el-empty>
|
|
|
|
|
|
<div v-if="pictureRecard.length>0">
|
|
|
<el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
|
|
|
<div style="margin: 15px 0;"></div>
|
|
|
<el-checkbox v-for="item in pictureRecard" :label="item.picName" :key="item.id" v-model="item.checked" @change="handleCheckChange(item)">
|
|
|
<div style="width: 150px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
|
|
|
<el-image
|
|
|
style="width: 120px; height: 120px"
|
|
|
:src="item.picUrl"
|
|
|
:preview-src-list="[item.picUrl]">
|
|
|
</el-image>
|
|
|
<p :title="item.picName" style="width: 140px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{ item.picName }}</p>
|
|
|
<p :title="item.muPath" style="width: 140px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{ item.muPath }}</p>
|
|
|
<p :title="item.wlsjPath" style="width: 140px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{ item.wlsjPath }}</p>
|
|
|
</div>
|
|
|
</el-checkbox>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
<el-dialog title="档案文件上传" :visible.sync="upload.open" width="700px" append-to-body>
|
|
|
<div style="margin-bottom: 30px;display: flex;min-height: 250px" v-loading="upload.loading">
|
|
|
<div style="width:250px;border: 1px solid #eee; padding: 10px;">
|
|
|
<div style="margin-bottom: 5px;">物理书架：</div>
|
|
|
<el-tree
|
|
|
:data="shuJiaOptions"
|
|
|
:props="{
|
|
|
children: 'children',
|
|
|
label: 'name'
|
|
|
}"
|
|
|
:expand-on-click-node="false"
|
|
|
ref="myTreeSelect"
|
|
|
node-key="shelfId"
|
|
|
default-expand-all
|
|
|
highlight-current
|
|
|
@node-click="selectTree"
|
|
|
/>
|
|
|
</div>
|
|
|
|
|
|
<div v-show="upload.shelfId" style="width: 360px;margin-left: 20px;">
|
|
|
<el-upload :show-file-list="false"
|
|
|
ref="upload"
|
|
|
action="#"
|
|
|
drag
|
|
|
:before-upload="beforeUpload"
|
|
|
:http-request="httpRequest"
|
|
|
multiple
|
|
|
>
|
|
|
<i class="el-icon-upload"></i>
|
|
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
|
|
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
|
|
|
</el-upload>
|
|
|
|
|
|
<ul class="el-upload-list el-upload-list--text" style="max-height:200px;overflow-y:scroll;padding: 15px;">
|
|
|
<li tabindex="0" class="el-upload-list__item is-success" v-for="(item,index) in fileList" :key="item.uid">
|
|
|
<a class="el-upload-list__item-name">
|
|
|
<i class="el-icon-document"></i>
|
|
|
{{ item.name }}
|
|
|
</a>
|
|
|
<label class="el-upload-list__item-status-label">
|
|
|
<i class="el-icon-upload-success el-icon-circle-check"></i>
|
|
|
</label>
|
|
|
<i class="el-icon-close" @click="deleteFile(index)"></i>
|
|
|
</li>
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div style="text-align: center">
|
|
|
<el-button style="width:300px;" type="primary" @click="submitFiles">确定上传</el-button>
|
|
|
</div>
|
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
<el-dialog title="扫描文件上传" :visible.sync="smwj.open" width="900px" append-to-body>
|
|
|
<div style="margin-bottom: 30px;display: flex;align-items:start;min-height: 250px" v-loading="smwj.loading">
|
|
|
<div style="width:250px;border: 1px solid #eee; padding: 10px;">
|
|
|
<div style="margin-bottom: 5px;">物理书架：</div>
|
|
|
<el-tree
|
|
|
:data="shuJiaOptions"
|
|
|
:props="{
|
|
|
children: 'children',
|
|
|
label: 'name'
|
|
|
}"
|
|
|
:expand-on-click-node="false"
|
|
|
ref="myTreeSelect"
|
|
|
node-key="shelfId"
|
|
|
default-expand-all
|
|
|
highlight-current
|
|
|
@node-click="selectTree1"
|
|
|
/>
|
|
|
</div>
|
|
|
|
|
|
<div v-if="smwj.shelfId && smwj.list.length===0" style="width: 560px;margin-left: 20px;">
|
|
|
<el-button icon="el-icon-upload2" type="primary" @click="WebScanInit">开始扫描</el-button>
|
|
|
</div>
|
|
|
|
|
|
<div v-if="smwj.shelfId && smwj.list.length>0" style="width: 560px;margin-left: 20px;display: flex;flex-wrap: wrap">
|
|
|
|
|
|
<div v-for="(item,index) in smwj.list" class="smwjList">
|
|
|
<el-image
|
|
|
style="width: 70px; height: 70px"
|
|
|
:src="item.base64Str"
|
|
|
:preview-src-list="[item.base64Str]">
|
|
|
</el-image>
|
|
|
|
|
|
<i class="el-icon-close" style="font-size:18px" @click="deleteFile1(index)"></i>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div style="text-align: center">
|
|
|
<el-button style="width:300px;" type="primary" @click="submitFiles(1)">确定上传</el-button>
|
|
|
</div>
|
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { catalogTreeselect } from "@/api/system/user";
|
|
|
import Treeselect from "@riophae/vue-treeselect";
|
|
|
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
|
|
import { listBookshelf } from "@/api/dangan/bookshelf";
|
|
|
import { collectSaves, collectRecongnize } from "@/api/dangan/collection";
|
|
|
import '@/utils/WebScan';
|
|
|
|
|
|
export default {
|
|
|
name: "Collection",
|
|
|
components: {Treeselect},
|
|
|
data() {
|
|
|
return {
|
|
|
WebScan: null,
|
|
|
fileList: [],
|
|
|
dangAnID: '',
|
|
|
dangAnNode: undefined,
|
|
|
// 档案目录树选项
|
|
|
dangAnOptions: undefined,
|
|
|
// 档案目录名称
|
|
|
muName: undefined,
|
|
|
defaultProps: {
|
|
|
children: "children",
|
|
|
label: "label"
|
|
|
},
|
|
|
// 用户导入参数
|
|
|
upload: {
|
|
|
loading: false,
|
|
|
// 是否显示弹出层（用户导入）
|
|
|
open: false,
|
|
|
shelfId: undefined,
|
|
|
wlsjNode: undefined
|
|
|
},
|
|
|
// 书架树选项
|
|
|
shuJiaOptions: [],
|
|
|
pictureRecard: [],
|
|
|
// 是否全选
|
|
|
checkAll: false,
|
|
|
// 扫描文件上传
|
|
|
smwj: {
|
|
|
loading: false,
|
|
|
// 是否显示弹出层（用户导入）
|
|
|
open: false,
|
|
|
shelfId: undefined,
|
|
|
wlsjNode: undefined,
|
|
|
list: []
|
|
|
}
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
// 根据名称筛选档案目录树
|
|
|
muName(val) {
|
|
|
this.$refs.tree.filter(val);
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
this.getDeptTree();
|
|
|
},
|
|
|
methods: {
|
|
|
// 初始化
|
|
|
WebScanInit(){
|
|
|
|
|
|
let _this = this;
|
|
|
|
|
|
_this.WebScan = new WebScan({
|
|
|
url:'http://localhost:18989/WebScan',
|
|
|
wsUrl:'http://localhost:28989/',
|
|
|
/*licence:'D+1WT4eWDqLseG5433yq9w=='*/
|
|
|
licence:'V4tMKPYgFtW8vQr4C0s4/g=='
|
|
|
});
|
|
|
|
|
|
_this.WebScan.initSef('',function (result){
|
|
|
if(result.code!=200){
|
|
|
this.$alert(`初始化失败，返回错误：${result.msg}`, `提示`, {
|
|
|
type: 'error'
|
|
|
});
|
|
|
}else {
|
|
|
_this.WebScanGetDevices()
|
|
|
}
|
|
|
})
|
|
|
|
|
|
},
|
|
|
// 获取设备列表
|
|
|
WebScanGetDevices(){
|
|
|
let _this = this;
|
|
|
_this.WebScan.getDevices(function (result){
|
|
|
if(result.code!=200){
|
|
|
this.$alert(`初始化失败，返回错误：${result.msg}`, `提示`, {
|
|
|
type: 'error'
|
|
|
});
|
|
|
}else {
|
|
|
console.log(result.data);
|
|
|
if(result.data.indexOf('M3230') !== -1){
|
|
|
_this.WebScanSetParams()
|
|
|
}else {
|
|
|
this.$alert(`未检测到设备`, `提示`, {
|
|
|
type: 'error'
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
// 扫描设定
|
|
|
WebScanSetParams(){
|
|
|
|
|
|
let _this = this;
|
|
|
|
|
|
let form = {
|
|
|
device: 'M3230',
|
|
|
autofeeder: 1,
|
|
|
pixel: 1,
|
|
|
white: 0,
|
|
|
single: false,
|
|
|
format:"jpg",
|
|
|
resolution: 300,
|
|
|
isActual: true,
|
|
|
isUI: false,
|
|
|
cropAdjustTop:0,
|
|
|
cropAdjustLeft:0,
|
|
|
cropAdjustBottom:0,
|
|
|
cropAdjustRight:0,
|
|
|
compress:0,
|
|
|
mode:0,
|
|
|
upload:{
|
|
|
uploadMode:2,
|
|
|
httpUrl:'',
|
|
|
fileName:'',
|
|
|
httpMethod:'',
|
|
|
header:'',
|
|
|
param:'',
|
|
|
ftpUrl:'',
|
|
|
ftpPath:'/images',
|
|
|
ftpUser:'',
|
|
|
ftpPassword:'',
|
|
|
ftpPort:21,
|
|
|
ftpMode:2
|
|
|
},
|
|
|
scanSystem:{
|
|
|
licence: _this.WebScan.licence,
|
|
|
imagePath:'',
|
|
|
imagePreName:'IMAGE-',
|
|
|
isDate:false,
|
|
|
isTime:false,
|
|
|
random:0,
|
|
|
randomLength:4,
|
|
|
randomCover:true,
|
|
|
datePattern:'yyyyMMdd'
|
|
|
},
|
|
|
params:[{
|
|
|
"code":"1153",
|
|
|
"value":"95",
|
|
|
"type":1
|
|
|
}]
|
|
|
};
|
|
|
|
|
|
_this.WebScan.setParams(form,function(result){
|
|
|
if(result.code!=200){
|
|
|
this.$alert(`${result.msg}`, `提示`, {
|
|
|
type: 'error'
|
|
|
});
|
|
|
}else{
|
|
|
_this.WebScan.startScan(function(result){
|
|
|
if(result.code==201){
|
|
|
_this.smwj.list.push({
|
|
|
base64Str: result.image,
|
|
|
fileName: result.imageName,
|
|
|
})
|
|
|
}
|
|
|
if(result.code==500){
|
|
|
this.$alert(`${result.msg}`, `提示`, {
|
|
|
type: 'error'
|
|
|
});
|
|
|
}
|
|
|
},null)
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
/** 查询档案目录下拉树结构 */
|
|
|
getDeptTree() {
|
|
|
catalogTreeselect().then(response => {
|
|
|
this.dangAnOptions = response.data;
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
this.$refs.tree.setCurrentKey(this.$route.query.id);
|
|
|
this.dangAnNode = this.$refs.tree.getNode(this.$route.query.id)
|
|
|
});
|
|
|
|
|
|
});
|
|
|
},
|
|
|
// 筛选节点
|
|
|
filterNode(value, data) {
|
|
|
if (!value) return true;
|
|
|
return data.label.indexOf(value) !== -1;
|
|
|
},
|
|
|
// 节点单击事件
|
|
|
handleNodeClick(data, Node) {
|
|
|
this.dangAnID = data.id;
|
|
|
this.dangAnNode = Node;
|
|
|
},
|
|
|
/** 点击上传操作 */
|
|
|
handleUpload() {
|
|
|
this.getTreeselect();
|
|
|
this.fileList = []
|
|
|
this.upload.shelfId=undefined;
|
|
|
this.upload.wlsjNode=undefined;
|
|
|
this.upload.open = true;
|
|
|
},
|
|
|
// 点击扫描上传
|
|
|
handleScan(){
|
|
|
this.getTreeselect();
|
|
|
this.smwj.list = [];
|
|
|
this.smwj.shelfId=undefined;
|
|
|
this.smwj.wlsjNode=undefined;
|
|
|
this.smwj.open = true;
|
|
|
},
|
|
|
/** 查询目录下拉树结构 */
|
|
|
getTreeselect() {
|
|
|
listBookshelf().then(response => {
|
|
|
this.shuJiaOptions = this.handleTree(response.rows, "shelfId", "pid")
|
|
|
});
|
|
|
},
|
|
|
// 上传文件之前的钩子
|
|
|
beforeUpload(file) {
|
|
|
this.$refs.upload.clearFiles();
|
|
|
this.fileList.push(file);
|
|
|
},
|
|
|
httpRequest(file) {
|
|
|
console.log('httpRequest', this.fileList, file);
|
|
|
},
|
|
|
submitFiles(type) {
|
|
|
if(type===1){
|
|
|
if(this.smwj.list.length>0){
|
|
|
const formData = new FormData();
|
|
|
this.smwj.list.forEach((item) => {
|
|
|
formData.append('files', this.dataURLtoFile(item.base64Str, item.fileName));
|
|
|
});
|
|
|
|
|
|
const DaPicturesRecard = {}
|
|
|
DaPicturesRecard.muId = this.dangAnNode.key;
|
|
|
DaPicturesRecard.muPath = this.getAllLabels(this.dangAnNode);
|
|
|
|
|
|
DaPicturesRecard.wlsjId = this.smwj.wlsjNode.key;
|
|
|
DaPicturesRecard.wlsjPath = this.getAllLabels(this.smwj.wlsjNode);
|
|
|
|
|
|
formData.append('picRecard', new Blob([JSON.stringify(DaPicturesRecard)],{ type: 'application/json', }));
|
|
|
|
|
|
this.smwj.loading = true;
|
|
|
collectSaves(formData).then(response => {
|
|
|
this.pictureRecard = response.data;
|
|
|
this.smwj.open = false;
|
|
|
this.smwj.loading = false;
|
|
|
}).catch(err=>{
|
|
|
this.smwj.loading = false;
|
|
|
});
|
|
|
}else {
|
|
|
this.$alert(`请先开始扫描！`, `提示`, {
|
|
|
type: 'warning'
|
|
|
});
|
|
|
}
|
|
|
}else {
|
|
|
if(this.fileList.length>0){
|
|
|
const formData = new FormData();
|
|
|
this.fileList.forEach((file) => {
|
|
|
formData.append('files', file);
|
|
|
});
|
|
|
|
|
|
const DaPicturesRecard = {}
|
|
|
DaPicturesRecard.muId = this.dangAnNode.key;
|
|
|
DaPicturesRecard.muPath = this.getAllLabels(this.dangAnNode);
|
|
|
|
|
|
DaPicturesRecard.wlsjId = this.upload.wlsjNode.key;
|
|
|
DaPicturesRecard.wlsjPath = this.getAllLabels(this.upload.wlsjNode);
|
|
|
|
|
|
formData.append('picRecard', new Blob([JSON.stringify(DaPicturesRecard)],{ type: 'application/json', }));
|
|
|
|
|
|
this.upload.loading = true;
|
|
|
collectSaves(formData).then(response => {
|
|
|
this.pictureRecard = response.data;
|
|
|
this.upload.open = false;
|
|
|
this.upload.loading = false;
|
|
|
}).catch(err=>{
|
|
|
this.upload.loading = false;
|
|
|
});
|
|
|
}else {
|
|
|
this.$alert(`请先上传图片！`, `提示`, {
|
|
|
type: 'warning'
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
selectTree(data, Node) {
|
|
|
this.upload.shelfId = data.shelfId;
|
|
|
this.upload.wlsjNode = Node;
|
|
|
},
|
|
|
selectTree1(data, Node) {
|
|
|
this.smwj.shelfId = data.shelfId;
|
|
|
this.smwj.wlsjNode = Node;
|
|
|
},
|
|
|
getAllLabels(obj) {
|
|
|
let values = '';
|
|
|
|
|
|
function getValues(obj) {
|
|
|
if(values.length>0){
|
|
|
values = obj.label+'/'+values
|
|
|
}else {
|
|
|
values = obj.label
|
|
|
}
|
|
|
|
|
|
if(obj.level>1){
|
|
|
getValues(obj.parent);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
getValues(obj);
|
|
|
return values;
|
|
|
},
|
|
|
handleCheckAllChange(val) {
|
|
|
this.pictureRecard.forEach(item =>{
|
|
|
item['checked']= val
|
|
|
})
|
|
|
this.pictureRecard = [...this.pictureRecard]
|
|
|
},
|
|
|
handleCheckChange(val) {
|
|
|
let checkAll = true
|
|
|
this.pictureRecard.forEach(item=>{
|
|
|
if(!item['checked']){
|
|
|
checkAll = false
|
|
|
}
|
|
|
})
|
|
|
this.pictureRecard = [...this.pictureRecard]
|
|
|
this.checkAll = checkAll
|
|
|
},
|
|
|
OCRRecognition(){
|
|
|
let arr = [];
|
|
|
this.pictureRecard.forEach(item => {
|
|
|
if(item.checked){
|
|
|
arr.push(item)
|
|
|
}
|
|
|
})
|
|
|
|
|
|
if(arr.length>0){
|
|
|
collectRecongnize(arr).then(response => {
|
|
|
this.pictureRecard = [];
|
|
|
this.$modal.msgSuccess("操作成功");
|
|
|
});
|
|
|
}else {
|
|
|
this.$alert(`请先选择需要识别的档案！`, `提示`, {
|
|
|
type: 'warning'
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
deleteFile(index){
|
|
|
this.fileList.splice(index, 1);
|
|
|
},
|
|
|
deleteFile1(index){
|
|
|
this.smwj.list.splice(index, 1);
|
|
|
},
|
|
|
dataURLtoFile(dataURL, fileName) {
|
|
|
// 将base64的数据部分提取出来
|
|
|
const binary = atob(dataURL.split(',')[1]);
|
|
|
// 创建一个Uint8Array来存储二进制数据
|
|
|
const array = [];
|
|
|
for (let i = 0; i < binary.length; i++) {
|
|
|
array.push(binary.charCodeAt(i));
|
|
|
}
|
|
|
// 创建Blob对象
|
|
|
const mimeString = dataURL.split(',')[0].split(':')[1].split(';')[0];
|
|
|
const blob = new Blob([new Uint8Array(array)], {type: mimeString});
|
|
|
// 创建File对象
|
|
|
const file = new File([blob], fileName, {type: mimeString});
|
|
|
return file;
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
::v-deep .el-checkbox__inner{
|
|
|
width: 20px;
|
|
|
height: 20px;
|
|
|
}
|
|
|
|
|
|
::v-deep .el-checkbox__inner::after {
|
|
|
height: 10px;
|
|
|
left: 7px;
|
|
|
top: 2px;
|
|
|
}
|
|
|
|
|
|
.smwjList{
|
|
|
width: 120px;
|
|
|
height: 100px;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
margin:5px;
|
|
|
padding: 10px;
|
|
|
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
|
|
|
border-radius: 10px;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
</style>
|
