Merge branch 'master' of http://yun.pashanhoo.com:9090/bdc/bdcdj-web
Showing
4 changed files
with
120 additions
and
13 deletions
src/api/fqsq.js
0 → 100644
src/image/left.png
0 → 100644
998 Bytes
src/image/right.png
0 → 100644
982 Bytes
| ... | @@ -16,26 +16,53 @@ | ... | @@ -16,26 +16,53 @@ |
| 16 | </ul> | 16 | </ul> |
| 17 | </div> | 17 | </div> |
| 18 | <div class="tabsList"> | 18 | <div class="tabsList"> |
| 19 | <p v-show="issplitScreen" class="splitScreen tabsList-title">材料信息</p> | 19 | <div class="tabsList-left" > |
| 20 | <div class="map-drawer-click" | ||
| 21 | v-if='isShowdrawer' | ||
| 22 | @click=" () => { | ||
| 23 | this.isShowdrawer = !this.isShowdrawer;}"> | ||
| 24 | </div> | ||
| 25 | <div class="map-drawer-expand" | ||
| 26 | v-else | ||
| 27 | @click=" () => { | ||
| 28 | this.isShowdrawer = !this.isShowdrawer;}"> | ||
| 29 | </div> | ||
| 30 | <ul v-if='this.isShowdrawer'> | ||
| 31 | <p>受理单元列表(3)</p> | ||
| 32 | <li>610100102104GB00004W00000000</li> | ||
| 33 | <div class="xian"></div> | ||
| 34 | <li>610100102104GB00004W00000000</li> | ||
| 35 | <div class="xian"></div> | ||
| 36 | <li>610100102104GB00004W00000000</li> | ||
| 37 | <div class="xian"></div> | ||
| 38 | </ul> | ||
| 39 | </div> | ||
| 40 | <div class="tabsList-right" > | ||
| 41 | <div class="fenpin" v-show="issplitScreen"> | ||
| 42 | <p class="splitScreen tabsList-title">材料信息</p> | ||
| 43 | <div class="splitScreen" ></div> | ||
| 44 | </div> | ||
| 20 | <el-tabs v-model="activeName"> | 45 | <el-tabs v-model="activeName"> |
| 21 | <el-tab-pane :label="item.name" :name="index + 1 + ''" v-for="(item, index) in tabList" :key="index"> | 46 | <el-tab-pane :label="item.name" :name="index + 1 + ''" v-for="(item, index) in tabList" :key="index"> |
| 22 | </el-tab-pane> | ||
| 23 | </el-tabs> | ||
| 24 | </div> | ||
| 25 | |||
| 26 | <div class="splitScreen-con"> | 47 | <div class="splitScreen-con"> |
| 27 | <div class="splitScreen" v-show="issplitScreen"></div> | ||
| 28 | <component :is="editItem" :flag="flag" :key="key" /> | 48 | <component :is="editItem" :flag="flag" :key="key" /> |
| 29 | </div> | 49 | </div> |
| 50 | </el-tab-pane> | ||
| 51 | </el-tabs></div> | ||
| 52 | |||
| 53 | </div> | ||
| 54 | |||
| 55 | |||
| 30 | </div> | 56 | </div> |
| 31 | </template> | 57 | </template> |
| 32 | <script> | 58 | <script> |
| 33 | 59 | import { Init } from "@/api/fqsq.js" | |
| 34 | export default { | 60 | export default { |
| 35 | /**注册组件*/ | 61 | /**注册组件*/ |
| 36 | components: {}, | 62 | components: {}, |
| 37 | data () { | 63 | data () { |
| 38 | return { | 64 | return { |
| 65 | isShowdrawer: true, | ||
| 39 | key: 0, | 66 | key: 0, |
| 40 | flag: false, | 67 | flag: false, |
| 41 | headerleftList: [ | 68 | headerleftList: [ |
| ... | @@ -118,8 +145,19 @@ export default { | ... | @@ -118,8 +145,19 @@ export default { |
| 118 | }, | 145 | }, |
| 119 | created () { | 146 | created () { |
| 120 | this.tabList = [...this.tabList1] | 147 | this.tabList = [...this.tabList1] |
| 148 | this.list() | ||
| 121 | }, | 149 | }, |
| 122 | methods: { | 150 | methods: { |
| 151 | list(){ | ||
| 152 | var formdata=new FormData(); | ||
| 153 | //可以通过append()方法来追加数据 | ||
| 154 | formdata.append("bsmSldy","bf2bbedc18dce9ff1143be9f1496da39"); | ||
| 155 | Init(formdata).then(res => { | ||
| 156 | if (res.code === 200) { | ||
| 157 | console.log(res,1111) | ||
| 158 | } | ||
| 159 | }) | ||
| 160 | }, | ||
| 123 | operation (index, item) { | 161 | operation (index, item) { |
| 124 | if (item.icon == 'fqsq5') { | 162 | if (item.icon == 'fqsq5') { |
| 125 | this.key++ | 163 | this.key++ |
| ... | @@ -165,18 +203,14 @@ export default { | ... | @@ -165,18 +203,14 @@ export default { |
| 165 | .fqsq { | 203 | .fqsq { |
| 166 | width: 100%; | 204 | width: 100%; |
| 167 | height: 100%; | 205 | height: 100%; |
| 168 | padding: 0 3%; | 206 | padding: 0; |
| 169 | box-sizing: border-box; | 207 | box-sizing: border-box; |
| 170 | background-color: #ffffff; | 208 | background-color: #ffffff; |
| 171 | 209 | ||
| 172 | .splitScreen-con { | 210 | |
| 173 | display: flex; | ||
| 174 | } | ||
| 175 | 211 | ||
| 176 | .splitScreen { | 212 | .splitScreen { |
| 177 | min-width: 50%; | 213 | min-width: 50%; |
| 178 | width: 50%; | ||
| 179 | border-right: 1px solid $borderColor; | ||
| 180 | } | 214 | } |
| 181 | 215 | ||
| 182 | &-header { | 216 | &-header { |
| ... | @@ -216,6 +250,31 @@ export default { | ... | @@ -216,6 +250,31 @@ export default { |
| 216 | } | 250 | } |
| 217 | } | 251 | } |
| 218 | } | 252 | } |
| 253 | .map-drawer-expand { | ||
| 254 | width: 20px; | ||
| 255 | height: 77px; | ||
| 256 | background: url('../../../image/right.png'); | ||
| 257 | background-size: cover; | ||
| 258 | position: absolute; | ||
| 259 | left: 0%; | ||
| 260 | top: 30%; | ||
| 261 | z-index: 999; | ||
| 262 | cursor: pointer; | ||
| 263 | } | ||
| 264 | .map-drawer-click { | ||
| 265 | width: 20px; | ||
| 266 | height: 77px; | ||
| 267 | background: url('../../../image/left.png'); | ||
| 268 | background-size: cover; | ||
| 269 | position: absolute; | ||
| 270 | right: -8%; | ||
| 271 | top: 30%; | ||
| 272 | z-index: 999; | ||
| 273 | cursor: pointer; | ||
| 274 | } | ||
| 275 | .hide { | ||
| 276 | display: none; | ||
| 277 | } | ||
| 219 | 278 | ||
| 220 | .tabsList { | 279 | .tabsList { |
| 221 | width: 100%; | 280 | width: 100%; |
| ... | @@ -224,6 +283,43 @@ export default { | ... | @@ -224,6 +283,43 @@ export default { |
| 224 | background-color: #ffffff; | 283 | background-color: #ffffff; |
| 225 | z-index: 100; | 284 | z-index: 100; |
| 226 | @include flex; | 285 | @include flex; |
| 286 | .tabsList-left{ | ||
| 287 | border-right: 1px solid #EBEEF5; | ||
| 288 | position: relative; | ||
| 289 | |||
| 290 | ul{ | ||
| 291 | position: relative; | ||
| 292 | |||
| 293 | .xian{ | ||
| 294 | background: #F2F2F2; | ||
| 295 | padding: 2px; | ||
| 296 | } | ||
| 297 | p{ | ||
| 298 | padding: 20px; | ||
| 299 | text-align: center; | ||
| 300 | } | ||
| 301 | li{ | ||
| 302 | padding: 10px; | ||
| 303 | font-size: 14px; | ||
| 304 | color: #606266; | ||
| 305 | |||
| 306 | } | ||
| 307 | li:hover{ | ||
| 308 | color: #0F93F6; | ||
| 309 | cursor:pointer | ||
| 310 | } | ||
| 311 | } | ||
| 312 | } | ||
| 313 | .tabsList-right{ | ||
| 314 | .fenpin{ | ||
| 315 | min-width: 50%; | ||
| 316 | border-right: 1px solid #EBEEF5; | ||
| 317 | } | ||
| 318 | width: 100%; | ||
| 319 | background-color: #ffffff; | ||
| 320 | z-index: 100; | ||
| 321 | @include flex; | ||
| 322 | } | ||
| 227 | } | 323 | } |
| 228 | 324 | ||
| 229 | .tabsList-title { | 325 | .tabsList-title { | ... | ... |
-
Please register or sign in to post a comment