forked from lxbfYeaaGbeDLMCi/deShanXiao
144 lines
3.4 KiB
Vue
144 lines
3.4 KiB
Vue
<template>
|
||
<el-form
|
||
:model="user"
|
||
label-width="100px"
|
||
:inline="true"
|
||
label-suffix="："
|
||
v-loading="loading"
|
||
element-loading-text="正在初始化数据...">
|
||
<el-form-item label="姓名">
|
||
<el-input :prefix-icon="User" v-model="user.name" placeholder="姓名">
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="性别">
|
||
<el-radio-group v-model="user.sex">
|
||
<el-radio value="男">男</el-radio>
|
||
<el-radio value="女">女</el-radio>
|
||
<el-radio value="保密">保密</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="电话">
|
||
<el-input
|
||
:prefix-icon="Iphone"
|
||
v-model="user.phone"
|
||
placeholder="电话"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="所属角色">
|
||
<el-select
|
||
v-model="user.role"
|
||
clearable
|
||
filterable
|
||
placeholder="请选择角色"
|
||
style="width: 230px">
|
||
<el-option
|
||
v-for="item in roleList"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="String(item.id)"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="生日">
|
||
<el-date-picker
|
||
format="YYYYH-MM-DD"
|
||
v-model="user.birthday"
|
||
type="date"
|
||
placeholder="生日"
|
||
size="large" />
|
||
</el-form-item>
|
||
<el-form-item label="所在区域">
|
||
<el-cascader
|
||
:options="pcaTextArrData"
|
||
v-model="selectedOptions"
|
||
@change="pcaChange"></el-cascader>
|
||
</el-form-item>
|
||
<el-form-item label="详细地址">
|
||
<el-input
|
||
:prefix-icon="Location"
|
||
v-model="user.address"
|
||
placeholder="请输入详细地址"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="账号状态">
|
||
<el-switch
|
||
v-model="user.userState"
|
||
:active-value="1"
|
||
:inactive-value="0"
|
||
active-text="启用"
|
||
width="65px"
|
||
inline-prompt
|
||
inactive-text="禁用"></el-switch>
|
||
</el-form-item>
|
||
</el-form>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { onMounted, ref, watch } from "vue";
|
||
import { userType } from "@/types/user";
|
||
// @ts-ignore
|
||
import { pcaTextArr } from "element-china-area-data";
|
||
import { Avatar, Location, Iphone, User } from "@element-plus/icons-vue";
|
||
import { roleType } from "@/types/role";
|
||
import { roleDataList } from "@/lib/api/publicApiList";
|
||
|
||
const pcaTextArrData = ref(pcaTextArr);
|
||
const selectedOptions = ref([]);
|
||
const props = defineProps<{
|
||
data?: userType;
|
||
executeType?: string;
|
||
}>();
|
||
|
||
const emit = defineEmits(["updateData"]);
|
||
|
||
let loading = ref(true);
|
||
let roleList = ref<roleType[]>();
|
||
let user = ref<userType>({
|
||
createDate: "",
|
||
name: "",
|
||
sex: "男",
|
||
phone: "",
|
||
userState: 1,
|
||
role: "",
|
||
birthday: "",
|
||
province: "",
|
||
city: "",
|
||
area: "",
|
||
address: "",
|
||
});
|
||
|
||
onMounted(async () => {
|
||
roleList.value = await roleDataList();
|
||
|
||
watch(
|
||
() => user,
|
||
(newVal) => {
|
||
emit("updateData", newVal);
|
||
},
|
||
{ deep: true }
|
||
);
|
||
|
||
loading.value = false;
|
||
});
|
||
|
||
if (props.executeType === "edit") {
|
||
user.value = { ...props.data };
|
||
selectedOptions.value = [
|
||
user.value.province as never,
|
||
user.value.city as never,
|
||
user.value.area as never,
|
||
];
|
||
}
|
||
|
||
function pcaChange(data: { [key: string]: any }) {
|
||
user.value.province = data[0];
|
||
user.value.city = data[1];
|
||
user.value.area = data[2];
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
:deep(.el-input) {
|
||
width: 230px;
|
||
}
|
||
:deep(.el-form-item) {
|
||
margin-right: 0;
|
||
}
|
||
</style>
|