From 515a265a809d0c12fb5cbff39cb743f391938a41 Mon Sep 17 00:00:00 2001 From: 马宇豪 <978517621@qq.com> Date: 星期四, 30 十一月 2023 08:49:34 +0800 Subject: [PATCH] 新增 --- src/layout/components/Register/index.vue | 616 ++++++++++++++++++++++++++++++++++++------- src/utils/request.js | 29 + src/api/login.js | 27 + src/views/homePage.vue | 6 package.json | 5 src/views/components/loginForm.vue | 7 src/api/area.js | 13 src/views/components/details.vue | 70 +++++ src/utils/validate.js | 17 + src/views/components/home.vue | 2 10 files changed, 660 insertions(+), 132 deletions(-) diff --git a/package.json b/package.json index ac3f7ab..06b53d4 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "element-plus": "2.2.27", "file-saver": "2.0.5", "fuse.js": "6.6.2", + "js-base64": "^3.7.5", "js-cookie": "3.0.1", "jsencrypt": "3.3.1", "nprogress": "0.2.0", @@ -36,9 +37,9 @@ "@vue/compiler-sfc": "3.2.45", "sass": "1.56.1", "unplugin-auto-import": "0.11.4", + "unplugin-vue-setup-extend-plus": "0.4.9", "vite": "3.2.3", "vite-plugin-compression": "0.5.1", - "vite-plugin-svg-icons": "2.0.1", - "unplugin-vue-setup-extend-plus": "0.4.9" + "vite-plugin-svg-icons": "2.0.1" } } diff --git a/src/api/area.js b/src/api/area.js new file mode 100644 index 0000000..368886e --- /dev/null +++ b/src/api/area.js @@ -0,0 +1,13 @@ +import request from '@/utils/request' + +// 获取地区列表 +export function getRegionTree(params) { + return request({ + url: '/system/region/regionTree', + headers: { + isToken: false + }, + method: 'get', + params: params + }) +} \ No newline at end of file diff --git a/src/api/login.js b/src/api/login.js index 69a8d71..85e37b4 100644 --- a/src/api/login.js +++ b/src/api/login.js @@ -22,7 +22,7 @@ // 注册方法 export function register(data) { return request({ - url: '/register', + url: '/system/user/addAgency', headers: { isToken: false }, @@ -57,4 +57,29 @@ method: 'get', timeout: 20000 }) +} + +// 获取字典 +export function getDict(type) { + return request({ + url: '/system/dictType/getDictDataByType', + headers: { + isToken: false + }, + method: 'get', + params: type + }) +} + +// 删除图片 +export function delPic(path) { + return request({ + url: '/system/common/removeFile', + headers: { + isToken: false + }, + method: 'delete', + params: path, + timeout: 20000 + }) } \ No newline at end of file diff --git a/src/layout/components/Register/index.vue b/src/layout/components/Register/index.vue index 42bfc31..a7eae8c 100644 --- a/src/layout/components/Register/index.vue +++ b/src/layout/components/Register/index.vue @@ -1,97 +1,348 @@ <template> - <el-dialog v-model="dialogVisible" title="注册用户" width="30%" :append-to-body="true" top="50vh" custom-class="regForm"> - <el-form ref="registerRef" :model="registerForm" :rules="registerRules" class="register-form"> - <el-form-item prop="username"> - <el-input - v-model="registerForm.username" - type="text" - size="large" - auto-complete="off" - placeholder="账号" - > - <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template> - </el-input> - </el-form-item> - <el-form-item prop="password"> - <el-input - v-model="registerForm.password" - type="password" - size="large" - auto-complete="off" - placeholder="密码" - @keyup.enter="handleRegister" - > - <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template> - </el-input> - </el-form-item> - <el-form-item prop="confirmPassword"> - <el-input - v-model="registerForm.confirmPassword" - type="password" - size="large" - auto-complete="off" - placeholder="确认密码" - @keyup.enter="handleRegister" - > - <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template> - </el-input> - </el-form-item> - <el-form-item prop="code" v-if="captchaEnabled"> - <el-input - size="large" - v-model="registerForm.code" - auto-complete="off" - placeholder="验证码" - style="width: 63%" - @keyup.enter="handleRegister" - > - <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template> - </el-input> - <div class="register-code"> - <img :src="codeUrl" @click="getCode" class="register-code-img"/> - </div> - </el-form-item> + <el-dialog v-model="dialogVisible" width="75%" top="50vh" align-center @close="closeDialog"> + <template #header> + <div style="display:flex;font-size: 1.2rem;font-weight: bolder"> + 机构注册 + <div style="font-size: 0.9rem;display:flex;align-items: center;font-weight: normal;margin-left: 6px"><Warning style="color:#EF4444;width: 0.9rem; height: 0.9rem;margin-right: 2px" />请认真填写注册信息,带 <span style="color:#EF4444;vertical-align: middle">*</span> 为必填项</div> + </div> + </template> + <el-form ref="registerRef" :model="registerForm" :rules="registerRules" class="register-form" label-position="top"> + <el-row :gutter="30"> + <el-col :span="8"> + <el-form-item prop="agency.name" label="机构名称"> + <el-input + v-model="registerForm.agency.name" + size="large" + placeholder="请输入机构名称" + > + </el-input> + </el-form-item> + </el-col> + <el-col :span="8"> + <el-form-item prop="agency.creditCode" label="社会信用代码"> + <el-input + v-model="registerForm.agency.creditCode" + size="large" + placeholder="请输入社会信用代码" + > + </el-input> + </el-form-item> + </el-col> + <el-col :span="8"> + <el-form-item prop="agency.attribute" label="机构属性"> + <el-radio-group v-model="registerForm.agency.attribute" style="width: 50%" @change="changeAttr()"> + <el-radio :label="0" size="large">疆内</el-radio> + <el-radio :label="1" size="large">疆外</el-radio> + </el-radio-group> + </el-form-item> + </el-col> + </el-row> + <el-row :gutter="30"> + <el-col :span="12"> + <el-form-item prop="agency.area" label="实际经营地址所属区域"> + <el-cascader + v-model="registerForm.agency.area" + :options="state.areaList" + :props="props" + @change="handleChange" + style="width: 100%" + size="large" + /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item prop="agency.address" label="实际经营地址"> + <el-input + v-model="registerForm.agency.address" + size="large" + placeholder="请输入实际经营地址" + /> + </el-form-item> + </el-col> + </el-row> + <el-row :gutter="30"> + <el-col :span="12"> + <el-form-item prop="agency.legalPerson" label="法定代表人"> + <el-input + v-model="registerForm.agency.legalPerson" + size="large" + placeholder="请输入法定代表人" + /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item prop="agency.legalPhone" label="法人电话"> + <el-input + v-model="registerForm.agency.legalPhone" + size="large" + placeholder="请输入法人电话" + /> + </el-form-item> + </el-col> + </el-row> + <el-row :gutter="30"> + <el-col :span="12"> + <el-form-item prop="agency.manager" label="机构负责人"> + <el-input + v-model="registerForm.agency.manager" + size="large" + placeholder="请输入机构负责人" + /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item prop="agency.managerPhone" label="负责人电话"> + <el-input + v-model="registerForm.agency.managerPhone" + size="large" + placeholder="请输入负责人电话" + /> + </el-form-item> + </el-col> + </el-row> + <el-row :gutter="30"> + <el-col :span="8"> + <el-form-item prop="agency.certNumber" label="资质证书编号"> + <el-input + v-model="registerForm.agency.certNumber" + size="large" + placeholder="请输入机构负责人" + /> + </el-form-item> + </el-col> + <el-col :span="8"> + <el-form-item prop="agency.issueDate" label="发证日期"> + <el-date-picker + v-model="registerForm.agency.issueDate" + type="date" + placeholder="请选择发证日期" + value-format="YYYY-MM-DD 00:00:00" + size="large" + style="width: 100%" + /> + </el-form-item> + </el-col> + <el-col :span="8"> + <el-form-item prop="agency.validDate" label="有效日期"> + <el-date-picker + v-model="registerForm.agency.validDate" + type="date" + placeholder="请选择有效日期" + value-format="YYYY-MM-DD 00:00:00" + size="large" + style="width: 100%" + /> + </el-form-item> + </el-col> + </el-row> + <el-row :gutter="30"> + <el-col :span="8"> + <el-form-item prop="agency.assetValue" label="固定资产总值"> + <el-input + v-model="registerForm.agency.assetValue" + type="number" + size="large" + placeholder="请输入固定资产总值" + /> + </el-form-item> + </el-col> + <el-col :span="8"> + <el-form-item prop="agency.workArea" label="工作场所建筑面积"> + <el-input + type="number" + v-model="registerForm.agency.workArea" + size="large" + placeholder="请输入工作场所建筑面积" + ><template #append>㎡</template></el-input> + </el-form-item> + </el-col> + <el-col :span="8"> + <el-form-item prop="agency.archiveArea" label="档案室面积"> + <el-input + type="number" + v-model="registerForm.agency.archiveArea" + size="large" + placeholder="请输入档案室面积" + ><template #append>㎡</template></el-input> + </el-form-item> + </el-col> + </el-row> + <el-row :gutter="30"> + <el-col :span="8"> + <el-form-item prop="agency.regAddress" label="注册地址"> + <el-input + v-model="registerForm.agency.regAddress" + size="large" + placeholder="请输入注册地址" + /> + </el-form-item> + </el-col> + <el-col :span="8"> + <el-form-item prop="agency.business" label="申请的法定安全评价业务范围"> + <el-select v-model="registerForm.agency.business" placeholder="请选择业务范围" size="large" style="width: 100%"> + <el-option + v-for="item in state.busList" + :key="item.id" + :label="item.label" + :value="item.label" + /> + </el-select> + </el-form-item> + </el-col> + </el-row> + <el-row :gutter="30"> + <el-col :span="8"> + <el-form-item prop="agency.reportPath" label="加盖公章的《机构信息上报表》"> + <!-- <el-upload--> + <!-- v-model:file-list="state.fileList"--> + <!-- class="upload-demo"--> + <!-- action=""--> + <!-- multiple--> + <!-- :on-preview="handlePreview"--> + <!-- :on-remove="handleRemove"--> + <!-- :before-remove="beforeRemove"--> + <!-- :limit="3"--> + <!-- :on-exceed="handleExceed"--> + <!-- >--> + <!-- <el-button type="primary">点击上传</el-button>--> + <!-- <template #tip>--> + <!-- <div class="el-upload__tip">--> + <!-- 上传文件大小不超过2M--> + <!-- </div>--> + <!-- </template>--> + <!-- </el-upload>--> + <el-upload accept="image/*" :action="state.uploadUrl" :headers="state.header" method="post" :on-success="handleAvatarSuccess" :on-exceed="showTip" :on-preview="handlePictureCardPreview" :limit='state.imgLimit' v-model:file-list="state.fileList" list-type="picture-card" :before-upload="picSize" :on-remove="handleRemove" :before-remove="beforeRemove"> + <el-icon><Plus /></el-icon> + <template #tip> + <div class="el-upload__tip">上传jpg/png图片尺寸小于5M,最多可上传1张</div> + </template> + </el-upload> + </el-form-item> + </el-col> + </el-row> + <el-row :gutter="30"> + <el-col :span="12"> + <el-form-item prop="username" label="登录用户名(字母+数字,长度在5-16之间)"> + <el-input + v-model="registerForm.username" + size="large" + placeholder="请输入登录用户名" + /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item prop="phone" label="用户电话"> + <el-input + v-model="registerForm.phone" + size="large" + placeholder="请输入用户电话" + /> + </el-form-item> + </el-col> + </el-row> + <el-row :gutter="30"> + <el-col :span="12"> + <el-form-item prop="password" label="密码"> + <el-input + v-model="registerForm.password" + type="password" + size="large" + placeholder="请输入密码" + show-password + /> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item prop="confirmPassword" label="确认密码"> + <el-input + v-model="registerForm.confirmPassword" + type="password" + size="large" + auto-complete="off" + placeholder="确认密码" + show-password + > + </el-input> + </el-form-item> + </el-col> + </el-row> <el-form-item style="width:100%;"> <el-button :loading="loading" size="large" type="primary" - style="width:100%;" + style="width:40%;margin: 0 auto" @click.prevent="handleRegister" > <span v-if="!loading">注 册</span> <span v-else>注 册 中...</span> </el-button> -<!-- <div style="float: right;">--> -<!-- <router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>--> -<!-- </div>--> </el-form-item> </el-form> + <el-dialog v-model="state.dialogImg"> + <el-image style="width: 100%; height: 100%" :src="state.dialogImageUrl"/> + </el-dialog> </el-dialog> - <!-- 底部 --> -<!-- <div class="el-Register-footer">--> -<!-- <span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span>--> -<!-- </div>--> </template> <script setup> -import {ref, watch, defineExpose, onMounted} from "vue" -import { ElMessageBox } from "element-plus"; -import { getCodeImg, register } from "@/api/login"; +import {ref, watch, defineExpose, onMounted, reactive} from "vue" +import {ElMessage, ElMessageBox} from "element-plus" +import { register,delPic,getDict } from "@/api/login" +import { getRegionTree } from "@/api/area" +import { getToken } from "@/utils/auth"; +import {verifyPhone, verifyUsername, verifyPwd} from "../../../utils/validate"; +let { proxy } = getCurrentInstance() +import { Base64 } from 'js-base64' +const registerForm = ref({ + agency:{ + name: "", + creditCode: "", + attribute: 0, + area: [], + province: '', + city: '', + district: '', + address: '', + legalPerson: '', + legalPhone: '', + manager: '', + managerPhone: '', + certNumber: '', + issueDate: '', + validDate: '', + assetValue: '', + workArea: '', + archiveArea: '', + regAddress: '', + business: '', + reportPath: '', + }, + username: '', + phone: '', + password: '', + confirmPassword: '' +}); -const router = useRouter(); -const { proxy } = getCurrentInstance(); -const test=()=>{ - dialogVisible.value = false +const props = { + expandTrigger: 'hover', + value: 'name', + label: 'name' } -const registerForm = ref({ - username: "", - password: "", - confirmPassword: "", - code: "", - uuid: "" -}); +const state = reactive({ + areaList: [], + busList: [], + fileList: [], + imgLimit: 1, + uploadUrl: import.meta.env.VITE_APP_BASE_API + '/system/common/uploadFile', + header: { + Authorization: 'Bearer ' + getToken() + }, + dialogImageUrl: '', + dialogImg: false +}) + const equalToPassword = (rule, value, callback) => { if (registerForm.value.password !== value) { @@ -101,65 +352,205 @@ } }; +const validatePhone = (rule, value, callback)=>{ + if(value === ''){ + callback(new Error('请输入手机号')) + }else{ + if(!verifyPhone(value)){ + callback(new Error('手机号格式有误')) + }else{ + callback() + } + } +} + +const validateUsername = (rule, value, callback)=>{ + if(value === ''){ + callback(new Error('请输入登录时用户名')) + }else{ + if(!verifyUsername(value)){ + callback(new Error('用户名须使用字母+数字,长度在5-16之间')) + }else{ + callback() + } + } +} + +let validatePwd = (rule, value, callback)=>{ + if(value === ''){ + callback(new Error('请输入密码')) + }else{ + if(!verifyPwd(value)){ + callback(new Error('密码须包含字母、数字、特殊字符(不包括下划线),长度在6-16之间')) + }else{ + callback() + } + } +} + const registerRules = { - username: [ - { required: true, trigger: "blur", message: "请输入您的账号" }, - { min: 2, max: 20, message: "用户账号长度必须介于 2 和 20 之间", trigger: "blur" } - ], - password: [ - { required: true, trigger: "blur", message: "请输入您的密码" }, - { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" } - ], + "agency.name": [{required: true, trigger: "blur", message: "请输入机构名称"}], + "agency.creditCode": [{required: true, trigger: "blur", message: "请输入社会信用代码"}], + "agency.attribute": [{required: true, trigger: "blur", message: "请选择机构属性"}], + "agency.area": [{required: true, trigger: "blur", message: "请选择实际经营地址所属区域"}], + "agency.address": [{required: true, trigger: "blur", message: "请输入实际经营地址"}], + "agency.legalPerson": [{required: true, trigger: "blur", message: "请输入法定代表人"}], + "agency.legalPhone": [{required: true, trigger: "blur", validator: validatePhone}], + "agency.manager": [{required: true, trigger: "blur", message: "请输入机构负责人"}], + "agency.managerPhone": [{required: true, trigger: "blur", validator: validatePhone}], + "agency.certNumber": [{required: true, trigger: "blur", message: "请输入资质证书编号"}], + "agency.issueDate": [{required: true, trigger: "blur", message: "请选择发证日期"}], + "agency.validDate": [{required: true, trigger: "blur", message: "请选择有效日期"}], + "agency.assetValue": [{required: true, trigger: "blur", message: "请输入固定资产总值"}], + "agency.workArea": [{required: true, trigger: "blur", message: "请输入工作场所建筑面积"}], + "agency.archiveArea": [{required: true, trigger: "blur", message: "请输入档案室面积"}], + "agency.regAddress": [{required: true, trigger: "blur", message: "请输入注册地址"}], + "agency.business": [{required: true, trigger: "blur", message: "请选择申请的法定安全评价业务范围"}], + "agency.reportPath": [{required: true, trigger: "blur", message: "请上传加盖公章的《机构信息上报表》"}], + username: [{ required: true, trigger: "blur", validator: validateUsername }], + phone: [{ required: true, trigger: "blur", validator: validatePhone }], + password: [{ required: true, trigger: "blur", validator: validatePwd }], confirmPassword: [ - { required: true, trigger: "blur", message: "请再次输入您的密码" }, + { required: true, trigger: "blur", message: "请再次确认密码" }, { required: true, validator: equalToPassword, trigger: "blur" } - ], - code: [{ required: true, trigger: "change", message: "请输入验证码" }] + ] }; -const codeUrl = ref(""); -const loading = ref(false); -const captchaEnabled = ref(true); +const loading = ref(false) const dialogVisible = ref(false) +const registerRef = ref(null) + onMounted(()=>{ - getCode(); + getBusiness() + getArea() }) + +const handleChange = (value) => { + if(registerForm.value.agency.attribute == 0){ + registerForm.value.agency.province = '新疆维吾尔自治区' + registerForm.value.agency.city = value[0]?value[0]:'' + registerForm.value.agency.district = value[1]?value[1]:'' + }else{ + registerForm.value.agency.province = value[0]?value[0]:'' + registerForm.value.agency.city = value[1]?value[1]:'' + registerForm.value.agency.district = value[2]?value[2]:'' + } +} + +const getBusiness = async ()=>{ + const res = await getDict({dictType: 'sys_business_scope'}) + if(res.code == 200){ + state.busList = res.data + }else{ + ElMessage.warning(res.message) + } +} + +const getArea = async ()=>{ + const type = registerForm.value.agency.attribute + const res = await getRegionTree({name: '',parentId: null,regionType: type}) + if(res.code == 200){ + state.areaList = res.data + }else{ + ElMessage.warning(res.message) + } +} + +const changeAttr=()=>{ + getArea() +} + +// 图片上传 +const showTip =()=>{ + ElMessage({ + type: 'warning', + message: '超出文件上传数量' + }); +} + +const picSize = async (rawFile) => { + if(rawFile.size / 1024 / 1024 > 5){ + ElMessage({ + type: 'warning', + message: '文件大小不能超过5M' + }); + return false + } +}; + +const handlePictureCardPreview = (uploadFile) => { + state.dialogImageUrl = uploadFile.url + state.dialogImg = true +}; + + +const handleAvatarSuccess = (res, uploadFile) => { + if(res.code == 200){ + registerForm.value.agency.reportPath = res.data.path + }else{ + ElMessage({ + type: 'warning', + message: '文件上传失败' + }) + } +} + +const handleRemove = async (file, uploadFiles) => { + const res = await delPic({path: registerForm.value.agency.reportPath}) + if(res.code == 200){ + ElMessage({ + type: 'success', + message: '文件已删除' + }) + }else{ + ElMessage({ + type: 'warning', + message: res.message + }) + } +} function handleRegister() { proxy.$refs.registerRef.validate(valid => { if (valid) { loading.value = true; - register(registerForm.value).then(res => { - const username = registerForm.value.username; - ElMessageBox.alert("<font color='red'>恭喜你,您的账号 " + username + " 注册成功!</font>", "系统提示", { - dangerouslyUseHTMLString: true, - type: "success", - }).then(() => { - router.push("/homePage"); - }).catch(() => {}); - }).catch(() => { - loading.value = false; - if (captchaEnabled) { - getCode(); + const {confirmPassword, ...data} = registerForm.value + data.password = Base64.encode(data.password) + delete data.agency.area + register(data).then(res => { + if(res.code == 200){ + const username = registerForm.value.username + ElMessageBox.alert("<font color='red'>恭喜,您的账号 " + username + " 注册成功!</font>", "系统提示", { + dangerouslyUseHTMLString: true, + type: "success", + }).then(() => { + dialogVisible.value = false + proxy.$refs.registerRef.resetFields() + proxy.$refs.registerRef.clearValidate() + state.fileList = [] + // router.push("/homePage") + }).catch(() => {}) + }else{ + ElMessage({ + type: 'warning', + message: res.message + }) } - }); + }).catch(() => { + loading.value = false + }) } }); } -function getCode() { - getCodeImg().then(res => { - captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled; - if (captchaEnabled.value) { - codeUrl.value = "data:image/gif;base64," + res.img; - registerForm.value.uuid = res.uuid; - } - }); +const closeDialog = ()=>{ + proxy.$refs.registerRef.resetFields() + proxy.$refs.registerRef.clearValidate() + state.fileList = [] } defineExpose({ dialogVisible, - test }) </script> @@ -183,6 +574,9 @@ width: 14px; margin-left: 0px; } + .el-radio-group{ + width: 200px !important; + } } .register-tip { font-size: 13px; diff --git a/src/utils/request.js b/src/utils/request.js index e848155..39cb883 100644 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -82,18 +82,23 @@ return res.data } if (code === 401) { - // if (!isRelogin.show) { - isRelogin.show = true; - ElMessageBox.confirm('登录状态已过期,您可以继续留在该页面,或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => { - isRelogin.show = false; - useUserStore().logOut().then(() => { - location.href = '/index'; - }) - }).catch(() => { - isRelogin.show = false - }); - // } - // return Promise.reject('无效的会话,或者会话已过期,请重新登录。') + if(location.href.indexOf('homePage') == -1 ){ + if (!isRelogin.show) { + isRelogin.show = true; + ElMessageBox.confirm('登录状态已过期,您可以继续留在该页面,或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => { + isRelogin.show = false; + useUserStore().logOut().then(() => { + location.href = '/index'; + }) + }).catch(() => { + isRelogin.show = false + }); + } + }else{ + // ElMessage({ message: res.data.message, type: 'error' }) + console.log(res.data.message) + } + return Promise.reject('无效的会话,或者会话已过期,请重新登录。') } else if (code === 500) { ElMessage({ message: msg, type: 'error' }) return Promise.reject(new Error(msg)) diff --git a/src/utils/validate.js b/src/utils/validate.js index 702add4..9a72225 100644 --- a/src/utils/validate.js +++ b/src/utils/validate.js @@ -16,6 +16,23 @@ return /^(https?:|mailto:|tel:)/.test(path) } +export function verifyPhone(val) { + var regex = /^\d{11}$/; // 正则表达式,\d 匹配数字,{11} 表示匹配11次 + return regex.test(val); +} + +export function verifyUsername(val) { + var regex = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{5,16}$/; // 正则表达式,\d 匹配数字,{11} 表示匹配11次 + return regex.test(val); +} + +export function verifyPwd(val) { + // false: 强密码不正确 + if (!/^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&\.*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&\.*]+$)(?![\d!@#$%^&\.*]+$)[a-zA-Z\d!@#$%^&\.*]{6,16}$/.test(val)) return false; + // true: 强密码正确 + else return true; +} + /** * @param {string} str * @returns {Boolean} diff --git a/src/views/components/details.vue b/src/views/components/details.vue new file mode 100644 index 0000000..b2eb8c9 --- /dev/null +++ b/src/views/components/details.vue @@ -0,0 +1,70 @@ +<template> + <div class="container"> + <div class="header"> + <div> + <el-icon :size="20"> + <Location /> + </el-icon> + <span>我的位置:</span> + </div> + <el-breadcrumb :separator-icon="ArrowRight"> + <el-breadcrumb-item>{{ state.firstClass }}</el-breadcrumb-item> + <el-breadcrumb-item>{{state.firstClass}}</el-breadcrumb-item> + </el-breadcrumb> + </div> + <div class="main"> + + </div> + </div> +</template> + +<script setup> +import {onMounted, ref, reactive, watch, onUnmounted, defineExpose} from "vue" +import { ArrowRight } from '@element-plus/icons-vue' +import {ElMessage} from "element-plus"; + +const route = useRoute() +const router = useRouter() +const redirect = ref(undefined); +const state = reactive({ + firstClass: '第一级菜单' +}) + + + +onMounted(()=>{ + +}) + +onUnmounted(()=>{ + +}) + +watch(route, (newRoute) => { + redirect.value = newRoute.query && newRoute.query.redirect; +}, { immediate: true }); + + +defineExpose({ + +}) + +</script> + +<style lang='scss' scoped> +.container { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + margin-top: 170px; + .header{ + display: flex; + align-items: center; + &>div{ + display: flex; + align-items: center; + } + } +} +</style> diff --git a/src/views/components/home.vue b/src/views/components/home.vue index bdf277a..71677fd 100644 --- a/src/views/components/home.vue +++ b/src/views/components/home.vue @@ -49,7 +49,7 @@ <div v-for="item in state.pubList"> <div><img src="src/assets/images/section.png"></div> <div> - <div>{{item.title}}</div> + <div>{{item.name}}</div> <span>{{item.updateTime}}</span> </div> </div> diff --git a/src/views/components/loginForm.vue b/src/views/components/loginForm.vue index 2f5995e..4336fce 100644 --- a/src/views/components/loginForm.vue +++ b/src/views/components/loginForm.vue @@ -24,6 +24,7 @@ auto-complete="off" placeholder="密码" @keyup.enter="handleLogin" + show-password > <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template> </el-input> @@ -49,7 +50,7 @@ :loading="loading" size="large" type="primary" - style="width:50%;" + style="width:63%;" @click.prevent="handleLogin" > <span v-if="!loading">登 录</span> @@ -78,8 +79,8 @@ const { proxy } = getCurrentInstance(); const loginForm = ref({ - username: "admin", - password: "admin@123", + username: "", + password: "", code: "", uuid: "" }); diff --git a/src/views/homePage.vue b/src/views/homePage.vue index 100a502..f76cacb 100644 --- a/src/views/homePage.vue +++ b/src/views/homePage.vue @@ -43,6 +43,7 @@ <Notice v-if="state.activeMenu==2" ref="noticeRef"/> <Laws v-if="state.activeMenu==3" ref="lawsRef"/> <Publish v-if="state.activeMenu==4" ref="publishRef"/> + <Details ref="detailsRef"></Details> </div> </div> <!-- 底部 --> @@ -59,6 +60,7 @@ import Notice from './components/notice' import Laws from './components/laws' import Publish from './components/publish' +import Details from './components/details' const route = useRoute() const router = useRouter() @@ -82,13 +84,13 @@ activeMenu: 1, date: '', weekDay: '', - dayTime: '' + dayTime: '', + checkDetails: false }) // 当前时间 const getDateTime = () => { const curTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-'); - console.log(curTime,'time') state.date = curTime.slice(0, 10); let week = ['日', '一', '二', '三', '四', '五', '六']; let day = new Date().getDay(); -- Gitblit v1.9.2