Game-Backstage-Management-System/src/components/Table.vue

<!--
 * @Author: fxs bjnsfxs@163.com
 * @Date: 2024-08-20 18:16:18
 * @LastEditors: fxs bjnsfxs@163.com
 * @LastEditTime: 2024-11-27
 * @FilePath: \SqueezeTheBusc:\Users\NINGMEI\Desktop\Manage\Game-Backstage-Management-System\src\components\Table.vue
 * @Description: 
 * 
-->
<script setup lang="ts">
import type { PropsParams, TablePaginationSetting } from '@/types/table'
import type { ReqConfig } from '@/types/dataAnalysis'
import type { TableFieldInfo } from '@/types/table'
import type { FormInstance } from 'element-plus'

import { FilterType, FieldSpecialEffectType } from '@/types/table'
import { initLoadResouce } from '@/utils/resource'
import { fuzzySearch } from '@/utils/common'
import { throttleFunc } from '@/utils/common'
import { computed, onMounted, reactive, ref, toRaw, watch } from 'vue'
import { useTable } from '@/hooks/useTable'
import { useRequest } from '@/hooks/useRequest'

import FilterPopover from './toolsBtn/FilterPopover.vue'
import RegreshBtn from './toolsBtn/RegreshBtn.vue'
import axiosInstance from '@/utils/axios/axiosInstance'

const { analysisResCode } = useRequest()

// 节流的延迟时间
const throttleTime = 500

// 表格工具图标大小
const toolsIconSize = ref(25)

// 查询表单
const queryFormRef = ref<FormInstance>()

// 传过来的配置
const props = withDefaults(defineProps<PropsParams>(), {
  needRowindex: true,
  needAverage: false,
  needLeftTools: false,
  needRightTools: false,
  openFilterQuery: false,
  openPageQuery: false,
  needUpload: false,
  needDownLoad: false,
  openRemoteinquiry: false
})

// 父组件触发的方法
// 删除了一个事件触发，loadSuccess
const emits = defineEmits(['addNewItem', 'upload', 'downLoad'])

// 加载动画
const loading = ref(false)

// 表格数据
const tableData: Array<any> = reactive([])

// 备份表格数据，用于在不分页查询的时候，恢复数据
const backupTableData: Array<any> = []

// 查询表单的数据
const queryFormData = reactive<{ [key: string]: any }>({})

const backupQueryFormData = reactive<{ [key: string]: any }>({})

// 备份其他的请求信息
let backupReqOtherOptions = {}

// 分页数据
const paginationConfig = reactive<TablePaginationSetting>({
  currentPage: 1,
  limit: 0,
  total: 0,
  pagesizeList: []
})

// 请求配置
const reqconfig = reactive<ReqConfig>({
  url: '',
  otherOptions: {}
})

// 资源的加载路径
const resourceInfo: Record<string, string> = {
  defaultHead: `/img/default/defaultHead.png`
}

// 使用blob的资源路径信息
const blobUrlInfo = reactive<Record<string, string>>({})

// 一些公用方法
const { getTableData } = useTable(tableData, paginationConfig)

// 没有开启分页查询的时候使用的数据
const tableDataNoPaging = computed(() => {
  let curPage = paginationConfig.currentPage
  let limit = paginationConfig.limit
  let begin = curPage * limit - limit
  //这里不减一是因为，slice方法裁切是左闭右开数组
  let end = curPage * limit
  return tableData.slice(begin, end)
})

// 所有类型为input的表单控件信息
const inputFieldsList = computed(() => {
  return props.queryInfo?.filter((item) => item.type === FilterType.INPUT)
})

// 所有类型为select的表单控件信息
const selectFieldsList = computed(() => {
  return props.queryInfo?.filter((item) => {
    return item.type === FilterType.SELECT
  })
})

// 所有类型为date的表单控件信息
const dateFieldsList = computed(() => {
  return props.queryInfo?.filter((item) => item.type === FilterType.DATE)
})

// 计算行号
const computedRowIndex = (index: number) => {
  return (paginationConfig.currentPage - 1) * paginationConfig.limit + index + 1
}

