Merge branch 'test_任务管理v2' into test

* test_任务管理v2: 修改任务管理第一列居中显示空状态不完全显示回填显示任务详情修改任务显示信息修改样式
2025-09-25 16:34:32 +08:00
parent 85165bcdab f4d20eb8e9
commit e45ecdff66
5 changed files with 231 additions and 81 deletions
--- a/src/api/all/assignment-management.ts
+++ b/src/api/all/assignment-management.ts
@ -37,3 +37,9 @@ export const editTaskSchedulesTime = (id: string, params = {}) => {
  console.log('id', id);
  return Http.patch(`/v1/task-schedules/${id}/execution-time`, params);
 };
+
+
+export const getWorkDetail = (id: string) => {
+  console.log('id', id);
+  return Http.get(`/v1/works/${id}`);
+};
--- a/src/components/common-select/index.vue
+++ b/src/components/common-select/index.vue
@ -22,9 +22,9 @@
        <span>{{ item.label }}</span>
      </div>
    </Option>
-    <template #tag="{ label, icon }">
+    <template #tag="{ label, value }">
      <div class="flex items-center">
-        <img v-if="icon" :src="icon" class="w-16px h-16px mr-4px rounded-4px" />
+        <img v-if="getIconByValue(value)" :src="getIconByValue(value)" class="w-16px h-16px mr-4px rounded-4px" />
        <span>{{ label }}</span>
      </div>
    </template>
@ -39,6 +39,11 @@
 <script setup>
 import { Select } from 'ant-design-vue';
 const { Option } = Select;
+
+// 自定义搜索过滤逻辑
+const filterOption = (input, option) => {
+  return option.label.toLowerCase().includes(input.toLowerCase());
+};
 import { ref, watch, computed } from 'vue';

 const props = defineProps({
@ -93,9 +98,16 @@ const validOptions = computed(() => {
      ...item,
      value: item.id !== undefined ? item.id : item.value,
      label: item.name !== undefined ? item.name : item.label,
+      icon: item.icon, // 添加icon属性的映射
    }));
 });

