style: 订阅&招标

src/router/modules/biz.ts

@@ -51,7 +51,7 @@ export default {
     {
       path: "/biz/propCount",
       name: "propCount",
-      component: () => import("@/views/biz/propCount/index.vue"),
+      component: () => import("@/views/biz/propSummary/index.vue"),
       meta: {
         icon: "ri:bank-card-line",
         title: "道具统计"
@@ -92,6 +92,15 @@ export default {
         icon: "ri:settings-3-line",
         title: "系统设置"
       }
+    },
+    {
+      path: "/biz/subscribe",
+      name: "subscribe",
+      component: () => import("@/views/biz/subscribe/index.vue"),
+      meta: {
+        icon: "material-symbols:activity-zone-outline",
+        title: "订阅管理"
+      }
     }
   ]
 } satisfies RouteConfigsTable;

src/views/biz/bid/index.vue

@@ -166,7 +166,7 @@ const columns: TableColumnList = [
     }
   },
   {
-    label: "创建时间",
+    label: "投标时间",
     prop: "createTime",
     width: "160",
     formatter: row => {

src/views/biz/issuanceBid/index.vue

@@ -54,6 +54,17 @@ const getFrontendUserList = async () => {
   }
 };
 
+// 明细抽屉相关
+const detailDrawer = ref(false);
+const detailLoading = ref(false);
+const detailData = ref([]);
+const detailTotal = ref(0);
+const detailQueryParams = ref({
+  pageNum: 1,
+  pageSize: 20,
+  bidId: ""
+});
+
 // 公司列表数据
 const companyOptions = ref([]);
 // 获取公司列表
@@ -167,6 +178,15 @@ const categoryOptions = [
   { value: 2, label: "飞机" }
 ];
 
+// 紧急度
+const urgencyOptions = [
+  { value: 1, label: "加急", day: 1 },
+  { value: 2, label: "紧急", day: 3 },
+  { value: 3, label: "一般", day: 7 },
+  { value: 4, label: "近期", day: 30 },
+  { value: 5, label: "远期", day: 90 }
+];
+
 const columns: TableColumnList = [
   {
     label: "用户名称",
@@ -285,10 +305,19 @@ const columns: TableColumnList = [
     }
   },
   {
-    label: "有效天数",
+    label: "紧急度",
-    prop: "validDays",
+    prop: "urgency",
-    width: "90"
+    width: "90",
+    formatter: row => {
+      const urgency = urgencyOptions.find(item => item.value === row.urgency);
+      return urgency ? urgency.label + "(" + urgency.day + "天)" : "";
+    }
   },
+  // {
+  //   label: "有效天数",
+  //   prop: "validDays",
+  //   width: "90"
+  // },
   {
     label: "截止日期",
     prop: "expiryDate",
@@ -337,6 +366,136 @@ const handleEdit = (row: any) => {
   console.log("编辑行:", row);
 };
 
+const handleDetail = row => {
+  detailQueryParams.value.bidId = row.id;
+  detailQueryParams.value.pageNum = 1;
+  detailDrawer.value = true;
+  getBidListDetail();
+};
+
+// 明细表格列定义
+const detailColumns = [
+  {
+    label: "投标主体",
+    prop: "isCompany",
+    width: "180",
+    align: "center",
+    formatter: row => {
+      return row.isCompany === 1
+        ? "[公司]" +
+            companyOptions.value.find(item => item.value === row.companyId)
+              ?.label
+        : "[个人]" +
+            frontendUserOptions.value.find(item => item.value === row.userId)
+              ?.label;
+    }
+  },
+  {
+    label: "中标",
+    prop: "isWinner",
+    width: "90",
+    align: "center",
+    formatter: row => {
+      return row.isWinner === 1 ? "是" : "否";
+    }
+  },
+  {
+    label: "投标时间",
+    prop: "createTime",
+    width: "160",
+    formatter: row => {
+      return row.createTime
+        ? dayjs(row.createTime).format("YYYY-MM-DD HH:mm:ss")
+        : "";
+    }
+  },
+  {
+    label: "使用道具",
+    prop: "usePurchase",
+    width: "90",
+    align: "center",
+    formatter: row => {
+      return row.usePurchase === 1 ? "使用" : "未使用";
+    }
+  },
+  {
+    label: "排他卡",
+    prop: "useExcludeCardFlag",
+    width: "90",
+    align: "center",
+    formatter: row => {
+      return row.useExcludeCardFlag === 1 ? "使用" : "未使用";
+    }
+  },
+  {
+    label: "插队卡",
+    prop: "useJumpCardFlag",
+    width: "90",
+    align: "center",
+    formatter: row => {
+      return row.useJumpCardFlag === 1 ? "使用" : "未使用";
+    }
+  },
+  {
+    label: "直通卡",
+    prop: "useThroughCardFlag",
+    width: "90",
+    align: "center",
+    formatter: row => {
+      return row.useThroughCardFlag === 1 ? "使用" : "未使用";
+    }
+  }
+];
+
+// 获取投标明细
+const getBidListDetail = async () => {
+  try {
+    detailLoading.value = true;
+    const params = { ...detailQueryParams.value };
+    const res = await request(bizApi("bidPage"), {
+      method: "POST",
+      body: JSON.stringify(params)
+    });
+
+    if (res.status === 200) {
+      detailData.value = res.data.rows;
+      detailTotal.value = res.data.records;
+    } else {
+      ElMessage.error(res.msg || "获取投标记录失败");
+    }
+  } catch (error) {
+    console.error("获取投标记录失败:", error);
+    ElMessage.error(error.message || "获取投标记录失败");
+  } finally {
+    detailLoading.value = false;
+  }
+};
+
+// 明细分页改变
+const handleDetailSizeChange = (val: number) => {
+  detailQueryParams.value.pageSize = val;
+  getBidListDetail();
+};
+
+const handleDetailCurrentChange = (val: number) => {
+  detailQueryParams.value.pageNum = val;
+  getBidListDetail();
+};
+
+// 添加抽屉关闭处理函数
+const handleDrawerClose = () => {
+  detailDrawer.value = false;
+  // 重置查询参数
+  detailQueryParams.value = {
+    pageNum: 1,
+    pageSize: 20,
+    bidId: ""
+  };
+  // 清空数据
+  detailData.value = [];
+  detailTotal.value = 0;
+};
+
 // 页面加载时获取数据
 onMounted(() => {
   getBidList();
@@ -472,9 +631,12 @@ onMounted(() => {
       row-key="id"
     >
       <template #operation="{ row }">
-        <el-button type="primary" link @click="handleEdit(row)">
+        <el-button type="primary" link @click="handleDetail(row)">
-          编辑
+          投标记录
         </el-button>
+        <!-- <el-button type="primary" link @click="handleEdit(row)">
+          编辑
+        </el-button> -->
         <el-button type="danger" link @click="handleDelete(row)">
           删除
         </el-button>
@@ -492,6 +654,36 @@ onMounted(() => {
         @current-change="handleCurrentChange"
       />
     </div>
+
+    <!-- 增加抽屉list明细 -->
+    <el-drawer
+      v-model="detailDrawer"
+      title="投标记录"
+      size="40%"
+      :close-on-click-modal="true"
+      @close="handleDrawerClose"
+    >
+      <div class="drawer-container">
+        <pure-table
+          v-loading="detailLoading"
+          :data="detailData"
+          :columns="detailColumns"
+          row-key="id"
+        />
+
+        <div class="pagination-container">
+          <el-pagination
+            v-model:current-page="detailQueryParams.pageNum"
+            v-model:page-size="detailQueryParams.pageSize"
+            :page-sizes="[10, 20, 30, 50]"
+            :total="detailTotal"
+            layout="total, sizes, prev, pager, next, jumper"
+            @size-change="handleDetailSizeChange"
+            @current-change="handleDetailCurrentChange"
+          />
+        </div>
+      </div>
+    </el-drawer>
   </div>
 </template>
 
@@ -532,4 +724,14 @@ onMounted(() => {
 .type-select {
   width: 120px;
 }
+
+.drawer-container {
+  padding: 20px;
+
+  .pagination-container {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 20px;
+  }
+}
 </style>

src/views/biz/membershipPoint/index.vue

@@ -636,7 +636,7 @@ onMounted(() => {
       v-model="detailDrawer"
       title="积分明细"
       width="50%"
-      :close-on-click-modal="false"
+      :close-on-click-modal="true"
       :before-close="() => (detailDrawer = false)"
     >
       <div class="detail-container">

src/views/biz/propSummary/index.vue

@@ -0,0 +1,339 @@
+<script setup lang="ts">
+import dayjs from "dayjs";
+import { ref, onMounted } from "vue";
+import { ElMessage } from "element-plus";
+import { request, bizApi } from "@/api/utils";
+
+defineOptions({
+  name: "propSummary"
+});
+
+withDefaults(
+  defineProps<{
+    height?: string;
+  }>(),
+  {
+    height: null
+  }
+);
+
+// 定义查询参数
+const queryParams = ref({
+  pageNum: 1,
+  pageSize: 20,
+  userId: "",
+  companyId: "",
+  propType: ""
+});
+
+// 定义表格数据
+const tableData = ref([]);
+const loading = ref(false);
+const total = ref(0);
+
+// 前端用户列表数据
+const frontendUserOptions = ref([]);
+// 获取前端用户列表
+const getFrontendUserList = async () => {
+  try {
+    const res = await request(bizApi("getFrontendUserPrimaryInfo"), {
+      method: "POST"
+    });
+    if (res.status === 200) {
+      frontendUserOptions.value = res.data.map(item => ({
+        value: item.id,
+        label: item.name
+      }));
+    }
+  } catch (error) {
+    console.error("获取用户列表失败:", error);
+  }
+};
+
+// 公司列表数据
+const companyOptions = ref([]);
+// 获取公司列表
+const getCompanyList = async () => {
+  try {
+    const res = await request(bizApi("getCompanyPrimaryInfo"), {
+      method: "POST"
+    });
+    if (res.status === 200) {
+      companyOptions.value = res.data.map(item => ({
+        value: item.id,
+        label: item.companyName
+      }));
+    }
+  } catch (error) {
+    console.error("获取公司列表失败:", error);
+  }
+};
+
+// 道具类型选项
+const typeOptions = [
+  { value: 1, label: "实时达卡" },
+  { value: 2, label: "排他卡" },
+  { value: 3, label: "插队卡" },
+  { value: 4, label: "直通卡" },
+  { value: 5, label: "加量卡" },
+  { value: 6, label: "置顶卡" }
+];
+
+// 获取道具统计列表
+const getPropSummaryList = async () => {
+  try {
+    loading.value = true;
+    const params = { ...queryParams.value };
+    const data = await request(bizApi("propSummaryPage"), {
+      method: "POST",
+      body: JSON.stringify(params)
+    });
+
+    if (data.status === 200) {
+      tableData.value = data.data.rows;
+      total.value = data.data.records;
+    } else {
+      ElMessage.error(data.msg || "获取数据失败");
+    }
+  } catch (error) {
+    console.error("获取道具统计列表失败:", error);
+    ElMessage.error(error.message || "获取数据失败");
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 搜索方法
+const handleSearch = () => {
+  queryParams.value.pageNum = 1;
+  getPropSummaryList();
+};
+
+// 重置方法
+const handleReset = () => {
+  queryParams.value = {
+    pageNum: 1,
+    pageSize: 20,
+    userId: "",
+    companyId: "",
+    propType: ""
+  };
+  getPropSummaryList();
+};
+
+// 分页改变
+const handleSizeChange = (val: number) => {
+  queryParams.value.pageSize = val;
+  getPropSummaryList();
+};
+
+const handleCurrentChange = (val: number) => {
+  queryParams.value.pageNum = val;
+  getPropSummaryList();
+};
+
+const columns = [
+  {
+    label: "用户名称",
+    prop: "userId",
+    width: "120",
+    align: "center",
+    formatter: row => {
+      const user = frontendUserOptions.value.find(
+        item => item.value === row.userId
+      );
+      return user ? user.label : "-";
+    }
+  },
+  {
+    label: "是否公司",
+    prop: "isCompany",
+    width: "90",
+    align: "center",
+    formatter: row => {
+      return row.isCompany === 1 ? "是" : "否";
+    }
+  },
+  {
+    label: "公司名称",
+    prop: "companyId",
+    width: "150",
+    formatter: row => {
+      const company = companyOptions.value.find(
+        item => item.value === row.companyId
+      );
+      return company ? company.label : "-";
+    }
+  },
+  {
+    label: "道具类型",
+    prop: "propType",
+    width: "100",
+    formatter: row => {
+      const type = typeOptions.find(item => item.value === row.propType);
+      return type ? type.label : "-";
+    }
+  },
+  {
+    label: "总数量",
+    prop: "totalCount",
+    width: "90",
+    align: "center"
+  },
+  {
+    label: "已用数量",
+    prop: "usedCount",
+    width: "90",
+    align: "center"
+  },
+  {
+    label: "过期数量",
+    prop: "expiredCount",
+    width: "90",
+    align: "center"
+  },
+  {
+    label: "创建时间",
+    prop: "createTime",
+    width: "160",
+    formatter: row => {
+      return row.createTime
+        ? dayjs(row.createTime).format("YYYY-MM-DD HH:mm:ss")
+        : "";
+    }
+  },
+  {
+    label: "更新时间",
+    prop: "updateTime",
+    width: "160",
+    formatter: row => {
+      return row.updateTime
+        ? dayjs(row.updateTime).format("YYYY-MM-DD HH:mm:ss")
+        : "";
+    }
+  }
+];
+
+// 页面加载时获取数据
+onMounted(() => {
+  getPropSummaryList();
+  getFrontendUserList();
+  getCompanyList();
+});
+</script>
+
+<template>
+  <div class="prop-count-container">
+    <div class="search-box">
+      <el-form ref="queryForm" :model="queryParams" :inline="true">
+        <el-form-item label="用户" prop="userId">
+          <el-select
+            v-model="queryParams.userId"
+            placeholder="请选择用户"
+            clearable
+            class="user-select"
+          >
+            <el-option
+              v-for="item in frontendUserOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="公司名称" prop="companyId">
+          <el-select
+            v-model="queryParams.companyId"
+            placeholder="请选择公司"
+            clearable
+            class="company-select"
+          >
+            <el-option
+              v-for="item in companyOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="道具类型" prop="type">
+          <el-select
+            v-model="queryParams.propType"
+            placeholder="请选择类型"
+            clearable
+            class="type-select"
+          >
+            <el-option
+              v-for="item in typeOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="primary" @click="handleSearch">搜索</el-button>
+          <el-button @click="handleReset">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <pure-table
+      v-loading="loading"
+      :data="tableData"
+      :columns="columns"
+      :height="height"
+      row-key="id"
+    />
+
+    <div class="pagination-container">
+      <el-pagination
+        v-model:current-page="queryParams.pageNum"
+        v-model:page-size="queryParams.pageSize"
+        :page-sizes="[10, 20, 30, 50]"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.prop-count-container {
+  padding: 20px;
+
+  .search-box {
+    padding: 20px;
+    margin-bottom: 20px;
+    background: #fff;
+    border-radius: 4px;
+
+    :deep(.el-form-item) {
+      margin-bottom: 0;
+    }
+  }
+
+  .user-select {
+    width: 180px;
+  }
+
+  .company-select {
+    width: 180px;
+  }
+
+  .type-select {
+    width: 120px;
+  }
+
+  .pagination-container {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 20px;
+  }
+}
+</style>

src/views/biz/propSummary/index2.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 defineOptions({
-  name: "propCount"
+  name: "propSummary2"
 });
 </script>
 
 <template>
-  <h1>道具管理</h1>
+  <h1>道具统计</h1>
 </template>

src/views/biz/subscribe/index.vue

@@ -0,0 +1,453 @@
+<script setup lang="ts">
+import dayjs from "dayjs";
+import { ref, onMounted } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { request, bizApi } from "@/api/utils";
+
+defineOptions({
+  name: "subscribe"
+});
+
+withDefaults(
+  defineProps<{
+    height?: string;
+  }>(),
+  {
+    height: undefined
+  }
+);
+
+// 定义查询参数
+const queryParams = ref({
+  pageNum: 1,
+  pageSize: 20,
+  userId: "",
+  isCompany: "",
+  companyId: "",
+  subType: "",
+  subField: "",
+  subCategory: "",
+  useRealtimeCardFlag: ""
+});
+
+// 定义表格数据
+const tableData = ref([]);
+const loading = ref(false);
+const total = ref(0);
+
+// 前端用户列表数据
+const frontendUserOptions = ref([]);
+// 获取前端用户列表
+const getFrontendUserList = async () => {
+  try {
+    const res = await request(bizApi("getFrontendUserPrimaryInfo"), {
+      method: "POST"
+    });
+    if (res.status === 200) {
+      frontendUserOptions.value = res.data.map(item => ({
+        value: item.id,
+        label: item.name
+      }));
+    }
+  } catch (error) {
+    console.error("获取用户列表失败:", error);
+  }
+};
+
+// 公司列表数据
+const companyOptions = ref([]);
+// 获取公司列表
+const getCompanyList = async () => {
+  try {
+    const res = await request(bizApi("getCompanyPrimaryInfo"), {
+      method: "POST"
+    });
+    if (res.status === 200) {
+      companyOptions.value = res.data.map(item => ({
+        value: item.id,
+        label: item.companyName
+      }));
+    }
+  } catch (error) {
+    console.error("获取公司列表失败:", error);
+  }
+};
+
+// 订阅类型选项
+const subTypeOptions = [
+  { value: 0, label: "未指定" },
+  { value: 1, label: "求购" },
+  { value: 2, label: "租赁" },
+  { value: 3, label: "全订阅" }
+];
+
+// 订阅领域选项
+const subFieldOptions = [
+  { value: 0, label: "未指定" },
+  { value: 1, label: "民航" },
+  { value: 2, label: "通航" },
+  { value: 3, label: "全订阅" }
+];
+
+// 订阅对象选项
+const subCategoryOptions = [
+  { value: 0, label: "未指定" },
+  { value: 1, label: "航材" },
+  { value: 2, label: "飞机" },
+  { value: 3, label: "全订阅" }
+];
+
+// 获取订阅列表
+const getSubscribeList = async () => {
+  try {
+    loading.value = true;
+    const params = { ...queryParams.value };
+    const data = await request(bizApi("bidSubscribePage"), {
+      method: "POST",
+      body: JSON.stringify(params)
+    });
+
+    if (data.status === 200) {
+      tableData.value = data.data.rows;
+      total.value = data.data.records;
+    } else {
+      ElMessage.error(data.msg || "获取数据失败");
+    }
+  } catch (error) {
+    console.error("获取订阅列表失败:", error);
+    ElMessage.error(error.message || "获取数据失败");
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 搜索方法
+const handleSearch = () => {
+  queryParams.value.pageNum = 1;
+  getSubscribeList();
+};
+
+// 重置方法
+const handleReset = () => {
+  queryParams.value = {
+    pageNum: 1,
+    pageSize: 20,
+    userId: "",
+    isCompany: "",
+    companyId: "",
+    subType: "",
+    subField: "",
+    subCategory: "",
+    useRealtimeCardFlag: ""
+  };
+  getSubscribeList();
+};
+
+// 分页改变
+const handleSizeChange = (val: number) => {
+  queryParams.value.pageSize = val;
+  getSubscribeList();
+};
+
+const handleCurrentChange = (val: number) => {
+  queryParams.value.pageNum = val;
+  getSubscribeList();
+};
+
+const columns = [
+  {
+    label: "用户名称",
+    prop: "userId",
+    width: "120",
+    formatter: row => {
+      const user = frontendUserOptions.value.find(
+        item => item.value === row.userId
+      );
+      return user ? user.label : "";
+    }
+  },
+  {
+    label: "是否公司",
+    prop: "isCompany",
+    width: "90",
+    align: "center",
+    formatter: row => {
+      return row.isCompany === 1 ? "是" : "否";
+    }
+  },
+  {
+    label: "公司名称",
+    prop: "companyId",
+    width: "150",
+    formatter: row => {
+      const company = companyOptions.value.find(
+        item => item.value === row.companyId
+      );
+      return company ? company.label : "";
+    }
+  },
+  {
+    label: "订阅类型",
+    prop: "subType",
+    width: "100",
+    formatter: row => {
+      const type = subTypeOptions.find(item => item.value === row.subType);
+      return type ? type.label : "-";
+    }
+  },
+  {
+    label: "订阅领域",
+    prop: "subField",
+    width: "100",
+    formatter: row => {
+      const field = subFieldOptions.find(item => item.value === row.subField);
+      return field ? field.label : "-";
+    }
+  },
+  {
+    label: "订阅对象",
+    prop: "subCategory",
+    width: "100",
+    formatter: row => {
+      const category = subCategoryOptions.find(
+        item => item.value === row.subCategory
+      );
+      return category ? category.label : "-";
+    }
+  },
+  {
+    label: "订阅关键字",
+    prop: "subWords",
+    width: "200"
+  },
+  {
+    label: "使用实时达卡",
+    prop: "useRealtimeCardFlag",
+    width: "120",
+    align: "center",
+    formatter: row => {
+      return row.useRealtimeCardFlag === 1 ? "是" : "否";
+    }
+  },
+  {
+    label: "创建时间",
+    prop: "createTime",
+    width: "160",
+    formatter: row => {
+      return row.createTime
+        ? dayjs(row.createTime).format("YYYY-MM-DD HH:mm:ss")
+        : "";
+    }
+  },
+  {
+    label: "更新时间",
+    prop: "updateTime",
+    width: "160",
+    formatter: row => {
+      return row.updateTime
+        ? dayjs(row.updateTime).format("YYYY-MM-DD HH:mm:ss")
+        : "";
+    }
+  },
+  {
+    label: "操作",
+    fixed: "right",
+    width: 160,
+    slot: "operation",
+    align: "center"
+  }
+];
+
+// 添加删除方法
+const handleDelete = async (row: any) => {
+  try {
+    await ElMessageBox.confirm("确认要删除该订阅记录吗？", "提示", {
+      type: "warning"
+    });
+
+    const res = await request(bizApi("deleteSubscribe"), {
+      method: "POST",
+      body: JSON.stringify({ id: row.id })
+    });
+
+    if (res.status === 200) {
+      ElMessage.success("删除成功");
+      getSubscribeList();
+    } else {
+      ElMessage.error(res.msg || "删除失败");
+    }
+  } catch (error) {
+    console.error("删除失败:", error);
+  }
+};
+
+// 添加编辑方法
+const handleEdit = (row: any) => {
+  // TODO: 实现编辑功能
+  console.log("编辑行:", row);
+};
+
+// 页面加载时获取数据
+onMounted(() => {
+  getSubscribeList();
+  getFrontendUserList();
+  getCompanyList();
+});
+</script>
+
+<template>
+  <div class="subscribe-container">
+    <div class="search-box">
+      <el-form ref="queryForm" :model="queryParams" :inline="true">
+        <el-form-item label="用户" prop="userId">
+          <el-select
+            v-model="queryParams.userId"
+            placeholder="请选择用户"
+            clearable
+            class="user-select"
+          >
+            <el-option
+              v-for="item in frontendUserOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="公司名称" prop="companyId">
+          <el-select
+            v-model="queryParams.companyId"
+            placeholder="请选择公司"
+            clearable
+            class="company-select"
+          >
+            <el-option
+              v-for="item in companyOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="订阅类型" prop="subType">
+          <el-select
+            v-model="queryParams.subType"
+            placeholder="请选择类型"
+            clearable
+            class="type-select"
+          >
+            <el-option
+              v-for="item in subTypeOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="订阅领域" prop="subField">
+          <el-select
+            v-model="queryParams.subField"
+            placeholder="请选择领域"
+            clearable
+            class="type-select"
+          >
+            <el-option
+              v-for="item in subFieldOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="订阅对象" prop="subCategory">
+          <el-select
+            v-model="queryParams.subCategory"
+            placeholder="请选择对象"
+            clearable
+            class="type-select"
+          >
+            <el-option
+              v-for="item in subCategoryOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="primary" @click="handleSearch">搜索</el-button>
+          <el-button @click="handleReset">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <pure-table
+      v-loading="loading"
+      :data="tableData"
+      :columns="columns"
+      :height="height"
+      row-key="id"
+    >
+      <template #operation="{ row }">
+        <el-button type="primary" link @click="handleEdit(row)">
+          编辑
+        </el-button>
+        <el-button type="danger" link @click="handleDelete(row)">
+          删除
+        </el-button>
+      </template>
+    </pure-table>
+
+    <div class="pagination-container">
+      <el-pagination
+        v-model:current-page="queryParams.pageNum"
+        v-model:page-size="queryParams.pageSize"
+        :page-sizes="[10, 20, 30, 50]"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.subscribe-container {
+  padding: 20px;
+
+  .search-box {
+    padding: 20px;
+    margin-bottom: 20px;
+    background: #fff;
+    border-radius: 4px;
+
+    :deep(.el-form-item) {
+      margin-bottom: 0;
+    }
+  }
+
+  .user-select {
+    width: 180px;
+  }
+
+  .company-select {
+    width: 180px;
+  }
+
+  .type-select {
+    width: 120px;
+  }
+
+  .pagination-container {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 20px;
+  }
+}
+</style>