0017
/
iot-ui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #55 from jetlinks/dev-hub 

feat: 运维管理 加入权限
This commit is contained in:
胡彪 2023-03-01 17:34:01 +08:00 committed by GitHub
parent 2299ae271f 86c15261e8
commit 4e0670b362
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 337 additions and 385 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/api/link/protocol.ts
View File

@ -3,15 +3,13 @@ import { BASE_API_PATH } from '@/utils/variable';
export const PROTOCOL_UPLOAD = `${BASE_API_PATH}/file/upload`; export const PROTOCOL_UPLOAD = `${BASE_API_PATH}/file/upload`;
export const detail = (id: string) => server.get(`/gateway/device/${id}`); export const save = (data: Object) => server.post(`/protocol`, data);
export const save = (data: Object) => server.post(`/gateway/device`, data); export const update = (data: Object) => server.patch(`/protocol`, data);
export const update = (data: Object) => server.patch(`/gateway/device`, data);
export const list = (data: Object) => server.post(`/protocol/_query`, data); export const list = (data: Object) => server.post(`/protocol/_query`, data);
export const remove = (id: string) => server.remove(`/gateway/device/${id}`); export const remove = (id: string) => server.remove(`/protocol/${id}`);
export const querySystemApi = (data: Object) => export const querySystemApi = (data: Object) =>
server.post(`/system/config/scopes`, data); server.post(`/system/config/scopes`, data);

2
src/components/AIcon/index.tsx
View File

@ -63,7 +63,7 @@ const iconKeys = [
'HistoryOutlined', 'HistoryOutlined',
'ToolOutlined', 'ToolOutlined',
'FileOutlined', 'FileOutlined',
'LikeOutlined' 'LikeOutlined',
] ]
const Icon = (props: {type: string}) => { const Icon = (props: {type: string}) => {

2
src/views/Log/Access/index.vue
View File

@ -144,7 +144,7 @@ const columns = [
search: { search: {
type: 'string', type: 'string',
}, },
// width: 200, ellipsis: true,
}, },
{ {
title: '请求方法', title: '请求方法',

81
src/views/device/Firmware/Task/Detail/index.vue
View File

@ -17,19 +17,21 @@
</div> </div>
<div class="state-title-right"> <div class="state-title-right">
<div> <div class="state-button">
<a-popconfirm <PermissionButton
title="确定批量重试?" type="link"
ok-text="确定"
cancel-text="取消"
@confirm="confirm"
v-if=" v-if="
item.key === 'failed' && item.key === 'failed' &&
stateInfo?.mode?.value === 'push' stateInfo?.mode?.value === 'push'
" "
hasPermission="device/Firmware:update"
:popConfirm="{
title: `确定批量重试`,
onConfirm: confirm,
}"
> >
<a href="#">批量重试</a> 批量重试
</a-popconfirm> </PermissionButton>
</div> </div>
<div class="img"> <div class="img">
@ -85,37 +87,27 @@
<span>{{ slotProps.progress }}%</span> <span>{{ slotProps.progress }}%</span>
</template> </template>
<template #action="slotProps"> <template #action="slotProps">
<a-space :size="16"> <a-space>
<a-tooltip <template
v-for="i in getActions(slotProps)" v-for="i in getActions(slotProps)"
:key="i.key" :key="i.key"
v-bind="i.tooltip"
> >
<a-popconfirm <PermissionButton
v-if="i.popConfirm" :disabled="i.disabled"
v-bind="i.popConfirm" :popConfirm="i.popConfirm"
> :tooltip="{
<a-button ...i.tooltip,
:disabled="i.disabled" }"
style="padding: 0" style="padding: 0px"
type="link" @click="i.onClick"
><AIcon :type="i.icon"
/></a-button>
</a-popconfirm>
<a-button
style="padding: 0"
type="link" type="link"
v-else :hasPermission="'device/Firmware:' + i.key"
@click="i.onClick && i.onClick(slotProps)"
> >
<a-button <template #icon
:disabled="i.disabled"
style="padding: 0"
type="link"
><AIcon :type="i.icon" ><AIcon :type="i.icon"
/></a-button> /></template>
</a-button> </PermissionButton>
</a-tooltip> </template>
</a-space> </a-space>
</template> </template>
</JTable> </JTable>
@ -129,7 +121,6 @@ import {
taskById, taskById,
history, history,
historyCount, historyCount,
queryProduct,
startTask, startTask,
startOneTask, startOneTask,
} from '@/api/device/firmware'; } from '@/api/device/firmware';
@ -138,8 +129,8 @@ import { getImage } from '@/utils/comm';
import moment from 'moment'; import moment from 'moment';
import { cloneDeep } from 'lodash-es'; import { cloneDeep } from 'lodash-es';
import Save from './Save.vue'; import Save from './Save.vue';
const tableRef = ref<Record<string, any>>({}); const tableRef = ref<Record<string, any>>({});
const router = useRouter();
const route = useRoute(); const route = useRoute();
const params = ref<Record<string, any>>({}); const params = ref<Record<string, any>>({});
const taskId = route.params?.id as string; const taskId = route.params?.id as string;
@ -286,7 +277,7 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
} }
const Actions = [ const Actions = [
{ {
key: 'eye', key: 'view',
text: '查看', text: '查看',
tooltip: { tooltip: {
title: '查看', title: '查看',
@ -297,25 +288,23 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
}, },
}, },
{ {
key: 'try', key: 'update',
text: '重试', text: '重试',
tooltip: { tooltip: {
title: '重试', title: '重试',
}, },
icon: 'RedoOutlined', icon: 'RedoOutlined',
onClick: async () => { popConfirm: {
handlTry(data.id); title: `确认重试?`,
onConfirm: async () => {
handlTry(data.id);
},
}, },
}, },
]; ];
return Actions; return Actions;
}; };
const handlAdd = () => {
current.value = {};
visible.value = true;
};
const handlEye = (data: string) => { const handlEye = (data: string) => {
current.value = data || ''; current.value = data || '';
visible.value = true; visible.value = true;
@ -434,4 +423,8 @@ const handleSearch = (e: any) => {
} }
} }
} }
.state-button {
margin-top: -5px;
margin-right: -12px;
}
</style> </style>

