Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
74e34e3e by 杨威
Options

新增多个路由

1 parent 749b1e03
Inline Side-by-side
Showing 8 changed files with 448 additions and 319 deletions
......@@ -27,6 +27,30 @@ const constantRoutes = [
name: '首页',
code: '0-1',
component: () => import('@/views/panel/index')
},
{
path: '/create',
name: '新建',
code: '0-2',
component: () => import('@/views/panel/create/index')
},
{
path: '/modify',
name: '更正',
code: '0-3',
component: () => import('@/views/panel/modify/index')
},
{
path: '/change',
name: '变更',
code: '0-4',
component: () => import('@/views/panel/change/index')
},
{
path: '/search',
name: '综合查询',
code: '0-5',
component: () => import('@/views/panel/search/index')
}
]
}
......
......@@ -31,6 +31,7 @@ const mutations = {
},
// 初始化
INIT_TABS(state) {
debugger
state.openTab = [];
state.openTab[0] = { route: "/panel", name: "首页" }
},
......
......@@ -63,20 +63,21 @@ export default {
defaultActive: "",
headTop: [
{
select: true,
},
{
path:"/create",
select: false,
},
{
path:"/modify",
select: false,
},
{
path:"/change",
select: false,
},
{
path:"/search",
select: false,
},
}
],
// 上导航选中id
indId: undefined,
......@@ -178,18 +179,18 @@ export default {
{
name: "新建",
icon: "fa fa-address-card-o",
path: "/officialAccount_panel",
path: "/create",
},
{ name: "更正", icon: "fa fa-address-card-o", path: "/applets_panel" },
{ name: "更正", icon: "fa fa-address-card-o", path: "/modify" },
{
name: "变更",
icon: "fa fa-address-card-o",
path: "/appointment_panel",
path: "/change",
},
{
name: "综合查询",
icon: "fa fa-address-card-o",
path: "/system_panel",
path: "/search",
},
];
this.navigationList = list;
......@@ -208,11 +209,10 @@ export default {
headTop[index].name = item.name;
headTop[index].icon = item.icon;
});
this.menuSelect(data, selectId);
},
menuSelect(data, selectId) {
this.menuList = data[selectId].children;
},
// menuSelect(data, selectId) {
// this.menuList = data[selectId].children;
// },
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
......@@ -231,12 +231,12 @@ export default {
},
selectTopItems(ind) {
this.indId = ind;
this.menuSelect(this.navigationList, ind);
this.$store.dispatch("setTabs/init_tabs");
this.$store.dispatch("setTabs/set_active_index", "/panel");
this.$router.push("/panel");
// this.menuSelect(this.navigationList, ind);
// this.$store.dispatch("setTabs/init_tabs");
// this.$store.dispatch("setTabs/set_active_index", "/panel");
this.$router.push(this.headTop[ind].path);
this.navSelect(ind);
util.cookies.set("indId", ind);
// util.cookies.set("indId", ind);
},
// 上导航选中id
navSelect(id) {
......
<template>
<div id="login">
<img class="login-logo" src="./images/logo-login.svg" />
<div class="login-con">
<div class="login-title">用户登录</div>
<div class="login-user" :class="{'select-border':change.user}">
<img class="user-icon" src="./images/user.svg" />
<div class="line-mid"></div>
<input
type="text"
class="user-input"
placeholder="请输入您的账号"
v-model="userInfo.username"
@focus="reduceBorder('user')"
@blur="addBorder('user')"
/>
<span class="warning" v-show="warning.user">账号不能为空</span>
</div>
<div class="login-user user-mt" :class="{'select-border':change.pass}">
<img class="user-icon" src="./images/password.svg" />
<div class="line-mid"></div>
<input
type="password"
class="user-input"
placeholder="请输入您的密码"
v-model="userInfo.password"
v-show="!selectEye"
@focus="reduceBorder('pass')"
@blur="addBorder('pass')"
/>
<input
type="text"
class="user-input"
placeholder="请输入您的密码"
v-model="userInfo.password"
v-show="selectEye"
@focus="reduceBorder('pass')"
@blur="addBorder('pass')"
/>
<img class="password-eye" src="./images/open.svg" @click="selectEyes" v-show="selectEye" />
<img class="password-eye" src="./images/close.svg" @click="selectEyes" v-show="!selectEye" />
<span class="warning" v-show="warning.pass">密码不能为空</span>
</div>
<div class="login-remake">
<i class="icon iconfont iconfuxuan1 icon-style" v-show="!selectIcon" @click="selectRemeber"></i>
<i
class="icon iconfont iconfuxuan-xuanzhong icon-select"
v-show="selectIcon"
@click="selectRemeber"
></i>
<span class="remake_txt" @click="selectRemeber">记住账号密码</span>
</div>
<div class="login-btn" @click="goHome">登录</div>
</div>
<div class="reserved-con">
<div class="reserved-words">版权所有：2020©某某市自然资源和规划</div>
<div class="reserved-words line-two">技术支持：西安市自然资源规划局信息中心</div>
</div>
</div>
<div id="login">
<img class="login-logo" src="./images/logo-login.svg" />
<div class="login-con">
<div class="login-title">用户登录</div>
<div class="login-user" :class="{ 'select-border': change.user }">
<img class="user-icon" src="./images/user.svg" />
<div class="line-mid"></div>
<input
type="text"
class="user-input"
placeholder="请输入您的账号"
v-model="userInfo.username"
@focus="reduceBorder('user')"
@blur="addBorder('user')"
/>
<span class="warning" v-show="warning.user">账号不能为空</span>
</div>
<div class="login-user user-mt" :class="{ 'select-border': change.pass }">
<img class="user-icon" src="./images/password.svg" />
<div class="line-mid"></div>
<input
type="password"
class="user-input"
placeholder="请输入您的密码"
v-model="userInfo.password"
v-show="!selectEye"
@focus="reduceBorder('pass')"
@blur="addBorder('pass')"
/>
<input
type="text"
class="user-input"
placeholder="请输入您的密码"
v-model="userInfo.password"
v-show="selectEye"
@focus="reduceBorder('pass')"
@blur="addBorder('pass')"
/>
<img
class="password-eye"
src="./images/open.svg"
@click="selectEyes"
v-show="selectEye"
/>
<img
class="password-eye"
src="./images/close.svg"
@click="selectEyes"
v-show="!selectEye"
/>
<span class="warning" v-show="warning.pass">密码不能为空</span>
</div>
<div class="login-remake">
<i
class="icon iconfont iconfuxuan1 icon-style"
v-show="!selectIcon"
@click="selectRemeber"
></i>
<i
class="icon iconfont iconfuxuan-xuanzhong icon-select"
v-show="selectIcon"
@click="selectRemeber"
></i>
<span class="remake_txt" @click="selectRemeber">记住账号密码</span>
</div>
<div class="login-btn" @click="goHome">登录</div>
</div>
<div class="reserved-con">
<div class="reserved-words">版权所有：2020©某某市自然资源和规划</div>
<div class="reserved-words line-two">
技术支持：西安市自然资源规划局信息中心
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
selectIcon: true,
selectEye: false,
userInfo: {
username: "",
password: "",
},
change: {
//边框
user: false,
pass: false,
},
warning: {
user: false,
pass: false,
},
canDo: 1,
};
},
mounted() {
this.initPage();
},
methods: {
initPage() {
let userInfo =
localStorage.getItem("userInfo") &&
JSON.parse(localStorage.getItem("userInfo"));
if (userInfo) {
this.userInfo.username = userInfo.username;
this.userInfo.password = userInfo.password;
}
},
selectRemeber() {
this.selectIcon = !this.selectIcon;
},
goHome() {
if (this.canDo) {
this.canDo = 0;
if (
this.userInfo.username == "admin" &&
this.userInfo.password == "123456"
) {
if (this.selectIcon) {
localStorage.setItem("userInfo", JSON.stringify(this.userInfo));
} else {
localStorage.removeItem("userInfo");
}
// this.$store.dispatch('user/login', this.userInfo).then(() => {
// this.$router.push('/home')
// }).catch(() => {
// })
this.$store.dispatch("permission_routes/getMenus");
} else if (!this.userInfo.username || !this.userInfo.password) {
this.$message({
duration: 2000,
message: "账号或密码不能为空，请重新输入",
type: "error",
});
} else {
this.$message({
duration: 2000,
message: "账号或密码不正确，请重新输入",
type: "error",
});
}
setTimeout(() => {
this.canDo = 1;
}, 2000);
}
},
selectEyes() {
this.selectEye = !this.selectEye;
},
reduceBorder(type) {
//获取焦点
if (type == "user") {
this.change.user = true;
} else {
this.change.pass = true;
}
},
addBorder(type) {
//失去焦点
if (type == "user") {
this.change.user = false;
if (!this.userInfo.username) {
this.warning.user = true;
} else {
this.warning.user = false;
}
} else {
this.change.pass = false;
if (!this.userInfo.password) {
this.warning.pass = true;
} else {
this.warning.pass = false;
}
}
},
},
data() {
return {
selectIcon: true,
selectEye: false,
userInfo: {
username: "",
password: "",
},
change: {
//边框
user: false,
pass: false,
},
warning: {
user: false,
pass: false,
},
canDo: 1,
};
},
mounted() {
this.initPage();
},
methods: {
initPage() {
let userInfo =
localStorage.getItem("userInfo") &&
JSON.parse(localStorage.getItem("userInfo"));
if (userInfo) {
this.userInfo.username = userInfo.username;
this.userInfo.password = userInfo.password;
}
},
selectRemeber() {
this.selectIcon = !this.selectIcon;
},
goHome() {
if (this.canDo) {
this.canDo = 0;
if (
this.userInfo.username == "admin" &&
this.userInfo.password == "123456"
) {
if (this.selectIcon) {
localStorage.setItem("userInfo", JSON.stringify(this.userInfo));
} else {
localStorage.removeItem("userInfo");
}
// this.$store.dispatch('user/login', this.userInfo).then(() => {
// this.$router.push('/home')
// }).catch(() => {
// })
// this.$store.dispatch("permission_routes/getMenus");
this.$router.push("/panel");
} else if (!this.userInfo.username || !this.userInfo.password) {
this.$message({
duration: 2000,
message: "账号或密码不能为空，请重新输入",
type: "error",
});
} else {
this.$message({
duration: 2000,
message: "账号或密码不正确，请重新输入",
type: "error",
});
}
setTimeout(() => {
this.canDo = 1;
}, 2000);
}
},
selectEyes() {
this.selectEye = !this.selectEye;
},
reduceBorder(type) {
//获取焦点
if (type == "user") {
this.change.user = true;
} else {
this.change.pass = true;
}
},
addBorder(type) {
//失去焦点
if (type == "user") {
this.change.user = false;
if (!this.userInfo.username) {
this.warning.user = true;
} else {
this.warning.user = false;
}
} else {
this.change.pass = false;
if (!this.userInfo.password) {
this.warning.pass = true;
} else {
this.warning.pass = false;
}
}
},
},
};
</script>
<style lang="less" scoped>
#login {
width: 100vw;
height: 100vh;
background: url("./images/login-bg.png") center center no-repeat;
background-size: 100% 100%;
overflow: hidden;
position: relative;
.login-logo {
display: block;
margin: 0 auto;
position: absolute;
top: 11.5%;
left: 0;
right: 0;
margin: 0 auto;
width: 360px;
}
.login-con {
position: absolute;
top: 24%;
left: 0;
right: 0;
margin: 0 auto;
}
.login-title {
width: 320px;
margin: 0 auto;
font-size: 14px;
font-weight: 500;
}
.login-user {
width: 320px;
height: 38px;
border: 1px solid rgba(155, 155, 155, 1);
box-sizing: border-box;
margin: 0 auto;
margin-top: 20px;
border-radius: 2px;
position: relative;
.user-icon {
margin: 0 12px;
float: left;
width: 16px;
height: 16px;
margin-top: 11px;
}
.line-mid {
width: 1px;
height: 16px;
background: #cbcbcb;
float: left;
margin-top: 11px;
margin-right: 9px;
}
.user-input {
width: 230px;
float: left;
font-size: 12px;
margin-top: 11px;
background: none;
outline: 0;
border: 0;
color: #4a4a4a;
box-shadow: inset 0 0 0 1000px #fff !important;
}
.password-eye {
float: right;
width: 16px;
height: 16px;
margin-right: 12px;
margin-top: 11px;
cursor: pointer;
}
.warning {
font-size: 12px;
color: red;
position: absolute;
left: 0;
bottom: -18px;
}
}
.user-mt {
margin-top: 26px;
}
.select-border {
border: 1px solid rgba(0, 113, 255, 1);
}
.login-remake {
width: 320px;
height: 14px;
margin: 0 auto;
margin-top: 26px;
.icon-style {
font-size: 12px;
color: #5b5b5b;
float: left;
line-height: 14px;
cursor: pointer;
}
.icon-select {
font-size: 12px;
color: rgba(0, 127, 255, 1);
float: left;
line-height: 14px;
cursor: pointer;
}
.remake_txt {
font-size: 12px;
line-height: 14px;
color: #5b5b5b;
margin-left: 6px;
float: left;
cursor: pointer;
}
}
.login-btn {
width: 320px;
height: 40px;
background: rgba(0, 127, 255, 1);
border-radius: 1px;
margin: 0 auto;
margin-top: 40px;
font-size: 16px;
line-height: 40px;
text-align: center;
color: #fff;
cursor: pointer;
}
.reserved-con {
position: absolute;
bottom: 36%;
left: 0;
right: 0;
margin: 0 auto;
}
.reserved-words {
font-size: 12px;
color: #b4b4b4;
text-align: center;
}
.line-two {
margin-top: 8px;
}
width: 100vw;
height: 100vh;
background: url("./images/login-bg.png") center center no-repeat;
background-size: 100% 100%;
overflow: hidden;
position: relative;
.login-logo {
display: block;
margin: 0 auto;
position: absolute;
top: 11.5%;
left: 0;
right: 0;
margin: 0 auto;
width: 360px;
}
.login-con {
position: absolute;
top: 24%;
left: 0;
right: 0;
margin: 0 auto;
}
.login-title {
width: 320px;
margin: 0 auto;
font-size: 14px;
font-weight: 500;
}
.login-user {
width: 320px;
height: 38px;
border: 1px solid rgba(155, 155, 155, 1);
box-sizing: border-box;
margin: 0 auto;
margin-top: 20px;
border-radius: 2px;
position: relative;
.user-icon {
margin: 0 12px;
float: left;
width: 16px;
height: 16px;
margin-top: 11px;
}
.line-mid {
width: 1px;
height: 16px;
background: #cbcbcb;
float: left;
margin-top: 11px;
margin-right: 9px;
}
.user-input {
width: 230px;
float: left;
font-size: 12px;
margin-top: 11px;
background: none;
outline: 0;
border: 0;
color: #4a4a4a;
box-shadow: inset 0 0 0 1000px #fff !important;
}
.password-eye {
float: right;
width: 16px;
height: 16px;
margin-right: 12px;
margin-top: 11px;
cursor: pointer;
}
.warning {
font-size: 12px;
color: red;
position: absolute;
left: 0;
bottom: -18px;
}
}
.user-mt {
margin-top: 26px;
}
.select-border {
border: 1px solid rgba(0, 113, 255, 1);
}
.login-remake {
width: 320px;
height: 14px;
margin: 0 auto;
margin-top: 26px;
.icon-style {
font-size: 12px;
color: #5b5b5b;
float: left;
line-height: 14px;
cursor: pointer;
}
.icon-select {
font-size: 12px;
color: rgba(0, 127, 255, 1);
float: left;
line-height: 14px;
cursor: pointer;
}
.remake_txt {
font-size: 12px;
line-height: 14px;
color: #5b5b5b;
margin-left: 6px;
float: left;
cursor: pointer;
}
}
.login-btn {
width: 320px;
height: 40px;
background: rgba(0, 127, 255, 1);
border-radius: 1px;
margin: 0 auto;
margin-top: 40px;
font-size: 16px;
line-height: 40px;
text-align: center;
color: #fff;
cursor: pointer;
}
.reserved-con {
position: absolute;
bottom: 36%;
left: 0;
right: 0;
margin: 0 auto;
}
.reserved-words {
font-size: 12px;
color: #b4b4b4;
text-align: center;
}
.line-two {
margin-top: 8px;
}
}
</style>
......
<template>
<div class=""></div>
</template>
<script>
export default {
name:"",
components:{},
props:{},
data(){
return {
}
},
created(){},
mounted(){},
methods:{},
computed: {},
watch: {},
}
</script>
<style scoped lang="less">
</style>
\ No newline at end of file
<template>
<div class=""></div>
</template>
<script>
export default {
name:"",
components:{},
props:{},
data(){
return {
}
},
created(){},
mounted(){},
methods:{},
computed: {},
watch: {},
}
</script>
<style scoped lang="less">
</style>
\ No newline at end of file
<template>
<div class=""></div>
</template>
<script>
export default {
name:"",
components:{},
props:{},
data(){
return {
}
},
created(){},
mounted(){},
methods:{},
computed: {},
watch: {},
}
</script>
<style scoped lang="less">
</style>
\ No newline at end of file
<template>
<div class=""></div>
</template>
<script>
export default {
name:"",
components:{},
props:{},
data(){
return {
}
},
created(){},
mounted(){},
methods:{},
computed: {},
watch: {},
}
</script>
<style scoped lang="less">
</style>
\ No newline at end of file