style:样式修改
Showing
13 changed files
with
160 additions
and
150 deletions
... | @@ -52,7 +52,7 @@ | ... | @@ -52,7 +52,7 @@ |
52 | /deep/.el-textarea__inner { | 52 | /deep/.el-textarea__inner { |
53 | margin: 5px; | 53 | margin: 5px; |
54 | width: 96%; | 54 | width: 96%; |
55 | background: #05275B; | 55 | background: none; |
56 | color: #FFFFFF; | 56 | color: #FFFFFF; |
57 | border-radius: 2px; | 57 | border-radius: 2px; |
58 | border: 1px solid #6BC1FC; | 58 | border: 1px solid #6BC1FC; | ... | ... |
1 | <template> | 1 | <template> |
2 | <el-dialog | 2 | <el-dialog :title="title" :visible.sync="visible" :width="width" :append-to-body="appendToBody" :modal="modal" |
3 | :title="title" | 3 | :close-on-click-modal="false" :fullscreen="fullscreen" :destroy-on-close="destroyOnClose" |
4 | :visible.sync="visible" | 4 | :modal-append-to-body="modalAppendToBody" :class="customClass" @close="close" class="dialog"> |
5 | :width="width" | ||
6 | :append-to-body="appendToBody" | ||
7 | :modal="modal" | ||
8 | :close-on-click-modal="false" | ||
9 | :fullscreen="fullscreen" | ||
10 | :destroy-on-close="destroyOnClose" | ||
11 | :modal-append-to-body="modalAppendToBody" | ||
12 | :class="customClass" | ||
13 | @close="close" | ||
14 | class="dialog" | ||
15 | > | ||
16 | <slot name="content" /> | 5 | <slot name="content" /> |
17 | <span slot="footer" class="dialog-footer"> | 6 | <span slot="footer" class="dialog-footer"> |
18 | <slot name="footer" /> | 7 | <slot name="footer" /> |
... | @@ -66,21 +55,21 @@ export default { | ... | @@ -66,21 +55,21 @@ export default { |
66 | default: '30%' | 55 | default: '30%' |
67 | } | 56 | } |
68 | }, | 57 | }, |
69 | data() { | 58 | data () { |
70 | return {} | 59 | return {} |
71 | }, | 60 | }, |
72 | computed: { | 61 | computed: { |
73 | visible: { | 62 | visible: { |
74 | get() { | 63 | get () { |
75 | return this.show | 64 | return this.show |
76 | }, | 65 | }, |
77 | set(val) { | 66 | set (val) { |
78 | this.$emit('update:show', val) // visible 改变的时候通知父组件 | 67 | this.$emit('update:show', val) // visible 改变的时候通知父组件 |
79 | } | 68 | } |
80 | } | 69 | } |
81 | }, | 70 | }, |
82 | methods: { | 71 | methods: { |
83 | close() { | 72 | close () { |
84 | this.$emit('close') | 73 | this.$emit('close') |
85 | } | 74 | } |
86 | } | 75 | } |
... | @@ -88,21 +77,23 @@ export default { | ... | @@ -88,21 +77,23 @@ export default { |
88 | </script> | 77 | </script> |
89 | 78 | ||
90 | <style lang="scss" scoped> | 79 | <style lang="scss" scoped> |
91 | |||
92 | .dialog { | 80 | .dialog { |
93 | /deep/.el-dialog{ | 81 | /deep/.el-dialog { |
94 | overflow: hidden; | 82 | overflow: hidden; |
95 | background: url("~@/image/dialogBg.png") no-repeat !important; | 83 | background: url("~@/image/dialogBg.png") no-repeat !important; |
96 | background-size: 100% 100% !important; | 84 | background-size: 100% 100% !important; |
97 | } | 85 | } |
86 | |||
98 | .el-dialog__header { | 87 | .el-dialog__header { |
99 | padding: 0; | 88 | padding: 0; |
100 | height: 56px; | 89 | height: 56px; |
101 | line-height: 56px; | 90 | line-height: 56px; |
102 | border-bottom: none; | 91 | border-bottom: none; |
92 | |||
103 | .el-dialog__title { | 93 | .el-dialog__title { |
104 | font-weight: 400; | 94 | font-weight: 400; |
105 | } | 95 | } |
96 | |||
106 | .el-dialog__title:before { | 97 | .el-dialog__title:before { |
107 | display: inline-block; | 98 | display: inline-block; |
108 | content: ''; | 99 | content: ''; |
... | @@ -114,31 +105,38 @@ overflow: hidden; | ... | @@ -114,31 +105,38 @@ overflow: hidden; |
114 | position: relative; | 105 | position: relative; |
115 | top: 2px; | 106 | top: 2px; |
116 | } | 107 | } |
108 | |||
117 | .el-dialog__headerbtn { | 109 | .el-dialog__headerbtn { |
118 | position: absolute; | 110 | position: absolute; |
119 | // top: 2%; | 111 | // top: 2%; |
120 | right: 12px; | 112 | right: 12px; |
121 | } | 113 | } |
122 | } | 114 | } |
115 | |||
123 | .el-dialog__body { | 116 | .el-dialog__body { |
124 | margin: 0px 12px; | 117 | margin: 0px 12px; |
125 | padding: 48px 24px; | 118 | padding: 48px 24px; |
126 | background: #fff; | 119 | background: #fff; |
127 | border: 1px solid #dfe7f3; | 120 | border: 1px solid #dfe7f3; |
121 | |||
128 | .el-button { | 122 | .el-button { |
129 | padding: 8px 16px; | 123 | padding: 8px 16px; |
130 | border: none; | 124 | border: none; |
131 | } | 125 | } |
126 | |||
132 | .el-form { | 127 | .el-form { |
133 | .el-checkbox { | 128 | .el-checkbox { |
134 | line-height: 32px; | 129 | line-height: 32px; |
135 | height: 32px; | 130 | height: 32px; |
136 | } | 131 | } |
132 | |||
137 | .form-item-mb0 { | 133 | .form-item-mb0 { |
138 | margin-bottom: 0 !important; | 134 | margin-bottom: 0 !important; |
139 | } | 135 | } |
136 | |||
140 | .el-form-item { | 137 | .el-form-item { |
141 | margin-bottom: 24px; | 138 | margin-bottom: 24px; |
139 | |||
142 | .el-form-item__label { | 140 | .el-form-item__label { |
143 | height: 32px; | 141 | height: 32px; |
144 | line-height: 32px; | 142 | line-height: 32px; |
... | @@ -148,21 +146,25 @@ overflow: hidden; | ... | @@ -148,21 +146,25 @@ overflow: hidden; |
148 | .el-form-item__content { | 146 | .el-form-item__content { |
149 | // height: 32px; | 147 | // height: 32px; |
150 | line-height: 32px; | 148 | line-height: 32px; |
149 | |||
151 | // date 组件有图标 | 150 | // date 组件有图标 |
152 | .has-icon.el-date-editor { | 151 | .has-icon.el-date-editor { |
153 | .el-input__inner { | 152 | .el-input__inner { |
154 | padding-left: 32px; | 153 | padding-left: 32px; |
155 | } | 154 | } |
156 | } | 155 | } |
156 | |||
157 | .el-input__inner { | 157 | .el-input__inner { |
158 | padding: 0 8px; | 158 | padding: 0 8px; |
159 | height: 32px; | 159 | height: 32px; |
160 | line-height: 32px; | 160 | line-height: 32px; |
161 | text-align: left; | 161 | text-align: left; |
162 | } | 162 | } |
163 | |||
163 | .el-textarea__inner { | 164 | .el-textarea__inner { |
164 | padding: 8px 8px; | 165 | padding: 8px 8px; |
165 | } | 166 | } |
167 | |||
166 | .el-input .el-input__icon { | 168 | .el-input .el-input__icon { |
167 | font-size: 14px; | 169 | font-size: 14px; |
168 | color: #747e8c; | 170 | color: #747e8c; |
... | @@ -170,6 +172,7 @@ overflow: hidden; | ... | @@ -170,6 +172,7 @@ overflow: hidden; |
170 | } | 172 | } |
171 | } | 173 | } |
172 | } | 174 | } |
175 | |||
173 | .el-select, | 176 | .el-select, |
174 | .el-cascader, | 177 | .el-cascader, |
175 | .el-date-editor { | 178 | .el-date-editor { |
... | @@ -183,11 +186,13 @@ overflow: hidden; | ... | @@ -183,11 +186,13 @@ overflow: hidden; |
183 | height: 56px; | 186 | height: 56px; |
184 | line-height: 56px; | 187 | line-height: 56px; |
185 | border: none; | 188 | border: none; |
189 | |||
186 | .el-button { | 190 | .el-button { |
187 | padding: 8px 16px; | 191 | padding: 8px 16px; |
188 | border: none; | 192 | border: none; |
189 | } | 193 | } |
190 | .el-button + .el-button { | 194 | |
195 | .el-button+.el-button { | ||
191 | margin-left: 12px; | 196 | margin-left: 12px; |
192 | } | 197 | } |
193 | } | 198 | } | ... | ... |
... | @@ -3,90 +3,87 @@ | ... | @@ -3,90 +3,87 @@ |
3 | <el-dialog :close-on-click-modal="false" top="0" @close="closeDialog" | 3 | <el-dialog :close-on-click-modal="false" top="0" @close="closeDialog" |
4 | custom-class="dialogBox editDialogBox mainCenter" :visible.sync="dialogVisible" width="85%"> | 4 | custom-class="dialogBox editDialogBox mainCenter" :visible.sync="dialogVisible" width="85%"> |
5 | <div slot="title" class="dialog_title" ref="dialogTitle"> | 5 | <div slot="title" class="dialog_title" ref="dialogTitle"> |
6 | <b>{{ title || '标题' }}</b> | 6 | {{ title || '标题' }} |
7 | </div> | 7 | </div> |
8 | <div class="editDialogBox-box"> | ||
8 | <el-tabs v-model="titleName" type="card" @tab-click="handleTitleTab"> | 9 | <el-tabs v-model="titleName" type="card" @tab-click="handleTitleTab"> |
9 | <el-tab-pane label="数据模型" name="sjmx"></el-tab-pane> | 10 | <el-tab-pane label="数据模型" name="sjmx"></el-tab-pane> |
10 | <el-tab-pane v-if="visiableXml" label="xml报文" name="xml"></el-tab-pane> | 11 | <el-tab-pane v-if="visiableXml" label="xml报文" name="xml"></el-tab-pane> |
11 | <el-tab-pane v-if="visiableXml" label="响应结果" name="xyjg"></el-tab-pane> | 12 | <el-tab-pane v-if="visiableXml" label="响应结果" name="xyjg"></el-tab-pane> |
12 | </el-tabs> | 13 | </el-tabs> |
13 | <div v-if="titleName == 'sjmx'" class="sjmx"> | 14 | <div class="dialog-from" v-if="titleName == 'sjmx'"> |
14 | <div class="dialog-from"> | ||
15 | <el-row> | 15 | <el-row> |
16 | <el-col :span="5"> | 16 | <el-col :span="5"> |
17 | <span>业务报文ID:</span> | 17 | <span>业务报文ID:</span> |
18 | <div>{{ dataReport.BizMsgId }}</div> | 18 | <p>{{ dataReport.BizMsgId }}</p> |
19 | </el-col> | 19 | </el-col> |
20 | <el-col :span="7"> | 20 | <el-col :span="7"> |
21 | <span>接入报文ID:</span> | 21 | <span>接入报文ID:</span> |
22 | <div>{{ dataReport.ASID }}</div> | 22 | <p>{{ dataReport.ASID }}</p> |
23 | </el-col> | 23 | </el-col> |
24 | <el-col :span="5"> | 24 | <el-col :span="5"> |
25 | <span>行政区划编码:</span> | 25 | <span>行政区划编码:</span> |
26 | <div>{{ dataReport.AreaCode }}</div> | 26 | <p>{{ dataReport.AreaCode }}</p> |
27 | </el-col> | 27 | </el-col> |
28 | <el-col :span="7"> | 28 | <el-col :span="7"> |
29 | <span>上次不动产单元号:</span> | 29 | <span>上次不动产单元号:</span> |
30 | <div>{{ dataReport.PreEstateNum }}</div> | 30 | <p>{{ dataReport.PreEstateNum }}</p> |
31 | </el-col> | 31 | </el-col> |
32 | </el-row> | 32 | </el-row> |
33 | <el-row> | 33 | <el-row> |
34 | <el-col :span="5"> | 34 | <el-col :span="5"> |
35 | <span>业务编码:</span> | 35 | <span>业务编码:</span> |
36 | <div>{{ dataReport.RecType }}</div> | 36 | <p>{{ dataReport.RecType }}</p> |
37 | </el-col> | 37 | </el-col> |
38 | <el-col :span="7"> | 38 | <el-col :span="7"> |
39 | <span>权利类型:</span> | 39 | <span>权利类型:</span> |
40 | <div>{{ dataReport.RightType }}</div> | 40 | <p>{{ dataReport.RightType }}</p> |
41 | </el-col> | 41 | </el-col> |
42 | <el-col :span="5"> | 42 | <el-col :span="5"> |
43 | <span>登记类型:</span> | 43 | <span>登记类型:</span> |
44 | <div>{{ dataReport.RegType }}</div> | 44 | <p>{{ dataReport.RegType }}</p> |
45 | </el-col> | 45 | </el-col> |
46 | <el-col :span="7"> | 46 | <el-col :span="7"> |
47 | <span>不动产权证书数量:</span> | 47 | <span>不动产权证书数量:</span> |
48 | <div>{{ dataReport.CertCount }}</div> | 48 | <p>{{ dataReport.CertCount }}</p> |
49 | </el-col> | 49 | </el-col> |
50 | </el-row> | 50 | </el-row> |
51 | <el-row> | 51 | <el-row> |
52 | <el-col :span="5"> | 52 | <el-col :span="5"> |
53 | <span>创建时间:</span> | 53 | <span>创建时间:</span> |
54 | <div>{{ dataReport.createDate }}</div> | 54 | <p>{{ dataReport.createDate }}</p> |
55 | </el-col> | 55 | </el-col> |
56 | <el-col :span="7"> | 56 | <el-col :span="7"> |
57 | <span>业务流水号:</span> | 57 | <span>业务流水号:</span> |
58 | <div>{{ dataReport.RecFlowID }}</div> | 58 | <p>{{ dataReport.RecFlowID }}</p> |
59 | </el-col> | 59 | </el-col> |
60 | <el-col :span="5"> | 60 | <el-col :span="5"> |
61 | <span>登记机构:</span> | 61 | <span>登记机构:</span> |
62 | <div>{{ dataReport.RegOrgID }}</div> | 62 | <p>{{ dataReport.RegOrgID }}</p> |
63 | </el-col> | 63 | </el-col> |
64 | <el-col :span="7"> | 64 | <el-col :span="7"> |
65 | <span>证明数量:</span> | 65 | <span>证明数量:</span> |
66 | <div>{{ dataReport.ProofCount }}</div> | 66 | <p>{{ dataReport.ProofCount }}</p> |
67 | </el-col> | 67 | </el-col> |
68 | </el-row> | 68 | </el-row> |
69 | <el-row> | 69 | <el-row> |
70 | <el-col :span="5"> | 70 | <el-col :span="5"> |
71 | <span>宗地/宗海代码:</span> | 71 | <span>宗地/宗海代码:</span> |
72 | <div>{{ dataReport.ParcelID }}</div> | 72 | <p>{{ dataReport.ParcelID }}</p> |
73 | </el-col> | 73 | </el-col> |
74 | <el-col :span="7"> | 74 | <el-col :span="7"> |
75 | <span>不动产单元号:</span> | 75 | <span>不动产单元号:</span> |
76 | <div>{{ dataReport.EstateNum }}</div> | 76 | <p>{{ dataReport.EstateNum }}</p> |
77 | </el-col> | 77 | </el-col> |
78 | <el-col :span="10"> | 78 | <el-col :span="11"> |
79 | <span>上次不动产权证号/不动产登记证明:</span> | 79 | <span>上次不动产权证号/不动产登记证明:</span> |
80 | <div>{{ dataReport.PreCertID }}</div> | 80 | <p>{{ dataReport.PreCertID }}</p> |
81 | </el-col> | 81 | </el-col> |
82 | </el-row> | 82 | </el-row> |
83 | <!-- <el-row> | ||
84 | <el-col :span="24"> | ||
85 | <span>数字签名:</span> | ||
86 | <div>{{ dataReport.digitalsign }}</div> | ||
87 | </el-col> | ||
88 | </el-row> --> | ||
89 | </div> | 83 | </div> |
84 | </div> | ||
85 | <div class="editDialogBox-box"> | ||
86 | <div v-if="titleName == 'sjmx'" class="sjmx"> | ||
90 | <el-tabs v-model="activeName" ref="elTabs" type="card" @tab-click="changeList"> | 87 | <el-tabs v-model="activeName" ref="elTabs" type="card" @tab-click="changeList"> |
91 | <el-tab-pane :name="item.soleurl" v-for="item in headerList" :key="item.soleurl"> | 88 | <el-tab-pane :name="item.soleurl" v-for="item in headerList" :key="item.soleurl"> |
92 | <div slot="label" class="tab-pane-item"> | 89 | <div slot="label" class="tab-pane-item"> |
... | @@ -104,6 +101,7 @@ | ... | @@ -104,6 +101,7 @@ |
104 | <Xyjg :form-data='dataReport'></Xyjg> | 101 | <Xyjg :form-data='dataReport'></Xyjg> |
105 | </div> | 102 | </div> |
106 | <JsonEditor :resultInfo="resultInfo" v-if="titleName == 'xml'" /> | 103 | <JsonEditor :resultInfo="resultInfo" v-if="titleName == 'xml'" /> |
104 | </div> | ||
107 | </el-dialog> | 105 | </el-dialog> |
108 | </template> | 106 | </template> |
109 | 107 | ||
... | @@ -281,12 +279,14 @@ export default { | ... | @@ -281,12 +279,14 @@ export default { |
281 | border: 1px solid #224C7C !important; | 279 | border: 1px solid #224C7C !important; |
282 | margin: 0 0 10px 0 !important; | 280 | margin: 0 0 10px 0 !important; |
283 | width: 100% !important; | 281 | width: 100% !important; |
282 | background: transparent !important; | ||
284 | } | 283 | } |
285 | 284 | ||
286 | /deep/.el-input__inner { | 285 | /deep/.el-input__inner { |
287 | border: 1px solid #224C7C !important; | 286 | border: 1px solid #224C7C !important; |
288 | margin: 0 !important; | 287 | margin: 0 !important; |
289 | width: 100% !important; | 288 | width: 100% !important; |
289 | background: transparent !important; | ||
290 | } | 290 | } |
291 | } | 291 | } |
292 | 292 | ||
... | @@ -296,7 +296,6 @@ export default { | ... | @@ -296,7 +296,6 @@ export default { |
296 | } | 296 | } |
297 | 297 | ||
298 | /deep/ .el-tabs { | 298 | /deep/ .el-tabs { |
299 | margin: 0 15px 0 15px; | ||
300 | color: #CEF8FF; | 299 | color: #CEF8FF; |
301 | } | 300 | } |
302 | 301 | ||
... | @@ -342,6 +341,7 @@ export default { | ... | @@ -342,6 +341,7 @@ export default { |
342 | 341 | ||
343 | /deep/.el-tabs__header { | 342 | /deep/.el-tabs__header { |
344 | border: none; | 343 | border: none; |
344 | margin-bottom: 0; | ||
345 | } | 345 | } |
346 | 346 | ||
347 | /deep/.el-tabs__item.is-top:not(:last-child) { | 347 | /deep/.el-tabs__item.is-top:not(:last-child) { |
... | @@ -389,11 +389,14 @@ export default { | ... | @@ -389,11 +389,14 @@ export default { |
389 | height: 825px !important; | 389 | height: 825px !important; |
390 | 390 | ||
391 | .dialog-from { | 391 | .dialog-from { |
392 | padding: 15px; | 392 | padding: 13px; |
393 | background: #08346F; | ||
394 | border-radius: 2px; | 393 | border-radius: 2px; |
395 | box-sizing: border-box; | 394 | box-sizing: border-box; |
396 | margin: -3px 15px 15px 15px; | 395 | |
396 | .el-row { | ||
397 | display: flex; | ||
398 | flex-wrap: nowrap; | ||
399 | } | ||
397 | 400 | ||
398 | .el-col { | 401 | .el-col { |
399 | line-height: 18px; | 402 | line-height: 18px; |
... | @@ -401,19 +404,22 @@ export default { | ... | @@ -401,19 +404,22 @@ export default { |
401 | align-items: center; | 404 | align-items: center; |
402 | margin-bottom: 3px; | 405 | margin-bottom: 3px; |
403 | color: #B5D6DC; | 406 | color: #B5D6DC; |
407 | border-radius: 2px; | ||
408 | border: 1px solid #224C7C; | ||
409 | margin: 5px; | ||
404 | 410 | ||
405 | span { | 411 | span { |
406 | display: inline-block; | 412 | display: inline-block; |
407 | padding: 3px; | 413 | padding: 3px; |
408 | border-radius: 3px; | 414 | border-radius: 3px; |
409 | overflow: hidden; | 415 | overflow: hidden; |
410 | min-width: 140px; | 416 | width: 100px; |
411 | text-align: right; | 417 | white-space: nowrap; |
412 | margin-right: 5px; | 418 | text-align: left; |
413 | color: #02D9FD; | 419 | color: #02D9FD; |
414 | } | 420 | } |
415 | 421 | ||
416 | div { | 422 | p { |
417 | flex: 1; | 423 | flex: 1; |
418 | width: 100%; | 424 | width: 100%; |
419 | padding-left: 5px; | 425 | padding-left: 5px; |
... | @@ -421,6 +427,7 @@ export default { | ... | @@ -421,6 +427,7 @@ export default { |
421 | color: #c0c4cc; | 427 | color: #c0c4cc; |
422 | cursor: not-allowed; | 428 | cursor: not-allowed; |
423 | margin-right: 5px; | 429 | margin-right: 5px; |
430 | text-align: right; | ||
424 | } | 431 | } |
425 | } | 432 | } |
426 | } | 433 | } |
... | @@ -428,17 +435,17 @@ export default { | ... | @@ -428,17 +435,17 @@ export default { |
428 | .dialog_title { | 435 | .dialog_title { |
429 | display: flex; | 436 | display: flex; |
430 | position: relative; | 437 | position: relative; |
431 | top: -2px; | 438 | font-size: 24px; |
432 | 439 | top: -11px; | |
433 | b { | 440 | width: 38%; |
434 | flex: 1; | 441 | height: 40px; |
435 | width: 100%; | 442 | margin-left: 28px; |
436 | @flex-center(); | 443 | justify-content: center; |
437 | } | ||
438 | } | 444 | } |
439 | 445 | ||
440 | .el-dialog__header { | 446 | .el-dialog__header { |
441 | height: 50px; | 447 | display: flex; |
448 | margin-bottom: 15px; | ||
442 | } | 449 | } |
443 | 450 | ||
444 | .dialog_footer { | 451 | .dialog_footer { | ... | ... |
1 | <template> | 1 | <template> |
2 | <div> | 2 | <div> |
3 | <i class="icon-tubiao-242 iconfont" :title="title" @click="openDialog" /> | 3 | <i class="icon-tubiao-242 iconfont" :title="title" @click="openDialog" /> |
4 | <el-dialog | 4 | <el-dialog :key="key" :title="title" :inner-dialog="true" :visible.sync="dialogVisible" width="600px" |
5 | :key="key" | 5 | :close-on-click-modal="false" append-to-body @cancel="cancel"> |
6 | :title="title" | 6 | <vue-json-editor id="minejson" v-model="resultInfo" :mode="'code'" lang="zh" @json-change="onJsonChange" |
7 | :inner-dialog="true" | 7 | @json-save="onJsonSave" @has-error="onError" /> |
8 | :visible.sync="dialogVisible" | 8 | <el-tooltip content="全屏缩放" effect="dark" placement="bottom" fullscreen class="fullScreen"> |
9 | width="600px" | ||
10 | :close-on-click-modal="false" | ||
11 | append-to-body | ||
12 | @cancel="cancel" | ||
13 | > | ||
14 | <vue-json-editor | ||
15 | id="minejson" | ||
16 | v-model="resultInfo" | ||
17 | :mode="'code'" | ||
18 | lang="zh" | ||
19 | @json-change="onJsonChange" | ||
20 | @json-save="onJsonSave" | ||
21 | @has-error="onError" | ||
22 | /> | ||
23 | <el-tooltip | ||
24 | content="全屏缩放" | ||
25 | effect="dark" | ||
26 | placement="bottom" | ||
27 | fullscreen | ||
28 | class="fullScreen" | ||
29 | > | ||
30 | <i class="el-icon-full-screen" @click="enLarge" /> | 9 | <i class="el-icon-full-screen" @click="enLarge" /> |
31 | </el-tooltip> | 10 | </el-tooltip> |
32 | <template slot="footer"> | 11 | <template slot="footer"> |
33 | <div class="dialog-footer flex flex-pack-center"> | 12 | <div class="dialog-footer flex flex-pack-center"> |
34 | <el-button | 13 | <el-button type="primary" class="confirmBtn" @click="onJsonSave">保存</el-button> |
35 | type="primary" | 14 | <el-button type="primary" class="cancelBtn" @click="cancel">关闭</el-button> |
36 | class="confirmBtn" | ||
37 | @click="onJsonSave" | ||
38 | >保存</el-button> | ||
39 | <el-button | ||
40 | type="primary" | ||
41 | class="cancelBtn" | ||
42 | @click="cancel" | ||
43 | >关闭</el-button> | ||
44 | </div> | 15 | </div> |
45 | </template> | 16 | </template> |
46 | </el-dialog> | 17 | </el-dialog> |
... | @@ -62,7 +33,7 @@ export default { | ... | @@ -62,7 +33,7 @@ export default { |
62 | default: '' | 33 | default: '' |
63 | } | 34 | } |
64 | }, | 35 | }, |
65 | data() { | 36 | data () { |
66 | return { | 37 | return { |
67 | activeNames: [], | 38 | activeNames: [], |
68 | resultInfo: {}, | 39 | resultInfo: {}, |
... | @@ -75,7 +46,7 @@ export default { | ... | @@ -75,7 +46,7 @@ export default { |
75 | }, | 46 | }, |
76 | watch: { | 47 | watch: { |
77 | resultInfos: { | 48 | resultInfos: { |
78 | handler: function(val) { | 49 | handler: function (val) { |
79 | ++this.key | 50 | ++this.key |
80 | this.resultInfo = | 51 | this.resultInfo = |
81 | this.resultInfos === '' ? {} : JSON.parse(this.resultInfos) | 52 | this.resultInfos === '' ? {} : JSON.parse(this.resultInfos) |
... | @@ -86,17 +57,17 @@ export default { | ... | @@ -86,17 +57,17 @@ export default { |
86 | } | 57 | } |
87 | }, | 58 | }, |
88 | 59 | ||
89 | mounted() { | 60 | mounted () { |
90 | this.resultInfo = | 61 | this.resultInfo = |
91 | this.resultInfos === '' ? {} : JSON.parse(this.resultInfos) | 62 | this.resultInfos === '' ? {} : JSON.parse(this.resultInfos) |
92 | }, | 63 | }, |
93 | 64 | ||
94 | methods: { | 65 | methods: { |
95 | onJsonChange(value) { | 66 | onJsonChange (value) { |
96 | // 只有在格式正确的时候进入此事件 | 67 | // 只有在格式正确的时候进入此事件 |
97 | this.hasJsonFlag = true | 68 | this.hasJsonFlag = true |
98 | }, | 69 | }, |
99 | onJsonSave() { | 70 | onJsonSave () { |
100 | const value = this.resultInfo | 71 | const value = this.resultInfo |
101 | console.log(this.resultInfo, 'resultInfo') | 72 | console.log(this.resultInfo, 'resultInfo') |
102 | if (this.hasJsonFlag === false) { | 73 | if (this.hasJsonFlag === false) { |
... | @@ -109,19 +80,19 @@ export default { | ... | @@ -109,19 +80,19 @@ export default { |
109 | return true | 80 | return true |
110 | } | 81 | } |
111 | }, | 82 | }, |
112 | onError(value) { | 83 | onError (value) { |
113 | this.hasJsonFlag = false | 84 | this.hasJsonFlag = false |
114 | }, | 85 | }, |
115 | openDialog() { | 86 | openDialog () { |
116 | this.dialogVisible = true | 87 | this.dialogVisible = true |
117 | }, | 88 | }, |
118 | cancel() { | 89 | cancel () { |
119 | console.log(this.tmpResultInfo, 'tmpResultInfo') | 90 | console.log(this.tmpResultInfo, 'tmpResultInfo') |
120 | this.resultInfo = this.tmpResultInfo | 91 | this.resultInfo = this.tmpResultInfo |
121 | this.dialogVisible = false | 92 | this.dialogVisible = false |
122 | }, | 93 | }, |
123 | // 放大 | 94 | // 放大 |
124 | enLarge() { | 95 | enLarge () { |
125 | const fullarea = document.getElementById('minejson') | 96 | const fullarea = document.getElementById('minejson') |
126 | if (fullarea.requestFullscreen) { | 97 | if (fullarea.requestFullscreen) { |
127 | fullarea.requestFullscreen() | 98 | fullarea.requestFullscreen() |
... | @@ -146,9 +117,11 @@ export default { | ... | @@ -146,9 +117,11 @@ export default { |
146 | top: 1px; | 117 | top: 1px; |
147 | color: #349af3; | 118 | color: #349af3; |
148 | } | 119 | } |
120 | |||
149 | ::v-deep .jsoneditor-vue { | 121 | ::v-deep .jsoneditor-vue { |
150 | height: 100%; | 122 | height: 100%; |
151 | } | 123 | } |
124 | |||
152 | .fullScreen { | 125 | .fullScreen { |
153 | position: absolute; | 126 | position: absolute; |
154 | right: 5%; | 127 | right: 5%; |
... | @@ -156,22 +129,28 @@ export default { | ... | @@ -156,22 +129,28 @@ export default { |
156 | cursor: pointer; | 129 | cursor: pointer; |
157 | color: #fff; | 130 | color: #fff; |
158 | } | 131 | } |
132 | |||
159 | ::v-deep .jsoneditor-modes { | 133 | ::v-deep .jsoneditor-modes { |
160 | display: none !important; | 134 | display: none !important; |
161 | } | 135 | } |
136 | |||
162 | .jsoneditor-poweredBy { | 137 | .jsoneditor-poweredBy { |
163 | display: none !important; | 138 | display: none !important; |
164 | } | 139 | } |
140 | |||
165 | .jsoneditor-menu { | 141 | .jsoneditor-menu { |
166 | background-color: #9c9e9f !important; | 142 | background-color: #9c9e9f !important; |
167 | border-bottom: 1px solid #9c9e9f !important; | 143 | border-bottom: 1px solid #9c9e9f !important; |
168 | } | 144 | } |
145 | |||
169 | .jsoneditor { | 146 | .jsoneditor { |
170 | border: 1px solid #9c9e9f !important; | 147 | border: 1px solid #9c9e9f !important; |
171 | } | 148 | } |
149 | |||
172 | .el-collapse { | 150 | .el-collapse { |
173 | border: 0; | 151 | border: 0; |
174 | } | 152 | } |
153 | |||
175 | .el-collapse-item__header { | 154 | .el-collapse-item__header { |
176 | height: 44px; | 155 | height: 44px; |
177 | } | 156 | } | ... | ... |
src/image/closebg.png
0 → 100644
493 Bytes
... | @@ -35,6 +35,14 @@ | ... | @@ -35,6 +35,14 @@ |
35 | .dialogBox-content { | 35 | .dialogBox-content { |
36 | height: auto | 36 | height: auto |
37 | } | 37 | } |
38 | |||
39 | .editDialogBox-box { | ||
40 | background: #031A46; | ||
41 | box-shadow: inset 0px 0px 12px 0px #02D9FD; | ||
42 | border-radius: 2px; | ||
43 | border: 1px solid #6BC1FC; | ||
44 | margin: 0 18px 15px 18px; | ||
45 | } | ||
38 | } | 46 | } |
39 | 47 | ||
40 | .dialog_title { | 48 | .dialog_title { |
... | @@ -57,13 +65,18 @@ | ... | @@ -57,13 +65,18 @@ |
57 | padding-bottom: 0; | 65 | padding-bottom: 0; |
58 | } | 66 | } |
59 | 67 | ||
60 | .el-dialog__headerbtn .el-dialog__close { | 68 | .el-dialog__headerbtn { |
61 | color: #FFFFFF !important; | 69 | width: 42px; |
62 | position: relative; | 70 | height: 20px; |
63 | top: -2px; | 71 | background: url("~@/image/closebg.png") no-repeat; |
64 | right: 15px | 72 | background-size: 100% 100%; |
73 | right: 40px; | ||
74 | top: 33px; | ||
65 | } | 75 | } |
66 | 76 | ||
77 | .el-dialog__close { | ||
78 | font-size: 0; | ||
79 | } | ||
67 | 80 | ||
68 | .el-form-item { | 81 | .el-form-item { |
69 | @include flex; | 82 | @include flex; |
... | @@ -88,8 +101,9 @@ | ... | @@ -88,8 +101,9 @@ |
88 | top: 50%; | 101 | top: 50%; |
89 | left: 50%; | 102 | left: 50%; |
90 | transform: translate(-50%, -50%); | 103 | transform: translate(-50%, -50%); |
104 | |||
91 | // 展开收起按钮位置 | 105 | // 展开收起按钮位置 |
92 | .el-input__suffix{ | 106 | .el-input__suffix { |
93 | right: 10px; | 107 | right: 10px; |
94 | } | 108 | } |
95 | } | 109 | } |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -180,13 +180,13 @@ table th { | ... | @@ -180,13 +180,13 @@ table th { |
180 | border-bottom: none !important; | 180 | border-bottom: none !important; |
181 | } | 181 | } |
182 | 182 | ||
183 | .el-table__body { | 183 | // .el-table__body { |
184 | -webkit-border-vertical-spacing: 6px !important; // 垂直间距 | 184 | // -webkit-border-vertical-spacing: 6px !important; // 垂直间距 |
185 | } | 185 | // } |
186 | 186 | ||
187 | table td { | 187 | table td { |
188 | box-sizing: border-box; | 188 | box-sizing: border-box; |
189 | border-bottom: none !important; | 189 | border-bottom: 1px solid #458ACF !important; |
190 | } | 190 | } |
191 | 191 | ||
192 | //去掉最下面的那一条线 | 192 | //去掉最下面的那一条线 |
... | @@ -460,5 +460,4 @@ table td { | ... | @@ -460,5 +460,4 @@ table td { |
460 | .el-select-dropdown__item.hover, | 460 | .el-select-dropdown__item.hover, |
461 | .el-select-dropdown__item:hover { | 461 | .el-select-dropdown__item:hover { |
462 | background-color: transparent !important; | 462 | background-color: transparent !important; |
463 | ; | ||
464 | } | 463 | } |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -5,16 +5,16 @@ | ... | @@ -5,16 +5,16 @@ |
5 | background-color: rgba(0, 0, 0, 0); | 5 | background-color: rgba(0, 0, 0, 0); |
6 | 6 | ||
7 | .el-table__header-wrapper { | 7 | .el-table__header-wrapper { |
8 | border-right: 1px solid #103E99; | 8 | border-right: none; |
9 | 9 | ||
10 | } | 10 | } |
11 | 11 | ||
12 | .el-table__row .cell { | 12 | .el-table__row .cell { |
13 | color: #DBFAFF !important; | 13 | color: #CEF8FF !important; |
14 | } | 14 | } |
15 | 15 | ||
16 | .el-table__row { | 16 | .el-table__row { |
17 | background: #0F56A3 !important; | 17 | background: rgba(0, 0, 0, 0) !important; |
18 | } | 18 | } |
19 | 19 | ||
20 | thead { | 20 | thead { | ... | ... |
... | @@ -36,16 +36,17 @@ class data extends filter { | ... | @@ -36,16 +36,17 @@ class data extends filter { |
36 | { | 36 | { |
37 | prop: "areacode", | 37 | prop: "areacode", |
38 | label: "行政区代码", | 38 | label: "行政区代码", |
39 | width: 70, | 39 | width: 90, |
40 | }, | 40 | }, |
41 | { | 41 | { |
42 | prop: "areaName", | 42 | prop: "areaName", |
43 | label: "行政区名称", | 43 | label: "行政区名称", |
44 | width: 70, | 44 | width: 90, |
45 | }, | 45 | }, |
46 | { | 46 | { |
47 | prop: "bizMsgid", | 47 | prop: "bizMsgid", |
48 | label: "业务报文ID", | 48 | label: "业务报文ID", |
49 | width: 90, | ||
49 | }, | 50 | }, |
50 | { | 51 | { |
51 | prop: "createdate", | 52 | prop: "createdate", |
... | @@ -65,7 +66,7 @@ class data extends filter { | ... | @@ -65,7 +66,7 @@ class data extends filter { |
65 | { | 66 | { |
66 | prop: "rectype", | 67 | prop: "rectype", |
67 | label: "业务编码", | 68 | label: "业务编码", |
68 | width: 70, | 69 | width: 80, |
69 | }, | 70 | }, |
70 | { | 71 | { |
71 | prop: "rectypeName", | 72 | prop: "rectypeName", | ... | ... |
... | @@ -17,13 +17,13 @@ | ... | @@ -17,13 +17,13 @@ |
17 | </el-form-item> | 17 | </el-form-item> |
18 | </el-col> | 18 | </el-col> |
19 | <el-col :span="6"> | 19 | <el-col :span="6"> |
20 | <el-form-item label="接收开始日期" prop="startTime"> | 20 | <el-form-item label="接收日期" prop="receiveStartTime"> |
21 | <el-date-picker type="date" class="width100" placeholder="开始日期" :picker-options="pickerOptionsStart" | 21 | <el-date-picker type="date" class="width100" placeholder="开始日期" :picker-options="pickerOptionsStart" |
22 | clearable v-model="form.receiveStartTime" value-format="yyyy-MM-dd"></el-date-picker> | 22 | clearable v-model="form.receiveStartTime" value-format="yyyy-MM-dd"></el-date-picker> |
23 | </el-form-item> | 23 | </el-form-item> |
24 | </el-col> | 24 | </el-col> |
25 | <el-col :span="6"> | 25 | <el-col :span="6"> |
26 | <el-form-item label="接收结束日期" prop="endTime"> | 26 | <el-form-item label="至" prop="receiveEndTime" label-width="35px"> |
27 | <el-date-picker type="date" class="width100" placeholder="结束日期" :picker-options="pickerOptionsEnd" | 27 | <el-date-picker type="date" class="width100" placeholder="结束日期" :picker-options="pickerOptionsEnd" |
28 | clearable v-model="form.receiveEndTime" value-format="yyyy-MM-dd"></el-date-picker> | 28 | clearable v-model="form.receiveEndTime" value-format="yyyy-MM-dd"></el-date-picker> |
29 | </el-form-item> | 29 | </el-form-item> |
... | @@ -116,19 +116,25 @@ export default { | ... | @@ -116,19 +116,25 @@ export default { |
116 | }, | 116 | }, |
117 | data () { | 117 | data () { |
118 | return { | 118 | return { |
119 | // 开始结束日期限制 | ||
120 | pickerOptionsStart: { | 119 | pickerOptionsStart: { |
121 | disabledDate: (time) => { | 120 | disabledDate: (time) => { |
122 | if (this.form.endTime) { | 121 | let endDateVal = this.form.receiveEndTime; |
123 | return time.getTime() >= new Date(this.form.endTime).getTime(); | 122 | if (endDateVal) { |
123 | return ( | ||
124 | time.getTime() > | ||
125 | new Date(endDateVal).getTime() - 1 * 24 * 60 * 60 * 1000 | ||
126 | ); | ||
124 | } | 127 | } |
125 | }, | 128 | }, |
126 | }, | 129 | }, |
127 | // 结束日期限制 | ||
128 | pickerOptionsEnd: { | 130 | pickerOptionsEnd: { |
129 | disabledDate: (time) => { | 131 | disabledDate: (time) => { |
130 | if (this.form.startTime) { | 132 | let beginDateVal = this.form.receiveStartTime; |
131 | return time.getTime() <= new Date(this.form.startTime).getTime(); | 133 | if (beginDateVal) { |
134 | return ( | ||
135 | time.getTime() < | ||
136 | new Date(beginDateVal).getTime() + 1 * 24 * 60 * 60 * 1000 | ||
137 | ); | ||
132 | } | 138 | } |
133 | }, | 139 | }, |
134 | }, | 140 | }, | ... | ... |
... | @@ -16,18 +16,16 @@ | ... | @@ -16,18 +16,16 @@ |
16 | </el-select> | 16 | </el-select> |
17 | </el-form-item> | 17 | </el-form-item> |
18 | </el-col> | 18 | </el-col> |
19 | <el-col :span="12"> | 19 | <el-col :span="6"> |
20 | <el-form-item label="汇交时间" prop="startTime"> | 20 | <el-form-item label="汇交时间" prop="exchangeStartTime"> |
21 | <el-row :gutter="20"> | ||
22 | <el-col :span="12"> | ||
23 | <el-date-picker type="date" class="width100" placeholder="开始日期" :picker-options="pickerOptionsStart" | 21 | <el-date-picker type="date" class="width100" placeholder="开始日期" :picker-options="pickerOptionsStart" |
24 | clearable v-model="form.exchangeStartTime" value-format="yyyy-MM-dd"></el-date-picker> | 22 | clearable v-model="form.exchangeStartTime" value-format="yyyy-MM-dd"></el-date-picker> |
23 | </el-form-item> | ||
25 | </el-col> | 24 | </el-col> |
26 | <el-col :span="12"> | 25 | <el-col :span="6"> |
26 | <el-form-item label="至" prop="exchangeStartTime" label-width="35px"> | ||
27 | <el-date-picker type="date" class="width100" placeholder="结束日期" :picker-options="pickerOptionsEnd" | 27 | <el-date-picker type="date" class="width100" placeholder="结束日期" :picker-options="pickerOptionsEnd" |
28 | clearable v-model="form.exchangeEndTime" value-format="yyyy-MM-dd"></el-date-picker> | 28 | clearable v-model="form.exchangeEndTime" value-format="yyyy-MM-dd"></el-date-picker> |
29 | </el-col> | ||
30 | </el-row> | ||
31 | </el-form-item> | 29 | </el-form-item> |
32 | </el-col> | 30 | </el-col> |
33 | <el-col :span="6"> | 31 | <el-col :span="6"> |
... | @@ -104,20 +102,16 @@ export default { | ... | @@ -104,20 +102,16 @@ export default { |
104 | // 开始结束日期限制 | 102 | // 开始结束日期限制 |
105 | pickerOptionsStart: { | 103 | pickerOptionsStart: { |
106 | disabledDate: (time) => { | 104 | disabledDate: (time) => { |
107 | if (this.form.reportEndTime) { | 105 | if (this.form.exchangeEndTime) { |
108 | return ( | 106 | return time.getTime() >= new Date(this.form.exchangeEndTime).getTime(); |
109 | time.getTime() >= new Date(this.form.reportEndTime).getTime() | ||
110 | ); | ||
111 | } | 107 | } |
112 | }, | 108 | }, |
113 | }, | 109 | }, |
114 | // 结束日期限制 | 110 | // 结束日期限制 |
115 | pickerOptionsEnd: { | 111 | pickerOptionsEnd: { |
116 | disabledDate: (time) => { | 112 | disabledDate: (time) => { |
117 | if (this.form.reportStartTime) { | 113 | if (this.form.exchangeStartTime) { |
118 | return ( | 114 | return time.getTime() <= new Date(this.form.exchangeStartTime).getTime(); |
119 | time.getTime() <= new Date(this.form.reportStartTime).getTime() | ||
120 | ); | ||
121 | } | 115 | } |
122 | }, | 116 | }, |
123 | }, | 117 | }, | ... | ... |
-
Please register or sign in to post a comment