From c2d38ac946e848ff4f7b6a08cc87be3a5734b0fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Mon, 11 Aug 2025 13:19:22 +0800
Subject: [PATCH] =?UTF-8?q?style(table):=20=E4=BC=98=E5=8C=96=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E6=A0=B7=E5=BC=8F=E5=B9=B6=E6=B7=BB=E5=8A=A0=E5=85=A8?=
 =?UTF-8?q?=E5=B1=80=E7=BE=8E=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 component.less 中添加了 ele-pro-table 的全局美化样式
- 调整了表格的列宽、对齐方式等样式
- 优化了表格的视觉效果，提高了可读性
---
 src/styles/component.less           |  15 +
 src/views/shop/shopCoupon/index.vue | 606 ++++++++++++++--------------
 2 files changed, 318 insertions(+), 303 deletions(-)

diff --git a/src/styles/component.less b/src/styles/component.less
index 69820a9..4d713e9 100644
--- a/src/styles/component.less
+++ b/src/styles/component.less
@@ -1,2 +1,17 @@
 /** 组件样式 */
 //@input-item: 300px;
+
+/* ele-pro-table 全局美化样式 */
+.ele-pro-table .ant-table-thead > tr > th {
+  border-bottom: 2px solid #f0f0f0;
+  background-color: #fafafa;
+  font-weight: 600;
+}
+
+.ele-pro-table .ant-table-tbody > tr > td {
+  border-bottom: 1px solid #f5f5f5;
+}
+
+.ele-pro-table .ant-table-tbody > tr:hover > td {
+  background-color: #f8f9fa;
+}
diff --git a/src/views/shop/shopCoupon/index.vue b/src/views/shop/shopCoupon/index.vue
index abf867d..8a20bae 100644
--- a/src/views/shop/shopCoupon/index.vue
+++ b/src/views/shop/shopCoupon/index.vue
@@ -1,334 +1,334 @@
 <template>
   <a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
