github.com/e154/smart-home@v0.17.2-0.20240311175135-e530a6e5cd45/static_source/admin/src/views/Dashboard/editor/CardListWindow.vue (about)

     1  <script setup lang="ts">
     2  import {computed, onMounted, onUnmounted, PropType, ref} from 'vue'
     3  import {ElButton, ElButtonGroup, ElIcon, ElMenu, ElMenuItem,} from 'element-plus'
     4  import {CloseBold} from '@element-plus/icons-vue'
     5  import {Card, Core, Tab, eventBus} from "@/views/Dashboard/core";
     6  import {DraggableContainer} from "@/components/DraggableContainer";
     7  
     8  const props = defineProps({
     9    core: {
    10      type: Object as PropType<Nullable<Core>>,
    11    },
    12  })
    13  
    14  const currentCore = computed(() => props.core as Core)
    15  
    16  const activeTab = computed({
    17    get(): Tab {
    18      return currentCore.value.getActiveTab as Tab
    19    },
    20    set(val: Tab) {
    21    }
    22  })
    23  
    24  // ---------------------------------
    25  // common
    26  // ---------------------------------
    27  
    28  const onSelectedCard = (id: number) => {
    29    currentCore.value.onSelectedCard(id);
    30    eventBus.emit('unselectedCardItem')
    31  }
    32  
    33  const menuCardsClick = (card) => {
    34    onSelectedCard(card.id)
    35  }
    36  
    37  const sortCardUp = (card: Card, index: number) => {
    38    activeTab.value.sortCardUp(card, index)
    39    eventBus.emit('updateTab', activeTab.value.id)
    40  }
    41  
    42  const sortCardDown = (card: Card, index: number) => {
    43    activeTab.value.sortCardDown(card, index)
    44    eventBus.emit('updateTab', activeTab.value.id)
    45  }
    46  
    47  const showMenuWindow = ref(false)
    48  const eventHandler = () => {
    49    showMenuWindow.value = !showMenuWindow.value
    50  }
    51  onMounted(() => {
    52    eventBus.subscribe('toggleCardsMenu', eventHandler)
    53  })
    54  
    55  onUnmounted(() => {
    56    eventBus.unsubscribe('toggleCardsMenu', eventHandler)
    57  })
    58  
    59  </script>
    60  
    61  <template>
    62  
    63    <DraggableContainer :name="'editor-cards'" :initial-width="280" :min-width="280" v-show="showMenuWindow">
    64      <template #header>
    65        <div class="w-[100%]">
    66          <div style="float: left">Cards</div>
    67          <div style="float: right; text-align: right">
    68            <a href="#" @click.prevent.stop='showMenuWindow= false'>
    69              <ElIcon class="mr-5px">
    70                <CloseBold/>
    71              </ElIcon>
    72            </a>
    73          </div>
    74        </div>
    75      </template>
    76      <template #default>
    77  
    78        <ElMenu v-if="currentCore.activeTabIdx > -1 && activeTab.cards.length"
    79                :default-active="currentCore.activeCard + ''" v-model="currentCore.activeCard"
    80                class="el-menu-vertical-demo">
    81          <ElMenuItem :index="index + ''" :key="index" v-for="(card, index) in activeTab.cards"
    82                      @click="menuCardsClick(card)">
    83            <div class="w-[100%] menu-item">
    84              <span>{{ card.title }}</span>
    85              <ElButtonGroup class="buttons">
    86                <ElButton @click.prevent.stop="sortCardUp(card, index)" text size="small">
    87                  <Icon icon="teenyicons:up-solid"/>
    88                </ElButton>
    89                <ElButton @click.prevent.stop="sortCardDown(card, index)" text size="small">
    90                  <Icon icon="teenyicons:down-solid"/>
    91                </ElButton>
    92              </ElButtonGroup>
    93            </div>
    94          </ElMenuItem>
    95        </ElMenu>
    96  
    97      </template>
    98    </DraggableContainer>
    99  
   100  
   101  </template>
   102  
   103  <style lang="less">
   104  
   105  </style>