// 改变页码
const handleCurrentChange = (val: number) => {
  paginationConfig.currentPage = val
}

// 改变每页大小
const handleSizeChange = (val: number) => {
  paginationConfig.limit = val
}

/**
 * @description: 加载表格数据
 * @return {*}
 */
const loadTableData = async () => {
  return new Promise(async (resolve, reject) => {
    loading.value = true
    // 如果是直接传入的数据
    if (props.dataList) {
      tableData.splice(0, tableData.length, ...props.dataList)

      paginationConfig.total = props.paginationConfig.total
      loading.value = false

      resolve(true)
    } else {
      // 如果是需要表格自己请求数据的
      if (props.requestConfig) {
        try {
          // 如果开启了分页查询，那么要计算出需要展示的页码位置所对应的偏移量
          // 同时要将查询的条数改为对应的用户选择的展示条数
          if (props.openPageQuery) {
            reqconfig.otherOptions.offset =
              (paginationConfig.currentPage - 1) * paginationConfig.limit
            reqconfig.otherOptions.limit = paginationConfig.limit
          }
          await getTableData(reqconfig.url, reqconfig.otherOptions, props.openPageQuery)

          backupTableData.splice(0, backupTableData.length, ...tableData)
          resolve(true)
        } catch (err) {
          console.log(err)
          reject(err)
        } finally {
          loading.value = false
        }
      } else {
        loading.value = false

        throw new Error('no match requestConfig')
      }
    }
  })
}

/**
 * @description: 获取数据，如果没有直接传入数据，则去请求数据，有则直接用
 * @return {*}
 */
const getData = () => {
  return new Promise(async (resolve, reject) => {
    try {
      // 等待数据加载完成
      await loadTableData()
      if (props.needAverage) {
        let rowData: any = {}
        let oldList: Array<any> = JSON.parse(JSON.stringify(tableData))
        Object.values(props.tableFieldsInfo).map((item: TableFieldInfo, index: number) => {
          let sum = oldList
            .map((item) => item.count)
            .reduce((accumulator, currentValue) => accumulator + currentValue, 0)
          let averageList = oldList
            .map((val) => val[item.name])
            .filter((item) => item !== undefined)
          if (index === 0) rowData[item.name] = '均值'
          else if (item.name === 'count') rowData[item.name] = sum
          else {
            let num =
              averageList.reduce((accumulator, currentValue) => accumulator + currentValue, 0) /
              averageList.length

            rowData[item.name] = isNaN(num) ? 0 : num.toFixed(2)
          }
        })
        insertRow(0, rowData)
      }
      resolve(true)
    } catch (err) {
      console.log(err)
      reject(err)
    }
  })
}

// 包装一下获取数据
const throttleGetData = throttleFunc(getData, 1000)

/**
 * @description: 清空表格数据
 * @return {*}
 */
const resetTableData = () => {
  tableData.splice(0, tableData.length)
}

/**
 * @description: 按条件查询，如果开启了分页查询，那么会直接重新查询数据，否则，会根据现有数据进行查询
 * @return {*}
 */
const queryTableData = () => {
  if (props.openRemoteinquiry && props.requestConfig) {
    reqconfig.otherOptions = { ...props.requestConfig.otherOptions, ...queryFormData }
    // 需要在查询前清除掉目前的数据，不然会导致之前缓存的数据混入
    //  比如第一页已经缓存了，在第二页重新查询，在切回第一页，还是显示查询前的数据，因为缓存没被清除
    tableData.splice(0, tableData.length)
    getData()
  } else {
    let filteredTable = []
    // 过滤出来所有符合formData数据的条件
    filteredTable = backupTableData.filter((item) => {
      let state = true
      for (let [k, v] of Object.entries(queryFormData)) {
        // 模糊查询，看值是否跟表格中的数据匹配
        if (!fuzzySearch(v, item[k])) {
          state = false
          break
        }
      }
      return state
    })
    paginationConfig.total = filteredTable.length
    tableData.splice(0, tableData.length, ...filteredTable)
  }
}

