页面代码格式化 默认字符300换行

vue-next-admin/.prettierrc.js

@@ -1,6 +1,6 @@
 module.exports = {
 	// 一行最多多少个字符
-	printWidth: 150,
+	printWidth: 300,
 	// 指定每个缩进级别的空格数
 	tabWidth: 2,
 	// 使用制表符而不是空格缩进行

vue-next-admin/src/views/system/file/index.vue

@@ -14,17 +14,14 @@
 						:shortcuts="shortcuts" />
 				</el-form-item>
 				<el-form-item>
-					<el-button icon="ele-Refresh" @click="resetQuery">重置
-					</el-button>
-					<el-button type="primary" icon="ele-Search" @click="handleQuery">查询
-					</el-button>
-					<el-button icon="ele-UploadFilled" @click="openUploadDialog">上传
-					</el-button>
+					<el-button icon="ele-Refresh" @click="resetQuery">重置 </el-button>
+					<el-button type="primary" icon="ele-Search" @click="handleQuery">查询 </el-button>
+					<el-button icon="ele-UploadFilled" @click="openUploadDialog">上传 </el-button>
 				</el-form-item>
 			</el-form>
 		</el-card>
 
-		<el-card shadow="hover" style="margin-top: 8px;">
+		<el-card shadow="hover" style="margin-top: 8px">
 			<el-table :data="fileData" style="width: 100%" v-loading="loading" border>
 				<el-table-column type="index" label="序号" width="55" align="center" />
 				<el-table-column prop="fileName" label="名称" show-overflow-tooltip></el-table-column>
@@ -33,28 +30,23 @@
 						<el-tag round>{{ scope.row.suffix }}</el-tag>
 					</template>
 				</el-table-column>
-				<el-table-column prop="sizeKb" label="大小kb" align="center" show-overflow-tooltip>
-				</el-table-column>
+				<el-table-column prop="sizeKb" label="大小kb" align="center" show-overflow-tooltip> </el-table-column>
 				<el-table-column prop="url" label="预览" align="center" show-overflow-tooltip>
 					<template #default="scope">
 						<el-image style="width: 60px; height: 60px" :src="scope.row.url" :lazy="true"
 							:hide-on-click-modal="true" :preview-src-list="[scope.row.url]" :initial-index="0"
-							:z-index=10000 fit="scale-down" />
+							:z-index="10000" fit="scale-down" />
 					</template>
 				</el-table-column>
-				<el-table-column prop="bucketName" label="存储位置" align="center" show-overflow-tooltip>
-				</el-table-column>
+				<el-table-column prop="bucketName" label="存储位置" align="center" show-overflow-tooltip> </el-table-column>
 				<el-table-column prop="id" label="存储标识" align="center" show-overflow-tooltip></el-table-column>
 				<!-- <el-table-column prop="userName" label="上传者" align="center" show-overflow-tooltip></el-table-column> -->
 				<el-table-column prop="createTime" label="创建时间" align="center" show-overflow-tooltip></el-table-column>
 				<el-table-column label="操作" width="140" fixed="right" align="center" show-overflow-tooltip>
 					<template #default="scope">
 						<el-button icon="ele-Download" size="small" text type="primary"
-							@click="downloadFile(scope.row)">
-							下载
-						</el-button>
-						<el-button icon="ele-Delete" size="small" text type="primary" @click="delFile(scope.row)">
-							删除
+							@click="downloadFile(scope.row)"> 下载 </el-button>
+						<el-button icon="ele-Delete" size="small" text type="primary" @click="delFile(scope.row)"> 删除
 						</el-button>
 					</template>
 				</el-table-column>
@@ -72,13 +64,9 @@
 					<el-icon class="el-icon--upload">
 						<ele-UploadFilled />
 					</el-icon>
-					<div class="el-upload__text">
-						将文件拖到此处，或<em>点击上传</em>
-					</div>
+					<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
 					<template #tip>
-						<div class="el-upload__tip">
-							请上传大小不超过 10MB 的文件
-						</div>
+						<div class="el-upload__tip">请上传大小不超过 10MB 的文件</div>
 					</template>
 				</el-upload>
 			</div>
@@ -105,7 +93,7 @@ export default defineComponent({
 	components: {},
 	setup() {
 		const { proxy } = getCurrentInstance() as any;
-		const uploadRef = ref<UploadInstance>()
+		const uploadRef = ref<UploadInstance>();
 		const state = reactive({
 			loading: true,
 			fileData: [] as any,
@@ -125,12 +113,12 @@ export default defineComponent({
 		onMounted(async () => {
 			handleQuery();
 
-			proxy.mittBus.on("submitRefresh", () => {
+			proxy.mittBus.on('submitRefresh', () => {
 				handleQuery();
 			});
 		});
 		onUnmounted(() => {
-			proxy.mittBus.off("submitRefresh");
+			proxy.mittBus.off('submitRefresh');
 		});
 
 		// 查询操作
@@ -143,7 +131,8 @@ export default defineComponent({
 				state.queryParams.startTime,
 				state.queryParams.endTime,
 				state.tableParams.page,
-				state.tableParams.pageSize);
+				state.tableParams.pageSize
+			);
 			state.fileData = res.data.result?.items;
 			state.tableParams.total = res.data.result?.total;
 			state.loading = false;
@@ -170,7 +159,7 @@ export default defineComponent({
 			handleQuery();
 			ElMessage.success('上传成功');
 			state.dialogVisible = false;
-		}
+		};
 		// 下载
 		const downloadFile = async (row: any) => {
 			// var res = await getAPI(SysFileApi).sysFileDownloadPost({ id: row.id });

vue-next-admin/src/views/system/log/difflog/index.vue

@@ -3,25 +3,20 @@
 		<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
 			<el-form :model="queryParams" ref="queryForm" :inline="true">
 				<el-form-item label="开始时间" prop="name">
-					<el-date-picker v-model="queryParams.startTime" type="datetime" placeholder="开始时间"
-						:shortcuts="shortcuts" />
+					<el-date-picker v-model="queryParams.startTime" type="datetime" placeholder="开始时间" :shortcuts="shortcuts" />
 				</el-form-item>
 				<el-form-item label="结束时间" prop="code">
-					<el-date-picker v-model="queryParams.endTime" type="datetime" placeholder="结束时间"
-						:shortcuts="shortcuts" />
+					<el-date-picker v-model="queryParams.endTime" type="datetime" placeholder="结束时间" :shortcuts="shortcuts" />
 				</el-form-item>
 				<el-form-item>
-					<el-button icon="ele-Refresh" @click="resetQuery">
-						重置
-					</el-button>
-					<el-button type="primary" icon="ele-Search" @click="handleQuery">
-						查询
-					</el-button>
+					<el-button icon="ele-Refresh" @click="resetQuery"> 重置 </el-button>
+					<el-button type="primary" icon="ele-Search" @click="handleQuery"> 查询 </el-button>
+					<el-button icon="ele-DeleteFilled" @click="clearLog"> 清空 </el-button>
 				</el-form-item>
 			</el-form>
 		</el-card>
 
-		<el-card shadow="hover" style="margin-top: 8px;">
+		<el-card shadow="hover" style="margin-top: 8px">
 			<el-table :data="logData" style="width: 100%" v-loading="loading" border>
 				<el-table-column type="index" label="序号" width="55" align="center" />
 				<el-table-column prop="diffType" label="差异操作" show-overflow-tooltip></el-table-column>
@@ -34,10 +29,17 @@
 				<el-table-column prop="businessData" label="业务对象" show-overflow-tooltip></el-table-column>
 				<el-table-column prop="createTime" label="操作时间" align="center" show-overflow-tooltip></el-table-column>
 			</el-table>
-			<el-pagination v-model:currentPage="tableParams.page" v-model:page-size="tableParams.pageSize"
-				:total="tableParams.total" :page-sizes="[10, 20, 50, 100]" small background
-				@size-change="handleSizeChange" @current-change="handleCurrentChange"
-				layout="total, sizes, prev, pager, next, jumper" />
+			<el-pagination
+				v-model:currentPage="tableParams.page"
+				v-model:page-size="tableParams.pageSize"
+				:total="tableParams.total"
+				:page-sizes="[10, 20, 50, 100]"
+				small
+				background
+				@size-change="handleSizeChange"
+				@current-change="handleCurrentChange"
+				layout="total, sizes, prev, pager, next, jumper"
+			/>
 		</el-card>
 	</div>
 </template>
@@ -71,13 +73,10 @@ export default defineComponent({
 		});
 		// 查询操作
 		const handleQuery = async () => {
-			if (state.queryParams.startTime == null)
-				state.queryParams.startTime = undefined;
-			if (state.queryParams.endTime == null)
-				state.queryParams.endTime = undefined;
+			if (state.queryParams.startTime == null) state.queryParams.startTime = undefined;
+			if (state.queryParams.endTime == null) state.queryParams.endTime = undefined;
 			state.loading = true;
-			var res = await getAPI(SysLogDiffApi).sysLogDiffPageGet(state.queryParams.startTime, state.queryParams.endTime,
-				state.tableParams.page, state.tableParams.pageSize);
+			var res = await getAPI(SysLogDiffApi).sysLogDiffPageGet(state.queryParams.startTime, state.queryParams.endTime, state.tableParams.page, state.tableParams.pageSize);
 			state.logData = res.data.result?.items;
 			state.tableParams.total = res.data.result?.total;
 			state.loading = false;
@@ -115,20 +114,20 @@ export default defineComponent({
 			{
 				text: '昨天',
 				value: () => {
-					const date = new Date()
-					date.setTime(date.getTime() - 3600 * 1000 * 24)
-					return date
+					const date = new Date();
+					date.setTime(date.getTime() - 3600 * 1000 * 24);
+					return date;
 				},
 			},
 			{
 				text: '上周',
 				value: () => {
-					const date = new Date()
-					date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
-					return date
+					const date = new Date();
+					date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+					return date;
 				},
 			},
-		]
+		];
 		return {
 			handleQuery,
 			resetQuery,
@@ -144,7 +143,6 @@ export default defineComponent({
 
 <style lang="scss">
 .el-popper {
-	//font-size: 14px;
 	max-width: 60%;
 }
-</style>
+</style>

vue-next-admin/src/views/system/log/exlog/index.vue

@@ -3,25 +3,20 @@
 		<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
 			<el-form :model="queryParams" ref="queryForm" :inline="true">
 				<el-form-item label="开始时间" prop="name">
-					<el-date-picker v-model="queryParams.startTime" type="datetime" placeholder="开始时间"
-						:shortcuts="shortcuts" />
+					<el-date-picker v-model="queryParams.startTime" type="datetime" placeholder="开始时间" :shortcuts="shortcuts" />
 				</el-form-item>
 				<el-form-item label="结束时间" prop="code">
-					<el-date-picker v-model="queryParams.endTime" type="datetime" placeholder="结束时间"
-						:shortcuts="shortcuts" />
+					<el-date-picker v-model="queryParams.endTime" type="datetime" placeholder="结束时间" :shortcuts="shortcuts" />
 				</el-form-item>
 				<el-form-item>
-					<el-button icon="ele-Refresh" @click="resetQuery">
-						重置
-					</el-button>
-					<el-button type="primary" icon="ele-Search" @click="handleQuery">
-						查询
-					</el-button>
+					<el-button icon="ele-Refresh" @click="resetQuery"> 重置 </el-button>
+					<el-button type="primary" icon="ele-Search" @click="handleQuery"> 查询 </el-button>
+					<el-button icon="ele-DeleteFilled" @click="clearLog"> 清空 </el-button>
 				</el-form-item>
 			</el-form>
 		</el-card>
 
-		<el-card shadow="hover" style="margin-top: 8px;">
+		<el-card shadow="hover" style="margin-top: 8px">
 			<el-table :data="logData" style="width: 100%" v-loading="loading" border>
 				<el-table-column type="index" label="序号" width="55" align="center" />
 				<el-table-column prop="logName" label="记录器类别名称" show-overflow-tooltip></el-table-column>
@@ -31,14 +26,20 @@
 				<el-table-column prop="exception" label="异常对象" show-overflow-tooltip></el-table-column>
 				<el-table-column prop="state" label="当前状态值" show-overflow-tooltip></el-table-column>
 				<el-table-column prop="threadId" label="线程Id" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="logDateTime" label="日志记录时间" align="center" show-overflow-tooltip>
-				</el-table-column>
+				<el-table-column prop="logDateTime" label="日志记录时间" align="center" show-overflow-tooltip> </el-table-column>
 				<el-table-column prop="createTime" label="操作时间" align="center" show-overflow-tooltip></el-table-column>
 			</el-table>
-			<el-pagination v-model:currentPage="tableParams.page" v-model:page-size="tableParams.pageSize"
-				:total="tableParams.total" :page-sizes="[10, 20, 50, 100]" small background
-				@size-change="handleSizeChange" @current-change="handleCurrentChange"
-				layout="total, sizes, prev, pager, next, jumper" />
+			<el-pagination
+				v-model:currentPage="tableParams.page"
+				v-model:page-size="tableParams.pageSize"
+				:total="tableParams.total"
+				:page-sizes="[10, 20, 50, 100]"
+				small
+				background
+				@size-change="handleSizeChange"
+				@current-change="handleCurrentChange"
+				layout="total, sizes, prev, pager, next, jumper"
+			/>
 		</el-card>
 	</div>
 </template>
@@ -72,13 +73,10 @@ export default defineComponent({
 		});
 		// 查询操作
 		const handleQuery = async () => {
-			if (state.queryParams.startTime == null)
-				state.queryParams.startTime = undefined;
-			if (state.queryParams.endTime == null)
-				state.queryParams.endTime = undefined;
+			if (state.queryParams.startTime == null) state.queryParams.startTime = undefined;
+			if (state.queryParams.endTime == null) state.queryParams.endTime = undefined;
 			state.loading = true;
-			var res = await getAPI(SysLogExApi).sysLogExPageGet(state.queryParams.startTime, state.queryParams.endTime,
-				state.tableParams.page, state.tableParams.pageSize);
+			var res = await getAPI(SysLogExApi).sysLogExPageGet(state.queryParams.startTime, state.queryParams.endTime, state.tableParams.page, state.tableParams.pageSize);
 			state.logData = res.data.result?.items;
 			state.tableParams.total = res.data.result?.total;
 			state.loading = false;
@@ -116,20 +114,20 @@ export default defineComponent({
 			{
 				text: '昨天',
 				value: () => {
-					const date = new Date()
-					date.setTime(date.getTime() - 3600 * 1000 * 24)
-					return date
+					const date = new Date();
+					date.setTime(date.getTime() - 3600 * 1000 * 24);
+					return date;
 				},
 			},
 			{
 				text: '上周',
 				value: () => {
-					const date = new Date()
-					date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
-					return date
+					const date = new Date();
+					date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+					return date;
 				},
 			},
-		]
+		];
 		return {
 			handleQuery,
 			resetQuery,
@@ -145,7 +143,6 @@ export default defineComponent({
 
 <style lang="scss">
 .el-popper {
-	//font-size: 14px;
 	max-width: 60%;
 }
-</style>
+</style>

vue-next-admin/src/views/system/log/oplog/index.vue

@@ -3,16 +3,15 @@
 		<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
 			<el-form :model="queryParams" ref="queryForm" :inline="true">
 				<el-form-item label="开始时间" prop="name">
-					<el-date-picker v-model="queryParams.startTime" type="datetime" placeholder="开始时间"
-						:shortcuts="shortcuts" />
+					<el-date-picker v-model="queryParams.startTime" type="datetime" placeholder="开始时间" :shortcuts="shortcuts" />
 				</el-form-item>
 				<el-form-item label="结束时间" prop="code">
-					<el-date-picker v-model="queryParams.endTime" type="datetime" placeholder="结束时间"
-						:shortcuts="shortcuts" />
+					<el-date-picker v-model="queryParams.endTime" type="datetime" placeholder="结束时间" :shortcuts="shortcuts" />
 				</el-form-item>
 				<el-form-item>
 					<el-button icon="ele-Refresh" @click="resetQuery"> 重置 </el-button>
 					<el-button type="primary" icon="ele-Search" @click="handleQuery"> 查询 </el-button>
+					<el-button icon="ele-DeleteFilled" @click="clearLog"> 清空 </el-button>
 				</el-form-item>
 			</el-form>
 		</el-card>
@@ -27,23 +26,28 @@
 				<el-table-column prop="exception" label="异常对象" show-overflow-tooltip></el-table-column>
 				<el-table-column prop="state" label="当前状态值" show-overflow-tooltip></el-table-column>
 				<el-table-column prop="threadId" label="线程Id" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="logDateTime" label="日志记录时间" align="center" show-overflow-tooltip>
-				</el-table-column>
+				<el-table-column prop="logDateTime" label="日志记录时间" align="center" show-overflow-tooltip> </el-table-column>
 				<el-table-column prop="createTime" label="操作时间" align="center" show-overflow-tooltip></el-table-column>
 				<el-table-column label="操作" width="110" align="center" fixed="right" show-overflow-tooltip>
 					<template #default="scope">
-						<el-button icon="ele-Edit" size="small" text type="primary" @click="viewDetail(scope.row)">详情
-						</el-button>
+						<el-button icon="ele-Edit" size="small" text type="primary" @click="viewDetail(scope.row)">详情 </el-button>
 					</template>
 				</el-table-column>
 			</el-table>
-			<el-pagination v-model:currentPage="tableParams.page" v-model:page-size="tableParams.pageSize"
-				:total="tableParams.total" :page-sizes="[10, 20, 50, 100]" small background
-				@size-change="handleSizeChange" @current-change="handleCurrentChange"
-				layout="total, sizes, prev, pager, next, jumper" />
+			<el-pagination
+				v-model:currentPage="tableParams.page"
+				v-model:page-size="tableParams.pageSize"
+				:total="tableParams.total"
+				:page-sizes="[10, 20, 50, 100]"
+				small
+				background
+				@size-change="handleSizeChange"
+				@current-change="handleCurrentChange"
+				layout="total, sizes, prev, pager, next, jumper"
+			/>
 		</el-card>
 		<el-dialog v-model="dialogVisible" title="日志详情" width="769px">
-			<pre>{{content}}</pre>
+			<pre>{{ content }}</pre>
 			<template #footer>
 				<span class="dialog-footer">
 					<el-button type="primary" @click="dialogVisible = false">确认</el-button>
@@ -77,7 +81,7 @@ export default defineComponent({
 			},
 			logData: [] as any,
 			dialogVisible: false,
-			content: "",
+			content: '',
 		});
 		onMounted(async () => {
 			handleQuery();
@@ -87,12 +91,7 @@ export default defineComponent({
 			if (state.queryParams.startTime == null) state.queryParams.startTime = undefined;
 			if (state.queryParams.endTime == null) state.queryParams.endTime = undefined;
 			state.loading = true;
-			var res = await getAPI(SysLogOpApi).sysLogOpPageGet(
-				state.queryParams.startTime,
-				state.queryParams.endTime,
-				state.tableParams.page,
-				state.tableParams.pageSize
-			);
+			var res = await getAPI(SysLogOpApi).sysLogOpPageGet(state.queryParams.startTime, state.queryParams.endTime, state.tableParams.page, state.tableParams.pageSize);
 			state.logData = res.data.result?.items;
 			state.tableParams.total = res.data.result?.total;
 			state.loading = false;
@@ -165,7 +164,6 @@ export default defineComponent({
 
 <style lang="scss">
 .el-popper {
-	//font-size: 14px;
 	max-width: 60%;
 }
 

vue-next-admin/src/views/system/log/vislog/index.vue

@@ -3,25 +3,20 @@
 		<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
 			<el-form :model="queryParams" ref="queryForm" :inline="true">
 				<el-form-item label="开始时间" prop="name">
-					<el-date-picker v-model="queryParams.startTime" type="datetime" placeholder="开始时间"
-						:shortcuts="shortcuts" />
+					<el-date-picker v-model="queryParams.startTime" type="datetime" placeholder="开始时间" :shortcuts="shortcuts" />
 				</el-form-item>
 				<el-form-item label="结束时间" prop="code">
-					<el-date-picker v-model="queryParams.endTime" type="datetime" placeholder="结束时间"
-						:shortcuts="shortcuts" />
+					<el-date-picker v-model="queryParams.endTime" type="datetime" placeholder="结束时间" :shortcuts="shortcuts" />
 				</el-form-item>
 				<el-form-item>
-					<el-button icon="ele-Refresh" @click="resetQuery">
-						重置
-					</el-button>
-					<el-button type="primary" icon="ele-Search" @click="handleQuery">
-						查询
-					</el-button>
+					<el-button icon="ele-Refresh" @click="resetQuery"> 重置 </el-button>
+					<el-button type="primary" icon="ele-Search" @click="handleQuery"> 查询 </el-button>
+					<el-button icon="ele-DeleteFilled" @click="clearLog"> 清空 </el-button>
 				</el-form-item>
 			</el-form>
 		</el-card>
 
-		<el-card shadow="hover" style="margin-top: 8px;">
+		<el-card shadow="hover" style="margin-top: 8px">
 			<el-table :data="logData" style="width: 100%" v-loading="loading" border>
 				<el-table-column type="index" label="序号" width="55" align="center" />
 				<el-table-column prop="userName" label="账号名称" show-overflow-tooltip></el-table-column>
@@ -44,10 +39,17 @@
 				<el-table-column prop="location" label="地址" show-overflow-tooltip></el-table-column>
 				<el-table-column prop="createTime" label="操作时间" align="center" show-overflow-tooltip></el-table-column>
 			</el-table>
-			<el-pagination v-model:currentPage="tableParams.page" v-model:page-size="tableParams.pageSize"
-				:total="tableParams.total" :page-sizes="[10, 20, 50, 100]" small background
-				@size-change="handleSizeChange" @current-change="handleCurrentChange"
-				layout="total, sizes, prev, pager, next, jumper" />
+			<el-pagination
+				v-model:currentPage="tableParams.page"
+				v-model:page-size="tableParams.pageSize"
+				:total="tableParams.total"
+				:page-sizes="[10, 20, 50, 100]"
+				small
+				background
+				@size-change="handleSizeChange"
+				@current-change="handleCurrentChange"
+				layout="total, sizes, prev, pager, next, jumper"
+			/>
 		</el-card>
 	</div>
 </template>
@@ -81,13 +83,10 @@ export default defineComponent({
 		});
 		// 查询操作
 		const handleQuery = async () => {
-			if (state.queryParams.startTime == null)
-				state.queryParams.startTime = undefined;
-			if (state.queryParams.endTime == null)
-				state.queryParams.endTime = undefined;
+			if (state.queryParams.startTime == null) state.queryParams.startTime = undefined;
+			if (state.queryParams.endTime == null) state.queryParams.endTime = undefined;
 			state.loading = true;
-			var res = await getAPI(SysLogVisApi).sysLogVisPageGet(state.queryParams.startTime, state.queryParams.endTime,
-				state.tableParams.page, state.tableParams.pageSize);
+			var res = await getAPI(SysLogVisApi).sysLogVisPageGet(state.queryParams.startTime, state.queryParams.endTime, state.tableParams.page, state.tableParams.pageSize);
 			state.logData = res.data.result?.items;
 			state.tableParams.total = res.data.result?.total;
 			state.loading = false;
@@ -125,20 +124,20 @@ export default defineComponent({
 			{
 				text: '昨天',
 				value: () => {
-					const date = new Date()
-					date.setTime(date.getTime() - 3600 * 1000 * 24)
-					return date
+					const date = new Date();
+					date.setTime(date.getTime() - 3600 * 1000 * 24);
+					return date;
 				},
 			},
 			{
 				text: '上周',
 				value: () => {
-					const date = new Date()
-					date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
-					return date
+					const date = new Date();
+					date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+					return date;
 				},
 			},
-		]
+		];
 		return {
 			handleQuery,
 			resetQuery,

vue-next-admin/src/views/system/menu/component/editMenu.vue

@@ -2,7 +2,7 @@
 	<div class="sys-menu-container">
 		<el-dialog v-model="isShowDialog" width="769px">
 			<template #header>
-				<div style="font-size: large" v-drag="['.el-dialog','.el-dialog__header']">
+				<div style="font-size: large" v-drag="['.el-dialog', '.el-dialog__header']">
 					{{ title }}
 				</div>
 			</template>
@@ -10,9 +10,7 @@
 				<el-row :gutter="35">
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
 						<el-form-item label="上级菜单">
-							<el-cascader :options="menuData"
-								:props="{ checkStrictly: true, value: 'id', label: 'title' }" placeholder="请选择上级菜单"
-								clearable class="w100" v-model="ruleForm.pid">
+							<el-cascader :options="menuData" :props="{ checkStrictly: true, value: 'id', label: 'title' }" placeholder="请选择上级菜单" clearable class="w100" v-model="ruleForm.pid">
 								<template #default="{ node, data }">
 									<span>{{ data.title }}</span>
 									<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
@@ -62,8 +60,7 @@
 						</el-col>
 						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
 							<el-form-item label="链接地址">
-								<el-input v-model="ruleForm.outLink" placeholder="外链/内嵌时链接地址" clearable>
-								</el-input>
+								<el-input v-model="ruleForm.outLink" placeholder="外链/内嵌时链接地址" clearable> </el-input>
 							</el-form-item>
 						</el-col>
 						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
@@ -126,8 +123,7 @@
 					</el-col>
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
 						<el-form-item label="备注">
-							<el-input v-model="ruleForm.remark" placeholder="请输入备注内容" clearable type="textarea">
-							</el-input>
+							<el-input v-model="ruleForm.remark" placeholder="请输入备注内容" clearable type="textarea"> </el-input>
 						</el-form-item>
 					</el-col>
 				</el-row>
@@ -156,13 +152,13 @@ export default defineComponent({
 		// 弹窗标题
 		title: {
 			type: String,
-			default: "",
+			default: '',
 		},
 		// 菜单数据
 		menuData: {
 			type: Array,
 			default: () => [],
-		}
+		},
 	},
 	setup() {
 		const { proxy } = getCurrentInstance() as any;
@@ -176,7 +172,7 @@ export default defineComponent({
 				name: '', // 路由名称(全局唯一)
 				component: '', // 组件路径
 				redirect: '', // 路由重定向(有子集 children 时)
-				permission: '', // 权限标识				
+				permission: '', // 权限标识
 				path: '', // 路由路径
 				title: '', // 菜单名称
 				icon: '', // 菜单图标
@@ -189,10 +185,14 @@ export default defineComponent({
 				status: 1, // 是否启用
 				remark: '', // 备注
 			},
-			menuType: [{ value: 1, label: "目录" }, { value: 2, label: "菜单" }, { value: 3, label: "按钮" }],
+			menuType: [
+				{ value: 1, label: '目录' },
+				{ value: 2, label: '菜单' },
+				{ value: 3, label: '按钮' },
+			],
 			ruleRules: {
-				type: [{ required: true, message: "菜单类型不能为空", trigger: "blur" }],
-				title: [{ required: true, message: "菜单名称不能为空", trigger: "blur" }],
+				type: [{ required: true, message: '菜单类型不能为空', trigger: 'blur' }],
+				title: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
 			},
 		});
 		// 打开弹窗
@@ -202,7 +202,7 @@ export default defineComponent({
 		};
 		// 关闭弹窗
 		const closeDialog = () => {
-			proxy.mittBus.emit("submitRefresh");
+			proxy.mittBus.emit('submitRefresh');
 			state.isShowDialog = false;
 		};
 		// 取消
@@ -212,18 +212,16 @@ export default defineComponent({
 		// 提交
 		const submit = () => {
 			// 上级菜单Id
-			if (Array.isArray(state.ruleForm.pid))
-				state.ruleForm.pid = state.ruleForm.pid[state.ruleForm.pid.length - 1];
+			if (Array.isArray(state.ruleForm.pid)) state.ruleForm.pid = state.ruleForm.pid[state.ruleForm.pid.length - 1];
 			ruleFormRef.value.validate(async (valid: boolean) => {
 				if (!valid) return;
 				if (state.ruleForm.id != undefined && state.ruleForm.id > 0) {
 					await getAPI(SysMenuApi).sysMenuUpdatePost(state.ruleForm);
-				}
-				else {
+				} else {
 					await getAPI(SysMenuApi).sysMenuAddPost(state.ruleForm);
 				}
 				closeDialog();
-			})
+			});
 		};
 		return {
 			ruleFormRef,

vue-next-admin/src/views/system/menu/index.vue

@@ -1,72 +1,59 @@
 <template>
-  <div class="sys-menu-container">
-    <el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
-      <el-form :model="queryParams" ref="queryForm" :inline="true">
-        <el-form-item label="菜单名称" prop="title">
-          <el-input placeholder="菜单名称" clearable @keyup.enter="handleQuery" v-model="queryParams.title" />
-        </el-form-item>
-        <el-form-item label="类型" prop="type">
-          <el-select v-model="queryParams.type" placeholder="类型" clearable>
-            <el-option v-for="dict in menuType" :key="dict.value" :label="dict.label" :value="dict.value" />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button icon="ele-Refresh" @click="resetQuery">
-            重置
-          </el-button>
-          <el-button type="primary" icon="ele-Search" @click="handleQuery">
-            查询
-          </el-button>
-          <el-button icon="ele-Plus" @click="openAddMenu">
-            新增
-          </el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
+	<div class="sys-menu-container">
+		<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
+			<el-form :model="queryParams" ref="queryForm" :inline="true">
+				<el-form-item label="菜单名称" prop="title">
+					<el-input placeholder="菜单名称" clearable @keyup.enter="handleQuery" v-model="queryParams.title" />
+				</el-form-item>
+				<el-form-item label="类型" prop="type">
+					<el-select v-model="queryParams.type" placeholder="类型" clearable>
+						<el-option v-for="dict in menuType" :key="dict.value" :label="dict.label" :value="dict.value" />
+					</el-select>
+				</el-form-item>
+				<el-form-item>
+					<el-button icon="ele-Refresh" @click="resetQuery"> 重置 </el-button>
+					<el-button type="primary" icon="ele-Search" @click="handleQuery"> 查询 </el-button>
+					<el-button icon="ele-Plus" @click="openAddMenu"> 新增 </el-button>
+				</el-form-item>
+			</el-form>
+		</el-card>
 
-    <el-card shadow="hover" style="margin-top: 8px;">
-      <el-table :data="menuData" v-loading="loading" row-key="id"
-        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" border>
-        <el-table-column label="菜单名称" show-overflow-tooltip>
-          <template #default="scope">
-            <SvgIcon :name="scope.row.icon" />
-            <span class="ml10">{{ $t(scope.row.title) }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="类型" width="70" align="center" show-overflow-tooltip>
-          <template #default="scope">
-            <el-tag type="warning" v-if="scope.row.type === 1">目录</el-tag>
-            <el-tag v-else-if="scope.row.type === 2">菜单</el-tag>
-            <el-tag type="info" v-else>按钮</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="path" label="路由路径" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="component" label="组件路径" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="permission" label="权限标识" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="order" label="排序" width="70" align="center" show-overflow-tooltip>
-        </el-table-column>
-        <el-table-column label="状态" width="80" align="center" show-overflow-tooltip>
-          <template #default="scope">
-            <el-tag type="success" v-if="scope.row.status === 1">启用</el-tag>
-            <el-tag type="danger" v-else>禁用</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="createTime" label="修改时间" align="center" show-overflow-tooltip>
-        </el-table-column>
-        <el-table-column label="操作" width="140" fixed="right" align="center" show-overflow-tooltip>
-          <template #default="scope">
-            <el-button icon="ele-Edit" size="small" text type="primary" @click="openEditMenu(scope.row)">
-              编辑
-            </el-button>
-            <el-button icon="ele-Delete" size="small" text type="primary" @click="delMenu(scope.row)">
-              删除
-            </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-card>
-    <EditMenu ref="editMenuRef" :title="editMenuTitle" :menuData="menuData" />
-  </div>
+		<el-card shadow="hover" style="margin-top: 8px">
+			<el-table :data="menuData" v-loading="loading" row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" border>
+				<el-table-column label="菜单名称" show-overflow-tooltip>
+					<template #default="scope">
+						<SvgIcon :name="scope.row.icon" />
+						<span class="ml10">{{ $t(scope.row.title) }}</span>
+					</template>
+				</el-table-column>
+				<el-table-column label="类型" width="70" align="center" show-overflow-tooltip>
+					<template #default="scope">
+						<el-tag type="warning" v-if="scope.row.type === 1">目录</el-tag>
+						<el-tag v-else-if="scope.row.type === 2">菜单</el-tag>
+						<el-tag type="info" v-else>按钮</el-tag>
+					</template>
+				</el-table-column>
+				<el-table-column prop="path" label="路由路径" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="component" label="组件路径" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="permission" label="权限标识" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="order" label="排序" width="70" align="center" show-overflow-tooltip> </el-table-column>
+				<el-table-column label="状态" width="80" align="center" show-overflow-tooltip>
+					<template #default="scope">
+						<el-tag type="success" v-if="scope.row.status === 1">启用</el-tag>
+						<el-tag type="danger" v-else>禁用</el-tag>
+					</template>
+				</el-table-column>
+				<el-table-column prop="createTime" label="修改时间" align="center" show-overflow-tooltip> </el-table-column>
+				<el-table-column label="操作" width="140" fixed="right" align="center" show-overflow-tooltip>
+					<template #default="scope">
+						<el-button icon="ele-Edit" size="small" text type="primary" @click="openEditMenu(scope.row)"> 编辑 </el-button>
+						<el-button icon="ele-Delete" size="small" text type="primary" @click="delMenu(scope.row)"> 删除 </el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+		</el-card>
+		<EditMenu ref="editMenuRef" :title="editMenuTitle" :menuData="menuData" />
+	</div>
 </template>
 
 <script lang="ts">
@@ -78,78 +65,82 @@ import { getAPI } from '/@/utils/axios-utils';
 import { SysMenuApi } from '/@/api-services';
 
 export default defineComponent({
-  name: 'sysMenu',
-  components: { EditMenu },
-  setup() {
-    const { proxy } = getCurrentInstance() as any;
-    const editMenuRef = ref();
-    const state = reactive({
-      loading: true,
-      menuData: [] as any,
-      queryParams: {
-        title: undefined,
-        type: undefined,
-      },
-      menuType: [{ value: 1, label: "目录" }, { value: 2, label: "菜单" }, { value: 3, label: "按钮" }],
-      editMenuTitle: "",
-    });
-    onMounted(async () => {
-      handleQuery();
+	name: 'sysMenu',
+	components: { EditMenu },
+	setup() {
+		const { proxy } = getCurrentInstance() as any;
+		const editMenuRef = ref();
+		const state = reactive({
+			loading: true,
+			menuData: [] as any,
+			queryParams: {
+				title: undefined,
+				type: undefined,
+			},
+			menuType: [
+				{ value: 1, label: '目录' },
+				{ value: 2, label: '菜单' },
+				{ value: 3, label: '按钮' },
+			],
+			editMenuTitle: '',
+		});
+		onMounted(async () => {
+			handleQuery();
 
-      proxy.mittBus.on("submitRefresh", () => {
-        handleQuery();
-      });
-    });
-    onUnmounted(() => {
-      proxy.mittBus.off("submitRefresh");
-    });
+			proxy.mittBus.on('submitRefresh', () => {
+				handleQuery();
+			});
+		});
+		onUnmounted(() => {
+			proxy.mittBus.off('submitRefresh');
+		});
 
-    // 查询操作
-    const handleQuery = async () => {
-      state.loading = true;
-      var res = await getAPI(SysMenuApi).sysMenuListGet(state.queryParams.title, state.queryParams.type);
-      state.menuData = res.data.result;
-      state.loading = false;
-    };
-    // 重置操作
-    const resetQuery = () => {
-      state.queryParams.title = undefined;
-      state.queryParams.type = undefined;
-      handleQuery();
-    };
-    // 打开新增页面
-    const openAddMenu = () => {
-      state.editMenuTitle = "添加菜单";
-      editMenuRef.value.openDialog({});
-    };
-    // 打开编辑页面
-    const openEditMenu = (row: any) => {
-      state.editMenuTitle = "编辑菜单";
-      editMenuRef.value.openDialog(row);
-    };
-    // 删除当前行
-    const delMenu = (row: any) => {
-      ElMessageBox.confirm(`确定删除菜单：【${row.title}】?`, '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-      })
-        .then(async () => {
-          await getAPI(SysMenuApi).sysMenuDeletePost({ id: row.id });
-          handleQuery();
-          ElMessage.success('删除成功');
-        })
-        .catch(() => { });
-    };
-    return {
-      handleQuery,
-      resetQuery,
-      editMenuRef,
-      openAddMenu,
-      openEditMenu,
-      delMenu,
-      ...toRefs(state),
-    };
-  },
+		// 查询操作
+		const handleQuery = async () => {
+			state.loading = true;
+			var res = await getAPI(SysMenuApi).sysMenuListGet(state.queryParams.title, state.queryParams.type);
+			state.menuData = res.data.result;
+			state.loading = false;
+		};
+		// 重置操作
+		const resetQuery = () => {
+			state.queryParams.title = undefined;
+			state.queryParams.type = undefined;
+			handleQuery();
+		};
+		// 打开新增页面
+		const openAddMenu = () => {
+			state.editMenuTitle = '添加菜单';
+			editMenuRef.value.openDialog({});
+		};
+		// 打开编辑页面
+		const openEditMenu = (row: any) => {
+			state.editMenuTitle = '编辑菜单';
+			editMenuRef.value.openDialog(row);
+		};
+		// 删除当前行
+		const delMenu = (row: any) => {
+			ElMessageBox.confirm(`确定删除菜单：【${row.title}】?`, '提示', {
+				confirmButtonText: '确定',
+				cancelButtonText: '取消',
+				type: 'warning',
+			})
+				.then(async () => {
+					await getAPI(SysMenuApi).sysMenuDeletePost({ id: row.id });
+					handleQuery();
+					ElMessage.success('删除成功');
+				})
+				.catch(() => {});
+		};
+		return {
+			handleQuery,
+			resetQuery,
+			editMenuRef,
+			openAddMenu,
+			openEditMenu,
+			delMenu,
+			...toRefs(state),
+		};
+	},
 });
 </script>

vue-next-admin/src/views/system/org/component/editOrg.vue

@@ -2,7 +2,7 @@
 	<div class="sys-org-container">
 		<el-dialog v-model="isShowDialog" width="600px">
 			<template #header>
-				<div style="font-size: large" v-drag="['.el-dialog','.el-dialog__header']">
+				<div style="font-size: large" v-drag="['.el-dialog', '.el-dialog__header']">
 					{{ title }}
 				</div>
 			</template>
@@ -10,8 +10,7 @@
 				<el-row :gutter="35">
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
 						<el-form-item label="上级机构">
-							<el-cascader :options="orgData" :props="{ checkStrictly: true, value: 'id', label: 'name' }"
-								placeholder="请选择上级机构" clearable class="w100" v-model="ruleForm.pid">
+							<el-cascader :options="orgData" :props="{ checkStrictly: true, value: 'id', label: 'name' }" placeholder="请选择上级机构" clearable class="w100" v-model="ruleForm.pid">
 								<template #default="{ node, data }">
 									<span>{{ data.name }}</span>
 									<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
@@ -44,8 +43,7 @@
 					</el-col>
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
 						<el-form-item label="备注">
-							<el-input v-model="ruleForm.remark" placeholder="请输入备注内容" clearable type="textarea">
-							</el-input>
+							<el-input v-model="ruleForm.remark" placeholder="请输入备注内容" clearable type="textarea"> </el-input>
 						</el-form-item>
 					</el-col>
 				</el-row>
@@ -73,13 +71,13 @@ export default defineComponent({
 		// 弹窗标题
 		title: {
 			type: String,
-			default: "",
+			default: '',
 		},
 		// 机构数据
 		orgData: {
 			type: Array,
 			default: () => [],
-		}
+		},
 	},
 	setup() {
 		const { proxy } = getCurrentInstance() as any;
@@ -96,8 +94,8 @@ export default defineComponent({
 				remark: '', // 备注
 			},
 			ruleRules: {
-				name: [{ required: true, message: "机构名称不能为空", trigger: "blur" }],
-				code: [{ required: true, message: "机构编码不能为空", trigger: "blur" }],
+				name: [{ required: true, message: '机构名称不能为空', trigger: 'blur' }],
+				code: [{ required: true, message: '机构编码不能为空', trigger: 'blur' }],
 			},
 		});
 		// 打开弹窗
@@ -107,7 +105,7 @@ export default defineComponent({
 		};
 		// 关闭弹窗
 		const closeDialog = () => {
-			proxy.mittBus.emit("submitRefresh");
+			proxy.mittBus.emit('submitRefresh');
 			state.isShowDialog = false;
 		};
 		// 取消
@@ -117,18 +115,16 @@ export default defineComponent({
 		// 提交
 		const submit = () => {
 			// 上级机构Id
-			if (Array.isArray(state.ruleForm.pid))
-				state.ruleForm.pid = state.ruleForm.pid[state.ruleForm.pid.length - 1];
+			if (Array.isArray(state.ruleForm.pid)) state.ruleForm.pid = state.ruleForm.pid[state.ruleForm.pid.length - 1];
 			ruleFormRef.value.validate(async (valid: boolean) => {
 				if (!valid) return;
 				if (state.ruleForm.id != undefined && state.ruleForm.id > 0) {
 					await getAPI(SysOrgApi).sysOrgUpdatePost(state.ruleForm);
-				}
-				else {
+				} else {
 					await getAPI(SysOrgApi).sysOrgAddPost(state.ruleForm);
 				}
 				closeDialog();
-			})
+			});
 		};
 		return {
 			ruleFormRef,
@@ -141,4 +137,3 @@ export default defineComponent({
 	},
 });
 </script>
-	

vue-next-admin/src/views/system/org/component/orgTree.vue

@@ -1,41 +1,50 @@
 <template>
-  <el-card class='box-card' shadow="hover" style='height: 100%;' body-style='height:100%; overflow:auto'>
-    <template #header>
-      <div class='card-header'>
-        <div class='tree-h-flex'>
-          <div class='tree-h-left'>
-            <el-input :prefix-icon='Search' v-model='filterText' placeholder='机构名称' />
-          </div>
-          <div class='tree-h-right'>
-            <el-dropdown @command='handleCommand'>
-              <el-button style='margin-left: 8px;width: 34px'>
-                <el-icon class='el-icon--center'>
-                  <more-filled />
-                </el-icon>
-              </el-button>
-              <template #dropdown>
-                <el-dropdown-menu>
-                  <el-dropdown-item command='expandAll'>全部展开</el-dropdown-item>
-                  <el-dropdown-item command='collapseAll'>全部折叠</el-dropdown-item>
-                  <el-dropdown-item command='rootNode'>根节点</el-dropdown-item>
-                  <el-dropdown-item command='refresh'>刷新</el-dropdown-item>
-                </el-dropdown-menu>
-              </template>
-            </el-dropdown>
-          </div>
-        </div>
-      </div>
-    </template>
-    <div style="margin-bottom: 45px" v-loading="state.loading">
-      <el-tree ref='treeRef' class='filter-tree' :data='state.orgData' node-key="id"
-        :props="{children: 'children', label: 'name'}" :filter-node-method='filterNode' @node-click="nodeClick"
-        :show-checkbox="state.isShowCheckbox" :default-checked-keys="state.ownOrgData" highlight-current
-        check-strictly />
-    </div>
-  </el-card>
+	<el-card class="box-card" shadow="hover" style="height: 100%" body-style="height:100%; overflow:auto">
+		<template #header>
+			<div class="card-header">
+				<div class="tree-h-flex">
+					<div class="tree-h-left">
+						<el-input :prefix-icon="Search" v-model="filterText" placeholder="机构名称" />
+					</div>
+					<div class="tree-h-right">
+						<el-dropdown @command="handleCommand">
+							<el-button style="margin-left: 8px; width: 34px">
+								<el-icon class="el-icon--center">
+									<more-filled />
+								</el-icon>
+							</el-button>
+							<template #dropdown>
+								<el-dropdown-menu>
+									<el-dropdown-item command="expandAll">全部展开</el-dropdown-item>
+									<el-dropdown-item command="collapseAll">全部折叠</el-dropdown-item>
+									<el-dropdown-item command="rootNode">根节点</el-dropdown-item>
+									<el-dropdown-item command="refresh">刷新</el-dropdown-item>
+								</el-dropdown-menu>
+							</template>
+						</el-dropdown>
+					</div>
+				</div>
+			</div>
+		</template>
+		<div style="margin-bottom: 45px" v-loading="state.loading">
+			<el-tree
+				ref="treeRef"
+				class="filter-tree"
+				:data="state.orgData"
+				node-key="id"
+				:props="{ children: 'children', label: 'name' }"
+				:filter-node-method="filterNode"
+				@node-click="nodeClick"
+				:show-checkbox="state.isShowCheckbox"
+				:default-checked-keys="state.ownOrgData"
+				highlight-current
+				check-strictly
+			/>
+		</div>
+	</el-card>
 </template>
 
-<script lang='ts' setup>
+<script lang="ts" setup>
 import { onMounted, reactive, ref, watch } from 'vue';
 import type { ElTree } from 'element-plus';
 import { Search, MoreFilled } from '@element-plus/icons-vue';
@@ -47,64 +56,64 @@ const filterText = ref('');
 const treeRef = ref<InstanceType<typeof ElTree>>();
 
 const state = reactive({
-  loading: true,
-  orgData: [] as any,
-  isShowCheckbox: false,
-  ownOrgData: [],
+	loading: true,
+	orgData: [] as any,
+	isShowCheckbox: false,
+	ownOrgData: [],
 });
 
 onMounted(() => {
-  initTreeData();
+	initTreeData();
 });
 
 watch(filterText, (val) => {
-  treeRef.value!.filter(val);
+	treeRef.value!.filter(val);
 });
 
 const initTreeData = async () => {
-  state.loading = true;
-  var res = await getAPI(SysOrgApi).sysOrgListGet(0);
-  state.orgData = res.data.result;
-  state.loading = false;
+	state.loading = true;
+	var res = await getAPI(SysOrgApi).sysOrgListGet(0);
+	state.orgData = res.data.result;
+	state.loading = false;
 };
 
 // 设置默认选择
 const setCheckedKeys = (orgData: any) => {
-  state.isShowCheckbox = true;
-  treeRef.value!.setCheckedKeys([]);
-  state.ownOrgData = orgData;
+	state.isShowCheckbox = true;
+	treeRef.value!.setCheckedKeys([]);
+	state.ownOrgData = orgData;
 };
 
 // 获取已经选择
 const getCheckedKeys = () => {
-  return treeRef.value!.getCheckedKeys();
+	return treeRef.value!.getCheckedKeys();
 };
 
 const filterNode = (value: string, data: any) => {
-  if (!value) return true;
-  return data.name.includes(value);
+	if (!value) return true;
+	return data.name.includes(value);
 };
 
 const handleCommand = async (command: string | number | object) => {
-  if ('expandAll' == command) {
-    for (let i = 0; i < treeRef.value!.store._getAllNodes().length; i++) {
-      treeRef.value!.store._getAllNodes()[i].expanded = true;
-    }
-  } else if ('collapseAll' == command) {
-    for (let i = 0; i < treeRef.value!.store._getAllNodes().length; i++) {
-      treeRef.value!.store._getAllNodes()[i].expanded = false;
-    }
-  } else if ('refresh' == command) {
-    initTreeData();
-  } else if ('rootNode' == command) {
-    emits('node-click', { id: 0, name: '' });
-  }
+	if ('expandAll' == command) {
+		for (let i = 0; i < treeRef.value!.store._getAllNodes().length; i++) {
+			treeRef.value!.store._getAllNodes()[i].expanded = true;
+		}
+	} else if ('collapseAll' == command) {
+		for (let i = 0; i < treeRef.value!.store._getAllNodes().length; i++) {
+			treeRef.value!.store._getAllNodes()[i].expanded = false;
+		}
+	} else if ('refresh' == command) {
+		initTreeData();
+	} else if ('rootNode' == command) {
+		emits('node-click', { id: 0, name: '' });
+	}
 };
 
 // 与父组件的交互逻辑
 const emits = defineEmits(['node-click']);
 const nodeClick = (node: any) => {
-  emits('node-click', { id: node.id, name: node.name });
+	emits('node-click', { id: node.id, name: node.name });
 };
 
 const orgTreeData = state.orgData; // 异步数据导出不了？
@@ -114,16 +123,16 @@ defineExpose({ orgTreeData, setCheckedKeys, getCheckedKeys });
 
 <style scoped>
 .tree-h-flex {
-  display: flex;
+	display: flex;
 }
 
 .tree-h-left {
-  flex: 1;
-  width: 100%;
+	flex: 1;
+	width: 100%;
 }
 
 .tree-h-right {
-  width: 42px;
-  min-width: 42px;
+	width: 42px;
+	min-width: 42px;
 }
-</style>
+</style>

vue-next-admin/src/views/system/org/index.vue

@@ -1,59 +1,44 @@
 <template>
 	<div class="sys-org-container">
-		<el-row :gutter="8" style="width:100%">
+		<el-row :gutter="8" style="width: 100%">
 			<el-col :span="4" :xs="24">
-				<OrgTree @node-click='nodeClick' />
+				<OrgTree @node-click="nodeClick" />
 			</el-col>
 
 			<el-col :span="20" :xs="24">
 				<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
 					<el-form :model="queryParams" ref="queryForm" :inline="true">
 						<el-form-item label="机构名称" prop="name">
-							<el-input placeholder="机构名称" clearable @keyup.enter="handleQuery"
-								v-model="queryParams.name" />
+							<el-input placeholder="机构名称" clearable @keyup.enter="handleQuery" v-model="queryParams.name" />
 						</el-form-item>
 						<el-form-item label="机构编码" prop="code">
-							<el-input placeholder="机构编码" clearable @keyup.enter="handleQuery"
-								v-model="queryParams.code" />
+							<el-input placeholder="机构编码" clearable @keyup.enter="handleQuery" v-model="queryParams.code" />
 						</el-form-item>
 						<el-form-item>
-							<el-button icon="ele-Refresh" @click="resetQuery">
-								重置
-							</el-button>
-							<el-button type="primary" icon="ele-Search" @click="handleQuery">
-								查询
-							</el-button>
-							<el-button icon="ele-Plus" @click="openAddOrg">
-								新增
-							</el-button>
+							<el-button icon="ele-Refresh" @click="resetQuery"> 重置 </el-button>
+							<el-button type="primary" icon="ele-Search" @click="handleQuery"> 查询 </el-button>
+							<el-button icon="ele-Plus" @click="openAddOrg"> 新增 </el-button>
 						</el-form-item>
 					</el-form>
 				</el-card>
 
-				<el-card shadow="hover" style="margin-top: 8px;">
-					<el-table :data="orgData" style="width: 100%" v-loading="loading" row-key="id" default-expand-all
-						:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" border>
+				<el-card shadow="hover" style="margin-top: 8px">
+					<el-table :data="orgData" style="width: 100%" v-loading="loading" row-key="id" default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" border>
 						<el-table-column prop="name" label="机构名称" show-overflow-tooltip> </el-table-column>
 						<el-table-column prop="code" label="机构编码" show-overflow-tooltip></el-table-column>
-						<el-table-column prop="order" label="排序" width="70" align="center" show-overflow-tooltip>
-						</el-table-column>
+						<el-table-column prop="order" label="排序" width="70" align="center" show-overflow-tooltip> </el-table-column>
 						<el-table-column label="状态" width="70" align="center" show-overflow-tooltip>
 							<template #default="scope">
 								<el-tag type="success" v-if="scope.row.status === 1">启用</el-tag>
 								<el-tag type="danger" v-else>禁用</el-tag>
 							</template>
 						</el-table-column>
-						<el-table-column prop="createTime" label="修改时间" align="center" show-overflow-tooltip>
-						</el-table-column>
+						<el-table-column prop="createTime" label="修改时间" align="center" show-overflow-tooltip> </el-table-column>
 						<el-table-column prop="remark" label="备注" show-overflow-tooltip></el-table-column>
 						<el-table-column label="操作" width="140" fixed="right" align="center" show-overflow-tooltip>
 							<template #default="scope">
-								<el-button icon="ele-Edit" size="small" text type="primary"
-									@click="openEditOrg(scope.row)">编辑
-								</el-button>
-								<el-button icon="ele-Delete" size="small" text type="primary"
-									@click="delOrg(scope.row)">删除
-								</el-button>
+								<el-button icon="ele-Edit" size="small" text type="primary" @click="openEditOrg(scope.row)">编辑 </el-button>
+								<el-button icon="ele-Delete" size="small" text type="primary" @click="delOrg(scope.row)">删除 </el-button>
 							</template>
 						</el-table-column>
 					</el-table>
@@ -88,17 +73,17 @@ export default defineComponent({
 				name: undefined,
 				code: undefined,
 			},
-			editOrgTitle: "",
+			editOrgTitle: '',
 		});
 		onMounted(() => {
 			handleQuery();
 
-			proxy.mittBus.on("submitRefresh", () => {
+			proxy.mittBus.on('submitRefresh', () => {
 				handleQuery();
 			});
 		});
 		onUnmounted(() => {
-			proxy.mittBus.off("submitRefresh");
+			proxy.mittBus.off('submitRefresh');
 		});
 		// 查询操作
 		const handleQuery = async () => {
@@ -107,8 +92,7 @@ export default defineComponent({
 			state.orgData = res.data.result;
 			state.loading = false;
 
-			if (state.queryParams.id == -1)
-				state.orgTreeData = state.orgData;
+			if (state.queryParams.id == -1) state.orgTreeData = state.orgData;
 		};
 		// 重置操作
 		const resetQuery = () => {
@@ -119,12 +103,12 @@ export default defineComponent({
 		};
 		// 打开新增页面
 		const openAddOrg = () => {
-			state.editOrgTitle = "添加机构";
+			state.editOrgTitle = '添加机构';
 			editOrgRef.value.openDialog({});
 		};
 		// 打开编辑页面
 		const openEditOrg = (row: any) => {
-			state.editOrgTitle = "编辑机构";
+			state.editOrgTitle = '编辑机构';
 			editOrgRef.value.openDialog(row);
 		};
 		// 删除
@@ -139,7 +123,7 @@ export default defineComponent({
 					handleQuery();
 					ElMessage.success('删除成功');
 				})
-				.catch(() => { });
+				.catch(() => {});
 		};
 		// 树组件点击
 		const nodeClick = async (node: any) => {

vue-next-admin/src/views/system/password/index.vue

@@ -1,7 +1,6 @@
 <template>
 	<div class="sys-password-container">
-		<NoticeBar text="账号密码修改，请慎重操作！" leftIcon="iconfont icon-tongzhi2" background="var(--el-color-primary-light-9)"
-			color="var(--el-color-primary)" />
+		<NoticeBar text="账号密码修改，请慎重操作！" leftIcon="iconfont icon-tongzhi2" background="var(--el-color-primary-light-9)" color="var(--el-color-primary)" />
 		<el-card shadow="hover" header="修改当前账号密码" class="mt8">
 			<el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="ruleRules" label-width="80px">
 				<el-form-item label="当前密码" prop="passwordOld">
@@ -39,11 +38,11 @@ export default defineComponent({
 
 		const validatePassword = (rule: any, value: any, callback: any) => {
 			if (value != state.ruleForm.passwordNew) {
-				callback(new Error("两次密码不一致！"))
+				callback(new Error('两次密码不一致！'));
 			} else {
-				callback()
+				callback();
 			}
-		}
+		};
 		const state = reactive({
 			ruleForm: {
 				id: 0,
@@ -52,16 +51,16 @@ export default defineComponent({
 				passwordNew2: '',
 			},
 			ruleRules: {
-				passwordOld: [{ required: true, message: "当前密码不能为空", trigger: "blur" }],
-				passwordNew: [{ required: true, message: "新密码不能为空", trigger: "blur" }],
-				passwordNew2: [{ validator: validatePassword, required: true, trigger: "blur" }],
+				passwordOld: [{ required: true, message: '当前密码不能为空', trigger: 'blur' }],
+				passwordNew: [{ required: true, message: '新密码不能为空', trigger: 'blur' }],
+				passwordNew2: [{ validator: validatePassword, required: true, trigger: 'blur' }],
 			},
 		});
 		// 重置
 		const reset = () => {
-			state.ruleForm.passwordOld = "";
-			state.ruleForm.passwordNew = "";
-			state.ruleForm.passwordNew2 = "";
+			state.ruleForm.passwordOld = '';
+			state.ruleForm.passwordNew = '';
+			state.ruleForm.passwordNew2 = '';
 		};
 		// 提交
 		const submit = () => {
@@ -73,13 +72,12 @@ export default defineComponent({
 					confirmButtonText: '确定',
 					cancelButtonText: '取消',
 					type: 'warning',
-				})
-					.then(async () => {
-						// 清除缓存
-						Session.clear();
-						window.location.reload();
-					});
-			})
+				}).then(async () => {
+					// 清除缓存
+					Session.clear();
+					window.location.reload();
+				});
+			});
 		};
 		return {
 			ruleFormRef,

vue-next-admin/src/views/system/pos/component/editPos.vue

@@ -2,7 +2,7 @@
 	<div class="sys-pos-container">
 		<el-dialog v-model="isShowDialog" width="600px">
 			<template #header>
-				<div style="font-size: large" v-drag="['.el-dialog','.el-dialog__header']">
+				<div style="font-size: large" v-drag="['.el-dialog', '.el-dialog__header']">
 					{{ title }}
 				</div>
 			</template>
@@ -33,8 +33,7 @@
 					</el-col>
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
 						<el-form-item label="备注">
-							<el-input v-model="ruleForm.remark" placeholder="请输入备注内容" clearable type="textarea">
-							</el-input>
+							<el-input v-model="ruleForm.remark" placeholder="请输入备注内容" clearable type="textarea"> </el-input>
 						</el-form-item>
 					</el-col>
 				</el-row>
@@ -62,7 +61,7 @@ export default defineComponent({
 		// 弹窗标题
 		title: {
 			type: String,
-			default: "",
+			default: '',
 		},
 	},
 	setup() {
@@ -79,8 +78,8 @@ export default defineComponent({
 				remark: '', // 备注
 			},
 			ruleRules: {
-				name: [{ required: true, message: "职位名称不能为空", trigger: "blur" }],
-				code: [{ required: true, message: "职位编码不能为空", trigger: "blur" }],
+				name: [{ required: true, message: '职位名称不能为空', trigger: 'blur' }],
+				code: [{ required: true, message: '职位编码不能为空', trigger: 'blur' }],
 			},
 		});
 		// 打开弹窗
@@ -90,7 +89,7 @@ export default defineComponent({
 		};
 		// 关闭弹窗
 		const closeDialog = () => {
-			proxy.mittBus.emit("submitRefresh");
+			proxy.mittBus.emit('submitRefresh');
 			state.isShowDialog = false;
 		};
 		// 取消
@@ -103,12 +102,11 @@ export default defineComponent({
 				if (!valid) return;
 				if (state.ruleForm.id != undefined && state.ruleForm.id > 0) {
 					await getAPI(SysPosApi).sysPosUpdatePost(state.ruleForm);
-				}
-				else {
+				} else {
 					await getAPI(SysPosApi).sysPosAddPost(state.ruleForm);
 				}
 				closeDialog();
-			})
+			});
 		};
 		return {
 			ruleFormRef,

vue-next-admin/src/views/system/pos/index.vue

@@ -9,26 +9,19 @@
 					<el-input placeholder="职位编码" clearable @keyup.enter="handleQuery" v-model="queryParams.code" />
 				</el-form-item>
 				<el-form-item>
-					<el-button icon="ele-Refresh" @click="resetQuery">
-						重置
-					</el-button>
-					<el-button type="primary" icon="ele-Search" @click="handleQuery">
-						查询
-					</el-button>
-					<el-button icon="ele-Plus" @click="openAddPos">
-						新增
-					</el-button>
+					<el-button icon="ele-Refresh" @click="resetQuery"> 重置 </el-button>
+					<el-button type="primary" icon="ele-Search" @click="handleQuery"> 查询 </el-button>
+					<el-button icon="ele-Plus" @click="openAddPos"> 新增 </el-button>
 				</el-form-item>
 			</el-form>
 		</el-card>
 
-		<el-card shadow="hover" style="margin-top: 8px;">
+		<el-card shadow="hover" style="margin-top: 8px">
 			<el-table :data="posData" style="width: 100%" v-loading="loading" border>
 				<el-table-column type="index" label="序号" width="55" align="center" />
 				<el-table-column prop="name" label="职位名称" show-overflow-tooltip></el-table-column>
 				<el-table-column prop="code" label="职位编码" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="order" label="排序" width="70" align="center" show-overflow-tooltip>
-				</el-table-column>
+				<el-table-column prop="order" label="排序" width="70" align="center" show-overflow-tooltip> </el-table-column>
 				<el-table-column label="状态" width="70" align="center" show-overflow-tooltip>
 					<template #default="scope">
 						<el-tag type="success" v-if="scope.row.status === 1">启用</el-tag>
@@ -39,12 +32,8 @@
 				<el-table-column prop="remark" label="备注" show-overflow-tooltip></el-table-column>
 				<el-table-column label="操作" width="140" fixed="right" align="center" show-overflow-tooltip>
 					<template #default="scope">
-						<el-button icon="ele-Edit" size="small" text type="primary" @click="openEditPos(scope.row)">
-							编辑
-						</el-button>
-						<el-button icon="ele-Delete" size="small" text type="primary" @click="delPos(scope.row)">
-							删除
-						</el-button>
+						<el-button icon="ele-Edit" size="small" text type="primary" @click="openEditPos(scope.row)"> 编辑 </el-button>
+						<el-button icon="ele-Delete" size="small" text type="primary" @click="delPos(scope.row)"> 删除 </el-button>
 					</template>
 				</el-table-column>
 			</el-table>
@@ -74,17 +63,17 @@ export default defineComponent({
 				name: undefined,
 				code: undefined,
 			},
-			editPosTitle: "",
+			editPosTitle: '',
 		});
 		onMounted(async () => {
 			handleQuery();
 
-			proxy.mittBus.on("submitRefresh", () => {
+			proxy.mittBus.on('submitRefresh', () => {
 				handleQuery();
 			});
 		});
 		onUnmounted(() => {
-			proxy.mittBus.off("submitRefresh");
+			proxy.mittBus.off('submitRefresh');
 		});
 
 		// 查询操作
@@ -102,12 +91,12 @@ export default defineComponent({
 		};
 		// 打开新增页面
 		const openAddPos = () => {
-			state.editPosTitle = "添加职位";
+			state.editPosTitle = '添加职位';
 			editPosRef.value.openDialog({});
 		};
 		// 打开编辑页面
 		const openEditPos = (row: any) => {
-			state.editPosTitle = "编辑职位";
+			state.editPosTitle = '编辑职位';
 			editPosRef.value.openDialog(row);
 		};
 		// 删除
@@ -122,7 +111,7 @@ export default defineComponent({
 					handleQuery();
 					ElMessage.success('删除成功');
 				})
-				.catch(() => { });
+				.catch(() => {});
 		};
 		return {
 			handleQuery,

vue-next-admin/src/views/system/role/component/editRole.vue

@@ -2,7 +2,7 @@
 	<div class="sys-role-container">
 		<el-dialog v-model="isShowDialog" width="769px">
 			<template #header>
-				<div style="font-size: large" v-drag="['.el-dialog','.el-dialog__header']">
+				<div style="font-size: large" v-drag="['.el-dialog', '.el-dialog__header']">
 					{{ title }}
 				</div>
 			</template>
@@ -33,19 +33,25 @@
 					</el-col>
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
 						<el-form-item label="备注">
-							<el-input v-model="ruleForm.remark" placeholder="请输入备注内容" clearable type="textarea">
-							</el-input>
+							<el-input v-model="ruleForm.remark" placeholder="请输入备注内容" clearable type="textarea"> </el-input>
 						</el-form-item>
 					</el-col>
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
 						<el-form-item label="菜单权限" v-loading="loading">
-							<el-tree ref="treeRef" :data="menuData" node-key="id" show-checkbox
+							<el-tree
+								ref="treeRef"
+								:data="menuData"
+								node-key="id"
+								show-checkbox
 								:props="{ children: 'children', label: 'title', class: treeNodeClass }"
-								:default-checked-keys="ownMenuData" highlight-current class="menu-data-tree"
-								icon="ele-Menu" check-strictly />
+								:default-checked-keys="ownMenuData"
+								highlight-current
+								class="menu-data-tree"
+								icon="ele-Menu"
+								check-strictly
+							/>
 						</el-form-item>
 					</el-col>
-
 				</el-row>
 			</el-form>
 			<template #footer>
@@ -61,7 +67,7 @@
 <script lang="ts">
 import { reactive, toRefs, defineComponent, getCurrentInstance, ref, onMounted } from 'vue';
 import type { ElTree } from 'element-plus';
-import type Node from 'element-plus/es/components/tree/src/model/node'
+import type Node from 'element-plus/es/components/tree/src/model/node';
 
 import { getAPI } from '/@/utils/axios-utils';
 import { SysMenuApi, SysRoleApi } from '/@/api-services/api';
@@ -73,7 +79,7 @@ export default defineComponent({
 		// 弹窗标题
 		title: {
 			type: String,
-			default: "",
+			default: '',
 		},
 		// 拥有菜单集合
 		ownMenuData: {
@@ -84,7 +90,7 @@ export default defineComponent({
 	setup() {
 		const { proxy } = getCurrentInstance() as any;
 		const ruleFormRef = ref();
-		const treeRef = ref<InstanceType<typeof ElTree>>()
+		const treeRef = ref<InstanceType<typeof ElTree>>();
 		const state = reactive({
 			loading: true,
 			isShowDialog: false,
@@ -98,8 +104,8 @@ export default defineComponent({
 				menuIdList: [] as any, // 菜单权限
 			},
 			ruleRules: {
-				name: [{ required: true, message: "角色名称不能为空", trigger: "blur" }],
-				code: [{ required: true, message: "角色编码不能为空", trigger: "blur" }],
+				name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
+				code: [{ required: true, message: '角色编码不能为空', trigger: 'blur' }],
 			},
 			menuData: [] as any, // 菜单数据
 		});
@@ -117,7 +123,7 @@ export default defineComponent({
 		};
 		// 关闭弹窗
 		const closeDialog = () => {
-			proxy.mittBus.emit("submitRefresh");
+			proxy.mittBus.emit('submitRefresh');
 			state.isShowDialog = false;
 		};
 		// 取消
@@ -131,20 +137,18 @@ export default defineComponent({
 				state.ruleForm.menuIdList = treeRef.value?.getCheckedKeys(); //.concat(treeRef.value?.getHalfCheckedKeys());
 				if (state.ruleForm.id != undefined && state.ruleForm.id > 0) {
 					await getAPI(SysRoleApi).sysRoleUpdatePost(state.ruleForm);
-				}
-				else {
+				} else {
 					await getAPI(SysRoleApi).sysRoleAddPost(state.ruleForm);
 				}
 				closeDialog();
-			})
+			});
 		};
 		// 叶子节点同行显示样式
 		const treeNodeClass = (node: Node) => {
 			if (node.isLeaf) return '';
 			let addClass = true;
 			for (const key in node.childNodes) {
-				if (!node.childNodes[key].isLeaf)
-					addClass = false;
+				if (!node.childNodes[key].isLeaf) addClass = false;
 			}
 			return addClass ? 'penultimate-node' : '';
 		};

vue-next-admin/src/views/system/role/component/grantData.vue

@@ -2,17 +2,14 @@
 	<div class="sys-grantData-container">
 		<el-dialog v-model="isShowDialog" width="450px">
 			<template #header>
-				<div style="font-size: large" v-drag="['.el-dialog','.el-dialog__header']">
-					授权数据范围
-				</div>
+				<div style="font-size: large" v-drag="['.el-dialog', '.el-dialog__header']">授权数据范围</div>
 			</template>
 			<el-form :model="ruleForm" size="default">
 				<el-row :gutter="35">
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl1="24" class="mb20">
 						<el-form-item prop="dataScope" label="数据范围">
 							<el-select v-model="ruleForm.dataScope" placeholder="数据范围" style="width: 100%">
-								<el-option v-for="d in dataScopeType" :key="d.value" :label="d.label"
-									:value="d.value" />
+								<el-option v-for="d in dataScopeType" :key="d.value" :label="d.label" :value="d.value" />
 							</el-select>
 						</el-form-item>
 					</el-col>
@@ -52,13 +49,20 @@ export default defineComponent({
 				dataScope: 0, // 数据范围
 				orgIdList: [] as any, // 机构集合
 			},
-			dataScopeType: [{ value: 1, label: "全部数据" }, { value: 2, label: "本部门及以下数据" }, { value: 3, label: "本部门数据" }, { value: 4, label: "仅本人数据" }, { value: 5, label: "自定义数据" }], // 数据范围类型			
+			dataScopeType: [
+				{ value: 1, label: '全部数据' },
+				{ value: 2, label: '本部门及以下数据' },
+				{ value: 3, label: '本部门数据' },
+				{ value: 4, label: '仅本人数据' },
+				{ value: 5, label: '自定义数据' },
+			], // 数据范围类型
 		});
 		// 打开弹窗
 		const openDialog = async (row: any) => {
 			state.ruleForm = row;
 			var res = await getAPI(SysRoleApi).sysRoleOwnOrgGet(row.id);
-			setTimeout(() => { // 延迟传递数据
+			setTimeout(() => {
+				// 延迟传递数据
 				orgTreeRef.value?.setCheckedKeys(res.data.result);
 			}, 100);
 			state.isShowDialog = true;
@@ -69,8 +73,7 @@ export default defineComponent({
 		};
 		// 提交
 		const submit = async () => {
-			if (state.ruleForm.dataScope === 5)
-				state.ruleForm.orgIdList = orgTreeRef.value?.getCheckedKeys();
+			if (state.ruleForm.dataScope === 5) state.ruleForm.orgIdList = orgTreeRef.value?.getCheckedKeys();
 			await getAPI(SysRoleApi).sysRoleGrantDataPost(state.ruleForm);
 			state.isShowDialog = false;
 		};
@@ -84,4 +87,3 @@ export default defineComponent({
 	},
 });
 </script>
-	

vue-next-admin/src/views/system/role/index.vue

@@ -9,24 +9,17 @@
 					<el-input placeholder="角色编码" clearable @keyup.enter="handleQuery" v-model="queryParams.code" />
 				</el-form-item>
 				<el-form-item>
-					<el-button icon="ele-Refresh" @click="resetQuery">
-						重置
-					</el-button>
-					<el-button type="primary" icon="ele-Search" @click="handleQuery">
-						查询
-					</el-button>
-					<el-button icon="ele-Plus" @click="openAddRole">
-						新增
-					</el-button>
+					<el-button icon="ele-Refresh" @click="resetQuery"> 重置 </el-button>
+					<el-button type="primary" icon="ele-Search" @click="handleQuery"> 查询 </el-button>
+					<el-button icon="ele-Plus" @click="openAddRole"> 新增 </el-button>
 				</el-form-item>
 			</el-form>
 		</el-card>
 
-		<el-card shadow="hover" style="margin-top: 8px;">
-			<el-table :data="roleData" style="width: 100%;" v-loading="loading" border>
+		<el-card shadow="hover" style="margin-top: 8px">
+			<el-table :data="roleData" style="width: 100%" v-loading="loading" border>
 				<el-table-column type="index" label="序号" width="55" align="center" fixed />
-				<el-table-column prop="name" label="角色名称" show-overflow-tooltip>
-				</el-table-column>
+				<el-table-column prop="name" label="角色名称" show-overflow-tooltip> </el-table-column>
 				<el-table-column prop="code" label="角色编码" show-overflow-tooltip></el-table-column>
 				<el-table-column label="数据范围" align="center" show-overflow-tooltip>
 					<template #default="scope">
@@ -37,8 +30,7 @@
 						<el-tag effect="plain" v-else-if="scope.row.dataScope === 5">自定义数据</el-tag>
 					</template>
 				</el-table-column>
-				<el-table-column prop="order" label="排序" width="70" align="center" show-overflow-tooltip>
-				</el-table-column>
+				<el-table-column prop="order" label="排序" width="70" align="center" show-overflow-tooltip> </el-table-column>
 				<el-table-column label="状态" width="70" align="center" show-overflow-tooltip>
 					<template #default="scope">
 						<el-tag type="success" v-if="scope.row.status === 1">启用</el-tag>
@@ -49,33 +41,34 @@
 				<el-table-column prop="remark" label="备注" show-overflow-tooltip></el-table-column>
 				<el-table-column label="操作" width="110" fixed="right" align="center" show-overflow-tooltip>
 					<template #default="scope">
-						<el-button icon="ele-Edit" size="small" text type="primary" @click="openEditRole(scope.row)">
-							编辑
-						</el-button>
+						<el-button icon="ele-Edit" size="small" text type="primary" @click="openEditRole(scope.row)"> 编辑 </el-button>
 						<el-dropdown>
-							<span style="color: var(--el-color-primary);padding-top: 6px;padding-left: 12px;">
+							<span style="color: var(--el-color-primary); padding-top: 6px; padding-left: 12px">
 								<el-icon>
 									<ele-MoreFilled />
 								</el-icon>
 							</span>
 							<template #dropdown>
 								<el-dropdown-menu>
-									<el-dropdown-item icon="ele-OfficeBuilding" @click="openGrantData(scope.row)">
-										数据范围
-									</el-dropdown-item>
-									<el-dropdown-item icon="ele-Delete" @click="delRole(scope.row)">
-										删除角色
-									</el-dropdown-item>
+									<el-dropdown-item icon="ele-OfficeBuilding" @click="openGrantData(scope.row)"> 数据范围 </el-dropdown-item>
+									<el-dropdown-item icon="ele-Delete" @click="delRole(scope.row)"> 删除角色 </el-dropdown-item>
 								</el-dropdown-menu>
 							</template>
 						</el-dropdown>
 					</template>
 				</el-table-column>
 			</el-table>
-			<el-pagination v-model:currentPage="tableParams.page" v-model:page-size="tableParams.pageSize"
-				:total="tableParams.total" :page-sizes="[10, 20, 50, 100]" small background
-				@size-change="handleSizeChange" @current-change="handleCurrentChange"
-				layout="total, sizes, prev, pager, next, jumper" />
+			<el-pagination
+				v-model:currentPage="tableParams.page"
+				v-model:page-size="tableParams.pageSize"
+				:total="tableParams.total"
+				:page-sizes="[10, 20, 50, 100]"
+				small
+				background
+				@size-change="handleSizeChange"
+				@current-change="handleCurrentChange"
+				layout="total, sizes, prev, pager, next, jumper"
+			/>
 		</el-card>
 
 		<EditRole ref="editRoleRef" :title="editRoleTitle" :ownMenuData="ownMenuData" />
@@ -111,18 +104,18 @@ export default defineComponent({
 				pageSize: 10,
 				total: 0 as any,
 			},
-			editRoleTitle: "",
+			editRoleTitle: '',
 			ownMenuData: [] as any,
 		});
 		onMounted(async () => {
 			handleQuery();
 
-			proxy.mittBus.on("submitRefresh", () => {
+			proxy.mittBus.on('submitRefresh', () => {
 				handleQuery();
 			});
 		});
 		onUnmounted(() => {
-			proxy.mittBus.off("submitRefresh");
+			proxy.mittBus.off('submitRefresh');
 		});
 		// 查询操作
 		const handleQuery = async () => {
@@ -140,12 +133,12 @@ export default defineComponent({
 		};
 		// 打开新增页面
 		const openAddRole = () => {
-			state.editRoleTitle = "添加角色";
+			state.editRoleTitle = '添加角色';
 			editRoleRef.value.openDialog({});
 		};
 		// 打开编辑页面
 		const openEditRole = async (row: any) => {
-			state.editRoleTitle = "编辑角色";
+			state.editRoleTitle = '编辑角色';
 			state.loading = true;
 			var res = await getAPI(SysRoleApi).sysRoleOwnMenuListGet(row.id);
 			state.ownMenuData = res.data.result;
@@ -164,7 +157,7 @@ export default defineComponent({
 					handleQuery();
 					ElMessage.success('删除成功');
 				})
-				.catch(() => { });
+				.catch(() => {});
 		};
 		// 分页改变
 		const handleSizeChange = (val: number) => {

vue-next-admin/src/views/system/server/index.vue

@@ -1,122 +1,122 @@
 <template>
-  <div class="sys-server-container">
-    <el-row :gutter="8">
-      <el-col :md="12" :sm="24">
-        <el-card shadow="hover" header="系统信息">
-          <table class="sysInfo_table">
-            <tr>
-              <td class="sysInfo_td">主机名称：</td>
-              <td class="sysInfo_td">{{ machineBaseInfo.hostName }}</td>
-            </tr>
-            <tr>
-              <td class="sysInfo_td">操作系统：</td>
-              <td class="sysInfo_td">{{ machineBaseInfo.systemOs }}</td>
-            </tr>
-            <tr>
-              <td class="sysInfo_td">系统架构：</td>
-              <td class="sysInfo_td">{{ machineBaseInfo.osArchitecture }}</td>
-            </tr>
-            <tr>
-              <td class="sysInfo_td">CPU核数：</td>
-              <td class="sysInfo_td">{{ machineBaseInfo.processorCount }}</td>
-            </tr>
-            <tr>
-              <td class="sysInfo_td">运行时长：</td>
-              <td class="sysInfo_td">{{ machineBaseInfo.sysRunTime }}</td>
-            </tr>
-            <tr>
-              <td class="sysInfo_td">外网地址：</td>
-              <td class="sysInfo_td">{{ machineBaseInfo.remoteIp }}</td>
-            </tr>
-            <tr>
-              <td class="sysInfo_td">内网地址：</td>
-              <td class="sysInfo_td">{{ machineBaseInfo.localIp }}</td>
-            </tr>
-            <tr>
-              <td class="sysInfo_td">运行框架：</td>
-              <td class="sysInfo_td">{{ machineBaseInfo.frameworkDescription }}</td>
-            </tr>
-          </table>
-        </el-card>
-      </el-col>
-      <el-col :md="12" :sm="24">
-        <el-card shadow="hover" header="使用信息">
-          <table class="sysInfo_table">
-            <tr>
-              <td class="sysInfo_td">启动时间：</td>
-              <td class="sysInfo_td">{{ machineUseInfo.startTime }}</td>
-            </tr>
-            <tr>
-              <td class="sysInfo_td">运行时长：</td>
-              <td class="sysInfo_td">{{ machineUseInfo.runTime }}</td>
-            </tr>
-            <tr>
-              <td class="sysInfo_td">内存总量：</td>
-              <td class="sysInfo_td">{{ machineUseInfo.totalRam }}</td>
-            </tr>
-            <tr>
-              <td class="sysInfo_td">使用内存：</td>
-              <td class="sysInfo_td">{{ machineUseInfo.usedRam }}</td>
-            </tr>
-            <tr>
-              <td class="sysInfo_td">空闲内存：</td>
-              <td class="sysInfo_td">{{ machineUseInfo.freeRam }}</td>
-            </tr>
-            <tr>
-              <td class="sysInfo_td">内存使用率：</td>
-              <td class="sysInfo_td">
-                <el-tag round>{{ machineUseInfo.ramRate }}</el-tag>
-              </td>
-            </tr>
-            <tr>
-              <td class="sysInfo_td">CPU使用率：</td>
-              <td class="sysInfo_td">
-                <el-tag round>{{ machineUseInfo.cpuRate }}</el-tag>
-              </td>
-            </tr>
-            <tr>
-              <td class="sysInfo_td">其他信息：</td>
-              <td class="sysInfo_td">{{ machineBaseInfo.environment }}</td>
-            </tr>
-          </table>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-card shadow="hover" header="程序集信息" style="margin-top: 8px;">
-      <div v-for="d in assemblyInfo" :key="d.name" style="display:inline-flex; margin:4px;">
-        <el-tag round>
-          <div style="display:inline-flex;">
-            <div style="">{{ d.name }}</div>
-            <div style="font-size:9px; color:black; margin-left: 3px;">{{ d.version }}</div>
-          </div>
-        </el-tag>
-      </div>
-    </el-card>
-    <el-card shadow="hover" header="磁盘信息" style="margin-top: 8px">
-      <el-table :data="machineDiskInfo" style="width: 100%">
-        <el-table-column prop="diskName" label="盘符">
-          <template #default="scope">
-            <el-tag round>{{ scope.row.diskName }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="typeName" label="类型" />
-        <el-table-column prop="totalSize" label="磁盘总量">
-          <template #default="scope">{{ scope.row.totalSize }} GB</template>
-        </el-table-column>
-        <el-table-column prop="used" label="已使用">
-          <template #default="scope">{{ scope.row.used }} GB</template>
-        </el-table-column>
-        <el-table-column prop="availableFreeSpace" label="剩余量">
-          <template #default="scope">{{ scope.row.availableFreeSpace }} GB</template>
-        </el-table-column>
-        <el-table-column prop="availablePercent" label="使用率">
-          <template #default="scope">
-            <el-tag>{{ scope.row.availablePercent }}%</el-tag>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-card>
-  </div>
+	<div class="sys-server-container">
+		<el-row :gutter="8">
+			<el-col :md="12" :sm="24">
+				<el-card shadow="hover" header="系统信息">
+					<table class="sysInfo_table">
+						<tr>
+							<td class="sysInfo_td">主机名称：</td>
+							<td class="sysInfo_td">{{ machineBaseInfo.hostName }}</td>
+						</tr>
+						<tr>
+							<td class="sysInfo_td">操作系统：</td>
+							<td class="sysInfo_td">{{ machineBaseInfo.systemOs }}</td>
+						</tr>
+						<tr>
+							<td class="sysInfo_td">系统架构：</td>
+							<td class="sysInfo_td">{{ machineBaseInfo.osArchitecture }}</td>
+						</tr>
+						<tr>
+							<td class="sysInfo_td">CPU核数：</td>
+							<td class="sysInfo_td">{{ machineBaseInfo.processorCount }}</td>
+						</tr>
+						<tr>
+							<td class="sysInfo_td">运行时长：</td>
+							<td class="sysInfo_td">{{ machineBaseInfo.sysRunTime }}</td>
+						</tr>
+						<tr>
+							<td class="sysInfo_td">外网地址：</td>
+							<td class="sysInfo_td">{{ machineBaseInfo.remoteIp }}</td>
+						</tr>
+						<tr>
+							<td class="sysInfo_td">内网地址：</td>
+							<td class="sysInfo_td">{{ machineBaseInfo.localIp }}</td>
+						</tr>
+						<tr>
+							<td class="sysInfo_td">运行框架：</td>
+							<td class="sysInfo_td">{{ machineBaseInfo.frameworkDescription }}</td>
+						</tr>
+					</table>
+				</el-card>
+			</el-col>
+			<el-col :md="12" :sm="24">
+				<el-card shadow="hover" header="使用信息">
+					<table class="sysInfo_table">
+						<tr>
+							<td class="sysInfo_td">启动时间：</td>
+							<td class="sysInfo_td">{{ machineUseInfo.startTime }}</td>
+						</tr>
+						<tr>
+							<td class="sysInfo_td">运行时长：</td>
+							<td class="sysInfo_td">{{ machineUseInfo.runTime }}</td>
+						</tr>
+						<tr>
+							<td class="sysInfo_td">内存总量：</td>
+							<td class="sysInfo_td">{{ machineUseInfo.totalRam }}</td>
+						</tr>
+						<tr>
+							<td class="sysInfo_td">使用内存：</td>
+							<td class="sysInfo_td">{{ machineUseInfo.usedRam }}</td>
+						</tr>
+						<tr>
+							<td class="sysInfo_td">空闲内存：</td>
+							<td class="sysInfo_td">{{ machineUseInfo.freeRam }}</td>
+						</tr>
+						<tr>
+							<td class="sysInfo_td">内存使用率：</td>
+							<td class="sysInfo_td">
+								<el-tag round>{{ machineUseInfo.ramRate }}</el-tag>
+							</td>
+						</tr>
+						<tr>
+							<td class="sysInfo_td">CPU使用率：</td>
+							<td class="sysInfo_td">
+								<el-tag round>{{ machineUseInfo.cpuRate }}</el-tag>
+							</td>
+						</tr>
+						<tr>
+							<td class="sysInfo_td">其他信息：</td>
+							<td class="sysInfo_td">{{ machineBaseInfo.environment }}</td>
+						</tr>
+					</table>
+				</el-card>
+			</el-col>
+		</el-row>
+		<el-card shadow="hover" header="程序集信息" style="margin-top: 8px">
+			<div v-for="d in assemblyInfo" :key="d.name" style="display: inline-flex; margin: 4px">
+				<el-tag round>
+					<div style="display: inline-flex">
+						<div style="">{{ d.name }}</div>
+						<div style="font-size: 9px; color: black; margin-left: 3px">{{ d.version }}</div>
+					</div>
+				</el-tag>
+			</div>
+		</el-card>
+		<el-card shadow="hover" header="磁盘信息" style="margin-top: 8px">
+			<el-table :data="machineDiskInfo" style="width: 100%">
+				<el-table-column prop="diskName" label="盘符">
+					<template #default="scope">
+						<el-tag round>{{ scope.row.diskName }}</el-tag>
+					</template>
+				</el-table-column>
+				<el-table-column prop="typeName" label="类型" />
+				<el-table-column prop="totalSize" label="磁盘总量">
+					<template #default="scope">{{ scope.row.totalSize }} GB</template>
+				</el-table-column>
+				<el-table-column prop="used" label="已使用">
+					<template #default="scope">{{ scope.row.used }} GB</template>
+				</el-table-column>
+				<el-table-column prop="availableFreeSpace" label="剩余量">
+					<template #default="scope">{{ scope.row.availableFreeSpace }} GB</template>
+				</el-table-column>
+				<el-table-column prop="availablePercent" label="使用率">
+					<template #default="scope">
+						<el-tag>{{ scope.row.availablePercent }}%</el-tag>
+					</template>
+				</el-table-column>
+			</el-table>
+		</el-card>
+	</div>
 </template>
 
 <script lang="ts">
@@ -126,213 +126,213 @@ import { getAPI } from '/@/utils/axios-utils';
 import { SysServerApi } from '/@/api-services';
 
 export default defineComponent({
-  name: 'sysServer',
-  components: {},
-  setup() {
-    const state = reactive({
-      loading: true,
-      machineBaseInfo: [] as any,
-      machineUseInfo: [] as any,
-      machineDiskInfo: [] as any,
-      assemblyInfo: [] as any,
-      timer: null as any,
-    });
-    onMounted(async () => {
-      state.loading = true;
-      loadMachineBaseInfo();
-      loadMachineUseInfo();
-      loadMachineDiskInfo();
-      loadAssemblyInfo();
-      state.loading = false;
-    });
-    // 服务器配置信息
-    const loadMachineBaseInfo = async () => {
-      var res = await getAPI(SysServerApi).serverBaseGet();
-      state.machineBaseInfo = res.data.result;
-    };
-    // 服务器内存信息
-    const loadMachineUseInfo = async () => {
-      var res = await getAPI(SysServerApi).serverUseGet();
-      state.machineUseInfo = res.data.result;
-    };
-    // 服务器磁盘信息
-    const loadMachineDiskInfo = async () => {
-      var res = await getAPI(SysServerApi).serverDiskGet();
-      state.machineDiskInfo = res.data.result;
-    };
-    // 框架程序集信息
-    const loadAssemblyInfo = async () => {
-      var res = await getAPI(SysServerApi).serverAssemblyGet();
-      state.assemblyInfo = res.data.result;
-    };
-    // 实时刷新内存
-    const refreshData = () => {
-      loadMachineUseInfo();
-    };
-    onActivated(() => {
-      state.timer = setInterval(() => {
-        refreshData();
-      }, 5000);
-    });
-    onDeactivated(() => {
-      clearInterval(state.timer);
-    });
-
-    return {
-      loadMachineBaseInfo,
-      loadMachineUseInfo,
-      loadMachineDiskInfo,
-      loadAssemblyInfo,
-      refreshData,
-      ...toRefs(state),
-    };
-  },
+	name: 'sysServer',
+	components: {},
+	setup() {
+		const state = reactive({
+			loading: true,
+			machineBaseInfo: [] as any,
+			machineUseInfo: [] as any,
+			machineDiskInfo: [] as any,
+			assemblyInfo: [] as any,
+			timer: null as any,
+		});
+		onMounted(async () => {
+			state.loading = true;
+			loadMachineBaseInfo();
+			loadMachineUseInfo();
+			loadMachineDiskInfo();
+			loadAssemblyInfo();
+			state.loading = false;
+		});
+		// 服务器配置信息
+		const loadMachineBaseInfo = async () => {
+			var res = await getAPI(SysServerApi).serverBaseGet();
+			state.machineBaseInfo = res.data.result;
+		};
+		// 服务器内存信息
+		const loadMachineUseInfo = async () => {
+			var res = await getAPI(SysServerApi).serverUseGet();
+			state.machineUseInfo = res.data.result;
+		};
+		// 服务器磁盘信息
+		const loadMachineDiskInfo = async () => {
+			var res = await getAPI(SysServerApi).serverDiskGet();
+			state.machineDiskInfo = res.data.result;
+		};
+		// 框架程序集信息
+		const loadAssemblyInfo = async () => {
+			var res = await getAPI(SysServerApi).serverAssemblyGet();
+			state.assemblyInfo = res.data.result;
+		};
+		// 实时刷新内存
+		const refreshData = () => {
+			loadMachineUseInfo();
+		};
+		onActivated(() => {
+			state.timer = setInterval(() => {
+				refreshData();
+			}, 5000);
+		});
+		onDeactivated(() => {
+			clearInterval(state.timer);
+		});
+
+		return {
+			loadMachineBaseInfo,
+			loadMachineUseInfo,
+			loadMachineDiskInfo,
+			loadAssemblyInfo,
+			refreshData,
+			...toRefs(state),
+		};
+	},
 });
 </script>
 
 <style lang="scss">
 .sysInfo_table {
-  width: 100%;
-  min-height: 40px;
-  line-height: 40px;
-  text-align: center;
+	width: 100%;
+	min-height: 40px;
+	line-height: 40px;
+	text-align: center;
 }
 
 .sysInfo_td {
-  border-bottom: 1px solid #e8e8e8;
+	border-bottom: 1px solid #e8e8e8;
 }
 
 .waterfall-last {
-  display: grid;
-  grid-gap: 0.25em;
-  grid-auto-flow: row dense;
-  grid-auto-rows: minmax(188px, 20vmin);
-  grid-template-columns: 1fr;
-
-  .waterfall-last-item {
-    height: 100%;
-    background: var(--el-color-primary);
-    color: var(--el-color-white);
-    transition: all 0.3s ease;
-    border-radius: 3px;
-
-    &:hover {
-      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
-      transition: all 0.3s ease;
-      cursor: pointer;
-    }
-  }
+	display: grid;
+	grid-gap: 0.25em;
+	grid-auto-flow: row dense;
+	grid-auto-rows: minmax(188px, 20vmin);
+	grid-template-columns: 1fr;
+
+	.waterfall-last-item {
+		height: 100%;
+		background: var(--el-color-primary);
+		color: var(--el-color-white);
+		transition: all 0.3s ease;
+		border-radius: 3px;
+
+		&:hover {
+			box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+			transition: all 0.3s ease;
+			cursor: pointer;
+		}
+	}
 }
 
 @media (min-width: 576px) {
-  .waterfall-last {
-    grid-template-columns: repeat(7, 1fr);
-
-    .waterfall-last-item {
-      &:nth-of-type(9n + 9) {
-        grid-column: auto / span 2;
-      }
-
-      &:nth-of-type(9n + 8) {
-        grid-column: auto / span 2;
-      }
-
-      &:nth-of-type(9n + 7) {
-        grid-column: auto / span 3;
-      }
-
-      &:nth-of-type(9n + 6) {
-        grid-column: auto / span 2;
-      }
-
-      &:nth-of-type(9n + 5) {
-        grid-column: auto / span 3;
-      }
-
-      &:nth-of-type(9n + 4) {
-        grid-column: auto / span 2;
-      }
-
-      &:nth-of-type(9n + 3) {
-        grid-column: auto / span 3;
-      }
-
-      &:nth-of-type(9n + 2) {
-        grid-column: auto / span 2;
-      }
-
-      &:nth-of-type(9n + 1) {
-        grid-column: auto / span 2;
-      }
-    }
-  }
+	.waterfall-last {
+		grid-template-columns: repeat(7, 1fr);
+
+		.waterfall-last-item {
+			&:nth-of-type(9n + 9) {
+				grid-column: auto / span 2;
+			}
+
+			&:nth-of-type(9n + 8) {
+				grid-column: auto / span 2;
+			}
+
+			&:nth-of-type(9n + 7) {
+				grid-column: auto / span 3;
+			}
+
+			&:nth-of-type(9n + 6) {
+				grid-column: auto / span 2;
+			}
+
+			&:nth-of-type(9n + 5) {
+				grid-column: auto / span 3;
+			}
+
+			&:nth-of-type(9n + 4) {
+				grid-column: auto / span 2;
+			}
+
+			&:nth-of-type(9n + 3) {
+				grid-column: auto / span 3;
+			}
+
+			&:nth-of-type(9n + 2) {
+				grid-column: auto / span 2;
+			}
+
+			&:nth-of-type(9n + 1) {
+				grid-column: auto / span 2;
+			}
+		}
+	}
 }
 
 @media (min-width: 576px) and (min-width: 1024px) {
-  .waterfall-last {
-    grid-template-columns: repeat(14, 1fr);
-
-    .waterfall-last-item {
-      &:nth-of-type(15n + 15) {
-        grid-column: auto / span 3;
-      }
-
-      &:nth-of-type(15n + 14) {
-        grid-column: auto / span 3;
-      }
-
-      &:nth-of-type(15n + 13) {
-        grid-column: auto / span 2;
-      }
-
-      &:nth-of-type(15n + 12) {
-        grid-column: auto / span 3;
-      }
-
-      &:nth-of-type(15n + 11) {
-        grid-column: auto / span 3;
-      }
-
-      &:nth-of-type(15n + 10) {
-        grid-column: auto / span 2;
-      }
-
-      &:nth-of-type(15n + 9) {
-        grid-column: auto / span 3;
-      }
-
-      &:nth-of-type(15n + 8) {
-        grid-column: auto / span 3;
-      }
-
-      &:nth-of-type(15n + 7) {
-        grid-column: auto / span 3;
-      }
-
-      &:nth-of-type(15n + 6) {
-        grid-column: auto / span 3;
-      }
-
-      &:nth-of-type(15n + 5) {
-        grid-column: auto / span 3;
-      }
-
-      &:nth-of-type(15n + 4) {
-        grid-column: auto / span 3;
-      }
-
-      &:nth-of-type(15n + 3) {
-        grid-column: auto / span 3;
-      }
-
-      &:nth-of-type(15n + 2) {
-        grid-column: auto / span 3;
-      }
-
-      &:nth-of-type(15n + 1) {
-        grid-column: auto / span 2;
-      }
-    }
-  }
+	.waterfall-last {
+		grid-template-columns: repeat(14, 1fr);
+
+		.waterfall-last-item {
+			&:nth-of-type(15n + 15) {
+				grid-column: auto / span 3;
+			}
+
+			&:nth-of-type(15n + 14) {
+				grid-column: auto / span 3;
+			}
+
+			&:nth-of-type(15n + 13) {
+				grid-column: auto / span 2;
+			}
+
+			&:nth-of-type(15n + 12) {
+				grid-column: auto / span 3;
+			}
+
+			&:nth-of-type(15n + 11) {
+				grid-column: auto / span 3;
+			}
+
+			&:nth-of-type(15n + 10) {
+				grid-column: auto / span 2;
+			}
+
+			&:nth-of-type(15n + 9) {
+				grid-column: auto / span 3;
+			}
+
+			&:nth-of-type(15n + 8) {
+				grid-column: auto / span 3;
+			}
+
+			&:nth-of-type(15n + 7) {
+				grid-column: auto / span 3;
+			}
+
+			&:nth-of-type(15n + 6) {
+				grid-column: auto / span 3;
+			}
+
+			&:nth-of-type(15n + 5) {
+				grid-column: auto / span 3;
+			}
+
+			&:nth-of-type(15n + 4) {
+				grid-column: auto / span 3;
+			}
+
+			&:nth-of-type(15n + 3) {
+				grid-column: auto / span 3;
+			}
+
+			&:nth-of-type(15n + 2) {
+				grid-column: auto / span 3;
+			}
+
+			&:nth-of-type(15n + 1) {
+				grid-column: auto / span 2;
+			}
+		}
+	}
 }
 </style>

vue-next-admin/src/views/system/user/component/editUser.vue

@@ -2,7 +2,7 @@
 	<div class="sys-user-container">
 		<el-dialog v-model="isShowDialog" width="769px">
 			<template #header>
-				<div style="font-size: large" v-drag="['.el-dialog','.el-dialog__header']">
+				<div style="font-size: large" v-drag="['.el-dialog', '.el-dialog__header']">
 					{{ title }}
 				</div>
 			</template>
@@ -30,8 +30,7 @@
 					</el-col>
 					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
 						<el-form-item label="出生日期" prop="birthday">
-							<el-date-picker v-model="ruleForm.birthday" type="date" placeholder="出生日期"
-								format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 100%" />
+							<el-date-picker v-model="ruleForm.birthday" type="date" placeholder="出生日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 100%" />
 						</el-form-item>
 					</el-col>
 					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
@@ -54,10 +53,8 @@
 					</el-col>
 					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
 						<el-form-item label="角色" prop="roleIdList">
-							<el-select v-model="ruleForm.roleIdList" multiple value-key="id" clearable
-								placeholder="拥有角色" collapse-tags collapse-tags-tooltip class="w100" filterable>
-								<el-option v-for="item in roleData" :key="item.id" :label="item.name"
-									:value="item.id" />
+							<el-select v-model="ruleForm.roleIdList" multiple value-key="id" clearable placeholder="拥有角色" collapse-tags collapse-tags-tooltip class="w100" filterable>
+								<el-option v-for="item in roleData" :key="item.id" :label="item.name" :value="item.id" />
 							</el-select>
 						</el-form-item>
 					</el-col>
@@ -71,8 +68,7 @@
 					</el-divider>
 					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
 						<el-form-item label="所属机构" prop="orgId">
-							<el-cascader :options="orgData" :props="{ checkStrictly: true, value: 'id', label: 'name' }"
-								placeholder="所属机构" clearable class="w100" v-model="ruleForm.orgId">
+							<el-cascader :options="orgData" :props="{ checkStrictly: true, value: 'id', label: 'name' }" placeholder="所属机构" clearable class="w100" v-model="ruleForm.orgId">
 								<template #default="{ node, data }">
 									<span>{{ data.name }}</span>
 									<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
@@ -95,8 +91,7 @@
 					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
 						<el-form-item label="岗位状态" prop="jobStatus">
 							<el-select v-model="ruleForm.jobStatus" placeholder="岗位状态" style="width: 100%">
-								<el-option v-for="dict in jobStatusType" :key="dict.value" :label="dict.label"
-									:value="dict.value" />
+								<el-option v-for="dict in jobStatusType" :key="dict.value" :label="dict.label" :value="dict.value" />
 							</el-select>
 						</el-form-item>
 					</el-col>
@@ -112,8 +107,7 @@
 					</el-col> -->
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
 						<el-form-item label="备注">
-							<el-input v-model="ruleForm.remark" placeholder="请输入备注内容" clearable type="textarea">
-							</el-input>
+							<el-input v-model="ruleForm.remark" placeholder="请输入备注内容" clearable type="textarea"> </el-input>
 						</el-form-item>
 					</el-col>
 				</el-row>
@@ -141,13 +135,13 @@ export default defineComponent({
 		// 弹窗标题
 		title: {
 			type: String,
-			default: "",
+			default: '',
 		},
 		// 机构数据
 		orgData: {
 			type: Array,
 			default: () => [],
-		}
+		},
 	},
 	setup() {
 		const { proxy } = getCurrentInstance() as any;
@@ -174,17 +168,22 @@ export default defineComponent({
 				remark: '', // 备注
 				roleIdList: [] as any, // 角色
 			},
-			jobStatusType: [{ value: 1, label: "在职" }, { value: 2, label: "离职" }, { value: 3, label: "请假" }, { value: 4, label: "其他" }], // 岗位状态
+			jobStatusType: [
+				{ value: 1, label: '在职' },
+				{ value: 2, label: '离职' },
+				{ value: 3, label: '请假' },
+				{ value: 4, label: '其他' },
+			], // 岗位状态
 			posData: [] as any, // 职位数据
 			roleData: [] as any, // 角色数据
 			ruleRules: {
-				userName: [{ required: true, message: "账号名称不能为空", trigger: "blur" }],
-				phone: [{ required: true, message: "手机号码不能为空", trigger: "blur" }],
-				realName: [{ required: true, message: "真实姓名不能为空", trigger: "blur" }],
-				birthday: [{ required: true, message: "出生日期不能为空", trigger: "blur" }],
-				roleIdList: [{ required: true, message: "拥有角色不能为空", trigger: "blur" }],
-				orgId: [{ required: true, message: "所属机构不能为空", trigger: "blur" }],
-				posId: [{ required: true, message: "职位名称不能为空", trigger: "blur" }],
+				userName: [{ required: true, message: '账号名称不能为空', trigger: 'blur' }],
+				phone: [{ required: true, message: '手机号码不能为空', trigger: 'blur' }],
+				realName: [{ required: true, message: '真实姓名不能为空', trigger: 'blur' }],
+				birthday: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
+				roleIdList: [{ required: true, message: '拥有角色不能为空', trigger: 'blur' }],
+				orgId: [{ required: true, message: '所属机构不能为空', trigger: 'blur' }],
+				posId: [{ required: true, message: '职位名称不能为空', trigger: 'blur' }],
 			},
 		});
 		onMounted(async () => {
@@ -196,17 +195,15 @@ export default defineComponent({
 		// 打开弹窗
 		const openDialog = async (row: any) => {
 			state.ruleForm = row;
-			if (JSON.stringify(row) !== "{}") {
+			if (JSON.stringify(row) !== '{}') {
 				var res = await getAPI(SysUserApi).sysUserOwnRoleGet(row.id);
 				state.ruleForm.roleIdList = res.data.result;
 				state.isShowDialog = true;
-			}
-			else
-				state.isShowDialog = true;
+			} else state.isShowDialog = true;
 		};
 		// 关闭弹窗
 		const closeDialog = () => {
-			proxy.mittBus.emit("submitRefresh");
+			proxy.mittBus.emit('submitRefresh');
 			state.isShowDialog = false;
 		};
 		// 取消
@@ -216,18 +213,16 @@ export default defineComponent({
 		// 提交
 		const submit = () => {
 			// 所属机构Id
-			if (Array.isArray(state.ruleForm.orgId))
-				state.ruleForm.orgId = state.ruleForm.orgId[state.ruleForm.orgId.length - 1];
+			if (Array.isArray(state.ruleForm.orgId)) state.ruleForm.orgId = state.ruleForm.orgId[state.ruleForm.orgId.length - 1];
 			ruleFormRef.value.validate(async (valid: boolean) => {
 				if (!valid) return;
 				if (state.ruleForm.id != undefined && state.ruleForm.id > 0) {
 					await getAPI(SysUserApi).sysUserUpdatePost(state.ruleForm);
-				}
-				else {
+				} else {
 					await getAPI(SysUserApi).sysUserAddPost(state.ruleForm);
 				}
 				closeDialog();
-			})
+			});
 		};
 		return {
 			ruleFormRef,
@@ -240,4 +235,3 @@ export default defineComponent({
 	},
 });
 </script>
-	

vue-next-admin/src/views/system/user/component/grantOrg.vue

@@ -2,9 +2,7 @@
 	<div class="sys-grantOrg-container">
 		<el-dialog v-model="isShowDialog" width="450px">
 			<template #header>
-				<div style="font-size: large" v-drag="['.el-dialog','.el-dialog__header']">
-					授权数据范围
-				</div>
+				<div style="font-size: large" v-drag="['.el-dialog', '.el-dialog__header']">授权数据范围</div>
 			</template>
 			<el-form :model="ruleForm" size="default" label-width="80px">
 				<el-row :gutter="35">
@@ -49,7 +47,8 @@ export default defineComponent({
 		const openDialog = async (row: any) => {
 			state.ruleForm = row;
 			var res = await getAPI(SysUserApi).sysUserOwnOrgGet(row.id);
-			setTimeout(() => { // 延迟传递数据
+			setTimeout(() => {
+				// 延迟传递数据
 				orgTreeRef.value?.setCheckedKeys(res.data.result);
 			}, 100);
 			state.isShowDialog = true;
@@ -74,4 +73,3 @@ export default defineComponent({
 	},
 });
 </script>
-	

vue-next-admin/src/views/system/user/index.vue

@@ -1,49 +1,40 @@
 <template>
 	<div class="sys-user-container">
-		<el-row :gutter="8" style="width:100%">
+		<el-row :gutter="8" style="width: 100%">
 			<el-col :span="4" :xs="24">
-				<OrgTree ref="orgTreeRef" @node-click='nodeClick' />
+				<OrgTree ref="orgTreeRef" @node-click="nodeClick" />
 			</el-col>
 
 			<el-col :span="20" :xs="24">
 				<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
 					<el-form :model="queryParams" ref="queryForm" :inline="true">
 						<el-form-item label="账号名称" prop="name">
-							<el-input placeholder="账号名称" clearable @keyup.enter="handleQuery"
-								v-model="queryParams.userName" />
+							<el-input placeholder="账号名称" clearable @keyup.enter="handleQuery" v-model="queryParams.userName" />
 						</el-form-item>
 						<el-form-item label="手机号码" prop="code">
-							<el-input placeholder="手机号码" clearable @keyup.enter="handleQuery"
-								v-model="queryParams.phone" />
+							<el-input placeholder="手机号码" clearable @keyup.enter="handleQuery" v-model="queryParams.phone" />
 						</el-form-item>
 						<el-form-item>
-							<el-button icon="ele-Refresh" @click="resetQuery">
-								重置
-							</el-button>
-							<el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'sysUser:page'">
-								查询
-							</el-button>
-							<el-button icon="ele-Plus" @click="openAddUser" v-auth="'sysUser:add'">
-								新增
-							</el-button>
+							<el-button icon="ele-Refresh" @click="resetQuery"> 重置 </el-button>
+							<el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'sysUser:page'"> 查询 </el-button>
+							<el-button icon="ele-Plus" @click="openAddUser" v-auth="'sysUser:add'"> 新增 </el-button>
 						</el-form-item>
 					</el-form>
 				</el-card>
 
-				<el-card shadow="hover" style="margin-top: 8px;">
-					<el-table :data="userData" style="width: 100%;" v-loading="loading" border>
+				<el-card shadow="hover" style="margin-top: 8px">
+					<el-table :data="userData" style="width: 100%" v-loading="loading" border>
 						<el-table-column type="index" label="序号" width="55" align="center" fixed />
-						<el-table-column prop="userName" label="账号名称" width="120" fixed show-overflow-tooltip>
-						</el-table-column>
+						<el-table-column prop="userName" label="账号名称" width="120" fixed show-overflow-tooltip> </el-table-column>
 						<el-table-column prop="nickName" label="昵称" width="120" show-overflow-tooltip></el-table-column>
 						<el-table-column label="头像" width="80" align="center" show-overflow-tooltip>
 							<template #default="scope">
-								<el-avatar src="" size="small">{{scope.row.userName}} </el-avatar>
+								<el-avatar src="" size="small">{{ scope.row.userName }} </el-avatar>
 							</template>
 						</el-table-column>
 						<el-table-column label="出生日期" width="100" align="center" show-overflow-tooltip>
 							<template #default="scope">
-								{{formatDate(new Date(scope.row.birthday), 'YYYY-mm-dd')}}
+								{{ formatDate(new Date(scope.row.birthday), 'YYYY-mm-dd') }}
 							</template>
 						</el-table-column>
 						<el-table-column label="性别" width="70" align="center" show-overflow-tooltip>
@@ -52,58 +43,50 @@
 								<el-tag type="danger" v-else>女</el-tag>
 							</template>
 						</el-table-column>
-						<el-table-column prop="phone" label="手机号码" width="120" align="center" show-overflow-tooltip>
-						</el-table-column>
-						<el-table-column prop="realName" label="真实姓名" width="120" show-overflow-tooltip>
-						</el-table-column>
+						<el-table-column prop="phone" label="手机号码" width="120" align="center" show-overflow-tooltip> </el-table-column>
+						<el-table-column prop="realName" label="真实姓名" width="120" show-overflow-tooltip> </el-table-column>
 						<el-table-column prop="idCard" label="证件号码" width="150" show-overflow-tooltip></el-table-column>
 						<el-table-column label="状态" width="70" align="center" show-overflow-tooltip>
 							<template #default="scope">
-								<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" size="small"
-									@change="changeStatus(scope.row)" v-auth="'sysUser:setStatus'">
-								</el-switch>
+								<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" size="small" @change="changeStatus(scope.row)" v-auth="'sysUser:setStatus'" />
 							</template>
 						</el-table-column>
-						<el-table-column prop="order" label="排序" width="70" align="center" show-overflow-tooltip>
-						</el-table-column>
-						<el-table-column prop="createTime" label="修改时间" width="160" show-overflow-tooltip>
-						</el-table-column>
+						<el-table-column prop="order" label="排序" width="70" align="center" show-overflow-tooltip> </el-table-column>
+						<el-table-column prop="createTime" label="修改时间" width="160" show-overflow-tooltip> </el-table-column>
 						<el-table-column prop="remark" label="备注" width="200" show-overflow-tooltip></el-table-column>
 						<el-table-column label="操作" width="110" align="center" fixed="right" show-overflow-tooltip>
 							<template #default="scope">
 								<el-tooltip content="用户编辑">
-									<el-button icon="ele-Edit" size="small" text type="primary"
-										@click="openEditUser(scope.row)" v-auth="'sysUser:update'">编辑
-									</el-button>
+									<el-button icon="ele-Edit" size="small" text type="primary" @click="openEditUser(scope.row)" v-auth="'sysUser:update'">编辑 </el-button>
 								</el-tooltip>
 								<el-dropdown>
-									<span style="color: var(--el-color-primary);padding-top: 6px;padding-left: 12px;">
+									<span style="color: var(--el-color-primary); padding-top: 6px; padding-left: 12px">
 										<el-icon>
 											<ele-MoreFilled />
 										</el-icon>
 									</span>
 									<template #dropdown>
 										<el-dropdown-menu>
-											<el-dropdown-item icon="ele-OfficeBuilding" @click="openGrantOrg(scope.row)"
-												v-auth="'sysUser:grantData'">数据范围
-											</el-dropdown-item>
-											<el-dropdown-item icon="ele-RefreshLeft" @click="resetUserPwd(scope.row)"
-												v-auth="'sysUser:resetPwd'">重置密码
-											</el-dropdown-item>
-											<el-dropdown-item icon="ele-Delete" @click="delUser(scope.row)"
-												v-auth="'sysUser:delete'">
-												删除账号
-											</el-dropdown-item>
+											<el-dropdown-item icon="ele-OfficeBuilding" @click="openGrantOrg(scope.row)" v-auth="'sysUser:grantData'">数据范围 </el-dropdown-item>
+											<el-dropdown-item icon="ele-RefreshLeft" @click="resetUserPwd(scope.row)" v-auth="'sysUser:resetPwd'">重置密码 </el-dropdown-item>
+											<el-dropdown-item icon="ele-Delete" @click="delUser(scope.row)" v-auth="'sysUser:delete'"> 删除账号 </el-dropdown-item>
 										</el-dropdown-menu>
 									</template>
 								</el-dropdown>
 							</template>
 						</el-table-column>
 					</el-table>
-					<el-pagination v-model:currentPage="tableParams.page" v-model:page-size="tableParams.pageSize"
-						:total="tableParams.total" :page-sizes="[10, 20, 50, 100]" small background
-						@size-change="handleSizeChange" @current-change="handleCurrentChange"
-						layout="total, sizes, prev, pager, next, jumper" />
+					<el-pagination
+						v-model:currentPage="tableParams.page"
+						v-model:page-size="tableParams.pageSize"
+						:total="tableParams.total"
+						:page-sizes="[10, 20, 50, 100]"
+						small
+						background
+						@size-change="handleSizeChange"
+						@current-change="handleCurrentChange"
+						layout="total, sizes, prev, pager, next, jumper"
+					/>
 				</el-card>
 			</el-col>
 		</el-row>
@@ -128,7 +111,7 @@ export default defineComponent({
 	components: { OrgTree, EditUser, GrantOrg },
 	setup() {
 		const { proxy } = getCurrentInstance() as any;
-		const orgTreeRef = ref()
+		const orgTreeRef = ref();
 		const editUserRef = ref();
 		const grantOrgRef = ref();
 		const state = reactive({
@@ -139,25 +122,24 @@ export default defineComponent({
 				orgId: -1,
 				userName: undefined,
 				phone: undefined,
-
 			},
 			tableParams: {
 				page: 1,
 				pageSize: 10,
 				total: 0 as any,
 			},
-			editUserTitle: "",
+			editUserTitle: '',
 		});
 		onMounted(async () => {
 			loadOrgData();
 			handleQuery();
 
-			proxy.mittBus.on("submitRefresh", () => {
+			proxy.mittBus.on('submitRefresh', () => {
 				handleQuery();
 			});
 		});
 		onUnmounted(() => {
-			proxy.mittBus.off("submitRefresh");
+			proxy.mittBus.off('submitRefresh');
 		});
 		// 查询机构数据(可以从机构组件里面获取)
 		const loadOrgData = async () => {
@@ -169,8 +151,7 @@ export default defineComponent({
 		// 查询操作
 		const handleQuery = async () => {
 			state.loading = true;
-			var res = await getAPI(SysUserApi).sysUserPageGet(state.queryParams.userName, state.queryParams.phone,
-				state.queryParams.orgId, state.tableParams.page, state.tableParams.pageSize);
+			var res = await getAPI(SysUserApi).sysUserPageGet(state.queryParams.userName, state.queryParams.phone, state.queryParams.orgId, state.tableParams.page, state.tableParams.pageSize);
 			state.userData = res.data.result?.items;
 			state.tableParams.total = res.data.result?.total;
 			state.loading = false;
@@ -184,12 +165,12 @@ export default defineComponent({
 		};
 		// 打开新增页面
 		const openAddUser = () => {
-			state.editUserTitle = "添加账号";
+			state.editUserTitle = '添加账号';
 			editUserRef.value.openDialog({});
 		};
 		// 打开编辑页面
 		const openEditUser = (row: any) => {
-			state.editUserTitle = "编辑账号";
+			state.editUserTitle = '编辑账号';
 			editUserRef.value.openDialog(row);
 		};
 		// 删除
@@ -204,7 +185,7 @@ export default defineComponent({
 					handleQuery();
 					ElMessage.success('删除成功');
 				})
-				.catch(() => { });
+				.catch(() => {});
 		};
 		// 分页改变
 		const handleSizeChange = (val: number) => {
@@ -219,7 +200,7 @@ export default defineComponent({
 		// 修改状态
 		const changeStatus = async (row: any) => {
 			await getAPI(SysUserApi).sysUserSetStatusPost({ id: row.id, status: row.status });
-		}
+		};
 		// 打开授权数据范围页面
 		const openGrantOrg = (row: any) => {
 			grantOrgRef.value.openDialog(row);
@@ -235,8 +216,8 @@ export default defineComponent({
 					await getAPI(SysUserApi).sysUserResetPwdPost({ id: row.id });
 					ElMessage.success('密码重置成功：123456');
 				})
-				.catch(() => { });
-		}
+				.catch(() => {});
+		};
 		// 树组件点击
 		const nodeClick = async (node: any) => {
 			state.queryParams.orgId = node.id;