| ¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <view class="content"> |
| | | <view class="content_search"> |
| | | <Search @searchInput="searchInput" @submit="submit" placeholder="æç´¢ç©æåç§°/ç¼ç /å·¥åºåç§°" /> |
| | | </view> |
| | | <view class="content_list"> |
| | | <scroll-view @scrolltolower="getLists" scroll-y :style="{height: height}"> |
| | | <view class="content_list_item" v-for="(item, i) in listData" :key="i" @click="clickItem(item)"> |
| | | <view class="content_list_item_title"> |
| | | <text>{{item.materialName}}ï½{{item.produceName}}</text> |
| | | <view class="content_list_item_title_tips" v-if="item.urgent">ä¼å
{{ item.urgent }}</view> |
| | | </view> |
| | | <view class="content_list_item_nr"> |
| | | <view class="content_list_item_nr_box"> |
| | | <view class="label">ç©æç¼ç ï¼</view> |
| | | <view class="cr">{{item.materialName}}丨{{item.materialCode}}</view> |
| | | </view> |
| | | <view class="content_list_item_nr_box"> |
| | | <view class="label">è®¡åæ°éï¼</view> |
| | | <view class="cr">{{item.num}}{{item.umodel.name}}</view> |
| | | </view> |
| | | <view class="content_list_item_nr_box"> |
| | | <view class="label">è®¡åæ¥æï¼</view> |
| | | <view class="cr">{{item.workPlanStartDate}} ~ {{item.workPlanEndDate}}</view> |
| | | </view> |
| | | <view class="content_list_item_nr_box"> |
| | | <view class="label">计ååï¼</view> |
| | | <view class="cr">{{item.planUserName}}</view> |
| | | </view> |
| | | <view class="content_list_item_nr_box"> |
| | | <view class="label">çäº§æ¹æ¬¡ï¼</view> |
| | | <view class="cr">{{item.batch}}</view> |
| | | </view> |
| | | <view class="content_list_item_nr_box" v-if="item.salesOrder"> |
| | | <view class="label">éå®è®¢åï¼</view> |
| | | <view class="cr">{{ item.salesOrder }}</view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </scroll-view> |
| | | </view> |
| | | </view> |
| | | </template> |
| | | |
| | | <script> |
| | | import Search from '@/components/Search.vue' |
| | | import { getList } from "@/util/api/PlanningAPI" |
| | | |
| | | export default { |
| | | components: { |
| | | Search |
| | | }, |
| | | data() { |
| | | return { |
| | | pageData: { |
| | | capacity: 10, |
| | | page: 0, |
| | | total: 0, |
| | | name: '' |
| | | }, |
| | | loading: false, |
| | | finished: false, |
| | | refreshing: false, |
| | | height: '', |
| | | listData: [] |
| | | }; |
| | | }, |
| | | onReady() { |
| | | var that = this |
| | | this.$nextTick(() => { |
| | | uni.createSelectorQuery().in(this).select('.content_search').boundingClientRect((rect) => { |
| | | that.height = `calc(100vh - ${rect.height}px)` |
| | | }).exec() |
| | | }) |
| | | }, |
| | | onLoad() { |
| | | this.getLists() |
| | | }, |
| | | methods: { |
| | | clickItem(obj) { |
| | | uni.$emit('update', {obj}) |
| | | uni.navigateBack({ delta: 1 }); |
| | | }, |
| | | // è·å头é¨ç»ä»¶é«åº¦ |
| | | getHeight(height) { |
| | | this.height = height |
| | | }, |
| | | // æç´¢ |
| | | searchInput(val) { |
| | | this.listData.mixParam = val |
| | | this.listData.page = 0 |
| | | this.finished = false |
| | | this.lists = [] |
| | | this.getLists() |
| | | }, |
| | | // æç´¢å¼¹æ¡æäº¤ |
| | | submit() { |
| | | this.pageData.page = 0 |
| | | this.finished.value = false |
| | | this.listData.value = [] |
| | | this.getLists() |
| | | }, |
| | | // è·å计ååè¡¨æ°æ® |
| | | getLists() { |
| | | if (!this.finished) { |
| | | this.pageData.page = this.pageData.page + 1 |
| | | this.loading = true |
| | | getList({ |
| | | capacity: this.pageData.capacity, |
| | | page: this.pageData.page, |
| | | model: { |
| | | mixParam: this.pageData.name, |
| | | statusList: [1, 4], |
| | | paused: 0 |
| | | }, |
| | | sorts: [ |
| | | { direction: 'DESC', property: 'CREATE_TIME' } |
| | | ] |
| | | }).then(res => { |
| | | if (this.refreshing) { |
| | | this.listData = [] |
| | | this.refreshing = false; |
| | | } |
| | | this.loading = false |
| | | if (res.code === 200 && res.data.records && res.data.records.length !== 0) { |
| | | this.pageData.total = res.data.total |
| | | this.listData.push(...res.data.records) |
| | | } else { |
| | | this.finished = true |
| | | } |
| | | }).catch(err => { |
| | | this.loading = false |
| | | this.finished = true |
| | | if (this.refreshing) { |
| | | this.listData = [] |
| | | this.refreshing = false; |
| | | } |
| | | }) |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .content { |
| | | .content_search { |
| | | width: 100%; |
| | | padding: 30rpx; |
| | | background: white; |
| | | position: sticky; |
| | | top: 0; |
| | | z-index: 999; |
| | | box-sizing: border-box; |
| | | |
| | | .Search_item { |
| | | margin-bottom: 40rpx; |
| | | |
| | | .Search_item_label { |
| | | font-size: 30rpx; |
| | | font-weight: 500; |
| | | color: #222222; |
| | | } |
| | | |
| | | .Search_item_content { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | margin-top: 30rpx; |
| | | |
| | | .tag { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | align-items: center; |
| | | |
| | | .tag_active { |
| | | background: $nav-color !important; |
| | | color: #ffffff !important; |
| | | } |
| | | |
| | | .tag_item { |
| | | padding: 22rpx 26rpx; |
| | | box-sizing: border-box; |
| | | background: #F2F2F2; |
| | | border-radius: 8rpx; |
| | | font-size: 26rpx; |
| | | font-weight: 400; |
| | | color: #333333; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | margin-right: 22rpx; |
| | | margin-bottom: 22rpx; |
| | | } |
| | | } |
| | | |
| | | text { |
| | | font-size: 26rpx; |
| | | font-weight: 400; |
| | | color: #333333; |
| | | margin: 0 30rpx; |
| | | } |
| | | |
| | | .Search_item_content_a { |
| | | padding: 20rpx 0; |
| | | flex: 1; |
| | | background: #F7F7F7; |
| | | border-radius: 8rpx; |
| | | border: 1rpx solid #EEEEEE; |
| | | font-size: 26rpx; |
| | | font-weight: 400; |
| | | color: #B2B2B2; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .content_search_x { |
| | | height: 24rpx; |
| | | } |
| | | } |
| | | |
| | | .content_list { |
| | | width: 100%; |
| | | display: flex; |
| | | flex-direction: column; |
| | | |
| | | .content_list_item { |
| | | width: 100%; |
| | | box-sizing: border-box; |
| | | padding: 30rpx; |
| | | background: #ffffff; |
| | | margin-bottom: 20rpx; |
| | | &:last-child { |
| | | margin-bottom: 0 !important; |
| | | } |
| | | .content_list_item_title { |
| | | display: flex; |
| | | align-items: center; |
| | | .content_list_item_title_tips { |
| | | padding: 4rpx 8rpx; |
| | | box-sizing: border-box; |
| | | background: #DE5243; |
| | | border-radius: 8rpx; |
| | | font-size: 22rpx; |
| | | font-family: PingFangSC-Regular, PingFang SC; |
| | | font-weight: 400; |
| | | color: #FFFFFF; |
| | | margin-left: 16rpx; |
| | | } |
| | | .warning { |
| | | color: $nav-stateColor1 !important; |
| | | } |
| | | .green { |
| | | color: $nav-stateColor6 !important; |
| | | } |
| | | text { |
| | | font-size: 32rpx; |
| | | font-family: PingFangSC-Medium, PingFang SC; |
| | | font-weight: 500; |
| | | color: #333333; |
| | | } |
| | | } |
| | | .content_list_item_nr { |
| | | padding: 24rpx 30rpx; |
| | | background: #F7F7F7; |
| | | border-radius: 16rpx; |
| | | margin-top: 30rpx; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | flex-wrap: wrap; |
| | | .content_list_item_nr_boxs { |
| | | width: 45%; |
| | | display: flex; |
| | | margin-top: 24rpx; |
| | | &:nth-child(1) { |
| | | margin-top: 0; |
| | | } |
| | | &:nth-child(2) { |
| | | margin-top: 0; |
| | | } |
| | | .warning { |
| | | color: $nav-stateColor4 !important; |
| | | } |
| | | .label { |
| | | flex-shrink: 0; |
| | | font-size: 24rpx; |
| | | font-weight: 400; |
| | | color: #666666; |
| | | } |
| | | .cr { |
| | | flex: 1; |
| | | font-size: 24rpx; |
| | | font-weight: 400; |
| | | color: #222222; |
| | | overflow: hidden; |
| | | white-space: nowrap; |
| | | text-overflow: ellipsis; |
| | | -o-text-overflow:ellipsis; |
| | | } |
| | | } |
| | | .content_list_item_nr_box { |
| | | width: 100%; |
| | | display: flex; |
| | | margin-top: 24rpx; |
| | | &:nth-child(1) { |
| | | margin-top: 0; |
| | | } |
| | | .label { |
| | | font-size: 24rpx; |
| | | font-weight: 400; |
| | | color: #666666; |
| | | flex-shrink: 0; |
| | | } |
| | | .cr { |
| | | font-size: 24rpx; |
| | | font-weight: 400; |
| | | color: #222222; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .content_total { |
| | | width: 100%; |
| | | height: 80rpx; |
| | | padding: 24rpx 30rpx; |
| | | background: #F7F7F7; |
| | | font-size: 24rpx; |
| | | font-weight: 400; |
| | | box-sizing: border-box; |
| | | color: #666666; |
| | | position: sticky; |
| | | z-index: 99; |
| | | } |
| | | } |
| | | </style> |