邮箱新需求

src/store/modules/mail.js

@@ -4,7 +4,9 @@ const useMailStore = defineStore(
       selectMail: {}, //当前选中的邮箱
       currentMenu: {}, //当前选中的邮箱菜单数据
       currentId: "", //当前选中的邮箱菜单id
-      mailMenuList: [] //邮箱菜单数据
+      mailMenuList: [], //邮箱菜单数据
+      mailDataList: [], //邮箱列表数据 用来操作上一封下一封所需的数据
+      currentMailIndex: -1, //邮箱详情的索引 用来操作上一封下一封所需的数据
     }),
     actions: {}
   })

src/views/WDLY/outInBound/waitInBound/index.vue

@@ -310,15 +310,15 @@ const submitForm = () => {
         type: "info",
       });
     }
-    for (let i = 0; i < list.length; i++) {
-      const e = list[i];
-      if (Number(e.receiptQuantity) + e.quantity > Number(e.arrivalQuantity)) {
-        return ElMessage({
-          message: "本次入库加已入库数量不可大于发货数量！",
-          type: "info",
-        });
-      }
-    }
+    // for (let i = 0; i < list.length; i++) {
+    //   const e = list[i];
+    //   if (Number(e.receiptQuantity) + e.quantity > Number(e.arrivalQuantity)) {
+    //     return ElMessage({
+    //       message: "本次入库加已入库数量不可大于发货数量！",
+    //       type: "info",
+    //     });
+    //   }
+    // }
     submitLoading.value = true;
     proxy.post("/stockWait/addByWdly", formData.data).then(
       (res) => {

src/views/connect/E-mail/mail/com/left.vue

@@ -37,7 +37,7 @@
         </el-tab-pane>
       </el-tabs>
       <div>
-        <el-button type="primary" style="width: 100%" @click="handleGoWrite('')"
+        <el-button type="primary" style="width: 100%" @click="handleGoWrite()"
           >写信</el-button
         >
       </div>
@@ -50,60 +50,469 @@
             v-bind:class="{ 'select-menu': item.id === selectFloderId }"
             v-for="item in selectMail.mailFolderInfoList"
             :key="item.id"
-            @click="handleOpenMenu(item)"
+            @click="handleOpenMenu(item, '10')"
           >
             {{ item.name }}
           </li>
+          <!-- <li class="menu-item" @click="handleOpenMenu()">
+            <i class="iconfont icon-iconm_inbox leftIcon"></i>
+            <span style="margin-left: 10px">收件箱</span>
+          </li>
+          <li class="menu-item" @click="handleOpenMenu()">
+            <i class="iconfont icon_unread leftIcon"></i>
+            <span style="margin-left: 10px">未读邮件</span>
+          </li>
+          <li class="menu-item" @click="handleOpenMenu()">
+            <i class="iconfont icon-icomm_draftbox leftIcon"></i>
+            <span style="margin-left: 10px">草稿箱</span>
+          </li>
+          <li class="menu-item" @click="handleOpenMenu()">
+            <i class="iconfont icon_sent leftIcon"></i>
+            <span style="margin-left: 10px">已发送</span>
+          </li>
+          <li class="menu-item" @click="handleOpenMenu()">
+            <i class="iconfont icon_delete leftIcon"></i>
+            <span style="margin-left: 10px">已删除</span>
+          </li>
+          <li class="menu-item" @click="handleOpenMenu()">
+            <i class="iconfont icon_ljyx leftIcon"></i>
+            <span style="margin-left: 10px">垃圾邮件</span>
+          </li> -->
         </ul>
         <div
-          style="margin-top: 10px"
-          v-if="staffMailList && staffMailList.length > 0"
+          class="tree"
+          v-if="staffMailData[0] && staffMailData[0].children.length > 0"
         >
           <el-tree
-            :data="staffMailList"
+            :data="staffMailData"
             ref="tree"
             node-key="id"
-            @node-click="treeChange"
             default-expand-all
             :props="{
               label: 'mailUser',
             }"
+            @node-click="(data) => handleTreeNodeClick(data, 'staff')"
           ></el-tree>
         </div>
+        <div
+          class="tree"
+          v-if="myFolderTreeData && myFolderTreeData.length > 0"
+        >
+          <el-tree
+            :data="myFolderTreeData"
+            node-key="id"
+            default-expand-all
+            :expand-on-click-node="false"
+            @node-click="(data) => handleTreeNodeClick(data, 'folder')"
+          >
+            <template #default="{ node, data }">
+              <span class="tree-content">
+                <span>{{ data.label }}</span>
+                <el-popover
+                  placement="bottom-start"
+                  title=""
+                  :width="200"
+                  trigger="click"
+                >
+                  <div default style="display: flex">
+                    <el-button
+                      size="small"
+                      @click.stop="handleEditFolder(data, 'add')"
+                      >添加</el-button
+                    >
+                    <el-button
+                      size="small"
+                      v-if="data.id != '0'"
+                      @click.stop="handleEditFolder(data, 'edit')"
+                      >编辑</el-button
+                    >
+                    <el-button
+                      size="small"
+                      v-if="data.id != '0'"
+                      @click.stop="handleDelFolder(data)"
+                      >删除</el-button
+                    >
+                  </div>
+                  <template #reference>
+                    <span class="iconfont icon_more" style="padding-bottom: 5px"
+                      >...</span
+                    >
+                  </template>
+                </el-popover>
+              </span>
+            </template>
+          </el-tree>
+        </div>
+
+        <div class="tree" v-if="tagsTreeData && tagsTreeData.length > 0">
+          <el-tree
+            :data="tagsTreeData"
+            node-key="id"
+            default-expand-all
+            :expand-on-click-node="false"
+            @node-click="(data) => handleTreeNodeClick(data, 'tag')"
+          >
+            <template #default="{ node, data }">
+              <span class="tree-content">
+                <span>{{ data.name }}</span>
+                <el-popover
+                  placement="bottom-start"
+                  title=""
+                  :width="150"
+                  trigger="click"
+                >
+                  <div default style="display: flex">
+                    <el-button
+                      size="small"
+                      v-if="data.id == '0'"
+                      @click.stop="handleEditTag(data, 'add')"
+                      >添加</el-button
+                    >
+                    <el-button
+                      size="small"
+                      v-if="data.id != '0'"
+                      @click.stop="handleEditTag(data, 'edit')"
+                      >编辑</el-button
+                    >
+                    <el-button
+                      size="small"
+                      v-if="data.id != '0'"
+                      @click.stop="handleDelTag(data)"
+                      >删除</el-button
+                    >
+                  </div>
+                  <template #reference>
+                    <span class="iconfont icon_more" style="padding-bottom: 5px"
+                      >...</span
+                    >
+                  </template>
+                </el-popover>
+              </span>
+            </template>
+          </el-tree>
+        </div>
       </div>
       <div v-if="activeName === 'second'">暂未开放</div>
       <div v-if="activeName === 'third'">暂未开放</div>
     </div>
+    <el-dialog
+      :title="editType === 'add' ? '添加文件夹' : '编辑文件夹'"
+      v-model="myFolderDialog"
+      width="300px"
+      destroy-on-close
+      v-loading="submitLoading"
+    >
+      <byForm
+        :formConfig="myFolderFormConfig"
+        :formOption="formOption"
+        v-model="formData.myFolderData"
+        :rules="rules"
+        ref="myFolderForm"
+      >
+      </byForm>
+      <template #footer>
+        <el-button @click="myFolderDialog = false" size="large"
+          >取 消</el-button
+        >
+        <el-button
+          type="primary"
+          @click="submitMyFolderForm()"
+          size="large"
+          :loading="submitLoading"
+        >
+          确 定
+        </el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog
+      :title="editType === 'add' ? '添加标签' : '编辑标签'"
+      v-model="tagDialog"
+      width="300px"
+      destroy-on-close
+      v-loading="submitLoading"
+    >
+      <byForm
+        :formConfig="tagFormConfig"
+        :formOption="formOption"
+        v-model="formData.tagData"
+        :rules="tagRules"
+        ref="tagForm"
+      >
+      </byForm>
+      <template #footer>
+        <el-button @click="tagDialog = false" size="large">取 消</el-button>
+        <el-button
+          type="primary"
+          @click="submitTagForm()"
+          size="large"
+          :loading="submitLoading"
+        >
+          确 定
+        </el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
 import useMailStore from "@/store/modules/mail";
 import useUserStore from "@/store/modules/user";
+import byForm from "@/components/byForm/index";
+import { ElMessage, ElMessageBox } from "element-plus";
 const mailStore = useMailStore();
 const { proxy } = getCurrentInstance();
 let selectMail = ref({});
 let activeName = ref("first");
+const mailMapData = {
+  inbox: ["INBOX"],
+  unread: ["UNREAD"],
+  draft: ["草稿箱"],
+  sent: ["已发送"],
+  delete: ["已删除"],
+  waste: ["垃圾邮件"],
+};
 let selectFloderId = ref("");
 const mailList = ref([]);
-const staffMailList = ref([]);
+const staffMailData = ref([]);
+const formOption = reactive({
+  inline: true,
+  labelWidth: 100,
+  itemWidth: 100,
+});
+const myFolderForm = ref(null);
+const myFolderTreeData = ref([]);
+const myFolderDialog = ref(false);
+const submitLoading = ref(false);
+const editType = ref("add");
+const myFolderFormConfig = computed(() => [
+  {
+    type: "input",
+    prop: "name",
+    label: "文件夹名称",
+    disabled: false,
+    itemWidth: 100,
+  },
+]);
+const formData = reactive({
+  myFolderData: {},
+  tagData: {},
+});
+const rules = ref({
+  name: [{ required: true, message: "请输入文件夹名称", trigger: "blur" }],
+});
+const tagForm = ref(null);
+const tagsTreeData = ref([]);
+const tagDialog = ref(false);
+const tagFormConfig = computed(() => [
+  {
+    type: "input",
+    prop: "name",
+    label: "标签名称",
+    disabled: false,
+    itemWidth: 100,
+  },
+]);
+const tagRules = ref({
+  name: [{ required: true, message: "请输入标签名称", trigger: "blur" }],
+});
+const getTagsList = () => {
+  proxy
+    .post("/myTag/page", {
+      pageNum: 1,
+      pageSize: 9999,
+      id: useUserStore().user.userId,
+    })
+    .then((res) => {
+      tagsTreeData.value = [
+        {
+          name: "我的标签",
+          id: "0",
+          children: res.rows,
+        },
+      ];
+    });
+};
+
+const submitTagForm = () => {
+  tagForm.value.handleSubmit(() => {
+    submitLoading.value = true;
+    proxy.post("/myTag/" + editType.value, formData.tagData).then(
+      (res) => {
+        ElMessage({
+          message: `操作成功！`,
+          type: "success",
+        });
+        tagDialog.value = false;
+        submitLoading.value = false;
+        getTagsList(selectMail.value);
+      },
+      (err) => {
+        submitLoading.value = false;
+      }
+    );
+  });
+};
+
+const handleEditTag = (data, type) => {
+  editType.value = type;
+  if (type === "add") {
+    formData.tagData.name = "";
+    formData.tagData.type = selectMail.value.type;
+    formData.tagData.mailboxId = selectMail.value.id;
+  } else {
+    formData.tagData = data;
+  }
+  tagDialog.value = true;
+};
+
+const handleDelTag = (data) => {
+  ElMessageBox.confirm(`此操作将删除该标签, 是否继续?`, "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(() => {
+    // 删除
+    proxy.post("/myTag/delete", { id: data.id }).then((res) => {
+      ElMessage({
+        message: `操作成功！`,
+        type: "success",
+      });
+      getTagsList();
+    });
+  });
+};
+
+const getMyFolderTree = (data) => {
+  proxy.post("/myFolder/tree", { mailboxId: data.id }).then((res) => {
+    myFolderTreeData.value = [
+      {
+        label: "我的文件夹",
+        id: "0",
+        children: res,
+      },
+    ];
+  });
+};
+
+const submitMyFolderForm = () => {
+  myFolderForm.value.handleSubmit(() => {
+    submitLoading.value = true;
+    proxy.post("/myFolder/" + editType.value, formData.myFolderData).then(
+      (res) => {
+        ElMessage({
+          message: `操作成功！`,
+          type: "success",
+        });
+        myFolderDialog.value = false;
+        submitLoading.value = false;
+        getMyFolderTree(selectMail.value);
+      },
+      (err) => {
+        submitLoading.value = false;
+      }
+    );
+  });
+};
+
+const handleEditFolder = (data, type) => {
+  formData.myFolderData = {};
+  editType.value = type;
+  if (type === "add") {
+    formData.myFolderData.parentId = data.id;
+  } else {
+    formData.myFolderData = data;
+    formData.myFolderData.name = data.label;
+  }
+  formData.myFolderData.type = selectMail.value.type;
+  formData.myFolderData.mailboxId = selectMail.value.id;
+  myFolderDialog.value = true;
+};
+
+const handleDelFolder = (data) => {
+  ElMessageBox.confirm(`此操作将删除该文件夹, 是否继续?`, "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(() => {
+    // 删除
+    proxy.post("/myFolder/delete", { id: data.id }).then((res) => {
+      ElMessage({
+        message: `操作成功！`,
+        type: "success",
+      });
+      getMyFolderTree(selectMail.value);
+    });
+  });
+};
+const otherFolder = ref([]);
 const getMialList = () => {
   proxy.get("/mailService/getUserEmailList").then((res) => {
+    for (let i = 0; i < res.data.length; i++) {
+      const iele = res.data[i];
+      for (let j = 0; j < iele.mailFolderInfoList.length; j++) {
+        const jele = iele.mailFolderInfoList[j];
+        iele.mailFolderInfoListCopy = [];
+        iele.otherFolder = [];
+        if (mailMapData["inbox"].includes(jele.name)) {
+          iele.mailFolderInfoListCopy.push({
+            ...jele,
+            name: "收件箱",
+            sort: 1,
+          });
+        } else if (mailMapData["unread"].includes(jele.name)) {
+          iele.mailFolderInfoListCopy.push({
+            ...jele,
+            name: "未读邮件",
+            sort: 2,
+          });
+        } else if (mailMapData["draft"].includes(jele.name)) {
+          iele.mailFolderInfoListCopy.push({
+            ...jele,
+            name: "草稿箱",
+            sort: 3,
+          });
+        } else if (mailMapData["sent"].includes(jele.name)) {
+          iele.mailFolderInfoListCopy.push({
+            ...jele,
+            name: "已发送",
+            sort: 4,
+          });
+        } else if (mailMapData["delete"].includes(jele.name)) {
+          iele.mailFolderInfoListCopy.push({
+            ...jele,
+            name: "已删除",
+            sort: 5,
+          });
+        } else if (mailMapData["waste"].includes(jele.name)) {
+          iele.mailFolderInfoListCopy.push({
+            ...jele,
+            name: "垃圾邮件",
+            sort: 6,
+          });
+        } else {
+          iele.otherFolder.push(jele);
+        }
+      }
+    }
     mailList.value = res.data;
+    console.log(res.data, "daa");
     if (mailList.value.length) {
       // 默认赋值第一邮箱
       selectMail.value = mailList.value[0];
       mailStore.selectMail = mailList.value[0];
+      // 获取我的文件夹树形
+      getMyFolderTree(selectMail.value);
       // 默认打开第一邮箱文件夹
       if (selectMail.value.mailFolderInfoList.length > 0) {
-        handleOpenMenu(selectMail.value.mailFolderInfoList[0]);
+        handleOpenMenu(selectMail.value.mailFolderInfoList[0], "10");
       }
     }
   });
   proxy
     .post("/mailInfo/getUserEmailList", { id: useUserStore().user.userId })
     .then((res) => {
-      staffMailList.value = [
+      staffMailData.value = [
         {
           mailUser: "员工邮箱",
           id: "0",
@@ -119,17 +528,23 @@ const handleClickMail = (item) => {
   mailStore.selectMail = item;
   // 默认打开第一邮箱文件夹
   if (selectMail.value.mailFolderInfoList.length > 0) {
-    handleOpenMenu(selectMail.value.mailFolderInfoList[0]);
+    handleOpenMenu(selectMail.value.mailFolderInfoList[0], "10");
   }
 };
 
-const handleOpenMenu = (item) => {
+const changeFloderId = (val) => {
+  selectFloderId.value = val;
+};
+
+const handleOpenMenu = (item, listPageType = "10") => {
+  // 10为官方文件夹以及六个外侧文件夹 20为我的文件夹  30为标签文件夹
   selectFloderId.value = item.id;
   const menu = {
     title: item.name,
     type: selectMail.value.type,
     folderId: item.id,
-    id: "floder" + "," + item.id,
+    id: "folder" + "," + item.id,
+    listPageType,
   };
   // 如没有这个菜单则push
   const menuItem = mailStore.mailMenuList.find((x) => x.id === menu.id);
@@ -141,20 +556,16 @@ const handleOpenMenu = (item) => {
   mailStore.currentId = menu.id;
 };
 
-const handleGoWrite = (mail = "") => {
+const handleGoWrite = (mail = "", pageType = "0") => {
   const menu = {
     title: "写信",
     type: selectMail.value.type,
     id: "write",
-    pageType: "0",
+    pageType,
   };
   if (mail) {
     menu.reMail = mail;
   }
-  // const menuItem = mailStore.mailMenuList.find((x) => x.id === menu.id);
-  // if (menuItem === undefined) {
-  //   mailStore.mailMenuList.push(menu);
-  // }
   const index = mailStore.mailMenuList.findIndex((x) => x.id === menu.id);
   if (index >= 0) {
     mailStore.mailMenuList[index] = menu;
@@ -165,12 +576,46 @@ const handleGoWrite = (mail = "") => {
   mailStore.currentId = menu.id;
 };
 
+const handleTreeNodeClick = (data, type) => {
+  if (data.id != "0") {
+    let menuData = {};
+    let listPageType = "10";
+    if (type === "staff") {
+      menuData = {
+        name: data.label,
+        id: data.id,
+      };
+    } else if (type === "folder") {
+      menuData = {
+        name: data.label,
+        id: data.id,
+      };
+      listPageType = "20";
+    } else if (type === "tag") {
+      menuData = {
+        name: data.name,
+        id: data.id,
+      };
+      listPageType = "30";
+    }
+    handleOpenMenu(menuData, listPageType);
+  }
+};
+
+// const clickTreeMail = (data, att) => {
+//   if (data.id !== "0" && data[att]) {
+//     handleGoWrite(data[att], "50");
+//   }
+// };
+
 onMounted(() => {
   getMialList();
+  getTagsList();
 });
 
 defineExpose({
   handleGoWrite,
+  changeFloderId,
 });
 </script>
 
@@ -190,13 +635,16 @@ defineExpose({
   .body {
     height: calc(100vh - 260px);
     overflow: auto;
-    padding: 10px;
+    // padding: 10px;
     .mail-menu {
       list-style: none;
       margin-block-start: 0;
       margin-block-end: 0;
       padding: 0px;
+      padding: 10px 10px 0 10px;
       .menu-item {
+        display: flex;
+        align-items: center;
         font-weight: 700;
         padding-left: 10px;
         font-size: 12px;
@@ -204,18 +652,34 @@ defineExpose({
         height: 40px;
         line-height: 40px;
         border-radius: 3px;
-        color: #696969;
+        color: #333333;
         cursor: pointer;
         &:hover {
           background: #ddedfe;
         }
+        .leftIcon {
+          font-size: 20px;
+          color: #999999;
+        }
       }
     }
   }
 }
 .select-menu {
   background: #ddedfe;
-  color: #169bd5 !important;
+  color: #0084ff !important;
+}
+.tree {
+  margin-top: 10px;
+  border-top: 1px solid #ddd;
+  padding: 10px 10px 0 10px;
+  .tree-content {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    padding-right: 10px;
+    align-items: center;
+  }
 }
 </style>
 <style lang="scss">

src/views/connect/E-mail/mail/com/mailDetail.vue

@@ -1,8 +1,22 @@
 <template>
   <div v-loading="loading" class="box">
     <div style="margin-bottom: 10px">
-      <el-button type="primary" @click="handleReply('10')">回 复</el-button>
-      <el-button type="warning" @click="handleReply('20')">转 发</el-button>
+      <el-button
+        :disabled="currentMailIndex === 0"
+        @click="handleChangeEail('10')"
+        >上一封</el-button
+      >
+      <el-button
+        :disabled="currentMailIndex === allLength - 1"
+        @click="handleChangeEail('20')"
+        >下一封</el-button
+      >
+      <el-button type="primary" @click="handleReply('10')">回复</el-button>
+      <el-button type="primary" @click="handleReply('30')">全部回复</el-button>
+      <el-button type="warning" @click="handleReply('20')">转发</el-button>
+      <el-button @click="handleReply('40')">再次编辑</el-button>
+      <el-button @click="handleMove">移动</el-button>
+      <el-button @click="handleRemove">删除</el-button>
     </div>
     <div class="top">
       <div class="top-row">
@@ -84,18 +98,51 @@
       >
       </iframe>
     </div>
+
+    <el-dialog
+      title="移动邮件"
+      v-model="myFolderDialog"
+      width="300px"
+      destroy-on-close
+      v-loading="submitLoading"
+    >
+      <byForm
+        :formConfig="myFolderFormConfig"
+        :formOption="formOption"
+        v-model="formData.myFolderData"
+        :rules="rules"
+        ref="myFolderForm"
+      >
+      </byForm>
+      <template #footer>
+        <el-button @click="myFolderDialog = false" size="large"
+          >取 消</el-button
+        >
+        <el-button
+          type="primary"
+          @click="submitMyFolderForm()"
+          size="large"
+          :loading="submitLoading"
+        >
+          确 定
+        </el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
-import byTable from "@/components/byTable/index";
 import useMailStore from "@/store/modules/mail";
+import byForm from "@/components/byForm/index";
+import { ElMessage, ElMessageBox } from "element-plus";
 const { proxy } = getCurrentInstance();
 const mailStore = useMailStore();
 let loading = ref(false);
 const detailsData = reactive({
   data: {},
 });
+const currentMailIndex = computed(() => mailStore.currentMailIndex);
+const allLength = computed(() => mailStore.mailDataList.length);
 const to = ref([]);
 const cc = ref([]);
 const bcc = ref([]);
@@ -103,18 +150,102 @@ const replyTo = ref([]);
 const fileList = ref([]);
 const requestData = ref({});
 const time = ref("");
-const getDetails = () => {
+// 移动文件夹
+const formOption = reactive({
+  inline: true,
+  labelWidth: 100,
+  itemWidth: 100,
+});
+const myFolderForm = ref(null);
+const myFolderTreeData = ref([]);
+const myFolderDialog = ref(false);
+const submitLoading = ref(false);
+const editType = ref("add");
+const myFolderFormConfig = computed(() => [
+  {
+    type: "treeSelect",
+    prop: "myFolderId",
+    label: "文件夹",
+    disabled: false,
+    itemWidth: 100,
+    data: myFolderTreeData.value,
+    style: {
+      width: "100%",
+    },
+  },
+]);
+const formData = reactive({
+  myFolderData: {},
+});
+const rules = ref({
+  myFolderId: [{ required: true, message: "请选择文件夹", trigger: "change" }],
+});
+
+const getMyFolderTree = () => {
+  proxy
+    .post("/myFolder/tree", { mailboxId: mailStore.selectMail.id })
+    .then((res) => {
+      myFolderTreeData.value = res.map((x) => ({ ...x, value: x.id }));
+    });
+};
+
+const handleMove = () => {
+  formData.myFolderData.messageId = mailStore.currentMenu.messageId;
+  myFolderDialog.value = true;
+};
+
+const handleRemove = () => {
+  ElMessageBox.confirm(`此操作将删除该邮件, 是否继续?`, "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(() => {
+    // 删除
+    proxy
+      .post("/mailService/deleteMail", {
+        id: mailStore.currentMenu.messageId,
+        type: mailStore.currentMenu.type,
+      })
+      .then((res) => {
+        ElMessage({
+          message: `操作成功！`,
+          type: "success",
+        });
+      });
+  });
+};
+
+const submitMyFolderForm = () => {
+  myFolderForm.value.handleSubmit(() => {
+    submitLoading.value = true;
+    proxy.post("/myFolderMessage/add", formData.myFolderData).then(
+      (res) => {
+        ElMessage({
+          message: `操作成功！`,
+          type: "success",
+        });
+        myFolderDialog.value = false;
+        submitLoading.value = false;
+        getMyFolderTree();
+      },
+      (err) => {
+        submitLoading.value = false;
+      }
+    );
+  });
+};
+
+const getDetails = (messageId) => {
   loading.value = true;
   proxy
     .post("/mailService/getMessageDetail", {
       type: mailStore.currentMenu.type,
-      messageId: mailStore.currentMenu.messageId,
+      messageId,
     })
     .then((res) => {
       if (mailStore.currentMenu.time) {
         time.value = mailStore.currentMenu.time;
       }
-
       detailsData.data = res;
       to.value = res.messageAddressList.filter((x) => x.type === 1);
       cc.value = res.messageAddressList.filter((x) => x.type === 2);
@@ -144,7 +275,13 @@ const showBodyText = (text) => {
 };
 
 const init = () => {
-  getDetails();
+  //实时更换索引
+  if (mailStore.currentMenu.messageId) {
+    mailStore.currentMailIndex = mailStore.mailDataList.findIndex(
+      (x) => x.id === mailStore.currentMenu.messageId
+    );
+  }
+  getDetails(mailStore.currentMenu.messageId);
 };
 
 onMounted(() => {
@@ -152,12 +289,16 @@ onMounted(() => {
 });
 
 const handleReply = (pageType) => {
-  // pageType 10为回复  20为转发  0为写信
+  // pageType 10为回复  20为转发 30为全部回复 40为再次编辑  0为写信
   let title = "";
   if (pageType === "10") {
     title = "回复";
   } else if (pageType === "20") {
     title = "转发";
+  } else if (pageType === "30") {
+    title = "全部回复";
+  } else if (pageType === "40") {
+    title = "再次编辑";
   }
   const menu = {
     title: title,
@@ -179,6 +320,37 @@ const handleReply = (pageType) => {
   mailStore.currentId = menu.id;
 };
 
+const handleChangeEail = (type) => {
+  if (type === "10") {
+    mailStore.currentMailIndex = currentMailIndex.value - 1;
+  } else if (type === "20") {
+    mailStore.currentMailIndex = currentMailIndex.value + 1;
+  }
+  // 拿到更变索引之后的行数据
+  const row = mailStore.mailDataList[mailStore.currentMailIndex];
+  // 查当前菜单的数据
+  const arr = mailStore.currentMenu.id.split(",");
+  if (arr.length > 1) {
+    const index = mailStore.mailMenuList.findIndex(
+      (x) => x.messageId === arr[1]
+    );
+    const menu = {
+      title: row.subject.slice(0, 4) + "...",
+      type: mailStore.selectMail.type,
+      messageId: row.id,
+      id: "detail" + "," + row.id,
+      time: row.sendDate,
+      row: { ...row },
+    };
+    const menuItem = mailStore.mailMenuList.find((x) => x.id === menu.id);
+    if (menuItem === undefined) {
+      mailStore.mailMenuList[index] = menu;
+    }
+    mailStore.currentMenu = menu;
+    mailStore.currentId = menu.id;
+  }
+};
+
 const handleClickFile = (file) => {
   const path = file.path ? file.path : file.url ? file.url : "";
   if (path) {
@@ -206,7 +378,7 @@ const handleClickDownload = (file) => {
     }
   };
 };
-
+getMyFolderTree();
 defineExpose({
   initFn: init,
 });

src/views/connect/E-mail/mail/com/mailList.vue

@@ -5,7 +5,86 @@
         <Refresh />
       </el-icon>
     </div>
-    <byTable
+    <div style="padding: 10px 15px; width: 100%">
+      <el-table
+        :data="tableData.data"
+        style="width: 100%"
+        :height="tableHeight"
+        v-loading="loading"
+      >
+        <el-table-column label="状态" width="70">
+          <template #default="{ row, $index }">
+            <div style="cursor: pointer" @click="handleRowClick(row, $index)">
+              <span v-if="!row.flags.includes('6')">
+                <img
+                  src="@/assets/images/mail/message.png"
+                  alt=""
+                  title="未读"
+                  class="messageImg"
+                />
+              </span>
+              <span v-if="row.flags.includes('6') && row.flags.includes('1')">
+                <img
+                  src="@/assets/images/mail/replied.png"
+                  alt=""
+                  title="已回复"
+                  class="messageImg"
+                />
+              </span>
+              <span v-if="row.flags.includes('6')">
+                <img
+                  src="@/assets/images/mail/message-open.png"
+                  alt=""
+                  title="已读"
+                  class="messageImg"
+                />
+              </span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="fromPersonalName" label="发件人" width="150">
+          <template #default="{ row, $index }">
+            <div style="cursor: pointer" @click="handleRowClick(row, $index)">
+              {{ row.fromPersonalName }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="fromEmail" label="发件人地址" width="210">
+          <template #default="{ row, $index }">
+            <div style="cursor: pointer" @click="handleRowClick(row, $index)">
+              {{ row.fromEmail }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="subject" label="主题">
+          <template #default="{ row, $index }">
+            <div style="cursor: pointer" @click="handleRowClick(row, $index)">
+              {{ row.subject }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="sendDate" label="时间" width="160">
+          <template #default="{ row, $index }">
+            <div style="cursor: pointer" @click="handleRowClick(row, $index)">
+              {{ row.sendDate }}
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        style="margin-top: 15px"
+        v-model:current-page="tableData.pagination.pageNum"
+        v-model:page-size="tableData.pagination.pageSize"
+        :page-sizes="[15, 30, 50, 100]"
+        layout="sizes, prev, pager, next"
+        :total="tableData.pagination.total"
+        prev-text="上一页"
+        next-text="下一页"
+        @current-change="handleCurrentChange"
+        @size-change="handleSizeChange"
+      />
+    </div>
+    <!-- <byTable
       :source="tableData.data"
       :pagination="tableData.pagination"
       :config="config"
@@ -47,7 +126,7 @@
           </span>
         </div>
       </template>
-    </byTable>
+    </byTable> -->
   </div>
 </template>
 
@@ -57,11 +136,13 @@ import useMailStore from "@/store/modules/mail";
 const { proxy } = getCurrentInstance();
 const mailStore = useMailStore();
 let loading = ref(false);
+const tableHeight = ref(0);
+tableHeight.value = window.innerHeight - 270;
 const tableData = reactive({
   data: [],
   pagination: {
     pageNum: 1,
-    pageSize: 10,
+    pageSize: 15,
     total: 0,
   },
 });
@@ -101,31 +182,61 @@ const config = computed(() => {
   ];
 });
 
-const getList = (req = {}) => {
-  tableData.pagination = { ...tableData.pagination, ...req };
-  loading.value = true;
-  proxy
-    .post("/mailService/getMessagePage", {
-      ...mailStore.currentMenu,
-      ...tableData.pagination,
-      ...req,
-    })
-    .then((res) => {
-      tableData.data = res.rows;
-      tableData.pagination.total = res.total;
-      loading.value = false;
-    });
+const getList = () => {
+  if (mailStore.currentMenu.listPageType === "10") {
+    loading.value = true;
+    proxy
+      .post("/mailService/getMessagePage", {
+        ...mailStore.currentMenu,
+        ...tableData.pagination,
+      })
+      .then((res) => {
+        tableData.data = res.rows;
+        mailStore.mailDataList = res.rows;
+        tableData.pagination.total = res.total;
+        loading.value = false;
+      });
+  } else if (mailStore.currentMenu.listPageType === "20") {
+    loading.value = true;
+    proxy
+      .post("/myFolderMessage/page", {
+        myFolderId: mailStore.currentMenu.folderId,
+        type: mailStore.selectMail.type,
+        ...tableData.pagination,
+      })
+      .then((res) => {
+        tableData.data = res.rows;
+        mailStore.mailDataList = res.rows;
+        tableData.pagination.total = res.total;
+        loading.value = false;
+      });
+  } else if (mailStore.currentMenu.listPageType === "30") {
+    loading.value = true;
+    proxy
+      .post("/myTagMessage/page", {
+        myTagId: mailStore.currentMenu.folderId,
+        type: mailStore.selectMail.type,
+        ...tableData.pagination,
+      })
+      .then((res) => {
+        tableData.data = res.rows;
+        mailStore.mailDataList = res.rows;
+        tableData.pagination.total = res.total;
+        loading.value = false;
+      });
+  }
 };
 
 const handleRefresh = () => {
   tableData.pagination = {
     pageNum: 1,
-    pageSize: 10,
+    pageSize: 15,
   };
   getList();
 };
 
-const handleRowClick = (row) => {
+const handleRowClick = (row, index) => {
+  mailStore.currentMailIndex = index;
   const menu = {
     title: row.subject.slice(0, 4) + "...",
     type: mailStore.selectMail.type,
@@ -141,14 +252,21 @@ const handleRowClick = (row) => {
   mailStore.currentMenu = menu;
   mailStore.currentId = menu.id;
 };
-onMounted(() => {
-  // getList();
-});
 
 const init = () => {
   getList();
 };
 
+const handleCurrentChange = (val) => {
+  tableData.pagination.pageNum = val;
+  getList();
+};
+
+const handleSizeChange = (val) => {
+  tableData.pagination.pageSize = val;
+  getList();
+};
+
 defineExpose({
   initFn: init,
 });
@@ -160,4 +278,7 @@ defineExpose({
   height: 18px;
   transform: translateY(5px);
 }
+.el-pagination {
+  padding-left: 30vw;
+}
 </style>

src/views/connect/E-mail/mail/com/mailWrite.vue

@@ -227,6 +227,7 @@ import { ElMessage, ElMessageBox } from "element-plus";
 import Editor from "@/components/Editor/index.vue";
 import { validEmail } from "@/utils/validate.js";
 import useMailStore from "@/store/modules/mail";
+import { nextTick } from "vue";
 const mailStore = useMailStore();
 const { proxy } = getCurrentInstance();
 const loading = ref(false);
@@ -485,16 +486,68 @@ const handleReplyInit = (allData, pageType) => {
   } else if (pageType === "20") {
     to.value = [];
     formData.data.subject = "Fw: " + data.subject;
+  } else if (pageType === "30") {
+    // 全部回复
+    if (data.messageAddressList && data.messageAddressList.length > 0) {
+      to.value = data.messageAddressList
+        .filter((x) => x.type !== 1)
+        .map((x) => ({
+          address: x.email,
+          personal: x.personalName,
+        }));
+    }
+    formData.data.subject = "Re: " + data.subject;
+  } else if (pageType === "40") {
+    if (data.messageAddressList && data.messageAddressList.length > 0) {
+      to.value = data.messageAddressList
+        .filter((x) => x.type === 1)
+        .map((x) => ({
+          address: x.email,
+          personal: x.personalName,
+        }));
+      const cc = data.messageAddressList
+        .filter((x) => x.type === 2)
+        .map((x) => ({
+          address: x.email,
+          personal: x.personalName,
+        }));
+      if (cc.length > 0) {
+        showcc.value = true;
+        cc.value = cc;
+      }
+      const bcc = data.messageAddressList
+        .filter((x) => x.type === 2)
+        .map((x) => ({
+          address: x.email,
+          personal: x.personalName,
+        }));
+      if (bcc.length > 0) {
+        showbcc.value = true;
+        bcc.value = bcc;
+      }
+    }
+    formData.data.subject = data.subject;
+  } else if (pageType === "50") {
+    handleReset();
+    to.value = [
+      {
+        address: mailStore.currentMenu.reMail,
+        personal: null,
+      },
+    ];
+  }
+  if (pageType !== "50") {
+    contentEditor.value.changeHtml(
+      `<p><br></p><p><br></p>${data.content}`,
+      true
+    );
+    nextTick(() => {
+      contentEditor.value.getFocus();
+    });
+    formData.data.replyTo = mailStore.selectMail.mailUser;
   }
-  contentEditor.value.changeHtml(`<p><br></p><p><br></p>${data.content}`, true);
-  // contentEditor.value.changeHtml(
-  //   `<html><p><br></p><p><br></p>${data.content}<html/>`,
-  //   true
-  // );
-  // contentEditor.value.getFocus();
-  formData.data.replyTo = mailStore.selectMail.mailUser;
 };
-
+// pageType 10为回复  20为转发 30为全部回复 40为再次编辑  0为写信 50为只回填收件人
 const init = () => {
   if (mailStore.currentMenu.pageType === "0") {
     handleReset();
@@ -502,9 +555,14 @@ const init = () => {
     handleReplyInit(mailStore.currentMenu, "10");
   } else if (mailStore.currentMenu.pageType === "20") {
     handleReplyInit(mailStore.currentMenu, "20");
+  } else if (mailStore.currentMenu.pageType === "30") {
+    handleReplyInit(mailStore.currentMenu, "30");
+  } else if (mailStore.currentMenu.pageType === "40") {
+    handleReplyInit(mailStore.currentMenu, "40");
+  } else if (mailStore.currentMenu.pageType === "50") {
+    handleReplyInit(mailStore.currentMenu, "50");
   }
 };
-
 watch(
   () => mailStore.currentMenu.pageType,
   (val) => {
@@ -514,17 +572,23 @@ watch(
       handleReplyInit(mailStore.currentMenu, "10");
     } else if (val === "20") {
       handleReplyInit(mailStore.currentMenu, "20");
+    } else if (val === "30") {
+      handleReplyInit(mailStore.currentMenu, "30");
+    } else if (val === "40") {
+      handleReplyInit(mailStore.currentMenu, "40");
+    } else if (val === "50") {
+      handleReplyInit(mailStore.currentMenu, "50");
     }
   }
 );
 
 onMounted(() => {
-  if (mailStore.currentMenu.reMail) {
-    to.value.push({
-      address: mailStore.currentMenu.reMail,
-      personal: null,
-    });
-  }
+  // if (mailStore.currentMenu.reMail) {
+  //   to.value.push({
+  //     address: mailStore.currentMenu.reMail,
+  //     personal: null,
+  //   });
+  // }
 });
 
 defineExpose({

src/views/connect/E-mail/mail/com/main.vue

@@ -16,8 +16,8 @@
       >
         <div class="main">
           <mailList
-            v-show="item.id.includes('floder')"
-            :ref="'floder' + index"
+            v-show="item.id.includes('folder')"
+            :ref="'folder' + index"
           ></mailList>
           <mailDetail
             v-show="item.id.includes('detail')"
@@ -97,8 +97,10 @@ const handleTabChange = (val) => {
   });
   // 判断是文件夹还是邮件详情
   let type = "";
-  if (currentMenu.id.includes("floder")) {
-    type = "floder";
+  if (currentMenu.id.includes("folder")) {
+    type = "folder";
+    // 如果更换的是文件夹菜单则更新左侧样式
+    proxy.$emit("changeFloderId", currentMenu.folderId);
   } else if (currentMenu.id.includes("detail")) {
     type = "detail";
   } else {

src/views/connect/E-mail/mail/index.vue

@@ -5,7 +5,7 @@
         <mailLeft ref="leftDom"></mailLeft>
       </div>
       <div class="right">
-        <mailMain></mailMain>
+        <mailMain @changeFloderId="handleChangeFloderId"></mailMain>
       </div>
     </div>
     <div>
@@ -45,6 +45,11 @@ const handleClose = () => {
 };
 const route = useRoute();
 const leftDom = ref(null);
+
+const handleChangeFloderId = (val) => {
+  leftDom.value.changeFloderId(val);
+};
+
 onMounted(() => {
   if (route.query.mail) {
     leftDom.value.handleGoWrite(route.query.mail);