Merge remote-tracking branch 'origin/dev' into dev

liuleilei

2023-09-11 faf1d3cc35a3a5f83558946c8056537a4d77fa1f

 minipro_standard/pages/plannedDistribution/plannedDistribution.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,422 @@
<template>
   <view class="content">
      <view class="content_search">
         <Search @searchInput="searchInput" placeholder="搜索物料名称/编码"></Search>
         <view class="content_search_x" v-if="tagList.length > 0"></view>
         <LabelSelection :TagList="tagList" :isShow="true" @change="clickTag" />
      </view>
      <view class="content_total" :style="{top: top}">共{{search.total}}条数据</view>
      <view class="content_list">
         <scroll-view
         :refresher-enabled="true"
         :refresher-triggered="isLoading"
         @refresherrefresh="onRefresh"
         refresher-background="#fff"
         @scrolltolower="getLists"
         scroll-y
         :style="{height: height}">
            <view class="fp_list_item" v-for="(item, i) in list" :key="item.id" @click="clickItem(i)">
               <view class="fp_list_item_header">
                  <u-checkbox :checked="item.isActive"></u-checkbox>
                  <text v-if="item.mmodel">{{item.mmodel.name}}</text>
                  <view class="tags" v-if="item.urgent">优先{{item.urgent}}</view>
                  <view class="warning" v-if="item.type === 2">返工</view>
                  <view class="warning success" v-else-if="item.type === 0">正常</view>
                  <view class="warning fail" v-else-if="item.type === 1">异常</view>
               </view>
               <view class="fp_list_item_nr">
                  <view class="item" v-if="item.pmodel">
                     <view class="item_label">工序名称：</view>
                     <view class="item_nr">{{item.pmodel.name}}</view>
                  </view>
                  <view class="item">
                     <view class="item_label">计划日期：</view>
                     <view class="item_nr">{{item.planDate}}</view>
                  </view>
                  <view class="item">
                     <view class="item_label">计划数量：</view>
                     <view class="item_nr">{{item.num}}</view>
                  </view>
                  <view class="item">
                     <view class="item_label">生产批次：</view>
                     <view class="item_nr">{{item.batch}}</view>
                  </view>
                  <view class="item">
                     <view class="item_label">库存：</view>
                     <view class="item_nr">{{item.isStock === 0 ? '不满足' : '满足'}}</view>
                  </view>
               </view>
            </view>
         </scroll-view>
      </view>
      <view class="fp_zw"></view>
      <view class="fp_footer">
         <view class="fp_footer_button" @click="submit">分配</view>
      </view>
   </view>
</template>

