新增批量删除邮件
This commit is contained in:
eoao
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user