Add data source selection feature to customs data view

- Implemented a new data source selection modal with import and export country options
- Added dynamic data source selection with full and partial selection capabilities
- Enhanced search functionality to use dynamically selected data sources
- Introduced comprehensive lists of import and export data sources from various regions
- Implemented checkbox group with select all and indeterminate state functionality

src/views/adweb/data/customsData.vue

@@ -201,8 +201,13 @@
       </a-row>
 
       <!-- 按钮行 -->
-      <a-row class="button-row" justify="end">
-        <a-button type="primary" @click="handleSearch">搜索</a-button>
+      <a-row class="button-row" justify="space-between">
+        <a-col :span="12">
+          <a-button @click="handleDataSourceClick">数据源</a-button>
+        </a-col>
+        <a-col :span="12" style="text-align: right">
+          <a-button type="primary" @click="handleSearch">搜索</a-button>
+        </a-col>
       </a-row>
     </div>
   </div>
@@ -547,6 +552,58 @@
       </a-row>
     </div>
   </a-modal>
+
+  <!-- 数据源选择弹窗 -->
+  <a-modal v-model:open="isDataSourceVisible" title="数据源选择" width="800px">
+    <a-row :gutter="24">
+      <!-- 进口国家列 -->
+      <a-col :span="12">
+        <div class="data-source-column">
+          <div class="column-header">
+            <h4>进口数据源</h4>
+            <a-checkbox 
+              v-model:checked="allImportSelected"
+              :indeterminate="isImportIndeterminate"
+              @change="handleImportSelectAll"
+            >
+              全选
+            </a-checkbox>
+          </div>
+          <a-checkbox-group v-model:value="selectedImport">
+            <a-checkbox v-for="(sourceCode, displayName) in importCountries" :key="sourceCode" :value="sourceCode">
+              {{ displayName }}
+            </a-checkbox>
+          </a-checkbox-group>
+        </div>
+      </a-col>
+      
+      <!-- 出口国家列 -->
+      <a-col :span="12">
+        <div class="data-source-column">
+          <div class="column-header">
+            <h4>出口数据源</h4>
+            <a-checkbox 
+              v-model:checked="allExportSelected"
+              :indeterminate="isExportIndeterminate"
+              @change="handleExportSelectAll"
+            >
+              全选
+            </a-checkbox>
+          </div>
+          <a-checkbox-group v-model:value="selectedExport">
+            <a-checkbox v-for="(sourceCode, displayName) in exportCountries" :key="sourceCode" :value="sourceCode">
+              {{ displayName }}
+            </a-checkbox>
+          </a-checkbox-group>
+        </div>
+      </a-col>
+    </a-row>
+    
+    <template #footer>
+      <a-button @click="handleDataSourceCancel">取消</a-button>
+      <a-button type="primary" @click="handleDataSourceConfirm">确定</a-button>
+    </template>
+  </a-modal>
 </template>
 
 <script lang="ts" setup>
