refactor(shopCoupon): 重构优惠券页面

- 优化表格展示，增加状态标签和操作按钮
- 重新设计编辑弹窗，分为多个步骤展示
- 添加数据验证和错误提示
-优化删除操作提示信息
-调整表格样式，增加分页功能

src/api/shop/shopCoupon/index.ts

@@ -41,7 +41,12 @@ export async function listShopCoupon(params?: ShopCouponParam) {
 export async function addShopCoupon(data: ShopCoupon) {
   const res = await request.post<ApiResult<unknown>>(
     MODULES_API_URL + '/shop/shop-coupon',
-    data
+    data,
+    {
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    }
   );
   if (res.data.code === 0) {
     return res.data.message;
@@ -55,7 +60,12 @@ export async function addShopCoupon(data: ShopCoupon) {
 export async function updateShopCoupon(data: ShopCoupon) {
   const res = await request.put<ApiResult<unknown>>(
     MODULES_API_URL + '/shop/shop-coupon',
-    data
+    data,
+    {
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    }
   );
   if (res.data.code === 0) {
     return res.data.message;

src/api/shop/shopCoupon/model/index.ts

@@ -53,7 +53,7 @@ export interface ShopCoupon {
   // 每人限领数量(-1表示无限制)
   limitPerUser?: number;
   // 是否启用(0禁用 1启用)
-  enabled?: string;
+  enabled?: boolean;
 }
 
 /**

src/views/shop/shopAdmin/index.vue

@@ -18,6 +18,7 @@
         row-key="userId"
         :columns="columns"
         :datasource="datasource"
+        class="sys-org-table"
         :scroll="{ x: 1300 }"
         :where="defaultWhere"
         :customRow="customRow"
@@ -386,7 +387,7 @@ const resetPsw = (row: User) => {
 
 /* 修改用户状态 */
 const updateIsAdmin = (row: User) => {
-  row.isAdmin = row.isAdmin ? 0 : 1;
+  row.isAdmin = !row.isAdmin;
   updateUser(row)
     .then((msg) => {
       message.success(msg);
@@ -432,15 +433,48 @@ export default {
 };
 </script>
 
-<style lang="less" scoped>
-.user-box {
-  display: flex;
-  align-items: center;
 
-  .user-info {
+<style lang="less" scoped>
-    display: flex;
+.sys-org-table {
-    flex-direction: column;
+  :deep(.ant-table) {
-    align-items: start;
+    .ant-table-thead > tr > th {
+      background: #fafafa;
+      font-weight: 600;
+      color: #262626;
+      border-bottom: 2px solid #f0f0f0;
+    }
+
+    .ant-table-tbody > tr > td {
+      padding: 12px 8px;
+      border-bottom: 1px solid #f5f5f5;
+    }
+
+    .ant-table-tbody > tr:hover > td {
+      background: #f8f9ff;
+    }
+
+    .ant-tag {
+      margin: 0;
+      border-radius: 4px;
+      font-size: 12px;
+      padding: 2px 8px;
+    }
+  }
+}
+
+.ele-text-primary {
+  color: #1890ff;
+
+  &:hover {
+    color: #40a9ff;
+  }
+}
+
+.ele-text-danger {
+  color: #ff4d4f;
+
+  &:hover {
+    color: #ff7875;
   }
 }
 </style>

src/views/shop/shopCoupon/components/shopCouponEdit.vue

@@ -1,12 +1,12 @@
 <!-- 编辑弹窗 -->
 <template>
   <ele-modal
-    :width="800"
+    :width="700"
     :visible="visible"
     :maskClosable="false"
     :maxable="maxable"
     :title="isUpdate ? '编辑优惠券' : '添加优惠券'"
-    :body-style="{ paddingBottom: '28px' }"
+    :body-style="{ paddingBottom: '28px', maxHeight: '70vh', overflowY: 'auto' }"
     @update:visible="updateVisible"
     @ok="save"
   >
@@ -19,273 +19,438 @@
         styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
       "
     >
-      <a-form-item label="优惠券名称" name="name">
+      <!-- 基本信息 -->
+      <a-divider orientation="left">基本信息</a-divider>
+
+      <a-form-item
+        label="优惠券名称"
+        name="name"
+      >
         <a-input
           allow-clear
           placeholder="请输入优惠券名称"
           v-model:value="form.name"
         />
       </a-form-item>
+      <a-form-item
+        label="优惠券类型"
+        name="type"
+      >
+        <a-select
+          placeholder="请选择优惠券类型"
+          v-model:value="form.type"
+          @change="onTypeChange"
+        >
+          <a-select-option :value="10">满减券</a-select-option>
+          <a-select-option :value="20">折扣券</a-select-option>
+          <a-select-option :value="30">免费券</a-select-option>
+        </a-select>
+      </a-form-item>
+
       <a-form-item label="优惠券描述" name="description">
-        <a-input
+        <a-textarea
-          allow-clear
+          :rows="3"
           placeholder="请输入优惠券描述"
           v-model:value="form.description"
         />
       </a-form-item>
-      <a-form-item label="优惠券类型(10满减券 20折扣券 30免费劵)" name="type">
+
-        <a-input
+      <!-- 优惠设置 -->
-          allow-clear
+      <a-divider orientation="left">优惠设置</a-divider>
-          placeholder="请输入优惠券类型(10满减券 20折扣券 30免费劵)"
+
-          v-model:value="form.type"
+      <a-form-item
-        />
+        v-if="form.type === 10"
-      </a-form-item>
+        label="减免金额"
-      <a-form-item label="满减券-减免金额" name="reducePrice">
+        name="reducePrice"
-        <a-input
+      >
-          allow-clear
+        <a-input-number
-          placeholder="请输入满减券-减免金额"
+          :min="0"
+          :precision="2"
+          placeholder="请输入减免金额"
           v-model:value="form.reducePrice"
-        />
+          style="width: 100%"
+        >
+          <template #addonAfter>元</template>
+        </a-input-number>
       </a-form-item>
-      <a-form-item label="折扣券-折扣率(0-100)" name="discount">
+
-        <a-input
+      <a-form-item
-          allow-clear
+        v-if="form.type === 20"
-          placeholder="请输入折扣券-折扣率(0-100)"
+        label="折扣率"
+        name="discount"
+      >
+        <a-input-number
+          :min="1"
+          :max="99"
+          :precision="1"
+          placeholder="请输入折扣率"
           v-model:value="form.discount"
-        />
+          style="width: 100%"
+        >
+          <template #addonAfter>折</template>
+        </a-input-number>
       </a-form-item>
-      <a-form-item label="最低消费金额" name="minPrice">
+
-        <a-input
+      <a-form-item
-          allow-clear
+        label="最低消费金额"
-          placeholder="请输入最低消费金额"
+        name="minPrice"
+      >
+        <a-input-number
+          :min="0"
+          :precision="2"
+          placeholder="0表示无门槛"
           v-model:value="form.minPrice"
-        />
+          style="width: 100%"
+        >
+          <template #addonAfter>元</template>
+        </a-input-number>
       </a-form-item>
-      <a-form-item label="到期类型(10领取后生效 20固定时间)" name="expireType">
+
-        <a-input
+      <!-- 有效期设置 -->
-          allow-clear
+      <a-divider orientation="left">有效期设置</a-divider>
-          placeholder="请输入到期类型(10领取后生效 20固定时间)"
+
-          v-model:value="form.expireType"
+      <a-form-item label="到期类型" name="expireType">
-        />
+        <a-radio-group v-model:value="form.expireType" @change="onExpireTypeChange">
+          <a-radio :value="10">领取后生效</a-radio>
+          <a-radio :value="20">固定时间</a-radio>
+        </a-radio-group>
       </a-form-item>
-      <a-form-item label="领取后生效-有效天数" name="expireDay">
+
-        <a-input
+      <div :gutter="16" v-if="form.expireType === 10">
-          allow-clear
+        <a-form-item
-          placeholder="请输入领取后生效-有效天数"
+          label="有效天数"
+          name="expireDay"
+        >
+          <a-input-number
+            :min="1"
+            placeholder="请输入有效天数"
             v-model:value="form.expireDay"
-        />
+            style="width: 100%"
+          >
+            <template #addonAfter>天</template>
+          </a-input-number>
         </a-form-item>
-      <a-form-item label="有效期开始时间" name="startTime">
+      </div>
-        <a-input
+
-          allow-clear
+      <div :gutter="16" v-if="form.expireType === 20">
-          placeholder="请输入有效期开始时间"
+        <a-form-item
+          label="开始时间"
+          name="startTime"
+        >
+          <a-date-picker
+            placeholder="请选择开始时间"
             v-model:value="form.startTime"
+            style="width: 100%"
+            format="YYYY-MM-DD"
+            valueFormat="YYYY-MM-DD"
           />
         </a-form-item>
-      <a-form-item label="有效期结束时间" name="endTime">
+        <a-form-item
-        <a-input
+          label="结束时间"
-          allow-clear
+          name="endTime"
-          placeholder="请输入有效期结束时间"
+        >
+          <a-date-picker
+            placeholder="请选择结束时间"
             v-model:value="form.endTime"
+            style="width: 100%"
+            format="YYYY-MM-DD"
+            valueFormat="YYYY-MM-DD"
           />
         </a-form-item>
-      <a-form-item label="适用范围(10全部商品 20指定商品 30指定分类)" name="applyRange">
+      </div>
-        <a-input
+      <!-- 适用范围 -->
-          allow-clear
+      <a-divider orientation="left">适用范围</a-divider>
-          placeholder="请输入适用范围(10全部商品 20指定商品 30指定分类)"
+
+      <a-form-item label="适用范围" name="applyRange">
+        <a-select
+          placeholder="请选择适用范围"
           v-model:value="form.applyRange"
-        />
+        >
+          <a-select-option :value="10">全部商品</a-select-option>
+          <a-select-option :value="20">指定商品</a-select-option>
+          <a-select-option :value="30">指定分类</a-select-option>
+        </a-select>
       </a-form-item>
-      <a-form-item label="适用范围配置(json格式)" name="applyRangeConfig">
+
-        <a-input
+      <a-form-item
-          allow-clear
+        v-if="form.applyRange === 20 || form.applyRange === 30"
-          placeholder="请输入适用范围配置(json格式)"
+        label="范围配置"
+        name="applyRangeConfig"
+      >
+        <a-textarea
+          :rows="3"
+          placeholder="请输入JSON格式的配置，如：[1,2,3]"
           v-model:value="form.applyRangeConfig"
         />
       </a-form-item>
-      <a-form-item label="是否过期(0未过期 1已过期)" name="isExpire">
+
-        <a-input
+      <!-- 发放设置 -->
-          allow-clear
+      <a-divider orientation="left">发放设置</a-divider>
-          placeholder="请输入是否过期(0未过期 1已过期)"
+
-          v-model:value="form.isExpire"
+      <a-form-item
-        />
+        label="发放总数量"
+        name="totalCount"
+      >
+        <a-input-number
+          :min="-1"
+          placeholder="-1表示无限制"
+          v-model:value="form.totalCount"
+          style="width: 100%"
+        >
+          <template #addonAfter>张</template>
+        </a-input-number>
       </a-form-item>
-      <a-form-item label="排序(数字越小越靠前)" name="sortNumber">
+      <a-form-item
+        label="每人限领"
+        name="limitPerUser"
+      >
+        <a-input-number
+          :min="-1"
+          placeholder="-1表示无限制"
+          v-model:value="form.limitPerUser"
+          style="width: 100%"
+        >
+          <template #addonAfter>张</template>
+        </a-input-number>
+      </a-form-item>
+
+      <a-form-item
+        label="排序"
+        name="sortNumber"
+      >
         <a-input-number
           :min="0"
           :max="9999"
-          class="ele-fluid"
+          placeholder="数字越小越靠前"
-          placeholder="请输入排序号"
           v-model:value="form.sortNumber"
+          style="width: 100%"
         />
       </a-form-item>
-      <a-form-item label="状态, 0正常, 1禁用" name="status">
+
+      <!-- 状态设置 -->
+      <a-divider orientation="left">状态设置</a-divider>
+
+      <a-form-item
+        label="显示状态"
+        name="status"
+      >
         <a-radio-group v-model:value="form.status">
           <a-radio :value="0">显示</a-radio>
           <a-radio :value="1">隐藏</a-radio>
         </a-radio-group>
       </a-form-item>
-      <a-form-item label="是否删除, 0否, 1是" name="deleted">
+      <a-form-item
-        <a-input
+        label="启用状态"
-          allow-clear
+        name="enabled"
-          placeholder="请输入是否删除, 0否, 1是"
+      >
-          v-model:value="form.deleted"
+        <a-radio-group v-model:value="form.enabled">
-        />
+          <a-radio :value="true">启用</a-radio>
-      </a-form-item>
+          <a-radio :value="false">禁用</a-radio>
-      <a-form-item label="创建用户ID" name="userId">
+        </a-radio-group>
-        <a-input
-          allow-clear
-          placeholder="请输入创建用户ID"
-          v-model:value="form.userId"
-        />
-      </a-form-item>
-      <a-form-item label="修改时间" name="updateTime">
-        <a-input
-          allow-clear
-          placeholder="请输入修改时间"
-          v-model:value="form.updateTime"
-        />
-      </a-form-item>
-      <a-form-item label="发放总数量(-1表示无限制)" name="totalCount">
-        <a-input
-          allow-clear
-          placeholder="请输入发放总数量(-1表示无限制)"
-          v-model:value="form.totalCount"
-        />
-      </a-form-item>
-      <a-form-item label="已发放数量" name="issuedCount">
-        <a-input
-          allow-clear
-          placeholder="请输入已发放数量"
-          v-model:value="form.issuedCount"
-        />
-      </a-form-item>
-      <a-form-item label="每人限领数量(-1表示无限制)" name="limitPerUser">
-        <a-input
-          allow-clear
-          placeholder="请输入每人限领数量(-1表示无限制)"
-          v-model:value="form.limitPerUser"
-        />
-      </a-form-item>
-      <a-form-item label="是否启用(0禁用 1启用)" name="enabled">
-        <a-input
-          allow-clear
-          placeholder="请输入是否启用(0禁用 1启用)"
-          v-model:value="form.enabled"
-        />
       </a-form-item>
     </a-form>
   </ele-modal>
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, watch } from 'vue';
+import {ref, reactive, watch} from 'vue';
-  import { Form, message } from 'ant-design-vue';
+import {Form, message} from 'ant-design-vue';
-  import { assignObject, uuid } from 'ele-admin-pro';
+import {assignObject} from 'ele-admin-pro';
-  import { addShopCoupon, updateShopCoupon } from '@/api/shop/shopCoupon';
+import {addShopCoupon, updateShopCoupon} from '@/api/shop/shopCoupon';
-  import { ShopCoupon } from '@/api/shop/shopCoupon/model';
+import {ShopCoupon} from '@/api/shop/shopCoupon/model';
-  import { useThemeStore } from '@/store/modules/theme';
+import {useThemeStore} from '@/store/modules/theme';
-  import { storeToRefs } from 'pinia';
+import {storeToRefs} from 'pinia';
-  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+import {ItemType} from 'ele-admin-pro/es/ele-image-upload/types';
-  import { FormInstance } from 'ant-design-vue/es/form';
+import {FormInstance} from 'ant-design-vue/es/form';
-  import { FileRecord } from '@/api/system/file/model';
 
-  // 是否是修改
+// 是否是修改
-  const isUpdate = ref(false);
+const isUpdate = ref(false);
-  const useForm = Form.useForm;
+const useForm = Form.useForm;
-  // 是否开启响应式布局
+// 是否开启响应式布局
-  const themeStore = useThemeStore();
+const themeStore = useThemeStore();
-  const { styleResponsive } = storeToRefs(themeStore);
+const {styleResponsive} = storeToRefs(themeStore);
-
+const props = defineProps<{
-  const props = defineProps<{
   // 弹窗是否打开
   visible: boolean;
   // 修改回显的数据
   data?: ShopCoupon | null;
-  }>();
+}>();
 
-  const emit = defineEmits<{
+const emit = defineEmits<{
   (e: 'done'): void;
   (e: 'update:visible', visible: boolean): void;
-  }>();
+}>();
 
-  // 提交状态
+// 提交状态
-  const loading = ref(false);
+const loading = ref(false);
-  // 是否显示最大化切换按钮
+// 是否显示最大化切换按钮
-  const maxable = ref(true);
+const maxable = ref(true);
-  // 表格选中数据
+// 表格选中数据
-  const formRef = ref<FormInstance | null>(null);
+const formRef = ref<FormInstance | null>(null);
-  const images = ref<ItemType[]>([]);
+const images = ref<ItemType[]>([]);
 
-  // 用户信息
+// 表单数据
-  const form = reactive<ShopCoupon>({
+const form = reactive<ShopCoupon>({
   id: undefined,
-    name: undefined,
+  name: '',
-    description: undefined,
+  description: '',
-    type: undefined,
+  type: 10, // 默认满减券
   reducePrice: undefined,
   discount: undefined,
-    minPrice: undefined,
+  minPrice: '', // 默认无门槛
-    expireType: undefined,
+  expireType: 10, // 默认领取后生效
-    expireDay: undefined,
+  expireDay: 30, // 默认30天
   startTime: undefined,
   endTime: undefined,
-    applyRange: undefined,
+  applyRange: 10, // 默认全部商品
-    applyRangeConfig: undefined,
+  applyRangeConfig: '',
-    isExpire: undefined,
+  isExpire: 0,
-    sortNumber: undefined,
+  sortNumber: 100,
-    status: undefined,
+  status: 0, // 默认显示
-    deleted: undefined,
+  deleted: 0,
   userId: undefined,
   tenantId: undefined,
   createTime: undefined,
   updateTime: undefined,
-    totalCount: undefined,
+  totalCount: -1, // 默认无限制
-    issuedCount: undefined,
+  issuedCount: 0,
-    limitPerUser: undefined,
+  limitPerUser: -1, // 默认无限制
-    enabled: undefined,
+  enabled: true, // 默认启用
-    shopCouponId: undefined,
+});
-    shopCouponName: '',
-    status: 0,
-    comments: '',
-    sortNumber: 100
-  });
 
-  /* 更新visible */
+/* 更新visible */
-  const updateVisible = (value: boolean) => {
+const updateVisible = (value: boolean) => {
   emit('update:visible', value);
-  };
+};
 
-  // 表单验证规则
+// 表单验证规则
-  const rules = reactive({
+const rules = reactive({
-    shopCouponName: [
+  name: [
     {
       required: true,
-        type: 'string',
+      message: '请输入优惠券名称',
-        message: '请填写优惠券名称',
       trigger: 'blur'
     }
+  ],
+  type: [
+    {
+      required: true,
+      message: '请选择优惠券类型',
+      trigger: 'change'
+    }
+  ],
+  reducePrice: [
+    {
+      required: true,
+      message: '请输入减免金额',
+      trigger: 'blur',
+      validator: (rule: any, value: any) => {
+        if (form.type === 10 && (!value || value <= 0)) {
+          return Promise.reject('减免金额必须大于0');
+        }
+        return Promise.resolve();
+      }
+    }
+  ],
+  discount: [
+    {
+      required: true,
+      message: '请输入折扣率',
+      trigger: 'blur',
+      validator: (rule: any, value: any) => {
+        if (form.type === 20 && (!value || value <= 0 || value >= 100)) {
+          return Promise.reject('折扣率必须在1-99之间');
+        }
+        return Promise.resolve();
+      }
+    }
+  ],
+  expireType: [
+    {
+      required: true,
+      message: '请选择到期类型',
+      trigger: 'change'
+    }
+  ],
+  expireDay: [
+    {
+      required: true,
+      message: '请输入有效天数',
+      trigger: 'blur',
+      validator: (rule: any, value: any) => {
+        if (form.expireType === 10 && (!value || value <= 0)) {
+          return Promise.reject('有效天数必须大于0');
+        }
+        return Promise.resolve();
+      }
+    }
+  ],
+  startTime: [
+    {
+      required: true,
+      message: '请选择开始时间',
+      trigger: 'change',
+      validator: (rule: any, value: any) => {
+        if (form.expireType === 20 && !value) {
+          return Promise.reject('请选择开始时间');
+        }
+        return Promise.resolve();
+      }
+    }
+  ],
+  endTime: [
+    {
+      required: true,
+      message: '请选择结束时间',
+      trigger: 'change',
+      validator: (rule: any, value: any) => {
+        if (form.expireType === 20 && !value) {
+          return Promise.reject('请选择结束时间');
+        }
+        if (form.expireType === 20 && form.startTime && value && value <= form.startTime) {
+          return Promise.reject('结束时间必须晚于开始时间');
+        }
+        return Promise.resolve();
+      }
+    }
+  ],
+  applyRange: [
+    {
+      required: true,
+      message: '请选择适用范围',
+      trigger: 'change'
+    }
   ]
-  });
+});
 
-  const chooseImage = (data: FileRecord) => {
+const {resetFields} = useForm(form, rules);
-    images.value.push({
-      uid: data.id,
-      url: data.path,
-      status: 'done'
-    });
-    form.image = data.path;
-  };
 
-  const onDeleteItem = (index: number) => {
+/* 优惠券类型变化处理 */
-    images.value.splice(index, 1);
+const onTypeChange = (value: number) => {
-    form.image = '';
+  // 清空相关字段
-  };
+  if (value !== 10) {
+    form.reducePrice = undefined;
+  }
+  if (value !== 20) {
+    form.discount = undefined;
+  }
+};
 
-  const { resetFields } = useForm(form, rules);
+/* 到期类型变化处理 */
+const onExpireTypeChange = (e: any) => {
+  const value = e.target.value;
+  // 清空相关字段
+  if (value !== 10) {
+    form.expireDay = undefined;
+  }
+  if (value !== 20) {
+    form.startTime = undefined;
+    form.endTime = undefined;
+  }
+};
 
-  /* 保存编辑 */
+/* 保存编辑 */
-  const save = () => {
+const save = () => {
   if (!formRef.value) {
     return;
   }
@@ -293,9 +458,42 @@
     .validate()
     .then(() => {
       loading.value = true;
+
+      // 清理和准备提交数据
       const formData = {
         ...form
       };
+
+      // 清理不需要的字段
+      delete formData.shopCouponId;
+      delete formData.shopCouponName;
+      delete formData.comments;
+
+      // 确保数值类型正确
+      if (formData.type) formData.type = Number(formData.type);
+      if (formData.expireType) formData.expireType = Number(formData.expireType);
+      if (formData.applyRange) formData.applyRange = Number(formData.applyRange);
+      if (formData.status !== undefined) formData.status = Number(formData.status);
+      if (formData.enabled !== undefined) formData.enabled = Number(formData.enabled);
+      if (formData.deleted !== undefined) formData.deleted = Number(formData.deleted);
+      if (formData.isExpire !== undefined) formData.isExpire = Number(formData.isExpire);
+      if (formData.sortNumber !== undefined) formData.sortNumber = Number(formData.sortNumber);
+      if (formData.totalCount !== undefined) formData.totalCount = Number(formData.totalCount);
+      if (formData.limitPerUser !== undefined) formData.limitPerUser = Number(formData.limitPerUser);
+      if (formData.expireDay !== undefined) formData.expireDay = Number(formData.expireDay);
+      if (formData.reducePrice !== undefined) formData.reducePrice = Number(formData.reducePrice);
+      if (formData.discount !== undefined) formData.discount = Number(formData.discount);
+      if (formData.minPrice !== undefined) formData.minPrice = Number(formData.minPrice);
+
+      // 清理空值
+      Object.keys(formData).forEach(key => {
+        if (formData[key] === undefined || formData[key] === null || formData[key] === '') {
+          delete formData[key];
+        }
+      });
+
+      console.log('提交的数据:', formData);
+
       const saveOrUpdate = isUpdate.value ? updateShopCoupon : addShopCoupon;
       saveOrUpdate(formData)
         .then((msg) => {
@@ -306,26 +504,21 @@
         })
         .catch((e) => {
           loading.value = false;
+          console.error('保存失败:', e);
           message.error(e.message);
         });
     })
-      .catch(() => {});
+    .catch(() => {
-  };
+    });
+};
 
-  watch(
+watch(
   () => props.visible,
   (visible) => {
     if (visible) {
       images.value = [];
       if (props.data) {
         assignObject(form, props.data);
-          if(props.data.image){
-            images.value.push({
-              uid: uuid(),
-              url: props.data.image,
-              status: 'done'
-            })
-          }
         isUpdate.value = true;
       } else {
         isUpdate.value = false;
@@ -334,6 +527,6 @@
       resetFields();
     }
   },
-    { immediate: true }
+  {immediate: true}
-  );
+);
 </script>

src/views/shop/shopCoupon/index.vue

@@ -3,12 +3,19 @@
       <a-card :bordered="false" :body-style="{ padding: '16px' }">
         <ele-pro-table
           ref="tableRef"
-          row-key="shopCouponId"
+          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
@@ -20,22 +27,27 @@
             />
           </template>
           <template #bodyCell="{ column, record }">
-            <template v-if="column.key === 'image'">
+            <template v-if="column.key === 'couponStatus'">
-              <a-image :src="record.image" :width="50" />
+              <a-tag v-if="record.deleted === 1" color="red">已删除</a-tag>
-            </template>
+              <a-tag v-else-if="record.enabled === 0" color="orange">已禁用</a-tag>
-            <template v-if="column.key === 'status'">
+              <a-tag v-else-if="record.isExpire === 1" color="gray">已过期</a-tag>
-              <a-tag v-if="record.status === 0" color="green">显示</a-tag>
+              <a-tag v-else-if="record.status === 1" color="red">隐藏</a-tag>
-              <a-tag v-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)">修改</a>
+                <a @click="openEdit(record)" class="ele-text-primary">
+                  <EditOutlined /> 编辑
+                </a>
                 <a-divider type="vertical" />
                 <a-popconfirm
-                  title="确定要删除此记录吗？"
+                  title="确定要删除此优惠券吗？"
                   @confirm="remove(record)"
+                  placement="topRight"
                 >
-                  <a class="ele-text-danger">删除</a>
+                  <a class="ele-text-danger">
+                    <DeleteOutlined /> 删除
+                  </a>
                 </a-popconfirm>
               </a-space>
             </template>
@@ -51,7 +63,7 @@
 <script lang="ts" setup>
   import { createVNode, ref } from 'vue';
   import { message, Modal } from 'ant-design-vue';
-  import { ExclamationCircleOutlined } from '@ant-design/icons-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 {
@@ -100,157 +112,133 @@
   // 表格列配置
   const columns = ref<ColumnItem[]>([
     {
-      title: 'id',
+      title: 'ID',
       dataIndex: 'id',
       key: 'id',
       align: 'center',
-      width: 90,
+      width: 80,
+      fixed: 'left'
     },
     {
       title: '优惠券名称',
       dataIndex: 'name',
       key: 'name',
-      align: 'center',
+      align: 'left',
+      width: 150,
+      ellipsis: true,
+      fixed: 'left'
     },
     {
-      title: '优惠券描述',
+      title: '类型',
-      dataIndex: 'description',
-      key: 'description',
-      align: 'center',
-    },
-    {
-      title: '优惠券类型(10满减券 20折扣券 30免费劵)',
       dataIndex: 'type',
       key: 'type',
       align: 'center',
+      width: 100,
+      customRender: ({ text }) => {
+        const typeMap: Record<number, string> = {
+          10: '满减券',
+          20: '折扣券',
+          30: '免费券'
+        };
+        return typeMap[text] || text;
+      }
     },
     {
-      title: '满减券-减免金额',
+      title: '优惠金额',
-      dataIndex: 'reducePrice',
+      key: 'couponValue',
-      key: 'reducePrice',
       align: 'center',
+      width: 120,
+      customRender: ({ record }) => {
+        if (record.type === 10) {
+          return `减${record.reducePrice}元`;
+        } else if (record.type === 20) {
+          return `${record.discount}折`;
+        }
+        return '免费';
+      }
     },
     {
-      title: '折扣券-折扣率(0-100)',
+      title: '最低消费',
-      dataIndex: 'discount',
-      key: 'discount',
-      align: 'center',
-    },
-    {
-      title: '最低消费金额',
       dataIndex: 'minPrice',
       key: 'minPrice',
       align: 'center',
+      width: 100,
+      customRender: ({ text }) => text ? `满${text}元` : '无门槛'
     },
     {
-      title: '到期类型(10领取后生效 20固定时间)',
+      title: '有效期',
-      dataIndex: 'expireType',
+      key: 'validity',
-      key: 'expireType',
       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: '领取后生效-有效天数',
+      title: '适用范围',
-      dataIndex: 'expireDay',
-      key: 'expireDay',
-      align: 'center',
-    },
-    {
-      title: '有效期开始时间',
-      dataIndex: 'startTime',
-      key: 'startTime',
-      align: 'center',
-    },
-    {
-      title: '有效期结束时间',
-      dataIndex: 'endTime',
-      key: 'endTime',
-      align: 'center',
-    },
-    {
-      title: '适用范围(10全部商品 20指定商品 30指定分类)',
       dataIndex: 'applyRange',
       key: 'applyRange',
       align: 'center',
+      width: 100,
+      customRender: ({ text }) => {
+        const rangeMap: Record<number, string> = {
+          10: '全部商品',
+          20: '指定商品',
+          30: '指定分类'
+        };
+        return rangeMap[text] || text;
+      }
     },
     {
-      title: '适用范围配置(json格式)',
+      title: '发放情况',
-      dataIndex: 'applyRangeConfig',
+      key: 'issueInfo',
-      key: 'applyRangeConfig',
       align: 'center',
+      width: 120,
+      customRender: ({ record }) => {
+        const total = record.totalCount === -1 ? '无限' : record.totalCount;
+        return `${record.issuedCount}/${total}`;
+      }
     },
     {
-      title: '是否过期(0未过期 1已过期)',
+      title: '限领数量',
-      dataIndex: 'isExpire',
+      dataIndex: 'limitPerUser',
-      key: 'isExpire',
+      key: 'limitPerUser',
       align: 'center',
+      width: 100,
+      customRender: ({ text }) => text === -1 ? '无限制' : `${text}张/人`
     },
     {
-      title: '排序(数字越小越靠前)',
+      title: '状态',
+      key: 'couponStatus',
+      align: 'center',
+      width: 100
+    },
+    {
+      title: '排序',
       dataIndex: 'sortNumber',
       key: 'sortNumber',
       align: 'center',
-    },
+      width: 80,
-    {
+      sorter: true
-      title: '状态, 0正常, 1禁用',
-      dataIndex: 'status',
-      key: 'status',
-      align: 'center',
-    },
-    {
-      title: '是否删除, 0否, 1是',
-      dataIndex: 'deleted',
-      key: 'deleted',
-      align: 'center',
-    },
-    {
-      title: '创建用户ID',
-      dataIndex: 'userId',
-      key: 'userId',
-      align: 'center',
     },
     {
       title: '创建时间',
       dataIndex: 'createTime',
       key: 'createTime',
       align: 'center',
+      width: 120,
       sorter: true,
       ellipsis: true,
       customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
     },
-    {
-      title: '修改时间',
-      dataIndex: 'updateTime',
-      key: 'updateTime',
-      align: 'center',
-    },
-    {
-      title: '发放总数量(-1表示无限制)',
-      dataIndex: 'totalCount',
-      key: 'totalCount',
-      align: 'center',
-    },
-    {
-      title: '已发放数量',
-      dataIndex: 'issuedCount',
-      key: 'issuedCount',
-      align: 'center',
-    },
-    {
-      title: '每人限领数量(-1表示无限制)',
-      dataIndex: 'limitPerUser',
-      key: 'limitPerUser',
-      align: 'center',
-    },
-    {
-      title: '是否启用(0禁用 1启用)',
-      dataIndex: 'enabled',
-      key: 'enabled',
-      align: 'center',
-    },
     {
       title: '操作',
       key: 'action',
-      width: 180,
+      width: 150,
       fixed: 'right',
       align: 'center',
       hideInSetting: true
@@ -277,7 +265,7 @@
   /* 删除单个 */
   const remove = (row: ShopCoupon) => {
     const hide = message.loading('请求中..', 0);
-    removeShopCoupon(row.shopCouponId)
+    removeShopCoupon(row.id)
       .then((msg) => {
         hide();
         message.success(msg);
@@ -302,7 +290,7 @@
       maskClosable: true,
       onOk: () => {
         const hide = message.loading('请求中..', 0);
-        removeBatchShopCoupon(selection.value.map((d) => d.shopCouponId))
+        removeBatchShopCoupon(selection.value.map((d) => d.id))
           .then((msg) => {
             hide();
             message.success(msg);
@@ -343,4 +331,47 @@
   };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.sys-org-table {
+  :deep(.ant-table) {
+    .ant-table-thead > tr > th {
+      background: #fafafa;
+      font-weight: 600;
+      color: #262626;
+      border-bottom: 2px solid #f0f0f0;
+    }
+
+    .ant-table-tbody > tr > td {
+      padding: 12px 8px;
+      border-bottom: 1px solid #f5f5f5;
+    }
+
+    .ant-table-tbody > tr:hover > td {
+      background: #f8f9ff;
+    }
+
+    .ant-tag {
+      margin: 0;
+      border-radius: 4px;
+      font-size: 12px;
+      padding: 2px 8px;
+    }
+  }
+}
+
+.ele-text-primary {
+  color: #1890ff;
+
+  &:hover {
+    color: #40a9ff;
+  }
+}
+
+.ele-text-danger {
+  color: #ff4d4f;
+
+  &:hover {
+    color: #ff7875;
+  }
+}
+</style>