duoji-frontend/src/views/historyCheck/index.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>