添加任务

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

@@ -7,16 +7,175 @@
     v-model:visible="showDriwer"
     @after-visible-change="showDriwerChange"
     width="480px"
-    class="rounded-left"
+    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"
+                />
+              </div>
+            </div>
+            <!-- 素材添加区域 -->
+            <div class="form-section material-section">
+              <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 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="handleAddMaterial" 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="localQuery.accounts"
+            :options="accountList || []"
+            :multiple="true"
+            @change="(val) => handleChange('accounts', val)"
+            class="w-180px background-#fff"
+            placeholder="请选择账号名称"
+            :allowSearch="true"
+            :maxTagCount="999"
+            popup-container=".filter-popup-content"
+          />
+        </div>
+
+        <div v-if="isTiming">
+          <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:value="strValue" format="HH:mm" class="w-180px h-40px background-#fff" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <a-drawer
+      title="成品库"
+      cancel-text="取消"
+      ok-text="确定"
+      placement="right"
+      v-model:visible="showDrawer2"
+      @after-visible-change="showDriwerChange"
+      width="904px"
+      class="task-drawer"
+      style="right: 481px"
+    >
+    </a-drawer>
   </a-drawer>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
+import aiIcon from '@/assets/img/media-account/icon-AI.png';
+import { Checkbox, Button, Space, Pagination, notification } from 'ant-design-vue';
+import dayjs from 'dayjs';
 
+const selectedTab = ref('ai-generate');
+// 定义props和emit
+const props = defineProps({
+  operators: Array,
+  platformOptions: Array,
+  accountList: Array,
+  query: Object,
+});
+const isActive = ref('ai');
+// 本地筛选状态（保持上次选择）
+const localQuery = ref({
+  accounts: props.query?.ids || [],
+});
 const showDriwer = ref(false);
-
+const showDrawer2 = ref(false);
+const emit = defineEmits(['filter-change']);
+const isTiming = ref(true);
+const currentDate = ref(new Date());
+const strValue = ref('12:08');
+const handleSelect = (value) => {
+  console.log('++++++++++', value);
+  isActive.value = value;
+};
+const handleAddMaterial = () => {
+  showDrawer2.value = true;
+};
+const handleDateChange = (date) => {};
 // 暴露方法给父组件
 const showDrawer = () => {
   showDriwer.value = true;
@@ -26,8 +185,176 @@ const showDriwerChange = (visible: boolean) => {
   console.log('Drawer visible: ', visible);
 };
 
+// 处理筛选条件变化（不关闭弹窗，直接触发筛选）
+const handleChange = (field, value) => {
+  localQuery.value[field] = value;
+  // 直接触发筛选变更，不需要确认按钮
+  emit('filter-change', {
+    accounts: localQuery.value.accounts,
+  });
+};
+
 // 使用defineExpose暴露方法
 defineExpose({
-  showDrawer
+  showDrawer,
 });
-</script>
+</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;
+}
+
+.main-container {
+  width: 100%;
+  max-width: 600px;
+  background-color: #fff;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 24px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.tab-group {
+  margin-bottom: 24px;
+  width: 100%;
+}
+
+.tab-button {
+  flex: 1;
+  height: 48px;
+  font-size: 16px;
+}
+
+.ai-tab .ai-icon {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background-color: #722ed1;
+  color: white;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 16px;
+  font-size: 12px;
+  margin-right: 8px;
+}
+
+.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;
+}
+
+.drag-handle {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  background-color: #ff7d00;
+  border-radius: 50%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.material-hint {
+  color: #939499;
+  font-size: 14px;
+  margin: 0 40px;
+}
+
+.size-selector {
+  margin-bottom: 24px;
+  text-align: center;
+}
+
+.size-tag {
+  font-size: 14px;
+  padding: 6px 16px;
+  border-radius: 16px;
+}
+
+.publish-select {
+  width: 100%;
+  height: 40px;
+}
+.line {
+  background-color: #e6e6e8;
+  width: 382px;
+  height: 1px;
+  margin-top: 16px;
+}
+</style>

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

@@ -11,7 +11,7 @@
       <template #content>
         <div class="filter-popup-content">
           <!-- 运营人员 -->
-          <div class="flex items-start mb-3 select-container">
+          <div class="flex items-center mb-3 select-container">
             <div class="w-70px pt-6px">运营人员</div>
             <a-space class="flex-1">
               <CommonSelect
@@ -27,7 +27,7 @@
             </a-space>
           </div>
           <!-- 发布平台 -->
-          <div class="flex items-start mb-3 select-container">
+          <div class="flex items-center mb-3 select-container">
             <div class="w-70px pt-6px">发布平台</div>
             <a-space class="flex-1">
               <CommonSelect
@@ -43,7 +43,7 @@
             </a-space>
           </div>
           <!-- 账号名称 -->
-          <div class="flex items-start mb-3 select-container">
+          <div class="flex items-center mb-3 select-container">
             <div class="w-70px pt-6px">账号名称</div>
             <a-space class="flex-1">
               <CommonSelect
@@ -122,7 +122,7 @@ const handleChange = (field, value) => {
     platform: localQuery.value.platform,
     accounts: localQuery.value.accounts,
   });
-  
+
   // 选择后自动隐藏下拉菜单
   setTimeout(() => {
     visible.value = false;
@@ -178,4 +178,4 @@ const handleClickOutside = () => {
 .select-with-tags :deep(.ant-select-selection-overflow) {
   flex-wrap: wrap !important;
 }
-</style>
+</style>

src/views/property-marketing/assignment-management/components/task-item.vue

@@ -0,0 +1,4 @@
+<template>
+    <div class="task-item"> 
+    </div>
+</template>