From ff7e20f8cf82740952259203d436c53bdeeb2ce1 Mon Sep 17 00:00:00 2001
From: lq <121091329@qq.com>
Date: Tue, 23 Sep 2025 11:02:24 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8E=9F=E6=96=99=E5=BA=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/raw-material-drawer.vue        | 472 +++++++-----------
 1 file changed, 182 insertions(+), 290 deletions(-)

diff --git a/src/views/property-marketing/assignment-management/components/raw-material-drawer.vue b/src/views/property-marketing/assignment-management/components/raw-material-drawer.vue
index f903e6b..a059a3b 100644
--- a/src/views/property-marketing/assignment-management/components/raw-material-drawer.vue
+++ b/src/views/property-marketing/assignment-management/components/raw-material-drawer.vue
@@ -7,83 +7,94 @@
     :visible="visible"
     @after-visible-change="onAfterVisibleChange"
     @close="handleClose"
-    @ok="handleOk"
-    @cancel="handleCancel"
     width="904px"
     class="task-drawer"
     style="right: 481px"
   >
-    <!-- 加载状态 -->
-    <a-spin :spinning="loading" tip="加载中...">
-      <!-- 表格区域 -->
-      <div class="table-container">
-        <Table
-          :data-source="materialData"
-          bordered
-          :columns="columns"
-          :pagination="false"
-          row-key="id"
-          :row-selection="rowSelection"
-        >
-          <!-- 名称列自定义渲染 -->
-          <template #cell:name="{ record }">
-            <div class="name-cell">
-              <img :src="getTypeIcon(record.type)" alt="类型图标" class="type-icon" />
-              <span class="material-name">{{ record.name }}</span>
-            </div>
-          </template>
+    <!-- 成品库表格 -->
+    <Table
+      :data-source="materialData"
+      bordered
+      :columns="columns"
+      :pagination="false"
+      row-key="id"
+      :row-selection="rowSelection"
+    >
+      <template #name="{ record }">
+        <div class="name-cell flex items-center">
+          <img :src="record.cover" alt="类型图标" class="w-44px h-44px border-rounded-8px bg-#F0EDFF" />
+          <div class="flex flex-col ml-8px">
+            <span class="material-name">{{ record.name }}</span>
+            <span class="material-type">{{ record.uid }}</span>
+          </div>
+        </div>
+      </template>
+      <template #type="{ record }">
+        <div class="flex items-center">
+          <span>{{ getType(record.type) }}</span>
+        </div>
+      </template>
+      <template #origin="{ record }">
+        <span>{{ getOrigin(record.origin) }}</span>
+      </template>
+      <template #created_at="{ record }">
+        <div class="flex items-center">
+          {{ record.created_at ? dayjs(record.created_at * 1000).format('YYYY-MM-DD HH:mm:ss') : '-' }}
+        </div>
+      </template>
+    </Table>
 
-          <!-- 类型列自定义渲染 -->
-          <template #cell:type="{ record }">
-            <span>{{ getType(record.type) }}</span>
-          </template>
+    <!-- 分页控件 -->
+    <div class="pagination-box">
+      <a-pagination
+        :total="pageInfo.total"
+        size="mini"
+        show-total
+        show-jumper
+        show-page-size
+        :current="pageInfo.page"
+        :page-size="pageInfo.page_size"
+        @change="onPageChange"
+        @page-size-change="onPageSizeChange"
+      />
+    </div>
 
