任务管理

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

@@ -0,0 +1,105 @@
+<template>
+  <div class="flex flex-col items-start cell-detail">
+    <div class="flex items-center" @click="gotoDetail">
+      <img
+        :src="getPlatformIcon(record.platform)"
+        style="border-radius: 8px; width: 16px; height: 16px; margin-right: 8px; font-size: 14px"
+      />
+      {{ record.name || '-' }}
+    </div>
+    <div class="size-12px color-#939499 mt-2px" @click="gotoDetail">
+      {{ timestampToTime1(task.execution_time) }}
+    </div>
+    <div class="size-14px color-#211F24 mt-12px color-#6D4CFE" @click="gotoDetail">{{ task.name || '未命名' }}</div>
+    <div class="flex items-center mt-12px">
+      <div class="custom-time-picker">
+        <a-time-picker
+          format="HH:mm"
+          size="small"
+          :visible="isPanelVisible"
+          @visible-change="handleVisibleChange"
+          @change="handleTimeChange"
+          placeholder="修改发布时间"
+          class="hide-input-container opt-btn mr-12px"
+        />
+      </div>
+      <div class="opt-btn" @click.stop="handleDelete" style="margin-right: 0px">删除</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { defineProps, defineEmits } from 'vue';
+import { ref, computed } from 'vue';
+
+const props = defineProps({
+  task: {
+    type: Object,
+    required: true,
+  },
+  record: {
+    type: Object,
+    required: true,
+  },
+  getPlatformIcon: {
+    type: Function,
+    required: true,
+  },
+});
+const isPanelVisible = ref(false);
+const toggleTimePanel = () => {
+  isPanelVisible.value = !isPanelVisible.value;
+};
+const handleVisibleChange = (visible: boolean) => {
+  isPanelVisible.value = visible;
+};
+const handleTimeChange = (time: string) => {
+  if (time) {
+    emit('edit-time', props.task, timestampToTime1() + ' ' + time + ':00');
+  }
+};
+
+const timestampToTime1 = (): string => {
+  const timestamp = Date.now();
+  const date = new Date(timestamp);
+
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0'); // 补零
+  const day = String(date.getDate()).padStart(2, '0'); // 补零
+
+  return `${year}-${month}-${day}`;
+};
+
+const emit = defineEmits(['edit-time', 'delete', 'gotoDetail']);
+
+const handleDelete = () => {
+  emit('delete', props.task);
+};
+
+const gotoDetail = () => {
+  console.log('跳转详情');
+  emit('gotoDetail', props.task);
+};
+</script>
+
+<style scoped>
+.cell-detail {
+  background-color: #fff;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  box-shadow: #00000010 0px 2px 8px;
+  padding: 8px 16px;
+  margin-top: 8px;
+}
+
+.opt-btn {
+  font-size: 12px;
+  width: 138px;
+  height: 28px;
+  background-color: #f2f3f5;
+  text-align: center;
+  line-height: 28px;
+  border-radius: 4px;
+  margin-right: 12px;
+}
+</style>

src/views/property-marketing/assignment-management/managementDetail.vue

@@ -0,0 +1,101 @@
+<template>
+  <div
+    class="table-wrap bg-#fff rounded-8px px-24px py-24px flex flex-col justify-start items-center"
+    style="height: 90%"
+  >
+    <!-- 使用 flex 布局实现整体居中 -->
+    <div class="flex justify-center" style="width: 100%">
+      <div class="flex flex-col items-start">
+        <div class="font-bold color-#211F24" style="font-size: 28px">{{ task.name }}</div>
+        <div class="color-#666666 mt-8px">{{ timestampToDayNumber(task.created_at) }}</div>
+        <div class="color-#666666 mt-8px">{{ task.content }}</div>
+      </div>
+    </div>
+  </div>
+  <div class="flex justify-end mt-24px">
+    <a-button type="outline" @click="handleBack">返回</a-button>
+    <a-button type="outline" class="ml-12px">编辑</a-button>
+    <a-button type="primary" class="ml-12px">去审核</a-button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import router from '@/router';
+import { ref, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { getTaskSchedulesDetail } from '@/api/all/assignment-management';
+import DateUtils from '@/utils/DateUtils';
+const task = ref({});
+// 时间戳转日期格式，并提取日期数字
+const timestampToDayNumber = (timestamp: number) => {
+  const date = new Date(timestamp * 1000); // 假设时间戳是秒级
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${month}月${day}日`;
+};
+const handleBack = () => {
+  router.go(-1);
+};
+
+onMounted(async () => {
+  const route = useRoute();
+  const noteId = route.params.id; // 从路由参数中获取笔记ID
+
+  if (noteId) {
+    getTaskSchedulesDetail(noteId)
+      .then((response) => {
+        if (response.data) {
+          // 根据API响应结构调整
+          const apiData = response.data.data || response.data;
+          console.log(apiData);
+          task.value = apiData;
+        }
+      })
+      .catch((error) => {});
+  }
+});
+</script>
+
+<style scoped>
+.management-detail {
+  padding: 10px;
+}
+
+.van-card__title {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.van-card__desc {
+  margin-top: 8px;
+  color: #666;
+}
+
+.van-card__price {
+  font-size: 14px;
+  color: #999;
+}
+
+/* 新增样式 */
+.text-center {
+  text-align: center;
+}
+
+/* 添加新的样式规则 */
+.flex {
+  display: flex;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.items-start {
+  align-items: flex-start;
+}
+
+.mt-8px {
+  margin-top: 8px;
+}
+</style>