refactor: API接口调用TypeScript类型约束完善
This commit is contained in:
郝先瑞
@@ -1,111 +1,124 @@
|
||||
<template>
|
||||
<div class="menu-container">
|
||||
<el-form >
|
||||
<el-form>
|
||||
<el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="16">
|
||||
<el-button type="success" plain :icon="Switch" @click="toggleExpandAll">展开/折叠</el-button>
|
||||
<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-button type="primary" :icon="Check" @click="handleSubmit"
|
||||
>提交</el-button
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-tree
|
||||
ref="menuRef"
|
||||
v-if="refreshTree"
|
||||
:default-expanded-keys="expandedKeys"
|
||||
:default-expand-all="isExpandAll"
|
||||
:data="menuOptions"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
empty-text="加载菜单中..."
|
||||
:check-strictly="checkStrictly"
|
||||
highlight-current
|
||||
@node-click="handleNodeClick"
|
||||
ref="menuRef"
|
||||
v-if="refreshTree"
|
||||
:default-expanded-keys="expandedKeys"
|
||||
:default-expand-all="isExpandAll"
|
||||
:data="menuOptions"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
empty-text="加载菜单中..."
|
||||
:check-strictly="checkStrictly"
|
||||
highlight-current
|
||||
@node-click="handleNodeClick"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {listTreeSelectMenus} from "@/api/system/menu";
|
||||
import {listRoleMenuIds, updateRoleMenu} from "@/api/system/role"
|
||||
import { nextTick, onMounted, reactive, ref, toRefs, watch} from "vue"
|
||||
import {ElTree, ElMessage, ElMessageBox} from "element-plus"
|
||||
import {Switch, Check} from '@element-plus/icons-vue'
|
||||
import { listSelectMenus } from "@/api/system/menu";
|
||||
import { listRoleMenuIds, updateRoleMenu } from "@/api/system/role";
|
||||
import { nextTick, onMounted, reactive, ref, toRefs, watch } from "vue";
|
||||
import { ElTree, ElMessage, ElMessageBox } from "element-plus";
|
||||
import { Switch, Check } from "@element-plus/icons-vue";
|
||||
import { Option } from "@/types";
|
||||
|
||||
const emit = defineEmits(['menuClick'])
|
||||
const emit = defineEmits(["menuClick"]);
|
||||
const props = defineProps({
|
||||
role: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
})
|
||||
default: {},
|
||||
},
|
||||
});
|
||||
|
||||
const menuRef = ref(ElTree) // 属性名必须和元素的ref属性值一致
|
||||
const menuRef = ref(ElTree); // 属性名必须和元素的ref属性值一致
|
||||
|
||||
watch(() => props.role.id as any, (newVal, oldVal) => {
|
||||
const roleId = props.role.id
|
||||
if (roleId) {
|
||||
state.checkStrictly = true
|
||||
listRoleMenuIds(roleId).then(response => {
|
||||
const checkedMenuIds = response.data
|
||||
menuRef.value.setCheckedKeys(checkedMenuIds)
|
||||
state.checkStrictly = false
|
||||
})
|
||||
watch(
|
||||
() => props.role.id as any,
|
||||
(newVal, oldVal) => {
|
||||
const roleId = props.role.id;
|
||||
if (roleId) {
|
||||
state.checkStrictly = true;
|
||||
listRoleMenuIds(roleId).then(({ data }) => {
|
||||
menuRef.value.setCheckedKeys(data);
|
||||
state.checkStrictly = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
const state = reactive({
|
||||
expandedKeys: [], // 展开的节点
|
||||
menuOptions: [],
|
||||
expandedKeys: [], // 展开的节点
|
||||
menuOptions: [] as Option[],
|
||||
checkStrictly: false,
|
||||
isExpandAll: true,
|
||||
refreshTree: true
|
||||
})
|
||||
refreshTree: true,
|
||||
});
|
||||
|
||||
const {expandedKeys, menuOptions, checkStrictly, isExpandAll, refreshTree} = toRefs(state)
|
||||
const { expandedKeys, menuOptions, checkStrictly, isExpandAll, refreshTree } =
|
||||
toRefs(state);
|
||||
|
||||
/**
|
||||
* 加载菜单树
|
||||
*/
|
||||
async function loadTreeSelectMenuOptions() {
|
||||
await listTreeSelectMenus().then(response => {
|
||||
state.menuOptions = response.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
|
||||
state.refreshTree = false;
|
||||
state.isExpandAll = !state.isExpandAll;
|
||||
nextTick(() => {
|
||||
state.refreshTree = true
|
||||
})
|
||||
state.refreshTree = true;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 保存角色的菜单
|
||||
*/
|
||||
function handleSubmit() {
|
||||
const checkedMenuIds = menuRef.value.getCheckedNodes(false, true).map((node: any) => node.id)
|
||||
const checkedMenuIds = menuRef.value
|
||||
.getCheckedNodes(false, true)
|
||||
.map((node: any) => node.id);
|
||||
updateRoleMenu(props.role.id, checkedMenuIds).then(() => {
|
||||
ElMessage.success('提交成功')
|
||||
})
|
||||
ElMessage.success("提交成功");
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadTreeSelectMenuOptions()
|
||||
})
|
||||
|
||||
loadTreeSelectMenuOptions();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -4,29 +4,32 @@
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-checkbox
|
||||
:indeterminate="isIndeterminate"
|
||||
v-model="checkAll"
|
||||
@change="handleCheckAllChange"
|
||||
>全选
|
||||
:indeterminate="isIndeterminate"
|
||||
v-model="checkAll"
|
||||
@change="handleCheckAllChange"
|
||||
>全选
|
||||
</el-checkbox>
|
||||
</el-col>
|
||||
<el-col :span="12" style="text-align: right">
|
||||
<el-button type="primary" :icon="Check" @click="handleSubmit">提交</el-button>
|
||||
<el-button type="primary" :icon="Check" @click="handleSubmit"
|
||||
>提交</el-button
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col
|
||||
:span="8"
|
||||
v-for="item in permissionOptions"
|
||||
style="margin-top: 20px"
|
||||
: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"
|
||||
border
|
||||
v-model="item.checked"
|
||||
:label="item.id"
|
||||
:key="item.id"
|
||||
@change="handleCheckedPermChange"
|
||||
>
|
||||
{{ item.name }}
|
||||
</el-checkbox>
|
||||
@@ -34,46 +37,57 @@
|
||||
</el-row>
|
||||
</div>
|
||||
<div style="text-align: center" v-else>
|
||||
<el-empty :description=" !role? '请选择角色': !menu? '请选择菜单': '暂无数据，您可在【菜单管理】配置权限数据'"></el-empty>
|
||||
<el-empty
|
||||
:description="
|
||||
!role
|
||||
? '请选择角色'
|
||||
: !menu
|
||||
? '请选择菜单'
|
||||
: '暂无数据，您可在【菜单管理】配置权限数据'
|
||||
"
|
||||
></el-empty>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {listPerms} from "@/api/system/perm";
|
||||
import {listRolePerms, saveRolePerms} from "@/api/system/role";
|
||||
import { onMounted, reactive, toRefs, watch} from "vue";
|
||||
import {ElMessage} from "element-plus";
|
||||
import {Check} from '@element-plus/icons-vue'
|
||||
import { listPerms } from "@/api/system/perm";
|
||||
import { listRolePerms, saveRolePerms } from "@/api/system/role";
|
||||
import { onMounted, reactive, toRefs, watch } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { Check } from "@element-plus/icons-vue";
|
||||
import { PermQueryParam, MenuItem } from "@/types";
|
||||
|
||||
const props = defineProps({
|
||||
role: {
|
||||
type: Object,
|
||||
default: {}
|
||||
default: {},
|
||||
},
|
||||
menu: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
})
|
||||
default: {},
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
watch(() => props.menu.id as any, (newVal, oldVal) => {
|
||||
const menuId = props.menu.id
|
||||
if (menuId) {
|
||||
loadData()
|
||||
watch(
|
||||
() => props.menu.id,
|
||||
(value) => {
|
||||
if (value) {
|
||||
loadData();
|
||||
}
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
permissionOptions: [] as Array<any>,
|
||||
isIndeterminate: true,
|
||||
checkAll: false,
|
||||
checkedPerms: []
|
||||
})
|
||||
checkedPerms: [],
|
||||
});
|
||||
|
||||
const {permissionOptions, isIndeterminate, checkAll, checkedPerms} = toRefs(state)
|
||||
const { permissionOptions, isIndeterminate, checkAll, checkedPerms } =
|
||||
toRefs(state);
|
||||
|
||||
function handleCheckAllChange(checked: Boolean) {
|
||||
state.isIndeterminate = false;
|
||||
@@ -86,55 +100,56 @@ function handleCheckAllChange(checked: Boolean) {
|
||||
}
|
||||
|
||||
function handleCheckedPermChange(value: any) {
|
||||
const checkedCount = state.permissionOptions.filter(item => item.checked).length;
|
||||
const checkedCount = state.permissionOptions.filter(
|
||||
(item) => item.checked
|
||||
).length;
|
||||
state.checkAll = checkedCount === state.permissionOptions.length;
|
||||
state.isIndeterminate = checkedCount > 0 && checkedCount < state.permissionOptions.length;
|
||||
state.isIndeterminate =
|
||||
checkedCount > 0 && checkedCount < state.permissionOptions.length;
|
||||
}
|
||||
|
||||
function loadData() {
|
||||
if (!props.menu.id) {
|
||||
resetData()
|
||||
return false
|
||||
resetData();
|
||||
return false;
|
||||
}
|
||||
state.loading = true;
|
||||
listPerms({menuId: props.menu.id}).then(response => {
|
||||
state.permissionOptions = response.data
|
||||
listRolePerms(props.role.id, props.menu.id).then(res => {
|
||||
const checkedPermIds = res.data
|
||||
|
||||
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.checkAll = false;
|
||||
}
|
||||
});
|
||||
state.loading = 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(() => {
|
||||
.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>
|
||||
|
||||
@@ -1,59 +1,65 @@
|
||||
<template>
|
||||
<div class="role-container">
|
||||
<!-- 搜索表单 -->
|
||||
<el-form
|
||||
ref="queryForm"
|
||||
:model="queryParams"
|
||||
:inline="true"
|
||||
>
|
||||
<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-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.native="handleQuery"
|
||||
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 type="primary" :icon="Search" @click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button :icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<el-table
|
||||
ref="dataTable"
|
||||
v-loading="loading"
|
||||
:data="pageList"
|
||||
@selection-change="handleSelectionChange"
|
||||
@row-click="handleRowClick"
|
||||
highlight-current-row
|
||||
border
|
||||
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 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)"
|
||||
type="primary"
|
||||
:icon="Edit"
|
||||
circle
|
||||
plain
|
||||
@click.stop="handleUpdate(scope.row)"
|
||||
/>
|
||||
<el-button
|
||||
type="danger"
|
||||
:icon="Delete"
|
||||
circle
|
||||
plain
|
||||
@click.stop="handleDelete(scope.row)"
|
||||
type="danger"
|
||||
:icon="Delete"
|
||||
circle
|
||||
plain
|
||||
@click.stop="handleDelete(scope.row)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@@ -61,35 +67,41 @@
|
||||
|
||||
<!-- 分页工具条 -->
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="handleQuery"
|
||||
v-show="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"
|
||||
width="450px"
|
||||
:title="dialog.title"
|
||||
v-model="dialog.visible"
|
||||
@close="cancel"
|
||||
width="450px"
|
||||
>
|
||||
<el-form
|
||||
ref="dataForm"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
label-width="100px"
|
||||
ref="dataFormRef"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="角色名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入角色名称"/>
|
||||
<el-input v-model="formData.name" placeholder="请输入角色名称" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="角色编码" prop="code">
|
||||
<el-input v-model="formData.code" placeholder="请输入角色编码"/>
|
||||
<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-input-number
|
||||
v-model="formData.sort"
|
||||
controls-position="right"
|
||||
:min="0"
|
||||
style="width: 100px"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="状态">
|
||||
@@ -106,19 +118,27 @@
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {listRolesWithPage, updateRole, getRoleDetail, addRole, deleteRoles} from '@/api/system/role'
|
||||
import { onMounted, reactive, ref, toRefs, unref} from "vue"
|
||||
import {ElForm, ElMessage, ElMessageBox} from "element-plus";
|
||||
import {Search, Plus, Edit, Refresh, Delete} from '@element-plus/icons-vue'
|
||||
import {
|
||||
listRolePages,
|
||||
updateRole,
|
||||
getRoleFormDetail,
|
||||
addRole,
|
||||
deleteRoles,
|
||||
} from "@/api/system/role";
|
||||
import { onMounted, reactive, ref, toRefs, unref } from "vue";
|
||||
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 queryFormRef = ref(ElForm);
|
||||
const dataFormRef = ref(ElForm); // 属性名必须和元素的ref属性值一致
|
||||
|
||||
const emit = defineEmits(['roleClick'])
|
||||
const dataForm = ref(ElForm) // 属性名必须和元素的ref属性值一致
|
||||
const state = reactive({
|
||||
loading: true,
|
||||
// 选中ID数组
|
||||
@@ -130,139 +150,129 @@ const state = reactive({
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
name: undefined
|
||||
},
|
||||
pageList: [],
|
||||
} as RoleQueryParam,
|
||||
roleList: [] as RoleItem[],
|
||||
total: 0,
|
||||
dialog: {
|
||||
title: '',
|
||||
visible: false
|
||||
},
|
||||
formData: {
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
code: undefined,
|
||||
sort: 100,
|
||||
status: 1
|
||||
title: "",
|
||||
visible: false,
|
||||
},
|
||||
formData: {} as RoleFormData,
|
||||
rules: {
|
||||
name: [
|
||||
{required: true, message: '请输入角色名称', trigger: 'blur'}
|
||||
],
|
||||
code: [
|
||||
{required: true, message: '请输入角色编码', trigger: 'blur'}
|
||||
]
|
||||
}
|
||||
})
|
||||
name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
|
||||
code: [{ required: true, message: "请输入角色编码", trigger: "blur" }],
|
||||
},
|
||||
});
|
||||
|
||||
const {loading, single, multiple, queryParams, pageList, total, dialog, formData, rules} = toRefs(state)
|
||||
const {
|
||||
loading,
|
||||
single,
|
||||
multiple,
|
||||
queryParams,
|
||||
roleList,
|
||||
total,
|
||||
dialog,
|
||||
formData,
|
||||
rules,
|
||||
} = toRefs(state);
|
||||
|
||||
function handleQuery() {
|
||||
emit('roleClick', {})
|
||||
state.loading = true
|
||||
listRolesWithPage(state.queryParams).then(response => {
|
||||
const {data, total} = response as any
|
||||
state.pageList = data
|
||||
state.total = 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() {
|
||||
state.queryParams = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
name: undefined
|
||||
}
|
||||
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() {
|
||||
resetForm()
|
||||
state.dialog = {
|
||||
title: '添加角色',
|
||||
visible: true
|
||||
}
|
||||
title: "添加角色",
|
||||
visible: true,
|
||||
};
|
||||
}
|
||||
|
||||
function handleUpdate(row: any) {
|
||||
resetForm()
|
||||
state.dialog = {
|
||||
title: '修改角色',
|
||||
title: "修改角色",
|
||||
visible: true,
|
||||
}
|
||||
const roleId = row.id || state.ids
|
||||
getRoleDetail(roleId).then((response) => {
|
||||
state.formData = response.data
|
||||
})
|
||||
};
|
||||
const roleId = row.id || state.ids;
|
||||
getRoleFormDetail(roleId).then(({ data }) => {
|
||||
state.formData = data;
|
||||
});
|
||||
}
|
||||
|
||||
function submitForm() {
|
||||
const form = unref(dataForm)
|
||||
form.validate((valid: any) => {
|
||||
dataFormRef.value.validate((valid: any) => {
|
||||
if (valid) {
|
||||
if (state.formData.id) {
|
||||
updateRole(state.formData.id as any, state.formData).then(response => {
|
||||
ElMessage.success('修改成功')
|
||||
state.dialog.visible = false
|
||||
handleQuery()
|
||||
})
|
||||
updateRole(state.formData.id as any, state.formData).then(
|
||||
(response) => {
|
||||
ElMessage.success("修改成功");
|
||||
state.dialog.visible = false;
|
||||
handleQuery();
|
||||
}
|
||||
);
|
||||
} else {
|
||||
addRole(state.formData).then(response => {
|
||||
ElMessage.success('新增成功')
|
||||
state.dialog.visible = false
|
||||
handleQuery()
|
||||
})
|
||||
addRole(state.formData).then((response) => {
|
||||
ElMessage.success("新增成功");
|
||||
state.dialog.visible = false;
|
||||
handleQuery();
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置表单
|
||||
*/
|
||||
function resetForm() {
|
||||
state.formData = {
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
code: undefined,
|
||||
sort: 100,
|
||||
status: 1
|
||||
}
|
||||
dataFormRef.value.resetFields();
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
function cancel() {
|
||||
resetForm()
|
||||
state.dialog.visible = false
|
||||
resetForm();
|
||||
state.dialog.visible = false;
|
||||
}
|
||||
|
||||
function handleDelete(row: any) {
|
||||
const ids = [row.id || state.ids].join(',')
|
||||
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
deleteRoles(ids).then(() => {
|
||||
ElMessage.success('删除成功')
|
||||
handleQuery()
|
||||
const ids = [row.id || state.ids].join(",");
|
||||
ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
deleteRoles(ids).then(() => {
|
||||
ElMessage.success("删除成功");
|
||||
handleQuery();
|
||||
});
|
||||
})
|
||||
}).catch(() =>
|
||||
ElMessage.info('已取消删除')
|
||||
)
|
||||
.catch(() => ElMessage.info("已取消删除"));
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
handleQuery()
|
||||
})
|
||||
|
||||
handleQuery();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="pageList"
|
||||
:data="userList"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="50" align="center" />
|
||||
@@ -283,7 +283,7 @@ import {
|
||||
updateUser,
|
||||
updateUserPart,
|
||||
} from "@/api/system/user";
|
||||
import { listDeptSelect } from "@/api/system/dept";
|
||||
import { listSelectDepartments } from "@/api/system/dept";
|
||||
import { listRoles } from "@/api/system/role";
|
||||
|
||||
// 组件依赖
|
||||
@@ -297,6 +297,14 @@ import {
|
||||
Lock,
|
||||
} from "@element-plus/icons-vue";
|
||||
import TreeSelect from "@/components/TreeSelect/index.vue";
|
||||
import {
|
||||
UserItem,
|
||||
UserQueryParam,
|
||||
UserFormData,
|
||||
Option,
|
||||
RoleItem,
|
||||
Dialog,
|
||||
} from "@/types";
|
||||
|
||||
// DOM元素的引用声明定义
|
||||
const deptTreeRef = ref(ElTree); // 变量名和DOM的ref属性值一致
|
||||
@@ -317,42 +325,26 @@ const state = reactive({
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 用户分页数据
|
||||
pageList: [],
|
||||
userList: [] as UserItem[],
|
||||
// 弹窗属性
|
||||
dialog: {
|
||||
title: "",
|
||||
visible: false,
|
||||
},
|
||||
} as Dialog,
|
||||
deptName: undefined,
|
||||
// 部门树选项
|
||||
deptOptions: [],
|
||||
deptOptions: [] as Option[],
|
||||
// 部门名称
|
||||
// 性别状态字典
|
||||
genderOptions: [] as any[],
|
||||
// 角色选项
|
||||
roleOptions: [] as any[],
|
||||
roleOptions: [] as RoleItem[],
|
||||
// 表单参数
|
||||
formData: {
|
||||
id: undefined,
|
||||
deptId: undefined,
|
||||
username: undefined,
|
||||
nickname: undefined,
|
||||
password: "",
|
||||
mobile: undefined,
|
||||
email: undefined,
|
||||
gender: undefined,
|
||||
status: 1,
|
||||
remark: undefined,
|
||||
roleIds: [],
|
||||
},
|
||||
formData: {} as UserFormData,
|
||||
// 查询参数
|
||||
queryParams:{
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
keywords: undefined,
|
||||
status: undefined,
|
||||
deptId: undefined,
|
||||
},
|
||||
} as UserQueryParam,
|
||||
// 表单校验
|
||||
rules: {
|
||||
username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
|
||||
@@ -383,7 +375,7 @@ const {
|
||||
single,
|
||||
multiple,
|
||||
queryParams,
|
||||
pageList,
|
||||
userList,
|
||||
total,
|
||||
dialog,
|
||||
formData,
|
||||
@@ -398,8 +390,7 @@ const {
|
||||
*/
|
||||
watchEffect(
|
||||
() => {
|
||||
const deptTree = unref(deptTreeRef);
|
||||
deptTree.filter(state.deptName);
|
||||
deptTreeRef.value.filter(state.deptName);
|
||||
},
|
||||
{
|
||||
flush: "post", // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
|
||||
@@ -414,7 +405,7 @@ function filterDeptNode(value: string, data: any) {
|
||||
}
|
||||
|
||||
/**
|
||||
* 部门树节点点击事件
|
||||
* 部门树节点点击
|
||||
*/
|
||||
function handleDeptNodeClick(data: { [key: string]: any }) {
|
||||
state.queryParams.deptId = data.id;
|
||||
@@ -460,10 +451,9 @@ function handleStatusChange(row: { [key: string]: any }) {
|
||||
**/
|
||||
function handleQuery() {
|
||||
state.loading = true;
|
||||
listUserPages(state.queryParams).then((response) => {
|
||||
const { data, total } = response as any;
|
||||
state.pageList = data;
|
||||
state.total = total;
|
||||
listUserPages(state.queryParams).then(({ data }) => {
|
||||
state.userList = data.list;
|
||||
state.total = data.total;
|
||||
state.loading = false;
|
||||
});
|
||||
}
|
||||
@@ -472,8 +462,7 @@ function handleQuery() {
|
||||
* 重置查询
|
||||
*/
|
||||
function resetQuery() {
|
||||
const queryForm = unref(queryFormRef);
|
||||
queryForm.resetFields();
|
||||
queryFormRef.value.resetFields();
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
@@ -535,8 +524,8 @@ async function handleUpdate(row: { [key: string]: any }) {
|
||||
title: "修改用户",
|
||||
visible: true,
|
||||
};
|
||||
getUserFormDetail(userId).then((response: any) => {
|
||||
state.formData = response.data;
|
||||
getUserFormDetail(userId).then(({ data }) => {
|
||||
state.formData = data;
|
||||
});
|
||||
}
|
||||
|
||||
@@ -544,8 +533,7 @@ async function handleUpdate(row: { [key: string]: any }) {
|
||||
* 表单提交
|
||||
*/
|
||||
function submitForm() {
|
||||
const dataForm = unref(dataFormRef);
|
||||
dataForm.validate((valid: any) => {
|
||||
dataFormRef.value.validate((valid: any) => {
|
||||
if (valid) {
|
||||
const userId = state.formData.id;
|
||||
if (userId) {
|
||||
@@ -576,7 +564,7 @@ function resetForm() {
|
||||
|
||||
/**
|
||||
* 删除用户
|
||||
**/
|
||||
*/
|
||||
function handleDelete(row: { [key: string]: any }) {
|
||||
const userIds = row.id || state.ids.join(",");
|
||||
ElMessageBox.confirm(
|
||||
@@ -598,7 +586,7 @@ function handleDelete(row: { [key: string]: any }) {
|
||||
}
|
||||
|
||||
/**
|
||||
* 取消关闭
|
||||
* 取消
|
||||
*/
|
||||
function cancel() {
|
||||
state.dialog.visible = false;
|
||||
@@ -606,16 +594,16 @@ function cancel() {
|
||||
}
|
||||
|
||||
/**
|
||||
* 加载部门数据
|
||||
**/
|
||||
* 加载部门
|
||||
*/
|
||||
async function loadDeptOptions() {
|
||||
listDeptSelect().then((response) => {
|
||||
listSelectDepartments().then((response) => {
|
||||
state.deptOptions = response.data;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 加载性别字典数据
|
||||
* 加载性别字典
|
||||
*/
|
||||
function loadGenderOptions() {
|
||||
proxy.$listDictsByCode("gender").then((response: any) => {
|
||||
@@ -627,8 +615,11 @@ function loadGenderOptions() {
|
||||
* 初始化数据
|
||||
*/
|
||||
function loadData() {
|
||||
// 初始化性别字典
|
||||
loadGenderOptions();
|
||||
// 初始化部门
|
||||
loadDeptOptions();
|
||||
// 初始化用户列表数据
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user