-          <!-- 来源列自定义渲染 -->
-          <template #cell:from="{ record }">
-            <span>{{ getFrom(record.from) }}</span>
-          </template>
-
-          <!-- 上传时间列自定义渲染 -->
-          <template #cell:created_at="{ record }">
-            <span>{{ formatDate(record.created_at) }}</span>
-          </template>
-        </Table>
-
-        <!-- 分页控件 -->
-        <div v-if="pageInfo.total > 0" class="pagination-container">
-          <a-pagination
-            :current="pageInfo.page"
-            :page-size="pageInfo.page_size"
-            :total="pageInfo.total"
-            @change="handlePageChange"
-            @showSizeChange="handlePageSizeChange"
-            show-size-changer
-            show-quick-jumper
-            :show-total="(total) => `共 ${total} 条`"
-          />
+    <!-- 底部操作栏 -->
+    <template #footer>
+      <div class="flex items-center justify-between">
+        <div class="flex items-center">
+          <div class="color-#737478 font-size-14px">已选择：</div>
+          <div class="color-#737478 font-size-14px">{{ choseText }}</div>
+          <div v-for="item in choseImgArray" :key="item.id" class="ml-16px">
+            <img
+              :src="item.cover ? item.cover : icon4"
+              alt="选中的内容"
+              class="w-44px h-44px border-rounded-8px bg-#F0EDFF"
+            />
+          </div>
+        </div>
+        <div class="flex justify-end">
+          <Button @click="handleCancel">取消</Button>
+          <Button class="ml-16px" type="primary" @click="handleOk">确定</Button>
         </div>
       </div>
-    </a-spin>
+    </template>
   </a-drawer>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch, defineProps, defineEmits } from 'vue';
+import { ref, watch, defineProps, defineEmits, watchEffect } from 'vue';
 import { Table, Button, Pagination } from 'ant-design-vue';
-// // 修正Arco Design图标导入方式
-// import { FileTextOutlined } from '@arco-design/web-vue/es/icons';
 import dayjs from 'dayjs';
-import { RawMaterialType } from '@/views/material-center/components/raw-material/constants';
 import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
+import { EnumManuscriptType } from '@/views/material-center/components/finished-products/manuscript/list/constants';
 import { getRawMaterialsPage } from '@/api/all/generationWorkshop';