11
src/views/device/Firmware/Task/index.vue
View File

@ -13,9 +13,14 @@
:params="params" :params="params"
> >
<template #headerTitle> <template #headerTitle>
<a-button type="primary" @click="handlAdd" <PermissionButton
><AIcon type="PlusOutlined" />新增</a-button type="primary"
@click="handlAdd"
hasPermission="device/Firmware:add"
> >
<template #icon><AIcon type="PlusOutlined" /></template>
新增
</PermissionButton>
</template> </template>
<template #mode="slotProps"> <template #mode="slotProps">
<span>{{ slotProps.mode.text }}</span> <span>{{ slotProps.mode.text }}</span>
@ -225,7 +230,7 @@ const handlEye = (data: object) => {
}; };
const handlDetails = (id: string) => { const handlDetails = (id: string) => {
// menuStory.jumpPage('device/Firmware/Task/Detail', { id }); menuStory.jumpPage('device/Firmware/Task/Detail', { id });
}; };
const saveChange = (value: boolean) => { const saveChange = (value: boolean) => {
visible.value = false; visible.value = false;

58
src/views/device/Firmware/index.vue
View File

@ -13,9 +13,14 @@
:params="params" :params="params"
> >
<template #headerTitle> <template #headerTitle>
<a-button type="primary" @click="handlAdd" <PermissionButton
><plus-outlined />新增</a-button type="primary"
@click="handlAdd"
hasPermission="device/Firmware:add"
> >
<template #icon><AIcon type="PlusOutlined" /></template>
新增
</PermissionButton>
</template> </template>
<template #productId="slotProps"> <template #productId="slotProps">
<span>{{ slotProps.productName }}</span> <span>{{ slotProps.productName }}</span>
@ -28,37 +33,27 @@
}}</span> }}</span>
</template> </template>
<template #action="slotProps"> <template #action="slotProps">
<a-space :size="16"> <a-space>
<a-tooltip <template
v-for="i in getActions(slotProps)" v-for="i in getActions(slotProps)"
:key="i.key" :key="i.key"
v-bind="i.tooltip"
> >
<a-popconfirm <PermissionButton
v-if="i.popConfirm" :disabled="i.disabled"
v-bind="i.popConfirm" :popConfirm="i.popConfirm"
> :tooltip="{
<a-button ...i.tooltip,
:disabled="i.disabled" }"
style="padding: 0" style="padding: 0px"
type="link" @click="i.onClick"
><AIcon :type="i.icon"
/></a-button>
</a-popconfirm>
<a-button
style="padding: 0"
type="link" type="link"
v-else :hasPermission="'device/Firmware:' + i.key"
@click="i.onClick && i.onClick(slotProps)"
> >
<a-button <template #icon
:disabled="i.disabled"
style="padding: 0"
type="link"
><AIcon :type="i.icon" ><AIcon :type="i.icon"
/></a-button> /></template>
</a-button> </PermissionButton>
</a-tooltip> </template>
</a-space> </a-space>
</template> </template>
</JTable> </JTable>
@ -79,7 +74,6 @@ import type { FormDataType } from './type';
const menuStory = useMenuStore(); const menuStory = useMenuStore();
const tableRef = ref<Record<string, any>>({}); const tableRef = ref<Record<string, any>>({});
const router = useRouter();
const params = ref<Record<string, any>>({}); const params = ref<Record<string, any>>({});
const productOptions = ref([]); const productOptions = ref([]);
@ -174,7 +168,7 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
} }
return [ return [
{ {
key: 'FileTextOutlined', key: 'view',
text: '升级任务', text: '升级任务',
tooltip: { tooltip: {
title: '升级任务', title: '升级任务',
@ -185,7 +179,7 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
}, },
}, },
{ {
key: 'edit', key: 'update',
text: '编辑', text: '编辑',
tooltip: { tooltip: {
title: '编辑', title: '编辑',
@ -211,7 +205,7 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
]; ];
}; };
const handlUpdate = (data: FormDataType) => { const handlUpdate = (data: Partial<Record<string, any>>) => {
menuStory.jumpPage( menuStory.jumpPage(
'device/Firmware/Task', 'device/Firmware/Task',
{}, {},
@ -226,7 +220,7 @@ const handlAdd = () => {
current.value = {}; current.value = {};
visible.value = true; visible.value = true;
}; };
const handlEdit = (data: FormDataType) => { const handlEdit = (data: Partial<Record<string, any>>) => {
current.value = _.cloneDeep(data); current.value = _.cloneDeep(data);
visible.value = true; visible.value = true;
}; };

12
src/views/link/AccessConfig/Detail/index.vue
View File

@ -98,7 +98,13 @@ const getTypeList = (result: Record<string, any>) => {
edge.push(item); edge.push(item);
} else { } else {
item.type = 'network'; item.type = 'network';
network.push(item); // network.push(item);
/**
* 插件设备接入 暂时不开发 todo
*/
if (item.id !== 'plugin_gateway' || item.name !== '插件设备接入') {
network.push(item);
}
} }
}); });
@ -135,6 +141,10 @@ const queryProviders = async () => {
const resp = await getProviders(); const resp = await getProviders();
if (resp.status === 200) { if (resp.status === 200) {
dataSource.value = getTypeList(resp.result); dataSource.value = getTypeList(resp.result);
// dataSource.value = getTypeList(resp.result)[0].list.filter(
// (item) => item.name !== '插件设备接入',
// );
console.log(111, dataSource.value);
} }
}; };

