微调-调整日期组件

frontend/src/views/log/index.vue

@@ -4,26 +4,27 @@
       ref='proTable'
       :columns='columns'
       :data='logData'
-      @selection-change="handleSelectionChange" 
-      type="selection"
+      @selection-change='handleSelectionChange'
+      type='selection'
     >
-     <!-- 表格 header 按钮 -->
-     <template #tableHeader>
-          <el-button type='primary' :icon='Upload'>导出csv</el-button>
-        </template>
+      <!-- 表格 header 按钮 -->
+      <template #tableHeader>
+        <el-button type='primary' :icon='Upload'>导出csv</el-button>
+      </template>
     </ProTable>
   </div>
 
 </template>
 <script setup lang='tsx' name='useProTable'>
-import TimeControl from '@/components/TimeControl/index.vue'; // 根据实际路径调整
-import { defineComponent,ref ,reactive} from 'vue'
-import {type Log } from '@/api/log/interface'
+// 根据实际路径调整
+import TimeControl from '@/components/TimeControl/index.vue'
+import { type Log } from '@/api/log/interface'
 import ProTable from '@/components/ProTable/index.vue'
-import {Upload} from '@element-plus/icons-vue'
+import { Upload } from '@element-plus/icons-vue'
 import logDataList from '@/api/log/logData'
 import type { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
-let multipleSelection = ref<string[]>([]);
+
+let multipleSelection = ref<string[]>([])
 const logData = logDataList
 
 // ProTable 实例
@@ -40,23 +41,13 @@ const columns = reactive<ColumnProps<Log.LogList>[]>([
     prop: 'record_Time',
     label: '记录时间',
     width: 180,
-    search: {
-      // 自定义 search 显示内容
-      render: ({ searchParam }) => {
-        return (
-          <div class='flx-center'>
-            <TimeControl/>
-          </div>
-        )
-      },
-    },
   },
   {
     prop: 'user',
     label: '操作用户',
     search: { el: 'select', props: { filterable: true } },
   },
-  
+
   {
     prop: 'type',
     label: '日志类型',
@@ -67,14 +58,29 @@ const columns = reactive<ColumnProps<Log.LogList>[]>([
     label: '日志等级',
     search: { el: 'select', props: { filterable: true } },
   },
+  {
+    prop: 'record_Time',
+    label: '记录时间',
+    isShow: false,
+    search: {
+      span: 2,
+      render: ({ searchParam }) => {
+        return (
+          <div class='flx-flex-start'>
+            <TimeControl />
+          </div>
+        )
+      },
+    },
+  },
 ])
 
 //选中
 // 处理选择变化
-const handleSelectionChange = (selection:Log.LogList[]) => {
-  multipleSelection.value = selection.map(row => row.id); // 更新选中的行
-  
-};
+const handleSelectionChange = (selection: Log.LogList[]) => {
+  multipleSelection.value = selection.map(row => row.id) // 更新选中的行
+
+}
 </script>
 
 <style scoped>