n20-common-lib 1.3.0 → 1.3.3

package/src/components/NstcG6Components/NstcExcelImportN/NstcExcelImportN.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
     <el-dropdown
-        trigger="click"
-        placement="bottom-start"
-        @command="handleCommand"
+      trigger="click"
+      placement="bottom-start"
+      @command="handleCommand"
     >
       <el-button type="primary" class="drop-btn-item">
         导入<i class="el-icon-arrow-down el-icon--right"></i>
@@ -14,15 +14,15 @@
       </el-dropdown-menu>
     </el-dropdown>
     <NstcDialog
-        v-model="dialogVisible"
-        :title="title"
-        width="1200px"
-        append-to-body
-        v-bind="$attrs"
-        v-on="$listeners"
-        @cancel="resetAction"
-        :footer-handlers="footerHandlers"
-        class="nstc-dialog-style"
+      v-model="dialogVisible"
+      :title="title"
+      width="1200px"
+      append-to-body
+      v-bind="$attrs"
+      v-on="$listeners"
+      @cancel="resetAction"
+      :footer-handlers="footerHandlers"
+      class="nstc-dialog-style"
     >
       <div class="file-box">
         <span class="file-box-title">导入文件</span>
@@ -34,15 +34,15 @@
           导入统计
           <span>共计导入 {{ validateResult.totalNum }}条, </span>
           <span
-          >其中有效数据<span class="effect-data">
+            >其中有效数据<span class="effect-data">
               {{ validateResult.successNum }} </span
-          >条,
+            >条,
           </span>
           <span
-          >无效数据
+            >无效数据
             <span class="nstc-import-error-num">{{
-                validateResult.errorList.length
-              }}</span>
+              validateResult.errorList.length
+            }}</span>
             条。</span
           >
         </div>
@@ -51,12 +51,12 @@
         <div class="fail-excel-import-box-title">无效数据详情</div>
         <el-table :data="errorListTemp" style="width: 100%">
           <el-table-column
-              v-for="column in columnsListTemp"
-              :key="column.prop"
-              :prop="column.prop"
-              :label="column.label"
-              :align="column.align"
-              :min-width="column.width"
+            v-for="column in columnsListTemp"
+            :key="column.prop"
+            :prop="column.prop"
+            :label="column.label"
+            :align="column.align"
+            :min-width="column.width"
           >
             <template slot-scope="scope">
               <span v-html="scope.row[column.prop]"></span>
@@ -69,48 +69,47 @@
       </div>
       <div class="footer">
         <el-button
-            type="primary"
-            @click="cancel"
-            :disabled="excelData.tableData.length === 0 || confirmDisabledFlag"
-        >确定
-        </el-button
-        >
+          type="primary"
+          @click="cancel"
+          :disabled="excelData.tableData.length === 0 || confirmDisabledFlag"
+          >确定
+        </el-button>
       </div>
     </NstcDialog>
   </div>
 </template>
 <script>
