n20-common-lib 1.3.46 → 1.3.49

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

@@ -1,1166 +1,1166 @@
-<template>
-  <div>
-    <el-dropdown
-      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>
-      </el-button>
-      <el-dropdown-menu slot="dropdown" class="drop">
-        <el-dropdown-item command="a">导入数据</el-dropdown-item>
-        <el-dropdown-item command="b">模板下载</el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
-    <NstcDialog
-      v-model="dialogVisible"
-      :title="title"
-      width="1200px"
-      append-to-body
-      v-bind="$attrs"
-      :footer-handlers="footerHandlers"
-      class="nstc-dialog-style"
-      v-on="$listeners"
-      @cancel="resetAction"
-    >
-      <div class="file-box">
-        <span class="file-box-title">导入文件</span>
-        <span class="file-name">{{ fileName }}</span>
-      </div>
-      <div class="import-process">导入进度</div>
-      <div v-show="statisticsFlag" class="excel-upload-result-box">
-        <div class="excel-upload-result-box-head">
-          导入统计
-          <span>共计导入 {{ validateResult.totalNum }}条, </span>
-          <span
-            >其中有效数据<span class="effect-data">
-              {{ validateResult.successNum }} </span
-            >条,
-          </span>
-          <span
-            >无效数据
-            <span class="nstc-import-error-num">{{
-              validateResult.errorList.length
-            }}</span>
-            条。</span
-          >
-        </div>
-      </div>
-      <div v-show="hasErrorFlag" class="fail-excel-import-box fail-box">
-        <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"
-          >
-            <template slot-scope="scope">
-              <span v-html="scope.row[column.prop]"></span>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-      <div v-show="hasErrorFlag" class="end-tips">
-        上述数据输入有误，请修改导入文件中相关信息！
-      </div>
-      <div class="footer">
-        <el-button
-          type="primary"
-          :disabled="excelData.tableData.length === 0 || confirmDisabledFlag"
-          @click="cancel"
-          >确定
-        </el-button>
-      </div>
-    </NstcDialog>
-  </div>
-</template>
-<script>
-import XLSX from 'xlsx'
-import axios from '../../../src/utils/axios.js'
-import NstcDialog from '../NstcDialog/NstcDialog'
-
-export default {
-  name: 'NstcExcelImportN',
-  components: {
-    NstcDialog
-  },
-  props: {
-    title: {
-      type: String,
-      default: function () {
-        return '文件导入'
-      }
-    },
-    tips: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-    templateUrl: {
-      type: String,
-      default: ''
-    },
-    downConfig: {
-      type: Object,
-      default() {
-        return {
-          isFrontDown: true,
-          fileName: '下载.xlsx'
-        }
-      }
-    },
-    footerHandlers: {
-      type: Object,
-      default: function () {
-        return {
-          // cancel: {
-          //   text: '取消'
-          // },
-          // confirm: {
-          //   text: '导入'
-          // }
-        }
-      }
-    },
-    beforeUpload: Function, // eslint-disable-line
-    callback: {
-      type: Function,
-      default: () => {}
-    },
-    handleConfirm: {
-      type: Function,
-      default: () => {}
-    },
-    // 校验结果
-    validateResult: {
-      type: Object,
-      default: () => {
-        return {
-          totalNum: 0,
-          successNum: 0,
-          columnsList: [],
-          errorList: []
-        }
-      }
-    },
-    reset: {
-      type: Boolean,
-      default: false
-    },
-    dialogVisible: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      loading: false,
-      excelData: {
-        tableHeader: [],
-        tableData: []
-      },
-
-      analysisText: 'analysis',
-      fileName: '',
-      statisticsFlag: false,
-      columnsListTemp: [],
-      errorListTemp: [],
-      successFlag: false,
-      confirmDisabledFlag: true
-    }
-  },
-  computed: {
-    hasErrorFlag() {
-      return (
-        this.validateResult.errorList &&
-        this.validateResult.errorList.length > 0
-      )
-    }
-  },
-  watch: {
-    validateResult: {
-      handler(newValue, oldValue) {
-        console.log('值更新了', newValue, oldValue)
-        newValue.columnsList.length && (this.statisticsFlag = true)
-
-        // 获取每行字符的最大长度
-        const lengthObj = {}
-        newValue.errorList.map((item) => {
-          const keys = newValue.columnsList.map((i) => {
-            return i['prop']
-          })
-          keys.map((k, i) => {
-            if (item[k] && (!lengthObj[i] || lengthObj[i] < item[k].length)) {
-              lengthObj[i] = item[k].length
-            }
-          })
-        })
-
-        // 更新column
-        this.columnsListTemp = newValue.columnsList.map((i, index) => {
-          console.log('iiiiiii', i, i.errorList)
-          return {
-            ...i,
-            width: 16 * lengthObj[index] + 60,
-            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.columnsListTemp)
-
-        this.successFlag =
-          this.validateResult.successNum !== 0 &&
-          this.validateResult.successNum === this.validateResult.totalNum
-
-        if (this.footerHandlers.confirm) {
-          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
-    }
-  },
-  methods: {
-    cancel() {
-      this.handleConfirmImportExcel()
-    },
-    async handleConfirmImportExcel() {
-      await this.handleConfirm(this.excelData)
-    },
-    handleCommand(command) {
-      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()
-    },
-    /*解析传入的表格 */
-    readerData(rawFile) {
-      this.loading = true
-      return new Promise((resolve) => {
-        const reader = new FileReader()
-        reader.onload = (e) => {
-          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)
-      })
-    },
-    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
-      /* 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 })]
-        /* 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)
-      }
-      return headers
-    },
-    isExcel(file) {
-      return /\.(xlsx|xls|csv)$/.test(file.name)
-    },
-    /*上传文件 */
-    upload(rawFile) {
-      if (!this.beforeUpload) {
-        this.readerData(rawFile)
-        return
-      }
-      const before = this.beforeUpload(rawFile)
-      if (before) {
-        this.readerData(rawFile)
-      }
-    },
-    // 下载文件
-    downloadTemplate() {
-      // 前端下载
-      if (this.downConfig.isFrontDown) {
-        const aEl = document.createElement('a')
-        aEl.setAttribute('href', this.templateUrl)
-        aEl.target = '_blank'
-        // aEl.download = this.templateUrl
-        aEl.click()
-      } else {
-        axios({
-          url: this.templateUrl,
-          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)
-          } else {
-            navigator.msSaveBlob(blob, this.downConfig.fileName)
-          }
-        })
-      }
-    },
-    //关闭弹窗
-    resetAction(flag) {
-      console.log(flag)
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.root-class {
-  .nstc-wrap-input-hover .select-in-dialog-result:hover,
-  .nstc-wrap-input-hover .nstc-common-form-textarea textarea:hover,
-  .nstc-wrap-input-hover .el-input__inner:hover {
-    border: 1px solid #007aff;
-    box-shadow: 0 0 4px 0 #007aff;
-  }
-
-  .nstc-wrap-input-hover .select-in-dialog-result:hover {
-    .select-in-dialog-result-remote-icon {
-      border-left: 1px solid #007aff;
-    }
-  }
-
-  .nstc-wrap-input-hover .select-in-dialog-result {
-    .el-select {
-      .el-input__inner:hover {
-        border: none !important;
-      }
-    }
-  }
-
-  .select-in-dialog-result:hover {
-    border: 1px solid #007aff;
-    box-shadow: 0 0 4px 0 #007aff;
-
-    .select-in-dialog-result-remote-icon {
-      border-left: 1px solid #007aff;
-    }
-  }
-
-  .is-disabled {
-    .select-in-dialog-result:hover {
-      border: 1px solid #ccc !important;
-      box-shadow: none;
-
-      .select-in-dialog-result-remote-icon {
-        border-left: none;
-      }
-    }
-  }
-
-  .el-form-item.is-error .el-input__inner:focus,
-  .el-form-item.is-error .el-textarea__inner:focus,
-  .el-input__inner:focus,
-  .el-select .el-input.is-focus .el-input__inner,
-  .el-textarea__inner:focus {
-    box-shadow: 0 0 4px 0 #007aff;
-    border-color: #007aff;
-  }
-
-  .el-input {
-    .el-input__suffix {
-      line-height: 32px;
-
-      .el-input__suffix-inner {
-        height: 100%;
-        display: block;
-
-        .el-input__icon {
-          line-height: 32px;
-        }
-      }
-    }
-  }
-
-  //日期修改
-  .el-date-editor {
-    // 修改日期选择框的图片居中
-    .el-range__icon {
-      line-height: 24px;
-    }
-
-    //修改日期选择框连接符居中
-    .el-range-separator {
-      line-height: 24px;
-    }
-  }
-
-  //日期选择框
-  .el-date-editor {
-    .el-range__close-icon {
-      line-height: 24px;
-    }
-  }
-
-  .el-date-editor.nstc-input-small {
-    .el-range__close-icon {
-      line-height: 18px;
-    }
-  }
-
-  //表单
-  .el-form-item__content {
-    display: flex;
-    height: 40px;
-    align-items: center;
-
-    .el-input {
-      height: 32px;
-      line-height: 32px;
-      // width: 224px;
-    }
-
-    .el-input.is-disabled .el-input__inner {
-      background-color: #f5f7fa;
-      border-color: #dddddd;
-      color: #ccc;
-    }
-
-    .input-custom {
-      display: flex;
-      align-items: center;
-      // 门户的样式.el-input__inner 设置为32px 应该是在.el-input上面设置
-      .el-input {
-        height: 32px;
-        line-height: 32px;
-        //修改input 后面单位的高度与input 不一致
-        .el-input-group__append {
-          line-height: 1;
-        }
-
-        .el-input__suffix {
-          height: 32px;
-
-          .el-input__suffix-inner {
-            height: 100%;
-            display: block;
-
-            .el-input__icon {
-              line-height: 32px;
-            }
-          }
-        }
-      }
-    }
-
-    .form-create-select-tree {
-      .el-input {
-        height: 32px;
-        line-height: 32px;
-        //修改input 后面单位的高度与input 不一致
-        .el-input-group__append {
-          line-height: 1;
-        }
-
-        .el-input__suffix {
-          height: 32px;
-
-          .el-input__suffix-inner {
-            height: 100%;
-            display: block;
-
-            .el-input__icon {
-              line-height: 32px;
-            }
-          }
-        }
-      }
-    }
-
-    .el-date-editor {
-      .el-input__prefix {
-        .el-input__icon {
-          line-height: 32px;
-        }
-      }
-
-      .el-input__suffix {
-        .el-input__icon {
-          line-height: 32px;
-        }
-      }
-    }
-
-    // 修改联机选择器的高度
-    .el-cascader {
-      height: 32px;
-      line-height: 32px;
-
-      .el-input {
-        height: 100%;
-
-        .el-input__suffix {
-          height: 32px;
-
-          .el-input__suffix-inner {
-            height: 100%;
-            display: block;
-
-            .el-input__icon.el-icon-arrow-down {
-              line-height: 32px;
-            }
-          }
-        }
-      }
-    }
-
-    // 修改复选框没有居中对齐
-    .el-checkbox-group {
-      display: flex;
-      align-items: center;
-    }
-
-    // 修改上传附件
-    .upload-custom {
-      height: 32px;
-
-      button {
-        height: 100%;
-      }
-    }
-
-    //修改下拉select 没有右边border
-    .el-select {
-      height: 32px;
-      line-height: 32px;
-
-      .el-input {
-        height: 100%;
-        margin-left: 0;
-
-        .el-input__suffix {
-          height: 32px;
-
-          .el-input__suffix-inner {
-            height: 100%;
-            display: block;
-
-            .el-input__icon {
-              line-height: 32px;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  //国际化下拉
-  .i18n-box {
-    .el-select {
-      height: 32px;
-      line-height: 32px;
-
-      .el-input {
-        height: 100%;
-        margin-left: 0;
-
-        .el-input__suffix {
-          height: 32px;
-
-          .el-input__suffix-inner {
-            height: 100%;
-            display: block;
-
-            .el-input__icon {
-              line-height: 32px;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  //按钮
-  // .el-button + .el-button {
-  //     margin-left: 16px;
-  // }
-  .el-button.nstc-g6-common-btn-size-s {
-    margin: 0 4px;
-  }
-
-  .el-button.nstc-g6-common-btn-size-b {
-    margin: 0 8px;
-  }
-
-  .el-button--primary:not(.is-disabled) {
-    &.nstc-g6-common-btn-1 {
-      background-color: #007aff;
-      border-color: #007aff;
-      color: #fff;
-    }
-  }
-
-  .el-button--default:not(.is-disabled) {
-    &.nstc-g6-common-btn-1 {
-      border-color: #dddddd;
-      color: #333;
-      background-color: #fff;
-    }
-  }
-
-  .el-button--primary:not(.is-disabled).nstc-g6-common-btn-1:not(.is-disabled):hover {
-    background-color: #146be6;
-    border: 1px solid #146be6;
-    color: #fff;
-    opacity: 1;
-  }
-
-  .el-button--default:not(.is-disabled).nstc-g6-common-btn-1:not(.is-disabled):hover {
-    border-color: #146be6;
-    color: #146be6;
-    background-color: #fff;
-    opacity: 1;
-  }
-
-  .el-button--default:not(.is-disabled).nstc-g6-common-btn-4 {
-    padding: 0 8px;
-    height: 28px;
-    min-width: 72px;
-    font-size: 14px;
-    background-color: #fff;
-    border: 1px solid #ddd;
-    color: #ff3b30;
-
-    &:hover {
-      border: 1px solid #ff3b30;
-      opacity: 1;
-    }
-  }
-
-  .el-button--primary:not(.is-disabled, .is-plain).nstc-g6-common-btn-4 {
-    color: #fff;
-    background-color: #ff3b30;
-    border: 1px solid #ff3b30;
-
-    &:hover {
-      color: #fff;
-    }
-  }
-
-  .el-button--primary.is-disabled.nstc-g6-common-btn-1,
-  .el-button--primary.is-disabled.nstc-g6-common-btn-1:hover,
-  .el-button--primary.is-disabled.nstc-g6-common-btn-1:focus,
-  .el-button--primary.is-disabled.nstc-g6-common-btn-1:active,
-  .el-button--default.is-disabled.nstc-g6-common-btn-1,
-  .el-button--default.is-disabled.nstc-g6-common-btn-1:hover,
-  .el-button--default.is-disabled.nstc-g6-common-btn-1:focus,
-  .el-button--default.is-disabled.nstc-g6-common-btn-1:active,
-  .el-button--primary.is-disabled.nstc-g6-common-btn-4,
-  .el-button--primary.is-disabled.nstc-g6-common-btn-4:hover,
-  .el-button--primary.is-disabled.nstc-g6-common-btn-4:focus,
-  .el-button--primary.is-disabled.nstc-g6-common-btn-4:active,
-  .el-button--default.is-disabled.nstc-g6-common-btn-4,
-  .el-button--default.is-disabled.nstc-g6-common-btn-4:hover,
-  .el-button--default.is-disabled.nstc-g6-common-btn-4:focus,
-  .el-button--default.is-disabled.nstc-g6-common-btn-4:active {
-    color: #ccc;
-    background-color: #eee;
-    border-color: #ddd;
-  }
-
-  // tab 标签颜色
-  .nstc-tab .el-tabs__item.is-active,
-  .el-tabs__item.is-active {
-    color: #1677ff;
-  }
-
-  .el-tabs__active-bar,
-  .el-date-table td.current:not(.disabled) span,
-  .el-slider__bar,
-  .el-month-table td.end-date .cell,
-  .el-month-table td.start-date .cell,
-  .el-pagination.is-background .el-pager li:not(.disabled).active,
-  .el-alert--info.is-dark {
-    background-color: #1677ff;
-  }
-
-  //修改多选框的颜色
-  .el-checkbox__input.is-checked .el-checkbox__inner {
-    border-color: #007aff;
-    background-color: #007aff;
-  }
-
-  .el-checkbox__inner:hover {
-    border-color: #007aff;
-  }
-
-  .el-radio__input.is-checked:not(.is-disabled) .el-radio__inner,
-  .el-switch.is-checked .el-switch__core,
-  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
-    border-color: #007aff;
-    background: #007aff;
-  }
-
-  .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-cascader .el-input.is-focus .el-input__inner {
-    border-color: #007aff;
-  }
-
-  //上传 进度条颜色 成功失败颜色
-  .el-progress.is-success .el-progress-bar__inner {
-    background-color: #48d2a0;
-  }
-
-  .el-progress.is-success .el-progress__text {
-    color: #48d2a0;
-  }
-
-  // 分页
-  .cl-pagination .pages {
-    color: #000;
-  }
-
-  .cl-pagination .page-jumper[data-v-58107eb6] {
-    color: #333;
-  }
-
-  .cl-pagination-total .el-input--suffix .el-input__inner {
-    color: #333;
-  }
-
-  .el-pagination__editor.el-input .el-input__inner {
-    text-align: center !important;
-    box-sizing: border-box;
-  }
-
-  .form-group-custom .expand-collapse-header > span,
-  .form-group-custom .expand-collapse-header-collapse > span {
-    font-weight: normal;
-    font-size: 14px;
-  }
-
-  .expand-collapse-header-title[data-v-15697210] {
-    font-weight: normal;
-    color: #333;
-  }
-
-  .expand-collapse-header:hover .expand-collapse-icon[data-v-15697210],
-  .expand-collapse-footer:hover .expand-collapse-icon[data-v-15697210] {
-    color: #bac4cf;
-  }
-
-  .expand-collapse-icon[data-v-15697210] {
-    color: #bac4cf;
-  }
-
-  .expand-collapse-header[data-v-15697210],
-  .expand-collapse-footer[data-v-15697210] {
-    span {
-      color: #333;
-    }
-
-    cursor: pointer;
-    background: #f5f5f5;
-  }
-
-  // 滚动条样式
-  ::-webkit-scrollbar-thumb {
-    background-color: #eee;
-  }
-
-  // 滚动条移动上的样式
-  ::-webkit-scrollbar-thumb:hover {
-    background-color: #ccc;
-  }
-
-  // 修改input 内的选中项样式
-  .el-tag.el-tag--info {
-    background-color: #eee;
-    border-color: #eee;
-    color: #3d4a57;
-  }
-
-  //修改表格
-  .el-table thead.is-group th {
-    background: #f5f5f5;
-  }
-
-  .el-table th.is-leaf,
-  .el-table td {
-    border-bottom: 1px solid #eee;
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-    border-bottom-color: #eee;
-  }
-
-  .el-table--border th,
-  .el-table--border td {
-    border-right: 1px solid #eee;
-    border-right-width: 1px;
-    border-right-style: solid;
-    border-right-color: #eee;
-  }
-
-  .el-table--group,
-  .el-table--border {
-    border: 1px solid #eee;
-  }
-
-  .el-table--group::after,
-  .el-table--border::after,
-  .el-table::before {
-    background-color: #eee;
-  }
-
-  // 表格高度统一44px
-  .el-table th,
-  .el-table td {
-    padding: 0;
-    height: 44px;
-  }
-
-  .el-form-item {
-    margin-bottom: 15px;
-  }
-
-  // 解决表格内操作按钮hover
-  .el-link.is-underline:hover:after {
-    display: none;
-  }
-
-  .nstc-file-upload .cell {
-    padding: 0px 8px 0px 0 !important;
-    color: #333;
-  }
-
-  .el-table th.is-leaf {
-    background-color: #f5f5f5;
-    font-weight: normal;
-  }
-
-  .nstc-approvel {
-    .el-form-item__content {
-      display: flex;
-      height: auto;
-      align-items: center;
-    }
-  }
-}
-
-// 修改批量导入弹窗内的样式 没有root-class 覆盖 新增一个class为nstc-dialog-style
-
-// .nstc-dialog-style {
-
-// }
-//修改上传input样式
-.nstc-common-excel-import {
-  .placeholder-has-file {
-    color: #3d4a57 !important;
-    height: 22px;
-    line-height: 22px;
-    width: auto;
-    position: absolute;
-    top: 50%;
-    margin-top: -11px;
-    padding-right: 20px;
-    left: 10px;
-    background: #eee;
-    padding-left: 5px;
-    border-radius: 2px;
-  }
-}
-
-// 表格内的input
-.cell {
-  .el-input {
-    &.el-input--suffix {
-      height: 32px;
-      line-height: 32px;
-
-      .el-input__inner {
-        height: 32px;
-      }
-
-      .el-input__suffix {
-        .el-input__suffix-inner {
-          height: 100%;
-          display: block;
-          line-height: 32px;
-
-          i {
-            line-height: 32px;
-          }
-        }
-      }
-    }
-  }
-}
-
-//修改弹框上面没有root-class 的按钮hover
-.nstc-g6-common-btn-1:not(.is-disabled):hover,
-.nstc-g6-common-btn-1:not(.is-disabled):focus:hover {
-  border-color: #146be6 !important;
-  color: #fff !important;
-  background-color: #146be6 !important;
-}
-
-.nstc-g6-common-btn-3:not(.is-disabled):hover {
-  color: #146be6 !important;
-  border: 1px solid #146be6 !important;
-  background-color: #fff !important;
-}
-
-//修改日期picker
-.el-picker-panel {
-  .el-date-table td {
-    span {
-      border-radius: 2px;
-    }
-  }
-
-  .el-date-table td.today span {
-    opacity: 0.8;
-    border-radius: 2px;
-  }
-
-  .el-date-table td.in-range {
-    div {
-      background: rgba(0, 122, 255, 0.1);
-    }
-  }
-}
-
-// 弹框内的table 表头表格
-.el-table .el-table__header th,
-.el-table .el-table__header td {
-  padding: 10px 0;
-}
-
-//修改下拉选择hover 问题
-.el-select-dropdown__item {
-  color: #333;
-}
-
-.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 {
-  background-color: rgba(0, 122, 255, 0.1);
-}
-
-.el-select-dropdown.el-popper .el-select-dropdown__item.hover,
-.el-select-dropdown.el-popper .el-select-dropdown__item:hover {
-  background-color: rgba(0, 122, 255, 0.1);
-}
-
-.el-button + .el-button {
-  margin-left: 0;
-}
-
-.el-button.nstc-g6-common-btn-size-s {
-  margin: 0 4px;
-}
-
-.el-button.nstc-g6-common-btn-size-b {
-  margin: 0 8px;
-}
-
-.nstc-file-upload .cell {
-  padding: 0px 8px 0px 0 !important;
-  color: #333;
-}
-
-.el-table th.is-leaf {
-  background-color: #f5f5f5;
-  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;
-  color: #146be6 !important;
-  background-color: #fff !important;
-}
-
-.el-input .el-input__inner:hover {
-  border: 1px solid #007aff;
-}
-
-.el-select:hover .el-input .el-input__inner {
-  border: 1px solid #007aff;
-}
-
-.el-table th,
-.el-table td {
-  padding: 0;
-  height: 44px;
-}
-
-.drop.el-popper[x-placement^='bottom'] ::v-deep .popper__arrow {
-  display: none;
-}
-
-.drop-btn.el-dropdown::v-deep .el-icon-arrow-down {
-  display: none;
-}
-
-.drop-btn-item {
-  width: 72px;
-  height: 26px;
-  background: #007aff;
-  border-radius: 4px;
-  padding: 0;
-}
-
-.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;
-}
-
-.file-name {
-  width: 141px;
-  height: 20px;
-  font-size: 14px;
-  color: #333333;
-  line-height: 20px;
-  font-family: PingFangSC, PingFangSC-Regular;
-}
-
-.effect-data {
-  color: #48d2a0;
-}
-
-.fail-box {
-  margin: 16px 0;
-}
-
-.footer {
-  text-align: center;
-
-  & .el-button {
-    width: 74px;
-    height: 32px;
-    background: #1677ff;
-    border-radius: 4px;
-    padding: 0;
-  }
-}
-
-.import-process {
-  margin: 16px 16px 14px 0;
-  line-height: 20px;
-}
-
-.import-process::after {
-  display: inline-block;
-  content: '';
-  width: 283px;
-  height: 4px;
-  background: #48d2a0;
-  border-radius: 4px;
-  margin-left: 16px;
-}
-
-.fail-excel-import-box {
-  margin: 20px 0 14px 0;
-  padding: 0 16px 16px 16px;
-  box-sizing: border-box;
-  border: 1px solid #dfe6ee;
-
-  &-title {
-    height: 54px;
-    line-height: 54px;
-    color: #262d34;
-    font-size: 16px;
-  }
-}
-</style>
+<template>
+  <div>
+    <el-dropdown
+      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>
+      </el-button>
+      <el-dropdown-menu slot="dropdown" class="drop">
+        <el-dropdown-item command="a">导入数据</el-dropdown-item>
+        <el-dropdown-item command="b">模板下载</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <NstcDialog
+      v-model="dialogVisible"
+      :title="title"
+      width="1200px"
+      append-to-body
+      v-bind="$attrs"
+      :footer-handlers="footerHandlers"
+      class="nstc-dialog-style"
+      v-on="$listeners"
+      @cancel="resetAction"
+    >
+      <div class="file-box">
+        <span class="file-box-title">导入文件</span>
+        <span class="file-name">{{ fileName }}</span>
+      </div>
+      <div class="import-process">导入进度</div>
+      <div v-show="statisticsFlag" class="excel-upload-result-box">
+        <div class="excel-upload-result-box-head">
+          导入统计
+          <span>共计导入 {{ validateResult.totalNum }}条, </span>
+          <span
+            >其中有效数据<span class="effect-data">
+              {{ validateResult.successNum }} </span
+            >条,
+          </span>
+          <span
+            >无效数据
+            <span class="nstc-import-error-num">{{
+              validateResult.errorList.length
+            }}</span>
+            条。</span
+          >
+        </div>
+      </div>
+      <div v-show="hasErrorFlag" class="fail-excel-import-box fail-box">
+        <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"
+          >
+            <template slot-scope="scope">
+              <span v-html="scope.row[column.prop]"></span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-show="hasErrorFlag" class="end-tips">
+        上述数据输入有误，请修改导入文件中相关信息！
+      </div>
+      <div class="footer">
+        <el-button
+          type="primary"
+          :disabled="excelData.tableData.length === 0 || confirmDisabledFlag"
+          @click="cancel"
+          >确定
+        </el-button>
+      </div>
+    </NstcDialog>
+  </div>
+</template>
+<script>
+import XLSX from 'xlsx'
+import axios from '../../../src/utils/axios.js'
+import NstcDialog from '../NstcDialog/NstcDialog'
+
+export default {
+  name: 'NstcExcelImportN',
+  components: {
+    NstcDialog
+  },
+  props: {
+    title: {
+      type: String,
+      default: function () {
+        return '文件导入'
+      }
+    },
+    tips: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    templateUrl: {
+      type: String,
+      default: ''
+    },
+    downConfig: {
+      type: Object,
+      default() {
+        return {
+          isFrontDown: true,
+          fileName: '下载.xlsx'
+        }
+      }
+    },
+    footerHandlers: {
+      type: Object,
+      default: function () {
+        return {
+          // cancel: {
+          //   text: '取消'
+          // },
+          // confirm: {
+          //   text: '导入'
+          // }
+        }
+      }
+    },
+    beforeUpload: Function, // eslint-disable-line
+    callback: {
+      type: Function,
+      default: () => {}
+    },
+    handleConfirm: {
+      type: Function,
+      default: () => {}
+    },
+    // 校验结果
+    validateResult: {
+      type: Object,
+      default: () => {
+        return {
+          totalNum: 0,
+          successNum: 0,
+          columnsList: [],
+          errorList: []
+        }
+      }
+    },
+    reset: {
+      type: Boolean,
+      default: false
+    },
+    dialogVisible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      excelData: {
+        tableHeader: [],
+        tableData: []
+      },
+
+      analysisText: 'analysis',
+      fileName: '',
+      statisticsFlag: false,
+      columnsListTemp: [],
+      errorListTemp: [],
+      successFlag: false,
+      confirmDisabledFlag: true
+    }
+  },
+  computed: {
+    hasErrorFlag() {
+      return (
+        this.validateResult.errorList &&
+        this.validateResult.errorList.length > 0
+      )
+    }
+  },
+  watch: {
+    validateResult: {
+      handler(newValue, oldValue) {
+        console.log('值更新了', newValue, oldValue)
+        newValue.columnsList.length && (this.statisticsFlag = true)
+
+        // 获取每行字符的最大长度
+        const lengthObj = {}
+        newValue.errorList.map((item) => {
+          const keys = newValue.columnsList.map((i) => {
+            return i['prop']
+          })
+          keys.map((k, i) => {
+            if (item[k] && (!lengthObj[i] || lengthObj[i] < item[k].length)) {
+              lengthObj[i] = item[k].length
+            }
+          })
+        })
+
+        // 更新column
+        this.columnsListTemp = newValue.columnsList.map((i, index) => {
+          console.log('iiiiiii', i, i.errorList)
+          return {
+            ...i,
+            width: 16 * lengthObj[index] + 60,
+            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.columnsListTemp)
+
+        this.successFlag =
+          this.validateResult.successNum !== 0 &&
+          this.validateResult.successNum === this.validateResult.totalNum
+
+        if (this.footerHandlers.confirm) {
+          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
+    }
+  },
+  methods: {
+    cancel() {
+      this.handleConfirmImportExcel()
+    },
+    async handleConfirmImportExcel() {
+      await this.handleConfirm(this.excelData)
+    },
+    handleCommand(command) {
+      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()
+    },
+    /*解析传入的表格 */
+    readerData(rawFile) {
+      this.loading = true
+      return new Promise((resolve) => {
+        const reader = new FileReader()
+        reader.onload = (e) => {
+          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)
+      })
+    },
+    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
+      /* 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 })]
+        /* 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)
+      }
+      return headers
+    },
+    isExcel(file) {
+      return /\.(xlsx|xls|csv)$/.test(file.name)
+    },
+    /*上传文件 */
+    upload(rawFile) {
+      if (!this.beforeUpload) {
+        this.readerData(rawFile)
+        return
+      }
+      const before = this.beforeUpload(rawFile)
+      if (before) {
+        this.readerData(rawFile)
+      }
+    },
+    // 下载文件
+    downloadTemplate() {
+      // 前端下载
+      if (this.downConfig.isFrontDown) {
+        const aEl = document.createElement('a')
+        aEl.setAttribute('href', this.templateUrl)
+        aEl.target = '_blank'
+        // aEl.download = this.templateUrl
+        aEl.click()
+      } else {
+        axios({
+          url: this.templateUrl,
+          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)
+          } else {
+            navigator.msSaveBlob(blob, this.downConfig.fileName)
+          }
+        })
+      }
+    },
+    //关闭弹窗
+    resetAction(flag) {
+      console.log(flag)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.root-class {
+  .nstc-wrap-input-hover .select-in-dialog-result:hover,
+  .nstc-wrap-input-hover .nstc-common-form-textarea textarea:hover,
+  .nstc-wrap-input-hover .el-input__inner:hover {
+    border: 1px solid #007aff;
+    box-shadow: 0 0 4px 0 #007aff;
+  }
+
+  .nstc-wrap-input-hover .select-in-dialog-result:hover {
+    .select-in-dialog-result-remote-icon {
+      border-left: 1px solid #007aff;
+    }
+  }
+
+  .nstc-wrap-input-hover .select-in-dialog-result {
+    .el-select {
+      .el-input__inner:hover {
+        border: none !important;
+      }
+    }
+  }
+
+  .select-in-dialog-result:hover {
+    border: 1px solid #007aff;
+    box-shadow: 0 0 4px 0 #007aff;
+
+    .select-in-dialog-result-remote-icon {
+      border-left: 1px solid #007aff;
+    }
+  }
+
+  .is-disabled {
+    .select-in-dialog-result:hover {
+      border: 1px solid #ccc !important;
+      box-shadow: none;
+
+      .select-in-dialog-result-remote-icon {
+        border-left: none;
+      }
+    }
+  }
+
+  .el-form-item.is-error .el-input__inner:focus,
+  .el-form-item.is-error .el-textarea__inner:focus,
+  .el-input__inner:focus,
+  .el-select .el-input.is-focus .el-input__inner,
+  .el-textarea__inner:focus {
+    box-shadow: 0 0 4px 0 #007aff;
+    border-color: #007aff;
+  }
+
+  .el-input {
+    .el-input__suffix {
+      line-height: 32px;
+
+      .el-input__suffix-inner {
+        height: 100%;
+        display: block;
+
+        .el-input__icon {
+          line-height: 32px;
+        }
+      }
+    }
+  }
+
+  //日期修改
+  .el-date-editor {
+    // 修改日期选择框的图片居中
+    .el-range__icon {
+      line-height: 24px;
+    }
+
+    //修改日期选择框连接符居中
+    .el-range-separator {
+      line-height: 24px;
+    }
+  }
+
+  //日期选择框
+  .el-date-editor {
+    .el-range__close-icon {
+      line-height: 24px;
+    }
+  }
+
+  .el-date-editor.nstc-input-small {
+    .el-range__close-icon {
+      line-height: 18px;
+    }
+  }
+
+  //表单
+  .el-form-item__content {
+    display: flex;
+    height: 40px;
+    align-items: center;
+
+    .el-input {
+      height: 32px;
+      line-height: 32px;
+      // width: 224px;
+    }
+
+    .el-input.is-disabled .el-input__inner {
+      background-color: #f5f7fa;
+      border-color: #dddddd;
+      color: #ccc;
+    }
+
+    .input-custom {
+      display: flex;
+      align-items: center;
+      // 门户的样式.el-input__inner 设置为32px 应该是在.el-input上面设置
+      .el-input {
+        height: 32px;
+        line-height: 32px;
+        //修改input 后面单位的高度与input 不一致
+        .el-input-group__append {
+          line-height: 1;
+        }
+
+        .el-input__suffix {
+          height: 32px;
+
+          .el-input__suffix-inner {
+            height: 100%;
+            display: block;
+
+            .el-input__icon {
+              line-height: 32px;
+            }
+          }
+        }
+      }
+    }
+
+    .form-create-select-tree {
+      .el-input {
+        height: 32px;
+        line-height: 32px;
+        //修改input 后面单位的高度与input 不一致
+        .el-input-group__append {
+          line-height: 1;
+        }
+
+        .el-input__suffix {
+          height: 32px;
+
+          .el-input__suffix-inner {
+            height: 100%;
+            display: block;
+
+            .el-input__icon {
+              line-height: 32px;
+            }
+          }
+        }
+      }
+    }
+
+    .el-date-editor {
+      .el-input__prefix {
+        .el-input__icon {
+          line-height: 32px;
+        }
+      }
+
+      .el-input__suffix {
+        .el-input__icon {
+          line-height: 32px;
+        }
+      }
+    }
+
+    // 修改联机选择器的高度
+    .el-cascader {
+      height: 32px;
+      line-height: 32px;
+
+      .el-input {
+        height: 100%;
+
+        .el-input__suffix {
+          height: 32px;
+
+          .el-input__suffix-inner {
+            height: 100%;
+            display: block;
+
+            .el-input__icon.el-icon-arrow-down {
+              line-height: 32px;
+            }
+          }
+        }
+      }
+    }
+
+    // 修改复选框没有居中对齐
+    .el-checkbox-group {
+      display: flex;
+      align-items: center;
+    }
+
+    // 修改上传附件
+    .upload-custom {
+      height: 32px;
+
+      button {
+        height: 100%;
+      }
+    }
+
+    //修改下拉select 没有右边border
+    .el-select {
+      height: 32px;
+      line-height: 32px;
+
+      .el-input {
+        height: 100%;
+        margin-left: 0;
+
+        .el-input__suffix {
+          height: 32px;
+
+          .el-input__suffix-inner {
+            height: 100%;
+            display: block;
+
+            .el-input__icon {
+              line-height: 32px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  //国际化下拉
+  .i18n-box {
+    .el-select {
+      height: 32px;
+      line-height: 32px;
+
+      .el-input {
+        height: 100%;
+        margin-left: 0;
+
+        .el-input__suffix {
+          height: 32px;
+
+          .el-input__suffix-inner {
+            height: 100%;
+            display: block;
+
+            .el-input__icon {
+              line-height: 32px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  //按钮
+  // .el-button + .el-button {
+  //     margin-left: 16px;
+  // }
+  .el-button.nstc-g6-common-btn-size-s {
+    margin: 0 4px;
+  }
+
+  .el-button.nstc-g6-common-btn-size-b {
+    margin: 0 8px;
+  }
+
+  .el-button--primary:not(.is-disabled) {
+    &.nstc-g6-common-btn-1 {
+      background-color: #007aff;
+      border-color: #007aff;
+      color: #fff;
+    }
+  }
+
+  .el-button--default:not(.is-disabled) {
+    &.nstc-g6-common-btn-1 {
+      border-color: #dddddd;
+      color: #333;
+      background-color: #fff;
+    }
+  }
+
+  .el-button--primary:not(.is-disabled).nstc-g6-common-btn-1:not(.is-disabled):hover {
+    background-color: #146be6;
+    border: 1px solid #146be6;
+    color: #fff;
+    opacity: 1;
+  }
+
+  .el-button--default:not(.is-disabled).nstc-g6-common-btn-1:not(.is-disabled):hover {
+    border-color: #146be6;
+    color: #146be6;
+    background-color: #fff;
+    opacity: 1;
+  }
+
+  .el-button--default:not(.is-disabled).nstc-g6-common-btn-4 {
+    padding: 0 8px;
+    height: 28px;
+    min-width: 72px;
+    font-size: 14px;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    color: #ff3b30;
+
+    &:hover {
+      border: 1px solid #ff3b30;
+      opacity: 1;
+    }
+  }
+
+  .el-button--primary:not(.is-disabled, .is-plain).nstc-g6-common-btn-4 {
+    color: #fff;
+    background-color: #ff3b30;
+    border: 1px solid #ff3b30;
+
+    &:hover {
+      color: #fff;
+    }
+  }
+
+  .el-button--primary.is-disabled.nstc-g6-common-btn-1,
+  .el-button--primary.is-disabled.nstc-g6-common-btn-1:hover,
+  .el-button--primary.is-disabled.nstc-g6-common-btn-1:focus,
+  .el-button--primary.is-disabled.nstc-g6-common-btn-1:active,
+  .el-button--default.is-disabled.nstc-g6-common-btn-1,
+  .el-button--default.is-disabled.nstc-g6-common-btn-1:hover,
+  .el-button--default.is-disabled.nstc-g6-common-btn-1:focus,
+  .el-button--default.is-disabled.nstc-g6-common-btn-1:active,
+  .el-button--primary.is-disabled.nstc-g6-common-btn-4,
+  .el-button--primary.is-disabled.nstc-g6-common-btn-4:hover,
+  .el-button--primary.is-disabled.nstc-g6-common-btn-4:focus,
+  .el-button--primary.is-disabled.nstc-g6-common-btn-4:active,
+  .el-button--default.is-disabled.nstc-g6-common-btn-4,
+  .el-button--default.is-disabled.nstc-g6-common-btn-4:hover,
+  .el-button--default.is-disabled.nstc-g6-common-btn-4:focus,
+  .el-button--default.is-disabled.nstc-g6-common-btn-4:active {
+    color: #ccc;
+    background-color: #eee;
+    border-color: #ddd;
+  }
+
+  // tab 标签颜色
+  .nstc-tab .el-tabs__item.is-active,
+  .el-tabs__item.is-active {
+    color: #1677ff;
+  }
+
+  .el-tabs__active-bar,
+  .el-date-table td.current:not(.disabled) span,
+  .el-slider__bar,
+  .el-month-table td.end-date .cell,
+  .el-month-table td.start-date .cell,
+  .el-pagination.is-background .el-pager li:not(.disabled).active,
+  .el-alert--info.is-dark {
+    background-color: #1677ff;
+  }
+
+  //修改多选框的颜色
+  .el-checkbox__input.is-checked .el-checkbox__inner {
+    border-color: #007aff;
+    background-color: #007aff;
+  }
+
+  .el-checkbox__inner:hover {
+    border-color: #007aff;
+  }
+
+  .el-radio__input.is-checked:not(.is-disabled) .el-radio__inner,
+  .el-switch.is-checked .el-switch__core,
+  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+    border-color: #007aff;
+    background: #007aff;
+  }
+
+  .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-cascader .el-input.is-focus .el-input__inner {
+    border-color: #007aff;
+  }
+
+  //上传 进度条颜色 成功失败颜色
+  .el-progress.is-success .el-progress-bar__inner {
+    background-color: #48d2a0;
+  }
+
+  .el-progress.is-success .el-progress__text {
+    color: #48d2a0;
+  }
+
+  // 分页
+  .cl-pagination .pages {
+    color: #000;
+  }
+
+  .cl-pagination .page-jumper[data-v-58107eb6] {
+    color: #333;
+  }
+
+  .cl-pagination-total .el-input--suffix .el-input__inner {
+    color: #333;
+  }
+
+  .el-pagination__editor.el-input .el-input__inner {
+    text-align: center !important;
+    box-sizing: border-box;
+  }
+
+  .form-group-custom .expand-collapse-header > span,
+  .form-group-custom .expand-collapse-header-collapse > span {
+    font-weight: normal;
+    font-size: 14px;
+  }
+
+  .expand-collapse-header-title[data-v-15697210] {
+    font-weight: normal;
+    color: #333;
+  }
+
+  .expand-collapse-header:hover .expand-collapse-icon[data-v-15697210],
+  .expand-collapse-footer:hover .expand-collapse-icon[data-v-15697210] {
+    color: #bac4cf;
+  }
+
+  .expand-collapse-icon[data-v-15697210] {
+    color: #bac4cf;
+  }
+
+  .expand-collapse-header[data-v-15697210],
+  .expand-collapse-footer[data-v-15697210] {
+    span {
+      color: #333;
+    }
+
+    cursor: pointer;
+    background: #f5f5f5;
+  }
+
+  // 滚动条样式
+  ::-webkit-scrollbar-thumb {
+    background-color: #eee;
+  }
+
+  // 滚动条移动上的样式
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: #ccc;
+  }
+
+  // 修改input 内的选中项样式
+  .el-tag.el-tag--info {
+    background-color: #eee;
+    border-color: #eee;
+    color: #3d4a57;
+  }
+
+  //修改表格
+  .el-table thead.is-group th {
+    background: #f5f5f5;
+  }
+
+  .el-table th.is-leaf,
+  .el-table td {
+    border-bottom: 1px solid #eee;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    border-bottom-color: #eee;
+  }
+
+  .el-table--border th,
+  .el-table--border td {
+    border-right: 1px solid #eee;
+    border-right-width: 1px;
+    border-right-style: solid;
+    border-right-color: #eee;
+  }
+
+  .el-table--group,
+  .el-table--border {
+    border: 1px solid #eee;
+  }
+
+  .el-table--group::after,
+  .el-table--border::after,
+  .el-table::before {
+    background-color: #eee;
+  }
+
+  // 表格高度统一44px
+  .el-table th,
+  .el-table td {
+    padding: 0;
+    height: 44px;
+  }
+
+  .el-form-item {
+    margin-bottom: 15px;
+  }
+
+  // 解决表格内操作按钮hover
+  .el-link.is-underline:hover:after {
+    display: none;
+  }
+
+  .nstc-file-upload .cell {
+    padding: 0px 8px 0px 0 !important;
+    color: #333;
+  }
+
+  .el-table th.is-leaf {
+    background-color: #f5f5f5;
+    font-weight: normal;
+  }
+
+  .nstc-approvel {
+    .el-form-item__content {
+      display: flex;
+      height: auto;
+      align-items: center;
+    }
+  }
+}
+
+// 修改批量导入弹窗内的样式 没有root-class 覆盖 新增一个class为nstc-dialog-style
+
+// .nstc-dialog-style {
+
+// }
+//修改上传input样式
+.nstc-common-excel-import {
+  .placeholder-has-file {
+    color: #3d4a57 !important;
+    height: 22px;
+    line-height: 22px;
+    width: auto;
+    position: absolute;
+    top: 50%;
+    margin-top: -11px;
+    padding-right: 20px;
+    left: 10px;
+    background: #eee;
+    padding-left: 5px;
+    border-radius: 2px;
+  }
+}
+
+// 表格内的input
+.cell {
+  .el-input {
+    &.el-input--suffix {
+      height: 32px;
+      line-height: 32px;
+
+      .el-input__inner {
+        height: 32px;
+      }
+
+      .el-input__suffix {
+        .el-input__suffix-inner {
+          height: 100%;
+          display: block;
+          line-height: 32px;
+
+          i {
+            line-height: 32px;
+          }
+        }
+      }
+    }
+  }
+}
+
+//修改弹框上面没有root-class 的按钮hover
+.nstc-g6-common-btn-1:not(.is-disabled):hover,
+.nstc-g6-common-btn-1:not(.is-disabled):focus:hover {
+  border-color: #146be6 !important;
+  color: #fff !important;
+  background-color: #146be6 !important;
+}
+
+.nstc-g6-common-btn-3:not(.is-disabled):hover {
+  color: #146be6 !important;
+  border: 1px solid #146be6 !important;
+  background-color: #fff !important;
+}
+
+//修改日期picker
+.el-picker-panel {
+  .el-date-table td {
+    span {
+      border-radius: 2px;
+    }
+  }
+
+  .el-date-table td.today span {
+    opacity: 0.8;
+    border-radius: 2px;
+  }
+
+  .el-date-table td.in-range {
+    div {
+      background: rgba(0, 122, 255, 0.1);
+    }
+  }
+}
+
+// 弹框内的table 表头表格
+.el-table .el-table__header th,
+.el-table .el-table__header td {
+  padding: 10px 0;
+}
+
+//修改下拉选择hover 问题
+.el-select-dropdown__item {
+  color: #333;
+}
+
+.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 {
+  background-color: rgba(0, 122, 255, 0.1);
+}
+
+.el-select-dropdown.el-popper .el-select-dropdown__item.hover,
+.el-select-dropdown.el-popper .el-select-dropdown__item:hover {
+  background-color: rgba(0, 122, 255, 0.1);
+}
+
+.el-button + .el-button {
+  margin-left: 0;
+}
+
+.el-button.nstc-g6-common-btn-size-s {
+  margin: 0 4px;
+}
+
+.el-button.nstc-g6-common-btn-size-b {
+  margin: 0 8px;
+}
+
+.nstc-file-upload .cell {
+  padding: 0px 8px 0px 0 !important;
+  color: #333;
+}
+
+.el-table th.is-leaf {
+  background-color: #f5f5f5;
+  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;
+  color: #146be6 !important;
+  background-color: #fff !important;
+}
+
+.el-input .el-input__inner:hover {
+  border: 1px solid #007aff;
+}
+
+.el-select:hover .el-input .el-input__inner {
+  border: 1px solid #007aff;
+}
+
+.el-table th,
+.el-table td {
+  padding: 0;
+  height: 44px;
+}
+
+.drop.el-popper[x-placement^='bottom'] ::v-deep .popper__arrow {
+  display: none;
+}
+
+.drop-btn.el-dropdown::v-deep .el-icon-arrow-down {
+  display: none;
+}
+
+.drop-btn-item {
+  width: 72px;
+  height: 26px;
+  background: #007aff;
+  border-radius: 4px;
+  padding: 0;
+}
+
+.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;
+}
+
+.file-name {
+  width: 141px;
+  height: 20px;
+  font-size: 14px;
+  color: #333333;
+  line-height: 20px;
+  font-family: PingFangSC, PingFangSC-Regular;
+}
+
+.effect-data {
+  color: #48d2a0;
+}
+
+.fail-box {
+  margin: 16px 0;
+}
+
+.footer {
+  text-align: center;
+
+  & .el-button {
+    width: 74px;
+    height: 32px;
+    background: #1677ff;
+    border-radius: 4px;
+    padding: 0;
+  }
+}
+
+.import-process {
+  margin: 16px 16px 14px 0;
+  line-height: 20px;
+}
+
+.import-process::after {
+  display: inline-block;
+  content: '';
+  width: 283px;
+  height: 4px;
+  background: #48d2a0;
+  border-radius: 4px;
+  margin-left: 16px;
+}
+
+.fail-excel-import-box {
+  margin: 20px 0 14px 0;
+  padding: 0 16px 16px 16px;
+  box-sizing: border-box;
+  border: 1px solid #dfe6ee;
+
+  &-title {
+    height: 54px;
+    line-height: 54px;
+    color: #262d34;
+    font-size: 16px;
+  }
+}
+</style>