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

refactor: API接口调用TypeScript类型约束完善

Browse Source
This commit is contained in:
郝先瑞
2022-03-13 16:27:42 +08:00
parent 476f223cc7
commit 7ff3436626
5 changed files with 367 additions and 334 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/views/system/role/index.vue
View File

@@ -4,110 +4,114 @@
<el-col :span="10" :xs="24">
<el-card class="box-card" shadow="always">
<template #header>
<svg-icon color="#333" icon-class="role"/>
<svg-icon color="#333" icon-class="role" />
角色列表
</template>
<role ref="role" @roleClick="handleRoleClick"/>
<role ref="role" @roleClick="handleRoleClick" />
</el-card>
</el-col>
<el-col :span="6" :xs="24">
<el-card class="box-card" shadow="always">
<template #header>
<svg-icon color="#333" icon-class="menu"/>
<span style="margin:0 5px;">菜单分配</span>
<svg-icon color="#333" icon-class="menu" />
<span style="margin: 0 5px">菜单分配</span>
<el-tag type="success" v-if="role.id">
<svg-icon color="green" icon-class="role"/>
<svg-icon color="green" icon-class="role" />
{{ role.name }}
</el-tag>
<el-tag type="warning" v-else size="small">请选择角色</el-tag>
</template>
<menus ref="menu" @menuClick="handleMenuClick" :role="role"/>
<menus ref="menu" @menuClick="handleMenuClick" :role="role" />
</el-card>
</el-col>
<el-col :span="8" :xs="24">
<el-card class="box-card" shadow="always">
<template #header>
<svg-icon color="#333" icon-class="perm"/>
<span style="margin:0 5px;">权限分配</span>
<svg-icon color="#333" icon-class="perm" />
<span style="margin: 0 5px">权限分配</span>
<el-tag type="success" style="margin:0 5px 0 0;" v-if="role.id" >
<svg-icon color="green" icon-class="role"/>
<el-tag type="success" style="margin: 0 5px 0 0" v-if="role.id">
<svg-icon color="green" icon-class="role" />
{{ role.name }}
</el-tag>
<el-tag type="warning" style="margin:0 5px 0 0;" v-else size="small"> 请选择角色</el-tag>
<el-tag
type="warning"
style="margin: 0 5px 0 0"
v-else
size="small"
>
请选择角色</el-tag
>
<el-tag type="success" v-if="menu.id" size="small">
<svg-icon color="red" icon-class="menu"/>
<svg-icon color="red" icon-class="menu" />
{{ menu.name }}
</el-tag>
<el-tag type="warning" v-else size="small"> 请选择菜单</el-tag>
</template>
<perm ref="perm" :menu="menu" :role="role"/>
<perm ref="perm" :menu="menu" :role="role" />
</el-card>
</el-col>
</el-row>
</div>
</template>
<script setup lang="ts">
import Role from './components/Role.vue'
import Menus from './components/Menu.vue'
import Perm from './components/Perm.vue'
import {reactive, toRefs} from "vue";
import {ElMessage} from "element-plus";
import SvgIcon from '@/components/SvgIcon/index.vue';
import { reactive, toRefs } from "vue";
import { ElMessage } from "element-plus";
import SvgIcon from "@/components/SvgIcon/index.vue";
import Role from "./components/Role.vue";
import Menus from "./components/Menu.vue";
import Perm from "./components/Perm.vue";
const state = reactive({
role: {
id: undefined,
name: '',
name: "",
},
menu: {
id: undefined,
name: ''
}
})
name: "",
},
});
const {role,menu} =toRefs(state)
const { role, menu } = toRefs(state);
function handleRoleClick(roleRow: any) {
if (roleRow) {
state.role = {
id: roleRow.id,
name: roleRow.name
}
name: roleRow.name,
};
} else {
state.role = {
id: undefined,
name: ''
}
name: "",
};
}
}
function handleMenuClick(menuRow: any) {
if (!state.role.id) {
ElMessage.warning('请选择角色')
return false
ElMessage.warning("请选择角色");
return false;
}
if (menuRow) {
state.menu = {
id: menuRow.id,
name: menuRow.label
}
id: menuRow.value,
name: menuRow.label,
};
} else {
state.menu = {
id: undefined,
name: ''
}
name: ""
};
}
}
</script>
<style scoped>
</style>