原料库和成品库

2025-09-23 14:28:20 +08:00
parent ff7e20f8cf
commit ab31959733
3 changed files with 82 additions and 52 deletions
--- a/src/views/property-marketing/assignment-management/components/draw-popup.vue
+++ b/src/views/property-marketing/assignment-management/components/draw-popup.vue
@ -62,14 +62,18 @@
            </div>
            <!-- 素材添加区域 -->
            <div class="form-section material-section">
-              <div v-if="hasChoseMaterial" class="flex items-center"></div>
+              <div class="flex items-center"></div>
+
+              <Button class="add-material-btn" @click="handleAddMaterial">
+                <template #icon>
+                  <icon-plus size="16" class="mr-8px" />
+                </template>
+                从原料库添加
+              </Button>
+              <div v-if="hasChoseMaterial" class="flex flex-col items-center">
+                 
+              </div>
              <div v-else class="flex flex-col items-center">
-                <Button class="add-material-btn" @click="handleAddMaterial">
-                  <template #icon>
-                    <icon-plus size="16" class="mr-8px" />
-                  </template>
-                  从原料库添加
-                </Button>
                <p class="material-hint">AI会参考添加的文本、图片、视频等素材，完成符合需求的创作</p>
              </div>
            </div>
@ -134,7 +138,7 @@
    <!-- 原料库子组件：使用:visible和@update:visible替代v-model -->
    <RawMaterialDrawer
      :visible="showDrawer2"
-      @update:visible="val => showDrawer2 = val"
+      @update:visible="(val) => (showDrawer2 = val)"
      :query="materialQuery"
      @after-visible-change="handleMaterialDrawerVisibleChange"
      @confirm="handleMaterialConfirm"
@ -144,7 +148,7 @@
    <!-- 成品库子组件：使用:visible和@update:visible替代v-model -->
    <FinishedProductDrawer
      :visible="showDrawer3"
-      @update:visible="val => showDrawer3 = val"
+      @update:visible="(val) => (showDrawer3 = val)"
      :query="productQuery"
      @after-visible-change="handleProductDrawerVisibleChange"
      @confirm="handleProductConfirm"
@ -229,14 +233,15 @@ const selectedMaterials = ref({
  keys: [],
  data: [],
  text: '',
-  images: []
+  images: [],
+  texts: []
 });

 const selectedProducts = ref({
  keys: [],
  data: [],
  text: '',
-  images: []
+  images: [],
 });

 // 处理AI/成品库选择切换
@ -265,11 +270,13 @@ const handleAddContent = () => {

 // 处理原料库选择确认
 const handleMaterialConfirm = (result) => {
+  console.log('handleMaterialConfirm', result);
  selectedMaterials.value = {
    keys: result.selectedKeys,
    data: result.selectedData,
    text: result.choseText,
-    images: result.choseImgArray
+    images: result.choseImgArray,
+    texts: result.selectedTexts || []
  };
  hasChoseMaterial.value = result.selectedKeys.length > 0;
 };
@ -285,7 +292,7 @@ const handleProductConfirm = (result) => {
    keys: result.selectedKeys,
    data: result.selectedData,
    text: result.choseText,
-    images: result.choseImgArray
+    images: result.choseImgArray,
  };
 };

--- a/src/views/property-marketing/assignment-management/components/finished-product-drawer.vue
+++ b/src/views/property-marketing/assignment-management/components/finished-product-drawer.vue
@ -74,13 +74,6 @@
        <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>
