From abd51015c7c1c276067c330a917ac10ffe2486f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E8=AF=BA?= <1253070437@qq.com>
Date: Thu, 10 Aug 2023 01:36:01 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E6=9B=B4=E6=96=B0=E3=80=91=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E4=BA=BA=E5=91=98=E3=80=81=E6=9C=BA=E6=9E=84=E3=80=81?=
 =?UTF-8?q?=E8=81=8C=E4=BD=8D=E3=80=81=E8=A7=92=E8=89=B2=E7=9A=84=E5=89=8D?=
 =?UTF-8?q?=E7=AB=AF=E4=BB=A3=E7=A0=81=EF=BC=8C=E8=A7=A3=E5=86=B3=E5=B7=A6?=
 =?UTF-8?q?=E4=BE=A7=E6=A0=91=E7=82=B9=E5=87=BB=E5=A4=9A=E6=AC=A1=E5=90=8E?=
 =?UTF-8?q?=E6=97=A0=E6=B3=95=E6=8A=98=E5=8F=A0=E5=B1=95=E5=BC=80=E7=9A=84?=
 =?UTF-8?q?=E6=83=85=E5=86=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 snowy-admin-web/src/views/biz/org/index.vue   | 46 ++++++------
 .../src/views/biz/position/index.vue          | 45 +++++------
 snowy-admin-web/src/views/biz/user/index.vue  | 67 ++++++++---------
 snowy-admin-web/src/views/sys/org/index.vue   | 56 +++++++-------
 .../src/views/sys/position/index.vue          | 44 ++++++-----
 snowy-admin-web/src/views/sys/role/index.vue  | 74 ++++++++++---------
 snowy-admin-web/src/views/sys/user/index.vue  | 69 ++++++++---------
 7 files changed, 212 insertions(+), 189 deletions(-)

diff --git a/snowy-admin-web/src/views/biz/org/index.vue b/snowy-admin-web/src/views/biz/org/index.vue
index d9489e05..41f9aa27 100644
--- a/snowy-admin-web/src/views/biz/org/index.vue
+++ b/snowy-admin-web/src/views/biz/org/index.vue
@@ -80,11 +80,12 @@
 			</a-card>
 		</a-col>
 	</a-row>
-	<Form ref="form" @successful="table.refresh(true)" />
+	<Form ref="form" @successful="table.refresh()" />
 </template>
 
 <script setup name="bizOrg">
 	import { Empty } from 'ant-design-vue'
+	import { isEmpty } from 'lodash-es'
 	import bizOrgApi from '@/api/biz/bizOrgApi'
 	import Form from './form.vue'
 
@@ -99,7 +100,8 @@
 		},
 		{
 			title: '排序',
-			dataIndex: 'sortCode'
+			dataIndex: 'sortCode',
+			width: 100
 		}
 	]
 	if (hasPerm(['bizOrgEdit', 'bizOrgDelete'])) {
@@ -110,13 +112,13 @@
 			width: '150px'
 		})
 	}
