aiot-app/pages/warehouse/workOrder copy/details/details.vue

<template>
  <view class="main">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      @clickLeft="back"
      title="盘点详情"
    >
    </uni-nav-bar>
    <view class="info-wrap">
      <view class="list">
        <view class="item">
          <view class="label"> 盘点单号 </view>
          <view class="value">
            {{ infoData.workOrderCode }}
          </view>
        </view>
        <view class="item">
          <view class="label"> 盘点仓库 </view>
          <view class="value">
            {{ infoData.bizTypeName }}
          </view>
        </view>
        <view class="item">
          <view class="label"> 盘点人 </view>
          <view class="value">
            {{ infoData.executeUserName }}/{{ infoData.executorDeptName }}
          </view>
        </view>
        <view class="item">
          <view class="label"> 盘点时间 </view>
          <view class="value">
            {{ infoData.createTime }} - {{ infoData.planFinishTime }}
          </view>
        </view>
        <view class="item">
          <view class="label"> 盘点异常数 </view>
          <view class="value">
            {{ infoData.abnormalCount }}
          </view>
        </view>
      </view>
      <view class="state">
        {{ infoData.status && infoData.status.descp }}
      </view>
    </view>

    <view
      class="fixed-bottom"
      v-if="
        isExecute &&
        infoData.status &&
        (infoData.status.code == 1 || infoData.status.code == 6)
      "
    >
      <view class="tjsp" @click="handlTjsp"> 提交 </view>
    </view>

    <view
      class="fixed-bottom"
      v-else-if="isSpr && infoData.status && infoData.status.code == 2"
    >
      <view class="bhtg">
        <view class="item" @click="handlExamine(false)"> 驳回 </view>
        <view class="item s1" @click="handlExamine(true)"> 通过 </view>
      </view>
    </view>
    <view class="tab-warp">
      <view class="tab-title-wrap">
        <view class="tab-title">
          <view
            class="item"
            v-for="[key, item] in Object.entries(tabList)"
            :key="key"
            :class="{ avtive: key == type }"
            @click="changeTab(key)"
          >
            {{ item.name }}
          </view>
        </view>
      </view>

      <view class="tab-main">
        <view class="tbai"> 盘点项全览 </view>
        <u-collapse :value="['1']">
          <template v-if="tabList[type].list.length > 0">
            <u-collapse-item
              :title="`${item.assetName}(${item.assetCode})`"
              name="1"
              v-for="(item, index) in tabList[type].list"
              :key="index"
            >
              <view slot="value" class="u-page__item__title__slot-title">
                <template v-if="item.equStatus !== 3">
                  <view class="text" v-if="item.equStatus == 0"> 待盘 </view>
                  <template v-else>
                    <text
                      :style="styleClass(el.type)"
                      class="text"
                      v-for="el in ycEquStatus(item)"
                    >
                      {{ dict.equStatus[el.type] }}({{ el.num }})
                    </text>
                  </template>
                </template>
                <view class="text" v-else style="color: #f59a23bc">
                  溢出({{ item.inventoryNum }})
                </view>
              </view>
              <view class="u-collapse-content">
                <view class="collapse-list">
                  <view class="item" v-if="item.equStatus == 3">
                    <view class="s1"> 批次 </view>
                    <view class="s2">
                      {{ item.batchNum }}
                    </view>
                  </view>
                  <view class="item">
                    <view class="s1"> 牌号 </view>
                    <view class="s2">
                      {{ item.assetBrand }}
                    </view>
                  </view>

                  <view class="item">
                    <view class="s1"> 型号 </view>
                    <view class="s2">
                      {{ item.assetSku }}
                    </view>
                  </view>
                  <view class="item">
                    <view class="s1"> 单位 </view>
                    <view class="s2">
                      {{ item.isUnpack ?  item.unit : item.minPackUnit }}
                    </view>
                  </view>
                  <view class="item" v-if="item.equStatus !== 3">
                    <view class="s1"> 库存量 </view>
                    <view class="s2">
                      {{ item.inventoryNum }}
                    </view>
                  </view>
                  <view class="item">
                    <view class="s1"> 实盘量 </view>
                    <view class="s2" v-if="item.equStatus == 3">
                      {{ item.inventoryNum }}
                    </view>
                    <view class="s2" v-else>
                      {{ item.yetNum }}
                    </view>
                  </view>
                </view>
              </view>
            </u-collapse-item>
          </template>
          <u-empty style="padding-top: 20rpx" v-else> </u-empty>
        </u-collapse>
      </view>
      <examineApprove
        ref="examineApprove"
        @submit="cbExamineApprove"
      ></examineApprove>
    </view>
  </view>