// 把查询方法包装一下，节流
const throttleQueryTableData = throttleFunc(queryTableData, throttleTime)

/**
 * 重置查询表单参数
 */
const resetQueryFormData = () => {
  let data = JSON.parse(
    JSON.stringify(backupQueryFormData, (_, v) => (typeof v === 'undefined' ? '' : v))
  )
  Object.assign(queryFormData, data)
  reqconfig.otherOptions = backupReqOtherOptions // 要把请求的参数也重置一次，不然切换平台等操作，会带着原来的查询参数请求
}

/**
 * @description: 重置整个查询表单，重置后，再请求一次全部表格
 * @param {*} formEl  表单对象
 * @return {*}
 */
const resetQueryForm = () => {
  resetQueryFormData()
  queryTableData()
}

// 把重置方法包装一下，节流
const throttleResetQueryForm = throttleFunc(resetQueryForm, throttleTime)

/**
 * @description: 在获取完数据后，插入均值行
 * @param {*} start 插入的位置
 * @param {*} rowData 插入的数据
 * @return {*}
 */
const insertRow = (start: number, rowData: any) => {
  if (props.openPageQuery) {
    tableData[start].splice(0, 0, rowData)
  } else {
    tableData.splice(start, 0, rowData)
  }
}

/**
 * @description: 根据计算出来的值去返回对应的颜色深度
 * @return {*}
 */
const getDecimalFromRange = (number: number) => {
  if (number === null || number === undefined) return 0
  if (number < 25) return 0.25
  else if (number < 50) return 0.5
  else if (number < 75) return 0.75
  else return 1.0 // 如果number >= 75，则直接返回1.00
}

/**
 * @description: 单独处理拥有均值行的表格每个单元格的样式,均值字段均加粗，其他需要比较的字段根据自身百分比显示颜色
 *              其中使用row-style无效，scope会导致无法覆盖样式
 *               同时由于我自定义了表格内容，哪里的样式会覆盖row的样式，所以只能单独对单元格设置
 * @param {*} info  每个单元格的信息
 * @return {*}
 */
const tableCellStyle = (info: any) => {
  if (info.row.date === '均值')
    return {
      'font-weight': 'bold'
    }
  else if (info.column.property != 'count' && info.column.property != 'date' && props.needAverage) {
    return {
      'background-color': `rgba(59, 157, 247,${getDecimalFromRange(info.row[info.column.property])})`
    }
  } else return {}
}

/**
 * @description: 监听litmit，currentpage的变化，改变后去重新请求数据
 * 如果是limit的变化，则需要把当前页置为1
 * @return {*}
 */
const watchLimit = watch(
  () => paginationConfig.limit,
  (newLimit, oldLimit) => {
    // resetQueryForm(false)

    if (newLimit !== oldLimit) {
      resetQueryFormData()
      // 需要给分页按钮加上:current-page.sync="current_page" 配置，不然不生效
      // 当改变每页大小时把之前的缓存全部清除，重新开始
      if (paginationConfig.currentPage !== 1) {
        paginationConfig.currentPage = 1
      } else {
        getData()
      }
    }
  },
  { deep: true }
)

/**
 * 监听currentpage的变化，如果开启了分页查询，并且当前页发生变化，并且当前页的数据不存在，则重新请求数据
 */
const watchCurPage = watch(
  () => paginationConfig.currentPage,
  (newPage, oldPage) => {
    if (newPage !== oldPage && !tableData[newPage]) {
      getData()
    }
  },
  {
    deep: true
  }
)

// 如果没有开启分页查询，直接关闭这两个监听
if (!props.openPageQuery) {
  watchLimit()
  watchCurPage()
}

/**
 * @description: 监听gid的变化，重新请求数据
 * @return {*}
 */
watch(
  () => props.requestConfig?.otherOptions.gid,
  (newGid, oldGid) => {
    if (newGid != oldGid) {
      // resetQueryForm(false)
      resetQueryFormData()
      reqconfig.otherOptions.gid = newGid

      getData()
    }
  },
  { deep: true }
)

