aiot-app/pages/warehouse/reportLoss copy/workorderSelected.vue

<template>
  <view class="workorder-selected">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="选择盘点工单"
      @clickLeft="back"
    >
    </uni-nav-bar>
    <view class="search-box">
      <u-input
        type="text"
        placeholder="搜索工单号或名称"
        clearable
        prefixIcon="search"
        prefixIconStyle="font-size: 22px;color: #909399"
      ></u-input>
    </view>
    <view class="list-wrapper">
      <view
        class="card"
        v-for="(item, index) in tableList"
        :key="index"
        @click="selected = item"
        :class="{ selected: selected.id === item.id }"
      >
        <view class="title">{{ item.workOrderCode }}</view>
        <view><text class="label">盘点名称</text>{{ item.planName }}</view>
        <view
          ><text class="label">资产类型</text
          >{{ getDictName(warehousingType, item.assetDict) }}</view
        >
        <view><text class="label">盘点仓库</text>{{ item.bizTypeName }}</view>
        <view><text class="label">审核时间</text></view>
        <view class="card-footer">
          <text>盘盈&nbsp;{{ item.inventoryProfitNum || 0 }}</text>
          <text>盘亏&nbsp;{{ item.inventoryLossesNum || 0 }}</text>
          <text>破损&nbsp;{{ item.damagedNum || 0 }}</text>
        </view>
      </view>
    </view>
    <u-button class="footer" type="success" @click="confirm">确定选中</u-button>
  </view>
</template>

<script>
import { postJ } from '@/utils/api.js'
import { getDictName, warehousingType } from '../enum'
export default {
  data () {
    return {
      tableList: [],
      selected: {},
      getDictName,
      warehousingType
    }
  },
  onLoad () {
    this._getCheckAbnormalList()
  },
  methods: {
    async _getCheckAbnormalList () {
      const res = await postJ(this.apiUrl + '/workOrder/getCheckAbnormalList', {
        size: 999999
      })

      if (res?.success) {
        this.tableList = res.data.records
      }
    },
    confirm () {
      if (!this.selected?.id) {
        uni.showToast({
          icon: 'none',
          title: '请选择工单！'
        })
        return
      }
      uni.$emit('getWorkorder', this.selected)
      uni.navigateBack({
        delta: 1
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.search-box {
  position: fixed;
  left: 0;
  right: 0;
  padding: 10rpx;
  background-color: #fff;
  .u-input {
    border: 1rpx solid #dadbde;
  }
}
.list-wrapper {
  padding: 100rpx 0 80rpx;
  font-size: 28rpx;
  color: #555;
  .card {
    padding: 0 10rpx;
    border-bottom: 8rpx solid #f2f2f2;
    &.selected {
      background-color: rgba(202, 249, 130, 0.380392156862745);
    }
    .title {
      color: #333333;
      font-weight: bold;
      border-bottom: 1rpx solid #f2f2f2;
      font-size: 30rpx;
      padding: 8rpx 0;
    }
    .card-footer {
      border-top: 1rpx solid #f2f2f2;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 15rpx;
    }

    .label {
      color: #aaaaaa;
      margin-right: 20rpx;
    }
  }
}
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>