aiot-app/pages/production/execute/components/batchPopu.vue

<template>
  <view>
    <uni-popup ref="popup" type="bottom">
      <div class="popup">
        <div class="popup-top">
          <div class="top-left">选择批次号</div>
          <div class="top-right">
            <button @click="close">关闭</button>
            <button @click="comfirm">确定</button>
          </div>
        </div>
        <div class="popup-list">
          <radio-group @change="radioChange">
            <template v-for="(item, index) in warehouseList">
              <label class="list-item">
                <view class="item-radio">
                  <radio :value="index + ''" :checked="index == current" />
                </view>
                <view class="lable-title">
                  <label>{{ item.warehouse }}</label>
                </view>
              </label>
            </template>
          </radio-group>
        </div>
      </div>
    </uni-popup>
  </view>
</template>

<script>
import { get, getJ, post, postJ } from "@/utils/api.js";
import { getByCode } from "@/api/production/extrusion.js";
export default {
  props: {},
  components: {},
  data() {
    return {
      warehouseList: [],
      current: -1,
      currentData: {},
    };
  },
  onShow() {},

  methods: {
    open() {
      this.$refs.popup.open("bottom");
      this.getList();
    },
    close() {
      this.$refs.popup.close();
    },

    async getList() {
      const data = await getByCode("warehouse");
      const list = [];
      if (data.length) {
        data.map((item, index) => {
          for (var key in data[index]) {
            list.push({
              warehouse: data[index][key],
              warehouseId: key,
            });
          }
        });
      }
      this.warehouseList = list;
    },

    radioChange(e) {
      let value = Number(e.detail.value);
      let employeeList = this.warehouseList;
      let warehouse = employeeList[value].warehouse;
      let warehouseId = employeeList[value].warehouseId;
      let data = {
        warehouse,
        warehouseId,
      };
      this.currentData = data;
    },

    comfirm() {
      this.close();
      this.$emit("checkLocation", this.currentData);
    },
  },
};
</script>

<style lang="scss" scoped>
.popup {
  width: 100%;
  height: 600rpx;
  background: #fff;
  .popup-top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80rpx;
    background: rgba(21, 122, 44, 1);
    color: #fff;
    .top-left {
      font-size: 32rpx;
      margin-left: 10rpx;
    }
    .top-right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-right: 10rpx;
      uni-button {
        background: rgba(21, 122, 44, 1);
        color: #fff;
        width: 100rpx;
        height: 60rpx;
        line-height: 60rpx;
        font-size: 28rpx;
        padding: 0;
        border: 1rpx solid #fff;
        margin-left: 20rpx;
      }
    }
  }
  .popup-list {
    width: 100%;
    height: 520rpx;
    overflow-y: auto;
    background-color: rgba(242, 242, 242, 1);
    .list-item {
      padding: 0 30rpx;
      height: 80rpx;
      text-align: center;
      line-height: 80rpx;
      border-bottom: 1rpx solid #fff;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .item-radio {
        margin: 0 16rpx;
      }
    }
    .list-item:last-child {
      border: none;
    }
    .list-item:hover {
      background: rgba(254, 64, 102, 0.25);
    }
  }
}
</style>