feat: device profile add card mode

@@ -2,7 +2,9 @@ import { defHttp } from '/@/utils/http/axios';
 import {
 import {
   TDeviceConfigParams,
   TDeviceConfigParams,
   IDeviceConfigAddOrEditModel,
   IDeviceConfigAddOrEditModel,
+  ProfileRecord,
 } from '/@/api/device/model/deviceConfigModel';
 } from '/@/api/device/model/deviceConfigModel';
+import { PaginationResult } from '/#/axios';
 
 
 enum EDeviceConfigApi {
 enum EDeviceConfigApi {
   /**
   /**
@@ -52,7 +54,7 @@ export const alarmContactGetPage = () => {
  * 分页查询设备配置页面
  * 分页查询设备配置页面
  */
  */
 export const deviceConfigGetQuery = (params?: TDeviceConfigParams) => {
 export const deviceConfigGetQuery = (params?: TDeviceConfigParams) => {
-  return defHttp.get({
+  return defHttp.get<PaginationResult<ProfileRecord>>({
     url: EDeviceConfigApi.DEVICE_CONFIG_GET_PAGE,
     url: EDeviceConfigApi.DEVICE_CONFIG_GET_PAGE,
     params,
     params,
   });
   });

@@ -199,3 +199,45 @@ export interface AlarmLogItem {
   organizationId: string;
   organizationId: string;
   organizationName: string;
   organizationName: string;
 }
 }
+
+export interface Configuration {
+  type: string;
+}
+
+export interface TransportConfiguration {
+  type: string;
+}
+
+export interface ProvisionConfiguration {
+  type: string;
+  provisionDeviceSecret?: any;
+}
+
+export interface ProfileData {
+  configuration: Configuration;
+  transportConfiguration: TransportConfiguration;
+  provisionConfiguration: ProvisionConfiguration;
+  alarms?: any;
+}
+
+export interface ProfileRecord {
+  id: string;
+  creator: string;
+  createTime: string;
+  updater: string;
+  updateTime: string;
+  name: string;
+  tenantId: string;
+  transportType: string;
+  provisionType: string;
+  deviceType: string;
+  tbProfileId: string;
+  profileData: ProfileData;
+  defaultRuleChainId: string;
+  defaultQueueName: string;
+  image: string;
+  type: string;
+  default: boolean;
+
+  checked?: boolean;
+}

+<script lang="ts" setup>
+  import { Popover, Slider, Button } from 'ant-design-vue';
+  import { LayoutOutlined } from '@ant-design/icons-vue';
+  import { computed } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      min?: number;
+      max?: number;
+      value?: number;
+    }>(),
+    {
+      min: 4,
+      max: 12,
+      value: 4,
+    }
+  );
+
+  const emit = defineEmits(['change', 'update:value']);
+
+  const generateLayoutMarks = (min: number, max: number) => {
+    const marks = {};
+    Array.from({ length: max - min + 1 }).forEach((_, index) => {
+      const key = index + min;
+      marks[key] = key;
+    });
+    return marks;
+  };
+
+  const getMarks = computed(() => {
+    const { min, max } = props;
+    return generateLayoutMarks(min, max);
+  });
+
+  const handleChange = (value: number) => {
+    emit('update:value', value);
+    emit('change', value);
+  };
+</script>
+
+<template>
+  <Popover :trigger="['hover']">
+    <template #content>
+      <div class="w-60">
+        <div>每行显示数量</div>
+        <Slider
+          :value="props.value"
+          :max="props.max"
+          :min="props.min"
+          :marks="getMarks"
+          @change="handleChange"
+        />
+      </div>
+    </template>
+    <Button type="primary">
+      <LayoutOutlined />
+    </Button>
+  </Popover>
+</template>

+<script lang="ts" setup>
+  import { RadioButton, RadioGroup, Tooltip } from 'ant-design-vue';
+  import { AppstoreOutlined, UnorderedListOutlined } from '@ant-design/icons-vue';
+  import { Mode } from './const';
+  const props = defineProps<{
+    value: Mode;
+  }>();
+
+  const emit = defineEmits(['change']);
+
+  const handleChange = (event: Event) => {
+    const value = (event.target as HTMLInputElement).value;
+    emit('change', value);
+  };
+</script>
+
+<template>
+  <RadioGroup :value="props.value" button-style="solid" @change="handleChange">
+    <Tooltip title="卡片模式">
+      <RadioButton class="cursor-pointer" :value="Mode.CARD">
+        <AppstoreOutlined />
+      </RadioButton>
+    </Tooltip>
+    <Tooltip title="列表模式">
+      <RadioButton class="cursor-pointer" :value="Mode.TABLE">
+        <UnorderedListOutlined />
+      </RadioButton>
+    </Tooltip>
+  </RadioGroup>
+</template>

+export const enum Mode {
+  CARD = 'CARD',
+  TABLE = 'TABLE',
+}

+export { default as ModeSwitchButton } from './ModeSwitchButton.vue';
+export { default as CardLayoutButton } from './CardLayoutButton.vue';
+export { Mode } from './const';

+<script lang="ts" setup>
+  import { PageWrapper } from '/@/components/Page';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { List, Button, Tooltip, Card, PaginationProps, Image } from 'ant-design-vue';
+  import { ReloadOutlined, EyeOutlined, FormOutlined, MoreOutlined } from '@ant-design/icons-vue';
+  import { computed, onMounted, reactive, ref, unref } from 'vue';
+  import { CardLayoutButton, Mode, ModeSwitchButton } from '/@/components/Widget';
+  import { Authority } from '/@/components/Authority';
+  import {
+    deviceConfigDelete,
+    deviceConfigGetQuery,
+    setDeviceProfileIsDefaultApi,
+  } from '/@/api/device/deviceConfigApi';
+  import { ProfileRecord } from '/@/api/device/model/deviceConfigModel';
+  import { Dropdown } from '/@/components/Dropdown';
+  import { defaultObj, searchFormSchema, DeviceTypeName } from './device.profile.data';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useSyncConfirm } from '/@/hooks/component/useSyncConfirm';
+  import DeviceProfileModal from './DeviceProfileModal.vue';
+  import DeviceProfileDrawer from './DeviceProfileDrawer.vue';
+  import { useModal } from '/@/components/Modal';
+  import { useDrawer } from '/@/components/Drawer';
+
+  defineProps<{
+    mode: Mode;
+  }>();
+
+  const emit = defineEmits(['changeMode']);
+
+  enum DropMenuEvent {
+    SET_DEFAULT = 'setDefault',
+    DELETE = 'delete',
+  }
+  const IMAGE_FALLBACK =
+    'data:image/png;base64,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';
+
+  const { createMessage } = useMessage();
+  const { createSyncConfirm } = useSyncConfirm();
+
+  const [register, { getFieldsValue }] = useForm({
+    showAdvancedButton: true,
+    labelWidth: 100,
+    compact: true,
+    baseColProps: { span: 8 },
+    schemas: searchFormSchema,
+    submitFunc: async () => {
+      getDataSource();
+    },
+  });
+
+  const [registerModal, { openModal }] = useModal();
+  const [registerDrawer, { openDrawer }] = useDrawer();
+
+  const loading = ref(false);
+
+  const pagination = reactive<PaginationProps>({
+    size: 'small',
+    showTotal: (total: number) => `共 ${total} 条数据`,
+    current: 1,
+    onChange: (page: number) => {
+      pagination.current = page;
+      getDataSource();
+    },
+  });
+
+  const dataSource = ref<ProfileRecord[]>([]);
+
+  const colNumber = ref(4);
+
+  const getSelectAllFlag = computed(() => {
+    return unref(dataSource).every((item) => item.checked);
+  });
+
+  const getCheckedRecord = computed(() => {
+    return unref(dataSource)
+      .filter((item) => item.checked)
+      .map((item) => item.id);
+  });
+
+  const getDataSource = async () => {
+    try {
+      loading.value = true;
+      const params = getFieldsValue();
+      const { items, total } = await deviceConfigGetQuery({
+        page: pagination.current,
+        pageSize: unref(colNumber) * 2,
+        ...params,
+      });
+      pagination.total = total;
+      dataSource.value = items.map((item) => ({ ...item, checked: false }));
+    } catch (error) {
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const handleModeChange = (mode: Mode) => {
+    emit('changeMode', mode);
+  };
+
+  const handleCheckCard = (item: ProfileRecord) => {
+    item.checked = !item.checked;
+  };
+
+  const handleSelectAll = () => {
+    dataSource.value = unref(dataSource).map((item) => {
+      return {
+        ...item,
+        checked: !unref(getSelectAllFlag),
+      };
+    });
+  };
+
+  const handleCreate = () => {
+    openModal(true, {
+      isUpdate: false,
+    });
+  };
+
+  const handleShowDetail = (record: ProfileRecord) => {
+    openDrawer(true, { record });
+  };
+
+  const handleUpdate = (record: ProfileRecord) => {
+    openModal(true, {
+      record,
+      isUpdate: true,
+    });
+  };
+
+  const handleDelete = async (id: string[]) => {
+    try {
+      await createSyncConfirm({ iconType: 'warning', content: '是否确认删除操作?' });
+      await deviceConfigDelete(id);
+      createMessage.success('删除成功');
+      await getDataSource();
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  const handleSetDefault = async (record: ProfileRecord) => {
+    try {
+      const { tbProfileId } = record;
+      const data = await setDeviceProfileIsDefaultApi(tbProfileId, 'default', defaultObj);
+      if (!data) return createMessage.error('设置该产品为默认失败');
+      createMessage.success('设置该产品为默认成功');
+      await getDataSource();
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  onMounted(() => {
+    getDataSource();
+  });
+</script>
+
+<template>
+  <PageWrapper dense contentFullHeight contentClass="flex">
+    <section class="flex-auto p-4 w-full profile-list">
+      <div class="flex-auto w-full bg-light-50 dark:bg-dark-900 p-4">
+        <BasicForm @register="register" />
+      </div>
+      <List
+        ref="listEl"
+        :loading="loading"
+        class="flex-auto bg-light-50 dark:bg-dark-900 !p-2 !mt-4"
+        position="bottom"
+        :pagination="pagination"
+        :data-source="dataSource"
+        :grid="{ gutter: 4, column: colNumber }"
+      >
+        <template #header>
+          <div class="flex gap-3 justify-end">
+            <Button type="primary" @click="handleCreate">新增产品</Button>
+            <Button type="primary" @click="handleSelectAll">
+              {{ getSelectAllFlag ? '反选' : '全选' }}
+            </Button>
+            <Button
+              type="primary"
+              danger
+              :disabled="!getCheckedRecord.length"
+              @click="handleDelete(getCheckedRecord)"
+            >
+              批量删除
+            </Button>
+            <ModeSwitchButton :value="$props.mode" @change="handleModeChange" />
+            <CardLayoutButton v-model:value="colNumber" @change="getDataSource" />
+            <Tooltip title="刷新">
+              <Button type="primary" @click="getDataSource">
+                <ReloadOutlined :spin="loading" />
+              </Button>
+            </Tooltip>
+          </div>
+        </template>
+        <template #renderItem="{ item }">
+          <List.Item>
+            <Card
+              hoverable
+              @click="handleCheckCard(item)"
+              :class="item.checked ? '!border-blue-500 !border-2' : ''"
+            >
+              <template #cover>
+                <div class="h-full w-full !flex justify-center items-center text-center">
+                  <Image
+                    @click.stop
+                    :height="144"
+                    :src="item.image"
+                    placeholder
+                    :fallback="IMAGE_FALLBACK"
+                  />
+                </div>
+              </template>
+              <template class="ant-card-actions" #actions>
+                <Authority>
+                  <Tooltip title="详情">
+                    <EyeOutlined key="setting" @click.stop="handleShowDetail(item)" />
+                  </Tooltip>
+                </Authority>
+                <Authority>
+                  <Tooltip title="编辑">
+                    <FormOutlined key="edit" @click.stop="handleUpdate(item)" />
+                  </Tooltip>
+                </Authority>
+                <Dropdown
+                  :trigger="['hover']"
+                  :drop-menu-list="[
+                    {
+                      text: '默认',
+                      event: DropMenuEvent.SET_DEFAULT,
+                      icon: 'ant-design:unordered-list-outlined',
+                      onClick: handleSetDefault.bind(null, item),
+                    },
+                    {
+                      text: '删除',
+                      event: DropMenuEvent.DELETE,
+                      icon: 'ant-design:delete-outlined',
+                      onClick: handleDelete.bind(null, [item.id]),
+                    },
+                  ]"
+                >
+                  <MoreOutlined @click.stop class="transform rotate-90" />
+                </Dropdown>
+              </template>
+              <Card.Meta>
+                <template #title>
+                  <span class="truncate"> {{ item.name }} </span>
+                </template>
+                <template #description>
+                  <div class="truncate h-11">
+                    <div class="truncate">{{ DeviceTypeName[item.deviceType] }} </div>
+                    <div class="truncate">{{ item.transportType }} </div>
+                  </div>
+                </template>
+              </Card.Meta>
+            </Card>
+          </List.Item>
+        </template>
+      </List>
+    </section>
+    <DeviceProfileModal @register="registerModal" @success="getDataSource" />
+    <DeviceProfileDrawer @register="registerDrawer" />
+  </PageWrapper>
+</template>
+
+<style lang="less" scoped>
+  .profile-list:deep(.ant-image-img) {
+    width: 100% !important;
+    height: 100% !important;
+  }
+</style>

+<template>
+  <div>
+    <BasicTable
+      class="devide-profiles"
+      @register="registerTable"
+      :rowSelection="{ type: 'checkbox' }"
+      :clickToRowSelect="false"
+    >
+      <template #toolbar>
+        <Authority value="api:yt:deviceProfile:post">
+          <a-button type="primary" @click="handleCreate"> 新增产品 </a-button>
+        </Authority>
+        <Authority value="api:yt:deviceProfile:import">
+          <ImpExcel @success="loadDataSuccess" dateFormat="YYYY-MM-DD">
+            <a-button @click="handleImport"> 导入产品 </a-button>
+          </ImpExcel>
+        </Authority>
+        <Authority value="api:yt:deviceProfile:delete">
+          <Popconfirm
+            title="您确定要批量删除数据"
+            ok-text="确定"
+            cancel-text="取消"
+            @confirm="handleDeleteOrBatchDelete(null)"
+          >
+            <a-button type="primary" color="error" :disabled="hasBatchDelete"> 批量删除 </a-button>
+          </Popconfirm>
+        </Authority>
+        <ModeSwitchButton :value="$props.mode" @change="handleModeChange" />
+      </template>
+      <template #img="{ record }">
+        <TableImg
+          :size="30"
+          :showBadge="false"
+          :simpleShow="true"
+          :imgList="
+            typeof record.image !== 'undefined' && record.image !== '' && record.image != null
+              ? [record.image]
+              : null
+          "
+        />
+      </template>
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              label: '详情',
+              auth: 'api:yt:deviceProfile:get',
+              icon: 'ant-design:eye-outlined',
+              onClick: handleDetailView.bind(null, record),
+            },
+            {
+              label: '编辑',
+              auth: 'api:yt:deviceProfile:update',
+              icon: 'clarity:note-edit-line',
+              onClick: handleEdit.bind(null, record),
+              ifShow: () => {
+                return record.name !== 'default' ? true : false;
+              },
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: '默认',
+              icon: 'ant-design:profile-outlined',
+              onClick: handleSetDefault.bind(null, record),
+              ifShow: () => {
+                return record.default === false;
+              },
+            },
+            {
+              label: '导出',
+              auth: 'api:yt:deviceProfile:export',
+              icon: 'ant-design:login-outlined',
+              onClick: handleExport.bind(null, record),
+            },
+            {
+              label: '删除',
+              auth: 'api:yt:deviceProfile:delete',
+              icon: 'ant-design:delete-outlined',
+              color: 'error',
+              popConfirm: {
+                title: '是否确认删除',
+                confirm: handleDeleteOrBatchDelete.bind(null, record),
+              },
+              ifShow: () => {
+                return record.default === false && record.name !== 'default';
+              },
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+    <DeviceProfileModal @register="registerModal" @success="handleSuccess" />
+    <DeviceProfileDrawer @register="registerDrawer" />
+    <ExpExcelModal
+      ref="expExcelModalRef"
+      @register="registerExportModal"
+      @success="defaultHeader"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, nextTick, onUnmounted } from 'vue';
+  import { BasicTable, TableImg, useTable, TableAction, BasicColumn } from '/@/components/Table';
+  import { columns, searchFormSchema, defaultObj } from './device.profile.data';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import {
+    deviceConfigGetQuery,
+    deviceConfigDelete,
+    setDeviceProfileIsDefaultApi,
+  } from '/@/api/device/deviceConfigApi';
+  import { useModal } from '/@/components/Modal';
+  import { useDrawer } from '/@/components/Drawer';
+  import DeviceProfileModal from '/@/views/device/profiles/DeviceProfileModal.vue';
+  import { ImpExcel, ExcelData } from '/@/components/Excel';
+  import { jsonToSheetXlsx, ExpExcelModal, ExportModalResult } from '/@/components/Excel';
+  import { Authority } from '/@/components/Authority';
+  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
+  import { Popconfirm } from 'ant-design-vue';
+  import DeviceProfileDrawer from './DeviceProfileDrawer.vue';
+  import { Mode, ModeSwitchButton } from '/@/components/Widget';
+
+  defineProps<{
+    mode: Mode;
+  }>();
+
+  const emit = defineEmits(['changeMode']);
+
+  const exportData: any = ref([]);
+  const expExcelModalRef: any = ref(null);
+  const getPathUrl = ref('');
+  const getPathUrlName = ref('');
+  const disabled = ref(true);
+  const onCloseVal = ref(0);
+  const immediateStatus = ref(false);
+  const { createMessage } = useMessage();
+  const [registerModal, { openModal }] = useModal();
+  const [registerExportModal, { openModal: openModalExcel }] = useModal();
+  const [registerTable, { setProps, reload, setTableData, getForm }] = useTable({
+    title: '产品列表',
+    clickToRowSelect: false,
+    api: deviceConfigGetQuery,
+    immediate: immediateStatus.value,
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+    },
+    rowKey: 'id',
+    useSearchForm: true,
+    showTableSetting: true,
+    bordered: true,
+    showIndexColumn: false,
+    actionColumn: {
+      width: 200,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: 'right',
+    },
+  });
+  const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
+    deviceConfigDelete,
+    handleSuccess,
+    setProps
+  );
+  selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
+    // Demo:status为1的选择框禁用
+    if (record.default === true) {
+      return { disabled: true };
+    } else if (record.name == 'default') {
+      return { disabled: true };
+    } else {
+      return { disabled: false };
+    }
+  };
+  nextTick(() => {
+    setProps(selectionOptions);
+  });
+  /**
+   *@param url,name
+   **/
+  function getParam(url, name) {
+    try {
+      let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
+      let r = url.split('?')[1].match(reg);
+      if (r != null) {
+        return r[2];
+      }
+      return ''; //如果此处只写return;则返回的是undefined
+    } catch (e) {
+      return ''; //如果此处只写return;则返回的是undefined
+    }
+  }
+  getPathUrl.value = window.location.href;
+  const name = 'name';
+  const getName = getParam(getPathUrl.value, name);
+  getPathUrlName.value = decodeURIComponent(getName);
+
+  const setRowClassName = async () => {
+    if (getPathUrlName.value !== '') {
+      const { items } = await deviceConfigGetQuery({
+        page: 1,
+        pageSize: 10,
+        name: getPathUrlName.value,
+      });
+      nextTick(() => {
+        setTableData(items);
+        const { setFieldsValue, resetFields } = getForm();
+        setFieldsValue({
+          name: getPathUrlName.value,
+        });
+        if (onCloseVal.value == 1) {
+          resetFields();
+        }
+      });
+    } else {
+      setTimeout(() => {
+        reload();
+      }, 80);
+    }
+  };
+  setRowClassName();
+  onUnmounted(() => {
+    getPathUrlName.value = '';
+    onCloseVal.value = 1;
+  });
+  const tableListRef = ref<
+    {
+      title: string;
+      columns?: any[];
+      dataSource?: any[];
+    }[]
+  >([]);
+
+  function loadDataSuccess(excelDataList: ExcelData[]) {
+    tableListRef.value = [];
+    console.log(excelDataList);
+    for (const excelData of excelDataList) {
+      const {
+        header,
+        results,
+        meta: { sheetName },
+      } = excelData;
+      const columns: BasicColumn[] = [];
+      for (const title of header) {
+        columns.push({ title, dataIndex: title });
+      }
+      tableListRef.value.push({ title: sheetName, dataSource: results, columns });
+    }
+  }
+  //新增
+  function handleCreate() {
+    openModal(true, {
+      isUpdate: false,
+    });
+  }
+  //编辑
+  function handleEdit(record: Recordable) {
+    openModal(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+
+  const [registerDrawer, { openDrawer }] = useDrawer();
+  //详情
+  function handleDetailView(record: Recordable) {
+    openDrawer(true, { record });
+  }
+
+  function defaultHeader({ filename, bookType }: ExportModalResult) {
+    // 默认Object.keys(data[0])作为header
+    const data = exportData.value;
+    jsonToSheetXlsx({
+      data,
+      filename,
+      write2excelOpts: {
+        bookType,
+      },
+    });
+  }
+  //导出
+  const handleExport = (record: Recordable) => {
+    exportData.value = [];
+    exportData.value.push({
+      createTime: record.createTime,
+      description: record.description,
+      name: record.name,
+    });
+    nextTick(() => {
+      openModalExcel();
+      expExcelModalRef.value?.clearFieldFunc();
+    });
+  };
+  //导入
+  function handleImport() {
+    console.log('record');
+  }
+  function handleSuccess() {
+    reload();
+  }
+
+  const handleSetDefault = async (record: Recordable) => {
+    let id = record.tbProfileId;
+    const data = await setDeviceProfileIsDefaultApi(id, 'default', defaultObj);
+    if (!data) return createMessage.error('设置该产品为默认失败');
+    createMessage.success('设置该产品为默认成功');
+    reload();
+    disabled.value = true;
+  };
+
+  const handleModeChange = (value: Mode) => {
+    emit('changeMode', value);
+  };
+</script>
+
+<style lang="css">
+  .devide-profiles .rowcolor {
+    color: red;
+  }
+
+  .devide-profiles .rowcolor2 {
+    background: #a2c3e6;
+  }
+</style>

@@ -9,6 +9,17 @@ import { FormField, FunctionType } from './step/cpns/physical/cpns/config';
 import { h } from 'vue';
 import { h } from 'vue';
 import { Tag } from 'ant-design-vue';
 import { Tag } from 'ant-design-vue';
 
 
+export enum Mode {
+  CARD = 'card',
+  TABLE = 'table',
+}
+
+export enum DeviceTypeName {
+  DIRECT_CONNECTION = '直连设备',
+  GATEWAY = '网关设备',
+  SENSOR = '网关子设备',
+}
+
 export enum ModelOfMatterPermission {
 export enum ModelOfMatterPermission {
   CREATE = 'api:yt:things_model:post',
   CREATE = 'api:yt:things_model:post',
   UPDATE = 'api:yt:things_model:put',
   UPDATE = 'api:yt:things_model:put',

-<template>
-  <div>
-    <BasicTable
-      class="devide-profiles"
-      @register="registerTable"
-      :rowSelection="{ type: 'checkbox' }"
-      :clickToRowSelect="false"
-    >
-      <template #toolbar>
-        <Authority value="api:yt:deviceProfile:post">
-          <a-button type="primary" @click="handleCreate"> 新增产品 </a-button>
-        </Authority>
-        <Authority value="api:yt:deviceProfile:import">
-          <ImpExcel @success="loadDataSuccess" dateFormat="YYYY-MM-DD">
-            <a-button @click="handleImport"> 导入产品 </a-button>
-          </ImpExcel>
-        </Authority>
-        <Authority value="api:yt:deviceProfile:delete">
-          <Popconfirm
-            title="您确定要批量删除数据"
-            ok-text="确定"
-            cancel-text="取消"
-            @confirm="handleDeleteOrBatchDelete(null)"
-          >
-            <a-button type="primary" color="error" :disabled="hasBatchDelete"> 批量删除 </a-button>
-          </Popconfirm>
-        </Authority>
-      </template>
-      <template #img="{ record }">
-        <TableImg
-          :size="30"
-          :showBadge="false"
-          :simpleShow="true"
-          :imgList="
-            typeof record.image !== 'undefined' && record.image !== '' && record.image != null
-              ? [record.image]
-              : null
-          "
-        />
-      </template>
-      <template #action="{ record }">
-        <TableAction
-          :actions="[
-            {
-              label: '详情',
-              auth: 'api:yt:deviceProfile:get',
-              icon: 'ant-design:eye-outlined',
-              onClick: handleDetailView.bind(null, record),
-            },
-            {
-              label: '编辑',
-              auth: 'api:yt:deviceProfile:update',
-              icon: 'clarity:note-edit-line',
-              onClick: handleEdit.bind(null, record),
-              ifShow: () => {
-                return record.name !== 'default' ? true : false;
-              },
-            },
-          ]"
-          :drop-down-actions="[
-            {
-              label: '默认',
-              icon: 'ant-design:profile-outlined',
-              onClick: handleSetDefault.bind(null, record),
-              ifShow: () => {
-                return record.default === false;
-              },
-            },
-            {
-              label: '导出',
-              auth: 'api:yt:deviceProfile:export',
-              icon: 'ant-design:login-outlined',
-              onClick: handleExport.bind(null, record),
-            },
-            {
-              label: '删除',
-              auth: 'api:yt:deviceProfile:delete',
-              icon: 'ant-design:delete-outlined',
-              color: 'error',
-              popConfirm: {
-                title: '是否确认删除',
-                confirm: handleDeleteOrBatchDelete.bind(null, record),
-              },
-              ifShow: () => {
-                return record.default === false && record.name !== 'default';
-              },
-            },
-          ]"
-        />
-      </template>
-    </BasicTable>
-    <DeviceProfileModal @register="registerModal" @success="handleSuccess" />
-    <DeviceProfileDrawer @register="registerDrawer" />
-    <ExpExcelModal
-      ref="expExcelModalRef"
-      @register="registerExportModal"
-      @success="defaultHeader"
-    />
-  </div>
-</template>
 <script lang="ts" setup>
 <script lang="ts" setup>
-  import { ref, nextTick, onUnmounted } from 'vue';
-  import { BasicTable, TableImg, useTable, TableAction, BasicColumn } from '/@/components/Table';
-  import { columns, searchFormSchema, defaultObj } from './device.profile.data';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import {
-    deviceConfigGetQuery,
-    deviceConfigDelete,
-    setDeviceProfileIsDefaultApi,
-  } from '/@/api/device/deviceConfigApi';
-  import { useModal } from '/@/components/Modal';
-  import { useDrawer } from '/@/components/Drawer';
-  import DeviceProfileModal from '/@/views/device/profiles/DeviceProfileModal.vue';
-  import { ImpExcel, ExcelData } from '/@/components/Excel';
-  import { jsonToSheetXlsx, ExpExcelModal, ExportModalResult } from '/@/components/Excel';
-  import { Authority } from '/@/components/Authority';
-  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
-  import { Popconfirm } from 'ant-design-vue';
-  import DeviceProfileDrawer from './DeviceProfileDrawer.vue';
-
-  const exportData: any = ref([]);
-  const expExcelModalRef: any = ref(null);
-  const getPathUrl = ref('');
-  const getPathUrlName = ref('');
-  const disabled = ref(true);
-  const onCloseVal = ref(0);
-  const immediateStatus = ref(false);
-  const { createMessage } = useMessage();
-  const [registerModal, { openModal }] = useModal();
-  const [registerExportModal, { openModal: openModalExcel }] = useModal();
-  const [registerTable, { setProps, reload, setTableData, getForm }] = useTable({
-    title: '产品列表',
-    clickToRowSelect: false,
-    api: deviceConfigGetQuery,
-    immediate: immediateStatus.value,
-    columns,
-    formConfig: {
-      labelWidth: 120,
-      schemas: searchFormSchema,
-    },
-    rowKey: 'id',
-    useSearchForm: true,
-    showTableSetting: true,
-    bordered: true,
-    showIndexColumn: false,
-    actionColumn: {
-      width: 200,
-      title: '操作',
-      dataIndex: 'action',
-      slots: { customRender: 'action' },
-      fixed: 'right',
-    },
-  });
-  const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
-    deviceConfigDelete,
-    handleSuccess,
-    setProps
-  );
-  selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
-    // Demo:status为1的选择框禁用
-    if (record.default === true) {
-      return { disabled: true };
-    } else if (record.name == 'default') {
-      return { disabled: true };
-    } else {
-      return { disabled: false };
-    }
-  };
-  nextTick(() => {
-    setProps(selectionOptions);
-  });
-  /**
-   *@param url,name
-   **/
-  function getParam(url, name) {
-    try {
-      let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
-      let r = url.split('?')[1].match(reg);
-      if (r != null) {
-        return r[2];
-      }
-      return ''; //如果此处只写return;则返回的是undefined
-    } catch (e) {
-      return ''; //如果此处只写return;则返回的是undefined
-    }
-  }
-  getPathUrl.value = window.location.href;
-  const name = 'name';
-  const getName = getParam(getPathUrl.value, name);
-  getPathUrlName.value = decodeURIComponent(getName);
-
-  const setRowClassName = async () => {
-    if (getPathUrlName.value !== '') {
-      const { items } = await deviceConfigGetQuery({
-        page: 1,
-        pageSize: 10,
-        name: getPathUrlName.value,
-      });
-      nextTick(() => {
-        setTableData(items);
-        const { setFieldsValue, resetFields } = getForm();
-        setFieldsValue({
-          name: getPathUrlName.value,
-        });
-        if (onCloseVal.value == 1) {
-          resetFields();
-        }
-      });
-    } else {
-      setTimeout(() => {
-        reload();
-      }, 80);
-    }
-  };
-  setRowClassName();
-  onUnmounted(() => {
-    getPathUrlName.value = '';
-    onCloseVal.value = 1;
-  });
-  const tableListRef = ref<
-    {
-      title: string;
-      columns?: any[];
-      dataSource?: any[];
-    }[]
-  >([]);
-
-  function loadDataSuccess(excelDataList: ExcelData[]) {
-    tableListRef.value = [];
-    console.log(excelDataList);
-    for (const excelData of excelDataList) {
-      const {
-        header,
-        results,
-        meta: { sheetName },
-      } = excelData;
-      const columns: BasicColumn[] = [];
-      for (const title of header) {
-        columns.push({ title, dataIndex: title });
-      }
-      tableListRef.value.push({ title: sheetName, dataSource: results, columns });
-    }
-  }
-  //新增
-  function handleCreate() {
-    openModal(true, {
-      isUpdate: false,
-    });
-  }
-  //编辑
-  function handleEdit(record: Recordable) {
-    openModal(true, {
-      record,
-      isUpdate: true,
-    });
-  }
-
-  const [registerDrawer, { openDrawer }] = useDrawer();
-  //详情
-  function handleDetailView(record: Recordable) {
-    openDrawer(true, { record });
-  }
-
-  function defaultHeader({ filename, bookType }: ExportModalResult) {
-    // 默认Object.keys(data[0])作为header
-    const data = exportData.value;
-    jsonToSheetXlsx({
-      data,
-      filename,
-      write2excelOpts: {
-        bookType,
-      },
-    });
-  }
-  //导出
-  const handleExport = (record: Recordable) => {
-    exportData.value = [];
-    exportData.value.push({
-      createTime: record.createTime,
-      description: record.description,
-      name: record.name,
-    });
-    nextTick(() => {
-      openModalExcel();
-      expExcelModalRef.value?.clearFieldFunc();
-    });
-  };
-  //导入
-  function handleImport() {
-    console.log('record');
-  }
-  function handleSuccess() {
-    reload();
-  }
-
-  const handleSetDefault = async (record: Recordable) => {
-    let id = record.tbProfileId;
-    const data = await setDeviceProfileIsDefaultApi(id, 'default', defaultObj);
-    if (!data) return createMessage.error('设置该产品为默认失败');
-    createMessage.success('设置该产品为默认成功');
-    reload();
-    disabled.value = true;
+  import { ref } from 'vue';
+  import TableMode from './TableMode.vue';
+  import CardMode from './CardMode.vue';
+  import { Mode } from '/@/components/Widget';
+  const mode = ref(Mode.CARD);
+
+  const handleChangeMode = (flag: Mode) => {
+    mode.value = flag;
   };
   };
 </script>
 </script>
 
 
-<style lang="css">
-  .devide-profiles .rowcolor {
-    color: red;
-  }
-
-  .devide-profiles .rowcolor2 {
-    background: #a2c3e6;
-  }
-</style>
+<template>
+  <section>
+    <CardMode v-if="mode === Mode.CARD" :mode="mode" @change-mode="handleChangeMode" />
+    <TableMode v-if="mode === Mode.TABLE" :mode="mode" @change-mode="handleChangeMode" />
+  </section>
+</template>