Merge pull request #13 from Jinnrry/v2.1

v2.1

fe/src/components/GroupSettings.vue

@@ -0,0 +1,97 @@
+<template>
+    <div id="main">
+        <el-tree :expand-on-click-node="false" :data="data" :props="defaultProps" :defaultExpandAll="true" :class="node">
+            <template #default="{ node, data }">
+                <div>
+                    <span v-if="data.id != -1"> {{ data.label }}</span>
+                    <el-input v-if="data.id == -1" v-model="data.label" @blur="onInputBlur(data)"></el-input>
+                    <el-button v-if="data.id != 0" @click="del(node, data)" size="small" type="danger" circle> -
+                    </el-button>
+                    <el-button v-if="data.id != 0" @click="add(data)" size="small" type="primary" circle> + </el-button>
+                </div>
+            </template>
+        </el-tree>
+
+        <el-button @click="addRoot">{{ lang.add_group }}</el-button>
+    </div>
+</template>
+
+<script setup>
+import $http from "../http/http";
+import { reactive, ref } from 'vue'
+import lang from '../i18n/i18n';
+
+const data = reactive([])
+
+$http.get('/api/group').then(res => {
+    data.push(...res.data)
+})
+
+const del = function (node, data) {
+    if (data.id != -1) {
+        $http.post("/api/group/del", { "id": data.id }).then(res => {
+            if (res.errorNo != 0) {
+                ElMessage({
+                    message: res.errorMsg,
+                    type: 'error',
+                })
+            } else {
+                const pc = node.parent.childNodes
+                for (let i = 0; i < pc.length; i++) {
+                    if (pc[i].id == node.id) {
+                        pc.splice(i, 1)
+                        return
+                    }
+                }
+            }
+        })
+    } else {
+        const pc = node.parent.childNodes
+        for (let i = 0; i < pc.length; i++) {
+            if (pc[i].id == node.id) {
+                pc.splice(i, 1)
+                return
+            }
+        }
+    }
+}
+
+const add = function (item) {
+    if (item.children == null) {
+        item.children = []
+    }
+    item.children.push({
+        "children": [],
+        "label": "",
+        "id": "-1",
+        "parent_id": item.id
+    })
+}
+
+const addRoot = function () {
+    data.push({
+        "children": [],
+        "label": "",
+        "id": "-1",
+        "parent_id": 0
+    })
+}
+
+const onInputBlur = function (item) {
+    if (item.label != "") {
+        $http.post("/api/group/add", { "name": item.label, "parent_id": item.parent_id }).then(res => {
+            if (res.errorNo != 0) {
+                ElMessage({
+                    message: res.errorMsg,
+                    type: 'error',
+                })
+            } else {
+                $http.get('/api/group').then(res => {
+                    data.splice(0, data.length)
+                    data.push(...res.data)
+                })
+            }
+        })
+    }
+}
+</script>

fe/src/components/HomeAside.vue

