Skip to content

S
smart_gov_platform
Commit dfc2a38b authored by “yiyousong”'s avatar “yiyousong”
Browse files
Options

feat；新增取件记录报表

parent d65b22f3
Hide whitespace changes
Inline Side-by-side
Showing with 770 additions and 310 deletions
portal-manager-ui/admin/src/views/dataAdmin/components/pickUp/depositRecord.vue
View file @ dfc2a38b
...@@ -2,52 +2,49 @@ ...@@ -2,52 +2,49 @@
<div class="queueRecord-Container"> <div class="queueRecord-Container">
<div class="header_box"> <div class="header_box">
<div> <div>
<a-button type="success" @click="exportTable"> <a-button
:loading="btnLoading"
type="success"
@click="handleExportTable"
>
<span>{{ tableSelectedRows.length ? "导出" : "导出全部" }}</span> <span>{{ tableSelectedRows.length ? "导出" : "导出全部" }}</span>
</a-button> </a-button>
<b>存件次数：<i>233次</i></b> <b
<sub>统计时间段：2020.09.09~2021.09.09</sub> >存件次数：<i>{{ total }}次</i></b
>
<sub>统计时间段：{{ searchForm.time[0] }}~{{ searchForm.time[1] }}</sub>
</div> </div>
<span> <span>
<a-select default-value="001"> <a-space>
<!-- <a-select-option <a-select v-model="searchForm.number">
v-for="(item, index) of selectOptions" <a-select-option value=""> 全部设备 </a-select-option>
:key="index" <a-select-option v-for="v in devList" :key="v.id" :value="v.number">
:value="item.value" {{ v.name }}
</a-select-option>
</a-select>
<a-select v-model="searchForm.status">
<a-select-option value=""> 全部状态 </a-select-option>
<a-select-option :value="1"> 未取件 </a-select-option>
<a-select-option :value="2"> 已取件 </a-select-option>
</a-select>
<a-range-picker
style="width: 200px"
format="YYYY-MM-DD"
valueFormat="YYYY-MM-DD"
v-model="searchForm.time"
> >
{{ item.label }} </a-range-picker>
</a-select-option> --> <a-input
style="width: 300px"
<a-select-option value="001"> 设备001 </a-select-option> v-model="searchForm.keyword"
<a-select-option value="002"> 设备002 </a-select-option> placeholder="请输入邮递员姓名或联系电话查询"
</a-select> @pressEnter="handleSearch"
<a-select default-value="001">
<!-- <a-select-option
v-for="(item, index) of selectOptions"
:key="index"
:value="item.value"
> >
{{ item.label }} <a-icon slot="prefix" type="search" />
</a-select-option> --> </a-input>
<a-button type="primary" @click="handleSearch">搜索</a-button>
<a-select-option value="001"> 状态001 </a-select-option> <a-button @click="handleReset">重置</a-button>
<a-select-option value="002"> 状态002 </a-select-option> </a-space>
</a-select>
<a-range-picker
format="YYYY年MM月DD日"
class="range_picker_style"
@change="rangePickerChange"
v-model="BegindAndEndTime"
>
</a-range-picker>
<a-input
v-model="searchName"
placeholder="请输入邮递员姓名或联系电话查询"
>
<a-icon slot="prefix" type="search" />
</a-input>
<a-button type="primary">搜索</a-button>
</span> </span>
</div> </div>
<div class="main"> <div class="main">
...@@ -60,14 +57,24 @@ ...@@ -60,14 +57,24 @@
onChange: onSelectChange, onChange: onSelectChange,
}" }"
:scroll="{ y: 590 }" :scroll="{ y: 590 }"
:pagination="tablePagination" :pagination="{
@change="pagTableChange" showTotal: (total) => `共 ${total} 条`,
current: current,
total: total,
pageSize: size,
showSizeChanger: true,
showQuickJumper: true,
pageSizeOptions: pageSizeOptions,
onChange: changePage,
onShowSizeChange: changSize,
}"
:loading="tableLoading" :loading="tableLoading"
:columns="tableHeaders" :columns="tableHeaders"
:dataSource="tableSourceData" :dataSource="tableSourceData"
> >
<template slot="状态" slot-scope="text, record, index"> <template slot="status" slot-scope="text">
<a-button type="link" style="color: #ff4420">{{ text }}</a-button> <a-tag v-if="text.status == 1" color="red"> 未取件 </a-tag>
<a-tag v-else color="blue"> 已取件 </a-tag>
</template> </template>
</a-table> </a-table>
</div> </div>
...@@ -75,9 +82,31 @@ ...@@ -75,9 +82,31 @@
</template> </template>
<script> <script>
import table from "@/mixins/table"; import { getSitePickupDevice, getStorageList } from "@/api/dataAdmin";
import { export2Excel } from "@/utils/js/exportExcel";
let tHeader = [
// 导出的表头名信息
"邮递员",
"联系电话",
"存件时间",
"取件柜名称",
"箱号",
"取件人联系电话",
"取件码",
"状态",
];
let filterVal = [
// 导出的表头字段名，需要导出表格字段名
"courier",
"usersign",
"create_time",
"qjg_name",
"boxNo",
"phone",
"code",
"status",
];
export default { export default {
mixins: [table],
name: "PortalAdminVueDepositRecord", name: "PortalAdminVueDepositRecord",
data() { data() {
return { return {
...@@ -88,42 +117,43 @@ export default { ...@@ -88,42 +117,43 @@ export default {
width: "60px", width: "60px",
key: "index", key: "index",
align: "center", align: "center",
customRender: (text, record, index) => `${index + 1}`, customRender: (text, record, index) =>
(current - 1) * size + index + 1,
}, },
{ {
title: "邮递员", title: "邮递员",
align: "center", align: "center",
dataIndex: "邮递员", dataIndex: "courier",
}, },
{ {
title: "联系电话", title: "联系电话",
align: "center", align: "center",
dataIndex: "联系电话", dataIndex: "usersign",
}, },
{ {
title: "存件时间", title: "存件时间",
align: "center", align: "center",
dataIndex: "存件时间", dataIndex: "create_time",
}, },
{ {
title: "取件柜名称", title: "取件柜名称",
align: "center", align: "center",
dataIndex: "取件柜名称", dataIndex: "qjg_name",
}, },
{ {
title: "箱号", title: "箱号",
align: "center", align: "center",
dataIndex: "箱号", dataIndex: "boxNo",
}, },
{ {
title: "取件人联系电话", title: "取件人联系电话",
align: "center", align: "center",
dataIndex: "取件人联系电话", dataIndex: "phone",
}, },
{ {
title: "取件码", title: "取件码",
align: "center", align: "center",
dataIndex: "取件码", dataIndex: "code",
}, },
{ {
...@@ -131,52 +161,153 @@ export default { ...@@ -131,52 +161,153 @@ export default {
align: "center", align: "center",
dataIndex: "状态", dataIndex: "状态",
scopedSlots: { scopedSlots: {
customRender: "状态", customRender: "status",
}, },
}, },
{ {
title: "取件时间", title: "取件时间",
align: "center", align: "center",
dataIndex: "取件时间", customRender: (text) => {
return text.update_time || "--";
},
}, },
], ],
BegindAndEndTime: [], tHeader,
searchName: undefined, filterVal,
tableLoading: false,
btnLoading: false,
searchForm: {
number: "",
keyword: "",
status: "",
time: [
this.$moment(new Date()).format("YYYY-MM-DD"),
this.$moment(new Date()).format("YYYY-MM-DD"),
],
},
current: 1,
size: 10,
total: 0,
pageSizeOptions: ["10", "20", "30", "40", "50", "100", "200"],
tableSelectedKeys: [],
tableSelectedRows: [],
tableSourceData: [],
devList: [], // 设备列表
}; };
}, },
components: {}, created() {
mounted() { this.getSitePickupDevice();
this.setMoment();
for (let key = 0; key < 20; key++) {
this.tableSourceData.push({
id: `00${key + 1}`,
邮递员: `刘德华${key + 1}`,
联系电话: `1388088888${key + 1}`,
存件时间: `2022-09-09 09:09:09${key + 1}`,
取件柜名称: `一楼取件柜${key + 1}`,
箱号: `00${key + 1}`,
取件人联系电话: `1380888888${key + 1}`,
取件码: `A23456${key + 1}`,
状态: `未取件${key + 1}`,
取件时间: `2022-09-09 09:09:09${key + 1}`,
});
}
}, },
methods: { methods: {
rangePickerChange(val) { // 获取设备列表
console.log(val); async getSitePickupDevice() {
let res = await getSitePickupDevice();
this.devList = res.data;
}, },
// 获取存号记录报表
QueueState(type) { async getStorageList(search = {}) {
switch (type) { let res = await getStorageList({
case 0: page: this.current,
return "type1"; size: this.size,
case 1: ...this.searchForm,
return "type2"; ...search,
});
default: if (res.code == 1) {
return "type0"; let { data, total } = res.data;
this.total = total;
this.tableSourceData = data;
return data;
}
},
// 翻页
changePage(cur) {
this.current = cur;
this.getStorageList();
},
// 改变每页显示数量
changSize(cur, size) {
this.current = cur;
this.size = size;
this.getStorageList();
},
// 搜索
handleSearch() {
this.current = 1;
this.tableSelectedKeys = [];
this.tableSelectedRows = [];
this.getStorageList();
},
// 重置搜索
handleReset() {
this.current = 1;
this.tableSelectedKeys = [];
this.tableSelectedRows = [];
this.searchForm = {
number: "",
keyword: "",
status: "",
time: [
this.$moment(new Date()).format("YYYY-MM-DD"),
this.$moment(new Date()).format("YYYY-MM-DD"),
],
};
this.getStorageList();
},
// 选中
onSelectChange(keys, rows) {
this.tableSelectedKeys = keys;
const res = new Map();
this.tableSelectedRows = [...this.tableSelectedRows, ...rows]
.filter((v) => {
return !res.has(v.id) && res.set(v.id, 1);
})
.filter((v) => {
return this.tableSelectedKeys.some((val) => v.id == val);
});
},
// 导出
async handleExportTable() {
this.btnLoading = true;
let obj = {
1: "未取件",
2: "已取件",
};
if (this.tableSelectedKeys.length && this.tableSelectedRows.length) {
// 深度克隆避免影响页面表格展示
let data = this.$_.cloneDeep(this.tableSelectedRows);
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 {
let data = this.$_.cloneDeep(
await this.getStorageList({ page: 1, size: -1 })
);
if (!data.length) 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")
);
} }
this.btnLoading = false;
}, },
}, },
}; };
...@@ -186,28 +317,28 @@ export default { ...@@ -186,28 +317,28 @@ export default {
/deep/.ant-spin-container { /deep/.ant-spin-container {
display: block; display: block;
} }
.header_box { .header_box {
padding-bottom: 1rem; padding-bottom: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
& > div {
display: flex; display: flex;
justify-content: space-between; justify-content: flex-start;
align-items: center; align-items: center;
& > div {
display: flex;
justify-content: flex-start;
align-items: center;
b { b {
font-style: normal;
font-weight: unset;
font-size: 16px;
margin-left: 20px;
i {
color: #0595fd;
font-style: normal; font-style: normal;
font-weight: unset;
font-size: 16px;
margin-left: 20px;
i {
color: #0595fd;
font-style: normal;
}
} }
} }
} }
}
</style> </style>
portal-manager-ui/admin/src/views/dataAdmin/components/pickUp/otherRecord.vue
View file @ dfc2a38b
...@@ -2,47 +2,47 @@ ...@@ -2,47 +2,47 @@
<div class="callRecord-Container"> <div class="callRecord-Container">
<div class="header_box"> <div class="header_box">
<div> <div>
<a-button type="success" @click="exportTable"> <a-button
:loading="btnLoading"
type="success"
@click="handleExportTable"
>
<span>{{ tableSelectedRows.length ? "导出" : "导出全部" }}</span> <span>{{ tableSelectedRows.length ? "导出" : "导出全部" }}</span>
</a-button> </a-button>
<b>次数：<i>233次</i></b> <b
<sub>统计时间段：2020.09.09~2021.09.09</sub> >次数：<i>{{ total }}次</i></b
>
<sub>统计时间段：{{ searchForm.time[0] }}~{{ searchForm.time[1] }}</sub>
</div> </div>
<span> <span>
<a-select default-value="001"> <a-space>
<!-- <a-select-option <a-select v-model="searchForm.number">
v-for="(item, index) of selectOptions" <a-select-option value=""> 全部设备 </a-select-option>
:key="index" <a-select-option v-for="v in devList" :key="v.id" :value="v.number">
:value="item.value" {{ v.name }}
> </a-select-option>
{{ item.label }} </a-select>
</a-select-option> --> <a-select v-model="searchForm.operationType">
<a-select-option value=""> 全部操作 </a-select-option>
<a-select-option
v-for="(v, key) in operationTypeList"
:key="key"
:value="key"
>
{{ v }}
</a-select-option>
</a-select>
<a-select-option value="001"> 设备001 </a-select-option> <a-range-picker
<a-select-option value="002"> 设备002 </a-select-option> style="width: 200px"
</a-select> format="YYYY-MM-DD"
<a-select default-value="001"> valueFormat="YYYY-MM-DD"
<!-- <a-select-option v-model="searchForm.time"
v-for="(item, index) of selectOptions"
:key="index"
:value="item.value"
> >
{{ item.label }} </a-range-picker>
</a-select-option> --> <a-button type="primary" @click="handleSearch">搜索</a-button>
<a-button @click="handleReset">重置</a-button>
<a-select-option value="001"> 操作001 </a-select-option> </a-space>
<a-select-option value="002"> 操作002 </a-select-option>
</a-select>
<a-range-picker
format="YYYY年MM月DD日"
class="range_picker_style"
@change="rangePickerChange"
v-model="BegindAndEndTime"
>
</a-range-picker>
<a-button type="primary">搜索</a-button>
</span> </span>
</div> </div>
<div class="main"> <div class="main">
...@@ -55,80 +55,269 @@ ...@@ -55,80 +55,269 @@
onChange: onSelectChange, onChange: onSelectChange,
}" }"
:scroll="{ y: 590 }" :scroll="{ y: 590 }"
:pagination="tablePagination" :pagination="{
@change="pagTableChange" showTotal: (total) => `共 ${total} 条`,
current: current,
total: total,
pageSize: size,
showSizeChanger: true,
showQuickJumper: true,
pageSizeOptions: pageSizeOptions,
onChange: changePage,
onShowSizeChange: changSize,
}"
:loading="tableLoading" :loading="tableLoading"
:columns="tableHeaders" :columns="tableHeaders"
:dataSource="tableSourceData" :dataSource="tableSourceData"
> >
<!-- 操作类型 -->
<template slot="operationType" slot-scope="text">
{{ filterOperationType(text.operationType) }}
</template>
</a-table> </a-table>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import table from "@/mixins/table"; import { getSitePickupDevice, getOtherList } from "@/api/dataAdmin";
import { export2Excel } from "@/utils/js/exportExcel";
const operationTypeList = {
1: "存件",
2: "取件",
3: "锁定",
4: "开箱",
5: "清箱",
6: "解锁",
};
let tHeader = [
// 导出的表头名信息
"操作人身份",
"操作类型",
"箱号",
"取件柜名称",
"操作时间",
];
let filterVal = [
// 导出的表头字段名，需要导出表格字段名
"userType",
"operationType",
"boxNo",
"create_time",
"qjg_name",
];
export default { export default {
mixins: [table],
name: "PortalAdminVuePickUpRecord", name: "PortalAdminVuePickUpRecord",
data() { data() {
return { let tableHeaders = [
tableHeaders: [ {
{ title: "序号",
title: "序号", dataIndex: "index",
dataIndex: "index", width: "60px",
width: "60px", key: "index",
key: "index", align: "center",
align: "center", customRender: (text, record, index) => (current - 1) * size + index + 1,
customRender: (text, record, index) => `${index + 1}`, },
}, {
{ title: "操作人身份",
title: "操作人身份", align: "center",
align: "center", customRender: (text) => {
dataIndex: "操作人身份", let str = "--";
}, switch (text.userType) {
{ case 1:
title: "操作类型", str = "用户";
align: "center", break;
dataIndex: "操作类型", case 2:
}, str = "管理员";
{ break;
title: "箱号", case 3:
align: "center", str = "邮递员";
dataIndex: "箱号", break;
}, }
{ return str;
title: "取件柜名称",
align: "center",
dataIndex: "取件柜名称",
}, },
{ },
title: "操作时间", {
align: "center", title: "操作类型",
dataIndex: "操作时间", align: "center",
}, scopedSlots: { customRender: "operationType" },
], },
BegindAndEndTime: [], {
searchName: undefined, title: "箱号",
align: "center",
dataIndex: "boxNo",
},
{
title: "取件柜名称",
align: "center",
dataIndex: "qjg_name",
},
{
title: "操作时间",
align: "center",
dataIndex: "create_time",
},
];
return {
operationTypeList,
tHeader,
filterVal,
tableHeaders,
tableLoading: false,
btnLoading: false,
searchForm: {
number: "",
operationType: "",
time: [
this.$moment(new Date()).format("YYYY-MM-DD"),
this.$moment(new Date()).format("YYYY-MM-DD"),
],
},
current: 1,
size: 10,
total: 0,
pageSizeOptions: ["10", "20", "30", "40", "50", "100", "200"],
tableSelectedKeys: [],
tableSelectedRows: [],
tableSourceData: [],
devList: [], // 设备列表
}; };
}, },
components: {}, created() {
mounted() { this.getSitePickupDevice();
this.setMoment(); this.getOtherList();
for (let key = 0; key < 20; key++) {
this.tableSourceData.push({
id: `00${key + 1}`,
操作人身份: `管理员${key + 1}`,
操作类型: `开箱${key + 1}`,
箱号: `0${key + 1}`,
取件柜名称: `一楼取件柜${key + 1}`,
操作时间: `2021-01-15 12:00:00`,
});
}
}, },
methods: { methods: {
rangePickerChange(val) { // 获取设备列表
console.log(val); async getSitePickupDevice() {
let res = await getSitePickupDevice();
this.devList = res.data;
},
// 获取存号记录报表
async getOtherList(search = {}) {
let res = await getOtherList({
page: this.current,
size: this.size,
...this.searchForm,
...search,
});
if (res.code == 1) {
let { data, total } = res.data;
this.total = total;
this.tableSourceData = data;
return data;
}
},
// 翻页
changePage(cur) {
this.current = cur;
this.getOtherList();
},
// 改变每页显示数量
changSize(cur, size) {
this.current = cur;
this.size = size;
this.getOtherList();
},
// 搜索
handleSearch() {
this.current = 1;
this.tableSelectedKeys = [];
this.tableSelectedRows = [];
this.getOtherList();
},
// 重置搜索
handleReset() {
this.current = 1;
this.tableSelectedKeys = [];
this.tableSelectedRows = [];
this.searchForm = {
number: "",
keyword: "",
status: "",
time: [
this.$moment(new Date()).format("YYYY-MM-DD"),
this.$moment(new Date()).format("YYYY-MM-DD"),
],
};
this.getOtherList();
},
// 选中
onSelectChange(keys, rows) {
this.tableSelectedKeys = keys;
const res = new Map();
this.tableSelectedRows = [...this.tableSelectedRows, ...rows]
.filter((v) => {
return !res.has(v.id) && res.set(v.id, 1);
})
.filter((v) => {
return this.tableSelectedKeys.some((val) => v.id == val);
});
},
// 导出
async handleExportTable() {
this.btnLoading = true;
let obj = {
1: "用户",
2: "管理员",
3: "邮递员",
};
if (this.tableSelectedKeys.length && this.tableSelectedRows.length) {
// 深度克隆避免影响页面表格展示
let data = this.$_.cloneDeep(this.tableSelectedRows);
for (let item of data) {
Object.keys(obj).forEach((key) => {
if (item.userType == key) {
item.userType = obj[key];
}
});
Object.keys(this.operationTypeList).forEach((key) => {
if (item.operationType == key) {
item.operationType = this.operationTypeList[key];
}
});
}
export2Excel(
this.tHeader,
this.filterVal,
data,
"其他操作记录报表" + this.$moment().format("YYYYMMDDHHmmss")
);
} else {
let data = this.$_.cloneDeep(
await this.getOtherList({ page: 1, size: -1 })
);
if (!data.length) return;
for (let item of data) {
Object.keys(obj).forEach((key) => {
if (item.userType == key) {
item.userType = obj[key];
}
});
Object.keys(this.operationTypeList).forEach((key) => {
if (item.operationType == key) {
item.operationType = this.operationTypeList[key];
}
});
}
export2Excel(
this.tHeader,
this.filterVal,
data,
"其他操作记录报表" + this.$moment().format("YYYYMMDDHHmmss")
);
}
this.btnLoading = false;
},
// 过滤操作类型
filterOperationType(key) {
let str = "--";
Object.keys(this.operationTypeList).forEach((keys) => {
if (key == keys) {
str = this.operationTypeList[keys];
}
});
return str;
}, },
}, },
}; };
...@@ -138,28 +327,28 @@ export default { ...@@ -138,28 +327,28 @@ export default {
/deep/.ant-spin-container { /deep/.ant-spin-container {
display: block; display: block;
} }
.header_box { .header_box {
padding-bottom: 1rem; padding-bottom: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
& > div {
display: flex; display: flex;
justify-content: space-between; justify-content: flex-start;
align-items: center; align-items: center;
& > div {
display: flex;
justify-content: flex-start;
align-items: center;
b { b {
font-style: normal;
font-weight: unset;
font-size: 16px;
margin-left: 20px;
i {
color: #0595fd;
font-style: normal; font-style: normal;
font-weight: unset;
font-size: 16px;
margin-left: 20px;
i {
color: #0595fd;
font-style: normal;
}
} }
} }
} }
}
</style> </style>
portal-manager-ui/admin/src/views/dataAdmin/components/pickUp/pickUpRecord.vue
View file @ dfc2a38b
...@@ -2,41 +2,46 @@ ...@@ -2,41 +2,46 @@
<div class="callRecord-Container"> <div class="callRecord-Container">
<div class="header_box"> <div class="header_box">
<div> <div>
<a-button type="success" @click="exportTable"> <a-button
:loading="btnLoading"
type="success"
@click="handleExportTable"
>
<span>{{ tableSelectedRows.length ? "导出" : "导出全部" }}</span> <span>{{ tableSelectedRows.length ? "导出" : "导出全部" }}</span>
</a-button> </a-button>
<b>取件次数：<i>233次</i></b> <b
<sub>统计时间段：2020.09.09~2021.09.09</sub> >取件次数：<i>{{ total }}次</i></b
>
<sub>统计时间段：{{ searchForm.time[0] }}~{{ searchForm.time[1] }}</sub>
</div> </div>
<span> <span>
<a-select default-value="001"> <a-space>
<!-- <a-select-option <a-select v-model="searchForm.number">
v-for="(item, index) of selectOptions" <a-select-option value=""> 全部设备 </a-select-option>
:key="index" <a-select-option v-for="v in devList" :key="v.id" :value="v.number">
:value="item.value" {{ v.name }}
> </a-select-option>
{{ item.label }} </a-select>
</a-select-option> -->
<a-select-option value="001"> 设备001 </a-select-option> <a-range-picker
<a-select-option value="002"> 设备002 </a-select-option> style="width: 200px"
</a-select> format="YYYY-MM-DD"
valueFormat="YYYY-MM-DD"
<a-range-picker v-model="searchForm.time"
format="YYYY年MM月DD日" >
class="range_picker_style" </a-range-picker>
@change="rangePickerChange"
v-model="BegindAndEndTime"
>
</a-range-picker>
<a-input <a-input
v-model="searchName" style="width: 300px"
placeholder="请输入手机号或取件人姓名搜索" v-model="searchForm.keyword"
> placeholder="请输入手机号或取件人姓名搜索"
<a-icon slot="prefix" type="search" /> @pressEnter="handleSearch"
</a-input> >
<a-button type="primary">搜索</a-button> <a-icon slot="prefix" type="search" />
</a-input>
<a-button type="primary" @click="handleSearch">搜索</a-button>
<a-button @click="handleReset">重置</a-button>
</a-space>
</span> </span>
</div> </div>
<div class="main"> <div class="main">
...@@ -49,122 +54,258 @@ ...@@ -49,122 +54,258 @@
onChange: onSelectChange, onChange: onSelectChange,
}" }"
:scroll="{ y: 590 }" :scroll="{ y: 590 }"
:pagination="tablePagination" :pagination="{
@change="pagTableChange" showTotal: (total) => `共 ${total} 条`,
current: current,
total: total,
pageSize: size,
showSizeChanger: true,
showQuickJumper: true,
pageSizeOptions: pageSizeOptions,
onChange: changePage,
onShowSizeChange: changSize,
}"
:loading="tableLoading" :loading="tableLoading"
:columns="tableHeaders" :columns="tableHeaders"
:dataSource="tableSourceData" :dataSource="tableSourceData"
> >
<template slot="取件人" slot-scope="text, record, index"> <!-- 序号 -->
<a-button type="link">{{ text }}</a-button> <span slot="index" slot-scope="text, record, index">{{
</template> (current - 1) * size + index + 1
}}</span>
</a-table> </a-table>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import table from "@/mixins/table"; import { getSitePickupDevice, getPickupList } from "@/api/dataAdmin";
import { export2Excel } from "@/utils/js/exportExcel";
let tHeader = [
// 导出的表头名信息
"取件码",
"取件人",
"取件方式",
"取件柜名称",
"箱号",
"联系电话",
"取件时间",
"邮递员",
"存件时间",
];
let filterVal = [
// 导出的表头字段名，需要导出表格字段名
"code",
"name",
"type",
"qjg_name",
"boxNo",
"phone",
"update_time",
"courier",
"create_time",
];
export default { export default {
mixins: [table],
name: "PortalAdminVuePickUpRecord", name: "PortalAdminVuePickUpRecord",
data() { data() {
return { return {
tHeader,
filterVal,
tableLoading: false,
btnLoading: false,
tableHeaders: [ tableHeaders: [
{ {
title: "序号", title: "序号",
dataIndex: "index",
width: "60px", width: "60px",
key: "index",
align: "center", align: "center",
customRender: (text, record, index) => `${index + 1}`, scopedSlots: {
customRender: "index",
},
}, },
{ {
title: "取件码", title: "取件码",
align: "center", align: "center",
dataIndex: "取件码", dataIndex: "code",
}, },
{ {
title: "取件人", title: "取件人",
align: "center", align: "center",
dataIndex: "取件人", dataIndex: "name",
scopedSlots: {
customRender: "取件人",
},
}, },
{ {
title: "取件方式", title: "取件方式",
align: "center", align: "center",
dataIndex: "取件方式", customRender: (text) => {
return text.type == 1 ? "取件码取件" : "身份证取件";
},
}, },
{ {
title: "取件柜名称", title: "取件柜名称",
align: "center", align: "center",
dataIndex: "取件柜名称", dataIndex: "qjg_name",
}, },
{ {
title: "箱号", title: "箱号",
align: "center", align: "center",
dataIndex: "箱号", dataIndex: "boxNo",
}, },
{ {
title: "联系电话", title: "联系电话",
align: "center", align: "center",
dataIndex: "联系电话", dataIndex: "phone",
}, },
{ {
title: "取件时间", title: "取件时间",
align: "center", align: "center",
dataIndex: "取件时间", customRender: (text) => {
return text.update_time || "--";
},
}, },
{ {
title: "邮递员", title: "邮递员",
align: "center", align: "center",
dataIndex: "邮递员", dataIndex: "courier",
}, },
{ {
title: "存件时间", title: "存件时间",
align: "center", align: "center",
dataIndex: "存件时间", dataIndex: "create_time",
}, },
], ],
BegindAndEndTime: [], searchForm: {
searchName: undefined, number: "",
keyword: "",
time: [
this.$moment(new Date()).format("YYYY-MM-DD"),
this.$moment(new Date()).format("YYYY-MM-DD"),
],
},
current: 1,
size: 10,
total: 0,
pageSizeOptions: ["10", "20", "30", "40", "50", "100", "200"],
tableSelectedKeys: [],
tableSelectedRows: [],
tableSourceData: [],
devList: [], // 设备列表
}; };
}, },
components: {}, components: {},
mounted() { created() {
this.setMoment(); this.getSitePickupDevice();
for (let key = 0; key < 20; key++) { this.getPickupList();
this.tableSourceData.push({
id: `00${key + 1}`,
取件码: `A0001${key + 1}`,
取件人: `张三${key + 1}`,
取件方式: `手机号取件${key + 1}`,
取件柜名称: `一楼取件柜${key + 1}`,
箱号: `00${key + 1}`,
联系电话: `138808888${key + 1}`,
取件时间: `2021-09-09 09:09:09${key + 1}`,
邮递员: `刘浩${key + 1}`,
存件时间: `2021-09-09 09:09:09${key + 1}`,
});
}
}, },
methods: { methods: {
rangePickerChange(val) { // 获取设备列表
console.log(val); async getSitePickupDevice() {
let res = await getSitePickupDevice();
this.devList = res.data;
},
// 获取取号记录报表
async getPickupList(search = {}) {
let res = await getPickupList({
page: this.current,
size: this.size,
status: 1,
...this.searchForm,
...search,
});
if (res.code == 1) {
let { data, total } = res.data;
this.total = total;
this.tableSourceData = data;
return data;
}
},
// 翻页
changePage(cur) {
this.current = cur;
this.getPickupList();
},
// 改变每页显示数量
changSize(cur, size) {
this.current = cur;
this.size = size;
this.getPickupList();
},
// 搜索
handleSearch() {
this.current = 1;
this.tableSelectedKeys = [];
this.tableSelectedRows = [];
this.getPickupList();
},
// 重置搜索
handleReset() {
this.current = 1;
this.tableSelectedKeys = [];
this.tableSelectedRows = [];
this.searchForm = {
number: "",
keyword: "",
time: [
this.$moment(new Date()).format("YYYY-MM-DD"),
this.$moment(new Date()).format("YYYY-MM-DD"),
],
};
this.getPickupList();
},
// 选中
onSelectChange(keys, rows) {
this.tableSelectedKeys = keys;
const res = new Map();
this.tableSelectedRows = [...this.tableSelectedRows, ...rows]
.filter((v) => {
return !res.has(v.id) && res.set(v.id, 1);
})
.filter((v) => {
return this.tableSelectedKeys.some((val) => v.id == val);
});
}, },
QueueState(type) { // 导出
switch (type) { async handleExportTable() {
case 0: this.btnLoading = true;
return "type1"; let obj = {
case 1: 1: "取件码取件",
return "type2"; 2: "身份证取件",
};
default: if (this.tableSelectedKeys.length && this.tableSelectedRows.length) {
return "type0"; // 深度克隆避免影响页面表格展示
let data = this.$_.cloneDeep(this.tableSelectedRows);
for (let item of data) {
Object.keys(obj).forEach((key) => {
if (item.type == key) {
item.type = obj[key];
}
});
}
export2Excel(
this.tHeader,
this.filterVal,
data,
"取件记录报表" + this.$moment().format("YYYYMMDDHHmmss")
);
} else {
let data = this.$_.cloneDeep(
await this.getPickupList({ page: 1, size: -1 })
);
if (!data.length) return;
for (let item of data) {
Object.keys(obj).forEach((key) => {
if (item.type == key) {
item.type = obj[key];
}
});
}
export2Excel(
this.tHeader,
this.filterVal,
data,
"取件记录报表" + this.$moment().format("YYYYMMDDHHmmss")
);
} }
this.btnLoading = false;
}, },
}, },
}; };
...@@ -174,35 +315,34 @@ export default { ...@@ -174,35 +315,34 @@ export default {
/deep/.ant-spin-container { /deep/.ant-spin-container {
display: block; display: block;
} }
.header_box { .header_box {
padding-bottom: 1rem; padding-bottom: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
& > div {
display: flex; display: flex;
justify-content: space-between; justify-content: flex-start;
align-items: center; align-items: center;
& > div {
display: flex;
justify-content: flex-start;
align-items: center;
b { b {
font-style: normal; font-style: normal;
font-weight: unset; font-weight: unset;
font-size: 16px; font-size: 16px;
margin-left: 20px; margin-left: 20px;
i { i {
color: #0595fd; color: #0595fd;
font-style: normal;
}
}
sub {
font-size: 14px;
font-style: normal; font-style: normal;
bottom: unset;
margin-left: 20px;
} }
} }
sub {
font-size: 14px;
font-style: normal;
bottom: unset;
margin-left: 20px;
}
} }
}
</style> </style>
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