Web/admin.ui.plus-master/src/components/table/index.vue

<template>
  <div class="table-container">
    <el-table
      :data="data"
      :border="setBorder"
      v-bind="$attrs"
      row-key="id"
      stripe
      style="width: 100%"
      v-loading="config.loading"
      @selection-change="onSelectionChange"
    >
      <el-table-column type="selection" :reserve-selection="true" width="30" v-if="config.isSelection" />
      <el-table-column type="index" label="序号" width="60" v-if="config.isSerialNo" />
      <el-table-column
        v-for="(item, index) in setHeader"
        :key="index"
        show-overflow-tooltip
        :prop="item.key"
        :width="item.colWidth"
        :label="item.title"
      >
        <template v-slot="scope">
          <template v-if="item.type === 'image'">
            <el-image
              :style="{ width: `${item.width}px`, height: `${item.height}px` }"
              :src="scope.row[item.key]"
              :zoom-rate="1.2"
              :preview-src-list="[scope.row[item.key]]"
              preview-teleported
              fit="cover"
            />
          </template>
          <template v-else>
            {{ scope.row[item.key] }}
          </template>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" v-if="config.isOperate">
        <template v-slot="scope">
          <el-popconfirm title="确定删除吗？" @confirm="onDelRow(scope.row)">
            <template #reference>
              <el-button text type="primary">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="暂无数据" />
      </template>
    </el-table>
    <div class="table-footer mt15">
      <el-pagination
        v-model:current-page="state.page.pageNum"
        v-model:page-size="state.page.pageSize"
        :pager-count="5"
        :page-sizes="[10, 20, 30]"
        :total="config.total"
        layout="total, sizes, prev, pager, next, jumper"
        background
        @size-change="onHandleSizeChange"
        @current-change="onHandleCurrentChange"
      >
      </el-pagination>
      <div class="table-footer-tool">
        <SvgIcon name="iconfont icon-dayin" :size="19" title="打印" @click="onPrintTable" />
        <SvgIcon name="iconfont icon-yunxiazai_o" :size="22" title="导出" @click="onImportTable" />
        <SvgIcon name="iconfont icon-shuaxin" :size="22" title="刷新" @click="onRefreshTable" />
        <el-popover
          placement="top-end"
          trigger="click"
          transition="el-zoom-in-top"
          popper-class="table-tool-popper"
          :width="300"
          :persistent="false"
          @show="onSetTable"
        >
          <template #reference>
            <SvgIcon name="iconfont icon-quanjushezhi_o" :size="22" title="设置" />
          </template>
          <template #default>
            <div class="tool-box">
              <el-tooltip content="拖动进行排序" placement="top-start">
                <SvgIcon name="fa fa-question-circle-o" :size="17" class="ml11" color="#909399" />
              </el-tooltip>
              <el-checkbox
                v-model="state.checkListAll"
                :indeterminate="state.checkListIndeterminate"
                class="ml10 mr1"
                label="列显示"
                @change="onCheckAllChange"
              />
              <el-checkbox v-model="getConfig.isSerialNo" class="ml12 mr1" label="序号" />
              <el-checkbox v-model="getConfig.isSelection" class="ml12 mr1" label="多选" />
            </div>
            <el-scrollbar>
              <div ref="toolSetRef" class="tool-sortable">
                <div class="tool-sortable-item" v-for="v in header" :key="v.key" :data-key="v.key">
                  <i class="fa fa-arrows-alt handle cursor-pointer"></i>
                  <el-checkbox v-model="v.isCheck" size="default" class="ml12 mr8" :label="v.title" @change="onCheckChange" />
                </div>
              </div>
            </el-scrollbar>
          </template>
        </el-popover>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="netxTable">
import { reactive, computed, nextTick, ref } from 'vue'
import { ElMessage } from 'element-plus'
import printJs from 'print-js'
import table2excel from 'js-table2excel'
import Sortable from 'sortablejs'
import { storeToRefs } from 'pinia'
import { useThemeConfig } from '/@/stores/themeConfig'
import '/@/theme/tableTool.scss'

// 定义父组件传过来的值
const props = defineProps({
  // 列表内容
  data: {
    type: Array<EmptyObjectType>,
    default: () => [],
  },
  // 表头内容
  header: {
    type: Array<EmptyObjectType>,
    default: () => [],
  },
  // 配置项
  config: {
    type: Object,
    default: () => {},
  },
  // 打印标题
  printName: {
    type: String,
    default: () => '',
  },
})

// 定义子组件向父组件传值/事件
const emit = defineEmits(['delRow', 'pageChange', 'sortHeader'])

