家庭成员

src/api/person/index.ts

@@ -10,11 +10,11 @@ export interface PersonVO {
   orgid: number // 机构ID
   orgname: string // 机构名称
   familyid: string // 家庭组号
-  familyrelation: number // 家庭关系：1-本人，2-兄弟，3-父亲，4-母亲，5-子女，6-其他
+  familyrelation: number // 家庭关系：1-主号，2-兄弟，3-父亲，4-母亲，5-子女，6-其他
   isvip: number // 是否会员：0-否，1-是
   idcard: string // 身份证号
-  createtime: Date // 创建时间
+  createtime: string // 创建时间
-  updatetime: Date // 更新时间
+  updatetime: string // 更新时间
   createby: string // 创建人
   updateby: string // 更新人
 }
@@ -50,4 +50,24 @@ export const PersonApi = {
   exportPerson: async (params) => {
     return await request.download({ url: `/system/person/export-excel`, params })
   },
+
+  // 根据用户ID更新家庭组号
+  addMembers: async (id: number, familyid: string) => {
+    return await request.put({ url: `/system/person/add-members?id=` + id + `&familyid=` + familyid })
+  },
+
+  // 根据用户ID移除家庭组号
+  removeMembers: async (id: number) => {
+    return await request.put({ url: `/system/person/remove-members?id=` + id })
+  },
+
+  // 根据家庭组号查询成员
+  getMembersByFamilyid: async (familyid: string) => {
+    return await request.get({ url: `/system/person/get-members-by-familyid?familyid=` + familyid })
+  },
+
+  // 根据查询没有家庭组号的用户
+  getPersonNoFamilyid: async (params: any) => {
+    return await request.get({ url: `/system/person/page-no-familyid`, params })
+  },
 }

src/views/person/PersonFrom.vue

@@ -7,61 +7,45 @@
       label-width="100px"
       v-loading="formLoading"
     >
-      <el-form-item label="手机号" prop="phone">
+      <el-row :gutter="20">
-        <el-input v-model="formData.phone" placeholder="请输入手机号" />
+        <el-col :span="12">
-      </el-form-item>
+          <el-form-item label="手机号" prop="phone">
-      <el-form-item label="密码" prop="password">
+            <el-input v-model="formData.phone" placeholder="请输入手机号" />
-        <el-input v-model="formData.password" placeholder="请输入密码" />
+          </el-form-item>
-      </el-form-item>
+          <el-form-item label="密码" prop="password">
-      <el-form-item label="姓名" prop="name">
+            <el-input v-model="formData.password" placeholder="请输入密码" />
-        <el-input v-model="formData.name" placeholder="请输入姓名" />
+          </el-form-item>
-      </el-form-item>
+          <el-form-item label="姓名" prop="name">
-      <el-form-item label="地址" prop="address">
+            <el-input v-model="formData.name" placeholder="请输入姓名" />
-        <el-input v-model="formData.address" placeholder="请输入地址" />
+          </el-form-item>
-      </el-form-item>
+          <el-form-item label="地址" prop="address">
-      <el-form-item label="机构ID" prop="orgid">
+            <el-input v-model="formData.address" placeholder="请输入地址" />
-        <el-input v-model="formData.orgid" placeholder="请输入机构ID" />
+          </el-form-item>
-      </el-form-item>
+          <el-form-item label="机构ID" prop="orgid">
-      <el-form-item label="机构名称" prop="orgname">
+            <el-input v-model="formData.orgid" placeholder="请输入机构ID" />
-        <el-input v-model="formData.orgname" placeholder="请输入机构名称" />
+          </el-form-item>
-      </el-form-item>
+          <el-form-item label="机构名称" prop="orgname">
-      <el-form-item label="家庭组号" prop="familyid">
+            <el-input v-model="formData.orgname" placeholder="请输入机构名称" />
-        <el-input v-model="formData.familyid" placeholder="请输入家庭组号" />
+          </el-form-item>
-      </el-form-item>
+        </el-col>
-      <el-form-item label="家庭关系" prop="familyrelation">
+        <el-col :span="12">
-        <el-input v-model="formData.familyrelation" placeholder="请输入家庭关系" />
+          <el-form-item label="家庭组号" prop="familyid">
-      </el-form-item>
+            <el-input v-model="formData.familyid" placeholder="请输入家庭组号" />
-      <el-form-item label="是否会员" prop="isvip">
+          </el-form-item>
-        <el-select v-model="formData.isvip" placeholder="请选择是否会员">
+          <el-form-item label="家庭关系" prop="familyrelation">
-          <el-option label="是" value="1" />
+            <el-input v-model="formData.familyrelation" placeholder="请输入家庭关系" />
-          <el-option label="否" value="0" />
+          </el-form-item>
-        </el-select>
+          <el-form-item label="身份证号" prop="idcard">
-      </el-form-item>
+            <el-input v-model="formData.idcard" placeholder="请输入身份证号" />
-      <el-form-item label="身份证号" prop="idcard">
+          </el-form-item>
-        <el-input v-model="formData.idcard" placeholder="请输入身份证号" />
+          <el-form-item label="创建人" prop="createby">
-      </el-form-item>
+            <el-input v-model="formData.createby" placeholder="请输入创建人" />
-      <el-form-item label="创建时间" prop="createtime">
+          </el-form-item>
-        <el-date-picker
+          <el-form-item label="更新人" prop="updateby">
-          v-model="formData.createtime"
+            <el-input v-model="formData.updateby" placeholder="请输入更新人" />
-          type="date"
+          </el-form-item>
-          value-format="x"
+        </el-col>
-          placeholder="选择创建时间"
+      </el-row>
-        />
-      </el-form-item>
-      <el-form-item label="更新时间" prop="updatetime">
-        <el-date-picker
-          v-model="formData.updatetime"
-          type="date"
-          value-format="x"
-          placeholder="选择更新时间"
-        />
-      </el-form-item>
-      <el-form-item label="创建人" prop="createby">
-        <el-input v-model="formData.createby" placeholder="请输入创建人" />
-      </el-form-item>
-      <el-form-item label="更新人" prop="updateby">
-        <el-input v-model="formData.updateby" placeholder="请输入更新人" />
-      </el-form-item>
     </el-form>
     <template #footer>
       <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
