Front_Team/CID
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update 首页自定义布局

Browse Source
This commit is contained in:
dongzhihuan
2026-01-30 17:52:06 +08:00
parent b2050d6375
commit e3fe9cd7b3
1 changed files with 19 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/views/home/widgets/index.vue
View File

@@ -200,13 +200,13 @@
<el-col :span="8"><span></span></el-col>
</el-row>
</div>
<div class="selectLayout-item item03" :class="{ active: grid.layout.join(',') === '24' }" @click="setLayout([24])">
<!-- <div class="selectLayout-item item03" :class="{ active: grid.layout.join(',') === '24' }" @click="setLayout([24])">
<el-row :gutter="2">
<el-col :span="24"><span></span></el-col>
<el-col :span="24"><span></span></el-col>
<el-col :span="24"><span></span></el-col>
</el-row>
</div>
</div> -->
</div>
</el-header>
<el-main class="nopadding">
@@ -262,11 +262,13 @@ const defaultGrid = ref({
['TaskList'], // 第四列，占8
],
});
const isDefaultLayout = ref(true);
const customizing = ref(false);
const widgets = ref();
const widgetsKey = ref('widgets');
const grid = ref(cloneDeep(toValue(defaultGrid)));
// 默认布局是4组
// const isDefaultLayout = ref(true);
const isDefaultLayout = ref(grid.value.copmsList.length === 4);
const allComponentList = computed(() => {
const list = [];
@@ -330,16 +332,21 @@ const custom = () => {
const setLayout = (layout: Array<number>) => {
grid.value.layout = layout;
isDefaultLayout.value = false;
if (layout.join(',') === '24') {
if (grid.value.copmsList[1]) {
grid.value.copmsList[0].push(...grid.value.copmsList[1]);
}
if (grid.value.copmsList[2]) {
grid.value.copmsList[0].push(...grid.value.copmsList[2]);
}
grid.value.copmsList.splice(1, 2);
// 默认布局是4组，非默认布局是3组，所以要合并，不然会丢组件
if (isDefaultLayout.value && grid.value.copmsList.length === 4) {
grid.value.copmsList[1] = [...grid.value.copmsList[1], ...grid.value.copmsList[3]];
grid.value.copmsList.splice(3, 1);
}
isDefaultLayout.value = false;
// if (layout.join(',') === '24') {
// if (grid.value.copmsList[1]) {
// grid.value.copmsList[0].push(...grid.value.copmsList[1]);
// }
// if (grid.value.copmsList[2]) {
// grid.value.copmsList[0].push(...grid.value.copmsList[2]);
// }
// grid.value.copmsList.splice(1, 2);
// }
};
const push = (item: any) => {