| | |
| | | #黄镇 |
| | | #VITE_APP_BASE_API = 'http://192.168.0.47:8085' |
| | | |
| | | #张凤 |
| | | #VITE_APP_BASE_API = 'http://192.168.0.70:8085' |
| | | #孔哥 |
| | | VITE_APP_BASE_API = 'http://192.168.0.77:8088/api' |
| | | |
| | | #线上 |
| | | VITE_APP_BASE_API = 'http://121.239.169.30:8086/api' |
| | | #VITE_APP_BASE_API = 'http://121.239.169.30:8086/api' |
对比新文件 |
| | |
| | | import request from '@/utils/request' |
| | | |
| | | // 获取分页 |
| | | export function getNotice(params) { |
| | | return request({ |
| | | url: '/system/notice/noticeList', |
| | | method: 'get', |
| | | params: params |
| | | }) |
| | | } |
| | | |
| | | // 获取分页 |
| | | export function getLaws(params) { |
| | | return request({ |
| | | url: '/system/law/lawList', |
| | | method: 'get', |
| | | params: params |
| | | }) |
| | | } |
| | | |
| | | // 获取分页 |
| | | export function getPublish(params) { |
| | | return request({ |
| | | url: '/system/agency/agencyList', |
| | | method: 'get', |
| | | params: params |
| | | }) |
| | | } |
| | |
| | | uuid |
| | | } |
| | | return request({ |
| | | url: '/login', |
| | | url: '/account/login', |
| | | headers: { |
| | | isToken: false, |
| | | repeatSubmit: false |
| | |
| | | // 退出方法 |
| | | export function logout() { |
| | | return request({ |
| | | url: '/logout', |
| | | url: '/account/logout', |
| | | method: 'post' |
| | | }) |
| | | } |
| | |
| | | // 获取验证码 |
| | | export function getCodeImg() { |
| | | return request({ |
| | | url: '/captchaImage', |
| | | url: '/system/captcha/captchaImage', |
| | | headers: { |
| | | isToken: false |
| | | }, |
| | |
| | | --el-color-warning: #EAB308 !important; |
| | | --el-color-success: #10B981 !important; |
| | | --el-color-info: #1f2937 !important; |
| | | } |
| | | |
| | | .blueFont{ |
| | | color: #5175C0; |
| | | } |
| | | |
| | | .blueBg{ |
| | | background: #5175C0; |
| | | } |
| | |
| | | if (getToken()) { |
| | | to.meta.title && useSettingsStore().setTitle(to.meta.title) |
| | | /* has token*/ |
| | | if (to.path === '/homePage') { |
| | | next({ path: '/' }) |
| | | NProgress.done() |
| | | } else { |
| | | if (useUserStore().roles.length === 0) { |
| | | isRelogin.show = true |
| | | // 判断当前用户是否已拉取完user_info信息 |
| | | useUserStore().getInfo().then(() => { |
| | | isRelogin.show = false |
| | | usePermissionStore().generateRoutes().then(accessRoutes => { |
| | | // 根据roles权限生成可访问的路由表 |
| | | accessRoutes.forEach(route => { |
| | | if (!isHttp(route.path)) { |
| | | router.addRoute(route) // 动态添加可访问路由表 |
| | | } |
| | | }) |
| | | next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 |
| | | }) |
| | | }).catch(err => { |
| | | useUserStore().logOut().then(() => { |
| | | ElMessage.error(err) |
| | | next({ path: '/' }) |
| | | }) |
| | | }) |
| | | } else { |
| | | // if (to.path === '/homePage') { |
| | | // next({ path: '/' }) |
| | | // NProgress.done() |
| | | // } else { |
| | | // if (useUserStore().roles.length === 0) { |
| | | // isRelogin.show = true |
| | | // // 判断当前用户是否已拉取完user_info信息 |
| | | // useUserStore().getInfo().then(() => { |
| | | // isRelogin.show = false |
| | | // usePermissionStore().generateRoutes().then(accessRoutes => { |
| | | // // 根据roles权限生成可访问的路由表 |
| | | // accessRoutes.forEach(route => { |
| | | // if (!isHttp(route.path)) { |
| | | // router.addRoute(route) // 动态添加可访问路由表 |
| | | // } |
| | | // }) |
| | | // next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 |
| | | // }) |
| | | // }).catch(err => { |
| | | // useUserStore().logOut().then(() => { |
| | | // ElMessage.error(err) |
| | | // next({ path: '/' }) |
| | | // }) |
| | | // }) |
| | | // } else { |
| | | next() |
| | | } |
| | | } |
| | | // } |
| | | // } |
| | | } else { |
| | | // 没有token |
| | | if (whiteList.indexOf(to.path) !== -1) { |
| | |
| | | const uuid = userInfo.uuid |
| | | return new Promise((resolve, reject) => { |
| | | login(username, password, code, uuid).then(res => { |
| | | setToken(res.token) |
| | | this.token = res.token |
| | | setToken(res.data.token) |
| | | this.token = res.data.token |
| | | resolve() |
| | | }).catch(error => { |
| | | reject(error) |
| | |
| | | return res.data |
| | | } |
| | | if (code === 401) { |
| | | if (!isRelogin.show) { |
| | | // if (!isRelogin.show) { |
| | | isRelogin.show = true; |
| | | ElMessageBox.confirm('登录状态已过期,您可以继续留在该页面,或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => { |
| | | isRelogin.show = false; |
| | |
| | | location.href = '/index'; |
| | | }) |
| | | }).catch(() => { |
| | | isRelogin.show = false; |
| | | isRelogin.show = false |
| | | }); |
| | | } |
| | | return Promise.reject('无效的会话,或者会话已过期,请重新登录。') |
| | | // } |
| | | // return Promise.reject('无效的会话,或者会话已过期,请重新登录。') |
| | | } else if (code === 500) { |
| | | ElMessage({ message: msg, type: 'error' }) |
| | | return Promise.reject(new Error(msg)) |
对比新文件 |
| | |
| | | <template> |
| | | <div class="container"> |
| | | <div class="main-content"> |
| | | <div class="list-container"> |
| | | <div class="tit"> |
| | | <div> |
| | | <Platform style="width: 1em; height: 1em;margin-right: 4px" /> |
| | | 通知公告 |
| | | </div> |
| | | <el-button plain @click="toMore(2)">查看更多</el-button> |
| | | </div> |
| | | <div class="list"> |
| | | <div v-for="item in state.noticeList"> |
| | | <div><img src="src/assets/images/notice.png"></div> |
| | | <div> |
| | | <div>{{item.title}}</div> |
| | | <span>{{item.updateTime}}</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="list-container"> |
| | | <div class="tit"> |
| | | <div> |
| | | <Platform style="width: 1em; height: 1em;margin-right: 4px" /> |
| | | 法律法规 |
| | | </div> |
| | | <el-button plain @click="toMore(3)">查看更多</el-button> |
| | | </div> |
| | | <div class="list"> |
| | | <div v-for="item in state.lawsList"> |
| | | <div><img src="src/assets/images/laws.png"></div> |
| | | <div> |
| | | <div>{{item.title}}</div> |
| | | <span>{{item.updateTime}}</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="list-container"> |
| | | <div class="tit"> |
| | | <div> |
| | | <Platform style="width: 1em; height: 1em;margin-right: 4px" /> |
| | | 机构公示 |
| | | </div> |
| | | <el-button plain @click="toMore(4)">查看更多</el-button> |
| | | </div> |
| | | <div class="list"> |
| | | <div v-for="item in state.pubList"> |
| | | <div><img src="src/assets/images/section.png"></div> |
| | | <div> |
| | | <div>{{item.title}}</div> |
| | | <span>{{item.updateTime}}</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="login-container"> |
| | | <!-- <div class="tit">--> |
| | | <!-- <div>--> |
| | | <!-- <Platform style="width: 1em; height: 1em;margin-right: 4px" />--> |
| | | <!-- 资料下载--> |
| | | <!-- </div>--> |
| | | <!-- <el-button plain>查看更多</el-button>--> |
| | | <!-- </div>--> |
| | | <!-- <div class="list">--> |
| | | <!-- <div v-for="item in state.newList">--> |
| | | <!-- <div><img src="src/assets/images/file.png"></div>--> |
| | | <!-- <div>--> |
| | | <!-- <div>{{item.title}}</div>--> |
| | | <!-- <span>{{item.date}}</span>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <login-form ref="loginRef"/> |
| | | </div> |
| | | </div> |
| | | <!-- <login-form ref="loginRef"/>--> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import {onMounted, ref, reactive, watch, onUnmounted, defineEmits, defineExpose} from "vue" |
| | | import { getNotice, getLaws, getPublish } from '@/api/home/homePage' |
| | | import useUserStore from '@/store/modules/user' |
| | | import LoginForm from './loginForm' |
| | | import {ElMessage} from "element-plus"; |
| | | |
| | | const route = useRoute() |
| | | const router = useRouter() |
| | | |
| | | const state = reactive({ |
| | | noticeList: [], |
| | | lawsList: [], |
| | | pubList: [] |
| | | }) |
| | | const emit = defineEmits(["toMore"]) |
| | | const redirect = ref(undefined); |
| | | |
| | | onMounted(()=>{ |
| | | getNoticeList() |
| | | getLawsList() |
| | | getPubList() |
| | | }) |
| | | |
| | | onUnmounted(()=>{ |
| | | |
| | | }) |
| | | |
| | | watch(route, (newRoute) => { |
| | | redirect.value = newRoute.query && newRoute.query.redirect; |
| | | }, { immediate: true }) |
| | | |
| | | const toMore=(num)=>{ |
| | | emit('toMore',num) |
| | | } |
| | | |
| | | const getNoticeList = async ()=>{ |
| | | const res = await getNotice({title: '', content: '', pageNum: 1, pageSize: 5}) |
| | | if(res.code == 200){ |
| | | state.noticeList = res.data.list |
| | | }else{ |
| | | ElMessage.warning(res.message) |
| | | } |
| | | } |
| | | |
| | | const getLawsList = async ()=>{ |
| | | const res = await getLaws({title: '', content: '', pageNum: 1, pageSize: 5}) |
| | | if(res.code == 200){ |
| | | state.lawsList = res.data.list |
| | | }else{ |
| | | ElMessage.warning(res.message) |
| | | } |
| | | } |
| | | |
| | | const getPubList = async ()=>{ |
| | | const res = await getPublish({title: '', content: '', pageNum: 1, pageSize: 5}) |
| | | if(res.code == 200){ |
| | | state.pubList = res.data.list |
| | | }else{ |
| | | ElMessage.warning(res.message) |
| | | } |
| | | } |
| | | |
| | | defineExpose({ |
| | | getNoticeList, |
| | | getLawsList, |
| | | getPubList |
| | | }) |
| | | |
| | | </script> |
| | | |
| | | <style lang='scss' scoped> |
| | | .container { |
| | | width: 100%; |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | margin-top: 170px; |
| | | |
| | | .main-content{ |
| | | width: 1200px; |
| | | margin: 20px 0 80px; |
| | | display: grid; |
| | | grid-gap: 15px; |
| | | grid-template-columns: repeat(2, 1fr); |
| | | grid-template-rows: repeat(2, 350px); |
| | | grid-auto-flow: row; |
| | | justify-content: center; |
| | | color: #333; |
| | | |
| | | .login-container{ |
| | | border-radius: 4px; |
| | | box-shadow: 1px 1px 3px rgba(0,0,0,.04); |
| | | padding: 0 15px; |
| | | overflow: hidden; |
| | | background: url("../../assets/images/login-bg.jpg"); |
| | | } |
| | | |
| | | .list-container{ |
| | | border-radius: 4px; |
| | | box-shadow: 1px 1px 3px rgba(0,0,0,.04); |
| | | padding: 0 15px; |
| | | overflow: hidden; |
| | | background: #fff url("../../assets/images/city-bg.png") no-repeat right bottom; |
| | | background-size: 40% auto; |
| | | |
| | | .tit{ |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | padding: 10px 0; |
| | | border-bottom: 1px solid #ebeef5; |
| | | &>div{ |
| | | display: flex; |
| | | align-items: center; |
| | | font-size: 18px; |
| | | color: #425f9f; |
| | | font-weight: bolder; |
| | | } |
| | | } |
| | | .list{ |
| | | width: 100%; |
| | | margin-top: 10px; |
| | | |
| | | &>div{ |
| | | width: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | cursor: pointer; |
| | | padding: 5px; |
| | | border-radius: 4px; |
| | | |
| | | &>div:first-of-type{ |
| | | width: 40px; |
| | | height: 40px; |
| | | border-radius: 4px; |
| | | background: #eaf1ff; |
| | | margin-right: 10px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | img{ |
| | | width: 28px; |
| | | height: 28px; |
| | | } |
| | | } |
| | | &>div:last-of-type{ |
| | | width: calc(100% - 50px); |
| | | font-size: 16px; |
| | | div{ |
| | | width: 100%; |
| | | white-space: nowrap; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | font-family: "PingFang SC"; |
| | | margin-bottom: 4px; |
| | | } |
| | | span{ |
| | | color: #999; |
| | | } |
| | | } |
| | | &:hover{ |
| | | background: #f5f5f5; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </style> |
对比新文件 |
| | |
| | | <template> |
| | | <div class="container"> |
| | | <div class="main-content"> |
| | | <div class="filters"> |
| | | <el-form :model="state.querys"> |
| | | <el-form-item label="法律法规名称" style="width: 500px;margin-bottom: 0;margin-right: 20px"> |
| | | <el-input v-model="state.querys.title" /> |
| | | </el-form-item> |
| | | </el-form> |
| | | <el-button type="primary" :icon="Search" class="searchBtn">搜索</el-button> |
| | | <el-button type="primary" :icon="Refresh" class="resetBtn">重置</el-button> |
| | | </div> |
| | | <div class="list"> |
| | | <div v-for="item in state.dataList"> |
| | | <div> |
| | | <div><img src="src/assets/images/article.png"></div> |
| | | <div>{{item.title}}</div> |
| | | </div> |
| | | <span> |
| | | {{item.updateTime}} |
| | | </span> |
| | | </div> |
| | | </div> |
| | | <div class="pag-container"> |
| | | <el-pagination |
| | | v-model:current-page="state.querys.pageNum" |
| | | v-model:page-size="state.querys.pageSize" |
| | | :page-sizes="[10,15,20,25]" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :total="state.total" |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | | /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import {onMounted, ref, reactive, watch, onUnmounted, defineExpose} from "vue" |
| | | import { getLaws } from '@/api/home/homePage' |
| | | import useUserStore from '@/store/modules/user' |
| | | import { Search, Refresh } from '@element-plus/icons-vue' |
| | | import {ElMessage} from "element-plus"; |
| | | |
| | | const route = useRoute() |
| | | const router = useRouter() |
| | | |
| | | const state = reactive({ |
| | | dataList: [], |
| | | querys:{ |
| | | title: '', |
| | | content: '', |
| | | pageNum: 1, |
| | | pageSize: 10 |
| | | }, |
| | | total: null |
| | | }) |
| | | |
| | | const redirect = ref(undefined); |
| | | |
| | | onMounted(()=>{ |
| | | getData() |
| | | }) |
| | | |
| | | onUnmounted(()=>{ |
| | | |
| | | }) |
| | | |
| | | watch(route, (newRoute) => { |
| | | redirect.value = newRoute.query && newRoute.query.redirect; |
| | | }, { immediate: true }); |
| | | |
| | | const getData = async ()=>{ |
| | | const res = await getLaws(state.querys) |
| | | if(res.code == 200){ |
| | | state.dataList = res.data.list |
| | | state.total = res.data.total |
| | | }else{ |
| | | ElMessage.warning(res.message) |
| | | } |
| | | } |
| | | |
| | | const handleSizeChange = (val) => { |
| | | state.querys.pageSize = val |
| | | getData() |
| | | } |
| | | const handleCurrentChange = (val) => { |
| | | state.querys.pageNum = val |
| | | getData() |
| | | } |
| | | |
| | | defineExpose({ |
| | | getData |
| | | }) |
| | | |
| | | </script> |
| | | |
| | | <style lang='scss' scoped> |
| | | .container { |
| | | width: 100%; |
| | | display: flex; |
| | | justify-content: center; |
| | | margin-top: 170px; |
| | | |
| | | .main-content{ |
| | | width: 1200px; |
| | | margin: 20px 0; |
| | | background: #fff; |
| | | border-radius: 4px; |
| | | box-shadow: 1px 1px 3px rgba(0,0,0,.04); |
| | | padding: 0 10px; |
| | | color: #333; |
| | | |
| | | .filters{ |
| | | margin-top: 20px; |
| | | display: flex; |
| | | align-items: center; |
| | | padding-left: 10px; |
| | | |
| | | .searchBtn{ |
| | | border: none; |
| | | border-radius: 4px !important; |
| | | background-image: linear-gradient(90deg,#4064df,#548dfb); |
| | | |
| | | &:active{ |
| | | border-radius: 99px !important; |
| | | background-image: linear-gradient(-90deg,#4064df,#548dfb); |
| | | } |
| | | } |
| | | .resetBtn{ |
| | | border: none; |
| | | border-radius: 4px !important; |
| | | background-image: linear-gradient(90deg,#fc8e2e,#ffaa59); |
| | | |
| | | &:active{ |
| | | border-radius: 99px !important; |
| | | background-image: linear-gradient(-90deg,#fc8e2e,#ffaa59); |
| | | } |
| | | } |
| | | } |
| | | |
| | | .list{ |
| | | padding: 15px 0; |
| | | |
| | | &>div{ |
| | | display: flex; |
| | | padding: 10px; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | border-bottom: 1px dashed #ebeef5; |
| | | cursor: pointer; |
| | | border-radius: 4px; |
| | | font-size: 16px; |
| | | |
| | | &>div{ |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | div:first-of-type{ |
| | | width: 40px; |
| | | height: 40px; |
| | | margin-right: 10px; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | |
| | | img{ |
| | | width: 28px; |
| | | height: 28px; |
| | | } |
| | | } |
| | | div:last-of-type{ |
| | | width: 1000px; |
| | | white-space: nowrap; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | font-family: "PingFang SC"; |
| | | } |
| | | } |
| | | span{ |
| | | color: #999; |
| | | } |
| | | &:hover{ |
| | | background: #f5f5f5; |
| | | } |
| | | &:active{ |
| | | background: #425f9f; |
| | | color: #fff; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .pag-container{ |
| | | width: 100%; |
| | | height: 80px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: right; |
| | | } |
| | | } |
| | | } |
| | | </style> |
对比新文件 |
| | |
| | | <template> |
| | | <div class="login-panel"> |
| | | <div class="login-img"> |
| | | <img src="src/assets/images/loginImg.png"> |
| | | </div> |
| | | <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form"> |
| | | <h3 class="title">登录系统</h3> |
| | | <el-form-item prop="username"> |
| | | <el-input |
| | | v-model="loginForm.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="loginForm.password" |
| | | type="password" |
| | | size="large" |
| | | auto-complete="off" |
| | | placeholder="密码" |
| | | @keyup.enter="handleLogin" |
| | | > |
| | | <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 |
| | | v-model="loginForm.code" |
| | | size="large" |
| | | auto-complete="off" |
| | | placeholder="验证码" |
| | | style="width: 63%" |
| | | @keyup.enter="handleLogin" |
| | | > |
| | | <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template> |
| | | </el-input> |
| | | <div class="login-code"> |
| | | <img :src="codeUrl" @click="getCode" class="login-code-img"/> |
| | | </div> |
| | | </el-form-item> |
| | | <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 25px"> |
| | | <!-- <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>--> |
| | | <el-button |
| | | :loading="loading" |
| | | size="large" |
| | | type="primary" |
| | | style="width:50%;" |
| | | @click.prevent="handleLogin" |
| | | > |
| | | <span v-if="!loading">登 录</span> |
| | | <span v-else>登 录 中...</span> |
| | | </el-button> |
| | | <div v-if="isRegister"> |
| | | <el-button link type="primary" @click="openRegist">立即注册</el-button> |
| | | </div> |
| | | </div> |
| | | </el-form> |
| | | </div> |
| | | <register ref="regRef"/> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import {onMounted, ref, watch, defineAsyncComponent, nextTick} from "vue" |
| | | import { getCodeImg } from "@/api/login"; |
| | | import Cookies from "js-cookie"; |
| | | import { encrypt, decrypt } from "@/utils/jsencrypt"; |
| | | import useUserStore from '@/store/modules/user' |
| | | import { Register } from "@/layout/components"; |
| | | |
| | | const userStore = useUserStore() |
| | | const route = useRoute(); |
| | | const router = useRouter(); |
| | | const { proxy } = getCurrentInstance(); |
| | | |
| | | const loginForm = ref({ |
| | | username: "admin", |
| | | password: "admin@123", |
| | | code: "", |
| | | uuid: "" |
| | | }); |
| | | |
| | | const loginRules = { |
| | | username: [{ required: true, trigger: "blur", message: "请输入您的账号" }], |
| | | password: [{ required: true, trigger: "blur", message: "请输入您的密码" }], |
| | | code: [{ required: true, trigger: "change", message: "请输入验证码" }] |
| | | }; |
| | | |
| | | const codeUrl = ref(""); |
| | | const loading = ref(false); |
| | | const regRef = ref(null) |
| | | // 验证码开关 |
| | | const captchaEnabled = ref(true); |
| | | // 注册开关 |
| | | const isRegister = ref(true); |
| | | const redirect = ref(undefined); |
| | | |
| | | onMounted(()=>{ |
| | | |
| | | }) |
| | | |
| | | const openRegist = ()=>{ |
| | | regRef.value.dialogVisible = true |
| | | } |
| | | |
| | | watch(route, (newRoute) => { |
| | | redirect.value = newRoute.query && newRoute.query.redirect; |
| | | }, { immediate: true }); |
| | | |
| | | function handleLogin() { |
| | | proxy.$refs.loginRef.validate(valid => { |
| | | if (valid) { |
| | | loading.value = true; |
| | | // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码 |
| | | // if (loginForm.value.rememberMe) { |
| | | Cookies.set("username", loginForm.value.username, { expires: 30 }); |
| | | Cookies.set("password", encrypt(loginForm.value.password), { expires: 30 }); |
| | | // Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 }); |
| | | // } else { |
| | | // 否则移除 |
| | | // Cookies.remove("username"); |
| | | // Cookies.remove("password"); |
| | | // Cookies.remove("rememberMe"); |
| | | // } |
| | | // 调用action的登录方法 |
| | | userStore.login(loginForm.value).then(() => { |
| | | const query = route.query; |
| | | const otherQueryParams = Object.keys(query).reduce((acc, cur) => { |
| | | if (cur !== "redirect") { |
| | | acc[cur] = query[cur]; |
| | | } |
| | | return acc; |
| | | }, {}); |
| | | router.push({ path: redirect.value || "/", query: otherQueryParams }); |
| | | }).catch(() => { |
| | | loading.value = false; |
| | | // 重新获取验证码 |
| | | if (captchaEnabled.value) { |
| | | getCode(); |
| | | } |
| | | }); |
| | | } |
| | | }); |
| | | } |
| | | |
| | | function getCode() { |
| | | getCodeImg().then(res => { |
| | | captchaEnabled.value = res.data.captchaEnabled === undefined ? true : res.captchaEnabled |
| | | if (captchaEnabled.value) { |
| | | codeUrl.value = "data:image/gif;base64," + res.data.image |
| | | loginForm.value.uuid = res.data.uuid |
| | | } |
| | | }); |
| | | } |
| | | |
| | | // function getCookie() { |
| | | // const username = Cookies.get("username") |
| | | // const password = Cookies.get("password") |
| | | // loginForm.value = { |
| | | // username: username === undefined ? loginForm.value.username : username, |
| | | // password: password === undefined ? loginForm.value.password : decrypt(password), |
| | | // }; |
| | | // } |
| | | |
| | | getCode(); |
| | | // getCookie(); |
| | | </script> |
| | | |
| | | <style lang='scss' scoped> |
| | | .login-panel{ |
| | | width: 100%; |
| | | height: 100%; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | } |
| | | .login-img{ |
| | | flex: 1; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | img{ |
| | | width: 100%; |
| | | } |
| | | } |
| | | .login-form { |
| | | flex: 2; |
| | | padding: 10px; |
| | | |
| | | .title{ |
| | | margin: 20px 0; |
| | | } |
| | | |
| | | .el-input { |
| | | height: 40px; |
| | | input { |
| | | height: 40px; |
| | | } |
| | | } |
| | | .input-icon { |
| | | height: 39px; |
| | | width: 14px; |
| | | margin-left: 0px; |
| | | } |
| | | } |
| | | .login-tip { |
| | | font-size: 13px; |
| | | text-align: center; |
| | | color: #bfbfbf; |
| | | } |
| | | .login-code { |
| | | width: 33%; |
| | | height: 40px; |
| | | float: right; |
| | | img { |
| | | display: inline-block; |
| | | width: 100%; |
| | | cursor: pointer; |
| | | vertical-align: middle; |
| | | } |
| | | } |
| | | |
| | | .el-form-item--default{ |
| | | margin-bottom: 15px; |
| | | } |
| | | |
| | | ::v-deep(.el-form-item__content){ |
| | | display: flex; |
| | | justify-content: space-between; |
| | | } |
| | | .login-code-img { |
| | | height: 40px; |
| | | padding-left: 12px; |
| | | } |
| | | </style> |
对比新文件 |
| | |
| | | <template> |
| | | <div class="container"> |
| | | <div class="main-content"> |
| | | <div class="list"> |
| | | <div v-for="item in state.dataList"> |
| | | <div> |
| | | <div><img src="src/assets/images/article.png"></div> |
| | | <div>{{item.title}}</div> |
| | | </div> |
| | | <span> |
| | | {{item.updateTime}} |
| | | </span> |
| | | </div> |
| | | </div> |
| | | <div class="pag-container"> |
| | | <el-pagination |
| | | v-model:current-page="state.querys.pageNum" |
| | | v-model:page-size="state.querys.pageSize" |
| | | :page-sizes="[10,15,20,25]" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :total="state.total" |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | | /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import {onMounted, ref, reactive, watch, onUnmounted, defineExpose} from "vue" |
| | | import { getNotice } from '@/api/home/homePage' |
| | | import useUserStore from '@/store/modules/user' |
| | | import {ElMessage} from "element-plus"; |
| | | |
| | | const route = useRoute() |
| | | const router = useRouter() |
| | | |
| | | const state = reactive({ |
| | | dataList: [], |
| | | querys:{ |
| | | title: '', |
| | | content: '', |
| | | pageNum: 1, |
| | | pageSize: 10 |
| | | }, |
| | | total: null |
| | | }) |
| | | |
| | | const redirect = ref(undefined); |
| | | |
| | | onMounted(()=>{ |
| | | getData() |
| | | }) |
| | | |
| | | onUnmounted(()=>{ |
| | | |
| | | }) |
| | | |
| | | watch(route, (newRoute) => { |
| | | redirect.value = newRoute.query && newRoute.query.redirect; |
| | | }, { immediate: true }); |
| | | |
| | | const handleSizeChange = (val) => { |
| | | state.querys.pageSize = val |
| | | getData() |
| | | } |
| | | const handleCurrentChange = (val) => { |
| | | state.querys.pageNum = val |
| | | getData() |
| | | } |
| | | |
| | | const getData = async ()=>{ |
| | | const res = await getNotice(state.querys) |
| | | if(res.code == 200){ |
| | | state.dataList = res.data.list |
| | | state.total = res.data.total |
| | | }else{ |
| | | ElMessage.warning(res.message) |
| | | } |
| | | } |
| | | |
| | | defineExpose({ |
| | | getData |
| | | }) |
| | | |
| | | </script> |
| | | |
| | | <style lang='scss' scoped> |
| | | .container { |
| | | width: 100%; |
| | | display: flex; |
| | | justify-content: center; |
| | | margin-top: 170px; |
| | | |
| | | .main-content{ |
| | | width: 1200px; |
| | | margin: 20px 0; |
| | | background: #fff; |
| | | border-radius: 4px; |
| | | box-shadow: 1px 1px 3px rgba(0,0,0,.04); |
| | | padding: 0 10px; |
| | | color: #333; |
| | | |
| | | .list{ |
| | | padding: 15px 0; |
| | | max-height: calc(100vh - 350px); |
| | | overflow-y: auto; |
| | | |
| | | &>div{ |
| | | display: flex; |
| | | padding: 10px; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | border-bottom: 1px dashed #ebeef5; |
| | | cursor: pointer; |
| | | border-radius: 4px; |
| | | font-size: 16px; |
| | | |
| | | &>div{ |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | div:first-of-type{ |
| | | width: 40px; |
| | | height: 40px; |
| | | margin-right: 10px; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | |
| | | img{ |
| | | width: 28px; |
| | | height: 28px; |
| | | } |
| | | } |
| | | div:last-of-type{ |
| | | width: 1000px; |
| | | white-space: nowrap; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | font-family: "PingFang SC"; |
| | | } |
| | | } |
| | | span{ |
| | | color: #999; |
| | | } |
| | | &:hover{ |
| | | background: #f5f5f5; |
| | | } |
| | | &:active{ |
| | | background: #425f9f; |
| | | color: #fff; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .pag-container{ |
| | | width: 100%; |
| | | height: 80px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: right; |
| | | } |
| | | } |
| | | } |
| | | </style> |
对比新文件 |
| | |
| | | <template> |
| | | <div class="container"> |
| | | <div class="main-content"> |
| | | <div class="filters"> |
| | | <el-form :model="state.querys" style="display:flex;"> |
| | | <el-form-item label="机构名称" style="width: 300px;margin-bottom: 0;margin-right: 20px"> |
| | | <el-input v-model="state.querys.name" /> |
| | | </el-form-item> |
| | | <el-form-item label="所在地市" style="margin-bottom: 0;margin-right: 20px"> |
| | | <el-select v-model="state.querys.area"> |
| | | <el-option label="Zone one" value="shanghai" /> |
| | | <el-option label="Zone two" value="beijing" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="业务范围" style="margin-bottom: 0;margin-right: 20px"> |
| | | <el-select v-model="state.querys.business"> |
| | | <el-option label="Zone one" value="shanghai" /> |
| | | <el-option label="Zone two" value="beijing" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-form> |
| | | <el-button type="primary" :icon="Search" class="searchBtn">搜索</el-button> |
| | | <el-button type="primary" :icon="Refresh" class="resetBtn">重置</el-button> |
| | | </div> |
| | | <div class="list"> |
| | | <div v-for="item in state.dataList"> |
| | | <div> |
| | | <div><img src="src/assets/images/article.png"></div> |
| | | <div>{{item.title}}</div> |
| | | </div> |
| | | <span> |
| | | {{item.updateTime}} |
| | | </span> |
| | | </div> |
| | | </div> |
| | | <div class="pag-container"> |
| | | <el-pagination |
| | | v-model:current-page="state.querys.pageNum" |
| | | v-model:page-size="state.querys.pageSize" |
| | | :page-sizes="[10,15,20,25]" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :total="state.total" |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | | /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import {onMounted, ref, reactive, watch, onUnmounted, defineExpose} from "vue" |
| | | import { getPublish } from '@/api/home/homePage' |
| | | import { Search, Refresh } from '@element-plus/icons-vue' |
| | | import {ElMessage} from "element-plus"; |
| | | |
| | | const route = useRoute() |
| | | const router = useRouter() |
| | | |
| | | const state = reactive({ |
| | | dataList: [], |
| | | querys:{ |
| | | name: '', |
| | | area: '', |
| | | bussiness: '', |
| | | pageNum: 1, |
| | | pageSize: 10 |
| | | }, |
| | | total: null |
| | | }) |
| | | |
| | | const redirect = ref(undefined); |
| | | |
| | | onMounted(()=>{ |
| | | getData() |
| | | }) |
| | | |
| | | onUnmounted(()=>{ |
| | | |
| | | }) |
| | | |
| | | watch(route, (newRoute) => { |
| | | redirect.value = newRoute.query && newRoute.query.redirect; |
| | | }, { immediate: true }); |
| | | |
| | | const getData = async ()=>{ |
| | | const res = await getPublish(state.querys) |
| | | if(res.code == 200){ |
| | | state.dataList = res.data.list |
| | | state.total = res.data.total |
| | | }else{ |
| | | ElMessage.warning(res.message) |
| | | } |
| | | } |
| | | |
| | | const handleSizeChange = (val) => { |
| | | state.querys.pageSize = val |
| | | getData() |
| | | } |
| | | const handleCurrentChange = (val) => { |
| | | state.querys.pageNum = val |
| | | getData() |
| | | } |
| | | |
| | | defineExpose({ |
| | | getData |
| | | }) |
| | | |
| | | </script> |
| | | |
| | | <style lang='scss' scoped> |
| | | .container { |
| | | width: 100%; |
| | | display: flex; |
| | | justify-content: center; |
| | | margin-top: 170px; |
| | | |
| | | .main-content{ |
| | | width: 1200px; |
| | | margin: 20px 0; |
| | | background: #fff; |
| | | border-radius: 4px; |
| | | box-shadow: 1px 1px 3px rgba(0,0,0,.04); |
| | | padding: 0 10px; |
| | | color: #333; |
| | | |
| | | .filters{ |
| | | margin-top: 20px; |
| | | display: flex; |
| | | align-items: center; |
| | | padding-left: 10px; |
| | | |
| | | .searchBtn{ |
| | | border: none; |
| | | border-radius: 4px !important; |
| | | background-image: linear-gradient(90deg,#4064df,#548dfb); |
| | | |
| | | &:active{ |
| | | border-radius: 99px !important; |
| | | background-image: linear-gradient(-90deg,#4064df,#548dfb); |
| | | } |
| | | } |
| | | .resetBtn{ |
| | | border: none; |
| | | border-radius: 4px !important; |
| | | background-image: linear-gradient(90deg,#fc8e2e,#ffaa59); |
| | | |
| | | &:active{ |
| | | border-radius: 99px !important; |
| | | background-image: linear-gradient(-90deg,#fc8e2e,#ffaa59); |
| | | } |
| | | } |
| | | } |
| | | |
| | | .list{ |
| | | padding: 15px 0; |
| | | |
| | | &>div{ |
| | | display: flex; |
| | | padding: 10px; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | border-bottom: 1px dashed #ebeef5; |
| | | cursor: pointer; |
| | | border-radius: 4px; |
| | | font-size: 16px; |
| | | |
| | | &>div{ |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | div:first-of-type{ |
| | | width: 40px; |
| | | height: 40px; |
| | | margin-right: 10px; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | |
| | | img{ |
| | | width: 28px; |
| | | height: 28px; |
| | | } |
| | | } |
| | | div:last-of-type{ |
| | | width: 1000px; |
| | | white-space: nowrap; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | font-family: "PingFang SC"; |
| | | } |
| | | } |
| | | span{ |
| | | color: #999; |
| | | } |
| | | &:hover{ |
| | | background: #f5f5f5; |
| | | } |
| | | &:active{ |
| | | background: #425f9f; |
| | | color: #fff; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .pag-container{ |
| | | width: 100%; |
| | | height: 80px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: right; |
| | | } |
| | | } |
| | | } |
| | | </style> |
| | |
| | | <template> |
| | | <div class="login"> |
| | | <img class="pics1" src="src/assets/images/login-data.png"> |
| | | <img class="pics2" src="src/assets/images/login-search.png"> |
| | | <div class="login-panel"> |
| | | <div class="login-img"> |
| | | <img src="src/assets/images/loginImg.png"> |
| | | </div> |
| | | <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form"> |
| | | <h3 class="title">智慧安评</h3> |
| | | <el-form-item prop="username"> |
| | | <el-input |
| | | v-model="loginForm.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="loginForm.password" |
| | | type="password" |
| | | size="large" |
| | | auto-complete="off" |
| | | placeholder="密码" |
| | | @keyup.enter="handleLogin" |
| | | > |
| | | <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 |
| | | v-model="loginForm.code" |
| | | size="large" |
| | | auto-complete="off" |
| | | placeholder="验证码" |
| | | style="width: 63%" |
| | | @keyup.enter="handleLogin" |
| | | > |
| | | <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template> |
| | | </el-input> |
| | | <div class="login-code"> |
| | | <img :src="codeUrl" @click="getCode" class="login-code-img"/> |
| | | </div> |
| | | </el-form-item> |
| | | <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 25px"> |
| | | <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox> |
| | | <div v-if="isRegister"> |
| | | <el-button link type="primary" @click="openRegist">立即注册</el-button> |
| | | <!-- <img class="pics1" src="src/assets/images/login-data.png">--> |
| | | <!-- <img class="pics2" src="src/assets/images/login-search.png">--> |
| | | <div class="main-content"> |
| | | <div class="top"> |
| | | <div class="top-cont"> |
| | | <div class="logo blueFont">智慧安评</div> |
| | | <div class="time"> |
| | | <div> |
| | | <span>{{state.date}}</span> |
| | | <span>{{state.weekDay}}</span> |
| | | </div> |
| | | <div> |
| | | {{state.dayTime}}好! |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <el-form-item style="width:100%;"> |
| | | <el-button |
| | | :loading="loading" |
| | | size="large" |
| | | type="primary" |
| | | style="width:100%;" |
| | | @click.prevent="handleLogin" |
| | | > |
| | | <span v-if="!loading">登 录</span> |
| | | <span v-else>登 录 中...</span> |
| | | </el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | |
| | | <div class="nav blueBg"> |
| | | <div class="nav-cont"> |
| | | <div :class="state.activeMenu == 1?'active': ''" @click="changeTab(1)"> |
| | | <HomeFilled style="width: 1em; height: 1em; margin-right: 8px" /> |
| | | <div>首页</div> |
| | | </div> |
| | | <div :class="state.activeMenu == 2?'active': ''" @click="changeTab(2)"> |
| | | <Comment style="width: 1em; height: 1em; margin-right: 8px" /> |
| | | <div>通知公告</div> |
| | | </div> |
| | | <div :class="state.activeMenu == 3?'active': ''" @click="changeTab(3)"> |
| | | <BellFilled style="width: 1em; height: 1em; margin-right: 8px" /> |
| | | <div>法律法规</div> |
| | | </div> |
| | | <div :class="state.activeMenu == 4?'active': ''" @click="changeTab(4)"> |
| | | <List style="width: 1em; height: 1em; margin-right: 8px" /> |
| | | <div>信息公示</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="content"> |
| | | <Home v-if="state.activeMenu==1" ref="homeRef" @toMore="changeTab"/> |
| | | <Notice v-if="state.activeMenu==2" ref="noticeRef"/> |
| | | <Laws v-if="state.activeMenu==3" ref="lawsRef"/> |
| | | <Publish v-if="state.activeMenu==4" ref="publishRef"/> |
| | | </div> |
| | | </div> |
| | | <!-- 底部 --> |
| | | <!-- <div class="el-login-footer">--> |
| | | <!-- <span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span>--> |
| | | <!-- </div>--> |
| | | <div class="el-login-footer"> |
| | | <span>Copyright © All Rights Reserved.</span> |
| | | </div> |
| | | </div> |
| | | <register ref="regRef"/> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import {onMounted, ref, watch, defineAsyncComponent, nextTick} from "vue" |
| | | import { getCodeImg } from "@/api/login"; |
| | | import Cookies from "js-cookie"; |
| | | import { encrypt, decrypt } from "@/utils/jsencrypt"; |
| | | import {onMounted, ref, reactive, watch, defineAsyncComponent, nextTick, onUnmounted} from "vue" |
| | | import useUserStore from '@/store/modules/user' |
| | | import { Register } from "@/layout/components"; |
| | | import Home from './components/home' |
| | | import Notice from './components/notice' |
| | | import Laws from './components/laws' |
| | | import Publish from './components/publish' |
| | | |
| | | const userStore = useUserStore() |
| | | const route = useRoute(); |
| | | const router = useRouter(); |
| | | const { proxy } = getCurrentInstance(); |
| | | const route = useRoute() |
| | | const router = useRouter() |
| | | // 时间格式化 |
| | | const timeForm = { |
| | | hour12: false, |
| | | year: 'numeric', |
| | | month: '2-digit', |
| | | day: '2-digit', |
| | | hour: '2-digit', |
| | | minute: '2-digit', |
| | | second: '2-digit' |
| | | } |
| | | |
| | | const loginForm = ref({ |
| | | username: "admin", |
| | | password: "Admin@123.com", |
| | | rememberMe: false, |
| | | code: "", |
| | | uuid: "" |
| | | }); |
| | | const homeRef = ref(null) |
| | | const noticeRef = ref(null) |
| | | const lawsRef = ref(null) |
| | | const publishRef = ref(null) |
| | | |
| | | const loginRules = { |
| | | username: [{ required: true, trigger: "blur", message: "请输入您的账号" }], |
| | | password: [{ required: true, trigger: "blur", message: "请输入您的密码" }], |
| | | code: [{ required: true, trigger: "change", message: "请输入验证码" }] |
| | | const state = reactive({ |
| | | activeMenu: 1, |
| | | date: '', |
| | | weekDay: '', |
| | | dayTime: '' |
| | | }) |
| | | |
| | | // 当前时间 |
| | | 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(); |
| | | state.weekDay = '星期' + week[day]; |
| | | let curHour = Number(curTime.slice(10, 13)); |
| | | if (curHour >= 5 && curHour <= 10) { |
| | | state.dayTime = '上午'; |
| | | } |
| | | if (curHour > 10 && curHour <= 12) { |
| | | state.dayTime = '中午'; |
| | | } |
| | | if (curHour > 12 && curHour <= 18) { |
| | | state.dayTime = '下午'; |
| | | } |
| | | if (curHour > 18 && curHour <= 22) { |
| | | state.dayTime = '晚上'; |
| | | } |
| | | if (curHour > 22) { |
| | | state.dayTime = '午夜'; |
| | | } |
| | | }; |
| | | |
| | | const codeUrl = ref(""); |
| | | const loading = ref(false); |
| | | const regRef = ref(null) |
| | | // 验证码开关 |
| | | const captchaEnabled = ref(true); |
| | | // 注册开关 |
| | | const isRegister = ref(true); |
| | | |
| | | const redirect = ref(undefined); |
| | | |
| | | onMounted(()=>{ |
| | | |
| | | getDateTime(); |
| | | }) |
| | | |
| | | const openRegist = ()=>{ |
| | | regRef.value.dialogVisible = true |
| | | } |
| | | onUnmounted(()=>{ |
| | | |
| | | }) |
| | | |
| | | watch(route, (newRoute) => { |
| | | redirect.value = newRoute.query && newRoute.query.redirect; |
| | | }, { immediate: true }); |
| | | |
| | | function handleLogin() { |
| | | proxy.$refs.loginRef.validate(valid => { |
| | | if (valid) { |
| | | loading.value = true; |
| | | // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码 |
| | | if (loginForm.value.rememberMe) { |
| | | Cookies.set("username", loginForm.value.username, { expires: 30 }); |
| | | Cookies.set("password", encrypt(loginForm.value.password), { expires: 30 }); |
| | | Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 }); |
| | | } else { |
| | | // 否则移除 |
| | | Cookies.remove("username"); |
| | | Cookies.remove("password"); |
| | | Cookies.remove("rememberMe"); |
| | | } |
| | | // 调用action的登录方法 |
| | | userStore.login(loginForm.value).then(() => { |
| | | const query = route.query; |
| | | const otherQueryParams = Object.keys(query).reduce((acc, cur) => { |
| | | if (cur !== "redirect") { |
| | | acc[cur] = query[cur]; |
| | | } |
| | | return acc; |
| | | }, {}); |
| | | router.push({ path: redirect.value || "/", query: otherQueryParams }); |
| | | }).catch(() => { |
| | | loading.value = false; |
| | | // 重新获取验证码 |
| | | if (captchaEnabled.value) { |
| | | getCode(); |
| | | } |
| | | }); |
| | | } |
| | | }); |
| | | const changeTab=(num)=>{ |
| | | state.activeMenu = num |
| | | console.log(state.activeMenu) |
| | | // if(num == 1){ |
| | | // homeRef.value.getNoticeList() |
| | | // homeRef.value.getLawsList() |
| | | // homeRef.value.getPubList() |
| | | // } |
| | | // if(num == 2){ |
| | | // noticeRef.value.getData() |
| | | // } |
| | | // if(num == 3){ |
| | | // lawsRef.value.getData() |
| | | // } |
| | | // if(num == 4){ |
| | | // publishRef.value.getData() |
| | | // } |
| | | } |
| | | |
| | | function getCode() { |
| | | getCodeImg().then(res => { |
| | | captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled; |
| | | if (captchaEnabled.value) { |
| | | codeUrl.value = "data:image/gif;base64," + res.img; |
| | | loginForm.value.uuid = res.uuid; |
| | | } |
| | | }); |
| | | } |
| | | |
| | | function getCookie() { |
| | | const username = Cookies.get("username"); |
| | | const password = Cookies.get("password"); |
| | | const rememberMe = Cookies.get("rememberMe"); |
| | | loginForm.value = { |
| | | username: username === undefined ? loginForm.value.username : username, |
| | | password: password === undefined ? loginForm.value.password : decrypt(password), |
| | | rememberMe: rememberMe === undefined ? false : Boolean(rememberMe) |
| | | }; |
| | | } |
| | | |
| | | getCode(); |
| | | getCookie(); |
| | | </script> |
| | | |
| | | <style lang='scss' scoped> |
| | | .login { |
| | | width: 100%; |
| | | display: flex; |
| | | position: relative; |
| | | justify-content: center; |
| | | align-items: center; |
| | | height: 100%; |
| | | background-image: url("../assets/images/login-bg.jpg"); |
| | | |
| | | .main-content{ |
| | | width: 100%; |
| | | display: flex; |
| | | flex-direction: column; |
| | | color: #333; |
| | | |
| | | .top{ |
| | | width: 100%; |
| | | background: rgba(249,250,251,1); |
| | | position: fixed; |
| | | top: 0; |
| | | left: 0; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | .top-cont{ |
| | | width: 1200px; |
| | | height: 90px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | margin: 0 auto; |
| | | |
| | | .logo{ |
| | | font-size: 2rem; |
| | | font-weight: 800; |
| | | height: 90px; |
| | | line-height: 90px; |
| | | font-family: "PingFang SC"; |
| | | } |
| | | |
| | | .time{ |
| | | font-size: 16px; |
| | | height: 90px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: center; |
| | | span{ |
| | | &:first-of-type{ |
| | | margin-right: 10px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | |
| | | .nav{ |
| | | width: 100%; |
| | | height: 80px; |
| | | position: fixed; |
| | | top: 90px; |
| | | left: 0; |
| | | .nav-cont{ |
| | | width: 1200px; |
| | | height: 80px; |
| | | margin: 0 auto; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: left; |
| | | |
| | | &>div{ |
| | | height: 100%; |
| | | padding: 0 50px; |
| | | color: #ffffff; |
| | | background-color: #5175C0; |
| | | font-size: 20px; |
| | | text-decoration: none; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | cursor: pointer; |
| | | |
| | | &:hover{ |
| | | background: #425f9f; |
| | | } |
| | | } |
| | | .active{ |
| | | background: #425f9f; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .pics1{ |
| | | position: absolute; |
| | |
| | | left: 20px; |
| | | opacity: 0.5; |
| | | } |
| | | .title { |
| | | margin: 0px auto 30px auto; |
| | | text-align: center; |
| | | color: #333; |
| | | font-size: 1.4rem; |
| | | } |
| | | .login-panel{ |
| | | border-radius: 1.2rem; |
| | | background: #ffffff; |
| | | width: 800px; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | transform: translateY(-20%); |
| | | box-shadow: 15px 15px 30px rgba(0,0,0,.1); |
| | | } |
| | | .login-img{ |
| | | flex: 1; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | img{ |
| | | width: 80%; |
| | | } |
| | | } |
| | | .login-form { |
| | | flex: 1; |
| | | padding: 25px; |
| | | .el-input { |
| | | height: 44px; |
| | | input { |
| | | height: 44px; |
| | | } |
| | | } |
| | | .input-icon { |
| | | height: 39px; |
| | | width: 14px; |
| | | margin-left: 0px; |
| | | } |
| | | } |
| | | .login-tip { |
| | | font-size: 13px; |
| | | text-align: center; |
| | | color: #bfbfbf; |
| | | } |
| | | .login-code { |
| | | width: 33%; |
| | | height: 40px; |
| | | float: right; |
| | | img { |
| | | cursor: pointer; |
| | | vertical-align: middle; |
| | | } |
| | | } |
| | | |
| | | .el-form-item--default{ |
| | | margin-bottom: 24px; |
| | | } |
| | | |
| | | ::v-deep(.el-form-item__content){ |
| | | display: flex; |
| | | justify-content: space-between; |
| | | } |
| | | .el-login-footer { |
| | | height: 40px; |
| | | line-height: 40px; |
| | | height: 60px; |
| | | line-height: 60px; |
| | | position: fixed; |
| | | bottom: 0; |
| | | width: 100%; |
| | | text-align: center; |
| | | color: #fff; |
| | | font-family: Arial; |
| | | background: #5175C0; |
| | | font-family: "PingFang SC"; |
| | | font-size: 12px; |
| | | letter-spacing: 1px; |
| | | } |
| | | .login-code-img { |
| | | height: 40px; |
| | | padding-left: 12px; |
| | | } |
| | | </style> |
对比新文件 |
| | |
| | | <template> |
| | | <div class="login"> |
| | | <img class="pics1" src="src/assets/images/login-data.png"> |
| | | <img class="pics2" src="src/assets/images/login-search.png"> |
| | | <div class="login-panel"> |
| | | <div class="login-img"> |
| | | <img src="src/assets/images/loginImg.png"> |
| | | </div> |
| | | <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form"> |
| | | <h3 class="title">智慧安评</h3> |
| | | <el-form-item prop="username"> |
| | | <el-input |
| | | v-model="loginForm.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="loginForm.password" |
| | | type="password" |
| | | size="large" |
| | | auto-complete="off" |
| | | placeholder="密码" |
| | | @keyup.enter="handleLogin" |
| | | > |
| | | <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 |
| | | v-model="loginForm.code" |
| | | size="large" |
| | | auto-complete="off" |
| | | placeholder="验证码" |
| | | style="width: 63%" |
| | | @keyup.enter="handleLogin" |
| | | > |
| | | <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template> |
| | | </el-input> |
| | | <div class="login-code"> |
| | | <img :src="codeUrl" @click="getCode" class="login-code-img"/> |
| | | </div> |
| | | </el-form-item> |
| | | <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 25px"> |
| | | <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox> |
| | | <div v-if="isRegister"> |
| | | <el-button link type="primary" @click="openRegist">立即注册</el-button> |
| | | </div> |
| | | </div> |
| | | <el-form-item style="width:100%;"> |
| | | <el-button |
| | | :loading="loading" |
| | | size="large" |
| | | type="primary" |
| | | style="width:100%;" |
| | | @click.prevent="handleLogin" |
| | | > |
| | | <span v-if="!loading">登 录</span> |
| | | <span v-else>登 录 中...</span> |
| | | </el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | <!-- 底部 --> |
| | | <!-- <div class="el-login-footer">--> |
| | | <!-- <span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span>--> |
| | | <!-- </div>--> |
| | | </div> |
| | | <register ref="regRef"/> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import {onMounted, ref, watch, defineAsyncComponent, nextTick} from "vue" |
| | | import { getCodeImg } from "@/api/login"; |
| | | import Cookies from "js-cookie"; |
| | | import { encrypt, decrypt } from "@/utils/jsencrypt"; |
| | | import useUserStore from '@/store/modules/user' |
| | | import { Register } from "@/layout/components"; |
| | | |
| | | const userStore = useUserStore() |
| | | const route = useRoute(); |
| | | const router = useRouter(); |
| | | const { proxy } = getCurrentInstance(); |
| | | |
| | | const loginForm = ref({ |
| | | username: "admin", |
| | | password: "Admin@123.com", |
| | | rememberMe: false, |
| | | code: "", |
| | | uuid: "" |
| | | }); |
| | | |
| | | const loginRules = { |
| | | username: [{ required: true, trigger: "blur", message: "请输入您的账号" }], |
| | | password: [{ required: true, trigger: "blur", message: "请输入您的密码" }], |
| | | code: [{ required: true, trigger: "change", message: "请输入验证码" }] |
| | | }; |
| | | |
| | | const codeUrl = ref(""); |
| | | const loading = ref(false); |
| | | const regRef = ref(null) |
| | | // 验证码开关 |
| | | const captchaEnabled = ref(true); |
| | | // 注册开关 |
| | | const isRegister = ref(true); |
| | | const redirect = ref(undefined); |
| | | |
| | | onMounted(()=>{ |
| | | |
| | | }) |
| | | |
| | | const openRegist = ()=>{ |
| | | regRef.value.dialogVisible = true |
| | | } |
| | | |
| | | watch(route, (newRoute) => { |
| | | redirect.value = newRoute.query && newRoute.query.redirect; |
| | | }, { immediate: true }); |
| | | |
| | | function handleLogin() { |
| | | proxy.$refs.loginRef.validate(valid => { |
| | | if (valid) { |
| | | loading.value = true; |
| | | // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码 |
| | | if (loginForm.value.rememberMe) { |
| | | Cookies.set("username", loginForm.value.username, { expires: 30 }); |
| | | Cookies.set("password", encrypt(loginForm.value.password), { expires: 30 }); |
| | | Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 }); |
| | | } else { |
| | | // 否则移除 |
| | | Cookies.remove("username"); |
| | | Cookies.remove("password"); |
| | | Cookies.remove("rememberMe"); |
| | | } |
| | | // 调用action的登录方法 |
| | | userStore.login(loginForm.value).then(() => { |
| | | const query = route.query; |
| | | const otherQueryParams = Object.keys(query).reduce((acc, cur) => { |
| | | if (cur !== "redirect") { |
| | | acc[cur] = query[cur]; |
| | | } |
| | | return acc; |
| | | }, {}); |
| | | router.push({ path: redirect.value || "/", query: otherQueryParams }); |
| | | }).catch(() => { |
| | | loading.value = false; |
| | | // 重新获取验证码 |
| | | if (captchaEnabled.value) { |
| | | getCode(); |
| | | } |
| | | }); |
| | | } |
| | | }); |
| | | } |
| | | |
| | | function getCode() { |
| | | getCodeImg().then(res => { |
| | | captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled; |
| | | if (captchaEnabled.value) { |
| | | codeUrl.value = "data:image/gif;base64," + res.img; |
| | | loginForm.value.uuid = res.uuid; |
| | | } |
| | | }); |
| | | } |
| | | |
| | | function getCookie() { |
| | | const username = Cookies.get("username"); |
| | | const password = Cookies.get("password"); |
| | | const rememberMe = Cookies.get("rememberMe"); |
| | | loginForm.value = { |
| | | username: username === undefined ? loginForm.value.username : username, |
| | | password: password === undefined ? loginForm.value.password : decrypt(password), |
| | | rememberMe: rememberMe === undefined ? false : Boolean(rememberMe) |
| | | }; |
| | | } |
| | | |
| | | getCode(); |
| | | getCookie(); |
| | | </script> |
| | | |
| | | <style lang='scss' scoped> |
| | | .login { |
| | | display: flex; |
| | | position: relative; |
| | | justify-content: center; |
| | | align-items: center; |
| | | height: 100%; |
| | | background-image: url("../assets/images/login-bg.jpg"); |
| | | } |
| | | .pics1{ |
| | | position: absolute; |
| | | width: 500px; |
| | | bottom: 0; |
| | | right: 0; |
| | | opacity: 0.5; |
| | | } |
| | | .pics2{ |
| | | position: absolute; |
| | | width: 500px; |
| | | top: 20px; |
| | | left: 20px; |
| | | opacity: 0.5; |
| | | } |
| | | .title { |
| | | margin: 0px auto 30px auto; |
| | | text-align: center; |
| | | color: #333; |
| | | font-size: 1.4rem; |
| | | } |
| | | .login-panel{ |
| | | border-radius: 1.2rem; |
| | | background: #ffffff; |
| | | width: 800px; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | transform: translateY(-20%); |
| | | box-shadow: 15px 15px 30px rgba(0,0,0,.1); |
| | | } |
| | | .login-img{ |
| | | flex: 1; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | img{ |
| | | width: 80%; |
| | | } |
| | | } |
| | | .login-form { |
| | | flex: 1; |
| | | padding: 25px; |
| | | .el-input { |
| | | height: 44px; |
| | | input { |
| | | height: 44px; |
| | | } |
| | | } |
| | | .input-icon { |
| | | height: 39px; |
| | | width: 14px; |
| | | margin-left: 0px; |
| | | } |
| | | } |
| | | .login-tip { |
| | | font-size: 13px; |
| | | text-align: center; |
| | | color: #bfbfbf; |
| | | } |
| | | .login-code { |
| | | width: 33%; |
| | | height: 40px; |
| | | float: right; |
| | | img { |
| | | cursor: pointer; |
| | | vertical-align: middle; |
| | | } |
| | | } |
| | | |
| | | .el-form-item--default{ |
| | | margin-bottom: 24px; |
| | | } |
| | | |
| | | ::v-deep(.el-form-item__content){ |
| | | display: flex; |
| | | justify-content: space-between; |
| | | } |
| | | .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; |
| | | } |
| | | .login-code-img { |
| | | height: 40px; |
| | | padding-left: 12px; |
| | | } |
| | | </style> |