front-end/hdPad/src/admin/work/components/order-info.vue

<template>
<view>
  <view v-if="$util.isEmpty(orderInfo)"></view>  
    <view class="work-info" v-else>
      <view class="work-detail">
        <view class="order-img">
          <image :src="orderInfo.cover"></image>
        </view>
        <view class="order-item">
          <view><text class="left">分类</text><text class="right">{{orderInfo.catName}}</text></view>
          <view><text class="left">名称</text><text class="right">{{orderInfo.name}}</text></view>
          <view><text class="left">数量</text><text class="right">{{orderInfo.num}}</text></view>
          <view><text class="left">商品编号</text><text class="right">{{orderInfo.goodsId}}</text></view>
          <view><text class="left">售价</text><text class="right">{{orderInfo.price||''}}</text></view>
          <view><text class="left">工单号</text><text class="right">{{orderInfo.workSn}}</text></view>
          <view><text class="left">订单号</text><text class="right">{{orderInfo.orderSn}}</text></view>
          <view><text class="left">状态</text><text class="right">{{getStatus(orderInfo.status)}}</text></view>
          <view><text class="left">备注</text><text class="right">{{orderInfo.remark}}</text></view>
        </view>
      </view>
      <view class="work-item-detail">

        <view class="flex-space right-detail-title">单位用材</view>
        
        <view class="unit-use-item">
          <view class="commodity-list">
            <view v-for="(s, idx) in orderItem" :key="idx" class="commodity-item" >
              <image class="item-icon" :src="s.cover" @click="pageTo({url:'/admin/item/detail',query:{id: s.id}})"></image>
              <view class="item-info">
                <view class="info-line">
                  <text class="item-name">{{ s.name }}</text>
                  <text class="item-price">
                    <text class="unit">5扎</text>
                  </text>
                </view>
                <view class="info-line">
                  <text class="item-type">20支/扎</text>
                </view>
              </view>
            </view>
          </view>
          <view class="summary-bar">
            <view class="operate-view" ></view>
            <view class="describe-view"><text>2扎</text> <text>3支</text></view>
          </view>
        </view>

        <view style="height:2vh;background-color:#EEEEEE;"></view>

        <view class="flex-space right-detail-title"> 累计用材 </view>
        
        <view class="total-use-item">
          <view class="commodity-list">
            <view v-for="(s, idx) in orderItem" :key="idx" class="commodity-item" >
              <image class="item-icon" :src="s.cover" @click="pageTo({url:'/admin/item/detail',query:{id: s.id}})" />
              <view class="item-info">
                <view class="info-line">
                  <text class="item-name">{{ s.name }}</text>
                  <text class="item-price">
                    <text class="unit">5扎</text>
                  </text>
                </view>
                <view class="info-line">
                  <text class="item-type">20支/扎</text>
                  <button class="wastage">报损</button>
                </view>
              </view>
            </view>
          </view>
          <view class="summary-bar">
            <view class="operate-view" ></view>
            <view class="describe-view"><text>2扎</text> <text>3支</text></view>
          </view>
        </view>
      </view>

      <view class="button-area">
        <view>修改</view>
        <view>取消</view>
        <view>锁定</view>
        <view class="active">完成</view>
        <view>打印</view>
      </view>

  </view>
