搜索框增加模糊搜索

src/views/ComposeEmail.vue

@@ -2,32 +2,53 @@
   <div class="bg-white rounded-lg shadow-md p-6" v-loading="loading">
     <div class="mb-4">
       <label class="block text-gray-700 mb-2 font-medium">发件人</label>
-      <select
+      <el-select
         v-model="currentSender"
-        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+        value-key="senderBizId"
+        filterable
+        remote
+        reserve-keyword
+        placeholder="请输入发件人姓名或邮箱搜索"
+        :remote-method="(query) => remoteSearch(query, 'senders')"
+        :loading="loading"
+        size="large"
+        class="w-full"
       >
-        <option v-for="sender in senders" :key="sender.senderBizId" :value="sender">
-          {{ sender.email }} - 发件人姓名：{{ sender.displayName }}
-        </option>
-      </select>
+        <el-option
+          v-for="sender in senders"
+          :key="sender.senderBizId"
+          :label="sender.email"
+          :value="sender"
+        />
+      </el-select>
     </div>
     <div class="mb-4">
       <label class="block text-gray-700 mb-2 font-medium">变量模板</label>
       <div class="flex flex-col sm:flex-row gap-2">
-        <select
+        <el-select
           v-model="selectedVariableTemplate"
-          class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-          @change="applyVariableTemplate"
+          value-key="variableGroupBizId"
+          filterable
+          remote
+          reserve-keyword
+          placeholder="选择模板"
+          :remote-method="(query) => remoteSearch(query, 'groups')"
+          :loading="loading"
+          size="large"
+          class="flex-auto"
         >
-          <option value="">-- 选择模板 --</option>
-          <option v-for="template in groups" :key="template.variableGroupBizId" :value="template">
-            {{ template.groupName }}
-          </option>
-        </select>
+          <el-option value="">-- 选择模板 --</el-option>
+          <el-option
+            v-for="template in groups"
+            :key="template.variableGroupBizId"
+            :value="template"
+            :label="template.groupName"
+          />
+        </el-select>
         <!-- 当选择模版有值时，显示导入数据按钮 -->
         <button
           @click="((showImportContacts = true), (importSource = 1))"
-          class="bg-blue-50 hover:bg-blue-100 text-blue-600 px-4 py-2 rounded-md border border-blue-200 transition-colors flex items-center"
+          class="bg-blue-50 hover:bg-blue-100 text-blue-600 px-4 py-2 rounded-md border border-blue-200 transition-colors flex-none items-center"
           v-if="selectedVariableTemplate"
         >
           <i class="fas fa-address-book mr-1"></i> 导入数据
@@ -212,6 +233,7 @@
       v-if="showContactSelector"
       :contacts="contacts"
       @confirm-selection="confirmContactSelection"
+      @query-change="remoteSearch($event, 'contacts')"
       @close="showContactSelector = false"
     />
 
@@ -244,7 +266,7 @@ import { useRouter } from 'vue-router'
 const router = useRouter()
 
 const navigateToEmailRecords = () => {
-  router.push({ name: 'EmailRecords' })
+  router.push({ name: 'emails' })
 }
 import ContactSelector from './ContactSelector.vue'
 import VariableSelector from './VariableSelector.vue'
@@ -264,6 +286,52 @@ const handleClose = (done: () => void) => {
       // catch error
     })
 }
