原料库成品库

src/views/property-marketing/assignment-management/components/draw-popup.vue

@@ -56,12 +56,13 @@
                   placeholder="描述你想让AI帮你生成的内容。未填写时，AI 会参考账号历史内容的题材与行业方向，结合当下话题，自动生成文案和图片后发布"
                   class="task-description font-size-12px"
                   :rows="5"
+                  v-model="taskDescription"
                 />
               </div>
             </div>
             <!-- 素材添加区域 -->
             <div class="form-section material-section">
-              <div v-if="hasChose" class="flex items-center"></div>
+              <div v-if="hasChoseMaterial" class="flex items-center"></div>
               <div v-else class="flex flex-col items-center">
                 <Button class="add-material-btn" @click="handleAddMaterial">
                   <template #icon>
@@ -129,343 +130,55 @@
         </div>
       </div>
     </div>
-    <div v-show="isActive == 'ai'">
+
-      <a-drawer
+    <!-- 原料库子组件：使用:visible和@update:visible替代v-model -->
-        title="原料库"
+    <RawMaterialDrawer
-        cancel-text="取消"
+      :visible="showDrawer2"
-        ok-text="确定"
+      @update:visible="val => showDrawer2 = val"
-        placement="right"
+      :query="materialQuery"
-        v-model:visible="showDrawer2"
+      @after-visible-change="handleMaterialDrawerVisibleChange"
-        @after-visible-change="showDriwerChange"
+      @confirm="handleMaterialConfirm"
-        width="904px"
+      @cancel="handleMaterialCancel"
-        class="task-drawer"
-        style="right: 481px"
-      >
-        <Table
-          :data-source="materialData"
-          bordered
-          :columns="columns"
-          :pagination="false"
-          row-key="id"
-          :row-selection="rowSelection"
-        >
-          <template #name="{ record }">
-            <div class="flex items-center">
-              <img :src="record.cover" class="w-64px h-64px border-rounded-8px bg-#F0EDFF" />
-              <div class="flex flex-col ml-8px">
-                <div>{{ record.name }}</div>
-                <div class="text-#999 text-12px">序号：{{ record.uid }}</div>
-              </div>
-            </div>
-          </template>
-          <template #type="{ record }">
-            <div class="flex items-center">
-              {{ getType(record.type) }}
-            </div>
-          </template>
-          <template #from="{ record }">
-            <div class="flex items-center">
-              {{ getFrom(record.type) }}
-            </div>
-          </template>
-          <template #create_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>
-        <!-- 分页控件 -->
-        <div v-if="pageInfo.total > 0" 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 #footer>
+    <!-- 成品库子组件：使用:visible和@update:visible替代v-model -->
-          <div class="flex items-center justify-between">
+    <FinishedProductDrawer
-            <div class="flex items-center">
+      :visible="showDrawer3"
-              <div class="color-#737478 font-size-14px">已选择：</div>
+      @update:visible="val => showDrawer3 = val"
-              <div class="color-#737478 font-size-14px">{{ choseText }}</div>
+      :query="productQuery"
-              <div v-for="item in choseImgArray" :key="item.id" class="ml-16px">
+      @after-visible-change="handleProductDrawerVisibleChange"
-                <img :src="item.cover" alt="" class="w-44px h-44px border-rounded-8px bg-#F0EDFF" />
+      @confirm="handleProductConfirm"
-              </div>
+      @cancel="handleProductCancel"
-            </div>
-            <div class="flex justify-end">
-              <Button @click="handleCancel">取消</Button>
-              <Button class="ml-16px" type="primary" @click="handleOk">确定</Button>
-            </div>
-          </div>
-        </template>
-      </a-drawer>
-    </div>
-    <div v-show="isActive == 'chose'">
-      <a-drawer
-        title="成品库"
-        cancel-text="取消"
-        ok-text="确定"
-        placement="right"
-        v-model:visible="showDrawer3"
-        @after-visible-change="showDriwerChange"
-        width="904px"
-        class="task-drawer"
-        style="right: 481px"
-      >
-        <Table
-          :data-source="materialData"
-          bordered
-          :columns="columns2"
-          :pagination="false"
-          row-key="id"
-          :row-selection="rowSelection"
-        >
-          <template #cover="{ record }">
-            <div class="flex items-center">
-              <img
-                :src="record.cover ? record.cover : icon4"
-                alt=""
-                class="w-44px h-44px border-rounded-8px bg-#F0EDFF"
     />