// 监听pf
const watchPf = watch(
  () => props.requestConfig?.otherOptions.pf,
  (newPf, oldPf) => {
    if (newPf != oldPf) {
      // resetQueryForm(false)
      resetQueryFormData()
      reqconfig.otherOptions.pf = newPf
      getData()
    }
  },
  { deep: true }
)

// 监听传入的datalist的变化，然后去更新数据
const changeDataList = watch(
  () => [props.dataList],
  () => {
    // resetQueryForm(false)
    resetQueryFormData()
    getData()
  },
  {
    deep: true
  }
)

// 监听日期的变化，
const watchDateChange = watch(
  () => [props.requestConfig?.otherOptions.startTime, props.requestConfig?.otherOptions.endTime],
  () => {
    // resetQueryForm(false)
    resetQueryFormData()
    getData()
  },
  { deep: true }
)

/**
 * @description: 创建row-key优化表格性能
 * @return {*}
 */
const createRowKey = () => {
  return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
}

// 没有pf取消掉
if (!props.requestConfig?.otherOptions.pf) watchPf()

//如果没有日期就取消掉
if (!props.requestConfig?.otherOptions.startTime && !props.requestConfig?.otherOptions.endTime) {
  watchDateChange()
}

// 没传入datalist则取消该监听
if (!props.dataList) {
  changeDataList()
}

/**
 * @description: 拷贝一份配置文件
 * @return {*}
 */
const initpageConfig = () => {
  Object.assign(paginationConfig, props.paginationConfig)
}

/**
 * @description: 初始化请求配置，用于把拷贝一份新的数据
 * @return {*}
 */
const initReqConfig = () => {
  Object.assign(reqconfig, props.requestConfig)
}

/**
 * @description: 初始化查询框的数据
 * @return {*}
 */
const initFormData = () => {
  props.queryInfo?.map((item: any) => {
    queryFormData[item.name] = item.default
    backupQueryFormData[item.name] = item.default
  })
  // backupQueryFormData = JSON.parse(JSON.stringify(queryFormData))
  Object.assign(backupQueryFormData, JSON.parse(JSON.stringify(queryFormData)))
}

/**
 * @description: 表格排序
 * @param {*} data 获取到的数据
 * @return {*}
 */
const tableSortChange = (data: { column: any; prop: string; order: any }) => {
  // resetQueryForm(false)
  resetQueryFormData()
  let { order } = { ...data }
  if (order === 'ascending') order = 'asc'
  else if (order === 'descending') order = 'desc'
  else order = ''
  reqconfig.otherOptions.order = order
  getData()
}

/**
 * @description: 删除行
 * @param {*} url 请求地址
 * @param {*} row 行数据
 * @return {*}
 */
const deleteRow = (url: string, filedsInfo: any) => {
  axiosInstance
    .post(url, { ...filedsInfo })
    .then((data) => {
      analysisResCode(data).then(() => {
        // resetQueryForm(false)
        resetQueryFormData()
        getData()
      })
    })
    .catch((err) => {
      console.log(err)
    })
}

/**
 * @description: 下载表格数据
 * @return {*}
 */
const downLoadTable = () => {
  emits('downLoad', JSON.parse(JSON.stringify(tableData)))
}

/**
 * @description: 外部获取数据
 * @return {*}
 */
const outGetTableData = () => {
  return toRaw(tableData).flat()
}

const numberInput = (key: string) => {
  let val = queryFormData[key]
  val = parseInt(val)
  if (isNaN(val)) {
    val = 0
  }
  queryFormData[key] = val
}

// 定义暴露出去的方法
defineExpose({
  getData,
  resetTableData,
  deleteRow,
  downLoadTable,
  outGetTableData,
  resetQueryForm
})

onMounted(() => {
  initpageConfig()
  initReqConfig()
  initFormData()
  backupReqOtherOptions = reqconfig.otherOptions // 备份一份请求参数
  // registerWatchProps()
  if (props.loadingState !== undefined) {
    loading.value = props.loadingState
  }
  // 这里会造成有的table页第一次进来刷新两次，因为有的页面gid或者平台等数据会变化，导致请求第二次
  // 但是这里又必须请求一次，因为有的页面数据是没有变化的
  getData()
  // 去加载所有需要的资源
  initLoadResouce(resourceInfo).then((data) => {
    Object.assign(blobUrlInfo, data)
  })
})
</script>