-import XLSX from "xlsx";
-import axios from "@/utils/axios.js";
-import NstcDialog from "../NstcDialog/NstcDialog";
+import XLSX from 'xlsx'
+import axios from '../../../utils/axios.js'
+import NstcDialog from '../NstcDialog/NstcDialog'
 
 export default {
-  name: "NstcExcelImportN",
+  name: 'NstcExcelImportN',
   props: {
     title: {
       type: String,
       default: function () {
-        return "文件导入";
-      },
+        return '文件导入'
+      }
     },
     tips: {
       type: Array,
       default: () => {
-        return [];
-      },
+        return []
+      }
     },
     templateUrl: {
       type: String,
-      default: "",
+      default: ''
     },
     downConfig: {
       type: Object,
       default() {
         return {
           isFrontDown: true,
-          fileName: "下载.xlsx",
-        };
-      },
+          fileName: '下载.xlsx'
+        }
+      }
     },
     footerHandlers: {
       type: Object,
@@ -122,19 +121,17 @@ export default {
           // confirm: {
           //   text: '导入'
           // }
-        };
-      },
+        }
+      }
     },
     beforeUpload: Function, // eslint-disable-line
     callback: {
       type: Function,
-      default: () => {
-      },
+      default: () => {}
     },
     handleConfirm: {
       type: Function,
-      default: () => {
-      },
+      default: () => {}
     },
     // 校验结果
     validateResult: {
@@ -144,242 +141,240 @@ export default {
           totalNum: 0,
           successNum: 0,
           columnsList: [],
-          errorList: [],
-        };
-      },
+          errorList: []
+        }
+      }
     },
     reset: {
       type: Boolean,
-      default: false,
+      default: false
     },
     dialogVisible: {
       type: Boolean,
-      default: false,
-    },
+      default: false
+    }
   },
   components: {
-    NstcDialog,
+    NstcDialog
   },
   data() {
     return {
       loading: false,
       excelData: {
         tableHeader: [],
-        tableData: [],
+        tableData: []
       },
 
-      analysisText: "analysis",
-      fileName: "",
+      analysisText: 'analysis',
+      fileName: '',
       statisticsFlag: false,
       columnsListTemp: [],
       errorListTemp: [],
       successFlag: false,
-      confirmDisabledFlag: true,
-    };
+      confirmDisabledFlag: true
+    }
   },
   computed: {
     hasErrorFlag() {
       return (
-          this.validateResult.errorList &&
-          this.validateResult.errorList.length > 0
-      );
-    },
+        this.validateResult.errorList &&
+        this.validateResult.errorList.length > 0
+      )
+    }
   },
   watch: {
     validateResult: {
       handler(newValue, oldValue) {
-        console.log("值更新了", newValue, oldValue);
-        newValue.columnsList.length && (this.statisticsFlag = true);
+        console.log('值更新了', newValue, oldValue)
+        newValue.columnsList.length && (this.statisticsFlag = true)
 
         // 获取每行字符的最大长度
-        const lengthObj = {};
+        const lengthObj = {}
         newValue.errorList.map((item) => {
           const keys = newValue.columnsList.map((i) => {
-            return i["prop"];
-          });
+            return i['prop']
+          })
           keys.map((k, i) => {
             if (item[k] && (!lengthObj[i] || lengthObj[i] < item[k].length)) {
-              lengthObj[i] = item[k].length;
+              lengthObj[i] = item[k].length
             }
-          });
-        });
+          })
+        })
 
         // 更新column
         this.columnsListTemp = newValue.columnsList.map((i, index) => {
-          console.log("iiiiiii", i, i.errorList);
+          console.log('iiiiiii', i, i.errorList)
           return {
             ...i,
             width: 16 * lengthObj[index] + 60,
             component: {
-              template: `<div v-html="scope.row['${i.prop}']"></div>`,
-            },
-          };
-        });
+              template: `<div v-html="scope.row['${i.prop}']"></div>`
+            }
+          }
+        })
 
         // 更新errorList的tableData
-        this.errorListTemp.length = 0;
+        this.errorListTemp.length = 0
         newValue.errorList.map((i) => {
-          const temp = {};
+          const temp = {}
           Object.keys(i).map((k) => {
             if (i.errorList && i.errorList.includes(k)) {
-              temp[
-                  k
-                  ] = `<div class="nstc-g6-common-color-danger">${i[k]}</div>`;
+              temp[k] = `<div class="nstc-g6-common-color-danger">${i[k]}</div>`
             } else {
-              temp[k] = i[k];
+              temp[k] = i[k]
             }
-          });
-          this.errorListTemp.push(temp);
-        });
+          })
+          this.errorListTemp.push(temp)
+        })
 
-        console.log(this.errorListTemp, this.columnsListTemp);
+        console.log(this.errorListTemp, this.columnsListTemp)
 
         this.successFlag =
-            this.validateResult.successNum !== 0 &&
-            this.validateResult.successNum === this.validateResult.totalNum;
+          this.validateResult.successNum !== 0 &&
+          this.validateResult.successNum === this.validateResult.totalNum
 
         if (this.footerHandlers.confirm) {
-          this.footerHandlers.confirm.disabled = !this.successFlag;
+          this.footerHandlers.confirm.disabled = !this.successFlag
         }
 
-        this.confirmDisabledFlag = !this.successFlag;
+        this.confirmDisabledFlag = !this.successFlag
 
         // nstc-g6-common-color-danger
         this.columnsList &&
-        this.columnsList.map((i) => {
-          console.log(i);
-        });
+          this.columnsList.map((i) => {
+            console.log(i)
+          })
       },
