92 lines
2.1 KiB
Vue
92 lines
2.1 KiB
Vue
<template>
|
|
<Dialog v-model="dialogVisible" title="新增会员" width="500px" @close="handleClose">
|
|
<el-form :model="form" label-width="100px" :rules="rules" ref="formRef">
|
|
<el-form-item label="姓名" prop="name">
|
|
<el-input v-model="form.name" placeholder="请输入姓名" />
|
|
</el-form-item>
|
|
<el-form-item label="手机号" prop="phone">
|
|
<el-input v-model="form.phone" placeholder="请输入手机号" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="handleClose">取 消</el-button>
|
|
<el-button type="primary" @click="handleSubmit">确 定</el-button>
|
|
</template>
|
|
</Dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, defineEmits, defineProps, watch } from 'vue'
|
|
import { ElMessage } from 'element-plus'
|
|
|
|
const props = defineProps({
|
|
visible: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['update:visible', 'success'])
|
|
|
|
const dialogVisible = ref(props.visible)
|
|
const formRef = ref(null)
|
|
|
|
const form = ref({
|
|
name: '',
|
|
phone: ''
|
|
})
|
|
|
|
const rules = {
|
|
name: [
|
|
{ required: true, message: '请输入姓名', trigger: 'blur' }
|
|
],
|
|
phone: [
|
|
{ required: true, message: '请输入手机号', trigger: 'blur' },
|
|
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
|
|
]
|
|
}
|
|
|
|
// 监听visible属性变化
|
|
watch(() => props.visible, (val) => {
|
|
dialogVisible.value = val
|
|
})
|
|
|
|
// 监听dialogVisible变化
|
|
watch(dialogVisible, (val) => {
|
|
emit('update:visible', val)
|
|
})
|
|
|
|
const handleClose = () => {
|
|
dialogVisible.value = false
|
|
form.value = {
|
|
name: '',
|
|
phone: ''
|
|
}
|
|
formRef.value?.resetFields()
|
|
}
|
|
|
|
const handleSubmit = async () => {
|
|
if (!formRef.value) return
|
|
|
|
await formRef.value.validate((valid) => {
|
|
if (valid) {
|
|
// 生成一个随机的会员数据
|
|
const newMember = {
|
|
id: Date.now(),
|
|
name: form.value.name,
|
|
phone: form.value.phone,
|
|
vipStatus: false,
|
|
vipExpireDate: ''
|
|
}
|
|
emit('success', newMember)
|
|
handleClose()
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
:deep(.el-form-item) {
|
|
margin-bottom: 22px;
|
|
}
|
|
</style> |