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 = [ ...@@ -27,6 +27,30 @@ const constantRoutes = [
27 name: '首页', 27 name: '首页',
28 code: '0-1', 28 code: '0-1',
29 component: () => import('@/views/panel/index') 29 component: () => import('@/views/panel/index')
30 },
31 {
32 path: '/create',
33 name: '新建',
34 code: '0-2',
35 component: () => import('@/views/panel/create/index')
36 },
37 {
38 path: '/modify',
39 name: '更正',
40 code: '0-3',
41 component: () => import('@/views/panel/modify/index')
42 },
43 {
44 path: '/change',
45 name: '变更',
46 code: '0-4',
47 component: () => import('@/views/panel/change/index')
48 },
49 {
50 path: '/search',
51 name: '综合查询',
52 code: '0-5',
53 component: () => import('@/views/panel/search/index')
30 } 54 }
31 ] 55 ]
32 } 56 }
......
...@@ -31,6 +31,7 @@ const mutations = { ...@@ -31,6 +31,7 @@ const mutations = {
31 }, 31 },
32 // 初始化 32 // 初始化
33 INIT_TABS(state) { 33 INIT_TABS(state) {
34 debugger
34 state.openTab = []; 35 state.openTab = [];
35 state.openTab[0] = { route: "/panel", name: "首页" } 36 state.openTab[0] = { route: "/panel", name: "首页" }
36 }, 37 },
......
...@@ -63,20 +63,21 @@ export default { ...@@ -63,20 +63,21 @@ export default {
63 defaultActive: "", 63 defaultActive: "",
64 headTop: [ 64 headTop: [
65 { 65 {
66 select: true, 66 path:"/create",
67 },
68 {
69 select: false, 67 select: false,
70 }, 68 },
71 { 69 {
70 path:"/modify",
72 select: false, 71 select: false,
73 }, 72 },
74 { 73 {
74 path:"/change",
75 select: false, 75 select: false,
76 }, 76 },
77 { 77 {
78 path:"/search",
78 select: false, 79 select: false,
79 }, 80 }
80 ], 81 ],
81 // 上导航选中id 82 // 上导航选中id
82 indId: undefined, 83 indId: undefined,
...@@ -178,18 +179,18 @@ export default { ...@@ -178,18 +179,18 @@ export default {
178 { 179 {
179 name: "新建", 180 name: "新建",
180 icon: "fa fa-address-card-o", 181 icon: "fa fa-address-card-o",
181 path: "/officialAccount_panel", 182 path: "/create",
182 }, 183 },
183 { name: "更正", icon: "fa fa-address-card-o", path: "/applets_panel" }, 184 { name: "更正", icon: "fa fa-address-card-o", path: "/modify" },
184 { 185 {
185 name: "变更", 186 name: "变更",
186 icon: "fa fa-address-card-o", 187 icon: "fa fa-address-card-o",
187 path: "/appointment_panel", 188 path: "/change",
188 }, 189 },
189 { 190 {
190 name: "综合查询", 191 name: "综合查询",
191 icon: "fa fa-address-card-o", 192 icon: "fa fa-address-card-o",
192 path: "/system_panel", 193 path: "/search",
193 }, 194 },
194 ]; 195 ];
195 this.navigationList = list; 196 this.navigationList = list;
...@@ -208,11 +209,10 @@ export default { ...@@ -208,11 +209,10 @@ export default {
208 headTop[index].name = item.name; 209 headTop[index].name = item.name;
209 headTop[index].icon = item.icon; 210 headTop[index].icon = item.icon;
210 }); 211 });
211 this.menuSelect(data, selectId);
212 },
213 menuSelect(data, selectId) {
214 this.menuList = data[selectId].children;
215 }, 212 },
213 // menuSelect(data, selectId) {
214 // this.menuList = data[selectId].children;
215 // },
216 handleOpen(key, keyPath) { 216 handleOpen(key, keyPath) {
217 console.log(key, keyPath); 217 console.log(key, keyPath);
218 }, 218 },
...@@ -231,12 +231,12 @@ export default { ...@@ -231,12 +231,12 @@ export default {
231 }, 231 },
232 selectTopItems(ind) { 232 selectTopItems(ind) {
233 this.indId = ind; 233 this.indId = ind;
234 this.menuSelect(this.navigationList, ind); 234 // this.menuSelect(this.navigationList, ind);
235 this.$store.dispatch("setTabs/init_tabs"); 235 // this.$store.dispatch("setTabs/init_tabs");
236 this.$store.dispatch("setTabs/set_active_index", "/panel"); 236 // this.$store.dispatch("setTabs/set_active_index", "/panel");
237 this.$router.push("/panel"); 237 this.$router.push(this.headTop[ind].path);
238 this.navSelect(ind); 238 this.navSelect(ind);
239 util.cookies.set("indId", ind); 239 // util.cookies.set("indId", ind);
240 }, 240 },
241 // 上导航选中id 241 // 上导航选中id
242 navSelect(id) { 242 navSelect(id) {
......
1 <template> 1 <template>
2 <div id="login"> 2 <div id="login">
3 <img class="login-logo" src="./images/logo-login.svg" /> 3 <img class="login-logo" src="./images/logo-login.svg" />
4 <div class="login-con"> 4 <div class="login-con">
5 <div class="login-title">用户登录</div> 5 <div class="login-title">用户登录</div>
6 <div class="login-user" :class="{'select-border':change.user}"> 6 <div class="login-user" :class="{ 'select-border': change.user }">
7 <img class="user-icon" src="./images/user.svg" /> 7 <img class="user-icon" src="./images/user.svg" />
8 <div class="line-mid"></div> 8 <div class="line-mid"></div>
9 <input 9 <input
10 type="text" 10 type="text"
11 class="user-input" 11 class="user-input"
12 placeholder="请输入您的账号" 12 placeholder="请输入您的账号"
13 v-model="userInfo.username" 13 v-model="userInfo.username"
14 @focus="reduceBorder('user')" 14 @focus="reduceBorder('user')"
15 @blur="addBorder('user')" 15 @blur="addBorder('user')"
16 /> 16 />
17 <span class="warning" v-show="warning.user">账号不能为空</span> 17 <span class="warning" v-show="warning.user">账号不能为空</span>
18 </div> 18 </div>
19 <div class="login-user user-mt" :class="{'select-border':change.pass}"> 19 <div class="login-user user-mt" :class="{ 'select-border': change.pass }">
20 <img class="user-icon" src="./images/password.svg" /> 20 <img class="user-icon" src="./images/password.svg" />
21 <div class="line-mid"></div> 21 <div class="line-mid"></div>
22 <input 22 <input
23 type="password" 23 type="password"
24 class="user-input" 24 class="user-input"
25 placeholder="请输入您的密码" 25 placeholder="请输入您的密码"
26 v-model="userInfo.password" 26 v-model="userInfo.password"
27 v-show="!selectEye" 27 v-show="!selectEye"
28 @focus="reduceBorder('pass')" 28 @focus="reduceBorder('pass')"
29 @blur="addBorder('pass')" 29 @blur="addBorder('pass')"
30 /> 30 />
31 <input 31 <input
32 type="text" 32 type="text"
33 class="user-input" 33 class="user-input"
34 placeholder="请输入您的密码" 34 placeholder="请输入您的密码"
35 v-model="userInfo.password" 35 v-model="userInfo.password"
36 v-show="selectEye" 36 v-show="selectEye"
37 @focus="reduceBorder('pass')" 37 @focus="reduceBorder('pass')"
38 @blur="addBorder('pass')" 38 @blur="addBorder('pass')"
39 /> 39 />
40 <img class="password-eye" src="./images/open.svg" @click="selectEyes" v-show="selectEye" /> 40 <img
41 <img class="password-eye" src="./images/close.svg" @click="selectEyes" v-show="!selectEye" /> 41 class="password-eye"
42 <span class="warning" v-show="warning.pass">密码不能为空</span> 42 src="./images/open.svg"
43 </div> 43 @click="selectEyes"
44 <div class="login-remake"> 44 v-show="selectEye"
45 <i class="icon iconfont iconfuxuan1 icon-style" v-show="!selectIcon" @click="selectRemeber"></i> 45 />
46 <i 46 <img
47 class="icon iconfont iconfuxuan-xuanzhong icon-select" 47 class="password-eye"
48 v-show="selectIcon" 48 src="./images/close.svg"
49 @click="selectRemeber" 49 @click="selectEyes"
50 ></i> 50 v-show="!selectEye"
51 <span class="remake_txt" @click="selectRemeber">记住账号密码</span> 51 />
52 </div> 52 <span class="warning" v-show="warning.pass">密码不能为空</span>
53 <div class="login-btn" @click="goHome">登录</div> 53 </div>
54 </div> 54 <div class="login-remake">
55 <div class="reserved-con"> 55 <i
56 <div class="reserved-words">版权所有：2020©某某市自然资源和规划</div> 56 class="icon iconfont iconfuxuan1 icon-style"
57 <div class="reserved-words line-two">技术支持：西安市自然资源规划局信息中心</div> 57 v-show="!selectIcon"
58 </div> 58 @click="selectRemeber"
59 </div> 59 ></i>
60 <i
61 class="icon iconfont iconfuxuan-xuanzhong icon-select"
62 v-show="selectIcon"
63 @click="selectRemeber"
64 ></i>
65 <span class="remake_txt" @click="selectRemeber">记住账号密码</span>
66 </div>
67 <div class="login-btn" @click="goHome">登录</div>
68 </div>
69 <div class="reserved-con">
70 <div class="reserved-words">版权所有：2020©某某市自然资源和规划</div>
71 <div class="reserved-words line-two">
72 技术支持：西安市自然资源规划局信息中心
73 </div>
74 </div>
75 </div>
60 </template> 76 </template>
61 <script> 77 <script>
62 export default { 78 export default {
63 data() { 79 data() {
64 return { 80 return {
65 selectIcon: true, 81 selectIcon: true,
66 selectEye: false, 82 selectEye: false,
67 userInfo: { 83 userInfo: {
68 username: "", 84 username: "",
69 password: "", 85 password: "",
70 }, 86 },
71 change: { 87 change: {
72 //边框 88 //边框
73 user: false, 89 user: false,
74 pass: false, 90 pass: false,
75 }, 91 },
76 warning: { 92 warning: {
77 user: false, 93 user: false,
78 pass: false, 94 pass: false,
79 }, 95 },
80 canDo: 1, 96 canDo: 1,
81 }; 97 };
82 }, 98 },
83 mounted() { 99 mounted() {
84 this.initPage(); 100 this.initPage();
85 }, 101 },
86 methods: { 102 methods: {
87 initPage() { 103 initPage() {
88 let userInfo = 104 let userInfo =
89 localStorage.getItem("userInfo") && 105 localStorage.getItem("userInfo") &&
90 JSON.parse(localStorage.getItem("userInfo")); 106 JSON.parse(localStorage.getItem("userInfo"));
91 if (userInfo) { 107 if (userInfo) {
92 this.userInfo.username = userInfo.username; 108 this.userInfo.username = userInfo.username;
93 this.userInfo.password = userInfo.password; 109 this.userInfo.password = userInfo.password;
94 } 110 }
95 }, 111 },
96 selectRemeber() { 112 selectRemeber() {
97 this.selectIcon = !this.selectIcon; 113 this.selectIcon = !this.selectIcon;
98 }, 114 },
99 goHome() { 115 goHome() {
100 if (this.canDo) { 116 if (this.canDo) {
101 this.canDo = 0; 117 this.canDo = 0;
102 if ( 118 if (
103 this.userInfo.username == "admin" && 119 this.userInfo.username == "admin" &&
104 this.userInfo.password == "123456" 120 this.userInfo.password == "123456"
105 ) { 121 ) {
106 if (this.selectIcon) { 122 if (this.selectIcon) {
107 localStorage.setItem("userInfo", JSON.stringify(this.userInfo)); 123 localStorage.setItem("userInfo", JSON.stringify(this.userInfo));
108 } else { 124 } else {
109 localStorage.removeItem("userInfo"); 125 localStorage.removeItem("userInfo");
110 } 126 }
111 // this.$store.dispatch('user/login', this.userInfo).then(() => { 127 // this.$store.dispatch('user/login', this.userInfo).then(() => {
112 // this.$router.push('/home') 128 // this.$router.push('/home')
113 // }).catch(() => { 129 // }).catch(() => {
114 // }) 130 // })
115 this.$store.dispatch("permission_routes/getMenus"); 131 // this.$store.dispatch("permission_routes/getMenus");
116 } else if (!this.userInfo.username || !this.userInfo.password) { 132 this.$router.push("/panel");
117 this.$message({ 133 } else if (!this.userInfo.username || !this.userInfo.password) {
118 duration: 2000, 134 this.$message({
119 message: "账号或密码不能为空，请重新输入", 135 duration: 2000,
120 type: "error", 136 message: "账号或密码不能为空，请重新输入",
121 }); 137 type: "error",
122 } else { 138 });
123 this.$message({ 139 } else {
124 duration: 2000, 140 this.$message({
125 message: "账号或密码不正确，请重新输入", 141 duration: 2000,
126 type: "error", 142 message: "账号或密码不正确，请重新输入",
127 }); 143 type: "error",
128 } 144 });
129 setTimeout(() => { 145 }
130 this.canDo = 1; 146 setTimeout(() => {
131 }, 2000); 147 this.canDo = 1;
132 } 148 }, 2000);
133 }, 149 }
134 selectEyes() { 150 },
135 this.selectEye = !this.selectEye; 151 selectEyes() {
136 }, 152 this.selectEye = !this.selectEye;
137 reduceBorder(type) { 153 },
138 //获取焦点 154 reduceBorder(type) {
139 if (type == "user") { 155 //获取焦点
140 this.change.user = true; 156 if (type == "user") {
141 } else { 157 this.change.user = true;
142 this.change.pass = true; 158 } else {
143 } 159 this.change.pass = true;
144 }, 160 }
145 addBorder(type) { 161 },
146 //失去焦点 162 addBorder(type) {
147 if (type == "user") { 163 //失去焦点
148 this.change.user = false; 164 if (type == "user") {
149 if (!this.userInfo.username) { 165 this.change.user = false;
150 this.warning.user = true; 166 if (!this.userInfo.username) {
151 } else { 167 this.warning.user = true;
152 this.warning.user = false; 168 } else {
153 } 169 this.warning.user = false;
154 } else { 170 }
155 this.change.pass = false; 171 } else {
156 if (!this.userInfo.password) { 172 this.change.pass = false;
157 this.warning.pass = true; 173 if (!this.userInfo.password) {
158 } else { 174 this.warning.pass = true;
159 this.warning.pass = false; 175 } else {
160 } 176 this.warning.pass = false;
161 } 177 }
162 }, 178 }
163 }, 179 },
180 },
164 }; 181 };
165 </script> 182 </script>
166 <style lang="less" scoped> 183 <style lang="less" scoped>
167 #login { 184 #login {
168 width: 100vw; 185 width: 100vw;
169 height: 100vh; 186 height: 100vh;
170 background: url("./images/login-bg.png") center center no-repeat; 187 background: url("./images/login-bg.png") center center no-repeat;
171 background-size: 100% 100%; 188 background-size: 100% 100%;
172 overflow: hidden; 189 overflow: hidden;
173 position: relative; 190 position: relative;
174 .login-logo { 191 .login-logo {
175 display: block; 192 display: block;
176 margin: 0 auto; 193 margin: 0 auto;
177 position: absolute; 194 position: absolute;
178 top: 11.5%; 195 top: 11.5%;
179 left: 0; 196 left: 0;
180 right: 0; 197 right: 0;
181 margin: 0 auto; 198 margin: 0 auto;
182 width: 360px; 199 width: 360px;
183 } 200 }
184 .login-con { 201 .login-con {
185 position: absolute; 202 position: absolute;
186 top: 24%; 203 top: 24%;
187 left: 0; 204 left: 0;
188 right: 0; 205 right: 0;
189 margin: 0 auto; 206 margin: 0 auto;
190 } 207 }
191 .login-title { 208 .login-title {
192 width: 320px; 209 width: 320px;
193 margin: 0 auto; 210 margin: 0 auto;
194 font-size: 14px; 211 font-size: 14px;
195 font-weight: 500; 212 font-weight: 500;
196 } 213 }
197 .login-user { 214 .login-user {
198 width: 320px; 215 width: 320px;
199 height: 38px; 216 height: 38px;
200 border: 1px solid rgba(155, 155, 155, 1); 217 border: 1px solid rgba(155, 155, 155, 1);
201 box-sizing: border-box; 218 box-sizing: border-box;
202 margin: 0 auto; 219 margin: 0 auto;
203 margin-top: 20px; 220 margin-top: 20px;
204 border-radius: 2px; 221 border-radius: 2px;
205 position: relative; 222 position: relative;
206 .user-icon { 223 .user-icon {
207 margin: 0 12px; 224 margin: 0 12px;
208 float: left; 225 float: left;
209 width: 16px; 226 width: 16px;
210 height: 16px; 227 height: 16px;
211 margin-top: 11px; 228 margin-top: 11px;
212 } 229 }
213 .line-mid { 230 .line-mid {
214 width: 1px; 231 width: 1px;
215 height: 16px; 232 height: 16px;
216 background: #cbcbcb; 233 background: #cbcbcb;
217 float: left; 234 float: left;
218 margin-top: 11px; 235 margin-top: 11px;
219 margin-right: 9px; 236 margin-right: 9px;
220 } 237 }
221 .user-input { 238 .user-input {
222 width: 230px; 239 width: 230px;
223 float: left; 240 float: left;
224 font-size: 12px; 241 font-size: 12px;
225 margin-top: 11px; 242 margin-top: 11px;
226 background: none; 243 background: none;
227 outline: 0; 244 outline: 0;
228 border: 0; 245 border: 0;
229 color: #4a4a4a; 246 color: #4a4a4a;
230 box-shadow: inset 0 0 0 1000px #fff !important; 247 box-shadow: inset 0 0 0 1000px #fff !important;
231 } 248 }
232 .password-eye { 249 .password-eye {
233 float: right; 250 float: right;
234 width: 16px; 251 width: 16px;
235 height: 16px; 252 height: 16px;
236 margin-right: 12px; 253 margin-right: 12px;
237 margin-top: 11px; 254 margin-top: 11px;
238 cursor: pointer; 255 cursor: pointer;
239 } 256 }
240 .warning { 257 .warning {
241 font-size: 12px; 258 font-size: 12px;
242 color: red; 259 color: red;
243 position: absolute; 260 position: absolute;
244 left: 0; 261 left: 0;
245 bottom: -18px; 262 bottom: -18px;
246 } 263 }
247 } 264 }
248 .user-mt { 265 .user-mt {
249 margin-top: 26px; 266 margin-top: 26px;
250 } 267 }
251 .select-border { 268 .select-border {
252 border: 1px solid rgba(0, 113, 255, 1); 269 border: 1px solid rgba(0, 113, 255, 1);
253 } 270 }
254 .login-remake { 271 .login-remake {
255 width: 320px; 272 width: 320px;
256 height: 14px; 273 height: 14px;
257 margin: 0 auto; 274 margin: 0 auto;
258 margin-top: 26px; 275 margin-top: 26px;
259 .icon-style { 276 .icon-style {
260 font-size: 12px; 277 font-size: 12px;
261 color: #5b5b5b; 278 color: #5b5b5b;
262 float: left; 279 float: left;
263 line-height: 14px; 280 line-height: 14px;
264 cursor: pointer; 281 cursor: pointer;
265 } 282 }
266 .icon-select { 283 .icon-select {
267 font-size: 12px; 284 font-size: 12px;
268 color: rgba(0, 127, 255, 1); 285 color: rgba(0, 127, 255, 1);
269 float: left; 286 float: left;
270 line-height: 14px; 287 line-height: 14px;
271 cursor: pointer; 288 cursor: pointer;
272 } 289 }
273 .remake_txt { 290 .remake_txt {
274 font-size: 12px; 291 font-size: 12px;
275 line-height: 14px; 292 line-height: 14px;
276 color: #5b5b5b; 293 color: #5b5b5b;
277 margin-left: 6px; 294 margin-left: 6px;
278 float: left; 295 float: left;
279 cursor: pointer; 296 cursor: pointer;
280 } 297 }
281 } 298 }
282 .login-btn { 299 .login-btn {
283 width: 320px; 300 width: 320px;
284 height: 40px; 301 height: 40px;
285 background: rgba(0, 127, 255, 1); 302 background: rgba(0, 127, 255, 1);
286 border-radius: 1px; 303 border-radius: 1px;
287 margin: 0 auto; 304 margin: 0 auto;
288 margin-top: 40px; 305 margin-top: 40px;
289 font-size: 16px; 306 font-size: 16px;
290 line-height: 40px; 307 line-height: 40px;
291 text-align: center; 308 text-align: center;
292 color: #fff; 309 color: #fff;
293 cursor: pointer; 310 cursor: pointer;
294 } 311 }
295 .reserved-con { 312 .reserved-con {
296 position: absolute; 313 position: absolute;
297 bottom: 36%; 314 bottom: 36%;
298 left: 0; 315 left: 0;
299 right: 0; 316 right: 0;
300 margin: 0 auto; 317 margin: 0 auto;
301 } 318 }
302 .reserved-words { 319 .reserved-words {
303 font-size: 12px; 320 font-size: 12px;
304 color: #b4b4b4; 321 color: #b4b4b4;
305 text-align: center; 322 text-align: center;
306 } 323 }
307 .line-two { 324 .line-two {
308 margin-top: 8px; 325 margin-top: 8px;
309 } 326 }
310 } 327 }
311 </style> 328 </style>
312
......
1 <template>
2 <div class=""></div>
3 </template>
4
5 <script>
6 export default {
7 name:"",
8 components:{},
9 props:{},
10 data(){
11 return {
12 }
13 },
14 created(){},
15 mounted(){},
16 methods:{},
17 computed: {},
18 watch: {},
19 }
20 </script>
21 <style scoped lang="less">
22 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div class=""></div>
3 </template>
4
5 <script>
6 export default {
7 name:"",
8 components:{},
9 props:{},
10 data(){
11 return {
12 }
13 },
14 created(){},
15 mounted(){},
16 methods:{},
17 computed: {},
18 watch: {},
19 }
20 </script>
21 <style scoped lang="less">
22 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div class=""></div>
3 </template>
4
5 <script>
6 export default {
7 name:"",
8 components:{},
9 props:{},
10 data(){
11 return {
12 }
13 },
14 created(){},
15 mounted(){},
16 methods:{},
17 computed: {},
18 watch: {},
19 }
20 </script>
21 <style scoped lang="less">
22 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div class=""></div>
3 </template>
4
5 <script>
6 export default {
7 name:"",
8 components:{},
9 props:{},
10 data(){
11 return {
12 }
13 },
14 created(){},
15 mounted(){},
16 methods:{},
17 computed: {},
18 watch: {},
19 }
20 </script>
21 <style scoped lang="less">
22 </style>
...\ No newline at end of file ...\ No newline at end of file