This commit is contained in:
parent
2149877576
commit
25fa733943
|
@ -315,9 +315,15 @@ const selectTodoClick = (item: string) => {
|
||||||
全部
|
全部
|
||||||
</Button>
|
</Button>
|
||||||
</li>
|
</li>
|
||||||
<li v-for="item in plainOptions" :key="item" @click="selectedClick(item)">
|
<li
|
||||||
|
v-for="(item, index) in plainOptions"
|
||||||
|
:key="item"
|
||||||
|
@click="selectedClick(item)"
|
||||||
|
>
|
||||||
<Button :type="selectClass == item ? 'primary' : 'default'">
|
<Button :type="selectClass == item ? 'primary' : 'default'">
|
||||||
{{ item }}
|
{{ item }}
|
||||||
|
<span v-if="index == 3" class="text-[#f10215]">(10)</span>
|
||||||
|
<span v-if="index == 6" class="text-[#f10215]">(9)</span>
|
||||||
</Button>
|
</Button>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
@ -39,7 +39,7 @@ import { storeToRefs } from 'pinia';
|
||||||
|
|
||||||
import { useCanvasStore, UseTilesStore } from '#/store';
|
import { useCanvasStore, UseTilesStore } from '#/store';
|
||||||
|
|
||||||
import { tilesList } from './tiles';
|
import { groupList, tilesList } from './tiles';
|
||||||
import { debounce, isElementInFolder, isGroup, updateRowHeight } from './utils';
|
import { debounce, isElementInFolder, isGroup, updateRowHeight } from './utils';
|
||||||
|
|
||||||
const tilesStore = UseTilesStore();
|
const tilesStore = UseTilesStore();
|
||||||
|
@ -569,8 +569,7 @@ const formState = reactive({
|
||||||
Displayed as <code>[x, y, w, h]</code>:
|
Displayed as <code>[x, y, w, h]</code>:
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div v-for="item in layout">
|
<div v-for="item in layout">
|
||||||
<b>{{ item.i }}</b
|
<b>{{ item.i }}</b>: [{{ item.x }}, {{ item.y }}, {{ item.w }}, {{ item.h }}]
|
||||||
>: [{{ item.x }}, {{ item.y }}, {{ item.w }}, {{ item.h }}]
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -671,209 +670,50 @@ const formState = reactive({
|
||||||
<template #content>
|
<template #content>
|
||||||
<div class="shop-seach mb-2 flex items-center">
|
<div class="shop-seach mb-2 flex items-center">
|
||||||
<Select v-model:value="shopFlotter">
|
<Select v-model:value="shopFlotter">
|
||||||
<SelectOption value="1">全部应用磁贴</SelectOption>
|
<SelectOption value="-1">全部应用磁贴</SelectOption>
|
||||||
<SelectOption value="2">Option2</SelectOption>
|
<SelectOption
|
||||||
|
v-for="(item, index) in groupList"
|
||||||
|
:key="index"
|
||||||
|
:value="index"
|
||||||
|
>
|
||||||
|
{{ item.label }}
|
||||||
|
</SelectOption>
|
||||||
</Select>
|
</Select>
|
||||||
<InputSearch placeholder="" />
|
<InputSearch placeholder="" />
|
||||||
</div>
|
</div>
|
||||||
<div class="shop-box">
|
<div class="shop-box">
|
||||||
<!-- <CheckboxGroup v-model:value="selectTilseArr" style="width: 100%"> -->
|
<!-- <CheckboxGroup v-model:value="selectTilseArr" style="width: 100%"> -->
|
||||||
<Collapse v-model:active-key="activeKeyArr" style="width: 100%">
|
<Collapse v-model:active-key="activeKeyArr" style="width: 100%">
|
||||||
<CollapsePanel key="1" header="个人工作台(22)">
|
<CollapsePanel
|
||||||
<!-- 可拖入的组件部分 -->
|
v-for="(value, num) in groupList"
|
||||||
|
:key="num"
|
||||||
|
:header="value.label"
|
||||||
|
>
|
||||||
<div class="components-box">
|
<div class="components-box">
|
||||||
<div
|
<template v-for="item in tilesList" :key="item.name">
|
||||||
v-for="item in componentsInfo.slice(0, 22)"
|
<div
|
||||||
:key="item.name"
|
v-if="item.group == value.value"
|
||||||
:class="{
|
:class="{
|
||||||
'active pointer-events-none !cursor-no-drop': haveItem(
|
'active pointer-events-none !cursor-no-drop':
|
||||||
item.name,
|
haveItem(item.name),
|
||||||
),
|
}"
|
||||||
}"
|
:draggable="haveItem(item.name)"
|
||||||
:draggable="haveItem(item.name)"
|
class="ctrl-box bg-background relative"
|
||||||
class="ctrl-box bg-background relative"
|
@drag="drag"
|
||||||
@drag="drag"
|
@dragend="dragend($event)"
|
||||||
@dragend="dragend($event)"
|
@dragstart="dragstart($event, item)"
|
||||||
@dragstart="dragstart($event, item)"
|
>
|
||||||
>
|
<div class="ctrl-name">
|
||||||
<div class="ctrl-name">
|
{{ `${item.name}(${item.size})` }}
|
||||||
{{ `${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>
|
</div>
|
||||||
<img :src="`/xbyt/${item.name2}`" alt="" />
|
</template>
|
||||||
<Checkbox
|
|
||||||
:checked="haveItem(item.name)"
|
|
||||||
:value="item.name"
|
|
||||||
class="absolute bottom-0 right-1"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CollapsePanel>
|
|
||||||
<CollapsePanel key="2" header="综合行政(12)">
|
|
||||||
<div class="components-box">
|
|
||||||
<div
|
|
||||||
v-for="item in componentsInfo.slice(22, 34)"
|
|
||||||
:key="item.name"
|
|
||||||
:class="{
|
|
||||||
'active pointer-events-none !cursor-no-drop': haveItem(
|
|
||||||
item.name,
|
|
||||||
),
|
|
||||||
}"
|
|
||||||
class="ctrl-box bg-background"
|
|
||||||
draggable="true"
|
|
||||||
@drag="drag"
|
|
||||||
@dragend="dragend"
|
|
||||||
@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>
|
|
||||||
</div>
|
|
||||||
</CollapsePanel>
|
|
||||||
<CollapsePanel key="3" header="经营管理(22)">
|
|
||||||
<div class="components-box">
|
|
||||||
<div
|
|
||||||
v-for="item in componentsInfo.slice(34, 56)"
|
|
||||||
:key="item.name"
|
|
||||||
:class="{
|
|
||||||
'active pointer-events-none !cursor-no-drop': haveItem(
|
|
||||||
item.name,
|
|
||||||
),
|
|
||||||
}"
|
|
||||||
class="ctrl-box bg-background"
|
|
||||||
draggable="true"
|
|
||||||
@drag="drag"
|
|
||||||
@dragend="dragend"
|
|
||||||
@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>
|
|
||||||
</div>
|
|
||||||
</CollapsePanel>
|
|
||||||
<CollapsePanel key="4" header="安全生产(19)">
|
|
||||||
<div class="components-box">
|
|
||||||
<div
|
|
||||||
v-for="item in componentsInfo.slice(56, 75)"
|
|
||||||
:key="item.name"
|
|
||||||
:class="{
|
|
||||||
'active pointer-events-none !cursor-no-drop': haveItem(
|
|
||||||
item.name,
|
|
||||||
),
|
|
||||||
}"
|
|
||||||
class="ctrl-box bg-background"
|
|
||||||
draggable="true"
|
|
||||||
@drag="drag"
|
|
||||||
@dragend="dragend"
|
|
||||||
@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>
|
|
||||||
</div>
|
|
||||||
</CollapsePanel>
|
|
||||||
<CollapsePanel key="5" header="勘探开发(26)">
|
|
||||||
<div class="components-box">
|
|
||||||
<div
|
|
||||||
v-for="item in componentsInfo.slice(75, 101)"
|
|
||||||
:key="item.name"
|
|
||||||
:class="{
|
|
||||||
'active pointer-events-none !cursor-no-drop': haveItem(
|
|
||||||
item.name,
|
|
||||||
),
|
|
||||||
}"
|
|
||||||
class="ctrl-box bg-background"
|
|
||||||
draggable="true"
|
|
||||||
@drag="drag"
|
|
||||||
@dragend="dragend"
|
|
||||||
@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>
|
|
||||||
</div>
|
|
||||||
</CollapsePanel>
|
|
||||||
<CollapsePanel key="6" header="数据管理(1)">
|
|
||||||
<div class="components-box">
|
|
||||||
<div
|
|
||||||
v-for="item in componentsInfo.slice(101, 102)"
|
|
||||||
:key="item.name"
|
|
||||||
:class="{
|
|
||||||
'active pointer-events-none !cursor-no-drop': haveItem(
|
|
||||||
item.name,
|
|
||||||
),
|
|
||||||
}"
|
|
||||||
class="ctrl-box bg-background"
|
|
||||||
draggable="true"
|
|
||||||
@drag="drag"
|
|
||||||
@dragend="dragend"
|
|
||||||
@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>
|
|
||||||
</div>
|
|
||||||
</CollapsePanel>
|
|
||||||
<CollapsePanel key="7" header="总部系统(25)">
|
|
||||||
<div class="components-box">
|
|
||||||
<div
|
|
||||||
v-for="item in componentsInfo.slice(102, 127)"
|
|
||||||
:key="item.name"
|
|
||||||
:class="{
|
|
||||||
'active pointer-events-none !cursor-no-drop': haveItem(
|
|
||||||
item.name,
|
|
||||||
),
|
|
||||||
}"
|
|
||||||
class="ctrl-box bg-background"
|
|
||||||
draggable="true"
|
|
||||||
@drag="drag"
|
|
||||||
@dragend="dragend"
|
|
||||||
@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>
|
|
||||||
</div>
|
</div>
|
||||||
</CollapsePanel>
|
</CollapsePanel>
|
||||||
</Collapse>
|
</Collapse>
|
||||||
|
|
Loading…
Reference in New Issue