样式调整
Showing
9 changed files
with
174 additions
and
150 deletions
... | @@ -2,6 +2,7 @@ | ... | @@ -2,6 +2,7 @@ |
2 | <div> | 2 | <div> |
3 | <i class="el-icon-s-management icon" :title="title" @click="openDialog" /> | 3 | <i class="el-icon-s-management icon" :title="title" @click="openDialog" /> |
4 | <el-dialog | 4 | <el-dialog |
5 | class="configuration" | ||
5 | :key="key" | 6 | :key="key" |
6 | :title="title" | 7 | :title="title" |
7 | :inner-dialog="true" | 8 | :inner-dialog="true" |
... | @@ -9,8 +10,7 @@ | ... | @@ -9,8 +10,7 @@ |
9 | width="600px" | 10 | width="600px" |
10 | :close-on-click-modal="false" | 11 | :close-on-click-modal="false" |
11 | append-to-body | 12 | append-to-body |
12 | @cancel="cancel" | 13 | @cancel="cancel"> |
13 | > | ||
14 | <vue-json-editor | 14 | <vue-json-editor |
15 | id="minejson" | 15 | id="minejson" |
16 | v-model="resultInfo" | 16 | v-model="resultInfo" |
... | @@ -18,15 +18,13 @@ | ... | @@ -18,15 +18,13 @@ |
18 | lang="zh" | 18 | lang="zh" |
19 | @json-change="onJsonChange" | 19 | @json-change="onJsonChange" |
20 | @json-save="onJsonSave" | 20 | @json-save="onJsonSave" |
21 | @has-error="onError" | 21 | @has-error="onError" /> |
22 | /> | ||
23 | <el-tooltip | 22 | <el-tooltip |
24 | content="全屏缩放" | 23 | content="全屏缩放" |
25 | effect="dark" | 24 | effect="dark" |
26 | placement="bottom" | 25 | placement="bottom" |
27 | fullscreen | 26 | fullscreen |
28 | class="fullScreen" | 27 | class="fullScreen"> |
29 | > | ||
30 | <i class="el-icon-full-screen" @click="enLarge" /> | 28 | <i class="el-icon-full-screen" @click="enLarge" /> |
31 | </el-tooltip> | 29 | </el-tooltip> |
32 | <template slot="footer"> | 30 | <template slot="footer"> |
... | @@ -34,142 +32,156 @@ | ... | @@ -34,142 +32,156 @@ |
34 | <el-button | 32 | <el-button |
35 | type="primary" | 33 | type="primary" |
36 | class="confirmBtn" | 34 | class="confirmBtn" |
37 | @click="onJsonSave" | 35 | @click="onJsonSave">保存</el-button> |
38 | >保存</el-button> | ||
39 | <el-button | 36 | <el-button |
40 | type="primary" | 37 | type="primary" |
41 | class="cancelBtn" | 38 | class="cancelBtn" |
42 | @click="cancel" | 39 | @click="cancel">关闭</el-button> |
43 | >关闭</el-button> | ||
44 | </div> | 40 | </div> |
45 | </template> | 41 | </template> |
46 | </el-dialog> | 42 | </el-dialog> |
47 | </div> | 43 | </div> |
48 | </template> | 44 | </template> |
49 | <script> | 45 | <script> |
50 | import vueJsonEditor from 'vue-json-editor' | 46 | import vueJsonEditor from 'vue-json-editor' |
51 | export default { | 47 | export default { |
52 | components: { | 48 | components: { |
53 | vueJsonEditor | 49 | vueJsonEditor |
54 | }, | ||
55 | props: { | ||
56 | title: { | ||
57 | type: String, | ||
58 | default: '配置参数' | ||
59 | }, | 50 | }, |
60 | resultInfos: { | 51 | props: { |
61 | type: String, | 52 | title: { |
62 | default: '' | 53 | type: String, |
63 | } | 54 | default: '配置参数' |
64 | }, | ||
65 | data() { | ||
66 | return { | ||
67 | activeNames: [], | ||
68 | resultInfo: {}, | ||
69 | tmpResultInfo: {}, | ||
70 | dialogVisible: false, | ||
71 | hasJsonFlag: true, | ||
72 | key: 0, | ||
73 | isEnlarge: false | ||
74 | } | ||
75 | }, | ||
76 | watch: { | ||
77 | resultInfos: { | ||
78 | handler: function(val) { | ||
79 | ++this.key | ||
80 | this.resultInfo = | ||
81 | this.resultInfos === '' ? {} : JSON.parse(this.resultInfos) | ||
82 | this.tmpResultInfo = this.resultInfo | ||
83 | }, | 55 | }, |
84 | deep: true, | 56 | resultInfos: { |
85 | immediate: true | 57 | type: String, |
86 | } | 58 | default: '' |
87 | }, | ||
88 | |||
89 | mounted() { | ||
90 | this.resultInfo = | ||
91 | this.resultInfos === '' ? {} : JSON.parse(this.resultInfos) | ||
92 | }, | ||
93 | |||
94 | methods: { | ||
95 | onJsonChange(value) { | ||
96 | // 只有在格式正确的时候进入此事件 | ||
97 | this.hasJsonFlag = true | ||
98 | }, | ||
99 | onJsonSave() { | ||
100 | const value = this.resultInfo | ||
101 | console.log(this.resultInfo, 'resultInfo') | ||
102 | if (this.hasJsonFlag === false) { | ||
103 | this.$message.error({ message: 'json格式验证失败', showClose: true }) | ||
104 | // alert("json验证失败") | ||
105 | return false | ||
106 | } else { | ||
107 | this.dialogVisible = false | ||
108 | this.$emit('getJsonString', JSON.stringify(value)) | ||
109 | return true | ||
110 | } | 59 | } |
111 | }, | 60 | }, |
112 | onError(value) { | 61 | data () { |
113 | this.hasJsonFlag = false | 62 | return { |
63 | activeNames: [], | ||
64 | resultInfo: {}, | ||
65 | tmpResultInfo: {}, | ||
66 | dialogVisible: false, | ||
67 | hasJsonFlag: true, | ||
68 | key: 0, | ||
69 | isEnlarge: false | ||
70 | } | ||
114 | }, | 71 | }, |
115 | openDialog() { | 72 | watch: { |
116 | this.dialogVisible = true | 73 | resultInfos: { |
74 | handler: function (val) { | ||
75 | ++this.key | ||
76 | this.resultInfo = | ||
77 | this.resultInfos === '' ? {} : JSON.parse(this.resultInfos) | ||
78 | this.tmpResultInfo = this.resultInfo | ||
79 | }, | ||
80 | deep: true, | ||
81 | immediate: true | ||
82 | } | ||
117 | }, | 83 | }, |
118 | cancel() { | 84 | |
119 | console.log(this.tmpResultInfo, 'tmpResultInfo') | 85 | mounted () { |
120 | this.resultInfo = this.tmpResultInfo | 86 | this.resultInfo = |
121 | this.dialogVisible = false | 87 | this.resultInfos === '' ? {} : JSON.parse(this.resultInfos) |
122 | }, | 88 | }, |
123 | // 放大 | 89 | |
124 | enLarge() { | 90 | methods: { |
125 | const fullarea = document.getElementById('minejson') | 91 | onJsonChange (value) { |
126 | if (fullarea.requestFullscreen) { | 92 | // 只有在格式正确的时候进入此事件 |
127 | fullarea.requestFullscreen() | 93 | this.hasJsonFlag = true |
128 | } else if (fullarea.webkitRequestFullScreen) { | 94 | }, |
129 | fullarea.webkitRequestFullScreen() // webkit内核(chrome、safari、Opera等) | 95 | onJsonSave () { |
130 | } else if (fullarea.mozRequestFullScreen) { | 96 | const value = this.resultInfo |
131 | fullarea.mozRequestFullScreen() // moz内核(firefox) | 97 | console.log(this.resultInfo, 'resultInfo') |
132 | } else if (fullarea.msRequestFullscreen) { | 98 | if (this.hasJsonFlag === false) { |
133 | fullarea.msRequestFullscreen() // IE11、edge | 99 | this.$message.error({ message: 'json格式验证失败', showClose: true }) |
100 | // alert("json验证失败") | ||
101 | return false | ||
102 | } else { | ||
103 | this.dialogVisible = false | ||
104 | this.$emit('getJsonString', JSON.stringify(value)) | ||
105 | return true | ||
106 | } | ||
107 | }, | ||
108 | onError (value) { | ||
109 | this.hasJsonFlag = false | ||
110 | }, | ||
111 | openDialog () { | ||
112 | this.dialogVisible = true | ||
113 | }, | ||
114 | cancel () { | ||
115 | console.log(this.tmpResultInfo, 'tmpResultInfo') | ||
116 | this.resultInfo = this.tmpResultInfo | ||
117 | this.dialogVisible = false | ||
118 | }, | ||
119 | // 放大 | ||
120 | enLarge () { | ||
121 | const fullarea = document.getElementById('minejson') | ||
122 | if (fullarea.requestFullscreen) { | ||
123 | fullarea.requestFullscreen() | ||
124 | } else if (fullarea.webkitRequestFullScreen) { | ||
125 | fullarea.webkitRequestFullScreen() // webkit内核(chrome、safari、Opera等) | ||
126 | } else if (fullarea.mozRequestFullScreen) { | ||
127 | fullarea.mozRequestFullScreen() // moz内核(firefox) | ||
128 | } else if (fullarea.msRequestFullscreen) { | ||
129 | fullarea.msRequestFullscreen() // IE11、edge | ||
130 | } | ||
131 | this.isEnlarge = true | ||
134 | } | 132 | } |
135 | this.isEnlarge = true | ||
136 | } | 133 | } |
137 | } | 134 | } |
138 | } | ||
139 | </script> | 135 | </script> |
140 | 136 | ||
141 | <style scoped lang="scss"> | 137 | <style scoped lang="scss"> |
142 | /* jsoneditor右上角默认有一个链接,加css去掉了 */ | 138 | /* jsoneditor右上角默认有一个链接,加css去掉了 */ |
143 | .icon { | 139 | .icon { |
144 | color: #349af3; | 140 | color: #349af3; |
145 | } | 141 | } |
146 | /deep/ .jsoneditor-vue { | 142 | /deep/ .jsoneditor-vue { |
147 | height: 100%; | 143 | height: 100%; |
148 | } | 144 | } |
149 | .fullScreen { | 145 | .fullScreen { |
150 | position: absolute; | 146 | position: absolute; |
151 | right: 5%; | 147 | right: 5%; |
152 | top: 22%; | 148 | top: 20%; |
153 | cursor: pointer; | 149 | cursor: pointer; |
154 | color: #fff; | 150 | color: #fff; |
155 | } | 151 | } |
156 | /deep/ .jsoneditor-modes { | 152 | /deep/ .jsoneditor-modes { |
157 | display: none !important; | 153 | display: none !important; |
158 | } | 154 | } |
159 | .jsoneditor-poweredBy { | 155 | /deep/.jsoneditor-poweredBy { |
160 | display: none !important; | 156 | display: none !important; |
161 | } | 157 | } |
162 | .jsoneditor-menu { | 158 | .jsoneditor-menu { |
163 | background-color: #9c9e9f !important; | 159 | background-color: #9c9e9f !important; |
164 | border-bottom: 1px solid #9c9e9f !important; | 160 | border-bottom: 1px solid #9c9e9f !important; |
165 | } | 161 | } |
166 | .jsoneditor { | 162 | .jsoneditor { |
167 | border: 1px solid #9c9e9f !important; | 163 | border: 1px solid #9c9e9f !important; |
168 | } | 164 | } |
169 | .el-collapse { | 165 | .el-collapse { |
170 | border: 0; | 166 | border: 0; |
171 | } | 167 | } |
172 | .el-collapse-item__header { | 168 | .el-collapse-item__header { |
173 | height: 44px; | 169 | height: 44px; |
174 | } | 170 | } |
171 | .configuration { | ||
172 | color: white; | ||
173 | margin-top: 6vh; | ||
174 | /deep/.el-dialog { | ||
175 | background-color: #031a46 !important; | ||
176 | border: 1px solid #5f82c7; | ||
177 | .el-dialog__header { | ||
178 | .el-dialog__title { | ||
179 | color: white !important; | ||
180 | } | ||
181 | .el-dialog__headerbtn { | ||
182 | top: 20px; | ||
183 | } | ||
184 | } | ||
185 | } | ||
186 | } | ||
175 | </style> | 187 | </style> | ... | ... |
... | @@ -519,3 +519,31 @@ tr:hover { | ... | @@ -519,3 +519,31 @@ tr:hover { |
519 | color: white; | 519 | color: white; |
520 | } | 520 | } |
521 | } | 521 | } |
522 | // 上级菜单 | ||
523 | .el-cascader__dropdown { | ||
524 | background-color: #031a46; | ||
525 | border: 1px solid #5f82c7; | ||
526 | |||
527 | } | ||
528 | .el-cascader-menu{ | ||
529 | color: white; | ||
530 | } | ||
531 | .el-radio | ||
532 | { | ||
533 | .el-cascader-menu:hover{ | ||
534 | color: white; | ||
535 | } | ||
536 | } | ||
537 | .el-cascader-node:not(.is-disabled):hover, .el-cascader-node:not(.is-disabled):focus { | ||
538 | background: #F5F7FA; | ||
539 | background-image: initial; | ||
540 | background-position-x: initial; | ||
541 | background-position-y: initial; | ||
542 | background-size: initial; | ||
543 | background-repeat-x: initial; | ||
544 | background-repeat-y: initial; | ||
545 | background-attachment: initial; | ||
546 | background-origin: initial; | ||
547 | background-clip: initial; | ||
548 | background-color: rgb(80, 142, 235); | ||
549 | } | ... | ... |
... | @@ -21,4 +21,4 @@ export default function filterAsyncRouter (routers) { | ... | @@ -21,4 +21,4 @@ export default function filterAsyncRouter (routers) { |
21 | } | 21 | } |
22 | function loadView (view) { | 22 | function loadView (view) { |
23 | return r => require.ensure([], () => r(require(`@/views${view}.vue`))) | 23 | return r => require.ensure([], () => r(require(`@/views${view}.vue`))) |
24 | } | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
24 | } | ... | ... |
This diff is collapsed.
Click to expand it.
... | @@ -8,7 +8,7 @@ | ... | @@ -8,7 +8,7 @@ |
8 | <template slot="content"> | 8 | <template slot="content"> |
9 | <el-form ref="form" :model="dialogForm" :rules="rules" label-width="82px"> | 9 | <el-form ref="form" :model="dialogForm" :rules="rules" label-width="82px"> |
10 | <el-row :gutter="24"> | 10 | <el-row :gutter="24"> |
11 | <el-col :span="12"> | 11 | <el-col :span="15"> |
12 | <el-form-item label="角色名称:" prop="roleName"> | 12 | <el-form-item label="角色名称:" prop="roleName"> |
13 | <el-input | 13 | <el-input |
14 | v-model="dialogForm.roleName" | 14 | v-model="dialogForm.roleName" |
... | @@ -16,7 +16,9 @@ | ... | @@ -16,7 +16,9 @@ |
16 | placeholder="角色名称" /> | 16 | placeholder="角色名称" /> |
17 | </el-form-item> | 17 | </el-form-item> |
18 | </el-col> | 18 | </el-col> |
19 | <el-col :span="12"> | 19 | </el-row> |
20 | <el-row :gutter="24"> | ||
21 | <el-col :span="24"> | ||
20 | <el-form-item label="角色类型:" prop="roleType"> | 22 | <el-form-item label="角色类型:" prop="roleType"> |
21 | <el-input | 23 | <el-input |
22 | v-model="dialogForm.roleType" | 24 | v-model="dialogForm.roleType" |
... | @@ -25,7 +27,6 @@ | ... | @@ -25,7 +27,6 @@ |
25 | </el-form-item> | 27 | </el-form-item> |
26 | </el-col> | 28 | </el-col> |
27 | </el-row> | 29 | </el-row> |
28 | <br> | ||
29 | <el-row> | 30 | <el-row> |
30 | <el-col :span="24"> | 31 | <el-col :span="24"> |
31 | <el-form-item label="备注:" class="form-item-mb0"> | 32 | <el-form-item label="备注:" class="form-item-mb0"> | ... | ... |
... | @@ -14,9 +14,7 @@ | ... | @@ -14,9 +14,7 @@ |
14 | </div> | 14 | </div> |
15 | <div class="from-clues-content"> | 15 | <div class="from-clues-content"> |
16 | <lb-table | 16 | <lb-table |
17 | :page-size="pageData.size" | 17 | :pagination="false" |
18 | :current-page.sync="pageData.current" | ||
19 | :total="pageData.total" | ||
20 | @size-change="handleSizeChange" | 18 | @size-change="handleSizeChange" |
21 | @p-current-change="handleCurrentChange" | 19 | @p-current-change="handleCurrentChange" |
22 | :column="tableData.columns" | 20 | :column="tableData.columns" |
... | @@ -219,11 +217,6 @@ | ... | @@ -219,11 +217,6 @@ |
219 | ]), | 217 | ]), |
220 | data: [], | 218 | data: [], |
221 | }, | 219 | }, |
222 | pageData: { | ||
223 | total: 5, | ||
224 | pageSize: 15, | ||
225 | current: 1, | ||
226 | }, | ||
227 | }; | 220 | }; |
228 | }, | 221 | }, |
229 | created () { | 222 | created () { |
... | @@ -242,6 +235,7 @@ | ... | @@ -242,6 +235,7 @@ |
242 | Builtinrole = res.content; | 235 | Builtinrole = res.content; |
243 | getRolesById(2) | 236 | getRolesById(2) |
244 | .then((res) => { | 237 | .then((res) => { |
238 | console.log("角色列表", res); | ||
245 | Publicrole = res.content; | 239 | Publicrole = res.content; |
246 | 240 | ||
247 | this.listdata = Builtinrole.concat(Publicrole); | 241 | this.listdata = Builtinrole.concat(Publicrole); | ... | ... |
... | @@ -594,13 +594,8 @@ | ... | @@ -594,13 +594,8 @@ |
594 | display: flex; | 594 | display: flex; |
595 | margin-bottom: 15px; | 595 | margin-bottom: 15px; |
596 | } | 596 | } |
597 | 597 | .el-dialog__footer { | |
598 | .dialog_footer { | 598 | padding-right: 40px; |
599 | flex-direction: column; | ||
600 | |||
601 | .dialog_button { | ||
602 | margin-top: 8px; | ||
603 | } | ||
604 | } | 599 | } |
605 | 600 | ||
606 | .divider { | 601 | .divider { | ... | ... |
... | @@ -17,9 +17,7 @@ | ... | @@ -17,9 +17,7 @@ |
17 | </div> | 17 | </div> |
18 | <div class="from-clues-content"> | 18 | <div class="from-clues-content"> |
19 | <lb-table | 19 | <lb-table |
20 | :page-size="pageData.size" | 20 | :pagination="false" |
21 | :current-page.sync="pageData.current" | ||
22 | :total="pageData.total" | ||
23 | @size-change="handleSizeChange" | 21 | @size-change="handleSizeChange" |
24 | @p-current-change="handleCurrentChange" | 22 | @p-current-change="handleCurrentChange" |
25 | :column="tableData.columns" | 23 | :column="tableData.columns" |
... | @@ -182,11 +180,6 @@ | ... | @@ -182,11 +180,6 @@ |
182 | ]), | 180 | ]), |
183 | data: [], | 181 | data: [], |
184 | }, | 182 | }, |
185 | pageData: { | ||
186 | total: 5, | ||
187 | pageSize: 15, | ||
188 | current: 1, | ||
189 | }, | ||
190 | }; | 183 | }; |
191 | }, | 184 | }, |
192 | created () { | 185 | created () { |
... | @@ -209,6 +202,7 @@ | ... | @@ -209,6 +202,7 @@ |
209 | departmentId: this.departmentid.departmentId, | 202 | departmentId: this.departmentid.departmentId, |
210 | }; | 203 | }; |
211 | getUserList(this.queryParam).then((res) => { | 204 | getUserList(this.queryParam).then((res) => { |
205 | console.log("人员列表", res); | ||
212 | if (res.status === 1) { | 206 | if (res.status === 1) { |
213 | this.loading = false; | 207 | this.loading = false; |
214 | this.tableData.data = res.content; | 208 | this.tableData.data = res.content; |
... | @@ -316,5 +310,4 @@ | ... | @@ -316,5 +310,4 @@ |
316 | .btnColRight { | 310 | .btnColRight { |
317 | margin-top: 20px; | 311 | margin-top: 20px; |
318 | } | 312 | } |
319 | |||
320 | </style> | 313 | </style> | ... | ... |
-
Please register or sign in to post a comment