JiShe.IOT.UI/apps/web-antd/src/views/thingmodelinfo/deviceThingModelManagement/DeviceThingModelPropertyModal.vue

<script setup lang="ts">
import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { postDeviceThingModelManagementPropertyPageAsync } from '#/api-client';
import { $t } from '#/locales';

defineOptions({
  name: 'DeviceThingModelPropertyModal',
});

const deviceThingModelId = ref<string>('');
const deviceModelName = ref<string>('');

const [Grid, gridApi] = useVbenVxeGrid({
  formOptions: {
    schema: [],
    showDefaultActions: false,
  },
  gridOptions: {
    columns: [
      {
        field: 'standardFieldDisplayName',
        title: '标准属性名称',
        minWidth: 160,
        showOverflow: 'tooltip',
      },
      {
        field: 'standardFieldName',
        title: '标准属性标识符',
        minWidth: 160,
        showOverflow: 'tooltip',
      },
      {
        field: 'standardFieldValueType',
        title: '标准属性值类型',
        minWidth: 160,
        showOverflow: 'tooltip',
      },
      {
        field: 'ioTPlatformRawFieldName',
        title: '平台属性标识符',
        minWidth: 160,
        showOverflow: 'tooltip',
      },
      {
        field: 'ioTPlatformRawFieldDataType',
        title: '平台属性值类型',
        minWidth: 160,
        showOverflow: 'tooltip',
      },
      {
        field: 'isValueNeedConvert',
        title: '值类型是否转换',
        minWidth: 120,
        showOverflow: 'tooltip',
      },
      {
        field: 'parsingSequence',
        title: '解析方式',
        minWidth: 140,
        showOverflow: 'tooltip',
      },
      {
        field: 'nativeSkipNumber',
        title: '正序跳过数量',
        minWidth: 140,
        showOverflow: 'tooltip',
      },
      {
        field: 'nativeTakeNumber',
        title: '正序获取数量',
        minWidth: 140,
        showOverflow: 'tooltip',
      },
      {
        field: 'reversalSkipNumber',
        title: '反转跳过数量',
        minWidth: 140,
        showOverflow: 'tooltip',
      },
      {
        field: 'reversalTakeNumber',
        title: '反转获取数量',
        minWidth: 140,
        showOverflow: 'tooltip',
      },
      {
        field: 'action',
        title: $t('common.action'),
        width: 200,
        fixed: 'right',
        slots: { default: 'action' },
      },
    ],
    height: 400,
    pagerConfig: {},
    proxyConfig: {
      ajax: {
        query: async ({ page }) => {
          if (!deviceThingModelId.value) {
            return { items: [], totalCount: 0 };
          }
          const { data } =
            await postDeviceThingModelManagementPropertyPageAsync({
              body: {
                pageIndex: page.currentPage,
                pageSize: page.pageSize,
                deviceThingModelId: deviceThingModelId.value,
              },
            });
          return data || { items: [], totalCount: 0 };
        },
      },
    },
  },
});

const [Modal, modalApi] = useVbenModal({
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      const data = modalApi.getData<Record<string, any>>();
      deviceThingModelId.value = data?.deviceThingModelId || '';
      deviceModelName.value = data?.deviceModelName || '';
      if (gridApi && gridApi.reload) {
        gridApi.reload();
      }
    }
  },
});
</script>

<template>
  <Modal :title="`属性管理 - ${deviceModelName || ''}`" class="w-[900px]">
    <Grid>
      <!-- 这里后续可以加 toolbar-actions：新增属性、快速复制平台端物模型 -->
    </Grid>
  </Modal>
</template>