4 changed files with 218 additions and 19 deletions
			
			
		- 
					10src/api/stockTask/index.js
- 
					183src/views/components/checkSwiper.vue
- 
					30src/views/home.vue
- 
					14src/views/visualCheck/checkManage/dataScreening/girdList.vue
| @ -0,0 +1,183 @@ | |||||
|  | <template> | ||||
|  |   <div> | ||||
|  |     <swiper | ||||
|  |       ref="swiperTitle" | ||||
|  |       class="swiper-title" | ||||
|  |       :options="swiperOptionTitle" | ||||
|  |       :auto-update="true" | ||||
|  |       :auto-destroy="true" | ||||
|  |       :delete-instance-on-destroy="true" | ||||
|  |       :cleanup-styles-on-destroy="true" | ||||
|  |     > | ||||
|  |       <swiper-slide | ||||
|  |         v-for="(item, index) of tabListData" | ||||
|  |         ref="swiperSlideItem" | ||||
|  |         :key="'name' + index" | ||||
|  |         :iname="item.name" | ||||
|  |         class="swiper-slide-title" | ||||
|  |       > | ||||
|  |         <div | ||||
|  |           class="tab-name" | ||||
|  |           :class="{ active: index === swiperActiveIndex }" | ||||
|  |           @click="handleSlidClickFun(index)" | ||||
|  |         > | ||||
|  |           {{ item.name }} | ||||
|  |         </div> | ||||
|  |       </swiper-slide> | ||||
|  |     </swiper> | ||||
|  |     <swiper | ||||
|  |       ref="swiperContent" | ||||
|  |       class="swiper-content" | ||||
|  |       :options="swiperOptionContent" | ||||
|  |       :auto-update="true" | ||||
|  |       :auto-destroy="true" | ||||
|  |       :delete-instance-on-destroy="true" | ||||
|  |       :cleanup-styles-on-destroy="true" | ||||
|  |     > | ||||
|  |       <swiper-slide | ||||
|  |         v-for="(item, index) of tabListData" | ||||
|  |         :key="'content' + index" | ||||
|  |         class="swiper-slide-content" | ||||
|  |       > | ||||
|  |         <el-table | ||||
|  |           :data="bookList" | ||||
|  |           stripe | ||||
|  |           style="width: 100%" | ||||
|  |           height="150" | ||||
|  |         > | ||||
|  |           <el-table-column | ||||
|  |             prop="regionName" | ||||
|  |             label="楼层区域" | ||||
|  |           > | ||||
|  |             <template slot-scope="scope"> | ||||
|  |               {{ scope.row.floorName + scope.row.regionName }} | ||||
|  |             </template> | ||||
|  |           </el-table-column> | ||||
|  |           <el-table-column | ||||
|  |             prop="gridName" | ||||
|  |             label="层位" | ||||
|  |           /> | ||||
|  |           <el-table-column | ||||
|  |             prop="prop" | ||||
|  |             :label="swiperActiveIndex === 1 ? '上架率' :'错架率'" | ||||
|  |             width="80" | ||||
|  |             align="center" | ||||
|  |           > | ||||
|  |             <template slot-scope="scope"> | ||||
|  |               {{ scope.row.prop + '%' }} | ||||
|  |             </template> | ||||
|  |           </el-table-column> | ||||
|  |         </el-table> | ||||
|  |       </swiper-slide> | ||||
|  |     </swiper> | ||||
|  |   </div> | ||||
|  | </template> | ||||
|  | 
 | ||||
