Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
be3f5528 by 蔡俊立
Options

Merge branch 'master' of http://yun.pashanhoo.com:9090/bdc/bdcdj-web

2 parents 44d4c51e c9f6c360
Expand all
Inline Side-by-side
Showing 14 changed files with 215 additions and 298 deletions
...@@ -59,7 +59,7 @@ export default { ...@@ -59,7 +59,7 @@ export default {
59 }, 59 },
60 heightNum: { 60 heightNum: {
61 type: Number, 61 type: Number,
62 default: 275, 62 default: 265,
63 }, 63 },
64 maxHeight: { 64 maxHeight: {
65 type: Number, 65 type: Number,
......
...@@ -19,7 +19,7 @@ export default { ...@@ -19,7 +19,7 @@ export default {
19 <style lang="scss" scoped> 19 <style lang="scss" scoped>
20 .hasTagsView { 20 .hasTagsView {
21 .app-main { 21 .app-main {
22 height: calc(100% - 48px); 22 height: calc(100% - 41px);
23 overflow-x: auto; 23 overflow-x: auto;
24 padding: 5px; 24 padding: 5px;
25 box-sizing: border-box; 25 box-sizing: border-box;
......
...@@ -206,15 +206,5 @@ export default { ...@@ -206,15 +206,5 @@ export default {
206 } 206 }
207 } 207 }
208 } 208 }
209
210 /*2.隐藏滚动条，太丑了*/
211 .el-drawer__container ::-webkit-scrollbar {
212 display: none;
213
214 }
215
216 .el-form-item--small .el-form-item__label {
217 width: 80px !important;
218 }
219 } 209 }
220 </style> 210 </style>
......
...@@ -9,32 +9,32 @@ const tagAndTagSpacing = 4 // tagAndTagSpacing ...@@ -9,32 +9,32 @@ const tagAndTagSpacing = 4 // tagAndTagSpacing
9 9
10 export default { 10 export default {
11 name: 'ScrollPane', 11 name: 'ScrollPane',
12 data() { 12 data () {
13 return { 13 return {
14 left: 0 14 left: 0
15 } 15 }
16 }, 16 },
17 computed: { 17 computed: {
18 scrollWrapper() { 18 scrollWrapper () {
19 return this.$refs.scrollContainer.$refs.wrap 19 return this.$refs.scrollContainer.$refs.wrap
20 } 20 }
21 }, 21 },
22 mounted() { 22 mounted () {
23 this.scrollWrapper.addEventListener('scroll', this.emitScroll, true) 23 this.scrollWrapper.addEventListener('scroll', this.emitScroll, true)
24 }, 24 },
25 beforeDestroy() { 25 beforeDestroy () {
26 this.scrollWrapper.removeEventListener('scroll', this.emitScroll) 26 this.scrollWrapper.removeEventListener('scroll', this.emitScroll)
27 }, 27 },
28 methods: { 28 methods: {
29 handleScroll(e) { 29 handleScroll (e) {
30 const eventDelta = e.wheelDelta || -e.deltaY * 40 30 const eventDelta = e.wheelDelta || -e.deltaY * 40
31 const $scrollWrapper = this.scrollWrapper 31 const $scrollWrapper = this.scrollWrapper
32 $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4 32 $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
33 }, 33 },
34 emitScroll() { 34 emitScroll () {
35 this.$emit('scroll') 35 this.$emit('scroll')
36 }, 36 },
37 moveToTarget(currentTag) { 37 moveToTarget (currentTag) {
38 const $container = this.$refs.scrollContainer.$el 38 const $container = this.$refs.scrollContainer.$el
39 const $containerWidth = $container.offsetWidth 39 const $containerWidth = $container.offsetWidth
40 const $scrollWrapper = this.scrollWrapper 40 const $scrollWrapper = this.scrollWrapper
...@@ -82,15 +82,14 @@ export default { ...@@ -82,15 +82,14 @@ export default {
82 position: relative; 82 position: relative;
83 overflow: hidden; 83 overflow: hidden;
84 width: 100%; 84 width: 100%;
85 ::v-deep { 85 height: 100%;
86 .el-scrollbar__bar { 86 }
87 bottom: 0px; 87
88 width: 0; 88 /deep/ .el-scrollbar__view {
89 } 89 display: inline-block !important;
90 .el-scrollbar__wrap { 90 }
91 height: 48px; 91
92 line-height: 48px; 92 /deep/ .el-scrollbar__wrap {
93 } 93 overflow-x: hidden !important;
94 }
95 } 94 }
96 </style> 95 </style>
......
1 <template> 1 <template>
2 <div id="tags-view-container" class="tags-view-container"> 2 <div id="tags-view-container" class="tags-view-container">
3 <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll"> 3 <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
4 <p class="pane-mask-left"></p> 4 <router-link v-for="tag in visitedViews" ref="tag" :key="tag.path" :class="isActive(tag)?'active':''"
5 <router-link v-for="tag in visitedViews" ref="tag" :key="tag.path" :class="isActive(tag) ? 'active' : ''"
6 :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }" tag="span" class="tags-view-item" 5 :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }" tag="span" class="tags-view-item"
7 @click.middle.native="!isAffix(tag) ? closeSelectedTag(tag) : ''" 6 @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
8 @contextmenu.prevent.native="openMenu(tag, $event)"> 7 @contextmenu.prevent.native="openMenu(tag,$event)">
9 {{ tag.title }} 8 {{ tag.title }}
10 <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" /> 9 <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
11 </router-link> 10 </router-link>
12 <p class="pane-mask-right"></p>
13 </scroll-pane> 11 </scroll-pane>
14 <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu"> 12 <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
15 <li @click="refreshSelectedTag(selectedTag)">刷新</li> 13 <li @click="refreshSelectedTag(selectedTag)">Refresh</li>
16 <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">关闭</li> 14 <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">Close</li>
17 <li @click="closeOthersTags">关闭其他</li> 15 <li @click="closeOthersTags">Close Others</li>
18 <li @click="closeAllTags(selectedTag)">关闭全部</li> 16 <li @click="closeAllTags(selectedTag)">Close All</li>
19 </ul> 17 </ul>
20 </div> 18 </div>
21 </template> 19 </template>
...@@ -89,7 +87,7 @@ export default { ...@@ -89,7 +87,7 @@ export default {
89 return tags 87 return tags
90 }, 88 },
91 initTags () { 89 initTags () {
92 const affixTags = (this.affixTags = this.filterAffixTags(this.routes)) 90 const affixTags = this.affixTags = this.filterAffixTags(this.routes)
93 for (const tag of affixTags) { 91 for (const tag of affixTags) {
94 // Must have tag name 92 // Must have tag name
95 if (tag.name) { 93 if (tag.name) {
...@@ -130,21 +128,17 @@ export default { ...@@ -130,21 +128,17 @@ export default {
130 }) 128 })
131 }, 129 },
132 closeSelectedTag (view) { 130 closeSelectedTag (view) {
133 this.$store 131 this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
134 .dispatch('tagsView/delView', view) 132 if (this.isActive(view)) {
135 .then(({ visitedViews }) => { 133 this.toLastView(visitedViews, view)
136 if (this.isActive(view)) { 134 }
137 this.toLastView(visitedViews, view) 135 })
138 }
139 })
140 }, 136 },
141 closeOthersTags () { 137 closeOthersTags () {
142 this.$router.push(this.selectedTag) 138 this.$router.push(this.selectedTag)
143 this.$store 139 this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
144 .dispatch('tagsView/delOthersViews', this.selectedTag) 140 this.moveToCurrentTag()
145 .then(() => { 141 })
146 this.moveToCurrentTag()
147 })
148 }, 142 },
149 closeAllTags (view) { 143 closeAllTags (view) {
150 this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => { 144 this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
...@@ -168,14 +162,13 @@ export default { ...@@ -168,14 +162,13 @@ export default {
168 this.$router.push('/') 162 this.$router.push('/')
169 } 163 }
170 } 164 }
171 console.log(this.$store.state.tagsView.visitedViews);
172 }, 165 },
173 openMenu (tag, e) { 166 openMenu (tag, e) {
174 const menuMinWidth = 95 167 const menuMinWidth = 105
175 const offsetLeft = this.$el.getBoundingClientRect().left // container margin left 168 const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
176 const offsetWidth = this.$el.offsetWidth // container width 169 const offsetWidth = this.$el.offsetWidth // container width
177 const maxLeft = offsetWidth - menuMinWidth // left boundary 170 const maxLeft = offsetWidth - menuMinWidth // left boundary
178 const left = e.clientX - offsetLeft + 210 // 15: margin right 171 const left = e.clientX - offsetLeft + 15 // 15: margin right
179 172
180 if (left > maxLeft) { 173 if (left > maxLeft) {
181 this.left = maxLeft 174 this.left = maxLeft
...@@ -199,52 +192,29 @@ export default { ...@@ -199,52 +192,29 @@ export default {
199 192
200 <style lang="scss" scoped> 193 <style lang="scss" scoped>
201 .tags-view-container { 194 .tags-view-container {
202 height: 48px; 195 height: 40px;
203 line-height: 48px;
204 width: 100%; 196 width: 100%;
205 background: #EDF1F7; 197 background: #fff;
206 border-bottom: 1px solid #E4EBF4; 198 border-bottom: 1px solid #d8dce5;
207 box-shadow: 0 1px 3px 0 rgba(147, 173, 209, 0.12); 199 box-sizing: border-box;
200 padding-top: 3px;
201 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
208 202
209 .tags-view-wrapper { 203 .tags-view-wrapper {
210 .el-scrollbar__view {
211 position: relative;
212
213 .pane-mask-left,
214 .pane-mask-right {
215 position: absolute;
216 top: 8px;
217 height: 33px;
218 z-index: 1;
219 background: #EDF1F7!important;
220
221 }
222
223 .pane-mask-left {
224 width: 15px;
225 left: 0;
226 background-image: linear-gradient(270deg, rgba(255, 255, 255, 0.00) 20%, #FFFFFF 33%);
227 }
228
229 .pane-mask-right {
230 width: 30px;
231 right: 0;
232 background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 5%, #FFFFFF 30%);
233 }
234 }
235
236 .tags-view-item { 204 .tags-view-item {
237 display: inline-block; 205 display: inline-block;
238 position: relative; 206 position: relative;
239 cursor: pointer; 207 cursor: pointer;
240 height: 31px; 208 height: 26px;
241 line-height: 29px; 209 line-height: 26px;
242 color: #686666; 210 border: 1px solid #d8dce5;
243 background: #D8DFE6; 211 color: #495060;
244 padding: 0 20px 0 20px; 212 background: #fff;
245 font-size: 16px; 213 padding: 0 8px;
246 margin-top: 5px; 214 font-size: 12px;
247 border-radius: 8px 8px 0 0; 215 margin-left: 5px;
216 margin-top: 4px;
217
248 &:first-of-type { 218 &:first-of-type {
249 margin-left: 15px; 219 margin-left: 15px;
250 } 220 }
...@@ -254,20 +224,21 @@ export default { ...@@ -254,20 +224,21 @@ export default {
254 } 224 }
255 225
256 &.active { 226 &.active {
257 color: #0f93f6; 227 background-color: #42b983;
258 background: #ffffff; 228 color: #fff;
259 // &::before { 229 border-color: #42b983;
260 // content: ''; 230
261 // background: #0F93F6; 231 &::before {
262 // display: inline-block; 232 content: '';
263 // width: 8px; 233 background: #fff;
264 // height: 8px; 234 display: inline-block;
265 // border-radius: 50%; 235 width: 8px;
266 // position: relative; 236 height: 8px;
267 // margin-right: 2px; 237 border-radius: 50%;
268 // } 238 position: relative;
239 margin-right: 2px;
240 }
269 } 241 }
270
271 } 242 }
272 } 243 }
273 244
...@@ -278,22 +249,19 @@ export default { ...@@ -278,22 +249,19 @@ export default {
278 position: absolute; 249 position: absolute;
279 list-style-type: none; 250 list-style-type: none;
280 padding: 5px 0; 251 padding: 5px 0;
252 border-radius: 4px;
281 font-size: 12px; 253 font-size: 12px;
282 font-weight: 400; 254 font-weight: 400;
283 color: #333; 255 color: #333;
284 border: 1px solid #EBEEF5; 256 box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
285 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12);
286 border-radius: 4px 0 0 4px 4px;
287 257
288 li { 258 li {
289 height: 29px;
290 line-height: 29px;
291 margin: 0; 259 margin: 0;
292 padding: 0px 16px; 260 padding: 7px 16px;
293 cursor: pointer; 261 cursor: pointer;
294 262
295 &:hover { 263 &:hover {
296 background: #F6F7F9; 264 background: #eee;
297 } 265 }
298 } 266 }
299 } 267 }
...@@ -304,24 +272,19 @@ export default { ...@@ -304,24 +272,19 @@ export default {
304 //reset element css of el-icon-close 272 //reset element css of el-icon-close
305 .tags-view-wrapper { 273 .tags-view-wrapper {
306 .tags-view-item { 274 .tags-view-item {
307 text-align: justify;
308 margin-right: 8px;
309
310 .el-icon-close { 275 .el-icon-close {
311 height: 16px;
312 width: 16px; 276 width: 16px;
313 position: relative; 277 height: 16px;
278 vertical-align: 2px;
314 border-radius: 50%; 279 border-radius: 50%;
315 text-align: center; 280 text-align: center;
316 line-height: 16px; 281 transition: all .3s cubic-bezier(.645, .045, .355, 1);
317 transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
318 transform-origin: 100% 50%; 282 transform-origin: 100% 50%;
319 color: #686666;
320 font-size: 14px;
321 283
322 &:before { 284 &:before {
323 transform: scale(0.8); 285 transform: scale(.6);
324 display: inline-block; 286 display: inline-block;
287 vertical-align: -3px;
325 } 288 }
326 289
327 &:hover { 290 &:hover {
......
...@@ -120,7 +120,6 @@ ...@@ -120,7 +120,6 @@
120 ::-webkit-scrollbar-thumb:hover { 120 ::-webkit-scrollbar-thumb:hover {
121 background-color: rgb(162, 164, 167); 121 background-color: rgb(162, 164, 167);
122 } 122 }
123
124 // element 样式补丁 123 // element 样式补丁
125 .el-menu--horizontal { 124 .el-menu--horizontal {
126 border-bottom: none !important; 125 border-bottom: none !important;
......
...@@ -33,22 +33,6 @@ ...@@ -33,22 +33,6 @@
33 } 33 }
34 } 34 }
35 35
36 .el-scrollbar__bar.is-vertical {
37 right: 0px;
38 }
39
40 .el-scrollbar {
41 height: 100%;
42
43 &::-webkit-scrollbar {
44 display: none;
45 }
46 }
47
48 .is-horizontal {
49 display: none;
50 }
51
52 a { 36 a {
53 display: inline-block; 37 display: inline-block;
54 width: 100%; 38 width: 100%;
......
1 // global transition css
2
3 /* fade */ 1 /* fade */
4 .fade-enter-active, 2 .fade-enter-active,
5 .fade-leave-active { 3 .fade-leave-active {
......
1 <template> 1 <template>
2 <div class="rlPopup"> 2 <div class="rlPopup">
3 <div class="prev handle-btn" v-if="!isSingle" @click="prev()"> 3 <div class="prev handle-btn" @click="prev()">
4 <i class="el-icon-arrow-left"></i> 4 <i class="el-icon-arrow-left"></i>
5 </div> 5 </div>
6 <div class="next handle-btn" v-if="!isSingle" @click="next()"> 6 <div class="next handle-btn" @click="next()">
7 <i class="el-icon-arrow-right"></i> 7 <i class="el-icon-arrow-right"></i>
8 </div> 8 </div>
9 <div class="img-list-wrap"> 9 <div class="img-list-wrap">
10 <div v-for="(img, i) in previewImg.imgList" :key="i"> 10 <div v-for="(img, i) in previewImg.imgList" :key="i">
11 <photo-zoom :url="img.fjurl" :bigWidth="165" v-if="i === previewImg.index" :scale="2" 11 <photo-zoom :url="img.fjurl" :bigWidth="165" v-if="i === previewImg.index" :scale="2"
12 overlayStyle="width: 100%;height: 563px;"> 12 overlayStyle="width: 100%;height:100%">
13 </photo-zoom> 13 </photo-zoom>
14 </div> 14 </div>
15 </div> 15 </div>
...@@ -78,9 +78,6 @@ export default { ...@@ -78,9 +78,6 @@ export default {
78 this.thumbnailImages = this.previewImg.imgList 78 this.thumbnailImages = this.previewImg.imgList
79 }, 79 },
80 computed: { 80 computed: {
81 isSingle () {
82 return this.previewImg.imgList.length <= 1
83 },
84 isFirst () { 81 isFirst () {
85 return this.previewImg.index === 0 82 return this.previewImg.index === 0
86 }, 83 },
...@@ -96,7 +93,7 @@ export default { ...@@ -96,7 +93,7 @@ export default {
96 } 93 }
97 return 94 return
98 } 95 }
99 const len = this.previewImg.imgList.length 96 let len = this.previewImg.imgList.length
100 this.$parent.previewImg.index = (this.$parent.previewImg.index - 1 + len) % len 97 this.$parent.previewImg.index = (this.$parent.previewImg.index - 1 + len) % len
101 this.reset() 98 this.reset()
102 }, 99 },
...@@ -106,8 +103,10 @@ export default { ...@@ -106,8 +103,10 @@ export default {
106 this.$parent.previewImg.index = 0 103 this.$parent.previewImg.index = 0
107 } 104 }
108 return 105 return
106 } else {
107 console.log(this.$parent.previewImg.selectedIndex);
109 } 108 }
110 const len = this.previewImg.imgList.length 109 let len = this.previewImg.imgList.length
111 this.$parent.previewImg.index = (this.$parent.previewImg.index + 1) % len 110 this.$parent.previewImg.index = (this.$parent.previewImg.index + 1) % len
112 this.reset() 111 this.reset()
113 }, 112 },
...@@ -204,22 +203,28 @@ export default { ...@@ -204,22 +203,28 @@ export default {
204 height: 66px; 203 height: 66px;
205 line-height: 75px; 204 line-height: 75px;
206 color: #fff; 205 color: #fff;
207 background-color: rgb(198, 198, 198); 206 background-color: rgb(239, 239, 239);
208 border-radius: 4px; 207 border-radius: 50%;
209 cursor: pointer; 208 cursor: pointer;
210 text-align: center; 209 text-align: center;
210 transition: all 0.3s;
211 211
212 i { 212 i {
213 font-size: 24px; 213 font-size: 24px;
214 } 214 }
215 } 215 }
216 216
217 .handle-btn:hover {
218 background-color: rgb(185, 183, 183);
219 }
220
221
217 .prev { 222 .prev {
218 left: 0%; 223 left: 1%;
219 } 224 }
220 225
221 .next { 226 .next {
222 right: 0%; 227 right: 1%;
223 } 228 }
224 229
225 .img-list-wrap { 230 .img-list-wrap {
...@@ -230,6 +235,7 @@ export default { ...@@ -230,6 +235,7 @@ export default {
230 align-items: center; 235 align-items: center;
231 background: rgba(194, 190, 190, 0.1); 236 background: rgba(194, 190, 190, 0.1);
232 overflow: scroll; 237 overflow: scroll;
238
233 img { 239 img {
234 display: block; 240 display: block;
235 object-fit: scale-down; 241 object-fit: scale-down;
......
...@@ -9,18 +9,12 @@ ...@@ -9,18 +9,12 @@
9 <col width="150" /> 9 <col width="150" />
10 <tr> 10 <tr>
11 <td colspan="6" class="title">宗地基本信息</td> 11 <td colspan="6" class="title">宗地基本信息</td>
12 </tr> 12 </tr>
13 <tr>
14 <td colspan="6" class="unit" v-if="zdjbxx.mjdw == '1'">
15 单位：■平方米 □公顷（□亩）、万元
16 </td>
17 <td colspan="6" class="unit" v-else>
18 单位：□平方米 ■公顷（■亩）、万元
19 </td>
20 </tr>
21 <tr> 13 <tr>
22 <td colspan="2">不动产类型</td> 14 <td colspan="2">不动产类型：</td>
23 <td colspan="4">■土地 ■房屋建筑 □构筑物 □森林、林地 □其他</td> 15 <td colspan="2">{{ zdjbxx.bdclx }}</td>
16 <td>单位：</td>
17 <td>{{ zdjbxx.mjdw }}</td>
24 </tr> 18 </tr>
25 <tr> 19 <tr>
26 <td colspan="2">坐落</td> 20 <td colspan="2">坐落</td>
...@@ -37,15 +31,15 @@ ...@@ -37,15 +31,15 @@
37 </tr> 31 </tr>
38 <tr> 32 <tr>
39 <td colspan="2">等级</td> 33 <td colspan="2">等级</td>
40 <td>{{ zdjbxx.dj }}</td> 34 <td>{{ zdjbxx.djmc }}</td>
41 <td>价格</td> 35 <td>价格</td>
42 <td>{{ zdjbxx.jg }}</td> 36 <td>{{ zdjbxx.jg }}</td>
43 </tr> 37 </tr>
44 <tr> 38 <tr>
45 <td colspan="2">权利类型</td> 39 <td colspan="2">权利类型</td>
46 <td>{{ zdjbxx.qllx }}</td> 40 <td>{{ zdjbxx.qllxmc }}</td>
47 <td>权利性质</td> 41 <td>权利性质</td>
48 <td>{{ zdjbxx.qlxz }}</td> 42 <td>{{ zdjbxx.qlxzmc }}</td>
49 </tr> 43 </tr>
50 <tr> 44 <tr>
51 <td colspan="2">权利设定方式</td> 45 <td colspan="2">权利设定方式</td>
...@@ -125,7 +119,7 @@ ...@@ -125,7 +119,7 @@
125 import { getZdjjxxBybdcdyid } from "@/api/registerBook.js"; 119 import { getZdjjxxBybdcdyid } from "@/api/registerBook.js";
126 120
127 export default { 121 export default {
128 data () { 122 data() {
129 return { 123 return {
130 bhqkColumns: [ 124 bhqkColumns: [
131 { 125 {
...@@ -164,16 +158,16 @@ export default { ...@@ -164,16 +158,16 @@ export default {
164 bhqkTableWidth: 745, 158 bhqkTableWidth: 745,
165 zdjbxx: {}, 159 zdjbxx: {},
166 zdbhqks: [], 160 zdbhqks: [],
167 propsParam:this.$attrs, 161 propsParam: this.$attrs,
168 showGroup: false, 162 showGroup: false,
169 }; 163 };
170 }, 164 },
171 created () { 165 created() {
172 this.loadData(); 166 this.loadData();
173 }, 167 },
174 methods: { 168 methods: {
175 loadData () { 169 loadData() {
176 getZdjjxxBybdcdyid({bdcdyid:this.propsParam.bdcdyid}).then((res) => { 170 getZdjjxxBybdcdyid({ bdcdyid: this.propsParam.bdcdyid }).then((res) => {
177 if (res.code === 200) { 171 if (res.code === 200) {
178 this.zdjbxx = res.result.zdjbxx; 172 this.zdjbxx = res.result.zdjbxx;
179 this.zdbhqks = res.result.zdbhqkList; 173 this.zdbhqks = res.result.zdbhqkList;
...@@ -190,71 +184,69 @@ export default { ...@@ -190,71 +184,69 @@ export default {
190 <style lang="scss" scoped> 184 <style lang="scss" scoped>
191 .zdxx { 185 .zdxx {
192 width: 100%; 186 width: 100%;
193 height: calc(100% - 42px); 187 height: 100%;
194 background-color: #f5f5f5; 188 background-color: #f5f5f5;
195 padding: 5px; 189 padding: 5px;
196
197
198 } 190 }
199 .tablebox { 191 .tablebox {
200 overflow-x: auto; 192 overflow-x: auto;
193 width: 100%;
194 height: 100%;
195 background: #fff;
196 border: 1px solid rgb(228, 228, 228);
197 text-align: center;
198 padding: 4px;
199 overflow-y: scroll;
200
201 .zdxxTable {
201 width: 100%; 202 width: 100%;
202 height: 100%; 203 color: #333;
203 background: #fff;
204 border: 1px solid rgb(228, 228, 228);
205 text-align: center;
206 padding: 4px;
207 overflow-y: scroll;
208 204
209 .zdxxTable { 205 td {
210 width: 100%; 206 border: 1px solid rgb(228, 228, 228);
211 min-width: 900px; 207 line-height: 30px;
212 color: #333; 208 padding: 0 4px;
209 }
213 210
214 td { 211 .title {
215 border: 1px solid rgb(228, 228, 228); 212 line-height: 68px;
216 line-height: 30px; 213 font-size: 20px;
217 padding: 0 4px; 214 }
218 }
219 215
220 .title { 216 .unit {
221 line-height: 68px; 217 text-align: right;
222 font-size: 20px; 218 }
223 }
224 219
225 .unit { 220 .title2 {
226 text-align: right; 221 writing-mode: vertical-lr;
227 } 222 letter-spacing: 6px;
223 }
224
225 .bhqk {
226 padding: 0;
228 227
229 .title2 { 228 .box {
230 writing-mode: vertical-lr; 229 width: 745px;
231 letter-spacing: 6px; 230 overflow: auto;
232 } 231 }
233 232
234 .bhqk { 233 .test {
235 padding: 0; 234 }
236 235
237 .box { 236 table {
238 width: 745px; 237 .bhqkTh {
239 overflow: auto; 238 width: 110px;
239 line-height: 40px;
240 background-color: #f5f5f5;
241 border: 1px solid rgb(228, 228, 228);
242 font-weight: bold;
240 } 243 }
241 244
242 .test {} 245 td {
243 246 width: 180px;
244 table {
245 .bhqkTh {
246 width: 110px;
247 line-height: 40px;
248 background-color: #f5f5f5;
249 border: 1px solid rgb(228, 228, 228);
250 font-weight: bold;
251 }
252
253 td {
254 width: 180px;
255 }
256 } 247 }
257 } 248 }
258 } 249 }
259 } 250 }
251 }
260 </style> 252 </style>
......
...@@ -17,16 +17,15 @@ ...@@ -17,16 +17,15 @@
17 <div class="clyl-box" v-else> 17 <div class="clyl-box" v-else>
18 <div class="menu-tree"> 18 <div class="menu-tree">
19 <div class="item"> 19 <div class="item">
20 材料目录 20 材料目录({{tableData.length}})
21 <i :class="iclass" @click="iconClick()"></i> 21 <div>
22 <el-collapse-transition> 22 <div v-for="item in tableData" :key="item.bsmSj"
23 <div v-show="menuOpen"> 23 :class="['child', treeCheckId == item.bsmSj ? 'checked' : '']" @click="treeClick(item)">
24 <div v-for="item in tableData" :key="item.bsmSj" 24 <span v-if="item.isrequired==1" class="required">必选</span>
25 :class="['child', treeCheckId == item.bsmSj ? 'checked' : '']" @click="treeClick(item)"> 25 {{ item.sjmc }}
26 {{ item.sjmc }} 26 <span class="cl_number">({{item.children.length}})</span>
27 </div>
28 </div> 27 </div>
29 </el-collapse-transition> 28 </div>
30 </div> 29 </div>
31 </div> 30 </div>
32 <image-preview ref='imageRef' :previewImg="previewImg" @updateList="updateList" /> 31 <image-preview ref='imageRef' :previewImg="previewImg" @updateList="updateList" />
...@@ -55,8 +54,8 @@ export default { ...@@ -55,8 +54,8 @@ export default {
55 label: "材料预览", 54 label: "材料预览",
56 }, 55 },
57 ], 56 ],
58 menuOpen: true, 57 iclass: "",
59 iclass: "itemIcon el-icon-caret-bottom", 58 // 材料目录选中
60 treeCheckId: "", 59 treeCheckId: "",
61 checkedId: "1", 60 checkedId: "1",
62 column: [ 61 column: [
...@@ -195,16 +194,12 @@ export default { ...@@ -195,16 +194,12 @@ export default {
195 bsmSlsq: this.$parent.bsmSlsq, 194 bsmSlsq: this.$parent.bsmSlsq,
196 index: 0, 195 index: 0,
197 selectedIndex: 0, 196 selectedIndex: 0,
198 imgList: [ 197 imgList: []
199 {
200 fjurl: 'https://img2.baidu.com/it/u=2955521104,3257476296&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1111'
201 }
202 ]
203 } 198 }
204 } 199 }
205 }, 200 },
206 computed: { 201 computed: {
207 ...mapGetters(["dictData"]), 202 ...mapGetters(["dictData"])
208 }, 203 },
209 created () { 204 created () {
210 this.clmlInitList() 205 this.clmlInitList()
...@@ -233,25 +228,25 @@ export default { ...@@ -233,25 +228,25 @@ export default {
233 }) 228 })
234 }, 229 },
235 updateList (val) { 230 updateList (val) {
236 if(val!=null){ //删除最后一张图片时 val=null 231 if (val != null) { //删除最后一张图片时 val=null
237 this.tableData.forEach(item => { 232 this.tableData.forEach(item => {
238 if (item.bsmSj === val.bsmSj) { 233 if (item.bsmSj === val.bsmSj) {
239 item.children = val.children 234 item.children = val.children
235 }
236 })
237 this.previewImg.imgList = _.cloneDeep(val.children)
238 if (this.previewImg.index == this.previewImg.imgList.length) {
239 this.previewImg.index = this.previewImg.index - 1
240 } 240 }
241 }) 241 } else {
242 this.previewImg.imgList = _.cloneDeep(val.children)
243 if (this.previewImg.index == this.previewImg.imgList.length) {
244 this.previewImg.index = this.previewImg.index - 1
245 }
246 }else{
247 this.previewImg.imgList = [] 242 this.previewImg.imgList = []
248 this.tableData.forEach(item => { 243 this.tableData.forEach(item => {
249 if(this.treeCheckId == item.bsmSj){ 244 if (this.treeCheckId == item.bsmSj) {
250 item.children = [] 245 item.children = []
251 } 246 }
252 }) 247 })
253 } 248 }
254 249
255 }, 250 },
256 // 左侧菜单点击 251 // 左侧菜单点击
257 menuClick (item) { 252 menuClick (item) {
...@@ -347,20 +342,12 @@ export default { ...@@ -347,20 +342,12 @@ export default {
347 }) 342 })
348 }) 343 })
349 }, 344 },
350 // 材料目录关闭收起
351 iconClick () {
352 this.menuOpen = !this.menuOpen;
353 if (this.menuOpen) {
354 this.iclass = "itemIcon el-icon-caret-bottom close";
355 } else {
356 this.iclass = "itemIcon el-icon-caret-bottom open";
357 }
358 },
359 // 材料目录点击选中 345 // 材料目录点击选中
360 treeClick (item) { 346 treeClick (item) {
361 this.treeCheckId = item.bsmSj; 347 this.previewImg.index = 0
362 this.previewImg.imgList = item?.children; 348 this.treeCheckId = item.bsmSj
363 this.previewImg.bsmSj = item?.bsmSj; 349 this.previewImg.imgList = item?.children
350 this.previewImg.bsmSj = item?.bsmSj
364 }, 351 },
365 // 小图片点击 352 // 小图片点击
366 imgClick (item, index) { 353 imgClick (item, index) {
...@@ -391,6 +378,16 @@ export default { ...@@ -391,6 +378,16 @@ export default {
391 color: #fff; 378 color: #fff;
392 } 379 }
393 380
381 .required {
382 font-size: 12px;
383 color: $pink;
384 float: left;
385 }
386
387 .cl_number {
388 float: right;
389 }
390
394 .clxx { 391 .clxx {
395 width: 100%; 392 width: 100%;
396 display: flex; 393 display: flex;
...@@ -449,12 +446,14 @@ export default { ...@@ -449,12 +446,14 @@ export default {
449 border-right: 1px dotted #d9d9d9; 446 border-right: 1px dotted #d9d9d9;
450 padding: 0 15px; 447 padding: 0 15px;
451 448
449
452 .item { 450 .item {
453 height: 60px; 451 line-height: 30px;
454 line-height: 60px; 452 padding-top: 5px;
455 border-bottom: 1px solid #e8e8e8; 453 border-bottom: 1px solid #e8e8e8;
456 font-size: 16px; 454 font-size: 16px;
457 color: #4a4a4a; 455 text-align: center;
456 color: $light-blue;
458 457
459 .itemIcon { 458 .itemIcon {
460 float: right; 459 float: right;
...@@ -462,44 +461,26 @@ export default { ...@@ -462,44 +461,26 @@ export default {
462 cursor: pointer; 461 cursor: pointer;
463 } 462 }
464 463
465 @keyframes open {
466 100% {
467 transform: rotate(180deg);
468 }
469 }
470
471 @keyframes close {
472 0% {
473 transform: rotate(180deg);
474 }
475
476 100% {
477 transform: rotate(-0deg);
478 }
479 }
480
481 .open {
482 animation: open 0.5s;
483 animation-fill-mode: both;
484 }
485
486 .close {
487 animation: close 0.5s;
488 animation-fill-mode: both;
489 }
490
491 .child { 464 .child {
492 line-height: 36px; 465 line-height: 32px;
493 border-bottom: 1px solid #e8e8e8; 466 border-bottom: 1px solid #e8e8e8;
494 padding-left: 10px; 467 padding-left: 10px;
495 color: #6b6b6b; 468 color: #6b6b6b;
496 cursor: pointer; 469 cursor: pointer;
497 box-sizing: border-box; 470 box-sizing: border-box;
471 border-radius: 6px;
472 line-height: 24px;
473 transition: all 0.3s;
474 }
475
476 .child:hover {
477 color: $light-blue;
478 transform: scale(1.1);
498 } 479 }
499 480
500 .checked { 481 .checked {
501 border-radius: 6px; 482 border: 1px solid $light-blue;
502 border: 1px solid #4083f9; 483 color: $light-blue;
503 } 484 }
504 } 485 }
505 } 486 }
......
...@@ -117,6 +117,7 @@ ...@@ -117,6 +117,7 @@
117 .svg-icon { 117 .svg-icon {
118 width: 2.5em; 118 width: 2.5em;
119 height: 2.5em; 119 height: 2.5em;
120 transition: all 0.3s;
120 } 121 }
121 122
122 .iconName { 123 .iconName {
...@@ -184,6 +185,10 @@ ...@@ -184,6 +185,10 @@
184 li:hover { 185 li:hover {
185 border: 1px solid #ffffff; 186 border: 1px solid #ffffff;
186 border-radius: 5px; 187 border-radius: 5px;
188
189 .icon {
190 transform: scale(1.3);
191 }
187 } 192 }
188 } 193 }
189 } 194 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -116,7 +116,7 @@ export default { ...@@ -116,7 +116,7 @@ export default {
116 editItem: 'registerBook/djbFrame', // 弹窗内容 116 editItem: 'registerBook/djbFrame', // 弹窗内容
117 formData: scroll, 117 formData: scroll,
118 width:"1220px", 118 width:"1220px",
119 height:"835px", 119 height:"790px",
120 // cancelText: '取消摆烂', // 右边按钮文本 120 // cancelText: '取消摆烂', // 右边按钮文本
121 // confirmText: '确定点击', //左边按钮文本 121 // confirmText: '确定点击', //左边按钮文本
122 cancel: () => { 122 cancel: () => {
......