n20-common-lib 1.3.4 → 1.3.7

package/src/components/NstcG6Components/NstcExcelCustomImport/NstcExcelCustomImport.vue

@@ -1,475 +0,0 @@
-<!--
-  功能：    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/src/components/NstcG6Components/NstcExcelExport/NstcExcelExport.vue

@@ -1,145 +0,0 @@
-<template>
-  <div class="nstc-excel-export-box">
-    <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 []
-      }
-    }
-  },
-  watch: {
-    executeExportFlag(newValue) {
-      if (newValue) {
-        this.excelExportAction()
-      }
-    }
-  },
-  data() {
-    return {}
-  },
-  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>