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