<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({
|
id: '',
|
name: "",
|
phoneNumber: "",
|
role: 1,
|
});
|
|
const otherIdList = ref([]);
|
|
const rules = {
|
name: [
|
{
|
required: true,
|
message: "不能为空",
|
trigger: ["blur", "change"],
|
},
|
],
|
phoneNumber: [
|
{
|
validator: (rule, value, callback) => {
|
let reg = /^1\d{10}$/;
|
if (value === '' || reg.test(value)) {
|
// 校验密码规则是否正确
|
callback();
|
} else {
|
callback(new Error('请输入正确的手机号'));
|
}
|
},
|
trigger:["change", "blur"]
|
},
|
],
|
};
|
|
const uroleList = [
|
{
|
label: "普通用户",
|
value: 1,
|
},
|
{
|
label: "管理层",
|
value: 2,
|
},
|
{
|
label: "领导层",
|
value: 3,
|
},
|
{
|
label: "运维班组",
|
value: 4,
|
},
|
];
|
|
const isEdit = computed(() => !!props.info?.id);
|
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 = {
|
name: form1.name.trim(),
|
id: form1.id || undefined,
|
role: form1.role,
|
phoneNumber: form1.phoneNumber?.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 = {
|
name: form1.name.trim(),
|
id: form1.id || undefined,
|
role: form1.role,
|
phoneNumber: form1.phoneNumber?.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.name = info.name;
|
form1.id = info.id;
|
form1.role = info.role;
|
form1.phoneNumber = info.phoneNumber;
|
}
|
});
|
</script>
|
|
<template>
|
<div class="">
|
<el-form ref="formRef" :model="form1" label-width="80px" :rules="rules">
|
<el-form-item label="用户名" prop="name">
|
<el-input v-model="form1.name" :disabled="isEdit"></el-input>
|
</el-form-item>
|
<el-form-item label="角色" prop="role">
|
<el-select
|
v-model="form1.role"
|
placeholder="请选择用户角色"
|
class="width_140"
|
>
|
<el-option
|
v-for="(item, key) in uroleList"
|
:key="'key' + key"
|
:label="item.label"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="手机号" prop="phoneNumber">
|
<el-input v-model="form1.phoneNumber"></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>
|
