成品库和原料库

2025-09-20 16:29:05 +08:00
parent a770e2b74d
commit fb00c0a0b8
2 changed files with 193 additions and 13 deletions
--- a/src/views/material-center/components/finished-products/manuscript/list/components/manuscript-table/constants.ts
+++ b/src/views/material-center/components/finished-products/manuscript/list/components/manuscript-table/constants.ts
@ -43,14 +43,6 @@ export const TABLE_COLUMNS = [
    dataIndex: 'origin',
    width: 120,
  },
-  {
-    title: '上传时间',
-    dataIndex: 'created_at',
-    width: 180,
-    sortable: {
-      sortDirections: ['ascend', 'descend'],
-    },
-  },
  {
    title: '上传人员',
    dataIndex: 'uploader',
--- a/src/views/property-marketing/assignment-management/components/draw-popup.vue
+++ b/src/views/property-marketing/assignment-management/components/draw-popup.vue
@ -81,7 +81,7 @@
                <div class="font-size-12px text-[#999999]">（必填）</div>
              </div>
              <div class="form-section material-section">
-                <Button @click="handleAddMaterial" class="add-material-btn">
+                <Button @click="handleAddContent" class="add-material-btn">
                  <template #icon>
                    <icon-plus size="16" class="mr-8px" />
                  </template>
@ -192,6 +192,101 @@
          <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" 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>
+    <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>
@ -204,6 +299,7 @@
 </template>

 <script lang="ts" setup>
+import { getWorksPage, getWriterLinksGenerate } from '@/api/all/generationWorkshop.ts';
 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, Table } from 'ant-design-vue';
@ -212,6 +308,10 @@ 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';
 const choseText = ref('');
 const columns = ref([
  {
@ -240,6 +340,57 @@ const columns = ref([
  },
 ]);

+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 handleSelect = (value) => {
+  isActive.value = value;
+  if (value == 'ai') {
+    showDrawer3.value = false;
+    handleSearch();
+  } else {
+    showDrawer2.value = false;
+    handleSearchWork();
+  }
+};
+
+const choseImgArray = ref([]);
 // 表格分页逻辑
 const { pageInfo, onPageChange, onPageSizeChange, rowSelection, selectedRowKeys } = useTableSelectionWithPagination({
  rowKey: 'id',
@ -252,6 +403,10 @@ 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;
@ -285,11 +440,22 @@ 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 publishOptions = ref([
  { value: 'immediate', label: '立即发布' },
@ -299,6 +465,27 @@ const publishOptions = ref([
 // 发布类型，默认为立即发布
 const publishType = ref('immediate');

+const getStatus = (status) => {
+  // 处理字符串和数字类型的type值
+  switch (status) {
+    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) {
@ -340,6 +527,7 @@ const localQuery = ref({
 });
 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());
@ -353,15 +541,15 @@ watch(showDriwer, (newVal) => {
  }
 });

-onMounted(() => {
-  handleSearch();
-});
 const handleTabSelect = (value) => {
  isActive.value = value;
 };
 const handleAddMaterial = () => {
  showDrawer2.value = true;
 };
+const handleAddContent = () => {
+  showDrawer3.value = true;
+};
 const handleDateChange = (date) => {};
 // 暴露方法给父组件
 const showDrawer = (accountInfo = null) => {