-            </div>
-          </template>
-          <template #name="{ record }">
-            <div class="flex items-center">
-              <div>{{ record.title }}</div>
-            </div>
-          </template>
-          <template #type="{ record }">
-            <div class="flex items-center">
-              <img
-                :src="record.type === EnumManuscriptType.Image ? icon2 : icon3"
-                width="16"
-                height="16"
-                class="mr-4px"
-              />
-              <span
-                class="cts"
-                :class="record.type === EnumManuscriptType.Image ? '!color-#25C883' : '!color-#6D4CFE'"
-                >{{ record.type === EnumManuscriptType.Image ? '图文' : '视频' }}</span
-              >
-            </div>
-          </template>
-          <template #uploader="{ record }">
-            <div class="flex items-center">
-              {{ record.last_modifier.mobile }}
-            </div>
-          </template>
-          <template #audit_status="{ record }">
-            <div class="flex items-center">
-              {{ getStatus(record.audit_status) }}
-            </div>
-          </template>
-          <template #last_modified_at="{ record }">
-            <div class="flex items-center">
-              {{ record.created_at ? dayjs(record.last_modified_at * 1000).format('YYYY-MM-DD HH:mm:ss') : '-' }}
-            </div>
-          </template>
-        </Table>
-        <div v-if="pageInfo.total > 0" 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 #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" 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>
-        </template>
-      </a-drawer>
-    </div>
   </a-drawer>
 </template>
 
 <script lang="ts" setup>
-import { getWorksPage, getWriterLinksGenerate } from '@/api/all/generationWorkshop.ts';
+import { getWorksPage } from '@/api/all/generationWorkshop.ts';
-import { ref, reactive, onMounted, nextTick } from 'vue';
+import { ref, reactive, watch, nextTick } from 'vue';
 import aiIcon from '@/assets/img/media-account/icon-AI.png';
-import { Checkbox, Button, Space, Pagination, notification, DatePicker, TimePicker, Table } from 'ant-design-vue';
+import { Button, DatePicker, TimePicker } from 'ant-design-vue';
 import { TABS_LIST, ORIGIN_LIST, RawMaterialType } from '@/views/material-center/components/raw-material/constants';
 import dayjs from 'dayjs';
 import { getRawMaterialsPage } from '@/api/all/generationWorkshop';
-// 工具引入
 import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
 import { EnumManuscriptType } from '@/views/material-center/components/finished-products/manuscript/list/constants';
 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 RawMaterialDrawer from './raw-material-drawer.vue';
+import FinishedProductDrawer from './finished-product-drawer.vue';
+
+// 状态管理
 const choseText = ref('');
