Commit 0e3a3f02 authored by 姬鋆屾's avatar 姬鋆屾

feated:新增群众和管理员存取件报表

parent 90e947fd
<template>
<!-- 存件记录报表搜索 -->
<div class="search-form">
<a-space direction="vertical" size="middle">
<a-button block class="export-btn" icon="upload" @click="handleExport">
导出
</a-button>
<y-select
allowClear
showSearch
optionFilterProp="label"
placeholder="请选择设备"
v-model="searchForm.number"
>
<a-select-option value="" label="全部设备"> 全部设备 </a-select-option>
<a-select-option
v-for="v in deviceData"
:key="v.id"
:value="v.id"
:label="v.name"
>
{{ v.name }}
</a-select-option>
</y-select>
<y-select
allowClear
showSearch
optionFilterProp="label"
placeholder="请选择状态"
v-model="searchForm.status"
>
<a-select-option value="" label="全部状态"> 全部状态 </a-select-option>
<a-select-option :value="1" label="未取件"> 未取件 </a-select-option>
<a-select-option :value="2" label="已取件"> 已取件 </a-select-option>
</y-select>
<y-range-picker valueFormat="YYYY-MM-DD" v-model="searchForm.time" />
<a-input
allowClear
placeholder="请输入邮递员姓名或联系电话查询"
v-model="searchForm.keyword"
/>
<a-button block class="search-btn" icon="search" @click="handleSearch">
搜索
</a-button>
</a-space>
</div>
</template>
<script>
import YSelect from "@/components/YSelect.vue";
import YRangePicker from "@/components/YRangePicker.vue";
import storage from "@/utils/js/Storage";
import { mapMutations } from "vuex";
import { getSitePickupDevice } from "@/api/dataAdmin";
import { debounce } from "lodash";
export default {
name: "depositAdminRecord-search",
components: {
YSelect,
YRangePicker,
},
data() {
return {
siteId: storage.get(2, "siteId"),
deviceData: [], // 设备列表
// 搜索数据
searchForm: {
number: "",
keyword: "",
status: "",
time: [
this.$moment(new Date()).format("YYYY-MM-DD"),
this.$moment(new Date()).format("YYYY-MM-DD"),
],
},
};
},
created() {
this.getSitePickupDevice();
},
methods: {
...mapMutations("search", ["set_searForm", "reset"]),
//获取设备列表
async getSitePickupDevice() {
let res = await getSitePickupDevice({
page: 1,
size: -1,
});
if (res.code == 1) {
let { data } = res;
this.deviceData = data;
}
},
// 搜索
handleSearch() {
this.set_searForm(this.searchForm);
},
// 导出
handleExport: debounce(
function () {
this.$bus.$emit("export");
},
2000,
{
leading: true,
trailing: false,
}
),
},
beforeDestroy() {
this.reset();
},
};
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
<template>
<!-- 取件记录报表搜索 -->
<div class="search-form">
<a-space direction="vertical" size="middle">
<a-button block class="export-btn" icon="upload" @click="handleExport">
导出
</a-button>
<y-select
allowClear
showSearch
optionFilterProp="label"
placeholder="请选择设备"
v-model="searchForm.number"
>
<a-select-option value="" label="全部设备"> 全部设备 </a-select-option>
<a-select-option
v-for="v in deviceData"
:key="v.id"
:value="v.id"
:label="v.name"
>
{{ v.name }}
</a-select-option>
</y-select>
<y-range-picker valueFormat="YYYY-MM-DD" v-model="searchForm.time" />
<a-input
allowClear
placeholder="请输入取件人姓名或手机号搜索"
v-model="searchForm.keyword"
/>
<a-button block class="search-btn" icon="search" @click="handleSearch">
搜索
</a-button>
</a-space>
</div>
</template>
<script>
import YSelect from "@/components/YSelect.vue";
import YRangePicker from "@/components/YRangePicker.vue";
import storage from "@/utils/js/Storage";
import { mapMutations } from "vuex";
import { getSitePickupDevice } from "@/api/dataAdmin";
import { debounce } from "lodash";
export default {
name: "pickUpAdminRecord-search",
components: {
YSelect,
YRangePicker,
},
data() {
return {
siteId: storage.get(2, "siteId"),
deviceData: [], // 设备列表
// 搜索数据
searchForm: {
number: "",
keyword: "",
time: [
this.$moment(new Date()).format("YYYY-MM-DD"),
this.$moment(new Date()).format("YYYY-MM-DD"),
],
},
};
},
created() {
this.getSitePickupDevice();
},
methods: {
...mapMutations("search", ["set_searForm", "reset"]),
//获取设备列表
async getSitePickupDevice() {
let res = await getSitePickupDevice({
page: 1,
size: -1,
});
if (res.code == 1) {
let { data } = res;
this.deviceData = data;
}
},
// 搜索
handleSearch() {
this.set_searForm(this.searchForm);
},
// 导出
handleExport: debounce(
function () {
this.$bus.$emit("export");
},
2000,
{
leading: true,
trailing: false,
}
),
},
beforeDestroy() {
this.reset();
},
};
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
......@@ -29,7 +29,7 @@ const routes = [
import(
/* webpackChunkName: "queueCall" */ "@/views/dataAdmin/components/pickUp/module.vue"
),
meta: { title: "取件记录报表" },
meta: { title: "群众取件记录报表" },
children: [
{
path: "pickUpRecord",
......@@ -39,7 +39,19 @@ const routes = [
/* webpackChunkName: "queueRecord" */ "@/views/dataAdmin/components/pickUp/pickUpRecord.vue"
),
meta: {
title: "取件记录报表",
title: "群众取件记录报表",
activeMenu: "/home/dataManagement",
},
},
{
path: "pickUpAdminRecord",
name: "pickUpAdminRecord",
component: () =>
import(
/* webpackChunkName: "queueRecord" */ "@/views/dataAdmin/components/pickUp/pickUpAdminRecord.vue"
),
meta: {
title: "管理员取件记录报表",
activeMenu: "/home/dataManagement",
},
},
......@@ -51,7 +63,19 @@ const routes = [
/* webpackChunkName: "depositRecord" */ "@/views/dataAdmin/components/pickUp/depositRecord.vue"
),
meta: {
title: "存件记录报表",
title: "群众存件记录报表",
activeMenu: "/home/dataManagement",
},
},
{
path: "depositAdminRecord",
name: "depositAdminRecord",
component: () =>
import(
/* webpackChunkName: "depositRecord" */ "@/views/dataAdmin/components/pickUp/depositAdminRecord.vue"
),
meta: {
title: "管理员存件记录报表",
activeMenu: "/home/dataManagement",
},
},
......@@ -485,8 +509,6 @@ const routes = [
activeMenu: "/home/dataManagement",
},
},
],
},
],
......
<template>
<div>
<a-table
size="middle"
:columns="columns"
:data-source="tableData"
:loading="loading"
:scroll="{
x: 1000,
y: 490,
}"
:row-selection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
}"
:rowKey="(record) => record.id"
:pagination="{
showTotal: (total) => `共 ${total} 条`,
current: current,
total: total,
pageSize: size,
showQuickJumper: true,
}"
@change="changeTable"
>
<!-- 操作 -->
<template slot="status" slot-scope="text">
<span v-if="text == 1">
<i class="iconfont icon-dot text-[#0857E8]"></i>
<span>未取件</span>
</span>
<span v-else-if="text == 2">
<i class="iconfont icon-dot text-[#00A870]"></i>
<span>已取件</span>
</span>
</template>
</a-table>
</div>
</template>
<script>
import { mapState } from "vuex";
import storage from "@/utils/js/Storage";
import { export2Excel } from "@/utils/js/exportExcel";
import { getStorageList } from "@/api/dataAdmin";
import { version } from "less";
const tHeader = [
"邮递员",
"联系电话",
"存件时间",
"取件柜名称",
"箱号",
"取件人联系电话",
"取件码",
"状态",
]; // 导出的表头名信息
const filterVal = [
"courier",
"usersign",
"create_time",
"qjg_name",
"boxNo",
"phone",
"code",
"status",
]; // 导出的表头字段名,需要导出表格字段名
export default {
components: {},
data() {
const columns = [
{
title: "序号",
width: 100,
align: "center",
customRender: (text, record, index) => {
return (this.current - 1) * this.size + index + 1;
},
},
{
title: "邮递员电话",
width: 150,
dataIndex: "usersign",
},
{
title: "存件时间",
width: 150,
dataIndex: "create_time",
},
{
title: "取件柜编号",
dataIndex: "number",
width: 150,
customRender: (text) => text || "--",
},
{
title: "箱号",
dataIndex: "boxNo",
width: 150,
},
{
title: "取件人联系电话",
dataIndex: "phone",
width: 150,
customRender: (text) => text || "--",
},
{
title: "取件码",
dataIndex: "code",
width: 150,
},
{
title: "状态",
dataIndex: "status",
width: 150,
scopedSlots: {
customRender: "status",
},
},
{
title: "取件时间",
dataIndex: "update_time",
width: 150,
customRender: (text) => {
return text || "--";
},
},
];
return {
baseurl: process.env.VUE_APP_API_PHP_URL,
siteId: storage.get(2, "siteId"),
columns,
tHeader,
filterVal,
tableData: [],
current: 1,
size: 10,
total: 0,
searchForm: {
number: "",
keyword: "",
time: [
this.$moment(new Date()).format("YYYY-MM-DD"),
this.$moment(new Date()).format("YYYY-MM-DD"),
],
},
loading: false,
selectedRowKeys: [], // 表格选中的key
excelData: [], // 导出数据
detailsInfo: {}, // 详情信息
visible: false,
};
},
computed: {
...mapState("search", ["searForm"]),
},
watch: {
searForm: {
handler(newForm) {
if (JSON.stringify(newForm) != "{}") {
this.searchForm = newForm;
this.current = 1;
this.getEvaList();
}
},
deep: true,
},
},
created() {
this.getEvaList();
this.$bus.$off("export");
this.$bus.$on("export", () => {
this.exportExcel();
});
},
methods: {
// 获取报表
async getEvaList() {
this.loading = true;
let { total, data } = await this.getDataList();
this.total = total;
this.tableData = data;
this.$emit("update", { total, time: this.searchForm.time });
this.loading = false;
},
// 获取数据函数
async getDataList(searchForm) {
let list = [];
let listTotal = 0;
let res = await getStorageList({
page: this.current,
size: this.size,
...this.searchForm,
...searchForm,
version: 3,
userType: 3,
});
if (res.code == 1) {
let { data, total } = res.data;
list = data;
listTotal = total;
}
return {
data: list,
total: listTotal,
};
},
// 翻页
changeTable(pagination) {
let { current } = pagination;
this.current = current;
this.getEvaList();
},
// 勾选表格
onSelectChange(keys, rows) {
this.selectedRowKeys = keys;
const res = new Map();
this.excelData = [...this.excelData, ...rows]
.filter((v) => {
return !res.has(v.id) && res.set(v.id, 1);
})
.filter((v) => {
return this.selectedRowKeys.some((val) => v.id == val);
});
},
// 导出表格
async exportExcel() {
let obj = {
1: "未取件",
2: "已取件",
};
if (this.selectedRowKeys.length && this.excelData.length) {
// 深度克隆避免影响页面表格展示
let data = this.$_.cloneDeep(this.excelData);
for (let item of data) {
Object.keys(obj).forEach((key) => {
if (item.status == key) {
item.status = obj[key];
}
});
}
export2Excel(
this.tHeader,
this.filterVal,
data,
"存件记录报表" + this.$moment().format("YYYYMMDDHHmmss")
);
} else {
this.dataSection(this.getDataList, {}, (data) => {
if (!data.length) {
this.$message.warning("暂无数据");
return;
}
for (let item of data) {
Object.keys(obj).forEach((key) => {
if (item.status == key) {
item.status = obj[key];
}
});
}
export2Excel(
this.tHeader,
this.filterVal,
data,
"存件记录报表" + this.$moment().format("YYYYMMDDHHmmss")
);
});
}
},
// 数据切片
async dataSection(fn, searchForm, callback) {
let dataList = [];
let page = 1;
let size = 1000;
let execute = async () => {
let { data, total } = await fn({ page, size, ...searchForm });
dataList = [...dataList, ...data];
this.$app.progressFile.show = true;
this.$app.progressFile.percent = parseInt(
(dataList.length / total) * 100
);
if (dataList.length >= total || data.length == 0) {
if (callback) callback(dataList);
this.$app.progressFile.show = false;
this.$app.progressFile.percent = 1;
return;
}
setTimeout(() => {
page += 1;
execute();
});
};
execute();
},
},
};
</script>
<style lang="less" scoped></style>
......@@ -192,6 +192,8 @@ export default {
size: this.size,
...this.searchForm,
...searchForm,
version: 3,
userType: 1,
});
if (res.code == 1) {
let { data, total } = res.data;
......
......@@ -31,8 +31,10 @@ export default {
data() {
return {
pathList: {
"/home/dataManagement/pickUp/pickUpRecord": "取件记录",
"/home/dataManagement/pickUp/depositRecord": "存件记录",
"/home/dataManagement/pickUp/pickUpRecord": "群众取件记录",
"/home/dataManagement/pickUp/pickUpAdminRecord": "管理员取件记录",
"/home/dataManagement/pickUp/depositRecord": "群众存件记录",
"/home/dataManagement/pickUp/depositAdminRecord": "管理员存件记录",
"/home/dataManagement/pickUp/otherRecord": "其他记录",
},
total: 0,
......
......@@ -77,9 +77,20 @@ export default {
str = "管理员";
break;
case 3:
str = "邮递";
str = "管理";
break;
}
// switch (text) {
// case 1:
// str = "用户";
// break;
// case 2:
// str = "管理员";
// break;
// case 3:
// str = "邮递员";
// break;
// }
return str;
},
},
......
<template>
<div>
<a-table
size="middle"
:columns="columns"
:data-source="tableData"
:loading="loading"
:scroll="{
x: 1500,
y: 490,
}"
:row-selection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
}"
:rowKey="(record) => record.id"
:pagination="{
showTotal: (total) => `共 ${total} 条`,
current: current,
total: total,
pageSize: size,
showQuickJumper: true,
}"
@change="changeTable"
>
</a-table>
</div>
</template>
<script>
import { mapState } from "vuex";
import storage from "@/utils/js/Storage";
import { export2Excel } from "@/utils/js/exportExcel";
import { getPickupList } from "@/api/dataAdmin";
const tHeader = [
"取件码",
"取件人",
"取件方式",
"取件柜名称",
"箱号",
"联系电话",
"取件时间",
"操作人身份",
"存件时间",
]; // 导出的表头名信息
const filterVal = [
"code",
"name",
"type",
"qjg_name",
"boxNo",
"phone",
"update_time",
"userType",
"create_time",
]; // 导出的表头字段名,需要导出表格字段名
let userType = {
1: "用户",
2: "管理员",
3: "管理员",
};
// let userType = {
// 1: "用户",
// 2: "管理员",
// 3: "邮递员",
// };
export default {
components: {},
data() {
const columns = [
{
title: "序号",
width: 100,
align: "center",
fixed: "left",
customRender: (text, record, index) => {
return (this.current - 1) * this.size + index + 1;
},
},
{
title: "取件码",
dataIndex: "code",
fixed: "left",
width: 100,
},
{
title: "取件人",
dataIndex: "name",
width: 100,
customRender: (text) => text || "--",
},
{
title: "联系电话",
dataIndex: "phone",
width: 150,
customRender: (text) => text || "--",
},
{
title: "取件方式",
dataIndex: "type",
width: 150,
customRender: (text) => {
return text == 1 ? "取件码取件" : "身份证取件";
},
},
{
title: "取件柜名称",
dataIndex: "qjg_name",
width: 150,
customRender: (text) => text || "--",
},
{
title: "取件柜编号",
align: "center",
dataIndex: "number",
width: 150,
customRender: (text) => text || "--",
},
{
title: "箱号",
align: "center",
width: 150,
dataIndex: "boxNo",
},
{
title: "取件时间",
dataIndex: "update_time",
width: 150,
customRender: (text) => {
return text || "--";
},
},
{
title: "操作人身份",
dataIndex: "userType",
width: 150,
customRender: (text) => {
return this.userType[text];
},
},
{
title: "存件时间",
fixed: "right",
dataIndex: "create_time",
width: 150,
},
];
return {
baseurl: process.env.VUE_APP_API_PHP_URL,
siteId: storage.get(2, "siteId"),
userType,
columns,
tHeader,
filterVal,
tableData: [],
current: 1,
size: 10,
total: 0,
searchForm: {
number: "",
keyword: "",
time: [
this.$moment(new Date()).format("YYYY-MM-DD"),
this.$moment(new Date()).format("YYYY-MM-DD"),
],
},
loading: false,
selectedRowKeys: [], // 表格选中的key
excelData: [], // 导出数据
detailsInfo: {}, // 详情信息
visible: false,
};
},
computed: {
...mapState("search", ["searForm"]),
},
watch: {
searForm: {
handler(newForm) {
if (JSON.stringify(newForm) != "{}") {
this.searchForm = newForm;
this.current = 1;
this.getEvaList();
}
},
deep: true,
},
},
created() {
this.getEvaList();
this.$bus.$off("export");
this.$bus.$on("export", () => {
this.exportExcel();
});
},
methods: {
// 获取报表
async getEvaList() {
this.loading = true;
let { total, data } = await this.getDataList();
this.total = total;
this.tableData = data;
this.$emit("update", { total, time: this.searchForm.time });
this.loading = false;
},
// 获取数据函数
async getDataList(searchForm) {
let list = [];
let listTotal = 0;
let res = await getPickupList({
page: this.current,
size: this.size,
userType: 3,
version: 3,
...this.searchForm,
...searchForm,
});
if (res.code == 1) {
let { data, total } = res.data;
list = data;
listTotal = total;
}
return {
data: list,
total: listTotal,
};
},
// 翻页
changeTable(pagination) {
let { current } = pagination;
this.current = current;
this.getEvaList();
},
// 勾选表格
onSelectChange(keys, rows) {
this.selectedRowKeys = keys;
const res = new Map();
this.excelData = [...this.excelData, ...rows]
.filter((v) => {
return !res.has(v.id) && res.set(v.id, 1);
})
.filter((v) => {
return this.selectedRowKeys.some((val) => v.id == val);
});
},
// 导出表格
async exportExcel() {
let obj = {
1: "取件码取件",
2: "身份证取件",
};
if (this.selectedRowKeys.length && this.excelData.length) {
// 深度克隆避免影响页面表格展示
let data = this.$_.cloneDeep(this.excelData);
for (let item of data) {
item.type = obj[item.type];
item.userType = this.userType[item.userType];
}
export2Excel(
this.tHeader,
this.filterVal,
data,
"取件记录报表" + this.$moment().format("YYYYMMDDHHmmss")
);
} else {
this.dataSection(this.getDataList, {}, (data) => {
if (!data.length) {
this.$message.warning("暂无数据");
return;
}
for (let item of data) {
item.type = obj[item.type];
item.userType = this.userType[item.userType];
}
export2Excel(
this.tHeader,
this.filterVal,
data,
"取件记录报表" + this.$moment().format("YYYYMMDDHHmmss")
);
});
}
},
// 数据切片
async dataSection(fn, searchForm, callback) {
let dataList = [];
let page = 1;
let size = 1000;
let execute = async () => {
let { data, total } = await fn({ page, size, ...searchForm });
dataList = [...dataList, ...data];
this.$app.progressFile.show = true;
this.$app.progressFile.percent = parseInt(
(dataList.length / total) * 100
);
if (dataList.length >= total || data.length == 0) {
if (callback) callback(dataList);
this.$app.progressFile.show = false;
this.$app.progressFile.percent = 1;
return;
}
setTimeout(() => {
page += 1;
execute();
});
};
execute();
},
},
};
</script>
<style lang="less" scoped></style>
......@@ -57,8 +57,13 @@ const filterVal = [
let userType = {
1: "用户",
2: "管理员",
3: "邮递",
3: "管理",
};
// let userType = {
// 1: "用户",
// 2: "管理员",
// 3: "邮递员",
// };
export default {
components: {},
data() {
......@@ -154,6 +159,7 @@ export default {
searchForm: {
number: "",
keyword: "",
time: [
this.$moment(new Date()).format("YYYY-MM-DD"),
this.$moment(new Date()).format("YYYY-MM-DD"),
......@@ -206,6 +212,8 @@ export default {
let res = await getPickupList({
page: this.current,
size: this.size,
userType: 1,
version: 3,
...this.searchForm,
...searchForm,
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment