样式调整
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