第一次提交
This commit is contained in:
184
jeecgboot-vue3/src/views/system/role/TenantRoleList.vue
Normal file
184
jeecgboot-vue3/src/views/system/role/TenantRoleList.vue
Normal file
@@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<BasicTable @register="registerTable">
|
||||
<template #tableTitle>
|
||||
<a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleCreate"> 新增</a-button>
|
||||
<a-dropdown v-if="selectedRowKeys.length > 0">
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item key="1" @click="batchHandleDelete">
|
||||
<Icon icon="ant-design:delete-outlined"></Icon>
|
||||
删除
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
<a-button
|
||||
>批量操作
|
||||
<Icon icon="mdi:chevron-down"></Icon>
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
<div style="margin-left: 10px;margin-top: 5px">当前登录租户: <span class="tenant-name">{{loginTenantName}}</span> </div>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
|
||||
</template>
|
||||
</BasicTable>
|
||||
<!--角色用户表格-->
|
||||
<RoleUserTable @register="roleUserDrawer" :disableUserEdit="true"/>
|
||||
<!--角色编辑抽屉-->
|
||||
<RoleDrawer @register="registerDrawer" @success="reload" :showFooter="showFooter" />
|
||||
<!--角色详情-->
|
||||
<RoleDesc @register="registerDesc"></RoleDesc>
|
||||
</template>
|
||||
<script lang="ts" name="tenant-role-list" setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { BasicTable, TableAction } from '/@/components/Table';
|
||||
import { useDrawer } from '/@/components/Drawer';
|
||||
import { useModal } from '/@/components/Modal';
|
||||
import RoleDesc from './components/RoleDesc.vue';
|
||||
import RoleDrawer from './components/RoleDrawer.vue';
|
||||
import RoleUserTable from './components/RoleUserTable.vue';
|
||||
import { columns, searchFormSchema } from './role.data';
|
||||
import { listByTenant, deleteRole, batchDeleteRole, getExportUrl, getImportUrl } from './role.api';
|
||||
import { useListPage } from '/@/hooks/system/useListPage';
|
||||
import { getLoginTenantName } from "/@/views/system/tenant/tenant.api";
|
||||
import { tenantSaasMessage } from "@/utils/common/compUtils";
|
||||
|
||||
const showFooter = ref(true);
|
||||
const [roleUserDrawer, { openDrawer: openRoleUserDrawer }] = useDrawer();
|
||||
const [registerDrawer, { openDrawer }] = useDrawer();
|
||||
const [registerModal, { openModal }] = useModal();
|
||||
const [registerDesc, { openDrawer: openRoleDesc }] = useDrawer();
|
||||
|
||||
// 列表页面公共参数、方法
|
||||
const { prefixCls, tableContext, onImportXls, onExportXls } = useListPage({
|
||||
designScope: 'role-template',
|
||||
tableProps: {
|
||||
title: '租户角色列表',
|
||||
api: listByTenant,
|
||||
columns: columns,
|
||||
formConfig: {
|
||||
schemas: searchFormSchema,
|
||||
},
|
||||
actionColumn: {
|
||||
width: 120,
|
||||
},
|
||||
rowSelection: null,
|
||||
//自定义默认排序
|
||||
defSort: {
|
||||
column: 'id',
|
||||
order: 'desc',
|
||||
},
|
||||
},
|
||||
exportConfig: {
|
||||
name: '角色列表',
|
||||
url: getExportUrl,
|
||||
},
|
||||
importConfig: {
|
||||
url: getImportUrl,
|
||||
},
|
||||
});
|
||||
const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
|
||||
|
||||
/**
|
||||
* 新增
|
||||
*/
|
||||
function handleCreate() {
|
||||
showFooter.value = true;
|
||||
openDrawer(true, {
|
||||
isUpdate: false,
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 编辑
|
||||
*/
|
||||
function handleEdit(record: Recordable) {
|
||||
showFooter.value = true;
|
||||
openDrawer(true, {
|
||||
record,
|
||||
isUpdate: true,
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 详情
|
||||
*/
|
||||
function handleDetail(record) {
|
||||
showFooter.value = false;
|
||||
openRoleDesc(true, {
|
||||
record,
|
||||
isUpdate: true,
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 删除事件
|
||||
*/
|
||||
async function handleDelete(record) {
|
||||
await deleteRole({ id: record.id }, reload);
|
||||
}
|
||||
/**
|
||||
* 批量删除事件
|
||||
*/
|
||||
async function batchHandleDelete() {
|
||||
await batchDeleteRole({ ids: selectedRowKeys.value }, reload);
|
||||
}
|
||||
/**
|
||||
* 角色用户
|
||||
*/
|
||||
function handleUser(record) {
|
||||
//onSelectChange(selectedRowKeys)
|
||||
openRoleUserDrawer(true, record);
|
||||
}
|
||||
/**
|
||||
* 操作栏
|
||||
*/
|
||||
function getTableAction(record) {
|
||||
return [
|
||||
{
|
||||
label: '用户',
|
||||
onClick: handleUser.bind(null, record),
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* 下拉操作栏
|
||||
*/
|
||||
function getDropDownAction(record) {
|
||||
return [
|
||||
{
|
||||
label: '编辑',
|
||||
onClick: handleEdit.bind(null, record),
|
||||
},
|
||||
{
|
||||
label: '详情',
|
||||
onClick: handleDetail.bind(null, record),
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
popConfirm: {
|
||||
title: '是否确认删除',
|
||||
confirm: handleDelete.bind(null, record),
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
const loginTenantName = ref<string>('');
|
||||
|
||||
getTenantName();
|
||||
|
||||
async function getTenantName(){
|
||||
loginTenantName.value = await getLoginTenantName();
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
tenantSaasMessage('租户角色')
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.tenant-name{
|
||||
text-decoration:underline;
|
||||
margin: 5px;
|
||||
font-size: 15px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<BasicDrawer v-bind="$attrs" @register="registerDrawer" title="数据规则配置" width="450px" destroyOnClose>
|
||||
<a-tabs defaultActiveKey="1">
|
||||
<a-tab-pane tab="数据规则" key="1">
|
||||
<a-checkbox-group v-model:value="dataRuleChecked" v-if="dataRuleList.length > 0">
|
||||
<a-row>
|
||||
<a-col :span="24" v-for="(item, index) in dataRuleList" :key="'dr' + index">
|
||||
<a-checkbox :value="item.id">{{ item.ruleName }}</a-checkbox>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="24">
|
||||
<div style="width: 100%; margin-top: 15px">
|
||||
<a-button @click="saveDataRuleForRole" type="primary" size="small"> <Icon icon="ant-design:save-outlined"></Icon>点击保存</a-button>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-checkbox-group>
|
||||
<div v-else><h3>无配置信息!</h3></div>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</BasicDrawer>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, unref } from 'vue';
|
||||
import { BasicDrawer, useDrawerInner } from '/src/components/Drawer';
|
||||
import { useMessage } from '/src/hooks/web/useMessage';
|
||||
import { queryDataRule, saveDataRule } from '../role.api';
|
||||
// 声明Emits
|
||||
const emit = defineEmits(['success', 'register']);
|
||||
const { createMessage } = useMessage();
|
||||
// 声明数据
|
||||
const functionId = ref('');
|
||||
const roleId = ref('');
|
||||
const dataRuleList = ref([]);
|
||||
const dataRuleChecked = ref([]);
|
||||
|
||||
/**
|
||||
* 数据
|
||||
*/
|
||||
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
|
||||
await reset();
|
||||
setDrawerProps({ confirmLoading: false });
|
||||
//权限的id
|
||||
functionId.value = data.functionId;
|
||||
//角色的id
|
||||
roleId.value = data.roleId;
|
||||
//查询数据
|
||||
const res = await queryDataRule({ functionId: unref(functionId), roleId: unref(roleId) });
|
||||
if (res.success) {
|
||||
dataRuleList.value = res.result.datarule;
|
||||
if (res.result.drChecked) {
|
||||
dataRuleChecked.value = res.result.drChecked.split(',');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 重置
|
||||
*/
|
||||
function reset() {
|
||||
functionId.value = '';
|
||||
roleId.value = '';
|
||||
dataRuleList.value = [];
|
||||
dataRuleChecked.value = [];
|
||||
}
|
||||
|
||||
/**
|
||||
* 提交
|
||||
*/
|
||||
async function saveDataRuleForRole() {
|
||||
if (!unref(dataRuleChecked) || unref(dataRuleChecked).length == 0) {
|
||||
createMessage.warning('请注意，现未勾选任何数据权限!');
|
||||
}
|
||||
let params = {
|
||||
permissionId: unref(functionId),
|
||||
roleId: unref(roleId),
|
||||
dataRuleIds: unref(dataRuleChecked).join(','),
|
||||
};
|
||||
await saveDataRule(params);
|
||||
//关闭弹窗
|
||||
closeDrawer();
|
||||
//刷新列表
|
||||
emit('success');
|
||||
}
|
||||
</script>
|
||||
18
jeecgboot-vue3/src/views/system/role/components/RoleDesc.vue
Normal file
18
jeecgboot-vue3/src/views/system/role/components/RoleDesc.vue
Normal file
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<BasicDrawer v-bind="$attrs" @register="registerDrawer" title="角色详情" width="500px" destroyOnClose>
|
||||
<Description :column="1" :data="roleData" :schema="formDescSchema" />
|
||||
</BasicDrawer>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, useAttrs } from 'vue';
|
||||
import { BasicDrawer, useDrawerInner } from '/src/components/Drawer';
|
||||
import { formDescSchema } from '../role.data';
|
||||
import { Description, useDescription } from '/@/components/Description/index';
|
||||
const emit = defineEmits(['register']);
|
||||
const attrs = useAttrs();
|
||||
const roleData = ref({});
|
||||
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
|
||||
setDrawerProps({ confirmLoading: false });
|
||||
roleData.value = data.record;
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<BasicDrawer v-bind="$attrs" @register="registerDrawer" :title="getTitle" width="500px" @ok="handleSubmit" destroyOnClose>
|
||||
<BasicForm @register="registerForm" />
|
||||
</BasicDrawer>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, unref, useAttrs } from 'vue';
|
||||
import { BasicForm, useForm } from '/src/components/Form';
|
||||
import { BasicDrawer, useDrawerInner } from '/src/components/Drawer';
|
||||
import { BasicTree, TreeItem } from '/src/components/Tree';
|
||||
import { formSchema } from '../role.data';
|
||||
import { saveOrUpdateRole } from '../role.api';
|
||||
// 声明Emits
|
||||
const emit = defineEmits(['success', 'register']);
|
||||
const attrs = useAttrs();
|
||||
const isUpdate = ref(true);
|
||||
const [registerForm, { setProps, resetFields, setFieldsValue, validate }] = useForm({
|
||||
labelWidth: 90,
|
||||
schemas: formSchema,
|
||||
showActionButtonGroup: false,
|
||||
});
|
||||
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
|
||||
resetFields();
|
||||
isUpdate.value = !!data?.isUpdate;
|
||||
setDrawerProps({ confirmLoading: false });
|
||||
if (unref(isUpdate)) {
|
||||
setFieldsValue({
|
||||
...data.record,
|
||||
});
|
||||
}
|
||||
//禁用表单
|
||||
setProps({ disabled: !attrs.showFooter });
|
||||
});
|
||||
/**
|
||||
* 标题
|
||||
*/
|
||||
const getTitle = computed(() => (!unref(isUpdate) ? '新增角色' : '编辑角色'));
|
||||
/**
|
||||
* 提交
|
||||
*/
|
||||
async function handleSubmit() {
|
||||
try {
|
||||
const values = await validate();
|
||||
setDrawerProps({ confirmLoading: true });
|
||||
//提交表单
|
||||
await saveOrUpdateRole(values, isUpdate.value);
|
||||
closeDrawer();
|
||||
emit('success');
|
||||
} finally {
|
||||
setDrawerProps({ confirmLoading: false });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<BasicModal v-bind="$attrs" @register="registerModal" title="首页配置" @ok="handleSubmit" width="40%">
|
||||
<BasicForm @register="registerForm" />
|
||||
</BasicModal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, unref } from 'vue';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import { BasicForm, useForm } from '/@/components/Form/index';
|
||||
import { roleIndexFormSchema } from '../role.data';
|
||||
import { saveOrUpdateRoleIndex, queryIndexByCode } from '../role.api';
|
||||
// Emits声明
|
||||
const emit = defineEmits(['register', 'success']);
|
||||
const isUpdate = ref(true);
|
||||
//表单配置
|
||||
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
|
||||
labelWidth: 150,
|
||||
schemas: roleIndexFormSchema,
|
||||
showActionButtonGroup: false,
|
||||
});
|
||||
//表单赋值
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
//重置表单
|
||||
await resetFields();
|
||||
setModalProps({ confirmLoading: false });
|
||||
setFieldsValue({ roleCode: data.roleCode });
|
||||
let res = await queryIndexByCode({ roleCode: data.roleCode });
|
||||
isUpdate.value = !!res.result?.id;
|
||||
if (unref(isUpdate)) {
|
||||
//表单赋值
|
||||
await setFieldsValue({
|
||||
...res.result,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
//表单提交事件
|
||||
async function handleSubmit(v) {
|
||||
try {
|
||||
let values = await validate();
|
||||
setModalProps({ confirmLoading: true });
|
||||
//提交表单
|
||||
await saveOrUpdateRoleIndex(values, isUpdate.value);
|
||||
//关闭弹窗
|
||||
closeModal();
|
||||
//刷新列表
|
||||
emit('success', { isUpdate: isUpdate.value, values });
|
||||
} finally {
|
||||
setModalProps({ confirmLoading: false });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@@ -0,0 +1,306 @@
|
||||
<template>
|
||||
<BasicDrawer v-bind="$attrs" @register="registerDrawer" width="650px" destroyOnClose showFooter>
|
||||
<template #title>
|
||||
角色权限配置
|
||||
<a-dropdown>
|
||||
<a-button class="more-icon">
|
||||
更多操作
|
||||
<Icon icon="ant-design:down-outlined" size="14px" style="position: relative;top: 1px;right: 5px"></Icon>
|
||||
</a-button>
|
||||
<template #overlay>
|
||||
<a-menu @click="treeMenuClick">
|
||||
<a-menu-item key="checkAll">选择全部</a-menu-item>
|
||||
<a-menu-item key="cancelCheck">取消选择</a-menu-item>
|
||||
<div class="line"></div>
|
||||
<a-menu-item key="openAll">展开全部</a-menu-item>
|
||||
<a-menu-item key="closeAll">折叠全部</a-menu-item>
|
||||
<div class="line"></div>
|
||||
<a-menu-item key="relation">层级关联</a-menu-item>
|
||||
<a-menu-item key="standAlone">层级独立</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
<BasicTree
|
||||
ref="treeRef"
|
||||
checkable
|
||||
:treeData="treeData"
|
||||
:checkedKeys="checkedKeys"
|
||||
:expandedKeys="expandedKeys"
|
||||
:selectedKeys="selectedKeys"
|
||||
:clickRowToExpand="false"
|
||||
:checkStrictly="true"
|
||||
title="所拥有的的权限"
|
||||
@check="onCheck"
|
||||
@select="onTreeNodeSelect"
|
||||
>
|
||||
<template #title="{ slotTitle, ruleFlag }">
|
||||
{{ slotTitle }}
|
||||
<Icon v-if="ruleFlag" icon="ant-design:align-left-outlined" style="margin-left: 5px; color: red"></Icon>
|
||||
</template>
|
||||
</BasicTree>
|
||||
<!--右下角按钮-->
|
||||
<template #footer>
|
||||
<!-- <PopConfirmButton title="确定放弃编辑？" @confirm="closeDrawer" okText="确定" cancelText="取消"></PopConfirmButton> -->
|
||||
<a-button @click="closeDrawer">取消</a-button>
|
||||
<a-button @click="handleSubmit(false)" type="primary" :loading="loading" ghost style="margin-right: 0.8rem">仅保存</a-button>
|
||||
<a-button @click="handleSubmit(true)" type="primary" :loading="loading">保存并关闭</a-button>
|
||||
</template>
|
||||
<RoleDataRuleDrawer @register="registerDrawer1" />
|
||||
</BasicDrawer>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, unref, onMounted } from 'vue';
|
||||
import { BasicDrawer, useDrawer, useDrawerInner } from '/@/components/Drawer';
|
||||
import { BasicTree, TreeItem } from '/@/components/Tree';
|
||||
import { PopConfirmButton } from '/@/components/Button';
|
||||
import RoleDataRuleDrawer from './RoleDataRuleDrawer.vue';
|
||||
import { queryTreeListForRole, queryRolePermission, saveRolePermission } from '../role.api';
|
||||
import { useI18n } from "/@/hooks/web/useI18n";
|
||||
import { ROLE_AUTH_CONFIG_KEY } from '/@/enums/cacheEnum';
|
||||
const emit = defineEmits(['register']);
|
||||
//树的信息
|
||||
const treeData = ref<TreeItem[]>([]);
|
||||
//树的全部节点信息
|
||||
const allTreeKeys = ref([]);
|
||||
//树的选择节点信息
|
||||
const checkedKeys = ref<any>([]);
|
||||
const defaultCheckedKeys = ref([]);
|
||||
//树的选中的节点信息
|
||||
const selectedKeys = ref([]);
|
||||
const roleId = ref('');
|
||||
//树的实例
|
||||
const treeRef = ref(null);
|
||||
const loading = ref(false);
|
||||
|
||||
//展开折叠的key
|
||||
const expandedKeys = ref<any>([]);
|
||||
//父子节点选中状态是否关联 true不关联，false关联
|
||||
const checkStrictly = ref<boolean>(false);
|
||||
const [registerDrawer1, { openDrawer: openDataRuleDrawer }] = useDrawer();
|
||||
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
|
||||
await reset();
|
||||
setDrawerProps({ confirmLoading: false, loading: true });
|
||||
roleId.value = data.roleId;
|
||||
//初始化数据
|
||||
const roleResult = await queryTreeListForRole();
|
||||
// 代码逻辑说明: 【QQYUN-8355】角色权限配置的菜单翻译
|
||||
treeData.value = translateTitle(roleResult.treeList);
|
||||
allTreeKeys.value = roleResult.ids;
|
||||
const localData = localStorage.getItem(ROLE_AUTH_CONFIG_KEY);
|
||||
if (localData) {
|
||||
const obj = JSON.parse(localData);
|
||||
obj.level && treeMenuClick({ key: obj.level });
|
||||
obj.expand && treeMenuClick({ key: obj.expand });
|
||||
} else {
|
||||
expandedKeys.value = roleResult.ids;
|
||||
}
|
||||
//初始化角色菜单数据
|
||||
const permResult = await queryRolePermission({ roleId: unref(roleId) });
|
||||
checkedKeys.value = permResult;
|
||||
defaultCheckedKeys.value = permResult;
|
||||
setDrawerProps({ loading: false });
|
||||
});
|
||||
/**
|
||||
* 2024-02-28
|
||||
* liaozhiyang
|
||||
* 翻译菜单名称
|
||||
*/
|
||||
function translateTitle(data) {
|
||||
if (data?.length) {
|
||||
data.forEach((item) => {
|
||||
if (item.slotTitle) {
|
||||
const { t } = useI18n();
|
||||
if (item.slotTitle.includes("t('") && t) {
|
||||
item.slotTitle = new Function('t', `return ${item.slotTitle}`)(t);
|
||||
}
|
||||
}
|
||||
if (item.children?.length) {
|
||||
translateTitle(item.children);
|
||||
}
|
||||
});
|
||||
}
|
||||
return data;
|
||||
}
|
||||
/**
|
||||
* 点击选中
|
||||
* 2024-04-26
|
||||
* liaozhiyang
|
||||
*/
|
||||
function onCheck(o, e) {
|
||||
// checkStrictly: true=>层级独立，false=>层级关联.
|
||||
if (checkStrictly.value) {
|
||||
checkedKeys.value = o.checked ? o.checked : o;
|
||||
} else {
|
||||
const keys = getNodeAllKey(e.node, 'children', 'key');
|
||||
if (e.checked) {
|
||||
// 反复操作下可能会有重复的keys，得用new Set去重下
|
||||
checkedKeys.value = [...new Set([...checkedKeys.value, ...keys])];
|
||||
} else {
|
||||
const result = removeMatchingItems(checkedKeys.value, keys);
|
||||
checkedKeys.value = result;
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 2024-04-26
|
||||
* liaozhiyang
|
||||
* 删除相匹配数组的项
|
||||
*/
|
||||
function removeMatchingItems(arr1, arr2) {
|
||||
// 使用哈希表记录 arr2 中的元素
|
||||
const hashTable = {};
|
||||
for (const item of arr2) {
|
||||
hashTable[item] = true;
|
||||
}
|
||||
// 使用 filter 方法遍历第一个数组，过滤出不在哈希表中存在的项
|
||||
return arr1.filter((item) => !hashTable[item]);
|
||||
}
|
||||
/**
|
||||
* 2024-04-26
|
||||
* liaozhiyang
|
||||
* 获取当前节点及以下所有子孙级的key
|
||||
*/
|
||||
function getNodeAllKey(node: any, children: any, key: string) {
|
||||
const result: any = [];
|
||||
result.push(node[key]);
|
||||
const recursion = (data) => {
|
||||
data.forEach((item: any) => {
|
||||
result.push(item[key]);
|
||||
if (item[children]?.length) {
|
||||
recursion(item[children]);
|
||||
}
|
||||
});
|
||||
};
|
||||
node[children]?.length && recursion(node[children]);
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* 选中节点，打开数据权限抽屉
|
||||
*/
|
||||
function onTreeNodeSelect(key) {
|
||||
if (key && key.length > 0) {
|
||||
selectedKeys.value = key;
|
||||
}
|
||||
openDataRuleDrawer(true, { functionId: unref(selectedKeys)[0], roleId: unref(roleId) });
|
||||
}
|
||||
/**
|
||||
* 数据重置
|
||||
*/
|
||||
function reset() {
|
||||
treeData.value = [];
|
||||
allTreeKeys.value = [];
|
||||
checkedKeys.value = [];
|
||||
defaultCheckedKeys.value = [];
|
||||
selectedKeys.value = [];
|
||||
roleId.value = '';
|
||||
}
|
||||
/**
|
||||
* 获取tree实例
|
||||
*/
|
||||
function getTree() {
|
||||
const tree = unref(treeRef);
|
||||
if (!tree) {
|
||||
throw new Error('tree is null!');
|
||||
}
|
||||
return tree;
|
||||
}
|
||||
/**
|
||||
* 提交
|
||||
*/
|
||||
async function handleSubmit(exit) {
|
||||
let params = {
|
||||
roleId: unref(roleId),
|
||||
permissionIds: unref(getTree().getCheckedKeys()).join(','),
|
||||
lastpermissionIds: unref(defaultCheckedKeys).join(','),
|
||||
};
|
||||
// 代码逻辑说明: issues/352 VUE角色授权重复保存
|
||||
if(loading.value===false){
|
||||
await doSave(params)
|
||||
}else{
|
||||
console.log('请等待上次执行完毕!');
|
||||
}
|
||||
if(exit){
|
||||
// 如果关闭
|
||||
closeDrawer();
|
||||
}else{
|
||||
// 没有关闭需要重新获取选中数据
|
||||
const permResult = await queryRolePermission({ roleId: unref(roleId) });
|
||||
defaultCheckedKeys.value = permResult;
|
||||
}
|
||||
}
|
||||
|
||||
// VUE角色授权重复保存 #352
|
||||
async function doSave(params) {
|
||||
loading.value = true;
|
||||
try {
|
||||
await saveRolePermission(params);
|
||||
} catch (e) {
|
||||
loading.value = false;
|
||||
}
|
||||
setTimeout(()=>{
|
||||
loading.value = false;
|
||||
}, 500)
|
||||
}
|
||||
|
||||
/**
|
||||
* 树菜单选择
|
||||
* @param key
|
||||
*/
|
||||
function treeMenuClick({ key }) {
|
||||
if (key === 'checkAll') {
|
||||
checkedKeys.value = allTreeKeys.value;
|
||||
} else if (key === 'cancelCheck') {
|
||||
checkedKeys.value = [];
|
||||
} else if (key === 'openAll') {
|
||||
expandedKeys.value = allTreeKeys.value;
|
||||
saveLocalOperation('expand', 'openAll');
|
||||
} else if (key === 'closeAll') {
|
||||
expandedKeys.value = [];
|
||||
saveLocalOperation('expand', 'closeAll');
|
||||
} else if (key === 'relation') {
|
||||
checkStrictly.value = false;
|
||||
saveLocalOperation('level', 'relation');
|
||||
} else {
|
||||
checkStrictly.value = true;
|
||||
saveLocalOperation('level', 'standAlone');
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 2024-05-31
|
||||
* liaozhiyang
|
||||
* 【TV360X-590】角色授权弹窗操作缓存
|
||||
* */
|
||||
const saveLocalOperation = (key, value) => {
|
||||
const localData = localStorage.getItem(ROLE_AUTH_CONFIG_KEY);
|
||||
const obj = localData ? JSON.parse(localData) : {};
|
||||
obj[key] = value;
|
||||
localStorage.setItem(ROLE_AUTH_CONFIG_KEY, JSON.stringify(obj))
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/** 固定操作按钮 */
|
||||
.jeecg-basic-tree {
|
||||
position: absolute;
|
||||
width: 618px;
|
||||
}
|
||||
// 代码逻辑说明: 抽屉弹窗标题图标下拉样式------------
|
||||
.line {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
.more-icon {
|
||||
/* font-size: 20px !important;
|
||||
color: black;
|
||||
display: inline-flex;*/
|
||||
float: right;
|
||||
margin-right: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
:deep(.jeecg-tree-header) {
|
||||
border-bottom: none;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<BasicDrawer @register="registerBaseDrawer" title="角色用户" width="800" destroyOnClose>
|
||||
<BasicTable @register="registerTable" :rowSelection="rowSelection">
|
||||
<template #tableTitle>
|
||||
<a-button type="primary" @click="handleCreate" v-if="!disableUserEdit"> 新增用户</a-button>
|
||||
<a-button type="primary" @click="handleSelect"> 已有用户</a-button>
|
||||
|
||||
<a-dropdown v-if="checkedKeys.length > 0">
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item key="1" @click="batchHandleDelete">
|
||||
<Icon icon="bx:bx-unlink"></Icon>
|
||||
取消关联
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
<a-button
|
||||
>批量操作
|
||||
<Icon icon="ant-design:down-outlined"></Icon>
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<TableAction :actions="getTableAction(record)" />
|
||||
</template>
|
||||
</BasicTable>
|
||||
<!--用户操作抽屉-->
|
||||
<UserDrawer @register="registerDrawer" @success="handleSuccess" />
|
||||
<!--用户选择弹窗-->
|
||||
<UseSelectModal @register="registerModal" @select="selectOk" />
|
||||
</BasicDrawer>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, unref } from 'vue';
|
||||
import { BasicTable, useTable, TableAction } from '/src/components/Table';
|
||||
import { BasicDrawer, useDrawer, useDrawerInner } from '/src/components/Drawer';
|
||||
import { useModal } from '/src/components/Modal';
|
||||
import UserDrawer from '../../user/UserDrawer.vue';
|
||||
import UseSelectModal from './UseSelectModal.vue';
|
||||
import { userList, deleteUserRole, batchDeleteUserRole, addUserRole } from '../role.api';
|
||||
import { userColumns, searchUserFormSchema } from '../role.data';
|
||||
import { getUserRoles } from '../../user/user.api';
|
||||
|
||||
const emit = defineEmits(['register', 'hideUserList']);
|
||||
const props = defineProps({
|
||||
disableUserEdit: {type:Boolean,default:false}
|
||||
})
|
||||
|
||||
const checkedKeys = ref<Array<string | number>>([]);
|
||||
const roleId = ref('');
|
||||
const [registerBaseDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
|
||||
roleId.value = data.id;
|
||||
setProps({ searchInfo: { roleId: data.id } });
|
||||
reload();
|
||||
});
|
||||
//注册drawer
|
||||
const [registerDrawer, { openDrawer }] = useDrawer();
|
||||
//注册drawer
|
||||
const [registerModal, { openModal }] = useModal();
|
||||
const [registerTable, { reload, updateTableDataRecord, setProps }] = useTable({
|
||||
title: '用户列表',
|
||||
api: userList,
|
||||
columns: userColumns,
|
||||
formConfig: {
|
||||
// 代码逻辑说明: 【QQYUN-5685】3、租户角色下,查询居左显示
|
||||
labelWidth: 60,
|
||||
schemas: searchUserFormSchema,
|
||||
autoSubmitOnEnter: true,
|
||||
},
|
||||
striped: true,
|
||||
useSearchForm: true,
|
||||
showTableSetting: true,
|
||||
clickToRowSelect: false,
|
||||
bordered: true,
|
||||
showIndexColumn: false,
|
||||
// 【issues/1064】列设置的 cacheKey
|
||||
tableSetting: { fullScreen: true, cacheKey: 'role_user_table' },
|
||||
canResize: false,
|
||||
rowKey: 'id',
|
||||
actionColumn: {
|
||||
width: 180,
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
slots: { customRender: 'action' },
|
||||
fixed: undefined,
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* 选择列配置
|
||||
*/
|
||||
const rowSelection = {
|
||||
type: 'checkbox',
|
||||
columnWidth: 50,
|
||||
selectedRowKeys: checkedKeys,
|
||||
onChange: onSelectChange,
|
||||
};
|
||||
|
||||
/**
|
||||
* 选择事件
|
||||
*/
|
||||
function onSelectChange(selectedRowKeys: (string | number)[], selectionRows) {
|
||||
checkedKeys.value = selectedRowKeys;
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增
|
||||
*/
|
||||
function handleCreate() {
|
||||
openDrawer(true, {
|
||||
isUpdate: false,
|
||||
selectedroles: [roleId.value],
|
||||
isRole: true,
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 编辑
|
||||
*/
|
||||
async function handleEdit(record: Recordable) {
|
||||
try {
|
||||
const userRoles = await getUserRoles({ userid: record.id });
|
||||
if (userRoles && userRoles.length > 0) {
|
||||
record.selectedroles = userRoles;
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
openDrawer(true, {
|
||||
record,
|
||||
isUpdate: true,
|
||||
isRole: true,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除事件
|
||||
*/
|
||||
async function handleDelete(record) {
|
||||
await deleteUserRole({ userId: record.id, roleId: roleId.value }, reload);
|
||||
}
|
||||
|
||||
/**
|
||||
* 批量删除事件
|
||||
*/
|
||||
async function batchHandleDelete() {
|
||||
await batchDeleteUserRole({ userIds: checkedKeys.value.join(','), roleId: roleId.value }, () => {
|
||||
// 代码逻辑说明: 【TV360X-1655】批量取消关联之后清空选中记录
|
||||
reload();
|
||||
checkedKeys.value = [];
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 成功回调
|
||||
*/
|
||||
function handleSuccess({ isUpdate, values }) {
|
||||
isUpdate ? updateTableDataRecord(values.id, values) : reload();
|
||||
}
|
||||
/**
|
||||
* 选择已有用户
|
||||
*/
|
||||
function handleSelect() {
|
||||
openModal(true);
|
||||
}
|
||||
/**
|
||||
* 添加已有用户
|
||||
*/
|
||||
async function selectOk(val) {
|
||||
await addUserRole({ roleId: roleId.value, userIdList: val }, reload);
|
||||
}
|
||||
/**
|
||||
* 操作栏
|
||||
*/
|
||||
function getTableAction(record) {
|
||||
return [
|
||||
{
|
||||
label: '编辑',
|
||||
onClick: handleEdit.bind(null, record),
|
||||
ifShow: () => !props.disableUserEdit,
|
||||
},
|
||||
{
|
||||
label: '取消关联',
|
||||
popConfirm: {
|
||||
title: '是否确认取消关联',
|
||||
confirm: handleDelete.bind(null, record),
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/*update-begin---author:wangshuai ---date:20230703 for：【QQYUN-5685】3、租户角色下,查询居左显示*/
|
||||
:deep(.ant-form-item-control-input-content){
|
||||
text-align: left;
|
||||
}
|
||||
/*update-end---author:wangshuai ---date:20230703 for：【QQYUN-5685】3、租户角色下,查询居左显示*/
|
||||
</style>
|
||||
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<BasicModal v-bind="$attrs" @register="registerModal" title="用户选择列表" width="1000px" @ok="handleSubmit" destroyOnClose @openChange="handleOpenChange">
|
||||
<BasicTable @register="registerTable" :rowSelection="rowSelection" />
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, unref, toRaw } from 'vue';
|
||||
import { BasicModal, useModalInner } from '/src/components/Modal';
|
||||
import { BasicTable, useTable, TableAction } from '/src/components/Table';
|
||||
import { userColumns, searchUserFormSchema } from '../role.data';
|
||||
import { list } from '../../user/user.api';
|
||||
// 声明Emits
|
||||
const emit = defineEmits(['select', 'register']);
|
||||
const checkedKeys = ref<Array<string | number>>([]);
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner();
|
||||
//注册table数据
|
||||
const [registerTable, { reload }] = useTable({
|
||||
api: list,
|
||||
rowKey: 'id',
|
||||
columns: userColumns,
|
||||
formConfig: {
|
||||
labelWidth: 60,
|
||||
schemas: searchUserFormSchema,
|
||||
baseRowStyle: { maxHeight: '20px' },
|
||||
autoSubmitOnEnter: true,
|
||||
},
|
||||
striped: true,
|
||||
useSearchForm: true,
|
||||
showTableSetting: false,
|
||||
bordered: true,
|
||||
showIndexColumn: false,
|
||||
canResize: false,
|
||||
});
|
||||
/**
|
||||
* 选择列配置
|
||||
*/
|
||||
const rowSelection = {
|
||||
type: 'checkbox',
|
||||
columnWidth: 50,
|
||||
selectedRowKeys: checkedKeys,
|
||||
onChange: onSelectChange,
|
||||
};
|
||||
/**
|
||||
* 选择事件
|
||||
*/
|
||||
function onSelectChange(selectedRowKeys: (string | number)[]) {
|
||||
checkedKeys.value = selectedRowKeys;
|
||||
}
|
||||
|
||||
const handleOpenChange = (visible) => {
|
||||
// -update-begin--author:liaozhiyang---date:20240702---for：【TV360X-1679】系统角色-角色用户再次打开弹窗重置之前选中的状态
|
||||
if (visible) {
|
||||
checkedKeys.value = [];
|
||||
}
|
||||
// -update-end--author:liaozhiyang---date:20240702---for：【TV360X-1679】系统角色-角色用户再次打开弹窗重置之前选中的状态
|
||||
};
|
||||
|
||||
//提交事件
|
||||
function handleSubmit() {
|
||||
setModalProps({ confirmLoading: true });
|
||||
//关闭弹窗
|
||||
closeModal();
|
||||
//刷新列表
|
||||
emit('select', toRaw(unref(checkedKeys)));
|
||||
setModalProps({ confirmLoading: false });
|
||||
}
|
||||
</script>
|
||||
188
jeecgboot-vue3/src/views/system/role/index.vue
Normal file
188
jeecgboot-vue3/src/views/system/role/index.vue
Normal file
@@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<BasicTable @register="registerTable">
|
||||
<template #tableTitle>
|
||||
<a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleCreate"> 新增</a-button>
|
||||
<a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
|
||||
<j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>
|
||||
<a-dropdown v-if="selectedRowKeys.length > 0">
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item key="1" @click="batchHandleDelete">
|
||||
<Icon icon="ant-design:delete-outlined"></Icon>
|
||||
删除
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
<a-button
|
||||
>批量操作
|
||||
<Icon icon="mdi:chevron-down"></Icon>
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
|
||||
</template>
|
||||
</BasicTable>
|
||||
<!--角色用户表格-->
|
||||
<RoleUserTable @register="roleUserDrawer" />
|
||||
<!--角色编辑抽屉-->
|
||||
<RoleDrawer @register="registerDrawer" @success="reload" :showFooter="showFooter" />
|
||||
<!--角色详情-->
|
||||
<RoleDesc @register="registerDesc"></RoleDesc>
|
||||
<!--角色菜单授权抽屉-->
|
||||
<RolePermissionDrawer @register="rolePermissionDrawer" />
|
||||
<!--角色首页配置-->
|
||||
<RoleIndexModal @register="registerIndexModal" />
|
||||
</template>
|
||||
<script lang="ts" name="system-role" setup>
|
||||
import { ref } from 'vue';
|
||||
import { BasicTable, TableAction } from '/@/components/Table';
|
||||
import { useDrawer } from '/@/components/Drawer';
|
||||
import { useModal } from '/@/components/Modal';
|
||||
import RoleDrawer from './components/RoleDrawer.vue';
|
||||
import RoleDesc from './components/RoleDesc.vue';
|
||||
import RolePermissionDrawer from './components/RolePermissionDrawer.vue';
|
||||
import RoleIndexModal from './components/RoleIndexModal.vue';
|
||||
import RoleUserTable from './components/RoleUserTable.vue';
|
||||
import { columns, searchFormSchema } from './role.data';
|
||||
import { list, deleteRole, batchDeleteRole, getExportUrl, getImportUrl } from './role.api';
|
||||
import { useListPage } from '/@/hooks/system/useListPage';
|
||||
const showFooter = ref(true);
|
||||
const [roleUserDrawer, { openDrawer: openRoleUserDrawer }] = useDrawer();
|
||||
const [registerDrawer, { openDrawer }] = useDrawer();
|
||||
const [registerIndexModal, { openModal: openIndexModal }] = useModal();
|
||||
const [rolePermissionDrawer, { openDrawer: openRolePermissionDrawer }] = useDrawer();
|
||||
const [registerDesc, { openDrawer: openRoleDesc }] = useDrawer();
|
||||
|
||||
// 列表页面公共参数、方法
|
||||
const { prefixCls, tableContext, onImportXls, onExportXls } = useListPage({
|
||||
designScope: 'role-template',
|
||||
tableProps: {
|
||||
title: '系统角色列表',
|
||||
api: list,
|
||||
columns: columns,
|
||||
formConfig: {
|
||||
// 代码逻辑说明: 【QQYUN-5873】查询区域lablel默认居左
|
||||
labelWidth:65,
|
||||
rowProps: { gutter: 24 },
|
||||
schemas: searchFormSchema,
|
||||
},
|
||||
actionColumn: {
|
||||
width: 120,
|
||||
},
|
||||
rowSelection: null,
|
||||
//自定义默认排序
|
||||
defSort: {
|
||||
column: 'id',
|
||||
order: 'desc',
|
||||
},
|
||||
},
|
||||
exportConfig: {
|
||||
name: '角色列表',
|
||||
url: getExportUrl,
|
||||
},
|
||||
importConfig: {
|
||||
url: getImportUrl,
|
||||
},
|
||||
});
|
||||
const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;
|
||||
|
||||
/**
|
||||
* 新增
|
||||
*/
|
||||
function handleCreate() {
|
||||
showFooter.value = true;
|
||||
openDrawer(true, {
|
||||
isUpdate: false,
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 编辑
|
||||
*/
|
||||
function handleEdit(record: Recordable) {
|
||||
showFooter.value = true;
|
||||
openDrawer(true, {
|
||||
record,
|
||||
isUpdate: true,
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 详情
|
||||
*/
|
||||
function handleDetail(record) {
|
||||
showFooter.value = false;
|
||||
openRoleDesc(true, {
|
||||
record,
|
||||
isUpdate: true,
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 删除事件
|
||||
*/
|
||||
async function handleDelete(record) {
|
||||
await deleteRole({ id: record.id }, reload);
|
||||
}
|
||||
/**
|
||||
* 批量删除事件
|
||||
*/
|
||||
async function batchHandleDelete() {
|
||||
await batchDeleteRole({ ids: selectedRowKeys.value }, reload);
|
||||
}
|
||||
/**
|
||||
* 角色授权弹窗
|
||||
*/
|
||||
function handlePerssion(record) {
|
||||
openRolePermissionDrawer(true, { roleId: record.id });
|
||||
}
|
||||
/**
|
||||
* 首页配置弹窗
|
||||
*/
|
||||
function handleIndexConfig(roleCode) {
|
||||
openIndexModal(true, { roleCode });
|
||||
}
|
||||
/**
|
||||
* 角色用户
|
||||
*/
|
||||
function handleUser(record) {
|
||||
//onSelectChange(selectedRowKeys)
|
||||
openRoleUserDrawer(true, record);
|
||||
}
|
||||
/**
|
||||
* 操作栏
|
||||
*/
|
||||
function getTableAction(record) {
|
||||
return [
|
||||
{
|
||||
label: '用户',
|
||||
onClick: handleUser.bind(null, record),
|
||||
},
|
||||
{
|
||||
label: '授权',
|
||||
onClick: handlePerssion.bind(null, record),
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* 下拉操作栏
|
||||
*/
|
||||
function getDropDownAction(record) {
|
||||
return [
|
||||
{
|
||||
label: '编辑',
|
||||
onClick: handleEdit.bind(null, record),
|
||||
},
|
||||
{
|
||||
label: '详情',
|
||||
onClick: handleDetail.bind(null, record),
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
popConfirm: {
|
||||
title: '是否确认删除',
|
||||
confirm: handleDelete.bind(null, record),
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
</script>
|
||||
188
jeecgboot-vue3/src/views/system/role/role.api.ts
Normal file
188
jeecgboot-vue3/src/views/system/role/role.api.ts
Normal file
@@ -0,0 +1,188 @@
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { Modal } from 'ant-design-vue';
|
||||
|
||||
enum Api {
|
||||
list = '/sys/role/list',
|
||||
listByTenant = '/sys/role/listByTenant',
|
||||
save = '/sys/role/add',
|
||||
edit = '/sys/role/edit',
|
||||
deleteRole = '/sys/role/delete',
|
||||
deleteBatch = '/sys/role/deleteBatch',
|
||||
exportXls = '/sys/role/exportXls',
|
||||
importExcel = '/sys/role/importExcel',
|
||||
isRoleExist = '/sys/role/checkRoleCode',
|
||||
queryTreeListForRole = '/sys/role/queryTreeList',
|
||||
queryRolePermission = '/sys/permission/queryRolePermission',
|
||||
saveRolePermission = '/sys/permission/saveRolePermission',
|
||||
queryDataRule = '/sys/role/datarule',
|
||||
getParentDesignList = '/act/process/extActDesignFlowData/getDesFormFlows',
|
||||
getRoleDegisnList = '/joa/designform/designFormCommuse/getRoleDegisnList',
|
||||
saveRoleDesign = '/joa/designform/designFormCommuse/sysRoleDesignAdd',
|
||||
userList = '/sys/user/userRoleList',
|
||||
deleteUserRole = '/sys/user/deleteUserRole',
|
||||
batchDeleteUserRole = '/sys/user/deleteUserRoleBatch',
|
||||
addUserRole = '/sys/user/addSysUserRole',
|
||||
saveRoleIndex = '/sys/sysRoleIndex/add',
|
||||
editRoleIndex = '/sys/sysRoleIndex/edit',
|
||||
queryIndexByCode = '/sys/sysRoleIndex/queryByCode',
|
||||
}
|
||||
/**
|
||||
* 导出api
|
||||
*/
|
||||
export const getExportUrl = Api.exportXls;
|
||||
/**
|
||||
* 导入api
|
||||
*/
|
||||
export const getImportUrl = Api.importExcel;
|
||||
/**
|
||||
* 系统角色列表
|
||||
* @param params
|
||||
*/
|
||||
export const list = (params) => defHttp.get({ url: Api.list, params });
|
||||
/**
|
||||
* 租户角色列表
|
||||
* @param params
|
||||
*/
|
||||
export const listByTenant = (params) => defHttp.get({ url: Api.listByTenant, params });
|
||||
|
||||
/**
|
||||
* 删除角色
|
||||
*/
|
||||
export const deleteRole = (params, handleSuccess) => {
|
||||
return defHttp.delete({ url: Api.deleteRole, params }, { joinParamsToUrl: true }).then(() => {
|
||||
handleSuccess();
|
||||
});
|
||||
};
|
||||
/**
|
||||
* 批量删除角色
|
||||
* @param params
|
||||
*/
|
||||
export const batchDeleteRole = (params, handleSuccess) => {
|
||||
Modal.confirm({
|
||||
title: '确认删除',
|
||||
content: '是否删除选中数据',
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
onOk: () => {
|
||||
return defHttp.delete({ url: Api.deleteBatch, data: params }, { joinParamsToUrl: true }).then(() => {
|
||||
handleSuccess();
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
/**
|
||||
* 保存或者更新角色
|
||||
* @param params
|
||||
*/
|
||||
export const saveOrUpdateRole = (params, isUpdate) => {
|
||||
let url = isUpdate ? Api.edit : Api.save;
|
||||
return defHttp.post({ url: url, params });
|
||||
};
|
||||
/**
|
||||
* 编码校验
|
||||
* @param params
|
||||
*/
|
||||
// 代码逻辑说明: 【QQYUN-7415】表单调用接口进行校验的添加防抖
|
||||
let timer;
|
||||
export const isRoleExist = (params) => {
|
||||
return new Promise((resolve, rejected) => {
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(() => {
|
||||
defHttp
|
||||
.get({ url: Api.isRoleExist, params }, { isTransformResponse: false })
|
||||
.then((res) => {
|
||||
resolve(res);
|
||||
})
|
||||
.catch((error) => {
|
||||
rejected(error);
|
||||
});
|
||||
}, 500);
|
||||
});
|
||||
};
|
||||
/**
|
||||
* 根据角色查询树信息
|
||||
*/
|
||||
export const queryTreeListForRole = () => defHttp.get({ url: Api.queryTreeListForRole });
|
||||
/**
|
||||
* 查询角色权限
|
||||
*/
|
||||
export const queryRolePermission = (params) => defHttp.get({ url: Api.queryRolePermission, params });
|
||||
/**
|
||||
* 保存角色权限
|
||||
*/
|
||||
export const saveRolePermission = (params) => defHttp.post({ url: Api.saveRolePermission, params });
|
||||
/**
|
||||
* 查询角色数据规则
|
||||
*/
|
||||
export const queryDataRule = (params) =>
|
||||
defHttp.get({ url: `${Api.queryDataRule}/${params.functionId}/${params.roleId}` }, { isTransformResponse: false });
|
||||
/**
|
||||
* 保存角色数据规则
|
||||
*/
|
||||
export const saveDataRule = (params) => defHttp.post({ url: Api.queryDataRule, params });
|
||||
/**
|
||||
* 获取表单数据
|
||||
* @return List<Map>
|
||||
*/
|
||||
export const getParentDesignList = () => defHttp.get({ url: Api.getParentDesignList });
|
||||
/**
|
||||
* 获取角色表单数据
|
||||
* @return List<Map>
|
||||
*/
|
||||
export const getRoleDegisnList = (params) => defHttp.get({ url: Api.getRoleDegisnList, params });
|
||||
/**
|
||||
* 提交角色工单信息
|
||||
*/
|
||||
export const saveRoleDesign = (params) => defHttp.post({ url: Api.saveRoleDesign, params });
|
||||
/**
|
||||
* 角色列表接口
|
||||
* @param params
|
||||
*/
|
||||
export const userList = (params) => defHttp.get({ url: Api.userList, params });
|
||||
/**
|
||||
* 删除角色用户
|
||||
*/
|
||||
export const deleteUserRole = (params, handleSuccess) => {
|
||||
return defHttp.delete({ url: Api.deleteUserRole, params }, { joinParamsToUrl: true }).then(() => {
|
||||
handleSuccess();
|
||||
});
|
||||
};
|
||||
/**
|
||||
* 批量删除角色用户
|
||||
* @param params
|
||||
*/
|
||||
export const batchDeleteUserRole = (params, handleSuccess) => {
|
||||
Modal.confirm({
|
||||
title: '确认删除',
|
||||
content: '是否删除选中数据',
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
onOk: () => {
|
||||
return defHttp.delete({ url: Api.batchDeleteUserRole, params }, { joinParamsToUrl: true }).then(() => {
|
||||
handleSuccess();
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
/**
|
||||
* 添加已有用户
|
||||
*/
|
||||
export const addUserRole = (params, handleSuccess) => {
|
||||
return defHttp.post({ url: Api.addUserRole, params }).then(() => {
|
||||
handleSuccess();
|
||||
});
|
||||
};
|
||||
/**
|
||||
* 保存或者更新
|
||||
* @param params
|
||||
* @param isUpdate 是否是更新数据
|
||||
*/
|
||||
export const saveOrUpdateRoleIndex = (params, isUpdate) => {
|
||||
let url = isUpdate ? Api.editRoleIndex : Api.saveRoleIndex;
|
||||
return defHttp.post({ url: url, params });
|
||||
};
|
||||
/**
|
||||
* 根据code查询首页配置
|
||||
* @param params
|
||||
*/
|
||||
export const queryIndexByCode = (params) => defHttp.get({ url: Api.queryIndexByCode, params }, { isTransformResponse: false });
|
||||
191
jeecgboot-vue3/src/views/system/role/role.data.ts
Normal file
191
jeecgboot-vue3/src/views/system/role/role.data.ts
Normal file
@@ -0,0 +1,191 @@
|
||||
import { FormSchema } from '/@/components/Table';
|
||||
import { isRoleExist } from './role.api';
|
||||
export const columns = [
|
||||
{
|
||||
title: '角色名称',
|
||||
dataIndex: 'roleName',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '角色编码',
|
||||
dataIndex: 'roleCode',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
width: 100,
|
||||
},
|
||||
];
|
||||
/**
|
||||
* 角色用户Columns
|
||||
*/
|
||||
export const userColumns = [
|
||||
{
|
||||
title: '用户账号',
|
||||
dataIndex: 'username',
|
||||
},
|
||||
{
|
||||
title: '用户姓名',
|
||||
dataIndex: 'realname',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status_dictText',
|
||||
width: 80,
|
||||
},
|
||||
];
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'roleName',
|
||||
label: '角色名称',
|
||||
component: 'Input',
|
||||
colProps: { span: 6 },
|
||||
},
|
||||
{
|
||||
field: 'roleCode',
|
||||
label: '角色编码',
|
||||
component: 'Input',
|
||||
colProps: { span: 6 },
|
||||
},
|
||||
];
|
||||
/**
|
||||
* 角色用户搜索form
|
||||
*/
|
||||
export const searchUserFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'username',
|
||||
label: '用户账号',
|
||||
component: 'Input',
|
||||
colProps: { span: 8 },
|
||||
labelWidth: 74,
|
||||
},
|
||||
{
|
||||
field: 'realname',
|
||||
label: '用户名称',
|
||||
component: 'Input',
|
||||
colProps: { span: 8 },
|
||||
labelWidth: 74,
|
||||
},
|
||||
];
|
||||
|
||||
export const formSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'id',
|
||||
label: '',
|
||||
component: 'Input',
|
||||
show: false,
|
||||
},
|
||||
{
|
||||
field: 'roleName',
|
||||
label: '角色名称',
|
||||
required: true,
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
field: 'roleCode',
|
||||
label: '角色编码',
|
||||
required: true,
|
||||
component: 'Input',
|
||||
dynamicDisabled: ({ values }) => {
|
||||
return !!values.id;
|
||||
},
|
||||
dynamicRules: ({ values, model }) => {
|
||||
console.log('values:', values);
|
||||
return [
|
||||
{
|
||||
required: true,
|
||||
validator: (_, value) => {
|
||||
if (!value) {
|
||||
return Promise.reject('请输入角色编码');
|
||||
}
|
||||
if (values) {
|
||||
return new Promise((resolve, reject) => {
|
||||
isRoleExist({ id: model.id, roleCode: value })
|
||||
.then((res) => {
|
||||
res.success ? resolve() : reject(res.message || '校验失败');
|
||||
})
|
||||
.catch((err) => {
|
||||
reject(err.message || '验证失败');
|
||||
});
|
||||
});
|
||||
}
|
||||
return Promise.resolve();
|
||||
},
|
||||
},
|
||||
];
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '备注',
|
||||
field: 'description',
|
||||
component: 'InputTextArea',
|
||||
},
|
||||
];
|
||||
|
||||
export const formDescSchema = [
|
||||
{
|
||||
field: 'roleName',
|
||||
label: '角色名称',
|
||||
},
|
||||
{
|
||||
field: 'roleCode',
|
||||
label: '角色编码',
|
||||
},
|
||||
{
|
||||
label: '备注',
|
||||
field: 'description',
|
||||
},
|
||||
];
|
||||
|
||||
export const roleIndexFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'id',
|
||||
label: '',
|
||||
component: 'Input',
|
||||
show: false,
|
||||
},
|
||||
{
|
||||
label: '角色编码',
|
||||
field: 'roleCode',
|
||||
component: 'Input',
|
||||
dynamicDisabled: true,
|
||||
},
|
||||
{
|
||||
label: '首页路由',
|
||||
field: 'url',
|
||||
component: 'Input',
|
||||
required: true,
|
||||
helpMessage: '首页路由的访问地址',
|
||||
},
|
||||
{
|
||||
label: '组件地址',
|
||||
field: 'component',
|
||||
component: 'Input',
|
||||
helpMessage: '首页路由的组件地址',
|
||||
componentProps: {
|
||||
placeholder: '请输入前端组件',
|
||||
},
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
field: 'route',
|
||||
label: '是否路由菜单',
|
||||
helpMessage: '非路由菜单设置成首页，需开启',
|
||||
component: 'Switch',
|
||||
defaultValue: true
|
||||
},
|
||||
{
|
||||
label: '优先级',
|
||||
field: 'priority',
|
||||
component: 'InputNumber',
|
||||
},
|
||||
{
|
||||
label: '是否开启',
|
||||
field: 'status',
|
||||
component: 'JSwitch',
|
||||
componentProps: {
|
||||
options: ['1', '0'],
|
||||
},
|
||||
},
|
||||
];
|
||||
Reference in New Issue
Block a user