修改ui组件

package.json

@@ -11,7 +11,6 @@
     "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/filter-popup/index.vue

@@ -1,16 +1,10 @@
 <!-- // 新增内容： -->
 <template>
-  <a-trigger trigger="click" :style="triggerStyle">
-    <a-button size="small">
-      <template #icon>
-        <icon-filter size="16" class="color-#55585F" />
-      </template>
-      <template #default>筛选</template>
-    </a-button>
+  <a-popover trigger="click" :overlayStyle="{ width: '300px' }" overlayClassName="filter-popup-popover">
     <template #content>
       <div>
         <!-- 运营人员 -->
-        <div class="flex items-center mb-24px">
+        <div class="flex items-center mb-6">
           <div class="w-70px">运营人员</div>
           <a-space class="w-200px">
             <CommonSelect
@@ -19,11 +13,12 @@
               v-model="localQuery.operator"
               @change="(val) => handleChange('operator_id', val)"
               class="!w-200px"
+              :allowSearch="true"
             />
           </a-space>
         </div>
         <!-- 发布平台 -->
-        <div class="flex items-center mb-24px">
+        <div class="flex items-center mb-6">
           <div class="w-70px">发布平台</div>
           <a-space class="w-200px">
             <CommonSelect
@@ -32,12 +27,13 @@
               @change="(val) => handleChange('platform', val)"
               class="!w-200px"
               placeholder="请选择发布平台"
+              :allowSearch="true"
             />
           </a-space>
         </div>
         <!-- 账号名称 -->
         <div class="flex items-center">
-          <div class="w-80px">账号名称</div>
+          <div class="w-70px">账号名称</div>
           <a-space class="w-200px">
             <CommonSelect
               v-model="localQuery.accounts"
@@ -46,45 +42,74 @@
               @change="(val) => handleChange('account_id', val)"
               class="!w-200px"
               placeholder="请选择账号名称"
+              :allowSearch="true"
             />
           </a-space>
         </div>
       </div>
     </template>
-  </a-trigger>
+    <a-button size="small">
+      <template #icon>
+        <FilterOutlined class="color-#55585F" />
+      </template>
+      <template #default>筛选</template>
+    </a-button>
+  </a-popover>
 </template>
 
 <script setup>
 import { ref, watch } from 'vue';
+import { FilterOutlined } from '@ant-design/icons-vue';
 
 const props = defineProps({
   operators: Array,
   platformOptions: Array,
   accountList: Array,
   query: Object,
+  triggerStyle: Object,
 });
 
-const emit = defineEmits(['update:query']);
+const emit = defineEmits(['filter-change']);
 
