人员列表样式

src/views/person/Personmember.vue

@@ -107,8 +107,78 @@ const allMembers = ref<FamilyMember[]>([
     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 = {

src/views/person/memberdrawer.vue

@@ -6,12 +6,16 @@
     :destroy-on-close="true"
   >
     <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="searchForm.mobile" placeholder="请输入手机号码" clearable style="width: 180px; margin-right: 10px;" />
+      </div>
       <div class="drawer-header">
         <span class="selected-count">已选择 {{ selectedMembers.length }}/5 人</span>
       </div>
       <div class="table-container">
         <el-table
-          :data="allMembers"
+          :data="filteredMembers"
           style="width: 100%"
           @selection-change="handleSelectionChange"
         >
@@ -39,7 +43,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 
 interface FamilyMember {
   id: number
@@ -64,6 +68,19 @@ const emit = defineEmits<{
 
 const visible = ref(props.modelValue)
 const selectedMembers = ref<FamilyMember[]>([])
+const searchForm = ref({
+  name: '',
+  mobile: ''
+})
+
+// 过滤后的成员列表
+const filteredMembers = computed(() => {
+  return props.allMembers.filter(member => {
+    const nameMatch = !searchForm.value.name || member.name.includes(searchForm.value.name)
+    const mobileMatch = !searchForm.value.mobile || member.mobile.includes(searchForm.value.mobile)
+    return nameMatch && mobileMatch
+  })
+})
 
 // 监听visible变化
 watch(() => props.modelValue, (val) => {
@@ -101,13 +118,29 @@ const handleConfirm = () => {
   emit('confirm', selectedMembers.value)
   handleCancel()
 }
+
+// 搜索
+const handleSearch = () => {
+  // 搜索逻辑已通过计算属性实现
+}
 </script>
 
 <style scoped>
+.drawer-content {
+  height: 89%;
+  display: flex;
+  flex-direction: column;
+}
+
+.search-box {
+  padding: 16px;
+  border-bottom: 1px solid #e4e7ed;
+}
+
 .drawer-header {
-  margin-bottom: 20px;
   display: flex;
   justify-content: flex-end;
+  padding: 10px 16px;
 }
 
 .selected-count {
@@ -115,21 +148,29 @@ const handleConfirm = () => {
   font-size: 14px;
 }
 
-.drawer-content {
-  padding: 20px;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
 .table-container {
   flex: 1;
   overflow: auto;
-  margin-bottom: 20px;
+  height: calc(100vh - 250px);
+  margin: 0 16px;
+}
+
+:deep(.el-table) {
+  height: 100%;
+}
+
+:deep(.el-table__header-wrapper) {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+:deep(.el-table__body-wrapper) {
+  overflow-y: auto;
 }
 
 .drawer-footer {
-  padding-top: 20px;
+  padding: 16px;
   text-align: right;
   border-top: 1px solid #e4e7ed;
 }