Переглянути джерело

feat(groupPackage): 更新团购套餐管理功能

- 修改表格状态展示逻辑,使用 row.statusName 和 row.reviewType 直接显示-优化操作按钮显示条件,通过数组控制各状态下的按钮可见性- 调整审核状态枚举值,使其与后端保持一致- 更新表格列字段,将 goodsId 替换为 saleNum、costPrice 和 profit
- 修改新建团购页面中限购设置字段名称 quotaValueStr 为 quotaType
- 统一优化页面过渡动画时间,从 0.3s 缩短至 0.1s 提升响应速度
congxuesong 1 місяць тому
батько
коміт
2795911956

+ 31 - 18
src/views/groupPackageManagement/index.vue

@@ -21,20 +21,24 @@
         </div>
       </template>
       <template #status="scope">
-        <p>团购状态:{{ allTabOptions.find(item => item.name === scope.row.groupType)?.label ?? "--" }}</p>
-        <p>审核状态:{{ statusEnum.find(item => item.value === scope.row.reviewType)?.label ?? "--" }}</p> </template
+        <p>团购状态:{{ scope.row.statusName ?? "--" }}</p>
+        <p>审核状态:{{ scope.row.reviewType ?? "--" }}</p> </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="sj.includes(scope.row.status)">
+          上架
+        </el-button>
+        <el-button link type="primary" @click="changeTypes(scope.row, 'off')" v-if="xj.includes(scope.row.status)">
+          下架
+        </el-button>
+        <el-button link type="primary" @click="changeInventory(scope.row)" v-if="xgkc.includes(scope.row.status)">
+          修改库存
+        </el-button>
+        <el-button type="primary" link @click="toDetail(scope.row)" v-if="ckxq.includes(scope.row.status)"> 查看详情 </el-button>
+        <el-button link type="primary" @click="editRow(scope.row)" v-if="bj.includes(scope.row.status)"> 编辑 </el-button>
+        <el-button link type="primary" @click="deleteRow(scope.row)" v-if="sc.includes(scope.row.status)"> 删除 </el-button>
       </template>
     </ProTable>
     <el-dialog v-model="dialogFormVisible" title="修改库存" width="500">
@@ -93,10 +97,16 @@ const rules = reactive<FormRules<RuleForm>>({
   ]
 });
 const statusEnum = [
-  { value: "-1", label: "待审核" },
-  { value: "-2", label: "审核通过" },
-  { value: "0", label: "审核驳回" }
+  { value: "0", label: "待审核" },
+  { value: "1", label: "审核通过" },
+  { value: "2", label: "审核驳回" }
 ];
+const ckxq = [1, 3, 4, 5, 6, 7];
+const sj = [];
+const xj = [5];
+const xgkc = [5, 4, 7];
+const bj = [0, 3, 4, 7];
+const sc = [0, 3, 4, 5, 7];
 
 // ProTable 实例(需要在使用它的地方之前定义)
 const proTable = ref<ProTableInstance>();
@@ -133,7 +143,7 @@ const columns = reactive<ColumnProps<any>[]>([
     width: 400
   },
   {
-    prop: "goodsId",
+    prop: "saleNum",
     label: "已售"
   },
   {
@@ -148,15 +158,18 @@ const columns = reactive<ColumnProps<any>[]>([
     }
   },
   {
-    prop: "goodsId",
+    prop: "costPrice",
     label: "成本价",
     render: (scope: any) => {
-      return `¥${scope.row.originalPrice}`;
+      return `¥${scope.row.costPrice}`;
     }
   },
   {
-    prop: "goodsId",
-    label: "利润"
+    prop: "profit",
+    label: "利润",
+    render: (scope: any) => {
+      return `¥${scope.row.profit}`;
+    }
   },
   {
     prop: "reviewType",

+ 11 - 11
src/views/groupPackageManagement/newGroup.vue

@@ -814,7 +814,7 @@ const storeInfoModel = ref<any>({
   // 库存数量
   inventoryNum: "",
   // 每人限购设置:0-不限量,1-自定义限购数量
-  quotaValueStr: 0,
+  quotaType: 0,
   // 自定义限购数量(当quotaType为1时必填)
   quotaValue: 0,
   // 套餐内容(虚拟字段,用于表单验证,实际数据在 lifeGroupBuyThalis 变量中)
@@ -1957,7 +1957,7 @@ const handleImageParam = (list: any[], result: any[]) => {
 
   // background-color: #f5f7fa;
   border-radius: 4px;
-  transition: background-color 0.3s;
+  transition: background-color 0.1s;
   &:hover {
     background-color: #ecf5ff;
   }
@@ -2035,7 +2035,7 @@ const handleImageParam = (list: any[], result: any[]) => {
   margin: 0;
   font-size: 14px;
   border-radius: 4px;
-  transition: all 0.3s;
+  transition: all 0.1s;
 }
 
 /* 套餐内容相关样式 */
@@ -2378,7 +2378,7 @@ const handleImageParam = (list: any[], result: any[]) => {
   cursor: pointer;
   border: 1px solid #e4e7ed;
   border-radius: 4px;
-  transition: all 0.3s;
+  transition: all 0.1s;
 }
 .dish-item:hover {
   background-color: #f5f7fa;
@@ -2449,14 +2449,14 @@ const handleImageParam = (list: any[], result: any[]) => {
 .slide-fade-enter-active {
   overflow: hidden;
   transition:
-    max-height 0.3s ease-out,
-    opacity 0.3s ease-out;
+    max-height 0.1s ease-out,
+    opacity 0.1s ease-out;
 }
 .slide-fade-leave-active {
   overflow: hidden;
   transition:
-    max-height 0.3s ease-in,
-    opacity 0.3s ease-in;
+    max-height 0.1s ease-in,
+    opacity 0.1s ease-in;
 }
 .slide-fade-enter-from {
   max-height: 0;
@@ -2474,10 +2474,10 @@ const handleImageParam = (list: any[], result: any[]) => {
 
 /* 分组收起全部动画 */
 .group-fade-enter-active {
-  transition: all 0.3s ease-out;
+  transition: all 0.1s ease-out;
 }
 .group-fade-leave-active {
-  transition: all 0.3s ease-in;
+  transition: all 0.1s ease-in;
 }
 .group-fade-enter-from {
   opacity: 0;
@@ -2488,6 +2488,6 @@ const handleImageParam = (list: any[], result: any[]) => {
   transform: translateY(-10px);
 }
 .group-fade-move {
-  transition: transform 0.3s ease;
+  transition: transform 0.1s linear;
 }
 </style>