Commit d42836872b7bcf901b8462c14fa9b59ac74b4d5d
1 parent
29f8fb90
首页布局完成,页面顶部返回组件
Showing
28 changed files
with
552 additions
and
590 deletions
package.json
src/assets/css/base.css
0 → 100644
1 | +* { | |
2 | + margin: 0px; | |
3 | + padding: 0px; | |
4 | +} | |
5 | +html, | |
6 | +body { | |
7 | + height:100%; | |
8 | + overflow: hidden; | |
9 | + background-color: #fff; | |
10 | + font-size: 14px; | |
11 | + color: #333333; | |
12 | +} | |
13 | + | |
14 | +li { | |
15 | + list-style: none; | |
16 | +} | |
17 | + | |
18 | +a { | |
19 | + text-decoration: none; | |
20 | +} | |
0 | 21 | \ No newline at end of file | ... | ... |
src/assets/nav/analysis.png
0 → 100644
6.48 KB
src/assets/nav/ask.png
0 → 100644
6.48 KB
src/assets/nav/card.png
0 → 100644
6.65 KB
src/assets/nav/device.png
0 → 100644
8.87 KB
src/assets/nav/down.png
0 → 100644
6.32 KB
src/assets/nav/examinationPaper.png
0 → 100644
7.45 KB
src/assets/nav/portrait.png
0 → 100644
8.87 KB
src/assets/nav/setUpAccount.png
0 → 100644
7.45 KB
src/assets/nav/setUpConglomerate.png
0 → 100644
7.45 KB
src/assets/nav/setUpSchool.png
0 → 100644
7.65 KB
src/assets/nav/test.png
0 → 100644
7.65 KB
src/components/ECharts/lineEcharts.vue
... | ... | @@ -96,7 +96,20 @@ export default { |
96 | 96 | } |
97 | 97 | ] |
98 | 98 | }) |
99 | - } | |
99 | + | |
100 | + this.selfAdaption() | |
101 | + }, | |
102 | + // echart自适应 | |
103 | + selfAdaption() { | |
104 | + let that = this; | |
105 | + setTimeout(() => { | |
106 | + window.onresize = function () { | |
107 | + if (that.$refs.echarts) { | |
108 | + that.$refs.echarts.chart.resize(); | |
109 | + } | |
110 | + }; | |
111 | + }, 10); | |
112 | + }, | |
100 | 113 | } |
101 | 114 | } |
102 | 115 | </script> | ... | ... |
src/components/backBox.vue
0 → 100644
1 | +<template> | |
2 | + <div class="back"> | |
3 | + <div class="back-l" @click="back"> | |
4 | + <slot name="title"></slot> | |
5 | + </div> | |
6 | + <div class="back-r"> | |
7 | + <slot name="btns"></slot> | |
8 | + </div> | |
9 | + </div> | |
10 | +</template> | |
11 | + | |
12 | +<script> | |
13 | +export default { | |
14 | + name: "back", | |
15 | + methods: { | |
16 | + back() { | |
17 | + this.$router.go(-1); | |
18 | + }, | |
19 | + }, | |
20 | +}; | |
21 | +</script> | |
22 | + | |
23 | +<style lang="scss" scoped> | |
24 | +.back { | |
25 | + width: 100%; | |
26 | + height: 56px; | |
27 | + border-bottom: 1px solid #e2e2e2; | |
28 | + display: flex; | |
29 | + justify-content: space-between; | |
30 | + align-items: center; | |
31 | + padding: 0 20px; | |
32 | + box-sizing: border-box; | |
33 | + .back-l { | |
34 | + display: flex; | |
35 | + align-items: center; | |
36 | + cursor: pointer; | |
37 | + flex-shrink: 0; | |
38 | + font-size: 18px; | |
39 | + font-weight: 500; | |
40 | + } | |
41 | + .back-r { | |
42 | + flex: 1; | |
43 | + display: flex; | |
44 | + justify-content: flex-end; | |
45 | + } | |
46 | + .fa-mail-reply-all { | |
47 | + font-size: 28px; | |
48 | + color: #b3b3b3; | |
49 | + margin-right: 12px; | |
50 | + } | |
51 | +} | |
52 | +</style> | |
0 | 53 | \ No newline at end of file | ... | ... |
src/components/globalComponents.js
0 → 100644
1 | +import Vue from "vue"; | |
2 | +/** | |
3 | + * require.context(directory .useSubdirectories ,regExp ) | |
4 | + * directory :-读取文件路径 | |
5 | + * useSubdirectories :-是够遍历文件子目录 | |
6 | + * regExp :匹配文件正则 | |
7 | + */ | |
8 | + | |
9 | +function changeStr(str) { | |
10 | + return str.charAt(str).toUpperCase() + str.slice(1) | |
11 | +} | |
12 | +const requireComponent = require.context("./", false, /\.vue$/); | |
13 | + | |
14 | +requireComponent.keys().forEach((fileName) => { | |
15 | + let config = requireComponent(fileName); | |
16 | + let componentName = changeStr( | |
17 | + fileName.replace(/\.\//, "").replace(/\.\w+$/, "") | |
18 | + ); | |
19 | + Vue.component(componentName, config.default || config); | |
20 | +}); | |
21 | + | ... | ... |
src/main.js
... | ... | @@ -9,11 +9,15 @@ import i18n from "./i18n/i18n" |
9 | 9 | import globalPlugin from "./utils/global" |
10 | 10 | import permission from "./directive/permission/button" |
11 | 11 | import NProgress from "nprogress" |
12 | +import "babel-polyfill" | |
13 | +import '@/components/globalComponents.js' | |
14 | + | |
12 | 15 | |
13 | 16 | import "nprogress/nprogress.css" |
14 | 17 | import "element-ui/lib/theme-chalk/index.css" |
15 | 18 | import "font-awesome/css/font-awesome.css" |
16 | 19 | import "@/router/permission" |
20 | +import "@/assets/css/base.css" | |
17 | 21 | |
18 | 22 | Vue.config.productionTip = false |
19 | 23 | Vue.use(ElementUI) |
... | ... | @@ -30,6 +34,4 @@ new Vue({ |
30 | 34 | store, |
31 | 35 | i18n, |
32 | 36 | render: h => h(App), |
33 | - components: {App}, | |
34 | - template: "<App/>" | |
35 | 37 | }) | ... | ... |
src/router/permission.js
... | ... | @@ -17,6 +17,7 @@ const TestAnalysis = () => import("@/views/test/analysis") |
17 | 17 | const DataSync = () => import("@/views/dataSync/index") |
18 | 18 | const Portrait = () => import("@/views/portrait/index") |
19 | 19 | const Card = () => import("@/views/card/index") |
20 | +const Analysis = () => import("@/views/analysis/index") | |
20 | 21 | const Device = () => import("@/views/device/index") |
21 | 22 | const Down = () => import("@/views/down/index") |
22 | 23 | const DownClient = () => import("@/views/down/client") |
... | ... | @@ -127,42 +128,45 @@ let addrouters = [ //测试用,后续后端获取 |
127 | 128 | } |
128 | 129 | ] |
129 | 130 | }, |
131 | + | |
130 | 132 | { |
131 | - path: "/dataSync", | |
132 | - iconCls: "fa fa-random", // 图标样式class | |
133 | - name: "数据同步", | |
133 | + path: "/setUpConglomerate", | |
134 | + iconCls: "fa fa-building", // 图标样式class | |
135 | + name: "学校管理", | |
134 | 136 | component: Layout, |
135 | 137 | alone: true, |
136 | 138 | children: [ |
137 | 139 | { |
138 | - path: "/dataSync", | |
139 | - iconCls: "fa fa-random", // 图标样式class | |
140 | - name: "", | |
141 | - component: DataSync, | |
140 | + path: "/setUpConglomerate", | |
141 | + iconCls: "fa fa-building", | |
142 | + name: '集团管理', | |
143 | + component: SetUpConglomerate, | |
142 | 144 | children: [] |
143 | - } | |
145 | + }, | |
144 | 146 | ] |
145 | 147 | }, |
146 | 148 | { |
147 | - path: "/", | |
148 | - iconCls: "fa fa-cog", | |
149 | - name: '信息管理', | |
149 | + path: "/setUpAccount", | |
150 | + iconCls: "fa fa-id-card-o", // 图标样式class | |
151 | + name: "账号管理", | |
150 | 152 | component: Layout, |
153 | + alone: true, | |
151 | 154 | children: [ |
152 | 155 | { |
153 | 156 | path: "/setUpAccount", |
154 | 157 | iconCls: "fa fa-id-card-o", |
155 | - name: '账号管理', | |
158 | + name: '', | |
156 | 159 | component: SetUpAccount, |
157 | 160 | children: [] |
158 | 161 | }, |
159 | - { | |
160 | - path: "/setUpConglomerate", | |
161 | - iconCls: "fa fa-building", | |
162 | - name: '集团管理', | |
163 | - component: SetUpConglomerate, | |
164 | - children: [] | |
165 | - }, | |
162 | + ] | |
163 | + }, | |
164 | + { | |
165 | + path: "/", | |
166 | + iconCls: "fa fa-cog", | |
167 | + name: '学校管理', | |
168 | + component: Layout, | |
169 | + children: [ | |
166 | 170 | { |
167 | 171 | path: "/setUpSchool", |
168 | 172 | iconCls: "fa fa-calculator", |
... | ... | @@ -219,6 +223,22 @@ let addrouters = [ //测试用,后续后端获取 |
219 | 223 | ] |
220 | 224 | }, |
221 | 225 | { |
226 | + path: "/analysis", | |
227 | + iconCls: "fa fa-area-chart", // 图标样式class | |
228 | + name: "使用分析", | |
229 | + component: Layout, | |
230 | + alone: true, | |
231 | + children: [ | |
232 | + { | |
233 | + path: "/analysis", | |
234 | + iconCls: "fa fa-area-chart", // 图标样式class | |
235 | + name: "", | |
236 | + component: Analysis, | |
237 | + children: [] | |
238 | + } | |
239 | + ] | |
240 | + }, | |
241 | + { | |
222 | 242 | path: "/down", |
223 | 243 | iconCls: "fa fa-download", // 图标样式class |
224 | 244 | name: "软件下载", |
... | ... | @@ -241,7 +261,22 @@ let addrouters = [ //测试用,后续后端获取 |
241 | 261 | } |
242 | 262 | ] |
243 | 263 | }, |
244 | - | |
264 | + { | |
265 | + path: "/dataSync", | |
266 | + iconCls: "fa fa-random", // 图标样式class | |
267 | + name: "数据同步", | |
268 | + component: Layout, | |
269 | + alone: true, | |
270 | + children: [ | |
271 | + { | |
272 | + path: "/dataSync", | |
273 | + iconCls: "fa fa-random", // 图标样式class | |
274 | + name: "", | |
275 | + component: DataSync, | |
276 | + children: [] | |
277 | + } | |
278 | + ] | |
279 | + }, | |
245 | 280 | { |
246 | 281 | path: "*", |
247 | 282 | redirect: "/404", |
... | ... | @@ -268,7 +303,7 @@ router.beforeEach((to, from, next) => { |
268 | 303 | roleName: "超级管理员" |
269 | 304 | } |
270 | 305 | ], |
271 | - name: "张老师", | |
306 | + name: "李老师", | |
272 | 307 | // avatar: data.avatar ? data.avatar : "", |
273 | 308 | // uid: data.id, |
274 | 309 | // authorityRouter:[], |
... | ... | @@ -276,7 +311,6 @@ router.beforeEach((to, from, next) => { |
276 | 311 | }) |
277 | 312 | await store.commit("setRouters", addrouters) |
278 | 313 | let newAddRouters = store.getters.addRouters |
279 | - // await router.addRoutes(newAddRouters) | |
280 | 314 | newAddRouters.forEach(res => { |
281 | 315 | router.addRoute(res) |
282 | 316 | }) | ... | ... |
src/store/index.js
... | ... | @@ -20,6 +20,7 @@ const TestAnalysis = () => import("@/views/test/analysis") |
20 | 20 | const DataSync = () => import("@/views/dataSync/index") |
21 | 21 | const Portrait = () => import("@/views/portrait/index") |
22 | 22 | const Card = () => import("@/views/card/index") |
23 | +const Analysis = () => import("@/views/analysis/index") | |
23 | 24 | const Device = () => import("@/views/device/index") |
24 | 25 | const Down = () => import("@/views/down/index") |
25 | 26 | const DownClient = () => import("@/views/down/client") |
... | ... | @@ -130,42 +131,45 @@ let addrouters = [ //测试用,后续后端获取 |
130 | 131 | } |
131 | 132 | ] |
132 | 133 | }, |
134 | + | |
133 | 135 | { |
134 | - path: "/dataSync", | |
135 | - iconCls: "fa fa-random", // 图标样式class | |
136 | - name: "数据同步", | |
136 | + path: "/setUpConglomerate", | |
137 | + iconCls: "fa fa-building", // 图标样式class | |
138 | + name: "学校管理", | |
137 | 139 | component: Layout, |
138 | 140 | alone: true, |
139 | 141 | children: [ |
140 | 142 | { |
141 | - path: "/dataSync", | |
142 | - iconCls: "fa fa-random", // 图标样式class | |
143 | - name: "", | |
144 | - component: DataSync, | |
143 | + path: "/setUpConglomerate", | |
144 | + iconCls: "fa fa-building", | |
145 | + name: '集团管理', | |
146 | + component: SetUpConglomerate, | |
145 | 147 | children: [] |
146 | - } | |
148 | + }, | |
147 | 149 | ] |
148 | 150 | }, |
149 | 151 | { |
150 | - path: "/", | |
151 | - iconCls: "fa fa-cog", | |
152 | - name: '信息管理', | |
152 | + path: "/setUpAccount", | |
153 | + iconCls: "fa fa-id-card-o", // 图标样式class | |
154 | + name: "账号管理", | |
153 | 155 | component: Layout, |
156 | + alone: true, | |
154 | 157 | children: [ |
155 | 158 | { |
156 | 159 | path: "/setUpAccount", |
157 | 160 | iconCls: "fa fa-id-card-o", |
158 | - name: '账号管理', | |
161 | + name: '', | |
159 | 162 | component: SetUpAccount, |
160 | 163 | children: [] |
161 | 164 | }, |
162 | - { | |
163 | - path: "/setUpConglomerate", | |
164 | - iconCls: "fa fa-building", | |
165 | - name: '集团管理', | |
166 | - component: SetUpConglomerate, | |
167 | - children: [] | |
168 | - }, | |
165 | + ] | |
166 | + }, | |
167 | + { | |
168 | + path: "/", | |
169 | + iconCls: "fa fa-cog", | |
170 | + name: '学校管理', | |
171 | + component: Layout, | |
172 | + children: [ | |
169 | 173 | { |
170 | 174 | path: "/setUpSchool", |
171 | 175 | iconCls: "fa fa-calculator", |
... | ... | @@ -222,6 +226,22 @@ let addrouters = [ //测试用,后续后端获取 |
222 | 226 | ] |
223 | 227 | }, |
224 | 228 | { |
229 | + path: "/analysis", | |
230 | + iconCls: "fa fa-area-chart", // 图标样式class | |
231 | + name: "使用分析", | |
232 | + component: Layout, | |
233 | + alone: true, | |
234 | + children: [ | |
235 | + { | |
236 | + path: "/analysis", | |
237 | + iconCls: "fa fa-area-chart", // 图标样式class | |
238 | + name: "", | |
239 | + component: Analysis, | |
240 | + children: [] | |
241 | + } | |
242 | + ] | |
243 | + }, | |
244 | + { | |
225 | 245 | path: "/down", |
226 | 246 | iconCls: "fa fa-download", // 图标样式class |
227 | 247 | name: "软件下载", |
... | ... | @@ -244,7 +264,22 @@ let addrouters = [ //测试用,后续后端获取 |
244 | 264 | } |
245 | 265 | ] |
246 | 266 | }, |
247 | - | |
267 | + { | |
268 | + path: "/dataSync", | |
269 | + iconCls: "fa fa-random", // 图标样式class | |
270 | + name: "数据同步", | |
271 | + component: Layout, | |
272 | + alone: true, | |
273 | + children: [ | |
274 | + { | |
275 | + path: "/dataSync", | |
276 | + iconCls: "fa fa-random", // 图标样式class | |
277 | + name: "", | |
278 | + component: DataSync, | |
279 | + children: [] | |
280 | + } | |
281 | + ] | |
282 | + }, | |
248 | 283 | { |
249 | 284 | path: "*", |
250 | 285 | redirect: "/404", |
... | ... | @@ -301,8 +336,6 @@ const store = new Vuex.Store({ |
301 | 336 | // authorityRouter:[], |
302 | 337 | }); |
303 | 338 | commit("setRouters", addrouters) |
304 | - // let newAddRouters = getters.addRouters; | |
305 | - // await router.addRoutes(newAddRouters) | |
306 | 339 | addrouters.forEach((res) => { |
307 | 340 | that.$router.addRoute(res); |
308 | 341 | }); |
... | ... | @@ -327,8 +360,6 @@ const store = new Vuex.Store({ |
327 | 360 | // authorityRouter:[], |
328 | 361 | }); |
329 | 362 | commit("setRouters", addrouters) |
330 | - // let newAddRouters = getters.addRouters; | |
331 | - // await router.addRoutes(newAddRouters) | |
332 | 363 | addrouters.forEach((res) => { |
333 | 364 | that.$router.addRoute(res); |
334 | 365 | }); | ... | ... |
src/utils/global.js
... | ... | @@ -7,98 +7,5 @@ export default { |
7 | 7 | Vue.prototype.$echarts = echarts |
8 | 8 | Vue.prototype.$request = request |
9 | 9 | Vue.prototype.$rules = rules |
10 | - /** 时间字符串 | |
11 | - * @method $getDateDiff | |
12 | - * @param timespan | |
13 | - */ | |
14 | - Vue.prototype.$getDateDiff = function (timespan) { | |
15 | - var dateTime = new Date(timespan) | |
16 | - var year = dateTime.getFullYear() | |
17 | - var month = (dateTime.getMonth() + 1) < 10 ? "0" + (dateTime.getMonth() + 1) : (dateTime.getMonth() + 1) | |
18 | - var day = dateTime.getDate() < 10 ? "0" + dateTime.getDate() : dateTime.getDate() | |
19 | - var hour = dateTime.getHours() < 10 ? "0" + dateTime.getHours() : dateTime.getHours() | |
20 | - var minute = dateTime.getMinutes() < 10 ? "0" + dateTime.getMinutes() : dateTime.getMinutes() | |
21 | - var seconds = dateTime.getSeconds() < 10 ? "0" + dateTime.getSeconds() : dateTime.getSeconds() | |
22 | - var now = new Date() | |
23 | - var nowNew = now.getTime() | |
24 | - var milliseconds = 0 | |
25 | - var timeSpanStr | |
26 | - milliseconds = nowNew - dateTime | |
27 | - | |
28 | - if (milliseconds <= 1000 * 60 * 1) { | |
29 | - timeSpanStr = "刚刚" | |
30 | - } else if (1000 * 60 * 1 < milliseconds && milliseconds <= 1000 * 60 * 60) { | |
31 | - timeSpanStr = Math.round((milliseconds / (1000 * 60))) + "分钟前" | |
32 | - } else if (1000 * 60 * 60 * 1 < milliseconds && milliseconds <= 1000 * 60 * 60 * 24) { | |
33 | - timeSpanStr = Math.round(milliseconds / (1000 * 60 * 60)) + "小时前" | |
34 | - } else if (1000 * 60 * 60 * 24 < milliseconds && milliseconds <= 1000 * 60 * 60 * 24 * 3) { | |
35 | - timeSpanStr = Math.round(milliseconds / (1000 * 60 * 60 * 24)) + "天前" | |
36 | - } else if (milliseconds > 1000 * 60 * 60 * 24 * 3 && year === now.getFullYear()) { | |
37 | - timeSpanStr = month + "-" + day + " " + hour + ":" + minute + ":" + seconds | |
38 | - } else { | |
39 | - timeSpanStr = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + seconds | |
40 | - } | |
41 | - return timeSpanStr | |
42 | - } | |
43 | - | |
44 | - /** 当前地址ip | |
45 | - * @method $path | |
46 | - * @param {} | |
47 | - */ | |
48 | - Vue.prototype.$path = process.env.API_HOST | |
49 | - | |
50 | - /** 传入路径转换成完整连接 | |
51 | - * @method $getPath | |
52 | - * @param {url: 路径} | |
53 | - */ | |
54 | - Vue.prototype.$getPath = function (url) { | |
55 | - const base = process.env.API_HOST | |
56 | - if (/^http/.test(url)) return url | |
57 | - return base + url | |
58 | - } | |
59 | - /** 是否开发模式 | |
60 | - * @method $env | |
61 | - * @param {} | |
62 | - */ | |
63 | - Vue.prototype.$env = process.env.NODE_ENV | |
64 | - | |
65 | - /** 导出,下载处理文件流 | |
66 | - * @method $exportClick | |
67 | - * @param {res:文件流,name : 下载文件名} | |
68 | - */ | |
69 | - Vue.prototype.$exportClick = function (res, name = "下载.zip") { | |
70 | - const content = res | |
71 | - const blob = new Blob([content]) | |
72 | - const fileName = name | |
73 | - if ("download" in document.createElement("a")) { // 非IE下载 | |
74 | - const elink = document.createElement("a") | |
75 | - elink.download = fileName | |
76 | - elink.style.display = "none" | |
77 | - elink.href = URL.createObjectURL(blob) | |
78 | - document.body.appendChild(elink) | |
79 | - elink.click() | |
80 | - URL.revokeObjectURL(elink.href) // 释放URL 对象 | |
81 | - document.body.removeChild(elink) | |
82 | - } else { // IE10+下载 | |
83 | - navigator.msSaveBlob(blob, fileName) | |
84 | - } | |
85 | - } | |
86 | - | |
87 | - /** 当res.code === 200 时 | |
88 | - * @method $restBack | |
89 | - * @param res | |
90 | - * @param fn | |
91 | - * @param message | |
92 | - * @param type | |
93 | - */ | |
94 | - Vue.prototype.$restBack = function (res, fn = () => {}, message, type = "success") { | |
95 | - if (res.code === 200) { | |
96 | - this.$message({ | |
97 | - message: message || res.message, | |
98 | - type: type | |
99 | - }) | |
100 | - fn() | |
101 | - } | |
102 | - } | |
103 | 10 | } |
104 | 11 | } | ... | ... |
src/views/analysis/index.vue
0 → 100644
src/views/examinationPaper/index.vue
1 | 1 | <template> |
2 | 2 | <div> |
3 | - 答题卡列表 | |
4 | - <router-link to="/examinationPaperAdd">添加答题卡</router-link> | |
5 | - <router-link to="/examinationPaperRecycle">已归档答题卡</router-link> | |
6 | - <router-link to="/examinationPaperEdit">修改答案</router-link> | |
3 | + <back-box> | |
4 | + <template slot="title"> | |
5 | + <i class="fa fa-mail-reply-all"></i> | |
6 | + <span>备题组卷</span> | |
7 | + </template> | |
8 | + <template slot="btns"> | |
9 | + | |
10 | + </template> | |
11 | + </back-box> | |
12 | + <div class="content"> | |
13 | + <router-link to="/examinationPaperAdd">添加答题卡</router-link> | |
14 | + <router-link to="/examinationPaperRecycle">已归档答题卡</router-link> | |
15 | + <router-link to="/examinationPaperEdit">修改答案</router-link> | |
16 | + </div> | |
7 | 17 | </div> |
8 | 18 | </template> |
9 | 19 | |
10 | 20 | <script> |
11 | 21 | export default { |
12 | - name:"examinationPaper" | |
13 | -} | |
22 | + name: "examinationPaper", | |
23 | +}; | |
14 | 24 | </script> |
15 | 25 | |
16 | -<style> | |
17 | - | |
26 | +<style scoped lang="scss"> | |
27 | +.container { | |
28 | +} | |
18 | 29 | </style> |
19 | 30 | \ No newline at end of file | ... | ... |
src/views/index/mainIndex.vue
1 | 1 | <template> |
2 | - <div>首页</div> | |
2 | + <div class="container"> | |
3 | + <ul class="nav-list" v-if="type == '学校管理员'"> | |
4 | + <li class="nav-item item1" @click="links('setUpAccount')"> | |
5 | + <img class="icon" src="../../assets/nav/setUpAccount.png" alt="" /> | |
6 | + <div class="text"> | |
7 | + <p class="p1">账号管理</p> | |
8 | + <p class="p2">管理32个任课教师,14个班主任,3个备课组长账号信息。</p> | |
9 | + </div> | |
10 | + </li> | |
11 | + <li class="nav-item item1" @click="links('setUpSchool')"> | |
12 | + <img class="icon" src="../../assets/nav/setUpSchool.png" alt="" /> | |
13 | + <div class="text"> | |
14 | + <p class="p1">学校管理</p> | |
15 | + <p class="p2">管理6个年级,3个班级,397名学生信息。</p> | |
16 | + </div> | |
17 | + </li> | |
18 | + <li class="nav-item item2" @click="links('device')"> | |
19 | + <img class="icon" src="../../assets/nav/device.png" alt="" /> | |
20 | + <div class="text"> | |
21 | + <p class="p1">设备状态</p> | |
22 | + <p class="p2">管理14个基站,396套答题器设备。</p> | |
23 | + </div> | |
24 | + </li> | |
25 | + <li class="item3"> | |
26 | + <div class="nav-item item1 item-child1" @click="links('analysis')"> | |
27 | + <img class="icon" src="../../assets/nav/analysis.png" alt="" /> | |
28 | + <div class="text"> | |
29 | + <p class="p1">使用分析</p> | |
30 | + <p class="p2">按班级、科目等维度分析设备使用频率。</p> | |
31 | + </div> | |
32 | + </div> | |
33 | + <div class="nav-item item1 item-child2" @click="links('card')"> | |
34 | + <img class="icon" src="../../assets/nav/card.png" alt="" /> | |
35 | + <p class="p1">发卡补卡</p> | |
36 | + <p class="p2">为学生办理发卡、补卡业务。</p> | |
37 | + </div> | |
38 | + <div class="nav-item item1 item-child2" @click="links('down')"> | |
39 | + <img class="icon" src="../../assets/nav/down.png" alt="" /> | |
40 | + <p class="p1">软件下载</p> | |
41 | + <p class="p2">设置参数,下载授课端软件。</p> | |
42 | + </div> | |
43 | + </li> | |
44 | + </ul> | |
45 | + <ul class="nav-list" v-if="type == '集团管理员'"> | |
46 | + <li v-for="item in navList" :key="item.path" class="nav-item item4" @click="links(item.path)"> | |
47 | + <img class="icon" :src="getImgs(item.path)" alt="" /> | |
48 | + <div class="text" v-if="item.path == 'setUpConglomerate'"> | |
49 | + <p class="p1">学校管理</p> | |
50 | + <p class="p2">管理3个区域,14个学校。</p> | |
51 | + </div> | |
52 | + <div class="text" v-else-if="item.path == 'setUpAccount'"> | |
53 | + <p class="p1">账号管理</p> | |
54 | + <p class="p2">共35个各层级管理员账号。</p> | |
55 | + </div> | |
56 | + <div class="text" v-else-if="item.path == 'device'"> | |
57 | + <p class="p1">设备状态</p> | |
58 | + <p class="p2">管理14个基站,396套答题器设备。</p> | |
59 | + </div> | |
60 | + <div class="text" v-else> | |
61 | + <p class="p1">使用分析</p> | |
62 | + <p class="p2">按软件功能、题型统计使用频率。</p> | |
63 | + </div> | |
64 | + </li> | |
65 | + </ul> | |
66 | + <ul class="nav-list" v-if="type == '班主任' || type == '任课老师' "> | |
67 | + <li v-for="item in navList" :key="item.path" class="nav-item item4" @click="links(item.path)"> | |
68 | + <img class="icon" :src="getImgs(item.path)" alt="" /> | |
69 | + <div class="text" v-if="item.path == 'examinationPaper'"> | |
70 | + <p class="p1">备题组卷</p> | |
71 | + <p class="p2">管理32套答题卡。</p> | |
72 | + </div> | |
73 | + <div class="text" v-else-if="item.path == 'portrait'"> | |
74 | + <p class="p1">学生画像</p> | |
75 | + <p class="p2">共分析532名学生成绩。</p> | |
76 | + </div> | |
77 | + <div class="text" v-else-if="item.path == 'ask'"> | |
78 | + <p class="p1">随堂问报表</p> | |
79 | + <p class="p2">对41套随堂问答题记录分析。</p> | |
80 | + </div> | |
81 | + <div class="text" v-else> | |
82 | + <p class="p1">即时测报表</p> | |
83 | + <p class="p2">对28套即时测答题记录分析。</p> | |
84 | + </div> | |
85 | + </li> | |
86 | + </ul> | |
87 | + </div> | |
3 | 88 | </template> |
4 | 89 | |
5 | 90 | <script> |
6 | 91 | export default { |
7 | 92 | name: "mainIndex", |
8 | - mounted() { | |
9 | - this.selfAdaption(); | |
93 | + data() { | |
94 | + return { | |
95 | + // type: "学校管理员", | |
96 | + // type: "集团管理员", | |
97 | + // type: "班主任", | |
98 | + type: "任课老师", | |
99 | + navList: [ | |
100 | + // { | |
101 | + // name: "学校管理", | |
102 | + // path: "setUpConglomerate", | |
103 | + // }, | |
104 | + // { | |
105 | + // name: "账号管理", | |
106 | + // path: "setUpAccount", | |
107 | + // }, | |
108 | + // { | |
109 | + // name: "设备状态", | |
110 | + // path: "device", | |
111 | + // }, | |
112 | + // { | |
113 | + // name: "使用分析", | |
114 | + // path: "analysis", | |
115 | + // }, | |
116 | + { | |
117 | + name: "备题组卷", | |
118 | + path: "examinationPaper", | |
119 | + }, | |
120 | + { | |
121 | + name: "学生画像", | |
122 | + path: "portrait", | |
123 | + }, | |
124 | + { | |
125 | + name: "随堂问报表", | |
126 | + path: "ask", | |
127 | + }, | |
128 | + { | |
129 | + name: "即时测报表", | |
130 | + path: "test", | |
131 | + }, | |
132 | + ], | |
133 | + }; | |
10 | 134 | }, |
135 | + mounted() {}, | |
11 | 136 | methods: { |
12 | - // echart自适应 | |
13 | - selfAdaption() { | |
14 | - let that = this; | |
15 | - setTimeout(() => { | |
16 | - window.onresize = function () { | |
17 | - if (that.$refs.echarts) { | |
18 | - that.$refs.echarts.chart.resize(); | |
19 | - } | |
20 | - }; | |
21 | - }, 10); | |
137 | + getImgs(path) { | |
138 | + return require(`@/assets/nav/${path}.png`) | |
139 | + }, | |
140 | + links(path) { | |
141 | + this.$router.push({ | |
142 | + path: `/${path}`, | |
143 | + }); | |
22 | 144 | }, |
23 | 145 | }, |
24 | 146 | }; |
25 | 147 | </script> |
26 | 148 | |
27 | 149 | <style lang="scss"> |
28 | -$top: top; | |
29 | -$bottom: bottom; | |
30 | -$left: left; | |
31 | -$right: right; | |
32 | -$leftright: ($left, $right); | |
33 | -$pinkk: #eec2d3; | |
34 | -$bluee: #409eff; | |
35 | -$yelloww: #f4d884; | |
36 | -$grennn: #89dda0; | |
37 | -$purplee: #78a2ea; | |
38 | -$lightBluee: #b8d6ff; | |
39 | - | |
40 | -$list: bluee pinkk yelloww grennn purplee lightBluee; | |
41 | -$list1: $bluee $pinkk $yelloww $grennn $purplee $lightBluee; | |
42 | -%shadow { | |
43 | - background: #fff; | |
44 | - -webkit-box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.2); | |
45 | - box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.2); | |
46 | - border-color: rgba(0, 0, 0, 0.2); | |
47 | - .title { | |
48 | - font-size: 14px; | |
49 | - padding: 10px; | |
50 | - i { | |
51 | - margin-#{$right}: 5px; | |
52 | - } | |
53 | - } | |
54 | -} | |
55 | - | |
56 | -@mixin flex($direction: row, $content: space-between) { | |
150 | +.container { | |
57 | 151 | display: flex; |
58 | - flex-direction: $direction; | |
59 | - justify-content: $content; | |
60 | -} | |
61 | -.card { | |
62 | - color: #666; | |
63 | - @extend %shadow; | |
64 | - | |
65 | - ul { | |
66 | - @include flex; | |
67 | - li { | |
68 | - flex: 1; | |
69 | - a { | |
70 | - color: #666666; | |
71 | - align-items: center; | |
72 | - padding-#{$top}: 20px; | |
73 | - padding-#{$bottom}: 20px; | |
74 | - @include flex(column); | |
75 | - span { | |
76 | - height: 44px; | |
77 | - } | |
78 | - .num { | |
79 | - line-height: 44px; | |
80 | - font-size: 42px; | |
81 | - color: $bluee; | |
82 | - margin: 0px; | |
83 | - } | |
152 | + justify-content: center; | |
153 | + align-items: center; | |
154 | + padding: 100px 90px 0 50px; | |
155 | + .nav-list { | |
156 | + width: 100%; | |
157 | + display: flex; | |
158 | + flex-wrap: wrap; | |
159 | + .nav-item { | |
160 | + background: #f8f8f8; | |
161 | + border-radius: 20px; | |
162 | + box-shadow: 3px 3px 3px #aaaaaa59; | |
163 | + cursor: pointer; | |
164 | + &:hover { | |
165 | + background-color: #ededed; | |
84 | 166 | } |
85 | - .kjfs-bluee { | |
86 | - color: $bluee; | |
167 | + .icon { | |
168 | + width: 110px; | |
169 | + height: 110px; | |
170 | + border-radius: 50%; | |
87 | 171 | } |
88 | - .kjfs-pinkk { | |
89 | - color: $pinkk; | |
172 | + .p1 { | |
173 | + font-size: 18px; | |
174 | + color: #333; | |
175 | + line-height: 18px; | |
176 | + margin-bottom: 12px; | |
177 | + font-weight: 500; | |
90 | 178 | } |
91 | - .kjfs-yelloww { | |
92 | - color: $yelloww; | |
179 | + .p2 { | |
180 | + font-size: 14px; | |
181 | + color: #999; | |
93 | 182 | } |
94 | - .kjfs-grennn { | |
95 | - color: $grennn; | |
183 | + } | |
184 | + .item1 { | |
185 | + width: calc(50% - 10px); | |
186 | + flex-shrink: 0; | |
187 | + display: flex; | |
188 | + justify-content: center; | |
189 | + margin-right: 20px; | |
190 | + margin-bottom: 20px; | |
191 | + box-sizing: border-box; | |
192 | + padding: 40px 80px; | |
193 | + &:nth-child(2) { | |
194 | + margin-right: 0; | |
96 | 195 | } |
97 | - .kjfs-purplee { | |
98 | - color: $purplee; | |
196 | + .icon { | |
197 | + margin-right: 20px; | |
99 | 198 | } |
100 | - .kjfs-lightBluee { | |
101 | - color: $lightBluee; | |
199 | + .text { | |
200 | + display: flex; | |
201 | + flex-direction: column; | |
202 | + justify-content: center; | |
203 | + padding-top: 10px; | |
102 | 204 | } |
103 | - &:hover { | |
104 | - .kjfs-bluee { | |
105 | - color: #ffffff; | |
106 | - background: $bluee; | |
107 | - } | |
108 | - .kjfs-pinkk { | |
109 | - color: #ffffff; | |
110 | - background: $pinkk; | |
205 | + .p2 { | |
206 | + line-height: 24px; | |
207 | + } | |
208 | + &.item-child1 { | |
209 | + width: 100%; | |
210 | + height: calc(50% - 8px); | |
211 | + margin-bottom: 16px; | |
212 | + padding: 0 20px; | |
213 | + align-items: center; | |
214 | + .icon { | |
215 | + width: 80px; | |
216 | + height: 80px; | |
111 | 217 | } |
112 | - .kjfs-yelloww { | |
113 | - color: #ffffff; | |
114 | - background: $yelloww; | |
218 | + } | |
219 | + &.item-child2 { | |
220 | + height: calc(50% - 8px); | |
221 | + margin-right: 20px; | |
222 | + flex-wrap: wrap; | |
223 | + padding: 12px 30px; | |
224 | + .icon { | |
225 | + width: 60px; | |
226 | + height: 60px; | |
115 | 227 | } |
116 | - .kjfs-grennn { | |
117 | - color: #ffffff; | |
118 | - background: $grennn; | |
228 | + .p1 { | |
229 | + flex: 1; | |
230 | + line-height: 60px; | |
231 | + margin-bottom: 0; | |
119 | 232 | } |
120 | - .kjfs-purplee { | |
121 | - color: #ffffff; | |
122 | - background: $purplee; | |
233 | + .p2 { | |
234 | + width: 100%; | |
123 | 235 | } |
124 | - .kjfs-lightBluee { | |
125 | - color: #ffffff; | |
126 | - background: $lightBluee; | |
236 | + &:last-of-type { | |
237 | + margin-right: 0; | |
127 | 238 | } |
128 | 239 | } |
129 | 240 | } |
241 | + .item2 { | |
242 | + width: calc(50% - 10px); | |
243 | + height: 240px; | |
244 | + flex-shrink: 0; | |
245 | + display: flex; | |
246 | + flex-direction: column; | |
247 | + justify-content: center; | |
248 | + align-items: center; | |
249 | + margin-right: 20px; | |
250 | + box-sizing: border-box; | |
251 | + padding: 30px 0; | |
252 | + text-align: center; | |
253 | + &:last-of-type { | |
254 | + margin-right: 0; | |
255 | + } | |
256 | + .icon { | |
257 | + margin-bottom: 20px; | |
258 | + } | |
259 | + .p2 { | |
260 | + line-height: 16px; | |
261 | + } | |
262 | + } | |
263 | + .item3 { | |
264 | + width: calc(50% - 10px); | |
265 | + height: 240px; | |
266 | + display: flex; | |
267 | + flex-wrap: wrap; | |
268 | + } | |
269 | + .item4 { | |
270 | + width: calc(50% - 10px); | |
271 | + flex-shrink: 0; | |
272 | + display: flex; | |
273 | + justify-content: flex-start; | |
274 | + margin-right: 20px; | |
275 | + margin-bottom: 20px; | |
276 | + box-sizing: border-box; | |
277 | + padding: 40px 80px; | |
278 | + &:nth-child(2n) { | |
279 | + margin-right: 0; | |
280 | + } | |
281 | + .icon { | |
282 | + margin-right: 20px; | |
283 | + } | |
284 | + .text { | |
285 | + display: flex; | |
286 | + flex-direction: column; | |
287 | + justify-content: center; | |
288 | + padding-top: 10px; | |
289 | + } | |
290 | + .p2 { | |
291 | + line-height: 24px; | |
292 | + } | |
293 | + } | |
130 | 294 | } |
131 | 295 | } |
132 | -#lineEcharts { | |
133 | - margin-#{$top}: 30px; | |
134 | - padding-#{$top}: 30px; | |
135 | - @extend %shadow; | |
136 | -} | |
137 | 296 | </style> | ... | ... |
src/views/layout/aside/aside.vue
... | ... | @@ -2,9 +2,16 @@ |
2 | 2 | <div> |
3 | 3 | <el-aside id="asideNav"> |
4 | 4 | <div class="logo-name"> |
5 | - <img class="logo" src="../../../assets/images/logo.png" alt=""> | |
6 | - <p >中天易教</p> | |
7 | - <img v-if="$store.getters.logoShow" class="logo" src="../../../assets/images/logo.png" alt=""> | |
5 | + <img | |
6 | + v-if="$store.getters.logoShow" | |
7 | + class="logo" | |
8 | + src="../../../assets/images/logo.png" | |
9 | + alt="" | |
10 | + /> | |
11 | + <template v-else> | |
12 | + <img class="logo" src="../../../assets/images/logo.png" alt="" /> | |
13 | + <p>中天易教</p> | |
14 | + </template> | |
8 | 15 | </div> |
9 | 16 | <el-menu |
10 | 17 | :default-active="$route.path" |
... | ... | @@ -27,7 +34,7 @@ |
27 | 34 | > |
28 | 35 | <template slot="title"> |
29 | 36 | <i :class="item.iconCls ? item.iconCls : [fa, fa - server]"></i> |
30 | - <span slot="title">{{item.name}}</span> | |
37 | + <span slot="title">{{ item.name }}</span> | |
31 | 38 | </template> |
32 | 39 | |
33 | 40 | <menu-tree :menuData="item.children"></menu-tree> |
... | ... | @@ -120,13 +127,13 @@ $right: right; |
120 | 127 | align-items: center; |
121 | 128 | width: 100%; |
122 | 129 | height: 50px; |
123 | - padding:0 16px; | |
130 | + padding: 0 16px; | |
124 | 131 | box-sizing: border-box; |
125 | 132 | @extend %w100; |
126 | - .logo{ | |
127 | - width:24px; | |
128 | - height:24px; | |
129 | - margin-right:10px; | |
133 | + .logo { | |
134 | + width: 24px; | |
135 | + height: 24px; | |
136 | + margin-right: 10px; | |
130 | 137 | } |
131 | 138 | p { |
132 | 139 | line-height: 50px; | ... | ... |
src/views/layout/header/header.vue
... | ... | @@ -2,8 +2,8 @@ |
2 | 2 | <div> |
3 | 3 | <el-header id="header"> |
4 | 4 | <span class="hideAside" @click="collapse" |
5 | - ><i class="fa fa-indent fa-lg"></i | |
6 | - ></span> | |
5 | + ><i class="el-icon-s-fold" v-show="!isCollapse"></i> | |
6 | + <i class="el-icon-s-unfold" v-show="isCollapse"></i></span> | |
7 | 7 | <ul class="personal"> |
8 | 8 | <!-- <li> |
9 | 9 | <langSelect></langSelect> |
... | ... | @@ -81,10 +81,12 @@ export default { |
81 | 81 | dialogPassVisible: false, |
82 | 82 | title: "", |
83 | 83 | userId: "", |
84 | + isCollapse:false | |
84 | 85 | }; |
85 | 86 | }, |
86 | 87 | methods: { |
87 | 88 | collapse() { |
89 | + this.isCollapse = !this.isCollapse | |
88 | 90 | this.$store.dispatch("collapse"); |
89 | 91 | }, |
90 | 92 | successCallback() { |
... | ... | @@ -122,20 +124,7 @@ export default { |
122 | 124 | handleCommand(command) { |
123 | 125 | //刷新权限跳转首页 |
124 | 126 | this.$message("click on item " + command); |
125 | - | |
126 | - this.$store.dispatch("setInfo", { | |
127 | - permissions: [ | |
128 | - { | |
129 | - role: "superAdmin", | |
130 | - roleName: "超级管理员", | |
131 | - }, | |
132 | - ], | |
133 | - // authorityRouter:[], | |
134 | - name: "", | |
135 | - }); | |
136 | - this.$router.push({ | |
137 | - path: "/index", | |
138 | - }); | |
127 | + this.$store.dispatch("permissions", this); | |
139 | 128 | }, |
140 | 129 | logOut() { |
141 | 130 | this.$router.push({ |
... | ... | @@ -187,8 +176,13 @@ ul.el-menu { |
187 | 176 | display: flex; |
188 | 177 | justify-content: space-between; |
189 | 178 | color: #fff; |
179 | + padding:0 20px 0 10px; | |
190 | 180 | .hideAside { |
191 | 181 | @extend %cursor; |
182 | + i{ | |
183 | + font-size:24px; | |
184 | + line-height: 50px; | |
185 | + } | |
192 | 186 | } |
193 | 187 | .personal { |
194 | 188 | display: flex; |
... | ... | @@ -198,6 +192,7 @@ ul.el-menu { |
198 | 192 | font-size: 12px; |
199 | 193 | @extend %cursor; |
200 | 194 | position: relative; |
195 | + line-height: 50px; | |
201 | 196 | } |
202 | 197 | } |
203 | 198 | .userInfo { |
... | ... | @@ -224,9 +219,11 @@ ul.el-menu { |
224 | 219 | .el-icon-rank { |
225 | 220 | font-size: 20px; |
226 | 221 | transform: rotate(45deg); |
222 | + line-height: 50px; | |
227 | 223 | } |
228 | 224 | .el-icon-switch-button { |
229 | 225 | font-size: 18px; |
226 | + line-height: 50px; | |
230 | 227 | } |
231 | 228 | .fa-lg { |
232 | 229 | color: #fff; | ... | ... |
src/views/layout/layout.vue
... | ... | @@ -48,26 +48,7 @@ export default { |
48 | 48 | transition: all 0.3s; |
49 | 49 | } |
50 | 50 | </style> |
51 | -<style lang="scss"> | |
52 | -* { | |
53 | - margin: 0px; | |
54 | - padding: 0px; | |
55 | -} | |
56 | - | |
57 | -body { | |
58 | - background-color: #f2f2f2; | |
59 | - font-size: 14px; | |
60 | - color: #333333; | |
61 | -} | |
62 | - | |
63 | -li { | |
64 | - list-style: none; | |
65 | -} | |
66 | - | |
67 | -a { | |
68 | - text-decoration: none; | |
69 | -} | |
70 | - | |
51 | +<style lang="scss" scoped> | |
71 | 52 | $top: top; |
72 | 53 | $bottom: bottom; |
73 | 54 | $left: left; |
... | ... | @@ -84,12 +65,7 @@ $leftright: ($left, $right); |
84 | 65 | %cursor { |
85 | 66 | cursor: pointer; |
86 | 67 | } |
87 | -html, | |
88 | -body { | |
89 | - overflow: hidden; | |
90 | -} | |
91 | -html, | |
92 | -body, | |
68 | + | |
93 | 69 | #loyout, |
94 | 70 | .el-container, |
95 | 71 | #asideNav, |
... | ... | @@ -104,7 +80,8 @@ ul.el-menu { |
104 | 80 | } |
105 | 81 | |
106 | 82 | #elmain { |
107 | - background-color: #f0f2f5; | |
83 | + background-color: #fff; | |
84 | + padding:0; | |
108 | 85 | } |
109 | 86 | |
110 | 87 | .avatar-uploader .el-upload { | ... | ... |
src/views/setUp/index.vue
0 → 100644
src/views/systemManage/roleManage.vue deleted
1 | -<template> | |
2 | - <div class="cardshadow roleListTable"> | |
3 | - <div> | |
4 | - <el-button type="primary" icon="el-icon-circle-plus-outline" size="mini" @click="addRole" plain v-role-btn="'btn_100002'">新增</el-button> | |
5 | - </div> | |
6 | - <el-table | |
7 | - :data="tableData" | |
8 | - style="width: 100%"> | |
9 | - <el-table-column | |
10 | - type="index"> | |
11 | - </el-table-column> | |
12 | - <el-table-column | |
13 | - property="name" | |
14 | - label="角色名"> | |
15 | - </el-table-column> | |
16 | - <el-table-column | |
17 | - property="describe" | |
18 | - label="角色描述"> | |
19 | - </el-table-column> | |
20 | - <el-table-column | |
21 | - prop="status" | |
22 | - label="状态" | |
23 | - filter-placement="bottom-end"> | |
24 | - <template slot-scope="scope"> | |
25 | - <el-tag | |
26 | - :type="scope.row.status === '启用' ? 'primary' : 'danger'" | |
27 | - disable-transitions>{{scope.row.status}} | |
28 | - </el-tag> | |
29 | - </template> | |
30 | - </el-table-column> | |
31 | - <el-table-column label="操作"> | |
32 | - <template slot-scope="scope"> | |
33 | - <el-button | |
34 | - size="mini" | |
35 | - :disabled="scope.row.name=='超级管理员'" | |
36 | - @click="handleEdit(scope.$index, scope.row)">编辑 | |
37 | - </el-button> | |
38 | - <el-button | |
39 | - size="mini" | |
40 | - :disabled="scope.row.name=='超级管理员'" | |
41 | - @click="roleEdit(scope.$index, scope.row)">权限分配 | |
42 | - </el-button> | |
43 | - <el-button | |
44 | - size="mini" | |
45 | - type="danger" | |
46 | - :disabled="scope.row.name=='超级管理员'" | |
47 | - @click="handleDelete(scope.$index, scope.row)">删除 | |
48 | - </el-button> | |
49 | - </template> | |
50 | - </el-table-column> | |
51 | - </el-table> | |
52 | - <el-dialog title="角色信息" width="700px" class="dialog1" :visible.sync="dialogFormVisible"> | |
53 | - <el-form :model="form"> | |
54 | - <el-form-item label="角色名称" :label-width="formLabelWidth"> | |
55 | - <el-input v-model="form.name" | |
56 | - maxlength="8" | |
57 | - show-word-limit | |
58 | - autocomplete="off"></el-input> | |
59 | - </el-form-item> | |
60 | - <el-form-item label="角色描述" :label-width="formLabelWidth"> | |
61 | - <el-input v-model="form.describe" | |
62 | - maxlength="15" | |
63 | - show-word-limit | |
64 | - autocomplete="off"></el-input> | |
65 | - </el-form-item> | |
66 | - <el-form-item label="是否开启" :label-width="formLabelWidth"> | |
67 | - <el-switch v-model="form.status"></el-switch> | |
68 | - </el-form-item> | |
69 | - </el-form> | |
70 | - <div slot="footer" class="dialog-footer"> | |
71 | - <el-button @click="dialogFormVisible=false">取 消</el-button> | |
72 | - <el-button type="primary" @click="addRoleSubmit">确 定</el-button> | |
73 | - </div> | |
74 | - </el-dialog> | |
75 | - <el-dialog title="权限分配" class="dialog2" @opened="setRoleData" :visible.sync="dialogFormVisible2"> | |
76 | - <el-input | |
77 | - placeholder="输入关键字进行过滤" | |
78 | - v-model="filterText" | |
79 | - style="margin-bottom: 20px" | |
80 | - > | |
81 | - </el-input> | |
82 | - <el-tree | |
83 | - :data="roleTree" | |
84 | - node-key="r_id" | |
85 | - show-checkbox | |
86 | - check-on-click-node | |
87 | - default-expand-all | |
88 | - check-strictly | |
89 | - :expand-on-click-node="false" | |
90 | - ref="permission" | |
91 | - :filter-node-method="filterNode" | |
92 | - :props="defaultProps"> | |
93 | - </el-tree> | |
94 | - <div slot="footer" class="dialog-footer"> | |
95 | - <el-button @click="dialogFormVisible2 = false">取 消</el-button> | |
96 | - <el-button type="primary" @click="rolePermissionSubmit">确 定</el-button> | |
97 | - </div> | |
98 | - </el-dialog> | |
99 | - </div> | |
100 | -</template> | |
101 | - | |
102 | -<script> | |
103 | -export default { | |
104 | - name: "roleManage", | |
105 | - data () { | |
106 | - return { | |
107 | - tableData: [], | |
108 | - dialogFormVisible: false, | |
109 | - dialogFormVisible2: false, | |
110 | - form: { | |
111 | - name: "", | |
112 | - describe: "", | |
113 | - status: true, | |
114 | - permission: [] | |
115 | - }, | |
116 | - formLabelWidth: "120px", | |
117 | - defaultProps: { | |
118 | - children: "children", | |
119 | - label: "r_name", | |
120 | - id: "r_id" | |
121 | - }, | |
122 | - selectRoleId: "", | |
123 | - selectData: [], | |
124 | - filterText: "" | |
125 | - } | |
126 | - }, | |
127 | - methods: { | |
128 | - handleEdit (index, row) { | |
129 | - for (let item in row) { | |
130 | - this.form[item] = row[item] | |
131 | - } | |
132 | - this.form.status = row.status === "启用" | |
133 | - this.dialogFormVisible = true | |
134 | - }, | |
135 | - addRole () { | |
136 | - this.form = { | |
137 | - name: "", | |
138 | - describe: "", | |
139 | - status: true | |
140 | - } | |
141 | - this.dialogFormVisible = true | |
142 | - }, | |
143 | - addRoleSubmit () { | |
144 | - let that = this | |
145 | - if (!this.form.name) { | |
146 | - that.$message({ | |
147 | - showClose: true, | |
148 | - message: "角色名称不能为空", | |
149 | - type: "error" | |
150 | - }) | |
151 | - return false | |
152 | - } | |
153 | - this.$request.fetchAddRole(this.form).then((res) => { | |
154 | - that.$message({ | |
155 | - showClose: true, | |
156 | - message: res.data.message, | |
157 | - type: "success" | |
158 | - }) | |
159 | - this.dialogFormVisible = false | |
160 | - this.getList() | |
161 | - }).catch((err) => { | |
162 | - console.log(err) | |
163 | - }) | |
164 | - }, | |
165 | - rolePermissionSubmit () { | |
166 | - let that = this | |
167 | - let rolePermissionData = { | |
168 | - selectPermission: that.$refs.permission.getCheckedKeys(), | |
169 | - rid: that.selectRoleId | |
170 | - } | |
171 | - this.$request.fetchRolePermissions(rolePermissionData).then(res => { | |
172 | - that.$restBack(res.data, () => { | |
173 | - that.dialogFormVisible2 = false | |
174 | - that.getList() | |
175 | - }) | |
176 | - }).catch((err) => { | |
177 | - console.log(err) | |
178 | - }) | |
179 | - }, | |
180 | - roleEdit (index, row) { | |
181 | - console.log(index, row) | |
182 | - this.selectRoleId = row.id | |
183 | - this.selectData = row.permission ? row.permission.split(",") : [] | |
184 | - this.dialogFormVisible2 = true | |
185 | - }, | |
186 | - setRoleData () { | |
187 | - this.$request.fetchSearchRolePermissions({rid: this.selectRoleId}).then(res => { | |
188 | - this.$refs.permission.setCheckedKeys([]) | |
189 | - let permissionData = res.data.data.permissionPage + "," + res.data.data.permissionButton | |
190 | - this.$refs.permission.setCheckedKeys(permissionData.split(",")) | |
191 | - }) | |
192 | - }, | |
193 | - handleDelete (index, row) { | |
194 | - let that = this | |
195 | - this.$request.fetchDelRole({ | |
196 | - id: row.id | |
197 | - }) | |
198 | - .then(response => { | |
199 | - console.log(response) | |
200 | - that.$message({ | |
201 | - showClose: true, | |
202 | - message: response.data.message, | |
203 | - type: "success" | |
204 | - }) | |
205 | - that.getList() | |
206 | - }) | |
207 | - .catch(err => { | |
208 | - console.log(err) | |
209 | - }) | |
210 | - }, | |
211 | - getList () { | |
212 | - let that = this | |
213 | - this.$request.fetchGetRoleList() | |
214 | - .then(function (response) { | |
215 | - console.log(response) | |
216 | - for (let i = 0; i < response.data.rows.length; i++) { | |
217 | - if (response.data.rows[i].status) { | |
218 | - response.data.rows[i].status = "启用" | |
219 | - } else { | |
220 | - response.data.rows[i].status = "禁用" | |
221 | - } | |
222 | - } | |
223 | - that.tableData = response.data.rows | |
224 | - }) | |
225 | - .catch(function (error) { | |
226 | - console.log(error) | |
227 | - }) | |
228 | - }, | |
229 | - filterNode (value, data) { | |
230 | - if (!value) return true | |
231 | - return data.r_name.indexOf(value) !== -1 | |
232 | - } | |
233 | - }, | |
234 | - watch: { | |
235 | - filterText (val) { | |
236 | - this.$refs.permission.filter(val) | |
237 | - } | |
238 | - }, | |
239 | - computed: { | |
240 | - roleTree: function () { | |
241 | - let roleData = this.$store.getters.roleData | |
242 | - for (let i = 0; i < roleData.length; i++) { | |
243 | - if (roleData[i].redirect === "/404") { | |
244 | - roleData.splice(i, 1) | |
245 | - } | |
246 | - } | |
247 | - return roleData | |
248 | - } | |
249 | - }, | |
250 | - mounted () { | |
251 | - this.getList() | |
252 | - } | |
253 | -} | |
254 | -</script> | |
255 | - | |
256 | -<style scoped> | |
257 | - .nameinput { | |
258 | - width: 150px; | |
259 | - } | |
260 | - | |
261 | - .phoneinput { | |
262 | - width: 120px; | |
263 | - } | |
264 | - | |
265 | - .datepicker { | |
266 | - width: 260px; | |
267 | - } | |
268 | - .dialog1 .el-dialog { | |
269 | - width: 35%; | |
270 | - } | |
271 | - | |
272 | - .dialog1 .el-dialog .el-form { | |
273 | - width: 500px; | |
274 | - margin: 0 auto; | |
275 | - } | |
276 | - | |
277 | - .el-form-item__content { | |
278 | - margin-left: 120px; | |
279 | - width: 300px; | |
280 | - } | |
281 | - | |
282 | -</style> | |
283 | - |