feat: 表单管理-优化样式

src/styles/index.scss

@@ -163,7 +163,7 @@ div:focus {
 	display: flex;
 	height: 100%;
 	min-height: 0;
-	padding: 10px 8px 0 8px;
+	padding: 10px 8px 10px 8px;
 	&.bgc {
 		background-color: var(--el-bg-color-page);
 	}
@@ -182,15 +182,7 @@ div:focus {
 	width: calc(100% - 210px);
 }
 /*应用的树结构样式 可能需要加上自己的class todo*/
-:deep(.menu-tree) {
-	.el-tree-node__content {
-		height: 36px;
-	}
 
-	.el-tree-node__content .el-tree-node__label .icon {
-		margin-right: 5px;
-	}
-}
 // 普通列表增删改的通用样式表
 
 .icon-mage--edit {

src/styles/lance-element/searchForm.scss

@@ -7,6 +7,7 @@
 		margin-bottom: 12px;
 		padding: 10px 12px;
 		padding-top: 0;
+		border-radius: var(--el-border-radius-base);
 		&.labelStyle {
 			.#{$prefix}search-form-flex-wrap {
 				.el-form-item {

src/styles/lance-element/table.scss

@@ -77,6 +77,7 @@
 	width: 100%;
 	padding: 12px 12px 0 12px;
 	min-height: 0;
+	border-radius: var(--el-border-radius-base);
 	//background: #fff;
 	background-color: var(--el-bg-color);
 	/*.tableLoading {

src/views/flow/form/index.vue

@@ -1,48 +1,49 @@
 <template>
 	<div class="pageWrap bgc">
-		<div class="aside-box-system">
-			<el-aside width="200px" style="height: 100%">
-				<el-container style="height: 100%">
-					<el-header>
-						<el-input v-model="groupFilterText" placeholder="输入关键字进行过滤" clearable style="margin-top: 10px" />
-					</el-header>
-					<el-main style="flex-basis: 100%; padding: 0px">
-						<el-tree
-							ref="treeRef"
-							class="menu-tree"
-							:data="treeData"
-							node-key="id"
-							:current-node-key="''"
-							:highlight-current="true"
-							:expand-on-click-node="false"
-							:props="{ label: 'name', children: 'children' }"
-							default-expand-all
-							:filter-node-method="filterNode"
-							@node-click="leftTreeClick"
-						>
-							<template #default="{ node, data }">
-								<span class="custom-tree-node">
-									<span class="label">{{ node.label }}</span>
-									<!--<span v-if="false" class="code">{{ data.code }}</span>-->
-									<span v-if="node.label !== treeParentName" class="do">
-										<el-icon @click.stop="addHandler('table')"><Plus /></el-icon>
-										<el-icon @click.stop="dicEdit(data)"><Edit /></el-icon>
-										<el-icon @click.stop="dictDel(node, data)"><Delete /></el-icon>
-									</span>
-								</span>
-							</template>
-						</el-tree>
-					</el-main>
-					<el-footer style="height: 51px">
-						<el-button type="primary" style="width: 100%" @click="addHandler('tree')">
-							<el-icon>
-								<Plus />
-							</el-icon>
-							表单分类
-						</el-button>
-					</el-footer>
-				</el-container>
-			</el-aside>
+		<div class="h-full mr-2">
+			<el-card :body-style="{ height: '100%', width: '300px' }" class="h-full border-none menu-card" shadow="hidden">
+				<template #header>
+					<div class="flex justify-between">
+						<div class="card-header">
+							<span>表单分类</span>
+						</div>
+						<div class="">
+							<el-space>
+								<el-icon :style="{ color: 'var(--el-color-primary)' }" class="cursor-pointer" @click="addHandler('tree')" size="22"><Plus /> </el-icon>
+								<el-icon class="cursor-pointer" @click="getGroup" size="22"><Refresh /></el-icon>
+							</el-space>
+						</div>
+					</div>
+				</template>
+
+				<el-input v-model="groupFilterText" placeholder="输入关键字进行过滤" clearable />
+				<el-tree
+					v-loading="showGroupLoading"
+					ref="treeRef"
+					class="menu-tree-box py-3"
+					:data="treeData"
+					node-key="id"
+					:current-node-key="''"
+					:highlight-current="true"
+					:expand-on-click-node="false"
+					:props="{ label: 'name', children: 'children' }"
+					default-expand-all
+					:filter-node-method="filterNode"
+					@node-click="leftTreeClick"
+				>
+					<template #default="{ node, data }">
+						<span class="custom-tree-node">
+							<span class="label">{{ node.label }}</span>
+							<!--<span v-if="false" class="code">{{ data.code }}</span>-->
+							<span v-if="node.label !== treeParentName" class="do">
+								<el-icon @click.stop="addHandler('table')" :style="{ color: 'var(--el-color-primary)' }" size="24"><Plus /></el-icon>
+								<el-icon @click.stop="dicEdit(data)" :style="{ color: 'var(--el-color-primary)' }" size="24"><Edit /></el-icon>
+								<el-icon @click.stop="dictDel(node, data)" :style="{ color: 'var(--el-color-error)' }" size="24"><Delete /></el-icon>
+							</span>
+						</span>
+					</template>
+				</el-tree>
+			</el-card>
 		</div>
 		<div class="content-warp flex-column-page-wrap">
 			<!-- 公用搜索组件 -->
@@ -57,8 +58,8 @@
 				:columns="activeColumns"
 			>
 				<template #toolLeft>
-					<el-button plain :icon="Plus" @click="addHandler('tableTemplate')" type="primary">新增</el-button>
-					<el-button plain :icon="Delete" :disabled="curSelectionRows.length === 0" @click="batch_del" type="danger">删除</el-button>
+					<el-button plain :icon="Plus" type="primary" @click="addHandler('tableTemplate')">新增</el-button>
+					<el-button plain :icon="Delete" :disabled="curSelectionRows.length === 0" type="danger" @click="batch_del">删除</el-button>
 				</template>
 
 				<template #filterAvatarSlot="scope">
@@ -77,7 +78,11 @@
 							</el-tooltip>
 						</template>
 
-						<LeIcon class="text-lg ml-2 text-icon-color cursor-pointer icon-mage--edit" icon-class="icon-processInfo-mage--edit" @click="tableTemplateEdit(row)" />
+						<LeIcon
+							class="text-lg ml-2 text-icon-color cursor-pointer icon-mage--edit"
+							icon-class="icon-processInfo-mage--edit"
+							@click="tableTemplateEdit(row)"
+						/>
 
 						<LeIcon
 							v-if="row.status !== 3"
@@ -121,6 +126,7 @@ import formCategory from '@/api/flow/formcategory'
 import formtemplate from '@/api/flow/formtemplate'
 import { computed, nextTick, ref, watch } from 'vue'
 import { ElMessage, ElTree, ElMessageBox } from 'element-plus'
+import { Plus, Delete, Refresh } from '@element-plus/icons-vue'
 import { useTablePage } from '@/hooks/useTablePage'
 // import { Plus, Delete, Edit } from '@element-plus/icons-vue'
 import StatusIndicator from '@/components/StatusIndicator/index.vue'
@@ -517,20 +523,27 @@ watch(
 )
 </script>
 <style scoped lang="scss">
-// 表单的树结构样式
-:deep(.menu-tree) {
-	//.el-tree-node {
-	//	.el-tree-node__content {
-	//		.custom-tree-node {
-	//			.do {
-	//				&:first-child {
-	//					display: block !important;
-	//				}
-	//				display: none !important;
-	//			}
-	//		}
-	//	}
-	//}
+:deep(.menu-card) {
+	.el-card__header {
+		font-size: 16px;
+		font-weight: 500;
+		padding: 12px 16px;
+		border-bottom: none;
+	}
+
+	.el-card__body {
+		padding: 0 16px 12px 16px;
+	}
+}
+
+:deep(.menu-tree-box) {
+	.el-tree-node__content {
+		height: 36px!important;
+	}
+
+	.el-tree-node__content .el-tree-node__label .icon {
+		margin-right: 5px;
+	}
 }
 
 .custom-tree-node {