shuhi-ui/src/components/CommonPage/CommonTable.vue

<template>
  <ele-card :body-style="{ paddingTop: '8px' }" flex-table>
    <!-- 表格 -->
    <ele-pro-table
      ref="tableRef"
      :row-key="pageConfig.rowKey || 'id'"
      :columns="columns"
      :datasource="datasource"
      :show-overflow-tooltip="true"
      v-model:selections="selections"
      highlight-current-row
      :export-config="{ fileName: pageConfig.fileName }"
      :cache-key="pageConfig.cacheKey"
      border
      v-bind="$attrs"
    >
      <template v-for="(val, key) in slotArray" v-slot:[key]="{ row }">
        <slot :name="key" :row="row"></slot>
      </template>
    </ele-pro-table>
  </ele-card>
</template>

<script setup>
  import { ref, getCurrentInstance, useSlots } from 'vue';
  import { ElMessageBox } from 'element-plus/es';
  import { EleMessage } from 'ele-admin-plus/es';
  import { useDictData } from '@/utils/use-dict-data';
  import { download, toFormData, checkDownloadRes } from '@/utils/common';

  const slotArray = useSlots();

  let props = defineProps({
    pageConfig: {
      type: Object,
      default: () => ({
        cacheKey: 'recycleOrderTable',
        fileName: '回收订单查询',
        rowKey: 'id'
      })
    },
    pageUrl: { type: String, default: '/system/post/list' },
    exportUrl: { type: String, default: '/system/post/export' },
    columns: { type: Array, default: () => [] }
  });
  let { proxy } = getCurrentInstance();

  /** 表格实例 */
  const tableRef = ref(null);

  /** 表格选中数据 */
  const selections = ref([]);

  async function queryPage(params) {
    let url = props.pageConfig.pageUrl || props.pageUrl;
    const res = await proxy.$http.get(url, { params });
    if (res.data.code === 200) {
      return res.data;
    }
    return Promise.reject(new Error(res.data.msg));
  }

  /** 表格数据源 */
  const datasource = ({ pages, where, orders }) => {
    let initKeys = props.pageConfig.params || {};
    return queryPage({ ...initKeys, ...where, ...orders, ...pages });
  };

  /** 搜索 */
  const reload = (where) => {
    tableRef.value?.reload?.({ where });
  };

  /** 批量操作 */
  const operatBatch = ({ method, row, url, title }) => {
    const rows = row == null ? selections.value : [row];
    if (!rows.length) {
      EleMessage.error('请至少选择一条数据');
      return;
    }
    title = title || '是否确认当前操作？';
    ElMessageBox.confirm(title, '提示', {
      type: 'warning',
      draggable: true
    })
      .then(() => {
        const loading = EleMessage.loading({
          message: '请求中..',
          plain: true
        });

        proxy.$http[method](url)
          .then((res) => {
            if (res.data.code === 200) {
              EleMessage.success('操作成功');
              reload();
            } else {
              EleMessage.error(res.data.msg);
            }
            loading.close();
          })
          .catch((e) => {
            loading.close();
            EleMessage.error(e.message);
          });
      })
      .catch(() => {});
  };

  /// 导出数据
  async function exportPage(params, name) {
    const res = await proxy.$http({
      url: props.pageConfig.exportUrl,
      method: 'POST',
      data: toFormData(params),
      responseType: 'blob'
    });
    await checkDownloadRes(res);
    download(
      res.data,
      name ? `${name}_${Date.now()}.xlsx` : `post_${Date.now()}.xlsx`
    );
  }

  /** 导出数据 */
  const exportData = (name) => {
    const loading = EleMessage.loading({
      message: '请求中..',
      plain: true
    });
    tableRef.value?.fetch?.(({ where, orders }) => {
      exportPage({ ...where, ...orders }, name)
        .then(() => {
          loading.close();
        })
        .catch((e) => {
          loading.close();
          EleMessage.error(e.message);
        });
    });
  };

  function messageBoxConfirm({ message, fetch }) {
    ElMessageBox.confirm(message, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '关闭',
      type: 'warning'
    }).then(() => {
      fetch().then((res) => {
        if (res.data.code === 200) {
          EleMessage.success('操作成功');
          reload();
        } else {
          EleMessage.error(res.data.msg);
        }
      });
    });
  }

  function getSelections() {
    return selections.value;
  }

  defineExpose({
    reload,
    exportData,
    operatBatch,
    getSelections,
    messageBoxConfirm
  });
</script>