xiaodou-ai-admin/src/components/TablePro/index.vue

<template>
    <a-row>
      <a-col span="24" >
        <a-row justify="end">
            <a-col>
              <a-space>
                <a-button type="primary" @click="openModel('add')" >
                  新增
                  <template #icon>
                    <plus-outlined />
                  </template>
                </a-button>
                <a-button type="primary" >
                  导出
                  <template #icon>
                    <download-outlined />
                  </template>
                </a-button>
                <!-- 小组件 -->

                <a-tooltip>
                  <template #title >刷新</template>
                  <reload-outlined v-if="!state.loading"  @click="reload"/>
                  <loading-outlined v-else />
                </a-tooltip>
              </a-space>
            </a-col>
        </a-row>
      </a-col>
      <a-col span="24" style="overflow: hidden;overflow-x: scroll;">
        <a-table
          style="width: 100%;margin-top: 10px;"
          v-bind="{...props}"
          :data-source="state.data"
          :loading="state.loading"
          :pagination="state.pagination.total <= 10 ? false : state.pagination"
          @change="handleTableChange"
        >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <a-space>
              <span  v-for="item in column.list" :key="item.name" >
                <a-popconfirm
                  title="确实要删除吗？"
                  ok-text="确定"
                  cancel-text="取消"
                  @confirm="confirmDel(item, record)"
                  v-if="item.use == 'del'"
                >
                  <a href="#">删除</a>
                </a-popconfirm>
                <a v-else @click="handleAction(item, record)" >{{item.name}}</a>
              </span>
            </a-space>
          </template>
        </template>
        </a-table>
      </a-col>
    </a-row>

    <!-- 弹窗 -->
    <modal-pro
      :label="props.modalTitle"
      :visible="state.modelVisible"
      @cancel="closeModel"
      @ok="ok"
    >
      <form-pro ref="formProRef" />
    </modal-pro>
</template>

<script lang="ts" setup >
import { useCopy } from '@/hooks/dom'
import { ColumnsType } from 'ant-design-vue/lib/vc-table/interface'
import { TableProps } from 'ant-design-vue/lib/vc-table/Table'
import { reactive, ref, watch } from 'vue'
import { PlusOutlined, DownloadOutlined, ReloadOutlined, LoadingOutlined } from '@ant-design/icons-vue'
/**
 * formItemProps
 * rules 校验
 * request 需要请求的表单项 分别创建id key value name
 * type: input select radio check datepick
 */

/**
  * pro-able
  * 'export' | 'add' | search
*/

export interface ColumnsChildren {
  name: '',
  use: string,
  icon: '',
  bindKey: string
}

export interface TablePropPorps extends TableProps {
  request: (params: any) => any
  del: (id: string) => void
  params: any,
  columns: ColumnsType & {children: ColumnsChildren},
  modalTitle: string
}

const props = defineProps<TablePropPorps>()

const formProRef = ref()

const state = reactive({
  loading: false,
  data: [],
  pagination: {
    current: 1,
    total: 0,
    pageSize: 10
  },
  modelVisible: false,
  opraState: 'add'
})

const ok = () => {
  formProRef.value.onSubmit()
}

const handleTableChange = (pag: { pageSize: number; current: number }) => {
  state.pagination = {
    ...state.pagination,
    pageSize: pag.pageSize,
    current: pag.current
  }
}
// 请求table 的data
const request = async () => {
  state.loading = true
  const data = await props.request(props.params)
  state.loading = false
  console.log('table pro data:', data)
  state.data = data
}

// 删除对应的table选项
const confirmDel = async (item: ColumnsChildren, record: any) => {
  await props.del(record[item.bindKey])
  request()
}

const handleAction = (column: ColumnsChildren, record: any) => {
  switch (column.use) {
    case 'copy':
      useCopy(record[column.bindKey])
  }
}

// `const reload = () => request()` 正在定义一个名为 `reload` 的函数，该函数调用 `request` 函数。该函数用于在用户点击“刷新”按钮时重新加载表格数据。
const reload = () => request()

const openModel = (type: 'add' | 'update') => {
  state.modelVisible = true
  state.opraState = type
}

const closeModel = () => {
  state.modelVisible = false
}

watch(
  () => props.request,
  () => request(),
  {
    deep: true,
    immediate: true
  }
)

</script>

<style>
</style>