n20-common-lib 2.4.5 → 2.4.7

package/nstc-g6/components/NstcExcelCustomImport/NstcExcelCustomImport.vue

@@ -37,7 +37,7 @@
               <div
                 :class="{
                   placeholder: true,
-                  'placeholder-has-file': placeholderHasFile,
+                  'placeholder-has-file': placeholderHasFile
                 }"
               >
                 {{ placeholderText || '请选择' }}
@@ -48,16 +48,10 @@
               type="primary"
               class="nstc-g6-common-btn-1 nstc-g6-common-btn-size-s"
               @click="handleConfirmImportExcel"
-              :disabled="
-                excelData.tableData.length === 0 || confirmDisabledFlag
-              "
+              :disabled="excelData.tableData.length === 0 || confirmDisabledFlag"
               >导入</el-button
             >
-            <el-button
-              type="text"
-              style="margin-left: 20px"
-              @click="downloadTemplate"
-              :disabled="!templateUrl"
+            <el-button type="text" style="margin-left: 20px" @click="downloadTemplate" :disabled="!templateUrl"
               >导入模板下载</el-button
             >
           </el-form-item>
@@ -70,9 +64,7 @@
             <span>其中有效数据记录{{ validateResult.successNum }} 条, </span>
             <span
               >其中无效数据记录
-              <span class="nstc-import-error-num">{{
-                validateResult.errorList.length
-              }}</span>
+              <span class="nstc-import-error-num">{{ validateResult.errorList.length }}</span>
               条。</span
             >
           </div>
@@ -97,61 +89,59 @@
           ></NstcTable>
         </div>
 
-        <div v-show="hasErrorFlag" class="end-tips">
-          上述数据输入有误，请修改导入文件中相关信息！
-        </div>
+        <div v-show="hasErrorFlag" class="end-tips">上述数据输入有误，请修改导入文件中相关信息！</div>
       </div>
     </NstcDialog>
   </div>
 </template>
 
 <script>
-import NstcUploadCustomExcel from "../NstcUploadCustomExcel/NstcUploadCustomExcel";
-import NstcDialog from "../NstcDialog/NstcDialog";
-import NstcTable from "../NstcTable/NstcTable";
-import uploadImg from "./img/upload@2x.png";
+import NstcUploadCustomExcel from '../NstcUploadCustomExcel/NstcUploadCustomExcel'
+import NstcDialog from '../NstcDialog/NstcDialog'
+import NstcTable from '../NstcTable/NstcTable'
+import uploadImg from './img/upload@2x.png'
 export default {
-  name: "NstcExcelCustomImport",
+  name: 'NstcExcelCustomImport',
 
   components: {
     NstcUploadCustomExcel,
     NstcDialog,
-    NstcTable,
+    NstcTable
   },
   props: {
     //弹框是否显示  默认：false
     value: {
       type: Boolean,
-      default: false,
+      default: false
     },
     //导入说明文本
     tips: {
       type: Array,
       default: () => {
-        return [];
-      },
+        return []
+      }
     },
     //表单域标签的宽度
     labelWidth: {
       type: String,
-      default: "",
+      default: ''
     },
     //文件下载的模板url
     templateUrl: {
       type: String,
-      default: "",
+      default: ''
     },
     //操作框的主标题
     title: {
       type: String,
       default: function () {
-        return "导入";
-      },
+        return '导入'
+      }
     },
     //是否重置
     reset: {
       type: Boolean,
-      default: false,
+      default: false
     },
     //底部按钮信息
     footerHandlers: {
@@ -164,18 +154,18 @@ export default {
           // confirm: {
           //   text: '导入'
           // }
-        };
-      },
+        }
+      }
     },
     //账户明细自定义导入标识
     flag: {
       type: Boolean,
-      default: false,
+      default: false
     },
     // 自动上传校验
     callback: {
       type: Function,
-      default: () => {},
+      default: () => {}
     },
     // mapper: {
     //   type: Object,
