248 lines
7.9 KiB
Vue
248 lines
7.9 KiB
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 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" />
|
||
</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;
|
||
}
|
||
</style>
|