修改样式

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

@@ -12,11 +12,11 @@
     style="z-index: 999"
   >
     <div class="drawer-content" :style="isActive == 'ai' ? 'height: 376px;' : 'height:216px;'">
-      <div class="flex flex-col justify-center items-start">
+      <div class="flex flex-col justify-center">
         <CommonSelect
           v-model="localQuery.accounts"
           :options="accountList || []"
-          :multiple="true"
+          :multiple="false"
           @change="(val) => handleChange('accounts', val)"
           class="!w-432px select-with-tags"
           placeholder="请选择账号名称"
@@ -110,7 +110,15 @@
 
                 <p class="material-hint">前往成品库，选择要发布的内容</p>
               </div>
-              <div v-else class="flex flex-col items-start w-full">
+              <div v-else class="flex flex-col items-start w-full content-center">
+                <div class="opt-btn">
+                  <SwapOutlined class="bg-#00000060 p-4px rounded-4px cursor-pointer" @click="handleAddContent" />
+                  <DeleteOutlined
+                    style="margin-left: 16px"
+                    class="bg-#00000060 p-4px rounded-4px cursor-pointer"
+                    @click="handleDelte"
+                  />
+                </div>
                 <div class="mb-12px">{{ selectedProducts.data[0].title }}</div>
                 <div v-for="item in selectedProducts.images" :key="item.id">
                   <img v-if="item.cover" :src="item.cover" class="w-88 h-88 mr-8px border-rounded-8px mb-12px" />
@@ -182,6 +190,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 { 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';
@@ -195,6 +204,7 @@ import icon4 from '@/assets/img/error-img.png';
 import RawMaterialDrawer from './raw-material-drawer.vue';
 import FinishedProductDrawer from './finished-product-drawer.vue';
 import { message } from 'ant-design-vue';
+import { fetchAccountOperators, getMediaAccountList } from '@/api/all/propertyMarketing';
 // 状态管理
 const choseText = ref('');
 const taskDescription = ref('');
@@ -204,7 +214,17 @@ const isActive = ref('ai');
 const showDriwer = ref(false);
 const showDrawer2 = ref(false);
 const showDrawer3 = ref(false);
+const accountList = ref([]);
+onMounted(() => {
+  getData();
+});
 
+const getData = async () => {
+  const res = await fetchAccountOperators();
+  if (res.code === 200) {
+    accountList.value = res.data;
+  }
+};
 // 发布类型选项
 const publishOptions = ref([
   { value: 'immediate', label: '立即发布' },
@@ -290,7 +310,15 @@ const handleAddContent = () => {
   productQuery.page_size = 10;
   showDrawer3.value = true;
 };
-
+const handleDelte = () => {
+  hasChoseFinishedProducts.value = false;
+  selectedProducts.value = {
+    keys: [],
+    data: [],
+    text: '',
+    images: [],
+  };
+};
 // 处理原料库选择确认
 const handleMaterialConfirm = (result) => {
   console.log('handleMaterialConfirm', result);
@@ -402,7 +430,7 @@ const handleCreateTask = () => {
   const taskData = {
     media_account_id: localQuery.value.ids[0],
     is_ai_generate: isActive.value == 'chose' ? 0 : 1,
-    description: taskDescription.value,
+    ai_prompt: taskDescription.value,
     raw_material_ids: selectedMaterials.value.keys,
     products: selectedProducts.value.keys,
     publish_type: publishType.value == 'immediate' ? 0 : 1,
@@ -534,6 +562,16 @@ defineExpose({
   font-size: 14px;
   margin: 0 40px;
 }
+.content-center {
+  position: relative;
+}
+
+.opt-btn {
+  display: flex;
+  position: absolute; /* 设置为绝对定位 */
+  top: 0; /* 紧贴顶部 */
+  right: 0; /* 紧贴右侧 */
+}
 
 .publish-type-select :deep(.ant-select-selection-item) {
   text-align: center;
@@ -541,7 +579,12 @@ defineExpose({
   align-items: center;
   justify-content: center;
 }
-
+.select-with-tags :deep(.ant-select-selection-item) {
+  text-align: start;
+  display: flex;
+  align-items: center;
+  justify-content: start;
+}
 .line {
   background-color: #e6e6e8;
   width: 382px;