原料库

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

@@ -61,9 +61,7 @@
             </div>
             <!-- 素材添加区域 -->
             <div class="form-section material-section">
-              <div v-if="hasChose" class="flex items-center">
-                
-              </div>
+              <div v-if="hasChose" class="flex items-center"></div>
               <div v-else class="flex flex-col items-center">
                 <Button class="add-material-btn" @click="handleAddMaterial">
                   <template #icon>
@@ -132,7 +130,7 @@
       </div>
     </div>
     <a-drawer
-      title="成品库"
+      title="原料库"
       cancel-text="取消"
       ok-text="确定"
       placement="right"
@@ -142,13 +140,32 @@
       class="task-drawer"
       style="right: 481px"
     >
-      <a-table :data="materialData" bordered :columns="columns">
-        <template #create_at="{ record }">
+      <Table :data-source="materialData" bordered :columns="columns" :pagination="false">
+        <template #name="{ record }">
           <div class="flex items-center">
-            {{ record.created_at ? dayjs(record.created_at).format('YYYY-MM-DD HH:mm:ss') : '-' }}
+            <img :src="record.cover" class="w-16px h-16px" />
+            <div class="flex flex-col ml-8px">
+              <div>{{ record.name }}</div>
+              <div class="text-#999 text-12px">序号：{{ record.uid }}</div>
+            </div>
           </div>
         </template>
-      </a-table>
+        <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>
     </a-drawer>
   </a-drawer>
 </template>
@@ -156,7 +173,7 @@
 <script lang="ts" setup>
 import { ref, reactive, onMounted, nextTick } from 'vue';
 import aiIcon from '@/assets/img/media-account/icon-AI.png';
-import { Checkbox, Button, Space, Pagination, notification, DatePicker, TimePicker } from 'ant-design-vue';
+import { Checkbox, Button, Space, Pagination, notification, DatePicker, TimePicker, Table } 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';
@@ -165,33 +182,36 @@ import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPa
 
 const columns = ref([
   {
-    title: '名称',
+    title: '文件名称',
     dataIndex: 'name',
     width: 200,
-    solts: { customRender: 'name' },
+    slots: { customRender: 'name' },
   },
   {
     title: '类型',
     dataIndex: 'type',
     width: 100,
-    render: (text) => {
-      return RawMaterialType[text];
-    },
+    slots: { customRender: 'type' },
   },
   {
-    title: '创建时间',
+    title: '来源',
+    dataIndex: 'from',
+    width: 100,
+    slots: { customRender: 'from' },
+  },
+  {
+    title: '上传时间',
     dataIndex: 'created_at',
     width: 200,
     slots: { customRender: 'create_at' },
   },
 ]);
-
 // 表格分页逻辑
 const { pageInfo, onPageChange, onPageSizeChange } = useTableSelectionWithPagination({
   onPageChange: () => handleSearch(),
   onPageSizeChange: () => handleSearch(),
 });
-const selectedTab = ref('ai-generate');
+
 // 定义props和emit
 const props = defineProps({
   operators: Array,
@@ -211,7 +231,6 @@ const query = reactive({
 const materialData = ref([]);
 const handleSearch = async () => {
   const res = await getRawMaterialsPage(query);
-  console.log(res.data.data);
   materialData.value = [...materialData.value, ...res.data.data];
 };
 const isActive = ref('ai');
@@ -225,18 +244,34 @@ const publishOptions = ref([
 // 发布类型，默认为立即发布
 const publishType = ref('immediate');
 
+const getType = (type) => {
+  switch (type) {
+    case RawMaterialType.Image:
+      return '图片';
+    case RawMaterialType.Video:
+      return '视频';
+    case RawMaterialType.Text:
+      return '文本';
+    default:
+      return '未知';
+  }
+};
+
+const getFrom = (type) => {
+  switch (type) {
+    case 0:
+      return '本地上传';
+    case 1:
+      return 'AI生成';
+    default:
+      return '未知';
+  }
+};
 // 处理发布类型变化
 const handlePublishTypeChange = (value) => {
   publishType.value = value;
 };
 
-const publishQuery = ref([
-  {
-    id: 1,
-    name: '立即发布',
-  },
-  { id: 2, name: '定时发布' },
-]);
 // 本地筛选状态（保持上次选择）
 const localQuery = ref({
   accounts: props.query?.ids || [],