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

信件查询界面初始化

master
21819 2 years ago
parent
1b2ac0be99
commit
dad8e8fb11
1 changed files with 122 additions and 27 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. 149
      src/views/mailquery/Query.vue

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

@ -26,7 +26,7 @@
<el-option label="联系电话" value="phone" />
</el-select>
<el-input v-model="query.contactFieldValue" :placeholder="placeholderText" clearable
style="width: 120px" />
style="width: 172px" />
</div>
</el-form-item>
</el-col>
@ -57,7 +57,15 @@
<el-col :span="6">
<el-form-item label="办理单位">
<div class="flex gap">
<el-input v-model="query.handlingDeptId" placeholder="" clearable style="width: 280px" />
<el-tree-select class="flex-1" v-model="query.threeDeptName" :data="optionsData.dept"
clearable node-key="id" filterable :props="{
value: 'name',
label: 'name',
disabled(data: any) {
return !!data.isStop
}
}" check-strictly :default-expand-all="true" placeholder="请选择上级部门"
style="width: 280px" />
</div>
</el-form-item>
</el-col>
@ -68,9 +76,19 @@
</el-form-item>
</el-col>
</el-row>
<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>
</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>
<el-button type="primary" @click="checkMail">信件核对</el-button>
</div>
<div>
<el-button type="primary" @click="getList">查询</el-button>
@ -81,7 +99,9 @@
</header>
<main>
<div class="table-container">
<el-table :data="todos" style="width: 100%" stripe>
<el-table :data="todos" style="width: 100%" stripe ref="tableRef" @selection-change="handleSelectionChange"
@select-all="handleSelectAll">
<el-table-column type="selection" width="30" />
<el-table-column prop="mailTime" label="来信时间" align="center" width="170" />
<el-table-column label="信件来源" align="center" width="94">
<template #default="{ row }">
@ -114,7 +134,7 @@
<el-tag type="danger" v-else>未签收</el-tag>
</template>
</el-table-column>
<el-table-column label="流程限时">
<el-table-column label="流程限时" width="140">
<template #default="{ row }">
<div v-if="row.flowLimitedRemainingTime > 0" class="success">
<span class="mr-4">剩余</span>
@ -126,6 +146,7 @@
</div>
</template>
</el-table-column>
<el-table-column prop="tags" label="信件标签" width="160" />
<el-table-column label="操作">
<template #default="{ row }">
<el-button type="primary" link @click="handleMail(row.mailId)">立即处理</el-button>
@ -133,34 +154,42 @@
</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 style="display: flex; justify-content: space-between; margin-top: 4px;">
<div style="display: flex; align-items: center;">
<el-checkbox v-model="checkAll" label="全选" style="margin-left: 15px;" :indeterminate="isCheckAll"
@click="handleCheckAll">全选</el-checkbox>
<span class="ml-4">({{ selectedCount }})条</span>
<el-button type="primary" link @click="outputSelectedMail" class="ml-4">信件导出</el-button>
</div>
<div>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
: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>
</div>
</main>
</div>
<MailDialog v-model:show="showModel" :mail-id="activeMailId" @update="getList" />
<CreateMailSelfDialog v-model="showCreateMailSelf" @close="closeCreateMailSelf" />
</template>
<script setup>
<script lang="ts" 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 { getDones } 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 { ref, reactive, watch } from "vue";
const tableRef = ref(null);
const mailStore = useMailStore();
mailStore.getMailCategorys();
const { dictData } = useDictData(["mail_source", "mail_level", "mail_state"]);
const query = ref({
contactField: "name",
size: 10,
size: 20,
current: 1
});
const totalSize = reactive({
@ -169,20 +198,66 @@ const totalSize = reactive({
})
const placeholderText = ref("请输入姓名")
watch(query.contactField, (val) => {
watch(() => query.value.contactField, (val, prevVal) => {
if (val === "idCard") {
placeholderText.value = "请输入身份证号"
placeholderText.value = "请输入身份证号";
} else if (val === "phone") {
placeholderText.value = "请输入联系电话"
placeholderText.value = "请输入联系电话";
} else {
placeholderText.value = "请输入姓名"
placeholderText.value = "请输入姓名";
}
});
const showCreateMailSelf = ref(false);
const closeCreateMailSelf = () => {
showCreateMailSelf.value = false;
const allSelectedRows = ref([]);
const checkAll = ref(false);
const isCheckAll = ref(false);
const selectedCount = ref(0);
const oldSelection = ref([]);
const handleSelectAll = (selection: any) => {
console.log("handleSelectAll", selection, isCheckAll.value)
if (isCheckAll.value === true) {
for (let i = 0; i < selection.length; i++) {
if (allSelectedRows.value.includes(selection[i].mailId)) {
allSelectedRows.value.splice(allSelectedRows.value.indexOf(selection[i].mailId), 1)
}
}
}
}
const handleSelectionChange = (selection: any) => {
checkAll.value = (tableRef.value.getSelectionRows().length === tableRef.value.data.length) ? true : false
isCheckAll.value = (tableRef.value.getSelectionRows().length > 0 &&
tableRef.value.data.length > tableRef.value.getSelectionRows().length) ? true : false
console.log("oldSelection, selection", oldSelection.value.length, selection.length)
sloveAllSelectedRows(selection)
}
const sloveAllSelectedRows = (selection: any) => {
if (selection.length >= oldSelection.value.length) {
for (let s of selection) {
if (!oldSelection.value.includes(s) && !allSelectedRows.value.includes(s.mailId)) {
allSelectedRows.value.push(s.mailId)
}
}
} else {
if (oldSelection.value.length - selection.length === 1) {
for (let s of oldSelection.value) {
if (!selection.includes(s) && allSelectedRows.value.includes(s.mailId)) {
allSelectedRows.value.splice(allSelectedRows.value.indexOf(s.mailId), 1)
}
}
}
}
oldSelection.value = selection;
console.log("oldSelection-Updated:", oldSelection.value)
selectedCount.value = allSelectedRows.value.length;
}
const handleCheckAll = () => {
tableRef.value.toggleAllSelection()
}
const outputSelectedMail = () => {
console.log("outputSelectedMail")
}
const todos = ref([]);
@ -194,25 +269,45 @@ function handleMail(mailId) {
activeMailId.value = mailId;
}
const handleSizeChange = (size) => {
query.value.size = size;
console.log("handleSizeChange", query.value.size)
getList();
}
const handleCurrentChange = (page) => {
query.value.current = page;
getList();
}
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) => {
getDones(query.value).then((data) => {
todos.value = data.records;
console.log("todos", todos.value)
totalSize.total = data.total;
totalSize.pages = data.pages;
});
}
const { optionsData } = useDictOptions<{
dept: any[]
}>({
dept: {
api: deptLists
}
})
function reset() {
query.value = {}
getList()
}
const createMail = () => {
showCreateMailSelf.value = true;
const checkMail = () => {
console.log("createMail")
}
getList()

Write Preview
Loading…
Cancel
Save