拉代码

haoxuan

2023-11-06 2bb9a863e75312fe90869ea3deea137b46b1bb1e

 src/views/dashboard/components/DeviceCheckList.vue

@@ -4,18 +4,18 @@
      <template #title>设备选择</template>
      <div class="device-box">
        <el-scrollbar always class="scroller">
          <template v-if="devices?.length">
          <template v-if="deviceInfo?.deviceIDList?.length">
            <div
              v-for="(item, index) in devices"
              v-for="(item, index) in deviceInfo?.deviceIDList"
              :key="index"
              :class="item.checked ? 'device-item check-item' : 'device-item'"
              @click="deviceClick(index)"
              :class="selectedDevice === item ? 'device-item check-item' : 'device-item'"
              @click="deviceClick(item)"
            >
              <div class="item-l">
                <span>{{ item.number }}</span>
                {{ item.name }}
                <span>{{ item }}</span>
                <!--  {{ item }}-->
              </div>
              <div v-if="item.checked" class="item-r">
              <div v-if="selectedDevice === item" class="item-r">
                <el-icon class="item-icon" size="22" color="#00ff00"><CircleCheckFilled /></el-icon>
              </div>
            </div>
@@ -35,7 +35,11 @@
import { useVModel } from '@vueuse/core'
import { CircleCheckFilled } from '@element-plus/icons-vue'
import BigButton from '@/views/dashboard/components/BigButton.vue'
import { ref } from 'vue'
import { useDevicesStore } from '@/stores/devices'
import { storeToRefs } from 'pinia'
import { ref, watch } from 'vue'
import { apiSetCurrentDevice } from '@/api'
import { ElMessage } from 'element-plus'
export interface DeviceCheckListProps {
  modelValue: boolean
}
@@ -45,28 +49,57 @@

const emit = defineEmits<{
  'update:modelValue': [show: boolean]
  shouldReload: []
}>()
const modelData = useVModel(props, 'modelValue', emit)
const deviceStore = useDevicesStore()
const { deviceInfo } = storeToRefs(deviceStore)

const devices = ref([
  {
    number: '111',
    name: '设备A',
    checked: true
  },
  {
    number: '222',
    name: '设备b'
// 弹窗打开时设定当前选中的设备
const selectedDevice = ref<string>('')
watch(modelData, () => {
  if (modelData.value) {
    selectedDevice.value = deviceInfo.value?.currentDeviceID ?? ''
  }
])
})

function deviceClick(deviceId: string) {
  selectedDevice.value = deviceId
}

function saveModal() {
  if (!selectedDevice.value) {
    ElMessage({
      message: '请先选中一个设备',
      type: 'error',
      duration: 3 * 1000
    })
    return
  }
  apiSetCurrentDevice({ currentDeviceID: selectedDevice.value })
    .then(() => {
      ElMessage({
        message: '设定成功',
        type: 'success',
        duration: 2 * 1000
      })
      modelData.value = false
      emit('shouldReload')
    })
    .catch((err) => {
      console.error(err)
      ElMessage({
        message: err.msg,
        type: 'error',
        duration: 3 * 1000
      })
    })
    .finally(() => {
      deviceStore.startPollingDevice()
    })
}
function closeModal() {
  modelData.value = false
}
function saveModal() {}
const deviceClick = (index) => {
  devices.value.find((ele) => (ele.checked = false))

  devices.value[index].checked = true
}
</script>
<style scoped lang="scss">