Browse Source

feat(couponManagement): 实现操作按钮权限控制- 为上架、下架、修改库存、查看详情、编辑、删除按钮添加状态权限控制
- 定义状态枚举STATUS常量,包含草稿、待审核、未开始等8种状态
- 配置OPERATION_PERMISSIONS常量,定义各操作按钮的可显示状态- 新增canShowButton工具函数,判断按钮是否根据状态显示
-重构表格操作列模板,使用v-if条件渲染按钮
- 更新allTabOptions选项,调整状态标签显示逻辑

congxuesong 1 month ago
parent
commit
6998b2e32a

+ 88 - 24
src/views/couponManagement/index.vue

@@ -12,15 +12,54 @@
       </template>
       <!-- 表格操作 -->
       <template #operation="scope">
-        <!-- 审批通过和拒绝按钮仅在状态为0时显示 -->
-        <template v-if="scope.row.status === '0'">
-          <el-button link type="primary" @click="changeTypes(scope.row, 'on')"> 上架 </el-button>
-          <el-button link type="primary" @click="changeTypes(scope.row, 'off')"> 下架 </el-button>
-          <el-button link type="primary" @click="changeInventory(scope.row)"> 修改库存 </el-button>
-        </template>
-        <el-button type="primary" link @click="toDetail(scope.row)"> 查看详情 </el-button>
-        <el-button link type="primary" @click="editRow(scope.row)"> 编辑 </el-button>
-        <el-button link type="primary" @click="deleteRow(scope.row)"> 删除 </el-button>
+        <el-button
+          link
+          type="primary"
+          @click="changeTypes(scope.row, 'on')"
+          v-if="canShowButton(scope.row.status, OPERATION_PERMISSIONS.上架)"
+        >
+          上架
+        </el-button>
+        <el-button
+          link
+          type="primary"
+          @click="changeTypes(scope.row, 'off')"
+          v-if="canShowButton(scope.row.status, OPERATION_PERMISSIONS.下架)"
+        >
+          下架
+        </el-button>
+        <el-button
+          link
+          type="primary"
+          @click="changeInventory(scope.row)"
+          v-if="canShowButton(scope.row.status, OPERATION_PERMISSIONS.修改库存)"
+        >
+          修改库存
+        </el-button>
+        <el-button
+          type="primary"
+          link
+          @click="toDetail(scope.row)"
+          v-if="canShowButton(scope.row.status, OPERATION_PERMISSIONS.查看详情)"
+        >
+          查看详情
+        </el-button>
+        <el-button
+          link
+          type="primary"
+          @click="editRow(scope.row)"
+          v-if="canShowButton(scope.row.status, OPERATION_PERMISSIONS.编辑)"
+        >
+          编辑
+        </el-button>
+        <el-button
+          link
+          type="primary"
+          @click="deleteRow(scope.row)"
+          v-if="canShowButton(scope.row.status, OPERATION_PERMISSIONS.删除)"
+        >
+          删除
+        </el-button>
       </template>
     </ProTable>
     <el-dialog v-model="dialogFormVisible" title="修改库存" width="500">
@@ -78,12 +117,48 @@ const rules = reactive<FormRules<RuleForm>>({
     }
   ]
 });