<script>
   import Search from '@/components/Search.vue'
   import LabelSelection from '@/components/LabelSelection.vue'
   import { getList, getSelfList } from '@/util/api/PlanningAPI'
   export default {
      components: { Search, LabelSelection },
      data() {
         return {
            height: '',
            top: '',
            isLoading: false,
            search: {
               gxId: '',
               capacity: 10,
               page: 0,
               total: 0,
               mixParam: '',
               first: true // ç”¨äºŽåˆ¤æ–­æ˜¯å¦æ˜¯ç¬¬ä¸€æ¬¡è¿›å…¥é¡µé¢
            },
            tagList: [],
            finished: false,
            loading: false,
            refreshing: false,
            list: []
         };
      },
      onReady() {
         var that = this
         this.$nextTick(() => {
            uni.createSelectorQuery().in(this).select('.content_search').boundingClientRect((rect) => {
               that.height = `calc(100vh - ${rect.height + 80}px)`
               that.top = `${rect.height}px`
            }).exec()
         })
      },
      onLoad() {
         this.getLists()
      },
      methods: {
         // ä¸‹æ‹‰åˆ·æ–°
         onRefresh() {
            if (this.isLoading) return
            this.isLoading = true
            this.search.page = 0
            this.list = []
            this.finished = false
            this.getLists()
         },
         // ç‚¹å‡»å½“前项
         clickItem(i) {
            this.list.forEach((item, index) => {
               item.isActive = i === index;
            })
         },
         // æœç´¢
         searchInput(e) {
            this.search.mixParam = e
            this.search.page = 0
            this.list = []
            this.finished = false
            this.getLists()
         },
         // ç‚¹å‡»
         clickTag(id) {
            this.search.gxId = id
            this.list = []
            this.search.page = 0
            this.finished = false
            this.getLists()
         },
         // åˆ†é…
         submit() {
            let data;
            this.list.forEach((item) => {
               if (item.isActive) {
                  data = item
               }
            })
            if (!data) {
               uni.showToast({ title: '至少选择一项计划！', icon: 'none', duration: 2000 });
               return
            }
            uni.navigateTo({
               url: `/pages/allocation/allocation?gxid=${data.procedureId}&jhid=${data.id}&num=${data.workorderDistributNum ? data.num - data.workorderDistributNum : data.num}`
            });
         },
         // èŽ·å–当前用户所分配的工序
         async getWorkingProcedures() {
            let res = await getSelfList({})
            if (res.code === 200 && res.data.length > 0) {
               let arr = []
               res.data.forEach((item) => {
                  arr.push({ name: item.name, id: item.id })
               })
               this.search.gxId = arr[0].id
               this.tagList = arr
               return true
            }
            return false
         },
         // èŽ·å–计划列表数据
         async getLists() {
            if (!this.finished) {
               this.loading = true
               this.search.page = this.search.page += 1
               if (this.search.first) {     // å¦‚果是第一次，先请求工序
                  await this.getWorkingProcedures()
                  let res = await getList({
                     capacity: this.search.capacity,
                     page: this.search.page,
                     model: {
                        mixParam: this.search.mixParam,
                        procedureId: this.search.gxId,
                        statusList: [1, 4]
                     }
                  })
                  this.isLoading = false
                  this.loading = false
                  if (this.refreshing) {
                     this.list = []
                     this.refreshing = false;
                  }
                  if (res.code === 200 && res.data.records.length !== 0) {
                     this.search.total = res.data.total
                     res.data.records.forEach((item) => {
                        item.isActive = false
                     })
                     this.list.push(...res.data.records)
                  } else {
                     this.finished = true;
                  }
                  this.search.first = false
               } else {
                  let res = await getList({
                     capacity: this.search.capacity,
                     page: this.search.page,
                     model: {
                        mixParam: this.search.mixParam,
                        procedureId: this.search.gxId,
                        statusList: [1, 4]
                     }
                  })
                  this.isLoading = false
                  if (this.refreshing) {
                     this.list = []
                     this.refreshing = false;
                  }
                  this.loading = false
                  if (res.code === 200 && res.data.records.length !== 0) {
                     res.data.records.forEach((item) => {
                        item.isActive = false
                     })
                     this.list.push(...res.data.records)
                     this.search.total = res.data.total
                  } else {
                     this.finished = true;
                  }
               }
            }
         }
      }
   }
</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;
         .fp_list_item {
            background: white;
            display: flex;
            flex-direction: column;
            padding: 30rpx;
            border-bottom: 1rpx solid #ececec;
            .fp_list_item_header {
               display: flex;
               align-items: center;
               text {
                  max-width: 64%;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  -o-text-overflow: ellipsis;
                  font-size: 32rpx;
                  font-weight: 500;
                  color: #333333;
                  margin-left: 14rpx;
               }
               .tags {
                  flex-shrink: 0;
                  margin-left: 16rpx;
                  padding: 5rpx 10rpx;
                  background: $nav-stateColor4;
                  border-radius: 8rpx;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  font-size: 22rpx;
                  font-weight: 400;
                  color: #FFFFFF;
               }
               .fail {
                  background: $nav-stateColor4 !important;
               }
               .success {
                  background: $nav-stateColor2 !important;
               }
               .warning {
                  flex-shrink: 0;
                  margin-left: 16rpx;
                  padding: 5rpx 10rpx;
                  background: $nav-stateColor5;
                  border-radius: 8rpx;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  font-size: 22rpx;
                  font-weight: 400;
                  color: #FFFFFF;
               }
            }
            .fp_list_item_nr {
               padding: 24rpx 30rpx;
               background: #F7F7F7;
               border-radius: 16rpx;
               margin-top: 32rpx;
               display: flex;
               align-items: flex-start;
               flex-wrap: wrap;
               .item {
                  display: flex;
                  align-items: flex-start;
                  width: 50%;
                  margin-top: 24rpx;
                  &:nth-child(1) {
                     margin-top: 0!important;
                  }
                  &:nth-child(2) {
                     margin-top: 0!important;
                  }
                  .item_label {
                     width: 130rpx;
                     flex-shrink: 0;
                     font-size: 24rpx;
                     font-weight: 400;
                     color: #666666;
                     text-align: right;
                  }
                  .item_nr {
                     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;
      }
      .fp_zw {
         height: calc(98rpx + env(safe-area-inset-bottom));
      }
      .fp_footer {
         width: 100%;
         padding-bottom: env(safe-area-inset-bottom);
         position: fixed;
         bottom: 0;
         left: 0;
         background: #ffffff;
         .fp_footer_button {
            width: 272rpx;
            height: 98rpx;
            background: $nav-color;
            font-size: 32rpx;
            font-weight: 500;
            color: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: center;
            float: right;
         }
      }
   }
</style>