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="4">
                        <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="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="pics" slot-scope="text" style="width:auto">

            <template>
                <span style="height:100%;">
                    <happy-scroll color="rgba(100,100,100,0.5)" size="8" class="scroll-box" style="width:320px;height:90px;">
                        <viewer>
                            
                            <img class="historyImg" :src="text.pic1"/> 
                            <img class="historyImg" :src="text.pic2"/> 
                        </viewer>
                    </happy-scroll>
                </span>
                
            </template>

          </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:"人工核对正确"},
            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: 'pics'},
                    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 = ''
            
        },
        // 左右货架切换
        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 = ''
            }
        },
        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%;
}

.historyImg {
    width: 80px;
    height:auto;
    margin: 5px;
}
</style>