police-mailbox
/
mailbox-lan-vue
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

init

master
21819 2 years ago
parent
e95182b621
commit
1b2ac0be99
1 changed files with 244 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 244
      src/views/mailquery/Query.vue

244
src/views/mailquery/Query.vue
Unescape View File

@ -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>
Write Preview
Loading…
Cancel
Save