-      <a-card :bordered="false" :body-style="{ padding: '16px' }">
-        <ele-pro-table
-          ref="tableRef"
-          row-key="id"
-          :columns="columns"
-          :datasource="datasource"
-          :customRow="customRow"
-          tool-class="ele-toolbar-form"
-          class="sys-org-table"
-          :scroll="{ x: 1400, y: 'calc(100vh - 320px)' }"
-          size="middle"
-          :pagination="{
+    <a-card :bordered="false" :body-style="{ padding: '16px' }">
+      <ele-pro-table
+        ref="tableRef"
+        row-key="id"
+        :columns="columns"
+        :datasource="datasource"
+        :customRow="customRow"
+        tool-class="ele-toolbar-form"
+        class="sys-org-table"
+        :scroll="{ x: 1400, y: 'calc(100vh - 320px)' }"
+        size="middle"
+        :pagination="{
             showSizeChanger: true,
             showQuickJumper: true,
             showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条/共 ${total} 条`
           }"
-        >
-          <template #toolbar>
-            <search
-              @search="reload"
-              :selection="selection"
-              @add="openEdit"
-              @remove="removeBatch"
-              @batchMove="openMove"
-            />
+      >
+        <template #toolbar>
+          <search
+            @search="reload"
+            :selection="selection"
+            @add="openEdit"
+            @remove="removeBatch"
+            @batchMove="openMove"
+          />
+        </template>
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'couponStatus'">
+            <a-tag v-if="record.deleted === 1" color="red">已删除</a-tag>
+            <a-tag v-else-if="record.enabled === 0" color="orange">已禁用</a-tag>
+            <a-tag v-else-if="record.isExpire === 1" color="gray">已过期</a-tag>
+            <a-tag v-else-if="record.status === 1" color="red">隐藏</a-tag>
+            <a-tag v-else color="green">正常</a-tag>
           </template>
-          <template #bodyCell="{ column, record }">
-            <template v-if="column.key === 'couponStatus'">
-              <a-tag v-if="record.deleted === 1" color="red">已删除</a-tag>
-              <a-tag v-else-if="record.enabled === 0" color="orange">已禁用</a-tag>
-              <a-tag v-else-if="record.isExpire === 1" color="gray">已过期</a-tag>
-              <a-tag v-else-if="record.status === 1" color="red">隐藏</a-tag>
-              <a-tag v-else color="green">正常</a-tag>
-            </template>
-            <template v-if="column.key === 'action'">
-              <a-space>
-                <a @click="openEdit(record)" class="ele-text-primary">
-                  <EditOutlined /> 编辑
-                </a>
-                <a-divider type="vertical" />
-                <a-popconfirm
-                  title="确定要删除此优惠券吗？"
-                  @confirm="remove(record)"
-                  placement="topRight"
-                >
-                  <a class="ele-text-danger">
-                    <DeleteOutlined /> 删除
-                  </a>
-                </a-popconfirm>
-              </a-space>
-            </template>
+          <template v-if="column.key === 'action'">
+            <a @click="openEdit(record)" class="ele-text-primary">
+              <EditOutlined/>
+              编辑
+            </a>
+            <a-divider type="vertical"/>
+            <a-popconfirm
+              title="确定要删除此优惠券吗？"
+              @confirm="remove(record)"
+              placement="topRight"
+            >
+              <a class="ele-text-danger">
+                <DeleteOutlined/>
+                删除
+              </a>
+            </a-popconfirm>
           </template>
-        </ele-pro-table>
-      </a-card>
+        </template>
+      </ele-pro-table>
+    </a-card>
 
-      <!-- 编辑弹窗 -->
-      <ShopCouponEdit v-model:visible="showEdit" :data="current" @done="reload" />
+    <!-- 编辑弹窗 -->
+    <ShopCouponEdit v-model:visible="showEdit" :data="current" @done="reload"/>
   </a-page-header>
 </template>
 
 <script lang="ts" setup>
-  import { createVNode, ref } from 'vue';
-  import { message, Modal } from 'ant-design-vue';
-  import { ExclamationCircleOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue';
-  import type { EleProTable } from 'ele-admin-pro';
-  import { toDateString } from 'ele-admin-pro';
-  import type {
-    DatasourceFunction,
-    ColumnItem
-  } from 'ele-admin-pro/es/ele-pro-table/types';
-  import Search from './components/search.vue';
-  import {getPageTitle} from '@/utils/common';
-  import ShopCouponEdit from './components/shopCouponEdit.vue';
-  import { pageShopCoupon, removeShopCoupon, removeBatchShopCoupon } from '@/api/shop/shopCoupon';
-  import type { ShopCoupon, ShopCouponParam } from '@/api/shop/shopCoupon/model';
+import {createVNode, ref} from 'vue';
+import {message, Modal} from 'ant-design-vue';
+import {ExclamationCircleOutlined, EditOutlined, DeleteOutlined} from '@ant-design/icons-vue';
+import type {EleProTable} from 'ele-admin-pro';
+import {toDateString} from 'ele-admin-pro';
+import type {
+  DatasourceFunction,
+  ColumnItem
+} from 'ele-admin-pro/es/ele-pro-table/types';
+import Search from './components/search.vue';
+import {getPageTitle} from '@/utils/common';
+import ShopCouponEdit from './components/shopCouponEdit.vue';
+import {pageShopCoupon, removeShopCoupon, removeBatchShopCoupon} from '@/api/shop/shopCoupon';
+import type {ShopCoupon, ShopCouponParam} from '@/api/shop/shopCoupon/model';
 
-  // 表格实例
-  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+// 表格实例
+const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
 
-  // 表格选中数据
-  const selection = ref<ShopCoupon[]>([]);
-  // 当前编辑数据
-  const current = ref<ShopCoupon | null>(null);
-  // 是否显示编辑弹窗
-  const showEdit = ref(false);
-  // 是否显示批量移动弹窗
-  const showMove = ref(false);
-  // 加载状态
-  const loading = ref(true);
+// 表格选中数据
+const selection = ref<ShopCoupon[]>([]);
+// 当前编辑数据
+const current = ref<ShopCoupon | null>(null);
+// 是否显示编辑弹窗
+const showEdit = ref(false);
+// 是否显示批量移动弹窗
+const showMove = ref(false);
+// 加载状态
+const loading = ref(true);
 
-  // 表格数据源
-  const datasource: DatasourceFunction = ({
+// 表格数据源
+const datasource: DatasourceFunction = ({
+                                          page,
+                                          limit,
+                                          where,
+                                          orders,
+                                          filters
+                                        }) => {
+  if (filters) {
+    where.status = filters.status;
+  }
+  return pageShopCoupon({
+    ...where,
+    ...orders,
     page,
-    limit,
-    where,
-    orders,
-    filters
-  }) => {
-    if (filters) {
-      where.status = filters.status;
+    limit
+  });
+};
+
+// 表格列配置
+const columns = ref<ColumnItem[]>([
+  {
+    title: 'ID',
+    dataIndex: 'id',
+    key: 'id',
+    align: 'center',
+    width: 80,
+    fixed: 'left'
+  },
+  {
+    title: '优惠券名称',
+    dataIndex: 'name',
+    key: 'name',
+    align: 'left',
+    width: 150,
+    ellipsis: true,
+    fixed: 'left'
+  },
+  {
+    title: '类型',
+    dataIndex: 'type',
+    key: 'type',
+    align: 'center',
+    width: 100,
+    customRender: ({text}) => {
+      const typeMap: Record<number, string> = {
+        10: '满减券',
+        20: '折扣券',
+        30: '免费券'
+      };
+      return typeMap[text] || text;
     }
-    return pageShopCoupon({
-      ...where,
-      ...orders,
-      page,
-      limit
+  },
+  {
+    title: '优惠金额',
+    key: 'couponValue',
+    align: 'center',
+    width: 120,
+    customRender: ({record}) => {
+      if (record.type === 10) {
+        return `减${record.reducePrice}元`;
+      } else if (record.type === 20) {
+        return `${record.discount}折`;
+      }
+      return '免费';
+    }
+  },
+  {
+    title: '最低消费',
+    dataIndex: 'minPrice',
+    key: 'minPrice',
+    align: 'center',
+    width: 100,
+    customRender: ({text}) => text ? `满${text}元` : '无门槛'
+  },
+  {
+    title: '有效期',
+    key: 'validity',
+    align: 'center',
+    width: 180,
+    customRender: ({record}) => {
+      if (record.expireType === 10) {
+        return `领取后${record.expireDay}天`;
+      } else {
+        return `${toDateString(record.startTime, 'MM-dd')} 至 ${toDateString(record.endTime, 'MM-dd')}`;
+      }
+    }
+  },
+  {
+    title: '适用范围',
+    dataIndex: 'applyRange',
+    key: 'applyRange',
+    align: 'center',
+    width: 100,
+    customRender: ({text}) => {
+      const rangeMap: Record<number, string> = {
+        10: '全部商品',
+        20: '指定商品',
+        30: '指定分类'
+      };
+      return rangeMap[text] || text;
+    }
+  },
+  {
+    title: '发放情况',
+    key: 'issueInfo',
+    align: 'center',
+    width: 120,
+    customRender: ({record}) => {
+      const total = record.totalCount === -1 ? '无限' : record.totalCount;
+      return `${record.issuedCount}/${total}`;
+    }
+  },
+  {
+    title: '限领数量',
+    dataIndex: 'limitPerUser',
+    key: 'limitPerUser',
+    align: 'center',
+    width: 100,
+    customRender: ({text}) => text === -1 ? '无限制' : `${text}张/人`
+  },
+  {
+    title: '状态',
+    key: 'couponStatus',
+    align: 'center',
+    width: 100
+  },
+  {
+    title: '排序',
+    dataIndex: 'sortNumber',
+    key: 'sortNumber',
+    align: 'center',
+    width: 80,
+    sorter: true
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    key: 'createTime',
+    align: 'center',
+    width: 120,
+    sorter: true,
+    ellipsis: true,
+    customRender: ({text}) => toDateString(text, 'yyyy-MM-dd')
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 150,
+    fixed: 'right',
+    align: 'center',
+    hideInSetting: true
+  }
+]);
+
+/* 搜索 */
+const reload = (where?: ShopCouponParam) => {
+  selection.value = [];
+  tableRef?.value?.reload({where: where});
+};
+
+/* 打开编辑弹窗 */
+const openEdit = (row?: ShopCoupon) => {
+  current.value = row ?? null;
+  showEdit.value = true;
+};
+
+/* 打开批量移动弹窗 */
+const openMove = () => {
+  showMove.value = true;
+};
+
+/* 删除单个 */
+const remove = (row: ShopCoupon) => {
+  const hide = message.loading('请求中..', 0);
+  removeShopCoupon(row.id)
+    .then((msg) => {
+      hide();
+      message.success(msg);
+      reload();
+    })
+    .catch((e) => {
+      hide();
+      message.error(e.message);
     });
-  };
+};
 
-  // 表格列配置
-  const columns = ref<ColumnItem[]>([
-    {
-      title: 'ID',
-      dataIndex: 'id',
-      key: 'id',
-      align: 'center',
-      width: 80,
-      fixed: 'left'
-    },
-    {
-      title: '优惠券名称',
-      dataIndex: 'name',
-      key: 'name',
-      align: 'left',
-      width: 150,
-      ellipsis: true,
-      fixed: 'left'
-    },
-    {
-      title: '类型',
-      dataIndex: 'type',
-      key: 'type',
-      align: 'center',
-      width: 100,
-      customRender: ({ text }) => {
-        const typeMap: Record<number, string> = {
-          10: '满减券',
-          20: '折扣券',
-          30: '免费券'
-        };
-        return typeMap[text] || text;
-      }
-    },
-    {
-      title: '优惠金额',
-      key: 'couponValue',
-      align: 'center',
-      width: 120,
-      customRender: ({ record }) => {
-        if (record.type === 10) {
-          return `减${record.reducePrice}元`;
-        } else if (record.type === 20) {
-          return `${record.discount}折`;
-        }
-        return '免费';
-      }
-    },
-    {
-      title: '最低消费',
-      dataIndex: 'minPrice',
-      key: 'minPrice',
-      align: 'center',
-      width: 100,
-      customRender: ({ text }) => text ? `满${text}元` : '无门槛'
-    },
-    {
-      title: '有效期',
-      key: 'validity',
-      align: 'center',
-      width: 180,
-      customRender: ({ record }) => {
-        if (record.expireType === 10) {
-          return `领取后${record.expireDay}天`;
-        } else {
-          return `${toDateString(record.startTime, 'MM-dd')} 至 ${toDateString(record.endTime, 'MM-dd')}`;
-        }
-      }
-    },
-    {
-      title: '适用范围',
-      dataIndex: 'applyRange',
-      key: 'applyRange',
-      align: 'center',
-      width: 100,
-      customRender: ({ text }) => {
-        const rangeMap: Record<number, string> = {
-          10: '全部商品',
-          20: '指定商品',
-          30: '指定分类'
-        };
-        return rangeMap[text] || text;
-      }
-    },
-    {
-      title: '发放情况',
-      key: 'issueInfo',
-      align: 'center',
-      width: 120,
-      customRender: ({ record }) => {
-        const total = record.totalCount === -1 ? '无限' : record.totalCount;
-        return `${record.issuedCount}/${total}`;
-      }
-    },
-    {
-      title: '限领数量',
-      dataIndex: 'limitPerUser',
-      key: 'limitPerUser',
-      align: 'center',
-      width: 100,
-      customRender: ({ text }) => text === -1 ? '无限制' : `${text}张/人`
-    },
-    {
-      title: '状态',
-      key: 'couponStatus',
-      align: 'center',
-      width: 100
-    },
-    {
-      title: '排序',
-      dataIndex: 'sortNumber',
-      key: 'sortNumber',
-      align: 'center',
-      width: 80,
-      sorter: true
-    },
-    {
-      title: '创建时间',
-      dataIndex: 'createTime',
-      key: 'createTime',
-      align: 'center',
-      width: 120,
-      sorter: true,
-      ellipsis: true,
-      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
-    },
-    {
-      title: '操作',
-      key: 'action',
-      width: 150,
-      fixed: 'right',
-      align: 'center',
-      hideInSetting: true
+/* 批量删除 */
+const removeBatch = () => {
+  if (!selection.value.length) {
+    message.error('请至少选择一条数据');
+    return;
+  }
+  Modal.confirm({
+    title: '提示',
+    content: '确定要删除选中的记录吗?',
+    icon: createVNode(ExclamationCircleOutlined),
+    maskClosable: true,
+    onOk: () => {
+      const hide = message.loading('请求中..', 0);
+      removeBatchShopCoupon(selection.value.map((d) => d.id))
+        .then((msg) => {
+          hide();
+          message.success(msg);
+          reload();
+        })
+        .catch((e) => {
+          hide();
+          message.error(e.message);
+        });
     }
-  ]);
+  });
+};
 
-  /* 搜索 */
-  const reload = (where?: ShopCouponParam) => {
-    selection.value = [];
-    tableRef?.value?.reload({ where: where });
-  };
+/* 查询 */
+const query = () => {
+  loading.value = true;
+};
 
-  /* 打开编辑弹窗 */
-  const openEdit = (row?: ShopCoupon) => {
-    current.value = row ?? null;
-    showEdit.value = true;
-  };
-
-  /* 打开批量移动弹窗 */
-  const openMove = () => {
-    showMove.value = true;
-  };
-
-  /* 删除单个 */
-  const remove = (row: ShopCoupon) => {
-    const hide = message.loading('请求中..', 0);
-    removeShopCoupon(row.id)
-      .then((msg) => {
-        hide();
-        message.success(msg);
-        reload();
-      })
-      .catch((e) => {
-        hide();
-        message.error(e.message);
-      });
-  };
-
-  /* 批量删除 */
-  const removeBatch = () => {
-    if (!selection.value.length) {
-      message.error('请至少选择一条数据');
-      return;
+/* 自定义行属性 */
+const customRow = (record: ShopCoupon) => {
+  return {
+    // 行点击事件
+    onClick: () => {
+      // console.log(record);
+    },
+    // 行双击事件
+    onDblclick: () => {
+      openEdit(record);
     }
-    Modal.confirm({
-      title: '提示',
-      content: '确定要删除选中的记录吗?',
-      icon: createVNode(ExclamationCircleOutlined),
-      maskClosable: true,
-      onOk: () => {
-        const hide = message.loading('请求中..', 0);
-        removeBatchShopCoupon(selection.value.map((d) => d.id))
-          .then((msg) => {
-            hide();
-            message.success(msg);
-            reload();
-          })
-          .catch((e) => {
-            hide();
-            message.error(e.message);
-          });
-      }
-    });
   };
-
-  /* 查询 */
-  const query = () => {
-    loading.value = true;
-  };
-
-  /* 自定义行属性 */
-  const customRow = (record: ShopCoupon) => {
-    return {
-      // 行点击事件
-      onClick: () => {
-        // console.log(record);
-      },
-      // 行双击事件
-      onDblclick: () => {
-        openEdit(record);
-      }
-    };
-  };
-  query();
+};
+query();
 </script>
 
 <script lang="ts">
-  export default {
-    name: 'ShopCoupon'
-  };
+export default {
+  name: 'ShopCoupon'
+};
 </script>
 
 <style lang="less" scoped>