From 6af68085ff6615e1ec3a5dd18c761250800d6fca Mon Sep 17 00:00:00 2001
From: LiuHao <liuhaoai545@gmail.com>
Date: 星期二, 06 六月 2023 22:23:43 +0800
Subject: [PATCH] update 修改页面代码 去除ele的引入以及vue的类型声明
---
src/views/system/role/index.vue | 94 +++++++++++++++++++++++++----------------------
1 files changed, 50 insertions(+), 44 deletions(-)
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index fd42b4b..c61c65f 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -198,8 +198,6 @@
import { roleMenuTreeselect, treeselect as menuTreeselect } from '@/api/system/menu/index';
import { RoleVO, RoleForm, RoleQuery, DeptTreeOption } from '@/api/system/role/types';
import { MenuTreeOption, RoleMenuTree } from '@/api/system/menu/types';
-import { ComponentInternalInstance } from 'vue';
-import { ElTree, ElForm, DateModelType } from 'element-plus';
const router = useRouter();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -230,11 +228,11 @@
{ value: "5", label: "浠呮湰浜烘暟鎹潈闄�" }
])
-const queryFormRef = ref(ElForm);
-const roleFormRef = ref(ElForm);
-const dataScopeRef = ref(ElForm);
-const menuRef = ref(ElTree);
-const deptRef = ref(ElTree);
+const queryFormRef = ref<ElFormInstance>();
+const roleFormRef = ref<ElFormInstance>();
+const dataScopeRef = ref<ElFormInstance>();
+const menuRef = ref<ElTreeInstance>();
+const deptRef = ref<ElTreeInstance>();
const initForm: RoleForm = {
roleId: undefined,
@@ -297,7 +295,7 @@
/** 閲嶇疆 */
const resetQuery = () => {
dateRange.value = ['', '']
- queryFormRef.value.resetFields();
+ queryFormRef.value?.resetFields();
handleQuery();
}
/**鍒犻櫎鎸夐挳鎿嶄綔 */
@@ -345,23 +343,25 @@
menuOptions.value = res.data;
}
/** 鎵�鏈夐儴闂ㄨ妭鐐规暟鎹� */
-const getDeptAllCheckedKeys = () => {
+const getDeptAllCheckedKeys = (): any => {
// 鐩墠琚�変腑鐨勯儴闂ㄨ妭鐐�
- let checkedKeys = deptRef.value.getCheckedKeys();
+ let checkedKeys = deptRef.value?.getCheckedKeys();
// 鍗婇�変腑鐨勯儴闂ㄨ妭鐐�
- let halfCheckedKeys = deptRef.value.getHalfCheckedKeys();
- checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
+ let halfCheckedKeys = deptRef.value?.getHalfCheckedKeys();
+ if(halfCheckedKeys) {
+ checkedKeys?.unshift.apply(checkedKeys, halfCheckedKeys);
+ }
return checkedKeys
}
/** 閲嶇疆鏂板鐨勮〃鍗曚互鍙婂叾浠栨暟鎹� */
const reset = () => {
- menuRef.value.setCheckedKeys([]);
+ menuRef.value?.setCheckedKeys([]);
menuExpand.value = false
menuNodeAll.value = false
deptExpand.value = true
deptNodeAll.value = false
form.value = { ...initForm };
- roleFormRef.value.resetFields();
+ roleFormRef.value?.resetFields();
}
@@ -381,19 +381,19 @@
const { data } = await getRole(roleId);
dialog.visible = true;
dialog.title = "淇敼瑙掕壊";
- nextTick(() => {
- reset();
- Object.assign(form.value, data);
- form.value.roleSort = Number(form.value.roleSort);
- nextTick(async () => {
- const res = await roleMenu;
- let checkedKeys = res.checkedKeys;
- checkedKeys.forEach((v) => {
- nextTick(() => {
- menuRef.value.setChecked(v, true, false);
- })
- })
+ await nextTick(() => {
+ reset();
+ Object.assign(form.value, data);
+ form.value.roleSort = Number(form.value.roleSort);
+ nextTick(async () => {
+ const res = await roleMenu;
+ let checkedKeys = res.checkedKeys;
+ checkedKeys.forEach((v) => {
+ nextTick(() => {
+ menuRef.value?.setChecked(v, true, false);
+ })
})
+ })
})
}
/** 鏍规嵁瑙掕壊ID鏌ヨ鑿滃崟鏍戠粨鏋� */
@@ -410,25 +410,29 @@
return res.data;
}
/** 鏍戞潈闄愶紙灞曞紑/鎶樺彔锛�*/
-const handleCheckedTreeExpand = (value: any, type: string) => {
+const handleCheckedTreeExpand = (value: boolean, type: string) => {
if (type == "menu") {
let treeList = menuOptions.value;
for (let i = 0; i < treeList.length; i++) {
+ if (menuRef.value) {
menuRef.value.store.nodesMap[treeList[i].id].expanded = value;
+ }
}
} else if (type == "dept") {
let treeList = deptOptions.value;
for (let i = 0; i < treeList.length; i++) {
- deptRef.value.store.nodesMap[treeList[i].id].expanded = value;
+ if (deptRef.value) {
+ deptRef.value.store.nodesMap[treeList[i].id].expanded = value;
+ }
}
}
}
/** 鏍戞潈闄愶紙鍏ㄩ��/鍏ㄤ笉閫夛級 */
const handleCheckedTreeNodeAll = (value: any, type: string) => {
if (type == "menu") {
- menuRef.value.setCheckedNodes(value ? menuOptions.value : []);
+ menuRef.value?.setCheckedNodes(value ? menuOptions.value as any : []);
} else if (type == "dept") {
- deptRef.value.setCheckedNodes(value ? deptOptions.value : []);
+ deptRef.value?.setCheckedNodes(value ? deptOptions.value as any : []);
}
}
/** 鏍戞潈闄愶紙鐖跺瓙鑱斿姩锛� */
@@ -440,17 +444,19 @@
}
}
/** 鎵�鏈夎彍鍗曡妭鐐规暟鎹� */
-const getMenuAllCheckedKeys = () => {
+const getMenuAllCheckedKeys = (): any => {
// 鐩墠琚�変腑鐨勮彍鍗曡妭鐐�
- let checkedKeys = menuRef.value.getCheckedKeys();
+ let checkedKeys = menuRef.value?.getCheckedKeys();
// 鍗婇�変腑鐨勮彍鍗曡妭鐐�
- let halfCheckedKeys = menuRef.value.getHalfCheckedKeys();
- checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
+ let halfCheckedKeys = menuRef.value?.getHalfCheckedKeys();
+ if (halfCheckedKeys) {
+ checkedKeys?.unshift.apply(checkedKeys, halfCheckedKeys);
+ }
return checkedKeys;
}
/** 鎻愪氦鎸夐挳 */
const submitForm = () => {
- roleFormRef.value.validate(async (valid: boolean) => {
+ roleFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
form.value.menuIds = getMenuAllCheckedKeys()
form.value.roleId ? await updateRole(form.value) : await addRole(form.value);
@@ -468,7 +474,7 @@
/** 閫夋嫨瑙掕壊鏉冮檺鑼冨洿瑙﹀彂 */
const dataScopeSelectChange = (value: string) => {
if (value !== "2") {
- deptRef.value.setCheckedKeys([])
+ deptRef.value?.setCheckedKeys([])
}
}
/** 鍒嗛厤鏁版嵁鏉冮檺鎿嶄綔 */
@@ -478,13 +484,13 @@
Object.assign(form.value, response.data);
openDataScope.value = true;
dialog.title = "鍒嗛厤鏁版嵁鏉冮檺";
- nextTick(async () => {
- const res = await roleDeptTreeselect;
- nextTick(() => {
- if (deptRef.value) {
- deptRef.value.setCheckedKeys(res.checkedKeys);
- }
- })
+ await nextTick(async () => {
+ const res = await roleDeptTreeselect;
+ await nextTick(() => {
+ if (deptRef.value) {
+ deptRef.value.setCheckedKeys(res.checkedKeys);
+ }
+ })
})
}
/** 鎻愪氦鎸夐挳锛堟暟鎹潈闄愶級 */
@@ -499,7 +505,7 @@
}
/** 鍙栨秷鎸夐挳锛堟暟鎹潈闄愶級*/
const cancelDataScope = () => {
- dataScopeRef.value.resetFields();
+ dataScopeRef.value?.resetFields();
form.value = {...initForm};
openDataScope.value = false;
}
--
Gitblit v1.9.3