feat: 网络组件 加入权限
This commit is contained in:
jackhoo_98
parent
d3e45d78bb
commit
716387150a
|
|
@ -56,10 +56,9 @@
|
|||
独立配置:集群下不同节点使用不同配置
|
||||
</p>
|
||||
</template>
|
||||
<question-circle-outlined />
|
||||
<AIcon type="QuestionCircleOutlined" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
|
||||
<a-radio-group
|
||||
v-model:value="formData.shareCluster"
|
||||
button-style="solid"
|
||||
|
|
@ -101,8 +100,9 @@
|
|||
:header="`#${index + 1}.节点`"
|
||||
>
|
||||
<template #extra v-if="!shareCluster">
|
||||
<delete-outlined
|
||||
<AIcon
|
||||
@click="removeCluster(cluster)"
|
||||
type="DeleteOutlined"
|
||||
/>
|
||||
</template>
|
||||
<a-row :gutter="[24, 0]">
|
||||
|
|
@ -171,7 +171,9 @@
|
|||
绑定到服务器上的网卡地址,绑定到所有网卡:0.0.0.0
|
||||
</p>
|
||||
</template>
|
||||
<question-circle-outlined />
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
/>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
|
||||
|
|
@ -230,7 +232,9 @@
|
|||
监听指定端口的请求
|
||||
</p>
|
||||
</template>
|
||||
<question-circle-outlined />
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
/>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<a-select
|
||||
|
|
@ -281,7 +285,9 @@
|
|||
对外提供访问的地址,内网环境时填写服务器的内网IP地址
|
||||
</p>
|
||||
</template>
|
||||
<question-circle-outlined />
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
/>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<a-input
|
||||
|
|
@ -324,7 +330,9 @@
|
|||
对外提供访问的端口
|
||||
</p>
|
||||
</template>
|
||||
<question-circle-outlined />
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
/>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
|
||||
|
|
@ -517,7 +525,9 @@
|
|||
当连接的服务为EMQ时,可能需要使用共享的订阅前缀,如:$queue或$share
|
||||
</p>
|
||||
</template>
|
||||
<question-circle-outlined />
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
/>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<a-input
|
||||
|
|
@ -560,7 +570,9 @@
|
|||
单次收发消息的最大长度,单位:字节;设置过大可能会影响性能
|
||||
</p>
|
||||
</template>
|
||||
<question-circle-outlined />
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
/>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<a-input-number
|
||||
|
|
@ -691,7 +703,9 @@
|
|||
处理TCP粘拆包的方式
|
||||
</p>
|
||||
</template>
|
||||
<question-circle-outlined />
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
/>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<a-select
|
||||
|
|
@ -966,7 +980,7 @@
|
|||
</div>
|
||||
<a-form-item v-if="!shareCluster">
|
||||
<a-button type="dashed" block @click="addCluster">
|
||||
<PlusOutlined />
|
||||
<AIcon type="PlusOutlined" />
|
||||
新增
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
|
|
@ -986,14 +1000,15 @@
|
|||
</a-form>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<a-button
|
||||
<PermissionButton
|
||||
v-if="view === 'false'"
|
||||
type="primary"
|
||||
@click="saveData"
|
||||
:loading="loading"
|
||||
:hasPermission="`link/Type:${id ? 'update' : 'add'}`"
|
||||
>
|
||||
保存
|
||||
</a-button>
|
||||
</PermissionButton>
|
||||
</div>
|
||||
</a-card>
|
||||
</page-container>
|
||||
|
|
@ -1002,11 +1017,6 @@
|
|||
<script lang="ts" setup name="AccessNetwork">
|
||||
import { message } from 'ant-design-vue';
|
||||
import type { FormInstance } from 'ant-design-vue';
|
||||
import {
|
||||
DeleteOutlined,
|
||||
PlusOutlined,
|
||||
QuestionCircleOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import {
|
||||
update,
|
||||
save,
|
||||
|
|
|
|||
|
|
@ -301,3 +301,13 @@ export const Rules = {
|
|||
},
|
||||
],
|
||||
};
|
||||
|
||||
export const TiTlePermissionButtonStyle = {
|
||||
padding: 0,
|
||||
color: ' #1890ff !important',
|
||||
'font-weight': 700,
|
||||
'font-size': '16px',
|
||||
overflow: 'hidden',
|
||||
'text-overflow': 'ellipsis',
|
||||
'white-space': 'nowrap',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -14,9 +14,14 @@
|
|||
:params="params"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<a-button type="primary" @click="handlAdd"
|
||||
><AIcon type="PlusOutlined" />新增</a-button
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
@click="handlAdd"
|
||||
hasPermission="link/Type:add"
|
||||
>
|
||||
<template #icon><AIcon type="PlusOutlined" /></template>
|
||||
新增
|
||||
</PermissionButton>
|
||||
</template>
|
||||
<template #card="slotProps">
|
||||
<CardBox
|
||||
|
|
@ -43,18 +48,14 @@
|
|||
</template>
|
||||
<template #content>
|
||||
<div class="card-item-content">
|
||||
<!-- <a
|
||||
<PermissionButton
|
||||
type="link"
|
||||
@click="handlEye(slotProps.id)"
|
||||
class="card-item-content-title-a"
|
||||
hasPermission="link/Type:view"
|
||||
:style="TiTlePermissionButtonStyle"
|
||||
>
|
||||
{{ slotProps.name }}
|
||||
</a> -->
|
||||
<h3
|
||||
@click="handlEye(slotProps.id)"
|
||||
class="card-item-content-title card-item-content-title-a"
|
||||
>
|
||||
{{ slotProps.name }}
|
||||
</h3>
|
||||
</PermissionButton>
|
||||
<a-row class="card-item-content-box">
|
||||
<a-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
|
|
@ -88,78 +89,49 @@
|
|||
</div>
|
||||
</template>
|
||||
<template #actions="item">
|
||||
<a-tooltip
|
||||
v-bind="item.tooltip"
|
||||
:title="item.disabled && item.tooltip.title"
|
||||
<PermissionButton
|
||||
:disabled="item.disabled"
|
||||
:popConfirm="item.popConfirm"
|
||||
:tooltip="{
|
||||
...item.tooltip,
|
||||
}"
|
||||
@click="item.onClick"
|
||||
:hasPermission="'link/Type:' + item.key"
|
||||
>
|
||||
<a-popconfirm
|
||||
v-if="item.popConfirm"
|
||||
v-bind="item.popConfirm"
|
||||
: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>
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
v-if="item.key === 'delete'"
|
||||
/>
|
||||
<template v-else>
|
||||
<a-button
|
||||
:disabled="item.disabled"
|
||||
@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>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item?.text }}</span>
|
||||
</template>
|
||||
</a-tooltip>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</CardBox>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<a-space :size="16">
|
||||
<a-tooltip
|
||||
<a-space>
|
||||
<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"
|
||||
<PermissionButton
|
||||
: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"
|
||||
:popConfirm="i.popConfirm"
|
||||
:tooltip="{
|
||||
...i.tooltip,
|
||||
}"
|
||||
style="padding: 0px"
|
||||
@click="i.onClick"
|
||||
type="link"
|
||||
v-else
|
||||
@click="i.onClick && i.onClick(slotProps)"
|
||||
:hasPermission="'link/Type:' + i.key"
|
||||
>
|
||||
<a-button
|
||||
:disabled="i.disabled"
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
<template #icon
|
||||
><AIcon :type="i.icon"
|
||||
/></a-button>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
/></template>
|
||||
</PermissionButton>
|
||||
</template>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
|
|
@ -186,13 +158,15 @@
|
|||
</page-container>
|
||||
</template>
|
||||
<script lang="ts" setup name="TypePage">
|
||||
import type { ActionsType } from '@/components/Table/index'
|
||||
import type { ActionsType } from '@/components/Table/index';
|
||||
import { getImage } from '@/utils/comm';
|
||||
import { supports, query, remove, start, shutdown } from '@/api/link/type';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { TiTlePermissionButtonStyle } from './data';
|
||||
import { useMenuStore } from 'store/menu';
|
||||
|
||||
const menuStory = useMenuStore();
|
||||
const tableRef = ref<Record<string, any>>({});
|
||||
const router = useRouter();
|
||||
const params = ref<Record<string, any>>({});
|
||||
const options = ref([]);
|
||||
|
||||
|
|
@ -282,9 +256,10 @@ const getActions = (
|
|||
): ActionsType[] => {
|
||||
if (!data) return [];
|
||||
const state = data.state.value;
|
||||
const stateText = state === 'enabled' ? '禁用' : '启用';
|
||||
const actions = [
|
||||
{
|
||||
key: 'eye',
|
||||
key: 'view',
|
||||
text: '查看',
|
||||
tooltip: {
|
||||
title: '查看',
|
||||
|
|
@ -295,7 +270,7 @@ const getActions = (
|
|||
},
|
||||
},
|
||||
{
|
||||
key: 'edit',
|
||||
key: 'update',
|
||||
text: '编辑',
|
||||
tooltip: {
|
||||
title: '编辑',
|
||||
|
|
@ -307,13 +282,13 @@ const getActions = (
|
|||
},
|
||||
{
|
||||
key: 'action',
|
||||
text: state === 'enabled' ? '禁用' : '启用',
|
||||
text: stateText,
|
||||
tooltip: {
|
||||
title: state === 'enabled' ? '禁用' : '启用',
|
||||
title: stateText,
|
||||
},
|
||||
icon: state === 'enabled' ? 'StopOutlined' : 'CheckCircleOutlined',
|
||||
popConfirm: {
|
||||
title: `确认${state === 'enabled' ? '禁用' : '启用'}?`,
|
||||
title: `确认${stateText}?`,
|
||||
onConfirm: async () => {
|
||||
let res =
|
||||
state === 'enabled'
|
||||
|
|
@ -353,36 +328,19 @@ const getActions = (
|
|||
];
|
||||
return type === 'table'
|
||||
? actions
|
||||
: actions.filter((item) => item.key !== 'eye');
|
||||
: actions.filter((item) => item.key !== 'view');
|
||||
};
|
||||
|
||||
const handlAdd = () => {
|
||||
router.push({
|
||||
path: `/iot/link/type/detail/:id`,
|
||||
query: { view: false },
|
||||
});
|
||||
menuStory.jumpPage(`link/Type/Detail`, { id: ':id' }, { view: false });
|
||||
};
|
||||
|
||||
const handlEye = (id: string) => {
|
||||
router.push({
|
||||
path: `/iot/link/type/detail/${id}`,
|
||||
query: { view: true },
|
||||
});
|
||||
menuStory.jumpPage(`link/Type/Detail`, { id }, { view: true });
|
||||
};
|
||||
|
||||
const handlEdit = (id: string) => {
|
||||
router.push({
|
||||
path: `/iot/link/type/detail/${id}`,
|
||||
query: { view: false },
|
||||
});
|
||||
};
|
||||
|
||||
const handlDelete = async (id: string) => {
|
||||
const res = await remove(id);
|
||||
if (res.success) {
|
||||
message.success('操作成功');
|
||||
tableRef.value.reload();
|
||||
}
|
||||
menuStory.jumpPage(`link/Type/Detail`, { id }, { view: false });
|
||||
};
|
||||
|
||||
const getDetails = (slotProps: Partial<Record<string, any>>) => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue