修改注册

src/views/login/index.vue

@@ -69,11 +69,7 @@ const code: Ref<String> = ref('');
 // 加载中
 const loading: Ref<Boolean> = ref(false);
 // 请求
-onMounted(async () => {
-  window.addEventListener('keydown', (e) => {
-    if (e.code === 'Enter') toSave(formRef.value);
-  });
-});
+onMounted(async () => {});
 //接收验证码组件提交的4位验证码
 const createValidCode = (data) => {
   validCode.value = data;

src/views/register/index.vue

@@ -1,41 +1,196 @@
 <template>
-  <div id="index">
-    <el-row>
-      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
-        <el-col :span="24" class="one"> 注册 </el-col>
+  <div class="login">
+    <el-col :span="24" class="main animate__animated animate__backInRight">
+      <el-col :span="24" class="one w_1200">
+        <el-form ref="formRef" :model="form" :rules="rules" class="login-form">
+          <div class="one_1">
+            <span @click="toBack()">返回</span>
+          </div>
+          <h3 class="title">{{ siteInfo.zhTitle }}</h3>
+          <el-form-item prop="account">
+            <el-input v-model="form.account" type="text" placeholder="请输入账号"></el-input>
+          </el-form-item>
+          <el-form-item prop="password">
+            <el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
+          </el-form-item>
+          <el-form-item prop="pass">
+            <el-input v-model="form.pass" type="password" placeholder="请输入确认密码"></el-input>
+          </el-form-item>
+          <el-form-item prop="name">
+            <el-input v-model="form.name" type="text" placeholder="请输入昵称"></el-input>
+          </el-form-item>
+          <el-form-item prop="role">
+            <el-select v-model="form.role" placeholder="请选择角色" clearable style="width: 100%">
+              <el-option v-for="i in roleList" :key="i._id" :label="i.name" :value="i._id"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item prop="region">
+            <el-select v-model="form.region" placeholder="请选择所属区域" clearable style="width: 100%">
+              <el-option v-for="i in regionList" :key="i._id" :label="i.name" :value="i._id"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item style="width: 100%">
+            <el-button :loading="loading" size="default" type="primary" @click="toSave(formRef)" style="width: 100%">
+              <span v-if="!loading">注 册</span>
+              <span v-else>注 册 中...</span>
+            </el-button>
+          </el-form-item>
+        </el-form>
+        <!--  底部  -->
+        <div class="el-login-footer">
+          <span> Copyright © 2018-2022 free All Rights Reserved.</span>
+        </div>
       </el-col>
-    </el-row>
+    </el-col>
   </div>
 </template>
 
 <script setup lang="ts">
 // 基础
+import _ from 'lodash';
 import type { Ref } from 'vue';
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, reactive } from 'vue';
+import type { FormInstance, FormRules } from 'element-plus';
+import { ElMessage } from 'element-plus';
+import { siteInfo } from '@/layout/site';
 
 // 接口
-// import { ToolsStore } from '@/stores/tool';
-// import type { IQueryResult } from '@/util/types.util';
-// const toolsAxios = ToolsStore();
-
+import { AdminStore } from '@/stores/users/admin';
+import { RegionStore } from '@/stores/basic/region'; // 区域
+import { RoleStore } from '@/stores/basic/role'; // 角色
+import type { IQueryResult } from '@/util/types.util';
+const adminAxios = AdminStore();
+const roleAxios = RoleStore();
+const regionAxios = RegionStore();
+// 表单
+const formRef = ref<FormInstance>();
+interface formData {
+  account?: string;
+  password?: string;
+  pass?: string;
+  name?: string;
+  role?: string;
+  region?: string;
+}
+const form: Ref<formData> = ref({});
+const validatePass = (rule: any, value: any, callback: any) => {
+  if (value === '') {
+    callback(new Error('请输入确认密码'));
+  } else if (value !== form.value.password) {
+    callback(new Error('两次输入不一致，请重新输入!'));
+  } else {
+    callback();
+  }
+}
+const rules = reactive<FormRules>({
+  account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
+  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+  pass: [{ validator: validatePass, trigger: 'blur' }],
+  name: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
+  role: [{ required: true, message: '请选择角色', trigger: 'change' }]
+});
+const roleList: Ref<any> = ref([]);
+const regionList: Ref<any> = ref([]);
 // 加载中
-const loading: Ref<any> = ref(false);
-
+const loading: Ref<Boolean> = ref(false);
 // 请求
 onMounted(async () => {
-  loading.value = true;
-  search();
-  loading.value = false;
+  searchOther();
 });
-const search = async () => {
-  // let res: IQueryResult = await toolsAxios.dataCount();
-  // if (res.errcode == '0') {
-  //   info.value = res.data;
-  // }
+// 提交登录
+const toSave = async (formEl: FormInstance) => {
+  if (!formEl) return;
+  await formEl.validate((valid: any) => {
+    loading.value = false;
+    if (valid) {
+      toRegister(form.value);
+    } else {
+      console.log('error submit!');
+    }
+  });
+};
+const toRegister = async (data: formData) => {
+  data = _.omit(data, ['pass']); // 过滤掉属性为pass的项
+  let res: IQueryResult = await adminAxios.create(data);
+  if (res.errcode == '0') {
+    loading.value = true;
+    ElMessage({ message: `注册成功`, type: 'success' });
+    toBack();
+  } else {
+    loading.value = false;
+    ElMessage({ message: `${res.errmsg}`, type: 'error' });
+  }
+};
+// 查询其他信息
+const searchOther = async () => {
+  let res: IQueryResult;
+  // 角色
+  res = await roleAxios.query({ is_use: '0' });
+  if (res.errcode == '0') roleList.value = res.data;
+  // 区域
+  res = await regionAxios.query({ is_use: '0' });
+  if (res.errcode == '0') regionList.value = res.data;
+};
+// 返回上一页
+const toBack = () => {
+  window.history.go(-1);
 };
 </script>
 <style scoped lang="scss">
 .main {
-  padding: 2px;
+  display: flex;
+  flex-direction: column;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background: url('@/assets/bglogin.jpg');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+
+  .one {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .title {
+      margin: 0px auto 30px auto;
+      text-align: center;
+      color: #707070;
+    }
+
+    .login-form {
+      border-radius: 6px;
+      background: #ffffff;
+      width: 450px;
+      padding: 25px;
+
+      .el-input {
+        height: 38px;
+
+        input {
+          height: 38px;
+        }
+      }
+    }
+
+    .one_1 {
+      float: right;
+      color: #409eff;
+    }
+
+    .el-login-footer {
+      height: 40px;
+      line-height: 40px;
+      position: fixed;
+      bottom: 0;
+      width: 100%;
+      text-align: center;
+      color: #fff;
+      font-family: Arial;
+      font-size: 12px;
+      letter-spacing: 1px;
+    }
+  }
 }
 </style>