+
+// 远程搜索方法
+const remoteSearch = async (query: string, type: string) => {
+  console.log(query, type)
+  if (query) {
+    loading.value = true
+    try {
+      if (type === 'senders') {
+        const res = await senderApi.getEmailSenderConfigList({
+          queryContent: query,
+          pageNo: 1,
+          pageSize: 100,
+        })
+        senders.value = res.data?.records || []
+      } else if (type === 'groups') {
+        const res = await variableGroupApi.getEmailVariableGroupList({
+          queryContent: query,
+          pageNo: 1,
+          pageSize: 100,
+        })
+        groups.value = res.data?.records || []
+      } else if (type === 'contacts') {
+        const res = await contactApi.getContactList({
+          queryContent: query,
+          pageNo: 1,
+          pageSize: 100,
+        })
+        contacts.value = res.data?.records || []
+      }
+    } catch (error) {
+      console.error('搜索失败:', error)
+      ElMessage.error('搜索失败')
+    } finally {
+      loading.value = false
+    }
+  } else {
+    // 如果查询为空，重新加载默认选项
+    if (type === 'contacts') {
+      getContacts()
+    } else if (type === 'groups') {
+      getGroups()
+    } else if (type === 'senders') {
+      getSenders()
+    }
+  }
+}
 // 初始化数据
 const getSenders = () => {
   senderApi
@@ -301,9 +369,8 @@ const senders = ref<Sender[]>([])
 const contacts = ref<Contact<unknown>[]>([])
 const groups = ref<VariableTemplate[]>([])
 const variables = ref<Variable[]>([])
+const currentSender = ref()
 
-// 状态
-const currentSender = ref<Sender | null>(senders.value.length > 0 ? senders.value[0] : null)
 const emailForm = ref<EmailForm>({
   senderBizId: '',
   sendEmail: '',
@@ -530,7 +597,6 @@ const getImportedContacts = (sessionId?: string, type?: string) => {
       importRecords.value = res.data.records || []
       // 从导入记录中提取收件人和抄送人
       if (type == 'update') {
-        debugger
         emailForm.value.receiveEmail = importRecords.value
           .map((item) => item.receiveEmail)
           .join(',')
@@ -547,8 +613,6 @@ const getImportedContacts = (sessionId?: string, type?: string) => {
 import { ElMessage } from 'element-plus'
 import FileUploadComponent from '@/components/FileUploadComponent.vue'
 import { UploadResult } from '@/utils/fileUpload'
-import { get } from 'http'
-import { ca, lo } from 'element-plus/es/locales.mjs'
 
 // 上传成功的文件
 const uploadedFiles = ref<any[]>([])
@@ -581,7 +645,7 @@ const sendSelfEmail = () => {
         type: 'success',
       })
     } else {
-      ElMessage.error('测试邮件发送失败')
+      ElMessage.error(`测试邮件发送失败: ${res.data.msg || '未知错误'}`)
     }
   })
 }

src/views/ContactSelector.vue

@@ -14,6 +14,7 @@
             type="text"
             class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
             placeholder="搜索联系人..."
+            @change="handleQueryChange"
           />
         </div>
         <div class="space-y-2">
@@ -69,7 +70,7 @@ const props = defineProps({
   },
 })
 
-const emits = defineEmits(['confirm-selection', 'close'])
+const emits = defineEmits(['confirm-selection', 'close', 'query-change'])
 
 // 状态
 const searchTerm = ref('')
@@ -85,6 +86,11 @@ const filteredContacts = computed(() => {
   )
 })
 
+const handleQueryChange = () => {
+  searchTerm.value = searchTerm.value.trim()
+  emits('query-change', searchTerm.value)
+}
+
 // 方法
 const toggleSelection = (contact: Contact) => {
   const index = selectedContacts.value.indexOf(contact.contactBizId || '')

src/views/EmailManagement.vue

@@ -116,9 +116,9 @@
               >
                 查看
               </button>
-              <button @click="reuseEmailContent(email)" class="text-green-600 hover:text-green-900">
+              <!-- <button @click="reuseEmailContent(email)" class="text-green-600 hover:text-green-900">
                 复用
-              </button>
+              </button> -->
             </td>
           </tr>
         </tbody>

src/views/SenderManagement.vue

@@ -55,7 +55,6 @@
         <button
           @click="saveSender"
           class="px-6 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-700 transition-colors"
-          :disabled="!formData.email || !formData.password || !formData.providerBizId"
         >
           {{ editingSenderId ? '更新发件人' : '添加发件人' }}
         </button>
@@ -201,6 +200,7 @@ import { emailProviderApi, senderApi, getEmailSenderConfigList } from '@/api/api
 import type { Sender } from '@/types/index'
 // 引入分页组件
 import Pagination from '@/components/Pagination.vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
 
 // 初始数据
 const total = ref(0)
@@ -236,7 +236,7 @@ const handlePageSizeUpdate = (size: number) => {
 }
 // 引入弹窗组件
 import CommonModal from '@/components/CommonModal.vue'
-import { get } from 'http'
+import type { Action } from 'element-plus'
 // 弹窗提示信息对象
 const modalVisible = ref(false)
 const modalConfig = ref({
@@ -246,6 +246,24 @@ const modalConfig = ref({
   triggerKey: 'templateModal',
 })
 
+const alertInfo = (
+  content: string,
+  title: string = '提示',
+  type: 'info' | 'success' | 'warning' | 'error' = 'info',
+  msg: string = '',
+) => {
+  ElMessageBox.alert(content, title, {
+    type: type,
+    confirmButtonText: 'OK',
+    callback: (action: Action) => {
+      // ElMessage({
+      //   type: type,
+      //   message: msg || '操作成功',
+      // })
+    },
+  })
+}
+
 const openModal = (
   config: { triggerKey?: string; showCancel?: boolean; title?: string; message?: string } = {},
 ) => {
@@ -337,10 +355,7 @@ const getSenders = () => {
 const saveSender = () => {
   console.log(formData.value)
   if (!formData.value.email || !formData.value.password || !formData.value.providerBizId) {
-    openModal({
-      title: '添加失败',
-      message: '请填写完整邮箱授权码和服务商',
-    })
+    alertInfo('请填写完整邮箱授权码和服务商', '添加失败', 'error')
     return
   }