<script setup>
|
import { ref, reactive, computed, onMounted } from "vue";
|
import { addUser, updateUser } from "@/api/user";
|
import useElement from "@/hooks/useElement.js";
|
const { $loading, $message, $confirm } = useElement();
|
const props = defineProps({
|
info: {
|
type: Object,
|
},
|
});
|
const props1 = { value: 'id', checkStrictly: true, multiple: true };
|
const formRef = ref();
|
const areaList = ref([]);
|
const form1 = reactive({
|
uname: "",
|
uid: "",
|
urole: "",
|
realName: "",
|
phoneNumber: "",
|
address: "",
|
areaId: 0,
|
permission: false,
|
});
|
|
const otherIdList = ref([]);
|
|
const rules = {
|
uname: [
|
{
|
required: true,
|
message: "不能为空",
|
trigger: ["blur", "change"],
|
},
|
],
|
realName: [
|
{
|
required: true,
|
message: "不能为空",
|
trigger: ["blur", "change"],
|
},
|
],
|
};
|
|
const isEdit = computed(() => !!props.info?.uid);
|
const $emit = defineEmits(["cancel", "success"]);
|
function close() {
|
$emit("cancel");
|
}
|
async function update() {
|
let valid = await formRef.value.validate(() => { });
|
// console.log('valid', valid, '=============');
|
|
if (!valid) {
|
$message.error("表单验证失败");
|
return false;
|
}
|
let params = {
|
uname: form1.uname.trim(),
|
uid: form1.uid || undefined,
|
realName: form1.realName.trim(),
|
phoneNumber: form1.phoneNumber?.trim(),
|
address: form1.address?.trim(),
|
};
|
|
// 编辑用户时, 区域中不在管理员管理内的区域要挑出来 最后更新时再追加进去
|
console.log("params update", params, "=============");
|
|
let loading = $loading();
|
updateUser(params)
|
.then((res) => {
|
let { code, data } = res;
|
if (code && data) {
|
$emit("success");
|
$message.success("操作成功");
|
} else {
|
$message.error("操作失败");
|
}
|
loading.close();
|
})
|
.catch((err) => {
|
console.log(err);
|
loading.close();
|
});
|
}
|
async function onSubmit() {
|
let valid = await formRef.value.validate(() => { });
|
// console.log('valid', valid, '=============');
|
|
if (!valid) {
|
$message.error("表单验证失败");
|
return false;
|
}
|
|
let params = {
|
uname: form1.uname.trim(),
|
uid: form1.uid || undefined,
|
realName: form1.realName.trim(),
|
phoneNumber: form1.phoneNumber?.trim(),
|
address: form1.address?.trim(),
|
};
|
console.log("params", params, "=============");
|
|
let loading = $loading();
|
addUser(params)
|
.then((res) => {
|
let { code, data } = res;
|
if (code && data) {
|
$emit("success");
|
$message.success("操作成功");
|
} else {
|
$message.error("操作失败");
|
}
|
loading.close();
|
})
|
.catch((err) => {
|
console.log(err);
|
loading.close();
|
});
|
}
|
|
|
|
onMounted(() => {
|
let info = props.info;
|
if (info) {
|
form1.uname = info.uname;
|
form1.uid = info.uid;
|
form1.realName = info.realName;
|
form1.phoneNumber = info.phoneNumber;
|
form1.address = info.address;
|
}
|
});
|
</script>
|
|
<template>
|
<div class="">
|
<el-form ref="formRef" :model="form1" label-width="80px" :rules="rules">
|
<el-form-item label="用户名" prop="uname">
|
<el-input v-model="form1.uname" :disabled="isEdit"></el-input>
|
</el-form-item>
|
<el-form-item label="真实姓名" prop="realName">
|
<el-input v-model="form1.realName"></el-input>
|
</el-form-item>
|
<el-form-item label="手机号" prop="phoneNumber">
|
<el-input v-model="form1.phoneNumber"></el-input>
|
</el-form-item>
|
<el-form-item label="通讯地址" prop="address">
|
<el-input v-model="form1.address"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button v-if="isEdit" type="primary" @click="update">修改</el-button>
|
<el-button v-else type="primary" @click="onSubmit">新增</el-button>
|
<el-button @click="close">取消</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</template>
|
|
<style scoped lang="scss">
|
:deep(.select) {
|
width: 100%;
|
}
|
</style>
|
