Merge branch 'test' of http://172.19.183.27:3000/z9130/pansoft-plrl into test
Frontend CI/CD / build (web-office) (push) Has been cancelled
Details
Frontend CI/CD / build (web-office) (push) Has been cancelled
Details
This commit is contained in:
commit
2e06e013b1
|
@ -148,7 +148,7 @@ const routes: RouteRecordRaw[] = [
|
||||||
meta: {
|
meta: {
|
||||||
hideInMenu: true,
|
hideInMenu: true,
|
||||||
icon: 'lucide:area-chart',
|
icon: 'lucide:area-chart',
|
||||||
title: '代办管理',
|
title: '待办管理',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
@ -16,12 +16,15 @@ const props = defineProps({
|
||||||
default: {},
|
default: {},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
const emits = defineEmits(['editGroupName']);
|
||||||
const cardName = ref(props.data.name);
|
const cardName = ref(props.data.name);
|
||||||
const newCardName = ref(cardName.value);
|
const newCardName = ref(cardName.value);
|
||||||
const isEdit = ref(true);
|
const isEdit = ref(true);
|
||||||
const setNewName = () => {
|
const setNewName = () => {
|
||||||
isEdit.value = !isEdit.value;
|
isEdit.value = !isEdit.value;
|
||||||
cardName.value = newCardName.value;
|
cardName.value = newCardName.value;
|
||||||
|
|
||||||
|
emits('editGroupName', props.data.i, cardName.value);
|
||||||
};
|
};
|
||||||
const { data } = toRefs(props);
|
const { data } = toRefs(props);
|
||||||
|
|
||||||
|
@ -53,20 +56,17 @@ defineExpose({
|
||||||
@click="isEdit = !isEdit"
|
@click="isEdit = !isEdit"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="card-name titlt-top">
|
<div v-else class="card-name titlt-top flex items-center justify-between">
|
||||||
<Input
|
<Input
|
||||||
v-model:value="newCardName"
|
v-model:value="newCardName"
|
||||||
:autofocus="true"
|
:autofocus="true"
|
||||||
:bordered="false"
|
:bordered="false"
|
||||||
size="small"
|
size="small"
|
||||||
>
|
/>
|
||||||
<template #addonAfter>
|
<Space warp>
|
||||||
<Space warp>
|
<CheckOutlined @click="setNewName" />
|
||||||
<CheckOutlined @click="setNewName" />
|
<CloseOutlined @click="isEdit = !isEdit" />
|
||||||
<CloseOutlined @click="isEdit = !isEdit" />
|
</Space>
|
||||||
</Space>
|
|
||||||
</template>
|
|
||||||
</Input>
|
|
||||||
</div>
|
</div>
|
||||||
<GridGroup
|
<GridGroup
|
||||||
ref="gridLayoutRef"
|
ref="gridLayoutRef"
|
||||||
|
|
|
@ -7,6 +7,7 @@ import {
|
||||||
nextTick,
|
nextTick,
|
||||||
onBeforeUnmount,
|
onBeforeUnmount,
|
||||||
onMounted,
|
onMounted,
|
||||||
|
reactive,
|
||||||
ref,
|
ref,
|
||||||
} from 'vue';
|
} from 'vue';
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
|
@ -14,19 +15,27 @@ import { useRouter } from 'vue-router';
|
||||||
import {
|
import {
|
||||||
CheckOutlined,
|
CheckOutlined,
|
||||||
CloseCircleFilled,
|
CloseCircleFilled,
|
||||||
|
CloseOutlined,
|
||||||
EditOutlined,
|
EditOutlined,
|
||||||
|
PlusOutlined,
|
||||||
ShoppingCartOutlined,
|
ShoppingCartOutlined,
|
||||||
UndoOutlined,
|
UndoOutlined,
|
||||||
} from '@ant-design/icons-vue';
|
} from '@ant-design/icons-vue';
|
||||||
import {
|
import {
|
||||||
Button,
|
|
||||||
Checkbox,
|
Checkbox,
|
||||||
CheckboxGroup,
|
|
||||||
Collapse,
|
Collapse,
|
||||||
CollapsePanel,
|
CollapsePanel,
|
||||||
FloatButton,
|
FloatButton,
|
||||||
FloatButtonGroup,
|
FloatButtonGroup,
|
||||||
|
Form,
|
||||||
|
FormItem,
|
||||||
|
Input,
|
||||||
|
InputGroup,
|
||||||
|
InputSearch,
|
||||||
|
Modal,
|
||||||
Popover,
|
Popover,
|
||||||
|
Select,
|
||||||
|
SelectOption,
|
||||||
} from 'ant-design-vue';
|
} from 'ant-design-vue';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
|
|
||||||
|
@ -144,6 +153,7 @@ const dragstart = (e, item) => {
|
||||||
defaultW = item.w;
|
defaultW = item.w;
|
||||||
};
|
};
|
||||||
const drag = (e, item) => {
|
const drag = (e, item) => {
|
||||||
|
shop.value = false;
|
||||||
e.preventDefault && e.preventDefault();
|
e.preventDefault && e.preventDefault();
|
||||||
const parentRect = document
|
const parentRect = document
|
||||||
.querySelector('.grid-box')
|
.querySelector('.grid-box')
|
||||||
|
@ -211,7 +221,6 @@ const drag = (e, item) => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const dragend = (e) => {
|
const dragend = (e) => {
|
||||||
console.log('eeeee', e);
|
|
||||||
tilesIsMove.value = false;
|
tilesIsMove.value = false;
|
||||||
const parentRect = document
|
const parentRect = document
|
||||||
.querySelector('.grid-box')
|
.querySelector('.grid-box')
|
||||||
|
@ -260,6 +269,7 @@ const dragend = (e) => {
|
||||||
'block';
|
'block';
|
||||||
} catch {}
|
} catch {}
|
||||||
}
|
}
|
||||||
|
shop.value = true;
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
// eslint-disable-next-line no-use-before-define
|
// eslint-disable-next-line no-use-before-define
|
||||||
tilesIsMove.value = true;
|
tilesIsMove.value = true;
|
||||||
|
@ -345,7 +355,7 @@ const shop = ref(false);
|
||||||
// 编辑磁贴
|
// 编辑磁贴
|
||||||
const editTiles = ref(false);
|
const editTiles = ref(false);
|
||||||
// 商店分组展开
|
// 商店分组展开
|
||||||
const activeKeyArr = ref(['1', '2', '3']);
|
const activeKeyArr = ref([]);
|
||||||
// 选中的磁贴
|
// 选中的磁贴
|
||||||
const selectTilseArr = ref([]);
|
const selectTilseArr = ref([]);
|
||||||
// 新增磁贴
|
// 新增磁贴
|
||||||
|
@ -396,44 +406,84 @@ const goPage = (item) => {
|
||||||
if (tilesIsMove.value) return;
|
if (tilesIsMove.value) return;
|
||||||
router.push(item?.path);
|
router.push(item?.path);
|
||||||
};
|
};
|
||||||
|
const addTilesForm = ref(null);
|
||||||
// 新增分组
|
// 新增分组
|
||||||
const addGroup = () => {
|
const addGroup = () => {
|
||||||
const arr = JSON.parse(JSON.stringify(layout.value));
|
tilesIsMove.value = false;
|
||||||
const maxY = arr.reduce((max, item) => {
|
addTilesForm.value.validateFields().then((res) => {
|
||||||
return Math.max(max, item.y);
|
const arr = JSON.parse(JSON.stringify(layout.value));
|
||||||
}, -Infinity);
|
const maxY = arr.reduce((max, item) => {
|
||||||
const obj = {
|
return Math.max(max, item.y);
|
||||||
name: '新建分组',
|
}, 0);
|
||||||
w: 4,
|
const obj = {
|
||||||
h: 6,
|
name: formState.name,
|
||||||
component: './components/Output5/index.vue',
|
w: formState.w,
|
||||||
dom: '.titlt-top',
|
h: formState.h,
|
||||||
isResize: true,
|
component: './components/Output5/index.vue',
|
||||||
X: 0,
|
isResize: true,
|
||||||
y: 0,
|
x: 0,
|
||||||
i: Math.random() * 100,
|
dom: '.titlt-top',
|
||||||
loadComp: loadComponent('./components/Output5/index.vue'),
|
y: maxY + 1,
|
||||||
childer: [
|
i: Number.parseInt(Math.random() * 10_000),
|
||||||
{
|
loadComp: loadComponent('./components/Output5/index.vue'),
|
||||||
name1: 'AUTO_1612159241967.png',
|
childer: [
|
||||||
name2: 'AUTO_1612159241967_C车辆调度.png',
|
{
|
||||||
size: '2x2',
|
name1: 'AUTO_1612159241967.png',
|
||||||
name: '车辆调度',
|
name2: 'AUTO_1612159241967_C车辆调度.png',
|
||||||
w: 1,
|
size: '2x2',
|
||||||
h: 2,
|
name: '车辆调度',
|
||||||
i: 0,
|
w: 1,
|
||||||
x: 1,
|
h: 2,
|
||||||
y: 1,
|
minW: 1,
|
||||||
component: '../../components/Output1/index.vue',
|
minH: 2,
|
||||||
},
|
i: 0,
|
||||||
],
|
x: 1,
|
||||||
};
|
y: 1,
|
||||||
|
component: '../Output1/index.vue',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
layout.value.push(obj);
|
layout.value.push(obj);
|
||||||
|
formState.name = '';
|
||||||
|
formState.w = 4;
|
||||||
|
formState.h = 4;
|
||||||
|
|
||||||
console.log(layout.value, '00000');
|
addTilesModal.value = false;
|
||||||
|
nextTick(() => {
|
||||||
|
tilesIsMove.value = true;
|
||||||
|
});
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 编辑分组名称
|
||||||
|
const editGroupName = (i, name) => {
|
||||||
|
layout.value.forEach((element) => {
|
||||||
|
if (element.i == i) {
|
||||||
|
element.name = name;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const newLayout = JSON.parse(JSON.stringify(layout.value));
|
||||||
|
window.localStorage.setItem('layout', JSON.stringify(newLayout));
|
||||||
|
};
|
||||||
|
|
||||||
|
// 查找画布中有没有当前元素
|
||||||
|
const haveItem = (name) => {
|
||||||
|
return layout.value.some((item) => item.name == name);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 磁贴商店筛选
|
||||||
|
const shopFlotter = ref('1');
|
||||||
|
|
||||||
|
// 新建磁贴弹层
|
||||||
|
const addTilesModal = ref(false);
|
||||||
|
|
||||||
|
const formState = reactive({
|
||||||
|
name: '',
|
||||||
|
w: 4,
|
||||||
|
h: 4,
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
@ -452,7 +502,6 @@ const addGroup = () => {
|
||||||
</div> -->
|
</div> -->
|
||||||
|
|
||||||
<div class="grid-box index-grid select-none">
|
<div class="grid-box index-grid select-none">
|
||||||
<Button type="primary" @click="addGroup">新增分组</Button>
|
|
||||||
<grid-layout
|
<grid-layout
|
||||||
v-if="rowHeight != 0"
|
v-if="rowHeight != 0"
|
||||||
ref="gridLayout"
|
ref="gridLayout"
|
||||||
|
@ -496,6 +545,7 @@ const addGroup = () => {
|
||||||
:key="item.i"
|
:key="item.i"
|
||||||
:ref="(el) => setComponentRef(el, item.i)"
|
:ref="(el) => setComponentRef(el, item.i)"
|
||||||
:data="item"
|
:data="item"
|
||||||
|
@edit-group-name="editGroupName"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</grid-item>
|
</grid-item>
|
||||||
|
@ -518,6 +568,11 @@ const addGroup = () => {
|
||||||
</FloatButton>
|
</FloatButton>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
|
<FloatButton tooltip="新建分组" @click="addTilesModal = true">
|
||||||
|
<template #icon>
|
||||||
|
<PlusOutlined style="font-size: 20px" />
|
||||||
|
</template>
|
||||||
|
</FloatButton>
|
||||||
<FloatButton tooltip="保存修改" @click="cancelOrSure('sure')">
|
<FloatButton tooltip="保存修改" @click="cancelOrSure('sure')">
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<CheckOutlined style="font-size: 20px" />
|
<CheckOutlined style="font-size: 20px" />
|
||||||
|
@ -528,193 +583,206 @@ const addGroup = () => {
|
||||||
<UndoOutlined style="font-size: 20px" />
|
<UndoOutlined style="font-size: 20px" />
|
||||||
</template>
|
</template>
|
||||||
</FloatButton>
|
</FloatButton>
|
||||||
<Popover
|
<Popover v-model:open="shop" placement="topRight" trigger="click">
|
||||||
v-model:open="shop"
|
<template #title>
|
||||||
placement="topRight"
|
<div class="flex items-center justify-between">
|
||||||
title="磁贴商店(127)"
|
<div class="text-lg">磁贴商店(127)</div>
|
||||||
trigger="click"
|
<CloseOutlined class="cursor-pointer" @click="shop = false" />
|
||||||
>
|
</div>
|
||||||
|
</template>
|
||||||
<template #content>
|
<template #content>
|
||||||
|
<InputGroup compact>
|
||||||
|
<Select v-model:value="shopFlotter">
|
||||||
|
<SelectOption value="1">全部应用磁贴</SelectOption>
|
||||||
|
<SelectOption value="2">Option2</SelectOption>
|
||||||
|
</Select>
|
||||||
|
<InputSearch placeholder="" style="width: 200px" />
|
||||||
|
</InputGroup>
|
||||||
<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 key="1" header="个人工作台(22)">
|
||||||
<!-- 可拖入的组件部分 -->
|
<!-- 可拖入的组件部分 -->
|
||||||
<div class="components-box">
|
<div class="components-box">
|
||||||
<div
|
<div
|
||||||
v-for="item in componentsInfo.slice(0, 22)"
|
v-for="item in componentsInfo.slice(0, 22)"
|
||||||
:key="item.name"
|
:key="item.name"
|
||||||
:class="{ active: selectTilseArr.includes(item.name) }"
|
:class="{
|
||||||
class="ctrl-box bg-background"
|
'active pointer-events-none !cursor-no-drop': haveItem(
|
||||||
draggable="true"
|
item.name,
|
||||||
@click="addTiles(item.name)"
|
),
|
||||||
@drag="drag"
|
}"
|
||||||
@dragend="dragend($event)"
|
:draggable="haveItem(item.name)"
|
||||||
@dragstart="dragstart($event, item)"
|
class="ctrl-box bg-background relative"
|
||||||
>
|
@click="addTiles(item.name)"
|
||||||
<div class="ctrl-name">
|
@drag="drag"
|
||||||
{{ `${item.name}(${item.size})` }}
|
@dragend="dragend($event)"
|
||||||
</div>
|
@dragstart="dragstart($event, item)"
|
||||||
<img :src="`/xbyt/${item.name2}`" alt="" />
|
>
|
||||||
<Checkbox
|
<div class="ctrl-name">
|
||||||
:value="item.name"
|
{{ `${item.name}(${item.size})` }}
|
||||||
class="absolute bottom-0 right-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
<img :src="`/xbyt/${item.name2}`" alt="" />
|
||||||
|
<Checkbox
|
||||||
|
:checked="haveItem(item.name)"
|
||||||
|
:value="item.name"
|
||||||
|
class="absolute bottom-0 right-1"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</CollapsePanel>
|
</div>
|
||||||
<CollapsePanel key="2" header="综合行政(12)">
|
</CollapsePanel>
|
||||||
<div class="components-box">
|
<CollapsePanel key="2" header="综合行政(12)">
|
||||||
<div
|
<div class="components-box">
|
||||||
v-for="item in componentsInfo.slice(22, 34)"
|
<div
|
||||||
:key="item.name"
|
v-for="item in componentsInfo.slice(22, 34)"
|
||||||
:class="{ active: selectTilseArr.includes(item.name) }"
|
:key="item.name"
|
||||||
class="ctrl-box bg-background"
|
:class="{ active: selectTilseArr.includes(item.name) }"
|
||||||
draggable="true"
|
class="ctrl-box bg-background"
|
||||||
@click="addTiles(item.name)"
|
draggable="true"
|
||||||
@drag="drag"
|
@click="addTiles(item.name)"
|
||||||
@dragend="dragend"
|
@drag="drag"
|
||||||
@dragstart="dragstart($event, item)"
|
@dragend="dragend"
|
||||||
>
|
@dragstart="dragstart($event, item)"
|
||||||
<div class="ctrl-name">
|
>
|
||||||
{{ `${item.name}(${item.size})` }}
|
<div class="ctrl-name">
|
||||||
</div>
|
{{ `${item.name}(${item.size})` }}
|
||||||
<img :src="`/xbyt/${item.name2}`" alt="" />
|
|
||||||
<Checkbox
|
|
||||||
:checked="selectTilseArr.includes(item.name)"
|
|
||||||
:value="item.name"
|
|
||||||
class="absolute bottom-0 right-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
<img :src="`/xbyt/${item.name2}`" alt="" />
|
||||||
|
<Checkbox
|
||||||
|
:checked="selectTilseArr.includes(item.name)"
|
||||||
|
:value="item.name"
|
||||||
|
class="absolute bottom-0 right-1"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</CollapsePanel>
|
</div>
|
||||||
<CollapsePanel key="3" header="经营管理(22)">
|
</CollapsePanel>
|
||||||
<div class="components-box">
|
<CollapsePanel key="3" header="经营管理(22)">
|
||||||
<div
|
<div class="components-box">
|
||||||
v-for="item in componentsInfo.slice(34, 56)"
|
<div
|
||||||
:key="item.name"
|
v-for="item in componentsInfo.slice(34, 56)"
|
||||||
:class="{ active: selectTilseArr.includes(item.name) }"
|
:key="item.name"
|
||||||
class="ctrl-box bg-background"
|
:class="{ active: selectTilseArr.includes(item.name) }"
|
||||||
draggable="true"
|
class="ctrl-box bg-background"
|
||||||
@click="addTiles(item.name)"
|
draggable="true"
|
||||||
@drag="drag"
|
@click="addTiles(item.name)"
|
||||||
@dragend="dragend"
|
@drag="drag"
|
||||||
@dragstart="dragstart($event, item)"
|
@dragend="dragend"
|
||||||
>
|
@dragstart="dragstart($event, item)"
|
||||||
<div class="ctrl-name">
|
>
|
||||||
{{ `${item.name}(${item.size})` }}
|
<div class="ctrl-name">
|
||||||
</div>
|
{{ `${item.name}(${item.size})` }}
|
||||||
<img :src="`/xbyt/${item.name2}`" alt="" />
|
|
||||||
<Checkbox
|
|
||||||
:checked="selectTilseArr.includes(item.name)"
|
|
||||||
:value="item.name"
|
|
||||||
class="absolute bottom-0 right-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
<img :src="`/xbyt/${item.name2}`" alt="" />
|
||||||
|
<Checkbox
|
||||||
|
:checked="selectTilseArr.includes(item.name)"
|
||||||
|
:value="item.name"
|
||||||
|
class="absolute bottom-0 right-1"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</CollapsePanel>
|
</div>
|
||||||
<CollapsePanel key="4" header="安全生产(19)">
|
</CollapsePanel>
|
||||||
<div class="components-box">
|
<CollapsePanel key="4" header="安全生产(19)">
|
||||||
<div
|
<div class="components-box">
|
||||||
v-for="item in componentsInfo.slice(56, 75)"
|
<div
|
||||||
:key="item.name"
|
v-for="item in componentsInfo.slice(56, 75)"
|
||||||
:class="{ active: selectTilseArr.includes(item.name) }"
|
:key="item.name"
|
||||||
class="ctrl-box bg-background"
|
:class="{ active: selectTilseArr.includes(item.name) }"
|
||||||
draggable="true"
|
class="ctrl-box bg-background"
|
||||||
@click="addTiles(item.name)"
|
draggable="true"
|
||||||
@drag="drag"
|
@click="addTiles(item.name)"
|
||||||
@dragend="dragend"
|
@drag="drag"
|
||||||
@dragstart="dragstart($event, item)"
|
@dragend="dragend"
|
||||||
>
|
@dragstart="dragstart($event, item)"
|
||||||
<div class="ctrl-name">
|
>
|
||||||
{{ `${item.name}(${item.size})` }}
|
<div class="ctrl-name">
|
||||||
</div>
|
{{ `${item.name}(${item.size})` }}
|
||||||
<img :src="`/xbyt/${item.name2}`" alt="" />
|
|
||||||
<Checkbox
|
|
||||||
:checked="selectTilseArr.includes(item.name)"
|
|
||||||
:value="item.name"
|
|
||||||
class="absolute bottom-0 right-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
<img :src="`/xbyt/${item.name2}`" alt="" />
|
||||||
|
<Checkbox
|
||||||
|
:checked="selectTilseArr.includes(item.name)"
|
||||||
|
:value="item.name"
|
||||||
|
class="absolute bottom-0 right-1"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</CollapsePanel>
|
</div>
|
||||||
<CollapsePanel key="5" header="勘探开发(26)">
|
</CollapsePanel>
|
||||||
<div class="components-box">
|
<CollapsePanel key="5" header="勘探开发(26)">
|
||||||
<div
|
<div class="components-box">
|
||||||
v-for="item in componentsInfo.slice(75, 101)"
|
<div
|
||||||
:key="item.name"
|
v-for="item in componentsInfo.slice(75, 101)"
|
||||||
:class="{ active: selectTilseArr.includes(item.name) }"
|
:key="item.name"
|
||||||
class="ctrl-box bg-background"
|
:class="{ active: selectTilseArr.includes(item.name) }"
|
||||||
draggable="true"
|
class="ctrl-box bg-background"
|
||||||
@click="addTiles(item.name)"
|
draggable="true"
|
||||||
@drag="drag"
|
@click="addTiles(item.name)"
|
||||||
@dragend="dragend"
|
@drag="drag"
|
||||||
@dragstart="dragstart($event, item)"
|
@dragend="dragend"
|
||||||
>
|
@dragstart="dragstart($event, item)"
|
||||||
<div class="ctrl-name">
|
>
|
||||||
{{ `${item.name}(${item.size})` }}
|
<div class="ctrl-name">
|
||||||
</div>
|
{{ `${item.name}(${item.size})` }}
|
||||||
<img :src="`/xbyt/${item.name2}`" alt="" />
|
|
||||||
<Checkbox
|
|
||||||
:checked="selectTilseArr.includes(item.name)"
|
|
||||||
:value="item.name"
|
|
||||||
class="absolute bottom-0 right-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
<img :src="`/xbyt/${item.name2}`" alt="" />
|
||||||
|
<Checkbox
|
||||||
|
:checked="selectTilseArr.includes(item.name)"
|
||||||
|
:value="item.name"
|
||||||
|
class="absolute bottom-0 right-1"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</CollapsePanel>
|
</div>
|
||||||
<CollapsePanel key="6" header="数据管理(1)">
|
</CollapsePanel>
|
||||||
<div class="components-box">
|
<CollapsePanel key="6" header="数据管理(1)">
|
||||||
<div
|
<div class="components-box">
|
||||||
v-for="item in componentsInfo.slice(101, 102)"
|
<div
|
||||||
:key="item.name"
|
v-for="item in componentsInfo.slice(101, 102)"
|
||||||
:class="{ active: selectTilseArr.includes(item.name) }"
|
:key="item.name"
|
||||||
class="ctrl-box bg-background"
|
:class="{ active: selectTilseArr.includes(item.name) }"
|
||||||
draggable="true"
|
class="ctrl-box bg-background"
|
||||||
@click="addTiles(item.name)"
|
draggable="true"
|
||||||
@drag="drag"
|
@click="addTiles(item.name)"
|
||||||
@dragend="dragend"
|
@drag="drag"
|
||||||
@dragstart="dragstart($event, item)"
|
@dragend="dragend"
|
||||||
>
|
@dragstart="dragstart($event, item)"
|
||||||
<div class="ctrl-name">
|
>
|
||||||
{{ `${item.name}(${item.size})` }}
|
<div class="ctrl-name">
|
||||||
</div>
|
{{ `${item.name}(${item.size})` }}
|
||||||
<img :src="`/xbyt/${item.name2}`" alt="" />
|
|
||||||
<Checkbox
|
|
||||||
:checked="selectTilseArr.includes(item.name)"
|
|
||||||
:value="item.name"
|
|
||||||
class="absolute bottom-0 right-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
<img :src="`/xbyt/${item.name2}`" alt="" />
|
||||||
|
<Checkbox
|
||||||
|
:checked="selectTilseArr.includes(item.name)"
|
||||||
|
:value="item.name"
|
||||||
|
class="absolute bottom-0 right-1"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</CollapsePanel>
|
</div>
|
||||||
<CollapsePanel key="7" header="总部系统(25)">
|
</CollapsePanel>
|
||||||
<div class="components-box">
|
<CollapsePanel key="7" header="总部系统(25)">
|
||||||
<div
|
<div class="components-box">
|
||||||
v-for="item in componentsInfo.slice(102, 127)"
|
<div
|
||||||
:key="item.name"
|
v-for="item in componentsInfo.slice(102, 127)"
|
||||||
:class="{ active: selectTilseArr.includes(item.name) }"
|
:key="item.name"
|
||||||
class="ctrl-box bg-background"
|
:class="{ active: selectTilseArr.includes(item.name) }"
|
||||||
draggable="true"
|
class="ctrl-box bg-background"
|
||||||
@click="addTiles(item.name)"
|
draggable="true"
|
||||||
@drag="drag"
|
@click="addTiles(item.name)"
|
||||||
@dragend="dragend"
|
@drag="drag"
|
||||||
@dragstart="dragstart($event, item)"
|
@dragend="dragend"
|
||||||
>
|
@dragstart="dragstart($event, item)"
|
||||||
<div class="ctrl-name">
|
>
|
||||||
{{ `${item.name}(${item.size})` }}
|
<div class="ctrl-name">
|
||||||
</div>
|
{{ `${item.name}(${item.size})` }}
|
||||||
<img :src="`/xbyt/${item.name2}`" alt="" />
|
|
||||||
<Checkbox
|
|
||||||
:checked="selectTilseArr.includes(item.name)"
|
|
||||||
:value="item.name"
|
|
||||||
class="absolute bottom-0 right-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
<img :src="`/xbyt/${item.name2}`" alt="" />
|
||||||
|
<Checkbox
|
||||||
|
:checked="selectTilseArr.includes(item.name)"
|
||||||
|
:value="item.name"
|
||||||
|
class="absolute bottom-0 right-1"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</CollapsePanel>
|
</div>
|
||||||
</Collapse>
|
</CollapsePanel>
|
||||||
</CheckboxGroup>
|
</Collapse>
|
||||||
|
<!-- </CheckboxGroup> -->
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<FloatButton tooltip="磁贴商店">
|
<FloatButton tooltip="磁贴商店">
|
||||||
|
@ -728,6 +796,49 @@ const addGroup = () => {
|
||||||
</Popover>
|
</Popover>
|
||||||
</template>
|
</template>
|
||||||
</FloatButtonGroup>
|
</FloatButtonGroup>
|
||||||
|
<Modal
|
||||||
|
v-model:open="addTilesModal"
|
||||||
|
centered
|
||||||
|
title="新建分组"
|
||||||
|
@ok="addGroup"
|
||||||
|
>
|
||||||
|
<Form ref="addTilesForm" :model="formState">
|
||||||
|
<FormItem
|
||||||
|
:rules="[
|
||||||
|
{ required: true, message: '标题不能为空且长度不能超过50字节' },
|
||||||
|
]"
|
||||||
|
label="标题"
|
||||||
|
name="name"
|
||||||
|
>
|
||||||
|
<Input v-model:value="formState.name" placeholder="请输入" />
|
||||||
|
</FormItem>
|
||||||
|
<FormItem label="尺寸" name="w" required>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="flex items-center">
|
||||||
|
宽:
|
||||||
|
<Select v-model:value="formState.w">
|
||||||
|
<template v-for="item in 16" :key="item">
|
||||||
|
<SelectOption v-if="item >= 4" :value="item">
|
||||||
|
{{ item }}
|
||||||
|
</SelectOption>
|
||||||
|
</template>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
×
|
||||||
|
<div class="flex items-center">
|
||||||
|
高:
|
||||||
|
<Select v-model:value="formState.h">
|
||||||
|
<template v-for="item in 10" :key="item">
|
||||||
|
<SelectOption v-if="item >= 4" :value="item">
|
||||||
|
{{ item }}
|
||||||
|
</SelectOption>
|
||||||
|
</template>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</FormItem>
|
||||||
|
</Form>
|
||||||
|
</Modal>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -788,6 +899,15 @@ const addGroup = () => {
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mask {
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 2;
|
||||||
|
background: rgba($color: #000000, $alpha: 0.4);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.us-card-box {
|
.us-card-box {
|
||||||
|
|
Loading…
Reference in New Issue