feat: 实现首页customer filter功能

src/styles/icons/iconfont.css

@@ -1,9 +1,9 @@
 @font-face {
   font-family: "font_family"; /* Project id 4672385 */
-  src: url('iconfont.woff2?t=1767838502999') format('woff2'),
-       url('iconfont.woff?t=1767838502999') format('woff'),
-       url('iconfont.ttf?t=1767838502999') format('truetype'),
-       url('iconfont.svg?t=1767838502999#font_family') format('svg');
+  src: url('iconfont.woff2?t=1769408857052') format('woff2'),
+       url('iconfont.woff?t=1769408857052') format('woff'),
+       url('iconfont.ttf?t=1769408857052') format('truetype'),
+       url('iconfont.svg?t=1769408857052#font_family') format('svg');
 }
 
 .font_family {
@@ -14,6 +14,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-icon_search__user_b:before {
+  content: "\e752";
+}
+
 .icon-icon_convert_b:before {
   content: "\e751";
 }

src/views/Dashboard/src/DashboardView.new.vue

@@ -41,9 +41,13 @@ const changeCancel = (id: any) => {
 }
 
 const customerInfo = ref({
-  customerCode: '',
-  customerType: ''
+  customerCode: [],
+  customerType: []
 })
+const changeCustomerData = (val: string[], type: string) => {
+  console.log(val, type)
+  customerInfo.value[type] = val
+}
 
 //RecentStatusList
 const RecentStatusList = ref()
@@ -737,6 +741,11 @@ const ClickParams = (val: string) => {
   router.push({ path: '/tracking' })
 }
 
+const isShowCumstomerFilter = ref(false)
+const handleCumstomerFilter = () => {
+  isShowCumstomerFilter.value = !isShowCumstomerFilter.value
+}
+
 import DashboardGuide from '../src/components/DashboardGuide.vue'
 import { useGuideStore } from '@/stores/modules/guide'
 import { useThemeStore } from '@/stores/modules/theme'
@@ -933,10 +942,25 @@ const handleGuide = () => {
           }"
           alt=""
         />
+        <el-button
+          class="el-button--default"
+          :class="{ 'customer-filter-focus': isShowCumstomerFilter }"
+          style="padding: 8px"
+          @click="handleCumstomerFilter"
+        >
+          <span class="font_family icon-icon_search__user_b"></span>
+          <div style="margin-left: 4px" class="count" v-if="customerInfo.customerCode.length">
+            <span>{{ customerInfo.customerCode.length }}</span>
+          </div>
+        </el-button>
       </div>
     </div>
     <!-- customer-filter -->
-    <CustomerFilter></CustomerFilter>
+    <CustomerFilter
+      v-if="isShowCumstomerFilter"
+      :data="customerInfo"
+      @changeCustomerData="changeCustomerData"
+    ></CustomerFilter>
     <!-- 图表 -->
     <div class="echarts">
       <VueDraggable
@@ -1400,6 +1424,31 @@ const handleGuide = () => {
     right: -12px;
   }
 }
+.dashboard {
+  .count {
+    display: inline-flex;
+    height: 17px;
+    padding-left: 5px;
+    padding-right: 5px;
+    background-color: var(--color-theme);
+    border-radius: 9px;
+    font-size: 12px;
+    line-height: 19px;
+    text-align: center;
+    span {
+      color: var(--color-white) !important;
+      font-weight: 700;
+    }
+  }
+}
+.customer-filter-focus {
+  border: 1px solid var(--color-btn-default-bg-hover);
+  background-color: var(--color-btn-default-bg-hover);
+  fill: var(--color-theme);
+  span {
+    color: var(--color-theme);
+  }
+}
 .kpi-chart-guide-class {
   top: -2px;
   left: -50px;

src/views/Dashboard/src/components/CustomerFilter.vue

@@ -4,26 +4,45 @@ import axios from 'axios'
 
 const props = defineProps({
   data: {
-    type: Array as () => string[],
-    default: () => []
+    type: Object as () => {
+      customerCode: string[]
+      customerType: string[]
+    }
+  },
+  default: () => {
+    return {
+      customerCode: [],
+      customerType: []
+    }
   }
 })
 
-const selectData = ref<string[]>([])
+const customerInfo = ref({
+  customerCode: [] as string[],
+  customerType: [] as string[]
+})
+// const customerCode = ref<string[]>([])
+// const customerType = ref<string[]>([])
 watch(
   () => props.data,
   (newValue) => {
-    selectData.value = cloneDeep(newValue) || []
+    // customerCode.value = cloneDeep(newValue.customerCode) || []
+    // customerType.value = cloneDeep(newValue.customerType) || []
+    console.log(newValue, 'newValue')
+    customerInfo.value = cloneDeep(newValue) || {
+      customerCode: [],
+      customerType: []
+    }
   },
   {
     deep: true,
     immediate: true
   }
 )
-const emit = defineEmits(['changeData'])
-const changeData = (val: string[]) => {
+const emit = defineEmits(['changeCustomerData'])
+const changeData = (val: string[], type: string) => {
   // 同步选中状态
-  emit('changeData', val)
+  emit('changeCustomerData', val, type)
 }
 
 interface ListItem {
@@ -35,6 +54,9 @@ const options = ref<ListItem[]>([])
 const loading = ref(false)
 const currentController = ref<AbortController | null>(null)
 
+const handleVisibleChange = (visible) => {
+  !visible && (options.value = [])
+}
 const remoteMethod = (query: string) => {
   currentController.value?.abort()
 
@@ -73,7 +95,6 @@ onUnmounted(() => {
   currentController.value?.abort()
 })
 
-const type = ref('')
 const typeOptions = ref([
   {
     label: 'Shipper',
@@ -101,16 +122,20 @@ const typeOptions = ref([
 <template>
   <div class="customer-filter">
     <el-select
-      :model-value="selectData"
+      :model-value="customerInfo.customerCode"
       multiple
       filterable
       reserve-keyword
       placeholder="Search by Customer code, Customer name"
       :loading="loading"
       style="width: 400px"
+      collapse-tags
+      :max-collapse-tags="2"
+      collapse-tags-tooltip
       popper-class="part-id-select-popper"
       :filter-method="debouncedRemoteMethod"
-      @change="changeData"
+      @change="changeData($event, 'customerCode')"
+      @visible-change="handleVisibleChange"
     >
       <el-option
         v-for="item in options"
@@ -119,14 +144,22 @@ const typeOptions = ref([
         :value="item.label"
       >
         <div class="select-option">
-          <el-checkbox :model-value="selectData.includes(item.label)" style="flex: 1">
+          <el-checkbox
+            :model-value="customerInfo.customerCode.includes(item.label)"
+            style="flex: 1"
+          >
             <span style="display: inline-block; width: 220px">{{ item.label }}</span>
             <span class="text-ellipsis" style="flex: 1; width: 200px">{{ item.id }}</span>
           </el-checkbox>
         </div>
       </el-option>
     </el-select>
-    <el-select placeholder="Customer Type" v-model="type" style="width: 240px; margin-left: 8px">
+    <el-select
+      placeholder="Customer Type"
+      :model-value="customerInfo.customerType"
+      @change="changeData($event, 'customerType')"
+      style="width: 240px; margin-left: 8px"
+    >
       <el-option
         v-for="item in typeOptions"
         :key="item.value"