mirror of
https://github.com/m-xlsea/ruoyi-plus-soybean.git
synced 2025-09-23 23:39:47 +08:00
Merge remote-tracking branch 'origin/master'
This commit is contained in:
xlsea
@ -1,34 +0,0 @@
|
||||
/**
|
||||
* 查询系统菜单列表
|
||||
*
|
||||
* @param menu 菜单信息
|
||||
* @return 菜单列表
|
||||
*/
|
||||
@Override
|
||||
public List<SysMenuVo> selectMenuList(SysMenuBo menu, Long userId) {
|
||||
List<SysMenuVo> menuList;
|
||||
// 管理员显示所有菜单信息
|
||||
if (LoginHelper.isSuperAdmin(userId)) {
|
||||
menuList = baseMapper.selectVoList(new LambdaQueryWrapper<SysMenu>()
|
||||
.like(StringUtils.isNotBlank(menu.getMenuName()), SysMenu::getMenuName, menu.getMenuName())
|
||||
.eq(StringUtils.isNotBlank(menu.getVisible()), SysMenu::getVisible, menu.getVisible())
|
||||
.eq(StringUtils.isNotBlank(menu.getStatus()), SysMenu::getStatus, menu.getStatus())
|
||||
.eq(StringUtils.isNotBlank(menu.getMenuType()), SysMenu::getMenuType, menu.getMenuType())
|
||||
.eq(ObjectUtil.isNotNull(menu.getParentId()), SysMenu::getParentId, menu.getParentId())
|
||||
.orderByAsc(SysMenu::getParentId)
|
||||
.orderByAsc(SysMenu::getOrderNum));
|
||||
} else {
|
||||
QueryWrapper<SysMenu> wrapper = Wrappers.query();
|
||||
wrapper.inSql("r.role_id", "select role_id from sys_user_role where user_id = " + userId)
|
||||
.like(StringUtils.isNotBlank(menu.getMenuName()), "m.menu_name", menu.getMenuName())
|
||||
.eq(StringUtils.isNotBlank(menu.getVisible()), "m.visible", menu.getVisible())
|
||||
.eq(StringUtils.isNotBlank(menu.getStatus()), "m.status", menu.getStatus())
|
||||
.eq(StringUtils.isNotBlank(menu.getMenuType()), "m.menu_type", menu.getMenuType())
|
||||
.eq(ObjectUtil.isNotNull(menu.getParentId()), "m.parent_id", menu.getParentId())
|
||||
.orderByAsc("m.parent_id")
|
||||
.orderByAsc("m.order_num");
|
||||
List<SysMenu> list = baseMapper.selectMenuListByUserId(wrapper);
|
||||
menuList = MapstructUtils.convert(list, SysMenuVo.class);
|
||||
}
|
||||
return menuList;
|
||||
}
|
||||
@ -62,7 +62,7 @@ public class VelocityUtils {
|
||||
velocityContext.put("BusinessName", StringUtils.capitalize(genTable.getBusinessName()));
|
||||
velocityContext.put("businessName", genTable.getBusinessName());
|
||||
velocityContext.put("business_name", StrUtil.toUnderlineCase(genTable.getBusinessName()));
|
||||
velocityContext.put("business-name", StrUtil.toSymbolCase(genTable.getBusinessName(),'-'));
|
||||
velocityContext.put("business__name", StrUtil.toSymbolCase(genTable.getBusinessName(), '-'));
|
||||
velocityContext.put("businessname", StrUtil.toSymbolCase(genTable.getBusinessName(), ' '));
|
||||
velocityContext.put("basePackage", getPackagePrefix(packageName));
|
||||
velocityContext.put("packageName", packageName);
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive, watch } from 'vue';
|
||||
import { fetchCreate${BusinessName}, fetchUpdate${BusinessName} } from '@/service/api/${moduleName}/${business__name}';
|
||||
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
|
||||
import { $t } from '@/locales';
|
||||
import { fetchCreate${BusinessName}, fetchUpdate${BusinessName} } from '@/service/api/${moduleName}/${business-name}';
|
||||
#if($dictList && $dictList.size() > 0)import { useDict } from '@/hooks/business/dict';#end
|
||||
import { $t } from '@/locales';
|
||||
|
||||
defineOptions({
|
||||
name: '${BusinessName}OperateDrawer'
|
||||
|
||||
8
docs/template/modules/soy.search.vue.vm
vendored
8
docs/template/modules/soy.search.vue.vm
vendored
@ -1,7 +1,8 @@
|
||||
#set($ModuleName=$moduleName.substring(0, 1).toUpperCase() + $moduleName.substring(1))
|
||||
<script setup lang="ts">
|
||||
import { $t } from '@/locales';
|
||||
import { ref } from 'vue';
|
||||
import { useNaiveForm } from '@/hooks/common/form';
|
||||
import { $t } from '@/locales';
|
||||
#if($dictList && $dictList.size() > 0)import { useDict } from '@/hooks/business/dict';#end
|
||||
|
||||
defineOptions({
|
||||
@ -20,7 +21,7 @@ const { formRef, validate, restoreValidation } = useNaiveForm();
|
||||
#foreach ($column in $columns)
|
||||
#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
|
||||
#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
|
||||
const dateRange${AttrName} = ref<[string, string]>();
|
||||
const dateRange${AttrName} = ref<[string, string] | null>(null);
|
||||
#end#end
|
||||
|
||||
const model = defineModel<Api.$ModuleName.${BusinessName}SearchParams>('model', { required: true });
|
||||
@ -34,9 +35,10 @@ async function reset() {
|
||||
#foreach ($column in $columns)
|
||||
#if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
|
||||
#set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
|
||||
dateRange${AttrName}.value = undefined;
|
||||
dateRange${AttrName}.value = null;
|
||||
#end
|
||||
#end
|
||||
Object.assign(model.value.params!, {});
|
||||
await restoreValidation();
|
||||
emit('reset');
|
||||
}
|
||||
|
||||
66
docs/template/soy.index.vue.vm
vendored
66
docs/template/soy.index.vue.vm
vendored
@ -1,13 +1,14 @@
|
||||
<script setup lang="tsx">
|
||||
import { NButton, NPopconfirm } from 'naive-ui';
|
||||
import { NDivider } from 'naive-ui';
|
||||
import { fetchBatchDelete${BusinessName}, fetchGet${BusinessName}List } from '@/service/api/${moduleName}/${businessName}';
|
||||
import { $t } from '@/locales';
|
||||
import { useAuth } from '@/hooks/business/auth';
|
||||
import { useAppStore } from '@/store/modules/app';
|
||||
import { useAuth } from '@/hooks/business/auth';
|
||||
import { useDownload } from '@/hooks/business/download';
|
||||
import { useTable, useTableOperate } from '@/hooks/common/table';
|
||||
import ${BusinessName}OperateDrawer from './modules/${business-name}-operate-drawer.vue';
|
||||
import ${BusinessName}Search from './modules/${business-name}-search.vue';
|
||||
import { $t } from '@/locales';
|
||||
import ButtonIcon from '@/components/custom/button-icon.vue';
|
||||
import ${BusinessName}OperateDrawer from './modules/${business__name}-operate-drawer.vue';
|
||||
import ${BusinessName}Search from './modules/${business__name}-search.vue';
|
||||
|
||||
defineOptions({
|
||||
name: '${BusinessName}List'
|
||||
@ -39,6 +40,7 @@ const {
|
||||
$column.javaField: null#if($foreach.hasNext),#end
|
||||
#end
|
||||
#end
|
||||
params: {}
|
||||
},
|
||||
columns: () => [
|
||||
{
|
||||
@ -68,14 +70,25 @@ const {
|
||||
align: 'center',
|
||||
width: 130,
|
||||
render: row => {
|
||||
const divider = () => {
|
||||
if (!hasAuth('${moduleName}:${businessName}:edit') || !hasAuth('${moduleName}:${businessName}:remove')) {
|
||||
return null;
|
||||
}
|
||||
return <NDivider vertical />;
|
||||
};
|
||||
|
||||
const editBtn = () => {
|
||||
if (!hasAuth('${moduleName}:${businessName}:edit')) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<NButton type="primary" ghost size="small" onClick={() => edit(row.#foreach($column in $columns)#if($column.isPk == '1')$column.javaField#end#end!)}>
|
||||
{$t('common.edit')}
|
||||
</NButton>
|
||||
<ButtonIcon
|
||||
text
|
||||
type="primary"
|
||||
icon="material-symbols:drive-file-rename-outline-outline"
|
||||
tooltipContent={$t('common.edit')}
|
||||
onClick={() => edit(row.#foreach($column in $columns)#if($column.isPk == '1')$column.javaField#end#end!)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@ -84,22 +97,21 @@ const {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<NPopconfirm onPositiveClick={() => handleDelete(row.#foreach($column in $columns)#if($column.isPk == '1')$column.javaField#end#end!)}>
|
||||
{{
|
||||
default: () => $t('common.confirmDelete'),
|
||||
trigger: () => (
|
||||
<NButton type="error" ghost size="small">
|
||||
{$t('common.delete')}
|
||||
</NButton>
|
||||
)
|
||||
}}
|
||||
</NPopconfirm>
|
||||
<ButtonIcon
|
||||
text
|
||||
type="error"
|
||||
icon="material-symbols:delete-outline"
|
||||
tooltipContent={$t('common.delete')}
|
||||
popconfirmContent={$t('common.confirmDelete')}
|
||||
onPositiveClick={() => handleDelete(row.#foreach($column in $columns)#if($column.isPk == '1')$column.javaField#end#end!)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="flex-center gap-8px">
|
||||
{editBtn()}
|
||||
{divider()}
|
||||
{deleteBtn()}
|
||||
</div>
|
||||
);
|
||||
@ -108,27 +120,19 @@ const {
|
||||
]
|
||||
});
|
||||
|
||||
const {
|
||||
drawerVisible,
|
||||
operateType,
|
||||
editingData,
|
||||
handleAdd,
|
||||
handleEdit,
|
||||
checkedRowKeys,
|
||||
onBatchDeleted,
|
||||
onDeleted
|
||||
} = useTableOperate(data, getData);
|
||||
const { drawerVisible, operateType, editingData, handleAdd, handleEdit, checkedRowKeys, onBatchDeleted, onDeleted } =
|
||||
useTableOperate(data, getData);
|
||||
|
||||
async function handleBatchDelete() {
|
||||
// request
|
||||
const { error } = await fetchBatchDelete${BusinessName}(checkedRowKeys.value)
|
||||
const { error } = await fetchBatchDelete${BusinessName}(checkedRowKeys.value);
|
||||
if (error) return;
|
||||
onBatchDeleted();
|
||||
}
|
||||
|
||||
async function handleDelete(#foreach($column in $columns)#if($column.isPk == '1')$column.javaField#end#end: CommonType.IdType) {
|
||||
// request
|
||||
const { error } = await fetchBatchDelete${BusinessName}([#foreach($column in $columns)#if($column.isPk == '1')$column.javaField#end#end])
|
||||
const { error } = await fetchBatchDelete${BusinessName}([#foreach($column in $columns)#if($column.isPk == '1')$column.javaField#end#end]);
|
||||
if (error) return;
|
||||
onDeleted();
|
||||
}
|
||||
@ -169,7 +173,7 @@ async function handleExport() {
|
||||
:scroll-x="962"
|
||||
:loading="loading"
|
||||
remote
|
||||
:row-key="row => row.id"
|
||||
:row-key="row => row.#foreach($column in $columns)#if($column.isPk == '1')$column.javaField#end#end"
|
||||
:pagination="mobilePagination"
|
||||
class="sm:h-full"
|
||||
/>
|
||||
|
||||
144
src/components/custom/dept-tree.vue
Normal file
144
src/components/custom/dept-tree.vue
Normal file
@ -0,0 +1,144 @@
|
||||
<script setup lang="tsx">
|
||||
import { onMounted, ref, useAttrs } from 'vue';
|
||||
import type { TreeSelectInst, TreeSelectProps } from 'naive-ui';
|
||||
import { useBoolean } from '@sa/hooks';
|
||||
import { fetchGetDeptTree } from '@/service/api/system/user';
|
||||
|
||||
defineOptions({ name: 'DeptTree' });
|
||||
|
||||
interface Props {
|
||||
immediate?: boolean;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
immediate: true
|
||||
});
|
||||
|
||||
const { bool: expandAll } = useBoolean();
|
||||
const { bool: checkAll } = useBoolean();
|
||||
const expandedKeys = ref<CommonType.IdType[]>([100]);
|
||||
|
||||
const deptTreeRef = ref<TreeSelectInst | null>(null);
|
||||
const value = defineModel<CommonType.IdType[]>('value', { required: false, default: [] });
|
||||
const options = defineModel<any[]>('options', { required: false, default: [] });
|
||||
const cascade = defineModel<boolean>('cascade', { required: false, default: true });
|
||||
const loading = defineModel<boolean>('loading', { required: false, default: false });
|
||||
|
||||
const attrs: TreeSelectProps = useAttrs();
|
||||
|
||||
async function getDeptList() {
|
||||
loading.value = true;
|
||||
const { error, data } = await fetchGetDeptTree();
|
||||
if (error) return;
|
||||
|
||||
// 确保 options.value 是数组
|
||||
if (data) {
|
||||
options.value = Array.isArray(data) ? data : [data];
|
||||
} else {
|
||||
options.value = [];
|
||||
}
|
||||
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (props.immediate) {
|
||||
getDeptList();
|
||||
}
|
||||
});
|
||||
|
||||
function getAllDeptIds(depts: any[]) {
|
||||
const deptIds: CommonType.IdType[] = [];
|
||||
depts.forEach(item => {
|
||||
if (item.id) {
|
||||
deptIds.push(item.id);
|
||||
}
|
||||
if (item.children && Array.isArray(item.children)) {
|
||||
deptIds.push(...getAllDeptIds(item.children));
|
||||
}
|
||||
});
|
||||
return deptIds;
|
||||
}
|
||||
|
||||
function handleCheckedTreeNodeAll(checked: boolean) {
|
||||
if (checked) {
|
||||
value.value = getAllDeptIds(options.value);
|
||||
return;
|
||||
}
|
||||
value.value = [];
|
||||
}
|
||||
|
||||
function handleSubmit() {
|
||||
const deptIds = [...value.value];
|
||||
const indeterminateData = deptTreeRef.value?.getIndeterminateData();
|
||||
if (cascade.value) {
|
||||
const parentIds: string[] = indeterminateData?.keys.filter(item => !deptIds?.includes(String(item))) as string[];
|
||||
deptIds?.push(...parentIds);
|
||||
}
|
||||
return deptIds;
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
submit: handleSubmit,
|
||||
refresh: getDeptList
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full flex-col gap-12px">
|
||||
<div class="w-full flex-center">
|
||||
<NCheckbox v-model:checked="expandAll" :checked-value="true" :unchecked-value="false">展开/折叠</NCheckbox>
|
||||
<NCheckbox
|
||||
v-model:checked="checkAll"
|
||||
:checked-value="true"
|
||||
:unchecked-value="false"
|
||||
@update:checked="handleCheckedTreeNodeAll"
|
||||
>
|
||||
全选/反选
|
||||
</NCheckbox>
|
||||
<NCheckbox v-model:checked="cascade" :checked-value="true" :unchecked-value="false">父子联动</NCheckbox>
|
||||
</div>
|
||||
<NSpin class="resource h-full w-full py-6px pl-3px" content-class="h-full" :show="loading">
|
||||
<NTree
|
||||
ref="deptTreeRef"
|
||||
v-model:checked-keys="value"
|
||||
v-model:expanded-keys="expandedKeys"
|
||||
multiple
|
||||
checkable
|
||||
key-field="id"
|
||||
label-field="label"
|
||||
:data="options"
|
||||
:cascade="cascade"
|
||||
:loading="loading"
|
||||
virtual-scroll
|
||||
:check-strategy="cascade ? 'child' : 'all'"
|
||||
:default-expand-all="expandAll"
|
||||
v-bind="attrs"
|
||||
/>
|
||||
</NSpin>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.resource {
|
||||
border-radius: 6px;
|
||||
border: 1px solid rgb(224, 224, 230);
|
||||
|
||||
.n-tree {
|
||||
min-height: 200px;
|
||||
max-height: 300px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
:deep(.n-tree__empty) {
|
||||
min-height: 200px;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.n-empty {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -19,7 +19,7 @@ defineProps<Props>();
|
||||
</template>
|
||||
<template #trigger>
|
||||
<div class="cursor-pointer pr-3px">
|
||||
<SvgIcon class="text-15px" icon="ep:warning" />
|
||||
<SvgIcon class="text-15px" icon="ph:warning-circle-bold" />
|
||||
</div>
|
||||
</template>
|
||||
</NTooltip>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script setup lang="tsx">
|
||||
import { ref, useAttrs } from 'vue';
|
||||
import { useAttrs } from 'vue';
|
||||
import type { TreeOption, TreeSelectProps } from 'naive-ui';
|
||||
import { useLoading } from '@sa/hooks';
|
||||
import { fetchGetMenuList } from '@/service/api/system';
|
||||
@ -15,9 +15,9 @@ interface Props {
|
||||
defineProps<Props>();
|
||||
|
||||
const value = defineModel<CommonType.IdType | null>('value', { required: false });
|
||||
const options = defineModel<Api.System.MenuList>('options', { required: false, default: [] });
|
||||
|
||||
const attrs: TreeSelectProps = useAttrs();
|
||||
const options = ref<Api.System.MenuList>([]);
|
||||
const { loading, startLoading, endLoading } = useLoading();
|
||||
|
||||
async function getMenuList() {
|
||||
@ -31,7 +31,7 @@ async function getMenuList() {
|
||||
icon: 'material-symbols:home-outline-rounded',
|
||||
children: handleTree(data, { idField: 'menuId', filterFn: item => item.menuType !== 'F' })
|
||||
}
|
||||
] as Api.System.Menu[];
|
||||
] as Api.System.MenuList;
|
||||
endLoading();
|
||||
}
|
||||
|
||||
|
||||
155
src/components/custom/menu-tree.vue
Normal file
155
src/components/custom/menu-tree.vue
Normal file
@ -0,0 +1,155 @@
|
||||
<script setup lang="tsx">
|
||||
import { onMounted, ref, useAttrs } from 'vue';
|
||||
import type { TreeOption, TreeSelectInst, TreeSelectProps } from 'naive-ui';
|
||||
import { useBoolean } from '@sa/hooks';
|
||||
import { fetchGetMenuTreeSelect } from '@/service/api/system';
|
||||
import SvgIcon from '@/components/custom/svg-icon.vue';
|
||||
|
||||
defineOptions({ name: 'MenuTree' });
|
||||
|
||||
interface Props {
|
||||
immediate?: boolean;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
immediate: true
|
||||
});
|
||||
|
||||
const { bool: expandAll } = useBoolean();
|
||||
const { bool: checkAll } = useBoolean();
|
||||
const expandedKeys = ref<CommonType.IdType[]>([0]);
|
||||
|
||||
const menuTreeRef = ref<TreeSelectInst | null>(null);
|
||||
const value = defineModel<CommonType.IdType[]>('value', { required: false, default: [] });
|
||||
const options = defineModel<Api.System.MenuList>('options', { required: false, default: [] });
|
||||
const cascade = defineModel<boolean>('cascade', { required: false, default: true });
|
||||
const loading = defineModel<boolean>('loading', { required: false, default: false });
|
||||
|
||||
const attrs: TreeSelectProps = useAttrs();
|
||||
|
||||
async function getMenuList() {
|
||||
loading.value = true;
|
||||
const { error, data } = await fetchGetMenuTreeSelect();
|
||||
if (error) return;
|
||||
options.value = [
|
||||
{
|
||||
id: 0,
|
||||
label: '根目录',
|
||||
icon: 'material-symbols:home-outline-rounded',
|
||||
children: data
|
||||
}
|
||||
] as Api.System.MenuList;
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (props.immediate) {
|
||||
getMenuList();
|
||||
}
|
||||
});
|
||||
|
||||
function renderPrefix({ option }: { option: TreeOption }) {
|
||||
const renderLocalIcon = String(option.icon).startsWith('icon-');
|
||||
let icon = renderLocalIcon ? undefined : String(option.icon ?? 'material-symbols:buttons-alt-outline-rounded');
|
||||
const localIcon = renderLocalIcon ? String(option.icon).replace('icon-', 'menu-') : undefined;
|
||||
if (icon === '#') {
|
||||
icon = 'material-symbols:buttons-alt-outline-rounded';
|
||||
}
|
||||
return <SvgIcon icon={icon} localIcon={localIcon} />;
|
||||
}
|
||||
|
||||
function getAllMenuIds(menu: Api.System.MenuList) {
|
||||
const menuIds: CommonType.IdType[] = [];
|
||||
menu.forEach(item => {
|
||||
menuIds.push(item.menuId);
|
||||
if (item.children) {
|
||||
menuIds.push(...getAllMenuIds(item.children));
|
||||
}
|
||||
});
|
||||
return menuIds;
|
||||
}
|
||||
|
||||
function handleCheckedTreeNodeAll(checked: boolean) {
|
||||
if (checked) {
|
||||
value.value = getAllMenuIds(options.value);
|
||||
return;
|
||||
}
|
||||
value.value = [];
|
||||
}
|
||||
|
||||
function handleSubmit() {
|
||||
const menuIds = [...value.value];
|
||||
const indeterminateData = menuTreeRef.value?.getIndeterminateData();
|
||||
if (cascade.value) {
|
||||
const parentIds: string[] = indeterminateData?.keys.filter(item => !menuIds?.includes(String(item))) as string[];
|
||||
menuIds?.push(...parentIds);
|
||||
}
|
||||
return menuIds;
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
submit: handleSubmit,
|
||||
refresh: getMenuList
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full flex-col gap-12px">
|
||||
<div class="w-full flex-center">
|
||||
<NCheckbox v-model:checked="expandAll" :checked-value="true" :unchecked-value="false">展开/折叠</NCheckbox>
|
||||
<NCheckbox
|
||||
v-model:checked="checkAll"
|
||||
:checked-value="true"
|
||||
:unchecked-value="false"
|
||||
@update:checked="handleCheckedTreeNodeAll"
|
||||
>
|
||||
全选/反选
|
||||
</NCheckbox>
|
||||
<NCheckbox v-model:checked="cascade" :checked-value="true" :unchecked-value="false">父子联动</NCheckbox>
|
||||
</div>
|
||||
<NSpin class="resource h-full w-full py-6px pl-3px" content-class="h-full" :show="loading">
|
||||
<NTree
|
||||
ref="menuTreeRef"
|
||||
v-model:checked-keys="value"
|
||||
v-model:expanded-keys="expandedKeys"
|
||||
multiple
|
||||
checkable
|
||||
:selectable="false"
|
||||
key-field="id"
|
||||
label-field="label"
|
||||
:data="options"
|
||||
:cascade="cascade"
|
||||
:loading="loading"
|
||||
virtual-scroll
|
||||
check-strategy="all"
|
||||
:default-expand-all="expandAll"
|
||||
:render-prefix="renderPrefix"
|
||||
v-bind="attrs"
|
||||
/>
|
||||
</NSpin>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.resource {
|
||||
border-radius: 6px;
|
||||
border: 1px solid rgb(224, 224, 230);
|
||||
|
||||
.n-tree {
|
||||
min-height: 200px;
|
||||
max-height: 300px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
:deep(.n-tree__empty) {
|
||||
min-height: 200px;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.n-empty {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -116,3 +116,15 @@ export const ossAccessPolicyRecord: Record<Api.System.OssAccessPolicy, string> =
|
||||
};
|
||||
|
||||
export const ossAccessPolicyOptions = transformRecordToOption(ossAccessPolicyRecord);
|
||||
|
||||
/** data scope */
|
||||
export const dataScopeRecord: Record<Api.System.DataScope, string> = {
|
||||
'1': '全部数据权限',
|
||||
'2': '自定数据权限',
|
||||
'3': '本部门数据权限',
|
||||
'4': '本部门及以下数据权限',
|
||||
'5': '仅本人数据权限',
|
||||
'6': '部门及以下或本人数据权限'
|
||||
};
|
||||
|
||||
export const dataScopeOptions = transformRecordToOption(dataScopeRecord);
|
||||
|
||||
@ -188,7 +188,8 @@ const local: App.I18n.Schema = {
|
||||
'system_oss-config': 'OSS Config',
|
||||
monitor_cache: 'Cache Monitor',
|
||||
monitor_online: 'Online User',
|
||||
'user-center': 'User Center'
|
||||
'user-center': 'User Center',
|
||||
system_role: 'Role Management'
|
||||
},
|
||||
page: {
|
||||
login: {
|
||||
|
||||
@ -188,7 +188,8 @@ const local: App.I18n.Schema = {
|
||||
'system_oss-config': 'OSS配置',
|
||||
monitor_cache: '缓存监控',
|
||||
monitor_online: '在线用户',
|
||||
'user-center': '个人中心'
|
||||
'user-center': '个人中心',
|
||||
system_role: '角色管理'
|
||||
},
|
||||
page: {
|
||||
login: {
|
||||
|
||||
@ -38,6 +38,7 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
|
||||
"system_oss-config": () => import("@/views/system/oss-config/index.vue"),
|
||||
system_oss: () => import("@/views/system/oss/index.vue"),
|
||||
system_post: () => import("@/views/system/post/index.vue"),
|
||||
system_role: () => import("@/views/system/role/index.vue"),
|
||||
system_tenant: () => import("@/views/system/tenant/index.vue"),
|
||||
system_user: () => import("@/views/system/user/index.vue"),
|
||||
tool_gen: () => import("@/views/tool/gen/index.vue"),
|
||||
|
||||
@ -250,6 +250,15 @@ export const generatedRoutes: GeneratedRoute[] = [
|
||||
i18nKey: 'route.system_post'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'system_role',
|
||||
path: '/system/role',
|
||||
component: 'view.system_role',
|
||||
meta: {
|
||||
title: 'system_role',
|
||||
i18nKey: 'route.system_role'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'system_tenant',
|
||||
path: '/system/tenant',
|
||||
|
||||
@ -187,6 +187,7 @@ const routeMap: RouteMap = {
|
||||
"system_oss": "/system/oss",
|
||||
"system_oss-config": "/system/oss-config",
|
||||
"system_post": "/system/post",
|
||||
"system_role": "/system/role",
|
||||
"system_tenant": "/system/tenant",
|
||||
"system_user": "/system/user",
|
||||
"tool": "/tool",
|
||||
|
||||
@ -34,3 +34,19 @@ export function fetchDeleteMenu(menuId: CommonType.IdType) {
|
||||
method: 'delete'
|
||||
});
|
||||
}
|
||||
|
||||
/** 获取菜单树 */
|
||||
export function fetchGetMenuTreeSelect() {
|
||||
return request<Api.System.MenuList>({
|
||||
url: 'system/menu/treeselect',
|
||||
method: 'get'
|
||||
});
|
||||
}
|
||||
|
||||
/** 获取角色菜单权限 */
|
||||
export function fetchGetRoleMenuTreeSelect(roleId: CommonType.IdType) {
|
||||
return request<Api.System.RoleMenuTreeSelect>({
|
||||
url: `/system/menu/roleMenuTreeselect/${roleId}`,
|
||||
method: 'get'
|
||||
});
|
||||
}
|
||||
|
||||
@ -27,8 +27,17 @@ export function fetchUpdateRole(data: Api.System.RoleOperateParams) {
|
||||
});
|
||||
}
|
||||
|
||||
/** 修改角色状态 */
|
||||
export function fetchUpdateRoleStatus(data: Api.System.RoleOperateParams) {
|
||||
return request<boolean>({
|
||||
url: '/system/role/changeStatus',
|
||||
method: 'put',
|
||||
data
|
||||
});
|
||||
}
|
||||
|
||||
/** 批量删除角色信息 */
|
||||
export function fetchDeleteRole(roleIds: CommonType.IdType[]) {
|
||||
export function fetchBatchDeleteRole(roleIds: CommonType.IdType[]) {
|
||||
return request<boolean>({
|
||||
url: `/system/role/${roleIds.join(',')}`,
|
||||
method: 'delete'
|
||||
@ -43,3 +52,20 @@ export function fetchGetRoleSelect(roleIds?: CommonType.IdType[]) {
|
||||
params: { roleIds }
|
||||
});
|
||||
}
|
||||
|
||||
/** 获取对应角色部门树列表 */
|
||||
export function fetchGetRoleDeptTreeSelect(roleId: CommonType.IdType) {
|
||||
return request<Api.System.RoleDeptTreeSelect>({
|
||||
url: `/system/role/deptTree/${roleId}`,
|
||||
method: 'get'
|
||||
});
|
||||
}
|
||||
|
||||
/** 获取对应角色用户列表 */
|
||||
export function fetchGetRoleUserList(params: Api.System.UserSearchParams) {
|
||||
return request<Api.System.UserList>({
|
||||
url: `/system/role/authUser/allocatedList`,
|
||||
method: 'get',
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
@ -34,6 +34,15 @@ export function fetchUpdateUser(data: Api.System.UserOperateParams) {
|
||||
});
|
||||
}
|
||||
|
||||
/** 修改用户状态 */
|
||||
export function fetchUpdateUserStatus(data: Api.System.UserOperateParams) {
|
||||
return request<boolean>({
|
||||
url: '/system/user/changeStatus',
|
||||
method: 'put',
|
||||
data
|
||||
});
|
||||
}
|
||||
|
||||
/** 批量删除用户信息 */
|
||||
export function fetchBatchDeleteUser(userIds: CommonType.IdType[]) {
|
||||
return request<boolean>({
|
||||
|
||||
27
src/typings/api/system.api.d.ts
vendored
27
src/typings/api/system.api.d.ts
vendored
@ -10,10 +10,13 @@ declare namespace Api {
|
||||
* backend api module: "system"
|
||||
*/
|
||||
namespace System {
|
||||
/** data scope */
|
||||
type DataScope = '1' | '2' | '3' | '4' | '5' | '6';
|
||||
|
||||
/** role */
|
||||
type Role = Common.CommonRecord<{
|
||||
/** 数据范围（1：全部数据权限 2：自定数据权限 3：本部门数据权限 4：本部门及以下数据权限） */
|
||||
dataScope: string;
|
||||
dataScope: DataScope;
|
||||
/** 部门树选择项是否关联显示 */
|
||||
deptCheckStrictly: boolean;
|
||||
/** 用户是否存在此角色标识 默认不存在 */
|
||||
@ -49,17 +52,29 @@ declare namespace Api {
|
||||
| 'roleName'
|
||||
| 'roleKey'
|
||||
| 'roleSort'
|
||||
| 'dataScope'
|
||||
| 'menuCheckStrictly'
|
||||
| 'deptCheckStrictly'
|
||||
| 'dataScope'
|
||||
| 'status'
|
||||
| 'remark'
|
||||
>
|
||||
> & { menuIds: CommonType.IdType[]; deptIds: CommonType.IdType[] }
|
||||
>;
|
||||
|
||||
/** role list */
|
||||
type RoleList = Common.PaginatingQueryRecord<Role>;
|
||||
|
||||
/** role menu tree select */
|
||||
type RoleMenuTreeSelect = Common.CommonRecord<{
|
||||
checkedKeys: CommonType.IdType[];
|
||||
menus: MenuList;
|
||||
}>;
|
||||
|
||||
/** role dept tree select */
|
||||
type RoleDeptTreeSelect = Common.CommonRecord<{
|
||||
checkedKeys: CommonType.IdType[];
|
||||
depts: Dept[];
|
||||
}>;
|
||||
|
||||
/** all role */
|
||||
type AllRole = Pick<Role, 'roleId' | 'roleName' | 'roleKey'>;
|
||||
|
||||
@ -107,7 +122,9 @@ declare namespace Api {
|
||||
|
||||
/** user search params */
|
||||
type UserSearchParams = CommonType.RecordNullable<
|
||||
Pick<User, 'deptId' | 'userName' | 'nickName' | 'phonenumber' | 'status'> & Common.CommonSearchParams
|
||||
Pick<User, 'deptId' | 'userName' | 'nickName' | 'phonenumber' | 'status'> & {
|
||||
roleId: CommonType.IdType;
|
||||
} & Common.CommonSearchParams
|
||||
>;
|
||||
|
||||
/** user operate params */
|
||||
@ -261,6 +278,8 @@ declare namespace Api {
|
||||
parentName: string;
|
||||
/** 子菜单 */
|
||||
children: MenuList;
|
||||
id?: CommonType.IdType;
|
||||
label?: string;
|
||||
}>;
|
||||
|
||||
/** menu list */
|
||||
|
||||
4
src/typings/components.d.ts
vendored
4
src/typings/components.d.ts
vendored
@ -12,8 +12,10 @@ declare module 'vue' {
|
||||
BetterScroll: typeof import('./../components/custom/better-scroll.vue')['default']
|
||||
BooleanTag: typeof import('./../components/custom/boolean-tag.vue')['default']
|
||||
ButtonIcon: typeof import('./../components/custom/button-icon.vue')['default']
|
||||
copy: typeof import('./../components/custom/menu-tree-select copy.vue')['default']
|
||||
CountTo: typeof import('./../components/custom/count-to.vue')['default']
|
||||
DarkModeContainer: typeof import('./../components/common/dark-mode-container.vue')['default']
|
||||
DeptTree: typeof import('./../components/custom/dept-tree.vue')['default']
|
||||
DictRadio: typeof import('./../components/custom/dict-radio.vue')['default']
|
||||
DictSelect: typeof import('./../components/custom/dict-select.vue')['default']
|
||||
DictTag: typeof import('./../components/custom/dict-tag.vue')['default']
|
||||
@ -39,6 +41,7 @@ declare module 'vue' {
|
||||
IconIcRoundUpload: typeof import('~icons/ic/round-upload')['default']
|
||||
IconLocalBanner: typeof import('~icons/local/banner')['default']
|
||||
'IconMaterialSymbols:download2Rounded': typeof import('~icons/material-symbols/download2-rounded')['default']
|
||||
'IconMaterialSymbols:syncOutline': typeof import('~icons/material-symbols/sync-outline')['default']
|
||||
'IconMaterialSymbols:upload2Rounded': typeof import('~icons/material-symbols/upload2-rounded')['default']
|
||||
IconMdiArrowDownThin: typeof import('~icons/mdi/arrow-down-thin')['default']
|
||||
IconMdiArrowUpThin: typeof import('~icons/mdi/arrow-up-thin')['default']
|
||||
@ -51,6 +54,7 @@ declare module 'vue' {
|
||||
LangSwitch: typeof import('./../components/common/lang-switch.vue')['default']
|
||||
LookForward: typeof import('./../components/custom/look-forward.vue')['default']
|
||||
MenuToggler: typeof import('./../components/common/menu-toggler.vue')['default']
|
||||
MenuTree: typeof import('./../components/custom/menu-tree.vue')['default']
|
||||
MenuTreeSelect: typeof import('./../components/custom/menu-tree-select.vue')['default']
|
||||
MonacoEditor: typeof import('./../components/common/monaco-editor.vue')['default']
|
||||
NAlert: typeof import('naive-ui')['NAlert']
|
||||
|
||||
2
src/typings/elegant-router.d.ts
vendored
2
src/typings/elegant-router.d.ts
vendored
@ -41,6 +41,7 @@ declare module "@elegant-router/types" {
|
||||
"system_oss": "/system/oss";
|
||||
"system_oss-config": "/system/oss-config";
|
||||
"system_post": "/system/post";
|
||||
"system_role": "/system/role";
|
||||
"system_tenant": "/system/tenant";
|
||||
"system_user": "/system/user";
|
||||
"tool": "/tool";
|
||||
@ -127,6 +128,7 @@ declare module "@elegant-router/types" {
|
||||
| "system_oss-config"
|
||||
| "system_oss"
|
||||
| "system_post"
|
||||
| "system_role"
|
||||
| "system_tenant"
|
||||
| "system_user"
|
||||
| "tool_gen"
|
||||
|
||||
@ -44,6 +44,7 @@ const options = reactive<CropperOptions>({
|
||||
|
||||
/** 编辑头像 */
|
||||
function handleEdit() {
|
||||
options.img = imageUrl.value;
|
||||
showDrawer();
|
||||
}
|
||||
|
||||
@ -86,6 +87,7 @@ async function handleCrop() {
|
||||
if (!error) {
|
||||
window.$message?.success('头像更新成功！');
|
||||
imageUrl.value = URL.createObjectURL(blob);
|
||||
authStore.userInfo.user!.avatar = imageUrl.value;
|
||||
hideDrawer();
|
||||
}
|
||||
}, 'image/png');
|
||||
@ -114,7 +116,7 @@ function handleClose() {
|
||||
|
||||
<NModal v-model:show="showModal" preset="card" title="修改头像" class="w-400px" @close="handleClose">
|
||||
<div class="flex-col-center gap-20px py-20px">
|
||||
<div v-if="options.img !== imageUrl" class="h-300px w-full">
|
||||
<div class="h-300px w-full">
|
||||
<Cropper
|
||||
ref="cropperRef"
|
||||
class="h-full bg-gray-100"
|
||||
@ -122,25 +124,11 @@ function handleClose() {
|
||||
:stencil-props="options.stencilProps"
|
||||
/>
|
||||
</div>
|
||||
<img
|
||||
v-else
|
||||
:src="imageUrl"
|
||||
alt="user-avatar"
|
||||
class="h-200px w-200px border border-gray-200 rounded-full object-cover"
|
||||
/>
|
||||
<div class="flex gap-12px">
|
||||
<NUpload accept=".jpg,.jpeg,.png,.gif" :max="1" :show-file-list="false" @before-upload="handleFileSelect">
|
||||
<NButton class="min-w-100px">选择图片</NButton>
|
||||
</NUpload>
|
||||
<NButton
|
||||
v-if="options.img !== imageUrl"
|
||||
type="primary"
|
||||
class="min-w-100px"
|
||||
:loading="loading"
|
||||
@click="handleCrop"
|
||||
>
|
||||
确认裁剪
|
||||
</NButton>
|
||||
<NButton type="primary" class="min-w-100px" :loading="loading" @click="handleCrop">确认裁剪</NButton>
|
||||
</div>
|
||||
</div>
|
||||
</NModal>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<script setup lang="tsx">
|
||||
import { NButton } from 'naive-ui';
|
||||
import { fetchBatchDeleteLoginInfor, fetchGetLoginInforList } from '@/service/api/monitor/login-infor';
|
||||
import { useAppStore } from '@/store/modules/app';
|
||||
import { useAuth } from '@/hooks/business/auth';
|
||||
@ -10,6 +9,7 @@ import { getBrowserIcon, getOsIcon } from '@/utils/format';
|
||||
import DictTag from '@/components/custom/dict-tag.vue';
|
||||
import SvgIcon from '@/components/custom/svg-icon.vue';
|
||||
import { $t } from '@/locales';
|
||||
import ButtonIcon from '@/components/custom/button-icon.vue';
|
||||
import LoginInforSearch from './modules/login-infor-search.vue';
|
||||
import LoginInforViewDrawer from './modules/login-infor-view-drawer.vue';
|
||||
|
||||
@ -142,9 +142,13 @@ const {
|
||||
render: row => {
|
||||
const viewBtn = () => {
|
||||
return (
|
||||
<NButton type="primary" ghost size="small" onClick={() => view(row.infoId!)}>
|
||||
详情
|
||||
</NButton>
|
||||
<ButtonIcon
|
||||
type="primary"
|
||||
text
|
||||
icon="material-symbols:visibility-outline"
|
||||
tooltipContent="详情"
|
||||
onClick={() => view(row.infoId!)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
return <div class="flex-center gap-8px">{viewBtn()}</div>;
|
||||
|
||||
@ -8,6 +8,7 @@ import { useTable, useTableOperate } from '@/hooks/common/table';
|
||||
import { useDict } from '@/hooks/business/dict';
|
||||
import DictTag from '@/components/custom/dict-tag.vue';
|
||||
import { $t } from '@/locales';
|
||||
import ButtonIcon from '@/components/custom/button-icon.vue';
|
||||
import OperLogViewDrawer from './modules/oper-log-view-drawer.vue';
|
||||
import OperLogSearch from './modules/oper-log-search.vue';
|
||||
|
||||
@ -123,9 +124,13 @@ const {
|
||||
render: row => {
|
||||
const viewBtn = () => {
|
||||
return (
|
||||
<NButton type="primary" ghost size="small" onClick={() => view(row.operId!)}>
|
||||
详情
|
||||
</NButton>
|
||||
<ButtonIcon
|
||||
type="primary"
|
||||
text
|
||||
icon="material-symbols:visibility-outline"
|
||||
tooltipContent="详情"
|
||||
onClick={() => view(row.operId!)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
return <div class="flex-center gap-8px">{viewBtn()}</div>;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script setup lang="tsx">
|
||||
import { NButton, NPopconfirm } from 'naive-ui';
|
||||
import { NDivider } from 'naive-ui';
|
||||
import { fetchBatchDeleteClient, fetchGetClientList } from '@/service/api/system/client';
|
||||
import { useAppStore } from '@/store/modules/app';
|
||||
import { useAuth } from '@/hooks/business/auth';
|
||||
@ -8,8 +8,10 @@ import { useTable, useTableOperate } from '@/hooks/common/table';
|
||||
import { useDict } from '@/hooks/business/dict';
|
||||
import { $t } from '@/locales';
|
||||
import DictTag from '@/components/custom/dict-tag.vue';
|
||||
import ButtonIcon from '@/components/custom/button-icon.vue';
|
||||
import ClientOperateDrawer from './modules/client-operate-drawer.vue';
|
||||
import ClientSearch from './modules/client-search.vue';
|
||||
|
||||
defineOptions({
|
||||
name: 'ClientList'
|
||||
});
|
||||
@ -123,14 +125,25 @@ const {
|
||||
align: 'center',
|
||||
width: 130,
|
||||
render: row => {
|
||||
const divider = () => {
|
||||
if (!hasAuth('system:client:edit') || !hasAuth('system:client:remove')) {
|
||||
return null;
|
||||
}
|
||||
return <NDivider vertical />;
|
||||
};
|
||||
|
||||
const editBtn = () => {
|
||||
if (!hasAuth('system:client:edit')) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<NButton type="primary" ghost size="small" onClick={() => edit(row.id!)}>
|
||||
{$t('common.edit')}
|
||||
</NButton>
|
||||
<ButtonIcon
|
||||
text
|
||||
type="primary"
|
||||
icon="material-symbols:drive-file-rename-outline-outline"
|
||||
tooltipContent={$t('common.edit')}
|
||||
onClick={() => edit(row.id!)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@ -139,22 +152,22 @@ const {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<NPopconfirm onPositiveClick={() => handleDelete(row.id!)} positive-text="确定" negative-text="取消">
|
||||
{{
|
||||
default: () => $t('common.confirmDelete'),
|
||||
trigger: () => (
|
||||
<NButton disabled={row.id === 1} type="error" ghost size="small">
|
||||
{$t('common.delete')}
|
||||
</NButton>
|
||||
)
|
||||
}}
|
||||
</NPopconfirm>
|
||||
<ButtonIcon
|
||||
text
|
||||
type="error"
|
||||
icon="material-symbols:delete-outline"
|
||||
tooltipContent={$t('common.delete')}
|
||||
popconfirmContent={$t('common.confirmDelete')}
|
||||
onPositiveClick={() => handleDelete(row.id!)}
|
||||
disabled={row.id === 1}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="flex-center gap-8px">
|
||||
{editBtn()}
|
||||
{divider()}
|
||||
{deleteBtn()}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script setup lang="tsx">
|
||||
import { NButton, NPopconfirm } from 'naive-ui';
|
||||
import { NDivider } from 'naive-ui';
|
||||
import { fetchBatchDeleteConfig, fetchGetConfigList, fetchRefreshCache } from '@/service/api/system/config';
|
||||
import { useAppStore } from '@/store/modules/app';
|
||||
import { useAuth } from '@/hooks/business/auth';
|
||||
@ -8,8 +8,10 @@ import { useTable, useTableOperate } from '@/hooks/common/table';
|
||||
import { useDict } from '@/hooks/business/dict';
|
||||
import { $t } from '@/locales';
|
||||
import DictTag from '@/components/custom/dict-tag.vue';
|
||||
import ButtonIcon from '@/components/custom/button-icon.vue';
|
||||
import ConfigOperateDrawer from './modules/config-operate-drawer.vue';
|
||||
import ConfigSearch from './modules/config-search.vue';
|
||||
|
||||
defineOptions({
|
||||
name: 'ConfigList'
|
||||
});
|
||||
@ -105,14 +107,25 @@ const {
|
||||
align: 'center',
|
||||
width: 130,
|
||||
render: row => {
|
||||
const divider = () => {
|
||||
if (!hasAuth('system:config:edit') || !hasAuth('system:config:remove')) {
|
||||
return null;
|
||||
}
|
||||
return <NDivider vertical />;
|
||||
};
|
||||
|
||||
const editBtn = () => {
|
||||
if (!hasAuth('system:config:edit')) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<NButton type="primary" ghost size="small" onClick={() => edit(row.configId!)}>
|
||||
{$t('common.edit')}
|
||||
</NButton>
|
||||
<ButtonIcon
|
||||
text
|
||||
type="primary"
|
||||
icon="material-symbols:drive-file-rename-outline-outline"
|
||||
tooltipContent={$t('common.edit')}
|
||||
onClick={() => edit(row.configId!)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@ -121,22 +134,21 @@ const {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<NPopconfirm onPositiveClick={() => handleDelete(row.configId!)}>
|
||||
{{
|
||||
default: () => $t('common.confirmDelete'),
|
||||
trigger: () => (
|
||||
<NButton type="error" ghost size="small">
|
||||
{$t('common.delete')}
|
||||
</NButton>
|
||||
)
|
||||
}}
|
||||
</NPopconfirm>
|
||||
<ButtonIcon
|
||||
text
|
||||
type="error"
|
||||
icon="material-symbols:delete-outline"
|
||||
tooltipContent={$t('common.delete')}
|
||||
popconfirmContent={$t('common.confirmDelete')}
|
||||
onPositiveClick={() => handleDelete(row.configId!)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="flex-center gap-8px">
|
||||
{editBtn()}
|
||||
{divider()}
|
||||
{deleteBtn()}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script setup lang="tsx">
|
||||
import { NButton, NPopconfirm } from 'naive-ui';
|
||||
import { NButton, NDivider } from 'naive-ui';
|
||||
import { jsonClone } from '@sa/utils';
|
||||
import type { TableDataWithIndex } from '@sa/hooks';
|
||||
import { fetchBatchDeleteDept, fetchGetDeptList } from '@/service/api/system/dept';
|
||||
@ -9,6 +9,7 @@ import { useTreeTable, useTreeTableOperate } from '@/hooks/common/tree-table';
|
||||
import { useDict } from '@/hooks/business/dict';
|
||||
import DictTag from '@/components/custom/dict-tag.vue';
|
||||
import { $t } from '@/locales';
|
||||
import ButtonIcon from '@/components/custom/button-icon.vue';
|
||||
import DeptOperateDrawer from './modules/dept-operate-drawer.vue';
|
||||
import DeptSearch from './modules/dept-search.vue';
|
||||
|
||||
@ -77,51 +78,58 @@ const {
|
||||
key: 'operate',
|
||||
title: $t('common.operate'),
|
||||
align: 'center',
|
||||
width: 180,
|
||||
width: 150,
|
||||
render: row => {
|
||||
const editBtn = () => {
|
||||
if (!hasAuth('system:dept:edit')) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<NButton type="primary" ghost size="small" onClick={() => edit(row)}>
|
||||
{$t('common.edit')}
|
||||
</NButton>
|
||||
);
|
||||
};
|
||||
const addBtn = () => {
|
||||
if (!hasAuth('system:dept:add')) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<NButton type="success" ghost size="small" onClick={() => addInRow(row)}>
|
||||
{$t('common.add')}
|
||||
</NButton>
|
||||
);
|
||||
};
|
||||
const deleteBtn = () => {
|
||||
if (!hasAuth('system:dept:remove')) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<NPopconfirm onPositiveClick={() => handleDelete(row.deptId!)}>
|
||||
{{
|
||||
default: () => $t('common.confirmDelete'),
|
||||
trigger: () => (
|
||||
<NButton type="error" ghost size="small">
|
||||
{$t('common.delete')}
|
||||
</NButton>
|
||||
)
|
||||
}}
|
||||
</NPopconfirm>
|
||||
<ButtonIcon
|
||||
text
|
||||
type="primary"
|
||||
icon="material-symbols:add-2-rounded"
|
||||
tooltipContent={$t('common.add')}
|
||||
onClick={() => addInRow(row)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const editBtn = () => {
|
||||
return (
|
||||
<ButtonIcon
|
||||
text
|
||||
type="primary"
|
||||
icon="material-symbols:drive-file-rename-outline-outline"
|
||||
tooltipContent={$t('common.edit')}
|
||||
onClick={() => edit(row)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const deleteBtn = () => {
|
||||
return (
|
||||
<ButtonIcon
|
||||
text
|
||||
type="error"
|
||||
icon="material-symbols:delete-outline"
|
||||
tooltipContent={$t('common.delete')}
|
||||
popconfirmContent={$t('common.confirmDelete')}
|
||||
onPositiveClick={() => handleDelete(row.deptId!)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const buttons = [];
|
||||
if (hasAuth('system:dept:add')) buttons.push(addBtn());
|
||||
if (hasAuth('system:dept:edit')) buttons.push(editBtn());
|
||||
if (hasAuth('system:dept:remove')) buttons.push(deleteBtn());
|
||||
|
||||
return (
|
||||
<div class="flex-center gap-8px">
|
||||
{editBtn()}
|
||||
{addBtn()}
|
||||
{deleteBtn()}
|
||||
{buttons.map((btn, index) => (
|
||||
<>
|
||||
{index !== 0 && <NDivider vertical />}
|
||||
{btn}
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script setup lang="tsx">
|
||||
import { NButton, NPopconfirm } from 'naive-ui';
|
||||
import { NDivider } from 'naive-ui';
|
||||
import { fetchBatchDeleteDictData, fetchGetDictDataList } from '@/service/api/system/dict-data';
|
||||
import { useAppStore } from '@/store/modules/app';
|
||||
import { useAuth } from '@/hooks/business/auth';
|
||||
@ -7,9 +7,11 @@ import { useDownload } from '@/hooks/business/download';
|
||||
import { useTable, useTableOperate } from '@/hooks/common/table';
|
||||
import { $t } from '@/locales';
|
||||
import DictTag from '@/components/custom/dict-tag.vue';
|
||||
import ButtonIcon from '@/components/custom/button-icon.vue';
|
||||
import { emitter } from '../mitt';
|
||||
import DictDataOperateDrawer from './modules/dict-data-operate-drawer.vue';
|
||||
import DictDataSearch from './modules/dict-data-search.vue';
|
||||
|
||||
defineOptions({
|
||||
name: 'DictDataList'
|
||||
});
|
||||
@ -103,14 +105,25 @@ const {
|
||||
align: 'center',
|
||||
width: 160,
|
||||
render: row => {
|
||||
const divider = () => {
|
||||
if (!hasAuth('system:dict:edit') || !hasAuth('system:dict:remove')) {
|
||||
return null;
|
||||
}
|
||||
return <NDivider vertical />;
|
||||
};
|
||||
|
||||
const editBtn = () => {
|
||||
if (!hasAuth('system:dict:edit')) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<NButton type="primary" ghost size="small" onClick={() => edit(row.dictCode!)}>
|
||||
{$t('common.edit')}
|
||||
</NButton>
|
||||
<ButtonIcon
|
||||
text
|
||||
type="primary"
|
||||
icon="material-symbols:drive-file-rename-outline-outline"
|
||||
tooltipContent={$t('common.edit')}
|
||||
onClick={() => edit(row.dictCode!)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@ -119,22 +132,21 @@ const {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<NPopconfirm onPositiveClick={() => handleDelete(row.dictCode!)}>
|
||||
{{
|
||||
default: () => $t('common.confirmDelete'),
|
||||
trigger: () => (
|
||||
<NButton type="error" ghost size="small">
|
||||
{$t('common.delete')}
|
||||
</NButton>
|
||||
)
|
||||
}}
|
||||
</NPopconfirm>
|
||||
<ButtonIcon
|
||||
text
|
||||
type="error"
|
||||
icon="material-symbols:delete-outline"
|
||||
tooltipContent={$t('common.delete')}
|
||||
popconfirmContent={$t('common.confirmDelete')}
|
||||
onPositiveClick={() => handleDelete(row.dictCode!)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="flex-center gap-8px">
|
||||
{editBtn()}
|
||||
{divider()}
|
||||
{deleteBtn()}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script setup lang="tsx">
|
||||
import { ref } from 'vue';
|
||||
import { NButton, NPopconfirm } from 'naive-ui';
|
||||
import { NDivider } from 'naive-ui';
|
||||
import type { TableDataWithIndex } from '@sa/hooks';
|
||||
import { fetchBatchDeleteDictType, fetchGetDictTypeList, fetchRefreshCache } from '@/service/api/system/dict';
|
||||
import { useAppStore } from '@/store/modules/app';
|
||||
@ -8,6 +8,7 @@ import { useAuth } from '@/hooks/business/auth';
|
||||
import { useDownload } from '@/hooks/business/download';
|
||||
import { useTable, useTableOperate } from '@/hooks/common/table';
|
||||
import { $t } from '@/locales';
|
||||
import ButtonIcon from '@/components/custom/button-icon.vue';
|
||||
import { emitter } from '../mitt';
|
||||
import DictTypeOperateDrawer from './modules/dict-type-operate-drawer.vue';
|
||||
import DictTypeSearch from './modules/dict-type-search.vue';
|
||||
@ -92,14 +93,25 @@ const {
|
||||
align: 'center',
|
||||
width: 160,
|
||||
render: row => {
|
||||
const divider = () => {
|
||||
if (!hasAuth('system:dict:edit') || !hasAuth('system:dict:remove')) {
|
||||
return null;
|
||||
}
|
||||
return <NDivider vertical />;
|
||||
};
|
||||
|
||||
const editBtn = () => {
|
||||
if (!hasAuth('system:dict:edit')) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<NButton type="primary" ghost size="small" onClick={() => edit(row.dictId!)}>
|
||||
{$t('common.edit')}
|
||||
</NButton>
|
||||
<ButtonIcon
|
||||
text
|
||||
type="primary"
|
||||
icon="material-symbols:drive-file-rename-outline-outline"
|
||||
tooltipContent={$t('common.edit')}
|
||||
onClick={() => edit(row.dictId!)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@ -108,22 +120,21 @@ const {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<NPopconfirm onPositiveClick={() => handleDelete(row.dictId!)}>
|
||||
{{
|
||||
default: () => $t('common.confirmDelete'),
|
||||
trigger: () => (
|
||||
<NButton type="error" ghost size="small">
|
||||
{$t('common.delete')}
|
||||
</NButton>
|
||||
)
|
||||
}}
|
||||
</NPopconfirm>
|
||||
<ButtonIcon
|
||||
text
|
||||
type="error"
|
||||
icon="material-symbols:delete-outline"
|
||||
tooltipContent={$t('common.delete')}
|
||||
popconfirmContent={$t('common.confirmDelete')}
|
||||
onPositiveClick={() => handleDelete(row.dictId!)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="flex-center gap-8px">
|
||||
{editBtn()}
|
||||
{divider()}
|
||||
{deleteBtn()}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,21 +1,24 @@
|
||||
<script setup lang="tsx">
|
||||
import { ref } from 'vue';
|
||||
import type { DataTableColumns, TreeInst, TreeOption } from 'naive-ui';
|
||||
import { NButton, NIcon, NInput, NPopconfirm, NTooltip } from 'naive-ui';
|
||||
import { NButton, NDivider, NIcon, NInput, NPopconfirm } from 'naive-ui';
|
||||
import { useBoolean, useLoading } from '@sa/hooks';
|
||||
import { menuIsFrameRecord, menuTypeRecord } from '@/constants/business';
|
||||
import { fetchDeleteMenu, fetchGetMenuList } from '@/service/api/system';
|
||||
import { useAppStore } from '@/store/modules/app';
|
||||
import { useDict } from '@/hooks/business/dict';
|
||||
import { useAuth } from '@/hooks/business/auth';
|
||||
import { handleTree } from '@/utils/common';
|
||||
import { $t } from '@/locales';
|
||||
import SvgIcon from '@/components/custom/svg-icon.vue';
|
||||
import DictTag from '@/components/custom/dict-tag.vue';
|
||||
import ButtonIcon from '@/components/custom/button-icon.vue';
|
||||
import MenuOperateDrawer from './modules/menu-operate-drawer.vue';
|
||||
|
||||
useDict('sys_show_hide');
|
||||
useDict('sys_normal_disable');
|
||||
|
||||
const { hasAuth } = useAuth();
|
||||
const appStore = useAppStore();
|
||||
const editingData = ref<Api.System.Menu>();
|
||||
const operateType = ref<NaiveUI.TableOperateType>('add');
|
||||
@ -97,12 +100,11 @@ function renderPrefix({ option }: { option: TreeOption }) {
|
||||
}
|
||||
|
||||
function renderSuffix({ option }: { option: TreeOption }) {
|
||||
if (!['M'].includes(String(option.menuType))) {
|
||||
return <></>;
|
||||
if (!['M'].includes(String(option.menuType)) || !hasAuth('system:menu:add')) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div class="flex-center gap-8px">
|
||||
<ButtonIcon
|
||||
text
|
||||
@ -115,7 +117,6 @@ function renderSuffix({ option }: { option: TreeOption }) {
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -224,39 +225,50 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
|
||||
width: 80,
|
||||
align: 'center',
|
||||
render(row) {
|
||||
const divider = () => {
|
||||
if (!hasAuth('system:menu:edit') || !hasAuth('system:menu:remove')) {
|
||||
return null;
|
||||
}
|
||||
return <NDivider vertical />;
|
||||
};
|
||||
|
||||
const editBtn = () => {
|
||||
if (!hasAuth('system:menu:edit')) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<ButtonIcon
|
||||
type="primary"
|
||||
text
|
||||
icon="ep:edit"
|
||||
tooltipContent="修改"
|
||||
type="primary"
|
||||
icon="material-symbols:drive-file-rename-outline-outline"
|
||||
tooltipContent={$t('common.edit')}
|
||||
onClick={() => handleUpdateBtnMenu(row)}
|
||||
/>
|
||||
<NTooltip placement="bottom">
|
||||
{{
|
||||
trigger: () => (
|
||||
<NPopconfirm onPositiveClick={() => handleDeleteBtnMenu(row.menuId!)}>
|
||||
{{
|
||||
default: () => $t('common.confirmDelete'),
|
||||
trigger: () => (
|
||||
<NButton class="ml-16px h-36px text-icon" type="error" text>
|
||||
{{
|
||||
default: () => (
|
||||
);
|
||||
};
|
||||
|
||||
const deleteBtn = () => {
|
||||
if (!hasAuth('system:menu:remove')) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<ButtonIcon
|
||||
text
|
||||
type="error"
|
||||
icon="material-symbols:delete-outline"
|
||||
tooltipContent={$t('common.delete')}
|
||||
popconfirmContent={$t('common.confirmDelete')}
|
||||
onPositiveClick={() => handleDeleteBtnMenu(row.menuId!)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="flex-center gap-8px">
|
||||
<SvgIcon icon="ep:delete" />
|
||||
{editBtn()}
|
||||
{divider()}
|
||||
{deleteBtn()}
|
||||
</div>
|
||||
)
|
||||
}}
|
||||
</NButton>
|
||||
)
|
||||
}}
|
||||
</NPopconfirm>
|
||||
),
|
||||
default: () => <>{$t('common.delete')}</>
|
||||
}}
|
||||
</NTooltip>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -268,6 +280,7 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
|
||||
<template #header>菜单列表</template>
|
||||
<template #header-extra>
|
||||
<ButtonIcon
|
||||
v-if="hasAuth('system:menu:add')"
|
||||
size="small"
|
||||
icon="ic-round-plus"
|
||||
class="h-28px text-icon"
|
||||
@ -325,7 +338,7 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
|
||||
<template #header-extra>
|
||||
<NSpace>
|
||||
<NButton
|
||||
v-if="currentMenu.menuType === 'M'"
|
||||
v-if="currentMenu.menuType === 'M' && hasAuth('system:menu:add')"
|
||||
size="small"
|
||||
ghost
|
||||
type="primary"
|
||||
@ -336,7 +349,7 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
|
||||
</template>
|
||||
新增子菜单
|
||||
</NButton>
|
||||
<NButton size="small" ghost type="primary" @click="handleUpdateMenu">
|
||||
<NButton v-if="hasAuth('system:menu:edit')" size="small" ghost type="primary" @click="handleUpdateMenu">
|
||||
<template #icon>
|
||||
<icon-ic-round-edit />
|
||||
</template>
|
||||
@ -344,7 +357,13 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
|
||||
</NButton>
|
||||
<NPopconfirm @positive-click="() => handleDeleteMenu()">
|
||||
<template #trigger>
|
||||
<NButton size="small" ghost type="error" :disabled="btnData.length > 0 || btnLoading">
|
||||
<NButton
|
||||
v-if="hasAuth('system:menu:remove')"
|
||||
size="small"
|
||||
ghost
|
||||
type="error"
|
||||
:disabled="btnData.length > 0 || btnLoading"
|
||||
>
|
||||
<template #icon>
|
||||
<icon-ic-round-delete />
|
||||
</template>
|
||||
|
||||
@ -153,7 +153,7 @@ async function handleSubmit() {
|
||||
} else if (model.menuType === 'C') {
|
||||
component = humpToLine(model.component?.replaceAll('/', '_') || '');
|
||||
} else if (model.menuType === 'M') {
|
||||
component = model.parentId === 0 ? 'layout.base' : undefined;
|
||||
component = 'layout.base';
|
||||
}
|
||||
|
||||
// request
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script setup lang="tsx">
|
||||
import { NButton, NPopconfirm } from 'naive-ui';
|
||||
import { NDivider } from 'naive-ui';
|
||||
import { fetchBatchDeleteNotice, fetchGetNoticeList } from '@/service/api/system/notice';
|
||||
import { useAppStore } from '@/store/modules/app';
|
||||
import { useAuth } from '@/hooks/business/auth';
|
||||
@ -8,8 +8,10 @@ import { useTable, useTableOperate } from '@/hooks/common/table';
|
||||
import { useDict } from '@/hooks/business/dict';
|
||||
import { $t } from '@/locales';
|
||||
import DictTag from '@/components/custom/dict-tag.vue';
|
||||
import ButtonIcon from '@/components/custom/button-icon.vue';
|
||||
import NoticeOperateDrawer from './modules/notice-operate-drawer.vue';
|
||||
import NoticeSearch from './modules/notice-search.vue';
|
||||
|
||||
defineOptions({
|
||||
name: 'NoticeList'
|
||||
});
|
||||
@ -88,14 +90,25 @@ const {
|
||||
align: 'center',
|
||||
width: 130,
|
||||
render: row => {
|
||||
const divider = () => {
|
||||
if (!hasAuth('system:notice:edit') || !hasAuth('system:notice:remove')) {
|
||||
return null;
|
||||
}
|
||||
return <NDivider vertical />;
|
||||
};
|
||||
|
||||
const editBtn = () => {
|
||||
if (!hasAuth('system:notice:edit')) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<NButton type="primary" ghost size="small" onClick={() => edit(row.noticeId!)}>
|
||||
{$t('common.edit')}
|
||||
</NButton>
|
||||
<ButtonIcon
|
||||
text
|
||||
type="primary"
|
||||
icon="material-symbols:drive-file-rename-outline-outline"
|
||||
tooltipContent={$t('common.edit')}
|
||||
onClick={() => edit(row.noticeId!)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@ -104,22 +117,21 @@ const {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<NPopconfirm onPositiveClick={() => handleDelete(row.noticeId!)}>
|
||||
{{
|
||||
default: () => $t('common.confirmDelete'),
|
||||
trigger: () => (
|
||||
<NButton type="error" ghost size="small">
|
||||
{$t('common.delete')}
|
||||
</NButton>
|
||||
)
|
||||
}}
|
||||
</NPopconfirm>
|
||||
<ButtonIcon
|
||||
text
|
||||
type="error"
|
||||
icon="material-symbols:delete-outline"
|
||||
tooltipContent={$t('common.delete')}
|
||||
popconfirmContent={$t('common.confirmDelete')}
|
||||
onPositiveClick={() => handleDelete(row.noticeId!)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="flex-center gap-8px">
|
||||
{editBtn()}
|
||||
{divider()}
|
||||
{deleteBtn()}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script setup lang="tsx">
|
||||
import { NButton, NPopconfirm, NTag } from 'naive-ui';
|
||||
import { NDivider, NTag } from 'naive-ui';
|
||||
import {
|
||||
fetchBatchDeleteOssConfig,
|
||||
fetchGetOssConfigList,
|
||||
@ -11,6 +11,7 @@ import { useTable, useTableOperate } from '@/hooks/common/table';
|
||||
import { useDict } from '@/hooks/business/dict';
|
||||
import StatusSwitch from '@/components/custom/status-switch.vue';
|
||||
import { $t } from '@/locales';
|
||||
import ButtonIcon from '@/components/custom/button-icon.vue';
|
||||
import OssConfigOperateDrawer from './modules/oss-config-operate-drawer.vue';
|
||||
import OssConfigSearch from './modules/oss-config-search.vue';
|
||||
|
||||
@ -125,14 +126,25 @@ const {
|
||||
align: 'center',
|
||||
width: 130,
|
||||
render: row => {
|
||||
const divider = () => {
|
||||
if (!hasAuth('system:ossConfig:edit') || !hasAuth('system:ossConfig:remove')) {
|
||||
return null;
|
||||
}
|
||||
return <NDivider vertical />;
|
||||
};
|
||||
|
||||
const editBtn = () => {
|
||||
if (!hasAuth('system:ossConfig:edit')) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<NButton type="primary" ghost size="small" onClick={() => edit(row.ossConfigId!)}>
|
||||
{$t('common.edit')}
|
||||
</NButton>
|
||||
<ButtonIcon
|
||||
text
|
||||
type="primary"
|
||||
icon="material-symbols:drive-file-rename-outline-outline"
|
||||
tooltipContent={$t('common.edit')}
|
||||
onClick={() => edit(row.ossConfigId!)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@ -141,22 +153,21 @@ const {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<NPopconfirm onPositiveClick={() => handleDelete(row.ossConfigId!)}>
|
||||
{{
|
||||
default: () => $t('common.confirmDelete'),
|
||||
trigger: () => (
|
||||
<NButton type="error" ghost size="small">
|
||||
{$t('common.delete')}
|
||||
</NButton>
|
||||
)
|
||||
}}
|
||||
</NPopconfirm>
|
||||
<ButtonIcon
|
||||
text
|
||||
type="error"
|
||||
icon="material-symbols:delete-outline"
|
||||
tooltipContent={$t('common.delete')}
|
||||
popconfirmContent={$t('common.confirmDelete')}
|
||||
onPositiveClick={() => handleDelete(row.ossConfigId!)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="flex-center gap-8px">
|
||||
{editBtn()}
|
||||
{divider()}
|
||||
{deleteBtn()}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script setup lang="tsx">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { NButton, NEllipsis, NImage, NTag, NTooltip } from 'naive-ui';
|
||||
import { NButton, NDivider, NEllipsis, NImage, NTag, NTooltip } from 'naive-ui';
|
||||
import { useBoolean, useLoading } from '@sa/hooks';
|
||||
import { fetchBatchDeleteOss, fetchGetOssList } from '@/service/api/system/oss';
|
||||
import { fetchGetConfigByKey, fetchUpdateConfigByKey } from '@/service/api/system/config';
|
||||
@ -146,6 +146,13 @@ const {
|
||||
align: 'center',
|
||||
width: 130,
|
||||
render: row => {
|
||||
const divider = () => {
|
||||
if (!hasAuth('system:oss:download') || !hasAuth('system:oss:delete')) {
|
||||
return null;
|
||||
}
|
||||
return <NDivider vertical />;
|
||||
};
|
||||
|
||||
const downloadBtn = () => {
|
||||
if (!hasAuth('system:oss:download')) {
|
||||
return null;
|
||||
@ -180,8 +187,9 @@ const {
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="flex-center gap-16px">
|
||||
<div class="flex-center gap-8px">
|
||||
{downloadBtn()}
|
||||
{divider()}
|
||||
{deleteBtn()}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script setup lang="tsx">
|
||||
import { ref } from 'vue';
|
||||
import { NButton, NPopconfirm } from 'naive-ui';
|
||||
import { NButton, NDivider } from 'naive-ui';
|
||||
import { useLoading } from '@sa/hooks';
|
||||
import { fetchBatchDeletePost, fetchGetPostList } from '@/service/api/system/post';
|
||||
import { fetchGetDeptTree } from '@/service/api/system';
|
||||
@ -11,6 +11,7 @@ import { useTable, useTableOperate } from '@/hooks/common/table';
|
||||
import { useDict } from '@/hooks/business/dict';
|
||||
import DictTag from '@/components/custom/dict-tag.vue';
|
||||
import { $t } from '@/locales';
|
||||
import ButtonIcon from '@/components/custom/button-icon.vue';
|
||||
import PostOperateDrawer from './modules/post-operate-drawer.vue';
|
||||
import PostSearch from './modules/post-search.vue';
|
||||
|
||||
@ -104,14 +105,25 @@ const {
|
||||
align: 'center',
|
||||
width: 130,
|
||||
render: row => {
|
||||
const divider = () => {
|
||||
if (!hasAuth('system:post:edit') || !hasAuth('system:post:remove')) {
|
||||
return null;
|
||||
}
|
||||
return <NDivider vertical />;
|
||||
};
|
||||
|
||||
const editBtn = () => {
|
||||
if (!hasAuth('system:post:edit')) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<NButton type="primary" ghost size="small" onClick={() => edit(row.postId!)}>
|
||||
{$t('common.edit')}
|
||||
</NButton>
|
||||
<ButtonIcon
|
||||
type="primary"
|
||||
text
|
||||
icon="material-symbols:drive-file-rename-outline-outline"
|
||||
tooltipContent={$t('common.edit')}
|
||||
onClick={() => edit(row.postId!)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@ -120,22 +132,21 @@ const {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<NPopconfirm onPositiveClick={() => handleDelete(row.postId!)}>
|
||||
{{
|
||||
default: () => $t('common.confirmDelete'),
|
||||
trigger: () => (
|
||||
<NButton type="error" ghost size="small">
|
||||
{$t('common.delete')}
|
||||
</NButton>
|
||||
)
|
||||
}}
|
||||
</NPopconfirm>
|
||||
<ButtonIcon
|
||||
text
|
||||
type="error"
|
||||
icon="material-symbols:delete-outline"
|
||||
tooltipContent={$t('common.delete')}
|
||||
popconfirmContent={$t('common.confirmDelete')}
|
||||
onPositiveClick={() => handleDelete(row.postId!)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="flex-center gap-8px">
|
||||
{editBtn()}
|
||||
{divider()}
|
||||
{deleteBtn()}
|
||||
</div>
|
||||
);
|
||||
|
||||
296
src/views/system/role/index.vue
Normal file
296
src/views/system/role/index.vue
Normal file
@ -0,0 +1,296 @@
|
||||
<script setup lang="tsx">
|
||||
import { NDivider, NTag } from 'naive-ui';
|
||||
import { jsonClone } from '@sa/utils';
|
||||
import { useBoolean } from '@sa/hooks';
|
||||
import { dataScopeRecord } from '@/constants/business';
|
||||
import { fetchBatchDeleteRole, fetchGetRoleList, fetchUpdateRoleStatus } from '@/service/api/system/role';
|
||||
import { useAppStore } from '@/store/modules/app';
|
||||
import { useAuth } from '@/hooks/business/auth';
|
||||
import { useDownload } from '@/hooks/business/download';
|
||||
import { useTable, useTableOperate } from '@/hooks/common/table';
|
||||
import { $t } from '@/locales';
|
||||
import ButtonIcon from '@/components/custom/button-icon.vue';
|
||||
import StatusSwitch from '@/components/custom/status-switch.vue';
|
||||
import RoleOperateDrawer from './modules/role-operate-drawer.vue';
|
||||
import RoleSearch from './modules/role-search.vue';
|
||||
import RoleDataScopeDrawer from './modules/role-data-scope-drawer.vue';
|
||||
import RoleAuthUserDrawer from './modules/role-auth-user-drawer.vue';
|
||||
|
||||
defineOptions({
|
||||
name: 'RoleList'
|
||||
});
|
||||
|
||||
const appStore = useAppStore();
|
||||
const { download } = useDownload();
|
||||
const { hasAuth } = useAuth();
|
||||
|
||||
const { bool: dataScopeDrawerVisible, setTrue: openDataScopeDrawer } = useBoolean(false);
|
||||
const { bool: authUserDrawerVisible, setTrue: openAuthUserDrawer } = useBoolean(false);
|
||||
const {
|
||||
columns,
|
||||
columnChecks,
|
||||
data,
|
||||
getData,
|
||||
getDataByPage,
|
||||
loading,
|
||||
mobilePagination,
|
||||
searchParams,
|
||||
resetSearchParams
|
||||
} = useTable({
|
||||
apiFn: fetchGetRoleList,
|
||||
apiParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
// if you want to use the searchParams in Form, you need to define the following properties, and the value is null
|
||||
// the value can not be undefined, otherwise the property in Form will not be reactive
|
||||
roleName: null,
|
||||
roleKey: null,
|
||||
status: null,
|
||||
params: {}
|
||||
},
|
||||
columns: () => [
|
||||
{
|
||||
type: 'selection',
|
||||
align: 'center',
|
||||
width: 48
|
||||
},
|
||||
{
|
||||
key: 'index',
|
||||
title: $t('common.index'),
|
||||
align: 'center',
|
||||
width: 64
|
||||
},
|
||||
{
|
||||
key: 'roleName',
|
||||
title: '角色名称',
|
||||
align: 'center',
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
key: 'roleKey',
|
||||
title: '角色权限字符串',
|
||||
align: 'center',
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
key: 'roleSort',
|
||||
title: '显示顺序',
|
||||
align: 'center',
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
key: 'dataScope',
|
||||
title: '数据范围',
|
||||
align: 'center',
|
||||
minWidth: 120,
|
||||
render: row => {
|
||||
return <NTag type="info">{dataScopeRecord[row.dataScope]}</NTag>;
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'status',
|
||||
title: '角色状态',
|
||||
align: 'center',
|
||||
minWidth: 120,
|
||||
render(row) {
|
||||
return (
|
||||
<StatusSwitch
|
||||
v-model:value={row.status}
|
||||
disabled={row.roleId === 1}
|
||||
info={row.roleKey}
|
||||
onSubmitted={(value, callback) => handleStatusChange(row, value, callback)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'createTime',
|
||||
title: '创建时间',
|
||||
align: 'center',
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
key: 'operate',
|
||||
title: $t('common.operate'),
|
||||
align: 'center',
|
||||
width: 220,
|
||||
render: row => {
|
||||
if (row.roleId === 1) return null;
|
||||
|
||||
const editBtn = () => {
|
||||
return (
|
||||
<ButtonIcon
|
||||
text
|
||||
type="primary"
|
||||
icon="material-symbols:drive-file-rename-outline-outline"
|
||||
tooltipContent={$t('common.edit')}
|
||||
onClick={() => edit(row.roleId!)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const dataScopeBtn = () => {
|
||||
return (
|
||||
<ButtonIcon
|
||||
text
|
||||
type="primary"
|
||||
icon="material-symbols:database"
|
||||
tooltipContent="数据范权限"
|
||||
onClick={() => handleDataScope(row)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const authUserBtn = () => {
|
||||
return (
|
||||
<ButtonIcon
|
||||
text
|
||||
type="primary"
|
||||
icon="material-symbols:assignment-ind-outline"
|
||||
tooltipContent="分配用户"
|
||||
onClick={() => handleAuthUser(row)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const deleteBtn = () => {
|
||||
return (
|
||||
<ButtonIcon
|
||||
text
|
||||
type="error"
|
||||
icon="material-symbols:delete-outline"
|
||||
tooltipContent={$t('common.delete')}
|
||||
popconfirmContent={$t('common.confirmDelete')}
|
||||
onPositiveClick={() => handleDelete(row.roleId!)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const buttons = [];
|
||||
if (hasAuth('system:role:edit')) {
|
||||
buttons.push(editBtn());
|
||||
buttons.push(dataScopeBtn());
|
||||
buttons.push(authUserBtn());
|
||||
}
|
||||
if (hasAuth('system:role:remove')) buttons.push(deleteBtn());
|
||||
|
||||
return (
|
||||
<div class="flex-center gap-8px">
|
||||
{buttons.map((btn, index) => (
|
||||
<>
|
||||
{index !== 0 && <NDivider vertical />}
|
||||
{btn}
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const { drawerVisible, operateType, editingData, handleAdd, handleEdit, checkedRowKeys, onBatchDeleted, onDeleted } =
|
||||
useTableOperate(data, getData);
|
||||
|
||||
async function handleBatchDelete() {
|
||||
// request
|
||||
const { error } = await fetchBatchDeleteRole(checkedRowKeys.value);
|
||||
if (error) return;
|
||||
onBatchDeleted();
|
||||
}
|
||||
|
||||
async function handleDelete(roleId: CommonType.IdType) {
|
||||
// request
|
||||
const { error } = await fetchBatchDeleteRole([roleId]);
|
||||
if (error) return;
|
||||
onDeleted();
|
||||
}
|
||||
|
||||
async function edit(roleId: CommonType.IdType) {
|
||||
handleEdit('roleId', roleId);
|
||||
}
|
||||
|
||||
async function handleExport() {
|
||||
download('/system/role/export', searchParams, `角色_${new Date().getTime()}.xlsx`);
|
||||
}
|
||||
|
||||
/** 处理状态切换 */
|
||||
async function handleStatusChange(
|
||||
row: Api.System.Role,
|
||||
value: Api.Common.EnableStatus,
|
||||
callback: (flag: boolean) => void
|
||||
) {
|
||||
const { error } = await fetchUpdateRoleStatus({
|
||||
roleId: row.roleId,
|
||||
status: value
|
||||
});
|
||||
|
||||
callback(!error);
|
||||
|
||||
if (!error) {
|
||||
window.$message?.success('状态修改成功');
|
||||
getData();
|
||||
}
|
||||
}
|
||||
|
||||
function handleDataScope(row: Api.System.Role) {
|
||||
const findItem = data.value.find(item => item.roleId === row.roleId) || null;
|
||||
editingData.value = jsonClone(findItem);
|
||||
openDataScopeDrawer();
|
||||
}
|
||||
|
||||
function handleAuthUser(row: Api.System.Role) {
|
||||
const findItem = data.value.find(item => item.roleId === row.roleId) || null;
|
||||
editingData.value = jsonClone(findItem);
|
||||
openAuthUserDrawer();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
|
||||
<RoleSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
|
||||
<NCard title="角色列表" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
|
||||
<template #header-extra>
|
||||
<TableHeaderOperation
|
||||
v-model:columns="columnChecks"
|
||||
:disabled-delete="checkedRowKeys.length === 0"
|
||||
:loading="loading"
|
||||
:show-add="hasAuth('system:role:add')"
|
||||
:show-delete="hasAuth('system:role:remove')"
|
||||
:show-export="hasAuth('system:role:export')"
|
||||
@add="handleAdd"
|
||||
@delete="handleBatchDelete"
|
||||
@export="handleExport"
|
||||
@refresh="getData"
|
||||
/>
|
||||
</template>
|
||||
<NDataTable
|
||||
v-model:checked-row-keys="checkedRowKeys"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
size="small"
|
||||
:flex-height="!appStore.isMobile"
|
||||
:scroll-x="962"
|
||||
:loading="loading"
|
||||
remote
|
||||
:row-key="row => row.roleId"
|
||||
:pagination="mobilePagination"
|
||||
class="sm:h-full"
|
||||
/>
|
||||
<RoleOperateDrawer
|
||||
v-model:visible="drawerVisible"
|
||||
:operate-type="operateType"
|
||||
:row-data="editingData"
|
||||
@submitted="getDataByPage"
|
||||
/>
|
||||
<RoleDataScopeDrawer
|
||||
v-model:visible="dataScopeDrawerVisible"
|
||||
:row-data="editingData"
|
||||
@submitted="getDataByPage"
|
||||
/>
|
||||
<RoleAuthUserDrawer v-model:visible="authUserDrawerVisible" :row-data="editingData" @submitted="getDataByPage" />
|
||||
</NCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
206
src/views/system/role/modules/role-auth-user-drawer.vue
Normal file
206
src/views/system/role/modules/role-auth-user-drawer.vue
Normal file
@ -0,0 +1,206 @@
|
||||
<script setup lang="tsx">
|
||||
import { computed, watch } from 'vue';
|
||||
import { fetchGetRoleUserList, fetchGetUserList } from '@/service/api/system';
|
||||
import { useAppStore } from '@/store/modules/app';
|
||||
import { useDict } from '@/hooks/business/dict';
|
||||
import { useTable, useTableOperate } from '@/hooks/common/table';
|
||||
import { $t } from '@/locales';
|
||||
import DictTag from '@/components/custom/dict-tag.vue';
|
||||
|
||||
defineOptions({
|
||||
name: 'RoleAuthUserDrawer'
|
||||
});
|
||||
|
||||
interface Props {
|
||||
/** the edit row data */
|
||||
rowData?: Api.System.Role | null;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
interface Emits {
|
||||
(e: 'submitted'): void;
|
||||
}
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
const visible = defineModel<boolean>('visible', {
|
||||
default: false
|
||||
});
|
||||
|
||||
const appStore = useAppStore();
|
||||
|
||||
const title = computed(() => '分配用户权限');
|
||||
|
||||
useDict('sys_normal_disable');
|
||||
|
||||
const { columns, data, getData, getDataByPage, loading, mobilePagination, searchParams, resetSearchParams } = useTable({
|
||||
immediate: false,
|
||||
apiFn: fetchGetUserList,
|
||||
apiParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
// if you want to use the searchParams in Form, you need to define the following properties, and the value is null
|
||||
// the value can not be undefined, otherwise the property in Form will not be reactive
|
||||
deptId: null,
|
||||
userName: null,
|
||||
nickName: null,
|
||||
phonenumber: null,
|
||||
status: null,
|
||||
params: {}
|
||||
},
|
||||
columns: () => [
|
||||
{
|
||||
type: 'selection',
|
||||
align: 'center',
|
||||
width: 48
|
||||
},
|
||||
{
|
||||
key: 'index',
|
||||
title: $t('common.index'),
|
||||
align: 'center',
|
||||
width: 64
|
||||
},
|
||||
{
|
||||
key: 'userName',
|
||||
title: '用户名称',
|
||||
align: 'center',
|
||||
minWidth: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
key: 'nickName',
|
||||
title: '用户昵称',
|
||||
align: 'center',
|
||||
minWidth: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
key: 'deptName',
|
||||
title: '部门',
|
||||
align: 'center',
|
||||
minWidth: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
key: 'phonenumber',
|
||||
title: '手机号码',
|
||||
align: 'center',
|
||||
minWidth: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
key: 'status',
|
||||
title: '状态',
|
||||
align: 'center',
|
||||
minWidth: 80,
|
||||
render(row) {
|
||||
return <DictTag size="small" value={row.status} dictCode="sys_normal_disable" />;
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'createTime',
|
||||
title: '创建时间',
|
||||
align: 'center',
|
||||
minWidth: 120
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const { checkedRowKeys } = useTableOperate(data, getData);
|
||||
|
||||
async function handleUpdateModelWhenEdit() {
|
||||
checkedRowKeys.value = [];
|
||||
getDataByPage();
|
||||
const { data: roleUserList } = await fetchGetRoleUserList({
|
||||
roleId: props.rowData?.roleId
|
||||
});
|
||||
checkedRowKeys.value = roleUserList?.rows.map(item => item.userId) || [];
|
||||
}
|
||||
|
||||
function closeDrawer() {
|
||||
visible.value = false;
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
window.$message?.success($t('common.updateSuccess'));
|
||||
closeDrawer();
|
||||
emit('submitted');
|
||||
}
|
||||
|
||||
watch(visible, () => {
|
||||
if (visible.value) {
|
||||
handleUpdateModelWhenEdit();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NDrawer
|
||||
v-model:show="visible"
|
||||
:title="title"
|
||||
display-directive="show"
|
||||
:width="1300"
|
||||
class="max-w-90%"
|
||||
content-class="h-full"
|
||||
wrapper-class="h-full"
|
||||
>
|
||||
<NDrawerContent :title="title" :native-scrollbar="false" closable body-class="h-full" body-content-class="h-full">
|
||||
<div class="h-full flex-col-stretch gap-12px overflow-hidden lt-sm:overflow-auto">
|
||||
<NForm :model="searchParams" label-placement="left" :label-width="80">
|
||||
<NGrid responsive="screen" item-responsive>
|
||||
<NFormItemGi span="24 s:12 m:8" label="用户名称" path="userName" class="pr-24px">
|
||||
<NInput v-model:value="searchParams.userName" placeholder="请输入用户名称" />
|
||||
</NFormItemGi>
|
||||
<NFormItemGi span="24 s:12 m:8" label="用户昵称" path="nickName" class="pr-24px">
|
||||
<NInput v-model:value="searchParams.nickName" placeholder="请输入用户昵称" />
|
||||
</NFormItemGi>
|
||||
<NFormItemGi span="24 s:12 m:8" label="手机号码" path="phonenumber" class="pr-24px">
|
||||
<NInput v-model:value="searchParams.phonenumber" placeholder="请输入手机号码" />
|
||||
</NFormItemGi>
|
||||
<NFormItemGi span="24 s:12 m:24" class="pr-24px" :show-feedback="false">
|
||||
<NSpace class="w-full" justify="end">
|
||||
<NButton @click="resetSearchParams">
|
||||
<template #icon>
|
||||
<icon-ic-round-refresh class="text-icon" />
|
||||
</template>
|
||||
{{ $t('common.reset') }}
|
||||
</NButton>
|
||||
<NButton type="primary" ghost @click="() => getDataByPage()">
|
||||
<template #icon>
|
||||
<icon-ic-round-search class="text-icon" />
|
||||
</template>
|
||||
{{ $t('common.search') }}
|
||||
</NButton>
|
||||
</NSpace>
|
||||
</NFormItemGi>
|
||||
</NGrid>
|
||||
</NForm>
|
||||
<TableRowCheckAlert v-model:checked-row-keys="checkedRowKeys" />
|
||||
<NCard :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
|
||||
<NDataTable
|
||||
v-model:checked-row-keys="checkedRowKeys"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
size="small"
|
||||
:flex-height="!appStore.isMobile"
|
||||
:scroll-x="962"
|
||||
:loading="loading"
|
||||
remote
|
||||
:row-key="row => row.userId"
|
||||
:pagination="mobilePagination"
|
||||
class="h-full"
|
||||
/>
|
||||
</NCard>
|
||||
</div>
|
||||
<template #footer>
|
||||
<NSpace :size="16">
|
||||
<NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
|
||||
<NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
|
||||
</NSpace>
|
||||
</template>
|
||||
</NDrawerContent>
|
||||
</NDrawer>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
153
src/views/system/role/modules/role-data-scope-drawer.vue
Normal file
153
src/views/system/role/modules/role-data-scope-drawer.vue
Normal file
@ -0,0 +1,153 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive, ref, watch } from 'vue';
|
||||
import { useLoading } from '@sa/hooks';
|
||||
import { dataScopeOptions } from '@/constants/business';
|
||||
import { fetchGetRoleDeptTreeSelect, fetchUpdateRole } from '@/service/api/system/role';
|
||||
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
|
||||
import { $t } from '@/locales';
|
||||
import DeptTree from '@/components/custom/dept-tree.vue';
|
||||
|
||||
defineOptions({
|
||||
name: 'RoleDataScopeDrawer'
|
||||
});
|
||||
|
||||
interface Props {
|
||||
/** the edit row data */
|
||||
rowData?: Api.System.Role | null;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
interface Emits {
|
||||
(e: 'submitted'): void;
|
||||
}
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
const deptTreeRef = ref<InstanceType<typeof DeptTree> | null>(null);
|
||||
|
||||
const visible = defineModel<boolean>('visible', {
|
||||
default: false
|
||||
});
|
||||
|
||||
const deptOptions = ref<Api.System.Dept[]>([]);
|
||||
|
||||
const { loading: deptLoading, startLoading: startDeptLoading, endLoading: endDeptLoading } = useLoading();
|
||||
|
||||
const { formRef, validate, restoreValidation } = useNaiveForm();
|
||||
const { createRequiredRule } = useFormRules();
|
||||
|
||||
const title = computed(() => '分配数据权限');
|
||||
|
||||
type Model = Api.System.RoleOperateParams;
|
||||
|
||||
const model: Model = reactive(createDefaultModel());
|
||||
|
||||
function createDefaultModel(): Model {
|
||||
return {
|
||||
roleId: props.rowData?.roleId,
|
||||
roleName: props.rowData?.roleName,
|
||||
roleKey: props.rowData?.roleKey,
|
||||
roleSort: props.rowData?.roleSort,
|
||||
deptIds: [],
|
||||
menuIds: [],
|
||||
deptCheckStrictly: true,
|
||||
dataScope: '1'
|
||||
};
|
||||
}
|
||||
|
||||
type RuleKey = Extract<keyof Model, 'dataScope'>;
|
||||
|
||||
const rules: Record<RuleKey, App.Global.FormRule> = {
|
||||
dataScope: createRequiredRule('数据权限范围不能为空')
|
||||
};
|
||||
|
||||
async function handleUpdateModelWhenEdit() {
|
||||
startDeptLoading();
|
||||
deptOptions.value = [];
|
||||
model.deptIds = [];
|
||||
|
||||
if (props.rowData) {
|
||||
Object.assign(model, props.rowData);
|
||||
const { error, data } = await fetchGetRoleDeptTreeSelect(props.rowData.roleId!);
|
||||
if (error) return;
|
||||
deptOptions.value = data.depts;
|
||||
model.deptIds = data.checkedKeys;
|
||||
}
|
||||
endDeptLoading();
|
||||
}
|
||||
|
||||
function closeDrawer() {
|
||||
visible.value = false;
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
await validate();
|
||||
|
||||
const { roleId, roleName, roleKey, roleSort, dataScope, deptIds, menuIds } = model;
|
||||
|
||||
const { error } = await fetchUpdateRole({
|
||||
roleId,
|
||||
roleName,
|
||||
roleKey,
|
||||
roleSort,
|
||||
dataScope,
|
||||
deptIds: dataScope === '2' ? deptIds : [],
|
||||
menuIds
|
||||
});
|
||||
if (error) return;
|
||||
|
||||
window.$message?.success($t('common.updateSuccess'));
|
||||
closeDrawer();
|
||||
emit('submitted');
|
||||
}
|
||||
|
||||
watch(visible, () => {
|
||||
if (visible.value) {
|
||||
handleUpdateModelWhenEdit();
|
||||
restoreValidation();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NDrawer v-model:show="visible" :title="title" display-directive="show" :width="800" class="max-w-90%">
|
||||
<NDrawerContent :title="title" :native-scrollbar="false" closable>
|
||||
<NForm ref="formRef" :model="model" :rules="rules">
|
||||
<NFormItem label="角色名称" path="roleName">
|
||||
<NInput v-model:value="model.roleName" disabled placeholder="请输入角色名称" />
|
||||
</NFormItem>
|
||||
<NFormItem path="roleKey">
|
||||
<template #label>
|
||||
<div class="flex-center">
|
||||
<FormTip content="控制器中定义的权限字符，如：@SaCheckRole('admin')" />
|
||||
<span class="pl-3px">权限字符</span>
|
||||
</div>
|
||||
</template>
|
||||
<NInput v-model:value="model.roleKey" disabled placeholder="请输入权限字符" />
|
||||
</NFormItem>
|
||||
<NFormItem label="权限范围" path="dataScope">
|
||||
<NSelect v-model:value="model.dataScope" :options="dataScopeOptions" />
|
||||
</NFormItem>
|
||||
<NFormItem v-if="model.dataScope === '2'" label="数据权限" path="deptIds" class="pr-24px">
|
||||
<DeptTree
|
||||
ref="deptTreeRef"
|
||||
v-model:value="model.deptIds"
|
||||
v-model:options="deptOptions"
|
||||
v-model:loading="deptLoading"
|
||||
v-model:cascade="model.deptCheckStrictly"
|
||||
:immediate="false"
|
||||
/>
|
||||
</NFormItem>
|
||||
</NForm>
|
||||
<template #footer>
|
||||
<NSpace :size="16">
|
||||
<NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
|
||||
<NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
|
||||
</NSpace>
|
||||
</template>
|
||||
</NDrawerContent>
|
||||
</NDrawer>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
197
src/views/system/role/modules/role-operate-drawer.vue
Normal file
197
src/views/system/role/modules/role-operate-drawer.vue
Normal file
@ -0,0 +1,197 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive, ref, watch } from 'vue';
|
||||
import { useLoading } from '@sa/hooks';
|
||||
import { fetchCreateRole, fetchUpdateRole } from '@/service/api/system/role';
|
||||
import { fetchGetRoleMenuTreeSelect } from '@/service/api/system';
|
||||
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
|
||||
import { useDict } from '@/hooks/business/dict';
|
||||
import { $t } from '@/locales';
|
||||
import MenuTree from '@/components/custom/menu-tree.vue';
|
||||
|
||||
defineOptions({
|
||||
name: 'RoleOperateDrawer'
|
||||
});
|
||||
|
||||
interface Props {
|
||||
/** the type of operation */
|
||||
operateType: NaiveUI.TableOperateType;
|
||||
/** the edit row data */
|
||||
rowData?: Api.System.Role | null;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
interface Emits {
|
||||
(e: 'submitted'): void;
|
||||
}
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
const menuTreeRef = ref<InstanceType<typeof MenuTree> | null>(null);
|
||||
|
||||
const visible = defineModel<boolean>('visible', {
|
||||
default: false
|
||||
});
|
||||
|
||||
const { options: sysNormalDisableOptions } = useDict('sys_normal_disable');
|
||||
|
||||
const menuOptions = ref<Api.System.MenuList>([]);
|
||||
|
||||
const { loading: menuLoading, startLoading: startMenuLoading, endLoading: stopMenuLoading } = useLoading();
|
||||
|
||||
const { formRef, validate, restoreValidation } = useNaiveForm();
|
||||
const { createRequiredRule } = useFormRules();
|
||||
|
||||
const title = computed(() => {
|
||||
const titles: Record<NaiveUI.TableOperateType, string> = {
|
||||
add: '新增角色',
|
||||
edit: '编辑角色'
|
||||
};
|
||||
return titles[props.operateType];
|
||||
});
|
||||
|
||||
type Model = Api.System.RoleOperateParams;
|
||||
|
||||
const model: Model = reactive(createDefaultModel());
|
||||
|
||||
function createDefaultModel(): Model {
|
||||
return {
|
||||
menuIds: [],
|
||||
roleName: '',
|
||||
roleKey: '',
|
||||
roleSort: 1,
|
||||
menuCheckStrictly: true,
|
||||
status: '0',
|
||||
remark: ''
|
||||
};
|
||||
}
|
||||
|
||||
type RuleKey = Extract<keyof Model, 'roleId' | 'roleName' | 'roleKey' | 'status'>;
|
||||
|
||||
const rules: Record<RuleKey, App.Global.FormRule> = {
|
||||
roleId: createRequiredRule('角色ID不能为空'),
|
||||
roleName: createRequiredRule('角色名称不能为空'),
|
||||
roleKey: createRequiredRule('角色权限字符串不能为空'),
|
||||
status: createRequiredRule('角色状态不能为空')
|
||||
};
|
||||
|
||||
async function handleUpdateModelWhenEdit() {
|
||||
menuOptions.value = [];
|
||||
model.menuIds = [];
|
||||
|
||||
if (props.operateType === 'add') {
|
||||
menuTreeRef.value?.refresh();
|
||||
Object.assign(model, createDefaultModel());
|
||||
return;
|
||||
}
|
||||
|
||||
if (props.operateType === 'edit' && props.rowData) {
|
||||
startMenuLoading();
|
||||
Object.assign(model, props.rowData);
|
||||
const { data, error } = await fetchGetRoleMenuTreeSelect(model.roleId!);
|
||||
if (error) return;
|
||||
model.menuIds = data.checkedKeys;
|
||||
menuOptions.value = data.menus;
|
||||
stopMenuLoading();
|
||||
}
|
||||
}
|
||||
|
||||
function closeDrawer() {
|
||||
visible.value = false;
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
await validate();
|
||||
|
||||
const { roleId, roleName, roleKey, roleSort, menuCheckStrictly, status, remark, menuIds } = model;
|
||||
|
||||
// request
|
||||
if (props.operateType === 'add') {
|
||||
const { error } = await fetchCreateRole({
|
||||
roleName,
|
||||
roleKey,
|
||||
roleSort,
|
||||
menuCheckStrictly,
|
||||
status,
|
||||
remark,
|
||||
menuIds
|
||||
});
|
||||
if (error) return;
|
||||
}
|
||||
|
||||
if (props.operateType === 'edit') {
|
||||
const { error } = await fetchUpdateRole({
|
||||
roleId,
|
||||
roleName,
|
||||
roleKey,
|
||||
roleSort,
|
||||
menuCheckStrictly,
|
||||
status,
|
||||
remark,
|
||||
menuIds
|
||||
});
|
||||
if (error) return;
|
||||
}
|
||||
|
||||
window.$message?.success($t('common.updateSuccess'));
|
||||
closeDrawer();
|
||||
emit('submitted');
|
||||
}
|
||||
|
||||
watch(visible, () => {
|
||||
if (visible.value) {
|
||||
handleUpdateModelWhenEdit();
|
||||
restoreValidation();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NDrawer v-model:show="visible" :title="title" display-directive="show" :width="800" class="max-w-90%">
|
||||
<NDrawerContent :title="title" :native-scrollbar="false" closable>
|
||||
<NForm ref="formRef" :model="model" :rules="rules">
|
||||
<NFormItem label="角色名称" path="roleName">
|
||||
<NInput v-model:value="model.roleName" placeholder="请输入角色名称" />
|
||||
</NFormItem>
|
||||
<NFormItem path="roleKey">
|
||||
<template #label>
|
||||
<div class="flex-center">
|
||||
<FormTip content="控制器中定义的权限字符，如：@SaCheckRole('admin')" />
|
||||
<span class="pl-3px">权限字符</span>
|
||||
</div>
|
||||
</template>
|
||||
<NInput v-model:value="model.roleKey" placeholder="请输入权限字符" />
|
||||
</NFormItem>
|
||||
<NFormItem label="显示顺序" path="roleSort">
|
||||
<NInputNumber v-model:value="model.roleSort" placeholder="请输入显示顺序" />
|
||||
</NFormItem>
|
||||
<NFormItem label="角色状态" path="status">
|
||||
<NRadioGroup v-model:value="model.status">
|
||||
<NRadio v-for="item in sysNormalDisableOptions" :key="item.value" :value="item.value" :label="item.label" />
|
||||
</NRadioGroup>
|
||||
</NFormItem>
|
||||
<NFormItem label="菜单权限" path="menuIds" class="pr-24px">
|
||||
<MenuTree
|
||||
ref="menuTreeRef"
|
||||
v-model:value="model.menuIds"
|
||||
v-model:options="menuOptions"
|
||||
v-model:cascade="model.menuCheckStrictly"
|
||||
v-model:loading="menuLoading"
|
||||
:immediate="operateType === 'add'"
|
||||
/>
|
||||
</NFormItem>
|
||||
<NFormItem label="备注" path="remark">
|
||||
<NInput v-model:value="model.remark" :rows="3" type="textarea" placeholder="请输入备注" />
|
||||
</NFormItem>
|
||||
</NForm>
|
||||
<template #footer>
|
||||
<NSpace :size="16">
|
||||
<NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
|
||||
<NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
|
||||
</NSpace>
|
||||
</template>
|
||||
</NDrawerContent>
|
||||
</NDrawer>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
96
src/views/system/role/modules/role-search.vue
Normal file
96
src/views/system/role/modules/role-search.vue
Normal file
@ -0,0 +1,96 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useNaiveForm } from '@/hooks/common/form';
|
||||
import { useDict } from '@/hooks/business/dict';
|
||||
import { $t } from '@/locales';
|
||||
|
||||
defineOptions({
|
||||
name: 'RoleSearch'
|
||||
});
|
||||
|
||||
interface Emits {
|
||||
(e: 'reset'): void;
|
||||
(e: 'search'): void;
|
||||
}
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
const { formRef, validate, restoreValidation } = useNaiveForm();
|
||||
|
||||
const dateRangeCreateTime = ref<[string, string] | null>(null);
|
||||
|
||||
const model = defineModel<Api.System.RoleSearchParams>('model', { required: true });
|
||||
|
||||
const { options: sysNormalDisableOptions } = useDict('sys_normal_disable');
|
||||
|
||||
async function reset() {
|
||||
dateRangeCreateTime.value = null;
|
||||
Object.assign(model.value.params!, {});
|
||||
await restoreValidation();
|
||||
emit('reset');
|
||||
}
|
||||
|
||||
async function search() {
|
||||
await validate();
|
||||
if (dateRangeCreateTime.value?.length) {
|
||||
model.value.params!.beginTime = `${dateRangeCreateTime.value[0]} 00:00:00`;
|
||||
model.value.params!.endTime = `${dateRangeCreateTime.value[1]} 23:59:59`;
|
||||
}
|
||||
emit('search');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NCard :bordered="false" size="small" class="card-wrapper">
|
||||
<NCollapse>
|
||||
<NCollapseItem :title="$t('common.search')" name="user-search">
|
||||
<NForm ref="formRef" :model="model" label-placement="left" :label-width="80">
|
||||
<NGrid responsive="screen" item-responsive>
|
||||
<NFormItemGi span="24 s:12 m:6" label="角色名称" path="roleName" class="pr-24px">
|
||||
<NInput v-model:value="model.roleName" placeholder="请输入角色名称" />
|
||||
</NFormItemGi>
|
||||
<NFormItemGi span="24 s:12 m:6" label="权限字符" path="roleKey" class="pr-24px">
|
||||
<NInput v-model:value="model.roleKey" placeholder="请输入权限字符" />
|
||||
</NFormItemGi>
|
||||
<NFormItemGi span="24 s:12 m:6" label="角色状态" path="status" class="pr-24px">
|
||||
<NSelect
|
||||
v-model:value="model.status"
|
||||
placeholder="请选择角色状态"
|
||||
:options="sysNormalDisableOptions"
|
||||
clearable
|
||||
/>
|
||||
</NFormItemGi>
|
||||
<NFormItemGi span="24 s:12 m:6" label="创建时间" path="createTime" class="pr-24px">
|
||||
<NDatePicker
|
||||
v-model:formatted-value="dateRangeCreateTime"
|
||||
update-value-on-close
|
||||
class="w-full"
|
||||
type="daterange"
|
||||
value-format="yyyy-MM-dd"
|
||||
clearable
|
||||
/>
|
||||
</NFormItemGi>
|
||||
<NFormItemGi span="24" class="pr-24px">
|
||||
<NSpace class="w-full" justify="end">
|
||||
<NButton @click="reset">
|
||||
<template #icon>
|
||||
<icon-ic-round-refresh class="text-icon" />
|
||||
</template>
|
||||
{{ $t('common.reset') }}
|
||||
</NButton>
|
||||
<NButton type="primary" ghost @click="search">
|
||||
<template #icon>
|
||||
<icon-ic-round-search class="text-icon" />
|
||||
</template>
|
||||
{{ $t('common.search') }}
|
||||
</NButton>
|
||||
</NSpace>
|
||||
</NFormItemGi>
|
||||
</NGrid>
|
||||
</NForm>
|
||||
</NCollapseItem>
|
||||
</NCollapse>
|
||||
</NCard>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@ -1,6 +1,6 @@
|
||||
<script setup lang="tsx">
|
||||
import { computed } from 'vue';
|
||||
import { NButton, NPopconfirm } from 'naive-ui';
|
||||
import { NButton, NDivider } from 'naive-ui';
|
||||
import { fetchBatchDeleteTenant, fetchGetTenantList, fetchSyncTenantDict } from '@/service/api/system/tenant';
|
||||
import { useAppStore } from '@/store/modules/app';
|
||||
import { useAuthStore } from '@/store/modules/auth';
|
||||
@ -10,6 +10,7 @@ import { useDownload } from '@/hooks/business/download';
|
||||
import { useDict } from '@/hooks/business/dict';
|
||||
import DictTag from '@/components/custom/dict-tag.vue';
|
||||
import { $t } from '@/locales';
|
||||
import ButtonIcon from '@/components/custom/button-icon.vue';
|
||||
import TenantOperateDrawer from './modules/tenant-operate-drawer.vue';
|
||||
import TenantSearch from './modules/tenant-search.vue';
|
||||
|
||||
@ -107,55 +108,59 @@ const {
|
||||
width: 180,
|
||||
render: row => {
|
||||
if (row.tenantId === '000000') return null;
|
||||
|
||||
const editBtn = () => {
|
||||
if (!hasAuth('system:tenant:edit')) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<NButton type="primary" ghost size="small" onClick={() => edit(row.id!)}>
|
||||
{$t('common.edit')}
|
||||
</NButton>
|
||||
<ButtonIcon
|
||||
type="primary"
|
||||
text
|
||||
icon="material-symbols:drive-file-rename-outline-outline"
|
||||
tooltipContent={$t('common.edit')}
|
||||
onClick={() => edit(row.id!)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const syncBtn = () => {
|
||||
if (!hasAuth('system:tenant:edit')) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<NPopconfirm onPositiveClick={() => handleDelete(row.id!)}>
|
||||
{{
|
||||
default: () => `确认同步[${row.companyName}]的套餐吗?`,
|
||||
trigger: () => (
|
||||
<NButton type="success" ghost size="small">
|
||||
同步
|
||||
</NButton>
|
||||
)
|
||||
}}
|
||||
</NPopconfirm>
|
||||
<ButtonIcon
|
||||
text
|
||||
type="primary"
|
||||
icon="material-symbols:sync-outline"
|
||||
tooltipContent="同步套餐"
|
||||
popconfirmContent={`确认同步[${row.companyName}]的套餐吗?`}
|
||||
onPositiveClick={() => handleSyncTenantDict()}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const deleteBtn = () => {
|
||||
if (!hasAuth('system:tenant:delete')) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<NPopconfirm onPositiveClick={() => handleDelete(row.id!)}>
|
||||
{{
|
||||
default: () => $t('common.confirmDelete'),
|
||||
trigger: () => (
|
||||
<NButton type="error" ghost size="small">
|
||||
{$t('common.delete')}
|
||||
</NButton>
|
||||
)
|
||||
}}
|
||||
</NPopconfirm>
|
||||
<ButtonIcon
|
||||
text
|
||||
type="error"
|
||||
icon="material-symbols:delete-outline"
|
||||
tooltipContent={$t('common.delete')}
|
||||
popconfirmContent={$t('common.confirmDelete')}
|
||||
onPositiveClick={() => handleDelete(row.id!)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const buttons = [];
|
||||
|
||||
if (hasAuth('system:tenant:edit')) buttons.push(editBtn());
|
||||
if (hasAuth('system:tenant:edit')) buttons.push(syncBtn());
|
||||
if (hasAuth('system:tenant:delete')) buttons.push(deleteBtn());
|
||||
|
||||
return (
|
||||
<div class="flex-center gap-8px">
|
||||
{editBtn()}
|
||||
{syncBtn()}
|
||||
{deleteBtn()}
|
||||
{buttons.map((btn, index) => (
|
||||
<>
|
||||
{index !== 0 && <NDivider vertical />}
|
||||
{btn}
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -215,6 +220,9 @@ async function handleExport() {
|
||||
>
|
||||
<template #prefix>
|
||||
<NButton v-if="isSuperAdmin" type="warning" ghost size="small" @click="handleSyncTenantDict">
|
||||
<template #icon>
|
||||
<icon-material-symbols:sync-outline />
|
||||
</template>
|
||||
同步租户字典
|
||||
</NButton>
|
||||
</template>
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
<script setup lang="tsx">
|
||||
import { ref } from 'vue';
|
||||
import { NButton } from 'naive-ui';
|
||||
import { NButton, NDivider } from 'naive-ui';
|
||||
import { useBoolean, useLoading } from '@sa/hooks';
|
||||
import { fetchBatchDeleteUser, fetchGetDeptTree, fetchGetUserList } from '@/service/api/system';
|
||||
import { fetchBatchDeleteUser, fetchGetDeptTree, fetchGetUserList, fetchUpdateUserStatus } from '@/service/api/system';
|
||||
import { useAppStore } from '@/store/modules/app';
|
||||
import { useTable, useTableOperate } from '@/hooks/common/table';
|
||||
import { useDict } from '@/hooks/business/dict';
|
||||
import { useAuth } from '@/hooks/business/auth';
|
||||
import ButtonIcon from '@/components/custom/button-icon.vue';
|
||||
import DictTag from '@/components/custom/dict-tag.vue';
|
||||
import { $t } from '@/locales';
|
||||
import StatusSwitch from '@/components/custom/status-switch.vue';
|
||||
import UserOperateDrawer from './modules/user-operate-drawer.vue';
|
||||
import UserImportModal from './modules/user-import-modal.vue';
|
||||
import UserSearch from './modules/user-search.vue';
|
||||
@ -19,7 +19,6 @@ defineOptions({
|
||||
});
|
||||
|
||||
useDict('sys_user_sex');
|
||||
useDict('sys_normal_disable');
|
||||
|
||||
const { hasAuth } = useAuth();
|
||||
const appStore = useAppStore();
|
||||
@ -96,7 +95,14 @@ const {
|
||||
align: 'center',
|
||||
minWidth: 80,
|
||||
render(row) {
|
||||
return <DictTag size="small" value={row.status} dictCode="sys_normal_disable" />;
|
||||
return (
|
||||
<StatusSwitch
|
||||
v-model:value={row.status}
|
||||
disabled={row.userId === 1}
|
||||
info={row.userName}
|
||||
onSubmitted={(value, callback) => handleStatusChange(row, value, callback)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -111,6 +117,13 @@ const {
|
||||
align: 'center',
|
||||
width: 130,
|
||||
render: row => {
|
||||
const divider = () => {
|
||||
if (!hasAuth('system:user:edit') || !hasAuth('system:user:remove')) {
|
||||
return null;
|
||||
}
|
||||
return <NDivider vertical />;
|
||||
};
|
||||
|
||||
const editBtn = () => {
|
||||
if (!hasAuth('system:user:edit')) {
|
||||
return null;
|
||||
@ -120,7 +133,6 @@ const {
|
||||
text
|
||||
type="primary"
|
||||
icon="material-symbols:drive-file-rename-outline-outline"
|
||||
class="text-18px"
|
||||
tooltipContent={$t('common.edit')}
|
||||
onClick={() => edit(row.userId!)}
|
||||
/>
|
||||
@ -136,7 +148,6 @@ const {
|
||||
text
|
||||
type="error"
|
||||
icon="material-symbols:delete-outline"
|
||||
class="text-18px"
|
||||
tooltipContent={$t('common.delete')}
|
||||
popconfirmContent={$t('common.confirmDelete')}
|
||||
onPositiveClick={() => handleDelete(row.userId!)}
|
||||
@ -145,8 +156,9 @@ const {
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="flex-center gap-16px">
|
||||
<div class="flex-center gap-6px">
|
||||
{editBtn()}
|
||||
{divider()}
|
||||
{deleteBtn()}
|
||||
</div>
|
||||
);
|
||||
@ -205,6 +217,25 @@ function handleResetTreeData() {
|
||||
function handleImport() {
|
||||
openImportModal();
|
||||
}
|
||||
|
||||
/** 处理状态切换 */
|
||||
async function handleStatusChange(
|
||||
row: Api.System.User,
|
||||
value: Api.Common.EnableStatus,
|
||||
callback: (flag: boolean) => void
|
||||
) {
|
||||
const { error } = await fetchUpdateUserStatus({
|
||||
userId: row.userId,
|
||||
status: value
|
||||
});
|
||||
|
||||
callback(!error);
|
||||
|
||||
if (!error) {
|
||||
window.$message?.success('状态修改成功');
|
||||
getData();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script setup lang="tsx">
|
||||
import { ref } from 'vue';
|
||||
import { NButton, NPopconfirm, NTooltip } from 'naive-ui';
|
||||
import { NButton, NDivider } from 'naive-ui';
|
||||
import { useBoolean } from '@sa/hooks';
|
||||
import { jsonClone } from '@sa/utils';
|
||||
import {
|
||||
@ -13,14 +13,15 @@ import {
|
||||
import { useAppStore } from '@/store/modules/app';
|
||||
import { useTable, useTableOperate } from '@/hooks/common/table';
|
||||
import { useDownload } from '@/hooks/business/download';
|
||||
import { useAuth } from '@/hooks/business/auth';
|
||||
import { $t } from '@/locales';
|
||||
import ButtonIcon from '@/components/custom/button-icon.vue';
|
||||
import SvgIcon from '@/components/custom/svg-icon.vue';
|
||||
import GenTableSearch from './modules/gen-table-search.vue';
|
||||
import GenTableImportDrawer from './modules/gen-table-import-drawer.vue';
|
||||
import GenTableOperateDrawer from './modules/gen-table-operate-drawer.vue';
|
||||
import GenTablePreviewDrawer from './modules/gen-table-preview-drawer.vue';
|
||||
|
||||
const { hasAuth } = useAuth();
|
||||
const appStore = useAppStore();
|
||||
const { zip } = useDownload();
|
||||
const { bool: importVisible, setTrue: openImportVisible } = useBoolean();
|
||||
@ -101,62 +102,87 @@ const {
|
||||
key: 'operate',
|
||||
title: $t('common.operate'),
|
||||
align: 'center',
|
||||
width: 180,
|
||||
render: row => (
|
||||
<div class="flex-center gap-16px">
|
||||
width: 300,
|
||||
render: row => {
|
||||
const previewBtn = () => {
|
||||
return (
|
||||
<ButtonIcon
|
||||
type="primary"
|
||||
text
|
||||
icon="ep:view"
|
||||
icon="material-symbols:visibility-outline"
|
||||
tooltipContent="预览"
|
||||
onClick={() => handlePreview(row.tableId!)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const editBtn = () => {
|
||||
return (
|
||||
<ButtonIcon
|
||||
type="primary"
|
||||
text
|
||||
icon="ep:edit"
|
||||
icon="material-symbols:drive-file-rename-outline-outline"
|
||||
tooltipContent={$t('common.edit')}
|
||||
onClick={() => edit(row.tableId!)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const refreshBtn = () => {
|
||||
return (
|
||||
<ButtonIcon
|
||||
type="primary"
|
||||
text
|
||||
icon="ep:refresh"
|
||||
icon="material-symbols:sync-outline"
|
||||
tooltipContent="同步"
|
||||
onClick={() => refresh(row.tableId!)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const genCodeBtn = () => {
|
||||
return (
|
||||
<ButtonIcon
|
||||
type="primary"
|
||||
text
|
||||
icon="ep:download"
|
||||
icon="material-symbols:download-rounded"
|
||||
tooltipContent="生成代码"
|
||||
onClick={() => handleGenCode(row)}
|
||||
/>
|
||||
<NTooltip placement="bottom">
|
||||
{{
|
||||
trigger: () => (
|
||||
<NPopconfirm onPositiveClick={() => handleDelete(row.tableId!)}>
|
||||
{{
|
||||
default: () => $t('common.confirmDelete'),
|
||||
trigger: () => (
|
||||
<NButton class="h-36px text-icon" type="error" text>
|
||||
{{
|
||||
default: () => (
|
||||
);
|
||||
};
|
||||
|
||||
const deleteBtn = () => {
|
||||
return (
|
||||
<ButtonIcon
|
||||
type="error"
|
||||
text
|
||||
icon="material-symbols:delete-outline"
|
||||
tooltipContent={$t('common.delete')}
|
||||
popconfirmContent={$t('common.confirmDelete')}
|
||||
onPositiveClick={() => handleDelete(row.tableId!)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const buttons = [];
|
||||
if (hasAuth('tool:gen:preview')) buttons.push(previewBtn());
|
||||
if (hasAuth('tool:gen:edit')) buttons.push(editBtn());
|
||||
if (hasAuth('tool:gen:refresh')) buttons.push(refreshBtn());
|
||||
if (hasAuth('tool:gen:genCode')) buttons.push(genCodeBtn());
|
||||
if (hasAuth('tool:gen:delete')) buttons.push(deleteBtn());
|
||||
|
||||
return (
|
||||
<div class="flex-center gap-8px">
|
||||
<SvgIcon icon="ep:delete" />
|
||||
{buttons.map((btn, index) => (
|
||||
<>
|
||||
{index !== 0 && <NDivider vertical />}
|
||||
{btn}
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}}
|
||||
</NButton>
|
||||
)
|
||||
}}
|
||||
</NPopconfirm>
|
||||
),
|
||||
default: () => <>{$t('common.delete')}</>
|
||||
}}
|
||||
</NTooltip>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user