145 lines
3.1 KiB
Vue
145 lines
3.1 KiB
Vue
<template>
|
|
<el-dialog
|
|
:model-value="dialogVisible"
|
|
:title="dialogTitle"
|
|
width="30%"
|
|
@close="handleClose"
|
|
>
|
|
<el-form
|
|
ref="ruleFormRef"
|
|
:model="ruleForm"
|
|
:rules="rules"
|
|
label-width="120px"
|
|
status-icon
|
|
>
|
|
<el-form-item label="用户名" prop="username">
|
|
<el-input v-model="ruleForm.username" />
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="密码"
|
|
prop="password"
|
|
v-if="dialogTitle === '添加用户'"
|
|
>
|
|
<el-input v-model="ruleForm.password" type="password" />
|
|
</el-form-item>
|
|
<el-form-item label="邮箱" prop="email">
|
|
<el-input v-model="ruleForm.email" />
|
|
</el-form-item>
|
|
<el-form-item label="手机号" prop="mobile">
|
|
<el-input v-model="ruleForm.mobile" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<span class="dialog-footer">
|
|
<el-button @click="handleClose">取消</el-button>
|
|
<el-button type="primary" @click="handleConfirm">确认</el-button>
|
|
</span>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineEmits, ref, defineProps, watch } from 'vue'
|
|
// import { defineEmits, ref, defineProps } from 'vue'
|
|
import { addUser, editUser } from '@/api/user'
|
|
import i18n from '@/i18n/i18nIndex'
|
|
import { ElMessage } from 'element-plus'
|
|
|
|
const props = defineProps({
|
|
dialogTitle: {
|
|
type: String,
|
|
default: '',
|
|
required: true
|
|
},
|
|
dialogTableValue: {
|
|
type: Object,
|
|
default: () => {}
|
|
}
|
|
})
|
|
|
|
const ruleFormRef = ref(null)
|
|
const ruleForm = ref({
|
|
username: '',
|
|
password: '',
|
|
email: '',
|
|
mobile: ''
|
|
})
|
|
|
|
const rules = ref({
|
|
username: [
|
|
{
|
|
required: true,
|
|
message: '请输入用户名。',
|
|
trigger: 'blur'
|
|
}
|
|
],
|
|
password: [
|
|
{
|
|
required: true,
|
|
message: '请输入用户密码。',
|
|
trigger: 'blur'
|
|
}
|
|
],
|
|
email: [
|
|
{
|
|
required: true,
|
|
message: '请输入用户邮箱。',
|
|
trigger: 'blur'
|
|
},
|
|
{
|
|
type: 'email',
|
|
message: '请输入正确的邮箱地址。',
|
|
trigger: ['blur', 'change']
|
|
}
|
|
],
|
|
mobile: [
|
|
{
|
|
required: true,
|
|
message: '请输入用户手机号。',
|
|
trigger: 'blur'
|
|
}
|
|
]
|
|
})
|
|
|
|
// 监听对话框数值的改变
|
|
watch(
|
|
() => props.dialogTableValue,
|
|
() => {
|
|
// console.log(props.dialogTableValue)
|
|
ruleForm.value = props.dialogTableValue
|
|
},
|
|
{ deep: true, immediate: true }
|
|
)
|
|
|
|
const emits = defineEmits(['update:modelValue', 'initUserList'])
|
|
|
|
const handleClose = () => {
|
|
emits('update:modelValue', false)
|
|
}
|
|
// 确认按钮
|
|
const handleConfirm = () => {
|
|
ruleFormRef.value.validate(async (valid) => {
|
|
if (valid) {
|
|
props.dialogTitle === '添加用户'
|
|
? await addUser(ruleForm.value)
|
|
: await editUser(ruleForm.value)
|
|
ElMessage({
|
|
// showClose: true,
|
|
message: i18n.global.t('message.updeteSuccess'),
|
|
type: 'success'
|
|
})
|
|
emits('initUserList')
|
|
handleClose()
|
|
} else {
|
|
ElMessage({
|
|
message: '请检查输入内容。',
|
|
type: 'error'
|
|
})
|
|
return false
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|