-      deep: true,
-    },
+      deep: true
+    }
   },
   methods: {
     cancel() {
-      this.handleConfirmImportExcel();
+      this.handleConfirmImportExcel()
     },
     async handleConfirmImportExcel() {
-      await this.handleConfirm(this.excelData);
+      await this.handleConfirm(this.excelData)
     },
     handleCommand(command) {
-      if (command == "a") {
-        this.seletFile();
-      } else if (command == "b") {
-        this.downloadTemplate();
+      if (command == 'a') {
+        this.seletFile()
+      } else if (command == 'b') {
+        this.downloadTemplate()
       }
     },
     seletFile() {
-      let input = document.createElement("input");
-      let self = this;
-      input.type = "file";
-      input.accept = ".xlsx, .xls, .csv";
-      input.addEventListener("change", function (event) {
-        const files = event.target.files;
-        const rawFile = files[0]; // only use files[0]
-        console.log("导入的文件:", rawFile);
-        self.fileName = rawFile.name;
-        if (!rawFile) return;
-        self.upload(rawFile);
-        this.value = null; // fix can't select the same excel
-      });
-      input.click();
+      let input = document.createElement('input')
+      let self = this
+      input.type = 'file'
+      input.accept = '.xlsx, .xls, .csv'
+      input.addEventListener('change', function (event) {
+        const files = event.target.files
+        const rawFile = files[0] // only use files[0]
+        console.log('导入的文件:', rawFile)
+        self.fileName = rawFile.name
+        if (!rawFile) return
+        self.upload(rawFile)
+        this.value = null // fix can't select the same excel
+      })
+      input.click()
     },
     /*解析传入的表格 */
     readerData(rawFile) {
-      this.loading = true;
+      this.loading = true
       return new Promise((resolve) => {
-        const reader = new FileReader();
+        const reader = new FileReader()
         reader.onload = (e) => {
-          const data = e.target.result;
+          const data = e.target.result
           const workbook = XLSX.read(data, {
-            type: "array",
-            cellDates: true,
-          });
-          const firstSheetName = workbook.SheetNames[0];
-          const worksheet = workbook.Sheets[firstSheetName];
-          const header = this.getHeaderRow(worksheet);
-          const results = XLSX.utils.sheet_to_json(worksheet);
-
-          this.generateData({header, results});
-          this.loading = false;
-          resolve();
-        };
-        reader.readAsArrayBuffer(rawFile);
-      });
+            type: 'array',
+            cellDates: true
+          })
+          const firstSheetName = workbook.SheetNames[0]
+          const worksheet = workbook.Sheets[firstSheetName]
+          const header = this.getHeaderRow(worksheet)
+          const results = XLSX.utils.sheet_to_json(worksheet)
+
+          this.generateData({ header, results })
+          this.loading = false
+          resolve()
+        }
+        reader.readAsArrayBuffer(rawFile)
+      })
     },
-    generateData({header, results}) {
-      this.excelData.tableHeader = header;
-      this.excelData.tableData = results;
-      this.callback && this.callback(this.excelData);
+    generateData({ header, results }) {
+      this.excelData.tableHeader = header
+      this.excelData.tableData = results
+      this.callback && this.callback(this.excelData)
     },
     getHeaderRow(sheet) {
-      console.log(sheet);
-      const headers = [];
-      const range = XLSX.utils.decode_range(sheet["!ref"]);
-      let C;
-      const R = range.s.r;
+      console.log(sheet)
+      const headers = []
+      const range = XLSX.utils.decode_range(sheet['!ref'])
+      let C
+      const R = range.s.r
       /* start in the first row */
       for (C = range.s.c; C <= range.e.c; ++C) {
         /* walk every column in the range */
-        const cell = sheet[XLSX.utils.encode_cell({c: C, r: R})];
+        const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })]
         /* find the cell in the first row */
-        let hdr = "UNKNOWN " + C; // <-- replace with your desired default
-        if (cell && cell.t) hdr = XLSX.utils.format_cell(cell);
-        headers.push(hdr);
+        let hdr = 'UNKNOWN ' + C // <-- replace with your desired default
+        if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
+        headers.push(hdr)
       }