<template>
  <div class="tableContent">
    <div class="filterBox" v-if="openFilterQuery">
      <!-- slot -->
      <div class="filterHeader">
        <span>查询条件</span>
      </div>
      <div class="filterBody">
        <el-form
          :inline="true"
          ref="queryFormRef"
          :model="queryFormData"
          class="queryForm"
          :label-position="'left'"
        >
          <template v-for="item in inputFieldsList">
            <!-- 所有的input查询框 -->
            <el-form-item
              @keyup.enter.native="throttleQueryTableData"
              :label="item.label"
              v-if="item.valueType !== 'int'"
              class="filterItem"
            >
              <el-input
                clearable
                :placeholder="item.placeholder"
                v-model="queryFormData[item.name]"
              />
            </el-form-item>
            <el-form-item
              @keyup.enter.native="throttleQueryTableData"
              :label="item.label"
              v-else
              class="filterItem"
            >
              <el-input
                clearable
                v-model="queryFormData[item.name]"
                @input="numberInput(item.name)"
                :placeholder="item.placeholder"
              />
            </el-form-item>
          </template>

          <!-- 所有选择框 -->
          <!-- <el-config-provider :value-on-clear="null" :empty-values="[undefined, null]"> -->
          <el-form-item :label="item.label" v-for="item in selectFieldsList" class="filterItem">
            <el-select
              :empty-values="[undefined, null]"
              v-model="queryFormData[item.name]"
              :placeholder="item.placeholder"
              :value-key="item.name"
            >
              <el-option v-for="val in item.otherOption" :label="val.cnName" :value="val.value" />
            </el-select>
          </el-form-item>
          <!-- </el-config-provider> -->

          <!-- 所有日期选择框 -->
          <el-form-item :label="item.label" v-for="item in dateFieldsList" class="filterItem">
            <el-date-picker
              v-model="queryFormData[item.name]"
              type="date"
              :placeholder="item.placeholder"
              clearable
            />
          </el-form-item>
        </el-form>
        <!-- 分割线 -->
        <!-- <el-divider class="queryPartition" content-position="center" direction="vertical" /> -->
        <div class="queryBox">
          <el-divider class="queryPartition" content-position="center" direction="vertical" />
          <div class="queryBtnBox">
            <el-button class="queryBtn" color="#165dff" @click="throttleQueryTableData">
              <el-icon><Search /></el-icon>查询
            </el-button>
            <el-button class="refreshBtn" color="#f2f3f5" @click="throttleResetQueryForm()">
              <el-icon><RefreshRight /></el-icon>重置
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 分割线 -->
    <!-- <el-divider class="partition" content-position="center" /> -->
    <div class="tableTools">
      <div class="leftTools">
        <div class="leftToolsGroup" v-if="needLeftTools" style="display: flex">
          <el-button class="leftToolBtn" color="#165dff" @click="emits('addNewItem')">
            <el-icon><Plus /></el-icon>新增
          </el-button>
          <el-button
            class="leftToolBtn"
            color="#626aef"
            @click="emits('upload', outGetTableData())"
            v-if="needUpload"
          >
            <el-icon><Upload /></el-icon>上传
          </el-button>
        </div>
      </div>
      <div class="rightTools" v-if="needRightTools">
        <el-button
          v-if="needDownload"
          color="#f0f1f3"
          size="default"
          class="rightToolsItem"
          @click="downLoadTable"
        >
          <el-icon><Download /></el-icon>下载
        </el-button>
        <!-- throttleFunc(queryTableData, 200) -->
        <RegreshBtn @refresh-table="throttleGetData" :icon-size="toolsIconSize"></RegreshBtn>

        <FilterPopover
          :table-fields-info="tableFieldsInfo"
          :icon-size="toolsIconSize"
        ></FilterPopover>
      </div>
    </div>

    <div class="tableBox">
      <!-- 没有分页的时候需要重新计算一下data -->
      <el-table
        :data="openPageQuery ? tableData[paginationConfig.currentPage] : tableDataNoPaging"
        style="width: 100%"
        class="tableBody"
        :cell-style="tableCellStyle"
        v-loading="loading"
        :row-key="createRowKey()"
        @sort-change="tableSortChange"
      >
        <el-table-column
          v-if="props.needRowindex"
          align="center"
          label="#"
          type="index"
          :index="computedRowIndex"
        />
        <template v-for="item in tableFieldsInfo">
          <el-table-column
            :prop="item.name"
            :label="item.cnName"
            :min-width="item.specialEffect?.type === FieldSpecialEffectType.DROPDOWN ? '170px' : ''"
            align="center"
            show-overflow-tooltip
            v-if="item.isShow"
            :sortable="item.needSort === true ? 'custorm' : false"
          >
            <template v-slot="scope">
              <!-- tag类 -->
              <el-tag
                v-if="item.specialEffect?.type === FieldSpecialEffectType.TAG"
                :type="scope.row[item.name] ? 'danger' : 'success'"
              >
                {{
                  scope.row[item.name]
                    ? item.specialEffect.othnerInfo.text[0]
                    : item.specialEffect.othnerInfo.text[1]
                }}
              </el-tag>
              <!-- :src="loadResource(scope.row[item.name])" -->
              <!-- :src="scope.row[item.name]" -->
              <!-- 头像类 -->
              <el-image
                v-else-if="item.specialEffect?.type === FieldSpecialEffectType.IMG"
                :preview-teleported="true"
                :src="scope.row[item.name]"
                :preview-src-list="[scope.row[item.name]]"
                style="width: 35px; height: 35px"
                :fit="'fill'"
                :hide-on-click-modal="true"
              >
                <template #error>
                  <!--  -->
                  <img style="width: 35px; height: 35px" :src="blobUrlInfo.defaultHead" />
                </template>
              </el-image>

              <!-- 文字类 -->
              <el-text
                v-else-if="item.specialEffect?.type === FieldSpecialEffectType.TEXT"
                :type="
                  scope.row[item.name]
                    ? item.specialEffect.othnerInfo.color[0]
                    : item.specialEffect.othnerInfo.color[1]
                "
              >
                {{ scope.row[item.name] }}
              </el-text>

              <!-- 翻译类 -->
              <el-text v-else-if="item.specialEffect?.type === FieldSpecialEffectType.TRANSLATE">
                <el-icon
                  v-if="item.specialEffect.othnerInfo.icon"
                  style="padding-right: 8px"
                  :color="scope.row[item.name] ? '#409EFF' : '#F56C6C'"
                  ><icon-tabler-point-filled></icon-tabler-point-filled
                ></el-icon>
                {{
                  item.specialEffect.othnerInfo.translateText[scope.row[item.name]]
                    ? item.specialEffect.othnerInfo.translateText[scope.row[item.name]]
                    : '未知'
                }}
              </el-text>

              <!-- 状态类 -->
              <el-text v-else-if="item.specialEffect?.type === FieldSpecialEffectType.STATE">
                <span>
                  <el-icon
                    style="padding-right: 8px"
                    :color="scope.row[item.name] ? '#409EFF' : '#F56C6C'"
                    ><icon-tabler-point-filled></icon-tabler-point-filled
                  ></el-icon>
                  {{
                    scope.row[item.name]
                      ? item.specialEffect.othnerInfo.text[0]
                      : item.specialEffect.othnerInfo.text[1]
                  }}</span
                >
              </el-text>

              <!-- 开关类 -->

              <el-switch
                :active-value="1"
                :inactive-value="0"
                v-else-if="item.specialEffect?.type === FieldSpecialEffectType.SWITCH"
                v-model="scope.row[item.name]"
                :data="scope.row[item.name]"
                size="default"
              >
              </el-switch>

              <!-- 下拉菜单类 -->
              <el-dropdown
                trigger="click"
                v-else-if="item.specialEffect?.type === FieldSpecialEffectType.DROPDOWN"
              >
                <span
                  class="el-dropdown-link"
                  style="display: flex; align-items: center; cursor: pointer"
                >
                  <el-icon
                    style="padding-right: 8px"
                    :color="scope.row[item.name] ? '#409EFF' : '#F56C6C'"
                    ><icon-tabler-point-filled></icon-tabler-point-filled
                  ></el-icon>
                  {{
                    scope.row[item.name]
                      ? item.specialEffect.othnerInfo.text[0]
                      : item.specialEffect.othnerInfo.text[1]
                  }}

                  <el-icon class="el-icon--right"><arrow-down /></el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item :command="{ value: true }">使用中</el-dropdown-item>
                    <el-dropdown-item :command="{ value: false }">已弃用</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>

              <el-text v-else>
                <!-- 其他列按默认方式显示 -->

                {{
                  props.needAverage &&
                  scope.row[item.name] !== undefined &&
                  item.name !== 'count' &&
                  item.name !== 'date'
                    ? scope.row[item.name] + '%'
                    : scope.row[item.name]
                }}
              </el-text>
            </template>
          </el-table-column>
        </template>

        <slot name="tableOperation"></slot>
      </el-table>
      <div class="userTablePaginationBox">
        <el-pagination
          class="userTablePagination"
          background
          :page-size="paginationConfig.limit"
          :page-sizes="paginationConfig.pagesizeList"
          table-layout="fixed"
          layout="prev, pager, next ,jumper ,sizes,total,"
          :total="paginationConfig.total"
          :current-page.sync="paginationConfig.currentPage"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
