5 changed files with 352 additions and 0 deletions
@ -0,0 +1,29 @@
|
||||
import type { GetTopicListPrams, Topic } from './types' |
||||
import { defHttp } from '@/utils/http/axios' |
||||
|
||||
export function getTopicList(params: GetTopicListPrams) { |
||||
return defHttp.get<PageResult<Topic>>({ |
||||
url: '/product/topic/page', |
||||
params, |
||||
}) |
||||
} |
||||
|
||||
export function createTopic(data: Partial<Topic>) { |
||||
return defHttp.post({ |
||||
url: '/product/topic/save', |
||||
data, |
||||
}) |
||||
} |
||||
|
||||
export function updateTopic(data: Partial<Topic>) { |
||||
return defHttp.post({ |
||||
url: '/product/topic/update', |
||||
data, |
||||
}) |
||||
} |
||||
|
||||
export function deleteTopic(id: string) { |
||||
return defHttp.post({ |
||||
url: `/product/topic/remove?id=${id}`, |
||||
}) |
||||
} |
@ -0,0 +1,93 @@
|
||||
<script lang="ts" setup> |
||||
import { h, ref } from 'vue' |
||||
import { useRoute } from 'vue-router' |
||||
import { useMessage } from '@/hooks/web/useMessage' |
||||
import { BasicForm, useForm } from '@/components/Form' |
||||
import { BasicModal, useModalInner } from '@/components/Modal' |
||||
import { createTopic, updateTopic } from '@/api/product/topic' |
||||
import type { Topic } from '@/api/product/types' |
||||
import { useSystemEnumStore } from '@/store/modules/systemEnum' |
||||
|
||||
defineOptions({ name: 'CustomTopicFormModal' }) |
||||
|
||||
const emit = defineEmits(['success', 'register']) |
||||
|
||||
const isUpdate = ref(false) |
||||
const { getSystemEnums } = useSystemEnumStore() |
||||
const [registerForm, { setFieldsValue, validate }] = useForm({ |
||||
labelWidth: 100, |
||||
baseColProps: { span: 24 }, |
||||
schemas: [ |
||||
{ |
||||
field: 'id', |
||||
show: false, |
||||
component: 'Input', |
||||
}, |
||||
{ |
||||
field: 'topic', |
||||
label: 'Topic', |
||||
required: true, |
||||
// eslint-disable-next-line no-template-curly-in-string |
||||
helpMessage: 'Topic必须包含/${deviceSn}/占位符', |
||||
component: 'Input', |
||||
rules: [ |
||||
// eslint-disable-next-line no-template-curly-in-string |
||||
{ pattern: /\/\$\{.+?\}\//, message: h('span', 'Topic必须包含/${deviceSn}/占位符') }, |
||||
], |
||||
dynamicDisabled: () => isUpdate.value, |
||||
}, |
||||
{ |
||||
field: 'topicType', |
||||
label: '操作权限', |
||||
required: true, |
||||
component: 'Select', |
||||
componentProps: { |
||||
options: getSystemEnums('eProductTopicType'), |
||||
}, |
||||
dynamicDisabled: () => isUpdate.value, |
||||
}, |
||||
{ |
||||
field: 'topicDesc', |
||||
label: '描述', |
||||
component: 'InputTextArea', |
||||
}, |
||||
], |
||||
showActionButtonGroup: false, |
||||
actionColOptions: { span: 23 }, |
||||
}) |
||||
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: Topic) => { |
||||
isUpdate.value = true |
||||
setFieldsValue({ ...data }) |
||||
}) |
||||
|
||||
const route = useRoute() |
||||
async function handleSubmit() { |
||||
try { |
||||
const values = await validate<Topic>() |
||||
setModalProps({ confirmLoading: true }) |
||||
values.productId = route.params.id as string |
||||
await (isUpdate.value ? updateTopic(values) : createTopic(values)) |
||||
closeModal() |
||||
emit('success') |
||||
useMessage().createMessage.success('保存成功') |
||||
} |
||||
finally { |
||||
setModalProps({ confirmLoading: false }) |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<BasicModal |
||||
v-bind="$attrs" |
||||
width="30%" |
||||
:min-height="100" |
||||
:title="isUpdate ? '编辑' : '新增'" |
||||
:after-close="() => isUpdate = false" |
||||
@register="registerModal" |
||||
@ok="handleSubmit" |
||||
> |
||||
<BasicForm @register="registerForm" /> |
||||
</BasicModal> |
||||
</template> |
@ -0,0 +1,137 @@
|
||||
<script setup lang="ts"> |
||||
import { Alert, Radio } from 'ant-design-vue' |
||||
import { computed, ref, watch } from 'vue' |
||||
import { useRoute } from 'vue-router' |
||||
import { PlusOutlined } from '@ant-design/icons-vue' |
||||
import CustomTopicFormModal from './CustomTopicFormModal.vue' |
||||
import type { Topic } from '@/api/product/types' |
||||
import { TopicType } from '@/api/product/types' |
||||
import { BasicTable, TableAction, useTable } from '@/components/Table' |
||||
import { deleteTopic, getTopicList } from '@/api/product/topic' |
||||
import { useSystemEnumStore } from '@/store/modules/systemEnum' |
||||
import { useModal } from '@/components/Modal' |
||||
import { useMessage } from '@/hooks/web/useMessage' |
||||
|
||||
const route = useRoute() |
||||
const { getSystemEnumLabel } = useSystemEnumStore() |
||||
|
||||
const [registerModal, { openModal }] = useModal<Topic>() |
||||
|
||||
const topicType = ref<TopicType>(TopicType.System) |
||||
const isCustomTopic = computed(() => topicType.value === TopicType.Custom) |
||||
const alertMessage = computed( |
||||
() => isCustomTopic.value |
||||
? 'Topic用以将设备数据分类上报,进而分别进行处理。除了系统预置的Topic,您也可以自定义Topic,然后在设备侧开发时选择数据上报的Topic。' |
||||
: '以下是系统Topic,设备侧通过系统预设的topic接收数据时,无需提前订阅。', |
||||
) |
||||
|
||||
const [register, { reload, setTableData }] = useTable({ |
||||
api(params) { |
||||
return getTopicList({ |
||||
...params, |
||||
productId: route.params.id, |
||||
topicCategory: topicType.value, |
||||
}) |
||||
}, |
||||
columns: [ |
||||
{ |
||||
title: 'Topic', |
||||
dataIndex: 'topic', |
||||
}, |
||||
{ |
||||
title: '操作权限', |
||||
dataIndex: 'topicType', |
||||
customRender: ({ value }) => getSystemEnumLabel('eProductTopicType', value), |
||||
}, |
||||
{ |
||||
title: '开启解析脚本', |
||||
dataIndex: 'enableScript', |
||||
ifShow: () => isCustomTopic.value, |
||||
}, |
||||
{ |
||||
title: '描述', |
||||
dataIndex: 'topicDesc', |
||||
}, |
||||
], |
||||
bordered: true, |
||||
inset: true, |
||||
canResize: false, |
||||
actionColumn: { |
||||
width: 150, |
||||
title: '操作', |
||||
dataIndex: 'action', |
||||
fixed: 'right', |
||||
ifShow: () => isCustomTopic.value, |
||||
}, |
||||
}) |
||||
watch(topicType, () => { |
||||
setTableData([]) |
||||
reload() |
||||
}) |
||||
|
||||
async function handleDelete(id: string) { |
||||
try { |
||||
await deleteTopic(id) |
||||
useMessage().createMessage.success('删除成功') |
||||
reload() |
||||
} |
||||
catch {} |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<div> |
||||
<div flex="! items-center wrap gap-12px" mb="12px"> |
||||
<Radio.Group v-model:value="topicType" button-style="solid"> |
||||
<Radio.Button :value="TopicType.System"> |
||||
系统 Topic |
||||
</Radio.Button> |
||||
<Radio.Button :value="TopicType.Custom"> |
||||
自定义 Topic |
||||
</Radio.Button> |
||||
</Radio.Group> |
||||
|
||||
<Alert :message="alertMessage" type="info" show-icon class="py-4px" /> |
||||
</div> |
||||
|
||||
<div class="mb-12px flex items-center justify-between"> |
||||
<a-button v-if="isCustomTopic" type="primary" @click="openModal"> |
||||
<PlusOutlined /> |
||||
新建 |
||||
</a-button> |
||||
<div v-else /> |
||||
|
||||
<div class="mr-10px flex cursor-pointer items-center" @click="() => reload()"> |
||||
<span class="i-ant-design:sync-outlined mr-5px text-20px" /> |
||||
刷新 |
||||
</div> |
||||
</div> |
||||
<BasicTable :api="async () => ([] as Topic[])" @register="register"> |
||||
<template #bodyCell="{ column, record }"> |
||||
<template v-if="column.key === 'action'"> |
||||
<TableAction |
||||
:actions="[ |
||||
{ |
||||
icon: 'i-ant-design:edit-outlined', |
||||
label: '编辑', |
||||
onClick: () => openModal(true, record), |
||||
}, |
||||
{ |
||||
icon: 'i-ant-design:delete-outlined', |
||||
danger: true, |
||||
label: '删除', |
||||
popConfirm: { |
||||
title: '是否要删除数据?', |
||||
placement: 'left', |
||||
confirm: () => handleDelete(record.id), |
||||
}, |
||||
}, |
||||
]" |
||||
/> |
||||
</template> |
||||
</template> |
||||
</BasicTable> |
||||
|
||||
<CustomTopicFormModal @register="registerModal" @success="reload" /> |
||||
</div> |
||||
</template> |
@ -0,0 +1 @@
|
||||
export { default as TopicManage } from './TopicManage.vue' |
@ -0,0 +1,92 @@
|
||||
<script setup lang="ts"> |
||||
import { Card, Tabs } from 'ant-design-vue' |
||||
import { useAsyncState } from '@vueuse/core' |
||||
import { useRoute } from 'vue-router' |
||||
import { TopicManage } from './components' |
||||
import { Description } from '@/components/Description' |
||||
import { getProductDetail } from '@/api/product' |
||||
import type { DescItem } from '@/components/Description' |
||||
import { useSystemEnumStore } from '@/store/modules/systemEnum' |
||||
|
||||
const route = useRoute() |
||||
const { getSystemEnumLabel } = useSystemEnumStore() |
||||
|
||||
const { state } = useAsyncState(() => getProductDetail(route.params.id as string), undefined) |
||||
const schema: DescItem[] = [ |
||||
{ |
||||
label: '产品名称', |
||||
field: 'productName', |
||||
}, |
||||
{ |
||||
label: '产品标识(ProductKey)', |
||||
field: 'productKey', |
||||
}, |
||||
{ |
||||
label: 'ProductSecret', |
||||
field: 'productSecret', |
||||
}, |
||||
{ |
||||
label: '联网方式', |
||||
field: 'networkType', |
||||
render: value => getSystemEnumLabel('eNetworkType', value), |
||||
}, |
||||
{ |
||||
label: '通信协议', |
||||
field: 'networkProtocol', |
||||
render: value => getSystemEnumLabel('eNetworkProtocol', value), |
||||
}, |
||||
{ |
||||
label: '节点类型', |
||||
field: 'nodeType', |
||||
render: value => getSystemEnumLabel('eProductNodeType', value), |
||||
}, |
||||
{ |
||||
label: '安全类型', |
||||
field: 'securityType', |
||||
render: value => getSystemEnumLabel('eProductSecurityType', value), |
||||
}, |
||||
{ |
||||
label: '鉴权方式', |
||||
field: 'authType', |
||||
render: value => getSystemEnumLabel('eAuthType', value), |
||||
}, |
||||
{ |
||||
label: '数据格式', |
||||
field: 'dataType', |
||||
render: value => getSystemEnumLabel('eDataType', value), |
||||
}, |
||||
{ |
||||
label: '创建时间', |
||||
field: 'createTime', |
||||
}, |
||||
{ |
||||
label: '产品描述', |
||||
field: 'productDesc', |
||||
}, |
||||
] |
||||
</script> |
||||
|
||||
<template> |
||||
<div p="12px"> |
||||
<Card title="基础信息"> |
||||
<Description :data="state" :schema="schema" :column="2" /> |
||||
</Card> |
||||
|
||||
<Card mt="12px"> |
||||
<Tabs> |
||||
<Tabs.TabPane key="1" tab="Topic 管理"> |
||||
<TopicManage /> |
||||
</Tabs.TabPane> |
||||
<Tabs.TabPane key="2" tab="物模型"> |
||||
物模型 |
||||
</Tabs.TabPane> |
||||
<Tabs.TabPane key="3" tab="消息解析"> |
||||
消息解析 |
||||
</Tabs.TabPane> |
||||
<Tabs.TabPane key="3" tab="服务端订阅"> |
||||
服务端订阅 |
||||
</Tabs.TabPane> |
||||
</Tabs> |
||||
</Card> |
||||
</div> |
||||
</template> |
Loading…
Reference in new issue