You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
480 lines
16 KiB
Vue
480 lines
16 KiB
Vue
<template>
|
|
<div class="history bg-white">
|
|
<div class="ant-advanced-search-form">
|
|
<a-form
|
|
layout="inline"
|
|
:form="queryParam"
|
|
>
|
|
<a-row :gutter="24">
|
|
<a-col :span="3">
|
|
<a-form-item label="巷道">
|
|
<a-select
|
|
@change="handleChange"
|
|
:value="select"
|
|
style="width:100px"
|
|
>
|
|
<a-select-option
|
|
v-for="i in listData"
|
|
:key="i.name"
|
|
:value="i.id"
|
|
>
|
|
{{i.name}}
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
|
|
</a-col>
|
|
<a-col :span="2">
|
|
<a-form-item label="左右">
|
|
<a-select
|
|
v-model="queryParam.leftRight"
|
|
@change="leftRightChange"
|
|
>
|
|
<a-select-option :value=0>
|
|
未选择
|
|
</a-select-option>
|
|
<a-select-option :value=1>
|
|
左侧
|
|
</a-select-option>
|
|
<a-select-option :value=2>
|
|
右侧
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
|
|
</a-col>
|
|
<!-- <a-col :span="2">
|
|
<a-form-item label="深浅" v-if="queryParam.side >= 0">
|
|
<a-select style="width: 50px" :key="queryParam.side" >
|
|
<a-select-option :key=0>
|
|
未选择
|
|
</a-select-option>
|
|
<a-select-option :key=1>
|
|
浅
|
|
</a-select-option>
|
|
<a-select-option :key=2>
|
|
深
|
|
</a-select-option>
|
|
|
|
</a-select>
|
|
</a-form-item>
|
|
|
|
|
|
</a-col> -->
|
|
<a-col
|
|
:span="2"
|
|
style="text-align: left"
|
|
>
|
|
<a-form-item label="行号">
|
|
<a-input
|
|
v-model="queryParam.row"
|
|
placeholder="请输入"
|
|
style="width:50px;"
|
|
type="number"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col
|
|
:span="2"
|
|
style="text-align: left"
|
|
>
|
|
<a-form-item label="列号">
|
|
<a-input
|
|
v-model="queryParam.column"
|
|
placeholder="请输入"
|
|
style="width:50px;"
|
|
type="number"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col
|
|
:span="4"
|
|
style="text-align: left"
|
|
>
|
|
<a-form-item label="盘点号">
|
|
<a-input
|
|
v-model="queryParam.lotnum"
|
|
placeholder="请输入"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col
|
|
:span="3"
|
|
style="text-align: left"
|
|
>
|
|
<a-form-item label="状态">
|
|
<a-select style="width: 100px"
|
|
v-model="queryParam.status" allowClear
|
|
@change="statusChange"
|
|
>
|
|
<a-select-option :value=0>
|
|
未盘点
|
|
</a-select-option>
|
|
<a-select-option :value=1>
|
|
盘点异常
|
|
</a-select-option>
|
|
<a-select-option :value=2>
|
|
盘点正常
|
|
</a-select-option>
|
|
<a-select-option :value=3>
|
|
人工核对正确
|
|
</a-select-option>
|
|
|
|
<a-select-option :value=4>
|
|
空托盘
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="4">
|
|
<a-form-item label="时间">
|
|
<a-range-picker
|
|
@change="onTimeChange"
|
|
v-model="time"
|
|
format="YYYY-MM-DD HH:mm"
|
|
:show-time="{
|
|
defaultValue: [moment('00:00', 'HH:mm'), moment('23:59', 'HH:mm')],
|
|
//defaultValue: [moment('00:00', 'YYYY-MM-DD HH:mm'), moment('23:59', 'YYYY-MM-DD HH:mm')],
|
|
}"
|
|
>
|
|
<a-icon
|
|
slot="suffixIcon"
|
|
type="calendar"
|
|
/>
|
|
</a-range-picker>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col
|
|
:span="4"
|
|
style="text-align: right"
|
|
>
|
|
<a-button
|
|
type="primary"
|
|
@click="handleSearch"
|
|
>搜索</a-button>
|
|
<a-button
|
|
style="margin-left: 15px"
|
|
@click="reset"
|
|
>重置</a-button>
|
|
</a-col>
|
|
</a-row>
|
|
</a-form>
|
|
</div>
|
|
|
|
<a-table
|
|
:columns="columns"
|
|
:row-key="record => record.id"
|
|
:data-source="data"
|
|
:pagination="pagination"
|
|
@change="handleGetHistoryList"
|
|
>
|
|
<span
|
|
slot="checkNum"
|
|
slot-scope="text"
|
|
>
|
|
{{ text }}
|
|
</span>
|
|
<span
|
|
slot="goodsLocation"
|
|
slot-scope="text"
|
|
>
|
|
{{ text.direction }}-{{ text.row}}-{{ text.column}}
|
|
</span>
|
|
<span
|
|
slot="status"
|
|
slot-scope="text"
|
|
>
|
|
{{ statusMap[text.status] }}
|
|
</span>
|
|
<span
|
|
slot="pic"
|
|
slot-scope="text"
|
|
style="width:auto"
|
|
>
|
|
|
|
<span style="height:100%;">
|
|
<happy-scroll
|
|
color="rgba(100,100,100,0.5)"
|
|
size="8"
|
|
class="scroll-box"
|
|
style="width:320px;height:90px;"
|
|
>
|
|
|
|
<viewer :images="text.pics">
|
|
<li
|
|
v-for="item in text.pics"
|
|
:key="item"
|
|
style="float:left"
|
|
>
|
|
<a-tooltip>
|
|
<template slot="title">
|
|
{{removeAfterLastChar(item, "/")}}
|
|
</template>
|
|
<img
|
|
style="height:90px"
|
|
:src="item"
|
|
>
|
|
</a-tooltip>
|
|
|
|
</li>
|
|
</viewer>
|
|
</happy-scroll>
|
|
</span>
|
|
|
|
</span>
|
|
</a-table>
|
|
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { imgUrl } from "@/api/importExcel";
|
|
import moment from "moment";
|
|
export default {
|
|
name: "historyCheck",
|
|
data() {
|
|
return {
|
|
statusMap: {
|
|
0: "未盘点",
|
|
1: "盘点异常",
|
|
2: "核对正确",
|
|
3: "人工核对正确",
|
|
4: "空托盘",
|
|
5: "品规失败",
|
|
6: "个数失败",
|
|
},
|
|
queryParam: {
|
|
lotnum: "",
|
|
side: "",
|
|
leftRight: "",
|
|
},
|
|
listData: [],
|
|
time: [],
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
data: [],
|
|
|
|
select: "",
|
|
pagination: {
|
|
total: 0,
|
|
defaultPageSize: 10, // 默认每页显示数量
|
|
showTotal: (total) => `共 ${total} 条数据`, // 显示总数
|
|
showSizeChanger: true, // 显示可改变每页数量
|
|
pageSizeOptions: ["10", "20", "30"],
|
|
onShowSizeChange: (current, pageSize) =>
|
|
(this.pageSize = pageSize), // 改变每页数量时更新显示
|
|
},
|
|
imgUrl: imgUrl,
|
|
columns: [
|
|
{
|
|
title: "盘点批次号",
|
|
dataIndex: "lotnum",
|
|
},
|
|
{
|
|
title: "巷道名称",
|
|
dataIndex: "streetName",
|
|
},
|
|
{
|
|
title: "货位({1:左,2:右}-{行}-{列})",
|
|
scopedSlots: { customRender: "goodsLocation" },
|
|
width: 200,
|
|
},
|
|
|
|
{
|
|
title: "盘点状态",
|
|
scopedSlots: { customRender: "status" },
|
|
},
|
|
{
|
|
title: "照片",
|
|
scopedSlots: { customRender: "pic" },
|
|
width: 320,
|
|
},
|
|
{
|
|
title: "更新时间",
|
|
dataIndex: "createTime",
|
|
},
|
|
],
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getStreetList();
|
|
this.handleSearch();
|
|
},
|
|
methods: {
|
|
moment,
|
|
//获取巷道列表
|
|
getStreetList() {
|
|
this.$api.httpApi
|
|
.getAllStreet({})
|
|
.then((res) => {
|
|
this.listData = res.data;
|
|
})
|
|
.catch((err) => {
|
|
console.error(err);
|
|
});
|
|
},
|
|
//获取巷道详情
|
|
getStreetDetail(id) {
|
|
this.$axios
|
|
.get("/street/" + id, {
|
|
data: {},
|
|
})
|
|
.then((res) => {
|
|
this.streetDetail = res.data;
|
|
this.select = this.streetDetail.name;
|
|
this.queryParam.streetId = this.streetDetail.id;
|
|
})
|
|
.catch((err) => {});
|
|
},
|
|
handleChange(value) {
|
|
this.getStreetDetail(value);
|
|
this.queryParam.leftRight = "";
|
|
this.queryParam.side = "";
|
|
},
|
|
removeAfterLastChar(str, charToRemove) {
|
|
let lastIndex = str.lastIndexOf(charToRemove);
|
|
if (lastIndex !== -1) {
|
|
return str.substring(0, lastIndex + 1);
|
|
} else {
|
|
return str; // 如果找不到指定字符，返回原字符串
|
|
}
|
|
},
|
|
|
|
getPics(val) {
|
|
return val.split(";");
|
|
},
|
|
// 左右货架切换
|
|
leftRightChange(value) {
|
|
if (value == 1) {
|
|
//单伸
|
|
if (this.streetDetail.leftType == 0) {
|
|
this.queryParam.side = "";
|
|
} else {
|
|
this.queryParam.side = 0;
|
|
}
|
|
} else if (value == 2) {
|
|
if (this.streetDetail.rightType == 0) {
|
|
this.queryParam.side = "";
|
|
} else {
|
|
this.queryParam.side = 0;
|
|
}
|
|
} else {
|
|
this.queryParam.side = "";
|
|
}
|
|
},
|
|
// 左右货架切换
|
|
statusChange(value) {
|
|
if (value == 1) {
|
|
//单伸
|
|
if (this.streetDetail.leftType == 0) {
|
|
this.queryParam.side = "";
|
|
} else {
|
|
this.queryParam.side = 0;
|
|
}
|
|
} else if (value == 2) {
|
|
if (this.streetDetail.rightType == 0) {
|
|
this.queryParam.side = "";
|
|
} else {
|
|
this.queryParam.side = 0;
|
|
}
|
|
} else {
|
|
this.queryParam.side = "";
|
|
}
|
|
},
|
|
handleSearch() {
|
|
console.log(this.queryParam);
|
|
this.pageNum = 1;
|
|
this.request();
|
|
},
|
|
handleGetHistoryList(pagination) {
|
|
console.log(pagination);
|
|
if (pagination) {
|
|
this.pagination.current = pagination.current;
|
|
this.pagination.pageSize = pagination.pageSize;
|
|
this.pageNum = pagination.current;
|
|
this.pageSize = pagination.pageSize;
|
|
}
|
|
this.request();
|
|
},
|
|
request() {
|
|
this.$api.httpApi
|
|
.checkLog({
|
|
data: {
|
|
pageNum: this.pageNum,
|
|
pageSize: this.pageSize,
|
|
...this.queryParam,
|
|
},
|
|
})
|
|
.then((res) => {
|
|
console.log(res.data);
|
|
const pagination = { ...this.pagination };
|
|
pagination.total = res.data.total;
|
|
this.pagination = pagination;
|
|
this.data = res.data.list;
|
|
})
|
|
.catch((err) => {});
|
|
},
|
|
onTimeChange(date, dateString) {
|
|
this.handleReset();
|
|
console.log(date);
|
|
console.log(dateString);
|
|
console.log(date[0].format("YYYY-MM-DD HH:mm"));
|
|
this.pageNum = 1;
|
|
|
|
this.queryParam.startTimestamp = date[0].format(
|
|
"YYYY-MM-DD HH:mm:ss"
|
|
);
|
|
this.queryParam.endTimestamp = date[1].format(
|
|
"YYYY-MM-DD HH:mm:ss"
|
|
);
|
|
},
|
|
handleReset() {
|
|
this.queryParam.startTimestamp = "";
|
|
this.queryParam.endTimestamp = "";
|
|
this.pageNum = 1;
|
|
},
|
|
reset() {
|
|
this.queryParam.startTimestamp = "";
|
|
this.queryParam.endTimestamp = "";
|
|
this.queryParam.lotnum = "";
|
|
this.queryParam.side = "";
|
|
this.queryParam.leftRight = "";
|
|
this.queryParam.streetId = 0;
|
|
this.select = null;
|
|
this.time = [];
|
|
this.pageNum = 1;
|
|
this.pageSize = 10;
|
|
this.queryParam.row = null;
|
|
this.queryParam.column = null;
|
|
this.request();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.history {
|
|
padding: 24px;
|
|
}
|
|
.ant-drawer-content-wrapper {
|
|
height: auto !important;
|
|
}
|
|
|
|
.ant-drawer-body {
|
|
text-align: center;
|
|
}
|
|
|
|
.ant-advanced-search-form .ant-form-item {
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
img {
|
|
transform: rotate(270deg);
|
|
}
|
|
|
|
.historyImg {
|
|
width: 80px;
|
|
height: auto;
|
|
margin: 5px;
|
|
}
|
|
</style>
|