2
src/views/link/AccessConfig/index.vue
View File

@ -12,7 +12,7 @@
sorts: [{ name: 'createTime', order: 'desc' }], sorts: [{ name: 'createTime', order: 'desc' }],
}" }"
gridColumn="2" gridColumn="2"
gridColumns="[2]" :gridColumns="[1, 2]"
:params="params" :params="params"
> >
<template #headerTitle> <template #headerTitle>

75
src/views/link/Certificate/index.vue
View File

@ -13,45 +13,40 @@
:params="params" :params="params"
> >
<template #headerTitle> <template #headerTitle>
<a-button type="primary" @click="handlAdd" <PermissionButton
><AIcon type="PlusOutlined" />新增</a-button type="primary"
@click="handlAdd"
hasPermission="link/Certificate:add"
> >
<template #icon><AIcon type="PlusOutlined" /></template>
新增
</PermissionButton>
</template> </template>
<template #type="slotProps"> <template #type="slotProps">
<span>{{ slotProps.type.text }}</span> <span>{{ slotProps.type.text }}</span>
</template> </template>
<template #action="slotProps"> <template #action="slotProps">
<a-space :size="16"> <a-space>
<a-tooltip <template
v-for="i in getActions(slotProps)" v-for="i in getActions(slotProps)"
:key="i.key" :key="i.key"
v-bind="i.tooltip"
> >
<a-popconfirm <PermissionButton
v-if="i.popConfirm" :disabled="i.disabled"
v-bind="i.popConfirm" :popConfirm="i.popConfirm"
> :tooltip="{
<a-button ...i.tooltip,
:disabled="i.disabled" }"
style="padding: 0" style="padding: 0px"
type="link" @click="i.onClick"
><AIcon :type="i.icon"
/></a-button>
</a-popconfirm>
<a-button
style="padding: 0"
type="link" type="link"
v-else :hasPermission="'link/Certificate:' + i.key"
@click="i.onClick && i.onClick(slotProps)"
> >
<a-button <template #icon
:disabled="i.disabled"
style="padding: 0"
type="link"
><AIcon :type="i.icon" ><AIcon :type="i.icon"
/></a-button> /></template>
</a-button> </PermissionButton>
</a-tooltip> </template>
</a-space> </a-space>
</template> </template>
</JTable> </JTable>
@ -62,9 +57,10 @@
import type { ActionsType } from '@/components/Table/index'; import type { ActionsType } from '@/components/Table/index';
import { query, remove } from '@/api/link/certificate'; import { query, remove } from '@/api/link/certificate';
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
import { useMenuStore } from 'store/menu';
const menuStory = useMenuStore();
const tableRef = ref<Record<string, any>>({}); const tableRef = ref<Record<string, any>>({});
const router = useRouter();
const params = ref<Record<string, any>>({}); const params = ref<Record<string, any>>({});
const columns = [ const columns = [
@ -119,7 +115,7 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
} }
return [ return [
{ {
key: 'eye', key: 'view',
text: '查看', text: '查看',
tooltip: { tooltip: {
title: '查看', title: '查看',
@ -130,7 +126,7 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
}, },
}, },
{ {
key: 'edit', key: 'update',
text: '编辑', text: '编辑',
tooltip: { tooltip: {
title: '编辑', title: '编辑',
@ -157,24 +153,19 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
}; };
const handlAdd = () => { const handlAdd = () => {
router.push({ menuStory.jumpPage(
path: `/iot/link/certificate/detail/:id`, `link/Certificate/Detail`,
query: { view: false }, { id: ':id' },
}); { view: false },
);
}; };
const handlEye = (id: string) => { const handlEye = (id: string) => {
router.push({ menuStory.jumpPage(`link/Certificate/Detail`, { id }, { view: true });
path: `/iot/link/certificate/detail/${id}`,
query: { view: true },
});
}; };
const handlEdit = (id: string) => { const handlEdit = (id: string) => {
router.push({ menuStory.jumpPage(`link/Certificate/Detail`, { id }, { view: false });
path: `/iot/link/certificate/detail/${id}`,
query: { view: false },
});
}; };
const handlDelete = async (id: string) => { const handlDelete = async (id: string) => {

13
src/views/link/DashBoard/components/Cpu.vue
View File

@ -10,7 +10,9 @@
format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss"
v-model="data.time" v-model="data.time"
> >
<template #suffixIcon><a-icon type="calendar" /></template> <template #suffixIcon
><AIcon type="CalendarOutlined"
/></template>
<template #renderExtraFooter> <template #renderExtraFooter>
<a-radio-group <a-radio-group
default-value="a" default-value="a"
@ -31,7 +33,8 @@
> >
</a-range-picker> </a-range-picker>
</div> </div>
<div ref="chartRef" style="width: 100%; height: 300px"></div> <a-empty v-if="empty" class="empty" />
<div v-else ref="chartRef" style="width: 100%; height: 300px"></div>
</div> </div>
</a-spin> </a-spin>
</template> </template>
@ -50,8 +53,8 @@ import {
} from './tool.ts'; } from './tool.ts';
const chartRef = ref<Record<string, any>>({}); const chartRef = ref<Record<string, any>>({});
const loading = ref(false); const loading = ref(false);
const empty = ref(false);
const data = ref({ const data = ref({
type: 'hour', type: 'hour',
time: [null, null], time: [null, null],
@ -140,6 +143,7 @@ const handleCpuOptions = (optionsData, xAxis) => {
: typeDataLine, : typeDataLine,
}; };
myChart.setOption(options); myChart.setOption(options);
xAxis.length === 0 && (empty.value = true);
window.addEventListener('resize', function () { window.addEventListener('resize', function () {
myChart.resize(); myChart.resize();
}); });
@ -186,4 +190,7 @@ watch(
margin-top: 8px; margin-top: 8px;
} }
} }
.empty {
height: 300px;
}
</style> </style>

13
src/views/link/DashBoard/components/Jvm.vue
View File

@ -10,7 +10,9 @@
format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss"
v-model="data.time" v-model="data.time"
> >
<template #suffixIcon><a-icon type="calendar" /></template> <template #suffixIcon
><AIcon type="CalendarOutlined"
/></template>
<template #renderExtraFooter> <template #renderExtraFooter>
<a-radio-group <a-radio-group
default-value="a" default-value="a"
@ -31,7 +33,8 @@
> >
</a-range-picker> </a-range-picker>
</div> </div>
<div ref="chartRef" style="width: 100%; height: 300px"></div> <a-empty v-if="empty" class="empty" />
<div v-else ref="chartRef" style="width: 100%; height: 300px"></div>
</div> </div>
</a-spin> </a-spin>
</template> </template>
@ -50,7 +53,7 @@ import {
} from './tool.ts'; } from './tool.ts';
const chartRef = ref<Record<string, any>>({}); const chartRef = ref<Record<string, any>>({});
const empty = ref(false);
const loading = ref(false); const loading = ref(false);
const data = ref({ const data = ref({
type: 'hour', type: 'hour',
@ -144,6 +147,7 @@ const handleJVMOptions = (optionsData, xAxis) => {
: typeDataLine, : typeDataLine,
}; };
myChart.setOption(options); myChart.setOption(options);
xAxis.length === 0 && (empty.value = true);
window.addEventListener('resize', function () { window.addEventListener('resize', function () {
myChart.resize(); myChart.resize();
}); });
@ -190,4 +194,7 @@ watch(
margin-top: 8px; margin-top: 8px;
} }
} }
.empty {
height: 300px;
}
</style> </style>

12
src/views/link/DashBoard/components/Network.vue
View File

@ -43,12 +43,12 @@
</div> </div>
</div> </div>
<div> <div>
<a-empty v-if="empty" class="empty" />
<div <div
v-else
ref="chartRef" ref="chartRef"
v-if="flag"
style="width: 100%; height: 350px" style="width: 100%; height: 350px"
></div> ></div>
<a-empty v-else style="height: 300px; margin-top: 120px" />
</div> </div>
</div> </div>
</a-spin> </a-spin>
@ -67,10 +67,8 @@ import moment from 'moment';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
const chartRef = ref<Record<string, any>>({}); const chartRef = ref<Record<string, any>>({});
const empty = ref(false);
const flag = ref(true);
const loading = ref(false); const loading = ref(false);
const myChart = ref(null);
const data = ref({ const data = ref({
type: 'bytesRead', type: 'bytesRead',
time: { time: {
@ -163,6 +161,7 @@ const handleNetworkOptions = (optionsData, xAxis) => {
: typeDataLine, : typeDataLine,
}; };
myChart.setOption(options); myChart.setOption(options);
// xAxis.length === 0 && (empty.value = true);
window.addEventListener('resize', function () { window.addEventListener('resize', function () {
myChart.resize(); myChart.resize();
}); });
@ -216,4 +215,7 @@ watch(
display: flex; display: flex;
align-items: center; align-items: center;
} }
.empty {
height: 300px;
}
</style> </style>

18
src/views/link/Protocol/Save/index.vue
View File

@ -1,13 +1,9 @@
<template lang=""> <template lang="">
<a-modal <a-modal
:title="data.id ? '编辑' : '新增'" :title="data.id ? '编辑' : '新增'"
ok-text="确认"
cancel-text="取消"
:visible="true" :visible="true"
width="700px" width="700px"
:confirm-loading="loading"
@cancel="handleCancel" @cancel="handleCancel"
@ok="handleOk"
> >
<a-form <a-form
class="form" class="form"
@ -55,6 +51,19 @@
/> />
</a-form-item> </a-form-item>
</a-form> </a-form>
<template #footer>
<a-button key="back" @click="handleCancel">取消</a-button>
<PermissionButton
key="submit"
type="primary"
:loading="loading"
@click="handleOk"
style="margin-left: 8px"
:hasPermission="`link/Protocol:${id ? 'update' : 'add'}`"
>
确认
</PermissionButton>
</template>
</a-modal> </a-modal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -124,7 +133,6 @@ const onSubmit = () => {
? await save(params) ? await save(params)
: await update({ ...props.data, ...params }); : await update({ ...props.data, ...params });
if (response.status === 200) { if (response.status === 200) {
message.success('操作成功');
emit('change', true); emit('change', true);
} }
loading.value = false; loading.value = false;

115
src/views/link/Protocol/index.vue
View File

@ -13,9 +13,14 @@
:params="params" :params="params"
> >
<template #headerTitle> <template #headerTitle>
<a-button type="primary" @click="handlAdd" <PermissionButton
><AIcon type="PlusOutlined" />新增</a-button type="primary"
@click="handlAdd"
hasPermission="link/Protocol:add"
> >
<template #icon><AIcon type="PlusOutlined" /></template>
新增
</PermissionButton>
</template> </template>
<template #card="slotProps"> <template #card="slotProps">
<CardBox <CardBox
@ -31,11 +36,16 @@
</template> </template>
<template #content> <template #content>
<div class="card-item-content"> <div class="card-item-content">
<h3 <a-tooltip>
class="card-item-content-title card-item-content-title-a" <template #title>
> {{ slotProps.name }}
{{ slotProps.name }} </template>
</h3> <h3
class="card-item-content-title card-item-content-title-a"
>
{{ slotProps.name }}
</h3>
</a-tooltip>
<a-row class="card-item-content-box"> <a-row class="card-item-content-box">
<a-col <a-col
:span="12" :span="12"
@ -70,78 +80,49 @@
</div> </div>
</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="'link/Protocol:' + 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>
<template #action="slotProps"> <template #action="slotProps">
<a-space :size="16"> <a-space>
<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" style="padding: 0px"
><AIcon :type="i.icon" @click="i.onClick"
/></a-button>
</a-popconfirm>
<a-button
style="padding: 0"
type="link" type="link"
v-else :hasPermission="'link/Protocol:' + i.key"
@click="i.onClick && i.onClick(slotProps)"
> >
<a-button <template #icon
:disabled="i.disabled"
style="padding: 0"
type="link"
><AIcon :type="i.icon" ><AIcon :type="i.icon"
/></a-button> /></template>
</a-button> </PermissionButton>
</a-tooltip> </template>
</a-space> </a-space>
</template> </template>
</JTable> </JTable>
@ -173,7 +154,6 @@ const columns = [
}, },
width: 200, width: 200,
fixed: 'left', fixed: 'left',
// scopedSlots: true,
}, },
{ {
title: '名称', title: '名称',
@ -182,6 +162,7 @@ const columns = [
search: { search: {
type: 'string', type: 'string',
}, },
ellipsis: true,
}, },
{ {
title: '类型', title: '类型',
@ -227,7 +208,7 @@ const getActions = (
if (!data) return []; if (!data) return [];
const actions = [ const actions = [
{ {
key: 'edit', key: 'update',
text: '编辑', text: '编辑',
tooltip: { tooltip: {
title: '编辑', title: '编辑',

46
src/views/link/Type/Detail/index.vue
View File

@ -56,10 +56,9 @@
独立配置:集群下不同节点使用不同配置 独立配置:集群下不同节点使用不同配置
</p> </p>
</template> </template>
<question-circle-outlined /> <AIcon type="QuestionCircleOutlined" />
</a-tooltip> </a-tooltip>
</div> </div>
<a-radio-group <a-radio-group
v-model:value="formData.shareCluster" v-model:value="formData.shareCluster"
button-style="solid" button-style="solid"
@ -101,8 +100,9 @@
:header="`#${index + 1}.节点`" :header="`#${index + 1}.节点`"
> >
<template #extra v-if="!shareCluster"> <template #extra v-if="!shareCluster">
<delete-outlined <AIcon
@click="removeCluster(cluster)" @click="removeCluster(cluster)"
type="DeleteOutlined"
/> />
</template> </template>
<a-row :gutter="[24, 0]"> <a-row :gutter="[24, 0]">
@ -171,7 +171,9 @@
绑定到服务器上的网卡地址,绑定到所有网卡:0.0.0.0 绑定到服务器上的网卡地址,绑定到所有网卡:0.0.0.0
</p> </p>
</template> </template>
<question-circle-outlined /> <AIcon
type="QuestionCircleOutlined"
/>
</a-tooltip> </a-tooltip>
</div> </div>
@ -230,7 +232,9 @@
监听指定端口的请求 监听指定端口的请求
</p> </p>
</template> </template>
<question-circle-outlined /> <AIcon
type="QuestionCircleOutlined"
/>
</a-tooltip> </a-tooltip>
</div> </div>
<a-select <a-select
@ -281,7 +285,9 @@
对外提供访问的地址,内网环境时填写服务器的内网IP地址 对外提供访问的地址,内网环境时填写服务器的内网IP地址
</p> </p>
</template> </template>
<question-circle-outlined /> <AIcon
type="QuestionCircleOutlined"
/>
</a-tooltip> </a-tooltip>
</div> </div>
<a-input <a-input
@ -324,7 +330,9 @@
对外提供访问的端口 对外提供访问的端口
</p> </p>
</template> </template>
<question-circle-outlined /> <AIcon
type="QuestionCircleOutlined"
/>
</a-tooltip> </a-tooltip>
</div> </div>
@ -517,7 +525,9 @@
当连接的服务为EMQ时,可能需要使用共享的订阅前缀,如:$queue或$share 当连接的服务为EMQ时,可能需要使用共享的订阅前缀,如:$queue或$share
</p> </p>
</template> </template>
<question-circle-outlined /> <AIcon
type="QuestionCircleOutlined"
/>
</a-tooltip> </a-tooltip>
</div> </div>
<a-input <a-input
@ -560,7 +570,9 @@
单次收发消息的最大长度,单位:字节;设置过大可能会影响性能 单次收发消息的最大长度,单位:字节;设置过大可能会影响性能
</p> </p>
</template> </template>
<question-circle-outlined /> <AIcon
type="QuestionCircleOutlined"
/>
</a-tooltip> </a-tooltip>
</div> </div>
<a-input-number <a-input-number
@ -691,7 +703,9 @@
处理TCP粘拆包的方式 处理TCP粘拆包的方式
</p> </p>
</template> </template>
<question-circle-outlined /> <AIcon
type="QuestionCircleOutlined"
/>
</a-tooltip> </a-tooltip>
</div> </div>
<a-select <a-select
@ -966,7 +980,7 @@
</div> </div>
<a-form-item v-if="!shareCluster"> <a-form-item v-if="!shareCluster">
<a-button type="dashed" block @click="addCluster"> <a-button type="dashed" block @click="addCluster">
<PlusOutlined /> <AIcon type="PlusOutlined" />
新增 新增
</a-button> </a-button>
</a-form-item> </a-form-item>
@ -986,14 +1000,15 @@
</a-form> </a-form>
</div> </div>
<div class="footer"> <div class="footer">
<a-button <PermissionButton
v-if="view === 'false'" v-if="view === 'false'"
type="primary" type="primary"
@click="saveData" @click="saveData"
:loading="loading" :loading="loading"
:hasPermission="`link/Type:${id ? 'update' : 'add'}`"
> >
保存 保存
</a-button> </PermissionButton>
</div> </div>
</a-card> </a-card>
</page-container> </page-container>
@ -1002,11 +1017,6 @@
<script lang="ts" setup name="AccessNetwork"> <script lang="ts" setup name="AccessNetwork">
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
import type { FormInstance } from 'ant-design-vue'; import type { FormInstance } from 'ant-design-vue';
import {
DeleteOutlined,
PlusOutlined,
QuestionCircleOutlined,
} from '@ant-design/icons-vue';
import { import {
update, update,
save, save,

10
src/views/link/Type/data.ts
View File

@ -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',
};

152
src/views/link/Type/index.vue
View File

@ -14,9 +14,14 @@
:params="params" :params="params"
> >
<template #headerTitle> <template #headerTitle>
<a-button type="primary" @click="handlAdd" <PermissionButton
><AIcon type="PlusOutlined" />新增</a-button type="primary"
@click="handlAdd"
hasPermission="link/Type:add"
> >
<template #icon><AIcon type="PlusOutlined" /></template>
新增
</PermissionButton>
</template> </template>
<template #card="slotProps"> <template #card="slotProps">
<CardBox <CardBox
@ -43,18 +48,14 @@
</template> </template>
<template #content> <template #content>
<div class="card-item-content"> <div class="card-item-content">
<!-- <a <PermissionButton
type="link"
@click="handlEye(slotProps.id)" @click="handlEye(slotProps.id)"
class="card-item-content-title-a" hasPermission="link/Type:view"
:style="TiTlePermissionButtonStyle"
> >
{{ slotProps.name }} {{ slotProps.name }}
</a> --> </PermissionButton>
<h3
@click="handlEye(slotProps.id)"
class="card-item-content-title card-item-content-title-a"
>
{{ slotProps.name }}
</h3>
<a-row class="card-item-content-box"> <a-row class="card-item-content-box">
<a-col :span="12"> <a-col :span="12">
<div class="card-item-content-text"> <div class="card-item-content-text">
@ -88,78 +89,49 @@
</div> </div>
</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="'link/Type:' + 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>
<template #action="slotProps"> <template #action="slotProps">
<a-space :size="16"> <a-space>
<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" style="padding: 0px"
><AIcon :type="i.icon" @click="i.onClick"
/></a-button>
</a-popconfirm>
<a-button
style="padding: 0"
type="link" type="link"
v-else :hasPermission="'link/Type:' + i.key"
@click="i.onClick && i.onClick(slotProps)"
> >
<a-button <template #icon
:disabled="i.disabled"
style="padding: 0"
type="link"
><AIcon :type="i.icon" ><AIcon :type="i.icon"
/></a-button> /></template>
</a-button> </PermissionButton>
</a-tooltip> </template>
</a-space> </a-space>
</template> </template>
<template #state="slotProps"> <template #state="slotProps">
@ -186,13 +158,15 @@
</page-container> </page-container>
</template> </template>
<script lang="ts" setup name="TypePage"> <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 { getImage } from '@/utils/comm';
import { supports, query, remove, start, shutdown } from '@/api/link/type'; import { supports, query, remove, start, shutdown } from '@/api/link/type';
import { message } from 'ant-design-vue'; 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 tableRef = ref<Record<string, any>>({});
const router = useRouter();
const params = ref<Record<string, any>>({}); const params = ref<Record<string, any>>({});
const options = ref([]); const options = ref([]);
@ -282,9 +256,10 @@ const getActions = (
): ActionsType[] => { ): ActionsType[] => {
if (!data) return []; if (!data) return [];
const state = data.state.value; const state = data.state.value;
const stateText = state === 'enabled' ? '禁用' : '启用';
const actions = [ const actions = [
{ {
key: 'eye', key: 'view',
text: '查看', text: '查看',
tooltip: { tooltip: {
title: '查看', title: '查看',
@ -295,7 +270,7 @@ const getActions = (
}, },
}, },
{ {
key: 'edit', key: 'update',
text: '编辑', text: '编辑',
tooltip: { tooltip: {
title: '编辑', title: '编辑',
@ -307,13 +282,13 @@ const getActions = (
}, },
{ {
key: 'action', key: 'action',
text: state === 'enabled' ? '禁用' : '启用', text: stateText,
tooltip: { tooltip: {
title: state === 'enabled' ? '禁用' : '启用', title: stateText,
}, },
icon: state === 'enabled' ? 'StopOutlined' : 'CheckCircleOutlined', icon: state === 'enabled' ? 'StopOutlined' : 'CheckCircleOutlined',
popConfirm: { popConfirm: {
title: `确认${state === 'enabled' ? '禁用' : '启用'}?`, title: `确认${stateText}?`,
onConfirm: async () => { onConfirm: async () => {
let res = let res =
state === 'enabled' state === 'enabled'
@ -353,36 +328,19 @@ const getActions = (
]; ];
return type === 'table' return type === 'table'
? actions ? actions
: actions.filter((item) => item.key !== 'eye'); : actions.filter((item) => item.key !== 'view');
}; };
const handlAdd = () => { const handlAdd = () => {
router.push({ menuStory.jumpPage(`link/Type/Detail`, { id: ':id' }, { view: false });
path: `/iot/link/type/detail/:id`,
query: { view: false },
});
}; };
const handlEye = (id: string) => { const handlEye = (id: string) => {
router.push({ menuStory.jumpPage(`link/Type/Detail`, { id }, { view: true });
path: `/iot/link/type/detail/${id}`,
query: { view: true },
});
}; };
const handlEdit = (id: string) => { const handlEdit = (id: string) => {
router.push({ menuStory.jumpPage(`link/Type/Detail`, { id }, { view: false });
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();
}
}; };
const getDetails = (slotProps: Partial<Record<string, any>>) => { const getDetails = (slotProps: Partial<Record<string, any>>) => {

7
src/views/media/Stream/Detail/index.vue
View File

@ -88,7 +88,7 @@
<template #title> <template #title>
<p>调用流媒体接口时请求的服务地址</p> <p>调用流媒体接口时请求的服务地址</p>
</template> </template>
<question-circle-outlined /> <AIcon type="QuestionCircleOutlined" />
</a-tooltip> </a-tooltip>
</div> </div>
@ -144,7 +144,7 @@
视频设备将流推送到该IP地址下，部分设备仅支持IP地址，建议全是用IP地址 视频设备将流推送到该IP地址下，部分设备仅支持IP地址，建议全是用IP地址
</p> </p>
</template> </template>
<question-circle-outlined /> <AIcon type="QuestionCircleOutlined" />
</a-tooltip> </a-tooltip>
</div> </div>
@ -266,10 +266,9 @@
</template> </template>
<script lang="ts" setup name="StreamDetail"> <script lang="ts" setup name="StreamDetail">
import { message, Form } from 'ant-design-vue'; import { message } from 'ant-design-vue';
import { queryProviders, queryDetail, save, update } from '@/api/media/stream'; import { queryProviders, queryDetail, save, update } from '@/api/media/stream';
import type { FormInstance } from 'ant-design-vue'; import type { FormInstance } from 'ant-design-vue';
import { QuestionCircleOutlined } from '@ant-design/icons-vue';
import { FormDataType } from '../type'; import { FormDataType } from '../type';

85
src/views/media/Stream/index.vue
View File

@ -16,9 +16,14 @@
:params="params" :params="params"
> >
<template #headerTitle> <template #headerTitle>
<a-button type="primary" @click="handlAdd" <PermissionButton
><plus-outlined />新增</a-button type="primary"
@click="handlAdd"
hasPermission="media/Stream:add"
> >
<template #icon><AIcon type="PlusOutlined" /></template>
新增
</PermissionButton>
</template> </template>
<template #card="slotProps"> <template #card="slotProps">
<CardBox <CardBox
@ -106,42 +111,24 @@
</div> </div>
</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/Stream:' + 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>
@ -154,10 +141,10 @@ import type { ActionsType } from '@/components/Table/index.vue';
import { getImage } from '@/utils/comm'; import { getImage } from '@/utils/comm';
import { query, remove, disable, enalbe } from '@/api/media/stream'; import { query, remove, disable, enalbe } from '@/api/media/stream';
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
import Detail from './Detail/index.vue'; import { useMenuStore } from 'store/menu';
const menuStory = useMenuStore();
const tableRef = ref<Record<string, any>>({}); const tableRef = ref<Record<string, any>>({});
const router = useRouter();
const params = ref<Record<string, any>>({}); const params = ref<Record<string, any>>({});
const columns = [ const columns = [
@ -194,9 +181,10 @@ const columns = [
const getActions = (data: Partial<Record<string, any>>): ActionsType[] => { const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
if (!data) return []; if (!data) return [];
const state = data.state.value; const state = data.state.value;
const stateText = state === 'enabled' ? '禁用' : '启用';
const actions = [ const actions = [
{ {
key: 'edit', key: 'update',
text: '编辑', text: '编辑',
tooltip: { tooltip: {
title: '编辑', title: '编辑',
@ -208,13 +196,13 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
}, },
{ {
key: 'action', key: 'action',
text: state === 'enabled' ? '禁用' : '启用', text: stateText,
tooltip: { tooltip: {
title: state === 'enabled' ? '禁用' : '启用', title: stateText,
}, },
icon: state === 'enabled' ? 'StopOutlined' : 'CheckCircleOutlined', icon: state === 'enabled' ? 'StopOutlined' : 'CheckCircleOutlined',
popConfirm: { popConfirm: {
title: `确认${state === 'enabled' ? '禁用' : '启用'}?`, title: `确认${stateText}?`,
onConfirm: async () => { onConfirm: async () => {
let res = let res =
state === 'enabled' state === 'enabled'
@ -255,22 +243,13 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
}; };
const handlAdd = () => { const handlAdd = () => {
router.push({ menuStory.jumpPage(`media/Stream/Detail`, { id: ':id' }, { view: false });
path: `/iot/link/Stream/detail/:id`,
query: { view: false },
});
}; };
const handlEdit = (id: string) => { const handlEdit = (id: string) => {
router.push({ menuStory.jumpPage(`media/Stream/Detail`, { id }, { view: false });
path: `/iot/link/Stream/detail/${id}`,
query: { view: false },
});
}; };
const handlEye = (id: string) => { const handlEye = (id: string) => {
router.push({ menuStory.jumpPage(`media/Stream/Detail`, { id }, { view: true });
path: `/iot/link/Stream/detail/${id}`,
query: { view: true },
});
}; };
/** /**