修改页面

package.json

@@ -11,6 +11,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@arco-design/web-vue": "^2.42.0",
     "@microsoft/fetch-event-source": "^2.0.1",
     "@types/nprogress": "^0.2.0",
     "@vueuse/core": "^9.12.0",

src/components/common-select/index.vue

@@ -11,7 +11,7 @@
     :allowClear="allClear"
     :showSearch="allowSearch"
     showArrow
-    :maxTagCount="maxTagCount"
+    :maxTagCount="maxTagCount !== undefined ? maxTagCount : (multiple ? 3 : undefined)"
     @change="handleChange"
     :filterOption="allowSearch ? filterOption : undefined"
   >
@@ -59,7 +59,7 @@ const props = defineProps({
   },
   maxTagCount: {
     type: Number,
-    default: 3,
+    default: undefined,
   },
   allClear: {
     type: Boolean,

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

@@ -1,105 +0,0 @@
-<template>
-  <div class="flex flex-col items-start cell-detail">
-    <div class="flex items-center" @click="gotoDetail">
-      <img
-        :src="getPlatformIcon(record.platform)"
-        style="border-radius: 8px; width: 16px; height: 16px; margin-right: 8px; font-size: 14px"
-      />
-      {{ record.name || '-' }}
-    </div>
-    <div class="size-12px color-#939499 mt-2px" @click="gotoDetail">
-      {{ timestampToTime1(task.execution_time) }}
-    </div>
-    <div class="size-14px color-#211F24 mt-12px color-#6D4CFE" @click="gotoDetail">{{ task.name || '未命名' }}</div>
-    <div class="flex items-center mt-12px">
-      <div class="custom-time-picker">
-        <a-time-picker
-          format="HH:mm"
-          size="small"
-          :visible="isPanelVisible"
-          @visible-change="handleVisibleChange"
-          @change="handleTimeChange"
-          placeholder="修改发布时间"
-          class="hide-input-container opt-btn mr-12px"
-        />
-      </div>
-      <div class="opt-btn" @click.stop="handleDelete" style="margin-right: 0px">删除</div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { defineProps, defineEmits } from 'vue';
-import { ref, computed } from 'vue';
-
-const props = defineProps({
-  task: {
-    type: Object,
-    required: true,
-  },
-  record: {
-    type: Object,
-    required: true,
-  },
-  getPlatformIcon: {
-    type: Function,
-    required: true,
-  },
-});
-const isPanelVisible = ref(false);
-const toggleTimePanel = () => {
-  isPanelVisible.value = !isPanelVisible.value;
-};
-const handleVisibleChange = (visible: boolean) => {
-  isPanelVisible.value = visible;
-};
-const handleTimeChange = (time: string) => {
-  if (time) {
-    emit('edit-time', props.task, timestampToTime1() + ' ' + time + ':00');
-  }
-};
-
-const timestampToTime1 = (): string => {
-  const timestamp = Date.now();
-  const date = new Date(timestamp);
-
-  const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, '0'); // 补零
-  const day = String(date.getDate()).padStart(2, '0'); // 补零
-
-  return `${year}-${month}-${day}`;
-};
-
-const emit = defineEmits(['edit-time', 'delete', 'gotoDetail']);
-
-const handleDelete = () => {
-  emit('delete', props.task);
-};
-
-const gotoDetail = () => {
-  console.log('跳转详情');
-  emit('gotoDetail', props.task);
-};
-</script>
-
-<style scoped>
-.cell-detail {
-  background-color: #fff;
-  border: 1px solid #d9d9d9;
-  border-radius: 4px;
-  box-shadow: #00000010 0px 2px 8px;
-  padding: 8px 16px;
-  margin-top: 8px;
-}
-
-.opt-btn {
-  font-size: 12px;
-  width: 138px;
-  height: 28px;
-  background-color: #f2f3f5;
-  text-align: center;
-  line-height: 28px;
-  border-radius: 4px;
-  margin-right: 12px;
-}
-</style>

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

@@ -18,17 +18,18 @@
         <div>发布失败</div>
       </div>
     </template>
-    <a-button size="small" class="mr-3 color-scheme-btn">
+    <Button class="w-112px mr-8px" size="middle">
       <template #icon>
         <InfoCircleOutlined class="color-#55585F" />
       </template>
       <template #default>颜色示意</template>
-    </a-button>
+    </Button>
   </a-popover>
 </template>
 
 <script setup>
 import { InfoCircleOutlined } from '@ant-design/icons-vue';
+import { Checkbox, Button, Space, Pagination, notification } from 'ant-design-vue';
 </script>
 
 <style scoped>

src/views/property-marketing/assignment-management/components/date-selector.vue

@@ -0,0 +1,259 @@
+<template>
+  <div class="flex items-center">
+    <!-- 日选择器 -->
+    <a-date-picker
+      class="w-188px size-14px"
+      v-if="choseType === '日'"
+      @change="handleDateChange"
+      v-model="currentDate"
+      format="YYYY年MM月DD日周dd"
+    />
+    <!-- 周选择器 -->
+    <a-week-picker
+      class="w-188px size-14px"
+      v-else-if="choseType === '周'"
+      @change="handleDateChange"
+      v-model="currentDate"
+      format="YYYY年MM月DD日"
+    />
+    <!-- 月选择器 -->
+    <a-month-picker
+      class="w-188px size-14px"
+      v-else
+      @change="handleDateChange"
+      v-model="currentDate"
+      format="YYYY年MM月"
+    />
+
+    <!-- 日期导航按钮 -->
+    <div class="flex items-center ml-12px">
+      <a-button class="mr-4px prv-btn" @click="navigate(-1)" type="text">
+        <template #icon><icon-left /></template>
+      </a-button>
+      <a-button
+        @click="navigateToToday"
+        type="text"
+        style="background-color: #f7f8fa !important; color: #211f24 !important; height: 28px"
+        >今天</a-button
+      >
+      <a-button class="ml-4px prv-btn" @click="navigate(1)" type="text">
+        <template #icon><icon-right /></template>
+      </a-button>
+    </div>
+
+    <!-- 维度切换下拉框 -->
+    <div class="flex items-center">
+      <a-dropdown position="bottom" @select="handleTypeChange" class="w-80px" :popupVisible="dropdownVisible" @popupVisibleChange="handleDropdownVisibleChange">
+        <a-button type="text" class="prv-today"> {{ choseType }}<icon-down class="ml-4px" /> </a-button>
+        <template #content>
+          <a-doption value="日" class="doption">日</a-doption>
+          <a-doption value="周" class="doption">周</a-doption>
+          <a-doption value="月" class="doption">月</a-doption>
+        </template>
+      </a-dropdown>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, defineProps, defineEmits, withDefaults, computed } from 'vue';
+import DateUtils from '@/utils/DateUtils';
+
+// 1. 定义Props：接收父组件初始日期配置
+interface Props {
+  modelValue?: {
+    choseType: '日' | '周' | '月';
+    dayModel?: Date;
+    weekModel?: Date;
+    monthModel?: Date;
+  };
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => ({ choseType: '周', dayModel: new Date(), weekModel: new Date(), monthModel: new Date() }),
+});
+
+// 2. 定义Emits：向父组件传递事件
+const emit = defineEmits([
+  'update:modelValue', // v-model双向绑定
+  'date-change', // 日期/维度切换统一事件（父组件只需要监听这个）
+]);
+
+// 3. 内部状态管理：根据当前维度同步日期
+const choseType = ref<Props['modelValue']['choseType']>(props.modelValue.choseType);
+const dayModel = ref(props.modelValue.dayModel || new Date());
+const weekModel = ref(props.modelValue.weekModel || new Date());
+const monthModel = ref(props.modelValue.monthModel || new Date());
+
+// 下拉菜单显示状态
+const dropdownVisible = ref(false);
+
+// 添加一个标志位，用于避免初始化时触发事件
+let isInitializing = true;
+
+// 计算属性：根据当前维度返回对应日期（简化选择器v-model绑定）
+const currentDate = computed({
+  get() {
+    switch (choseType.value) {
+      case '日':
+        return dayModel.value;
+      case '周':
+        return weekModel.value;
+      case '月':
+        return monthModel.value;
+    }
+  },
+  set(val: Date) {
+    switch (choseType.value) {
+      case '日':
+        dayModel.value = val;
+        break;
+      case '周':
+        weekModel.value = val;
+        break;
+      case '月':
+        monthModel.value = val;
+        break;
+    }
+  },
+});
+
+// 4. 核心工具函数：获取当前维度的日期范围（给父组件用）
+const getDateRange = (): { start: string; end: string } => {
+  if (choseType.value === '周') {
+    const range = DateUtils.getWeekRangeByDate(weekModel.value);
+    return { start: range.startFormatted, end: range.endFormatted };
+  }
+  if (choseType.value === '月') {
+    const date = monthModel.value;
+    const range = DateUtils.getMonthRangeByYearMonth(date.getFullYear(), date.getMonth() + 1);
+    return { start: range.startFormatted, end: range.endFormatted };
+  }
+  // 日维度
+  const dateStr = DateUtils.formatDate(dayModel.value);
+  return { start: dateStr, end: dateStr };
+};
+
+// 5. 维度切换处理（日/周/月）
+const handleTypeChange = (val: '日' | '周' | '月') => {
+  choseType.value = val;
+  // 切换维度时默认选中当天对应的维度日期
+  const today = new Date();
+  currentDate.value = today;
+  emitChange();
+  
+  // 选择后隐藏下拉菜单
+  setTimeout(() => {
+    dropdownVisible.value = false;
+  }, 100);
+};
+
+// 6. 日期选择器变更处理
+const handleDateChange = (val: Date | string | undefined) => {
+  if (!val) return;
+  const selectedDate = val instanceof Date ? val : new Date(val);
+  currentDate.value = selectedDate;
+  emitChange();
+};
+
+// 7. 日期导航（上一个/下一个维度）
+const navigate = (step: 1 | -1) => {
+  const current = currentDate.value;
+  const newDate = new Date(current);
+
+  switch (choseType.value) {
+    case '日':
+      newDate.setDate(current.getDate() + step);
+      break;
+    case '周':
+      newDate.setDate(current.getDate() + step * 7);
+      break;
+    case '月':
+      newDate.setMonth(current.getMonth() + step);
+      break;
+  }
+
+  currentDate.value = newDate;
+  emitChange();
+};
+
+// 8. 跳转今天
+const navigateToToday = () => {
+  currentDate.value = new Date();
+  emitChange();
+};
+
+// 9. 下拉菜单显示状态变化处理
+const handleDropdownVisibleChange = (visible: boolean) => {
+  dropdownVisible.value = visible;
+};
+
+// 10. 统一事件发射：向父组件传递完整信息
+const emitChange = () => {
+  const result = {
+    choseType: choseType.value,
+    dayModel: dayModel.value,
+    weekModel: weekModel.value,
+    monthModel: monthModel.value,
+    dateRange: getDateRange(), // 父组件直接可用的日期范围
+  };
+  emit('update:modelValue', result);
+  // 只有在初始化完成后才触发 date-change 事件
+  if (!isInitializing) {
+    console.log('emitChange', result);
+    emit('date-change', result); // 父组件监听此事件做后续处理
+  }
+};
+
+// 11. 监听父组件Props变化（同步外部修改）
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (newVal) {
+      choseType.value = newVal.choseType;
+      dayModel.value = newVal.dayModel || new Date();
+      weekModel.value = newVal.weekModel || new Date();
+      monthModel.value = newVal.monthModel || new Date();
+      // 只有在初始化完成后才触发 emitChange
+      if (!isInitializing) {
+        emitChange();
+      }
+    }
+  },
+  { deep: true },
+);
+
+// 初始化时触发一次事件
+emitChange();
+
+// 初始化完成，设置标志位
+setTimeout(() => {
+  isInitializing = false;
+}, 0);
+</script>
+
+<style scoped>
+.arco-dropdown-open .arco-icon-down {
+  transform: rotate(180deg);
+  transition: transform 0.2s ease;
+}
+.prv-btn {
+  background-color: #f7f8fa !important; /* 使用正确的6位十六进制颜色值 */
+  width: 28px;
+  height: 28px;
+  border-radius: 4px;
+  color: #211f24 !important;
+}
+.doption {
+  width: 80px !important;
+}
+.prv-today {
+  color: #211f24 !important;
+  width: 80px !important;
+  background-color: #f7f8fa !important;
+  height: 28px;
+  margin-left: 4px;
+  display: flex;
+  justify-content: space-between;
+}
+</style>

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