@@ -61,4 +61,10 @@ const handleNodeClick = function (data) {
 .el-tree {
   background-color: #F1F1F1;
 }
+
+.add_group{
+  font-size: 14px;
+  text-align: left;
+  padding-left: 15px;
+}
 </style>

fe/src/components/HomeHeader.vue

@@ -8,11 +8,15 @@
                 <Setting style="color:#FFFFFF" />
             </el-icon>
         </div>
-        <el-drawer v-model="openSettings" :title="lang.settings">
+        <el-drawer v-model="openSettings" size="80%" :title="lang.settings">
             <el-tabs tab-position="left" >
                 <el-tab-pane :label="lang.security">
                     <SecuritySettings/>
                 </el-tab-pane>
+
+                <el-tab-pane :label="lang.group_settings">
+                    <GroupSettings/>
+                </el-tab-pane>
             </el-tabs>
         </el-drawer>
 
@@ -25,6 +29,7 @@ import { ref } from 'vue'
 import { ElMessageBox } from 'element-plus'
 import SecuritySettings from '@/components/SecuritySettings.vue'
 import lang from '../i18n/i18n';
+import GroupSettings from './GroupSettings.vue';
 
 
 const openSettings = ref(false)

fe/src/i18n/i18n.js

@@ -58,6 +58,13 @@ var lang = {
     "ssl_manuallyf": "Manually configure an SSL certificate",
     "ssl_key_path": "ssl key file path",
     "ssl_crt_path": "ssl crt file path",
+    "group_settings": "Group",
+    "add_group": "Add Group",
+    "del_email_confirm": "Are you sure you want to delete them?",
+    "move_email_confirm": "Are you sure you want to move them?",
+    "del_btn": "Delete",
+    "move_btn": "Move",
+    "read_btn": "Readed"
 };
 
 
@@ -122,6 +129,13 @@ var zhCN = {
     "ssl_manuallyf": "手动配置SSL证书",
     "ssl_key_path": "ssl key文件位置",
     "ssl_crt_path": "ssl crt文件位置",
+    "group_settings": "分组",
+    "add_group": "新建分组",
+    "del_email_confirm": "你确定要删除吗?",
+    "move_email_confirm": "你确定要移动这些邮件吗?",
+    "del_btn": "删除",
+    "move_btn": "移动",
+    "read_btn": "已读"
 }
 
 switch (navigator.language) {

fe/src/views/ListView.vue

@@ -4,11 +4,27 @@
             <div id="action">
                 <RouterLink to="/editer">+{{ lang.compose }}</RouterLink>
             </div>
-            <!-- <div id="action">全部标记为已读</div> -->
         </div>
         <div id="title">{{ groupStore.name }}</div>
+        <div id="action">
+            <el-button @click="del" size="small">{{ lang.del_btn }}</el-button>
+            <el-button @click="markRead" size="small">{{ lang.read_btn }}</el-button>
+            <el-dropdown style="margin-left: 12px;">
+                <el-button size="small">
+                    {{ lang.move_btn }}
+                    <el-icon class="el-icon--right"><arrow-down /></el-icon>
+                </el-button>
+                <template #dropdown>
+                    <el-dropdown-menu>
+                        <el-dropdown-item @click="move(group.id)" v-for="group in groupList">{{ group.name
+                        }}</el-dropdown-item>
+                    </el-dropdown-menu>
+                </template>
+            </el-dropdown>
+        </div>
         <div id="table">
-            <el-table :data="data" :show-header="true" :border="false" @row-click="rowClick" :row-style="rowStyle">
+            <el-table ref="taskTableDataRef" @selection-change="selectionLineChange" :data="data" :show-header="true"
+                :border="false" @row-click="rowClick" :row-style="rowStyle">
                 <el-table-column type="selection" width="30" />
                 <el-table-column prop="title" label="" width="50">
                     <template #default="scope">
@@ -49,7 +65,7 @@
             </el-table>
         </div>
         <div id="pagination">
-            <el-pagination background layout="prev, pager, next" :page-count="totalPage" />
+            <el-pagination background layout="prev, pager, next" :page-count="totalPage" @current-change="pageChange" />
         </div>
     </div>
 </template>
@@ -58,19 +74,18 @@
 
 <script setup>
 import $http from "../http/http";
-
+import { ArrowDown } from '@element-plus/icons-vue'
 import { RouterLink } from 'vue-router'
 import { reactive, ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
 import router from "@/router";  //根路由对象
 import useGroupStore from '../stores/group'
 import lang from '../i18n/i18n';
 
 const groupStore = useGroupStore()
 
-const route = useRoute()
-
+const groupList = ref([])
 
+const taskTableDataRef = ref(null)
 
 let tag = groupStore.tag;
 
@@ -96,29 +111,140 @@ watch(groupStore, async (newV, oldV) => {
 const data = ref([])
 const totalPage = ref(0)
 
-$http.post("/api/email/list", { tag: tag, page_size: 10 }).then(res => {
-    data.value = res.data.list
-    totalPage.value = res.data.total_page
-})
+const updateList = function () {
+    $http.post("/api/email/list", { tag: tag, page_size: 10 }).then(res => {
+        data.value = res.data.list
+        totalPage.value = res.data.total_page
+    })
+}
+
+const updateGroupList = function () {
+    $http.post("/api/group/list").then(res => {
+        groupList.value = res.data
+    })
+}
+
+updateList()
+updateGroupList()
 
 const rowClick = function (row, column, event) {
     router.push("/detail/" + row.id)
 }
 
+const markRead = function () {
+    let rows = taskTableDataRef.value?.getSelectionRows()
+    let ids = []
+    rows.forEach(element => {
+        ids.push(element.id)
+    });
+
+    $http.post("/api/email/read", { "ids": ids }).then(res => {
+        if (res.errorNo == 0) {
+            updateList()
+        } else {
+            ElMessage({
+                type: 'error',
+                message: res.errorMsg,
+            })
+        }
+    })
+}
+
+
+const move = function (group_id) {
+    let rows = taskTableDataRef.value?.getSelectionRows()
+    let ids = []
+    rows.forEach(element => {
+        ids.push(element.id)
+    });
+
+    ElMessageBox.confirm(
+        lang.move_email_confirm,
+        'Warning',
+        {
+            confirmButtonText: 'OK',
+            cancelButtonText: 'Cancel',
+            type: 'warning',
+        }
+    )
+        .then(() => {
+            $http.post("/api/email/move", { "group_id": group_id, "ids": ids }).then(res => {
+                if (res.errorNo == 0) {
+                    updateList()
+                    ElMessage({
+                        type: 'success',
+                        message: 'Move completed',
+                    })
+                } else {
+                    ElMessage({
+                        type: 'error',
+                        message: res.errorMsg,
+                    })
+                }
+            })
+
+
+
+        })
+}
+
+
+
+const del = function () {
+    let rows = taskTableDataRef.value?.getSelectionRows()
+    let ids = []
+    rows.forEach(element => {
+        ids.push(element.id)
+    });
+
+    ElMessageBox.confirm(
+        lang.del_email_confirm,
+        'Warning',
+        {
+            confirmButtonText: 'OK',
+            cancelButtonText: 'Cancel',
+            type: 'warning',
+        }
+    )
+        .then(() => {
+            $http.post("/api/email/del", { "ids": ids }).then(res => {
+                if (res.errorNo == 0) {
+                    updateList()
+                    ElMessage({
+                        type: 'success',
+                        message: 'Delete completed',
+                    })
+                } else {
+                    ElMessage({
+                        type: 'error',
+                        message: res.errorMsg,
+                    })
+                }
+            })
+
+
+
+        })
+}
+
+
 const rowStyle = function ({ row, rowIndwx }) {
     return { 'cursor': 'pointer' }
 }
 
+const pageChange = function (p) {
+    $http.post("/api/email/list", { tag: tag, page_size: 10, current_page: p }).then(res => {
+        data.value = res.data.list
+    })
+}
+
 </script>
 
 
 <style scoped>
 #action {
-    text-align: left;
-    font-size: 20px;
-    line-height: 40px;
-    padding-left: 10px;
-    margin-right: 5px;
+    display: flex;
+    flex-direction: row;
 }
 
 

fe/src/views/LoginView.vue

@@ -1,7 +1,7 @@
 <template>
     <div id="main">
         <div id="form">
-            <el-form :model="form" label-width="120px">
+            <el-form :model="form" label-width="120px" @keyup.enter.native="onSubmit">
                 <el-form-item :label="lang.account">
                     <el-input v-model="form.account" placeholder="User Name" />
                 </el-form-item>

fe/vite.config.js

@@ -26,7 +26,6 @@ export default defineConfig({
     proxy: {
       "/api": "http://127.0.0.1/",
       "/attachments":"http://127.0.0.1/"
-
     }
   }
 })