文件的分开

src/views/property-marketing/assignment-management/components/colorTip.vue

@@ -0,0 +1,38 @@
+<template>
+  <a-trigger
+    trigger="click"
+    style="
+      background-color: #ffffff;
+      border: 1px solid #d9d9d9;
+      border-radius: 4px;
+      box-shadow: #00000010 0px 2px 8px;
+      padding: 8px;
+      margin-top: 8px;
+    "
+  >
+    <a-button size="small" class="mr-12px color-scheme-btn" :bordered="false">
+      <template #icon>
+        <icon-info-circle-fill size="16" class="color-#55585F" />
+      </template>
+      <template #default>颜色示意</template>
+    </a-button>
+    <template #content>
+      <div class="flex items-center mt-8px w-104px mr-8px">
+        <div style="background-color: #ffae00; width: 16px; height: 16px; margin-right: 5px; border-radius: 4px"></div>
+        <div>待生成</div>
+      </div>
+      <div class="flex items-center mt-8px w-104px mr-8px">
+        <div style="background-color: #6d4cfe; width: 16px; height: 16px; margin-right: 5px; border-radius: 4px"></div>
+        <div>待发布</div>
+      </div>
+      <div class="flex items-center mt-8px w-104px mr-8px">
+        <div style="background-color: #939499; width: 16px; height: 16px; margin-right: 5px; border-radius: 4px"></div>
+        <div>已发布</div>
+      </div>
+      <div class="flex items-center mt-8px mb-4px w-104px mr-8px">
+        <div style="background-color: #f64b31; width: 16px; height: 16px; margin-right: 5px; border-radius: 4px"></div>
+        <div>发布失败</div>
+      </div>
+    </template>
+  </a-trigger>
+</template>

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

@@ -0,0 +1,119 @@
+<!-- // 新增内容： -->
+<template>
+  <a-trigger trigger="click" :clickOutsideToClose="true" :clickToClose="false">
+    <a-button size="small">
+      <template #icon>
+        <icon-filter size="16" class="color-#55585F" />
+      </template>
+      <template #default>筛选</template>
+    </a-button>
+    <template #content>
+      <div class="filter-popup-content">
+        <!-- 运营人员 -->
+        <div class="flex items-center mb-24px">
+          <div class="w-70px">运营人员</div>
+          <a-space class="w-240px">
+            <CommonSelect
+              placeholder="请选择运营人员"
+              :options="operators || []"
+              v-model="localQuery.operator"
+              @change="(val) => handleChange('operator_id', val)"
+              class="!w-240px"
+              :allowSearch="true"
+              popup-container=".filter-popup-content"
+            />
+          </a-space>
+        </div>
+        <!-- 发布平台 -->
+        <div class="flex items-center mb-24px">
+          <div class="w-70px">发布平台</div>
+          <a-space class="w-240px">
+            <CommonSelect
+              :options="platformOptions || []"
+              v-model="localQuery.platform"
+              @change="(val) => handleChange('platform', val)"
+              class="!w-240px"
+              placeholder="请选择发布平台"
+              :allowSearch="true"
+              popup-container=".filter-popup-content"
+            />
+          </a-space>
+        </div>
+        <!-- 账号名称 -->
+        <div class="flex items-center">
+          <div class="w-70px">账号名称</div>
+          <a-space class="w-240px">
+            <CommonSelect
+              v-model="localQuery.accounts"
+              :options="accountList || []"
+              :multiple="true"
+              @change="(val) => handleChange('account_id', val)"
+              class="!w-240px"
+              placeholder="请选择账号名称"
+              :allowSearch="true"
+              popup-container=".filter-popup-content"
+            />
+          </a-space>
+        </div>
+      </div>
+    </template>
+  </a-trigger>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+  operators: Array,
+  platformOptions: Array,
+  accountList: Array,
+  query: Object,
+});
+
+onMounted(() => {});
+const emit = defineEmits(['update:query']);
+
+// 初始化本地查询对象，只设置非空值
+const localQuery = ref({});
+
+// 监听外部 query 变化并同步到本地状态
+watch(
+  () => props.query,
+  (newQuery) => {
+    if (newQuery) {
+      // 只有当值不为空时才设置到localQuery中
+      const filteredQuery = {};
+      if (newQuery.operator) {
+        filteredQuery.operator = newQuery.operator;
+      }
+      if (newQuery.platform) {
+        filteredQuery.platform = newQuery.platform;
+      }
+      if (newQuery.accounts && newQuery.accounts.length > 0) {
+        filteredQuery.accounts = newQuery.accounts;
+      }
+      localQuery.value = { ...filteredQuery };
+    }
+  },
+  { deep: true, immediate: true },
+);
+
+// 处理筛选变化
+const handleChange = (field, value) => {
+  localQuery.value[field] = value;
+  emit('update:query', { ...localQuery.value });
+};
+</script>
+
+<style scoped>
+.filter-popup-content {
+  background-color: #ffffff;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  overflow-y: auto;
+  padding: 24px;
+  margin-top: 8px;
+  margin-right: 25px;
+}
+</style>