</template>

<script>
import examineApprove from '../components/examineApprove.vue'
import { get, postJ } from '@/utils/api'
let [page, size, isEnd] = [1, 20, false]
export default {
  components: {
    examineApprove
  },
  data () {
    return {
      workOrderId: '',
      // 待办id
      myHandleId: '',
      type: 0,
      tabList: {
        0: {
          name: '全部',
          list: [],
          type: []
        },
        1: {
          name: '盘盈',
          list: [],
          type: [3]
        },
        2: {
          name: '盘亏',
          list: [],
          type: [1, 5, 6]
        },
        3: {
          name: '破损',
          list: [],
          type: [2, 5, 7]
        }
      },
      infoData: '',
      dict: {
        status: {
          0: '待接收',
          1: '执行中',
          2: '待审核',
          3: '完成',
          4: '已撤回',
          5: '待验收',
          6: '已驳回',
          7: '未修复',
          8: '已派单'
        },
        equStatus: {
          0: '待盘',
          1: '盘亏',
          2: '破损',
          3: '盘盈',
          4: '正常'
        }
      }
    }
  },
  onLoad (option) {
    this.workOrderId = option.workOrderId
    this.myHandleId = option.myHandleId
    this.initPagination()
    this.getdata()
  },
  computed: {
    // 当前是否为执行人
    isSpr () {
      let userInfo = uni.getStorageSync('userInfo')
      // 当前登录人id
      let userId = userInfo.id
      console.log()
      // 审批人id
      let executeUserId = this.infoData.accraditationUserId
      if (executeUserId == userId) {
        return true
      } else {
        return false
      }
    },
    // 当前是否为执行人
    isExecute () {
      let userInfo = uni.getStorageSync('userInfo')
      // 当前登录人id
      let userId = userInfo.id
      console.log()
      // 审批人id
      let executeUserId = this.infoData.executeUserId
      if (executeUserId == userId) {
        return true
      } else {
        return false
      }
    }
  },
  onReachBottom () {
    console.log('触底')
    if (isEnd) {
      return
    }
    this.getMoreLists()
  },
  methods: {
    changeTab (key) {
      this.type = key
      this.initPagination()
      this.getdata()
    },
    getdata () {
      uni.showLoading({
        title: '加载中'
      })

      let par = {
        workOrderId: this.workOrderId,
        equStatusList: this.tabList[this.type].type
      }
      let paging = this.URLSearchParams({
        page,
        size
      })

      postJ(this.apiUrl + '/repertoryCheck/getCheckDetail?' + paging, par)
        .then(res => {
          if (res.success) {
            this.infoData = res.data

            let pageTotal = res.data.pages
            let data = res.data.planInventoryDetailList.records
            if (page === 1) {
              this.tabList[this.type].list = data
            } else {
              data.forEach(element => {
                this.tabList[this.type].list.push(element)
              })
            }
            page < pageTotal ? (isEnd = false) : (isEnd = true)
          }
        })
        .finally(() => {
          uni.stopPullDownRefresh()
          uni.hideLoading()
        })
    },
    getMoreLists () {
      page++
      this.getdata()
    },
    // 初始化分页
    initPagination () {
      this.tabList[this.type].list = []
      page = 1
      isEnd = false
    },
    // 打开选人员
    handlTjsp () {
      this.$refs.examineApprove.open()
    },
    cbExamineApprove (currentUser) {
      let par = {
        workOrderId: this.workOrderId
      }
      if (currentUser) {
        ;(par.accraditationUserId = currentUser.userId),
          (par.accraditationUserName = currentUser.trueName)
      }
      postJ(this.apiUrl + '/repertoryCheck/submit', par).then(res => {
        if (res?.success) {
          uni.showToast({
            title: '操作成功'
          })
          this.getdata()
        }
      })
    },
    // 审批
    handlExamine (val) {
      let text = ''
      if (val) {
        text = '是否通过审批？'
      } else {
        text = '是否驳回审批？'
      }
      uni.showModal({
        content: text,
        success: res => {
          if (res.confirm) {
            let par = {
              checked: val,
              id: this.workOrderId,
              myHandleId: this.myHandleId,
              type: 4,
              handleType: 1
            }
            postJ(this.apiUrl + '/plan/info/audit', par).then(res => {
              if (res?.success) {
                uni.showToast({
                  title: '操作成功'
                })
                this.getdata()
              }
            })
          }
        }
      })
    },
    // 异常的显示
    ycEquStatus (item) {
      let list = []
      if (item.loseNum) {
        list.push({
          type: 1,
          num: item.loseNum
        })
      }
      if (item.damageNum) {
        list.push({
          type: 2,
          num: item.damageNum
        })
      }
      if (item.normalNum) {
        list.push({
          type: 4,
          num: item.normalNum
        })
      }
      console.log('asd', list)
      return list
    },
    styleClass (type) {
      switch (Number(type)) {
        case 0:
        case 4:
          return 'color: #70B603;'
          break
        case 1:
          return 'color: #FF0000;'
          break
        case 2:
          return 'color: #555;'
          break
        case 3:
          return 'color: #dacde6;'
          break
        default:
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  min-height: 100vh;
  background-color: #f0f0f0;
}

.info-wrap {
  background-color: #fff;
  padding: 30rpx;
  position: relative;

  .list {
    .item {
      display: flex;
      font-size: 28rpx;
      color: #555555;

      & + .item {
        margin-top: 20rpx;
      }

      .label {
        width: 200rpx;
      }

      .value {
        flex: 1;
      }
    }
  }

  .state {
    background-color: #f59a23bc;
    color: #fff;
    font-size: 28rpx;
    height: 50rpx;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20rpx;
    border-radius: 50rpx;
    position: absolute;
    top: 20rpx;
    right: 20rpx;
  }
}

.tab-warp {
  background-color: #fff;
  margin-top: 20rpx;

  .tab-title-wrap {
    display: flex;
    justify-content: flex-end;
  }

  .tab-title {
    display: flex;
    padding: 20rpx;

    .item {
      font-size: 28rpx;
      color: #555555;

      &.avtive {
        color: #157a2c;
      }

      & + .item {
        margin-left: 40rpx;
      }
    }
  }

  .tab-main {
    .tbai {
      background-color: #d7d7d7;
      color: #333333;
      font-size: 28rpx;
      padding: 20rpx;
    }
  }

  .red {
    color: #ff0000;
  }

  .green {
    color: #157a2c;
  }

  .yellow {
    color: #b8741a;
  }

  .text {
    font-size: 28rpx;
    margin-right: 10rpx;
  }
}

.collapse-list {
  display: flex;
  flex-wrap: wrap;

  .item {
    display: flex;
    width: 50%;
    margin-bottom: 20rpx;

    .s1 {
      margin-right: 20rpx;
    }
  }
}

::v-deep .u-collapse-item {
  .u-cell__body {
    background-color: #f2f2f2;
  }
}

.fixed-bottom {
  position: fixed;
  z-index: 99;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 80rpx;
  display: flex;
  border: 1px solid #157a2c;
  box-sizing: border-box;

  .tjsp {
    background-color: #157a2c;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
  }

  & + .tab-warp {
    padding-bottom: 82rpx;
  }

  .bhtg {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
	background: #fff;
    .item {
      box-sizing: border-box;
      flex: 1;
      font-size: 28rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 80rpx;

      &.s1 {
        background-color: #157a2c;
        color: #fff;
      }
    }
  }
}
</style>