@@ -184,7 +174,7 @@ export default {
     //导入请求
     handleConfirm: {
       type: Function,
-      default: () => {},
+      default: () => {}
     },
 
     // 校验结果
@@ -195,41 +185,41 @@ export default {
           totalNum: 0,
           successNum: 0,
           columnsList: [],
-          errorList: [],
-        };
-      },
+          errorList: []
+        }
+      }
     },
-    width:{
-      type:[String,Number],
-      default:'1200px'
+    width: {
+      type: [String, Number],
+      default: '1200px'
     }
   },
   mounted() {
-    this.placeholderText= ''
+    this.placeholderText = ''
     // chrome and ie
-    window.addEventListener("mousewheel", this.handleScroll(), false);
+    window.addEventListener('mousewheel', this.handleScroll(), false)
     // firefox
-    window.addEventListener("DOMMouseScroll", this.handleScroll(), false);
+    window.addEventListener('DOMMouseScroll', this.handleScroll(), false)
   },
   data() {
     return {
       uploadImg,
       excelData: {
         // tableHeader: [],
-        tableData: [],
+        tableData: []
       },
       placeholderHasFile: false,
-      progressStatus: "",
+      progressStatus: '',
       percentage: 0,
       percentageFlag: false,
-      fileName: "",
+      fileName: '',
       drawerFlag: false,
       dialogVisible: false,
-      tipsText: "导入说明",
+      tipsText: '导入说明',
       totalNum: 0,
       successNum: 0,
       failNum: 0,
-      placeholderText: "",
+      placeholderText: '',
       columnsFailResult: [],
       tableDataFailResult: [],
       columnsListTemp: [],
@@ -237,12 +227,12 @@ export default {
       successFlag: false,
       statisticsFlag: false,
       confirmDisabledFlag: true,
-      isShow: false,
-    };
+      isShow: false
+    }
   },
   watch: {
-    value:{
-      handler(newValue){
+    value: {
+      handler(newValue) {
         if (!newValue) {
           this.resetAction()
         }
@@ -251,22 +241,22 @@ export default {
     validateResult: {
       handler(newValue, oldValue) {
         // console.log("值更新了", newValue, oldValue);
-        oldValue.columnsList.length && (this.statisticsFlag = true);
+        oldValue.columnsList.length && (this.statisticsFlag = true)
 
         // 获取每行字符的最大长度
-        const lengthObj = {};
+        const lengthObj = {}
         newValue.errorList.map((item) => {
           // console.log("keys", Object.keys(item));
           const keys = oldValue.columnsList.map((i) => {
-            return i["prop"];
-          });
+            return i['prop']
+          })
           keys.map((k, i) => {
             // console.log("计算的长度", item[k]);
             if (item[k] && (!lengthObj[i] || lengthObj[i] < item[k].length)) {
-              lengthObj[i] = item[k].length;
+              lengthObj[i] = item[k].length
             }
-          });
-        });
+          })
+        })
 
         // 更新column
         this.columnsListTemp = oldValue.columnsList.map((i, index) => {
@@ -275,104 +265,90 @@ export default {
             ...i,
             width: 16 * lengthObj[index] + 40,
             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.successFlag =
-          this.validateResult.successNum !== 0 &&
-          this.validateResult.successNum === this.validateResult.totalNum;
+          this.validateResult.successNum !== 0 && this.validateResult.successNum === this.validateResult.totalNum
 
         // 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)
         // })
       },
-      deep: true,
+      deep: true
     },
     columnsList: {
       handler(newValue, oldValue) {
-        console.log("值更新了", newValue, oldValue);
+        console.log('值更新了', newValue, oldValue)
 
         // console.log("123123123", this.columnsListTemp);
-      },
+      }
     },
     reset(val) {
-      val && this.resetAction();
-    },
+      val && this.resetAction()
+    }
   },
   computed: {
     _value: {
       get() {
-        return this.value;
+        return this.value
       },
       set(val) {
-        this.$emit("input", val);
-      },
+        this.$emit('input', val)
+      }
     },
     hasErrorFlag() {
-      return (
-        this.validateResult.errorList &&
-        this.validateResult.errorList.length > 0
-      );
-    },
+      return this.validateResult.errorList && this.validateResult.errorList.length > 0
+    }
   },
   created() {
-    console.log(
-      "批量导入的国际化",
-      "上述数据输入有误，请修改导入文件中相关信息！"
-    );
+    console.log('批量导入的国际化', '上述数据输入有误，请修改导入文件中相关信息！')
   },
   methods: {
     beforeUpload(file) {
-      this.percentage = 0;
-      this.progressStatus = "";
-      this.percentageFlag = true;
-      this.fileName = file.name;
-      this.placeholderText = this.fileName;
-      this.placeholderHasFile = true;
-      return true;
+      this.percentage = 0
+      this.progressStatus = ''
+      this.percentageFlag = true
+      this.fileName = file.name
+      this.placeholderText = this.fileName
+      this.placeholderHasFile = true
+      return true
     },
     // header
-    handleSuccess(results,tableList) {
-      this.percentage = 100;
-      this.progressStatus = "success";
+    handleSuccess(results, tableList) {
+      this.percentage = 100
+      this.progressStatus = 'success'
       this.validateResult.columnsList = tableList
 
-
-
-      this.excelData.tableData = results;
+      this.excelData.tableData = results
 
       // 自动上传校验or模板上传
-      this.flag ? this.callback(results) : this.callback(this.excelData);
+      this.flag ? this.callback(results) : this.callback(this.excelData)
     },
 
     async handleConfirmImportExcel() {
-      (await this.flag)
-        ? this.handleConfirm()
-        : this.handleConfirm(this.excelData);
+      ;(await this.flag) ? this.handleConfirm() : this.handleConfirm(this.excelData)
       // try {
       //   await this.callback(this.excelData)
       // } catch (err) {
@@ -382,70 +358,69 @@ export default {
 
     // 下载文件
     downloadTemplate() {
-      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()
     },
 
     resetAction(flag) {
       // 文件
       this.excelData = {
         // tableHeader: [],
-        tableData: [],
-      };
+        tableData: []
+      }
       // 不改变原来数据结构
-      this.validateResult.totalNum = null;
-      this.validateResult.successNum = null;
-      this.validateResult.columnsList = [];
-      this.validateResult.errorList = [];
+      this.validateResult.totalNum = null
+      this.validateResult.successNum = null
+      this.validateResult.columnsList = []
+      this.validateResult.errorList = []
 
-      this.successFlag = false;
+      this.successFlag = false
       // this.footerHandlers.confirm.disabled = true
-      this.confirmDisabledFlag = true;
-      this.percentageFlag = false;
-      this.fileName = "";
-      this.percentage = 0;
-      this.reset = false;
-      this.statisticsFlag = false;
-      this.placeholderHasFile = false;
-      this.placeholderText = '请选择';
-      console.log("执行了弹框关闭事件");
-      ![`delete`].includes(flag) && (this._value = false);
+      this.confirmDisabledFlag = true
+      this.percentageFlag = false
+      this.fileName = ''
+      this.percentage = 0
+      this.reset = false
+      this.statisticsFlag = false
+      this.placeholderHasFile = false
+      this.placeholderText = '请选择'
+      console.log('执行了弹框关闭事件')
+      ![`delete`].includes(flag) && (this._value = false)
       this.$nextTick(() => {
-        this.$forceUpdate();
-      });
+        this.$forceUpdate()
+      })
     },
 
     /**
      * 选择文件
      */
     uploadChooseFile() {
-      this.$refs[`nstc-unload-excel-box`].handleUpload();
+      this.$refs[`nstc-unload-excel-box`].handleUpload()
     },
     handleScroll(e) {
-      let direction = e ? (e.deltaY > 0 ? "down" : "up") : ""; // 该语句可以用来判断滚轮是向上滑动还是向下
-      if (document.getElementsByTagName("li").length == 1) {
+      let direction = e ? (e.deltaY > 0 ? 'down' : 'up') : '' // 该语句可以用来判断滚轮是向上滑动还是向下
+      if (document.getElementsByTagName('li').length == 1) {
         //此处决定无论一次滚轮滚动的距离是多少，此事件
         //都得等上次滚动结束，才会执行本次
-        this.isShow = false;
+        this.isShow = false
         setTimeout(() => {
-          this.isShow = true;
-          ++this.nowIndex;
+          this.isShow = true
+          ++this.nowIndex
           if (this.nowIndex == 3) {
-            this.nowIndex = 0;
+            this.nowIndex = 0
           }
-        }, 10);
+        }, 10)
       }
-      console.log(direction);
-    },
-  },
-};
+      console.log(direction)
+    }
+  }
+}
 </script>
 
 <style lang="scss">
