#

zhou zhou

17 小时以前 f9cfb2169361c046a00f4fa14ea342bd5710f8b4

 pages/outbound/orderOut/orderList.vue

@@ -2,29 +2,47 @@
   <view class="page-container">
      <!-- 搜索框 -->
      <view class="search-bar">
         <uni-search-bar v-model="condition" placeholder=" 扫码 / 输入" bgColor="#F5F5F5" @confirm="search" @cancel="onCancelSearch" />
         <uni-search-bar
            v-model="condition"
            placeholder=" 扫码 / 输入"
            bgColor="#F5F5F5"
            @confirm="search"
            @cancel="onCancelSearch"
         />
      </view>
		

      <!-- 订单列表 -->
      <view class="order-list">
         <view class="order-card" v-for="(item,i) in matList" :key="i" @click="toPrint(item)">
         <view
            class="order-card"
            v-for="(item, i) in matList"
            :key="i"
            @click="toPrint(item)"
         >
            <!-- 卡片头部 -->
            <view class="card-header">
               <view class="order-badge" :class="getSettleClass(item.exceStatus)">
                  <text class="badge-text">{{item.exceStatus$ || '未知'}}</text>
               <view
                  class="order-badge"
                  :class="getSettleClass(item.exceStatus)"
               >
                  <text class="badge-text">
                     {{ item.exceStatus$ || '未知' }}
                  </text>
               </view>
               <view class="order-no">
                  <text class="order-no-label">单据号</text>
                  <text class="order-no-value">{{item.code}}</text>
                  <text class="order-no-value">{{ item.code }}</text>
               </view>
            </view>
				

            <!-- 卡片内容 -->
            <view class="card-body">
               <view class="info-row">
                  <view class="info-item">
                     <text class="info-label">单据类型</text>
                     <text class="info-value">{{item.wkType$ || '-'}}</text>
                     <text class="info-value">
                        {{ item.wkType$ || '-' }}
                     </text>
                  </view>
                  <!-- <view class="info-item">
                     <text class="info-label">应出数量</text>
@@ -34,355 +52,406 @@
               <view class="info-row">
                  <view class="info-item">
                     <text class="info-label">应出数量</text>
                     <text class="info-value">{{item.anfme || '-'}}</text>
                     <text class="info-value">
                        {{ item.anfme || '-' }}
                     </text>
                  </view>
                  <view class="info-item">
                     <text class="info-label">完成数量</text>
                     <text class="info-value">{{item.qty || '-'}}</text>
                     <text class="info-value">
                        {{ item.qty || '-' }}
                     </text>
                  </view>
               </view>
            </view>
				
				

            <!-- 卡片底部 -->
            <view class="card-footer">
               <text class="view-detail">查看详情</text>
               <uni-icons type="right" size="14" color="#999"></uni-icons>
               <uni-icons
                  type="right"
                  size="14"
                  color="#999"
               ></uni-icons>
            </view>
         </view>
      </view>
		

      <!-- 空状态 -->
      <view class="empty-state" v-if="matList.length === 0 && !loading">
         <uni-icons type="search" size="60" color="#CCCCCC"></uni-icons>
      <view
         class="empty-state"
         v-if="matList.length === 0 && !loading"
      >
         <uni-icons
            type="search"
            size="60"
            color="#CCCCCC"
         ></uni-icons>
         <text class="empty-text">暂无订单数据</text>
         <text class="empty-hint">下拉刷新试试</text>
      </view>
		

      <!-- 加载更多 -->
      <uni-load-more v-show="matList.length !== 0" :status="status" :icon-size="16" :content-text="contentText" />
      <uni-load-more
         v-show="matList.length !== 0"
         :status="status"
         :icon-size="16"
         :content-text="contentText"
      />
   </view>
</template>