@@ -1,69 +1,84 @@
-<!-- // 新增内容： -->
 <template>
-  <a-popover trigger="click" :overlayStyle="{ width: '360px' }" overlayClassName="filter-popup-popover">
+  <div class="filter-popup-wrapper">
-    <template #content>
+    <!-- 关键修复：添加手动控制弹窗显示/隐藏的逻辑 -->
-      <div class="filter-popup-content">
+    <a-popover
-        <!-- 运营人员 -->
+      trigger="click"
-        <div class="flex items-center mb-6">
+      :visible="visible"
-          <div class="w-70px">运营人员</div>
+      :overlayStyle="{ width: '360px' }"
-          <a-space class="w-240px">
+      overlayClassName="filter-popup-popover"
-            <CommonSelect
+      @clickoutside="handleClickOutside"
-              placeholder="请选择运营人员"
+    >
-              :options="operators || []"
+      <template #content>
-              v-model="localQuery.operator"
+        <div class="filter-popup-content">
-              @change="(val) => handleChange('operator_id', val)"
+          <!-- 运营人员 -->
-              class="!w-240px"
+          <div class="flex items-start mb-3 select-container">
-              :allowSearch="true"
+            <div class="w-70px pt-6px">运营人员</div>
-              popup-container=".filter-popup-content"
+            <a-space class="flex-1">
-            />
+              <CommonSelect
-          </a-space>
+                placeholder="请选择运营人员"
+                :options="operators || []"
+                v-model="localQuery.operator"
+                @change="(val) => handleChange('operator', val)"
+                class="!w-240px select-with-tags"
+                :allowSearch="true"
+                :maxTagCount="999"
+                popup-container=".filter-popup-content"
+              />
+            </a-space>
+          </div>
+          <!-- 发布平台 -->
+          <div class="flex items-start mb-3 select-container">
+            <div class="w-70px pt-6px">发布平台</div>
+            <a-space class="flex-1">
+              <CommonSelect
+                :options="platformOptions || []"
+                v-model="localQuery.platform"
+                @change="(val) => handleChange('platform', val)"
+                class="!w-240px select-with-tags"
+                placeholder="请选择发布平台"
+                :allowSearch="true"
+                :maxTagCount="999"
+                popup-container=".filter-popup-content"
+              />
+            </a-space>
+          </div>
+          <!-- 账号名称 -->
+          <div class="flex items-start mb-3 select-container">
+            <div class="w-70px pt-6px">账号名称</div>
+            <a-space class="flex-1">
+              <CommonSelect
+                v-model="localQuery.accounts"
+                :options="accountList || []"
+                :multiple="true"
+                @change="(val) => handleChange('accounts', val)"
+                class="!w-240px select-with-tags"
+                placeholder="请选择账号名称"
+                :allowSearch="true"
+                :maxTagCount="999"
+                popup-container=".filter-popup-content"
+              />
+            </a-space>
+          </div>
         </div>
