renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加删除按钮

Browse Source
This commit is contained in:
lq
2025-09-26 17:18:31 +08:00
parent 2b071f0907
commit 6fe39cf08d
1 changed files with 72 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -73,14 +73,36 @@
<div
v-for="item in selectedMaterials.texts"
:key="item.id"
class="flex items-center bg-#F7F8FA border-rounded-8px w-full justify-items-center pt-8px pb-8px pl-12px pr-12px mb-16px"
class="relative flex items-center bg-#F7F8FA border-rounded-8px w-full justify-items-center pt-8px pb-8px pl-12px pr-12px mb-16px"
@mouseenter="item.showDelete = true"
@mouseleave="item.showDelete = false"
>
{{ item }}
{{ item.name || item.title || item }}
<SvgIcon
name="xt-close"
size="14"
@click="handleDeleteText(item)"
v-show="item.showDelete"
class="absolute top-8px right-8px w-20px h-20px cursor-pointer bg-#737478 rounded-4px p-2px color-#FFFFFF"
/>
</div>
<div class="w-full">
<div class="grid grid-cols-4 gap-8px w-full">
<div v-for="(item, index) in selectedMaterials.images" :key="item.id" class="w-88px h-88px">
<div
v-for="(item, index) in selectedMaterials.images"
:key="item.id"
class="relative w-88px h-88px"
@mouseenter="item.showDelete = true"
@mouseleave="item.showDelete = false"
>
<img :src="item.cover" class="w-full h-full rounded-8px" />
<SvgIcon
name="xt-close"
size="14"
@click="handleDeleteImage(item.id)"
v-show="item.showDelete"
class="absolute top--8px right--8px w-16px h-16px cursor-pointer bg-#737478 rounded-50% p-2px color-#FFFFFF"
/>
</div>
</div>
</div>
@ -199,7 +221,7 @@
import { getWorksPage } from '@/api/all/generationWorkshop.ts';
import { ref, reactive, watch, nextTick } from 'vue';
import aiIcon from '@/assets/img/media-account/icon-AI.png';
import { SwapOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import { SwapOutlined, DeleteOutlined, CloseOutlined } from '@ant-design/icons-vue';
import { Button, DatePicker, TimePicker } from 'ant-design-vue';
import { TABS_LIST, ORIGIN_LIST, RawMaterialType } from '@/views/material-center/components/raw-material/constants';
import dayjs from 'dayjs';
@ -368,6 +390,30 @@ const handleDelte = () => {
images: [],
};
};
// 删除文本项
const handleDeleteText = (id) => {
selectedMaterials.value.texts = selectedMaterials.value.texts.filter((item) => item !== id);
selectedMaterials.value.keys = selectedMaterials.value.keys.filter((key) => key !== id);
// 更新hasChoseMaterial状态
updateHasChoseMaterial();
};
// 删除图片项
const handleDeleteImage = (id) => {
selectedMaterials.value.images = selectedMaterials.value.images.filter((item) => item.id !== id);
selectedMaterials.value.keys = selectedMaterials.value.keys.filter((key) => key !== id);
// 更新hasChoseMaterial状态
updateHasChoseMaterial();
};
// 更新hasChoseMaterial状态
const updateHasChoseMaterial = () => {
hasChoseMaterial.value = selectedMaterials.value.texts.length > 0 || selectedMaterials.value.images.length > 0;
};
// 处理原料库选择确认
const handleMaterialConfirm = (result) => {
console.log('handleMaterialConfirm', result);
@ -378,6 +424,28 @@ const handleMaterialConfirm = (result) => {
images: result.choseImgArray,
texts: result.selectedTexts || [],
};
// 为每个文本项添加showDelete属性（如果它们是对象）
if (selectedMaterials.value.texts.length > 0 && typeof selectedMaterials.value.texts[0] === 'object') {
selectedMaterials.value.texts = selectedMaterials.value.texts.map((text) => ({
...text,
showDelete: false,
}));
} else {
// 如果是字符串，则包装成对象
selectedMaterials.value.texts = selectedMaterials.value.texts.map((text, index) => ({
id: `text_${index}`,
name: text,
showDelete: false,
}));
}
// 为每个图片项添加showDelete属性
selectedMaterials.value.images = selectedMaterials.value.images.map((image) => ({
...image,
showDelete: false,
}));
hasChoseMaterial.value = result.selectedKeys.length > 0;
};