卫星通信与导航应用服务平台入口页面
This commit is contained in:
284
src/components/userManager.vue
Normal file
284
src/components/userManager.vue
Normal file
@@ -0,0 +1,284 @@
|
||||
<template>
|
||||
<el-dialog v-model="dialogVisible" title="账户管理" width="600" center align-center>
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
style="max-width: 600px"
|
||||
:model="ruleForm"
|
||||
:rules="rules"
|
||||
label-width="auto"
|
||||
size="default"
|
||||
status-icon
|
||||
>
|
||||
<el-form-item label="用户名" prop="account_name">
|
||||
<el-input
|
||||
:disabled="acabled"
|
||||
minlength="1"
|
||||
maxlength="20"
|
||||
clearable
|
||||
placeholder="请输入用户名"
|
||||
v-model="ruleForm.account_name"
|
||||
@input="filter(ruleForm.account_name, 'account_name')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名" prop="user_name">
|
||||
<el-input
|
||||
maxlength="20"
|
||||
clearable
|
||||
placeholder="请输入姓名"
|
||||
v-model="ruleForm.user_name"
|
||||
@input="filter(ruleForm.user_name, 'user_name')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="电话号码" prop="phone">
|
||||
<el-input
|
||||
minlength="11"
|
||||
maxlength="11"
|
||||
clearable
|
||||
placeholder="请输入电话号码"
|
||||
v-model="ruleForm.phone"
|
||||
@input="filter(ruleForm.phone, 'phone')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="sideMark == 'C'" label="性别" prop="gender">
|
||||
<el-radio-group v-model="ruleForm.gender">
|
||||
<el-radio value="1">男</el-radio>
|
||||
<el-radio value="0">女</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="sideMark == 'C'" label="年龄" prop="age">
|
||||
<el-input
|
||||
maxlength="2"
|
||||
clearable
|
||||
placeholder="请输入年龄"
|
||||
v-model="ruleForm.age"
|
||||
@input="filter(ruleForm.age, 'age')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="sideMark == 'C'" label="邮箱号" prop="email">
|
||||
<el-input
|
||||
maxlength="254"
|
||||
clearable
|
||||
placeholder="请输入邮箱号"
|
||||
v-model="ruleForm.email"
|
||||
@input="filter(ruleForm.email, 'email')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="sideMark == 'C'" label="通信地址" prop="address">
|
||||
<el-input
|
||||
maxlength="300"
|
||||
clearable
|
||||
placeholder="请输入通信地址"
|
||||
v-model="ruleForm.address"
|
||||
@input="filter(ruleForm.address, 'address')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="sideMark == 'C'" label="邮政编码" prop="post_code">
|
||||
<el-input
|
||||
maxlength="6"
|
||||
clearable
|
||||
placeholder="请输入邮政编码"
|
||||
v-model="ruleForm.post_code"
|
||||
@input="filter(ruleForm.post_code, 'post_code')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="resetForm(ruleFormRef)">取消</el-button>
|
||||
<el-button type="primary" @click="editUser(ruleFormRef)"> 提交修改 </el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, watch, onMounted } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
import userManagerActiveStore from "../stores/userManager";
|
||||
|
||||
import { encrypt, decrypt } from "../utils/aes";
|
||||
|
||||
import $http from "../api/index";
|
||||
import $url from "../api/url";
|
||||
|
||||
const phoneRegex = /^(?:13\d|14[579]|15\d|16[67]|17[0135678]|18\d|19[89])\d{8}$/;
|
||||
const emailRegex = /^([a-zA-Z0-9]+[|-|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[|-|.]?)*[a-zA-Z0-9]+(.[a-zA-Z]{2,3})+$/;
|
||||
const postCodeRegex = /^(0[1234567]|1[012356]|2[01234567]|3[0123456]|4[01234567]|5[1234567]|6[1234567]|7[012345]|8[013456])\d{4}$/;
|
||||
|
||||
const userManagerActive = userManagerActiveStore();
|
||||
|
||||
const dialogVisible = ref(false);
|
||||
|
||||
const props = defineProps({
|
||||
msg: Object,
|
||||
});
|
||||
|
||||
let sideMark;
|
||||
const acabled = ref(true);
|
||||
const ruleFormRef = ref();
|
||||
const ruleForm = reactive({
|
||||
account_name: "",
|
||||
user_name: "",
|
||||
phone: "",
|
||||
});
|
||||
|
||||
const filter = (value, label) => {
|
||||
let filterValue;
|
||||
if (/[=\s"'+-]/.test(value)) {
|
||||
if (ruleForm[label]) {
|
||||
filterValue = value.replace(/[=\s"'+-]/g, "");
|
||||
}
|
||||
} else {
|
||||
filterValue = value;
|
||||
}
|
||||
if (label == "phone" || label == "age" || label == "post_code") {
|
||||
ruleForm[label] = filterValue.replace(/\D/g, "");
|
||||
} else {
|
||||
ruleForm[label] = filterValue;
|
||||
}
|
||||
};
|
||||
|
||||
const validatePhone = (rule, value, callback) => {
|
||||
if (value && !phoneRegex.test(value)) {
|
||||
callback(new Error("请输入正确的电话号码"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
const validateEmail = (rule, value, callback) => {
|
||||
if (value && !emailRegex.test(value)) {
|
||||
callback(new Error("请输入正确的邮箱地址"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
const validateCode = (rule, value, callback) => {
|
||||
if (value && !postCodeRegex.test(value)) {
|
||||
callback(new Error("请输入正确的邮政编码"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
const rules = reactive({
|
||||
account_name: [{ required: false, message: "请输入用户名", trigger: "blur" }],
|
||||
user_name: [],
|
||||
phone: [
|
||||
{ required: false, message: "请输入手机号", trigger: "blur" },
|
||||
{ min: 11, max: 11, message: "输入长度应当为 11 位", trigger: "change" },
|
||||
{ validator: validatePhone },
|
||||
],
|
||||
});
|
||||
|
||||
const resetForm = (formEl) => {
|
||||
dialogVisible.value = false;
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
};
|
||||
|
||||
const emit = defineEmits(["resetData"]);
|
||||
|
||||
const reset = () => {
|
||||
ruleForm.account_name = props.msg.account_name;
|
||||
ruleForm.user_name = props.msg.user_name;
|
||||
ruleForm.phone = props.msg.phone;
|
||||
if (sideMark == "C") {
|
||||
ruleForm.gender = props.msg.gender ? "1" : "0";
|
||||
ruleForm.age = props.msg.age;
|
||||
ruleForm.email = props.msg.email;
|
||||
ruleForm.address = props.msg.address;
|
||||
ruleForm.post_code = props.msg.post_code;
|
||||
}
|
||||
};
|
||||
|
||||
const editUser = async (formEl) => {
|
||||
if (!formEl) return;
|
||||
await formEl.validate((valid) => {
|
||||
if (valid) {
|
||||
dialogVisible.value = false;
|
||||
const data = {
|
||||
userMsg: ruleForm,
|
||||
uid: localStorage.data
|
||||
};
|
||||
$http
|
||||
.post($url.editUser, data)
|
||||
.then((res) => {
|
||||
if (res.data.code === 200) {
|
||||
emit("resetData");
|
||||
} else {
|
||||
ElMessage.error("编辑用户信息失败！");
|
||||
}
|
||||
});
|
||||
} else {
|
||||
ElMessage.error("提交失败！");
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
defineExpose({ dialogVisible, reset });
|
||||
|
||||
watch(ruleForm, (value) => {
|
||||
if (dialogVisible.value) {
|
||||
userManagerActive.dialogVisible = dialogVisible.value;
|
||||
userManagerActive.ruleForm.account_name = encrypt(value.account_name);
|
||||
userManagerActive.ruleForm.user_name = encrypt(value.user_name);
|
||||
userManagerActive.ruleForm.phone = encrypt(value.phone);
|
||||
if (sideMark == "C") {
|
||||
userManagerActive.ruleForm.gender = encrypt(value.gender);
|
||||
userManagerActive.ruleForm.age = encrypt(value.age.toString());
|
||||
userManagerActive.ruleForm.email = encrypt(value.email);
|
||||
userManagerActive.ruleForm.address = encrypt(value.address);
|
||||
userManagerActive.ruleForm.post_code = encrypt(value.post_code);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
watch(dialogVisible, (value) => {
|
||||
if (!value) {
|
||||
userManagerActive.dialogVisible = value;
|
||||
userManagerActive.ruleForm = {};
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
dialogVisible.value = userManagerActive.dialogVisible;
|
||||
if (localStorage.data) {
|
||||
let decryptData = decrypt(localStorage.data);
|
||||
sideMark = decryptData[decryptData.length - 1];
|
||||
}
|
||||
if (sideMark == "C") {
|
||||
acabled.value = false;
|
||||
ruleForm.gender = "";
|
||||
ruleForm.age = "";
|
||||
ruleForm.email = "";
|
||||
ruleForm.address = "";
|
||||
ruleForm.post_code = "";
|
||||
rules.account_name[0].required = true;
|
||||
rules.phone[0].required = true;
|
||||
rules.age = [];
|
||||
rules.email = [{ validator: validateEmail }];
|
||||
rules.address = [];
|
||||
rules.post_code = [
|
||||
{ min: 6, max: 6, message: "输入长度应当为 6 位", trigger: "change" },
|
||||
{ validator: validateCode },
|
||||
];
|
||||
}
|
||||
if (userManagerActive.dialogVisible) {
|
||||
ruleForm.account_name = decrypt(userManagerActive.ruleForm.account_name);
|
||||
ruleForm.user_name = decrypt(userManagerActive.ruleForm.user_name);
|
||||
ruleForm.phone = decrypt(userManagerActive.ruleForm.phone);
|
||||
if (sideMark == "C") {
|
||||
ruleForm.gender = decrypt(userManagerActive.ruleForm.gender);
|
||||
ruleForm.age = decrypt(userManagerActive.ruleForm.age);
|
||||
ruleForm.email = decrypt(userManagerActive.ruleForm.email);
|
||||
ruleForm.address = decrypt(userManagerActive.ruleForm.address);
|
||||
ruleForm.post_code = decrypt(userManagerActive.ruleForm.post_code);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
Reference in New Issue
Block a user