172 lines
4.0 KiB
Vue
172 lines
4.0 KiB
Vue
<template>
|
|
<el-dialog
|
|
model-value="dialogUpdateVisible"
|
|
:title="dialogTitle"
|
|
width="30%"
|
|
@close="handleClose"
|
|
>
|
|
<el-form
|
|
ref="formRef"
|
|
:model="form"
|
|
label-width="100px"
|
|
>
|
|
<el-form-item label="用户头像" prop="avatarUrl">
|
|
<!-- {{ form.avatarUrl }}-->
|
|
<el-input v-model="form.avatarUrl"/>
|
|
</el-form-item>
|
|
<el-form-item label="用户昵称" prop="username">
|
|
<el-input v-model="form.username"/>
|
|
</el-form-item>
|
|
<el-form-item label="用户ID" prop="id">
|
|
<el-input v-model="form.id"/>
|
|
</el-form-item>
|
|
<el-form-item label="性别" prop="gender">
|
|
<template v-if="form.gender==0">女</template>
|
|
<template v-else>男</template>
|
|
|
|
|
|
<el-radio-group v-model="form.gender">
|
|
<el-radio :value="0" size="default">女</el-radio>
|
|
<el-radio :value="1" size="default">男</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="电话" prop="phone">
|
|
<el-input v-model="form.phone"/>
|
|
</el-form-item>
|
|
<el-form-item label="邮箱" prop="email">
|
|
<el-input v-model="form.email"/>
|
|
</el-form-item>
|
|
<el-form-item label="用户状态" prop="userStatus">
|
|
<el-input v-model="form.userStatus"/>
|
|
</el-form-item>
|
|
<el-form-item label="用户角色" prop="userRole">
|
|
<!-- {{form.userRole}}-->
|
|
<!-- {{labelt}}-->
|
|
<!-- 展示由于v-model绑定出现v-model的form.userRole的值-->
|
|
<el-select
|
|
v-model="form.userRole"
|
|
size="default"
|
|
placeholder="用户角色"
|
|
style="width: 100%"
|
|
>
|
|
|
|
<el-option
|
|
v-for="item in options"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</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, defineProps, ref, watch} from "vue";
|
|
import axios from "@/util/axios";
|
|
import {ElMessage} from "element-plus";
|
|
|
|
const props = defineProps({
|
|
id: {
|
|
type: String,
|
|
default: -1,
|
|
required: true
|
|
},
|
|
dialogTitle: {
|
|
type: String,
|
|
default: '',
|
|
required: true
|
|
}
|
|
})
|
|
const labelt=ref('')
|
|
|
|
const form = ref({
|
|
id:null,
|
|
avatarUrl: "",
|
|
email: "",
|
|
gender: null,
|
|
phone: null,
|
|
userRole: null,
|
|
userStatus: null,
|
|
username: ""
|
|
})
|
|
|
|
const options = [
|
|
{
|
|
value: '',
|
|
label: '用户身份',
|
|
},
|
|
{
|
|
value: '0',
|
|
label: '普通用户',
|
|
},
|
|
{
|
|
value: '1',
|
|
label: '管理员',
|
|
},
|
|
{
|
|
value: '2',
|
|
label: '商家',
|
|
},
|
|
{
|
|
value: '3',
|
|
label: '美甲师',
|
|
},
|
|
|
|
]
|
|
|
|
|
|
const formRef = ref(null);
|
|
const initFormData = async (ids) => {
|
|
const res = await axios.get("user/getById", {id: ids})
|
|
form.value = res.data.data;
|
|
labelt.value=options[form.value.userRole].label
|
|
// console.log(options[form.value.userRole].label)
|
|
}
|
|
|
|
|
|
watch(
|
|
() => props.id,
|
|
() => {
|
|
// console.log("id=" + props.useraccount);
|
|
let ids = props.id;
|
|
initFormData(ids)
|
|
}
|
|
)
|
|
// 定义父组件事件
|
|
const emits = defineEmits(['update:modelValue', 'initUserList'])
|
|
const handleClose = () => {
|
|
console.log("xxx")
|
|
// 调用执行
|
|
emits('update:modelValue', false)
|
|
}
|
|
const handleConfirm = () => {
|
|
formRef.value.validate(async (valid) => {
|
|
if (valid) {
|
|
let result = await axios.post("user/update", form.value)
|
|
let data = result.data;
|
|
if (data.code == 0) {
|
|
ElMessage.success("执行成功！");
|
|
formRef.value.resetFields();
|
|
emits("initUserList");
|
|
handleClose();
|
|
} else {
|
|
ElMessage.error(data.description);
|
|
}
|
|
} else {
|
|
console.log("fail")
|
|
return false
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
</style>
|
|
|