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

<template>
  <a-drawer
    title="创建任务"
    cancel-text="取消"
    ok-text="创建任务"
    placement="right"
    v-model:visible="showDriwer"
    @after-visible-change="showDriwerChange"
    width="480px"
    class="task-drawer"
    style="z-index: 999"
  >
    <div class="drawer-content" :style="isActive == 'ai' ? 'height: 376px;' : 'height:216px;'">
      <div class="flex flex-col justify-center items-start">
        <CommonSelect
          v-model="localQuery.accounts"
          :options="accountList || []"
          :multiple="true"
          @change="(val) => handleChange('accounts', val)"
          class="!w-432px select-with-tags"
          placeholder="请选择账号名称"
          :allowSearch="true"
          :maxTagCount="999"
          popup-container=".filter-popup-content"
        />
        <div class="ai-content-generator">
          <div class="flex mt-16px">
            <Button
              class="w-194px h-38px mr-8px"
              :class="isActive == 'ai' ? 'active-chose' : ''"
              @click="handleSelect('ai')"
            >
              <template #icon>
                <img :src="aiIcon" class="w-16 h-16 mr-8px" />
              </template>
              AI生成
            </Button>

            <Button
              class="w-194px h-38px"
              :class="isActive == 'chose' ? 'active-chose' : ''"
              @click="handleSelect('chose')"
            >
              从成品库选择</Button
            >
          </div>
          <div v-show="isActive == 'ai'">
            <!-- 任务描述区域 -->
            <div class="form-section">
              <div class="flex items-center w-400px mt-16px mb-8px">
                <div class="section-title">任务描述</div>
                <div class="font-size-12px text-[#999999]">（非必填）</div>
              </div>
              <div class="w-400px h-126px border-rounded-8px mb-8px" style="background: #fff">
                <a-textarea
                  placeholder="描述你想让AI帮你生成的内容。未填写时，AI 会参考账号历史内容的题材与行业方向，结合当下话题，自动生成文案和图片后发布"
                  class="task-description font-size-12px"
                  :rows="5"
                  v-model="taskDescription"
                />
              </div>
            </div>
            <!-- 素材添加区域 -->
            <div class="form-section material-section">
              <div v-if="hasChoseMaterial" class="flex 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>
          </div>
          <div v-show="isActive == 'chose'">
            <!-- 任务描述区域 -->
            <div class="form-section">
              <div class="flex items-center w-400px mt-16px mb-8px">
                <div class="section-title">发布内容</div>
                <div class="font-size-12px text-[#999999]">（必填）</div>
              </div>
              <div class="form-section material-section">
                <Button @click="handleAddContent" class="add-material-btn">
                  <template #icon>
                    <icon-plus size="16" class="mr-8px" />
                  </template>
                  添加内容
                </Button>

                <p class="material-hint">前往成品库，选择要发布的内容</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 发布计划区域 -->
      <div class="publish-section">
        <div class="flex items-center justify-between w-384px">
          <div class="section-title">发布计划</div>
          <CommonSelect
            v-model="publishType"
            :options="publishOptions"
            @change="handlePublishTypeChange"
            class="w-180px background-#fff publish-type-select"
            :allowSearch="false"
            :multiple="false"
            popup-container=".filter-popup-content"
          />
        </div>

        <div v-if="publishType === 'timing'">
          <div class="line"></div>
          <div class="flex items-center justify-between mt-16px w-384px">
            <div class="section-title">日期</div>
            <a-date-picker
              class="w-180px h-40px background-#fff"
              @change="handleDateChange"
              v-model="currentDate"
              format="YYYY年MM月DD日周dd"
              value-format="YYYY-MM-DD"
            />
          </div>
          <div class="line"></div>
          <div class="flex items-center justify-between mt-16px w-384px">
            <div class="section-title">时间</div>
            <a-time-picker v-model="strValue" format="HH:mm" class="w-180px h-40px background-#fff" />
          </div>
        </div>
      </div>
    </div>

    <!-- 原料库子组件：使用:visible和@update:visible替代v-model -->
    <RawMaterialDrawer
      :visible="showDrawer2"
      @update:visible="val => showDrawer2 = val"
      :query="materialQuery"
      @after-visible-change="handleMaterialDrawerVisibleChange"
      @confirm="handleMaterialConfirm"
      @cancel="handleMaterialCancel"
    />

    <!-- 成品库子组件：使用:visible和@update:visible替代v-model -->
    <FinishedProductDrawer
      :visible="showDrawer3"
      @update:visible="val => showDrawer3 = val"
      :query="productQuery"
      @after-visible-change="handleProductDrawerVisibleChange"
      @confirm="handleProductConfirm"
      @cancel="handleProductCancel"
    />
  </a-drawer>
</template>