</view>
</template>
<script>
import { getFullInfo } from '@/api/work'
export default {
  data() {
    return {
      orderInfo:[],
      orderItem:[]
    }
  },
  props: {
    selectOrderId: {
      type: Number,
      default: 0
    }
  },
  watch:{
      selectOrderId:{
          handler(newId){
            if(Number(newId)>0){
              this.getOrderDetail(newId)
            }
          },
          immediate:true
      }
  },
  methods:{
    getStatus(status) {
        switch (status) {
            case "0":
            return "待完成";
            break;
            case "1":
            return "已完成";
            break;
            case "2":
            return "已取消";
            break;
            default:
            return "待完成";
        }
    },
    getOrderDetail(id){
      getFullInfo({id}).then(res=>{
        if(res.code == 1){
          this.orderInfo = res.data.info
          this.orderItem = res.data.item
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.work-info{
  display:flex;
  height: 100%;
  & .work-detail{
      border-right:1upx solid #EEEEEE;
      flex: 40;
      .order-img{
        display:flex;
        margin:5upx;
        justify-content:center;
        image{
          width:180upx;
          height:180upx;
          border-radius:3upx;
        }
      }
      .order-item{
        display:flex;
        font-size:11upx;
        margin-top:10upx;
        justify-content: center;
        flex-wrap:wrap;
        view{
          justify-content:space-between;
          align-items:center;
          display:flex;
          border-bottom:1upx solid #EEEEEE;
          width:180upx;
          height:19upx;
          padding:0 10upx 0 10upx;
          .left{
            color:#CCCCCC;
          }
          .right{
            color:#666666;
          }
        }
      }
    }
	& .button-area {
		flex: 9;
		height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 5upx;
    border-left:1upx solid #EEEEEE;
    & > view {
        border: 1upx solid #EEEEEE;
        border-radius: 5upx;
        text-align: center;
        padding: 10upx 0;
        color: #666666;
        margin-bottom: 10upx;
        font-size: 10upx;
        text-align: center;
    }
    & .active {
      color: #1627be;
      border-color: #1627be;
      font-size: 10upx;
      font-weight:bold;
    }
	}
	& .work-item-detail {
		flex: 40;
		height: 100%;
    & .right-detail-title{
      font-size:10upx;
      font-weight:bold;
      margin-left:5upx;
      margin-top:5upx;
    }
    & .unit-use-item {
      flex: 40;
      display: flex;
      flex-direction: column;
      .commodity-list {
        padding: 5upx;
        .commodity-item {
          display: flex;
          margin-top:5upx;
          .item-icon {
            flex-shrink: 0;
            width: 38upx;
            height: 38upx;
            border-radius:2upx;
          }
          .item-info {
            display: flex;
            flex-direction: column;
            flex: 1;
            margin-left:6upx;
            .info-line {
              display: flex;
              justify-content: space-between;
              align-items: flex-start;
              position: relative;
              .item-name {
                font-size:11upx;
                color: black;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
              .item-price {
                color: #333;
                font-size: 10upx;
              }
              .item-type {
                color: #999;
                font-size: 8upx;
              }
              .item-count {
                color: #666;
                font-size: 11upx;
              }
            }
          }
        }
      }
      .summary-bar {
        padding: 0 10upx;
        height: 30upx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top: 1upx solid #eeeeee;
        .operate-view {
          display: flex;
          align-items: center;
          color: #3385ff;
          font-size: 12upx;
          .iconfont {
            margin-right: 20upx;
            font-size: 10upx;
          }
        }
        .describe-view {
          display: flex;
          align-items: center;
          color: #333;
          font-size: 9upx;
        }
      }
    }
    & .total-use-item {
      flex: 40;
      display: flex;
      flex-direction: column;
      .commodity-list {
        padding: 5upx;
        .commodity-item {
          display: flex;
          margin-top:5upx;
          .item-icon {
            flex-shrink: 0;
            width: 38upx;
            height: 38upx;
            border-radius:2upx;
          }
          .item-info {
            display: flex;
            flex-direction: column;
            flex: 1;
            margin-left:6upx;
            .info-line {
              display: flex;
              justify-content: space-between;
              align-items: flex-start;
              position: relative;
              .item-name {
                font-size:11upx;
                color: black;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
              .item-price {
                color: #333;
                font-size: 10upx;
              }
              .item-type {
                color: #999;
                font-size: 8upx;
              }
              .item-count {
                color: #666;
                font-size: 11upx;
              }
              .wastage{
                position: absolute;
                right:0upx;
                font-size:9upx;
                top:4upx;
                color:#666666;
              }
            }
          }
        }
      }
      .summary-bar {
        padding: 0 10upx;
        height: 30upx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top: 1upx solid #eeeeee;
        .operate-view {
          display: flex;
          align-items: center;
          color: #3385ff;
          font-size: 12upx;
          .iconfont {
            margin-right: 20upx;
            font-size: 10upx;
          }
        }
        .describe-view {
          display: flex;
          align-items: center;
          color: #333;
          font-size: 9upx;
        }
      }
    }
	}
}
</style>