<script>
   import { request } from '@/common/request.js'
   export default {
      data() {
         return {
            tagList: [],
            matList: [],
            condition: '',
            loading: false,
            curr: 1,
            limit:5,
            status: 'more',
            contentText: {
               contentdown: '上拉加载更多',
               contentrefresh: '加载中',
               contentnomore: '没有更多'
            },
            // 当前tagId
            tagIdNow: 1,
            orderTypeId:''
         }
      },
      // 下拉刷新
      onPullDownRefresh() {
         this.refreshData();
      },
      // 上拉加载更多
      onReachBottom() {
         if (this.status !== 'noMore') {
            this.status = 'loading';
            this.loadMoreData();
         }
      },
      onLoad() {
         let that = this
         const eventChannel = this.getOpenerEventChannel();
         if (eventChannel) {
            eventChannel.on('orderTypeId', function(data) {
               that.orderTypeId = data.orderTypeId
               console.log(data)
            })
         }
      },
      onShow() {
         // 每次进入页面重新加载
         this.refreshData();
      },
      methods: {
         // 刷新数据
         refreshData() {
            this.curr = 1;
            this.matList = [];
            this.status = 'more';
            this.loading = true;
            this.fetchOrderList(true);
import { request } from '@/common/request.js'
export default {
   data() {
      return {
         tagList: [],
         matList: [],
         condition: '',
         loading: false,
         curr: 1,
         limit: 5,
         status: 'more',
         contentText: {
            contentdown: '上拉加载更多',
            contentrefresh: '加载中',
            contentnomore: '没有更多'
         },
         // 加载更多数据
         loadMoreData() {
            this.fetchOrderList(false);
         },
         // 获取订单列表
         async fetchOrderList(isRefresh) {
            try {
               const res = await request('/orderOut/list', {
         // 当前tagId
         tagIdNow: 1,
         orderTypeId: ''
      }
   },
   // 下拉刷新
   onPullDownRefresh() {
      if (this.loading) {
         uni.stopPullDownRefresh()
         return
      }
      this.refreshData()
   },
   // 上拉加载更多
   onReachBottom() {
      if (this.status !== 'noMore' && !this.loading) {
         this.status = 'loading'
         this.loadMoreData()
      }
   },
   onLoad() {
      let that = this
      const eventChannel = this.getOpenerEventChannel()
      if (eventChannel) {
         eventChannel.on('orderTypeId', function (data) {
            that.orderTypeId = data.orderTypeId
            console.log(data)
         })
      }
   },
   onShow() {
      // 每次进入页面重新加载
      this.refreshData()
   },
   methods: {
      refreshData() {
         if (this.loading) return
         this.curr = 1
         this.matList = []
         this.status = 'more'
         this.loading = true
         this.fetchOrderList(true)
      },
      // 加载更多数据
      loadMoreData() {
         if (this.loading) return
         this.loading = true
         this.fetchOrderList(false)
      },
      // 获取订单列表
      async fetchOrderList(isRefresh) {
         try {
            const res = await request(
               '/orderOut/list',
               {
                  curr: this.curr,
                  limit: this.limit,
                  orderNo: this.condition,
                  orderType: this.orderTypeId
               }, 'GET', true);
					
               if (res.code === 200) {
                  let records = res.data.records || [];
                  if (records.length > 0) {
                     if (isRefresh) {
                        this.matList = records;
                     } else {
                        this.matList = this.matList.concat(records);
                     }
                     this.curr = this.curr + 1;
                     this.status = 'more';
               },
               'GET',
               true
            )

            if (res.code === 200) {
               let records = res.data.records || []
               if (records.length > 0) {
                  if (isRefresh) {
                     this.matList = records
                  } else {
                     this.status = 'noMore';
                     this.matList = this.matList.concat(records)
                  }
               } else if (res.code === 403) {
                  uni.showToast({ title: res.msg, icon: "none", position: 'top' });
                  setTimeout(() => {
                     uni.reLaunch({ url: '../login/login' });
                  }, 1000);
                  this.curr = this.curr + 1
                  this.status = 'more'
               } else {
                  uni.showToast({ title: res.msg, icon: "none", position: 'top' });
                  this.status = 'noMore'
               }
            } catch (err) {
               // request.js 已经处理了错误提示
            } finally {
               this.loading = false;
               uni.stopPullDownRefresh();
            } else if (res.code === 403) {
               uni.showToast({
                  title: res.msg,
                  icon: 'none',
                  position: 'top'
               })
               setTimeout(() => {
                  uni.reLaunch({ url: '../login/login' })
               }, 1000)
            } else {
               uni.showToast({
                  title: res.msg,
                  icon: 'none',
                  position: 'top'
               })
            }
         },
         // 搜索
         async search() {
            if (!this.condition.trim()) {
               this.refreshData();
               return;
            }
            this.loading = true;
            try {
               const res = await request('/orderOut/list', {
         } catch (err) {
            // request.js 已经处理了错误提示
         } finally {
            this.loading = false
            uni.stopPullDownRefresh()
         }
      },
      // 搜索
      async search() {
         if (!this.condition.trim()) {
            this.refreshData()
            return
         }
         this.loading = true
         try {
            const res = await request(
               '/orderOut/list',
               {
                  curr: this.curr,
                  limit: this.limit,
                  orderNo: this.condition
               }, 'GET', true);
					
               if (res.code === 200) {
                  this.matList = res.data || [];
                  this.status = 'noMore';
               } else if (res.code === 403) {
                  uni.showToast({ title: res.msg, icon: "none", position: 'top' });
                  setTimeout(() => {
                     uni.reLaunch({ url: '../login/login' });
                  }, 1000);
               } else {
                  uni.showToast({ title: res.msg, icon: "none", position: 'top' });
               }
            } catch (err) {
               // request.js 已经处理了错误提示
            } finally {
               this.loading = false;
               },
               'GET',
               true
            )

            if (res.code === 200) {
               this.matList = res.data || []
               this.status = 'noMore'
            } else if (res.code === 403) {
               uni.showToast({
                  title: res.msg,
                  icon: 'none',
                  position: 'top'
               })
               setTimeout(() => {
                  uni.reLaunch({ url: '../login/login' })
               }, 1000)
            } else {
               uni.showToast({
                  title: res.msg,
                  icon: 'none',
                  position: 'top'
               })
            }
         },
         // 取消搜索
         onCancelSearch() {
            this.condition = '';
            this.refreshData();
         },
         // 根据状态返回样式类名
         getSettleClass(settle) {
            // settle: 1-待处理, 2-处理中, 3-已完成, 4-已取消 (根据实际情况调整)
            const classMap = {
               1: 'badge-pending',
               2: 'badge-processing',
               3: 'badge-completed',
               4: 'badge-cancelled'
            };
            return classMap[settle] || 'badge-default';
         },
         // 跳转到订单详情
         toPrint(item) {
            let that = this;
            uni.navigateTo({
               url: "./orderDetlList",
               success: function(res) {
                  res.eventChannel.emit('data', {
                     data: item
                  });
               },
               events: {
                  acceptDataFromOpenedPage: function(data) {
                     that.matnr = data.data;
                     that.findMat(that.matnr);
                  },
               },
            });
         } catch (err) {
            // request.js 已经处理了错误提示
         } finally {
            this.loading = false
         }
      },
      // 取消搜索
      onCancelSearch() {
         this.condition = ''
         this.refreshData()
      },
      // 根据状态返回样式类名
      getSettleClass(settle) {
         // settle: 1-待处理, 2-处理中, 3-已完成, 4-已取消 (根据实际情况调整)
         const classMap = {
            1: 'badge-pending',
            2: 'badge-processing',
            3: 'badge-completed',
            4: 'badge-cancelled'
         }
         return classMap[settle] || 'badge-default'
      },
      // 跳转到订单详情
      toPrint(item) {
         let that = this
         uni.navigateTo({
            url: './orderDetlList',
            success: function (res) {
               res.eventChannel.emit('data', {
                  data: item
               })
            },
            events: {
               acceptDataFromOpenedPage: function (data) {
                  that.matnr = data.data
                  that.findMat(that.matnr)
               }
            }
         })
      }
   }
}
</script>

<style>
   @import url('@/static/css/wms.css/wms.css');
	
   .page-container {
      min-height: 100vh;
      background: #f5f7fa;
      padding-bottom: 20rpx;
   }
	
   .search-bar {
      padding: 0rpx 8rpx;
      background: #ffffff;
      box-shadow: 0 2rpx 12rpx rgba(0, 129, 255, 0.08);
   }
	
   .order-list {
      padding: 0 24rpx;
   }
	
   .order-card {
      background: #ffffff;
      border-radius: 16rpx;
      margin-top: 20rpx;
      box-shadow: 0 4rpx 20rpx rgba(0, 129, 255, 0.1);
      overflow: hidden;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      border: 1rpx solid #e4e7ed;
   }
	
   .order-card:active {
      transform: scale(0.98);
      box-shadow: 0 2rpx 10rpx rgba(0, 129, 255, 0.15);
   }
	
   .card-header {
      display: flex;
      align-items: center;
      padding: 24rpx 28rpx;
      background: linear-gradient(135deg, #0081ff 0%, #1890ff 100%);
   }
	
   .order-badge {
      padding: 6rpx 16rpx;
      border-radius: 20rpx;
      margin-right: 20rpx;
   }
	
   .badge-text {
      font-size: 22rpx;
      font-weight: 500;
      color: #ffffff;
   }
	
   /* 状态徽章颜色 */
   .badge-pending {
      background: rgba(255, 255, 255, 0.3);
   }
	
   .badge-processing {
      background: #ffc107;
   }
	
   .badge-completed {
      background: #28a745;
   }
	
   .badge-cancelled {
      background: #dc3545;
   }
	
   .badge-default {
      background: rgba(255, 255, 255, 0.25);
   }
	
   .order-no {
      flex: 1;
   }
	
   .order-no-label {
      font-size: 22rpx;
      color: rgba(255, 255, 255, 0.7);
      display: block;
   }
	
   .order-no-value {
      font-size: 28rpx;
      color: #ffffff;
      font-weight: 600;
      display: block;
      margin-top: 4rpx;
   }
	
   .card-body {
      padding: 24rpx 28rpx;
   }
	
   .info-row {
      display: flex;
      flex-wrap: wrap;
   }
	
   .info-item {
      width: 50%;
      margin-bottom: 16rpx;
   }
	
   .info-label {
      font-size: 24rpx;
      color: #909399;
      display: block;
   }
	
   .info-value {
      font-size: 28rpx;
      color: #303133;
      font-weight: 500;
      display: block;
      margin-top: 6rpx;
   }
	
   .card-footer {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 20rpx 28rpx;
      border-top: 1rpx solid #f0f0f0;
   }
	
   .view-detail {
      font-size: 26rpx;
      color: #909399;
      margin-right: 8rpx;
   }
	
   /* 空状态 */
   .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 120rpx 0;
   }
	
   .empty-text {
      font-size: 30rpx;
      color: #909399;
      margin-top: 30rpx;
   }
	
   .empty-hint {
      font-size: 24rpx;
      color: #c0c4cc;
      margin-top: 12rpx;
   }
</style>
@import url('@/static/css/wms.css/wms.css');

.page-container {
   min-height: 100vh;
   background: #f5f7fa;
   padding-bottom: 20rpx;
}

.search-bar {
   padding: 0rpx 8rpx;
   background: #ffffff;
   box-shadow: 0 2rpx 12rpx rgba(0, 129, 255, 0.08);
}

.order-list {
   padding: 0 24rpx;
}

.order-card {
   background: #ffffff;
   border-radius: 16rpx;
   margin-top: 20rpx;
   box-shadow: 0 4rpx 20rpx rgba(0, 129, 255, 0.1);
   overflow: hidden;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
   border: 1rpx solid #e4e7ed;
}

.order-card:active {
   transform: scale(0.98);
   box-shadow: 0 2rpx 10rpx rgba(0, 129, 255, 0.15);
}

.card-header {
   display: flex;
   align-items: center;
   padding: 24rpx 28rpx;
   background: linear-gradient(135deg, #0081ff 0%, #1890ff 100%);
}

.order-badge {
   padding: 6rpx 16rpx;
   border-radius: 20rpx;
   margin-right: 20rpx;
}

.badge-text {
   font-size: 22rpx;
   font-weight: 500;
   color: #ffffff;
}

/* 状态徽章颜色 */
.badge-pending {
   background: rgba(255, 255, 255, 0.3);
}

.badge-processing {
   background: #ffc107;
}

.badge-completed {
   background: #28a745;
}

.badge-cancelled {
   background: #dc3545;
}

.badge-default {
   background: rgba(255, 255, 255, 0.25);
}

.order-no {
   flex: 1;
}

.order-no-label {
   font-size: 22rpx;
   color: rgba(255, 255, 255, 0.7);
   display: block;
}

.order-no-value {
   font-size: 28rpx;
   color: #ffffff;
   font-weight: 600;
   display: block;
   margin-top: 4rpx;
}

.card-body {
   padding: 24rpx 28rpx;
}

.info-row {
   display: flex;
   flex-wrap: wrap;
}

.info-item {
   width: 50%;
   margin-bottom: 16rpx;
}

.info-label {
   font-size: 24rpx;
   color: #909399;
   display: block;
}

.info-value {
   font-size: 28rpx;
   color: #303133;
   font-weight: 500;
   display: block;
   margin-top: 6rpx;
}

.card-footer {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   padding: 20rpx 28rpx;
   border-top: 1rpx solid #f0f0f0;
}

.view-detail {
   font-size: 26rpx;
   color: #909399;
   margin-right: 8rpx;
}

/* 空状态 */
.empty-state {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 120rpx 0;
}

.empty-text {
   font-size: 30rpx;
   color: #909399;
   margin-top: 30rpx;
}

.empty-hint {
   font-size: 24rpx;
   color: #c0c4cc;
   margin-top: 12rpx;
}
</style>