feat: 调整样式

src/router/index.ts

@@ -501,13 +501,6 @@ export const local_permissionsMenuList: Array<AppRouteRecordRaw> = [
 		meta: { title: '流程管理', icon: 'icon-guide' },
 		redirect: '/flow/group',
 		children: [
-			{
-				path: 'group1',
-				// component: () => import('@/views/flow/group/index1.vue'),
-				component: 'flow/group/index1',
-				name: 'flow_group1',
-				meta: { title: '流程组', icon: '' }
-			},
 			{
 				path: 'group',
 				// component: () => import('@/views/flow/group/index1.vue'),
@@ -515,40 +508,12 @@ export const local_permissionsMenuList: Array<AppRouteRecordRaw> = [
 				name: 'flow_group',
 				meta: { title: '流程组 - ui调整', icon: '' }
 			},
-			{
-				path: 'form',
-				// component: () => import('@/views/flow/form/index1.vue'),
-				component: 'flow/form/index',
-				name: 'flow_form',
-				meta: { title: '流程表单', icon: '' }
-			},
 			{
 				path: 'create',
 				// component: () => import('@/views/flow/create/index1.vue'),
 				component: 'flow/create/index',
 				name: 'flow_create',
 				meta: { title: '创建流程', icon: '' }
-			},
-			{
-				path: 'task',
-				// component: () => import('@/views/flow/task/index1.vue'),
-				component: 'flow/task/index',
-				name: 'flow_task',
-				meta: { title: '流程任务', icon: '' }
-			},
-			{
-				path: 'instance',
-				// component: () => import('@/views/flow/instance/index1.vue'),
-				component: 'flow/instance/index',
-				name: 'flow_instance',
-				meta: { title: '流程实例', icon: '' }
-			},
-			{
-				path: 'modal',
-				// component: () => import('@/views/flow/modal/index1.vue'),
-				component: 'flow/modal/index',
-				name: 'flow_modal',
-				meta: { title: '流程模型', icon: '' }
 			}
 		]
 	}

src/styles/index.scss

@@ -141,3 +141,29 @@ div:focus {
 	cursor: pointer;
 	@include hover-bg-opacity();
 }
+
+// 普通列表增删改的通用样式表
+.pageWrap {
+	flex: 1;
+	display: flex;
+	height: 100%;
+	min-height: 0;
+	&.bgc {
+		background-color: var(--el-fill-color-lighter);
+	}
+}
+.content-warp {
+	flex: 1;
+	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;
+	}
+}
+// 普通列表增删改的通用样式表

src/views/flow/form/index.vue

