Преглед на файлове

feat(ticket): 优化代金券与优惠券管理界面布局

- 调整表格容器类名,增强样式控制
- 将操作按钮移至表头右侧插槽,提升布局灵活性
- 更新按钮区域样式,增加右边距并优化弹性布局
- 移除表头按钮宽度限制,使界面更自适应
- 统一无数据状态展示样式,改善视觉体验
congxuesong преди 4 седмици
родител
ревизия
1cfcb90593
променени са 2 файла, в които са добавени 19 реда и са изтрити 16 реда
  1. 3 2
      src/components/ProTable/index.vue
  2. 16 14
      src/views/ticketManagement/index.vue

+ 3 - 2
src/components/ProTable/index.vue

@@ -19,6 +19,7 @@
         <slot name="tableHeader" :selected-list="selectedList" :selected-list-ids="selectedListIds" :is-selected="isSelected" />
       </div>
       <div v-if="toolButton" class="header-button-ri">
+        <slot name="tableHeaderRight" />
         <slot name="toolButton">
           <el-button v-if="showToolButton('refresh')" :icon="Refresh" circle @click="getTableList" />
           <el-button v-if="showToolButton('setting') && columns.length" :icon="Operation" circle @click="openColSetting" />
@@ -82,8 +83,8 @@
       <template #empty>
         <div class="table-empty">
           <slot name="empty">
-            <img src="@/assets/images/notData.png" alt="notData" style=" width: 180px;height: 180px" />
-            <div style=" font-size: 14px;font-weight: 500; color: #aaaaaa">暂无数据</div>
+            <img src="@/assets/images/notData.png" alt="notData" style="width: 180px; height: 180px" />
+            <div style="font-size: 14px; font-weight: 500; color: #aaaaaa">暂无数据</div>
           </slot>
         </div>
       </template>

+ 16 - 14
src/views/ticketManagement/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="table-box">
+  <div class="table-box button-table">
     <ProTable
       ref="proTable"
       :columns="columns"
@@ -15,13 +15,15 @@
             <el-tabs v-model="activeName" class="tabs" @tab-click="handleClick">
               <el-tab-pane v-for="tab in allTabOptions" :key="tab.name" :label="tab.label" :name="tab.name" />
             </el-tabs>
-            <div class="action-buttons">
-              <el-button :icon="Plus" class="button" type="primary" @click="newGroupBuying" v-if="type"> 新建代金券 </el-button>
-              <el-button :icon="Plus" class="button" type="primary" @click="newCoupon" v-if="typeCoupon"> 新建优惠券 </el-button>
-            </div>
           </div>
         </div>
       </template>
+      <template #tableHeaderRight="scope">
+        <div class="action-buttons">
+          <el-button :icon="Plus" class="button" type="primary" @click="newGroupBuying" v-if="type"> 新建代金券 </el-button>
+          <el-button :icon="Plus" class="button" type="primary" @click="newCoupon" v-if="typeCoupon"> 新建优惠券 </el-button>
+        </div>
+      </template>
       <template #status="scope">
         <!-- 代金券:显示状态和审核状态两行 -->
         <template v-if="activeName === '1'">
@@ -683,7 +685,6 @@ const closeRejectReasonDialog = () => {
   white-space: normal; // 允许自然换行
 }
 .table-header-btn {
-  width: 160vh;
   .header-actions {
     display: flex;
     justify-content: space-between;
@@ -694,14 +695,15 @@ const closeRejectReasonDialog = () => {
         height: 0;
       }
     }
-    .action-buttons {
-      display: flex;
-      flex: 0 0 auto;
-      gap: 10px;
-      .button {
-        margin-bottom: 0;
-      }
-    }
+  }
+}
+.action-buttons {
+  display: flex;
+  flex: 0 0 auto;
+  gap: 10px;
+  margin-right: 20px;
+  .button {
+    margin-bottom: 0;
   }
 }
 .reject-reason-content {