Satellite-Communication-And-Navigation-Application-Service-Platform/src/components/userManager.vue

<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>