信件标签功能实现

src/api/org/label.ts

@@ -0,0 +1,16 @@
+import request from '@/utils/request'
+
+// 标签列表
+export function labelLists(params?: any) {
+    return request.get({ url: '/system/label/list', params })
+}
+
+// 标签新增
+export function labelAdd(params?: any) {
+    return request.post({ url: '/system/label/add', params })
+}
+
+// 标签插入
+export function labelInsert(params?: any) {
+    return request.post({ url: '/system/label/insert', params })
+}

src/api/work/index.ts

@@ -8,4 +8,9 @@ export function getTodos(query) {
 // 我的已办
 export function getDones(query) {
     return request.get({ url: '/work/done', query})
+}
+
+// 信件查询
+export function getMails(query) {
+    return request.get({ url: '/work/query', query})
 }

src/views/work/Query.vue

@@ -79,9 +79,9 @@
                 <el-row>
                     <el-col :span="6">
                         <el-form-item label="信件标签">
-                            <el-select v-model="query.tags" placeholder="请选择标签" multiple clearable style="width: 280px">
-                                <el-option v-for="item in dictData.mail_tags" :key="item.value" :label="item.name"
-                                    :value="item.value" />
+                            <el-select v-model="query.mailLabels" placeholder="请选择标签" multiple clearable style="width: 280px">
+                                <el-option v-for="item in optionsData.labels" :key="item.id" :label="item.labelName"
+                                    :value="item.id" />
                             </el-select>
                         </el-form-item>
                     </el-col>
@@ -146,10 +146,11 @@
                             </div>
                         </template>
                     </el-table-column>
-                    <el-table-column prop="tags" label="信件标签" width="160" />
+                    <el-table-column prop="mailLabels" label="信件标签" width="160" />
                     <el-table-column label="操作">
                         <template #default="{ row }">
-                            <el-button type="primary" link @click="handleMail(row.mailId)">立即处理</el-button>
+                            <el-button type="primary" link @click="handleMail(row.mailId)">详情</el-button>
+                            <el-button type="primary" link @click="handleMailLabel(row.mailId)">标签</el-button>
                         </template>
                     </el-table-column>
                 </el-table>
@@ -171,15 +172,18 @@
         </main>
     </div>
     <MailDialog v-model:show="showModel" :mail-id="activeMailId" @update="getList" />
+    <MailLabel v-model:show="showLabel" :mail-id="activeMailId" @close="showLabel = false" @update="getList" />
 </template>
 <script lang="ts" setup>
-import MailDialog from "../work/components/MailDialog.vue";
-import { getDones } from "@/api/work";
+import MailDialog from "./components/MailDialog.vue";
+import MailLabel from "./components/MailLabel.vue";
+import { getMails } from "@/api/work";
 import { useDictData } from "@/hooks/useDictOptions";
 import useMailStore from "@/stores/modules/mail";
 import { formatTimeText, getDictLable, getFlowTagType } from "@/utils/util";
 import { useDictOptions } from '@/hooks/useDictOptions'
 import { deptLists } from '@/api/org/department'
+import { labelLists } from '@/api/org/label'
 import { ref, reactive, watch } from "vue";
 import { ElTable } from "element-plus";
 
@@ -189,6 +193,7 @@ const tableRef = ref<InstanceType<typeof ElTable>>();
 const mailStore = useMailStore();
 mailStore.getMailCategorys();
 const { dictData } = useDictData(["mail_source", "mail_level", "mail_state"]);
+const showLabel = ref(false);
 
 const query = ref({
     contactField: "name",
@@ -237,18 +242,23 @@ const form = ref([]);
 const showModel = ref(false);
 const activeMailId = ref("");
 
-function handleMail(mailId) {
+function handleMail(mailId: any) {
     showModel.value = true;
     activeMailId.value = mailId;
 }
 
-const handleSizeChange = (size) => {
+const handleMailLabel = (mailId: any) => {
+    showLabel.value = true;
+    activeMailId.value = mailId;
+}
+
+const handleSizeChange = (size: any) => {
     query.value.size = size;
     getList();
     refreshCheckAll()
 }
 
-const handleCurrentChange = (page) => {
+const handleCurrentChange = (page: any) => {
     query.value.current = page;
     getList();
     refreshCheckAll()
@@ -259,18 +269,34 @@ function getList() {
         query.value.mailTimeStart = query.value.mailTime[0];
         query.value.mailTimeEnd = query.value.mailTime[1];
     }
-    getDones(query.value).then((data) => {
+    let source = query.value.mailLabels
+    if (query.value.mailLabels) {
+        let strLabels = ""
+        for (let i = 0; i < query.value.mailLabels.length; i++) {
+            if (i === query.value.mailLabels.length - 1)
+                strLabels += query.value.mailLabels[i]
+            else
+                strLabels += query.value.mailLabels[i] + ','
+        }
+        query.value.mailLabels = strLabels
+    }
+    getMails(query.value).then((data: any) => {
         form.value = data.records;
         totalSize.total = data.total;
         totalSize.pages = data.pages;
+        query.value.mailLabels = source
     });
 }
 
 const { optionsData } = useDictOptions<{
-    dept: any[]
+    dept: any[],
+    labels: any[]
 }>({
     dept: {
         api: deptLists
+    },
+    labels: {
+        api: labelLists
     }
 })
 

src/views/work/components/MailLabel.vue

@@ -0,0 +1,158 @@
+<template>
+    <el-dialog v-model="visible" width="50vw" top="4vh" class="dialog-header-nopadding" align-center
+        style="--el-dialog-padding-primary: 10px">
+        <template #header="" style="display: flex;align-items: center;justify-content: space-between;">
+            <div class="dialog-header">
+                <span class="dialog-title">信件标签</span>
+            </div>
+        </template>
+        <div class="dialog-body">
+            <el-form ref="formRef" :model="form">
+                <span class="main-label">请选择标签</span>
+                <el-form-item class="mt-20">
+                    <el-checkbox-group v-model="form.mainLabels" style="width: 100%;">
+                        <el-row>
+                            <el-col :span="6" v-for="(mailLabel, index) in allLabels" :key="index">
+                                <el-checkbox :label="mailLabel.id">{{ mailLabel.labelName }}</el-checkbox>
+                            </el-col>
+                        </el-row>
+                    </el-checkbox-group>
+                </el-form-item>
+                <el-row :gutter="20">
+                    <el-col :span="6">
+                        <el-input v-model="form.newLabel" placeholder="请输入标签"></el-input>
+                    </el-col>
+                    <el-col :span="6">
+                        <el-button type="primary" @click="handleLabelAdd" plain>添加标签</el-button>
+                    </el-col>
+                </el-row>
+                <div style="width: 100%;display: flex;justify-content: flex-end; margin-top: 20px;">
+                    <el-button type="primary" @click="handleSubmit" style="height: 40px;">确认标签</el-button>
+                </div>
+            </el-form>
+        </div>
+    </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ref, defineProps } from 'vue'
+import { watch } from 'vue'
+import { labelLists } from '@/api/org/label'
+import { labelAdd } from '@/api/org/label'
+import { labelInsert } from '@/api/org/label'
+import { ElMessage } from 'element-plus'
+const emit = defineEmits(['update'])
+const props = defineProps({
+    show: {
+        type: Boolean,
+        default: false
+    },
+    mailId: {
+        type: String,
+        default: ''
+    }
+})
+const visible = ref(props.show)
+watch(
+    () => props.show,
+    (val) => {
+        visible.value = val;
+        if (val) {
+        }
+    }
+);
+
+interface MailLabel {
+    id: number,
+    labelName: string
+}
+const form = ref({
+    mainLabels: [] as MailLabel[],
+    newLabel: null,
+})
+const allLabels = ref([] as MailLabel[])
+getMainLabels()
+function getMainLabels() {
+    labelLists().then((res: any) => {
+        allLabels.value = res
+    })
+}
+
+const handleLabelAdd = () => {
+    let newLabel = JSON.stringify({ labelName: form.value.newLabel, })
+    labelAdd(JSON.parse(newLabel)).then((res: any) => {
+        console.log(res)
+        getMainLabels()
+    })
+}
+const handleSubmit = () => {
+    let strLabels = ''
+    for (let i = 0; i < form.value.mainLabels.length; i++) {
+        if (i === form.value.mainLabels.length - 1)
+            strLabels += form.value.mainLabels[i]
+        else
+            strLabels += form.value.mainLabels[i] + ','
+    }
+    let labelInfo = JSON.stringify({ mailId: props.mailId, labelName: strLabels })
+    console.log(labelInfo)
+    console.log(JSON.parse(labelInfo))
+    labelInsert(JSON.parse(labelInfo)).then((res: any) => {
+        console.log(res)
+        ElMessage.success('标签设置成功')
+        visible.value = false
+        emit('update')
+    }).catch((err: any) => {
+        console.log(err)
+        ElMessage.error('标签设置失败')
+    })
+    console.log(form.value.mainLabels)
+}
+</script>
+
+<style lang="scss" scoped>
+.dialog-header {
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-self: center;
+}
+
+.dialog-title {
+    margin-left: 20px;
+    width: 64px;
+    height: 22px;
+    font-size: 16px;
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 400;
+    color: #FFFFFF;
+    line-height: 22px;
+}
+
+.dialog-body {
+    margin-left: 20px;
+    margin-right: 20px;
+}
+
+.main-label {
+    width: 80px;
+    height: 22px;
+    font-size: 20px;
+    font-family: PingFang-SC, PingFang-SC;
+    font-weight: bold;
+    color: #333333;
+    line-height: 22px;
+}
+
+.title-label {
+    margin-bottom: 20px;
+}
+
+.info-input {
+    width: 100%;
+}
+
+.el-upload__inner {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+</style>