物品新增和导入物品

src/views/inv/StoreList.vue

@@ -65,7 +65,7 @@
           <el-button type="primary" @click="handleAdd">新增</el-button>
           <el-button type="success" @click="handleAdd">扫码入库</el-button>
           <el-button type="info" @click="handleAdd">扫码出库</el-button>
-          <el-button type="warning" @click="handleAdd">导入</el-button>
+          <el-button type="warning" @click="handleImport">导入</el-button>
       </el-row>
       <div class="table-container">
         <el-table :data="list"
@@ -119,14 +119,16 @@
       </div>
     </el-card>
 <!--    弹窗-->
-    <add-goods ref="addGoods" @ok="getList"></add-goods>
+    <add-goods-modal ref="addGoods" @ok="getList"></add-goods-modal>
+    <import-goods-modal ref="importGoods" @ok="getList"></import-goods-modal>
   </div>
 </template>
 <script>
 import moment from 'moment'
 import { getGoodsList,getGoodsCategoryList,getStockRooms, getAuditDetail, updateMcht } from '@/api/inventory'
 import {getSuppliersList} from '@/api/supplier'
-import AddGoods from './modules/addGoodsModal'
+import AddGoodsModal from './modules/addGoodsModal'
+import ImportGoodsModal from './modules/importGoodsModal'
 // 列表查询参数默认值
 const defaultListQuery = {
   pageNum: 1,
@@ -139,7 +141,10 @@ const defaultListQuery = {
 
 export default {
   name: 'StoreList',
-  components: {AddGoods},
+  components: {
+    AddGoodsModal,
+    ImportGoodsModal
+  },
   data() {
     return {
       listQuery: Object.assign({}, defaultListQuery),
@@ -218,8 +223,13 @@ export default {
         this.listLoading = false
       })
     },
+    // 新增
     handleAdd(){
       this.$refs.addGoods.add()
+    },
+    // 导入
+    handleImport(){
+      this.$refs.importGoods.add()
     }
   }
 }

src/views/inv/modules/addGoodsModal.vue

@@ -13,11 +13,12 @@
       <el-table
         :data="formData.tableData"
         style="width: 100%"
-        @row-dblclick="dbclick">
+        @row-dblclick="dbclick"
+        :row-class-name="tableRowClassName">
         <el-table-column prop="name"  label="物品名称">
           <template slot-scope="scope">
               <el-form-item size="mini" :prop="'tableData.' + scope.$index + '.name'"
-                            :rules="[{required: true,trigger: 'blur',message: '物品名称不能为空'}]">
+                            :rules="[{required: true,trigger: 'change',message: '物品名称不能为空'}]">
                 <el-autocomplete
                   class="input-width"
                   v-model="scope.row.name"
@@ -230,8 +231,12 @@ export default {
         isOK: true
       },)
     },
