n20-common-lib 1.2.41 → 1.3.0

package/src/components/NstcG6Components/NstcExcelImport/NstcExcelImport.vue

@@ -0,0 +1,1051 @@
+<!--
+  功能：    excel导入功能
+  作者：    nstc
+  创建时间： 2021-02-05
+-->
+<template>
+  <div>
+    <NstcDialog
+        v-model="_value"
+        :title="title"
+        width="1200px"
+        append-to-body
+        v-bind="$attrs"
+        v-on="$listeners"
+        @cancel="resetAction"
+        :footer-handlers="footerHandlers"
+        class="nstc-dialog-style"
+    >
+      <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"
+              v-if="isNeedTemplate"
+              style="margin-left:20px;"
+              @click="downloadTemplate"
+              :disabled="!templateUrl"
+            >导入模板下载</el-button>
+          </el-form-item>
+        </el-form>
+
+        <div  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>
+        <NstcUploadExcel
+          v-if="value"
+          ref="nstc-unload-excel-box"
+          v-show="percentage !== 100"
+          class="upload-excel-box"
+          :before-upload="beforeUpload"
+          :on-success="handleSuccess"
+        ></NstcUploadExcel>
+
+        <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-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  class="end-tips">
+          上述数据输入有误，请修改导入文件中相关信息！
+        </div>
+      </div>
+       <slot name="footer"></slot>
+    </NstcDialog>
+  </div>
+</template>
+
+<script>
+import NstcUploadExcel from '../NstcUploadExcel/NstcUploadExcel'
+import NstcDialog from '../NstcDialog/NstcDialog'
+import uploadImg from './img/upload@2x.png'
+import axios from '@/utils/axios';
+export default {
+  name: 'NstcExcelImport',
+  components: {
+    NstcUploadExcel,
+    NstcDialog,
+    // NstcTable
+  },
+  props: {
+    tableHeight: {
+      default: '500px'
+    },
+    value: {
+      type: Boolean,
+      default: false
+    },
+    tips: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    labelWidth: {
+      type: String,
+      default: ''
+    },
+    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: '导入'
+          // }
+        }
+      }
+    },
+    callback: {
+      type: Function,
+      default: () => {}
+    },
+    // mapper: {
+    //   type: Object,
+    //   default: () => {}
+    // },
+    handleConfirm: {
+      type: Function,
+      default: () => {}
+    },
+    downConfig: {
+      type: Object,
+      default() {
+        return {
+          isFrontDown: true,
+          fileName: '下载.xlsx'
+        }
+      }
+    },
+
+    // 校验结果
+    validateResult: {
+      type: Object,
+      default: () => {
+        return {
+          totalNum: 0,
+          successNum: 0,
+          columnsList: [],
+          errorList: []
+        }
+      }
+    },
+
+    // 下载模板按钮是否显示
+    isNeedTemplate: {
+      type: Boolean,
+      default: true
+    },
+  },
+  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)
+        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].toString().length
+            }
+          })
+        })
+
+        // 更新column
+        this.columnsListTemp = newValue.columnsList.map((i, index) => {
+          console.log('iiiiiii', i, i.errorList)
+          return {
+            ...i,
+            width: (16 * lengthObj[index] + 40) >= 100?(16 * lengthObj[index] + 40):100,
+            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
+    },
+    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() {
+  },
+  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, header }) {
+      this.percentage = 100
+      this.progressStatus = 'success'
+      this.excelData.tableHeader = header
+      this.excelData.tableData = results
+      // 自动上传校验
+      this.callback(this.excelData)
+    },
+
+    async handleConfirmImportExcel() {
+      await this.handleConfirm(this.excelData)
+    },
+
+    // 下载文件
+    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);
+          }
+          this.btnSendTem = false;
+        });
+      }
+    },
+
+    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">
+.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.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.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-table th, .el-table td {
+  padding: 0;
+  height: 44px;
+}
+
+.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>
+