新增批量删除邮件

2025-08-28 22:11:00 +08:00
parent 344389cf0f
commit 375613c219
11 changed files with 417 additions and 122 deletions
--- a/mail-vue/src/components/email-scroll/index.vue
+++ b/mail-vue/src/components/email-scroll/index.vue
@@ -11,7 +11,7 @@
      <div class="header-left" :style="'padding-left:' + actionLeft">

        <slot name="first"></slot>
-        <Icon class="icon" icon="ion:reload" width="18" height="18" @click="refresh"/>
+        <Icon class="icon reload" icon="ion:reload" width="18" height="18" @click="refresh"/>
        <Icon v-perm="'email:delete'" class="icon" icon="uiw:delete" width="16" height="16"
              v-if="getSelectedMailsIds().length > 0"
              @click="handleDelete"/>
@@ -879,6 +879,7 @@ function loadData() {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
+    position: relative;
    column-gap: 18px;
    row-gap: 8px;
    padding-left: 2px;
--- a/mail-vue/src/i18n/en.js
+++ b/mail-vue/src/i18n/en.js
@@ -281,7 +281,16 @@ const en = {
    noRecipientDesc: 'Emails can be received even without a registered email address.',
    preview: 'Preview',
    help: 'Help',
-    document: 'Document'
+    document: 'Document',
+    clearEmail: 'Email Cleanup',
+    sendEmailAddress: 'From Email',
+    toEmail: 'To Email',
+    equal: 'Equal',
+    leading: 'Leading',
+    to: 'To',
+    clear: 'Clear',
+    include: 'Include',
+    delAllEmailConfirm: 'Do you really want to delete it?'
 }

 export default en
--- a/mail-vue/src/i18n/zh.js
+++ b/mail-vue/src/i18n/zh.js
@@ -281,7 +281,16 @@ const zh = {
    noRecipientDesc: '即使没有注册的邮箱也能收到邮件',
    preview: '预览',
    help: '帮助',
-    document: '项目文档'
+    document: '项目文档',
+    clearEmail: '邮件清除',
+    sendEmailAddress: '发件人邮箱',
+    toEmail: '收件人邮箱',
+    equal: '等值',
+    leading: '左匹配',
+    to: '至',
+    clear: '清除',
+    include: '包含',
+    delAllEmailConfirm: '确定要删除吗？'

 }
 export default zh
--- a/mail-vue/src/request/all-email.js
+++ b/mail-vue/src/request/all-email.js
@@ -7,3 +7,7 @@ export function allEmailList(params) {
 export function allEmailDelete(emailIds) {
    return http.delete('/allEmail/delete?emailIds=' + emailIds)
 }
+
+export function allEmailBatchDelete(params) {
+    return http.delete('/allEmail/batchDelete', {params: params} )
+}
--- a/mail-vue/src/views/all-email/index.vue
+++ b/mail-vue/src/views/all-email/index.vue
@@ -41,7 +41,7 @@
            </div>
          </template>
        </el-input>
-        <el-select v-model="params.type" placeholder="Select" class="status-select">
+        <el-select v-model="params.type" placeholder="Select" class="status-select" @change="typeSelectChange">
          <el-option key="1" :label="$t('all')" value="all"/>
          <el-option key="3" :label="$t('received')" value="receive"/>
          <el-option key="2" :label="$t('sent')" value="send"/>
@@ -53,8 +53,34 @@
              v-if="params.timeSort === 0" width="28" height="28"/>
        <Icon class="icon" @click="changeTimeSort" icon="material-symbols-light:timer-arrow-up-outline" v-else
              width="28" height="28"/>
+        <Icon class="icon clear" icon="fluent:broom-sparkle-16-regular" width="22" height="22" @click="openBathDelete"/>
      </template>
    </emailScroll>
+    <el-dialog v-model="showBathDelete" :title="$t('clearEmail')" width="335"
+               @closed="closedClear">
+      <div class="clear-email">
+        <el-input v-model="clearParams.sendName" :placeholder="$t('sender')"/>
+        <el-input v-model="clearParams.subject" :placeholder="$t('subject')"/>
+        <el-input v-model="clearParams.sendEmail" :placeholder="$t('sendEmailAddress')"/>
+        <el-input v-model="clearParams.toEmail" :placeholder="$t('toEmail')"/>
+        <el-date-picker popper-class="my-date-picker"
+                        v-model="clearTime"
+                        type="daterange"
+                        :teleported="false"
+                        unlink-panels
+                        :range-separator="t('to')"
+                        size="default"
+        />
+        <div class="clear-button">
+          <el-select v-model="clearParams.type" style="width: 200px">
+            <el-option key="eq" :label="t('equal')" value="eq"/>
+            <el-option key="left" :label="t('leading')" value="left"/>
+            <el-option key="include" :label="t('include')" value="include"/>
+          </el-select>
+          <el-button :loading="clearLoading" type="primary" @click="batchDelete">{{ t('clear') }}</el-button>
+        </div>
+      </div>
+    </el-dialog>
  </div>
 </template>

@@ -65,21 +91,26 @@ import {computed, defineOptions, reactive, ref, watch} from "vue";
 import {useEmailStore} from "@/store/email.js";
 import {
  allEmailList,
-  allEmailDelete
+  allEmailDelete,
+  allEmailBatchDelete
 } from "@/request/all-email.js";
 import {Icon} from "@iconify/vue";
 import router from "@/router/index.js";
-import { useI18n } from 'vue-i18n';
+import {useI18n} from 'vue-i18n';
+import {toUtc} from "@/utils/day.js";

 defineOptions({
  name: 'all-email'
 })

-const { t } = useI18n();
+const {t} = useI18n();
 const emailStore = useEmailStore();
+const clearTime = ref('')
 const sysEmailScroll = ref({})
 const searchValue = ref('')
 const mySelect = ref()
+const showBathDelete = ref(false)
+const clearLoading = ref(false)

 const openSelect = () => {
  mySelect.value.toggleMenu()
@@ -95,6 +126,31 @@ const params = reactive({
  searchType: 'name'
 })

+const clearParams = reactive({
+  subject: '',
+  sendEmail: '',
+  sendName: '',
+  startTime: '',
+  toEmail: '',
+  endTime: '',
+  type: 'eq',
+})
+
+function resetClearParams() {
+  clearParams.subject = ''
+  clearParams.sendEmail = ''
+  clearParams.sendName = ''
+  clearParams.startTime = ''
+  clearParams.toEmail = ''
+  clearParams.endTime = ''
+}
+
+function closedClear() {
+  resetClearParams()
+  clearParams.type = 'eq'
+  clearParams.endTime = ''
+  clearTime.value = null
+}

 const selectTitle = computed(() => {
  if (params.searchType === 'user') return t('user')
@@ -113,11 +169,51 @@ if (paramsStar) {
 }

 watch(() => params, () => {
-  localStorage.setItem('all-email-params',JSON.stringify(params))
+  localStorage.setItem('all-email-params', JSON.stringify(params))
 }, {
  deep: true
 })

+function openBathDelete() {
+  showBathDelete.value = true
+}
+
+function batchDelete() {
+
+  if (clearTime.value) {
+    clearParams.startTime = toUtc(clearTime.value[0]).format("YYYY-MM-DD HH:mm:ss")
+    clearParams.endTime = toUtc(clearTime.value[1]).add(1, 'day').format("YYYY-MM-DD HH:mm:ss")
+  }
+
+  if (!clearParams.sendEmail && !clearParams.sendName && !clearParams.subject && !clearParams.toEmail && !clearTime.value) {
+    showBathDelete.value = false
+    return
+  }
+
+  ElMessageBox.confirm(
+      t('delAllEmailConfirm'),
+      {
+        confirmButtonText: t('confirm'),
+        cancelButtonText: t('cancel'),
+        type: 'warning',
+      }
+  ).then(() => {
+    clearLoading.value = true
+
+    allEmailBatchDelete(clearParams).then(() => {
+      ElMessage({
+        message: t('clearSuccess'),
+        type: "success",
+        plain: true
+      })
+      resetClearParams()
+      sysEmailScroll.value.refreshList();
+    }).finally(() => {
+      clearLoading.value = false
+    })
+  })
+}
+
 function refreshBefore() {
  searchValue.value = null
  params.timeSort = 0
@@ -157,7 +253,11 @@ function search() {

 function changeTimeSort() {
  params.timeSort = params.timeSort ? 0 : 1
-  sysEmailScroll.value.refreshList();
+  search()
+}
+
+function typeSelectChange() {
+  search()
 }

 function jumpContent(email) {
@@ -173,7 +273,41 @@ function getEmailList(emailId, size) {
  return allEmailList({emailId, size, ...params})
 }
 </script>
+<style>

+@media (max-width: 767px) {
+  .el-date-range-picker .el-picker-panel__body {
+    min-width: auto;
+
+  }
+
+  .my-date-picker::after {
+    content: "";
+    position: absolute; /* 脱离文档流，不会撑开 */
+    left: 0;
+    right: 0;
+    height: 20px;
+    background: transparent; /* 方便看效果 */
+  }
+
+  .el-date-range-picker__content {
+    width: 100%;
+  }
+
+  .el-date-range-picker {
+    width: 300px;
+  }
+
+  .el-tooltip .el-picker_popper {
+    padding-bottom: 200px;
+  }
+
+  .el-date-range-picker__content.is-left {
+    border-right: 0;
+  }
+}
+
+</style>
 <style scoped lang="scss">
 .email-list-box {
  height: 100%;
@@ -208,15 +342,33 @@ function getEmailList(emailId, size) {
  width: 100%;
  max-width: 280px;
  height: 28px;
+
  .setting-icon {
    position: relative;
    top: 3px;
  }
 }

+.clear-email {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.clear-button {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+
+  .el-button {
+    width: 100%;
+  }
+}
+
 .status-select {
  margin-bottom: 2px;
-  width: 100px;
+  width: 102px;
+
  :deep(.el-select__wrapper) {
    min-height: 28px;
  }
@@ -236,7 +388,27 @@ function getEmailList(emailId, size) {
  min-height: 28px;
 }

+:deep(.el-date-editor.el-input__wrapper) {
+  width: 303px;
+}
+
 .icon {
  cursor: pointer;
 }
-</style>
+
+.clear {
+  @media (max-width: 407px) {
+    position: absolute;
+    top: 41px;
+    left: 242px;
+  }
+}
+
+:deep(.reload) {
+  @media (max-width: 407px) {
+    position: absolute;
+    top: 42px;
+    left: 208px;
+  }
+}
+</style>