src/views/property-marketing/assignment-management/index.vue

@@ -53,7 +53,7 @@
         </div>
       </div>
       <div class="flex items-start">
-        <a-trigger
+        <!-- <a-trigger
           trigger="click"
           style="
             background-color: #ffffff;
@@ -86,82 +86,14 @@
               <div>内容稿件</div>
             </div>
           </template>
-        </a-trigger>
-
-        <a-trigger
-          trigger="click"
-          style="
-            background-color: #ffffff;
-            border: 1px solid #d9d9d9;
-            border-radius: 4px;
-            box-shadow: #00000010 0px 2px 8px;
-            width: 308px;
-            max-height: 400px;
-            overflow-y: auto;
-            padding: 24px;
-            margin-top: 8px;
-          "
-        >
-          <a-button size="small">
-            <template #icon>
-              <icon-filter size="16" class="color-#55585F" />
-            </template>
-            <template #default>筛选</template>
-          </a-button>
-          <template #content>
-            <div>
-              <div class="flex items-center mb-24px">
-                <div class="w-70px">运营人员</div>
-                <a-space class="w-200px">
-                  <CommonSelect
-                    placeholder="请选择运营人员"
-                    :options="operators"
-                    v-model="query.operator"
-                    @change="
-                      (val) => {
-                        handleFilterChange('operator_id', val, operators);
-                      }
-                    "
-                    class="!w-200px"
-                  />
-                </a-space>
-              </div>
-              <div class="flex items-center mb-24px">
-                <div class="w-70px">发布平台</div>
-                <a-space class="w-200px">
-                  <CommonSelect
-                    :options="platformOptions"
-                    v-model="query.platform"
-                    @change="
-                      (val) => {
-                        handleFilterChange('platform', val, platformOptions);
-                      }
-                    "
-                    class="!w-200px"
-                    placeholder="请选择发布平台"
-                  />
-                </a-space>
-              </div>
-              <div class="flex items-center">
-                <div class="w-80px">账号名称</div>
-                <a-space class="w-200px">
-                  <CommonSelect
-                    v-model="query.accounts"
-                    :options="accountList"
-                    :multiple="true"
-                    @change="
-                      (val) => {
-                        handleFilterChange('account_id', val, accountList);
-                      }
-                    "
-                    class="!w-200px"
-                    placeholder="请选择账号名称"
-                  />
-                </a-space>
-              </div>
-            </div>
-          </template>
-        </a-trigger>
+        </a-trigger> -->
+        <colorTip />
+        <FilterPopup
+          :operators="operators"
+          :platformOptions="platformOptions"
+          :accountList="accountList"
+          :query="query"
+        />
       </div>
     </div>
     <div class="flex justify-between items-start mt-16px" style="width: 100%">
@@ -345,6 +277,8 @@ import TaskDetail from './components/TaskDetail.vue';
 import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
 import emptyIcon from '@/assets/img/media-account/icon-empty.png';
 import router from '@/router';
+import colorTip from './components/colorTip.vue';
+import FilterPopup from './components/filter-popup.vue';
 
 const {
   dataSource,
@@ -359,13 +293,13 @@ const {
   DEFAULT_PAGE_INFO,
 } = useTableSelectionWithPagination({
   onPageChange: () => {
-    query.page = pageInfo.page;
-    query.page_size = pageInfo.page_size;
+    query.page = pageInfo.value.page;
+    query.page_size = pageInfo.value.page_size;
     handleSearch();
   },
   onPageSizeChange: () => {
-    query.page = pageInfo.page;
-    query.page_size = pageInfo.page_size;
+    query.page = pageInfo.value.page;
+    query.page_size = pageInfo.value.page_size;
     handleSearch();
   },
 });
@@ -867,8 +801,8 @@ const handleFilterChange = (field: string, value: any, options?: any[]) => {
 // 获取数据
 const handleSearch = () => {
   console.log('handleSearch查询参数:', query);
-  query.page = pageInfo.page;
-  query.page_size = pageInfo.page_size;
+  query.page = pageInfo.value.page;
+  query.page_size = pageInfo.value.page_size;
   getTaskSchedules(query)
     .then((response) => {
       if (response.data) {
@@ -892,6 +826,7 @@ const getOperators = async () => {
         value: op.id,
         name: op.name,
       }));
+      console.log('获取运营人员数据成功:', operatorsData, operators.value);
     }
   } catch (error) {
     console.error('获取运营人员数据失败:', error);
@@ -919,6 +854,7 @@ const getAccountList = async () => {
         platform: account.platform,
         icon: getPlatformIcon(account.platform),
       }));
+      console.log('获取账号数据成功:', accountData, accountList.value);
     }
   } catch (error) {}
 };