@@ -635,10 +692,8 @@ const handleSearch = async () => {
 
   // 构建查询参数
   const params = {
-    // 固定参数
-    source_type: 1,
-    data_source: ['IMP_AMERICA_BL_SEA'],
-
+    // 动态获取数据源
+    data_source: [...selectedImport.value, ...selectedExport.value],
     // 表单参数
     prod_desc: form.value.product,
     hs_code: form.value.hsCode,
@@ -709,7 +764,7 @@ const toggleAdvancedSearch = () => {
 onMounted(() => {
   Object.assign(queryParam, {
     source_type: 1,
-    data_source: ['IMP_AMERICA_BL_SEA'],
+    data_source: [...selectedImport.value, ...selectedExport.value], // 初始使用全选数据源
   });
 });
 
@@ -1090,6 +1145,220 @@ const handleSortChange = async (event) => {
   sortMode.value = event.target.value; // Update sort mode
   await handleTableChange(pagination.value)
 };
+
+// 新增数据源相关状态
+const isDataSourceVisible = ref(false);
+
+// 先定义数据源列表
+const importCountries = ref({
+  // 美洲地区 (共29条)
+  
+  '美国提单': 'IMP_AMERICA_BL_SEA',
+  '哥斯达黎加关单': 'IMP_COSTARICA_CD_DEF',
+  '萨尔瓦多提单': 'IMP_ELSALVADOR_BL_DEF',
+  '危地马拉关单': 'IMP_GUATEMALA_CD_DEF',
+  '洪都拉斯提单': 'IMP_HONDURAS_BL_DEF',
+  '墨西哥关单（海运）': 'IMP_MEXICO_CD_SEA',
+  '墨西哥关单（海陆空）': 'IMP_MEXICO_CD_ALL',
+  '尼加拉瓜提单': 'IMP_NICARAGUA_BL_DEF',
+  '巴拿马关单': 'IMP_PANAMA_CD_DEF',
+  '巴拿马关单（自贸区）': 'IMP_PANAMA_CD_ZLC',
+  '阿根廷关单': 'IMP_ARGENTINA_CD_DEF',
+  '玻利维亚关单': 'IMP_BOLIVIA_CD_DEF',
+  '巴西关单': 'IMP_BRAZIL_CD_DEF',
+  '智利关单': 'IMP_CHILE_CD_DEF',
+  '哥伦比亚提单': 'IMP_COLOMBIA_BL_DEF',
+  '哥伦比亚关单': 'IMP_COLOMBIA_CD_DEF',
+  '厄瓜多尔提单': 'IMP_ECUADOR_BL_ALL',
+  '厄瓜多尔关单': 'IMP_ECUADOR_CD_DEF',
+  '厄瓜多尔关单（周更新）': 'IMP_ECUADOR_CD_UDW',
+  '巴拉圭关单': 'IMP_PARAGUAY_CD_DEF',
+  '秘鲁关单': 'IMP_PERU_CD_DEF',
+  '秘鲁提单': 'IMP_PERU_BL_ALL',
+  '秘鲁（周更新）': 'IMP_PERU_CD_UDW',
+  '乌拉圭提单': 'IMP_URUGUAY_BL_DEF',
+  '乌拉圭关单': 'IMP_URUGUAY_CD_DEF',
+  '委内瑞拉提单': 'IMP_VENEZUELA_BL_ALL',
+  '委内瑞拉关单': 'IMP_VENEZUELA_CD_DEF',
+  '巴拿马提单': 'IMP_PANAMA_BL_DEF',
+  '阿根廷（半月更新）': 'IMP_ARGENTINA_CD_UDW',
+
+  // 欧洲地区 (8条)
+  '英国': 'IMP_ENGLAND_ED_DEF',
+  '法国': 'IMP_FRANCE_ED_DEF',
+  '德国': 'IMP_GERMANY_ED_DEF',
+  '俄罗斯关单': 'IMP_RUSSIA_CD_DEF',
+  '乌克兰关单': 'IMP_UKRAINE_CD_DEF',
+  '哈萨克斯坦关单': 'IMP_KAZAKHSTAN_CD_DEF',
+  '土耳其关单': 'IMP_TURKEY_CD_DEF',
+  '摩尔多瓦关单': 'IMP_MOLDOVA_CD_DEF',
+
+  // 亚洲地区 (16条)
+  '印度关单': 'IMP_INDIA_CD_DEF',
+  '印度（周更新）': 'IMP_INDIA_CD_UDW',
+  '日本': 'IMP_JAPAN_ED_DEF',
+  '韩国': 'IMP_KOREA_ED_DEF',
+  '吉尔吉斯斯坦关单': 'IMP_KYRGYZSTAN_CD_DEF',
+  '巴基斯坦提单': 'IMP_PAKISTAN_BL_DEF',
+  '巴基斯坦关单': 'IMP_PAKISTAN_CD_DEF',
+  '菲律宾关单': 'IMP_PHILIPPINES_CD_DEF',
+  '斯里兰卡关单': 'IMP_SRILANKA_CD_DEF',
+  '台湾': 'IMP_TAIWAN_ED_DEF',
+  '乌兹别克斯坦关单': 'IMP_UZBEKISTAN_CD_DEF',
+  '越南双边': 'IMP_VIETNAM_CD_CVB',
+  '越南全境（英文）': 'IMP_VIETNAM_CD_AEN',
+  '越南全境（越南语）': 'IMP_VIETNAM_CD_AVN',
+  '新加坡关单': 'IMP_SINGAPORE_CD_DEF',
+  '泰国': 'IMP_THAILAND_ED_DEF',
+
+  // 非洲及其他 (19条)
+  '埃塞俄比亚关单': 'IMP_ETHIOPIA_CD_DEF',
+  '印度尼西亚关单': 'IMP_INDONESIA_CD_DEF',
+  '乌干达关单': 'IMP_UGANDA_CD_DEF',
+  '肯尼亚关单': 'IMP_KENYA_CD_DEF',
+  '纳米比亚关单': 'IMP_NAMIBIA_CD_DEF',
+  '利比里亚关单': 'IMP_LIBERIA_CD_DEF',
+  '博茨瓦纳关单': 'IMP_BOTSWANA_CD_DEF',
+  '孟加拉国关单': 'IMP_BANGLADESH_CD_DEF',
+  '刚果金关单': 'IMP_CONGOKINSHASA_CD_DEF',
+  '尼日利亚关单': 'IMP_NIGERIA_CD_DEF',
+  '莱索托关单': 'IMP_LESOTHO_CD_DEF',
+  '科特迪瓦关单': 'IMP_COTELVORY_CD_DEF',
+  '斐济关单': 'IMP_FIJI_CD_DEF',
+  '加纳关单': 'IMP_GHANA_CD_DEF',
+  '喀麦隆关单': 'IMP_CAMEROON_CD_DEF',
+  '乍得关单': 'IMP_CHAD_CD_DEF',
+  '中非关单': 'IMP_CENTRALAFRICAN_CD_DEF',
+  '津巴布韦关单': 'IMP_ZIMBABWE_CD_DEF',
+  '坦桑尼亚关单': 'IMP_TANZANIA_CD_DEF',
+
+  // 特殊数据 (6条)
+  '一带一路': 'IMP_SILKWAY_CD_DEF',
+  'Global Shipments': 'IMP_GLOBAL_BL_DEF',
+  '中美洲边贸（周更新）': 'IMP_CABT_CD_UDW',
+  '中美洲边贸（月更新）': 'IMP_CABT_CD_DEF',
+  '过境数据': 'IMP_EACROSS_CD_DEF',
+  '舱单航运数据': 'IMP_MANIFEST_BL_DEF'
+});
+
+const exportCountries = ref({
+  // 美洲地区 (23条)
+  '美国提单': 'EXP_AMERICA_BL_SEA',
+  '哥斯达黎加关单': 'EXP_COSTARICA_CD_DEF',
+  '危地马拉关单': 'EXP_GUATEMALA_CD_DEF',
+  '巴拿马关单（自贸区）': 'EXP_PANAMA_CD_ZLC',
+  '巴拿马关单': 'EXP_PANAMA_CD_DEF',
+  '阿根廷关单': 'EXP_ARGENTINA_CD_DEF',
+  '阿根廷（半月更新）': 'EXP_ARGENTINA_CD_UDW',
+  '巴西关单': 'EXP_BRAZIL_CD_DEF',
+  '智利关单': 'EXP_CHILE_CD_DEF',
+  '哥伦比亚提单': 'EXP_COLOMBIA_BL_DEF',
+  '哥伦比亚关单': 'EXP_COLOMBIA_CD_DEF',
+  '厄瓜多尔提单': 'EXP_ECUADOR_BL_ALL',
+  '厄瓜多尔关单': 'EXP_ECUADOR_CD_DEF',
+  '厄瓜多尔关单（周更新）': 'EXP_ECUADOR_CD_UDW',
+  '巴拉圭关单': 'EXP_PARAGUAY_CD_DEF',
+  '秘鲁关单': 'EXP_PERU_CD_DEF',
+  '秘鲁提单': 'EXP_PERU_BL_ALL',
+  '秘鲁（周更新）': 'EXP_PERU_CD_UDW',
+  '乌拉圭提单': 'EXP_URUGUAY_BL_DEF',
+  '乌拉圭关单': 'EXP_URUGUAY_CD_DEF',
+  '委内瑞拉提单': 'EXP_VENEZUELA_BL_ALL',
+  '委内瑞拉关单': 'EXP_VENEZUELA_CD_DEF',
+  '巴拿马提单': 'EXP_PANAMA_BL_DEF',
+  '墨西哥关单（海运）': 'EXP_MEXICO_CD_SEA',
+  '墨西哥关单（海陆空）': 'EXP_MEXICO_CD_ALL',
+
+  // 欧洲地区 (6条)
+  '英国': 'EXP_ENGLAND_ED_DEF',
+  '俄罗斯关单': 'EXP_RUSSIA_CD_DEF',
+  '乌克兰关单': 'EXP_UKRAINE_CD_DEF',
+  '哈萨克斯坦关单': 'EXP_KAZAKHSTAN_CD_DEF',
+  '土耳其关单': 'EXP_TURKEY_CD_DEF',
+  '摩尔多瓦关单': 'EXP_MOLDOVA_CD_DEF',
+
+  // 亚洲地区 (11条)
+  '印度关单': 'EXP_INDIA_CD_DEF',
+  '印度（周更新）': 'EXP_INDIA_CD_UDW',
+  '巴基斯坦关单': 'EXP_PAKISTAN_CD_DEF',
+  '菲律宾关单': 'EXP_PHILIPPINES_CD_DEF',
+  '斯里兰卡关单': 'EXP_SRILANKA_CD_DEF',
+  '台湾': 'EXP_TAIWAN_ED_DEF',
+  '乌兹别克斯坦关单': 'EXP_UZBEKISTAN_CD_DEF',
+  '越南双边': 'EXP_VIETNAM_CD_CVB',
+  '越南全境（英文）': 'EXP_VIETNAM_CD_AEN',
+  '越南全境（越南语）': 'EXP_VIETNAM_CD_AVN',
+  '新加坡关单': 'EXP_SINGAPORE_CD_DEF',
+
+  // 非洲及其他 (15条)
+  '埃塞俄比亚关单': 'EXP_ETHIOPIA_CD_DEF',
+  '印度尼西亚关单': 'EXP_INDONESIA_CD_DEF',
+  '乌干达关单': 'EXP_UGANDA_CD_DEF',
+  '纳米比亚关单': 'EXP_NAMIBIA_CD_DEF',
+  '利比里亚关单': 'EXP_LIBERIA_CD_DEF',
+  '博茨瓦纳关单': 'EXP_BOTSWANA_CD_DEF',
+  '孟加拉国关单': 'EXP_BANGLADESH_CD_DEF',
+  '刚果金关单': 'EXP_CONGOKINSHASA_CD_DEF',
+  '尼日利亚关单': 'EXP_NIGERIA_CD_DEF',
+  '莱索托关单': 'EXP_LESOTHO_CD_DEF',
+  '科特迪瓦关单': 'EXP_COTELVORY_CD_DEF',
+  '斐济关单': 'EXP_FIJI_CD_DEF',
+  '喀麦隆关单': 'EXP_CAMEROON_CD_DEF',
+  '津巴布韦关单': 'EXP_ZIMBABWE_CD_DEF',
+  '坦桑尼亚关单': 'EXP_TANZANIA_CD_DEF'
+});
+
+// 然后初始化选中状态
+const selectedImport = ref<string[]>(Object.values(importCountries.value));
+const selectedExport = ref<string[]>(Object.values(exportCountries.value));
+
+// 数据源按钮点击处理
+const handleDataSourceClick = () => {
+  isDataSourceVisible.value = true;
+};
+
+// 数据源确认处理
+const handleDataSourceConfirm = () => {
+  // 更新查询参数中的data_source
+  queryParam.data_source = [...selectedImport.value, ...selectedExport.value];
+  isDataSourceVisible.value = false;
+};
+
+// 数据源取消处理
+const handleDataSourceCancel = () => {
+  isDataSourceVisible.value = false;
+  // 可选：重置选择
+  selectedImport.value = [];
+  selectedExport.value = [];
+};
+
+// 新增全选计算属性
+const allImportSelected = computed({
+  get: () => selectedImport.value.length === Object.values(importCountries.value).length,
+  set: (val) => val ? selectedImport.value = Object.values(importCountries.value) : selectedImport.value = []
+})
+
+const isImportIndeterminate = computed(() => 
+  selectedImport.value.length > 0 && selectedImport.value.length < Object.values(importCountries.value).length
+)
+
+const allExportSelected = computed({
+  get: () => selectedExport.value.length === Object.values(exportCountries.value).length,
+  set: (val) => val ? selectedExport.value = Object.values(exportCountries.value) : selectedExport.value = []
+})
+
+const isExportIndeterminate = computed(() => 
+  selectedExport.value.length > 0 && selectedExport.value.length < Object.values(exportCountries.value).length
+)
+
+// 处理全选操作
+const handleImportSelectAll = (e) => {
+  selectedImport.value = e.target.checked ? Object.values(importCountries.value) : []
+}
+
+const handleExportSelectAll = (e) => {
+  selectedExport.value = e.target.checked ? Object.values(exportCountries.value) : []
+}
 </script>
 
 <style scoped lang="less">
@@ -1271,4 +1540,38 @@ const handleSortChange = async (event) => {
     display: inline-block; // Ensure the width is respected
   }
 }
+
+.data-source-column {
+  border: 1px solid #e8e8e8;
+  border-radius: 4px;
+  padding: 16px;
+  height: 400px;
+  overflow-y: auto;
+
+  h4 {
+    margin-bottom: 12px;
+    color: @primary-color;
+  }
+  
+  :deep(.ant-checkbox-group) {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+}
+
+.column-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  
+  h4 {
+    margin: 0;
+  }
+  
+  .ant-checkbox-wrapper {
+    margin-left: 8px;
+  }
+}
 </style>

src/views/adweb/onlineChat/index.vue

@@ -19,21 +19,24 @@
       <div class="left-panel">
         <!-- 聊天列表 -->
         <div class="chat-list">
-          <div
-            v-for="chat in filteredChats"
-            :key="chat.id"
-            :class="['chat-item', { active: selectedChatId === chat.id }]"
-            @click="selectChat(chat.id)"
-          >
-            <a-avatar :src="chat.avatar" />
-            <div class="chat-info">
-              <div class="chat-header">
-                <span class="name">{{ chat.name }}</span>
-                <span class="time">{{ chat.lastMessageTime }}</span>
+          <a-spin v-if="loading" style="width: 100%; padding: 20px" />
+          <template v-else>
+            <div
+              v-for="chat in filteredChats"
+              :key="chat.id"
+              :class="['chat-item', { active: selectedChatId === chat.id }]"
+              @click="selectChat(chat.id)"
+            >
+              <a-avatar :src="chat.avatar" />
+              <div class="chat-info">
+                <div class="chat-header">
+                  <span class="name">{{ chat.name }}</span>
+                  <span class="time">{{ formatChatTime(chat.lastMessageTime) }}</span>
+                </div>
+                <div class="last-message">{{ chat.lastMessage }}</div>
               </div>
-              <div class="last-message">{{ chat.lastMessage }}</div>
             </div>
-          </div>
+          </template>
         </div>
       </div>
 
@@ -54,7 +57,7 @@
             <div class="message-content">
               <div class="message-info">
                 <span class="sender">{{ message.sender }}</span>
-                <span class="time">{{ message.time }}</span>
+                <span class="time">{{ formatChatTime(message.time) }}</span>
               </div>
               <div class="message-text">{{ message.content }}</div>
             </div>
@@ -79,6 +82,8 @@
 
 <script>
   import { DownOutlined, MessageOutlined, SearchOutlined } from '@ant-design/icons-vue';
+  import axios from 'axios';
+import { getAction } from '/@/api/manage/manage';
 
   export default {
     components: {
@@ -110,22 +115,7 @@
         searchKeyword: '',
         currentTab: 'all',
         selectedChatId: null,
-        chats: [
-          {
-            id: 1,
-            name: 'John Doe',
-            avatar: '/path/to/avatar1.jpg',
-            lastMessage: 'Hello, how are you?',
-            lastMessageTime: '10:30',
-          },
-          {
-            id: 2,
-            name: 'Jane Smith',
-            avatar: '/path/to/avatar2.jpg',
-            lastMessage: 'See you tomorrow!',
-            lastMessageTime: '09:15',
-          },
-        ],
+        chats: [],
         messages: {
           1: [
             {
@@ -150,6 +140,7 @@
           ],
         },
         replyMessage: '',
+        loading: false,
       };
     },
     computed: {
@@ -163,9 +154,13 @@
         return this.chats.find((chat) => chat.id === this.selectedChatId) || {};
       },
     },
+    created() {
+      this.fetchChats();
+    },
     methods: {
       selectPlatform(platform) {
         this.selectedPlatform = platform;
+        this.fetchChats();
       },
       selectChat(chatId) {
         this.selectedChatId = chatId;
@@ -183,7 +178,7 @@
           sender: 'Me',
           avatar: this.currentAccount.avatar,
           content: this.replyMessage,
-          time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
+          time: new Date().toISOString(),
         };
 
         if (!this.messages[this.selectedChatId]) {
@@ -192,6 +187,62 @@
         this.messages[this.selectedChatId].push(newMessage);
         this.replyMessage = '';
       },
+      async fetchChats() {
+        this.loading = true;
+        try {
+          const siteCode = localStorage.getItem('siteCode');
+          const response = await getAction('/marketing/facebook/chat/list', {siteCode:siteCode });
+          console.log(response);
+          this.chats = response.result.map(chat => ({
+            ...chat,
+            lastMessageTime: chat.lastMessageTime // 假设接口返回的是有效时间字符串
+          }));
+        } catch (error) {
+          console.error('获取消息列表失败:', error);
+        } finally {
+          this.loading = false;
+        }
+      },
+      formatChatTime(isoTime) {
+        const date = new Date(isoTime);
+        const now = new Date();
+        const diffInSeconds = Math.floor((now - date) / 1000);
+        
+        // 当天时间格式
+        const timeOptions = { hour: 'numeric', minute: '2-digit', hour12: true };
+        
+        // 1分钟内显示"刚刚"
+        if (diffInSeconds < 60) {
+          return '刚刚';
+        }
+        
+        // 今天
+        if (date.toDateString() === now.toDateString()) {
+          return date.toLocaleTimeString('zh-CN', timeOptions).replace('上午', 'AM').replace('下午', 'PM');
+        }
+        
+        // 昨天
+        const yesterday = new Date(now);
+        yesterday.setDate(now.getDate() - 1);
+        if (date.toDateString() === yesterday.toDateString()) {
+          return `昨天 ${date.toLocaleTimeString('zh-CN', timeOptions)}`;
+        }
+        
+        // 本周内显示星期几
+        const diffDays = Math.floor(diffInSeconds / 86400);
+        if (diffDays < 7) {
+          const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
+          return `${weekdays[date.getDay()]} ${date.toLocaleTimeString('zh-CN', timeOptions)}`;
+        }
+        
+        // 不同年份显示完整日期
+        if (date.getFullYear() !== now.getFullYear()) {
+          return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()} ${date.toLocaleTimeString('zh-CN', timeOptions)}`;
+        }
+        
+        // 默认格式：月/日 时间
+        return `${date.getMonth() + 1}/${date.getDate()} ${date.toLocaleTimeString('zh-CN', timeOptions)}`;
+      }
     },
   };
 </script>