n20-common-lib 1.3.10 → 1.3.11

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

@@ -0,0 +1,475 @@
+<!--
+  功能：    excel自定义导入功能
+  作者：    nstc
+  创建时间： 2021-02-05
+-->
+<template>
+  <div>
+    <NstcDialog
+      v-model="_value"
+      :title="title"
+      :width="width"
+      append-to-body
+      v-bind="$attrs"
+      v-on="$listeners"
+      @cancel="resetAction"
+      :footer-handlers="footerHandlers"
+    >
+      <div class="nstc-common-excel-import">
+        <div class="nstc-common-excel-import-tips-box">
+          <el-row :gutter="10">
+            <el-col style="width: 75px; text-align: right">
+              <span class="tips-box-text">导入说明:</span>
+            </el-col>
+            <el-col :span="18">
+              <div v-for="(item, index) in tips" :key="index" class="tips-item">
+                <span v-if="tips.length !== 1">{{ index + 1 }}. </span>
+                <span>{{ item.text }}</span>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+        <slot />
+
+        <el-form :label-width="labelWidth">
+          <el-form-item label="上传">
+            <div class="excel-unload-input" @click="uploadChooseFile">
+              <div
+                :class="{
+                  placeholder: true,
+                  'placeholder-has-file': placeholderHasFile,
+                }"
+              >
+                {{ placeholderText || '请选择' }}
+              </div>
+              <img class="excel-unload-input-img" :src="uploadImg" alt="" />
+            </div>
+            <el-button
+              type="primary"
+              class="nstc-g6-common-btn-1 nstc-g6-common-btn-size-s"
+              @click="handleConfirmImportExcel"
+              :disabled="
+                excelData.tableData.length === 0 || confirmDisabledFlag
+              "
+              >导入</el-button
+            >
+            <el-button
+              type="text"
+              style="margin-left: 20px"
+              @click="downloadTemplate"
+              :disabled="!templateUrl"
+              >导入模板下载</el-button
+            >
+          </el-form-item>
+        </el-form>
+
+        <div v-show="statisticsFlag" class="excel-upload-result-box">
+          <div class="excel-upload-result-box-head">结果统计</div>
+          <div class="excel-upload-result-box-content">
+            <span>结果统计 {{ validateResult.totalNum }} 条记录, </span>
+            <span>其中有效数据记录{{ validateResult.successNum }} 条, </span>
+            <span
+              >其中无效数据记录
+              <span class="nstc-import-error-num">{{
+                validateResult.errorList.length
+              }}</span>
+              条。</span
+            >
+          </div>
+        </div>
+
+        <NstcUploadCustomExcel
+          v-if="value"
+          ref="nstc-unload-excel-box"
+          v-show="percentage !== 100"
+          class="upload-excel-box"
+          :before-upload="beforeUpload"
+          :on-success="handleSuccess"
+        ></NstcUploadCustomExcel>
+
+        <div v-show="hasErrorFlag" class="fail-excel-import-box">
+          <div class="fail-excel-import-box-title">无效数据情况统计</div>
+          <NstcTable
+            :columns="columnsListTemp"
+            :data="errorListTemp"
+            :show-pagination="false"
+            :show-overflow-tooltip="true"
+          ></NstcTable>
+        </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";
+export default {
+  name: "NstcExcelCustomImport",
+
+  components: {
+    NstcUploadCustomExcel,
+    NstcDialog,
+    NstcTable,
+  },
+  props: {
+    //弹框是否显示  默认：false
+    value: {
+      type: Boolean,
+      default: false,
+    },
+    //导入说明文本
+    tips: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    //表单域标签的宽度
+    labelWidth: {
+      type: String,
+      default: "",
+    },
+    //文件下载的模板url
+    templateUrl: {
+      type: String,
+      default: "",
+    },
+    //操作框的主标题
+    title: {
+      type: String,
+      default: function () {
+        return "导入";
+      },
+    },
+    //是否重置
+    reset: {
+      type: Boolean,
+      default: false,
+    },
+    //底部按钮信息
+    footerHandlers: {
+      type: Object,
+      default: function () {
+        return {
+          // cancel: {
+          //   text: '取消'
+          // },
+          // confirm: {
+          //   text: '导入'
+          // }
+        };
+      },
+    },
+    //账户明细自定义导入标识
+    flag: {
+      type: Boolean,
+      default: false,
+    },
+    // 自动上传校验
+    callback: {
+      type: Function,
+      default: () => {},
+    },
+    // mapper: {
+    //   type: Object,
+    //   default: () => {}
+    // },
+    //导入请求
+    handleConfirm: {
+      type: Function,
+      default: () => {},
+    },
+
+    // 校验结果
+    validateResult: {
+      type: Object,
+      default: () => {
+        return {
+          totalNum: 0,
+          successNum: 0,
+          columnsList: [],
+          errorList: [],
+        };
+      },
+    },
+    width:{
+      type:[String,Number],
+      default:'1200px'
+    }
+  },
+  mounted() {
+    this.placeholderText= ''
+    // chrome and ie
+    window.addEventListener("mousewheel", this.handleScroll(), false);
+    // firefox
+    window.addEventListener("DOMMouseScroll", this.handleScroll(), false);
+  },
+  data() {
+    return {
+      uploadImg,
+      excelData: {
+        // tableHeader: [],
+        tableData: [],
+      },
+      placeholderHasFile: false,
+      progressStatus: "",
+      percentage: 0,
+      percentageFlag: false,
+      fileName: "",
+      drawerFlag: false,
+      dialogVisible: false,
+      tipsText: "导入说明",
+      totalNum: 0,
+      successNum: 0,
+      failNum: 0,
+      placeholderText: "",
+      columnsFailResult: [],
+      tableDataFailResult: [],
+      columnsListTemp: [],
+      errorListTemp: [],
+      successFlag: false,
+      statisticsFlag: false,
+      confirmDisabledFlag: true,
+      isShow: false,
+    };
+  },
+  watch: {
+    value:{
+      handler(newValue){
+        if (!newValue) {
+          this.resetAction()
+        }
+      }
+    },
+    validateResult: {
+      handler(newValue, oldValue) {
+        // console.log("值更新了", newValue, oldValue);
+        oldValue.columnsList.length && (this.statisticsFlag = true);
+
+        // 获取每行字符的最大长度
+        const lengthObj = {};
+        newValue.errorList.map((item) => {
+          // console.log("keys", Object.keys(item));
+          const keys = oldValue.columnsList.map((i) => {
+            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;
+            }
+          });
+        });
+
+        // 更新column
+        this.columnsListTemp = oldValue.columnsList.map((i, index) => {
+          // console.log('iiiiiii', i, i.errorList)
+          return {
+            ...i,
+            width: 16 * lengthObj[index] + 40,
+            component: {
+              template: `<div v-html="scope.row['${i.prop}']"></div>`,
+            },
+          };
+        });
+
+
+        // 更新errorList的tableData
+        this.errorListTemp.length = 0;
+        newValue.errorList.map((i) => {
+          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>`;
+            } else {
+              temp[k] = i[k];
+            }
+          });
+          this.errorListTemp.push(temp);
+          // console.log("表格数据", this.errorListTemp);
+        });
+
+        this.successFlag =
+          this.validateResult.successNum !== 0 &&
+          this.validateResult.successNum === this.validateResult.totalNum;
+
+        // this.footerHandlers.confirm.disabled = !this.successFlag
+        this.confirmDisabledFlag = !this.successFlag;
+
+        // nstc-g6-common-color-danger
+        // this.columnsList && this.columnsList.map(i => {
+        //   console.log(i)
+        // })
+      },
+      deep: true,
+    },
+    columnsList: {
+      handler(newValue, oldValue) {
+        console.log("值更新了", newValue, oldValue);
+
+        // console.log("123123123", this.columnsListTemp);
+      },
+    },
+    reset(val) {
+      val && this.resetAction();
+    },
+  },
+  computed: {
+    _value: {
+      get() {
+        return this.value;
+      },
+      set(val) {
+        this.$emit("input", val);
+      },
+    },
+    hasErrorFlag() {
+      return (
+        this.validateResult.errorList &&
+        this.validateResult.errorList.length > 0
+      );
+    },
+  },
+  created() {
+    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;
+    },
+    // header
+    handleSuccess(results,tableList) {
+      this.percentage = 100;
+      this.progressStatus = "success";
+      this.validateResult.columnsList = tableList
+
+
+
+      this.excelData.tableData = results;
+
+      // 自动上传校验or模板上传
+      this.flag ? this.callback(results) : this.callback(this.excelData);
+    },
+
+    async handleConfirmImportExcel() {
+      (await this.flag)
+        ? this.handleConfirm()
+        : this.handleConfirm(this.excelData);
+      // try {
+      //   await this.callback(this.excelData)
+      // } catch (err) {
+      //   return Promise.reject(err)
+      // }
+    },
+
+    // 下载文件
+    downloadTemplate() {
+      const aEl = document.createElement("a");
+      aEl.setAttribute("href", this.templateUrl);
+      aEl.target = "_blank";
+      // aEl.download = this.templateUrl
+      aEl.click();
+    },
+
+    resetAction(flag) {
+      // 文件
+      this.excelData = {
+        // tableHeader: [],
+        tableData: [],
+      };
+      // 不改变原来数据结构
+      this.validateResult.totalNum = null;
+      this.validateResult.successNum = null;
+      this.validateResult.columnsList = [];
+      this.validateResult.errorList = [];
+
+      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.$nextTick(() => {
+        this.$forceUpdate();
+      });
+    },
+
+    /**
+     * 选择文件
+     */
+    uploadChooseFile() {
+      this.$refs[`nstc-unload-excel-box`].handleUpload();
+    },
+    handleScroll(e) {
+      let direction = e ? (e.deltaY > 0 ? "down" : "up") : ""; // 该语句可以用来判断滚轮是向上滑动还是向下
+      if (document.getElementsByTagName("li").length == 1) {
+        //此处决定无论一次滚轮滚动的距离是多少，此事件
+        //都得等上次滚动结束，才会执行本次
+        this.isShow = false;
+        setTimeout(() => {
+          this.isShow = true;
+          ++this.nowIndex;
+          if (this.nowIndex == 3) {
+            this.nowIndex = 0;
+          }
+        }, 10);
+      }
+      console.log(direction);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+
+.nstc-import-error-num {
+  color: #fb5555;
+}
+.excel-unload-input {
+  position: relative;
+  overflow: hidden;
+}
+.placeholder-has-file {
+  color: #242424 !important;
+  height: 35px;
+  width: 999px;
+  position: absolute;
+  top: -1px;
+  left: 10px;
+}
+.excel-unload-input-img {
+  position: absolute;
+  right: 10px;
+  top: 8px;
+}
+// .dialog-footer {
+//   position: absolute;
+//   top: 170px;
+//   left: 380px;
+// }
+</style>
+

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

@@ -0,0 +1,145 @@
+<template>
+  <div class="nstc-excel-export-box">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import * as Export2Excel from '../../utils/vendor/Export2Excel'
+export default {
+  name: 'NstcExcelExport',
+  props: {
+    data: {
+      type: Object,
+      default: function () {
+        return {
+          childKey: '', //指定childKey时，会更具childKey递归取数据
+          head: [], //表头数据,未指定childKey时，必须传字符串数组,指定childKey时,表头为对象数组，{key:'key',value:'value'}，方便表格行取对应数据
+          data: [], //行数据，未指定childKey时，必须传与表头对应的字符串数组，指定childKey时，传与表头对应的对象数组
+          fileName: '列表'
+        }
+      }
+    },
+    // 导入执行动作
+    executeExportFlag: {
+      type: [Number, String],
+      default: () => {
+        return ''
+      }
+    },
+    // 单元格样式
+    cellStyle: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    merges: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data() {
+    return {}
+  },
+  watch: {
+    executeExportFlag(newValue) {
+      if (newValue) {
+        this.excelExportAction()
+      }
+    }
+  },
+  methods: {
+    /**
+     * 扁平化数据
+     * @param item 当前数据
+     * @param dataTemp 新组装的数据容器
+     * @param level 当前数据在当前行的等级
+     * @param str 子节点需要拼接的字符串
+     * @param childKey 子节点的key
+     */
+    flatChild(item, dataTemp, level, str, childKey) {
+      let subStr = ''
+      for (var i = 0; i < level; i++) {
+        subStr += str
+      }
+      item[this.data.head[0].key] = subStr + item[this.data.head[0].key]
+      dataTemp.push(item)
+      level++
+      // eslint-disable-next-line no-debugger
+      if (item[childKey] && item[childKey].length > 0) {
+        item[childKey].forEach((child) => {
+          this.flatChild(child, dataTemp, level, str, childKey)
+        })
+      }
+    },
+    /**
+     * 导出动作
+     */
+    excelExportAction() {
+      this.excelDownloadLoading = true
+      let that = this
+      if (this.data.head.length < 1 || this.data.data.length < 1) {
+        this.$message({
+          type: 'warning',
+          message: '表格数据不足！'
+        })
+        return
+      }
+      // console.log('Export2Excel', import('@/utils/vendor/Export2Excel'))
+      // import('@/utils/vendor/Export2Excel').then(excel => {
+
+      //   excel.export_json_to_excel({
+      //     header: that.data.head,
+      //     data: that.data.data,
+      //     filename: that.data.fileName
+      //   })
+      //   that.excelDownloadLoading = false
+      // })
+      let str = '    ' //子节点添加的符号
+      let level = 0 //当前行的等级
+      let dataTemp = [] //暂存扁平化数据
+      if (this.data.childKey) {
+        this.data.data.forEach((item) => {
+          level = 0
+          this.flatChild(item, dataTemp, level, str, this.data.childKey)
+        })
+
+        //扁平化数据转化为表数据
+        dataTemp = dataTemp.map((d) => {
+          let temp = []
+          this.data.head.forEach((h) => {
+            temp.push(d[h.key])
+          })
+          return temp
+        })
+        // eslint-disable-next-line no-debugger
+        // debugger;
+
+        //重置表数据为转化后的数据
+        this.data.head = this.data.head.map((item) => item.value)
+        this.data.data = dataTemp
+      }
+
+      Export2Excel.export_json_to_excel(
+        {
+          header: that.data.head,
+          data: that.data.data,
+          filename: that.data.fileName,
+          merges: this.merges
+        },
+        this.cellStyle
+      )
+      that.excelDownloadLoading = false
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.nstc-excel-export-box {
+  display: inline-block;
+}
+</style>