90e3f601 by xiaomiao

样式调整

1 parent 9d048f3e
...@@ -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 }
......
...@@ -272,4 +272,5 @@ ...@@ -272,4 +272,5 @@
272 /deep/.el-input__inner { 272 /deep/.el-input__inner {
273 background-color: #07388b; 273 background-color: #07388b;
274 } 274 }
275
275 </style> 276 </style>
......
...@@ -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>
......