fs-admin/src/components/ProTable.vue

<script setup lang="ts">
import { ElMessageBox } from 'element-plus'

const props = defineProps({
  request: {
    type: Function,
    default: () => {}
  },
  pageSize: {
    type: Number,
    default: 10
  }
})

// ============== 查询部分开始 ===============
const query = ref({})
const handleQuery = () => {
  curPage.value = 1
  getTableData()
}
const handleReset = () => {
  query.value = {}
}
// ============== 查询部分结束 ===============

// ============== 表格部分开始 ===============
const tableData = ref([])
const total = ref(0)
const curPage = ref(1)

const getTableData = () => {
  props
    .request({
      ...query.value,
      pageSize: props.pageSize,
      page: curPage.value
    })
    .then((res: any) => {
      tableData.value = res.data
      total.value = res.total
    })
}
getTableData()

const pageChange = () => {
  getTableData()
}
// ============== 表格部分结束 ===============

// ============== crud部分开始 ===============
const handleCreate = () => {
  curPage.value = 1
  getTableData()
}
const handleUpdate = () => {
  query.value = {}
}
const handleDelete = () => {
  ElMessageBox.confirm('您确定要删除该项吗', '提示', {
    type: 'warning'
  }).then(() => {})
}
const handlePatchDelete = () => {}
// ============== crud部分结束 ===============
</script>

<template>
  <div class="flex flex-col" style="height: calc(100vh - 100px)">
    <el-card class="mb-4" shadow="never">
      <el-form :inline="true">
        <slot name="queryBar" :query="query"></slot>
        <el-form-item>
          <el-button type="primary" icon="search" @click="handleQuery">查询</el-button>
          <el-button icon="i-ep-refresh" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="h-full flex-grow-1" :body-style="{ height: '100%' }" shadow="never">
      <div class="flex flex-col h-full">
        <div class="flex justify-between mb-20px">
          <div>
            <el-button type="primary" @click="handleCreate">新建</el-button>
            <el-button type="danger" @click="handlePatchDelete">删除</el-button>
          </div>
        </div>
        <el-table class="flex-grow-1 h-full" :data="tableData">
          <slot name="table"></slot>
          <el-table-column fixed="right" label="操作" width="120">
            <template #default>
              <el-button link type="primary" size="small" @click="handleUpdate">编辑</el-button>
              <el-button link type="danger" size="small" @click="handleDelete">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="flex justify-end shrink-0">
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="pageSize"
            :total="total"
            @current-change="pageChange"
            class="mt-4"
          />
        </div>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
:deep(.el-table th.el-table__cell) {
  background-color: #f5f7fa;
  color: rgb(31, 34, 37);
}
</style>