+    tableRowClassName ({row, rowIndex}) {
+      // 把每一行的索引放进row
+      row.index = rowIndex;
+    },
     dbclick(row, event, column) {
-      for (var i of this.tableData) {
+      for (var i of this.formData.tableData) {
         i.isOK = false
       }
       row.isOK = !row.isOK

src/views/inv/modules/importGoodsModal.vue

@@ -3,40 +3,30 @@
              :title="title"
              center
              width="1000px">
-    <!-- start -->
-    <el-row style="padding: 10px 0;text-align: left;">
-      <!--  excel表格上传  -->
-      <el-upload
-        class="upload-demo"
-        action="https://jsonplaceholder.typicode.com/posts/"
-        multiple
-        accept=".xlsx"
-        :on-exceed="exceed"
-        :limit="1"
-        :on-remove="remove"
-        :http-request="uploadFile"
-      >
-<!--        <i class="el-icon-upload"></i>-->
-<!--        <div class="el-upload__text">-->
-<!--          将文件拖到此处，或-->
-<!--          <em>点击上传</em>-->
-<!--        </div>-->
-        <el-button size="small" type="primary">点击上传</el-button>
-        <div class="el-upload__tip" slot="tip">1次只能上传1个xls文件，且不超过500kb</div>
-      </el-upload>
-
-    </el-row>
+    <!--  excel表格上传  -->
+    <el-upload
+      :auto-upload="false"
+      :on-change="elInFile"
+      :on-remove="remove"
+      ref="upload"
+      action="https://jsonplaceholder.typicode.com"
+      class="upload-demo"
+      accept=".xlsx, .xls">
+      <el-button slot="trigger" size="mini" type="primary" plain>选取文件</el-button>
+      <div slot="tip" class="el-upload__tip">只能选取Excel文件</div>
+    </el-upload>
     <div class="scroll-container no-bottom"
          ref="scrollContainer">
       <el-form :model="formData" ref="formData">
-      <el-table
-        :data="formData.tableData"
-        style="width: 100%"
-        @row-dblclick="dbclick">
-        <el-table-column prop="name"  label="物品名称">
-          <template slot-scope="scope">
+        <el-table
+          :data="formData.tableData"
+          style="width: 100%"
+          @row-dblclick="dbclick"
+          :row-class-name="tableRowClassName">
+          <el-table-column prop="name" label="物品名称">
+            <template slot-scope="scope">
               <el-form-item size="mini" :prop="'tableData.' + scope.$index + '.name'"
-                            :rules="[{required: true,trigger: 'blur',message: '物品名称不能为空'}]">
+                            :rules="[{required: true,trigger: 'change',message: '物品名称不能为空'}]">
                 <el-autocomplete
                   class="input-width"
                   v-model="scope.row.name"
@@ -47,30 +37,32 @@
                 ></el-autocomplete>
                 <span v-else>{{scope.row.name}}</span>
               </el-form-item>
-          </template>
-        </el-table-column>
-        <el-table-column  label="型号">
-          <template slot-scope="scope">
-              <el-form-item size="mini" :prop="'tableData.' + scope.$index + '.goodsNo'"  :rules="[{required: true,trigger: 'blur',message: '型号不能为空'}]">
+            </template>
+          </el-table-column>
+          <el-table-column label="型号">
+            <template slot-scope="scope">
+              <el-form-item size="mini" :prop="'tableData.' + scope.$index + '.goodsNo'"
+                            :rules="[{required: true,trigger: 'blur',message: '型号不能为空'}]">
                 <el-input v-if="scope.row.isOK" v-model="scope.row.goodsNo" class="input-width"
                           placeholder="型号"
                           :disabled="scope.row.id? true: false"></el-input>
                 <span v-else>{{scope.row.goodsNo}}</span>
               </el-form-item>
-          </template>
-        </el-table-column>
-        <el-table-column label="条形码">
-          <template slot-scope="scope">
-              <el-form-item size="mini" :prop="'tableData.' + scope.$index + '.barCode'"  :rules="[{required: true,trigger: 'blur',message: '条形码不能为空'}]">
+            </template>
+          </el-table-column>
+          <el-table-column label="条形码">
+            <template slot-scope="scope">
+              <el-form-item size="mini" :prop="'tableData.' + scope.$index + '.barCode'"
+                            :rules="[{required: true,trigger: 'blur',message: '条形码不能为空'}]">
                 <el-input v-if="scope.row.isOK" v-model="scope.row.barCode" class="input-width"
                           placeholder="条形码"
                           :disabled="scope.row.id? true: false"></el-input>
                 <span v-else>{{scope.row.barCode}}</span>
               </el-form-item>
-          </template>
-        </el-table-column>
-        <el-table-column  label="物品类别">
-          <template slot-scope="scope">
+            </template>
+          </el-table-column>
+          <el-table-column label="物品类别">
+            <template slot-scope="scope">
               <el-form-item size="mini" :prop="'tableData.' + scope.$index + '.goodsCategoryId'"
                             :rules="[{required: true,trigger: 'change',message: '物品类别不能为空'}]">
                 <el-select v-if="scope.row.isOK" v-model="scope.row.goodsCategoryId"
@@ -85,29 +77,31 @@
                 </el-select>
                 <span v-else>{{getName(scope.row.goodsCategoryId, categoryOptions)}}</span>
               </el-form-item>
-          </template>
-        </el-table-column>
-        <el-table-column label="数量">
-          <template slot-scope="scope">
-              <el-form-item size="mini" :prop="'tableData.' + scope.$index + '.goodsNum'" :rules="[{required: true,trigger: 'blur',message: '数量不能为空'}]">
+            </template>
+          </el-table-column>
+          <el-table-column label="数量">
+            <template slot-scope="scope">
+              <el-form-item size="mini" :prop="'tableData.' + scope.$index + '.goodsNum'"
+                            :rules="[{required: true,trigger: 'blur',message: '数量不能为空'}]">
                 <el-input v-if="scope.row.isOK" v-model="scope.row.goodsNum" class="input-width"
                           placeholder="数量"></el-input>
                 <span v-else>{{scope.row.goodsNum}}</span>
               </el-form-item>
-          </template>
-        </el-table-column>
-        <el-table-column  label="价格（元）">
-          <template slot-scope="scope">
-              <el-form-item size="mini" :prop="'tableData.' + scope.$index + '.prict'" :rules="[{required: true,trigger: 'blur',message: '价格不能为空'}]">
+            </template>
+          </el-table-column>
+          <el-table-column label="价格（元）">
+            <template slot-scope="scope">
+              <el-form-item size="mini" :prop="'tableData.' + scope.$index + '.prict'"
+                            :rules="[{required: true,trigger: 'blur',message: '价格不能为空'}]">
                 <el-input v-if="scope.row.isOK" v-model="scope.row.prict" class="input-width"
                           placeholder="价格"
                           :disabled="scope.row.id? true: false"></el-input>
                 <span v-else>{{scope.row.prict}}</span>
               </el-form-item>
-          </template>
-        </el-table-column>
-        <el-table-column  label="供应商">
-          <template slot-scope="scope">
+            </template>
+          </el-table-column>
+          <el-table-column label="供应商">
+            <template slot-scope="scope">
               <el-form-item size="mini" :prop="'tableData.' + scope.$index + '.supplierId'"
                             :rules="[{required: true,trigger: 'change',message: '供应商不能为空'}]">
                 <el-select v-if="scope.row.isOK" v-model="scope.row.supplierId"
@@ -122,10 +116,10 @@
                 </el-select>
                 <span v-else>{{getName(scope.row.supplierId, supplierOptions,1)}}</span>
               </el-form-item>
-          </template>
-        </el-table-column>
-        <el-table-column  label="库房">
-          <template slot-scope="scope">
+            </template>
+          </el-table-column>
+          <el-table-column label="库房">
+            <template slot-scope="scope">
               <el-form-item size="mini" :prop="'tableData.' + scope.$index + '.stockRoomId'"
                             :rules="[{required: true,trigger: 'change',message: '库房不能为空'}]">
                 <el-select v-if="scope.row.isOK" v-model="scope.row.stockRoomId"
@@ -140,17 +134,17 @@
                 </el-select>
                 <span v-else>{{getName(scope.row.stockRoomId, depotOptions)}}</span>
               </el-form-item>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作"
-                         align="center"
-                         width="50">
-          <template slot-scope="scope">
-            <el-link type="danger" :underline="false" @click="handleDelete(scope.$index)">删除</el-link>
-            <!--            <el-button type="danger" size="small" @click="handleDelete(scope.$index)">删除</el-button>-->
-          </template>
-        </el-table-column>
-      </el-table>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作"
+                           align="center"
+                           width="50">
+            <template slot-scope="scope">
+              <el-link type="danger" :underline="false" @click="handleDelete(scope.$index)">删除</el-link>
+              <!--            <el-button type="danger" size="small" @click="handleDelete(scope.$index)">删除</el-button>-->
+            </template>
+          </el-table-column>
+        </el-table>
       </el-form>
     </div>
     <div slot="footer">
@@ -175,6 +169,7 @@ export default {
   name: 'importGoodsModal',
   data() {
     return {
+      files: null, //文件列表
       visible: false,
       title: null,
       loading: false,
@@ -187,6 +182,81 @@ export default {
       goodsList: []
     }
   },
+  beforeCreate() {
+    /**
+     * 读取Excel文件，转为{@link Object}对象（自定义函数）
+     * @return {@link Object}：workbook，整个文档对象；
+     */
+    FileReader.prototype.read2workbook = function () {
+      let redABS = false   //是否将文件读取为二进制字符串
+      let bytes = new Uint8Array(this.result)  //无符号整型数组
+      if (redABS) {
+        // let fix = new TextDecoder(encode || 'UTF-8').decode(bytes);
+        let fix = fixdata(bytes)
+        let b2a = btoa(fix)    //js原生方法：将字符转为base64编码。对应的atob(base64)方法，将base64转字符
+        var wb = XLSX.read(b2a, {
+          type: 'base64'
+        })
+      } else {
+        let len = bytes.byteLength
+        let binarys = new Array(len) //创建定长数组，存储文本
+        for (let i = 0; i < len; i++)
+          binarys[i] = String.fromCharCode(bytes[i])
+        let binary = binarys.join('')
+        var wb = XLSX.read(binary, {
+          type: 'binary'
+        })
+      }
+      return wb  //workbook
+    }
+    /**
+     * 解析为...格式
+     */
+    FileReader.prototype.read2 = function (format = 'json') {
+      let wb = this.read2workbook()
+      if (!wb)
+        return null
+
+      let r = {}
+      let formats = ['json', 'formulae', 'html', 'txt', 'csv', 'dif', 'slk', 'eth']  //可被解析的格式
+      format = formats.indexOf(format) == -1 ? 'json' : format
+      wb.SheetNames.forEach(name => {     //遍历每张纸数据
+        r[name] = XLSX.utils['sheet_to_' + format](wb.Sheets[name])
+      })
+      return r
+    }
+    /**
+     * 解析为JSON
+     * @description: 此解析方式，XLSX将使用表格首行的每列名称，当作sheet数组对象的Key。
+     * 故Excel每个工作表格的第一行必须有表头，且名称不可重复。
+     */
+    FileReader.prototype.read2JS = function () {
+      return this.read2()
+    }
+    /* 重写readAsBinaryString函数 */
+    FileReader.prototype.readAsBinaryString = function (f) {
+      if (!this.onload)       //如果this未重写onload函数，则创建一个公共处理方式
+        this.onload = e => {  //在this.onload函数中，完成公共处理
+          let rs = this.read2workbook()
+        }
+      this.readAsArrayBuffer(f)  //内部会回调this.onload方法
+    }
+
+    /**
+     * char值转String
+     * @param data {@link Array}：char值；
+     * @return {@link String}
+     */
+    function fixdata(data) {
+      let w = 1024 << 10 //每次读取1M字节
+      let len = Math.floor(data.byteLength / w)
+      let o = new Array(len)
+      for (var i = 0; i < len; i++)
+        o[i] = String.fromCharCode.apply(null, new Uint8Array(data.slice(i * w, (i + 1) * w)))
+      o[i] = String.fromCharCode.apply(null, new Uint8Array(data.slice(i * w)))
+      return o.join('')
+    }
+  },
   methods: {
     // 物品类别
     getGoodsCategoryList() {
@@ -208,7 +278,6 @@ export default {
     },
     // 物品
     getGoodsList() {
-      console.log(12121212)
       getGoodsList().then(res => {
         for (var i of res.data.list) {
           i.value = i.name
@@ -235,17 +304,20 @@ export default {
     close() {
       this.visible = false
     },
+    tableRowClassName ({row, rowIndex}) {
+      // 把每一行的索引放进row
+      row.index = rowIndex;
+    },
     dbclick(row, event, column) {
-      for (var i of this.tableData) {
+      console.log('row, event, column',row, event, column)
+      for (var i of this.formData.tableData) {
         i.isOK = false
       }
       row.isOK = !row.isOK
+      this.formData.tableData.splice(row.index,1,row)
+      console.log('this.formData.tableData',this.formData.tableData)
     },
     submit(formName) {
-      // if (!this.formData.tableData.length || !this.formData.tableData[0].name) {
-      //   this.$message.warning('请添加物品')
-      //   return
-      // }
       this.$refs[formName].validate((valid) => {
         if (valid) {
           let data = this.formData.tableData
@@ -254,7 +326,7 @@ export default {
             this.$emit('ok')
             this.visible = false
           })
-        }else {
+        } else {
           this.$message.warning('请检查必填项')
         }
       })
@@ -270,7 +342,6 @@ export default {
         return ''
       }
       let name = null
-      console.log('arr,id',arr,id)
       if (type) {
         name = arr.filter(item => item.id == id)[0].supplierName
       } else {
@@ -279,6 +350,7 @@ export default {
       return name
 
     },
+    // 物品名称搜索作用
     querySearch(queryString, cb) {
       var goodsList = this.goodsList
       var results = queryString ? goodsList.filter(this.createFilter(queryString)) : goodsList
@@ -298,82 +370,84 @@ export default {
       this.formData.tableData[index].stockRoomId = item.stockRoomId
       this.formData.tableData[index].prict = item.prict
       this.formData.tableData[index].supplierId = item.supplierId
-      this.formData.tableData[index].supplierId = item.supplierId
       this.formData.tableData[index].goodsCategoryId = item.goodsCategoryId
-      console.log('item', item)
-    },
-    //解析excel
-    async uploadFile(params) {
-      const _file = params.file;
-      const fileReader = new FileReader();
-      fileReader.onload = (ev) => {
-        try {
-          const data = ev.target.result;
-          const workbook = XLSX.read(data, {
-            type: 'binary'
-          });
-          for (let sheet in workbook.Sheets) {
-            //循环读取每个文件
-            const sheetArray = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]);
-            //若当前sheet没有数据，则continue
-            if(sheetArray.length == 0){
-              continue;
-            }
-            console.log("读取文件");
-            console.log(sheetArray);
-            for(let item in sheetArray){
-              let rowTable = {};
-              //这里的rowTable的属性名注意要与上面表格的prop一致
-              //sheetArray的属性名与上传的表格的列名一致
-              rowTable.name = sheetArray[item].物品名称;
-              rowTable.goodsNo = sheetArray[item].型号;
-              rowTable.goodsNum = sheetArray[item].数量;
-              rowTable.prict = sheetArray[item].价格(元);
-              rowTable.barCode = sheetArray[item].条形码;
-              let stockRoomName = sheetArray[item].库房
-              let goodsCategoryName  = sheetArray[item].物品类别;
-              let supplierName  =sheetArray[item].供应商;
-              if(rowTable.name){
-                let isExist = this.goodsList.findIndex(item =>{item.name === rowTable.name})
-                isExist == -1 && (rowTable.id = null)
-                isExist != -1 && (rowTable.id = this.goodsList[isExist].id)
-              }
-              if(goodsCategoryName){
-                let isExist = this.goodsList.findIndex(item =>{item.name === goodsCategoryName})
-                isExist == -1 && (rowTable.goodsCategoryId = null)
-                isExist != -1 && (rowTable.goodsCategoryId = this.goodsList[isExist].id)
-              }
-              if(supplierName){
-                let isExist = this.goodsList.findIndex(item =>{item.supplierName === supplierName})
-                isExist == -1 && (rowTable.supplierId = null)
-                isExist != -1 && (rowTable.supplierId = this.goodsList[isExist].id)
-              }
-              if(stockRoomName){
-                let isExist = this.goodsList.findIndex(item =>{item.name === stockRoomName})
-                isExist == -1 && (rowTable.stockRoomId = null)
-                isExist != -1 && (rowTable.stockRoomId = this.goodsList[isExist].id)
-              }
-              this.formData.tableData.push(rowTable)
-              console.log('rowTable',rowTable, this.formData.tableData)
-
-            }
-          }
-        } catch (e) {
-          this.$message.warning('文件类型不正确！');
-        }
-      };
-      fileReader.readAsBinaryString(_file);
-    },
-    //上传1个以上文件时弹窗提示错误
-    exceed: function() {
-      this.$message.error("最多只能上传1个xls文件");
     },
     //删除文件
     remove() {
-      this.formData.tableData = [];
+      this.formData.tableData = []
+    },
+    /**
+     * input-file调用此函数时，默认传入"$event"
+     * @param e {@link Object}：$event事件对象；
+     */
+    inFile(e) {
+      this.files = (e.target || e.srcElement).files  //获取"input-file"的FileList对象
+      if (!this.files || !this.files.length)
+        return
+      for (let i = 0, len = this.files.length; i < len; i++)
+        this.read(this.files[i])
+    },
+    /**
+     * 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用。
+     * @param f {@link Object}：当前上传的文件；
+     * @param fs {@link Array}：当前文件列表；
+     */
+    elInFile(f, fs) {
+      if (fs.length > 1) {
+        fs.splice(0, 1)
+      }
+      this.read(f.raw)
+    },
+    /**
+     * 解析
+     * @param f {@link File}
+     */
+    read(f) {
+      let rd = new FileReader()
+      rd.onload = e => {  //this.readAsArrayBuffer函数内，会回调this.onload函数。在这里处理结果
+        let sheetArray = rd.read2JS()
+        let tables = []
+        for (var sheet of sheetArray.Sheet1) {
+          let rowTable = {}
+          rowTable.name = sheet['物品名称']
+          rowTable.goodsNo = sheet['型号']
+          rowTable.goodsNum = sheet['数量']
+          rowTable.prict = sheet['价格']
+          rowTable.barCode = sheet['条形码']
+          if (sheet['物品名称']) {
+            let isExist = this.goodsList.findIndex(item =>
+              item.name === sheet['物品名称']
+            )
+            isExist === -1 && (rowTable.id = null)
+            isExist !== -1 && (rowTable.id = this.goodsList[isExist].id)
+          }
+          if (sheet['物品类别']) {
+            let isExist = this.categoryOptions.findIndex(item =>
+              item.name === sheet['物品类别']
+            )
+            isExist === -1 && (rowTable.goodsCategoryId = null)
+            isExist !== -1 && (rowTable.goodsCategoryId = this.categoryOptions[isExist].id)
+          }
+          if (sheet['供应商']) {
+            let isExist = this.supplierOptions.findIndex(item =>
+              item.supplierName === sheet['供应商']
+            )
+            isExist === -1 && (rowTable.supplierId = null)
+            isExist !== -1 && (rowTable.supplierId = this.supplierOptions[isExist].id)
+          }
+          if (sheet['所属库房']) {
+            let isExist = this.depotOptions.findIndex(item =>
+              item.name === sheet['所属库房']
+            )
+            isExist === -1 && (rowTable.stockRoomId = null)
+            isExist !== -1 && (rowTable.stockRoomId = this.depotOptions[isExist].id)
+          }
+          tables.push(rowTable)
+          this.formData.tableData = tables
+        }
+      }
+      rd.readAsBinaryString(f)
     }
-
-
   }
 }
 </script>
@@ -387,6 +461,11 @@ export default {
   .input-width {
     width: 100px;
   }
+
+  .el-upload__tip {
+    color: #999;
+    font-size: 10px;
+  }
 </style>
 <style>
   .no-bottom .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {