aiot-app/pages/maintenance/sparepart/sparepartDetail.vue

<template>
  <view>
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="申请备品备件"
      @clickLeft="back"
    >
      <view class="nav-right" slot="right">
        <view class="text-box" @click="$refs.sparepartRef.open()">
          明细清单
        </view>
      </view>
    </uni-nav-bar>
    <view class="sparepart-container">
      <view class="infos">
        <view class="col">
          <text class="label">申领单号</text>
          <text class="content">{{ infoData.applyOrder }}</text>
        </view>
        <view class="col">
          <text class="label">申请时间</text>
          <text class="content">{{ infoData.createTime }}</text>
        </view>
        <view class="col">
          <text class="label">期望完成时间</text>
          <text class="content">{{ infoData.expectedPerformanceTime }}</text>
        </view>
        <view class="col">
          <text class="label">出库单号</text>
          <text class="content">{{ infoData.stockOut }}</text>
        </view>
      </view>
      <view class="kd-step">
        <view
          class="kd-step-item"
          v-for="(item, index) in infoData.partApplyLogList"
          :key="item.id"
        >
          <view class="title">
            {{ item.type }} <text class="time">{{ item.createTime }}</text>
          </view>
          <view class="content">
            <view class="desc">
              <text>审核人：{{ item.content.auditName }}</text>
              <text>审核结果：{{ item.content.auditResult }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <SparepartDetail
      ref="sparepartRef"
      :list="infoData.stockOutApplyDetailList"
    />
  </view>
</template>

<script>
import { get, postJ, post } from '@/utils/api.js'
import SparepartDetail from '@/components/sparepart/detail.vue'
import dayjs from 'dayjs'
let [page, size, isEnd] = [1, 10, true]
export default {
  components: { SparepartDetail },
  filters: {
    timeFilter (inp) {
      return inp && dayjs(inp).format('YYYY-MM-DD HH:mm')
    }
  },
  data () {
    return {
      visible: false,
      timeShow: false,
      time: '',
      registerObj: [''],
      infoData: {
        partApplyLogList: [],
        stockOutApplyDetailList: []
      },

      pageId: '',
      pickerDeptShow: false,
      list: [],
      treeList: [],
      classificationId: '',
      list2: [
        {
          title: '买家下单',
          desc: '2018-11-11'
        },
        {
          title: '卖家发货',
          desc: '2018-11-12'
        },
        {
          title: '买家签收',
          desc: '2018-11-13'
        },
        {
          title: '交易完成',
          desc: '2018-11-14'
        }
      ],
      active: 1
    }
  },
  onShow () {
    // this.getTreeList()
  },
  onLoad (options) {
    this.getInfo(options.applyOrder)
  },
  onReachBottom: function () {
    if (isEnd) {
      return
    }
    // 显示加载图标
    uni.showLoading({
      title: '数据加载中'
    })
    this.getMoreLists()
  },
  methods: {
    open (...args) {
      console.log(args)
    },
    getTreeList () {
      postJ(this.apiUrl + '/classificationTree/list', [4]).then(res => {
        // console.log(res)
        if (res.success) {
          this.treeList = res.data
          this.pickerDeptShow = true
          this.$refs.pickerDeptName.show()
        }
      })
    },
    getInfo (applyOrder) {
      post(this.apiUrl + '/stockOutApply/getdetails', { applyOrder }).then(
        res => {
          if (res.success) {
            this.infoData = res.data
          }
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.uni-data-tree-input {
  display: none;
}
.no_data {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  .center {
    text-align: center;
    color: #555;
    font-size: $uni-font-size-base;
  }
}
.footer {
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  bottom: 0;
  width: 100%;
  height: 90rpx;
  text-align: center;
  border-top: 1rpx solid #eeecec;
  background-color: #ffffff;

  .bottom {
    font-size: $uni-font-size-lg;
    margin-left: 20rpx;

    .select-all {
      color: $j-primary-green;
    }
  }

  .footer-span-btn {
    height: 30rpx;
    line-height: 30rpx;
    font-size: $uni-font-size-lg;
    color: #ffffff;
    margin-right: 20rpx;
    padding: 10rpx 20rpx;
    text-align: center;
    background-color: $j-primary-green;
    border-radius: 40rpx;
  }
}

.footer-right {
  justify-content: flex-end;
}
.sparepart-container {
  padding: 40rpx 50rpx;

  .infos {
    border: 1rpx solid rgba(242, 242, 242, 1);
    margin-bottom: 40rpx;
    .col {
      height: 60rpx;
      line-height: 60rpx;
      display: flex;
      align-items: stretch;
      // &+.col{
      // 	margin-top: 4rpx;
      // }
      .label {
        display: inline-block;
        width: 200rpx;
        padding-right: 20rpx;
        text-align: right;
        background-color: rgba(215, 215, 215, 1);
      }
      .content {
        flex: 1;
        padding-left: 8rpx;
        border-bottom: 1rpx solid rgba(215, 215, 215, 1);
        border-right: 1rpx solid rgba(215, 215, 215, 1);
      }

      &:first-of-type .content {
        border: 1rpx solid rgba(215, 215, 215, 1);
      }
      &:last-of-type {
        margin-top: 12rpx;
        .content {
          border: 1rpx solid rgba(215, 215, 215, 1);
        }
      }
    }
  }
  .detail-title {
    font-size: 28rpx;
    padding: 20rpx 0;
    margin-top: 10rpx;
  }
  .detail-content {
    border: 1rpx solid rgba(242, 242, 242, 1);
    min-height: 50vh;
    .col {
      font-size: 28rpx;
      border-bottom: 1rpx solid rgba(242, 242, 242, 1);
      display: flex;
      padding: 10rpx;
      align-items: center;
      justify-content: space-between;
      background-color: rgba(242, 242, 242, 0.372549019607843);
    }

    .plus {
      width: 40rpx;
      height: 40rpx;
      line-height: 38rpx;
      text-align: center;
      background-color: $j-primary-border-green;
      color: #fff;
      margin: 16rpx 0 0 16rpx;
    }
  }

  /deep/.u-number-box {
    .u-number-box__minus,
    .u-number-box__plus,
    .u-number-box__input {
      font-size: 30rpx;
      height: 1.6em !important;
    }
    .u-number-box__input {
      width: 2em !important;
    }
    .u-number-box__minus,
    .u-number-box__plus {
      background-color: $j-primary-border-green !important;

      .u-icon__icon {
        color: #fff !important;
      }
    }
  }
}

.kd-step {
  .kd-step-item {
    padding-left: 30rpx;
    position: relative;
    padding-bottom: 60rpx;
    color: #d7d7d7;
    &::before {
      content: '';
      position: absolute;
      top: 28rpx;
      bottom: -10rpx;
      left: 0;
      transform: translateX(-50%);
      border: 1rpx dashed #d7d7d7;
    }
    &::after {
      content: '';
      position: absolute;
      top: 10rpx;
      left: 0;
      transform: translateX(-50%);
      width: 16rpx;
      height: 16rpx;
      border-radius: 16rpx;
      border: 1rpx dashed #d7d7d7;
    }

    &.active {
      &::after {
        background: $j-primary-border-green;
      }
    }
    &:last-of-type {
      color: #333;
      &::before {
        display: none;
      }

      &::after {
        background: $j-primary-border-green;
        border: 1rpx dashed $j-primary-border-green;
      }
    }
    .title {
      font-weight: bold;
      font-size: 28rpx;
      margin-bottom: 8rpx;
      display: flex;
      justify-content: space-between;
      text {
        font-weight: normal;
      }
    }
    .desc {
      background-color: #f2f2f2;
      height: 60rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 28rpx;
      padding: 0 20rpx;
    }
  }
}
</style>