This commit is contained in:
parent
882ef633d1
commit
3a5c674777
|
@ -61,6 +61,7 @@ const setComponentRef = (el, id) => {
|
|||
|
||||
const { proxy, ctx: that } = getCurrentInstance();
|
||||
const layout = ref([]);
|
||||
|
||||
onMounted(() => {
|
||||
const layoutStr = JSON.parse(localStorage.getItem('layout'));
|
||||
if (layoutStr && layoutStr.length > 0) {
|
||||
|
@ -72,6 +73,11 @@ onMounted(() => {
|
|||
layout.value = layoutStr;
|
||||
}
|
||||
console.log('oooo', layout.value);
|
||||
|
||||
// 计算分组数量: {workbench:12}
|
||||
for (const item of groupList) {
|
||||
item.count = tilesList.filter((item1) => item1.group == item.value).length;
|
||||
}
|
||||
});
|
||||
const colNum = 12;
|
||||
let defaultH = 2;
|
||||
|
@ -548,7 +554,7 @@ const haveItem = (name) => {
|
|||
};
|
||||
|
||||
// 磁贴商店筛选
|
||||
const shopFlotter = ref('1');
|
||||
const shopFlotter = ref('-1');
|
||||
|
||||
// 新建磁贴弹层
|
||||
const addTilesModal = ref(false);
|
||||
|
@ -598,7 +604,11 @@ const formState = reactive({
|
|||
:h="item.h"
|
||||
:i="item.i"
|
||||
:is-resizable="
|
||||
tilesIsMove && item && item.isResize ? item.isResize : false
|
||||
tilesIsMove &&
|
||||
(item.component.includes('Output2') ||
|
||||
item.component.includes('Output5'))
|
||||
? true
|
||||
: false
|
||||
"
|
||||
:min-h="item.minH"
|
||||
:min-w="item.minW"
|
||||
|
@ -663,7 +673,7 @@ const formState = reactive({
|
|||
<Popover v-model:open="shop" placement="topRight" trigger="click">
|
||||
<template #title>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="text-lg">磁贴商店(127)</div>
|
||||
<div class="text-lg">磁贴商店({{ tilesList.length }})</div>
|
||||
<CloseOutlined class="cursor-pointer" @click="shop = false" />
|
||||
</div>
|
||||
</template>
|
||||
|
@ -684,38 +694,40 @@ const formState = reactive({
|
|||
<div class="shop-box">
|
||||
<!-- <CheckboxGroup v-model:value="selectTilseArr" style="width: 100%"> -->
|
||||
<Collapse v-model:active-key="activeKeyArr" style="width: 100%">
|
||||
<CollapsePanel
|
||||
v-for="(value, num) in groupList"
|
||||
:key="num"
|
||||
:header="value.label"
|
||||
>
|
||||
<div class="components-box">
|
||||
<template v-for="item in tilesList" :key="item.name">
|
||||
<div
|
||||
v-if="item.group == value.value"
|
||||
:class="{
|
||||
'active pointer-events-none !cursor-no-drop':
|
||||
haveItem(item.name),
|
||||
}"
|
||||
:draggable="haveItem(item.name)"
|
||||
class="ctrl-box bg-background relative"
|
||||
@drag="drag"
|
||||
@dragend="dragend($event)"
|
||||
@dragstart="dragstart($event, item)"
|
||||
>
|
||||
<div class="ctrl-name">
|
||||
{{ `${item.name}(${item.size})` }}
|
||||
<template v-for="(value, num) in groupList" :key="num">
|
||||
<CollapsePanel
|
||||
v-if="value.show"
|
||||
:key="num"
|
||||
:header="`${value.label}(${value.count})`"
|
||||
>
|
||||
<div class="components-box">
|
||||
<template v-for="item in tilesList" :key="item.name">
|
||||
<div
|
||||
v-if="item.group == value.value"
|
||||
:class="{
|
||||
'active pointer-events-none !cursor-no-drop':
|
||||
haveItem(item.name),
|
||||
}"
|
||||
:draggable="haveItem(item.name)"
|
||||
class="ctrl-box bg-background relative"
|
||||
@drag="drag"
|
||||
@dragend="dragend($event)"
|
||||
@dragstart="dragstart($event, item)"
|
||||
>
|
||||
<div class="ctrl-name">
|
||||
{{ `${item.name}(${item.size})` }}
|
||||
</div>
|
||||
<img :src="`/xbyt/${item.name2}`" alt="" />
|
||||
<Checkbox
|
||||
:checked="haveItem(item.name)"
|
||||
:value="item.name"
|
||||
class="absolute bottom-0 right-1"
|
||||
/>
|
||||
</div>
|
||||
<img :src="`/xbyt/${item.name2}`" alt="" />
|
||||
<Checkbox
|
||||
:checked="haveItem(item.name)"
|
||||
:value="item.name"
|
||||
class="absolute bottom-0 right-1"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</CollapsePanel>
|
||||
</template>
|
||||
</div>
|
||||
</CollapsePanel>
|
||||
</template>
|
||||
</Collapse>
|
||||
<!-- </CheckboxGroup> -->
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue