jiangyc/ruoyi-plus-soybean
1
0
Fork 0
mirror of https://github.com/m-xlsea/ruoyi-plus-soybean.git synced 2025-09-24 07:49:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: 优化操作按钮样式

Browse Source
This commit is contained in:
xlsea
2025-05-09 20:26:55 +08:00
parent 7a27cdb3ab
commit b70ddb31e9
15 changed files with 455 additions and 292 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/views/monitor/login-infor/index.vue
View File

@ -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>;

11
src/views/monitor/oper-log/index.vue
View File

@ -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>;

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

@ -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>
);

40
src/views/system/config/index.vue
View File

@ -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>
);

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

@ -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>
);
}

40
src/views/system/dict/data/index.vue
View File

@ -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>
);

39
src/views/system/dict/type/index.vue
View File

@ -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>
);

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

@ -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,25 +100,23 @@ 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
class="h-18px"
icon="ic-round-plus"
tooltip-content="新增子菜单"
onClick={(event: Event) => {
event.stopPropagation();
handleAddMenu(option.menuId as CommonType.IdType);
}}
/>
</div>
</>
<div class="flex-center gap-8px">
<ButtonIcon
text
class="h-18px"
icon="ic-round-plus"
tooltip-content="新增子菜单"
onClick={(event: Event) => {
event.stopPropagation();
handleAddMenu(option.menuId as CommonType.IdType);
}}
/>
</div>
);
}
@ -224,39 +225,50 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
width: 80,
align: 'center',
render(row) {
return (
<>
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: () => (
<div class="flex-center gap-8px">
<SvgIcon icon="ep:delete" />
</div>
)
}}
</NButton>
)
}}
</NPopconfirm>
),
default: () => <>{$t('common.delete')}</>
}}
</NTooltip>
</>
);
};
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">
{editBtn()}
{divider()}
{deleteBtn()}
</div>
);
}
}
@ -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>

40
src/views/system/notice/index.vue
View File

@ -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>
);

39
src/views/system/oss-config/index.vue
View File

@ -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>
);

12
src/views/system/oss/index.vue
View File

@ -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>
);

39
src/views/system/post/index.vue
View File

@ -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>
);

77
src/views/system/tenant/index.vue
View File

@ -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>
);
}

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

@ -1,6 +1,6 @@
<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 { useAppStore } from '@/store/modules/app';
@ -111,6 +111,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 +127,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 +142,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 +150,9 @@ const {
};
return (
<div class="flex-center gap-16px">
<div class="flex-center gap-6px">
{editBtn()}
{divider()}
{deleteBtn()}
</div>
);

142
src/views/tool/gen/index.vue
View File

@ -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">
<ButtonIcon
type="primary"
text
icon="ep:view"
tooltipContent="预览"
onClick={() => handlePreview(row.tableId!)}
/>
<ButtonIcon
type="primary"
text
icon="ep:edit"
tooltipContent={$t('common.edit')}
onClick={() => edit(row.tableId!)}
/>
<ButtonIcon
type="primary"
text
icon="ep:refresh"
tooltipContent="同步"
onClick={() => refresh(row.tableId!)}
/>
<ButtonIcon
type="primary"
text
icon="ep:download"
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: () => (
<div class="flex-center gap-8px">
<SvgIcon icon="ep:delete" />
</div>
)
}}
</NButton>
)
}}
</NPopconfirm>
),
default: () => <>{$t('common.delete')}</>
}}
</NTooltip>
</div>
)
width: 300,
render: row => {
const previewBtn = () => {
return (
<ButtonIcon
type="primary"
text
icon="material-symbols:visibility-outline"
tooltipContent="预览"
onClick={() => handlePreview(row.tableId!)}
/>
);
};
const editBtn = () => {
return (
<ButtonIcon
type="primary"
text
icon="material-symbols:drive-file-rename-outline-outline"
tooltipContent={$t('common.edit')}
onClick={() => edit(row.tableId!)}
/>
);
};
const refreshBtn = () => {
return (
<ButtonIcon
type="primary"
text
icon="material-symbols:sync-outline"
tooltipContent="同步"
onClick={() => refresh(row.tableId!)}
/>
);
};
const genCodeBtn = () => {
return (
<ButtonIcon
type="primary"
text
icon="material-symbols:download-rounded"
tooltipContent="生成代码"
onClick={() => handleGenCode(row)}
/>
);
};
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">
{buttons.map((btn, index) => (
<>
{index !== 0 && <NDivider vertical />}
{btn}
</>
))}
</div>
);
}
}
]
});