@ -182,22 +175,22 @@ watchEffect(() => {
 // 监听选中项变化
 watch(selectedRowKeys, (newKeys) => {
  const filteredData = materialData.value.filter((item) => newKeys.includes(item.id));
+  choseText.value = filteredData.length + '个稿件';
+  // // 统计各类型数量
+  // const typeCount = filteredData.reduce((acc, item) => {
+  //   const typeKey = item.type === EnumManuscriptType.Image ? 'image' : 'video';
+  //   acc[typeKey] = (acc[typeKey] || 0) + 1;
+  //   return acc;
+  // }, {});

-  // 统计各类型数量
-  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(' ');

-  // 生成选中文本
-  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;
+  // // 筛选选中的内容用于预览
+  // choseImgArray.value = filteredData;
 });

 // 格式化审核状态显示
--- a/src/views/property-marketing/assignment-management/components/raw-material-drawer.vue
+++ b/src/views/property-marketing/assignment-management/components/raw-material-drawer.vue
@ -22,7 +22,11 @@
    >
      <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" />
+          <img
+            :src="record.type == 2 ? icon5 : 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>
@ -72,6 +76,15 @@
              class="w-44px h-44px border-rounded-8px bg-#F0EDFF"
            />
          </div>
+          <div
+            v-for="item in choseTextArray"
+            :key="item.id"
+            class="ml-16px bg-#F7F8FA h-44px overflow-hidden w-75px border-rounded-8px flex items-center"
+          >
+            <div class="whitespace-nowrap overflow-hidden text-ellipsis w-full px-2" :title="item.name">
+              {{ item.name }}
+            </div>
+          </div>
        </div>
        <div class="flex justify-end">
          <Button @click="handleCancel">取消</Button>
@ -94,6 +107,7 @@ 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';
+import icon5 from '../../../../views/material-center/components/raw-material/img/icon-no-text.png';
 // 定义Props
 const props = defineProps({
  visible: {
@ -133,14 +147,27 @@ const getOrigin = (origin: number): string => {
  };
  return fromMap[origin] || '未知';
 };
-// 定义Emits
-const emit = defineEmits(['update:visible', 'after-visible-change', 'confirm', 'cancel']);
-
+// 定义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[];
+      selectedTexts: string[];
+    },
+  ): void;
+  (e: 'cancel'): void;
+}>();
 // 内部状态管理
 const materialData = ref([]);
 const choseText = ref('');
 const choseImgArray = ref([]);
-
+const choseTextArray = ref([]);
 // 表格列配置
 const columns = ref([
  { title: '文件名称', dataIndex: 'name', width: 200, slots: { customRender: 'name' } },
@ -188,21 +215,20 @@ watchEffect(() => {
 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;
-  }, {});
+  const typeCount: Record<string, number> = {};
+  filteredData.forEach((item) => {
+    typeCount[item.type] = (typeCount[item.type] || 0) + 1;
+  });

-  // 生成选中文本
-  choseText.value = [];
-  if (typeCount.image) choseText.value.push(`图文: ${typeCount.image}个`);
-  if (typeCount.video) choseText.value.push(`视频: ${typeCount.video}个`);
-  choseText.value = choseText.value.join(' ');
+  choseText.value = Object.entries(typeCount)
+    .map(([type, count]) => {
+      const typeName = getType(Number(type));
+      return `${typeName}: ${count}个`;
+    })
+    .join(' ');

-  // 筛选选中的内容用于预览
-  choseImgArray.value = filteredData;
+  choseImgArray.value = filteredData.filter((item) => [0, 1].includes(item.type));
+  choseTextArray.value = filteredData.filter((item) => [2].includes(item.type));
 });

 // 格式化审核状态显示
@ -250,11 +276,15 @@ const handleCancel = () => {
 // 确定按钮处理
 const handleOk = () => {
  const selectedData = materialData.value.filter((item) => selectedRowKeys.value.includes(item.id));
+  const selectedTexts = selectedData
+    .filter((item) => item.type === RawMaterialType.Text)
+    .map((item) => item.content || item.name);
  emit('confirm', {
    selectedKeys: selectedRowKeys.value,
    selectedData,
    choseText: choseText.value,
    choseImgArray: choseImgArray.value,
+    selectedTexts: selectedTexts,
  });
  emit('update:visible', false);
 };