@@ -1,276 +0,0 @@
-<template>
-	<div class="pageWrap">
-		<div class="content-warp flex-column-page-wrap">
-			<!-- 公用搜索组件 -->
-			<LeSearchForm ref="searchForm" v-model:searchData="searchData" :forms="forms" :loading="tableOpts.options.loading"> </LeSearchForm>
-
-			<!--  LeTable 组件使用  -->
-			<LeTable
-				ref="tableRef"
-				v-model:searchParams="tableOpts.searchParams"
-				v-bind="tableOpts"
-				v-model:curRow="tableOpts.curRow"
-				v-model:checked-options="checkedColumns"
-				:columns="activeColumns"
-			>
-				<template #toolLeft>
-					<el-button type="primary" @click="addHandler">
-						<el-icon class="btn-icon">
-							<Plus />
-						</el-icon>
-					</el-button>
-				</template>
-
-				<template #actionSlot="scope">
-					<el-link type="primary">编辑</el-link>
-					<el-divider direction="vertical"></el-divider>
-					<el-link type="primary">预览</el-link>
-					<el-divider direction="vertical"></el-divider>
-					<el-link type="primary">设计</el-link>
-					<el-divider direction="vertical"></el-divider>
-					<el-link type="primary">字段</el-link>
-				</template>
-			</LeTable>
-		</div>
-
-		<LeFormConfigDialog
-			v-if="visible"
-			ref="dialogUserRef"
-			v-model="visible"
-			:title="`${isCreate ? '新增' : '编辑'}应用`"
-			width="600px"
-			:form-data="activeData"
-			:form-options="formOptions"
-			@submit="submitHandler"
-		/>
-	</div>
-</template>
-<script lang="tsx" setup name="flow_form">
-import app from '@/api/system/app'
-import { computed, nextTick, ref, watch } from 'vue'
-import { ElMessage, ElTree } from 'element-plus'
-import { useTablePage } from '@/hooks/useTablePage'
-import { Plus, Edit } from '@element-plus/icons-vue'
-
-const visible = ref(false) // 弹窗显示隐藏
-const isCreate = ref(true)
-const activeData = ref({})
-const formsDialog = [
-	{
-		prop: 'identification',
-		label: '表单名称',
-		itemType: 'input',
-		rules: [{ required: true, message: '请输入表单名称', trigger: 'blur' }]
-	},
-	{
-		prop: 'name',
-		label: '表单编码',
-		itemType: 'input',
-		rules: [{ required: true, message: '请输入表单编码', trigger: 'blur' }]
-	},
-	{
-		prop: 'pid',
-		label: '分组',
-		itemType: 'select',
-		filterable: true,
-		options: [],
-		rules: [{ required: true, message: '请选择分组', trigger: 'blur' }]
-	},
-	{
-		prop: 'pid1',
-		label: '表单类型',
-		itemType: 'select',
-		filterable: true,
-		options: [],
-		rules: [{ required: true, message: '请选择表单类型', trigger: 'blur' }]
-	}
-]
-// 新增的表单 和 编辑的表单
-const formOptions = computed(() => {
-	return {
-		forms: formsDialog,
-		labelWidth: 120,
-		span: 30,
-		showResetBtn: true,
-		formConfig: {
-			showCancelBtn: true,
-			submitLoading: false
-		}
-	}
-})
-const groupFilterText = ref('')
-const treeRef = ref<InstanceType<typeof ElTree>>()
-
-// 表格搜索条件
-const forms = ref([
-	{
-		prop: 'keyword',
-		label: '表单名称：',
-		itemType: 'input',
-		placeholder: '请输入表单名称'
-	}
-])
-
-// table列表数据请求
-const queryList = async () => {
-	const { options, searchParams } = tableOpts
-	options.loading = true
-	try {
-		const { records: list, total } = await app.appPageApi(searchParams)
-		tableOpts.total = total
-		tableOpts.list = list
-	} catch {
-		console.log('获取列表数据失败')
-		tableOpts.total = 0
-		tableOpts.list = []
-		options.loading = false // 更改加载中的 loading值
-	} finally {
-		options.loading = false
-	}
-}
-
-// table 参数
-const columns = [
-	{
-		prop: 'identification',
-		label: '表单名称',
-		minWidth: 80
-	},
-	{
-		prop: 'name',
-		label: '表单编码',
-		minWidth: 100
-	},
-	{
-		prop: 'secretKey',
-		label: '表单类型',
-		minWidth: 100
-	},
-	{
-		prop: 'sort',
-		label: '版本',
-		minWidth: 80
-	},
-	{
-		prop: 'action',
-		label: '操作',
-		width: 190,
-		fixed: 'right',
-		slots: {
-			default: 'actionSlot'
-		}
-	}
-]
-
-const { searchData, tableOpts, checkedColumns, activeColumns, curSelectionRows, updateParams } = useTablePage(
-	{
-		options: {
-			showIndex: false
-		},
-		// 需要展示的列
-		columns,
-		// 控制列配置
-		columnsConfig: {
-			columns
-		}
-	},
-	{
-		queryList,
-		fetchImmediate: false
-	}
-)
-
-// 删除
-const deleteItem = async ids => {
-	try {
-		await app.appDeleteApi(ids)
-		updateParams()
-	} catch (e) {
-		console.log('删除失败')
-		ElMessage.error(`删除失败~`)
-	}
-}
-
-// 单个删除
-const table_del = row => {
-	deleteItem([row.id])
-}
-
-//批量删除
-const batch_del = () => {
-	const ids = curSelectionRows.value.map(item => item.id) // 多选数据
-	deleteItem(ids)
-}
-
-const table_edit = async row => {
-	isCreate.value = false
-	activeData.value = { ...row, status: row.status ? true : false }
-	visible.value = true
-}
-
-// 弹窗事件
-const submitHandler = async params => {
-	formOptions.value.formConfig.submitLoading = true
-	try {
-		params.status = params.status ? 1 : 0
-		params.expire = params.expire + ' 00:00:00'
-		params.id = activeData.value.id ? activeData.value.id : null
-		await app.appAddOrEditSaveApi(params)
-		ElMessage.success(`${isCreate.value ? '新增' : '修改'}成功~`)
-		visible.value = false
-		updateParams()
-		formOptions.value.formConfig.submitLoading = false
-	} catch (e) {
-		console.log(e)
-		formOptions.value.formConfig.submitLoading = false
-	}
-}
-
-const addHandler = () => {
-	isCreate.value = true
-	activeData.value = {}
-	visible.value = true
-}
-
-nextTick(() => {
-	queryList()
-})
-
-watch(groupFilterText, val => {
-	treeRef.value!.filter(val)
-})
-</script>
-<style scoped lang="scss">
-.pageWrap {
-	flex: 1;
-	display: flex;
-	height: 100%;
-	//background: #fff;
-}
-.content-warp {
-	flex: 1;
-	//width: calc(100% - 250px);
-	width: calc(100% - 210px);
-}
-// 单独自己写的
-/*:deep(.box-card) {
-	height: 100%;
-	.el-card__body {
-		padding: 0;
-	}
-}*/
-
-// 应用的树结构样式
-:deep(.menu-tree) {
-	.el-tree-node__content {
-		height: 36px;
-	}
-	.el-tree-node__content .el-tree-node__label .icon {
-		margin-right: 5px;
-	}
-}
-
-.nopadding {
-	padding: 0px;
-}
-</style>

src/views/flow/instance/index.vue

