成品库

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

@@ -139,16 +139,55 @@
       class="task-drawer"
       style="right: 481px"
     >
+      <a-table :data="materialData" bordered :columns="columns">
+        <template #create_at="{ record }">
+          <div class="flex items-center">
+            {{ record.created_at ? dayjs(record.created_at).format('YYYY-MM-DD HH:mm:ss') : '-' }}
+          </div>
+        </template>
+      </a-table>
     </a-drawer>
   </a-drawer>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref, reactive, onMounted } from 'vue';
 import aiIcon from '@/assets/img/media-account/icon-AI.png';
-import { Checkbox, Button, Space, Pagination, notification } from 'ant-design-vue';
+import { Checkbox, Button, Space, Pagination, notification, 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';
 
+const columns = ref([
+  {
+    title: '名称',
+    dataIndex: 'name',
+    width: 200,
+    solts: { customRender: 'name' },
+  },
+  {
+    title: '类型',
+    dataIndex: 'type',
+    width: 100,
+    render: (text) => {
+      return RawMaterialType[text];
+    },
+  },
+  {
+    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({
@@ -157,14 +196,29 @@ const props = defineProps({
   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);
+  console.log(res.data.data);
+  materialData.value = [...materialData.value, ...res.data.data];
+};
 const isActive = ref('ai');
-const publishQuery = ref([{
+const publishQuery = ref([
+  {
     id: 1,
-    name:"立即发布"
-},{
-    id: 2,
-    name:"定时发布"
-}]);
+    name: '立即发布',
+  },
+  { id: 2, name: '定时发布' },
+]);
 // 本地筛选状态（保持上次选择）
 const localQuery = ref({
   accounts: props.query?.ids || [],
@@ -175,6 +229,10 @@ const emit = defineEmits(['filter-change']);
 const isTiming = ref(true);
 const currentDate = ref(new Date());
 const strValue = ref('12:08');
+
+onMounted(() => {
+  handleSearch();
+});
 const handleSelect = (value) => {
   console.log('++++++++++', value);
   isActive.value = value;