From 1b2ac0be9945cdf8676686f4a6e0d2104bac8ebe Mon Sep 17 00:00:00 2001
From: 21819 <tomorasd@foxmail.com>
Date: Wed, 7 Feb 2024 10:55:34 +0800
Subject: [PATCH] init

---
 src/views/mailquery/Query.vue | 244 ++++++++++++++++++++++++++++++++++
 1 file changed, 244 insertions(+)
 create mode 100644 src/views/mailquery/Query.vue

diff --git a/src/views/mailquery/Query.vue b/src/views/mailquery/Query.vue
new file mode 100644
index 0000000..5f3608e
--- /dev/null
+++ b/src/views/mailquery/Query.vue
@@ -0,0 +1,244 @@
+<template>
+    <div class="container">
+        <header>
+            <el-form :inline="true" class="demo-form-inline" :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="结束日期" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="6">
+                        <el-form-item label="信件来源">
+                            <el-select v-model="query.source" placeholder="" clearable style="width: 280px">
+                                <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" style="width: 100px">
+                                    <el-option label="姓名" value="name" />
+                                    <el-option label="身份证" value="idCard" />
+                                    <el-option label="联系电话" value="phone" />
+                                </el-select>
+                                <el-input v-model="query.contactFieldValue" :placeholder="placeholderText" clearable
+                                    style="width: 120px" />
+                            </div>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="6">
+                        <el-form-item label="信件等级">
+                            <el-select v-model="query.mailLevel" placeholder="" clearable style="width: 280px">
+                                <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
+                                filterable style="width: 280px" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="6">
+                        <el-form-item label="信件状态">
+                            <el-select v-model="query.mailState" placeholder="" clearable style="width: 280px">
+                                <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-col :span="6">
+                        <el-form-item label="办理单位">
+                            <div class="flex gap">
+                                <el-input v-model="query.handlingDeptId" placeholder="" clearable style="width: 280px" />
+                            </div>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="6">
+                        <el-form-item label="流程阶段">
+                            <el-select v-model="query.flowKey" placeholder="" clearable style="width: 280px">
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <div style="display: flex; justify-content: space-between; margin-bottom: 20px;">
+                    <div>
+                        <el-button type="primary" @click="createMail" v-perms="['system:admin:add']">自建信件</el-button>
+                    </div>
+                    <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="todos" style="width: 100%" stripe>
+                    <el-table-column prop="mailTime" label="来信时间" align="center" width="170" />
+                    <el-table-column label="信件来源" align="center" width="94">
+                        <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="70" />
+                    <el-table-column prop="contactPhone" label="联系电话" width="120" />
+                    <el-table-column label="信件等级" width="100">
+                        <template #default="{ row }">
+                            <mail-level :value="row.mailLevel" :list="dictData.mail_level" />
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="mailCategory" label="信件分类" width="160" />
+                    <el-table-column prop="content" label="信件内容" show-overflow-tooltip />
+                    <el-table-column label="信件状态" width="90">
+                        <template #default="{ row }">
+                            <span>{{ getDictLable(dictData.mail_state, row.mailState) }}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="threeDeptName" label="办理单位" width="160" />
+                    <el-table-column label="流程节点">
+                        <template #default="{ row }">
+                            <el-tag :type="getFlowTagType(row.flowKey)" v-if="row.flowBeforeName">{{ row.flowBeforeName
+                            }}</el-tag>
+                            <el-tag type="danger" v-else>未签收</el-tag>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="流程限时">
+                        <template #default="{ row }">
+                            <div v-if="row.flowLimitedRemainingTime > 0" class="success">
+                                <span class="mr-4">剩余</span>
+                                <span class="text">{{ formatTimeText(row.flowLimitedRemainingTime) }}</span>
+                            </div>
+                            <div v-if="row.flowLimitedRemainingTime < 0" class="error">
+                                <span class="mr-4">超时</span>
+                                <span class="text">{{ formatTimeText(-row.flowLimitedRemainingTime) }}</span>
+                            </div>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="操作">
+                        <template #default="{ row }">
+                            <el-button type="primary" link @click="handleMail(row.mailId)">立即处理</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, 15, 20, 40, 50]" :page-size="query.size"
+                    layout="total,sizes, prev, pager, next, jumper" :total="totalSize.total">
+                </el-pagination>
+            </div>
+        </main>
+    </div>
+
+    <MailDialog v-model:show="showModel" :mail-id="activeMailId" @update="getList" />
+    <CreateMailSelfDialog v-model="showCreateMailSelf" @close="closeCreateMailSelf" />
+</template>
+<script setup>
+import MailDialog from "../work/components/MailDialog.vue";
+import CreateMailSelfDialog from "../work/components/CreateMailSelfDialog.vue";
+import { getTodos } from "@/api/work";
+import { getMailFlowDetail } from "@/api/mail";
+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({
+    contactField: "name",
+    size: 10,
+    current: 1
+});
+const totalSize = reactive({
+    total: 0,
+    pages: 0
+})
+
+const placeholderText = ref("请输入姓名")
+watch(query.contactField, (val) => {
+    if (val === "idCard") {
+        placeholderText.value = "请输入身份证号"
+    } else if (val === "phone") {
+        placeholderText.value = "请输入联系电话"    
+    } else {
+        placeholderText.value = "请输入姓名"
+    }
+});
+
+
+const showCreateMailSelf = ref(false);
+const closeCreateMailSelf = () => {
+    showCreateMailSelf.value = false;
+}
+
+const todos = ref([]);
+const showModel = ref(false);
+const activeMailId = ref("");
+
+function handleMail(mailId) {
+    showModel.value = true;
+    activeMailId.value = mailId;
+}
+
+function getList() {
+    if (query.value.mailTime) {
+        query.value.mailTimeStart = query.value.mailTime[0];
+        query.value.mailTimeEnd = query.value.mailTime[1];
+    }
+    getTodos(query.value).then((data) => {
+        todos.value = data.records;
+        totalSize.total = data.total;
+        totalSize.pages = data.pages;
+    });
+}
+
+function reset() {
+    query.value = {}
+    getList()
+}
+
+const createMail = () => {
+    showCreateMailSelf.value = true;
+}
+
+getList()
+
+
+</script>
+<style lang="scss" scoped>
+.table-container {
+    border: 1px solid rgba(198, 208, 251, 1);
+}
+
+.success .text {
+    color: #128009;
+    padding: 0 8px;
+    height: 24px;
+    line-height: 24px;
+    text-align: center;
+}
+
+.error {
+    background-color: #FF0000;
+    color: #fff;
+    padding: 0 8px;
+    height: 24px;
+    line-height: 24px;
+    border-radius: 20px;
+    text-align: center;
+}
+</style>
\ No newline at end of file