|  | <script> | ||||
|  | import { FetchInitErrorProbaDesc, FetchInitSuggestTilting } from '@/api/stockTask/index' | ||||
|  | import { mapGetters } from 'vuex' | ||||
|  | import { swiper, swiperSlide } from 'vue-awesome-swiper' | ||||
|  | import 'swiper/dist/css/swiper.css' | ||||
|  | export default { | ||||
|  |   name: 'BookSwiper', | ||||
|  |   components: { swiper, swiperSlide }, | ||||
|  |   props: { | ||||
|  |   }, | ||||
|  |   data() { | ||||
|  |     const _this = this | ||||
|  |     return { | ||||
|  |       swiperActiveIndex: 0, | ||||
|  |       swiperOptionContent: { | ||||
|  |         slidesPerView: 'auto', | ||||
|  |         on: { | ||||
|  |           slideChangeTransitionStart: function() { | ||||
|  |             _this.swiperActiveIndex = this.activeIndex | ||||
|  |             _this.swiperTitle.slideTo(this.activeIndex, 500, false) | ||||
|  |           } | ||||
|  |         } | ||||
|  |       }, | ||||
|  |       swiperOptionTitle: { | ||||
|  |         slidesPerView: 'auto', | ||||
|  |         freeMode: true | ||||
|  |       }, | ||||
|  |       tabListData: [{ name: '建议顺架' }, { name: '建议倒架' }], | ||||
|  |       bookList: [], | ||||
|  |       swiperParams: {}, | ||||
|  |       swiperShelfParams: {} | ||||
|  |     } | ||||
|  |   }, | ||||
|  |   computed: { | ||||
|  |     ...mapGetters([ | ||||
|  |       'baseApi' | ||||
|  |     ]), | ||||
|  |     swiperContent() { | ||||
|  |       return this.$refs.swiperContent.$el.swiper | ||||
|  |     }, | ||||
|  |     swiperTitle() { | ||||
|  |       return this.$refs.swiperTitle.$el.swiper | ||||
|  |     } | ||||
|  |   }, | ||||
|  |   mounted() { | ||||
|  |     if (this.swiperActiveIndex === 0) { | ||||
|  |       this.getInitErrorProbaDesc() | ||||
|  |     } else { | ||||
|  |       this.getInitSuggestTilting() | ||||
|  |     } | ||||
|  |   }, | ||||
|  |   methods: { | ||||
|  |     handleSlidClickFun(index) { | ||||
|  |       this.handleSlideToFun(index) | ||||
|  |     }, | ||||
|  |     handleSlideToFun(index) { | ||||
|  |       this.bookList = [] | ||||
|  |       this.swiperActiveIndex = index | ||||
|  |       if (this.swiperActiveIndex === 0) { | ||||
|  |         this.getInitErrorProbaDesc() | ||||
|  |       } else { | ||||
|  |         this.getInitSuggestTilting() | ||||
|  |       } | ||||
|  |       this.swiperContent.slideTo(index, 500, false) | ||||
|  |       this.swiperTitle.slideTo(index, 500, false) | ||||
|  |     }, | ||||
|  |     getInitErrorProbaDesc() { | ||||
|  |       const params = this.swiperParams | ||||
|  |       FetchInitErrorProbaDesc(params).then(res => { | ||||
|  |         this.bookList = res.content | ||||
|  |       }).catch(() => { | ||||
|  |       }) | ||||
|  |     }, | ||||
|  |     getInitSuggestTilting() { | ||||
|  |       const params = { | ||||
|  |         orderType: 1 | ||||
|  |       } | ||||
|  |       FetchInitSuggestTilting(params).then(res => { | ||||
|  |         this.bookList = res | ||||
|  |       }).catch(() => { | ||||
|  |       }) | ||||
|  |     } | ||||
|  | 
 | ||||
|  |   } | ||||
|  | } | ||||
|  | </script> | ||||
|  | 
 | ||||
|  | <style lang="scss" scoped> | ||||
|  | .swiper-title{ | ||||
|  |   font-size: 14px; | ||||
|  |   ::v-deep .swiper-wrapper{ | ||||
|  |     margin: 10px 0; | ||||
|  |     border-bottom: 1px solid #EDEFF3; | ||||
|  |   } | ||||
|  | } | ||||
|  | .swiper-slide-title { | ||||
|  | 	width: auto !important; | ||||
|  |   margin-right: 20px; | ||||
|  |   cursor: pointer; | ||||
|  | 	.tab-name { | ||||
|  | 		padding: 10px; | ||||
|  | 		&.active { | ||||
|  | 			color: #0348F3; | ||||
|  |       border-bottom: 3px solid #0348F3; | ||||
|  | 		} | ||||
|  | 	} | ||||
|  | } | ||||
|  | </style> | ||||
						Write
						Preview
					
					
					Loading…
					
					Cancel
						Save
					
		Reference in new issue