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

164 lines
5.1 KiB
Vue

<template>
<div>
<el-form
inline
size="small"
label-width="80px"
ref="queryParamsFormRef"
:model="queryParamsForm"
>
<el-form-item label="关键字" prop="keyWord">
<el-input
clearable
style="width: 240px"
placeholder="请输入关键字"
v-model="queryParamsForm.keyWord"
/>
</el-form-item>
<el-form-item label="领料单号" prop="code">
<el-input
clearable
style="width: 240px"
placeholder="请输入领料单号"
v-model="queryParamsForm.code"
/>
</el-form-item>
<el-form-item label="领料单位" prop="unitId">
<el-select
clearable
style="width: 240px"
v-model="queryParamsForm.unitId"
placeholder="请选择领料单位"
>
<el-option
v-for="item in unitList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="工程名称" prop="lotId">
<el-select
clearable
style="width: 240px"
v-model="queryParamsForm.lotId"
placeholder="请选择工程名称"
>
<el-option
v-for="item in projectList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<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-form-item>
<el-button size="mini" plain @click="handleQuery"
>查询</el-button
>
<el-button size="mini" type="warning" @click="handleReset"
>重置</el-button
>
<el-button size="mini" type="primary" @click="handleExport"
>导出</el-button
>
<el-button
size="mini"
type="success"
@click="handleOutboundOrder"
>出库单</el-button
>
</el-form-item>
</el-form>
<OutboundOrder
v-if="outboundVisible"
:unitList="unitList"
:projectList="projectList"
:outboundVisible="outboundVisible"
@handleClose="handleClose"
/>
</div>
</template>
<script>
import OutboundOrder from './outbound-order'
import { getProData, getUnitData } from '@/api/stquery/deviceScrapQuery'
export default {
components: {
OutboundOrder,
},
data() {
return {
outTime: [],
unitList: [],
projectList: [],
outboundVisible: false,
queryParamsForm: {
code: '',
lotId: '',
unitId: '',
keyWord: '',
startTime: '',
endTime: '',
},
}
},
created() {
this.getUnitList()
this.getProList()
},
methods: {
async getUnitList() {
const { data: res } = await getUnitData()
this.unitList = res
},
async getProList() {
const { data: res } = await getProData()
this.projectList = res
},
onOutTimeChange(val) {
if (val.length > 0) {
const [_1, _2] = val
this.queryParamsForm.startTime = _1
this.queryParamsForm.endTime = _2
}
},
handleQuery() {
this.$emit('handleQuery', this.queryParamsForm)
},
handleReset() {
this.outTime = []
this.queryParamsForm.endTime = ''
this.queryParamsForm.startTime = ''
this.$refs.queryParamsFormRef.resetFields()
this.$emit('handleQuery', this.queryParamsForm, 'reset')
},
handleExport() {
this.$emit('handleExport', this.queryParamsForm)
},
handleOutboundOrder() {
this.outboundVisible = true
},
handleClose() {
this.outboundVisible = false
},
},
}
</script>