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

     1  <script setup lang="ts">
     2  import {computed, onMounted, onUnmounted, PropType, ref, watch} from 'vue'
     3  import {CloseBold} from "@element-plus/icons-vue";
     4  import {useI18n} from '@/hooks/web/useI18n'
     5  import {Card, CardItem, Core, eventBus} from "@/views/Dashboard/core";
     6  import {DraggableContainer} from "@/components/DraggableContainer";
     7  import {ElButton, ElButtonGroup, ElIcon, ElMenu, ElMenuItem, ElTag,} from 'element-plus'
     8  
     9  const {t} = useI18n()
    10  
    11  const cardItem = ref<CardItem>(null)
    12  
    13  const props = defineProps({
    14    core: {
    15      type: Object as PropType<Core>,
    16    },
    17    card: {
    18      type: Object as PropType<Nullable<Card>>,
    19      default: () => null
    20    },
    21  })
    22  
    23  const activeCard = computed({
    24    get(): Card {
    25      return props.card as Card
    26    },
    27    set(val: Card) {
    28    }
    29  })
    30  
    31  const currentCore = computed({
    32    get(): Core {
    33      return props.core as Core
    34    },
    35    set(val: Core) {
    36    }
    37  })
    38  
    39  watch(
    40    () => props.card,
    41    (val?: Card) => {
    42      if (!val) return
    43      activeCard.value = val
    44      if (val?.selectedItem > -1) {
    45        cardItem.value = val?.items[val?.selectedItem] || null
    46      } else {
    47        cardItem.value = null
    48      }
    49  
    50    },
    51    {
    52      deep: true,
    53      immediate: true
    54    }
    55  )
    56  
    57  const menuCardItemClick = (index: number) => {
    58    if (currentCore.value.activeTabIdx < 0 || currentCore.value.activeCard == undefined) {
    59      return;
    60    }
    61  
    62    activeCard.value.selectedItem = index;
    63  
    64    eventBus.emit('selectedCardItem', index)
    65  }
    66  
    67  const sortCardItemUp = (item: CardItem, index: number) => {
    68    activeCard.value.sortCardItemUp(item, index)
    69    currentCore.value.updateCard();
    70  }
    71  
    72  const sortCardItemDown = (item: CardItem, index: number) => {
    73    activeCard.value.sortCardItemDown(item, index)
    74    currentCore.value.updateCard();
    75  }
    76  
    77  const showMenuWindow = ref(false)
    78  
    79  const eventHandler = () => {
    80    showMenuWindow.value = !showMenuWindow.value
    81  }
    82  
    83  onMounted(() => {
    84    eventBus.subscribe('toggleCardItemsMenu', eventHandler)
    85  })
    86  
    87  onUnmounted(() => {
    88    eventBus.unsubscribe('toggleCardItemsMenu', eventHandler)
    89  })
    90  
    91  </script>
    92  
    93  <template>
    94    <DraggableContainer :name="'editor-card-items'" :initial-width="280" :min-width="280" v-show="showMenuWindow">
    95      <template #header>
    96        <div class="w-[100%]">
    97          <div style="float: left">Card Items</div>
    98          <div style="float: right; text-align: right">
    99            <a href="#" @click.prevent.stop='showMenuWindow= false'>
   100              <ElIcon class="mr-5px">
   101                <CloseBold/>
   102              </ElIcon>
   103            </a>
   104          </div>
   105        </div>
   106      </template>
   107      <template #default>
   108        <ElMenu
   109          v-if="activeCard && activeCard.id"
   110          ref="tabMenu"
   111          :default-active="activeCard.selectedItem + ''"
   112          v-model="activeCard.selectedItem"
   113          class="el-menu-vertical-demo box-card">
   114          <ElMenuItem
   115            :index="index + ''"
   116            :key="index"
   117            v-for="(item, index) in activeCard.items"
   118            @click="menuCardItemClick(index)">
   119            <div class="w-[100%] menu-item">
   120                  <span>
   121                    {{ item.title }}
   122                  <ElTag type="info" size="small">
   123                    {{ item.type }}
   124                  </ElTag>
   125                  </span>
   126              <ElButtonGroup class="buttons">
   127                <ElButton @click.prevent.stop="sortCardItemUp(item, index)" text size="small">
   128                  <Icon icon="teenyicons:up-solid"/>
   129                </ElButton>
   130                <ElButton @click.prevent.stop="sortCardItemDown(item, index)" text size="small">
   131                  <Icon icon="teenyicons:down-solid"/>
   132                </ElButton>
   133              </ElButtonGroup>
   134            </div>
   135          </ElMenuItem>
   136        </ElMenu>
   137  
   138      </template>
   139    </DraggableContainer>
   140  
   141  </template>
   142  
   143  <style lang="less">
   144  
   145  </style>