|
|
@@ -0,0 +1,205 @@
|
|
|
+<script setup lang="ts">
|
|
|
+import { computed, onMounted, ref } from 'vue';
|
|
|
+import { message, Modal } from 'ant-design-vue';
|
|
|
+
|
|
|
+import SvgIcon from '@/components/SvgIcon.vue';
|
|
|
+import { useRequest } from '@/hooks/request';
|
|
|
+import { t } from '@/i18n';
|
|
|
+import { deleteProtocolBaseInfo, getProtocolList } from '@/api';
|
|
|
+
|
|
|
+import type { ColumnType } from 'ant-design-vue/es/table';
|
|
|
+import type { PageParams, ProtocolBaseInfo } from '@/types';
|
|
|
+
|
|
|
+const protocolList = ref<ProtocolBaseInfo[]>([]);
|
|
|
+const protocolTotal = ref(0);
|
|
|
+const searchContent = ref('');
|
|
|
+const pageParams = ref<PageParams>({
|
|
|
+ pageIndex: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ pageSorts: [
|
|
|
+ {
|
|
|
+ column: 'id',
|
|
|
+ asc: true,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+});
|
|
|
+
|
|
|
+const columns = computed<ColumnType<ProtocolBaseInfo>[]>(() => {
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ title: t('gatewayProtocol.protocolName'),
|
|
|
+ dataIndex: 'protocolName',
|
|
|
+ key: 'protocolName',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: t('setupProtocol.protocolType'),
|
|
|
+ dataIndex: 'protocolType',
|
|
|
+ key: 'protocolType',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: t('setupProtocol.deviceType'),
|
|
|
+ dataIndex: 'deviceType',
|
|
|
+ key: 'deviceType',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: t('common.updateTime'),
|
|
|
+ dataIndex: 'updateTime',
|
|
|
+ key: 'updateTime',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: t('common.operation'),
|
|
|
+ key: 'action',
|
|
|
+ },
|
|
|
+ ];
|
|
|
+});
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ getProtocolData();
|
|
|
+});
|
|
|
+
|
|
|
+const { isLoading, handleRequest } = useRequest();
|
|
|
+
|
|
|
+const getProtocolData = () => {
|
|
|
+ handleRequest(async () => {
|
|
|
+ const { records, total } = await getProtocolList({
|
|
|
+ ...pageParams.value,
|
|
|
+ searchContent: searchContent.value,
|
|
|
+ });
|
|
|
+
|
|
|
+ protocolList.value = records;
|
|
|
+ protocolTotal.value = total;
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const handleSearch = () => {
|
|
|
+ pageParams.value.pageIndex = 1;
|
|
|
+ getProtocolData();
|
|
|
+};
|
|
|
+
|
|
|
+const handleAdd = () => {
|
|
|
+ console.log('Add new item');
|
|
|
+};
|
|
|
+
|
|
|
+const handleImportTemplate = () => {
|
|
|
+ console.log('Import template');
|
|
|
+};
|
|
|
+
|
|
|
+const handleEdit = (record: ProtocolBaseInfo) => {
|
|
|
+ console.log('Edit item:', record);
|
|
|
+};
|
|
|
+
|
|
|
+const handleDelete = (record: ProtocolBaseInfo) => {
|
|
|
+ Modal.confirm({
|
|
|
+ title: t('gatewayProtocol.confirmDeleteProtocol', { name: record.protocolName }),
|
|
|
+ async onOk() {
|
|
|
+ try {
|
|
|
+ await deleteProtocolBaseInfo(record.id);
|
|
|
+ message.success(t('gatewayProtocol.deleteProtocolSuccessful'));
|
|
|
+ pageParams.value.pageIndex = 1;
|
|
|
+ getProtocolData();
|
|
|
+ } catch (err) {
|
|
|
+ message.error((err as Error).message);
|
|
|
+ console.error(err);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const handlePageChange = (page: number, pageSize: number) => {
|
|
|
+ pageParams.value.pageIndex = page;
|
|
|
+ pageParams.value.pageSize = pageSize;
|
|
|
+ getProtocolData();
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="protocol-list-container">
|
|
|
+ <div class="protocol-search">
|
|
|
+ <div>
|
|
|
+ <span class="protocol-search-label">{{ $t('common.search') }}:</span>
|
|
|
+ <AInput
|
|
|
+ v-model:value="searchContent"
|
|
|
+ class="protocol-search-input"
|
|
|
+ :placeholder="$t('gatewayProtocol.searchTip')"
|
|
|
+ allow-clear
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <AButton type="primary" @click="handleSearch">{{ $t('common.query') }}</AButton>
|
|
|
+ </div>
|
|
|
+ <div class="protocol-add-container">
|
|
|
+ <AButton class="icon-button add-button" type="primary" @click="handleAdd">
|
|
|
+ <SvgIcon name="plus" />
|
|
|
+ {{ $t('common.addNew') }}
|
|
|
+ </AButton>
|
|
|
+ <AButton @click="handleImportTemplate">{{ $t('common.templateImport') }}</AButton>
|
|
|
+ </div>
|
|
|
+ <ATable
|
|
|
+ class="protocol-table"
|
|
|
+ :data-source="protocolList"
|
|
|
+ :columns="columns"
|
|
|
+ row-key="id"
|
|
|
+ :loading="isLoading"
|
|
|
+ :pagination="{
|
|
|
+ current: pageParams.pageIndex,
|
|
|
+ pageSize: pageParams.pageSize,
|
|
|
+ total: protocolTotal,
|
|
|
+ showSizeChanger: false,
|
|
|
+ hideOnSinglePage: false,
|
|
|
+ onChange: handlePageChange,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <template #bodyCell="{ column, record }">
|
|
|
+ <span v-if="column.key === 'action'">
|
|
|
+ <a @click="handleEdit(record as ProtocolBaseInfo)">{{ $t('common.revise') }}</a>
|
|
|
+ <ADivider type="vertical" />
|
|
|
+ <a @click="handleDelete(record as ProtocolBaseInfo)">{{ $t('common.delete') }}</a>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </ATable>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.protocol-list-container {
|
|
|
+ height: 100%;
|
|
|
+ padding: 32px;
|
|
|
+ background: var(--antd-color-bg-base);
|
|
|
+ border-radius: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+.protocol-search {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+.protocol-search-label {
|
|
|
+ margin-right: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: var(--antd-color-text);
|
|
|
+}
|
|
|
+
|
|
|
+.protocol-search-input {
|
|
|
+ width: 272px;
|
|
|
+}
|
|
|
+
|
|
|
+.protocol-add-container {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.add-button {
|
|
|
+ margin-right: 8px;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.protocol-table {
|
|
|
+ margin-top: 72px;
|
|
|
+
|
|
|
+ a {
|
|
|
+ color: var(--antd-color-primary);
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
