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 | 158 +++++++++++++++++++++++++++-------------------------
1 files changed, 83 insertions(+), 75 deletions(-)
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 56c14c5..c61c65f 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -1,40 +1,42 @@
<template>
<div class="p-2">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
- <div class="search" v-show="showSearch">
- <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="68px">
- <el-form-item label="瑙掕壊鍚嶇О" prop="roleName">
- <el-input v-model="queryParams.roleName" placeholder="璇疯緭鍏ヨ鑹插悕绉�" clearable style="width: 240px" @keyup.enter="handleQuery" />
- </el-form-item>
- <el-form-item label="鏉冮檺瀛楃" prop="roleKey">
- <el-input v-model="queryParams.roleKey" placeholder="璇疯緭鍏ユ潈闄愬瓧绗�" clearable style="width: 240px" @keyup.enter="handleQuery" />
- </el-form-item>
- <el-form-item label="鐘舵��" prop="status">
- <el-select v-model="queryParams.status" placeholder="瑙掕壊鐘舵��" clearable style="width: 240px">
- <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
- </el-select>
- </el-form-item>
- <el-form-item label="鍒涘缓鏃堕棿" style="width: 308px">
- <el-date-picker
- v-model="dateRange"
- value-format="YYYY-MM-DD"
- type="daterange"
- range-separator="-"
- start-placeholder="寮�濮嬫棩鏈�"
- end-placeholder="缁撴潫鏃ユ湡"
- :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
- ></el-date-picker>
- </el-form-item>
+ <div class="mb-[10px]" v-show="showSearch">
+ <el-card shadow="hover">
+ <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="68px">
+ <el-form-item label="瑙掕壊鍚嶇О" prop="roleName">
+ <el-input v-model="queryParams.roleName" placeholder="璇疯緭鍏ヨ鑹插悕绉�" clearable style="width: 240px" @keyup.enter="handleQuery" />
+ </el-form-item>
+ <el-form-item label="鏉冮檺瀛楃" prop="roleKey">
+ <el-input v-model="queryParams.roleKey" placeholder="璇疯緭鍏ユ潈闄愬瓧绗�" clearable style="width: 240px" @keyup.enter="handleQuery" />
+ </el-form-item>
+ <el-form-item label="鐘舵��" prop="status">
+ <el-select v-model="queryParams.status" placeholder="瑙掕壊鐘舵��" clearable style="width: 240px">
+ <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="鍒涘缓鏃堕棿" style="width: 308px">
+ <el-date-picker
+ v-model="dateRange"
+ value-format="YYYY-MM-DD"
+ type="daterange"
+ range-separator="-"
+ start-placeholder="寮�濮嬫棩鏈�"
+ end-placeholder="缁撴潫鏃ユ湡"
+ :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
+ ></el-date-picker>
+ </el-form-item>
- <el-form-item>
- <el-button type="primary" @click="handleQuery" icon="Search">鎼滅储</el-button>
- <el-button @click="resetQuery" icon="Refresh">閲嶇疆</el-button>
- </el-form-item>
- </el-form>
+ <el-form-item>
+ <el-button type="primary" @click="handleQuery" icon="Search">鎼滅储</el-button>
+ <el-button @click="resetQuery" icon="Refresh">閲嶇疆</el-button>
+ </el-form-item>
+ </el-form>
+ </el-card>
</div>
</transition>
- <el-card shadow="never">
+ <el-card shadow="hover">
<template #header>
<el-row :gutter="10">
<el-col :span="1.5">
@@ -196,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;
@@ -228,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,
@@ -295,7 +295,7 @@
/** 閲嶇疆 */
const resetQuery = () => {
dateRange.value = ['', '']
- queryFormRef.value.resetFields();
+ queryFormRef.value?.resetFields();
handleQuery();
}
/**鍒犻櫎鎸夐挳鎿嶄綔 */
@@ -343,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();
+ form.value = { ...initForm };
+ roleFormRef.value?.resetFields();
}
@@ -379,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鏌ヨ鑿滃崟鏍戠粨鏋� */
@@ -408,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 : []);
}
}
/** 鏍戞潈闄愶紙鐖跺瓙鑱斿姩锛� */
@@ -438,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);
@@ -466,7 +474,7 @@
/** 閫夋嫨瑙掕壊鏉冮檺鑼冨洿瑙﹀彂 */
const dataScopeSelectChange = (value: string) => {
if (value !== "2") {
- deptRef.value.setCheckedKeys([])
+ deptRef.value?.setCheckedKeys([])
}
}
/** 鍒嗛厤鏁版嵁鏉冮檺鎿嶄綔 */
@@ -476,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);
+ }
+ })
})
}
/** 鎻愪氦鎸夐挳锛堟暟鎹潈闄愶級 */
@@ -497,7 +505,7 @@
}
/** 鍙栨秷鎸夐挳锛堟暟鎹潈闄愶級*/
const cancelDataScope = () => {
- dataScopeRef.value.resetFields();
+ dataScopeRef.value?.resetFields();
form.value = {...initForm};
openDataScope.value = false;
}
--
Gitblit v1.9.3