nw-cqdevicemgt-ui/src/views/stquery/outboundPreview/components/outbound-order.vue

<template>
    <div>
        <el-dialog
            center
            width="80%"
            append-to-body
            title="机具出库单"
            :before-close="handleClose"
            :visible.sync="outboundVisible"
        >
            <el-form inline label-width="100px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="领用单位">
                            <el-select
                                clearable
                                style="width: 240px"
                                v-model="queryParamsForm.unitId"
                                placeholder="请选择领料单位"
                                @change="onUnitChange"
                            >
                                <el-option
                                    v-for="item in unitList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="出库日期">
                            <el-date-picker
                                clearable
                                type="daterange"
                                v-model="outTime"
                                style="width: 240px"
                                range-separator="至"
                                value-format="yyyy-MM-dd"
                                end-placeholder="结束日期"
                                start-placeholder="开始日期"
                                placeholder="请选择出库日期"
                                @change="onOutTimeChange"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="工程名称">
                            <el-select
                                clearable
                                style="width: 240px"
                                v-model="queryParamsForm.lotId"
                                placeholder="请选择工程名称"
                                @change="onProjectChange"
                            >
                                <el-option
                                    v-for="item in projectList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <VueEasyPrint tableShow ref="vueEasyPrintRef">
                <el-table :data="tableList">
                    <el-table-column label="序号" align="center" type="index" />
                    <el-table-column
                        prop="typeName"
                        label="机具名称"
                        align="center"
                    />
                    <el-table-column
                        prop="typeModelName"
                        label="规格型号"
                        align="center"
                    />
                    <el-table-column
                        prop="unitId"
                        label="计量单位"
                        align="center"
                    />
                    <el-table-column
                        prop="outNum"
                        label="出库数量"
                        align="center"
                    />
                    <el-table-column
                        prop="maStauts"
                        label="设备状态"
                        align="center"
                    />
                    <el-table-column
                        prop="maCode"
                        label="设备编号"
                        align="center"
                    />
                    <el-table-column label="备注" align="center">
                        <div class="remarks"></div>
                    </el-table-column>
                </el-table>

                <h1> 以上工机具均确认完好、无误、能够正常使用 </h1>
                <h1> 如有损坏、丢失 原价赔偿 </h1>

                <el-row>
                    <el-col :span="12"> 机具分公司发货人： </el-col>
                    <el-col :span="12"> 领用单位经办人： </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12" style="color: transparent">,</el-col>
                    <el-col :span="12"> 承运车： </el-col>
                </el-row>
            </VueEasyPrint>

            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="onPrint">打 印</el-button>
                <el-button size="mini" @click="handleExport">导 出</el-button>
                <el-button size="mini" @click="handleClose" type="primary"
                    >关 闭</el-button
                >
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getOutboundListApi } from '@/api/stquery/outboundPreview.js'
import VueEasyPrint from 'vue-easy-print'
export default {
    props: {
        outboundVisible: {
            type: Boolean,
            default: () => false,
        },
        unitList: {
            type: Array,
            default: () => [],
        },
        projectList: {
            type: Array,
            default: () => [],
        },
    },

    components: {
        VueEasyPrint,
    },
    data() {
        return {
            outTime: [],
            tableList: [],
            queryParamsForm: {
                lotId: '',
                unitId: '',
                startTime: '',
                endTime: '',
                pageNum: 1,
                pageSize: 9999,
            },
        }
    },
    methods: {
        async getTableList() {
            const { data: res } = await getOutboundListApi(this.queryParamsForm)
            this.tableList = res.rows
        },
        handleClose() {
            this.$emit('handleClose')
        },
        onUnitChange(val) {
            if (val) {
                this.getTableList()
            }
        },
        onProjectChange(val) {
            if (val) {
                this.getTableList()
            }
        },
        onOutTimeChange(val) {
            if (val.length > 0) {
                const [_1, _2] = val
                this.queryParamsForm.startTime = _1
                this.queryParamsForm.endTime = _2
            } else {
                this.queryParamsForm.startTime = ''
                this.queryParamsForm.endTime = ''
            }

            if (this.queryParamsForm.unitId || this.queryParamsForm.lotId) {
                this.getTableList()
            }
        },
        onPrint() {
            this.$refs.vueEasyPrintRef.print()
        },

        handleExport() {
            this.download(
                'material/inputRecord/exOutputport',
                {
                    ...this.queryParamsForm,
                },
                `机具出库列表.xlsx`,
            )
        },
    },

    watch: {
        queryParamsForm: {
            handler(newValue) {
                const { lotId, unitId, startTime, endTime } = newValue

                if (!lotId && !unitId && !startTime && !endTime) {
                    this.tableList = []
                }
            },
            deep: true,
        },
    },
}
</script>

<style scoped>
::v-deep .el-dialog__title {
    font-size: 20px;
    letter-spacing: 6px;
}

h1 {
    margin: 15px 0;
    padding: 0;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}

.el-row {
    margin-top: 15px;
    font-size: 16px;
    letter-spacing: 4px;
}

.remarks {
    color: transparent;
}
</style>