ln-web/src/views/device/detail/components/deviceConfig/index.vue

<template>
  <a-drawer
    :open="props.open"
    class="config-drawer"
    root-class-name="config-drawer-root"
    :title="drawerTitle"
    :width="drawerWidth"
    placement="right"
    @close="close"
  >
    <template #extra>
      <a-radio-group v-model:value="modeRadio" button-style="solid" size="small">
        <a-radio-button value="base">基础配置</a-radio-button>
        <a-radio-button value="area">区域配置</a-radio-button>
      </a-radio-group>
    </template>

    <template v-if="modeRadio === 'base' && props.open">
      <deviceBaseConfig
        :dev-id="props.data.devId"
        :client-id="props.data.clientId"
        @success="deviceAreaConfigSuccess"
      ></deviceBaseConfig>
    </template>

    <template v-if="modeRadio === 'area' && props.open">
      <deviceAreaConfig
        :dev-id="props.data.devId"
        :length="props.data.length"
        :width="props.data.width"
        :ranges="[props.data.xStart, props.data.xEnd, props.data.yStart, props.data.yEnd]"
        @success="deviceAreaConfigSuccess"
      ></deviceAreaConfig>
    </template>
  </a-drawer>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import deviceBaseConfig from '../deviceBaseConfig/index.vue'
import deviceAreaConfig from '../deviceAreaConfig/index.vue'

defineOptions({
  name: 'DeviceConfigDrawer',
})

type Props = {
  open: boolean
  mode?: 'base' | 'area'
  title?: string
  data: {
    devId: string
    clientId: string
    length: number
    width: number
    xStart: number
    xEnd: number
    yStart: number
    yEnd: number
  }
}

const emit = defineEmits<{
  (e: 'update:open', value: boolean): void
  (e: 'success', value: void): void
}>()
const props = withDefaults(defineProps<Props>(), {
  open: false,
  mode: 'base',
  title: '',
  data: () => ({
    devId: '',
    clientId: '',
    length: 0,
    width: 0,
    xStart: 0,
    xEnd: 0,
    yStart: 0,
    yEnd: 0,
  }),
})

const modeRadio = ref<'base' | 'area'>(props.mode)
const drawerWidth = computed(() => {
  return modeRadio.value === 'base' ? 600 : 800
})
const drawerTitle = computed(() =>
  props.title ? props.title : modeRadio.value === 'base' ? '设备配置' : '区域配置'
)

watch(
  () => props.open,
  (newVal) => {
    if (newVal) {
      console.log('🌸🌸deviceConfig PROPS🌸🌸', props)
      modeRadio.value = props.mode
    }
  },
  {
    immediate: true,
  }
)

const deviceAreaConfigSuccess = () => {
  close()
  emit('success')
}
const close = () => {
  emit('update:open', false)
}
</script>

<style scoped lang="less"></style>