aiot-app/pages/warehouse/workOrder copy/components/selectSupplies.vue

<template>
  <!-- 选择物料信息 -->
  <view class="assign-container">
    <u-popup :show="popShow" @close="close">
      <view class="main">
        <uni-search-bar
          @confirm="search"
          v-model="searchKey"
          @input="search"
          cancelButton="none"
          placeholder="名称/编码"
        >
        </uni-search-bar>
        <view class="order-list-wrap">
          <view
            class="order-list"
            :class="{ active: index === current }"
            v-for="(item, index) in dataList"
            :key="index"
            @click="handlCurrent(index)"
          >
            <view class="s1">
              <view class="b1"> {{ item.informationName }} </view>
              <view class="b2"> </view>
            </view>
            <view class="wrap">
              <view class="item">
                <view class="label"> 编码 </view>
                <view class="value">
                  {{ item.informationCode }}
                </view>
              </view>
            </view>
            <view class="wrap">
              <view class="item" style="width: 100%">
                <view class="label">类型</view>
                <view class="value">
                  {{ item.classificationUrl }}
                </view>
              </view>
            </view>
            <view class="wrap">
              <view class="item">
                <view class="label"> 牌号 </view>
                <view class="value">
                  {{ item.brandNum }}
                </view>
              </view>
              <view class="item">
                <view class="label"> 型号 </view>
                <view class="value">
                  {{ item.modelType }}
                </view>
              </view>
            </view>
            <view class="wrap">
              <view class="item">
                <view class="label"> 单位 </view>
                <view class="value">
                  {{ item.measuringUnit }} / {{ item.packingUnit }}
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="fixed-bottom">
          <view class="item" @click="close"> 取消 </view>
          <view class="item s1" @click="confirm"> 确定 </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { get, post } from '@/utils/api.js'
import _ from 'lodash'
import { mapGetters, mapActions } from 'vuex'
export default {
  props: {
    classificationIds: [String, Number]
  },
  data () {
    return {
      popShow: false,
      searchKey: '',
      dataList: [],
      current: ''
    }
  },
  created () {
    this.search = _.debounce(this.search, 1000)
  },
  computed: {
    ...mapGetters(['getDictValue'])
  },
  methods: {
    open () {
      this.popShow = true
      this.getData()
    },
    close () {
      this.popShow = false
      // 重置
      this.current = ''
    },
    handlCurrent (index) {
      this.current = index
    },
    search (e) {
      this.getData()
    },
    confirm () {
      if (this.current === '') {
        uni.showToast({
          title: '请选择物料信息',
          icon: 'none'
        })
        return
      }
      let item = this.dataList[this.current]
      this.$emit('succeed', {
        data: item
      })
      this.close()
    },
    getData () {
      let par = {
        classificationIds: [this.classificationIds],
        searchKey: this.searchKey,
        page: 1,
        size: 999
      }
      par = this.URLSearchParams(par)
      get(this.apiUrl + '/asset/get/goods/page?' + par).then(res => {
        if (res.success) {
          console.log(res)
          this.dataList = res.data.records
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  padding: 20rpx 0 0;
  position: relative;
}

.fixed-bottom {
  margin-top: 20rpx;
  background-color: #fff;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  border: 1px solid #157a2c;

  .item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80rpx;
    font-size: 28rpx;
    color: #333;

    &.s1 {
      background-color: #157a2c;
      color: #fff;
    }
  }
}

.order-list-wrap {
  height: 800rpx;
  overflow-y: auto;
  .order-list {
    padding: 30rpx 20rpx;
    border-bottom: 1px solid #f2f2f2;
    position: relative;
    &.active {
      background-color: #caf982;
    }
    .s1 {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .b1 {
        color: #555555;
        font-size: 30rpx;
      }

      .b2 {
        color: #000000;
        font-size: 28rpx;
      }
    }

    .wrap {
      display: flex;
      margin-top: 20rpx;

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

        .label {
          margin-right: 20rpx;
        }
      }
    }
  }
}
</style>