table的排序

src/views/property-marketing/assignment-management/components/TaskDetail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col items-start cell-detail">
+  <div class="flex flex-col items-start cell-detail" @click="gotoDetail">
     <div class="flex items-center">
       <img
         :src="getPlatformIcon(record.platform)"
@@ -10,9 +10,27 @@
     <div class="size-12px color-#939499 mt-2px">
       {{ timestampToTime1(task.execution_time) }}
     </div>
-    <div class="size-14px color-#211F24 mt-12px">{{ task.name || '未命名' }}</div>
+    <div class="size-14px color-#211F24 mt-12px color-#6D4CFE">{{ task.name || '未命名' }}</div>
     <div class="flex items-center mt-12px">
-      <div class="opt-btn" @click.stop="handleEditTime">修改发布时间</div>
+      <a-trigger trigger="click" align-point>
+        <div class="opt-btn" @click.stop="handleEditTime">修改发布时间</div>
+        <template #content>
+          <div class="custom-time-picker">
+            <!-- 1. 自定义触发按钮（替代原输入框，点击弹出面板） -->
+            <!-- <button @click="toggleTimePanel" class="trigger-btn">选择时间（点击弹出面板）</button> -->
+
+            <!-- 2. a-time-picker 核心：隐藏输入框容器，仅保留弹出面板 -->
+            <a-time-picker
+              format="HH:mm"
+              :defaultValue="defaultValue"
+              :visible="isPanelVisible"
+              @visible-change="handleVisibleChange"
+              @change="handleTimeChange"
+              class="hide-input-container"
+            />
+          </div>
+        </template>
+      </a-trigger>
       <div class="opt-btn" @click.stop="handleDelete" style="margin-right: 0px">删除</div>
     </div>
   </div>
@@ -24,19 +42,31 @@ import { defineProps, defineEmits } from 'vue';
 const props = defineProps({
   task: {
     type: Object,
-    required: true
+    required: true,
   },
   record: {
     type: Object,
-    required: true
+    required: true,
   },
   getPlatformIcon: {
     type: Function,
-    required: true
-  }
+    required: true,
+  },
 });
-
-const emit = defineEmits(['editTime', 'delete']);
+const isPanelVisible = ref(false);
+const toggleTimePanel = () => {
+  isPanelVisible.value = !isPanelVisible.value;
+};
+const handleVisibleChange = (visible: boolean) => {
+  isPanelVisible.value = visible;
+};
+const handleTimeChange = (time: Date | null) => {
+  if (time) {
+    console.log('Selected time:', time);
+  }
+};
+const defaultValue = ref(new Date());
+const emit = defineEmits(['editTime', 'delete', 'gotoDetail']);
 
 // 时间戳转时间格式 (MM月DD HH:MM)
 const timestampToTime1 = (timestamp: number): string => {
@@ -57,6 +87,11 @@ const handleEditTime = () => {
 const handleDelete = () => {
   emit('delete', props.task);
 };
+
+const gotoDetail = () => {
+  console.log('跳转详情');
+  emit('gotoDetail', props.task);
+};
 </script>
 
 <style scoped>
@@ -79,4 +114,4 @@ const handleDelete = () => {
   border-radius: 4px;
   margin-right: 12px;
 }
-</style>
+</style>