<template>
    <div>
        <!-- 表单搜索 -->
        <OutboundForm @handleQuery="handleQuery" @handleExport="handleExport" />
        <!-- 列表 -->
        <el-table :data="tableList" border>
            <el-table-column align="center" label="序号" type="index" />
            <el-table-column
                align="center"
                prop="code"
                label="领料单号"
                show-overflow-tooltip
            />
            <el-table-column
                align="center"
                prop="unitName"
                label="领用单位"
                show-overflow-tooltip
            />
            <el-table-column
                align="center"
                prop="lotName"
                label="工程名称"
                show-overflow-tooltip
            />
            <el-table-column
                align="center"
                prop="typeName"
                label="机具名称"
                show-overflow-tooltip
            />
            <el-table-column
                align="center"
                prop="typeModelName"
                label="规格型号"
                show-overflow-tooltip
            />
            <el-table-column
                align="center"
                prop="unitId"
                label="计量单位"
                show-overflow-tooltip
            />
            <el-table-column
                align="center"
                prop="maCode"
                label="设备编号"
                show-overflow-tooltip
            />
            <el-table-column
                align="center"
                prop="createTime"
                label="出库时间"
                show-overflow-tooltip
            />
            <el-table-column
                align="center"
                prop="outNum"
                label="本次出库数量"
                show-overflow-tooltip
            />
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getTableList"
        />
    </div>
</template>

<script>
import OutboundForm from './outbound-form'
import { getOutboundListApi } from '@/api/stquery/outboundPreview.js'
export default {
    components: {
        OutboundForm,
    },
    data() {
        return {
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            total: 0,
            tableList: [],
        }
    },

    created() {
        this.getTableList()
    },

    methods: {
        async getTableList() {
            const { data: res } = await getOutboundListApi(this.queryParams)
            this.tableList = res.rows
            this.total = res.total
        },

        handleQuery(val, reset) {
            Object.assign(this.queryParams, val)

            /* reset === 'reset'时为表单查询条件重置，则初始化分页参数 */
            if (reset === 'reset') {
                this.queryParams.pageNum = 1
                this.queryParams.pageSize = 10
            }
            this.getTableList()
        },

        /* 导出 */
        handleExport(val) {
            Object.assign(this.queryParams, val)
            this.download(
                'material/inputRecord/exOutputport',
                {
                    ...this.queryParams,
                },
                `机具出库列表.xlsx`,
            )
        },
    },
}
</script>