-	let selectedRowKeys = ref([])
+	const selectedRowKeys = ref([])
 	// 列表选择配置
 	const options = {
 		alert: {
 			show: false,
 			clear: () => {
-				selectedRowKeys = ref([])
+				selectedRowKeys.value = ref([])
 			}
 		},
 		rowSelection: {
@@ -130,9 +132,9 @@
 	const table = ref(null)
 	const form = ref()
 	const searchFormRef = ref()
-	let searchFormState = reactive({})
+	const searchFormState = ref({})
 	// 默认展开的节点
-	let defaultExpandedKeys = ref([])
+	const defaultExpandedKeys = ref([])
 	const treeData = ref([])
 	// 替换treeNode 中 title,key,children
 	const treeFieldNames = { children: 'children', title: 'name', key: 'id' }
@@ -141,7 +143,7 @@
 	// 表格查询 返回 Promise 对象
 	const loadData = (parameter) => {
 		loadTreeData()
-		return bizOrgApi.orgPage(Object.assign(parameter, searchFormState)).then((res) => {
+		return bizOrgApi.orgPage(Object.assign(parameter, searchFormState.value)).then((res) => {
 			return res
 		})
 	}
@@ -158,19 +160,21 @@
 				cardLoading.value = false
 				if (res !== null) {
 					treeData.value = res
-					// 默认展开2级
-					treeData.value.forEach((item) => {
-						// 因为0的顶级
-						if (item.parentId === '0') {
-							defaultExpandedKeys.value.push(item.id)
-							// 取到下级ID
-							if (item.children) {
-								item.children.forEach((items) => {
-									defaultExpandedKeys.value.push(items.id)
-								})
+					if (isEmpty(defaultExpandedKeys.value)) {
+						// 默认展开2级
+						treeData.value.forEach((item) => {
+							// 因为0的顶级
+							if (item.parentId === '0') {
+								defaultExpandedKeys.value.push(item.id)
+								// 取到下级ID
+								if (item.children) {
+									item.children.forEach((items) => {
+										defaultExpandedKeys.value.push(items.id)
+									})
+								}
 							}
-						}
-					})
+						})
+					}
 				}
 			})
 			.finally(() => {
@@ -180,9 +184,9 @@
 	// 点击树查询
 	const treeSelect = (selectedKeys) => {
 		if (selectedKeys.length > 0) {
-			searchFormState.parentId = selectedKeys.toString()
+			searchFormState.value.parentId = selectedKeys.toString()
 		} else {
-			delete searchFormState.parentId
+			delete searchFormState.value.parentId
 		}
 		table.value.refresh(true)
 	}
diff --git a/snowy-admin-web/src/views/biz/position/index.vue b/snowy-admin-web/src/views/biz/position/index.vue
index fd38223c..5357a836 100644
--- a/snowy-admin-web/src/views/biz/position/index.vue
+++ b/snowy-admin-web/src/views/biz/position/index.vue
@@ -51,7 +51,7 @@
 						<a-space>
 							<a-button
 								type="primary"
-								@click="form.onOpen(undefined, searchFormState.orgId)"
+								@click="formRef.onOpen(undefined, searchFormState.orgId)"
 								v-if="hasPerm('bizPositionAdd')"
 							>
 								<template #icon><plus-outlined /></template>
@@ -69,7 +69,7 @@
 							{{ $TOOL.dictTypeData('POSITION_CATEGORY', record.category) }}
 						</template>
 						<template v-if="column.dataIndex === 'action'">
-							<a @click="form.onOpen(record)" v-if="hasPerm('bizPositionEdit')">编辑</a>
+							<a @click="formRef.onOpen(record)" v-if="hasPerm('bizPositionEdit')">编辑</a>
 							<a-divider type="vertical" v-if="hasPerm(['bizPositionEdit', 'bizPositionDelete'], 'and')" />
 							<a-popconfirm title="确定删除此岗位？" @confirm="removeOrg(record)">
 								<a-button type="link" danger size="small" v-if="hasPerm('bizPositionDelete')">删除</a-button>
@@ -80,11 +80,12 @@
 			</a-card>
 		</a-col>
 	</a-row>
-	<Form ref="form" @successful="table.refresh(true)" />
+	<Form ref="formRef" @successful="table.refresh(true)" />
 </template>
 
 <script setup name="bizPosition">
 	import { Empty } from 'ant-design-vue'
+	import { isEmpty } from 'lodash-es'
 	import bizPositionApi from '@/api/biz/bizPositionApi'
 	import bizOrgApi from '@/api/biz/bizOrgApi'
 	import Form from './form.vue'
@@ -129,11 +130,11 @@
 	const toolConfig = { refresh: true, height: true, columnSetting: true }
 	// 定义tableDOM
 	const table = ref(null)
-	const form = ref()
+	const formRef = ref()
 	const searchFormRef = ref()
-	let searchFormState = reactive({})
+	const searchFormState = ref({})
 	// 默认展开的节点
-	let defaultExpandedKeys = ref([])
+	const defaultExpandedKeys = ref([])
 	const treeData = ref([])
 	// 替换treeNode 中 title,key,children
 	const treeFieldNames = { children: 'children', title: 'name', key: 'id' }
@@ -141,7 +142,7 @@
 
 	// 表格查询 返回 Promise 对象
 	const loadData = (parameter) => {
-		return bizPositionApi.positionPage(Object.assign(parameter, searchFormState)).then((res) => {
+		return bizPositionApi.positionPage(Object.assign(parameter, searchFormState.value)).then((res) => {
 			return res
 		})
 	}
@@ -157,19 +158,21 @@
 			cardLoading.value = false
 			if (res !== null) {
 				treeData.value = res
-				// 默认展开2级
-				treeData.value.forEach((item) => {
-					// 因为0的顶级
-					if (item.parentId === '0') {
-						defaultExpandedKeys.value.push(item.id)
-						// 取到下级ID
-						if (item.children) {
-							item.children.forEach((items) => {
-								defaultExpandedKeys.value.push(items.id)
-							})
+				if (isEmpty(defaultExpandedKeys.value)) {
+					// 默认展开2级
+					treeData.value.forEach((item) => {
+						// 因为0的顶级
+						if (item.parentId === '0') {
+							defaultExpandedKeys.value.push(item.id)
+							// 取到下级ID
+							if (item.children) {
+								item.children.forEach((items) => {
+									defaultExpandedKeys.value.push(items.id)
+								})
+							}
 						}
-					}
-				})
+					})
+				}
 			}
 		})
 		.finally(() => {
@@ -178,9 +181,9 @@
 	// 点击树查询
 	const treeSelect = (selectedKeys) => {
 		if (selectedKeys.length > 0) {
-			searchFormState.orgId = selectedKeys.toString()
+			searchFormState.value.orgId = selectedKeys.toString()
 		} else {
-			delete searchFormState.orgId
+			delete searchFormState.value.orgId
 		}
 		table.value.refresh(true)
 	}
diff --git a/snowy-admin-web/src/views/biz/user/index.vue b/snowy-admin-web/src/views/biz/user/index.vue
index 382e7568..cb912742 100644
--- a/snowy-admin-web/src/views/biz/user/index.vue
+++ b/snowy-admin-web/src/views/biz/user/index.vue
@@ -63,7 +63,7 @@
 						<a-space>
 							<a-button
 								type="primary"
-								@click="form.onOpen(undefined, searchFormState.orgId)"
+								@click="formRef.onOpen(undefined, searchFormState.orgId)"
 								v-if="hasPerm('bizUserAdd')"
 							>
 								<template #icon><plus-outlined /></template>
@@ -98,7 +98,7 @@
 							<span v-else>{{ $TOOL.dictTypeData('COMMON_STATUS', record.userStatus) }}</span>
 						</template>
 						<template v-if="column.dataIndex === 'action'">
-							<a @click="form.onOpen(record)" v-if="hasPerm('bizUserEdit')">{{ $t('common.editButton') }}</a>
+							<a @click="formRef.onOpen(record)" v-if="hasPerm('bizUserEdit')">{{ $t('common.editButton') }}</a>
 							<a-divider type="vertical" v-if="hasPerm(['bizUserEdit', 'bizUserDelete'], 'and')" />
 							<a-popconfirm :title="$t('user.popconfirmDeleteUser')" @confirm="removeUser(record)">
 								<a-button type="link" danger size="small" v-if="hasPerm('bizUserDelete')">{{
@@ -140,9 +140,9 @@
 			</a-card>
 		</a-col>
 	</a-row>
-	<Form ref="form" @successful="table.refresh(true)" />
+	<Form ref="formRef" @successful="table.refresh()" />
 	<role-selector-plus
-		ref="RoleSelectorPlus"
+		ref="RoleSelectorPlusRef"
 		:org-tree-api="selectorApiFunction.orgTreeApi"
 		:role-page-api="selectorApiFunction.rolePageApi"
 		:checked-role-list-api="selectorApiFunction.checkedRoleListApi"
@@ -152,12 +152,13 @@
 </template>
 <script setup name="bizUser">
 	import { message, Empty } from 'ant-design-vue'
+	import { isEmpty } from 'lodash-es'
 	import tool from '@/utils/tool'
 	import downloadUtil from '@/utils/downloadUtil'
 	import bizUserApi from '@/api/biz/bizUserApi'
 	import bizOrgApi from '@/api/biz/bizOrgApi'
 	import userCenterApi from '@/api/sys/userCenterApi'
-	import roleSelectorPlus from '@/components/Selector/roleSelectorPlus.vue'
+	import RoleSelectorPlus from '@/components/Selector/roleSelectorPlus.vue'
 	import Form from './form.vue'
 
 	const columns = [
@@ -213,22 +214,20 @@
 	const toolConfig = { refresh: true, height: true, columnSetting: true }
 	const statusData = tool.dictList('COMMON_STATUS')
 	const searchFormRef = ref()
-	let defaultExpandedKeys = ref([])
-	let searchFormState = reactive({})
+	const defaultExpandedKeys = ref([])
+	const searchFormState = ref({})
 	const table = ref(null)
 	const treeData = ref([])
-	let selectedRowKeys = ref([])
+	const selectedRowKeys = ref([])
 	const treeFieldNames = { children: 'children', title: 'name', key: 'id' }
-	let form = ref(null)
-	let RoleSelector = ref()
-	let RoleSelectorPlus = ref()
+	const formRef = ref(null)
+	const RoleSelectorPlusRef = ref()
 	const selectedRecord = ref({})
 	const loading = ref(false)
 	const cardLoading = ref(true)
-	const ImpExpRef = ref()
 	// 表格查询 返回 Promise 对象
 	const loadData = (parameter) => {
-		return bizUserApi.userPage(Object.assign(parameter, searchFormState)).then((res) => {
+		return bizUserApi.userPage(Object.assign(parameter, searchFormState.value)).then((res) => {
 			return res
 		})
 	}
@@ -244,19 +243,21 @@
 			cardLoading.value = false
 			if (res !== null) {
 				treeData.value = res
-				// 默认展开2级
-				treeData.value.forEach((item) => {
-					// 因为0的顶级
-					if (item.parentId === '0') {
-						defaultExpandedKeys.value.push(item.id)
-						// 取到下级ID
-						if (item.children) {
-							item.children.forEach((items) => {
-								defaultExpandedKeys.value.push(items.id)
-							})
+				if (isEmpty(defaultExpandedKeys.value)) {
+					// 默认展开2级
+					treeData.value.forEach((item) => {
+						// 因为0的顶级
+						if (item.parentId === '0') {
+							defaultExpandedKeys.value.push(item.id)
+							// 取到下级ID
+							if (item.children) {
+								item.children.forEach((items) => {
+									defaultExpandedKeys.value.push(items.id)
+								})
+							}
 						}
-					}
-				})
+					})
+				}
 			}
 		})
 		.finally(() => {
@@ -267,7 +268,7 @@
 		alert: {
 			show: false,
 			clear: () => {
-				selectedRowKeys = ref([])
+				selectedRowKeys.value = ref([])
 			}
 		},
 		rowSelection: {
@@ -279,9 +280,9 @@
 	// 点击树查询
 	const treeSelect = (selectedKeys) => {
 		if (selectedKeys.length > 0) {
-			searchFormState.orgId = selectedKeys.toString()
+			searchFormState.value.orgId = selectedKeys.toString()
 		} else {
-			delete searchFormState.orgId
+			delete searchFormState.value.orgId
 		}
 		table.value.refresh(true)
 	}
@@ -321,7 +322,7 @@
 	}
 	// 批量导出校验并加参数
 	const exportBatchUserVerify = () => {
-		if ((selectedRowKeys.value.length < 1) & !searchFormState.searchKey & !searchFormState.userStatus) {
+		if ((selectedRowKeys.value.length < 1) & !searchFormState.value.searchKey & !searchFormState.value.userStatus) {
 			message.warning('请输入查询条件或勾选要导出的信息')
 		}
 		if (selectedRowKeys.value.length > 0) {
@@ -335,10 +336,10 @@
 			exportBatchUser(params)
 			return
 		}
-		if (searchFormState.searchKey || searchFormState.userStatus) {
+		if (searchFormState.value.searchKey || searchFormState.value.userStatus) {
 			const params = {
-				searchKey: searchFormState.searchKey,
-				userStatus: searchFormState.userStatus
+				searchKey: searchFormState.value.searchKey,
+				userStatus: searchFormState.value.userStatus
 			}
 			exportBatchUser(params)
 		}
@@ -364,7 +365,7 @@
 			id: record.id
 		}
 		bizUserApi.userOwnRole(param).then((data) => {
-			RoleSelectorPlus.value.showRolePlusModal(data)
+			RoleSelectorPlusRef.value.showRolePlusModal(data)
 		})
 	}
 	// 角色选择回调
diff --git a/snowy-admin-web/src/views/sys/org/index.vue b/snowy-admin-web/src/views/sys/org/index.vue
index 40d1865a..830aca97 100644
--- a/snowy-admin-web/src/views/sys/org/index.vue
+++ b/snowy-admin-web/src/views/sys/org/index.vue
@@ -18,7 +18,7 @@
 					<a-row :gutter="24">
 						<a-col :span="8">
 							<a-form-item name="searchKey" label="名称关键词">
-								<a-input v-model:value="searchFormState.searchKey" placeholder="请输入组织名称关键词"></a-input>
+								<a-input v-model:value="searchFormState.searchKey" placeholder="请输入组织名称关键词" />
 							</a-form-item>
 						</a-col>
 						<a-col :span="8">
@@ -47,7 +47,7 @@
 				>
 					<template #operator class="table-operator">
 						<a-space>
-							<a-button type="primary" @click="form.onOpen(undefined, searchFormState.parentId)">
+							<a-button type="primary" @click="formRef.onOpen(undefined, searchFormState.parentId)">
 								<template #icon><plus-outlined /></template>
 								新增
 							</a-button>
@@ -59,7 +59,7 @@
 							{{ $TOOL.dictTypeData('ORG_CATEGORY', record.category) }}
 						</template>
 						<template v-if="column.dataIndex === 'action'">
-							<a @click="form.onOpen(record)">编辑</a>
+							<a @click="formRef.onOpen(record)">编辑</a>
 							<a-divider type="vertical" />
 							<a-popconfirm title="删除此组织与下级组织吗？" @confirm="removeOrg(record)">
 								<a-button type="link" danger size="small">删除</a-button>
@@ -70,11 +70,12 @@
 			</a-card>
 		</a-col>
 	</a-row>
-	<Form ref="form" @successful="table.refresh(true)" />
+	<Form ref="formRef" @successful="table.refresh()" />
 </template>
 
 <script setup name="sysOrg">
-	import { message, Empty } from 'ant-design-vue'
+	import { Empty } from 'ant-design-vue'
+	import { isEmpty } from 'lodash-es'
 	import orgApi from '@/api/sys/orgApi'
 	import Form from './form.vue'
 
@@ -89,7 +90,8 @@
 		},
 		{
 			title: '排序',
-			dataIndex: 'sortCode'
+			dataIndex: 'sortCode',
+			width: 100
 		},
 		{
 			title: '操作',
@@ -98,13 +100,13 @@
 			width: '150px'
 		}
 	]
-	let selectedRowKeys = ref([])
+	const selectedRowKeys = ref([])
 	// 列表选择配置
 	const options = {
 		alert: {
 			show: false,
 			clear: () => {
-				selectedRowKeys = ref([])
+				selectedRowKeys.value = ref([])
 			}
 		},
 		rowSelection: {
@@ -115,11 +117,11 @@
 	}
 	// 定义tableDOM
 	const table = ref(null)
-	const form = ref()
+	const formRef = ref()
 	const searchFormRef = ref()
-	let searchFormState = reactive({})
+	const searchFormState = ref({})
 	// 默认展开的节点
-	let defaultExpandedKeys = ref([])
+	const defaultExpandedKeys = ref([])
 	const treeData = ref([])
 	// 替换treeNode 中 title,key,children
 	const treeFieldNames = { children: 'children', title: 'name', key: 'id' }
@@ -128,7 +130,7 @@
 	// 表格查询 返回 Promise 对象
 	const loadData = (parameter) => {
 		loadTreeData()
-		return orgApi.orgPage(Object.assign(parameter, searchFormState)).then((res) => {
+		return orgApi.orgPage(Object.assign(parameter, searchFormState.value)).then((res) => {
 			return res
 		})
 	}
@@ -143,28 +145,30 @@
 			cardLoading.value = false
 			if (res !== null) {
 				treeData.value = res
-				// 默认展开2级
-				treeData.value.forEach((item) => {
-					// 因为0的顶级
-					if (item.parentId === '0') {
-						defaultExpandedKeys.value.push(item.id)
-						// 取到下级ID
-						if (item.children) {
-							item.children.forEach((items) => {
-								defaultExpandedKeys.value.push(items.id)
-							})
+				if (isEmpty(defaultExpandedKeys.value)) {
+					// 默认展开2级
+					treeData.value.forEach((item) => {
+						// 因为0的顶级
+						if (item.parentId === '0') {
+							defaultExpandedKeys.value.push(item.id)
+							// 取到下级ID
+							if (item.children) {
+								item.children.forEach((items) => {
+									defaultExpandedKeys.value.push(items.id)
+								})
+							}
 						}
-					}
-				})
+					})
+				}
 			}
 		})
 	}
 	// 点击树查询
 	const treeSelect = (selectedKeys) => {
 		if (selectedKeys.length > 0) {
-			searchFormState.parentId = selectedKeys.toString()
+			searchFormState.value.parentId = selectedKeys.toString()
 		} else {
-			delete searchFormState.parentId
+			delete searchFormState.value.parentId
 		}
 		table.value.refresh(true)
 	}
diff --git a/snowy-admin-web/src/views/sys/position/index.vue b/snowy-admin-web/src/views/sys/position/index.vue
index ad00e546..22b19ccc 100644
--- a/snowy-admin-web/src/views/sys/position/index.vue
+++ b/snowy-admin-web/src/views/sys/position/index.vue
@@ -76,6 +76,7 @@
 
 <script setup name="sysPosition">
 	import { Empty } from 'ant-design-vue'
+	import { isEmpty } from 'lodash-es'
 	import positionApi from '@/api/sys/positionApi'
 	import orgApi from '@/api/sys/orgApi'
 	import Form from './form.vue'
@@ -91,7 +92,8 @@
 		},
 		{
 			title: '排序',
-			dataIndex: 'sortCode'
+			dataIndex: 'sortCode',
+			width: 100
 		},
 		{
 			title: '操作',
@@ -100,13 +102,13 @@
 			width: '150px'
 		}
 	]
-	let selectedRowKeys = ref([])
+	const selectedRowKeys = ref([])
 	// 列表选择配置
 	const options = {
 		alert: {
 			show: false,
 			clear: () => {
-				selectedRowKeys = ref([])
+				selectedRowKeys.value = ref([])
 			}
 		},
 		rowSelection: {
@@ -119,9 +121,9 @@
 	const table = ref(null)
 	const form = ref()
 	const searchFormRef = ref()
-	let searchFormState = reactive({})
+	const searchFormState = ref({})
 	// 默认展开的节点
-	let defaultExpandedKeys = ref([])
+	const defaultExpandedKeys = ref([])
 	const treeData = ref([])
 	// 替换treeNode 中 title,key,children
 	const treeFieldNames = { children: 'children', title: 'name', key: 'id' }
@@ -129,7 +131,7 @@
 
 	// 表格查询 返回 Promise 对象
 	const loadData = (parameter) => {
-		return positionApi.positionPage(Object.assign(parameter, searchFormState)).then((res) => {
+		return positionApi.positionPage(Object.assign(parameter, searchFormState.value)).then((res) => {
 			return res
 		})
 	}
@@ -143,27 +145,29 @@
 		cardLoading.value = false
 		if (res !== null) {
 			treeData.value = res
-			// 默认展开2级
-			treeData.value.forEach((item) => {
-				// 因为0的顶级
-				if (item.parentId === '0') {
-					defaultExpandedKeys.value.push(item.id)
-					// 取到下级ID
-					if (item.children) {
-						item.children.forEach((items) => {
-							defaultExpandedKeys.value.push(items.id)
-						})
+			if (isEmpty(defaultExpandedKeys.value)) {
+				// 默认展开2级
+				treeData.value.forEach((item) => {
+					// 因为0的顶级
+					if (item.parentId === '0') {
+						defaultExpandedKeys.value.push(item.id)
+						// 取到下级ID
+						if (item.children) {
+							item.children.forEach((items) => {
+								defaultExpandedKeys.value.push(items.id)
+							})
+						}
 					}
-				}
-			})
+				})
+			}
 		}
 	})
 	// 点击树查询
 	const treeSelect = (selectedKeys) => {
 		if (selectedKeys.length > 0) {
-			searchFormState.orgId = selectedKeys.toString()
+			searchFormState.value.orgId = selectedKeys.toString()
 		} else {
-			delete searchFormState.orgId
+			delete searchFormState.value.orgId
 		}
 		table.value.refresh(true)
 	}
diff --git a/snowy-admin-web/src/views/sys/role/index.vue b/snowy-admin-web/src/views/sys/role/index.vue
index e2456bed..784968dd 100644
--- a/snowy-admin-web/src/views/sys/role/index.vue
+++ b/snowy-admin-web/src/views/sys/role/index.vue
@@ -49,7 +49,7 @@
 				>
 					<template #operator class="table-operator">
 						<a-space>
-							<a-button type="primary" @click="form.onOpen(undefined, searchFormState.category, searchFormState.orgId)">
+							<a-button type="primary" @click="formRef.onOpen(undefined, searchFormState.category, searchFormState.orgId)">
 								<template #icon><plus-outlined /></template>
 								新增角色
 							</a-button>
@@ -61,7 +61,7 @@
 							{{ $TOOL.dictTypeData('ROLE_CATEGORY', record.category) }}
 						</template>
 						<template v-if="column.dataIndex === 'action'">
-							<a @click="form.onOpen(record)">编辑</a>
+							<a @click="formRef.onOpen(record)">编辑</a>
 							<a-divider type="vertical" />
 							<a-popconfirm title="确定删除此角色？" @confirm="removeOrg(record)">
 								<a-button type="link" danger size="small">删除</a-button>
@@ -95,10 +95,10 @@
 			</a-card>
 		</a-col>
 	</a-row>
-	<grantResourceForm ref="GrantResourceForm" @successful="table.refresh(true)" />
-	<grantMobileResourceForm ref="GrantMobileResourceForm" @successful="table.refresh(true)" />
-	<grantPermissionForm ref="GrantPermissionForm" @successful="table.refresh(true)" />
-	<Form ref="form" @successful="table.refresh(true)" />
+	<grantResourceForm ref="GrantResourceForm" @successful="table.refresh()" />
+	<grantMobileResourceForm ref="GrantMobileResourceForm" @successful="table.refresh()" />
+	<grantPermissionForm ref="GrantPermissionForm" @successful="table.refresh()" />
+	<Form ref="formRef" @successful="table.refresh()" />
 	<user-selector-plus
 		ref="userselectorPlusRef"
 		:org-tree-api="selectorApiFunction.orgTreeApi"
@@ -110,13 +110,14 @@
 
 <script setup name="sysRole">
 	import { Empty } from 'ant-design-vue'
+	import { isEmpty } from 'lodash-es'
 	import roleApi from '@/api/sys/roleApi'
 	import orgApi from '@/api/sys/orgApi'
 	import userCenterApi from '@/api/sys/userCenterApi'
-	import grantResourceForm from './grantResourceForm.vue'
-	import grantMobileResourceForm from './grantMobileResourceForm.vue'
-	import grantPermissionForm from './grantPermissionForm.vue'
-	import userSelectorPlus from '@/components/Selector/userSelectorPlus.vue'
+	import GrantResourceForm from './grantResourceForm.vue'
+	import GrantMobileResourceForm from './grantMobileResourceForm.vue'
+	import GrantPermissionForm from './grantPermissionForm.vue'
+	import UserSelectorPlus from '@/components/Selector/userSelectorPlus.vue'
 	import Form from './form.vue'
 
 	const columns = [
@@ -132,7 +133,8 @@
 		},
 		{
 			title: '排序',
-			dataIndex: 'sortCode'
+			dataIndex: 'sortCode',
+			width: 100
 		},
 		{
 			title: '操作',
@@ -141,13 +143,13 @@
 			width: '200px'
 		}
 	]
-	let selectedRowKeys = ref([])
+	const selectedRowKeys = ref([])
 	// 列表选择配置
 	const options = {
 		alert: {
 			show: false,
 			clear: () => {
-				selectedRowKeys = ref([])
+				selectedRowKeys.value = ref([])
 			}
 		},
 		rowSelection: {
@@ -158,15 +160,15 @@
 	}
 	// 定义tableDOM
 	const table = ref()
-	const form = ref()
+	const formRef = ref()
 	const GrantResourceForm = ref()
 	const GrantMobileResourceForm = ref()
 	const GrantPermissionForm = ref()
 	const userselectorPlusRef = ref()
 	const searchFormRef = ref()
-	let searchFormState = reactive({})
+	const searchFormState = ref({})
 	// 默认展开的节点
-	let defaultExpandedKeys = ref([])
+	const defaultExpandedKeys = ref([])
 	const treeData = ref([])
 	// 替换treeNode 中 title,key,children
 	const treeFieldNames = { children: 'children', title: 'name', key: 'id' }
@@ -176,7 +178,7 @@
 
 	// 表格查询 返回 Promise 对象
 	const loadData = (parameter) => {
-		let param = Object.assign(parameter, searchFormState)
+		let param = Object.assign(parameter, searchFormState.value)
 		return roleApi.rolePage(param).then((res) => {
 			return res
 		})
@@ -199,34 +201,36 @@
 				}
 			]
 			treeData.value = globalRoleType.concat(res)
-			// 默认展开2级
-			treeData.value.forEach((item) => {
-				// 因为0的顶级
-				if (item.parentId === '0') {
-					defaultExpandedKeys.value.push(item.id)
-					// 取到下级ID
-					if (item.children) {
-						item.children.forEach((items) => {
-							defaultExpandedKeys.value.push(items.id)
-						})
+			if (isEmpty(defaultExpandedKeys.value)) {
+				// 默认展开2级
+				treeData.value.forEach((item) => {
+					// 因为0的顶级
+					if (item.parentId === '0') {
+						defaultExpandedKeys.value.push(item.id)
+						// 取到下级ID
+						if (item.children) {
+							item.children.forEach((items) => {
+								defaultExpandedKeys.value.push(items.id)
+							})
+						}
 					}
-				}
-			})
+				})
+			}
 		}
 	})
 	// 点击树查询
 	const treeSelect = (selectedKeys) => {
 		if (selectedKeys.length > 0) {
 			if (selectedKeys[0] === 'GLOBAL') {
-				searchFormState.category = selectedKeys[0]
-				delete searchFormState.orgId
+				searchFormState.value.category = selectedKeys[0]
+				delete searchFormState.value.orgId
 			} else {
-				searchFormState.orgId = selectedKeys.toString()
-				delete searchFormState.category
+				searchFormState.value.orgId = selectedKeys.toString()
+				delete searchFormState.value.category
 			}
 		} else {
-			delete searchFormState.category
-			delete searchFormState.orgId
+			delete searchFormState.value.category
+			delete searchFormState.value.orgId
 		}
 		table.value.refresh(true)
 	}
diff --git a/snowy-admin-web/src/views/sys/user/index.vue b/snowy-admin-web/src/views/sys/user/index.vue
index 3800d3aa..3a25044c 100644
--- a/snowy-admin-web/src/views/sys/user/index.vue
+++ b/snowy-admin-web/src/views/sys/user/index.vue
@@ -60,7 +60,7 @@
 				>
 					<template #operator class="table-operator">
 						<a-space>
-							<a-button type="primary" @click="form.onOpen(undefined, searchFormState.orgId)">
+							<a-button type="primary" @click="formRef.onOpen(undefined, searchFormState.orgId)">
 								<template #icon><plus-outlined /></template>
 								<span>{{ $t('common.addButton') }}{{ $t('model.user') }}</span>
 							</a-button>
@@ -90,7 +90,7 @@
 							<a-switch :loading="loading" :checked="record.userStatus === 'ENABLE'" @change="editStatus(record)" />
 						</template>
 						<template v-if="column.dataIndex === 'action'">
-							<a @click="form.onOpen(record)">{{ $t('common.editButton') }}</a>
+							<a @click="formRef.onOpen(record)">{{ $t('common.editButton') }}</a>
 							<a-divider type="vertical" />
 							<a-popconfirm :title="$t('user.popconfirmDeleteUser')" placement="topRight" @confirm="removeUser(record)">
 								<a-button type="link" danger size="small">
@@ -135,31 +135,32 @@
 			</a-card>
 		</a-col>
 	</a-row>
-	<Form ref="form" @successful="table.refresh(true)" />
+	<Form ref="formRef" @successful="table.refresh()" />
 	<role-selector-plus
-		ref="RoleSelectorPlus"
+		ref="RoleSelectorPlusRef"
 		:org-tree-api="selectorApiFunction.orgTreeApi"
 		:role-page-api="selectorApiFunction.rolePageApi"
 		:checked-role-list-api="selectorApiFunction.checkedRoleListApi"
 		@onBack="roleBack"
 	/>
 	<ImpExp ref="ImpExpRef" />
-	<grantResourceForm ref="grantResourceFormRef" @successful="table.refresh(true)" />
-	<grantPermissionForm ref="grantPermissionFormRef" @successful="table.refresh(true)" />
+	<grantResourceForm ref="grantResourceFormRef" @successful="table.refresh()" />
+	<grantPermissionForm ref="grantPermissionFormRef" @successful="table.refresh()" />
 </template>
 
 <script setup name="sysUser">
 	import { message, Empty } from 'ant-design-vue'
+	import { isEmpty } from 'lodash-es'
 	import tool from '@/utils/tool'
 	import downloadUtil from '@/utils/downloadUtil'
 	import userApi from '@/api/sys/userApi'
 	import orgApi from '@/api/sys/orgApi'
 	import userCenterApi from '@/api/sys/userCenterApi'
-	import roleSelectorPlus from '@/components/Selector/roleSelectorPlus.vue'
+	import RoleSelectorPlus from '@/components/Selector/roleSelectorPlus.vue'
 	import Form from './form.vue'
 	import ImpExp from './impExp.vue'
-	import grantResourceForm from './grantResourceForm.vue'
-	import grantPermissionForm from './grantPermissionForm.vue'
+	import GrantResourceForm from './grantResourceForm.vue'
+	import GrantPermissionForm from './grantPermissionForm.vue'
 
 	const columns = [
 		{
@@ -211,14 +212,14 @@
 	]
 	const statusData = tool.dictList('COMMON_STATUS')
 	const searchFormRef = ref()
-	let defaultExpandedKeys = ref([])
-	let searchFormState = reactive({})
+	const defaultExpandedKeys = ref([])
+	const searchFormState = ref({})
 	const table = ref(null)
 	const treeData = ref([])
 	const selectedRowKeys = ref([])
 	const treeFieldNames = { children: 'children', title: 'name', key: 'id' }
-	let form = ref(null)
-	let RoleSelectorPlus = ref()
+	const formRef = ref(null)
+	const RoleSelectorPlusRef = ref()
 	const selectedRecord = ref({})
 	const loading = ref(false)
 	const cardLoading = ref(true)
@@ -227,7 +228,7 @@
 	const grantPermissionFormRef = ref()
 	// 表格查询 返回 Promise 对象
 	const loadData = (parameter) => {
-		return userApi.userPage(Object.assign(parameter, searchFormState)).then((res) => {
+		return userApi.userPage(Object.assign(parameter, searchFormState.value)).then((res) => {
 			return res
 		})
 	}
@@ -236,19 +237,21 @@
 		cardLoading.value = false
 		if (res !== null) {
 			treeData.value = res
-			// 默认展开2级
-			treeData.value.forEach((item) => {
-				// 因为0的顶级
-				if (item.parentId === '0') {
-					defaultExpandedKeys.value.push(item.id)
-					// 取到下级ID
-					if (item.children) {
-						item.children.forEach((items) => {
-							defaultExpandedKeys.value.push(items.id)
-						})
+			if (isEmpty(defaultExpandedKeys.value)) {
+				// 默认展开2级
+				treeData.value.forEach((item) => {
+					// 因为0的顶级
+					if (item.parentId === '0') {
+						defaultExpandedKeys.value.push(item.id)
+						// 取到下级ID
+						if (item.children) {
+							item.children.forEach((items) => {
+								defaultExpandedKeys.value.push(items.id)
+							})
+						}
 					}
-				}
-			})
+				})
+			}
 		}
 	})
 	// 列表选择配置
@@ -273,9 +276,9 @@
 	// 点击树查询
 	const treeSelect = (selectedKeys) => {
 		if (selectedKeys.length > 0) {
-			searchFormState.orgId = selectedKeys.toString()
+			searchFormState.value.orgId = selectedKeys.toString()
 		} else {
-			delete searchFormState.orgId
+			delete searchFormState.value.orgId
 		}
 		table.value.refresh(true)
 	}
@@ -315,7 +318,7 @@
 	}
 	// 批量导出校验并加参数
 	const exportBatchUserVerify = () => {
-		if ((selectedRowKeys.value.length < 1) & !searchFormState.searchKey & !searchFormState.userStatus) {
+		if ((selectedRowKeys.value.length < 1) & !searchFormState.value.searchKey & !searchFormState.value.userStatus) {
 			message.warning('请输入查询条件或勾选要导出的信息')
 		}
 		if (selectedRowKeys.value.length > 0) {
@@ -329,10 +332,10 @@
 			exportBatchUser(params)
 			return
 		}
-		if (searchFormState.searchKey || searchFormState.userStatus) {
+		if (searchFormState.value.searchKey || searchFormState.value.userStatus) {
 			const params = {
-				searchKey: searchFormState.searchKey,
-				userStatus: searchFormState.userStatus
+				searchKey: searchFormState.value.searchKey,
+				userStatus: searchFormState.value.userStatus
 			}
 			exportBatchUser(params)
 		}
@@ -358,7 +361,7 @@
 			id: record.id
 		}
 		userApi.userOwnRole(param).then((data) => {
-			RoleSelectorPlus.value.showRolePlusModal(data)
+			RoleSelectorPlusRef.value.showRolePlusModal(data)
 		})
 	}
 	// 角色选择回调