开始扫描功能添加

dangan-ui/src/views/dangan/collection/index.vue

@@ -31,8 +31,8 @@
       <el-col :span="20" :xs="24">
         <div style="display: flex; justify-content: space-between">
           <div>
-            <el-button icon="el-icon-upload2" type="primary" @click="handleImport">点击上传</el-button>
-            <el-button icon="el-icon-upload2" type="primary">扫描上传</el-button>
+            <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>
@@ -44,15 +44,15 @@
             <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;">
+              <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>{{ item.picName }}</p>
-                <p>{{ item.muPath }}</p>
-                <p>{{ item.wlsjPath }}</p>
+                <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>
@@ -119,6 +119,51 @@
 
     </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">
+        <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>
 
@@ -128,12 +173,14 @@ 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,
@@ -157,6 +204,14 @@ export default {
       pictureRecard: [],
       // 是否全选
       checkAll: false,
+      // 扫描文件上传
+      smwj: {
+        // 是否显示弹出层（用户导入）
+        open: false,
+        shelfId: undefined,
+        wlsjNode: undefined,
+        list: []
+      }
     };
   },
   watch: {
@@ -169,6 +224,123 @@ export default {
     this.getDeptTree();
   },
   methods: {
+    // 初始化
+    WebScanInit(){
+
+      let _this = this;
+
+      _this.WebScan = new WebScan({
+        url:'http://localhost:18989/WebScan',
+        wsUrl:'http://localhost:28989/',
+        licence:'ND8NSUzCysU1gCr78aj57g=='
+      });
+
+      _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:1,
+          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 => {
@@ -191,14 +363,22 @@ export default {
       this.dangAnID = data.id;
       this.dangAnNode = Node;
     },
-    /** 导入按钮操作 */
-    handleImport() {
+    /** 点击上传操作 */
+    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 => {
@@ -213,30 +393,67 @@ export default {
     httpRequest(file) {
       console.log('httpRequest', this.fileList, file);
     },
-    submitFiles() {
-      const formData = new FormData();
-      this.fileList.forEach((file) => {
-        formData.append('files', 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', }));
+
+          collectSaves(formData).then(response => {
+            this.pictureRecard = response.data;
+            this.smwj.open = 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);
+          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);
+          DaPicturesRecard.wlsjId = this.upload.wlsjNode.key;
+          DaPicturesRecard.wlsjPath = this.getAllLabels(this.upload.wlsjNode);
 
-      formData.append('picRecard', new Blob([JSON.stringify(DaPicturesRecard)],{ type: 'application/json', }));
+          formData.append('picRecard', new Blob([JSON.stringify(DaPicturesRecard)],{ type: 'application/json', }));
 
-       collectSaves(formData).then(response => {
-         this.pictureRecard = response.data;
-         this.upload.open = false;
-       });
+          collectSaves(formData).then(response => {
+            this.pictureRecard = response.data;
+            this.upload.open = 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 = '';
 
@@ -292,6 +509,24 @@ export default {
     },
     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;
     }
   }
 };
@@ -309,4 +544,17 @@ export default {
   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>