137 lines
3.1 KiB
Vue
137 lines
3.1 KiB
Vue
|
<template>
|
|||
|
|
<el-drawer
|
|||
|
|
v-model="visible"
|
|||
|
|
title="添加成员"
|
|||
|
|
size="600px"
|
|||
|
|
:destroy-on-close="true"
|
|||
|
|
>
|
|||
|
|
<div class="drawer-content">
|
|||
|
|
<div class="drawer-header">
|
|||
|
|
<span class="selected-count">已选择 {{ selectedMembers.length }}/5 人</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="table-container">
|
|||
|
|
<el-table
|
|||
|
|
:data="allMembers"
|
|||
|
|
style="width: 100%"
|
|||
|
|
@selection-change="handleSelectionChange"
|
|||
|
|
>
|
|||
|
|
<el-table-column type="selection" width="55" :selectable="isSelectable" />
|
|||
|
|
<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>
|
|||
|
|
<div class="drawer-footer">
|
|||
|
|
<el-button @click="handleCancel">取 消</el-button>
|
|||
|
|
<el-button type="primary" @click="handleConfirm" :disabled="selectedMembers.length === 0">
|
|||
|
|
确 定
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-drawer>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts" setup>
|
|||
|
|
import { ref } from 'vue'
|
|||
|
|
|
|||
|
|
interface FamilyMember {
|
|||
|
|
id: number
|
|||
|
|
name: string
|
|||
|
|
mobile: string
|
|||
|
|
age: number
|
|||
|
|
gender: string
|
|||
|
|
relation: string
|
|||
|
|
address: string
|
|||
|
|
createTime: string
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const props = defineProps<{
|
|||
|
|
modelValue: boolean
|
|||
|
|
allMembers: FamilyMember[]
|
|||
|
|
}>()
|
|||
|
|
|
|||
|
|
const emit = defineEmits<{
|
|||
|
|
(e: 'update:modelValue', value: boolean): void
|
|||
|
|
(e: 'confirm', members: FamilyMember[]): void
|
|||
|
|
}>()
|
|||
|
|
|
|||
|
|
const visible = ref(props.modelValue)
|
|||
|
|
const selectedMembers = ref<FamilyMember[]>([])
|
|||
|
|
|
|||
|
|
// 监听visible变化
|
|||
|
|
watch(() => props.modelValue, (val) => {
|
|||
|
|
visible.value = val
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 监听visible变化并同步到父组件
|
|||
|
|
watch(visible, (val) => {
|
|||
|
|
emit('update:modelValue', val)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 判断是否可选
|
|||
|
|
const isSelectable = (row: FamilyMember) => {
|
|||
|
|
return selectedMembers.value.length < 5 || selectedMembers.value.some(item => item.id === row.id)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理选择变化
|
|||
|
|
const handleSelectionChange = (selection: FamilyMember[]) => {
|
|||
|
|
if (selection.length > 5) {
|
|||
|
|
// 如果超过5个，只保留前5个
|
|||
|
|
selectedMembers.value = selection.slice(0, 5)
|
|||
|
|
} else {
|
|||
|
|
selectedMembers.value = selection
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 取消
|
|||
|
|
const handleCancel = () => {
|
|||
|
|
visible.value = false
|
|||
|
|
selectedMembers.value = []
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 确认
|
|||
|
|
const handleConfirm = () => {
|
|||
|
|
emit('confirm', selectedMembers.value)
|
|||
|
|
handleCancel()
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.drawer-header {
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.selected-count {
|
|||
|
|
color: #409EFF;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.drawer-content {
|
|||
|
|
padding: 20px;
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.table-container {
|
|||
|
|
flex: 1;
|
|||
|
|
overflow: auto;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.drawer-footer {
|
|||
|
|
padding-top: 20px;
|
|||
|
|
text-align: right;
|
|||
|
|
border-top: 1px solid #e4e7ed;
|
|||
|
|
}
|
|||
|
|
</style>
|