style: 全局代码格式化
Former-commit-id: bb50c8419b8fcdeb48c93fce9f399d901e8f5a52
This commit is contained in:
郝先瑞
@@ -1,113 +1,128 @@
|
||||
<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "cmenu"
|
||||
name: 'cmenu'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { nextTick, onMounted, reactive, ref, toRefs, watch } from "vue";
|
||||
import { listSelectMenus } from "@/api/system/menu";
|
||||
import { listRoleMenuIds, updateRoleMenu } from "@/api/system/role";
|
||||
import { ElTree, ElMessage } from "element-plus";
|
||||
import { Switch, Position } from "@element-plus/icons-vue";
|
||||
import { Option } from "@/types";
|
||||
import { nextTick, onMounted, reactive, ref, toRefs, watch } from 'vue';
|
||||
import { listSelectMenus } from '@/api/system/menu';
|
||||
import { listRoleMenuIds, updateRoleMenu } from '@/api/system/role';
|
||||
import { ElTree, ElMessage } from 'element-plus';
|
||||
import { Switch, Position } from '@element-plus/icons-vue';
|
||||
import { Option } from '@/types';
|
||||
|
||||
const emit = defineEmits(["menuClick"]);
|
||||
const emit = defineEmits(['menuClick']);
|
||||
const props = defineProps({
|
||||
role: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
role: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
});
|
||||
|
||||
const menuRef = ref(ElTree); // 属性名必须和元素的ref属性值一致
|
||||
|
||||
watch(
|
||||
() => props.role.id,
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
state.checkStrictly = true;
|
||||
// 获取角色拥有的的菜单ID
|
||||
listRoleMenuIds(newVal).then(({ data }) => {
|
||||
menuRef.value.setCheckedKeys(data);
|
||||
state.checkStrictly = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
() => props.role.id,
|
||||
newVal => {
|
||||
if (newVal) {
|
||||
state.checkStrictly = true;
|
||||
// 获取角色拥有的的菜单ID
|
||||
listRoleMenuIds(newVal).then(({ data }) => {
|
||||
menuRef.value.setCheckedKeys(data);
|
||||
state.checkStrictly = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const state = reactive({
|
||||
expandedKeys: [], // 展开的节点
|
||||
menuOptions: [] as Option[],
|
||||
checkStrictly: false,
|
||||
isExpandAll: true,
|
||||
refreshTree: true,
|
||||
expandedKeys: [], // 展开的节点
|
||||
menuOptions: [] as Option[],
|
||||
checkStrictly: false,
|
||||
isExpandAll: true,
|
||||
refreshTree: true
|
||||
});
|
||||
|
||||
const { expandedKeys, menuOptions, checkStrictly, isExpandAll, refreshTree } =
|
||||
toRefs(state);
|
||||
toRefs(state);
|
||||
|
||||
/**
|
||||
* 加载菜单树
|
||||
*/
|
||||
async function loadMenuData() {
|
||||
await listSelectMenus().then(({ data }) => {
|
||||
state.menuOptions = data;
|
||||
});
|
||||
await listSelectMenus().then(({ data }) => {
|
||||
state.menuOptions = data;
|
||||
});
|
||||
}
|
||||
|
||||
function handleNodeClick(node: any) {
|
||||
emit("menuClick", node);
|
||||
emit('menuClick', node);
|
||||
}
|
||||
|
||||
/**
|
||||
* 展开/收缩
|
||||
*/
|
||||
function toggleExpandAll() {
|
||||
state.refreshTree = false;
|
||||
state.isExpandAll = !state.isExpandAll;
|
||||
nextTick(() => {
|
||||
state.refreshTree = true;
|
||||
});
|
||||
state.refreshTree = false;
|
||||
state.isExpandAll = !state.isExpandAll;
|
||||
nextTick(() => {
|
||||
state.refreshTree = true;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 保存角色菜单
|
||||
*/
|
||||
function handleSubmit() {
|
||||
const checkedMenuIds = menuRef.value
|
||||
.getCheckedNodes(false, true)
|
||||
.map((node: any) => node.value);
|
||||
updateRoleMenu(props.role.id, checkedMenuIds).then(() => {
|
||||
ElMessage.success("提交成功");
|
||||
});
|
||||
const checkedMenuIds = menuRef.value
|
||||
.getCheckedNodes(false, true)
|
||||
.map((node: any) => node.value);
|
||||
updateRoleMenu(props.role.id, checkedMenuIds).then(() => {
|
||||
ElMessage.success('提交成功');
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadMenuData();
|
||||
loadMenuData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<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="Position" @click="handleSubmit">提交</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="app-container">
|
||||
<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="Position" @click="handleSubmit"
|
||||
>提交</el-button
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-tree class="menu-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>
|
||||
<el-tree
|
||||
class="menu-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>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.menu-tree {
|
||||
margin-top: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,144 +1,162 @@
|
||||
<template>
|
||||
<div class="perm-container">
|
||||
<div v-if="permissionOptions.length > 0">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
|
||||
</el-checkbox>
|
||||
</el-col>
|
||||
<el-col :span="12" style="text-align: right">
|
||||
<el-button type="primary" :icon="Position" @click="handleSubmit">提交</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="perm-container">
|
||||
<div v-if="permissionOptions.length > 0">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-checkbox
|
||||
:indeterminate="isIndeterminate"
|
||||
v-model="checkAll"
|
||||
@change="handleCheckAllChange"
|
||||
>全选
|
||||
</el-checkbox>
|
||||
</el-col>
|
||||
<el-col :span="12" style="text-align: right">
|
||||
<el-button type="primary" :icon="Position" @click="handleSubmit"
|
||||
>提交</el-button
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="8" v-for="item in permissionOptions" style="margin-top: 20px" :key="item.id">
|
||||
<el-checkbox border v-model="item.checked" :label="item.id" :key="item.id" @change="handleCheckedPermChange">
|
||||
{{ item.name }}
|
||||
</el-checkbox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div style="text-align: center" v-else>
|
||||
<el-empty :description="
|
||||
!role
|
||||
? '请选择角色'
|
||||
: !menu
|
||||
? '请选择菜单'
|
||||
: '暂无数据，您可在【菜单管理】配置权限数据'
|
||||
"></el-empty>
|
||||
</div>
|
||||
</div>
|
||||
<el-row>
|
||||
<el-col
|
||||
:span="8"
|
||||
v-for="item in permissionOptions"
|
||||
style="margin-top: 20px"
|
||||
:key="item.id"
|
||||
>
|
||||
<el-checkbox
|
||||
border
|
||||
v-model="item.checked"
|
||||
:label="item.id"
|
||||
:key="item.id"
|
||||
@change="handleCheckedPermChange"
|
||||
>
|
||||
{{ item.name }}
|
||||
</el-checkbox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div style="text-align: center" v-else>
|
||||
<el-empty
|
||||
:description="
|
||||
!role
|
||||
? '请选择角色'
|
||||
: !menu
|
||||
? '请选择菜单'
|
||||
: '暂无数据，您可在【菜单管理】配置权限数据'
|
||||
"
|
||||
></el-empty>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, toRefs, watch } from "vue";
|
||||
import { listPerms } from "@/api/system/perm";
|
||||
import { listRolePerms, saveRolePerms } from "@/api/system/role";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { Position } from "@element-plus/icons-vue";
|
||||
import { PermQueryParam } from "@/types";
|
||||
import { onMounted, reactive, toRefs, watch } from 'vue';
|
||||
import { listPerms } from '@/api/system/perm';
|
||||
import { listRolePerms, saveRolePerms } from '@/api/system/role';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { Position } from '@element-plus/icons-vue';
|
||||
import { PermQueryParam } from '@/types';
|
||||
|
||||
const props = defineProps({
|
||||
role: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
menu: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
role: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
menu: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.menu.id,
|
||||
(value) => {
|
||||
if (value) {
|
||||
loadData();
|
||||
}
|
||||
}
|
||||
() => props.menu.id,
|
||||
value => {
|
||||
if (value) {
|
||||
loadData();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
permissionOptions: [] as Array<any>,
|
||||
isIndeterminate: true,
|
||||
checkAll: false,
|
||||
checkedPerms: [],
|
||||
loading: false,
|
||||
permissionOptions: [] as Array<any>,
|
||||
isIndeterminate: true,
|
||||
checkAll: false,
|
||||
checkedPerms: []
|
||||
});
|
||||
|
||||
const { permissionOptions, isIndeterminate, checkAll } = toRefs(state);
|
||||
|
||||
function handleCheckAllChange(checked: boolean) {
|
||||
state.isIndeterminate = false;
|
||||
if (checked) {
|
||||
state.permissionOptions.map((item) => (item.checked = true));
|
||||
} else {
|
||||
// 全不选
|
||||
state.permissionOptions.map((item) => (item.checked = false));
|
||||
}
|
||||
state.isIndeterminate = false;
|
||||
if (checked) {
|
||||
state.permissionOptions.map(item => (item.checked = true));
|
||||
} else {
|
||||
// 全不选
|
||||
state.permissionOptions.map(item => (item.checked = false));
|
||||
}
|
||||
}
|
||||
|
||||
function handleCheckedPermChange() {
|
||||
const checkedCount = state.permissionOptions.filter(
|
||||
(item) => item.checked
|
||||
).length;
|
||||
state.checkAll = checkedCount === state.permissionOptions.length;
|
||||
state.isIndeterminate =
|
||||
checkedCount > 0 && checkedCount < state.permissionOptions.length;
|
||||
const checkedCount = state.permissionOptions.filter(
|
||||
item => item.checked
|
||||
).length;
|
||||
state.checkAll = checkedCount === state.permissionOptions.length;
|
||||
state.isIndeterminate =
|
||||
checkedCount > 0 && checkedCount < state.permissionOptions.length;
|
||||
}
|
||||
|
||||
function loadData() {
|
||||
if (!props.menu.id) {
|
||||
resetData();
|
||||
return false;
|
||||
}
|
||||
state.loading = true;
|
||||
if (!props.menu.id) {
|
||||
resetData();
|
||||
return false;
|
||||
}
|
||||
state.loading = true;
|
||||
|
||||
const params = { menuId: props.menu.id } as PermQueryParam;
|
||||
listPerms(params).then(({ data }) => {
|
||||
state.permissionOptions = data;
|
||||
listRolePerms(props.role.id, props.menu.id).then((response) => {
|
||||
const checkedPermIds = response.data;
|
||||
state.permissionOptions.map((item: any) => {
|
||||
if (checkedPermIds.includes(item.id)) {
|
||||
item.checked = true;
|
||||
} else {
|
||||
state.checkAll = false;
|
||||
}
|
||||
});
|
||||
state.loading = false;
|
||||
});
|
||||
});
|
||||
const params = { menuId: props.menu.id } as PermQueryParam;
|
||||
listPerms(params).then(({ data }) => {
|
||||
state.permissionOptions = data;
|
||||
listRolePerms(props.role.id, props.menu.id).then(response => {
|
||||
const checkedPermIds = response.data;
|
||||
state.permissionOptions.map((item: any) => {
|
||||
if (checkedPermIds.includes(item.id)) {
|
||||
item.checked = true;
|
||||
} else {
|
||||
state.checkAll = false;
|
||||
}
|
||||
});
|
||||
state.loading = false;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function handleSubmit() {
|
||||
const checkedPermIds = state.permissionOptions
|
||||
.filter((item) => item.checked)
|
||||
.map((item) => item.id);
|
||||
saveRolePerms(props.role.id, props.menu.id, checkedPermIds).then(() => {
|
||||
ElMessage.success("提交成功");
|
||||
});
|
||||
const checkedPermIds = state.permissionOptions
|
||||
.filter(item => item.checked)
|
||||
.map(item => item.id);
|
||||
saveRolePerms(props.role.id, props.menu.id, checkedPermIds).then(() => {
|
||||
ElMessage.success('提交成功');
|
||||
});
|
||||
}
|
||||
|
||||
function resetData() {
|
||||
state.permissionOptions = [];
|
||||
state.isIndeterminate = true;
|
||||
state.checkAll = false;
|
||||
state.permissionOptions = [];
|
||||
state.isIndeterminate = true;
|
||||
state.checkAll = false;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadData();
|
||||
loadData();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.perm-container {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,228 +1,277 @@
|
||||
<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "role"
|
||||
name: 'role'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref, toRefs } from "vue";
|
||||
import { onMounted, reactive, ref, toRefs } from 'vue';
|
||||
import {
|
||||
listRolePages,
|
||||
updateRole,
|
||||
getRoleFormDetail,
|
||||
addRole,
|
||||
deleteRoles
|
||||
} from "@/api/system/role";
|
||||
import { ElForm, ElMessage, ElMessageBox } from "element-plus";
|
||||
import { Search, Plus, Edit, Refresh, Delete } from "@element-plus/icons-vue";
|
||||
import { RoleFormData, RoleItem, RoleQueryParam } from "@/types";
|
||||
listRolePages,
|
||||
updateRole,
|
||||
getRoleFormDetail,
|
||||
addRole,
|
||||
deleteRoles
|
||||
} from '@/api/system/role';
|
||||
import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
|
||||
import { RoleFormData, RoleItem, RoleQueryParam } from '@/types';
|
||||
|
||||
const emit = defineEmits(["roleClick"]);
|
||||
const emit = defineEmits(['roleClick']);
|
||||
const queryFormRef = ref(ElForm);
|
||||
const dataFormRef = ref(ElForm); // 属性名必须和元素的ref属性值一致
|
||||
|
||||
const state = reactive({
|
||||
loading: true,
|
||||
// 选中ID数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
} as RoleQueryParam,
|
||||
roleList: [] as RoleItem[],
|
||||
total: 0,
|
||||
dialog: {
|
||||
title: "",
|
||||
visible: false,
|
||||
},
|
||||
formData: {} as RoleFormData,
|
||||
rules: {
|
||||
name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
|
||||
code: [{ required: true, message: "请输入角色编码", trigger: "blur" }],
|
||||
}
|
||||
loading: true,
|
||||
// 选中ID数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
} as RoleQueryParam,
|
||||
roleList: [] as RoleItem[],
|
||||
total: 0,
|
||||
dialog: {
|
||||
title: '',
|
||||
visible: false
|
||||
},
|
||||
formData: {} as RoleFormData,
|
||||
rules: {
|
||||
name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
|
||||
code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }]
|
||||
}
|
||||
});
|
||||
|
||||
const {
|
||||
loading,
|
||||
multiple,
|
||||
queryParams,
|
||||
roleList,
|
||||
total,
|
||||
dialog,
|
||||
formData,
|
||||
rules,
|
||||
loading,
|
||||
multiple,
|
||||
queryParams,
|
||||
roleList,
|
||||
total,
|
||||
dialog,
|
||||
formData,
|
||||
rules
|
||||
} = toRefs(state);
|
||||
|
||||
function handleQuery() {
|
||||
emit("roleClick", {});
|
||||
state.loading = true;
|
||||
listRolePages(state.queryParams).then(({ data }) => {
|
||||
state.roleList = data.list;
|
||||
state.total = data.total;
|
||||
state.loading = false;
|
||||
});
|
||||
emit('roleClick', {});
|
||||
state.loading = true;
|
||||
listRolePages(state.queryParams).then(({ data }) => {
|
||||
state.roleList = data.list;
|
||||
state.total = data.total;
|
||||
state.loading = false;
|
||||
});
|
||||
}
|
||||
|
||||
function resetQuery() {
|
||||
queryFormRef.value.resetFields();
|
||||
handleQuery();
|
||||
queryFormRef.value.resetFields();
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
function handleSelectionChange(selection: any) {
|
||||
state.ids = selection.map((item: any) => item.id);
|
||||
state.single = selection.length !== 1;
|
||||
state.multiple = !selection.length;
|
||||
state.ids = selection.map((item: any) => item.id);
|
||||
state.single = selection.length !== 1;
|
||||
state.multiple = !selection.length;
|
||||
}
|
||||
|
||||
function handleRowClick(row: any) {
|
||||
emit("roleClick", row);
|
||||
emit('roleClick', row);
|
||||
}
|
||||
|
||||
function handleAdd() {
|
||||
state.dialog = {
|
||||
title: "添加角色",
|
||||
visible: true,
|
||||
};
|
||||
state.dialog = {
|
||||
title: '添加角色',
|
||||
visible: true
|
||||
};
|
||||
}
|
||||
|
||||
function handleUpdate(row: any) {
|
||||
state.dialog = {
|
||||
title: "修改角色",
|
||||
visible: true,
|
||||
};
|
||||
const roleId = row.id || state.ids;
|
||||
getRoleFormDetail(roleId).then(({ data }) => {
|
||||
state.formData = data;
|
||||
});
|
||||
state.dialog = {
|
||||
title: '修改角色',
|
||||
visible: true
|
||||
};
|
||||
const roleId = row.id || state.ids;
|
||||
getRoleFormDetail(roleId).then(({ data }) => {
|
||||
state.formData = data;
|
||||
});
|
||||
}
|
||||
|
||||
function submitForm() {
|
||||
dataFormRef.value.validate((valid: any) => {
|
||||
if (valid) {
|
||||
if (state.formData.id) {
|
||||
updateRole(state.formData.id as any, state.formData).then(
|
||||
() => {
|
||||
ElMessage.success("修改成功");
|
||||
cancel();
|
||||
handleQuery();
|
||||
}
|
||||
);
|
||||
} else {
|
||||
addRole(state.formData).then(() => {
|
||||
ElMessage.success("新增成功");
|
||||
cancel();
|
||||
handleQuery();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
dataFormRef.value.validate((valid: any) => {
|
||||
if (valid) {
|
||||
if (state.formData.id) {
|
||||
updateRole(state.formData.id as any, state.formData).then(() => {
|
||||
ElMessage.success('修改成功');
|
||||
cancel();
|
||||
handleQuery();
|
||||
});
|
||||
} else {
|
||||
addRole(state.formData).then(() => {
|
||||
ElMessage.success('新增成功');
|
||||
cancel();
|
||||
handleQuery();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置表单
|
||||
*/
|
||||
function cancel() {
|
||||
state.dialog.visible = false;
|
||||
dataFormRef.value.resetFields();
|
||||
state.dialog.visible = false;
|
||||
dataFormRef.value.resetFields();
|
||||
}
|
||||
|
||||
function handleDelete(row: any) {
|
||||
const ids = [row.id || state.ids].join(",");
|
||||
ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
deleteRoles(ids).then(() => {
|
||||
ElMessage.success("删除成功");
|
||||
handleQuery();
|
||||
});
|
||||
})
|
||||
.catch(() => ElMessage.info("已取消删除"));
|
||||
const ids = [row.id || state.ids].join(',');
|
||||
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
deleteRoles(ids).then(() => {
|
||||
ElMessage.success('删除成功');
|
||||
handleQuery();
|
||||
});
|
||||
})
|
||||
.catch(() => ElMessage.info('已取消删除'));
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
handleQuery();
|
||||
handleQuery();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 搜索表单 -->
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||
<el-form-item>
|
||||
<el-button type="success" :icon="Plus" @click="handleAdd">新增</el-button>
|
||||
<el-button type="danger" :icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
|
||||
</el-form-item>
|
||||
<div class="app-container">
|
||||
<!-- 搜索表单 -->
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||
<el-form-item>
|
||||
<el-button type="success" :icon="Plus" @click="handleAdd"
|
||||
>新增</el-button
|
||||
>
|
||||
<el-button
|
||||
type="danger"
|
||||
:icon="Delete"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="name">
|
||||
<el-input v-model="queryParams.name" placeholder="角色名称" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="角色名称"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button :icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :icon="Search" @click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button :icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<el-table ref="dataTableRef" v-loading="loading" :data="roleList" @selection-change="handleSelectionChange"
|
||||
@row-click="handleRowClick" highlight-current-row border>
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="角色名称" prop="name" />
|
||||
<el-table-column label="角色编码" prop="code" />
|
||||
<el-table-column label="操作" align="center" width="120">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" :icon="Edit" circle plain @click.stop="handleUpdate(scope.row)" />
|
||||
<el-button type="danger" :icon="Delete" circle plain @click.stop="handleDelete(scope.row)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 数据表格 -->
|
||||
<el-table
|
||||
ref="dataTableRef"
|
||||
v-loading="loading"
|
||||
:data="roleList"
|
||||
@selection-change="handleSelectionChange"
|
||||
@row-click="handleRowClick"
|
||||
highlight-current-row
|
||||
border
|
||||
>
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="角色名称" prop="name" />
|
||||
<el-table-column label="角色编码" prop="code" />
|
||||
<el-table-column label="操作" align="center" width="120">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="Edit"
|
||||
circle
|
||||
plain
|
||||
@click.stop="handleUpdate(scope.row)"
|
||||
/>
|
||||
<el-button
|
||||
type="danger"
|
||||
:icon="Delete"
|
||||
circle
|
||||
plain
|
||||
@click.stop="handleDelete(scope.row)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页工具条 -->
|
||||
<pagination v-if="total > 0" :total="total" v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize" @pagination="handleQuery" />
|
||||
<!-- 分页工具条 -->
|
||||
<pagination
|
||||
v-if="total > 0"
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="handleQuery"
|
||||
/>
|
||||
|
||||
<!-- 表单弹窗 -->
|
||||
<el-dialog :title="dialog.title" v-model="dialog.visible" @close="cancel" width="450px">
|
||||
<el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="100px">
|
||||
<el-form-item label="角色名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入角色名称" />
|
||||
</el-form-item>
|
||||
<!-- 表单弹窗 -->
|
||||
<el-dialog
|
||||
:title="dialog.title"
|
||||
v-model="dialog.visible"
|
||||
@close="cancel"
|
||||
width="450px"
|
||||
>
|
||||
<el-form
|
||||
ref="dataFormRef"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="角色名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入角色名称" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="角色编码" prop="code">
|
||||
<el-input v-model="formData.code" placeholder="请输入角色编码" />
|
||||
</el-form-item>
|
||||
<el-form-item label="角色编码" prop="code">
|
||||
<el-input v-model="formData.code" placeholder="请输入角色编码" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input-number v-model="formData.sort" controls-position="right" :min="0" style="width: 100px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input-number
|
||||
v-model="formData.sort"
|
||||
controls-position="right"
|
||||
:min="0"
|
||||
style="width: 100px"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="状态">
|
||||
<el-radio-group v-model="formData.status">
|
||||
<el-radio :label="1">正常</el-radio>
|
||||
<el-radio :label="0">停用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-form-item label="状态">
|
||||
<el-radio-group v-model="formData.status">
|
||||
<el-radio :label="1">正常</el-radio>
|
||||
<el-radio :label="0">停用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@@ -1,117 +1,116 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="10" :xs="24">
|
||||
<el-card class="box-card" shadow="always">
|
||||
<template #header>
|
||||
<svg-icon color="#333" icon-class="role" />
|
||||
角色列表
|
||||
</template>
|
||||
<Role ref="role" @roleClick="handleRoleClick" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
<div class="app-container">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="10" :xs="24">
|
||||
<el-card class="box-card" shadow="always">
|
||||
<template #header>
|
||||
<svg-icon color="#333" icon-class="role" />
|
||||
角色列表
|
||||
</template>
|
||||
<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>
|
||||
<el-tag type="success" v-if="role.id">
|
||||
<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" />
|
||||
</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>
|
||||
<el-tag type="success" v-if="role.id">
|
||||
<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" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="8" :xs="24">
|
||||
<el-card class="box-card" shadow="always">
|
||||
<template #header>
|
||||
<svg-icon icon-class="perm" />
|
||||
<span style="margin: 0 5px">权限分配</span>
|
||||
<el-col :span="8" :xs="24">
|
||||
<el-card class="box-card" shadow="always">
|
||||
<template #header>
|
||||
<svg-icon 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" />
|
||||
{{ role.name }}
|
||||
</el-tag>
|
||||
<el-tag
|
||||
type="warning"
|
||||
style="margin: 0 5px 0 0"
|
||||
v-else
|
||||
size="small"
|
||||
>
|
||||
请选择角色</el-tag
|
||||
>
|
||||
<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="success" v-if="menu.id" size="small">
|
||||
<svg-icon 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" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<el-tag type="success" v-if="menu.id" size="small">
|
||||
<svg-icon 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" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
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";
|
||||
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: "",
|
||||
},
|
||||
menu: {
|
||||
id: undefined,
|
||||
name: "",
|
||||
},
|
||||
role: {
|
||||
id: undefined,
|
||||
name: ''
|
||||
},
|
||||
menu: {
|
||||
id: undefined,
|
||||
name: ''
|
||||
}
|
||||
});
|
||||
|
||||
const { role, menu } = toRefs(state);
|
||||
|
||||
function handleRoleClick(roleRow: any) {
|
||||
if (roleRow) {
|
||||
state.role = {
|
||||
id: roleRow.id,
|
||||
name: roleRow.name,
|
||||
};
|
||||
} else {
|
||||
state.role = {
|
||||
id: undefined,
|
||||
name: "",
|
||||
};
|
||||
}
|
||||
if (roleRow) {
|
||||
state.role = {
|
||||
id: roleRow.id,
|
||||
name: roleRow.name
|
||||
};
|
||||
} else {
|
||||
state.role = {
|
||||
id: undefined,
|
||||
name: ''
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function handleMenuClick(menuRow: any) {
|
||||
if (!state.role.id) {
|
||||
ElMessage.warning("请选择角色");
|
||||
return false;
|
||||
}
|
||||
if (menuRow) {
|
||||
state.menu = {
|
||||
id: menuRow.value,
|
||||
name: menuRow.label,
|
||||
};
|
||||
} else {
|
||||
state.menu = {
|
||||
id: undefined,
|
||||
name: ""
|
||||
};
|
||||
}
|
||||
if (!state.role.id) {
|
||||
ElMessage.warning('请选择角色');
|
||||
return false;
|
||||
}
|
||||
if (menuRow) {
|
||||
state.menu = {
|
||||
id: menuRow.value,
|
||||
name: menuRow.label
|
||||
};
|
||||
} else {
|
||||
state.menu = {
|
||||
id: undefined,
|
||||
name: ''
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
||||
Reference in New Issue
Block a user