+// 根据value获取对应的图标
+const getIconByValue = (value) => {
+  const option = validOptions.value.find(option => option.value === value);
+  return option ? option.icon : undefined;
+};
+
 watch(
  () => props.modelValue,
  (newVal) => {
--- a/src/views/property-marketing/assignment-management/components/draw-popup.vue
+++ b/src/views/property-marketing/assignment-management/components/draw-popup.vue
@ -1,11 +1,8 @@
 <template>
  <a-drawer
    title="创建任务"
-    cancel-text="取消"
-    ok-text="创建任务"
    placement="right"
    v-model:visible="showDriwer"
-    @after-visible-change="showDriwerChange"
    @ok="handleCreateTask"
    width="480px"
    class="task-drawer"
@ -120,7 +117,10 @@
                    @click="handleDelte"
                  />
                </div>
-                <div class="mb-12px">{{ selectedProducts.data[0].title }}</div>
+                <div class="mb-12px" v-if="selectedProducts.data.length > 0">{{ selectedProducts.data[0].title }}</div>
+                <div class="mb-12px color-#939499" v-if="selectedProducts.data.length > 0">
+                  {{ selectedProducts.data[0].content }}
+                </div>
                <div v-for="item in selectedProducts.images" :key="item.id">
                  <img v-if="item.cover" :src="item.cover" class="w-88 h-88 mr-8px border-rounded-8px mb-12px" />
                </div>
@ -183,6 +183,16 @@
      @confirm="handleProductConfirm"
      @cancel="handleProductCancel"
    />
+    <!-- 底部操作栏 -->
+    <template #footer>
+      <div class="flex items-center justify-between">
+        <div class="flex items-center"></div>
+        <div class="flex justify-end">
+          <Button @click="handleCancel">取消</Button>
+          <Button class="ml-16px" type="primary" @click="handleCreateTask">创建任务</Button>
+        </div>
+      </div>
+    </template>
  </a-drawer>
 </template>

@ -205,6 +215,8 @@ import RawMaterialDrawer from './raw-material-drawer.vue';
 import FinishedProductDrawer from './finished-product-drawer.vue';
 import { message } from 'ant-design-vue';
 import { getMediaAccountList } from '@/api/all/propertyMarketing';
+// 导入任务详情API
+import { getWorkDetail } from '@/api/all/assignment-management';
 // 平台图标
 import iconDy from '@/assets/img/platform/icon-dy.png';
 import iconXhs from '@/assets/img/platform/icon-xhs.png';
@ -377,19 +389,34 @@ const handleMaterialCancel = () => {
 };

 // 处理成品库选择确认
-const handleProductConfirm = (result) => {
+const handleProductConfirm = async (result) => {
  selectedProducts.value = {
    keys: result.selectedKeys,
    data: result.selectedData,
    text: result.choseText,
    images: result.choseImgArray,
  };
-
  // 如果是单选模式，确保只选择一个项目
  if (result.selectedRows && result.selectedRows.length > 0) {
    hasChoseFinishedProducts.value = true;
    // 取第一个选中的项目
    const selectedProduct = result.selectedRows[0];
+    
+    // 获取成品详情
+    try {
+      const res = await getWorkDetail(selectedProduct.id);
+      if (res && res.code === 200) {
+        const workDetail = res.data;
+        selectedProducts.value = {
+          keys: [workDetail.id],
+          data: [workDetail],
+          text: workDetail.title || '1个稿件',
+          images: workDetail.files ? workDetail.files.filter(f => f.type === 0) : [], // 图片文件
+        };
+      }
+    } catch (error) {
+      console.error('获取成品详情失败:', error);
+      // 如果获取详情失败，使用原始数据
      selectedProducts.value = {
        keys: [selectedProduct.id],
        data: [selectedProduct],
@ -397,6 +424,7 @@ const handleProductConfirm = (result) => {
        images: [selectedProduct],
      };
    }
+  }
 };

 // 处理成品库取消
@ -415,21 +443,6 @@ const handleDateChange = (date) => {
  // 日期处理逻辑
 };

-// 抽屉显示状态变化
-const showDriwerChange = (visible: boolean) => {
-  console.log('Main Drawer visible: ', visible);
-};
-
-// 原料库抽屉显示状态变化
-const handleMaterialDrawerVisibleChange = (visible: boolean) => {
-  console.log('Raw Material Drawer visible: ', visible);
-};
-
-// 成品库抽屉显示状态变化
-const handleProductDrawerVisibleChange = (visible: boolean) => {
-  console.log('Finished Product Drawer visible: ', visible);
-};
-
 // 处理筛选条件变化
 const handleChange = (field, value) => {
  localQuery.value[field] = value;
@ -439,6 +452,10 @@ const handleChange = (field, value) => {
  });
 };

+const handleCancel = () => {
+  showDriwer.value = false;
+};
+
 // 点击创建任务按钮时触发
 const handleCreateTask = () => {
  // 验证表单
@ -452,12 +469,6 @@ const handleCreateTask = () => {
    message.error('请选择发布内容');
    return;
  }
-  if (isActive.value === 'ai' && selectedMaterials.value.keys.length === 0) {
-    // 可以添加错误提示：请选择发布内容
-    message.error('请选择发布内容');
-    return;
-  }
-  console.log('有问题已返回');
  // 准备提交的数据
  const taskData = {
    media_account_id: localQuery.value.ids[0],
@ -472,7 +483,6 @@ const handleCreateTask = () => {
  };
  // 发射创建任务事件
  emit('create-task', taskData);
-
  // 关闭抽屉
  showDriwer.value = false;
 };
@ -482,8 +492,35 @@ const showDrawer = (accountInfo = null, selectedDate = null) => {
  showDriwer.value = true;
  if (accountInfo && accountInfo.id) {
    nextTick(() => {
-      localQuery.value.accounts = [accountInfo.name];
+      // 查找账号列表中匹配的账号，包含平台信息和图标
+      const matchedAccount = accountList.value.find(account => account.value === accountInfo.id);
+      if (matchedAccount) {
+        localQuery.value.accounts = [matchedAccount.name];
        localQuery.value.ids = [accountInfo.id];
+      } else {
+        // 如果没有找到匹配项，检查账号列表是否已加载
+        if (accountList.value.length > 0) {
+          // 账号列表已加载但未找到匹配项，回退到原来的方式
+          localQuery.value.accounts = [`${accountInfo.name}(${getPlatformName(accountInfo.platform)})`];
+          localQuery.value.ids = [accountInfo.id];
+        } else {
+          // 账号列表尚未加载，等待加载完成后再设置
+          const unwatch = watch(accountList, (newAccountList) => {
+            if (newAccountList.length > 0) {
+              const matched = newAccountList.find(account => account.value === accountInfo.id);
+              if (matched) {
+                localQuery.value.accounts = [matched.name];
+                localQuery.value.ids = [accountInfo.id];
+              } else {
+                localQuery.value.accounts = [`${accountInfo.name}(${getPlatformName(accountInfo.platform)})`];
+                localQuery.value.ids = [accountInfo.id];
+              }
+              // 取消监听
+              unwatch();
+            }
+          }, { immediate: true });
+        }
+      }
    });
  }
  // 如果传入了日期，则设置为默认日期
@ -494,12 +531,84 @@ const showDrawer = (accountInfo = null, selectedDate = null) => {
  }
 };

+// 新增：编辑任务时的数据回填方法
+const fillTaskData = async (taskData) => {
+  // 如果传入的数据包含完整信息，则直接使用，否则获取详情
+  let fullTaskData = taskData;
+  
+  // 如果没有work或raw_materials等详细信息，则需要获取完整详情
+  if ((!taskData.work && !taskData.raw_materials) || taskData.id) {
+    try {
+      const res = await getTaskSchedulesDetail(taskData.id);
+      if (res && res.code === 200) {
+        fullTaskData = res.data;
+      }
+    } catch (error) {
+      console.error('获取任务详情失败:', error);
+    }
+  }
+  
+  // 设置账号信息
+  if (fullTaskData.media_account) {
+    nextTick(() => {
+      localQuery.value.accounts = [fullTaskData.media_account.name];
+      localQuery.value.ids = [fullTaskData.media_account.id];
+    });
+  }
+  
+  // 设置AI生成或成品库选择
+  isActive.value = fullTaskData.is_ai_generate ? 'ai' : 'chose';
+  
+  // 设置任务描述（AI生成时）
+  if (fullTaskData.is_ai_generate && fullTaskData.ai_prompt) {
+    taskDescription.value = fullTaskData.ai_prompt;
+  }
+  
+  // 设置发布时间
+  if (fullTaskData.publish_type === 1 && fullTaskData.execution_time) {
+    // 定时发布
+    publishType.value = 'timing';
+    const execTime = new Date(fullTaskData.execution_time * 1000);
+    currentDate.value = execTime;
+    strValue.value = dayjs(execTime).format('HH:mm');
+  } else {
+    // 立即发布
+    publishType.value = 'immediate';
+  }
+  
+  // 设置选中的素材（AI生成时）
+  if (fullTaskData.is_ai_generate && fullTaskData.raw_materials && fullTaskData.raw_materials.length > 0) {
+    const materials = fullTaskData.raw_materials;
+    selectedMaterials.value = {
+      keys: materials.map(m => m.id),
+      data: materials,
+      text: '',
+      images: materials.filter(m => m.type === 0), // 图片
+      texts: materials.filter(m => m.type === 2),  // 文本
+    };
+    hasChoseMaterial.value = materials.length > 0;
+  }
+  
+  // 设置选中的成品（成品库选择时）
+  if (!fullTaskData.is_ai_generate && fullTaskData.work) {
+    const work = fullTaskData.work;
+    selectedProducts.value = {
+      keys: [work.id],
+      data: [work],
+      text: work.title || '1个稿件',
+      images: work.files ? work.files.filter(f => f.type === 0) : [], // 图片文件
+    };
+    hasChoseFinishedProducts.value = true;
+  }
+};
+
 // 定义事件发射器
 const emit = defineEmits(['filter-change', 'create-task']);

 // 暴露方法
 defineExpose({
  showDrawer,
+  fillTaskData, // 暴露新的数据回填方法
 });
 </script>

--- a/src/views/property-marketing/assignment-management/components/task-item.vue
+++ b/src/views/property-marketing/assignment-management/components/task-item.vue
@ -1,5 +1,5 @@
 <template>
-  <a-trigger trigger="click" position="br" @click.stop @popup-visible-change="onPopupVisibleChange">
+  <a-trigger trigger="click" position="br" @click.stop @popup-visible-change="onPopupVisibleChange" v-model:popup-visible="popupVisible">
    <div class="task-item">
      <div class="color-indicator" :style="{ background: getTaskColor() }"></div>
      <div>{{ timestampToTime(task.execution_time) }}</div>
@ -31,17 +31,15 @@
            {{ timestampToTime1(task.execution_time) }}
          </div>
        </div>
-
        <div class="font-size-14px color-#211F24 color-#211F24 task-description" :title="task.name || 'AI生成内容'">
          {{ task.name || 'AI生成内容' }}
        </div>
-        <div v-if="task.ai_generate_status == 0" class="AILoding">
+        <div v-if="task.ai_generate_status == 1" class="AILoding">
          <ASpin />
          <div style="color: #9a56ba">内容生成中...</div>
          <div style="color: #9a56ba">完成后将自动展示，您可先返回其他操作</div>
        </div>
-
-        <div v-else-if="task.ai_generate_status == 1 && taskDetail" class="w-full pl-16px">
+        <div v-else-if="taskDetail" class="w-full pl-16px">
          <div
            v-for="item in choseTextArray"
            :key="item.id"
@ -66,30 +64,29 @@
            />
          </div>
        </div>
+        <div class="flex flex-col w-full" v-if="task.status != 2">
          <div class="flex items-center mt-12px w-full h-1px bg-#E6E6E8"></div>
          <div class="flex items-center mt-12px mb-16px action-buttons w-full px-16px">
-          <div class="flex items-center mr-12px" @click.stop="handleDelete" v-if="task.status != 1">
+            <div
+              class="flex items-center mr-12px"
+              @click.stop="handleDelete"
+              v-if="task.status == 0 || (taskDetail.status == 1 && taskDetail.ai_generate_status != 1)"
+            >
              <icon-delete style="font-size: 20px; margin-left: 0" />
            </div>
            <div class="flex w-full" :class="{ 'justify-between': task.ai_generate_status == 0 }">
-            <a-date-picker
-              v-model="datePickerValue"
-              placeholder="修改发布时间"
-              :show-time="{ format: 'HH:mm' }"
-              format="YYYY-MM-DD HH:mm"
-              value-format="YYYY-MM-DD HH:mm"
-              @change="onChange"
-              @ok="onOk"
-              @click.stop
-              @mousedown.stop
-              @focus.stop
-            />
-            <button v-if="task.ai_generate_status == 0" class="opt-btn ml-12px opt-right" @click.stop="handleAICreate">
+              <button class="opt-btn flex-1" @click.stop="handleEditTask">修改任务</button>
+              <button
+                v-if="task.ai_generate_status == 0 && task.status != 3"
+                class="opt-btn ml-12px opt-right"
+                @click.stop="handleAICreate"
+              >
                AI立即生成
              </button>
            </div>
          </div>
        </div>
+      </div>
    </template>
  </a-trigger>
 </template>
@ -120,10 +117,8 @@ const choseTextArray = ref([]);
 const choseVideoArray = ref([]);
 const getTaskDetail = async () => {
  if (!props.task || !props.task.id) return;
-
  try {
    const res = await getTaskSchedulesDetail(props.task.id);
-
    if (res && res.data) {
      datePickerValue.value = dayjs(res.data.execution_time * 1000);
      console.log('任务详情:', datePickerValue.value);
@ -156,6 +151,7 @@ const onOk = (value) => {
 };

 const onPopupVisibleChange = (visible) => {
+  popupVisible.value = visible;
  if (visible) {
    getTaskDetail();
  }
@ -168,21 +164,22 @@ const gotoDetail = () => {
  console.log('跳转详情');
  emit('handle-task', 'goto-detail', props.task, props.record);
 };
-const handleTimeChange = (time: string) => {
-  // if (time) {
-  //   emit('handle-task', 'edit-time', props.task, timestampToTime1() + ' ' + time + ':00');
-  // }
-};
+
 const handleAICreate = () => {
  emit('handle-task', 'ai-create', props.task, props.record);
 };
+
+const handleEditTask = () => {
+  // 关闭当前弹窗
+  popupVisible.value = false;
+  emit('handle-task', 'edit-task', props.task, props.record);
+};
+
 const timestampToTime = (timestamp: number): string => {
  // 如果没有传入时间戳，则返回空字符串
  if (!timestamp) return '';
-
  // 将时间戳转换为毫秒（如果时间戳是秒单位的话）
  const date = new Date(timestamp * 1000);
-
  // 格式化为 HH:mm 格式
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
@ -205,6 +202,9 @@ const timestampToTime1 = (timestamp: number): string => {

 const emit = defineEmits(['filter-change', 'handle-task']);

+// 添加控制弹窗显示的响应式变量
+const popupVisible = ref(false);
+
 // 日期选择器的值
 const datePickerValue = ref(null);

--- a/src/views/property-marketing/assignment-management/index.vue
+++ b/src/views/property-marketing/assignment-management/index.vue
@ -25,7 +25,7 @@
          :columns="columns"
          :data="data"
          :bordered="{ cell: true }"
-          :scroll="{ x: 'max-content', y: 600 }"
+          :scroll="{ x: 'max-content' }"
          style="width: 100%"
          :pagination="false"
          @change="handleTableChange"
@ -33,7 +33,7 @@
        >
          <!-- 空数据显示 -->
          <template #empty>
-            <div class="flex flex-col items-center justify-center">
+            <div class="flex flex-col items-center justify-center" style="min-height: 400px">
              <img :src="emptyIcon" class="img mt-20px" alt="暂无数据" width="106" height="72" />
              <div class="text mt-36px">暂无数据</div>
              <div class="mt-12px mb-12px">可通过账号管理添加账号，进行任务排期管理</div>
@ -43,10 +43,10 @@

          <!-- 账号与平台列 -->
          <template #name="{ record }">
-            <div class="flex items-center">
+            <div class="flex items-center justify-start">
              <img
                :src="getPlatformIcon(record.platform)"
-                style="border-radius: 8px; width: 16px; height: 16px; margin-right: 8px"
+                style="border-radius: 8px; width: 16px; height: 16px; margin-right: 8px; margin-left: 20px"
                :alt="getPlatformName(record.platform)"
              />
              {{ record.name || '-' }}
@ -248,7 +248,6 @@ const processTableData = (apiData: any[]) => {

 // 创建任务
 const handleAddTask = () => {
-  console.log('handleAddTask');
  drawerPopupRef.value?.showDrawer();
 };

@ -473,7 +472,7 @@ const handleCellClick = (record: any, rowIndex: any, column: any) => {
    return;
  }

-  console.log('selectedDate', selectedDate);
+  console.log('selectedDate', selectedDate, accountInfo);
  drawerPopupRef.value.showDrawer(accountInfo, selectedDate);
 };

@ -505,6 +504,25 @@ const handleTaskAction = async (action: string, task: any, ...args: any[]) => {
        message.success(res.message);
      }
      break;
+    case 'edit-task':
+      console.log('edit-task', args[0], typeof args[0]);
+      const accountInfo = {
+        id: args[0].id,
+        name: args[0].name,
+        platform: args[0].platform,
+      };
+      const selectedDate = task.execution_time;
+      const date = new Date(selectedDate);
+
+      // 显示抽屉
+      drawerPopupRef.value.showDrawer(accountInfo, date);
+
+      // 等待抽屉打开后再填充数据
+      nextTick(() => {
+        // 将任务信息回填到draw-popup组件
+        drawerPopupRef.value.fillTaskData(task);
+      });
+      break;
  }
 };

@ -589,7 +607,7 @@ onMounted(() => {
 }

 .no-task {
-  height: 30px;
+  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
@ -623,7 +641,12 @@ onMounted(() => {
  display: flex;
  flex-direction: column;
  align-items: start;
-  height: 42px;
+  min-height: 42px;
+}
+
+:deep(td .arco-table-cell:first-child) {
+  align-items: center;
+  justify-content: center;
 }

 :deep(td.today-column) .arco-table-cell-wrap {