tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: element-plus版本升级问题调整

Browse Source 
Former-commit-id: 74a0b83abe42f3ace71c23b5091a5dc7cf487213
This commit is contained in:
郝先瑞
2022-04-19 01:04:31 +08:00
parent 02b64fa351
commit 20cfce9532
9 changed files with 75 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/system/dept.ts
View File

@@ -30,7 +30,7 @@ export function listSelectDepartments(): AxiosPromise<Option[]> {
*
* @param id
*/
export function getDeptFormDetail(id: number): AxiosPromise<DeptFormData> {
export function getDeptDetail(id: string): AxiosPromise<DeptFormData> {
return request({
url: '/youlai-admin/api/v1/depts/' + id,
method: 'get'
@@ -57,7 +57,7 @@ export function addDept(data: DeptFormData) {
* @param id
* @param data
*/
export function updateDept(id: number, data: DeptFormData) {
export function updateDept(id: string, data: DeptFormData) {
return request({
url: '/youlai-admin/api/v1/depts/' + id,
method: 'put',

4
src/api/system/menu.ts
View File

@@ -40,7 +40,7 @@ export function listSelectMenus(): AxiosPromise<Option[]> {
* 获取菜单详情
* @param id
*/
export function getMenuFormDetail(id: number): AxiosPromise<MenuFormData> {
export function getMenuDetail(id: number): AxiosPromise<MenuFormData> {
return request({
url: '/youlai-admin/api/v1/menus/' + id,
method: 'get'
@@ -66,7 +66,7 @@ export function addMenu(data: MenuFormData) {
* @param id
* @param data
*/
export function updateMenu(id: number, data: MenuFormData) {
export function updateMenu(id: string, data: MenuFormData) {
return request({
url: '/youlai-admin/api/v1/menus/' + id,
method: 'put',

14
src/components/IconSelect/index.vue
View File

@@ -1,10 +1,10 @@
<template>
<div class="icon-body">
<el-input v-model="iconName" style="position: relative;" clearable placeholder="请输入图标名称" @clear="filterIcons"
<div class="icon-select">
<el-input v-model="iconName" clearable placeholder="请输入图标名称" @clear="filterIcons"
@input="filterIcons">
<template #suffix><i class="el-icon-search el-input__icon" /></template>
</el-input>
<div class="icon-list">
<div class="icon-select__list">
<div v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)">
<svg-icon color="#999" :icon-class="item" style="height: 30px;width: 16px;margin-right: 5px" />
<span>{{ item }}</span>
@@ -18,9 +18,9 @@ import { ref } from "vue";
import SvgIcon from '@/components/SvgIcon/index.vue';
const icons = [] as string[]
const modules = import.meta.glob('../../assets/icons/svg/*.svg');
const modules = import.meta.glob('../../assets/icons/*.svg');
for (const path in modules) {
const p = path.split('assets/icons/svg/')[1].split('.svg')[0];
const p = path.split('assets/icons/')[1].split('.svg')[0];
icons.push(p);
}
const iconList = ref(icons);
@@ -52,11 +52,11 @@ defineExpose({
</script>
<style lang='scss' scoped>
.icon-body {
.icon-select {
width: 100%;
padding: 10px;
.icon-list {
&__list {
height: 200px;
overflow-y: scroll;

2
src/components/SvgIcon/index.vue
View File

@@ -14,7 +14,7 @@ const props=defineProps({
},
iconClass: {
type: String,
required: true,
required: false
},
color: {
type: String,

10
src/types/api/system/dept.d.ts vendored
View File

@@ -2,7 +2,7 @@
/**
* 部门查询参数类型声明
*/
export interface DeptQueryParam {
export interface DeptQueryParam {
name: string | undefined,
status: number | undefined
}
@@ -12,9 +12,9 @@ export interface DeptQueryParam {
*/
export interface DeptItem {
id: number;
id: string;
name: string;
parentId: number;
parentId: string;
treePath: string;
sort: number;
status: number;
@@ -28,8 +28,8 @@ export interface DeptItem {
* 部门表单类型声明
*/
export interface DeptFormData {
id: number|undefined,
parentId: number,
id?: string,
parentId: string,
name: string,
sort: number,
status: number

4
src/types/api/system/menu.d.ts vendored
View File

@@ -30,11 +30,11 @@ export interface MenuFormData {
/**
* 菜单ID
*/
id: number | undefined,
id: string ,
/**
* 父菜单ID
*/
parentId: number,
parentId: string,
/**
* 菜单名称
*/

20
src/views/system/dept/index.vue
View File

@@ -87,7 +87,7 @@ import { onMounted, reactive, unref, ref, toRefs } from "vue";
// API依赖
import {
getDeptFormDetail,
getDeptDetail,
deleteDept,
updateDept,
addDept,
@@ -177,11 +177,11 @@ function handleSelectionChange(selection: any) {
/**
* 加载部门下拉数据源
*/
async function loadDeptOptions() {
async function loadDeptData() {
const deptOptions: any[] = [];
listSelectDepartments().then((response) => {
const rootDeptOption = {
id: 0,
value: "0",
label: "顶级部门",
children: response.data,
};
@@ -194,11 +194,11 @@ async function loadDeptOptions() {
* 添加部门
*/
function handleAdd(row: any) {
loadDeptOptions();
loadDeptData();
state.formData.parentId = row.id;
state.dialog = {
title: "添加部门",
visible: true,
visible: true
};
}
@@ -206,13 +206,13 @@ function handleAdd(row: any) {
* 修改部门
*/
async function handleUpdate(row: any) {
await loadDeptOptions();
await loadDeptData();
const deptId = row.id || state.ids;
state.dialog = {
title: "修改部门",
visible: true,
visible: true
};
getDeptFormDetail(deptId).then((response: any) => {
getDeptDetail(deptId).then((response: any) => {
state.formData = response.data;
});
}
@@ -221,8 +221,7 @@ async function handleUpdate(row: any) {
* 部门表单提交
*/
function submitForm() {
const dataForm = unref(dataFormRef);
dataForm.validate((valid: any) => {
dataFormRef.value.validate((valid: any) => {
if (valid) {
if (state.formData.id) {
updateDept(state.formData.id, state.formData).then(() => {
@@ -270,7 +269,6 @@ function handleDelete(row: any) {
* 取消/关闭弹窗
**/
function cancel() {
state.formData.id = undefined;
dataFormRef.value.resetFields();
state.dialog.visible = false;
}

49
src/views/system/menu/components/Menu.vue
View File

@@ -33,6 +33,9 @@
</template>
</el-table-column>
<el-table-column label="排序" align="center" width="100" prop="sort">
</el-table-column>
<el-table-column label="操作" align="center" width="200">
<template #default="scope">
<el-button type="success" :icon="Plus" circle plain @click.stop="handleAdd(scope.row)" />
@@ -43,7 +46,7 @@
</el-table>
<!-- 弹窗表单 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="750px">
<el-dialog :title="dialog.title" v-model="dialog.visible" @close="cancel" width="750px">
<el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="父级菜单" prop="parentId">
<el-tree-select v-model="formData.parentId" placeholder="选择上级菜单" :data="menuOptions" filterable />
@@ -76,16 +79,16 @@
</el-form-item>
<el-form-item label="图标" prop="icon">
<el-popover placement="bottom-start" :width="570" trigger="click" visible="iconSelectVisible">
<icon-select ref="iconSelectRef" @selected="selected" />
<el-popover ref="popoverRef" placement="bottom-start" :width="570" trigger="click">
<template #reference>
<el-input v-model="formData.icon" placeholder="点击选择图标" readonly @click="iconSelectVisible = true">
<template #prefix>
<svg-icon :icon-class="formData.icon ? formData.icon : 'color'" class="el-input__icon"
style="margin: auto" color="#999" />
<svg-icon :icon-class="formData.icon" style="margin: auto" />
</template>
</el-input>
</template>
<icon-select @selected="selected" />
</el-popover>
</el-form-item>
@@ -119,7 +122,7 @@
import { reactive, ref, onMounted, toRefs } from "vue";
import { Search, Plus, Edit, Refresh, Delete } from "@element-plus/icons-vue";
import { ElForm, ElMessage, ElMessageBox } from "element-plus";
import { ElForm, ElMessage, ElMessageBox, ElPopover } from "element-plus";
import { isExternal } from "@/utils/validate";
import {
@@ -132,21 +135,20 @@ import {
// API 依赖
import {
listTableMenus,
getMenuFormDetail,
getMenuDetail,
listSelectMenus,
addMenu,
deleteMenus,
updateMenu,
updateMenu
} from "@/api/system/menu";
import SvgIcon from "@/components/SvgIcon/index.vue";
import IconSelect from "@/components/IconSelect/index.vue";
const emit = defineEmits(["menuClick"]);
const iconSelectRef = ref(null);
const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);
const popoverRef = ref(ElPopover)
const state = reactive({
loading: true,
@@ -160,7 +162,7 @@ const state = reactive({
menuList: [] as MenuItem[],
dialog: { visible: false } as Dialog,
formData: {
parentId: 0,
parentId: "0",
visible: 1,
sort: 1,
component: "Layout",
@@ -173,6 +175,7 @@ const state = reactive({
menuOptions: [] as Option[],
currentRow: undefined,
isExternalPath: false,
// Icon选择器显示状态
iconSelectVisible: false
});
@@ -185,7 +188,7 @@ const {
rules,
menuOptions,
isExternalPath,
iconSelectVisible,
iconSelectVisible
} = toRefs(state);
/**
@@ -204,10 +207,10 @@ function handleQuery() {
/**
* 加载菜单下拉树
*/
async function loadTreeSelectMenuOptions() {
async function loadMenuData() {
const menuOptions: any[] = [];
await listSelectMenus().then(({ data }) => {
const menuOption = { value: 0, label: "顶级菜单", children: data };
const menuOption = { value: "0", label: "顶级菜单", children: data };
menuOptions.push(menuOption);
state.menuOptions = menuOptions;
});
@@ -227,7 +230,7 @@ function handleRowClick(row: any) {
}
async function handleAdd(row: any) {
await loadTreeSelectMenuOptions();
await loadMenuData();
state.dialog = {
title: "添加菜单",
visible: true,
@@ -246,20 +249,22 @@ async function handleAdd(row: any) {
state.formData.parentId = (state.currentRow as any).id;
state.formData.component = "";
} else {
state.formData.parentId = 0;
state.formData.parentId = "0";
state.formData.component = "Layout";
}
}
}
async function handleUpdate(row: any) {
await loadTreeSelectMenuOptions();
await loadMenuData();
console.log('menuop',state.menuOptions)
state.dialog = {
title: "修改菜单",
visible: true,
visible: true
};
const id = row.id || state.ids;
getMenuFormDetail(id).then(({ data }) => {
console.log('id',id)
getMenuDetail(id).then(({ data }) => {
state.formData = data;
// 判断是否外部链接
state.isExternalPath = isExternal(state.formData.path);
@@ -267,7 +272,7 @@ async function handleUpdate(row: any) {
}
/**
* 表单提交
* 菜单表单提交
*/
function submitForm() {
dataFormRef.value.validate((isValid: boolean) => {
@@ -309,7 +314,6 @@ function handleDelete(row: any) {
* 取消关闭弹窗
*/
function cancel() {
state.formData.id = undefined;
dataFormRef.value.resetFields();
state.dialog.visible = false;
}
@@ -322,7 +326,8 @@ function selected(name: string) {
state.iconSelectVisible = false;
}
onMounted(() => {
handleQuery();
});
</script>
</script>

44
src/views/system/role/components/Menu.vue
View File

@@ -1,19 +1,15 @@
<template>
<div class="menu-container">
<el-form>
<el-form-item>
<el-row>
<el-col :span="16">
<el-button type="success" plain :icon="Switch" @click="toggleExpandAll">展开/折叠</el-button>
</el-col>
<el-col :span="8" style="text-align: right">
<el-button type="primary" :icon="Check" @click="handleSubmit">提交</el-button>
</el-col>
</el-row>
</el-form-item>
</el-form>
<el-row>
<el-col :span="12">
<el-button plain :icon="Switch" @click="toggleExpandAll">展开/折叠</el-button>
</el-col>
<el-col :span="12" style="text-align: right">
<el-button type="primary" :icon="Check" @click="handleSubmit">提交</el-button>
</el-col>
</el-row>
<el-tree ref="menuRef" v-if="refreshTree" :default-expanded-keys="expandedKeys" :default-expand-all="isExpandAll"
<el-tree class="menu-container__tree" ref="menuRef" v-if="refreshTree" :default-expanded-keys="expandedKeys" :default-expand-all="isExpandAll"
:data="menuOptions" show-checkbox node-key="value" empty-text="加载菜单中..." :check-strictly="checkStrictly"
highlight-current @node-click="handleNodeClick" />
</div>
@@ -31,21 +27,19 @@ const emit = defineEmits(["menuClick"]);
const props = defineProps({
role: {
type: Object,
default: () => {
return {}
},
default: () => { }
},
});
const menuRef = ref(ElTree); // 属性名必须和元素的ref属性值一致
watch(
() => props.role.id as any,
() => {
const roleId = props.role.id;
if (roleId) {
() => props.role.id,
(newVal) => {
if (newVal) {
state.checkStrictly = true;
listRoleMenuIds(roleId).then(({ data }) => {
// 获取角色拥有的的菜单ID
listRoleMenuIds(newVal).then(({ data }) => {
menuRef.value.setCheckedKeys(data);
state.checkStrictly = false;
});
@@ -67,7 +61,7 @@ const { expandedKeys, menuOptions, checkStrictly, isExpandAll, refreshTree } =
/**
* 加载菜单树
*/
async function loadTreeSelectMenuOptions() {
async function loadMenuData() {
await listSelectMenus().then(({ data }) => {
state.menuOptions = data;
});
@@ -101,12 +95,14 @@ function handleSubmit() {
}
onMounted(() => {
loadTreeSelectMenuOptions();
loadMenuData();
});
</script>
<style lang="scss" scoped>
.menu-container {
width: 100%;
&__tree{
margin-top: 10px;
}
}
</style>