update 首页恢复原有的自定义布局

src/views/home/widgets/index.vue

@@ -17,7 +17,9 @@
 					<div v-if="nowComponentList.length <= 0" class="no-widgets">
 						<el-empty :description="$t('widgets.index.0910663-2')" :image-size="280"></el-empty>
 					</div>
-					<el-row :gutter="16">
+					<!-- 默认布局 SPDM CODE -->
+					<el-row v-if="isDefaultLayout" :gutter="16">
+						<!-- 第一列 -->
 						<el-col :md="8" :xs="24">
 							<draggable
 								v-model="grid.copmsList[0]"
@@ -46,8 +48,9 @@
 								</template>
 							</draggable>
 						</el-col>
-						<!-- SPDM CODE -->
+						<!-- 第二列 要分两块-->
 						<el-col :md="16" :xs="24">
+							<!-- 第一行  分成左右两块 -->
 							<el-row :gutter="16">
 								<el-col :md="16" :xs="24">
 									<draggable
@@ -106,6 +109,7 @@
 									</draggable>
 								</el-col>
 							</el-row>
+							<!-- 第二行  -->
 							<el-row :gutter="16">
 								<el-col :md="24" :xs="24">
 									<draggable
@@ -138,6 +142,37 @@
 							</el-row>
 						</el-col>
 					</el-row>
+					<!-- 自定义布局 -->
+					<el-row v-else :gutter="16">
+						<el-col v-for="(item, index) in grid.layout" v-bind:key="index" :gutter="16" :md="item" :xs="24">
+							<draggable
+								v-model="grid.copmsList[index]"
+								animation="200"
+								handle=".customize-overlay"
+								group="people"
+								item-key="com"
+								dragClass="aaaaa"
+								force-fallback
+								fallbackOnBody
+								class="draggable-box"
+							>
+								<template #item="{ element }">
+									<div class="widgets-item" :class="{ 'inline-flex': allComps[element]?.isInline }">
+										<component :is="allComps[element]"></component>
+										<div v-if="customizing" class="customize-overlay">
+											<el-button class="close" type="danger" plain icon="Close" size="small" @click="remove(element)"></el-button>
+											<label>
+												<el-icon>
+													<component :is="allComps[element].icon" />
+												</el-icon>
+												{{ $t(allComps[element].title) }}</label
+											>
+										</div>
+									</div>
+								</template>
+							</draggable>
+						</el-col>
+					</el-row>
 				</div>
 			</div>
 		</div>
@@ -227,6 +262,7 @@ const defaultGrid = ref({
 		['TaskList'], // 第四列，占8
 	],
 });
+const isDefaultLayout = ref(true);
 const customizing = ref(false);
 const widgets = ref();
 const widgetsKey = ref('widgets');
@@ -294,6 +330,7 @@ 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]);
@@ -320,6 +357,7 @@ const save = () => {
 };
 
 const backDefault = () => {
+	isDefaultLayout.value = true;
 	customizing.value = false;
 	widgets.value.style.removeProperty('transform');
 	grid.value = cloneDeep(toValue(defaultGrid));