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

feat: 同步接口更新

Browse Source 
Former-commit-id: 29a22a96043a55445d48a086aa0a9157bcf7d6c6
This commit is contained in:
郝先瑞
2022-08-02 23:48:23 +08:00
parent 0fbefbcf73
commit b71d999d5e
22 changed files with 390 additions and 702 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/views/system/client/index.vue
View File

@@ -142,16 +142,12 @@ function submitForm() {
});
}
function resetForm() {
function cancel() {
state.dialog.visible = false;
dataFormRef.value.resetFields();
state.checkedAuthorizedGrantTypes = [];
}
function cancel() {
resetForm();
state.dialog.visible = false;
}
function handleDelete(row: any) {
const clientIds = [row.clientId || ids].join(',');
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {

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

@@ -192,8 +192,10 @@ function handleDelete(row: any) {
* 取消/关闭弹窗
**/
function cancel() {
dialog.value.visible = false;
formData.value.id = undefined;
dataFormRef.value.resetFields();
state.dialog.visible = false;
dataFormRef.value.clearValidate();
}
onMounted(() => {

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

@@ -44,6 +44,16 @@
</template>
</el-table-column>
<el-table-column label="菜单类型" align="center" width="100">
<template #default="scope">
<el-tag v-if="scope.row.type === 'MENU'" type="success">菜单</el-tag>
<el-tag v-if="scope.row.type === 'CATALOG'" type="warning"
>目录</el-tag
>
<el-tag v-if="scope.row.type === 'EXTLINK'" type="info">外链</el-tag>
</template>
</el-table-column>
<el-table-column label="状态" align="center" width="100">
<template #default="scope">
<el-tag v-if="scope.row.visible === 1" type="success">显示</el-tag>
@@ -261,7 +271,7 @@ const state = reactive({
name: '',
visible: 1,
sort: 1,
component: 'Layout',
component: undefined,
type: 'MENU',
} as MenuFormData,
rules: {
@@ -333,8 +343,12 @@ function handleRowClick(row: any) {
emit('menuClick', row);
}
/**
* 新增菜单
* @param row
*/
async function handleAdd(row: any) {
state.formData.id = undefined;
formData.value.id = undefined;
await loadMenuData();
state.dialog = {
title: '添加菜单',
@@ -342,7 +356,6 @@ async function handleAdd(row: any) {
};
if (row.id) {
// 行点击新增
state.formData.parentId = row.id;
if (row.id == '0') {
state.formData.type = 'CATALOG';
@@ -362,15 +375,15 @@ async function handleAdd(row: any) {
}
/**
* 修改弹窗
* 编辑菜单
*/
async function handleUpdate(row: any) {
async function handleUpdate(row: MenuFormData) {
await loadMenuData();
state.dialog = {
title: '修改菜单',
title: '编辑菜单',
visible: true,
};
const id = row.id || state.ids;
const id = row.id as string;
getMenuDetail(id).then(({ data }) => {
state.formData = data;
cacheData.value.menuType = data.type;
@@ -379,10 +392,10 @@ async function handleUpdate(row: any) {
}
/**
* 菜单类型change事件
* 菜单类型 change
*/
function handleMenuTypeChange(val: any) {
if (val !== cacheData.value.menuType) {
function handleMenuTypeChange(menuType: any) {
if (menuType !== cacheData.value.menuType) {
formData.value.path = '';
} else {
formData.value.path = cacheData.value.menuPath;
@@ -412,6 +425,11 @@ function submitForm() {
});
}
/**
* 删除菜单
*
* @param row
*/
function handleDelete(row: any) {
const ids = [row.id || state.ids].join(',');
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {

20
src/views/system/menu/components/Perm.vue
View File

@@ -25,6 +25,7 @@ import {
PermItem,
PermQueryParam,
} from '@/types/api/system/perm';
import { MenuItem } from '@/types/api/system/menu';
const { proxy }: any = getCurrentInstance();
@@ -32,19 +33,23 @@ const queryFormRef = ref(ElForm);
const dataFormRef = ref(ElForm);
const props = defineProps({
menuId: {
type: String,
menu: {
type: Object,
default: () => {
return '';
return {} as MenuItem;
},
},
});
watch(
() => props.menuId,
() => props.menu,
(value) => {
state.queryParams.menuId = value;
queryParams.value.menuId = value.id;
console.log('menu', value);
handleQuery();
},
{
deep: true,
}
);
@@ -193,7 +198,7 @@ function submitForm() {
state.urlPerm.requestPath;
}
state.formData.menuId = props.menuId;
formData.value.menuId = props.menu.id;
if (state.formData.id) {
updatePerm(state.formData.id, state.formData).then(() => {
ElMessage.success('修改成功');
@@ -258,7 +263,7 @@ onMounted(() => {
<el-button
type="success"
:icon="Plus"
:disabled="!menuId"
v-if="menu.id && menu.type == 'MENU'"
@click="handleAdd"
>新增</el-button
>
@@ -267,6 +272,7 @@ onMounted(() => {
:icon="Delete"
:disabled="multiple"
@click="handleDelete"
v-if="menu.id && menu.type == 'MENU'"
>删除</el-button
>
</el-form-item>

30
src/views/system/menu/index.vue
View File

@@ -15,14 +15,14 @@
<template #header>
<svg-icon icon-class="perm" />
<span style="margin: 0 5px">权限列表</span>
<el-tag type="success" v-if="menuId" size="small">{{
menuName
<el-tag type="success" v-if="menu.id" size="small">{{
menu.name
}}</el-tag>
<el-tag type="warning" v-else size="small"
>请点击左侧菜单列表选择</el-tag
<el-link :underline="false" type="warning" v-else size="small"
><el-icon><WarningFilled /></el-icon>请选中左侧菜单</el-link
>
</template>
<perm-table :menuId="menuId" :menuName="menuName" />
<perm-table :menu="menu" />
</el-card>
</el-col>
</el-row>
@@ -35,21 +35,23 @@ import MenuTable from './components/Menu.vue';
import PermTable from './components/Perm.vue';
import { reactive, toRefs } from 'vue';
import { WarningFilled } from '@element-plus/icons-vue';
import { MenuItem } from '@/types/api/system/menu';
const state = reactive({
menuId: undefined,
menuName: '',
menu: {} as MenuItem,
});
const { menuId, menuName } = toRefs(state);
const { menu } = toRefs(state);
function handleMenuClick(menuRow: any) {
function handleMenuClick(menuRow: MenuItem) {
if (menuRow) {
state.menuId = menuRow.id;
state.menuName = menuRow.name;
menu.value.id = menuRow.id;
menu.value.type = menuRow.type;
menu.value.name = menuRow.name;
} else {
state.menuId = undefined;
state.menuName = '';
menu.value.id = undefined;
menu.value.type = undefined;
menu.value.name = '';
}
}
</script>

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

@@ -5,17 +5,17 @@ export default {
</script>
<script setup lang="ts">
import { onMounted, reactive, ref, toRefs, nextTick } from 'vue';
import { nextTick, onMounted, reactive, ref, toRefs } from 'vue';
import {
listRolePages,
updateRole,
getRoleFormDetail,
addRole,
deleteRoles,
getRoleResourceIds,
getRoleResources,
updateRoleResource,
} from '@/api/system/role';
import { getResource } from '@/api/system/menu';
import { listResources } from '@/api/system/menu';
import { ElForm, ElMessage, ElMessageBox, ElTree } from 'element-plus';
import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
@@ -24,6 +24,7 @@ import {
RoleItem,
RoleQueryParam,
} from '@/types/api/system/role';
import { Resource } from '@/types/api/system/menu';
import SvgIcon from '@/components/SvgIcon/index.vue';
const emit = defineEmits(['roleClick']);
@@ -55,8 +56,11 @@ const state = reactive({
code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }],
},
resourceDialogVisible: false,
menuOptions: [] as any[],
permOptions: [] as any[],
resourceOptions: [] as Resource[],
btnPerms: {} as any,
// 勾选的菜单ID
checkedMenuIds: new Set([]),
allPermIds: [] as string[],
checkedRole: {
id: '',
name: '',
@@ -73,9 +77,9 @@ const {
formData,
rules,
resourceDialogVisible,
menuOptions,
permOptions,
checkedRole,
resourceOptions,
btnPerms,
} = toRefs(state);
function handleQuery() {
@@ -87,7 +91,9 @@ function handleQuery() {
state.loading = false;
});
}
/**
* 查询重置
*/
function resetQuery() {
queryFormRef.value.resetFields();
handleQuery();
@@ -148,8 +154,10 @@ function submitFormData() {
* 取消
*/
function cancel() {
state.dialog.visible = false;
dialog.value.visible = false;
formData.value.id = undefined;
dataFormRef.value.resetFields();
dataFormRef.value.clearValidate();
}
/**
@@ -171,13 +179,26 @@ function handleDelete(row: any) {
.catch(() => ElMessage.info('已取消删除'));
}
const handleResourceCheckChange = (
data: Resource,
isCheck: boolean,
sonHasCheck: boolean
) => {
console.log('data', data);
console.log('isCheck', isCheck);
if (data.perms) {
data.perms.forEach((item) => {
btnPerms.value[item.value] = isCheck;
});
}
};
/**
* 分配资源权限
* 分配资源(菜单+权限)弹窗
*/
function handleResourceAssign(row: RoleItem) {
function openRoleResourceDialog(row: RoleItem) {
resourceDialogVisible.value = true;
loading.value = true;
permOptions.value.map((item) => (item.checked = false));
const roleId: any = row.id;
checkedRole.value = {
@@ -185,47 +206,72 @@ function handleResourceAssign(row: RoleItem) {
name: row.name,
};
//资源下拉数据
getResource().then((response) => {
state.menuOptions = response.data.menus;
state.permOptions = response.data.perms;
// 获取所有的资源
listResources().then((response) => {
resourceOptions.value = response.data;
// 获取角色拥有的资源数据进行勾选
getRoleResourceIds(roleId).then((res) => {
const checkedMenuIds = res.data.menuIds;
const checkedPermIds = res.data.permIds;
// 获取角色拥有的资源
getRoleResources(roleId).then(({ data }) => {
// 勾选的菜单回显
const checkedMenuIds = data.menuIds;
resourceRef.value.setCheckedKeys(checkedMenuIds);
permOptions.value.forEach((perm) => {
if (checkedPermIds.includes(perm.value)) {
perm.checked = true;
} else {
perm.checked = false;
nextTick(() => {
// 勾选的权限回显
const rolePermIds = data.permIds;
state.allPermIds = filterResourcePermIds(response.data, []);
if (state.allPermIds) {
state.allPermIds.forEach((permId) => {
if (rolePermIds.indexOf(permId) > -1) {
btnPerms.value[permId] = true;
} else {
btnPerms.value[permId] = false;
}
});
}
loading.value = false;
});
loading.value = false;
});
});
}
const filterResourcePermIds = (resources: Resource[], permIds: string[]) => {
resources.forEach((resource) => {
if (resource.perms) {
resource.perms.forEach((perm) => {
permIds.push(perm.value);
});
}
if (resource.children) {
filterResourcePermIds(resource.children, permIds);
}
});
return permIds;
};
/**
* 分配资源权限提交
* 分配资源提交
*/
function handleRoleResourceSubmit() {
const checkedMenuIds: any[] = resourceRef.value
.getCheckedNodes(false, true)
.map((node: any) => node.value);
const checkedPermIds = state.permOptions
.filter((item) => item.checked)
.map((item) => item.value);
const checkedPermIds = [] as string[];
if (state.allPermIds) {
state.allPermIds.forEach((permId) => {
if (btnPerms.value[permId]) {
checkedPermIds.push(permId);
}
});
}
const roleResourceData = {
const RoleResource = {
menuIds: checkedMenuIds,
permIds: checkedPermIds,
};
updateRoleResource(checkedRole.value.id, roleResourceData).then((res) => {
updateRoleResource(checkedRole.value.id, RoleResource).then((res) => {
ElMessage.success('分配权限成功');
state.resourceDialogVisible = false;
handleQuery();
@@ -291,14 +337,16 @@ onMounted(() => {
<el-table-column label="角色编码" prop="code" />
<el-table-column label="操作" align="center" width="200">
<template #default="scope">
<el-button
type="primary"
circle
plain
@click.stop="handleResourceAssign(scope.row)"
>
<svg-icon icon-class="perm" />
</el-button>
<el-tooltip content="分配资源" effect="light">
<el-button
type="success"
circle
plain
@click.stop="openRoleResourceDialog(scope.row)"
>
<svg-icon icon-class="perm" />
</el-button>
</el-tooltip>
<el-button
type="primary"
@@ -373,37 +421,38 @@ onMounted(() => {
</template>
</el-dialog>
<!--分配权限弹窗-->
<!--分配资源弹窗-->
<el-dialog
:title="'【' + checkedRole.name + '】分配权限'"
:title="'角色【' + checkedRole.name + '】资源分配'"
v-model="resourceDialogVisible"
width="1000px"
width="800px"
>
<el-scrollbar max-height="600px" v-loading="loading">
<el-tree
ref="resourceRef"
node-key="value"
show-checkbox
:data="menuOptions"
:data="resourceOptions"
:default-expand-all="true"
@check-change="handleResourceCheckChange"
>
<template #default="{ node, data }">
<div v-if="data.isPerm == true" class="resource-tree-node">
<div class="resource-tree-node__content">
<template #default="{ data }">
{{ data.label }}
<div v-if="data.perms" class="resource-tree-node">
<el-divider direction="vertical" />
<div class="node-content">
<el-checkbox
v-for="perm in permOptions.filter(
(perm) => perm.parentId == data.permPid
)"
v-for="perm in data.perms"
:key="perm.value"
:label="perm.value"
v-model="perm.checked"
border
size="small"
v-model="btnPerms[perm.value]"
>{{ perm.label }}</el-checkbox
>
</div>
</div>
<span v-else>{{ node.label }}</span>
</template>
</el-tree>
</el-scrollbar>
@@ -425,18 +474,16 @@ onMounted(() => {
width: 100%;
flex-wrap: wrap;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
margin-left: -28px !important;
&__content {
justify-content: flex-end;
margin: 0 50px;
.node-content {
width: 400px;
display: flex;
flex-wrap: wrap;
}
.el-checkbox--default {
background-color: transparent !important;
.el-divider--vertical {
height: 2em !important;
}
}
.el-tree-node__content {

5
src/views/system/user/index.vue
View File

@@ -348,9 +348,10 @@ function handleDelete(row: { [key: string]: any }) {
* 取消
*/
function cancel() {
state.dialog.visible = false;
state.formData.id = undefined;
dialog.value.visible = false;
formData.value.id = undefined;
dataFormRef.value.resetFields();
dataFormRef.value.clearValidate();
}
/**