-const columns = ref([
+const taskDescription = ref('');
-  {
+const hasChoseMaterial = ref(false);
-    title: '文件名称',
-    dataIndex: 'name',
-    width: 200,
-    slots: { customRender: 'name' },
-  },
-  {
-    title: '类型',
-    dataIndex: 'type',
-    width: 100,
-    slots: { customRender: 'type' },
-  },
-  {
-    title: '来源',
-    dataIndex: 'from',
-    width: 100,
-    slots: { customRender: 'from' },
-  },
-  {
-    title: '上传时间',
-    dataIndex: 'created_at',
-    width: 200,
-    slots: { customRender: 'create_at' },
-  },
-]);
-
-const columns2 = ref([
-  {
-    title: '图片/视频',
-    dataIndex: 'cover',
-    width: 200,
-    slots: { customRender: 'cover' },
-  },
-  {
-    title: '文件名称',
-    dataIndex: 'name',
-    width: 200,
-    slots: { customRender: 'name' },
-  },
-  {
-    title: '稿件类型',
-    dataIndex: 'type',
-    width: 100,
-    slots: { customRender: 'type' },
-  },
-  {
-    title: '审核状态',
-    dataIndex: 'audit_status',
-    width: 100,
-    slots: { customRender: 'audit_status' },
-  },
-  {
-    title: '最后修改时间',
-    dataIndex: 'last_modified_at',
-    width: 200,
-    slots: { customRender: 'last_modified_at' },
-  },
-  {
-    title: '上传人员',
-    dataIndex: 'uploader',
-    width: 200,
-    slots: { customRender: 'uploader' },
-  },
-]);
-const handleAddMaterial = () => {
-  handleSearch();
-  showDrawer2.value = true;
-};
-const handleAddContent = () => {
-  handleSearchWork();
-  showDrawer3.value = true;
-};
-const handleSelect = (value) => {
-  isActive.value = value;
-  if (value == 'ai') {
-    showDrawer3.value = false;
-  } else {
-    showDrawer2.value = false;
-  }
-};
-
-const choseImgArray = ref([]);
-// 表格分页逻辑
-const { pageInfo, onPageChange, onPageSizeChange, rowSelection, selectedRowKeys } = useTableSelectionWithPagination({
-  rowKey: 'id',
-  onPageChange: () => handleSearch(),
-  onPageSizeChange: () => handleSearch(),
-});
-
-// 监听选中项变化
-watch(selectedRowKeys, (newVal) => {
-  console.log(newVal);
-  query.ids = newVal;
-  const filteredData = materialData.value.filter((item) => newVal.includes(item.id));
-  choseImgArray.value = materialData.value.filter(
-    (item) => newVal.includes(item.id) && (item.type == 0 || item.type == 1),
-  );
-  console.log('+++++', choseImgArray.value);
-  choseText.value = '';
-  const typeCount = filteredData.reduce((acc, item) => {
-    acc[item.type] = (acc[item.type] || 0) + 1;
-    return acc;
-  }, {});
-  console.log('+++++', typeCount);
-  Object.entries(typeCount).forEach(([type, count]) => {
-    console.log('++++tyype', type, getType(type));
-    console.log(`${getType(type)}: ${count}个`);
-    choseText.value += `${getType(type)}: ${count}个 `;
-  });
-});
-
-// 定义props和emit
-const props = defineProps({
-  operators: Array,
-  platformOptions: Array,
-  accountList: Array,
-  query: Object,
-});
-// 查询参数
-const query = reactive({
-  page: pageInfo.value.page,
-  page_size: pageInfo.value.page_size,
-  platforms: undefined,
-  operator_ids: undefined,
-  ids: [],
-  top_execution_time: undefined,
-});
-const materialData = ref([]);
-const handleSearch = async () => {
-  const res = await getRawMaterialsPage(query);
-  pageInfo.value.total = res.data.total;
-  if (pageInfo.value.page == 1) {
-    materialData.value = [];
-  }
-  materialData.value = [...materialData.value, ...res.data.data];
-};
-
-const handleSearchWork = async () => {
-  const res = await getWorksPage(query);
-  pageInfo.value.total = res.data.total;
-  if (pageInfo.value.page == 1) {
-    materialData.value = [];
-  }
-  materialData.value = [...materialData.value, ...res.data.data];
-};
-
 const isActive = ref('ai');
