ui-ddy-pc 0.0.1-beta

package/src/components/topTable/topTable.vue

@@ -0,0 +1,854 @@
+<template>
+  <div class="cmp-container">
+
+    <!-- 搜索组件 -->
+    <div ref="formObj" :class="{ 'search-container': true }" v-if="needSearch" :style="searchStyle">
+      <el-form class="search-row" :inline="true" :label-width="refObjs.maxWidth">
+        <el-form-item v-for="(item, index) in obj.items" :label="item.label" :key="index">
+          <template #label>
+            <div :id='`label-${item.field}`' class="item-label">{{ item.label }}</div>
+          </template>
+          <div :id='`content-${item.field}`'>
+            <search-item :config="item" :data="searchConfig.data" @search="handleSubmit(false)"></search-item>
+          </div>
+        </el-form-item>
+
+        <div class="buttons row-item" v-if="remainWidth > 270">
+          <div class="btn" v-if="hasHide" @click="handleExpan">
+            <div class="icon">
+              <el-icon size="18" color="#ccc">
+                <CaretBottom v-if="obj.isShow" />
+                <CaretTop v-else />
+              </el-icon>
+            </div>
+            <div class="text">{{ obj.isShow ? '展开' : '收起' }}</div>
+          </div>
+          <el-button @click="handleSubmit(false)" color="#436EE6">查询
+            <template #icon>
+              <img src="@/assets/table/magnifier.svg">
+            </template>
+          </el-button>
+          <el-button @click="handleSubmit(true)" class="reset">
+            <template #icon>
+              <el-icon>
+                <Refresh :size="24" />
+              </el-icon>
+            </template>
+            重置</el-button>
+        </div>
+
+        <!-- 独占一行 -->
+        <div class="buttons individual" v-else>
+          <el-button @click="handleSubmit(true)" style="margin-left: 12px;" class="reset">
+            <template #icon>
+              <el-icon>
+                <Refresh :size="24" />
+              </el-icon>
+            </template>
+            重置</el-button>
+          <el-button @click="handleSubmit(false)" color="#436EE6" style="margin-left: 0;">查询
+            <template #icon>
+              <img src="@/assets/table/magnifier.svg">
+            </template>
+          </el-button>
+          <div class="btn" v-if="hasHide" @click="handleExpan">
+            <div class="icon">
+              <el-icon size="18" color="#ccc">
+                <CaretBottom v-if="obj.isShow" />
+                <CaretTop v-else />
+              </el-icon>
+            </div>
+            <div class="text">{{ obj.isShow ? '展开' : '收起' }}</div>
+          </div>
+        </div>
+      </el-form>
+    </div>
+
+    <div id="table-with-page" :style="tWPStyle">
+      <!-- 表格 -->
+      <div class="table-container">
+        <el-table ref="multipleTable" v-loading="tableConfig.Loading" tooltip-effect="dark" :data="tableConfig.data"
+          style="width: 100%" :height="fixedHeight == 'false' ? tableConfig.tableHeight : fixedHeight"
+          :header-row-style="headerRowStyle" v-bind="$attrs" @selection-change="handleSelectionChange"
+          @select="handleSelect" @select-all="handleSelectAll" @row-click="checkRows" @sort-change="sortChange"
+          :span-method="spanMethod" :row-class-name="rowClassName" :row-key="rowKey" :sum-text="sumText"
+          :summary-method="summaryMethod" :border="true" :highlight-current-row="highlightCurrentRow"
+          :header-cell-style="{ background: '#F5F7FA', color: '#606266' }" class="m-table" :lazy="lazy" :load="load"
+          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" @expand-change="handleExpandChange">
+          <template v-for="(item, index) in tableColumn">
+            <el-table-column type="expand" v-if="item.type == 'expand' && item.slot">
+              <template #default="scope">
+                <slot v-if="item.slot" :name="item.slot" :data="{ ...scope }" :index="scope.$index"></slot>
+              </template>
+            </el-table-column>
+            <el-table-column v-else-if="item.type === 'index'" align="center" v-bind="{ ...item }"
+              :label="item.title || item.label || '序号'">
+              <template #default="scope">
+                <template v-if="scope.row.hasOwnProperty('__row__id__')">
+                  {{ scope.row.__row__id__ }}
+                </template>
+                <template v-else>
+                  {{ getOrderNumber(scope.$index) }}
+                </template>
+              </template>
+            </el-table-column>
+            <el-table-column v-else-if="item.autoIndex" :key="index" v-bind="{ ...item }">
+              <template #default="scope">
+                {{ ((pageConfig.pageNum < 1 ? 1 : pageConfig.pageNum) - 1) * pageConfig.pageSize + scope.$index + 1 }}
+                  </template>
+            </el-table-column>
+            <el-table-column v-else-if="item.type == 'selection'" :key="index + 1" :label="item.label || ''"
+              :fixed="item.fixed" :reserve-selection="item.reserveSelection" :type="item.type" :width="item.width"
+              :align="item.align ? item.align : defaultAlign" :selectable="(e) => {
+                if (item.type === 'selection' && item.selectable) {
+                  return item.selectable(e)
+                } else {
+                  return true
+                }
+              }">
+            </el-table-column>
+            <el-table-column v-else-if="item.type" :key="index + 2" :label="item.label || ''" :fixed="item.fixed"
+              :reserve-selection="item.reserveSelection" :type="item.type" :width="item.width"
+              :align="item.align ? item.align : defaultAlign" :selectable="(e) => {
+                if (item.type === 'selection' && item.selectable) {
+                  return item.selectable(e)
+                } else {
+                  return true
+                }
+              }">
+              <template slot="header" #default="scope">
+                <span>{{ item.title }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column v-else :key="item.key ? item.key : index" :prop="item.prop" v-show="item.hidden || true"
+              :label="item.label" :align="item.align ? item.align : defaultAlign" :width="item.width"
+              :min-width="item.minWidth" :fixed="item.fixed" :sortable="item.sortable" :sortMethod="item.sortMethod"
+              :show-overflow-tooltip="item.showOverflowTooltip === false || item.prop == 'action' ? false : { offset: offset }"
+              :type="item.type">
+              <template #header>
+                <section v-if="item.tooltip" class="tooltip-wrap"
+                  :style="{ 'justify-content': computedAlingn(item.align) }">
+                  <span style="margin-right: 5px;">{{ item.label }}</span>
+                  <el-tooltip :effect="item.effect || 'dark'" placement="top">
+                    <el-icon>
+                      <QuestionFilled />
+                    </el-icon>
+                    <template #content> {{ item.tooltip }} </template>
+                  </el-tooltip>
+                </section>
+                <section v-else-if="item.custom">
+                  <div v-html="item.label"></div>
+                </section>
+                <slot v-else-if="item.headSlot" :name="item.headSlot" :data="{ ...scope }" :index="scope.$index" />
+                <span v-else>{{ item.label || item.title }}</span>
+              </template>
+              <template #default="scope">
+                <slot v-if="item.slot" :name="item.slot" :data="{ ...scope }" :index="scope.$index" />
+                <span v-else-if="item.stress" class="stress" @click="$emit('view-detail', scope.row)">
+                  {{
+                    scope.row[item.prop]
+                      ? scope.row[item.prop]
+                      : item.placeholder
+                        ? item.placeholder
+                        : "--"
+                  }}
+                </span>
+                <!-- 将表格中的单价和合价格式化 1,223.00元 -->
+                <span v-else-if="item.filter != undefined">{{ item.filter(scope.row[item.prop], totalLastText)
+                  }}</span>
+                <span v-else-if="item.settleAmout">
+                  <div v-if="scope.row[item.prop] >= scope.row['ticketAmout']">
+                    {{ scope.row[item.prop] + '/' + scope.row['ticketAmout'] }}
+                  </div>
+                  <div v-else class="red">
+                    {{ scope.row[item.prop] + '/' + scope.row['ticketAmout'] }}
+                  </div>
+                </span>
+                <section v-else-if="item.fit">
+                  <div v-if="scope.row[item.prop]">
+                    <el-image :src="handleImageSrc(scope.row[item.prop])" :fit="item.fit"
+                      :preview-src-list="handleImageSrcList(scope.row[item.prop])" class="images" />
+                    <p class="images-tip">
+                      {{ handleImageSrcLength(scope.row[item.prop]) }}
+                    </p>
+                  </div>
+                  <span v-else>暂无图片</span>
+                </section>
+                <span v-else-if="item.getRow">
+                  {{ item.getRow(scope.row) }}
+                </span>
+                <span style="width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" v-else>
+                  {{
+                    scope.row[item.prop]
+                      ? scope.row[item.prop]
+                      : scope.row[item.prop] === 0
+                        ? 0
+                        : noValue
+                  }}
+                </span>
+              </template>
+            </el-table-column>
+          </template>
+          <template #empty>
+            <section class="empty-area">
+              <img width="370" height="199" src="@/assets/table/empty-data.png" />
+              <p>{{ nodataTitme }}</p>
+            </section>
+          </template>
+        </el-table>
+      </div>
+
+      <!-- 分页 -->
+      <div class="pagination-container">
+        <el-pagination :hide-on-single-page="hideOnSinglePage" :layout="layout" :page-sizes="pageSizes"
+          :default-page-size="pageConfig.pageSize" v-model:page-size="pageConfig.pageSize"
+          v-model:current-page="pageConfig.pageNum" :total="pageConfig.total" @size-change="getSize"
+          @current-change="getPage">
+        </el-pagination>
+      </div>
+    </div>
+
+  </div>
+</template>
+<script setup>
+import { ref, computed, onMounted, reactive, watch, nextTick, onUnmounted, toRefs } from 'vue';
+import searchItem from '@/components/topSearch/searchItem.vue'
+import req from "@/utils/request.js";
+
+const props = defineProps({
+  searchConfig: {
+    type: Object,
+    default: () => ({
+      config: [],
+      data: {}
+    })
+  },
+  needSearch: {
+    type: Boolean,
+    default: true
+  },
+  rowClassName: {
+    type: String,
+    default: ''
+  },
+  nodataTitme: {
+    type: String,
+    default: '暂无数据'
+  },
+  column: {
+    type: Array,
+    default: () => []
+  },
+  defaultAlign: {
+    // 默认对齐方式
+    type: String,
+    default: 'left'
+  },
+  rowClickSelect: {
+    // 单击行是否选中
+    type: Boolean,
+    default: false
+  },
+  headerRowStyle: {
+    type: Object || Function,
+    default: () => ({
+      'background-color': '#f1f1f1',
+      color: '#333'
+    })
+  },
+  autoHeight: {
+    type: Boolean,
+    default: true
+  },
+  modalAuto: {
+    type: Boolean,
+    default: false
+  },
+  height: {
+    type: String,
+    default: 'auto'
+  },
+  hasFooter: {
+    type: Boolean,
+    default: true
+  },
+  fixedHeight: {
+    type: String,
+    default: 'false'
+  },
+  spanMethod: {
+    type: Function,
+    default: () => { }
+  },
+  sumText: {
+    type: String,
+    default: ''
+  },
+  summaryMethod: {
+    type: Function,
+    default() {
+      return true
+    }
+  },
+  lazy: {
+    type: Boolean,
+    default: false,
+  },
+  load: {
+    type: Function,
+    default() {
+      return true
+    }
+  },
+  border: {
+    type: Boolean,
+    default: false,
+  },
+  highlightCurrentRow: {
+    type: Boolean,
+    default: false,
+  },
+  // 单元格无数据时显示内容
+  noValue: {
+    type: String,
+    default: "--"
+  },
+  // 表格高度计算需要额外减去得额外高度
+  minusHeight: {
+    type: Number,
+    default: 0,
+  },
+  totalLastText: {
+    type: String,
+    default: ''
+  },
+  rowKey: {
+    type: String,
+    default: 'id'
+  },
+  needResize: {
+    type: Boolean,
+    default: true
+  },
+  hideOnSinglePage: {
+    type: Boolean,
+    default: false,
+  },
+  pageSizes: {
+    type: Array,
+    default: () => [20, 50, 100, 200],
+  },
+  layout: {
+    type: String,
+    default: "total, sizes, prev, pager, next, jumper",
+  },
+  pageNum: {
+    type: Number,
+    default: 1,
+  },
+  tableApi: {
+    type: Object,
+    default: () => { },
+  },
+  searchStyle: {
+    type: Object,
+    default: () => ({
+      'background-color': '#ebedf2',
+      'margin': '10px',
+      'border-radius': '10px',
+      'padding': '20px 20px 0 20px',
+      'box-sizing': 'border-box',
+      'transition': '.3s linear',
+    })
+  },
+  tWPStyle: {
+    type: Object,
+    default: () => ({
+      'margin': '0 10px 10px',
+      'border-radius': '10px',
+      'background-color': '#ebedf2',
+      'box-sizing': 'border-box',
+      'padding': '20px',
+    })
+  },
+})
+const emit = defineEmits(['search', 'show', 'current-change', 'selection-change', 'select', 'select-all', 'sortChange', 'view-detail', 'expand-change'])
+const getList = async () => {
+  try {
+    let continueReq = true
+    if (props.tableApi.beforeCb) {
+      continueReq = await props.tableApi.beforeCb()
+    }
+    const { pageNum, pageSize } = pageConfig
+    let res
+    tableConfig.Loading = true
+    if (props.tableApi.method == 'get') {
+      res = await req.get(`${props.tableApi.url}`, { pageNum, pageSize, ...props.searchConfig.data, ...(props.tableApi.params) })
+    }
+    else {
+      res = await req.post(`${props.tableApi.url}`, { pageNum, pageSize, ...props.searchConfig.data, ...(props.tableApi.params) })
+    }
+    if (res.code == 200) {
+      tableConfig.data = res.data || res.rows
+      pageConfig.total = res.total
+      console.log(pageConfig);
+    }
+    tableConfig.Loading = false
+  }
+  catch (err) {
+    console.log(err)
+    tableConfig.Loading = false
+  }
+}
+const handleSubmit = (isReset) => {
+  if (isReset) {
+    // 重置除额外参数外的所有参数
+    props.searchConfig.data = { ...props.searchConfig.defaultData }
+    pageConfig.pageSize = 20
+    pageConfig.total = 0
+  }
+  pageConfig.pageNum = 1
+  getList()
+}
+const obj = reactive({
+  items: props.searchConfig.config,
+  isShow: true
+})
+const fixedNums = ref(0)
+const getLastRowNums = (arr) => {
+  // 每行最多放下数量
+  let currentLength = 0
+  arr.forEach(item => {
+    // 换行清空
+    currentLength = currentLength + item + refObjs.maxWidth + 10 <= windowWidth.value ? currentLength + item + refObjs.maxWidth + 10 : item + refObjs.maxWidth + 10
+  })
+  remainWidth.value = windowWidth.value - currentLength
+  // console.log(remainWidth.value, '展开后最后一行剩余宽度');
+}
+const handleExpan = async () => {
+  isInit.value = false
+  const isExpan = obj.items.length < props.searchConfig.config.length
+  // 展示的内容小于配置时即展开
+  obj.items = isExpan ? props.searchConfig.config : props.searchConfig.config.slice(0, fixedNums.value)
+  await nextTick()
+  // 展开
+  if (isExpan) {
+    // 获取content所有宽度
+    getContent(props.searchConfig.config)
+    getLastRowNums(refObjs.widthArray)
+  }
+  // 收起
+  else {
+    remainWidth.value = 271
+  }
+  obj.isShow = !obj.isShow;
+  emit('show', obj.isShow)
+  resizeTableHeight()
+}
+
+const formObj = ref(null)
+const windowWidth = ref(0)
+const refObjs = reactive({
+  labelArray: [],
+  contentArray: [],
+  widthArray: [],
+  maxWidth: 40
+})
+
+const isInit = ref(true)
+const remainWidth = ref(0)
+// 暂定传入 预留空间
+const getLabel = (arr) => {
+  refObjs.labelArray = arr.map(item => {
+    if (item) {
+      return document.getElementById('label-' + item.field)
+    }
+  }).filter(item2 => item2 !== undefined)
+  // console.log(refObjs.labelArray, 'label元素数组');
+  refObjs.maxWidth = refObjs.labelArray.reduce((maxWidth, item) => {
+    return Math.max(maxWidth, item.offsetWidth + 12)
+  }, 40)
+  // console.log(refObjs.maxWidth, 'label最大宽度');
+}
+
+// 暂定传入 预留空间
+const getContent = (arr) => {
+  refObjs.contentArray = arr.map(item => {
+    if (item) {
+      return document.getElementById('content-' + item.field)
+    }
+  }).filter(item2 => item2 !== undefined)
+  // console.log(refObjs.contentArray, 'content元素数组');
+  refObjs.widthArray = refObjs.contentArray.map(item => {
+    return item.offsetWidth
+  })
+  // console.log(refObjs.widthArray, 'content所有元素的宽度');
+}
+
+// 递归计算一行可展示最大个数
+const calcNum = (clientWidth, widthArray, val = '') => {
+  const sum = widthArray.reduce((sumVal, currentVal) => {
+    // 累加元素内容宽度 + 标签宽度 + margin
+    return sumVal + currentVal + refObjs.maxWidth + 10
+  }, 0)
+  // console.log(sum, '计算总长');
+  // 折叠状态为按钮组预留宽度
+  if (sum && sum + 270 > clientWidth) {
+    return calcNum(clientWidth, widthArray.slice(0, widthArray.length - 1), val)
+  }
+  else {
+    // console.log(sum, '当前可展示区域长度');
+    // 首行可显示个数
+    remainWidth.value = clientWidth - sum
+    val = widthArray.length
+    return val
+  }
+}
+
+// 设置当前宽度 仅该页面的宽度
+const handleInit = async (changeTab = false) => {
+  isInit.value = true
+  // 全部渲染出 获取所有的labelWidth contentWidth
+  obj.items = props.searchConfig.config
+  await nextTick()
+  // 设置当前屏幕宽度
+  windowWidth.value = formObj.value.clientWidth
+  if (windowWidth.value == 0) {
+    setTimeout(handleInit(changeTab), 500)
+    return;
+  }
+  // console.log(windowWidth.value, '当前页面视口宽度');
+  // 获取label最大宽度 设置label宽
+  getLabel(props.searchConfig.config)
+  // 获取content所有宽度
+  getContent(props.searchConfig.config)
+  fixedNums.value = calcNum(windowWidth.value, refObjs.widthArray)
+  // console.log(fixedNums.value, 'fixedNums.value');
+  // 修正当前可显示值
+  obj.items = props.searchConfig.config.slice(0, fixedNums.value)
+  if (changeTab) {
+    resizeTableHeight()
+  }
+}
+
+const hasHide = computed(() => {
+  // 未点击过展开或收起
+  if (isInit.value) {
+    // 当前展示长度和传入值长度不一致即显示展开按钮
+    return obj?.items ? obj.items.length !== props.searchConfig.config.length : true
+  }
+  else {
+    return true
+  }
+})
+const handleResize = () => {
+  // 重置展开
+  obj.isShow = true
+  handleInit()
+}
+
+window.onChangeEmit = () => {
+  obj.isShow = true
+  handleInit(true)
+}
+
+
+const tableConfig = reactive({
+  tableHeight: props.height,
+  data: [],
+  Loading: false,
+})
+const multipleTable = ref('')
+const handleSelectionChange = (val) => {
+  // 翻页也会触发该事件
+  emit('selection-change', val);
+}
+const handleSelect = (selection, row) => {
+  emit('select', selection, row)
+}
+const handleSelectAll = (selection) => {
+  emit('select', selection)
+}
+const checkRows = (row, current, event) => {
+  if (props.rowClickSelect) {
+    multipleTable.value.toggleRowSelection(row);
+    emit('current-change', row)
+  } else {
+    emit('current-change', row, current, event)
+  }
+}
+const sortChange = (param) => {
+  let { column, prop, order } = param;
+  emit("sortChange", { column, prop, order })
+}
+const handleExpandChange = (row, expanded) => {
+  emit('expand-change', row, expanded)
+}
+const tableColumn = computed(() => {
+  if (props.column.length == 0) return
+  return props.column.filter(item => item.hidden !== true);
+})
+
+const clearSelection = () => {
+  multipleTable.value.clearSelection();
+}
+const allSelection = () => {
+  multipleTable.value.toggleAllSelection();
+}
+const offset = -window.pageYOffset
+
+const resizeTableHeight = () => {
+  const footerHeight = props.hasFooter ? 44 : 0;
+  // 搜索组件需要时间计算渲染 高度才能获取正确
+  // let otherComponentHeight = document.getElementById('searchComponent').offsetHeight
+  setTimeout(() => {
+    if (multipleTable.value && props.needResize) {
+      // 表格
+      let el = multipleTable.value.$el;
+      // 分页
+      let pageEl = document.getElementById('table-with-page')
+      let pageComputedStyle = window.getComputedStyle(pageEl)
+      let containerPAM = parseFloat(pageComputedStyle.getPropertyValue('margin-bottom')) + parseFloat(pageComputedStyle.getPropertyValue('padding-bottom'))
+      // 表格与顶部距离
+      let top = el.getBoundingClientRect().top;
+      console.log(top, 'top-distance');
+      console.log(window.parent.innerHeight, 'window.innerHeight');
+      // window.innerHeight 视口高度不变 为嵌入的块的高度 需减去top-ui顶部高度
+      const height = window.parent.innerHeight - top - footerHeight - props.minusHeight - containerPAM
+      console.log(height, 'currentHeight');
+      tableConfig.tableHeight = height < 200 ? 200 : height;
+    }
+  }, 100)
+}
+
+const computedAlingn = (align) => {
+  const method = align || props.defaultAlign;
+  const mapping = {
+    center: 'center',
+    left: 'flex-start',
+    right: 'flex-end'
+  };
+  return mapping[method];
+}
+
+const getOrderNumber = (index) => {
+  if (!pageConfig.pageSize) {
+    return index + 1;
+  }
+  const current = pageConfig.pageNum
+  const size = pageConfig.pageSize
+
+  return ((current < 1 ? 1 : current) - 1) * size + index + 1;
+}
+
+
+const pageConfig = reactive({
+  pageNum: 1,
+  pageSize: 20,
+  total: 0
+})
+
+const getPage = (val) => {
+  pageConfig.pageNum = val
+  getList()
+};
+const getSize = (val) => {
+  pageConfig.pageSize = val
+  getList()
+};
+
+onMounted(async () => {
+  getList()
+  if (props.needSearch) {
+    window.addEventListener('resize', handleResize);
+    handleInit()
+  }
+  if (props.autoHeight) {
+    // emitter.on('componentHeightChange', (val) => {
+    //   resizeTableHeight()
+    // });
+    // 监听窗口大小变化
+    window.addEventListener("resize", resizeTableHeight);
+    await nextTick()
+    resizeTableHeight();
+  }
+})
+// 监听屏幕改变
+onUnmounted(() => {
+  if (props.needSearch) {
+    window.removeEventListener('resize', handleResize); // 在组件销毁时移除事件监听器
+  }
+});
+
+watch(() => tableConfig.data, async (newValue) => {
+  await nextTick()
+  setTimeout(() => {
+    multipleTable.value?.scrollBarRef.update()
+  }, 0)
+}, { immediate: true })
+// 页数变化 滚动条长度重置
+watch(() => pageConfig.pageNum, async (newValue) => {
+  await nextTick()
+  setTimeout(() => {
+    multipleTable.value.setScrollTop(0)
+    multipleTable.value?.scrollBarRef.update()
+  }, 0)
+})
+
+defineExpose({
+  clearSelection,
+  allSelection,
+  handleInit
+})
+</script>
+<style lang="scss" scoped>
+.cmp-container {
+  box-sizing: border-box;
+
+  .search-container {
+
+    position: relative;
+    min-height: 32px;
+
+    .search-row {
+      position: relative;
+
+      .item-label {
+        white-space: nowrap;
+      }
+
+      .buttons {
+        align-items: center;
+        margin-bottom: 18px;
+        display: inline-flex;
+        vertical-align: middle;
+
+        .btn {
+          display: flex;
+          align-items: center;
+          padding: 0px 20px;
+          cursor: pointer;
+          user-select: none;
+
+          .icon {
+            margin-top: 3px;
+          }
+
+          .text {
+            color: #303133;
+            font-size: 14px;
+            padding-left: 10px;
+          }
+        }
+      }
+
+      .row-item {
+        .el-col:nth-child(4n) {
+          .el-form-item {
+            margin-right: 0 !important;
+          }
+        }
+
+        position: absolute;
+        right: 0;
+      }
+
+      .el-form-item {
+        margin-right: 10px !important;
+      }
+
+      .individual {
+        display: flex;
+        flex-direction: row-reverse;
+      }
+    }
+  }
+
+  #table-with-page {
+
+    .table-container {
+      :deep(.el-table) {
+        width: 99.9% !important;
+
+        th {
+          color: inherit;
+          background-color: inherit;
+        }
+
+        .cell.el-tooltip {
+          width: 100% !important;
+        }
+
+        .warning-row {
+          background: oldlace;
+        }
+
+        .success-row {
+          background: #f0f9eb;
+        }
+      }
+
+      .stress {
+        color: #0088f4;
+        text-decoration: underline;
+        cursor: pointer;
+      }
+
+      .images {
+        width: 60px;
+        height: 60px;
+      }
+
+      .images-tip {
+        width: 60px;
+        text-align: center;
+      }
+
+      .tooltip-wrap {
+        display: flex;
+        align-items: center;
+
+        .tip-icon {
+          margin-left: 4px;
+          font-size: 15px;
+          color: #080505;
+        }
+      }
+
+      :deep(.empty-area) {
+        padding: 40px 0;
+
+        .empty-image {
+          width: 35%;
+        }
+
+        p {
+          line-height: 2;
+          font-weight: 500;
+          color: #333;
+        }
+      }
+    }
+
+    .pagination-container {
+      text-align: center;
+      margin: 12px 0 0 0;
+      position: relative;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      width: 100%;
+      box-sizing: border-box;
+      justify-content: flex-end;
+    }
+  }
+}
+</style>
+<style>
+/* .m-table {
+
+  .el-scrollbar__view {
+    height: 100%;
+  }
+} */
+</style>