157 lines
3.9 KiB
Vue
157 lines
3.9 KiB
Vue
<template>
|
|
<el-dialog
|
|
v-model="visible"
|
|
title="选择归属用户"
|
|
width="700px"
|
|
:close-on-click-modal="false"
|
|
append-to-body
|
|
>
|
|
<!-- 搜索区域 -->
|
|
<el-form :inline="true" style="margin-bottom: 16px">
|
|
<el-form-item label="手机号">
|
|
<el-input v-model="queryParams.phone" placeholder="请输入手机号" clearable style="width: 150px" @keyup.enter="handleQuery" />
|
|
</el-form-item>
|
|
<el-form-item label="昵称">
|
|
<el-input v-model="queryParams.nickname" placeholder="请输入昵称" clearable style="width: 150px" @keyup.enter="handleQuery" />
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="handleQuery">搜索</el-button>
|
|
<el-button @click="resetQuery">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<!-- 列表 -->
|
|
<el-table
|
|
v-loading="loading"
|
|
:data="tableData"
|
|
border
|
|
stripe
|
|
highlight-current-row
|
|
@current-change="handleCurrentChange"
|
|
style="width: 100%"
|
|
max-height="400"
|
|
>
|
|
<el-table-column prop="phone" label="手机号" width="130" />
|
|
<el-table-column prop="nickname" label="昵称" width="120" />
|
|
<el-table-column prop="identityType" label="身份" width="80" align="center">
|
|
<template #default="{ row }">
|
|
<el-tag :type="row.identityType === '1' ? 'success' : 'primary'" size="small">
|
|
{{ row.identityType === '1' ? '家长' : '教师' }}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="gender" label="性别" width="60" align="center">
|
|
<template #default="{ row }">
|
|
{{ row.gender === '1' ? '男' : row.gender === '2' ? '女' : '未知' }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="createTime" label="注册时间" width="160" />
|
|
</el-table>
|
|
|
|
<!-- 分页 -->
|
|
<el-pagination
|
|
v-model:current-page="queryParams.pageNum"
|
|
v-model:page-size="queryParams.pageSize"
|
|
:page-sizes="[10, 20, 50]"
|
|
:total="total"
|
|
layout="total, sizes, prev, pager, next"
|
|
style="margin-top: 16px; justify-content: flex-end"
|
|
@size-change="getList"
|
|
@current-change="getList"
|
|
/>
|
|
|
|
<template #footer>
|
|
<el-button @click="visible = false">取消</el-button>
|
|
<el-button type="primary" @click="handleConfirm" :disabled="!selectedRow">确定</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
/**
|
|
* 会员选择弹窗
|
|
* @author pangu
|
|
*/
|
|
import { ElMessage } from 'element-plus'
|
|
import { ref } from 'vue'
|
|
import request from '@/utils/request'
|
|
|
|
const emit = defineEmits(['select'])
|
|
|
|
const visible = ref(false)
|
|
const loading = ref(false)
|
|
const tableData = ref([])
|
|
const total = ref(0)
|
|
const selectedRow = ref(null)
|
|
|
|
const queryParams = ref({
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
phone: '',
|
|
nickname: ''
|
|
})
|
|
|
|
// 获取会员列表
|
|
const getList = async () => {
|
|
loading.value = true
|
|
try {
|
|
const res = await request.get('/business/member/list', { params: queryParams.value })
|
|
if (res.code === 200) {
|
|
tableData.value = res.rows || []
|
|
total.value = res.total || 0
|
|
}
|
|
} catch (e) {
|
|
console.error('获取会员列表失败:', e)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
// 搜索
|
|
const handleQuery = () => {
|
|
queryParams.value.pageNum = 1
|
|
getList()
|
|
}
|
|
|
|
// 重置
|
|
const resetQuery = () => {
|
|
queryParams.value = {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
phone: '',
|
|
nickname: ''
|
|
}
|
|
getList()
|
|
}
|
|
|
|
// 选中行变化
|
|
const handleCurrentChange = (row) => {
|
|
selectedRow.value = row
|
|
}
|
|
|
|
// 确认选择
|
|
const handleConfirm = () => {
|
|
if (!selectedRow.value) {
|
|
ElMessage.warning('请选择一个会员')
|
|
return
|
|
}
|
|
emit('select', selectedRow.value)
|
|
visible.value = false
|
|
}
|
|
|
|
// 打开弹窗
|
|
const open = () => {
|
|
visible.value = true
|
|
selectedRow.value = null
|
|
queryParams.value = {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
phone: '',
|
|
nickname: ''
|
|
}
|
|
getList()
|
|
}
|
|
|
|
defineExpose({ open })
|
|
</script>
|