@@ -1,233 +0,0 @@
-<template>
-	<div class="pageWrap">
-		<div class="content-warp flex-column-page-wrap">
-			<!-- 公用搜索组件 -->
-			<LeSearchForm ref="searchForm" v-model:searchData="searchData" :forms="forms" :loading="tableOpts.options.loading"> </LeSearchForm>
-
-			<!--  LeTable 组件使用  -->
-			<LeTable
-				ref="tableRef"
-				v-model:searchParams="tableOpts.searchParams"
-				v-bind="tableOpts"
-				v-model:curRow="tableOpts.curRow"
-				v-model:checked-options="checkedColumns"
-				:columns="activeColumns"
-			>
-				<template #toolLeft>
-					<el-button type="primary">撤回</el-button>
-					<el-button type="primary">定位</el-button>
-					<el-button type="primary">激活</el-button>
-					<el-button type="primary">挂起</el-button>
-					<el-button type="danger">作废</el-button>
-				</template>
-
-				<template #identificationSlot="scope">
-					<el-dropdown>
-						<span class="el-dropdown-link">
-							{{ scope.row.name }}
-							<el-icon class="el-icon--right">
-								<ArrowDown />
-							</el-icon>
-						</span>
-						<template #dropdown>
-							<el-dropdown-menu>
-								<el-dropdown-item @click="test1Ev">审批流</el-dropdown-item>
-								<el-dropdown-item @click="test2Ev">详情</el-dropdown-item>
-							</el-dropdown-menu>
-						</template>
-					</el-dropdown>
-				</template>
-
-				<template #statusSlot="scope">
-					<status-indicator v-if="scope.row.status === 1" pulse type="success"></status-indicator>
-					<status-indicator v-else pulse type="danger"></status-indicator>
-				</template>
-			</LeTable>
-		</div>
-
-		<instance-detail v-if="detailVisibile" v-model="detailVisibile"></instance-detail>
-	</div>
-</template>
-<script lang="tsx" setup name="flow_instance">
-import app from '@/api/system/app'
-import { nextTick, ref } from 'vue'
-import { useTablePage } from '@/hooks/useTablePage'
-import StatusIndicator from '@/components/StatusIndicator'
-import { ArrowDown } from '@element-plus/icons-vue'
-import InstanceDetail from './instance-detail.vue'
-
-const detailVisibile = ref(false)
-// 表格搜索条件
-const forms = ref([
-	{
-		prop: 'keyword',
-		label: '审批标题：',
-		itemType: 'input',
-		placeholder: '请输入审批标题'
-	},
-	{
-		prop: 'keyword',
-		label: '单据名称：',
-		itemType: 'input',
-		placeholder: '请输入单据名称'
-	},
-	{
-		prop: 'keyword',
-		label: '类型：',
-		itemType: 'input',
-		placeholder: '请输入类型'
-	}
-])
-
-// table列表数据请求
-const queryList = async () => {
-	const { options, searchParams } = tableOpts
-	options.loading = true
-	try {
-		const { records: list, total } = await app.appPageApi(searchParams)
-		tableOpts.total = total
-		tableOpts.list = list
-	} catch {
-		console.log('获取列表数据失败')
-		tableOpts.total = 0
-		tableOpts.list = []
-		options.loading = false // 更改加载中的 loading值
-	} finally {
-		options.loading = false
-	}
-}
-
-// table 参数
-const columns = [
-	{
-		prop: 'name',
-		label: '审批标题',
-		minWidth: 150,
-
-		showOverflowTooltip: true,
-		slots: {
-			default: 'identificationSlot'
-		}
-	},
-	{
-		prop: 'name1',
-		label: '单据名称',
-		minWidth: 100
-	},
-	{
-		prop: 'secretKey',
-		label: '类型',
-		minWidth: 100
-	},
-	{
-		prop: 'sort',
-		label: '子类型',
-		minWidth: 80
-	},
-	{
-		prop: 'sort1',
-		label: '机构',
-		minWidth: 80
-	},
-	{
-		prop: 'sort2',
-		label: '岗位',
-		minWidth: 80
-	},
-	{
-		prop: 'sort3',
-		label: '提交人',
-		minWidth: 80
-	},
-	{
-		prop: 'sort4',
-		label: '代理人',
-		minWidth: 80
-	},
-	{
-		prop: 'sort5',
-		label: '发起时间',
-		minWidth: 80
-	},
-	{
-		prop: 'sort6',
-		label: '完成时间',
-		minWidth: 80
-	},
-	{
-		prop: 'status',
-		label: '流程状态',
-		minWidth: 50,
-		slots: {
-			default: 'statusSlot'
-		}
-	},
-	{
-		prop: 'sort7',
-		label: '流程版本',
-		minWidth: 80
-	}
-]
-
-const test1Ev = () => {
-	detailVisibile.value = true
-}
-
-const test2Ev = () => {}
-
-const { searchData, tableOpts, checkedColumns, activeColumns } = useTablePage(
-	{
-		options: {
-			showIndex: false
-		},
-		// 需要展示的列
-		columns,
-		// 控制列配置
-		columnsConfig: {
-			columns
-		}
-	},
-	{
-		queryList,
-		fetchImmediate: false
-	}
-)
-
-nextTick(() => {
-	queryList()
-})
-</script>
-<style scoped lang="scss">
-.pageWrap {
-	flex: 1;
-	display: flex;
-	height: 100%;
-	//background: #fff;
-}
-.content-warp {
-	flex: 1;
-	//width: calc(100% - 250px);
-	width: calc(100% - 210px);
-}
-// 单独自己写的
-/*:deep(.box-card) {
-	height: 100%;
-	.el-card__body {
-		padding: 0;
-	}
-}*/
-
-// 应用的树结构样式
-:deep(.menu-tree) {
-	.el-tree-node__content {
-		height: 36px;
-	}
-	.el-tree-node__content .el-tree-node__label .icon {
-		margin-right: 5px;
-	}
-}
-
-.nopadding {
-	padding: 0px;
-}
-</style>

