mky-vent-base/src/views/vent/deviceManager/configurationTable/index.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="device-manager-box">
    <BasicTable @register="register">
      <template #filterCell="{ column, record }">
        <template v-if="column.key === 'moduleData.main'">
          <div v-for="(val, key) in record.moduleData.main" :key="key">
            <span>点位：{{ key }}；</span>
            <span>名称：{{ val }}；</span>
          </div>
        </template>
        <template v-if="column.key === 'moduleData.header'">
          <div v-for="(val, key) in record.moduleData.header" :key="key">
            <span>点位：{{ key }}；</span>
            <span>名称：{{ val }}；</span>
          </div>
        </template>
        <template v-if="column.key === 'moduleData.chart'">
          <div v-for="(val, key) in record.moduleData.chart" :key="key">
            <span>点位：{{ key }}；</span>
            <span>名称：{{ val }}；</span>
          </div>
        </template>
        <template v-if="column.key === 'showStyle.size'">
          {{ get(ModuleSizeMap, record.showStyle?.size) }}
        </template>
        <template v-if="column.key === 'showStyle.version'">
          {{ get(ModuleVersionMap, record.showStyle?.version) }}
        </template>
        <template v-if="column.key === 'showStyle.position'">
          {{ get(ModulePositionMap, record.showStyle?.position) }}
        </template>
        <template v-if="column.key === 'showStyle.charttype'">
          {{ get(ModuleChartTypeMap, record.showStyle?.charttype) }}
        </template>
      </template>
    </BasicTable>
  </div>
</template>

<script lang="ts" name="system-user" setup>
  // 相关文档请参阅 vent/home/configurable/README.md
  // import NormalTable from '../comment/NormalTable.vue';
  import { list, deleteById, saveOrUpdate } from './configuration.api';
  import { ModuleVersionMap, ModuleChartTypeMap, ModulePositionMap, ModuleSizeMap } from './options';
  import { searchFormSchema, columns, formSchema } from './configuration.data';
  import { get } from '../../home/billboard/utils';
  import BasicTable from '/@/components/Table/src/BasicTable.vue';
  import { useListPage } from '/@/hooks/system/useListPage';

  const { tableContext } = useListPage({
    tableProps: {
      api: list,
      columns: columns, //表格列
      useSearchForm: true,
      formConfig: {
        schemas: searchFormSchema,
      },
    },
  });

  //BasicTable绑定注册，methods包含的方法参考下方Methods的api
  const [register, methods] = tableContext;
</script>

<style scoped></style>