gdy_pc_8/src/performance/views/myPerformance/resultSetAll.vue

<template>
  <div class="box-all">
    <PageHead :phName="packageName"></PageHead>
    <div class="main">

      <div class="flex-box-ce" style="padding: 10px 0;border-bottom: 1px solid #f1f1f1;margin-bottom: 20px;">
        <span :class="{ active: activeName == 'noEntering' }" style="width: 80px;"
          @click="activeName = 'noEntering'">未录入({{ noStatusListTotal }})</span>
        <span :class="{ active: activeName == 'entering' }" style="width: 80px;" @click="activeName = 'entering'">已录入({{
          statusListTotal }})</span>
      </div>

      <div>
        <el-select v-model="employee_ids" multiple filterable clearable placeholder="请输入或选择人员"
          style="width: 250px;margin-right: 10px;">
          <el-option v-for="(item, index) in employee_map" :key="index" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <el-button type="default" style="margin: 0 15px 15px 0;" @click="clearFilter">清除所有过滤器</el-button>

      </div>
      <el-alert type="warning" title="可以根据指标名称，标准值，权重，目标值进行分类，便于对多人且同个指标的结果值录入" style="margin: 0 0 15px 0;"
        :closable="false"></el-alert>

      <el-table :data="tempData" ref="filterTable" border :header-cell-style="{ background: '#ECF5FF' }"
        :header-cell-class-name="handleHeaderClass" @header-click="handleHeaderClick" @sort-change="handleTableSort"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" min-width="55" align="center">
        </el-table-column>
        <el-table-column prop="employee_name" label="姓名" align="center" min-width="120">
        </el-table-column>
        <el-table-column prop="index_name" label="指标名称" min-width="200" sortable="custom" :filters="index_name_list"
          :filter-method="filterMethods" align="center"></el-table-column>
        <el-table-column prop="index_standard" label="考核标准" min-width="200" sortable="custom" align="center"
          :filters="index_standard_list" :filter-method="filterMethods">
        </el-table-column>
        <el-table-column prop="target" label="目标值" sortable="custom" align="center" :filters="target_list"
          :filter-method="filterMethods">
          <template slot-scope="scope">
            <span>{{ scope.row.target }}{{ scope.row.unit }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="index_weight" label="权重%" sortable="custom" align="center" :filters="index_weight_list"
          :filter-method="filterMethods"></el-table-column>
        <el-table-column prop="index_remark" label="备注" min-width="200" align="center"></el-table-column>
        <el-table-column label="结果值附件" min-width="200" :render-header="(h, obj) => renderHeader(h, obj, 'upload')">
          <template slot-scope="scope">
            <div style="margin-bottom: 20px;" @click="openActive(scope.row)">
              <uploadOss :key="scope.row.id" :headers="$xtoken" class="avatar-uploader" :action="$action"
                :show-file-list="true" :file-list="scope.row.result_file.images" :on-preview="onFilePreView"
                :before-upload="beforeUpload" :on-remove="onFileRemove" :data-item="scope.row" :limit="3"
                :on-success="handleSuccessImg" :accept="$acceptImg" :multiple="true">
                <el-button class="primaryBtn" icon="el-icon-picture-outline" plain size="mini">图片</el-button>
                <!-- (最多选择3张) -->
              </uploadOss>
            </div>
            <div @click="openActive(scope.row)">
              <uploadOss :key="scope.row.id" class="avatar-uploader" :headers="$xtoken" :show-file-list="true"
                :multiple="true" :limit="5" :accept="$acceptFile" :file-list="scope.row.result_file.append"
                :action="$action" :on-preview="onFilePreView2" :on-success="handleSuccess" :on-remove="handleRemove"
                :before-upload="beforeFilesUpload">
                <el-button class="primaryBtn" icon="el-icon-paperclip" plain size="mini">附件</el-button>
                <!-- (仅支持上传xlsx,xls,doc,docx,pdf,txt,最多一份附件) -->
              </uploadOss>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="实际完成结果值" min-width="150" :render-header="(h, obj) => renderHeader(h, obj, 'result_cache')">
          <template slot-scope="scope">
            <div class="flex-box-ce" v-if="scope.row.index_type == 1">
              <el-input type="textarea" @input="[(scope.row.result_cache = isFloor(scope.row.result_cache))]"
                style="min-width: 130px;" :rows="1" v-model="scope.row.result_cache" placeholder="请输入"></el-input>
              <span style="width: 40px;padding-left: 5px;" class="font-flex-word">{{ scope.row.unit }}</span>
            </div>
            <div v-else>--</div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <footer class="footer flex-box-end"
      v-if="activeName == 'noEntering' && multipleSelection && multipleSelection.length > 0">
      <el-button class="primaryBtn" @click="save(1)">暂存</el-button>
      <el-button type="primary" @click="save(0)">提交结果值</el-button>
    </footer>
    <footer class="footer flex-box-end"
      v-if="activeName == 'entering' && returnIsShow && multipleSelection && multipleSelection.length > 0">
      <el-button type="primary" @click="save(3)">提交结果值</el-button>
    </footer>


    <BatchUpload :isUploadShow="isUploadShow" :isUploadImg="isUploadImg" :isUploadFile="isUploadFile"
      :isResultCache="isResultCache" @close="closeBatchUpload" @confirm="getImgs"></BatchUpload>

    <!-- 图片查看 -->
    <el-dialog title="图片查看" :visible.sync="isShowImg" width="50%">
      <img :src="imgUrl" style="width: 100%;" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="closePreview">关闭</el-button>
      </span>
    </el-dialog>
    <!-- 图片查看 -->

    <!-- 提交结果 -->
    <el-dialog title="提交结果" :visible.sync="isResult" width="800" :close-on-click-modal="false"
      :close-on-press-escape="false" :show-close="false">
      <div>
        <el-progress :text-inside="true" :stroke-width="24" :percentage="percentage"></el-progress>
        <div style="margin-top: 20px;border: 1px solid #f1f1f1;max-height: 500px;overflow-y: auto;" class="scroll-bar">
          <div class="flex-box-ce results" style="font-weight: 600;">
            <div style="border-right: 1px solid #f1f1f1;width: 50px;">序号</div>
            <div class="flex-1" style="border-right: 1px solid #f1f1f1;">姓名</div>
            <div class="flex-2" style="border-right: 1px solid #f1f1f1;">指标名称</div>
            <div class="flex-2">提交结果</div>
          </div>
          <div class="flex-box-ce results" v-for="(item, index) in results" :key="index">
            <div style="border-right: 1px solid #f1f1f1;width: 50px;">{{ results.length - index }}</div>
            <div class="flex-1" style="border-right: 1px solid #f1f1f1;">{{ item.info.employee_name }}</div>
            <div class="flex-2" style="border-right: 1px solid #f1f1f1;">{{ item.info.index_name }}</div>
            <div class="flex-2 red" v-if="item.msg">{{ item.msg }}</div>
            <div class="flex-2 green" v-else>提交成功</div>
          </div>
        </div>
        <span slot="footer">
          <div class="flex-box-end" style="margin-top: 20px;">
            <el-button type="primary" @click="isResult = false" size="small">确 定</el-button>
          </div>
        </span>
      </div>
    </el-dialog>
    <!-- 提交结果 -->

  </div>
</template>
<script>
import PageHead from '@/components/PageHead'; //头部---返回
import uploadOss from '@/components/upload';
import { _debounce } from '@/utils/auth';
import BatchUpload from "./resultSetComp/BatchUpload.vue"

export default {
  components: { PageHead, uploadOss, BatchUpload },
  name: 'resultSet',
  data() {
    return {
      tableData: [],
      pe_ids: [],
      pe_flows: [],
      activeName: 'noEntering',
      noStatusListAll: [],
      noStatusList: [],
      noStatusListDx: [],
      noStatusListTotal: 0,
      statusList: [],
      statusListTotal: 0,
      id: '', //员工考核记录id
      // 上传图标与附件
      img_fileList: [], // 图片附件
      file_fileList: [], //文件附件
      imgs: [],
      doc: '',
      isShowImg: false,
      imgUrl: '',
      selectItem: {},
      // 长连接结果
      results: [], //提交的返回结果集合
      isResult: false,
      percentage: 0,
      resultList: [], //要发送数据的集合
      resultIndex: 0,
      employee_ids: [],
      employee_map: [],
      tempData: [], // 表格数据
      sortList: [], // 用于表格数据排序
      index_name_list: [], // 指标名称过滤数据
      index_standard_list: [], // 指标标准过滤数据
      target_list: [], // 目标过滤数据
      index_weight_list: [], // 权重过滤
      multipleSelection: [], // 选择的数据
      isUploadShow: false,
      upLoadImages: [],
      isUploadImg: false,
      isUploadFile: false,
      isResultCache: false,
    };
  },
  computed: {
    returnIsShow() {
      let is = false
      this.tempData.forEach(item => {
        if (item.isUpdate) {
          is = true;
        }
      })
      return is
    },
  },
  watch: {
    activeName(val) {
      this.multipleSelection = [];
      this.clearFilter();
      this.initTableData();
    },

    isResult(val) {
      if (!val) {
        this.results = []; //提交的返回结果集合
        this.isResult = false;
        this.percentage = 0;
        this.resultList = []; //要发送数据的集合
        this.resultIndex = 0;
        this.getPackageDtail();
      }
    },
    employee_ids() {
      this.getPackageDtail();
    },
    peIds() {
      this.getPackageDtail();
    },
  },
  created() {
    if (this.$route.query.pe_ids) {
      this.pe_ids = this.$route.query.pe_ids;
      this.packageName = this.$route.query.name;
      if (this.$route.query.is) {
        this.activeName = 'entering';
      }
      this.getPackageDtail();
    }
  },

  methods: {
    closeBatchUpload() {
      this.isUploadShow = false;
    },
    getImgs(data) {
      let { imgs, files, result_cache } = data
      this.multipleSelection && this.multipleSelection.forEach(item => {
        if (imgs && imgs.length > 0) item.result_file.images = imgs.filter(img => { return img.url })
        if (files && files.length > 0) item.result_file.append = files.filter(file => { return file.url })
        if (item.index_type == 1) {
          if (result_cache) item.result_cache = result_cache;
        }
      })
      this.isUploadShow = false;
    },


    // 初始化表格数据
    initTableData() {
      let statusList = []; //已录入指标
      let noStatusList = []; //未录入指标
      this.tableData && this.tableData.forEach(item => {
        // 已录入指标
        if (item.index_result_status == 1) {
          noStatusList.push(item);
        }
        // 未录入指标
        if (item.index_result_status == 2) {
          item.isUpdate = true;
          this.pe_flows.forEach(e => {
            if (e.pe_id == item.pe_id) {
              item.isUpdate = this.returnIs(e.flow);
            }
          })
          statusList.push(item);
        }
      });
      this.noStatusList = noStatusList;
      this.statusList = statusList;
      this.statusListTotal = statusList.length;
      this.noStatusListTotal = noStatusList.length;
      if (this.activeName == 'noEntering') {
        this.tempData = noStatusList; // 默认展示未录入的数据
      } else {
        this.tempData = statusList; // 默认展示未录入的数据
      }

      // 初始化员工姓名过滤数据
      this.tempData.forEach(item => {
        let obj = {
          id: null,
          name: null
        }
        obj.id = item.employee_id
        obj.name = item.employee_name
        this.employee_map.push(obj)
      })


      // 初始化指标名称过滤数组 
      this.index_name_list = this.tempData.map(item => {
        return {
          text: item.index_name,
          value: item.index_name,
        }
      })
      // 初始化指标标准过滤数组 
      this.index_standard_list = this.tempData.map(item => {
        return {
          text: item.index_standard,
          value: item.index_standard,
        }
      })
      // 初始化目标过滤数组 
      this.target_list = this.tempData.map(item => {
        return {
          text: item.target,
          value: item.target,
        }
      })
      // 初始化权重过滤数组 
      this.index_weight_list = this.tempData.map(item => {
        return {
          text: item.index_weight,
          value: item.index_weight,
        }
      })

      this.employee_map = Array.from(new Set(this.employee_map.map(JSON.stringify))).map(JSON.parse);

      // 数组去重
      this.index_name_list = Array.from(new Set(this.index_name_list.map(JSON.stringify))).map(JSON.parse);

      // 数组去重
      this.index_standard_list = Array.from(new Set(this.index_standard_list.map(JSON.stringify))).map(JSON.parse);

      // 数组去重
      this.target_list = Array.from(new Set(this.target_list.map(JSON.stringify))).map(JSON.parse);
      // 数组去重
      this.index_weight_list = Array.from(new Set(this.index_weight_list.map(JSON.stringify))).map(JSON.parse);
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    filterMethods(value, row, column) {
      this.multipleSelection = [];
      this.$refs.filterTable.clearSelection();
      const property = column["property"];
      return row[property] === value
    },

    // -----------------------------------------自定义函数-----------------------------------------------
    updateSortOrder(column) {
      // column.order 默认只能有一个不为 null，也就是说其它列的 order 改变时，原有的 order 会被置为 null
      // 所以用另一个字段 multiOrder 保存 order 状态
      column.multiOrder = column.order
      // 更新 sortList
      const index = this.sortList.findIndex(item => item.prop === column.property)
      if (index !== -1) {
        this.sortList.splice(index, 1)
      }
      if (column.order !== null) {
        this.sortList.push({ prop: column.property, order: column.order })
      }
      // sort
      this.sortTableData()
    },
    // 根据某一项比较
    compareData(prop, a, b, order) {
      const orderFactor = order === 'ascending' ? 1 : -1
      if (a[prop] < b[prop]) {
        return -1 * orderFactor
      }
      if (a[prop] > b[prop]) {
        return 1 * orderFactor
      }
      return 0
    },
    // 根据 sortList 对 data 进行排序
    sortTableData() {
      this.tempData = Object.assign([], this.tempData)
      this.tempData.sort((a, b) => {
        for (const item of this.sortList) {
          const tempResult = this.compareData(item.prop, a, b, item.order)
          if (tempResult) {
            return tempResult
          }
        }
        return 0
      })
    },
    // -----------------------------------------el-table 事件-----------------------------------------------
    // 点击表头
    // bug: 监听不到点击箭头
    handleHeaderClick(column) {
      // this.updateSortOrder(column)
    },
    // 点击箭头
    handleTableSort({ column }) {
      this.updateSortOrder(column)
    },
    // 把 multiOrder 同步给 order
    handleHeaderClass({ column }) {
      column.order = column.multiOrder
    },
    clearFilter() {
      this.employee_ids = [];
      this.$refs.filterTable.clearFilter();
      this.filterData = [];
      this.multipleSelection = [];
    },
    // 自定义表头
    renderHeader(h, { column, $index }, type) {
      let that = this;
      if (that.multipleSelection && that.multipleSelection.length > 0) {
        if (type == 'upload') return h(
          'div', {
          style: { display: "flex", alignItems: "center", justifyContent: "center" }
        }, [

          h('el-button', {
            props: {
              icon: 'el-icon-edit'
            },
            style: 'margin-left: 5px;',
            on: {
              click: function () {
                that.clickButton('img');
              }
            }
          }, '图片'),
          // 按钮
          h('el-button', {
            props: {
              icon: 'el-icon-edit'
            },
            style: 'margin-left: 5px;',
            on: {
              click: function () {
                that.clickButton('file');
              }
            }
          }, '附件')
        ],
        )
        else return h(
          'div', {
          style: { display: "flex", alignItems: "center", justifyContent: "center" }
        }, [

          h('el-button', {
            props: {
              icon: 'el-icon-edit'
            },
            style: 'margin-left: 5px;',
            on: {
              click: function () {
                that.clickButton('result_cache');
              }
            }
          }, '实际完成结果值')
        ],
        )
      } else {
        return h(
          'div', {
          style: { display: "flex", alignItems: "center", justifyContent: "center" }
        }, [
          // 列名称
          h('span', column.label),
        ],
        )
      }

    },

    // 按钮点击事件
    clickButton(type) {
      if (type == 'img') {
        this.isUploadImg = true;
        this.isUploadFile = false;
        this.isResultCache = false;
      }
      if (type == 'file') {
        this.isUploadImg = false;
        this.isUploadFile = true;
        this.isResultCache = false;
      }
      if (type == 'result_cache') {
        this.isUploadImg = false;
        this.isUploadFile = false;
        this.isResultCache = true;
      }
      this.openBatchUpload();
    },

    openBatchUpload() {
      this.isUploadShow = true;
    },

    closePreview() {
      this.imgUrl = "";
      this.isShowImg = false;
    },

    isFloor(el) {
      var obj = event.target;
      var t = el.charAt(0);
      el = el
        .replace('.', '$#$') //把第一个字符'.'替换成'$#$'
        .replace(/\./g, '') //把其余的字符'.'替换为空
        .replace('$#$', '.') //把字符'$#$'替换回原来的'.'
        .replace(/[^\d.]/g, '') //只能输入数字和'.'
        .replace(/^\./g, '') //不能以'.'开头
        .replace(/([0-9]+\.[0-9]{2})[0-9]*/, '$1'); //只保留2位小数
      if (t == '-') {
        el = '-' + el;
      }
      return el || null;
    },
    openActive(item) {
      this.selectItem = item;
    },
    handleSuccessImg: _debounce(function (response, file, fileList) {
      let result_file = JSON.parse(JSON.stringify(this.selectItem)).result_file;
      result_file.images = fileList.filter(item => {
        return item.url;
      });
      this.selectItem.result_file = result_file;
    }),
    // 图片上传
    beforeUpload(file) {
      const isJPG = /^image\/(jpeg|png|jpg)$/.test(file.type);
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isJPG) {
        this.$message.error('上传图片只能是 jpeg|png|jpg 格式!');
        this.filData(1);
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 5MB!');
      }
      return isJPG && isLt2M;
    },
    onFilePreView(file) {
      if (file.url) {
        this.imgUrl = file.url;
        this.isShowImg = true;
      }
    },
    onFileRemove(file, fileList) {
      setTimeout(() => {
        this.selectItem.result_file.images = fileList;
      }, 500);
    },
    handleSuccess: _debounce(function (response, file, fileList) {
      let result_file = JSON.parse(JSON.stringify(this.selectItem)).result_file;
      result_file.append = fileList.filter(item => {
        return item.url;
      });
      this.selectItem.result_file = result_file;
    }),
    onFilePreView2(file) {
      window.open(file.url, '_blank');
    },
    handleRemove(file, fileList) {
      setTimeout(() => {
        this.selectItem.result_file.append = fileList;
      }, 500);
    },
    beforeFilesUpload(file) {
      const $ext_list = ['xlsx', 'xls', 'doc', 'docx', 'pdf', 'XLSX', 'XLS', 'DOC', 'DOCX', 'PDF'];
      const isLt2M = file.size / 1024 / 1024 < 5;
      let len = file.name.split('.').length - 1;
      const $ext_name = file.name.split('.')[len];
      let isFile = $ext_list.indexOf($ext_name) != -1;
      if (!isLt2M) {
        this.$message.error('文件大小不能超过 5MB!');
      }
      if (!isFile) {
        this.$message.warning('文件格式上传错误,仅支持上传xlsx,xls,doc,docx,pdf）');
      }
      return isFile && isLt2M;
    },
    // 提交
    save(num) {
      let isLr = false;
      let parameterArr = [];
      let err = '';
      let isPost = true;
      let str = '';
      let arr = this.multipleSelection;

      arr.forEach(item => {
        let result_info = [];
        result_info.push({
          dimension_key: item.dimension_id, //维度索引
          index_key: item.index_key, //指标索引
          index_id: item.index_id, //指标ID
          result_file: item.result_file
        });

        if (item.index_type == 1) {
          result_info[0].result = item.result_cache
        }
        let data = {
          id: item.pe_id, //个人考核包ID
          cache: num == 1 ? 1 : 0, //是否暂存 1 是 0 否（提交）
          info: item,
          result_info: JSON.stringify(result_info),
          sub: num == 3 ? 0 : 1
        };
        if (num == 3) {  //编辑
          if (item.isUpdate) {
            if (item.index_type == 1) {
              if (!item.result_cache) {
                isPost = false;
                str = item.index_name + ': 请输入结果值'
                return true
              }
            } else {
              if (item.result_file.append.length == 0 && item.result_file.images.length == 0) {
                isPost = false;
                str = item.index_name + ': 至少添加一份附件'
                return true
              }
            }
          }
        } else{
          if (item.index_type == 1) {
            if (item.result_cache !== null && item.result_cache !== '') parameterArr.push(data);
          }
          if (item.index_type != 1) {
            if (item.result_file.append.length > 0 || item.result_file.images.length > 0) parameterArr.push(data);
          }
        }
      });
      if (num == 3) {
        if (!isPost) {
          this.$message({ type: 'error', message: str, duration: 3000, center: true });
          return false;
        }
      } else {
        if (parameterArr.length == 0) {
          this.$message({ type: 'error', message: '至少输入一项结果值或非量化指标添加一份附件', duration: 3000, center: true });
          return false;
        }
      }
      // return
      this.webSocket(parameterArr);
    },

    webSocket(data) {
      this.resultList = data;
      this.resultIndex = 0;
      this.percentage = 0;
      this.results = [];
      this.isResult = true;
      this.opneWebSocket();
    },
    opneWebSocket() {
      let wsData = this.resultList;
      if (wsData[this.resultIndex]) {
        this.$axiosUser('post', '/api/pro/per/package/record_result', wsData[this.resultIndex]).then(res => {
          this.onmessageWS(wsData[this.resultIndex], true);
        }).catch(e => {
          let data = wsData[this.resultIndex];
          data.msg = e.data.msg;
          this.onmessageWS(data, false);
        });
      }
    },
    onmessageWS(data, isJx) {
      this.results.unshift(data);
      this.resultIndex++;
      if (!isJx) {
        return false
      }
      this.opneWebSocket();
      // 进度条
      let lng = this.resultList.length;
      this.percentage += Math.floor(100 / lng);
      if (lng == this.results.length) {
        this.percentage = 100;
      }
      this.multipleSelection = [];
      this.clearFilter();
    },

    getPackageDtail() {
      this.$axiosUser('get', '/api/pro/per/package/result_job_list',
        {
          pe_ids: this.pe_ids,
          page: 1,
          page_size: 2000,
          employee_ids: JSON.stringify(this.employee_ids)
        }).then(res => {
          this.tableData = res.data.data.list;
          this.pe_flows = res.data.data.pe_flows;
          this.initTableData();
        });
    },
    //判断评分节点是否有人评了分
    returnIs(list) {
      let is = true;
      list.forEach(item => {
        if (item.code == 'score_supervisor' || item.code == 'special_scorer') {
          item.target.forEach(e => {
            if (e.status == 2) {
              is = false;
            }
          })
        }
      })
      return is
    },
    conformityData(arr) {
      let returnArr = [];
      let strs = new Set(
        arr.map(item => {
          return item.wdName;
        })
      );
      strs.forEach(item => {
        let obj = {
          wdName: item,
          list: arr.filter(e => {
            return e.wdName == item;
          })
        };
        returnArr.push(obj);
      });
      return returnArr;
    }
  }
};
</script>
<style scoped lang="scss">
.wd-title {
  margin: 20px 0;
  padding-left: 10px;
  border-left: 3px solid #409EFF;
}

.box-all {
  position: relative;
  background-color: #fff;
  font-size: 14px;
  padding: 20px;
  box-sizing: border-box
}

.main {
  margin-bottom: 60px;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border-top: 1px solid #e8e8e8;
  padding: 12px 30px;
  z-index: 2;
}

.active {
  color: #409EFF;
}

.results {
  border-bottom: 1px solid #f1f1f1;
  text-align: center;
}

.results div {
  padding: 10px;
  box-sizing: border-box;
}

/* 设置滚动条的宽度和背景色 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: #f9f9f9;
}

/* 设置滚动条滑块的样式 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background-color: #c1c1c1;
}

/* 设置滚动条滑块hover样式 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: #a8a8a8;
}

/* 设置滚动条轨道的样式 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
  border-radius: 6px;
  background: #ededed;
}
</style>