src/views/flow/instance/instance-detail.vue

@@ -1,147 +0,0 @@
-<template>
-	<el-drawer v-model="visibleDialog" title="审批流程" :direction="direction" size="900" @close="handleCancel">
-		<LeTable
-			ref="tableRef"
-			v-model:searchParams="tableOpts.searchParams"
-			v-bind="tableOpts"
-			v-model:curRow="tableOpts.curRow"
-			v-model:checked-options="checkedColumns"
-			:columns="activeColumns"
-		>
-			<template #statusSlot="scope">
-				<status-indicator v-if="scope.row.status === 1" pulse type="success"></status-indicator>
-				<status-indicator v-else pulse type="danger"></status-indicator>
-			</template>
-		</LeTable>
-	</el-drawer>
-</template>
-
-<script setup>
-import app from '@/api/system/app'
-import { computed, nextTick, ref } from 'vue'
-import { useTablePage } from '@/hooks/useTablePage'
-
-const direction = ref('rtl')
-
-const myProps = defineProps({
-	modelValue: {
-		type: Boolean,
-		default: false
-	},
-	userIds: {
-		type: Array,
-		default: () => []
-	}
-})
-
-// 同步值
-const $myEmit = defineEmits(['update:modelValue', 'successFn'])
-
-
-// 关闭按钮
-const closeDrawer = () => {
-	$myEmit('successFn')
-	$myEmit('update:modelValue', false)
-}
-
-// table列表数据请求
-const queryList = async () => {
-	const { options, searchParams } = tableOpts
-	options.loading = true
-	try {
-		const { records: list, total } = await app.appPageApi(searchParams)
-		tableOpts.total = total
-		tableOpts.list = list
-	} catch {
-		console.log('获取列表数据失败')
-		tableOpts.total = 0
-		tableOpts.list = []
-		options.loading = false // 更改加载中的 loading值
-	} finally {
-		options.loading = false
-	}
-}
-
-// table 参数
-const columns = [
-	{
-		prop: 'identification',
-		label: '处理人',
-		minWidth: 80
-	},
-	{
-		prop: 'name',
-		label: '转交人',
-		minWidth: 100
-	},
-	{
-		prop: 'secretKey',
-		label: '原处理人',
-		minWidth: 100
-	},
-	{
-		prop: 'sort',
-		label: '任务类型',
-		minWidth: 80
-	},
-	{
-		prop: 'sort1',
-		label: '节点名称',
-		minWidth: 80
-	},
-	{
-		prop: 'sort2',
-		label: '任务状态',
-		minWidth: 80
-	},
-	{
-		prop: 'sort3',
-		label: '接收时间',
-		minWidth: 80
-	},
-	{
-		prop: 'sort4',
-		label: '捎话',
-		minWidth: 80
-	},
-	{
-		prop: 'sort5',
-		label: '审批意见',
-		minWidth: 80
-	}
-]
-
-const { searchData, tableOpts, checkedColumns, activeColumns } = useTablePage(
-	{
-		options: {
-			showIndex: false,
-			multipleSelect: false
-		},
-		// 需要展示的列
-		columns,
-		// 控制列配置
-		columnsConfig: {
-			columns
-		}
-	},
-	{
-		queryList,
-		fetchImmediate: false
-	}
-)
-
-nextTick(() => {
-	queryList()
-})
-
-const visibleDialog = computed({
-	get() {
-		return myProps.modelValue
-	},
-	set(val) {
-		$myEmit('update:modelValue', val)
-	}
-})
-</script>
-
-<style scoped></style>

src/views/flow/task/index.vue