// 定义变量内容
const toolSetRef = ref()
const storesThemeConfig = useThemeConfig()
const { themeConfig } = storeToRefs(storesThemeConfig)
const state = reactive({
  page: {
    pageNum: 1,
    pageSize: 10,
  },
  selectlist: [] as EmptyObjectType[],
  checkListAll: true,
  checkListIndeterminate: false,
})

// 设置边框显示/隐藏
const setBorder = computed(() => {
  return props.config.isBorder ? true : false
})
// 获取父组件 配置项（必传）
const getConfig = computed(() => {
  return props.config
})
// 设置 tool header 数据
const setHeader = computed(() => {
  return props.header.filter((v) => v.isCheck)
})
// tool 列显示全选改变时
const onCheckAllChange = <T>(val: T) => {
  if (val) props.header.forEach((v) => (v.isCheck = true))
  else props.header.forEach((v) => (v.isCheck = false))
  state.checkListIndeterminate = false
}
// tool 列显示当前项改变时
const onCheckChange = () => {
  const headers = props.header.filter((v) => v.isCheck).length
  state.checkListAll = headers === props.header.length
  state.checkListIndeterminate = headers > 0 && headers < props.header.length
}
// 表格多选改变时，用于导出
const onSelectionChange = (val: EmptyObjectType[]) => {
  state.selectlist = val
}
// 删除当前项
const onDelRow = (row: EmptyObjectType) => {
  emit('delRow', row)
}
// 分页改变
const onHandleSizeChange = (val: number) => {
  state.page.pageSize = val
  emit('pageChange', state.page)
}
// 分页改变
const onHandleCurrentChange = (val: number) => {
  state.page.pageNum = val
  emit('pageChange', state.page)
}
// 搜索时，分页还原成默认
const pageReset = () => {
  state.page.pageNum = 1
  state.page.pageSize = 10
  emit('pageChange', state.page)
}
// 打印
const onPrintTable = () => {
  // https://printjs.crabbly.com/#documentation
  // 自定义打印
  let tableTh = ''
  let tableTrTd = ''
  let tableTd: any = {}
  // 表头
  props.header.forEach((v) => {
    tableTh += `<th class="table-th">${v.title}</th>`
  })
  // 表格内容
  props.data.forEach((val, key) => {
    if (!tableTd[key]) tableTd[key] = []
    props.header.forEach((v) => {
      if (v.type === 'text') {
        tableTd[key].push(`<td class="table-th table-center">${val[v.key]}</td>`)
      } else if (v.type === 'image') {
        tableTd[key].push(`<td class="table-th table-center"><img src="${val[v.key]}" style="width:${v.width}px;height:${v.height}px;"/></td>`)
      }
    })
    tableTrTd += `<tr>${tableTd[key].join('')}</tr>`
  })
  // 打印
  printJs({
    printable: `<div style=display:flex;flex-direction:column;text-align:center><h3>${props.printName}</h3></div><table border=1 cellspacing=0><tr>${tableTh}${tableTrTd}</table>`,
    type: 'raw-html',
    css: ['//at.alicdn.com/t/c/font_2298093_rnp72ifj3ba.css', '//unpkg.com/element-plus/dist/index.css'],
    style: `@media print{.mb15{margin-bottom:15px;}.el-button--small i.iconfont{font-size: 12px !important;margin-right: 5px;}}; .table-th{word-break: break-all;white-space: pre-wrap;}.table-center{text-align: center;}`,
  })
}
// 导出
const onImportTable = () => {
  if (state.selectlist.length <= 0) return ElMessage.warning('请先选择要导出的数据')
  table2excel(props.header, state.selectlist, `${themeConfig.value.globalTitle} ${new Date().toLocaleString()}`)
}
// 刷新
const onRefreshTable = () => {
  emit('pageChange', state.page)
}
// 设置
const onSetTable = () => {
  nextTick(() => {
    const sortable = Sortable.create(toolSetRef.value, {
      handle: '.handle',
      dataIdAttr: 'data-key',
      animation: 150,
      onEnd: () => {
        const headerList: EmptyObjectType[] = []
        sortable.toArray().forEach((val: string) => {
          props.header.forEach((v) => {
            if (v.key === val) headerList.push({ ...v })
          })
        })
        emit('sortHeader', headerList)
      },
    })
  })
}

// 暴露变量
defineExpose({
  pageReset,
})
</script>

<style scoped lang="scss">
.table-container {
  display: flex;
  flex-direction: column;
  .el-table {
    flex: 1;
  }
  .table-footer {
    display: flex;
    .table-footer-tool {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      i {
        margin-right: 10px;
        cursor: pointer;
        color: var(--el-text-color-regular);
        &:last-of-type {
          margin-right: 0;
        }
      }
    }
  }
}
</style>