-
 .nstc-import-error-num {
   color: #fb5555;
 }
@@ -472,4 +447,3 @@ export default {
 //   left: 380px;
 // }
 </style>
-

package/nstc-g6/components/NstcExcelImport/NstcExcelImport.vue

@@ -48,9 +48,7 @@
             <el-button
               type="primary"
               class="nstc-g6-common-btn-1 nstc-g6-common-btn-size-s"
-              :disabled="
-                excelData.tableData.length === 0 || confirmDisabledFlag
-              "
+              :disabled="excelData.tableData.length === 0 || confirmDisabledFlag"
               @click="handleConfirmImportExcel"
               >导入</el-button
             >
@@ -72,9 +70,7 @@
             <span>其中有效数据记录{{ validateResult.successNum }} 条, </span>
             <span
               >其中无效数据记录
-              <span class="nstc-import-error-num">{{
-                validateResult.errorList.length
-              }}</span>
+              <span class="nstc-import-error-num">{{ validateResult.errorList.length }}</span>
               条。</span
             >
           </div>
@@ -90,11 +86,7 @@
 
         <div v-show="hasErrorFlag" class="fail-excel-import-box">
           <div class="fail-excel-import-box-title">无效数据情况统计</div>
-          <el-table
-            :data="errorListTemp"
-            :height="tableHeight"
-            style="width: 100%; height: 500px"
-          >
+          <el-table :data="errorListTemp" :height="tableHeight" style="width: 100%; height: 500px">
             <el-table-column
               v-for="column in columnsListTemp"
               :key="column.prop"
@@ -254,10 +246,7 @@ export default {
       }
     },
     hasErrorFlag() {
-      return (
-        this.validateResult.errorList &&
-        this.validateResult.errorList.length > 0
-      )
+      return this.validateResult.errorList && this.validateResult.errorList.length > 0
     }
   },
   watch: {
@@ -291,10 +280,7 @@ export default {
           console.log('iiiiiii', i, i.errorList)
           return {
             ...i,
-            width:
-              16 * lengthObj[index] + 40 >= 100
-                ? 16 * lengthObj[index] + 40
-                : 100,
+            width: 16 * lengthObj[index] + 40 >= 100 ? 16 * lengthObj[index] + 40 : 100,
             component: {
               template: `<div v-html="scope.row['${i.prop}']"></div>`
             }
@@ -318,8 +304,7 @@ export default {
         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
@@ -794,12 +779,8 @@ 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;
   }
@@ -1005,9 +986,7 @@ export default {
 .el-select-dropdown.is-multiple .el-select-dropdown__item:hover {
   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);
 }
 
@@ -1071,4 +1050,3 @@ export default {
 //   left: 380px;
 // }
 </style>
-