|
|
|
|
@ -1,6 +1,6 @@ |
|
|
|
|
<template> |
|
|
|
|
<div class="login-form"> |
|
|
|
|
<div class="login-title">注册</div> |
|
|
|
|
<!-- <div class="login-title">注册</div> --> |
|
|
|
|
<div class="form"> |
|
|
|
|
<el-form :model="form" ref="ruleFormRef" label-width="0" :rules="rules"> |
|
|
|
|
<!-- <el-form-item> |
|
|
|
|
@ -26,6 +26,7 @@ |
|
|
|
|
</el-form-item> --> |
|
|
|
|
<el-form-item prop="username"> |
|
|
|
|
<el-input |
|
|
|
|
style="width: 100%; height: 1.0938rem" |
|
|
|
|
v-model="form.username" |
|
|
|
|
:prefix-icon="User" |
|
|
|
|
placeholder="账号" |
|
|
|
|
@ -33,6 +34,7 @@ |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item prop="realname"> |
|
|
|
|
<el-input |
|
|
|
|
style="width: 100%; height: 1.0938rem" |
|
|
|
|
v-model="form.realname" |
|
|
|
|
:prefix-icon="User" |
|
|
|
|
placeholder="姓名" |
|
|
|
|
@ -40,6 +42,7 @@ |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item prop="workno"> |
|
|
|
|
<el-input |
|
|
|
|
style="width: 100%; height: 1.0938rem" |
|
|
|
|
v-model="form.workno" |
|
|
|
|
placeholder="工号/学号" |
|
|
|
|
:prefix-icon="Iphone" |
|
|
|
|
@ -52,17 +55,48 @@ |
|
|
|
|
:options="options" |
|
|
|
|
style="width: 100%; height: 0.2344rem" |
|
|
|
|
/> --> |
|
|
|
|
<el-cascader |
|
|
|
|
<!-- <el-cascader |
|
|
|
|
:props="props" |
|
|
|
|
style="width: 100%; height: 0.2344rem" |
|
|
|
|
style="width: 100%; height: 1.0938rem" |
|
|
|
|
v-model="form.department" |
|
|
|
|
:show-all-levels="false" |
|
|
|
|
@change="handleChange" |
|
|
|
|
ref="cascader" |
|
|
|
|
/> |
|
|
|
|
/> --> |
|
|
|
|
<!-- <el-select |
|
|
|
|
v-model="form.department" |
|
|
|
|
placeholder="Select" |
|
|
|
|
size="large" |
|
|
|
|
style="width: 100%; height: 1.0938rem" |
|
|
|
|
> |
|
|
|
|
<el-option> |
|
|
|
|
<el-tree |
|
|
|
|
style="max-width: 600px;height: 300px" |
|
|
|
|
:data="data" |
|
|
|
|
:props="defaultProps" |
|
|
|
|
@node-click="handleNodeClick" |
|
|
|
|
/> |
|
|
|
|
</el-option> |
|
|
|
|
</el-select> --> |
|
|
|
|
<div> |
|
|
|
|
<el-input |
|
|
|
|
style="width: 70%; height: 1.0938rem" |
|
|
|
|
placeholder="选择部门" |
|
|
|
|
v-model="form.departentName" |
|
|
|
|
:prefix-icon="Iphone" |
|
|
|
|
></el-input> |
|
|
|
|
<el-button |
|
|
|
|
type="primary" |
|
|
|
|
style="width: 29%; height: 1.0938rem; font-size: 12px" |
|
|
|
|
@click="selectChange" |
|
|
|
|
> |
|
|
|
|
选择部门 |
|
|
|
|
</el-button> |
|
|
|
|
</div> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item prop="mobile"> |
|
|
|
|
<el-input |
|
|
|
|
style="width: 100%; height: 1.0938rem" |
|
|
|
|
placeholder="手机号码" |
|
|
|
|
v-model="form.mobile" |
|
|
|
|
:prefix-icon="Iphone" |
|
|
|
|
@ -70,6 +104,7 @@ |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item prop="password"> |
|
|
|
|
<el-input |
|
|
|
|
style="width: 100%; height: 1.0938rem" |
|
|
|
|
placeholder="密码" |
|
|
|
|
v-model="form.password" |
|
|
|
|
:prefix-icon="Lock" |
|
|
|
|
@ -79,6 +114,7 @@ |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item> |
|
|
|
|
<el-input |
|
|
|
|
style="width: 100%; height: 1.0938rem" |
|
|
|
|
placeholder="确认密码" |
|
|
|
|
v-model="form.confirmPassword" |
|
|
|
|
:prefix-icon="Lock" |
|
|
|
|
@ -95,7 +131,7 @@ |
|
|
|
|
<div class="captcha"> |
|
|
|
|
<el-input |
|
|
|
|
v-model="form.smscode" |
|
|
|
|
style="height: 0.2344rem" |
|
|
|
|
style="height: 1.25rem" |
|
|
|
|
maxlength="4" |
|
|
|
|
:prefix-icon="Lock" |
|
|
|
|
/> |
|
|
|
|
@ -111,6 +147,25 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<el-drawer |
|
|
|
|
v-model="drawer" |
|
|
|
|
title="选择部门" |
|
|
|
|
direction="btt" |
|
|
|
|
:before-close="handleClose" |
|
|
|
|
size="50%" |
|
|
|
|
> |
|
|
|
|
<el-tree |
|
|
|
|
style="max-width: 600px; height: 300px" |
|
|
|
|
:props="defaultProps" |
|
|
|
|
@node-click="handleNodeClick" |
|
|
|
|
:load="lazyLoad" |
|
|
|
|
lazy |
|
|
|
|
default-expand-all |
|
|
|
|
:expand-on-click-node="false" |
|
|
|
|
empty-text="暂无" |
|
|
|
|
node-key="value" |
|
|
|
|
/> |
|
|
|
|
</el-drawer> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script lang="ts" setup> |
|
|
|
|
@ -119,13 +174,28 @@ import { User, Iphone, Lock } from '@element-plus/icons-vue' |
|
|
|
|
import { getFaculties } from '@/api/race' |
|
|
|
|
import { ElMessage } from 'element-plus' |
|
|
|
|
import { getCode, sturegister } from '@/api/user' |
|
|
|
|
import { ca } from 'element-plus/es/locales.mjs' |
|
|
|
|
|
|
|
|
|
const drawer = ref(false) |
|
|
|
|
const handleNodeClick = (data: any) => { |
|
|
|
|
if (!data.leaf) { |
|
|
|
|
console.log(data) |
|
|
|
|
form.department = data.value |
|
|
|
|
form.departentName = data.label |
|
|
|
|
drawer.value = false |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const defaultProps = { |
|
|
|
|
children: 'children', |
|
|
|
|
label: 'label', |
|
|
|
|
} |
|
|
|
|
const $emits = defineEmits(['backLogin']) |
|
|
|
|
const form = reactive<any>({ |
|
|
|
|
username: '', |
|
|
|
|
realname: '', |
|
|
|
|
workno: '', |
|
|
|
|
department: '', |
|
|
|
|
departentName:'', |
|
|
|
|
mobile: '', |
|
|
|
|
password: '', |
|
|
|
|
confirmPassword: '' /*, policy: false*/, |
|
|
|
|
@ -190,43 +260,37 @@ const getFacultiesList = async (data: any) => { |
|
|
|
|
FacultiesList.value = res.result |
|
|
|
|
} |
|
|
|
|
// 配置部门级联选择器 |
|
|
|
|
const props = { |
|
|
|
|
lazy: true, |
|
|
|
|
checkStrictly: true, |
|
|
|
|
emitPath: false, |
|
|
|
|
isLeaf: 'isLeaf', |
|
|
|
|
|
|
|
|
|
async lazyLoad(node: any, resolve: any) { |
|
|
|
|
// console.log(node, '1212') |
|
|
|
|
// console.log(node.data.isLeaf) |
|
|
|
|
const lazyLoad = async (node: any, resolve: any) => { |
|
|
|
|
// console.log(node, '1212') |
|
|
|
|
// console.log(node.data.isLeaf) |
|
|
|
|
|
|
|
|
|
// if (node.data.isLeaf) { |
|
|
|
|
// console.log(1111) |
|
|
|
|
// if (node.data.isLeaf) { |
|
|
|
|
// console.log(1111) |
|
|
|
|
|
|
|
|
|
// return resolve([]) |
|
|
|
|
// } |
|
|
|
|
await getFacultiesList({ |
|
|
|
|
primaryKey: 'key', |
|
|
|
|
pid: node.value, |
|
|
|
|
}) |
|
|
|
|
// return resolve([]) |
|
|
|
|
// } |
|
|
|
|
await getFacultiesList({ |
|
|
|
|
primaryKey: 'key', |
|
|
|
|
pid: node.data.value, |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
if (node.level == 0 || node.level == 1) { |
|
|
|
|
const nodes = FacultiesList.value.map((item: any) => ({ |
|
|
|
|
value: item.id, |
|
|
|
|
label: item.title, |
|
|
|
|
disabled: true, |
|
|
|
|
leaf: item.isLeaf, |
|
|
|
|
})) |
|
|
|
|
resolve(nodes) |
|
|
|
|
} else { |
|
|
|
|
const nodes = FacultiesList.value.map((item: any) => ({ |
|
|
|
|
value: item.id, |
|
|
|
|
label: item.title, |
|
|
|
|
leaf: item.isLeaf, |
|
|
|
|
})) |
|
|
|
|
resolve(nodes) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
if (node.level == 0 || node.level == 1) { |
|
|
|
|
const nodes = FacultiesList.value.map((item: any) => ({ |
|
|
|
|
value: item.id, |
|
|
|
|
label: item.title, |
|
|
|
|
disabled: true, |
|
|
|
|
leaf: !item.isLeaf, |
|
|
|
|
})) |
|
|
|
|
resolve(nodes) |
|
|
|
|
} else { |
|
|
|
|
const nodes = FacultiesList.value.map((item: any) => ({ |
|
|
|
|
value: item.id, |
|
|
|
|
label: item.title, |
|
|
|
|
leaf: !item.isLeaf, |
|
|
|
|
})) |
|
|
|
|
resolve(nodes) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
const cascader = ref() |
|
|
|
|
const handleChange = (e: any) => { |
|
|
|
|
@ -276,15 +340,13 @@ const ragistered = async () => { |
|
|
|
|
} catch (error: any) { |
|
|
|
|
console.log(error, 'error') |
|
|
|
|
// 判断对象是否有这个属性 |
|
|
|
|
if(error.hasOwnProperty('data')){ |
|
|
|
|
if (error.hasOwnProperty('data')) { |
|
|
|
|
ElMessage.warning(error.data.message) |
|
|
|
|
|
|
|
|
|
}else{ |
|
|
|
|
for (const key in error) { |
|
|
|
|
ElMessage.warning(`${KeyValue[key]}${error[key][0].message}`) |
|
|
|
|
} |
|
|
|
|
} else { |
|
|
|
|
for (const key in error) { |
|
|
|
|
ElMessage.warning(`${KeyValue[key]}${error[key][0].message}`) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
const codeUrl = ref('') |
|
|
|
|
@ -296,23 +358,36 @@ const getcodeinfo = async () => { |
|
|
|
|
console.log(codeUrl.value) |
|
|
|
|
} |
|
|
|
|
getcodeinfo() |
|
|
|
|
|
|
|
|
|
// 选择部门 |
|
|
|
|
const selectChange = (e: any) => { |
|
|
|
|
getFacultiesList({ |
|
|
|
|
primaryKey: 'key', |
|
|
|
|
}) |
|
|
|
|
drawer.value = true |
|
|
|
|
} |
|
|
|
|
const handleClose = () => { |
|
|
|
|
drawer.value = false |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
.login-form { |
|
|
|
|
width: 640px; |
|
|
|
|
height: 820px; |
|
|
|
|
// width: 640px; |
|
|
|
|
// height: 820px; |
|
|
|
|
border-radius: 15px; |
|
|
|
|
background-color: #ffffff1a !important; |
|
|
|
|
padding: 70px 60px; |
|
|
|
|
// padding: 70px 60px; |
|
|
|
|
backdrop-filter: blur(10px); |
|
|
|
|
box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.2); |
|
|
|
|
margin-top: 20px; |
|
|
|
|
padding-bottom: 20px; |
|
|
|
|
.login-title { |
|
|
|
|
font-size: 32px; |
|
|
|
|
font-weight: 700; |
|
|
|
|
} |
|
|
|
|
.form { |
|
|
|
|
margin-top: 45px; |
|
|
|
|
// margin-top: 45px; |
|
|
|
|
padding: 0 40px; |
|
|
|
|
.captcha { |
|
|
|
|
width: 100%; |
|
|
|
|
@ -325,7 +400,7 @@ getcodeinfo() |
|
|
|
|
top: 0; |
|
|
|
|
right: 0; |
|
|
|
|
width: 105px; |
|
|
|
|
height: 100%; |
|
|
|
|
height: 40px; |
|
|
|
|
// background-color: pink; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
@ -349,14 +424,17 @@ getcodeinfo() |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.btn { |
|
|
|
|
width: 100%; |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
margin-top: 45px; |
|
|
|
|
margin-top: 15px; |
|
|
|
|
padding: 0 10px; |
|
|
|
|
div { |
|
|
|
|
width: 210px; |
|
|
|
|
height: 42px; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 35px; |
|
|
|
|
text-align: center; |
|
|
|
|
line-height: 42px; |
|
|
|
|
line-height: 35px; |
|
|
|
|
font-size: 14px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
border-radius: 10px; |
|
|
|
|
@ -367,6 +445,7 @@ getcodeinfo() |
|
|
|
|
} |
|
|
|
|
div:nth-child(2) { |
|
|
|
|
color: #fff; |
|
|
|
|
margin-top: 10px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@ -382,4 +461,7 @@ getcodeinfo() |
|
|
|
|
height: 100%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
:deep(.el-drawer__header) { |
|
|
|
|
margin-bottom: 0px !important; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
JayChou
3 weeks ago