liuleilei
2023-09-11 faf1d3cc35a3a5f83558946c8056537a4d77fa1f
minipro_standard/pages_adjust/pages/processPlan/processPlan.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,340 @@
<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>