-      return headers;
+      return headers
     },
     isExcel(file) {
-      return /\.(xlsx|xls|csv)$/.test(file.name);
+      return /\.(xlsx|xls|csv)$/.test(file.name)
     },
     /*上传文件 */
     upload(rawFile) {
       if (!this.beforeUpload) {
-        this.readerData(rawFile);
-        return;
+        this.readerData(rawFile)
+        return
       }
-      const before = this.beforeUpload(rawFile);
+      const before = this.beforeUpload(rawFile)
       if (before) {
-        this.readerData(rawFile);
+        this.readerData(rawFile)
       }
     },
     // 下载文件
     downloadTemplate() {
       // 前端下载
       if (this.downConfig.isFrontDown) {
-        const aEl = document.createElement("a");
-        aEl.setAttribute("href", this.templateUrl);
-        aEl.target = "_blank";
+        const aEl = document.createElement('a')
+        aEl.setAttribute('href', this.templateUrl)
+        aEl.target = '_blank'
         // aEl.download = this.templateUrl
-        aEl.click();
+        aEl.click()
       } else {
         axios({
           url: this.templateUrl,
-          method: "get",
-          responseType: "blob",
+          method: 'get',
+          responseType: 'blob'
         }).then((res) => {
-          const content = res;
-          const blob = new Blob([content]);
-          if ("download" in document.createElement("a")) {
-            const link = document.createElement("a");
-            link.download = this.downConfig.fileName;
-            link.style.display = "none";
-            link.href = URL.createObjectURL(blob);
-            document.body.appendChild(link);
-            link.click();
-            URL.revokeObjectURL(link.href);
-            document.body.removeChild(link);
+          const content = res
+          const blob = new Blob([content])
+          if ('download' in document.createElement('a')) {
+            const link = document.createElement('a')
+            link.download = this.downConfig.fileName
+            link.style.display = 'none'
+            link.href = URL.createObjectURL(blob)
+            document.body.appendChild(link)
+            link.click()
+            URL.revokeObjectURL(link.href)
+            document.body.removeChild(link)
           } else {
-            navigator.msSaveBlob(blob, this.downConfig.fileName);
+            navigator.msSaveBlob(blob, this.downConfig.fileName)
           }
-        });
+        })
       }
     },
     //关闭弹窗
     resetAction(flag) {
       console.log(flag)
-    },
-  },
-};
+    }
+  }
+}
 </script>
 <style lang="scss" scoped>
 .root-class {
@@ -402,7 +397,6 @@ export default {
         border: none !important;
       }
     }
-
   }
 
   .select-in-dialog-result:hover {
@@ -431,7 +425,7 @@ export default {
   .el-select .el-input.is-focus .el-input__inner,
   .el-textarea__inner:focus {
     box-shadow: 0 0 4px 0 #007aff;
-    border-color: #007AFF;
+    border-color: #007aff;
   }
 
   .el-input {
@@ -769,8 +763,12 @@ export default {
   }
 
   .el-radio__inner:hover,
-  .el-input-number__decrease:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled),
-  .el-input-number__increase:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled),
+  .el-input-number__decrease:hover:not(.is-disabled)
+    ~ .el-input
+    .el-input__inner:not(.is-disabled),
+  .el-input-number__increase:hover:not(.is-disabled)
+    ~ .el-input
+    .el-input__inner:not(.is-disabled),
   .el-cascader .el-input.is-focus .el-input__inner {
     border-color: #007aff;
   }
@@ -829,7 +827,7 @@ export default {
     }
 
     cursor: pointer;
-    background: #F5F5F5;
+    background: #f5f5f5;
   }
 
   // 滚动条样式
@@ -924,7 +922,7 @@ export default {
 //修改上传input样式
 .nstc-common-excel-import {
   .placeholder-has-file {
-    color: #3D4A57 !important;
+    color: #3d4a57 !important;
     height: 22px;
     line-height: 22px;
     width: auto;
@@ -1014,7 +1012,9 @@ export default {
   background-color: rgba(0, 122, 255, 0.1);
 }
 
-.el-select-dropdown.is-multiple .el-scrollbar__view .el-select-dropdown__item.selected.hover {
+.el-select-dropdown.is-multiple
+  .el-scrollbar__view
+  .el-select-dropdown__item.selected.hover {
   background-color: rgba(0, 122, 255, 0.1);
 }
 
@@ -1027,7 +1027,6 @@ export default {
   margin-left: 0;
 }
 
-
 .el-button.nstc-g6-common-btn-size-s {
   margin: 0 4px;
 }
@@ -1046,7 +1045,6 @@ export default {
   font-weight: normal;
 }
 
-
 .el-button--default.nstc-g6-common-btn-1:not(.is-disabled):hover,
 .el-button--default.nstc-g6-common-btn-1:not(.is-disabled):focus:hover {
   border-color: #146be6 !important;
@@ -1054,21 +1052,21 @@ export default {
   background-color: #fff !important;
 }
 
-
 .el-input .el-input__inner:hover {
-  border: 1px solid #007AFF;
+  border: 1px solid #007aff;
 }
 
 .el-select:hover .el-input .el-input__inner {
-  border: 1px solid #007AFF;
+  border: 1px solid #007aff;
 }
 
-.el-table th, .el-table td {
+.el-table th,
+.el-table td {
   padding: 0;
   height: 44px;
 }
 
-.drop.el-popper[x-placement^="bottom"] ::v-deep .popper__arrow {
+.drop.el-popper[x-placement^='bottom'] ::v-deep .popper__arrow {
   display: none;
 }
 
@@ -1144,7 +1142,7 @@ export default {
 
 .import-process::after {
   display: inline-block;
-  content: "";
+  content: '';
   width: 283px;
   height: 4px;
   background: #48d2a0;