cmc-oa/oa-ui-app/pages/components/RepairDevicePicker.vue

<template>
  <uni-popup ref="popup" type="center">
    <view class="popup-content">
      <view class="popup-header">
        <text class="title">选择需维修设备</text>
        <uni-icons type="closeempty" size="24" @click="close"></uni-icons>
      </view>
      <view class="popup-body">
        <view class="device-list">
          <view class="device-item" 
            v-for="(item, index) in deviceList" 
            :key="index"
            :class="{ 'selected': isSelected(item.deviceId) }"
            @click="toggleSelection(item)">
            <view class="device-info">
              <text class="device-name">{{ item.name }}</text>
              <text class="device-code">出厂编号：{{ item.code }}</text>
            </view>
            <uni-icons 
              :type="isSelected(item.deviceId) ? 'checkbox-filled' : 'circle'" 
              :color="isSelected(item.deviceId) ? '#67c23a' : '#999'"
              size="20">
            </uni-icons>
          </view>
        </view>
      </view>
      <view class="popup-footer">
        <uv-button type="default" @click="close">取消</uv-button>
        <uv-button type="primary" @click="confirm">确认</uv-button>
      </view>
    </view>
  </uni-popup>
</template>

<script>
export default {
  name: 'RepairDevicePicker',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    deviceList: {
      type: Array,
      default: () => []
    },
    selectedDevices: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      tempSelected: []
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.$refs.popup.open();
        this.tempSelected = [...this.selectedDevices];
      } else {
        this.$refs.popup.close();
      }
    },
    selectedDevices: {
      handler(val) {
        this.tempSelected = [...val];
      },
      immediate: true
    }
  },
  methods: {
    isSelected(deviceId) {
      return this.tempSelected.includes(deviceId);
    },
    toggleSelection(device) {
      const index = this.tempSelected.indexOf(device.deviceId);
      if (index === -1) {
        this.tempSelected.push(device.deviceId);
      } else {
        this.tempSelected.splice(index, 1);
      }
    },
    close() {
      this.$emit('update:visible', false);
    },
    confirm() {
      this.$emit('update:selectedDevices', this.tempSelected);
      this.close();
    }
  }
}
</script>

<style lang="scss" scoped>
.popup-content {
  width: 600rpx;
  background: #fff;
  border-radius: 12rpx;
  overflow: hidden;
}

.popup-header {
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rpx solid #eee;
  
  .title {
    font-size: 32rpx;
    font-weight: bold;
  }
}

.popup-body {
  max-height: 600rpx;
  overflow-y: auto;
  padding: 20rpx;
}

.device-list {
  .device-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    border-bottom: 1rpx solid #eee;
    
    &:last-child {
      border-bottom: none;
    }
    
    &.selected {
      background-color: rgba(103, 194, 58, 0.05);
    }
    
    .device-info {
      flex: 1;
      
      .device-name {
        font-size: 28rpx;
        color: #333;
        display: block;
        margin-bottom: 8rpx;
      }
      
      .device-code {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}

.popup-footer {
  padding: 20rpx;
  display: flex;
  justify-content: flex-end;
  gap: 20rpx;
  border-top: 1rpx solid #eee;
}
</style>