|
|
|
<script setup lang="ts">
|
|
|
|
import { Alert, Segmented } from 'ant-design-vue'
|
|
|
|
import { computed, ref, watch } from 'vue'
|
|
|
|
import { useRoute } from 'vue-router'
|
|
|
|
import { PlusOutlined } from '@ant-design/icons-vue'
|
|
|
|
import TopicFormModal from './TopicFormModal.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">
|
|
|
|
<Segmented
|
|
|
|
v-model:value="topicType"
|
|
|
|
:options="[{ label: '系统 Topic', value: TopicType.System }, { label: '自定义 Topic', value: TopicType.Custom }]"
|
|
|
|
/>
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
<TopicFormModal @register="registerModal" @success="reload" />
|
|
|
|
</div>
|
|
|
|
</template>
|