.tableContent {
  margin: 10px auto 20px;
  width: 100%;

  /* height: 100%; */
  box-shadow:
    0 4px 8px 0 rgba(0, 0, 0, 0.02),
    0 1px 3px 0 rgba(0, 0, 0, 0.02);
}
.filterBox,
.tableBox {
  width: 100%;
}

.filterBox {
  margin-top: 1%;
  min-height: 18%;
  display: flex;
  flex-direction: column;
}

.filterHeader,
.filterBody {
  width: 98%;
  box-sizing: border-box;

  margin: 0 auto;
}

.filterHeader {
  display: flex;
  align-items: center;
  color: black;
  font-size: 16px;
  font-weight: bold;
  /* background-color: lightblue; */
  /* margin-bottom: 1%; */
}

.filterBody {
  display: flex;
  padding: 0 24px;
}

.queryBox {
  width: 10%;
  display: flex;
  justify-content: space-around;
}

.queryBtnBox {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.refreshBtn {
  margin-top: 10%;
  margin-bottom: 10%;
}

.queryPartition {
  height: 90%;
}

.queryForm {
  width: 90%;
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-between; */
}

.filterItem {
  width: 20%;
  display: flex;
  align-items: center;
}

.partition {
  width: 98%;
  margin: 0 auto;
}

.tableTools {
  width: 98%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  margin-top: 1%;
}

.leftTools,
.rightTools {
  width: 10%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rightTools {
  width: 5%;
}

.tableBox {
  width: 98%;
  /* height: 98%; */
  margin: 5px auto;
  box-shadow:
    0 4px 8px 0 rgba(0, 0, 0, 0.02),
    0 1px 3px 0 rgba(0, 0, 0, 0.02);
  /* margin-top: 0.5%;
  margin-bottom: 2%; */
}

.tableBody {
  box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.1);
  /* box-shadow:
    -4px -4px 8px 1px rgba(0, 0, 0, 0.02),
    -4px -4px 3px 1px rgba(0, 0, 0, 0.02); */
}

.userTablePaginationBox {
  box-sizing: border-box;
  width: 98%;
  margin: 0% auto;
  padding: 1% 0;
  display: flex;
  justify-content: center;
}

.averageItem {
  font-size: 14px;
  color: #515b6f;
}

.normalItem {
  font-size: 14px;
  color: #515b6f;
  font-weight: 400;
}

.leftToolBtn {
  margin-right: 5px;
}
</style>