From dac4d7a20b48bc18d10995b1819d2800e91555d3 Mon Sep 17 00:00:00 2001
From: lq <121091329@qq.com>
Date: Tue, 23 Sep 2025 18:16:10 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=91=E5=B8=83=E4=BB=BB=E5=8A=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useTableSelectionWithPagination.ts  | 42 +++++++++++---
 .../components/draw-popup.vue                 | 44 ++++++++++++--
 .../components/finished-product-drawer.vue    | 58 +++++++++----------
 .../assignment-management/index.vue           |  6 +-
 4 files changed, 105 insertions(+), 45 deletions(-)

diff --git a/src/hooks/useTableSelectionWithPagination.ts b/src/hooks/useTableSelectionWithPagination.ts
index 0c30800..563f9b7 100644
--- a/src/hooks/useTableSelectionWithPagination.ts
+++ b/src/hooks/useTableSelectionWithPagination.ts
@@ -4,6 +4,7 @@ import { cloneDeep } from 'lodash-es';
 
 interface UseTableSelectionWithPaginationOptions {
   rowKey?: string; // 主键字段名，默认 'id'
+  type?: 'checkbox' | 'radio'; // 选择类型，默认 'checkbox'
   pageInfo?: {
     page?: number;
     page_size?: number;
@@ -22,6 +23,7 @@ const DEFAULT_PAGE_INFO = {
 
 export function useTableSelectionWithPagination(options: UseTableSelectionWithPaginationOptions = {}) {
   const rowKey = options.rowKey || 'id';
+  const type = options.type || 'checkbox'; // 默认为复选框
 
   const selectedRowKeys = ref<Array<string | number>>([]);
   const selectedRows = ref<Array<any>>([]);
@@ -33,12 +35,24 @@ export function useTableSelectionWithPagination(options: UseTableSelectionWithPa
   // 单行选择
   const handleSelect = (record: any, select: boolean) => {
     const _targetKey = record[rowKey];
-    if (select) {
-      selectedRows.value.push(record);
-      selectedRowKeys.value.push(_targetKey);
+    if (type === 'radio') {
+      // 单选模式
+      if (select) {
+        selectedRows.value = [record];
+        selectedRowKeys.value = [_targetKey];
+      } else {
+        selectedRows.value = [];
+        selectedRowKeys.value = [];
+      }
     } else {
-      selectedRows.value = selectedRows.value.filter((v) => v[rowKey] !== _targetKey);
-      selectedRowKeys.value = selectedRowKeys.value.filter((key) => key !== _targetKey);
+      // 多选模式（默认）
+      if (select) {
+        selectedRows.value.push(record);
+        selectedRowKeys.value.push(_targetKey);
+      } else {
+        selectedRows.value = selectedRows.value.filter((v) => v[rowKey] !== _targetKey);
+        selectedRowKeys.value = selectedRowKeys.value.filter((key) => key !== _targetKey);
+      }
     }
 
     options.onSelectChange?.();
@@ -46,6 +60,9 @@ export function useTableSelectionWithPagination(options: UseTableSelectionWithPa
 
   // 全选/取消全选
   const handleSelectAll = (checked: boolean) => {
+    // 单选模式下不支持全选
+    if (type === 'radio') return;
+    
     const currentPageRows = dataSource.value;
     const currentPageKeys = currentPageRows.map((v) => v[rowKey]);
 
@@ -64,8 +81,15 @@ export function useTableSelectionWithPagination(options: UseTableSelectionWithPa
 
   // 选择变更处理
   const handleSelectChange = (keys: Array<string | number>, rows: Array<any>) => {
-    selectedRowKeys.value = keys;
-    selectedRows.value = rows;
+    if (type === 'radio') {
+      // 单选模式下只保留最后一个选择
+      selectedRowKeys.value = keys.length > 0 ? [keys[keys.length - 1]] : [];
+      selectedRows.value = rows.length > 0 ? [rows[rows.length - 1]] : [];
+    } else {
+      // 多选模式
+      selectedRowKeys.value = keys;
+      selectedRows.value = rows;
+    }
     options.onSelectChange?.();
   };
 
@@ -88,8 +112,8 @@ export function useTableSelectionWithPagination(options: UseTableSelectionWithPa
   };
 
   const rowSelection = computed(() => ({
-    type: 'checkbox',
-    showCheckedAll: true,
+    type: type,
+    showCheckedAll: type === 'checkbox', // 只有复选框模式才显示全选
     width: 48,
     selectedRowKeys: selectedRowKeys.value,
     onChange: handleSelectChange
diff --git a/src/views/property-marketing/assignment-management/components/draw-popup.vue b/src/views/property-marketing/assignment-management/components/draw-popup.vue
index 6d173e7..48a66d3 100644
--- a/src/views/property-marketing/assignment-management/components/draw-popup.vue
+++ b/src/views/property-marketing/assignment-management/components/draw-popup.vue
@@ -100,7 +100,7 @@
                 <div class="section-title">发布内容</div>
                 <div class="font-size-12px text-[#999999]">（必填）</div>
               </div>
-              <div class="form-section material-section">
+              <div class="form-section material-section" v-if="hasChoseFinishedProducts == false">
                 <Button @click="handleAddContent" class="add-material-btn">
                   <template #icon>
                     <icon-plus size="16" class="mr-8px" />
@@ -110,6 +110,12 @@
 
                 <p class="material-hint">前往成品库，选择要发布的内容</p>
               </div>
+              <div v-else class="flex flex-col items-start w-full">
+                <div class="mb-12px">{{ selectedProducts.data[0].title }}</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>
+              </div>
             </div>
           </div>
         </div>
@@ -188,11 +194,12 @@ import icon4 from '@/assets/img/error-img.png';
 // 引入子组件
 import RawMaterialDrawer from './raw-material-drawer.vue';
 import FinishedProductDrawer from './finished-product-drawer.vue';
-
+import { message } from 'ant-design-vue';
 // 状态管理
 const choseText = ref('');
 const taskDescription = ref('');
 const hasChoseMaterial = ref(false);
+const hasChoseFinishedProducts = ref(false);
 const isActive = ref('ai');
 const showDriwer = ref(false);
 const showDrawer2 = ref(false);
@@ -310,6 +317,19 @@ const handleProductConfirm = (result) => {
     text: result.choseText,
     images: result.choseImgArray,
   };
+
+  // 如果是单选模式，确保只选择一个项目
+  if (result.selectedRows && result.selectedRows.length > 0) {
+    hasChoseFinishedProducts.value = true;
+    // 取第一个选中的项目
+    const selectedProduct = result.selectedRows[0];
+    selectedProducts.value = {
+      keys: [selectedProduct.id],
+      data: [selectedProduct],
+      text: '1个稿件',
+      images: [selectedProduct],
+    };
+  }
 };
 
 // 处理成品库取消
@@ -360,12 +380,24 @@ watch(showDriwer, (newVal) => {
 // 点击创建任务按钮时触发
 const handleCreateTask = () => {
   // 验证表单
-  if (isActive.value === 'chose' && selectedProducts.value.keys.length === 0) {
+  if (localQuery.value.ids.length == 0) {
     // 可以添加错误提示：请选择发布内容
-    console.log('请选择发布内容');
+    message.error('请选择发布账号');
+    return;
+  }
+  console.log('selectedMaterials', selectedMaterials.value);
+  console.log('selectedProducts', selectedProducts.value);
+  console.log('isActive', isActive.value);
+  if (isActive.value === 'chose' && selectedProducts.value.keys.length === 0) {
+    // 可以添加错误提示：请选择发布内容
+    message.error('请选择发布内容');
+    return;
+  }
+  if (isActive.value === 'ai' && selectedMaterials.value.keys.length === 0) {
+    // 可以添加错误提示：请选择发布内容
+    message.error('请选择发布内容');
     return;
   }
-  console.log(localQuery.value);
   // 准备提交的数据
   const taskData = {
     media_account_id: localQuery.value.ids[0],
@@ -376,6 +408,7 @@ const handleCreateTask = () => {
     publish_type: publishType.value == 'immediate' ? 0 : 1,
     execution_time:
       publishType.value === 'timing' ? `${dayjs(currentDate.value).format('YYYY-MM-DD')} ${strValue.value}` : null,
+    work_id: selectedProducts.value.keys[0],
   };
   // 发射创建任务事件
   emit('create-task', taskData);
@@ -445,6 +478,7 @@ defineExpose({
   align-items: center;
   width: 400px;
   border-radius: 8px;
+  padding: 8px;
 }
 
 .publish-section {
diff --git a/src/views/property-marketing/assignment-management/components/finished-product-drawer.vue b/src/views/property-marketing/assignment-management/components/finished-product-drawer.vue
index ea327d8..5a38be8 100644
--- a/src/views/property-marketing/assignment-management/components/finished-product-drawer.vue
+++ b/src/views/property-marketing/assignment-management/components/finished-product-drawer.vue
@@ -158,11 +158,13 @@ const fetchProductData = async () => {
 };
 
 // 2. 初始化表格选择逻辑
-const { pageInfo, onPageChange, onPageSizeChange, rowSelection, selectedRowKeys } = useTableSelectionWithPagination({
-  rowKey: 'id',
-  onPageChange: fetchProductData,
-  onPageSizeChange: fetchProductData,
-});
+const { pageInfo, onPageChange, onPageSizeChange, rowSelection, selectedRowKeys, selectedRows } =
+  useTableSelectionWithPagination({
+    rowKey: 'id',
+    type: 'radio', // 改为单选模式
+    onPageChange: fetchProductData,
+    onPageSizeChange: fetchProductData,
+  });
 
 // 监听query参数变化，当主组件传递的参数变化时重新请求数据
 watchEffect(() => {
@@ -173,37 +175,33 @@ watchEffect(() => {
 });
 
 // 监听选中项变化
-watch(selectedRowKeys, (newKeys) => {
-  const filteredData = materialData.value.filter((item) => newKeys.includes(item.id));
-  choseText.value = filteredData.length + '个稿件';
-  // // 统计各类型数量
-  // const typeCount = filteredData.reduce((acc, item) => {
-  //   const typeKey = item.type === EnumManuscriptType.Image ? 'image' : 'video';
-  //   acc[typeKey] = (acc[typeKey] || 0) + 1;
-  //   return acc;
-  // }, {});
-
-  // // 生成选中文本
-  // choseText.value = [];
-  // if (typeCount.image) choseText.value.push(`图文: ${typeCount.image}个`);
-  // if (typeCount.video) choseText.value.push(`视频: ${typeCount.video}个`);
-  // choseText.value = choseText.value.join(' ');
-
-  // // 筛选选中的内容用于预览
-  // choseImgArray.value = filteredData;
+watch(selectedRows, (newRows) => {
+  if (rowSelection.value.type === 'radio') {
+    // 单选模式
+    choseText.value = newRows.length > 0 ? '1个稿件' : '0个稿件';
+    // 如果类型是文本，则choseImgArray为空数组
+    if (newRows.length > 0 && newRows[0].type !== 'text') {
+      choseImgArray.value = [newRows[0]];
+    } else {
+      choseImgArray.value = [];
+    }
+  } else {
+    // 多选模式
+    choseText.value = newRows.length + '个稿件';
+    // 过滤掉文本类型，只保留非文本类型的项目
+    choseImgArray.value = newRows.filter(item => item.type !== 'text');
+  }
 });
 
 // 格式化审核状态显示
 const getStatus = (status: number) => {
   switch (status) {
-    case 0:
-      return '待审核';
     case 1:
-      return '审核中';
+      return '待审核';
     case 2:
-      return '已通过';
+      return '审核中';
     case 3:
-      return '已拒绝';
+      return '已通过';
     default:
       return '未知';
   }
@@ -238,10 +236,10 @@ const handleCancel = () => {
 
 // 确定按钮处理
 const handleOk = () => {
-  const selectedData = materialData.value.filter((item) => selectedRowKeys.value.includes(item.id));
   emit('confirm', {
     selectedKeys: selectedRowKeys.value,
-    selectedData,
+    selectedData: selectedRows.value,
+    selectedRows: selectedRows.value,
     choseText: choseText.value,
     choseImgArray: choseImgArray.value,
   });
diff --git a/src/views/property-marketing/assignment-management/index.vue b/src/views/property-marketing/assignment-management/index.vue
index 942eb1e..762757e 100644
--- a/src/views/property-marketing/assignment-management/index.vue
+++ b/src/views/property-marketing/assignment-management/index.vue
@@ -144,6 +144,7 @@ import iconWb from '@/assets/img/platform/icon-wb.png';
 import iconGzh from '@/assets/img/platform/icon-gzh.png';
 import iconWarn from '@/assets/img/media-account/icon-warn.png';
 import { Checkbox, Button, Space, Pagination, notification } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 // 表格分页逻辑
 const { pageInfo, onPageChange, onPageSizeChange } = useTableSelectionWithPagination({
   onPageChange: () => handleSearch(),
@@ -249,7 +250,10 @@ const handleAddTask = () => {
 const handleCreateTask = async (value) => {
   console.log('handleCreateTask', value);
   const res = await createTask(value);
-  console.log('res', res);
+  if (res && res.code === 200) {
+    message.success('创建成功');
+    handleSearch();
+  }
 };
 
 // 添加对DrowPopup组件的引用