-// 初始化本地查询对象
-const localQuery = ref({ ...props.query });
+// 初始化本地查询对象，只设置非空值
+const localQuery = ref({});
 
 // 监听外部 query 变化并同步到本地状态
 watch(
   () => props.query,
   (newQuery) => {
-    localQuery.value = { ...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 },
+  { deep: true, immediate: true },
 );
 
 // 处理筛选变化
 const handleChange = (field, value) => {
   localQuery.value[field] = value;
-  emit('update:query', { ...localQuery.value });
+  console.log(localQuery.value);
+  emit('filter-change', { ...localQuery.value });
 };
 </script>
 
 <style scoped>
-/* 样式保持不变 */
-</style>
+.filter-popup-popover :deep(.ant-popover-inner-content) {
+  background-color: #ffffff;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  padding: 16px;
+}
+</style>

src/main.ts

@@ -13,7 +13,7 @@ import SvgIcon from '@/components/svg-icon/index.vue';
 
 import '@/api/index';
 import './core';
-import '@arco-design/web-vue/dist/arco.css'; // 已移除 Arco 样式
+// import '@arco-design/web-vue/dist/arco.css'; // 已移除 Arco 样式
 
 import 'normalize.css';
 import 'uno.css';

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

@@ -1,21 +1,5 @@
 <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>
+  <a-popover trigger="click" overlayClassName="color-tip-popover">
     <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>
@@ -29,10 +13,35 @@
         <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 class="flex items-center mt-8px 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>
+    <a-button size="small" class="mr-3 color-scheme-btn">
+      <template #icon>
+        <InfoCircleOutlined class="color-#55585F" />
+      </template>
+      <template #default>颜色示意</template>
+    </a-button>
+  </a-popover>
 </template>
+
+<script setup>
+import { InfoCircleOutlined } from '@ant-design/icons-vue';
+</script>
+
+<style scoped>
+.color-tip-popover :deep(.ant-popover-inner-content) {
+  background-color: #ffffff;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  box-shadow: #00000010 0px 2px 8px;
+  padding: 8px;
+  margin-top: 8px;
+}
+
+.color-tip-popover :deep(.ant-popover-arrow) {
+  display: none;
+}
+</style>

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

@@ -1,16 +1,10 @@
 <!-- // 新增内容： -->
 <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>
+  <a-popover trigger="click" :overlayStyle="{ width: '360px' }" overlayClassName="filter-popup-popover">
     <template #content>
       <div class="filter-popup-content">
         <!-- 运营人员 -->
-        <div class="flex items-center mb-24px">
+        <div class="flex items-center mb-6">
           <div class="w-70px">运营人员</div>
           <a-space class="w-240px">
             <CommonSelect
@@ -25,7 +19,7 @@
           </a-space>
         </div>
         <!-- 发布平台 -->
-        <div class="flex items-center mb-24px">
+        <div class="flex items-center mb-6">
           <div class="w-70px">发布平台</div>
           <a-space class="w-240px">
             <CommonSelect
@@ -57,11 +51,18 @@
         </div>
       </div>
     </template>
-  </a-trigger>
+    <a-button size="small">
+      <template #icon>
+        <FilterOutlined class="color-#55585F" />
+      </template>
+      <template #default>筛选</template>
+    </a-button>
+  </a-popover>
 </template>
 
 <script setup>
 import { ref, watch } from 'vue';
+import { FilterOutlined } from '@ant-design/icons-vue';
 
 const props = defineProps({
   operators: Array,
@@ -71,7 +72,7 @@ const props = defineProps({
 });
 
 onMounted(() => {});
-const emit = defineEmits(['update:query']);
+const emit = defineEmits(['filter-change']);
 
 // 初始化本地查询对象，只设置非空值
 const localQuery = ref({});
@@ -101,12 +102,13 @@ watch(
 // 处理筛选变化
 const handleChange = (field, value) => {
   localQuery.value[field] = value;
-  emit('update:query', { ...localQuery.value });
+  console.log(localQuery.value);
+  emit('filter-change', { ...localQuery.value });
 };
 </script>
 
 <style scoped>
-.filter-popup-content {
+.filter-popup-popover :deep(.ant-popover-inner-content) {
   background-color: #ffffff;
   border: 1px solid #d9d9d9;
   border-radius: 4px;
@@ -114,6 +116,6 @@ const handleChange = (field, value) => {
   overflow-y: auto;
   padding: 24px;
   margin-top: 8px;
-  margin-right: 25px;
+  margin-right: 50px;
 }
 </style>

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

@@ -53,46 +53,13 @@
         </div>
       </div>
       <div class="flex items-start">
-        <!-- <a-trigger
-          trigger="click"
-          style="
-            background-color: #ffffff;
-            border: 1px solid #d9d9d9;
-            border-radius: 4px;
-            box-shadow: #00000010 0px 2px 8px;
-            width: 120px;
-            height: 64px;
-            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 mb-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">
-              <div
-                style="background-color: #ffae00; width: 16px; height: 16px; margin-right: 5px; border-radius: 4px"
-              ></div>
-              <div>内容稿件</div>
-            </div>
-          </template>
-        </a-trigger> -->
         <colorTip />
         <FilterPopup
           :operators="operators"
           :platformOptions="platformOptions"
           :accountList="accountList"
           :query="query"
+          @filter-change="handleFilterChange"
         />
       </div>
     </div>
@@ -261,7 +228,7 @@
 
 <script lang="ts" setup>
 import { ref, reactive, onMounted, watch, computed, nextTick } from 'vue';
-import type { TableColumnData } from '@arco-design/web-vue';
+import type { ColumnProps } from 'ant-design-vue/es/table';
 import { getTaskSchedules, delTaskSchedules, editTaskSchedules } from '@/api/all/assignment-management';
 import { fetchAccountOperators, getMediaAccountList } from '@/api/all/propertyMarketing';
 import icon1 from '@/assets/img/platform/icon-dy.png';
@@ -351,7 +318,7 @@ const currentDateRange = reactive({
   start: '',
   end: '',
 });
-const columns = ref<TableColumnData[]>([]);
+const columns = ref<ColumnProps[]>([]);
 const data = ref<any[]>([]);
 const operators = ref([]);
 const accountList = ref([]);
@@ -744,57 +711,29 @@ const handleToday = () => {
   }
 };
 // 处理筛选项选择事件
-const handleFilterChange = (field: string, value: any, options?: any[]) => {
-  console.log(`筛选项 ${field} 发生变化:`, value);
-  // 根据不同的筛选字段执行不同的操作
-  switch (field) {
-    case 'operator_id':
-      console.log('运营人员选择:', value, typeof value, Array.isArray(value), options);
-      // 查找选中的运营人员完整信息
-      if (options && value) {
-        if (Array.isArray(value)) {
-          // 多选情况
-          const selectedOperators = options.filter((op) => value.includes(op.name)).map((op) => op.value);
-          query.operator_ids = selectedOperators;
-        }
-      } else {
-        query.operator_ids = [];
+const handleFilterChange = (field: object) => {
+  console.log(`筛选项发生变化:`, field);
+  // // 根据不同的筛选字段执行不同的操作
+  if (typeof field === 'object' && field !== null) {
+    // 处理传入整个对象的情况
+    Object.keys(field).forEach((key) => {
+      const value = field[key];
+      switch (key) {
+        case 'operator':
+          query.operator_ids = value;
+          break;
+        case 'platform':
+          query.platforms = value;
+          break;
+        case 'accounts':
+          query.ids = value;
+          break;
+        default:
+          // 其他字段直接赋值
+          query[key] = value;
       }
-      console.log('选中的运营人员完整信息(多选):', query.operator_ids);
-      handleSearch();
-      break;
-    case 'account_id':
-      // 查找选中的账号完整信息
-      if (options && value !== undefined && value !== '') {
-        if (Array.isArray(value)) {
-          console.log(options, value);
-          // 多选情况
-          const selectedAccounts = options.filter((op: any) => value.includes(op.name));
-          query.ids = selectedAccounts.map((account: any) => account.value);
-        }
-      } else {
-        query.ids = [];
-      }
-      console.log('选中的账号完整信息(单选):', query.ids);
-      handleSearch();
-      break;
-    case 'platform':
-      // 查找选中的平台完整信息
-      if (options && value !== undefined && value !== '') {
-        console.log(options, value);
-        if (Array.isArray(value)) {
-          // 多选情况
-          const selectedPlatforms = options.filter((op: any) => value.includes(op.id));
-          query.platforms = selectedPlatforms.map((account: any) => account.id);
-        }
-      } else {
-        query.platforms = [];
-      }
-      console.log('发布平台选择:', query.platforms);
-      handleSearch();
-      break;
-    default:
-      console.log('未知筛选字段:', field, value);
+    });
+    handleSearch();
   }
 };