@@ -1,178 +0,0 @@
-<template>
-	<div class="pageWrap">
-		<div class="content-warp flex-column-page-wrap">
-			<!-- 公用搜索组件 -->
-			<LeSearchForm ref="searchForm" v-model:searchData="searchData" :forms="forms" :loading="tableOpts.options.loading"> </LeSearchForm>
-
-			<!--  LeTable 组件使用  -->
-			<LeTable
-				ref="tableRef"
-				v-model:searchParams="tableOpts.searchParams"
-				v-bind="tableOpts"
-				v-model:curRow="tableOpts.curRow"
-				v-model:checked-options="checkedColumns"
-				:columns="activeColumns"
-			>
-				<template #statusSlot="scope">
-					<status-indicator v-if="scope.row.status === 1" pulse type="success"></status-indicator>
-					<status-indicator v-else pulse type="danger"></status-indicator>
-				</template>
-			</LeTable>
-		</div>
-	</div>
-</template>
-<script lang="tsx" setup name="flow_task">
-import app from '@/api/system/app'
-import { nextTick, ref, watch } from 'vue'
-import { ElTree } from 'element-plus'
-import { useTablePage } from '@/hooks/useTablePage'
-import StatusIndicator from '@/components/StatusIndicator'
-
-const groupFilterText = ref('')
-const treeRef = ref<InstanceType<typeof ElTree>>()
-
-// 表格搜索条件
-const forms = ref([
-	{
-		prop: 'keyword',
-		label: '处理人：',
-		itemType: 'input',
-		placeholder: '请输入处理人'
-	}
-])
-
-// table列表数据请求
-const queryList = async () => {
-	const { options, searchParams } = tableOpts
-	options.loading = true
-	try {
-		const { records: list, total } = await app.appPageApi(searchParams)
-		tableOpts.total = total
-		tableOpts.list = list
-	} catch {
-		console.log('获取列表数据失败')
-		tableOpts.total = 0
-		tableOpts.list = []
-		options.loading = false // 更改加载中的 loading值
-	} finally {
-		options.loading = false
-	}
-}
-
-// table 参数
-const columns = [
-	{
-		prop: 'identification',
-		label: '审批标题',
-		minWidth: 80
-	},
-	{
-		prop: 'name',
-		label: '单据名称',
-		minWidth: 100
-	},
-	{
-		prop: 'secretKey',
-		label: '处理人',
-		minWidth: 100
-	},
-	{
-		prop: 'secretKey',
-		label: '转交人',
-		minWidth: 100
-	},
-	{
-		prop: 'secretKey',
-		label: '原处理人',
-		minWidth: 100
-	},
-	{
-		prop: 'secretKey',
-		label: '任务类型',
-		minWidth: 100
-	},
-	{
-		prop: 'secretKey',
-		label: '节点名称',
-		minWidth: 100
-	},
-	{
-		prop: 'status',
-		label: '任务状态',
-		minWidth: 50,
-		slots: {
-			default: 'statusSlot'
-		}
-	},
-	{
-		prop: 'updateTime',
-		label: '接受时间',
-		minWidth: 126
-	},
-	{
-		prop: 'secretKey',
-		label: '审批意见',
-		minWidth: 100
-	}
-]
-
-const { searchData, tableOpts, checkedColumns, activeColumns } = useTablePage(
-	{
-		options: {
-			showIndex: false
-		},
-		// 需要展示的列
-		columns,
-		// 控制列配置
-		columnsConfig: {
-			columns
-		}
-	},
-	{
-		queryList,
-		fetchImmediate: false
-	}
-)
-
-nextTick(() => {
-	queryList()
-})
-
-watch(groupFilterText, val => {
-	treeRef.value!.filter(val)
-})
-</script>
-<style scoped lang="scss">
-.pageWrap {
-	flex: 1;
-	display: flex;
-	height: 100%;
-	//background: #fff;
-}
-.content-warp {
-	flex: 1;
-	//width: calc(100% - 250px);
-	width: calc(100% - 210px);
-}
-// 单独自己写的
-/*:deep(.box-card) {
-	height: 100%;
-	.el-card__body {
-		padding: 0;
-	}
-}*/
-
-// 应用的树结构样式
-:deep(.menu-tree) {
-	.el-tree-node__content {
-		height: 36px;
-	}
-	.el-tree-node__content .el-tree-node__label .icon {
-		margin-right: 5px;
-	}
-}
-
-.nopadding {
-	padding: 0px;
-}
-</style>

src/views/message/list/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="flex-column-page-wrap pageWrap">
+	<div class="flex-column-page-wrap pageWrap bgc">
 		<!-- 公用搜索组件 -->
 		<LeSearchForm ref="searchForm" v-model:searchData="searchData" :forms="forms" :loading="tableOpts.options.loading"> </LeSearchForm>
 
@@ -191,32 +191,3 @@ watch(
 	{ immediate: true }
 )
 </script>
-<style scoped lang="scss">
-.pageWrap {
-	flex: 1;
-	display: flex;
-	height: 100%;
-	min-height: 0;
-	//background-color: #fafafa;
-	background-color: var(--el-fill-color-lighter);
-	//background: #fff;
-}
-.content-warp {
-	flex: 1;
-	width: calc(100% - 210px);
-}
-
-// 应用的树结构样式
-:deep(.menu-tree) {
-	.el-tree-node__content {
-		height: 36px;
-	}
-	.el-tree-node__content .el-tree-node__label .icon {
-		margin-right: 5px;
-	}
-}
-
-.nopadding {
-	padding: 0px;
-}
-</style>

src/views/message/list/my.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="pageWrap flex-column-page-wrap">
+	<div class="pageWrap bgc flex-column-page-wrap">
 		<div class="flex-column-page-wrap">
 			<!-- 公用搜索组件 -->
 			<LeSearchForm ref="searchForm" v-model:searchData="searchData" :forms="forms" :loading="tableOpts.options.loading"> </LeSearchForm>
@@ -51,12 +51,12 @@
 </template>
 <script lang="tsx" setup>
 import message from '@/api/system/message'
-import {nextTick, ref, watch} from 'vue'
-import {useTablePage} from '@/hooks/useTablePage'
+import { nextTick, ref, watch } from 'vue'
+import { useTablePage } from '@/hooks/useTablePage'
 import MessageDetail from './detail.vue'
-import {useRoute} from 'vue-router'
-import {Delete} from "@element-plus/icons-vue";
-import {ElMessage} from "element-plus";
+import { useRoute } from 'vue-router'
+import { Delete } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
 
 const route = useRoute()
 const visibleDetail = ref(false) // 权限设置弹窗显示隐藏
