feat: 新增权限按钮

This commit is contained in:
JiangQiming 2023-03-07 20:05:07 +08:00
parent ef26b169d4
commit 9b5e6b21c6
4 changed files with 150 additions and 236 deletions

View File

@ -17,7 +17,13 @@
:gridColumn="2" :gridColumn="2"
> >
<template #headerTitle> <template #headerTitle>
<a-button type="primary" @click="handleAdd"> 新增 </a-button> <PermissionButton
type="primary"
@click="handleAdd"
hasPermission="media/Cascade:add"
>
<template #icon><AIcon type="PlusOutlined" />新增</template>
</PermissionButton>
</template> </template>
<template #card="slotProps"> <template #card="slotProps">
<CardBox <CardBox
@ -58,48 +64,14 @@
</Ellipsis> </Ellipsis>
</template> </template>
<template #actions="item"> <template #actions="item">
<a-tooltip <PermissionButton
v-bind="item.tooltip"
:title="item.disabled && item.tooltip.title"
>
<a-popconfirm
v-if="item.popConfirm"
v-bind="item.popConfirm"
:disabled="item.disabled"
>
<a-button
:disabled="item.disabled"
v-if="item.key === 'delete'"
>
<AIcon type="DeleteOutlined" />
</a-button>
<a-button
:disabled="item.disabled"
@click="item.onClick"
v-else
>
<AIcon :type="item.icon" />
<span>{{ item.text }}</span>
</a-button>
</a-popconfirm>
<template v-else>
<a-button
:disabled="item.disabled"
@click="item.onClick"
>
<AIcon :type="item.icon" />
<span>{{ item.text }}</span>
</a-button>
</template>
</a-tooltip>
<!-- <PermissionButton
:disabled="item.disabled" :disabled="item.disabled"
:popConfirm="item.popConfirm" :popConfirm="item.popConfirm"
:tooltip="{ :tooltip="{
...item.tooltip, ...item.tooltip,
}" }"
@click="item.onClick" @click="item.onClick"
:hasPermission="`media/Cascade:${item.key}`" :hasPermission="'media/Cascade:' + item.key"
> >
<AIcon <AIcon
type="DeleteOutlined" type="DeleteOutlined"
@ -109,7 +81,7 @@
<AIcon :type="item.icon" /> <AIcon :type="item.icon" />
<span>{{ item?.text }}</span> <span>{{ item?.text }}</span>
</template> </template>
</PermissionButton> --> </PermissionButton>
</template> </template>
</CardBox> </CardBox>
</template> </template>
@ -141,38 +113,7 @@
</template> </template>
<template #action="slotProps"> <template #action="slotProps">
<a-space :size="16"> <a-space :size="16">
<a-tooltip <template
v-for="i in getActions(slotProps, 'table')"
:key="i.key"
v-bind="i.tooltip"
>
<a-popconfirm
v-if="i.popConfirm"
v-bind="i.popConfirm"
:disabled="i.disabled"
>
<a-button
:disabled="i.disabled"
style="padding: 0"
type="link"
><AIcon :type="i.icon"
/></a-button>
</a-popconfirm>
<a-button
style="padding: 0"
type="link"
v-else
@click="i.onClick && i.onClick(slotProps)"
>
<a-button
:disabled="i.disabled"
style="padding: 0"
type="link"
><AIcon :type="i.icon"
/></a-button>
</a-button>
</a-tooltip>
<!-- <template
v-for="i in getActions(slotProps, 'table')" v-for="i in getActions(slotProps, 'table')"
:key="i.key" :key="i.key"
> >
@ -185,11 +126,11 @@
@click="i.onClick" @click="i.onClick"
type="link" type="link"
style="padding: 0px" style="padding: 0px"
:hasPermission="`device/Instance:${i.key}`" :hasPermission="'media/Cascade:' + i.key"
> >
<template #icon><AIcon :type="i.icon" /></template> <template #icon><AIcon :type="i.icon" /></template>
</PermissionButton> </PermissionButton>
</template> --> </template>
</a-space> </a-space>
</template> </template>
</JProTable> </JProTable>
@ -331,7 +272,7 @@ const getActions = (
if (!data) return []; if (!data) return [];
const actions = [ const actions = [
{ {
key: 'edit', key: 'update',
text: '编辑', text: '编辑',
tooltip: { tooltip: {
title: '编辑', title: '编辑',
@ -348,7 +289,7 @@ const getActions = (
}, },
}, },
{ {
key: 'view', key: 'channel',
text: '选择通道', text: '选择通道',
tooltip: { tooltip: {
title: '选择通道', title: '选择通道',
@ -365,7 +306,7 @@ const getActions = (
}, },
}, },
{ {
key: 'debug', key: 'push',
text: '推送', text: '推送',
tooltip: { tooltip: {
title: title:

View File

@ -15,7 +15,13 @@
:params="params" :params="params"
> >
<template #headerTitle> <template #headerTitle>
<a-button type="primary" @click="handleAdd"> 新增 </a-button> <PermissionButton
type="primary"
@click="handleAdd"
hasPermission="media/Device:add"
>
<template #icon><AIcon type="PlusOutlined" />新增</template>
</PermissionButton>
</template> </template>
<template #card="slotProps"> <template #card="slotProps">
<CardBox <CardBox
@ -64,65 +70,47 @@
</a-row> </a-row>
</template> </template>
<template #actions="item"> <template #actions="item">
<a-tooltip <PermissionButton
v-bind="item.tooltip" :disabled="item.disabled"
:title="item.disabled && item.tooltip.title" :popConfirm="item.popConfirm"
:tooltip="{
...item.tooltip,
}"
@click="item.onClick"
:hasPermission="'media/Device:' + item.key"
> >
<a-popconfirm <AIcon
v-if="item.popConfirm" type="DeleteOutlined"
v-bind="item.popConfirm" v-if="item.key === 'delete'"
:disabled="item.disabled" />
>
<a-button :disabled="item.disabled">
<AIcon type="DeleteOutlined" />
</a-button>
</a-popconfirm>
<template v-else> <template v-else>
<a-button <AIcon :type="item.icon" />
:disabled="item.disabled" <span>{{ item?.text }}</span>
@click="item.onClick"
>
<AIcon :type="item.icon" />
<span>{{ item.text }}</span>
</a-button>
</template> </template>
</a-tooltip> </PermissionButton>
</template> </template>
</CardBox> </CardBox>
</template> </template>
<template #action="slotProps"> <template #action="slotProps">
<a-space :size="16"> <a-space :size="16">
<a-tooltip <template
v-for="i in getActions(slotProps, 'table')" v-for="i in getActions(slotProps, 'table')"
:key="i.key" :key="i.key"
v-bind="i.tooltip"
> >
<a-popconfirm <PermissionButton
v-if="i.popConfirm"
v-bind="i.popConfirm"
:disabled="i.disabled" :disabled="i.disabled"
> :popConfirm="i.popConfirm"
<a-button :tooltip="{
:disabled="i.disabled" ...i.tooltip,
style="padding: 0" }"
type="link" @click="i.onClick"
><AIcon :type="i.icon"
/></a-button>
</a-popconfirm>
<a-button
style="padding: 0"
type="link" type="link"
v-else style="padding: 0px"
@click="i.onClick && i.onClick(slotProps)" :hasPermission="'media/Device:' + i.key"
> >
<a-button <template #icon><AIcon :type="i.icon" /></template>
:disabled="i.disabled" </PermissionButton>
style="padding: 0" </template>
type="link"
><AIcon :type="i.icon"
/></a-button>
</a-button>
</a-tooltip>
</a-space> </a-space>
</template> </template>
</JProTable> </JProTable>
@ -254,7 +242,7 @@ const getActions = (
if (!data) return []; if (!data) return [];
const actions = [ const actions = [
{ {
key: 'edit', key: 'update',
text: '编辑', text: '编辑',
tooltip: { tooltip: {
title: '编辑', title: '编辑',
@ -278,9 +266,6 @@ const getActions = (
}, },
icon: 'PartitionOutlined', icon: 'PartitionOutlined',
onClick: () => { onClick: () => {
// router.push(
// `/media/device/Channel?id=${data.id}&type=${data.provider}`,
// );
menuStory.jumpPage( menuStory.jumpPage(
'media/Device/Channel', 'media/Device/Channel',
{}, {},
@ -292,7 +277,7 @@ const getActions = (
}, },
}, },
{ {
key: 'debug', key: 'view', // updateChannel
text: '更新通道', text: '更新通道',
tooltip: { tooltip: {
title: title:
@ -311,6 +296,7 @@ const getActions = (
icon: 'SyncOutlined', icon: 'SyncOutlined',
onClick: () => { onClick: () => {
// updateChannel() // updateChannel()
console.log('updateChannel: ', data);
}, },
}, },
{ {

View File

@ -17,16 +17,22 @@
> >
<template #headerTitle> <template #headerTitle>
<a-space> <a-space>
<a-button type="primary" @click="handleAdd"> <PermissionButton
type="primary"
@click="handleAdd"
hasPermission="notice/Config:add"
>
新增 新增
</a-button> </PermissionButton>
<a-upload <a-upload
name="file" name="file"
accept="json" accept="json"
:showUploadList="false" :showUploadList="false"
:before-upload="beforeUpload" :before-upload="beforeUpload"
> >
<a-button>导入</a-button> <PermissionButton hasPermission="notice/Config:import">
导入
</PermissionButton>
</a-upload> </a-upload>
<a-popconfirm <a-popconfirm
title="确认导出?" title="确认导出?"
@ -34,7 +40,9 @@
cancel-text="取消" cancel-text="取消"
@confirm="handleExport" @confirm="handleExport"
> >
<a-button>导出</a-button> <PermissionButton hasPermission="notice/Config:export">
导出
</PermissionButton>
</a-popconfirm> </a-popconfirm>
</a-space> </a-space>
</template> </template>
@ -95,34 +103,45 @@
v-for="(o, i) in item.children" v-for="(o, i) in item.children"
:key="i" :key="i"
> >
<a-button <PermissionButton
type="link" type="link"
@click="o.onClick" @click="o.onClick"
:hasPermission="`notice/Config:${o.key}`"
> >
<AIcon :type="o.icon" /> <template #icon>
<AIcon :type="o.icon" />
</template>
<span>{{ o.text }}</span> <span>{{ o.text }}</span>
</a-button> </PermissionButton>
</a-menu-item> </a-menu-item>
</a-menu> </a-menu>
</template> </template>
</a-dropdown> </a-dropdown>
<a-popconfirm <j-popconfirm
v-else-if="item.key === 'delete'" v-else-if="item.key === 'delete'"
v-bind="item.popConfirm" v-bind="item.popConfirm"
:disabled="item.disabled" :disabled="item.disabled"
> >
<a-button :disabled="item.disabled"> <PermissionButton
<AIcon type="DeleteOutlined" /> :disabled="item.disabled"
</a-button> :hasPermission="`notice/Config:${item.key}`"
</a-popconfirm> >
<template #icon>
<AIcon type="DeleteOutlined" />
</template>
</PermissionButton>
</j-popconfirm>
<template v-else> <template v-else>
<a-button <PermissionButton
:disabled="item.disabled" :disabled="item.disabled"
@click="item.onClick" @click="item.onClick"
:hasPermission="`notice/Config:${item.key}`"
> >
<AIcon :type="item.icon" /> <template #icon>
<AIcon :type="item.icon" />
</template>
<span>{{ item.text }}</span> <span>{{ item.text }}</span>
</a-button> </PermissionButton>
</template> </template>
</a-tooltip> </a-tooltip>
</template> </template>
@ -130,37 +149,24 @@
</template> </template>
<template #action="slotProps"> <template #action="slotProps">
<a-space :size="16"> <a-space :size="16">
<a-tooltip <template
v-for="i in getActions(slotProps, 'table')" v-for="i in getActions(slotProps, 'table')"
:key="i.key" :key="i.key"
v-bind="i.tooltip"
> >
<a-popconfirm <PermissionButton
v-if="i.popConfirm"
v-bind="i.popConfirm"
:disabled="i.disabled" :disabled="i.disabled"
> :popConfirm="i.popConfirm"
<a-button :tooltip="{
:disabled="i.disabled" ...i.tooltip,
style="padding: 0" }"
type="link" @click="i.onClick"
><AIcon :type="i.icon"
/></a-button>
</a-popconfirm>
<a-button
style="padding: 0"
type="link" type="link"
v-else style="padding: 0px"
@click="i.onClick && i.onClick(slotProps)" :hasPermission="'notice/Config:' + i.key"
> >
<a-button <template #icon><AIcon :type="i.icon" /></template>
:disabled="i.disabled" </PermissionButton>
style="padding: 0" </template>
type="link"
><AIcon :type="i.icon"
/></a-button>
</a-button>
</a-tooltip>
</a-space> </a-space>
</template> </template>
</JProTable> </JProTable>
@ -324,7 +330,7 @@ const getActions = (
if (!data) return []; if (!data) return [];
const actions = [ const actions = [
{ {
key: 'edit', key: 'update',
text: '编辑', text: '编辑',
tooltip: { tooltip: {
title: '编辑', title: '编辑',
@ -349,7 +355,7 @@ const getActions = (
}, },
}, },
{ {
key: 'debug', key: 'log',
text: '通知记录', text: '通知记录',
tooltip: { tooltip: {
title: '通知记录', title: '通知记录',
@ -385,7 +391,7 @@ const getActions = (
icon: 'EllipsisOutlined', icon: 'EllipsisOutlined',
children: [ children: [
{ {
key: 'debug', key: 'export',
text: '导出', text: '导出',
tooltip: { tooltip: {
title: '导出', title: '导出',
@ -396,7 +402,7 @@ const getActions = (
}, },
}, },
{ {
key: 'sync', key: 'bind',
text: '同步用户', text: '同步用户',
tooltip: { tooltip: {
title: '同步用户', title: '同步用户',

View File

@ -17,16 +17,24 @@
> >
<template #headerTitle> <template #headerTitle>
<a-space> <a-space>
<a-button type="primary" @click="handleAdd"> <PermissionButton
type="primary"
@click="handleAdd"
hasPermission="notice/Template:add"
>
新增 新增
</a-button> </PermissionButton>
<a-upload <a-upload
name="file" name="file"
accept="json" accept="json"
:showUploadList="false" :showUploadList="false"
:before-upload="beforeUpload" :before-upload="beforeUpload"
> >
<a-button>导入</a-button> <PermissionButton
hasPermission="notice/Template:import"
>
导入
</PermissionButton>
</a-upload> </a-upload>
<a-popconfirm <a-popconfirm
title="确认导出?" title="确认导出?"
@ -34,7 +42,11 @@
cancel-text="取消" cancel-text="取消"
@confirm="handleExport" @confirm="handleExport"
> >
<a-button>导出</a-button> <PermissionButton
hasPermission="notice/Template:export"
>
导出
</PermissionButton>
</a-popconfirm> </a-popconfirm>
</a-space> </a-space>
</template> </template>
@ -77,42 +89,24 @@
</a-row> </a-row>
</template> </template>
<template #actions="item"> <template #actions="item">
<a-tooltip <PermissionButton
v-bind="item.tooltip" :disabled="item.disabled"
:title="item.disabled && item.tooltip.title" :popConfirm="item.popConfirm"
:tooltip="{
...item.tooltip,
}"
@click="item.onClick"
:hasPermission="'notice/Template:' + item.key"
> >
<a-popconfirm <AIcon
v-if="item.popConfirm" type="DeleteOutlined"
v-bind="item.popConfirm" v-if="item.key === 'delete'"
:disabled="item.disabled" />
>
<a-button :disabled="item.disabled">
<AIcon
type="DeleteOutlined"
v-if="item.key === 'delete'"
/>
<template v-else>
<AIcon :type="item.icon" />
<span>{{ item.text }}</span>
</template>
</a-button>
</a-popconfirm>
<template v-else> <template v-else>
<a-button <AIcon :type="item.icon" />
:disabled="item.disabled" <span>{{ item?.text }}</span>
@click="item.onClick"
>
<AIcon
type="DeleteOutlined"
v-if="item.key === 'delete'"
/>
<template v-else>
<AIcon :type="item.icon" />
<span>{{ item.text }}</span>
</template>
</a-button>
</template> </template>
</a-tooltip> </PermissionButton>
</template> </template>
</CardBox> </CardBox>
</template> </template>
@ -126,37 +120,24 @@
</template> </template>
<template #action="slotProps"> <template #action="slotProps">
<a-space :size="16"> <a-space :size="16">
<a-tooltip <template
v-for="i in getActions(slotProps, 'table')" v-for="i in getActions(slotProps, 'table')"
:key="i.key" :key="i.key"
v-bind="i.tooltip"
> >
<a-popconfirm <PermissionButton
v-if="i.popConfirm"
v-bind="i.popConfirm"
:disabled="i.disabled" :disabled="i.disabled"
> :popConfirm="i.popConfirm"
<a-button :tooltip="{
:disabled="i.disabled" ...i.tooltip,
style="padding: 0" }"
type="link" @click="i.onClick"
><AIcon :type="i.icon"
/></a-button>
</a-popconfirm>
<a-button
style="padding: 0"
type="link" type="link"
v-else style="padding: 0px"
@click="i.onClick && i.onClick(slotProps)" :hasPermission="'notice/Template:' + i.key"
> >
<a-button <template #icon><AIcon :type="i.icon" /></template>
:disabled="i.disabled" </PermissionButton>
style="padding: 0" </template>
type="link"
><AIcon :type="i.icon"
/></a-button>
</a-button>
</a-tooltip>
</a-space> </a-space>
</template> </template>
</JProTable> </JProTable>
@ -286,7 +267,7 @@ const handleAdd = () => {
* 导入 * 导入
*/ */
const beforeUpload = (file: any) => { const beforeUpload = (file: any) => {
console.log('file: ', file); // console.log('file: ', file);
const reader = new FileReader(); const reader = new FileReader();
reader.readAsText(file); reader.readAsText(file);
reader.onload = async (result) => { reader.onload = async (result) => {
@ -330,7 +311,7 @@ const getActions = (
if (!data) return []; if (!data) return [];
const actions = [ const actions = [
{ {
key: 'edit', key: 'update',
text: '编辑', text: '编辑',
tooltip: { tooltip: {
title: '编辑', title: '编辑',
@ -355,7 +336,7 @@ const getActions = (
}, },
}, },
{ {
key: 'debug', key: 'export',
text: '导出', text: '导出',
tooltip: { tooltip: {
title: '导出', title: '导出',
@ -366,7 +347,7 @@ const getActions = (
}, },
}, },
{ {
key: 'debug', key: 'log',
text: '通知记录', text: '通知记录',
tooltip: { tooltip: {
title: '通知记录', title: '通知记录',