@@ -71,6 +55,7 @@
 </template>
 <script setup lang="ts">
 import { PersonApi, PersonVO } from '@/api/person'
+import dayjs from 'dayjs'
 
 /** 用户基本信息 表单 */
 defineOptions({ name: 'PersonForm' })
@@ -100,7 +85,7 @@ const formData = ref({
   updateby: undefined,
 })
 const formRules = reactive({
-  phone: [{ required: true, message: '手机号(登录账号)不能为空', trigger: 'blur' }],
+  phone: [{ required: true, message: '手机号不能为空', trigger: 'blur' }],
   password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
   name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
   orgid: [{ required: true, message: '机构ID不能为空', trigger: 'blur' }],
@@ -135,10 +120,15 @@ const submitForm = async () => {
   formLoading.value = true
   try {
     const data = formData.value as unknown as PersonVO
+    const datetime = dayjs().format('YYYY-MM-DD HH:mm:ss')
     if (formType.value === 'create') {
+      // 新增时设置创建时间
+      data.createtime = datetime
       await PersonApi.createPerson(data)
       message.success(t('common.createSuccess'))
     } else {
+      // 修改时只更新更新时间
+      data.updatetime = datetime
       await PersonApi.updatePerson(data)
       message.success(t('common.updateSuccess'))
     }

src/views/person/Personmember.vue

@@ -13,21 +13,21 @@
       >
         <Icon icon="ep:plus" /> 添加成员
       </el-button>
+      <span class="member-count">当前成员：{{ memberList.length }} 人</span>
     </div>
     <el-table v-loading="loading" :data="memberList">
+      <el-table-column label="编号" align="center" prop="id" width="60" />
       <el-table-column label="姓名" align="center" prop="name" width="120" />
       <el-table-column label="手机号码" align="center" prop="mobile" width="140" />
       <el-table-column label="年龄" align="center" prop="age" width="80" />
       <el-table-column label="性别" align="center" prop="gender" width="80">
         <template #default="scope">
-        {{ scope.row.gender === 'male' ? '男' : '女' }}
+          <el-tag :type="scope.row.gender === 'male' ? 'primary' : 'success'">
-        </template>
+            {{ scope.row.gender === 'male' ? '男' : '女' }}
-      </el-table-column>
+          </el-tag>
-      <el-table-column label="关系" align="center" prop="relation" width="100">
-        <template #default="scope">
-        {{ scope.row.relation }}
         </template>
       </el-table-column>
+      <el-table-column label="关系" align="center" prop="relation" width="100" />
       <el-table-column label="操作" align="center" width="120">
         <template #default="scope">
           <el-button
@@ -45,7 +45,6 @@
   <!-- 添加成员抽屉 -->
   <member-drawer
     v-model="showTransfer"
-    :all-members="allMembers"
     @confirm="handleAddMembers"
   />
 </template>
@@ -54,6 +53,8 @@
 import { dateFormatter } from '@/utils/formatTime'
 import PersonForm from './PersonFrom.vue'
 import MemberDrawer from './memberdrawer.vue'
+import { PersonApi, PersonVO } from '@/api/person'
+import { ElMessage } from 'element-plus'
 
 defineOptions({ name: 'PersonMember' })
 
@@ -62,7 +63,6 @@ const showTransfer = ref(false)
 const loading = ref(false)
 const memberList = ref<FamilyMember[]>([])
 const currentMember = ref<FamilyMember | null>(null)
-const selectedMembers = ref<FamilyMember[]>([])
 const formRef = ref()
 
 interface FamilyMember {
@@ -74,211 +74,116 @@ interface FamilyMember {
   relation: string
   address: string
   createTime: string
-}
+  familyid: string
-
+  familyrelation: number
-// 模拟所有可选成员数据
-const allMembers = ref<FamilyMember[]>([
-  {
-    id: 5,
-    name: '赵六',
-    mobile: '13800138005',
-    age: 30,
-    gender: 'male',
-    relation: '父亲',
-    address: '北京市海淀区中关村大街2号',
-    createTime: '2024-03-20 10:00:00'
-  },
-  {
-    id: 6,
-    name: '钱七',
-    mobile: '13800138006',
-    age: 28,
-    gender: 'female',
-    relation: '母亲',
-    address: '北京市海淀区中关村大街3号',
-    createTime: '2024-03-20 10:00:00'
-  },
-  {
-    id: 7,
-    name: '孙八',
-    mobile: '13800138007',
-    age: 25,
-    gender: 'male',
-    relation: '兄弟',
-    address: '北京市海淀区中关村大街4号',
-    createTime: '2024-03-20 10:00:00'
-  },
-  {
-    id: 8,
-    name: '周九',
-    mobile: '13800138008',
-    age: 22,
-    gender: 'female',
-    relation: '姐妹',
-    address: '北京市海淀区中关村大街5号',
-    createTime: '2024-03-20 10:00:00'
-  },
-  {
-    id: 9,
-    name: '吴十',
-    mobile: '13800138009',
-    age: 20,
-    gender: 'male',
-    relation: '兄弟',
-    address: '北京市海淀区中关村大街6号',
-    createTime: '2024-03-20 10:00:00'
-  },
-  {
-    id: 10,
-    name: '郑十一',
-    mobile: '13800138010',
-    age: 18,
-    gender: 'female',
-    relation: '姐妹',
-    address: '北京市海淀区中关村大街7号',
-    createTime: '2024-03-20 10:00:00'
-  },
-  {
-    id: 11,
-    name: '王十二',
-    mobile: '13800138011',
-    age: 16,
-    gender: 'male',
-    relation: '兄弟',
-    address: '北京市海淀区中关村大街8号',
-    createTime: '2024-03-20 10:00:00'
-  },
-  {
-    id: 12,
-    name: '赵十三',
-    mobile: '13800138010',
-    age: 48,
-    gender: 'female',
-    relation: '舅妈',
-    address: '北京市朝阳区建国路10号',
-    createTime: '2024-03-20 10:00:00'
-  },
-  {
-    id: 13,
-    name: '赵十四',
-    mobile: '13800138010',
-    age: 48,
-    gender: 'female',
-    relation: '舅妈',
-    address: '北京市朝阳区建国路10号',
-    createTime: '2024-03-20 10:00:00'
-  },
-  {
-    id: 14,
-    name: '赵十五',
-    mobile: '13800138010',
-    age: 48,
-    gender: 'male',
-    relation: '舅妈',
-    address: '北京市朝阳区建国路10号',
-    createTime: '2024-03-20 10:00:00'
-  }
-  ])
-
-// 模拟数据 - 这里应该根据实际业务逻辑从后端获取数据
-const mockMemberData = {
-  1: [
-    {
-      id: 4,
-      name: '张小明',
-      mobile: '13800138004',
-      age: 12,
-      gender: 'male',
-      relation: '儿子',
-      address: '北京市朝阳区建国路88号',
-      createTime: '2024-03-20 10:00:00'
-    }
-  ],
-  2: [],
-  3: [],
-  4: []
 }
 
 const open = (member: FamilyMember) => {
   currentMember.value = member
+  memberList.value = [] // 重置成员列表
   dialogVisible.value = true
   getMemberList()
 }
 
 const getMemberList = async () => {
+  if (!currentMember.value?.familyid) return
+  
   loading.value = true
   try {
-    // 模拟API调用
+    const res = await PersonApi.getMembersByFamilyid(currentMember.value.familyid)
-    await new Promise(resolve => setTimeout(resolve, 500))
+    memberList.value = res.map((item: PersonVO) => ({
-    if (currentMember.value) {
+      id: item.id,
-      memberList.value = mockMemberData[currentMember.value.id] || []
+      name: item.name,
-    }
+      mobile: item.phone,
+      relation: getFamilyRelation(item.familyrelation),
+      address: item.address || '',
+      createTime: item.createtime,
+      familyid: item.familyid,
+      familyrelation: item.familyrelation
+    }))
+  } catch (error) {
+    console.error('获取成员列表失败:', error)
   } finally {
     loading.value = false
   }
 }
 
-// 判断是否可选
+// 获取家庭关系文本
-const isSelectable = (row: FamilyMember) => {
+const getFamilyRelation = (relation: number): string => {
-  return selectedMembers.value.length < 5 || selectedMembers.value.some(item => item.id === row.id)
+  const relationMap: Record<number, string> = {
-}
+    1: '主号',
-
+    2: '兄弟',
-// 处理选择变化
+    3: '父亲',
-const handleSelectionChange = (selection: FamilyMember[]) => {
+    4: '母亲',
-  if (selection.length > 5) {
+    5: '子女',
-    // 如果超过5个，只保留前5个
+    6: '其他'
-    selectedMembers.value = selection.slice(0, 5)
-  } else {
-    selectedMembers.value = selection
   }
+  return relationMap[relation] || '其他'
 }
 
 /** 添加成员 */
 const handleAddMembers = async (members: FamilyMember[]) => {
   if (!currentMember.value) return
   
-  // 模拟API调用
+  // 检查添加后是否超过5人限制
-  await new Promise(resolve => setTimeout(resolve, 500))
+  if (memberList.value.length + members.length > 5) {
-  
+    ElMessage.warning('家庭成员不能超过5人')
-  // 更新成员列表
+    return
-  if (!mockMemberData[currentMember.value.id]) {
-    mockMemberData[currentMember.value.id] = []
   }
-  mockMemberData[currentMember.value.id].push(...members)
   
-  // 刷新列表
+  try {
-  await getMemberList()
+    loading.value = true
+    // 调用后端API更新选中成员的家庭组号
+    for (const member of members) {
+      await PersonApi.addMembers(member.id, currentMember.value.familyid)
+    }
+    
+    // 更新本地列表
+    memberList.value.push(...members)
+  } finally {
+    loading.value = false
+  }
 }
 
 /** 移除成员 */
 const handleRemove = async (row: FamilyMember) => {
   if (!currentMember.value) return
   
-  // 模拟API调用
+  // 判断是否为主号
-  await new Promise(resolve => setTimeout(resolve, 500))
+  if (row.familyrelation === 1) {
-  
+    ElMessage.warning('主号不允许移除')
-  // 从列表中移除
+    return
-  const index = mockMemberData[currentMember.value.id].findIndex(
-    member => member.id === row.id
-  )
-  if (index > -1) {
-    mockMemberData[currentMember.value.id].splice(index, 1)
   }
   
-  // 刷新列表
+  try {
-  await getMemberList()
+    loading.value = true
-}
+    // 调用后端API移除成员关联
+    await PersonApi.removeMembers(row.id)
     
-/** 添加/修改操作 */
+    // 从列表中移除
-const openForm = (type: string, id?: number) => {
+    const index = memberList.value.findIndex(member => member.id === row.id)
-  formRef.value?.open(type, id)
+    if (index > -1) {
-}
+      memberList.value.splice(index, 1)
-
+    }
-const handleSuccess = () => {
+  } finally {
-  getMemberList()
+    loading.value = false
+  }
 }
 
 defineExpose({
   open
 })
 </script>
+
+<style scoped>
+.mb-15px {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.member-count {
+  color: #409EFF;
+  font-size: 14px;
+}
+</style>

src/views/person/index.vue

@@ -107,20 +107,6 @@
             :show-overflow-tooltip="true"
             min-width="180"
           />
-          <el-table-column
-            label="创建时间"
-            align="center"
-            prop="createtime"
-            :formatter="dateFormatter"
-            width="160"
-          />
-          <el-table-column
-            label="更新时间"
-            align="center"
-            prop="updatetime"
-            :formatter="dateFormatter"
-            width="160"
-          />
           <el-table-column
             label="创建人"
             align="center"
@@ -248,7 +234,7 @@ const handleSuccess = () => {
 /** 获取家庭关系标签 */
 const getFamilyRelationLabel = (relation: number) => {
   const relationMap = {
-    1: '本人',
+    1: '主号',
     2: '兄弟',
     3: '父亲',
     4: '母亲',

src/views/person/memberdrawer.vue

@@ -7,30 +7,39 @@
   >
     <div class="drawer-content">
       <div class="search-box">
-        <el-input v-model="searchForm.name" placeholder="请输入姓名" clearable style="width: 180px; margin-right: 10px;" />
+        <el-input v-model="queryParams.name" placeholder="请输入姓名" clearable style="width: 180px; margin-right: 10px;" />
-        <el-input v-model="searchForm.mobile" placeholder="请输入手机号码" clearable style="width: 180px; margin-right: 10px;" />
+        <el-input v-model="queryParams.mobile" placeholder="请输入手机号码" clearable style="width: 180px; margin-right: 10px;" />
-      </div>
+        <el-button type="primary" @click="handleQuery">
-      <div class="drawer-header">
+          <Icon icon="ep:search" class="mr-5px" /> 搜索
-        <span class="selected-count">已选择 {{ selectedMembers.length }}/5 人</span>
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon icon="ep:refresh" class="mr-5px" /> 重置
+        </el-button>
       </div>
       <div class="table-container">
         <el-table
-          :data="filteredMembers"
+          :data="list"
           style="width: 100%"
           @selection-change="handleSelectionChange"
+          v-loading="loading"
         >
-          <el-table-column type="selection" width="55" :selectable="isSelectable" />
+          <el-table-column type="selection" width="55" />
+          <el-table-column label="编号" prop="id" />
           <el-table-column label="姓名" prop="name" />
-          <el-table-column label="性别" prop="gender">
-            <template #default="scope">
-              <el-tag :type="scope.row.gender === 'male' ? 'primary' : 'success'">
-                {{ scope.row.gender === 'male' ? '男' : '女' }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column label="年龄" prop="age" />
           <el-table-column label="手机号码" prop="mobile" />
         </el-table>
+        <!-- 分页控件 -->
+        <div class="pagination-container">
+          <el-pagination
+            v-model:current-page="queryParams.pageNo"
+            v-model:page-size="queryParams.pageSize"
+            :total="total"
+            :page-sizes="[10, 20, 50, 100]"
+            layout="total, sizes, prev, pager, next, jumper"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          />
+        </div>
       </div>
       <div class="drawer-footer">
         <el-button @click="handleCancel">取 消</el-button>
@@ -43,7 +52,9 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from 'vue'
+import { ref, computed, watch, onMounted } from 'vue'
+import { PersonApi, type PersonVO } from '@/api/person'
+import { Icon } from '@/components/Icon'
 
 interface FamilyMember {
   id: number
@@ -58,7 +69,6 @@ interface FamilyMember {
 
 const props = defineProps<{
   modelValue: boolean
-  allMembers: FamilyMember[]
 }>()
 
 const emit = defineEmits<{
@@ -68,23 +78,86 @@ const emit = defineEmits<{
 
 const visible = ref(props.modelValue)
 const selectedMembers = ref<FamilyMember[]>([])
-const searchForm = ref({
+const list = ref<FamilyMember[]>([])
+const loading = ref(false)
+const total = ref(0)
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
   name: '',
   mobile: ''
 })
 
-// 过滤后的成员列表
+// 获取成员数据
-const filteredMembers = computed(() => {
+const getList = async () => {
-  return props.allMembers.filter(member => {
+  try {
-    const nameMatch = !searchForm.value.name || member.name.includes(searchForm.value.name)
+    loading.value = true
-    const mobileMatch = !searchForm.value.mobile || member.mobile.includes(searchForm.value.mobile)
+    const res = await PersonApi.getPersonNoFamilyid(queryParams)
-    return nameMatch && mobileMatch
+    if (res.list) {
-  })
+      list.value = res.list.map((item: PersonVO) => ({
-})
+        id: item.id,
+        name: item.name,
+        mobile: item.phone,
+        relation: getFamilyRelation(item.familyrelation),
+        address: item.address || '',
+        createTime: item.createtime,
+        familyid: item.familyid,
+        familyrelation: item.familyrelation
+      }))
+      total.value = res.total
+    }
+  } catch (error) {
+    console.error('获取成员数据失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 获取家庭关系文本
+const getFamilyRelation = (relation: number): string => {
+  const relationMap: Record<number, string> = {
+    1: '本人',
+    2: '兄弟',
+    3: '父亲',
+    4: '母亲',
+    5: '子女',
+    6: '其他'
+  }
+  return relationMap[relation] || '其他'
+}
+
+// 搜索按钮操作
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+// 重置按钮操作
+const resetQuery = () => {
+  queryParams.pageNo = 1
+  queryParams.name = ''
+  queryParams.mobile = ''
+  getList()
+}
+
+// 处理每页显示数量变化
+const handleSizeChange = (val: number) => {
+  queryParams.pageSize = val
+  getList()
+}
+
+// 处理页码变化
+const handleCurrentChange = (val: number) => {
+  queryParams.pageNo = val
+  getList()
+}
 
 // 监听visible变化
 watch(() => props.modelValue, (val) => {
   visible.value = val
+  if (val) {
+    getList()
+  }
 })
 
 // 监听visible变化并同步到父组件
@@ -94,17 +167,12 @@ watch(visible, (val) => {
 
 // 判断是否可选
 const isSelectable = (row: FamilyMember) => {
-  return selectedMembers.value.length < 5 || selectedMembers.value.some(item => item.id === row.id)
+  return true
 }
 
 // 处理选择变化
 const handleSelectionChange = (selection: FamilyMember[]) => {
-  if (selection.length > 5) {
+  selectedMembers.value = selection
-    // 如果超过5个，只保留前5个
-    selectedMembers.value = selection.slice(0, 5)
-  } else {
-    selectedMembers.value = selection
-  }
 }
 
 // 取消
@@ -118,16 +186,11 @@ const handleConfirm = () => {
   emit('confirm', selectedMembers.value)
   handleCancel()
 }
-
-// 搜索
-const handleSearch = () => {
-  // 搜索逻辑已通过计算属性实现
-}
 </script>
 
 <style scoped>
 .drawer-content {
-  height: 89%;
+  height: 100%;
   display: flex;
   flex-direction: column;
 }
@@ -135,17 +198,8 @@ const handleSearch = () => {
 .search-box {
   padding: 16px;
   border-bottom: 1px solid #e4e7ed;
-}
-
-.drawer-header {
   display: flex;
-  justify-content: flex-end;
+  align-items: center;
-  padding: 10px 16px;
-}
-
-.selected-count {
-  color: #409EFF;
-  font-size: 14px;
 }
 
 .table-container {
@@ -153,10 +207,12 @@ const handleSearch = () => {
   overflow: auto;
   height: calc(100vh - 250px);
   margin: 0 16px;
+  display: flex;
+  flex-direction: column;
 }
 
 :deep(.el-table) {
-  height: 100%;
+  flex: 1;
 }
 
 :deep(.el-table__header-wrapper) {
@@ -169,6 +225,12 @@ const handleSearch = () => {
   overflow-y: auto;
 }
 
+.pagination-container {
+  padding: 16px 0;
+  display: flex;
+  justify-content: flex-end;
+}
+
 .drawer-footer {
   padding: 16px;
   text-align: right;