@@ -80,10 +80,10 @@ const forms = ref([
 
 // table列表数据请求
 const queryList = async () => {
-	const {options, searchParams} = tableOpts
+	const { options, searchParams } = tableOpts
 	options.loading = true
 	try {
-		const {records: list, total} = await message.getMessageInfo(searchParams)
+		const { records: list, total } = await message.getMessageInfo(searchParams)
 		tableOpts.total = total
 		tableOpts.list = list
 	} catch {
@@ -132,7 +132,7 @@ const columns = [
 	}
 ]
 
-const {searchData, tableOpts, checkedColumns, activeColumns, curSelectionRows, updateParams} = useTablePage(
+const { searchData, tableOpts, checkedColumns, activeColumns, curSelectionRows, updateParams } = useTablePage(
 	{
 		options: {
 			showIndex: false
@@ -190,37 +190,7 @@ watch(
 			})
 		}
 	},
-	{immediate: true}
+	{ immediate: true }
 )
 </script>
-<style scoped lang="scss">
-.pageWrap {
-	flex: 1;
-	display: flex;
-	height: 100%;
-	min-height: 0;
-	//background-color: #fafafa;
-	background-color: var(--el-fill-color-lighter);
-	//background: #fff;
-}
-
-.content-warp {
-	flex: 1;
-	width: calc(100% - 210px);
-}
-
-// 应用的树结构样式
-:deep(.menu-tree) {
-	.el-tree-node__content {
-		height: 36px;
-	}
-
-	.el-tree-node__content .el-tree-node__label .icon {
-		margin-right: 5px;
-	}
-}
-
-.nopadding {
-	padding: 0px;
-}
-</style>
+<style scoped lang="scss"></style>

src/views/setting/app/index.vue

@@ -297,37 +297,3 @@ watch(groupFilterText, val => {
 	treeRef.value!.filter(val)
 })
 </script>
-<style scoped lang="scss">
-.pageWrap {
-	flex: 1;
-	display: flex;
-	height: 100%;
-	min-height: 0;
-	//background: #fff;
-}
-.content-warp {
-	flex: 1;
-	width: calc(100% - 210px);
-}
-// 单独自己写的
-/*:deep(.box-card) {
-	height: 100%;
-	.el-card__body {
-		padding: 0;
-	}
-}*/
-
-// 应用的树结构样式
-:deep(.menu-tree) {
-	.el-tree-node__content {
-		height: 36px;
-	}
-	.el-tree-node__content .el-tree-node__label .icon {
-		margin-right: 5px;
-	}
-}
-
-.nopadding {
-	padding: 0px;
-}
-</style>

src/views/setting/configure/index.vue

@@ -284,37 +284,4 @@ watch(groupFilterText, val => {
 	treeRef.value!.filter(val)
 })
 </script>
-<style scoped lang="scss">
-.pageWrap {
-	flex: 1;
-	display: flex;
-	height: 100%;
-	min-height: 0;
-	//background: #fff;
-}
-.content-warp {
-	flex: 1;
-	width: calc(100% - 210px);
-}
-// 单独自己写的
-/*:deep(.box-card) {
-	height: 100%;
-	.el-card__body {
-		padding: 0;
-	}
-}*/
-
-// 应用的树结构样式
-:deep(.menu-tree) {
-	.el-tree-node__content {
-		height: 36px;
-	}
-	.el-tree-node__content .el-tree-node__label .icon {
-		margin-right: 5px;
-	}
-}
-
-.nopadding {
-	padding: 0px;
-}
-</style>
+<style scoped lang="scss"></style>

src/views/setting/department/index.vue

@@ -346,38 +346,3 @@ watch(groupFilterText, val => {
 	treeRef.value!.filter(val)
 })
 </script>
-<style scoped lang="scss">
-.pageWrap {
-	flex: 1;
-	display: flex;
-	height: 100%;
-	min-height: 0;
-	//background: #fff;
-}
-.content-warp {
-	flex: 1;
-	//width: calc(100% - 250px);
-	width: calc(100% - 210px);
-}
-// 单独自己写的
-/*:deep(.box-card) {
-	height: 100%;
-	.el-card__body {
-		padding: 0;
-	}
-}*/
-
-// 应用的树结构样式
-:deep(.menu-tree) {
-	.el-tree-node__content {
-		height: 36px;
-	}
-	.el-tree-node__content .el-tree-node__label .icon {
-		margin-right: 5px;
-	}
-}
-
-.nopadding {
-	padding: 0px;
-}
-</style>

src/views/setting/dict/index.vue

@@ -3,9 +3,9 @@
 		<el-aside style="background: #fff; margin-right: 10px" width="200px">
 			<el-container style="height: 100%">
 				<el-header>
-					<el-input v-model="groupFilterText" placeholder="输入关键字进行过滤" clearable style="margin-top: 10px"/>
+					<el-input v-model="groupFilterText" placeholder="输入关键字进行过滤" clearable style="margin-top: 10px" />
 				</el-header>
-				<el-main class="nopadding" style="flex-basis: 100%">
+				<el-main style="flex-basis: 100%; padding: 0px">
 					<el-tree
 						ref="treeRef"
 						class="menu-tree"
@@ -24,8 +24,8 @@
 								<span class="label">{{ node.label }}</span>
 								<span class="code">{{ data.code }}</span>
 								<span class="do">
-									<el-icon @click.stop="dicEdit(data)"><Edit/></el-icon>
-									<el-icon @click.stop="dictDel(node, data)"><Delete/></el-icon>
+									<el-icon @click.stop="dicEdit(data)"><Edit /></el-icon>
+									<el-icon @click.stop="dictDel(node, data)"><Delete /></el-icon>
 								</span>
 							</span>
 						</template>
@@ -49,12 +49,12 @@
 				<template #toolLeft>
 					<el-button type="primary" @click="addHandler('table')">
 						<el-icon class="btn-icon">
-							<Plus/>
+							<Plus />
 						</el-icon>
 					</el-button>
 					<el-button type="danger" :disabled="curSelectionRows.length === 0" @click="batch_del">
 						<el-icon class="btn-icon">
-							<Delete/>
+							<Delete />
 						</el-icon>
 					</el-button>
 				</template>
@@ -71,14 +71,14 @@
 				<template #actionSlot="scope">
 					<el-tooltip content="编辑" placement="bottom" effect="light">
 						<el-icon class="ibt0" @click="table_edit(scope.row)">
-							<Edit/>
+							<Edit />
 						</el-icon>
 					</el-tooltip>
 					<el-divider direction="vertical"></el-divider>
 					<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row)">
 						<template #reference>
 							<el-icon class="ibt0">
-								<Delete/>
+								<Delete />
 							</el-icon>
 						</template>
 					</el-popconfirm>
@@ -100,10 +100,10 @@
 </template>
 <script lang="tsx" setup>
 import dict from '@/api/system/dict'
-import {computed, nextTick, ref, watch} from 'vue'
-import {ElMessage, ElTree, ElMessageBox} from 'element-plus'
-import {useTablePage} from '@/hooks/useTablePage'
-import {Plus, Delete, Edit} from '@element-plus/icons-vue'
+import { computed, nextTick, ref, watch } from 'vue'
+import { ElMessage, ElTree, ElMessageBox } from 'element-plus'
+import { useTablePage } from '@/hooks/useTablePage'
+import { Plus, Delete, Edit } from '@element-plus/icons-vue'
 import StatusIndicator from '@/components/StatusIndicator'
 import tree from '@/config/rule/tree.ts'
 
@@ -118,19 +118,19 @@ const formsDialog = [
 		itemType: 'select',
 		filterable: true,
 		options: [],
-		rules: [{required: true, message: '请选择所属字典', trigger: 'blur'}]
+		rules: [{ required: true, message: '请选择所属字典', trigger: 'blur' }]
 	},
 	{
 		prop: 'name',
 		label: '项名称',
 		itemType: 'input',
-		rules: [{required: true, message: '请输入项名称', trigger: 'blur'}]
+		rules: [{ required: true, message: '请输入项名称', trigger: 'blur' }]
 	},
 	{
 		prop: 'code',
 		label: '编码',
 		itemType: 'input',
-		rules: [{required: true, message: '请输入编码', trigger: 'blur'}]
+		rules: [{ required: true, message: '请输入编码', trigger: 'blur' }]
 	},
 	{
 		prop: 'status',
@@ -143,7 +143,7 @@ const formsDialog = [
 		prop: 'sort',
 		label: '排序',
 		itemType: 'inputNumber',
-		rules: [{required: true, message: '请输入排序', trigger: 'blur'}]
+		rules: [{ required: true, message: '请输入排序', trigger: 'blur' }]
 	},
 	{
 		prop: 'remark',
@@ -192,24 +192,24 @@ const getGroup = async () => {
 	showGroupLoading.value = true
 	let data = await dict.dictListParentApi()
 	formOptions.value.forms[0].options = data.map(item => {
-		return {value: item.id, label: item.name}
+		return { value: item.id, label: item.name }
 	})
 	showGroupLoading.value = false
-	data.unshift({id: '', name: '所有'})
+	data.unshift({ id: '', name: '所有' })
 	treeData.value = data
 }
 
 // 左侧菜单点击
 const leftTreeClick = data => {
-	searchData.value = {...searchData.value, data: {pid: data.id ? data.id : null}}
+	searchData.value = { ...searchData.value, data: { pid: data.id ? data.id : null } }
 }
 
 // table列表数据请求
 const queryList = async () => {
-	const {options, searchParams} = tableOpts
+	const { options, searchParams } = tableOpts
 	options.loading = true
 	try {
-		const {records: list, total} = await dict.dictPageApi(searchParams)
+		const { records: list, total } = await dict.dictPageApi(searchParams)
 		tableOpts.total = total
 		tableOpts.list = list
 	} catch {
@@ -266,7 +266,7 @@ const columns = [
 	}
 ]
 
-const {searchData, tableOpts, checkedColumns, activeColumns, curSelectionRows, updateParams} = useTablePage(
+const { searchData, tableOpts, checkedColumns, activeColumns, curSelectionRows, updateParams } = useTablePage(
 	{
 		options: {
 			showIndex: false
@@ -314,7 +314,7 @@ const batch_del = () => {
 
 const table_edit = async row => {
 	isCreate.value = false
-	activeData.value = {...row, status: row.status ? true : false}
+	activeData.value = { ...row, status: row.status ? true : false }
 	visible.value = true
 }
 
@@ -357,8 +357,7 @@ const dictDel = (node, data) => {
 				})
 			}
 		})
-		.catch(() => {
-		})
+		.catch(() => {})
 }
 
 const dicEdit = data => {
@@ -376,20 +375,6 @@ watch(groupFilterText, val => {
 })
 </script>
 <style scoped lang="scss">
-.pageWrap {
-	flex: 1;
-	display: flex;
-	height: 100%;
-	min-height: 0;
-	//background: #fff;
-}
-
-.content-warp {
-	flex: 1;
-	//width: calc(100% - 250px);
-	width: calc(100% - 210px);
-}
-
 // 角色的树结构样式
 :deep(.menu-tree) {
 	.el-tree-node {
@@ -401,18 +386,6 @@ watch(groupFilterText, val => {
 			}
 		}
 	}
-
-	.el-tree-node__content {
-		height: 36px;
-	}
-
-	.el-tree-node__content .el-tree-node__label .icon {
-		margin-right: 5px;
-	}
-}
-
-.nopadding {
-	padding: 0px;
 }
 
 .custom-tree-node {

src/views/setting/menu/index.vue

@@ -161,33 +161,10 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
-.pageWrap {
-	flex: 1;
-	display: flex;
-	height: 100%;
-	min-height: 0;
-	//background: #fff;
-}
-
-// 角色的树结构样式
-:deep(.menu-tree) {
-	.el-tree-node__content {
-		height: 36px;
-	}
-	.el-tree-node__content .el-tree-node__label .icon {
-		margin-right: 5px;
-	}
-}
-
 .nopadding {
 	padding: 0px;
 }
 
-.content-warp {
-	flex: 1;
-	//width: calc(100% - 250px);
-	width: calc(100% - 210px);
-}
 .container-bg {
 	background: var(--el-bg-color-overlay);
 }

src/views/setting/post/index.vue

@@ -288,37 +288,3 @@ watch(groupFilterText, val => {
 	treeRef.value!.filter(val)
 })
 </script>
-<style scoped lang="scss">
-.pageWrap {
-	flex: 1;
-	display: flex;
-	height: 100%;
-	//background: #fff;
-}
-.content-warp {
-	flex: 1;
-	//width: calc(100% - 250px);
-	width: calc(100% - 210px);
-}
-// 单独自己写的
-/*:deep(.box-card) {
-	height: 100%;
-	.el-card__body {
-		padding: 0;
-	}
-}*/
-
-// 角色的树结构样式
-:deep(.menu-tree) {
-	.el-tree-node__content {
-		height: 36px;
-	}
-	.el-tree-node__content .el-tree-node__label .icon {
-		margin-right: 5px;
-	}
-}
-
-.nopadding {
-	padding: 0px;
-}
-</style>

src/views/setting/region/index.vue

@@ -305,38 +305,3 @@ watch(groupFilterText, val => {
 	treeRef.value!.filter(val)
 })
 </script>
-<style scoped lang="scss">
-.pageWrap {
-	flex: 1;
-	display: flex;
-	height: 100%;
-	min-height: 0;
-	//background: #fff;
-}
-.content-warp {
-	flex: 1;
-	//width: calc(100% - 250px);
-	width: calc(100% - 210px);
-}
-// 单独自己写的
-/*:deep(.box-card) {
-	height: 100%;
-	.el-card__body {
-		padding: 0;
-	}
-}*/
-
-// 应用的树结构样式
-:deep(.menu-tree) {
-	.el-tree-node__content {
-		height: 36px;
-	}
-	.el-tree-node__content .el-tree-node__label .icon {
-		margin-right: 5px;
-	}
-}
-
-.nopadding {
-	padding: 0px;
-}
-</style>

src/views/setting/role/index.vue

@@ -299,38 +299,3 @@ watch(groupFilterText, val => {
 	treeRef.value!.filter(val)
 })
 </script>
-<style scoped lang="scss">
-.pageWrap {
-	flex: 1;
-	display: flex;
-	height: 100%;
-	min-height: 0;
-	//background: #fff;
-}
-.content-warp {
-	flex: 1;
-	//width: calc(100% - 250px);
-	width: calc(100% - 210px);
-}
-// 单独自己写的
-/*:deep(.box-card) {
-	height: 100%;
-	.el-card__body {
-		padding: 0;
-	}
-}*/
-
-// 角色的树结构样式
-:deep(.menu-tree) {
-	.el-tree-node__content {
-		height: 36px;
-	}
-	.el-tree-node__content .el-tree-node__label .icon {
-		margin-right: 5px;
-	}
-}
-
-.nopadding {
-	padding: 0px;
-}
-</style>

src/views/setting/user/index.vue

@@ -456,35 +456,6 @@ watch(groupFilterText, val => {
 })
 </script>
 <style scoped lang="scss">
-.pageWrap {
-	flex: 1;
-	display: flex;
-	height: 100%;
-	//background: #fff;
-}
-.content-warp {
-	flex: 1;
-	//width: calc(100% - 250px);
-	width: calc(100% - 210px);
-}
-// 单独自己写的
-/*:deep(.box-card) {
-	height: 100%;
-	.el-card__body {
-		padding: 0;
-	}
-}*/
-
-// 角色的树结构样式
-:deep(.menu-tree) {
-	.el-tree-node__content {
-		height: 36px;
-	}
-	.el-tree-node__content .el-tree-node__label .icon {
-		margin-right: 5px;
-	}
-}
-
 .nopadding {
 	padding: 0px;
 }