添加删除按钮

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

@@ -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;
 };