perf: 设备详情命令下发记录表格样式修复

@@ -22,6 +22,7 @@ export const columnSchema: BasicColumn[] = [
   {
     title: '输出参数',
     dataIndex: 'outputParams',
+    slots: { customRender: 'outputParams' },
   },
 ];
 

 <script lang="ts" setup>
   import { BasicTable, useTable } from '/@/components/Table';
   import { formSchemas, columnSchema } from './config';
+  import { BasicModal, useModal } from '/@/components/Modal';
+  import { Textarea } from 'ant-design-vue';
+  import { ref } from 'vue';
+  import { formatToDateTime } from '/@/utils/dateUtil';
+  import { EyeOutlined } from '@ant-design/icons-vue';
+
+  const outputData = ref<string>();
+
   const [register] = useTable({
     columns: columnSchema,
     size: 'small',
-    rowKey: 'id',
     showIndexColumn: false,
     useSearchForm: true,
     showTableSetting: true,
     bordered: true,
+    dataSource: [
+      {
+        time: formatToDateTime(new Date()),
+        identifier: '标识符',
+        eventName: '事件名',
+        eventType: '告警',
+        outputParams: { test: 1 },
+      },
+    ],
     formConfig: {
       layout: 'inline',
       baseColProps: { span: 6 },
@@ -20,8 +36,37 @@
       return params;
     },
   });
+
+  const [registerModal, { openModal }] = useModal();
+
+  const handleViewDetail = () => {
+    outputData.value = JSON.stringify(
+      {
+        test: '123',
+      },
+      null,
+      2
+    );
+    openModal(true);
+  };
 </script>
 
 <template>
-  <BasicTable @register="register" style="background-color: #f0f2f5" />
+  <BasicTable class="event-manage-table" @register="register">
+    <template #outputParams>
+      <span class="cursor-pointer text-blue-500" @click="handleViewDetail">
+        <EyeOutlined class="svg:text-blue-500" />
+        <span class="ml-2">详情</span>
+      </span>
+    </template>
+  </BasicTable>
+  <BasicModal title="输出参数" @register="registerModal">
+    <Textarea v-model:value="outputData" :autosize="true" />
+  </BasicModal>
 </template>
+
+<style lang="less" scoped>
+  .event-manage-table {
+    background-color: #f0f2f5;
+  }
+</style>

-<template>
-  <div style="background-color: #f0f2f5">
-    <BasicTable @register="registerTable">
-      <template #recordContent="{ record }">
-        <a-button type="link" class="ml-2" @click="handleRecordContent(record)"> 查看 </a-button>
-      </template>
-      <template #responseContent="{ record }">
-        <Tag
-          v-if="!record.request?.oneway"
-          :color="record.request?.response?.status === 'SUCCESS' ? 'green' : 'red'"
-          >{{ record.request?.response?.status === 'SUCCESS' ? '成功' : '失败' }}</Tag
-        >
-      </template>
-    </BasicTable>
-  </div>
-</template>
-<script lang="ts" setup>
-  import { h } from 'vue';
-  import { configColumns } from './config';
-  import { deviceCommandRecordGetQuery } from '/@/api/device/deviceConfigApi';
-  import { BasicTable, useTable } from '/@/components/Table';
-  import { Modal, Tag } from 'ant-design-vue';
-  import { JsonPreview } from '/@/components/CodeEditor';
-
-  const props = defineProps({
-    fromId: {
-      type: String,
-      default: '',
-    },
-  });
-  const [registerTable] = useTable({
-    api: deviceCommandRecordGetQuery,
-    columns: configColumns,
-    beforeFetch: (params) => {
-      return {
-        ...params,
-        tbDeviceId: props.fromId,
-      };
-    },
-    showTableSetting: true,
-    bordered: true,
-    showIndexColumn: false,
-  });
-  const commonModalInfo = (title, value) => {
-    Modal.info({
-      title,
-      width: 600,
-      content: h(JsonPreview, { data: value }),
-    });
-  };
-  const handleRecordContent = (record) => {
-    if (!record?.request?.body?.params) return;
-    //如果是正常格式则返回params，否则输入什么内容则显示什么内容
-    const jsonParams = JSON.parse(record?.request?.body?.params);
-    commonModalInfo('命令下发内容', jsonParams?.params ? jsonParams?.params : jsonParams);
-  };
-</script>
+<template>
+  <BasicTable class="command-record-table" @register="registerTable">
+    <template #recordContent="{ record }">
+      <a-button type="link" class="ml-2" @click="handleRecordContent(record)"> 查看 </a-button>
+    </template>
+    <template #responseContent="{ record }">
+      <Tag
+        v-if="!record.request?.oneway"
+        :color="record.request?.response?.status === 'SUCCESS' ? 'green' : 'red'"
+        >{{ record.request?.response?.status === 'SUCCESS' ? '成功' : '失败' }}</Tag
+      >
+    </template>
+  </BasicTable>
+</template>
+<script lang="ts" setup>
+  import { h } from 'vue';
+  import { configColumns } from './config';
+  import { deviceCommandRecordGetQuery } from '/@/api/device/deviceConfigApi';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { Modal, Tag } from 'ant-design-vue';
+  import { JsonPreview } from '/@/components/CodeEditor';
+
+  const props = defineProps({
+    fromId: {
+      type: String,
+      default: '',
+    },
+  });
+  const [registerTable] = useTable({
+    api: deviceCommandRecordGetQuery,
+    columns: configColumns,
+    beforeFetch: (params) => {
+      return {
+        ...params,
+        tbDeviceId: props.fromId,
+      };
+    },
+    showTableSetting: true,
+    bordered: true,
+    showIndexColumn: false,
+  });
+  const commonModalInfo = (title, value) => {
+    Modal.info({
+      title,
+      width: 600,
+      content: h(JsonPreview, { data: value }),
+    });
+  };
+  const handleRecordContent = (record) => {
+    if (!record?.request?.body?.params) return;
+    //如果是正常格式则返回params，否则输入什么内容则显示什么内容
+    const jsonParams = JSON.parse(record?.request?.body?.params);
+    commonModalInfo('命令下发内容', jsonParams?.params ? jsonParams?.params : jsonParams);
+  };
+</script>
+
+<style lang="less" scoped>
+  .command-record-table {
+    background-color: #f0f2f5;
+    padding: 16px;
+  }
+</style>