mky-vent-base/src/views/vent/home/configurable/blue/components/originalNew/rightHeader3.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <!-- Header部分 -->
  <div v-if="headerConfig.show" class="w-100% flex costume-header">
    <!-- 选择下拉框，自动填充剩余空间，这种实现是因为 Select 不支持 suffix -->
    <Dropdown
      v-if="headerConfig.selector.show"
      class="flex-grow-1 costume-header_left"
      :trigger="['click']"
      :bordered="false"
      @open-change="visible = $event"
    >
      <div class="flex-basis-100% flex flex-items-center" @click.prevent>
        <div class="headerType w-100px flex-grow-1 overflow-hidden whitespace-nowrap text-ellipsis">
          {{ selectedDeviceLabel }}
        </div>
        <CaretUpOutlined class="w-30px" v-if="visible" />
        <CaretDownOutlined class="w-30px" v-else />
      </div>
      <template #overlay>
        <Menu :selected-keys="[selectedDeviceID]" @click="selectHandler">
          <MenuItem v-for="item in options" :key="item.value" :title="item.label">
            {{ item.label }}
          </MenuItem>
        </Menu>
      </template>
    </Dropdown>
    <template v-if="headerConfig.slot.show">
      <div class="headerType flex-basis-50% flex flex-items-center flex-grow-1 costume-header_right">
        <div class="flex-grow-1">
          {{ selectedDeviceSlot }}
        </div>
      </div>
    </template>
  </div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
import { Config } from '../../../../../deviceManager/configurationTable/types';
import { useInitModule } from '../../../hooks/useInit';
import { MenuItem, Menu, Dropdown } from 'ant-design-vue';
import { SwapOutlined, CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';

const props = defineProps<{
  moduleData: Config['moduleData'];
  deviceType: Config['deviceType'];
  data: any;
}>();

const emit = defineEmits(['select']);

const visible = ref(false);
const headerConfig = props.moduleData.header;
const { selectedDeviceID, selectedDevice, selectedDeviceSlot, selectedDeviceLabel, options, init } = useInitModule(
  props.deviceType,
  props.moduleData
);

function selectHandler({ key }) {
  selectedDeviceID.value = key;
  emit('select', selectedDevice.value);
}

watch(
  () => props.data,
  (d) => {
    init(d);
    emit('select', selectedDevice.value);
  },
  {
    immediate: true,
  }
);
</script>
<style scoped>
@import '/@/design/theme.less';

.costume-header {
  width: 100%;
  height: 30px;
  margin-bottom: 10px;
  background: url('@/assets/images/vent/homeNew/Right-bottom.png') no-repeat;
  background-size: 100% 100%;
}
.costume-header_left {
  margin-left: 20px;
}
.costume-header_right {
}
</style>