|
@@ -5,6 +5,51 @@
|
|
|
<Refresh />
|
|
|
</el-icon>
|
|
|
<div class="vertical-line"></div>
|
|
|
+ <div>
|
|
|
+ <el-checkbox
|
|
|
+ v-model="isCheckAll"
|
|
|
+ label="全选"
|
|
|
+ size="default"
|
|
|
+ @change="handleChangeCheckAll"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div style="color: #666666">
|
|
|
+ <span
|
|
|
+ >(共998封,其中<span style="color: #39c55a"> 未读邮件 </span
|
|
|
+ >6封)</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <el-button
|
|
|
+ @click="handleMove"
|
|
|
+ :disabled="selectData.length === 0"
|
|
|
+ style="margin-left: 10px"
|
|
|
+ >全部标为已读</el-button
|
|
|
+ >
|
|
|
+ <el-select
|
|
|
+ v-model="selectTag"
|
|
|
+ placeholder="标记为"
|
|
|
+ style="margin: 0 10px; width: 120px"
|
|
|
+ :disabled="selectData.length === 0"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in tagData"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ <el-tree-select
|
|
|
+ v-model="selectFolder"
|
|
|
+ :data="myFolderTreeData"
|
|
|
+ :disabled="selectData.length === 0"
|
|
|
+ placeholder="移动到"
|
|
|
+ style="margin-right: 10px; width: 120px"
|
|
|
+ check-strictly
|
|
|
+ :render-after-expand="false"
|
|
|
+ />
|
|
|
+ <el-button @click="handleMove" :disabled="selectData.length === 0"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
</div>
|
|
|
<div style="padding: 10px 15px; width: 100%">
|
|
|
<el-table
|
|
@@ -14,7 +59,18 @@
|
|
|
@selection-change="handleSelectionChange"
|
|
|
v-loading="loading"
|
|
|
>
|
|
|
- <!-- <el-table-column type="selection" width="40" /> -->
|
|
|
+ <el-table-column label=" " width="40" align="center">
|
|
|
+ <template #default="{ row, $index }">
|
|
|
+ <div>
|
|
|
+ <el-checkbox
|
|
|
+ v-model="row.isCheck"
|
|
|
+ label=""
|
|
|
+ size="default"
|
|
|
+ @change="handleChangeCheck"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
<el-table-column label="状态" width="70">
|
|
|
<template #default="{ row, $index }">
|
|
|
<div style="cursor: pointer" @click="handleRowClick(row, $index)">
|
|
@@ -120,11 +176,12 @@
|
|
|
<script setup>
|
|
|
import byTable from "@/components/byTable/index";
|
|
|
import useMailStore from "@/store/modules/mail";
|
|
|
+import useUserStore from "@/store/modules/user";
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
const mailStore = useMailStore();
|
|
|
let loading = ref(false);
|
|
|
const tableHeight = ref(0);
|
|
|
-tableHeight.value = window.innerHeight - 270;
|
|
|
+tableHeight.value = window.innerHeight - 280;
|
|
|
const tableData = reactive({
|
|
|
data: [],
|
|
|
pagination: {
|
|
@@ -178,8 +235,11 @@ const getList = () => {
|
|
|
...tableData.pagination,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
- tableData.data = res.rows;
|
|
|
- mailStore.mailDataList = res.rows;
|
|
|
+ tableData.data = res.rows.map((x) => ({ ...x, isCheck: false }));
|
|
|
+ mailStore.mailDataList = res.rows.map((x) => ({
|
|
|
+ ...x,
|
|
|
+ isCheck: false,
|
|
|
+ }));
|
|
|
tableData.pagination.total = res.total;
|
|
|
loading.value = false;
|
|
|
});
|
|
@@ -192,8 +252,14 @@ const getList = () => {
|
|
|
...tableData.pagination,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
- tableData.data = res.rows;
|
|
|
- mailStore.mailDataList = res.rows;
|
|
|
+ tableData.data = res.rows.map((x) => ({
|
|
|
+ ...x,
|
|
|
+ isCheck: false,
|
|
|
+ }));
|
|
|
+ mailStore.mailDataList = res.rows.map((x) => ({
|
|
|
+ ...x,
|
|
|
+ isCheck: false,
|
|
|
+ }));
|
|
|
tableData.pagination.total = res.total;
|
|
|
loading.value = false;
|
|
|
});
|
|
@@ -206,8 +272,14 @@ const getList = () => {
|
|
|
...tableData.pagination,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
- tableData.data = res.rows;
|
|
|
- mailStore.mailDataList = res.rows;
|
|
|
+ tableData.data = res.rows.map((x) => ({
|
|
|
+ ...x,
|
|
|
+ isCheck: false,
|
|
|
+ }));
|
|
|
+ mailStore.mailDataList = res.rows.map((x) => ({
|
|
|
+ ...x,
|
|
|
+ isCheck: false,
|
|
|
+ }));
|
|
|
tableData.pagination.total = res.total;
|
|
|
loading.value = false;
|
|
|
});
|
|
@@ -254,10 +326,48 @@ const handleSizeChange = (val) => {
|
|
|
tableData.pagination.pageSize = val;
|
|
|
getList();
|
|
|
};
|
|
|
+const myFolderTreeData = ref([]);
|
|
|
+const tagData = ref([]);
|
|
|
+const getOtherData = () => {
|
|
|
+ setTimeout(() => {
|
|
|
+ proxy
|
|
|
+ .post("/myFolder/tree", { mailboxId: mailStore.selectMail.id })
|
|
|
+ .then((res) => {
|
|
|
+ myFolderTreeData.value = res.map((x) => ({ ...x, value: x.id }));
|
|
|
+ });
|
|
|
+ }, 1000);
|
|
|
+
|
|
|
+ proxy
|
|
|
+ .post("/myTag/page", {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 9999,
|
|
|
+ id: useUserStore().user.userId,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ tagData.value = res.rows;
|
|
|
+ });
|
|
|
+};
|
|
|
+getOtherData();
|
|
|
+const isCheckAll = ref(false);
|
|
|
+const selectTag = ref("");
|
|
|
+const selectFolder = ref("");
|
|
|
const selectData = ref([]);
|
|
|
-const handleSelectionChange = (val) => {
|
|
|
- console.log(val, "ss");
|
|
|
- selectData.value = val;
|
|
|
+const handleChangeCheck = () => {
|
|
|
+ selectData.value = tableData.data.filter((x) => x.isCheck === true);
|
|
|
+ if (selectData.value.length === tableData.data.length) {
|
|
|
+ isCheckAll.value = true;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const handleChangeCheckAll = () => {
|
|
|
+ tableData.data.forEach((x) => {
|
|
|
+ x.isCheck = isCheckAll.value;
|
|
|
+ });
|
|
|
+ if (isCheckAll.value) {
|
|
|
+ selectData.value = tableData.data;
|
|
|
+ } else {
|
|
|
+ selectData.value = [];
|
|
|
+ }
|
|
|
};
|
|
|
|
|
|
defineExpose({
|
|
@@ -266,6 +376,9 @@ defineExpose({
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+// * {
|
|
|
+// font-size: 12px;
|
|
|
+// }
|
|
|
.messageImg {
|
|
|
width: 18px;
|
|
|
height: 18px;
|