-const statusEnum = [
-  { value: "-1", label: "待审核" },
-  { value: "-2", label: "审核通过" },
-  { value: "0", label: "审核驳回" }
+const allTabOptions = [
+  { label: "全部", name: "" },
+  { label: "草稿", name: "0" },
+  { label: "进行中", name: "5" },
+  { label: "未开始", name: "2" },
+  { label: "已下架", name: "6" },
+  { label: "已售罄", name: "4" },
+  { label: "已结束", name: "7" }
 ];
 
+// 状态枚举:0草稿 1待审核 2未开始 3审核拒绝 4已售罄 5进行中 6已下架 7已结束
+const STATUS = {
+  草稿: 0,
+  待审核: 1,
+  未开始: 2,
+  审核拒绝: 3,
+  已售罄: 4,
+  进行中: 5,
+  已下架: 6,
+  已结束: 7
+} as const;
+
+// 操作按钮权限配置:定义每个操作按钮在哪些状态下显示
+const OPERATION_PERMISSIONS = {
+  // 查看详情:待审核、未开始、审核拒绝、进行中、已售罄、已下架
+  查看详情: [STATUS.待审核, STATUS.未开始, STATUS.审核拒绝, STATUS.进行中, STATUS.已售罄, STATUS.已下架],
+  // 上架:未开始、已下架
+  上架: [STATUS.未开始, STATUS.已下架],
+  // 下架:进行中
+  下架: [STATUS.进行中],
+  // 修改库存:未开始、进行中、已售罄
+  修改库存: [STATUS.未开始, STATUS.进行中, STATUS.已售罄],
+  // 编辑:草稿、审核拒绝、已售罄、已下架、已结束
+  编辑: [STATUS.草稿, STATUS.审核拒绝, STATUS.已售罄, STATUS.已下架, STATUS.已结束],
+  // 删除:草稿、未开始、审核拒绝、已售罄、已结束
+  删除: [STATUS.草稿, STATUS.未开始, STATUS.审核拒绝, STATUS.已售罄, STATUS.已结束]
+} as const;
+
+// 判断按钮是否显示的工具函数
+const canShowButton = (status: number, allowedStatuses: readonly number[]) => {
+  return allowedStatuses.includes(status);
+};
 // ProTable 实例(需要在使用它的地方之前定义)
 const proTable = ref<ProTableInstance>();
 
@@ -123,17 +198,6 @@ const columns = reactive<ColumnProps<any>[]>([
   { prop: "operation", label: "操作", fixed: "right", width: 330 }
 ]);
 
-// 在 script setup 中添加
-const allTabOptions = [
-  { label: "全部", name: "" },
-  { label: "草稿", name: "0" },
-  { label: "进行中", name: "5" },
-  { label: "待审核", name: "1" },
-  { label: "审核拒绝", name: "3" },
-  { label: "已售罄", name: "4" },
-  { label: "已结束", name: "7" }
-];
-
 // 获取当前审核状态
 const currentAuditStatus = computed(() => {
   if (!proTable.value?.searchParam) return "";

+ 19 - 1
src/views/groupPackageManagement/newGroup.vue

@@ -1,6 +1,10 @@
 <template>
   <!-- 团购包管理 - 新增/编辑页面 -->
   <div class="table-box" style="width: 100%; min-height: 100%; background-color: white">
+    <div class="header">
+      <el-button @click="goBack"> 返回 </el-button>
+      <h2 class="title">新建团购</h2>
+    </div>
     <el-form :model="storeInfoModel" ref="ruleFormRef" :rules="rules" label-width="120px" class="formBox">
       <div class="content">
         <!-- 左侧内容区域 -->
@@ -383,7 +387,6 @@
     </el-form>
     <!-- 底部按钮区域 -->
     <div class="button-container">
-      <el-button @click="goBack"> 返回 </el-button>
       <el-button @click="handleSubmit('cg')"> 存草稿 </el-button>
       <el-button type="primary" @click="handleSubmit"> 确定 </el-button>
     </div>
@@ -1887,6 +1890,21 @@ const handleImageParam = (list: any[], result: any[]) => {
   min-height: 100%;
 }
 
+/* 头部区域 */
+.header {
+  display: flex;
+  align-items: center;
+  padding: 20px;
+  border-bottom: 1px solid #e4e7ed;
+}
+.title {
+  flex: 1;
+  margin: 0;
+  font-size: 18px;
+  font-weight: bold;
+  text-align: center;
+}
+
 /* 内容区域布局 */
 .content {
   display: flex;

+ 5 - 5
src/views/orderManagement/index.vue

@@ -5,7 +5,7 @@
       <template #tableHeader="scope">
         <div class="table-header-btn">
           <el-tabs v-model="activeName" class="tabs" @tab-click="handleClick">
-            <el-tab-pane v-for="tab in statusTabs" :key="tab.name" :label="tab.label" :name="tab.name" />
+            <el-tab-pane v-for="tab in allTabOptions" :key="tab.name" :label="tab.label" :name="tab.name" />
           </el-tabs>
         </div>
       </template>
@@ -45,7 +45,7 @@ const dishDialogVisible = ref(false);
 const dishList = ref<any[]>([]);
 
 // 状态标签选项
-const statusTabs = [
+const allTabOptions = [
   { label: "全部", name: "" },
   { label: "待使用", name: "1" },
   { label: "已完成", name: "2" },
@@ -53,7 +53,7 @@ const statusTabs = [
 ];
 
 // 商品类型选项
-const productTypeOptions = [
+const statusEnum = [
   { label: "团购", value: "1" },
   { label: "代金券", value: "2" },
   { label: "优惠券", value: "3" }
@@ -96,14 +96,14 @@ const columns = reactive<ColumnProps<any>[]>([
     prop: "productType",
     label: "商品类型",
     render: (scope: any) => {
-      const type = productTypeOptions.find(item => item.value === scope.row.productType);
+      const type = statusEnum.find(item => item.value === scope.row.productType);
       return type ? type.label : "--";
     },
     search: {
       el: "select",
       props: { placeholder: "请选择" }
     },
-    enum: productTypeOptions,
+    enum: statusEnum,
     fieldNames: { label: "label", value: "value" }
   },
   {

+ 83 - 12
src/views/voucherManagement/index.vue

@@ -16,15 +16,54 @@
       >:
       <!-- 表格操作 -->
       <template #operation="scope">
-        <!-- 审批通过和拒绝按钮仅在状态为0时显示 -->
-        <template v-if="scope.row.status === '0'">
-          <el-button link type="primary" @click="changeTypes(scope.row, 'on')"> 上架 </el-button>
-          <el-button link type="primary" @click="changeTypes(scope.row, 'off')"> 下架 </el-button>
-          <el-button link type="primary" @click="changeInventory(scope.row)"> 修改库存 </el-button>
-        </template>
-        <el-button type="primary" link @click="toDetail(scope.row)"> 查看详情 </el-button>
-        <el-button link type="primary" @click="editRow(scope.row)"> 编辑 </el-button>
-        <el-button link type="primary" @click="deleteRow(scope.row)"> 删除 </el-button>
+        <el-button
+          link
+          type="primary"
+          @click="changeTypes(scope.row, 'on')"
+          v-if="canShowButton(scope.row.status, OPERATION_PERMISSIONS.上架)"
+        >
+          上架
+        </el-button>
+        <el-button
+          link
+          type="primary"
+          @click="changeTypes(scope.row, 'off')"
+          v-if="canShowButton(scope.row.status, OPERATION_PERMISSIONS.下架)"
+        >
+          下架
+        </el-button>
+        <el-button
+          link
+          type="primary"
+          @click="changeInventory(scope.row)"
+          v-if="canShowButton(scope.row.status, OPERATION_PERMISSIONS.修改库存)"
+        >
+          修改库存
+        </el-button>
+        <el-button
+          type="primary"
+          link
+          @click="toDetail(scope.row)"
+          v-if="canShowButton(scope.row.status, OPERATION_PERMISSIONS.查看详情)"
+        >
+          查看详情
+        </el-button>
+        <el-button
+          link
+          type="primary"
+          @click="editRow(scope.row)"
+          v-if="canShowButton(scope.row.status, OPERATION_PERMISSIONS.编辑)"
+        >
+          编辑
+        </el-button>
+        <el-button
+          link
+          type="primary"
+          @click="deleteRow(scope.row)"
+          v-if="canShowButton(scope.row.status, OPERATION_PERMISSIONS.删除)"
+        >
+          删除
+        </el-button>
       </template>
     </ProTable>
     <el-dialog v-model="dialogFormVisible" title="修改库存" width="500">
@@ -148,17 +187,49 @@ const columns = reactive<ColumnProps<any>[]>([
   { prop: "operation", label: "操作", fixed: "right", width: 330 }
 ]);
 
-// 在 script setup 中添加
 const allTabOptions = [
   { label: "全部", name: "" },
   { label: "草稿", name: "0" },
   { label: "进行中", name: "5" },
-  { label: "待审核", name: "1" },
-  { label: "审核拒绝", name: "3" },
+  { label: "未开始", name: "2" },
+  { label: "已下架", name: "6" },
   { label: "已售罄", name: "4" },
   { label: "已结束", name: "7" }
 ];
 
+// 状态枚举:0草稿 1待审核 2未开始 3审核拒绝 4已售罄 5进行中 6已下架 7已结束
+const STATUS = {
+  草稿: 0,
+  待审核: 1,
+  未开始: 2,
+  审核拒绝: 3,
+  已售罄: 4,
+  进行中: 5,
+  已下架: 6,
+  已结束: 7
+} as const;
+
+// 操作按钮权限配置:定义每个操作按钮在哪些状态下显示
+const OPERATION_PERMISSIONS = {
+  // 查看详情:待审核、未开始、审核拒绝、进行中、已售罄、已下架
+  查看详情: [STATUS.待审核, STATUS.未开始, STATUS.审核拒绝, STATUS.进行中, STATUS.已售罄, STATUS.已下架],
+  // 上架:未开始、已下架
+  上架: [STATUS.未开始, STATUS.已下架],
+  // 下架:进行中
+  下架: [STATUS.进行中],
+  // 修改库存:未开始、进行中、已售罄
+  修改库存: [STATUS.未开始, STATUS.进行中, STATUS.已售罄],
+  // 编辑:草稿、审核拒绝、已售罄、已下架、已结束
+  编辑: [STATUS.草稿, STATUS.审核拒绝, STATUS.已售罄, STATUS.已下架, STATUS.已结束],
+  // 删除:草稿、未开始、审核拒绝、已售罄、已结束
+  删除: [STATUS.草稿, STATUS.未开始, STATUS.审核拒绝, STATUS.已售罄, STATUS.已结束]
+} as const;
+
+// 判断按钮是否显示的工具函数
+const canShowButton = (status: number, allowedStatuses: readonly number[]) => {
+  return allowedStatuses.includes(status);
+};
+
 // 获取当前审核状态
 const currentAuditStatus = computed(() => {
   if (!proTable.value?.searchParam) return "";