<script lang="ts" setup>
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 { 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';
import { getRawMaterialsPage } from '@/api/all/generationWorkshop';
import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
import { EnumManuscriptType } from '@/views/material-center/components/finished-products/manuscript/list/constants';
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 RawMaterialDrawer from './raw-material-drawer.vue';
import FinishedProductDrawer from './finished-product-drawer.vue';

// 状态管理
const choseText = ref('');
const taskDescription = ref('');
const hasChoseMaterial = ref(false);
const isActive = ref('ai');
const showDriwer = ref(false);
const showDrawer2 = ref(false);
const showDrawer3 = ref(false);

// 发布类型选项
const publishOptions = ref([
  { value: 'immediate', label: '立即发布' },
  { value: 'timing', label: '定时发布' },
]);

// 发布类型，默认为立即发布
const publishType = ref('immediate');

// 时间选择相关
const currentDate = ref(new Date());
const strValue = ref(dayjs().format('HH:mm'));

// 定义props和emit
const props = defineProps({
  operators: Array,
  platformOptions: Array,
  accountList: Array,
  query: Object,
});

// 本地筛选状态（保持上次选择）
const localQuery = ref({
  accounts: props.query?.ids || [],
});

// 原料库查询参数
const materialQuery = reactive({
  page: 1,
  page_size: 10,
  platforms: undefined,
  operator_ids: undefined,
  ids: [],
  top_execution_time: undefined,
});

// 成品库查询参数
const productQuery = reactive({
  page: 1,
  page_size: 10,
  platforms: undefined,
  operator_ids: undefined,
  ids: [],
});

// 选中的素材数据
const selectedMaterials = ref({
  keys: [],
  data: [],
  text: '',
  images: []
});

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

// 处理AI/成品库选择切换
const handleSelect = (value) => {
  isActive.value = value;
  if (value === 'ai') {
    showDrawer3.value = false;
  } else {
    showDrawer2.value = false;
  }
};

// 打开原料库抽屉
const handleAddMaterial = () => {
  materialQuery.page = 1;
  materialQuery.page_size = 10;
  showDrawer2.value = true;
};

// 打开成品库抽屉
const handleAddContent = () => {
  productQuery.page = 1;
  productQuery.page_size = 10;
  showDrawer3.value = true;
};

// 处理原料库选择确认
const handleMaterialConfirm = (result) => {
  selectedMaterials.value = {
    keys: result.selectedKeys,
    data: result.selectedData,
    text: result.choseText,
    images: result.choseImgArray
  };
  hasChoseMaterial.value = result.selectedKeys.length > 0;
};

// 处理原料库取消
const handleMaterialCancel = () => {
  // 取消逻辑
};

// 处理成品库选择确认
const handleProductConfirm = (result) => {
  selectedProducts.value = {
    keys: result.selectedKeys,
    data: result.selectedData,
    text: result.choseText,
    images: result.choseImgArray
  };
};

// 处理成品库取消
const handleProductCancel = () => {
  // 取消逻辑
};

// 处理发布类型变化
const handlePublishTypeChange = (value) => {
  publishType.value = value;
};

// 处理日期变化
const handleDateChange = (date) => {
  // 日期处理逻辑
};

// 抽屉显示状态变化
const showDriwerChange = (visible: boolean) => {
  console.log('Main Drawer visible: ', visible);
};

// 原料库抽屉显示状态变化
const handleMaterialDrawerVisibleChange = (visible: boolean) => {
  console.log('Raw Material Drawer visible: ', visible);
};

// 成品库抽屉显示状态变化
const handleProductDrawerVisibleChange = (visible: boolean) => {
  console.log('Finished Product Drawer visible: ', visible);
};

// 处理筛选条件变化
const handleChange = (field, value) => {
  localQuery.value[field] = value;
  emit('filter-change', {
    accounts: localQuery.value.accounts,
  });
};

// 监听主抽屉显示状态，每次打开时更新时间为当前时间
watch(showDriwer, (newVal) => {
  if (newVal) {
    strValue.value = dayjs().format('HH:mm');
  }
});

// 暴露方法给父组件
const showDrawer = (accountInfo = null) => {
  showDriwer.value = true;
  if (accountInfo && accountInfo.id) {
    nextTick(() => {
      localQuery.value.accounts = [accountInfo.name];
    });
  }
};

// 定义事件发射器
const emit = defineEmits(['filter-change', 'create-task']);

// 暴露方法
defineExpose({
  showDrawer,
});
</script>

<style scoped>
.drawer-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.arco-drawer {
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
}

.ai-content-generator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  margin-top: 24px;
  width: 432px;
  background: linear-gradient(to right, #f0f5ff, #fff6f5) !important;
  border-radius: 8px;
}
.active-chose {
  border: #722ed1 1px solid !important;
}

.form-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 400px;
  border-radius: 8px;
}

.publish-section {
  width: 432px;
  padding: 16px 24px;
  background-color: #f7f8fa;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  align-items: start;
  justify-content: space-between;
  margin-top: 24px;
}

.section-title {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.task-description {
  width: 100%;
  font-size: 14px;
  height: 126px;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.task-description::placeholder {
  color: #999;
}

.material-section {
  border-radius: 8px;
  text-align: center;
  background-color: #fff;
  margin-bottom: 8px;
  padding: 16px;
}

.add-material-btn {
  width: 240px;
  height: 38px;
  border-radius: 8px;
  font-size: 14px;
  border: 1px dashed #e0e0e0 !important;
  margin-bottom: 8px;
}

.material-hint {
  color: #939499;
  font-size: 14px;
  margin: 0 40px;
}

.publish-type-select :deep(.ant-select-selection-item) {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.line {
  background-color: #e6e6e8;
  width: 382px;
  height: 1px;
  margin-top: 16px;
}
</style>