-
-// 引入类型图标
-import imgIcon from '@/assets/img/material/icon-image.png';
-import videoIcon from '@/assets/img/material/icon-video.png';
-import textIcon from '@/assets/img/material/icon-text.png';
-import unknownIcon from '@/assets/img/material/icon-unknown.png';
-
-// 定义Props类型
+// 引入图片资源
+import icon2 from '@/assets/img/creative-generation-workshop/icon-photo.png';
+import icon3 from '@/assets/img/creative-generation-workshop/icon-video.png';
+import icon4 from '@/assets/img/error-img.png';
+import { RawMaterialType } from '@/views/material-center/components/raw-material/constants';
+// 定义Props
 const props = defineProps({
   visible: {
     type: Boolean,
@@ -91,16 +102,7 @@ const props = defineProps({
     default: false,
   },
   query: {
-    type: Object as () => {
-      page?: number;
-      page_size?: number;
-      platforms?: any;
-      operator_ids?: any;
-      ids?: any[];
-      top_execution_time?: any;
-      keyword?: string;
-      type?: any;
-    },
+    type: Object,
     required: true,
     default: () => ({
       page: 1,
@@ -108,161 +110,12 @@ const props = defineProps({
       platforms: undefined,
       operator_ids: undefined,
       ids: [],
-      top_execution_time: undefined,
       keyword: '',
+      audit_status: undefined,
       type: undefined,
     }),
   },
 });
-
-// 定义Emits类型
-const emit = defineEmits<{
-  (e: 'update:visible', value: boolean): void;
-  (e: 'after-visible-change', visible: boolean): void;
-  (
-    e: 'confirm',
-    data: {
-      selectedKeys: string[];
-      selectedData: any[];
-      choseText: string;
-      choseImgArray: any[];
-    },
-  ): void;
-  (e: 'cancel'): void;
-}>();
-
-// 内部状态管理
-const materialData = ref<any[]>([]);
-const choseText = ref('');
-const choseImgArray = ref<any[]>([]);
-const loading = ref(false);
-const pageInfo = ref({
-  page: 1,
-  page_size: 10,
-  total: 0,
-});
-
-// 数据获取函数
-const fetchMaterialData = async () => {
-  if (!props.visible) return;
-
-  try {
-    loading.value = true;
-    const params = {
-      ...props.query,
-      page: pageInfo.value.page,
-      page_size: pageInfo.value.page_size,
-    };
-
-    const res = await getRawMaterialsPage(params);
-    console.log('获取原料库数据成功:', res);
-    if (res?.code == 200) {
-      materialData.value = res.data.data;
-      pageInfo.value.total = res.data.total || 0;
-      console.log('获取原料库数据成功++++:', res, materialData.value);
-    } else {
-      materialData.value = [];
-      pageInfo.value.total = 0;
-    }
-  } catch (error) {
-    console.error('获取原料库数据失败:', error);
-    materialData.value = [];
-    pageInfo.value.total = 0;
-  } finally {
-    loading.value = false;
-  }
-};
-
-// 表格列配置
-const columns = ref([
-  {
-    title: '文件名称',
-    dataIndex: 'name',
-    key: 'name',
-    width: 200,
-  },
-  {
-    title: '类型',
-    dataIndex: 'type',
-    key: 'type',
-    width: 100,
-  },
-  {
-    title: '来源',
-    dataIndex: 'from',
-    key: 'from',
-    width: 100,
-  },
-  {
-    title: '上传时间',
-    dataIndex: 'created_at',
-    key: 'created_at',
-    width: 200,
-  },
-]);
-
-// 表格选择逻辑
-const { rowSelection, selectedRowKeys } = useTableSelectionWithPagination({
-  rowKey: 'id',
-});
-
-// 分页处理函数
-const handlePageChange = (page: number) => {
-  pageInfo.value.page = page;
-  fetchMaterialData();
-};
-
-const handlePageSizeChange = (current: number, size: number) => {
-  pageInfo.value.page = 1;
-  pageInfo.value.page_size = size;
-  fetchMaterialData();
-};
-
-// 监听查询参数变化
-watch(
-  () => props.query,
-  (newQuery) => {
-    if (props.visible) {
-      pageInfo.value.page = 1;
-      fetchMaterialData();
-    }
-  },
-  { deep: true },
-);
-
-// 监听抽屉显示状态
-watch(
-  () => props.visible,
-  (visible) => {
-    emit('after-visible-change', visible);
-    if (visible) {
-      pageInfo.value.page = 1;
-      fetchMaterialData();
-    } else {
-      materialData.value = [];
-      selectedRowKeys.value = [];
-      choseText.value = '';
-      choseImgArray.value = [];
-    }
-  },
-);
-
-// 监听选中项变化
-watch(selectedRowKeys, (newKeys) => {
-  const filteredData = materialData.value.filter((item) => newKeys.includes(item.id));
-
-  const typeCount: Record<string, number> = {};
-  filteredData.forEach((item) => {
-    typeCount[item.type] = (typeCount[item.type] || 0) + 1;
-  });
-
-  choseText.value = Object.entries(typeCount)
-    .map(([type, count]) => `${getType(Number(type))}: ${count}个`)
-    .join(' ');
-
-  choseImgArray.value = filteredData.filter((item) => [0, 1].includes(item.type));
-});
-
 // 辅助函数
 const getType = (type: number): string => {
   const typeMap = {
@@ -273,38 +126,128 @@ const getType = (type: number): string => {
   return typeMap[type] || '未知';
 };
 
-const getTypeIcon = (type: number): string => {
-  const iconMap = {
-    [RawMaterialType.Image]: imgIcon,
-    [RawMaterialType.Video]: videoIcon,
-    [RawMaterialType.Text]: textIcon,
-  };
-  return iconMap[type] || unknownIcon;
-};
-
-const getFrom = (from: number): string => {
+const getOrigin = (origin: number): string => {
   const fromMap = {
     0: '本地上传',
     1: 'AI生成',
   };
-  return fromMap[from] || '未知';
+  return fromMap[origin] || '未知';
+};
+// 定义Emits
+const emit = defineEmits(['update:visible', 'after-visible-change', 'confirm', 'cancel']);
+
+// 内部状态管理
+const materialData = ref([]);
+const choseText = ref('');
+const choseImgArray = ref([]);
+
+// 表格列配置
+const columns = ref([
+  { title: '文件名称', dataIndex: 'name', width: 200, slots: { customRender: 'name' } },
+  { title: '类型', dataIndex: 'type', width: 100, slots: { customRender: 'type' } },
+  { title: '来源', dataIndex: 'origin', width: 100, slots: { customRender: 'origin' } },
+  { title: '上传时间', dataIndex: 'created_at', width: 200, slots: { customRender: 'created_at' } },
+]);
+
+// 1. 先定义数据获取函数，确保使用最新的query参数
+const fetchProductData = async () => {
+  try {
+    // 使用主组件传递的最新查询参数
+    const params = { ...props.query };
+    console.log('成品库请求参数:', params); // 调试用
+
+    const res = await getRawMaterialsPage(params);
+    materialData.value = [];
+    pageInfo.value.total = res.data.total;
+    if (pageInfo.value.page === 1) {
+      materialData.value = res.data.data;
+    } else {
+      materialData.value = [...materialData.value, ...res.data.data];
+    }
+  } catch (error) {
+    console.error('获取成品库数据失败:', error);
+  }
 };
 
-const formatDate = (dateString?: string): string => {
-  if (!dateString) return '';
-  return dayjs(dateString).format('YYYY-MM-DD HH:mm:ss');
+// 2. 初始化表格选择逻辑
+const { pageInfo, onPageChange, onPageSizeChange, rowSelection, selectedRowKeys } = useTableSelectionWithPagination({
+  rowKey: 'id',
+  onPageChange: fetchProductData,
+  onPageSizeChange: fetchProductData,
+});
+
+// 监听query参数变化，当主组件传递的参数变化时重新请求数据
+watchEffect(() => {
+  if (props.visible) {
+    console.log('成品库查询参数变化，重新加载数据');
+    fetchProductData();
+  }
+});
+
+// 监听选中项变化
+watch(selectedRowKeys, (newKeys) => {
+  const filteredData = materialData.value.filter((item) => newKeys.includes(item.id));
+
+  // 统计各类型数量
+  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;
+});
+
+// 格式化审核状态显示
+const getStatus = (status: number) => {
+  switch (status) {
+    case 0:
+      return '待审核';
+    case 1:
+      return '审核中';
+    case 2:
+      return '已通过';
+    case 3:
+      return '已拒绝';
+    default:
+      return '未知';
+  }
 };
 
-// 事件处理函数
+// 抽屉显示状态变化处理
+const onAfterVisibleChange = (visible: boolean) => {
+  emit('after-visible-change', visible);
+  if (visible) {
+    // 当抽屉显示时，使用最新参数请求数据
+    fetchProductData();
+  } else {
+    // 关闭时清空数据
+    materialData.value = [];
+    selectedRowKeys.value = [];
+    choseText.value = '';
+    choseImgArray.value = [];
+  }
+};
+
+// 抽屉关闭事件处理
 const handleClose = () => {
   emit('update:visible', false);
 };
 
+// 取消按钮处理
 const handleCancel = () => {
   emit('update:visible', false);
   emit('cancel');
 };
 
+// 确定按钮处理
 const handleOk = () => {
   const selectedData = materialData.value.filter((item) => selectedRowKeys.value.includes(item.id));
   emit('confirm', {
@@ -315,65 +258,14 @@ const handleOk = () => {
   });
   emit('update:visible', false);
 };
-
-const onAfterVisibleChange = (visible: boolean) => {
-  // 空实现，避免未定义错误
-};
 </script>
 
 <style scoped>
-/* 样式保持不变 */
-.table-container {
-  height: calc(100% - 50px);
-  min-height: 300px;
+.pagination-box {
   display: flex;
-  flex-direction: column;
-}
-
-.material-table {
-  flex: 1;
-  overflow: auto;
-}
-
-.pagination-container {
+  width: 100%;
   padding: 16px 0;
-  text-align: right;
-}
-
-.name-cell {
-  display: flex;
+  justify-content: flex-end;
   align-items: center;
 }
-
-.type-icon {
-  width: 24px;
-  height: 24px;
-  margin-right: 8px;
-  object-fit: contain;
-}
-
-.material-name {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 150px;
-}
-
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 40px 0;
-  color: #999;
-}
-
-.empty-icon {
-  margin-bottom: 16px;
-  color: #ccc;
-}
-
-.empty-text {
-  font-size: 14px;
-}
 </style>