+const showDriwer = ref(false);
+const showDrawer2 = ref(false);
+const showDrawer3 = ref(false);
+
 // 发布类型选项
 const publishOptions = ref([
   { value: 'immediate', label: '立即发布' },
@@ -475,109 +188,166 @@ const publishOptions = ref([
 // 发布类型，默认为立即发布
 const publishType = ref('immediate');
 
-const getStatus = (status) => {
+// 时间选择相关
-  // 处理字符串和数字类型的type值
+const currentDate = ref(new Date());
-  switch (status) {
+const strValue = ref(dayjs().format('HH:mm'));
-    case 0:
-      return '全部';
-    case RawMaterialType.Video:
-    case '1':
-    case 1:
-      return '待审核';
-    case RawMaterialType.Text:
-    case '2':
-    case 2:
-      return '审核中';
-    case RawMaterialType.Text:
-    case '3':
-    case 3:
-      return '已通过';
-    default:
-      return '未知';
-  }
-};
-const getType = (type) => {
-  // 处理字符串和数字类型的type值
-  switch (type) {
-    case RawMaterialType.Image:
-    case '0':
-    case 0:
-      return '图片';
-    case RawMaterialType.Video:
-    case '1':
-    case 1:
-      return '视频';
-    case RawMaterialType.Text:
-    case '2':
-    case 2:
-      return '文本';
-    default:
-      return '未知';
-  }
-};
 
-const getFrom = (type) => {
+// 定义props和emit
-  switch (type) {
+const props = defineProps({
-    case 0:
+  operators: Array,
-      return '本地上传';
+  platformOptions: Array,
-    case 1:
+  accountList: Array,
-      return 'AI生成';
+  query: Object,
-    default:
+});
-      return '未知';
-  }
-};
-// 处理发布类型变化
-const handlePublishTypeChange = (value) => {
-  publishType.value = value;
-};
 
 // 本地筛选状态（保持上次选择）
 const localQuery = ref({
   accounts: props.query?.ids || [],
 });
-const showDriwer = ref(false);
-const showDrawer2 = ref(false);
-const showDrawer3 = ref(false);
-const emit = defineEmits(['filter-change']);
-const isTiming = ref(true);
-const currentDate = ref(new Date());
-// 将时间选择器默认值设置为当前时间
-const strValue = ref(dayjs().format('HH:mm'));
 
-// 监听抽屉显示状态，每次打开时更新时间为当前时间
+// 原料库查询参数
+const materialQuery = reactive({
+  page: 1,
+  page_size: 10,
+  platforms: undefined,
+  operator_ids: undefined,
+  ids: [],
+  top_execution_time: undefined,
+});
+
+// 成品库查询参数
+const productQuery = reactive({
+  page: 1,
+  page_size: 10,
+  platforms: undefined,
+  operator_ids: undefined,
+  ids: [],
+});
+
+// 选中的素材数据
+const selectedMaterials = ref({
+  keys: [],
+  data: [],
+  text: '',
+  images: []
+});
+
+const selectedProducts = ref({
+  keys: [],
+  data: [],
+  text: '',
+  images: []
+});
+
+// 处理AI/成品库选择切换
+const handleSelect = (value) => {
+  isActive.value = value;
+  if (value === 'ai') {
+    showDrawer3.value = false;
+  } else {
+    showDrawer2.value = false;
+  }
+};
+
+// 打开原料库抽屉
+const handleAddMaterial = () => {
+  materialQuery.page = 1;
+  materialQuery.page_size = 10;
+  showDrawer2.value = true;
+};
+
+// 打开成品库抽屉
+const handleAddContent = () => {
+  productQuery.page = 1;
+  productQuery.page_size = 10;
+  showDrawer3.value = true;
+};
+
+// 处理原料库选择确认
+const handleMaterialConfirm = (result) => {
+  selectedMaterials.value = {
+    keys: result.selectedKeys,
+    data: result.selectedData,
+    text: result.choseText,
+    images: result.choseImgArray
+  };
+  hasChoseMaterial.value = result.selectedKeys.length > 0;
+};
+
+// 处理原料库取消
+const handleMaterialCancel = () => {
+  // 取消逻辑
+};
+
+// 处理成品库选择确认
+const handleProductConfirm = (result) => {
+  selectedProducts.value = {
+    keys: result.selectedKeys,
+    data: result.selectedData,
+    text: result.choseText,
+    images: result.choseImgArray
+  };
+};
+
+// 处理成品库取消
+const handleProductCancel = () => {
+  // 取消逻辑
+};
+
+// 处理发布类型变化
+const handlePublishTypeChange = (value) => {
+  publishType.value = value;
+};
+
+// 处理日期变化
+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;
+  emit('filter-change', {
+    accounts: localQuery.value.accounts,
+  });
+};
+
+// 监听主抽屉显示状态，每次打开时更新时间为当前时间
 watch(showDriwer, (newVal) => {
   if (newVal) {
     strValue.value = dayjs().format('HH:mm');
   }
 });
 
-const handleDateChange = (date) => {};
 // 暴露方法给父组件
 const showDrawer = (accountInfo = null) => {
   showDriwer.value = true;
-  // 如果传入了账号信息，则设置为默认选中
   if (accountInfo && accountInfo.id) {
-    // 使用 nextTick 确保在 DOM 更新后设置默认值
     nextTick(() => {
       localQuery.value.accounts = [accountInfo.name];
     });
   }
 };
 
-const showDriwerChange = (visible: boolean) => {
+// 定义事件发射器
-  console.log('Drawer visible: ', visible);
+const emit = defineEmits(['filter-change', 'create-task']);
-};
 
-// 处理筛选条件变化（不关闭弹窗，直接触发筛选）
+// 暴露方法
-const handleChange = (field, value) => {
-  localQuery.value[field] = value;
-  // 直接触发筛选变更，不需要确认按钮
-  emit('filter-change', {
-    accounts: localQuery.value.accounts,
-  });
-};
-
-// 使用defineExpose暴露方法
 defineExpose({
   showDrawer,
 });
@@ -591,7 +361,6 @@ defineExpose({
   align-items: center;
 }
 
-/* 抽屉左侧圆角样式 */
 .arco-drawer {
   border-top-left-radius: 8px !important;
   border-bottom-left-radius: 8px !important;
@@ -611,40 +380,6 @@ defineExpose({
   border: #722ed1 1px solid !important;
 }
 
-.main-container {
-  width: 100%;
-  max-width: 600px;
-  background-color: #fff;
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-  padding: 24px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-}
-
-.tab-group {
-  margin-bottom: 24px;
-  width: 100%;
-}
-
-.tab-button {
-  flex: 1;
-  height: 48px;
-  font-size: 16px;
-}
-
-.ai-tab .ai-icon {
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  background-color: #722ed1;
-  color: white;
-  border-radius: 50%;
-  text-align: center;
-  line-height: 16px;
-  font-size: 12px;
-  margin-right: 8px;
-}
-
 .form-section {
   display: flex;
   flex-direction: column;
@@ -678,7 +413,7 @@ defineExpose({
   height: 126px;
   border: none !important;
   box-shadow: none !important;
-  outline: none !important; /* 去除默认的聚焦轮廓 */
+  outline: none !important;
 }
 
 .task-description::placeholder {
@@ -702,34 +437,12 @@ defineExpose({
   margin-bottom: 8px;
 }
 
-.drag-handle {
-  position: absolute;
-  width: 16px;
-  height: 16px;
-  background-color: #ff7d00;
-  border-radius: 50%;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
 .material-hint {
   color: #939499;
   font-size: 14px;
   margin: 0 40px;
 }
 
-.size-selector {
-  margin-bottom: 24px;
-  text-align: center;
-}
-
-.size-tag {
-  font-size: 14px;
-  padding: 6px 16px;
-  border-radius: 16px;
-}
-
 .publish-type-select :deep(.ant-select-selection-item) {
   text-align: center;
   display: flex;
@@ -737,22 +450,10 @@ defineExpose({
   justify-content: center;
 }
 
-.publish-select {
-  width: 100%;
-  height: 40px;
-}
 .line {
   background-color: #e6e6e8;
   width: 382px;
   height: 1px;
   margin-top: 16px;
 }
-/* 分页样式 */
-.pagination-box {
-  display: flex;
-  width: 100%;
-  padding: 16px 0;
-  justify-content: flex-end;
-  align-items: center;
-}
 </style>

src/views/property-marketing/assignment-management/components/finished-product-drawer.vue

@@ -0,0 +1,267 @@
+<template>
+  <a-drawer
+    title="成品库"
+    cancel-text="取消"
+    ok-text="确定"
+    placement="right"
+    :visible="visible"
+    @after-visible-change="onAfterVisibleChange"
+    @close="handleClose"
+    width="904px"
+    class="task-drawer"
+    style="right: 481px"
+  >
+    <!-- 成品库表格 -->
+    <Table
+      :data-source="materialData"
+      bordered
+      :columns="columns"
+      :pagination="false"
+      row-key="id"
+      :row-selection="rowSelection"
+    >
+      <template #cover="{ record }">
+        <div class="flex items-center">
+          <img
+            :src="record.cover ? record.cover : icon4"
+            alt="内容预览"
+            class="w-44px h-44px border-rounded-8px bg-#F0EDFF"
+          />
+        </div>
+      </template>
+      <template #name="{ record }">
+        <div class="flex items-center">{{ record.title }}</div>
+      </template>
+      <template #type="{ record }">
+        <div class="flex items-center">
+          <img :src="record.type === EnumManuscriptType.Image ? icon2 : icon3" width="16" height="16" class="mr-4px" />
+          <span class="cts" :class="record.type === EnumManuscriptType.Image ? '!color-#25C883' : '!color-#6D4CFE'">{{
+            record.type === EnumManuscriptType.Image ? '图文' : '视频'
+          }}</span>
+        </div>
+      </template>
+      <template #uploader="{ record }">
+        <div class="flex items-center">{{ record.last_modifier?.mobile || '-' }}</div>
+      </template>
+      <template #audit_status="{ record }">
+        <div class="flex items-center">{{ getStatus(record.audit_status) }}</div>
+      </template>
+      <template #last_modified_at="{ record }">
+        <div class="flex items-center">
+          {{ record.last_modified_at ? dayjs(record.last_modified_at * 1000).format('YYYY-MM-DD HH:mm:ss') : '-' }}
+        </div>
+      </template>
+    </Table>
+
+    <!-- 分页控件 -->
+    <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 #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>
+    </template>
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, defineProps, defineEmits, watchEffect } from 'vue';
+import { Table, Button, Pagination } from 'ant-design-vue';
+import dayjs from 'dayjs';
+import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
+import { EnumManuscriptType } from '@/views/material-center/components/finished-products/manuscript/list/constants';
+import { getWorksPage } from '@/api/all/generationWorkshop.ts';
+// 引入图片资源
+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';
+
+// 定义Props
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+  query: {
+    type: Object,
+    required: true,
+    default: () => ({
+      page: 1,
+      page_size: 10,
+      platforms: undefined,
+      operator_ids: undefined,
+      ids: [],
+      keyword: '',
+      audit_status: undefined,
+      type: undefined,
+    }),
+  },
+});
+
+// 定义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: 'cover', width: 200, slots: { customRender: 'cover' } },
+  { title: '文件名称', dataIndex: 'name', width: 200, slots: { customRender: 'name' } },
+  { title: '稿件类型', dataIndex: 'type', width: 100, slots: { customRender: 'type' } },
+  { title: '审核状态', dataIndex: 'audit_status', width: 100, slots: { customRender: 'audit_status' } },
+  { title: '最后修改时间', dataIndex: 'last_modified_at', width: 200, slots: { customRender: 'last_modified_at' } },
+  { title: '上传人员', dataIndex: 'uploader', width: 200, slots: { customRender: 'uploader' } },
+]);
+
+// 1. 先定义数据获取函数，确保使用最新的query参数
+const fetchProductData = async () => {
+  try {
+    // 使用主组件传递的最新查询参数
+    const params = { ...props.query };
+    console.log('成品库请求参数:', params); // 调试用
+
+    const res = await getWorksPage(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);
+  }
+};
+
+// 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', {
+    selectedKeys: selectedRowKeys.value,
+    selectedData,
+    choseText: choseText.value,
+    choseImgArray: choseImgArray.value,
+  });
+  emit('update:visible', false);
+};
+</script>
+
+<style scoped>
+.pagination-box {
+  display: flex;
+  width: 100%;
+  padding: 16px 0;
+  justify-content: flex-end;
+  align-items: center;
+}
+</style>

src/views/property-marketing/assignment-management/components/raw-material-drawer.vue

@@ -0,0 +1,379 @@
+<template>
+  <a-drawer
+    title="原料库"
+    cancel-text="取消"
+    ok-text="确定"
+    placement="right"
+    :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>
+
+          <!-- 类型列自定义渲染 -->
+          <template #cell:type="{ record }">
+            <span>{{ getType(record.type) }}</span>
+          </template>
+
+          <!-- 来源列自定义渲染 -->
+          <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} 条`"
+          />
+        </div>
+      </div>
+    </a-spin>
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, defineProps, defineEmits } 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 { 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类型
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+    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;
+    },
+    required: true,
+    default: () => ({
+      page: 1,
+      page_size: 10,
+      platforms: undefined,
+      operator_ids: undefined,
+      ids: [],
+      top_execution_time: undefined,
+      keyword: '',
+      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 = {
+    [RawMaterialType.Image]: '图片',
+    [RawMaterialType.Video]: '视频',
+    [RawMaterialType.Text]: '文本',
+  };
+  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 fromMap = {
+    0: '本地上传',
+    1: 'AI生成',
+  };
+  return fromMap[from] || '未知';
+};
+
+const formatDate = (dateString?: string): string => {
+  if (!dateString) return '';
+  return dayjs(dateString).format('YYYY-MM-DD HH:mm:ss');
+};
+
+// 事件处理函数
+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', {
+    selectedKeys: selectedRowKeys.value,
+    selectedData,
+    choseText: choseText.value,
+    choseImgArray: choseImgArray.value,
+  });
+  emit('update:visible', false);
+};
+
+const onAfterVisibleChange = (visible: boolean) => {
+  // 空实现，避免未定义错误
+};
+</script>
+
+<style scoped>
+/* 样式保持不变 */
+.table-container {
+  height: calc(100% - 50px);
+  min-height: 300px;
+  display: flex;
+  flex-direction: column;
+}
+
+.material-table {
+  flex: 1;
+  overflow: auto;
+}
+
+.pagination-container {
+  padding: 16px 0;
+  text-align: right;
+}
+
+.name-cell {
+  display: flex;
+  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>