mailbox-lan-vue/src/views/work/Fav.vue

<template>
    <div class="container">
        <header>
            <el-form :label-width="120">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="来信时间">
                            <el-date-picker v-model="query.mailTime" value-format="YYYY-MM-DD" type="daterange"
                                range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期"
                                @change="handleMailTimeQuery" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="信件来源">
                            <el-select v-model="query.source" placeholder="请选择信件来源" clearable>
                                <el-option v-for="item in dictData.mail_source" :key="item.value" :label="item.name"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="来信人员">
                            <div class="flex gap">
                                <el-select v-model="query.contactField">
                                    <el-option label="姓名" value="name" />
                                    
                                    <el-option label="联系电话" value="phone" />
                                </el-select>
                                <el-input v-model="query.contactFieldValue" placeholder="请输入" clearable />
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="信件等级">
                            <el-select v-model="query.mailLevel" placeholder="请选择信件等级" clearable>
                                <el-option v-for="item in dictData.mail_level" :key="item.value" :label="item.name"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="信件分类">
                            <el-tree-select v-model="query.mailCategory" :data="mailStore.mailCategorys" check-strictly clearable
                                filterable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="信件状态">
                            <el-select v-model="query.mailState" placeholder="请选择信件状态" clearable>
                                <el-option v-for="item in dictData.mail_state" :key="item.value" :label="item.name"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>


                </el-row>
                <div class="flex end mb-20">
                    <div>
                        <el-button type="primary" @click="getList">查询</el-button>
                        <el-button @click="reset">重置</el-button>
                    </div>
                </div>
            </el-form>
        </header>
        <main>
            <div class="table-container">
                <el-table :data="favs" style="width: 100%" stripe>
                    <el-table-column prop="mailTime" label="来信时间" align="center" width="160" />
                    <el-table-column label="信件来源" align="center" width="90">
                        <template #default="{ row }">
                            <span>{{
                dictData.mail_source.filter(
                    (item) => item.value === row.source
                )[0].name
            }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="contactName" label="姓名" align="center" width="80" />
                    <el-table-column prop="contactPhone" label="联系电话" width="120" align="center" />
                    
                    <el-table-column prop="mailCategory" label="信件分类" width="120" align="center" />
                    <el-table-column prop="content" label="信件内容" align="center" show-overflow-tooltip />
                    <el-table-column label="信件状态" width="90" align="center">
                        <template #default="{ row }">
                            <span>{{
                getDictLable(dictData.mail_state, row.mailState)
            }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="threeDeptName" label="办理单位" width="120" align="center" />
                    <el-table-column label="信件等级" width="100" align="center">
                        <template #default="{ row }">
                            <mail-level :value="row.mailLevel" :list="dictData.mail_level" />
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" align="center">
                        <template #default="{ row }">
                            <el-button type="primary" link @click="handleMail(row)">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="flex mt-4 end">
                <el-pagination @size-change="getList" @current-change="getList" :current-page="query.current"
                    :page-sizes="[10, 20, 50]" :page-size="query.size" v-model:current-page="query.current"
                    :total="totalSize.total">
                </el-pagination>
            </div>
        </main>
    </div>

    <MailDialog v-model:show="showModel" :mail-id="activeMailId" :disabled="true" @update="getList" />
</template>
<script setup>
import MailDialog from "./components/MailDialog.vue";

import { listFav } from "@/api/work/fav";
import { useDictData } from "@/hooks/useDictOptions";
import useMailStore from "@/stores/modules/mail";
import { formatTimeText, getDictLable, getFlowTagType } from "@/utils/util";

const mailStore = useMailStore();
mailStore.getMailCategorys();
const { dictData } = useDictData(["mail_source", "mail_level", "mail_state"]);

const query = ref({
    size: 10,
    current: 1,
});
const totalSize = reactive({
    total: 0,
    pages: 0
})

const showCreateMailSelf = ref(false);
const closeCreateMailSelf = () => {
    showCreateMailSelf.value = false;
}

const favs = ref([]);
const showModel = ref(false);
const activeMailId = ref("");

function handleMail(row) {
    showModel.value = true;
    activeMailId.value = row.mailId;
}

function getList() {
    listFav(query.value).then((data) => {
        favs.value = data.records;
        totalSize.total = data.total;
        totalSize.pages = data.pages;
    });
}

function reset() {
    query.value = {};
    getList();
}

getList()

function handleMailTimeQuery(val) {
    if (val) {
        query.value.mailTimeStart = val[0];
        query.value.mailTimeEnd = val[1];
    } else {
        delete query.value.mailTimeStart
        delete query.value.mailTimeEnd
    }
}
</script>