-        <!-- 发布平台 -->
-        <div class="flex items-center mb-6">
-          <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-button size="small">
-      <template #icon>
-        <FilterOutlined class="color-#55585F" />
       </template>
-      <template #default>筛选</template>
+
-    </a-button>
+      <!-- 触发按钮：添加点击事件控制弹窗显示 -->
-  </a-popover>
+      <Button class="w-112px mr-8px" size="middle" @click="visible = !visible">
+        <template #icon>
+          <FilterOutlined class="color-#55585F" />
+        </template>
+        <template #default>筛选</template>
+      </Button>
+    </a-popover>
+  </div>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
+import { ref, watch, defineProps, defineEmits } from 'vue';
 import { FilterOutlined } from '@ant-design/icons-vue';
+import { Button } from 'ant-design-vue';
 
+// 定义props和emit
 const props = defineProps({
   operators: Array,
   platformOptions: Array,
@@ -71,39 +86,52 @@ const props = defineProps({
   query: Object,
 });
 
-onMounted(() => {});
 const emit = defineEmits(['filter-change']);
 
-// 初始化本地查询对象，只设置非空值
+// 弹窗显示状态（关键：控制弹窗显示的核心变量）
-const localQuery = ref({});
+const visible = ref(false);
 
-// 监听外部 query 变化并同步到本地状态
+// 本地筛选状态（保持上次选择）
+const localQuery = ref({
+  operator: props.query?.operator_ids,
+  platform: props.query?.platforms,
+  accounts: props.query?.ids || [],
+});
+
+// 监听父组件query变化，同步到本地
 watch(
   () => props.query,
   (newQuery) => {
     if (newQuery) {
-      // 只有当值不为空时才设置到localQuery中
+      localQuery.value = {
-      const filteredQuery = {};
+        operator: newQuery.operator_ids,
-      if (newQuery.operator) {
+        platform: newQuery.platforms,
-        filteredQuery.operator = newQuery.operator;
+        accounts: newQuery.ids || [],
-      }
+      };
-      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;
-  console.log(localQuery.value);
+  // 直接触发筛选变更，不需要确认按钮
-  emit('filter-change', { ...localQuery.value });
+  emit('filter-change', {
+    operator: localQuery.value.operator,
+    platform: localQuery.value.platform,
+    accounts: localQuery.value.accounts,
+  });
+  
+  // 选择后自动隐藏下拉菜单
+  setTimeout(() => {
+    visible.value = false;
+  }, 100);
+};
+
+// 点击外部关闭弹窗
+const handleClickOutside = () => {
+  visible.value = false;
 };
 </script>
 
@@ -113,9 +141,41 @@ const handleChange = (field, value) => {
   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: 50px;
+  max-height: 400px;
+  overflow-y: auto;
 }
-</style>
+
+.select-container {
+  align-items: flex-start;
+}
+
+.select-with-tags :deep(.ant-select-selector) {
+  height: auto !important;
+  min-height: 32px !important;
+  align-items: flex-start !important;
+}
+
+.select-with-tags :deep(.ant-select-selection-item) {
+  max-width: none !important;
+  overflow: visible !important;
+  text-overflow: unset !important;
+  line-height: 1.5;
+}
+
+/* 确保选择器容器能够适应内容高度 */
+.select-with-tags :deep(.ant-select) {
+  height: auto !important;
+}
+
+.select-with-tags :deep(.ant-select-multiple .ant-select-selection-item) {
+  height: auto !important;
+  align-items: flex-start !important;
+}
+
+.select-with-tags :deep(.ant-select-selection-overflow) {
+  flex-wrap: wrap !important;
+}
+</style>