Explorar o código

feat(活动管理): 增强搜索条件和优化样式

搜索功能:
- 新增所属维度筛选(身/心/智/行/富)
- 新增审核状态筛选(待审核/已通过/已拒绝)
- 优化搜索框占位符文字

样式优化:
- 重构 header 布局为 flexbox,支持响应式换行
- 统一搜索框和按钮样式
- 增加 header-search 类控制搜索框宽度
- 优化操作按钮间距和对齐

其他改进:
- 默认分页大小从 10 改为 20
- 查询按钮显式触发搜索
Xiaogang Liao hai 2 meses
pai
achega
c8b33f564e
Modificáronse 1 ficheiros con 92 adicións e 11 borrados
  1. 92 11
      cfc-web/src/views/admin/Activities.vue

+ 92 - 11
cfc-web/src/views/admin/Activities.vue

@@ -3,12 +3,19 @@
     <el-card>
       <div slot="header" class="admin-page-header">
         <span class="admin-page-title">活动管理</span>
-        <div>
-          <el-input v-model="keyword" placeholder="搜索..." prefix-icon="el-icon-search" clearable @keyup.enter.native="handleSearch" @clear="handleSearch" />
+        <div class="admin-page-actions">
+          <el-input
+            v-model="keyword"
+            placeholder="搜索活动标题/地点"
+            prefix-icon="el-icon-search"
+            clearable
+            class="header-search"
+            @keyup.enter.native="handleSearch"
+            @clear="handleSearch"
+          />
           <el-select
             v-model="filter.status"
-            placeholder="状态筛选"
-            size="mini"
+            placeholder="活动状态"
             clearable
             @change="loadActivities"
           >
@@ -17,7 +24,32 @@
             <el-option label="已发布" value="published" />
             <el-option label="已结束" value="ended" />
           </el-select>
-          <el-button type="primary" size="mini" @click="$router.push('/activity-edit')">创建活动</el-button>
+          <el-select
+            v-model="filter.dimensionCode"
+            placeholder="所属维度"
+            clearable
+            @change="loadActivities"
+          >
+            <el-option label="全部维度" value="" />
+            <el-option label="身" value="body" />
+            <el-option label="心" value="mind" />
+            <el-option label="智" value="wisdom" />
+            <el-option label="行" value="action" />
+            <el-option label="富" value="wealth" />
+          </el-select>
+          <el-select
+            v-model="filter.auditStatus"
+            placeholder="审核状态"
+            clearable
+            @change="loadActivities"
+          >
+            <el-option label="全部审核状态" value="" />
+            <el-option label="待审核" value="pending" />
+            <el-option label="已通过" value="approved" />
+            <el-option label="已拒绝" value="rejected" />
+          </el-select>
+          <el-button type="primary" size="mini" @click="handleSearch">查询</el-button>
+          <el-button type="success" size="mini" icon="el-icon-plus" @click="$router.push('/activity-edit')">创建活动</el-button>
         </div>
       </div>
       <div class="table-scroll-wrap-lg">
@@ -155,8 +187,10 @@ export default {
       keyword: '',
       filter: {
         status: '',
+        dimensionCode: '',
+        auditStatus: '',
         page: 1,
-        size: 10
+        size: 20
       },
       // 报名列表对话框
       regDialogVisible: false,
@@ -191,6 +225,12 @@ export default {
         if (this.filter.status) {
           params.status = this.filter.status
         }
+        if (this.filter.dimensionCode) {
+          params.dimensionCode = this.filter.dimensionCode
+        }
+        if (this.filter.auditStatus) {
+          params.auditStatus = this.filter.auditStatus
+        }
         if (this.keyword) {
           params.keyword = this.keyword
         }
@@ -328,9 +368,50 @@ export default {
 </script>
 
 <style scoped>
-.activities { padding: 20px; flex: 1; display: flex; flex-direction: column; min-height: 0; }
-.activities > .el-card { flex: 1; display: flex; flex-direction: column; min-height: 0; }
-.activities > .el-card >>> .el-card__body { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
-.activities >>> .el-table { flex: 1; }
-.activities >>> .el-table__body-wrapper { overflow-y: auto; }
+.activities {
+  padding: 20px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.activities > .el-card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.activities > .el-card >>> .el-card__body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow-y: auto;
+}
+.activities >>> .el-table {
+  flex: 1;
+}
+.activities >>> .el-table__body-wrapper {
+  overflow-y: auto;
+}
+.admin-page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+.admin-page-title {
+  font-size: 18px;
+  font-weight: bold;
+}
+.admin-page-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.header-search {
+  width: 220px;
+}
 </style>