You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

138 lines
4.0 KiB

<script setup lang="ts">
import { Alert, Segmented } from 'ant-design-vue'
import { computed, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { PlusOutlined, SyncOutlined } 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 justify-between gap-12px" mb="12px">
<div flex="~ wrap gap-12px">
<Segmented
v-model:value="topicType"
:options="[{ label: '系统 Topic', value: TopicType.System }, { label: '自定义 Topic', value: TopicType.Custom }]"
/>
<a-button v-if="isCustomTopic" type="primary" @click="openModal">
<PlusOutlined />
新增 Topic
</a-button>
<Alert :message="alertMessage" type="info" show-icon class="py-4px" />
</div>
<div class="mr-10px flex cursor-pointer items-center">
<a-button size="small" @click="reload">
<template #icon>
<SyncOutlined />
</template>
刷新
</a-button>
</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>