原料库和成品库
This commit is contained in:
@ -62,14 +62,18 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- 素材添加区域 -->
|
<!-- 素材添加区域 -->
|
||||||
<div class="form-section material-section">
|
<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">
|
<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>
|
<p class="material-hint">AI会参考添加的文本、图片、视频等素材,完成符合需求的创作</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -134,7 +138,7 @@
|
|||||||
<!-- 原料库子组件:使用:visible和@update:visible替代v-model -->
|
<!-- 原料库子组件:使用:visible和@update:visible替代v-model -->
|
||||||
<RawMaterialDrawer
|
<RawMaterialDrawer
|
||||||
:visible="showDrawer2"
|
:visible="showDrawer2"
|
||||||
@update:visible="val => showDrawer2 = val"
|
@update:visible="(val) => (showDrawer2 = val)"
|
||||||
:query="materialQuery"
|
:query="materialQuery"
|
||||||
@after-visible-change="handleMaterialDrawerVisibleChange"
|
@after-visible-change="handleMaterialDrawerVisibleChange"
|
||||||
@confirm="handleMaterialConfirm"
|
@confirm="handleMaterialConfirm"
|
||||||
@ -144,7 +148,7 @@
|
|||||||
<!-- 成品库子组件:使用:visible和@update:visible替代v-model -->
|
<!-- 成品库子组件:使用:visible和@update:visible替代v-model -->
|
||||||
<FinishedProductDrawer
|
<FinishedProductDrawer
|
||||||
:visible="showDrawer3"
|
:visible="showDrawer3"
|
||||||
@update:visible="val => showDrawer3 = val"
|
@update:visible="(val) => (showDrawer3 = val)"
|
||||||
:query="productQuery"
|
:query="productQuery"
|
||||||
@after-visible-change="handleProductDrawerVisibleChange"
|
@after-visible-change="handleProductDrawerVisibleChange"
|
||||||
@confirm="handleProductConfirm"
|
@confirm="handleProductConfirm"
|
||||||
@ -229,14 +233,15 @@ const selectedMaterials = ref({
|
|||||||
keys: [],
|
keys: [],
|
||||||
data: [],
|
data: [],
|
||||||
text: '',
|
text: '',
|
||||||
images: []
|
images: [],
|
||||||
|
texts: []
|
||||||
});
|
});
|
||||||
|
|
||||||
const selectedProducts = ref({
|
const selectedProducts = ref({
|
||||||
keys: [],
|
keys: [],
|
||||||
data: [],
|
data: [],
|
||||||
text: '',
|
text: '',
|
||||||
images: []
|
images: [],
|
||||||
});
|
});
|
||||||
|
|
||||||
// 处理AI/成品库选择切换
|
// 处理AI/成品库选择切换
|
||||||
@ -265,11 +270,13 @@ const handleAddContent = () => {
|
|||||||
|
|
||||||
// 处理原料库选择确认
|
// 处理原料库选择确认
|
||||||
const handleMaterialConfirm = (result) => {
|
const handleMaterialConfirm = (result) => {
|
||||||
|
console.log('handleMaterialConfirm', result);
|
||||||
selectedMaterials.value = {
|
selectedMaterials.value = {
|
||||||
keys: result.selectedKeys,
|
keys: result.selectedKeys,
|
||||||
data: result.selectedData,
|
data: result.selectedData,
|
||||||
text: result.choseText,
|
text: result.choseText,
|
||||||
images: result.choseImgArray
|
images: result.choseImgArray,
|
||||||
|
texts: result.selectedTexts || []
|
||||||
};
|
};
|
||||||
hasChoseMaterial.value = result.selectedKeys.length > 0;
|
hasChoseMaterial.value = result.selectedKeys.length > 0;
|
||||||
};
|
};
|
||||||
@ -285,7 +292,7 @@ const handleProductConfirm = (result) => {
|
|||||||
keys: result.selectedKeys,
|
keys: result.selectedKeys,
|
||||||
data: result.selectedData,
|
data: result.selectedData,
|
||||||
text: result.choseText,
|
text: result.choseText,
|
||||||
images: result.choseImgArray
|
images: result.choseImgArray,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -74,13 +74,6 @@
|
|||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<div class="color-#737478 font-size-14px">已选择:</div>
|
<div class="color-#737478 font-size-14px">已选择:</div>
|
||||||
<div class="color-#737478 font-size-14px">{{ choseText }}</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>
|
||||||
<div class="flex justify-end">
|
<div class="flex justify-end">
|
||||||
<Button @click="handleCancel">取消</Button>
|
<Button @click="handleCancel">取消</Button>
|
||||||
@ -182,22 +175,22 @@ watchEffect(() => {
|
|||||||
// 监听选中项变化
|
// 监听选中项变化
|
||||||
watch(selectedRowKeys, (newKeys) => {
|
watch(selectedRowKeys, (newKeys) => {
|
||||||
const filteredData = materialData.value.filter((item) => newKeys.includes(item.id));
|
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) => {
|
// choseText.value = [];
|
||||||
const typeKey = item.type === EnumManuscriptType.Image ? 'image' : 'video';
|
// if (typeCount.image) choseText.value.push(`图文: ${typeCount.image}个`);
|
||||||
acc[typeKey] = (acc[typeKey] || 0) + 1;
|
// if (typeCount.video) choseText.value.push(`视频: ${typeCount.video}个`);
|
||||||
return acc;
|
// choseText.value = choseText.value.join(' ');
|
||||||
}, {});
|
|
||||||
|
|
||||||
// 生成选中文本
|
// // 筛选选中的内容用于预览
|
||||||
choseText.value = [];
|
// choseImgArray.value = filteredData;
|
||||||
if (typeCount.image) choseText.value.push(`图文: ${typeCount.image}个`);
|
|
||||||
if (typeCount.video) choseText.value.push(`视频: ${typeCount.video}个`);
|
|
||||||
choseText.value = choseText.value.join(' ');
|
|
||||||
|
|
||||||
// 筛选选中的内容用于预览
|
|
||||||
choseImgArray.value = filteredData;
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// 格式化审核状态显示
|
// 格式化审核状态显示
|
||||||
|
|||||||
@ -22,7 +22,11 @@
|
|||||||
>
|
>
|
||||||
<template #name="{ record }">
|
<template #name="{ record }">
|
||||||
<div class="name-cell flex items-center">
|
<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">
|
<div class="flex flex-col ml-8px">
|
||||||
<span class="material-name">{{ record.name }}</span>
|
<span class="material-name">{{ record.name }}</span>
|
||||||
<span class="material-type">{{ record.uid }}</span>
|
<span class="material-type">{{ record.uid }}</span>
|
||||||
@ -72,6 +76,15 @@
|
|||||||
class="w-44px h-44px border-rounded-8px bg-#F0EDFF"
|
class="w-44px h-44px border-rounded-8px bg-#F0EDFF"
|
||||||
/>
|
/>
|
||||||
</div>
|
</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>
|
||||||
<div class="flex justify-end">
|
<div class="flex justify-end">
|
||||||
<Button @click="handleCancel">取消</Button>
|
<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 icon3 from '@/assets/img/creative-generation-workshop/icon-video.png';
|
||||||
import icon4 from '@/assets/img/error-img.png';
|
import icon4 from '@/assets/img/error-img.png';
|
||||||
import { RawMaterialType } from '@/views/material-center/components/raw-material/constants';
|
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
|
// 定义Props
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
visible: {
|
visible: {
|
||||||
@ -133,14 +147,27 @@ const getOrigin = (origin: number): string => {
|
|||||||
};
|
};
|
||||||
return fromMap[origin] || '未知';
|
return fromMap[origin] || '未知';
|
||||||
};
|
};
|
||||||
// 定义Emits
|
// 定义Emits类型
|
||||||
const emit = defineEmits(['update:visible', 'after-visible-change', 'confirm', 'cancel']);
|
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 materialData = ref([]);
|
||||||
const choseText = ref('');
|
const choseText = ref('');
|
||||||
const choseImgArray = ref([]);
|
const choseImgArray = ref([]);
|
||||||
|
const choseTextArray = ref([]);
|
||||||
// 表格列配置
|
// 表格列配置
|
||||||
const columns = ref([
|
const columns = ref([
|
||||||
{ title: '文件名称', dataIndex: 'name', width: 200, slots: { customRender: 'name' } },
|
{ title: '文件名称', dataIndex: 'name', width: 200, slots: { customRender: 'name' } },
|
||||||
@ -188,21 +215,20 @@ watchEffect(() => {
|
|||||||
watch(selectedRowKeys, (newKeys) => {
|
watch(selectedRowKeys, (newKeys) => {
|
||||||
const filteredData = materialData.value.filter((item) => newKeys.includes(item.id));
|
const filteredData = materialData.value.filter((item) => newKeys.includes(item.id));
|
||||||
|
|
||||||
// 统计各类型数量
|
const typeCount: Record<string, number> = {};
|
||||||
const typeCount = filteredData.reduce((acc, item) => {
|
filteredData.forEach((item) => {
|
||||||
const typeKey = item.type === EnumManuscriptType.Image ? 'image' : 'video';
|
typeCount[item.type] = (typeCount[item.type] || 0) + 1;
|
||||||
acc[typeKey] = (acc[typeKey] || 0) + 1;
|
});
|
||||||
return acc;
|
|
||||||
}, {});
|
|
||||||
|
|
||||||
// 生成选中文本
|
choseText.value = Object.entries(typeCount)
|
||||||
choseText.value = [];
|
.map(([type, count]) => {
|
||||||
if (typeCount.image) choseText.value.push(`图文: ${typeCount.image}个`);
|
const typeName = getType(Number(type));
|
||||||
if (typeCount.video) choseText.value.push(`视频: ${typeCount.video}个`);
|
return `${typeName}: ${count}个`;
|
||||||
choseText.value = choseText.value.join(' ');
|
})
|
||||||
|
.join(' ');
|
||||||
|
|
||||||
// 筛选选中的内容用于预览
|
choseImgArray.value = filteredData.filter((item) => [0, 1].includes(item.type));
|
||||||
choseImgArray.value = filteredData;
|
choseTextArray.value = filteredData.filter((item) => [2].includes(item.type));
|
||||||
});
|
});
|
||||||
|
|
||||||
// 格式化审核状态显示
|
// 格式化审核状态显示
|
||||||
@ -250,11 +276,15 @@ const handleCancel = () => {
|
|||||||
// 确定按钮处理
|
// 确定按钮处理
|
||||||
const handleOk = () => {
|
const handleOk = () => {
|
||||||
const selectedData = materialData.value.filter((item) => selectedRowKeys.value.includes(item.id));
|
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', {
|
emit('confirm', {
|
||||||
selectedKeys: selectedRowKeys.value,
|
selectedKeys: selectedRowKeys.value,
|
||||||
selectedData,
|
selectedData,
|
||||||
choseText: choseText.value,
|
choseText: choseText.value,
|
||||||
choseImgArray: choseImgArray.value,
|
choseImgArray: choseImgArray.value,
|
||||||
|
selectedTexts: selectedTexts,
|
||||||
});
|
});
|
||||||
emit('update:visible', false);
|
emit('update:visible', false);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user