<template>
|
<div>
|
<div class="body" :style="{height:mainHeight+'px'}">
|
<!-- <div class="bodyTopButtonGroup" style="justify-content: space-between">-->
|
<!-- <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>-->
|
<!-- <el-button v-waves icon="el-icon-download" @click="upload">导入</el-button>-->
|
<!-- </div>-->
|
|
<div
|
class="bodyTopFormGroup"
|
style="margin-top: 10px"
|
:style="{height:(mainHeight-20)+'px'}"
|
>
|
<div style="display: flex;align-items: center">
|
<i
|
class="el-icon-s-operation"
|
:style="{color:$store.state.settings.theme,fontSize:'14px'}"
|
/>
|
<div style="font-size: 14px;margin-left: 5px;color: #a7a7a7">
|
查询项
|
</div>
|
</div>
|
<el-form
|
ref="form"
|
:model="form"
|
label-width="100px"
|
inline
|
style="display: flex;"
|
>
|
<div class="elForm" style="display: flex;flex-direction: column">
|
<div style="display: flex">
|
<el-form-item label="单据类型" style=" display: flex;">
|
<el-select
|
v-model="form.documentType"
|
:popper-append-to-body="false"
|
filterable
|
style="width: 200px"
|
placeholder="请选择"
|
@change="getProductInHouseOrderSearch"
|
>
|
<el-option
|
v-for="item in documentTypeArr"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item
|
v-if="form.documentType==='Y'"
|
label="生产订单"
|
style=" display: flex;"
|
>
|
<el-input
|
v-model="form.erpordercode"
|
placeholder="请输入"
|
style="width: 200px"
|
@input="getProductInHouseOrderSearch"
|
/>
|
</el-form-item>
|
<el-form-item label="生产工单" style=" display: flex;">
|
<el-input
|
v-model="form.mesordercode"
|
placeholder="请输入"
|
style="width: 200px"
|
@input="getProductInHouseOrderSearch"
|
/>
|
</el-form-item>
|
<el-form-item
|
v-if="form.documentType==='Y'"
|
label="销售订单"
|
style="display: flex;"
|
>
|
<el-input v-model="form.saleOrderCode" placeholder="请输入" style="width: 200px" @input="getProductInHouseOrderSearch" />
|
</el-form-item>
|
</div>
|
|
<div style="display: flex">
|
<el-form-item label="产品编码" style=" display: flex;">
|
<el-input v-model="form.partcode" placeholder="请输入" style="width: 200px" />
|
</el-form-item>
|
<el-form-item label="产品名称" style=" display: flex;">
|
<el-input v-model="form.partname" style="width: 200px" placeholder="请输入" />
|
</el-form-item>
|
<el-form-item label="产品规格" style=" display: flex;">
|
<el-input v-model="form.partspec" style="width: 200px" placeholder="请输入" />
|
</el-form-item>
|
<el-form-item
|
label="工单日期"
|
style=" display: flex;font-size: 14px;margin-top: 3px;margin-bottom: -3px"
|
>
|
<el-date-picker
|
v-model="form.paystartdate"
|
type="daterange"
|
range-separator="~"
|
class="timeMini"
|
size="mini"
|
style="width: 200px;display: flex;line-height: 34px;height: 34px;"
|
:clearable="false"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
/>
|
</el-form-item>
|
</div>
|
|
</div>
|
<div
|
class="bodySearchReset"
|
:style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"
|
>
|
<!-- <el-button v-waves type="primary" icon="el-icon-search" @click="search">查询</el-button>-->
|
<el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
|
</div>
|
</el-form>
|
|
<div style="display: flex;align-items: center">
|
<i
|
class="el-icon-s-operation"
|
:style="{color:$store.state.settings.theme,fontSize:'14px'}"
|
/>
|
<div style="font-size: 14px;margin-left: 5px;color: #a7a7a7">
|
选择项
|
</div>
|
</div>
|
<el-form
|
ref="form"
|
:model="form"
|
label-width="100px"
|
inline
|
style="display: flex;"
|
>
|
<div class="elForm">
|
<el-form-item label="单据日期" style=" display: flex;">
|
<el-date-picker
|
v-model="form.lm_date"
|
style="width: 200px"
|
type="date"
|
placeholder="选择日期"
|
/> </el-form-item>
|
<el-form-item label="单据编号" style=" display: flex;">
|
<el-input v-model="form.OrgName" placeholder="请输入" style="width: 200px" />
|
</el-form-item>
|
<el-form-item label="生产车间" style=" display: flex;">
|
<el-select
|
v-model="form.WorkShop"
|
:popper-append-to-body="false"
|
filterable
|
style="width: 200px"
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="item in WorkShopArr"
|
:key="item.code"
|
:label="item.name"
|
:value="item.code"
|
/>
|
</el-select> </el-form-item>
|
<el-form-item label="入库仓库" style=" display: flex;">
|
<el-select
|
v-model="form.stockcode"
|
:popper-append-to-body="false"
|
filterable
|
style="width: 200px"
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="item in stockcodeArr"
|
:key="item.code"
|
:label="item.name"
|
:value="item.code"
|
/>
|
</el-select>
|
</el-form-item>
|
|
</div>
|
<div class="bodySearchReset" :style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}">
|
<el-button v-waves type="primary" icon="el-icon-s-promotion" @click="search">入库提交</el-button>
|
<!-- <el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>-->
|
</div>
|
</el-form>
|
<div style="display: flex;align-items: center">
|
<i
|
class="el-icon-s-operation"
|
:style="{color:$store.state.settings.theme,fontSize:'14px'}"
|
/>
|
<div style="font-size: 14px;margin-left: 5px;color: #a7a7a7">
|
信息栏
|
</div>
|
</div>
|
<div style="padding:0 10px;position: relative">
|
<!-- <el-button-->
|
<!-- v-waves-->
|
<!-- type="primary"-->
|
<!-- style="position: absolute;right: 10px;top: 10px;z-index: 10"-->
|
<!-- icon="el-icon-s-promotion"-->
|
<!-- @click=""-->
|
<!-- >入库提交-->
|
<!-- </el-button>-->
|
<el-tabs style="margin-top: 10px;">
|
<el-tab-pane label="明细">
|
<div class="elTableDiv" style="margin: 0 auto 10px;">
|
<el-table
|
v-show="form.documentType==='Y'"
|
ref="tableDataRef"
|
class="tableFixed"
|
:data="tableDataDetail"
|
:height="(tableHeight-25)+'px'"
|
border
|
:row-class-name="tableRowClassName"
|
:style="{width: 100+'%',height:(tableHeight-25)+'px',}"
|
highlight-current-row
|
:header-cell-style="this.$headerCellStyle"
|
:cell-style="this.$cellStyle"
|
@selection-change="handleSelectionChange"
|
>
|
<el-table-column
|
type="selection"
|
width="50"
|
fixed
|
/>
|
<el-table-column
|
type="index"
|
width="50"
|
fixed
|
label="序号"
|
/>
|
|
<el-table-column
|
prop="stockname"
|
label="仓库"
|
width="110"
|
>
|
<template slot-scope="{row}">
|
<div v-if="row.stockname">{{ row.stockname }}</div>
|
<div v-else>/</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="inbarcode"
|
label="入库条码"
|
width="160"
|
show-tooltip-when-overflow
|
/>
|
<el-table-column
|
prop="m_po"
|
label="订单编号"
|
width="160"
|
show-tooltip-when-overflow
|
>
|
<template slot-scope="{row}">
|
<div v-if="row.m_po">{{ row.m_po }}</div>
|
<div v-else>/</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="wo_code"
|
label="工单编号"
|
width="160"
|
show-tooltip-when-overflow
|
/>
|
<el-table-column
|
prop="partcode"
|
label="产品编码"
|
width="160"
|
show-tooltip-when-overflow
|
/>
|
<el-table-column
|
prop="partname"
|
label="产品名称"
|
width="160"
|
show-tooltip-when-overflow
|
/>
|
<el-table-column
|
prop="partspec"
|
label="产品规格"
|
width="160"
|
show-tooltip-when-overflow
|
>
|
<template slot-scope="{row}">
|
<div v-if="row.stockname">{{ row.stockname }}</div>
|
<div v-else>/</div>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
prop="qty"
|
label="订单数量"
|
min-width="95"
|
fixed="right"
|
show-tooltip-when-overflow
|
>
|
<template slot-scope="{row}">
|
<div v-if="row.qty">{{ row.qty }}</div>
|
<div v-else>/</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="plan_qty"
|
label="工单数量"
|
min-width="95"
|
fixed="right"
|
show-tooltip-when-overflow
|
/>
|
<el-table-column
|
prop="good_qty"
|
label="完工数量"
|
min-width="95"
|
fixed="right"
|
show-tooltip-when-overflow
|
/>
|
<el-table-column
|
prop="inhouseqty"
|
label="已入库数量"
|
min-width="95"
|
fixed="right"
|
show-tooltip-when-overflow
|
/>
|
<el-table-column
|
prop="stinhouseqty"
|
label="可入库数量"
|
min-width="95"
|
fixed="right"
|
show-tooltip-when-overflow
|
/>
|
</el-table>
|
<el-table
|
v-show="form.documentType==='N'"
|
ref="tableDataRef"
|
class="tableFixed"
|
:data="tableDataDetail"
|
:height="(tableHeight-25)+'px'"
|
border
|
:row-class-name="tableRowClassName"
|
:style="{width: 100+'%',height:(tableHeight-25)+'px',}"
|
highlight-current-row
|
:header-cell-style="this.$headerCellStyle"
|
:cell-style="this.$cellStyle"
|
@selection-change="handleSelectionChange"
|
>
|
<el-table-column
|
type="selection"
|
width="50"
|
fixed
|
/>
|
<el-table-column
|
type="index"
|
width="50"
|
fixed
|
label="序号"
|
/>
|
|
<el-table-column
|
prop="stockname"
|
label="仓库"
|
width="110"
|
>
|
<template slot-scope="{row}">
|
<div v-if="row.stockname">{{ row.stockname }}</div>
|
<div v-else>/</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="inbarcode"
|
label="入库条码"
|
width="160"
|
show-tooltip-when-overflow
|
/>
|
<!-- <el-table-column-->
|
<!-- prop="m_po"-->
|
<!-- label="订单编号"-->
|
<!-- width="160"-->
|
<!-- show-tooltip-when-overflow-->
|
<!-- >-->
|
<!-- <template slot-scope="{row}">-->
|
<!-- <div v-if="row.m_po">{{ row.m_po }}</div>-->
|
<!-- <div v-else>/</div>-->
|
<!-- </template>-->
|
<!-- </el-table-column>-->
|
<el-table-column
|
prop="wo_code"
|
label="工单编号"
|
width="160"
|
show-tooltip-when-overflow
|
/>
|
<el-table-column
|
prop="partcode"
|
label="产品编码"
|
width="160"
|
show-tooltip-when-overflow
|
/>
|
<el-table-column
|
prop="partname"
|
label="产品名称"
|
width="160"
|
show-tooltip-when-overflow
|
/>
|
<el-table-column
|
prop="partspec"
|
label="产品规格"
|
width="160"
|
show-tooltip-when-overflow
|
>
|
<template slot-scope="{row}">
|
<div v-if="row.stockname">{{ row.stockname }}</div>
|
<div v-else>/</div>
|
</template>
|
</el-table-column>
|
|
<!-- <el-table-column-->
|
<!-- prop="qty"-->
|
<!-- label="订单数量"-->
|
<!-- min-width="95"-->
|
<!-- fixed="right"-->
|
<!-- show-tooltip-when-overflow-->
|
<!-- >-->
|
<!-- <template slot-scope="{row}">-->
|
<!-- <div v-if="row.qty">{{ row.qty }}</div>-->
|
<!-- <div v-else>/</div>-->
|
<!-- </template>-->
|
<!-- </el-table-column>-->
|
<el-table-column
|
prop="plan_qty"
|
label="工单数量"
|
min-width="95"
|
fixed="right"
|
show-tooltip-when-overflow
|
/>
|
<el-table-column
|
prop="good_qty"
|
label="完工数量"
|
min-width="95"
|
fixed="right"
|
show-tooltip-when-overflow
|
/>
|
<el-table-column
|
prop="inhouseqty"
|
label="已入库数量"
|
min-width="95"
|
fixed="right"
|
show-tooltip-when-overflow
|
/>
|
<el-table-column
|
prop="stinhouseqty"
|
label="可入库数量"
|
min-width="95"
|
fixed="right"
|
show-tooltip-when-overflow
|
/>
|
</el-table>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="汇总">汇总</el-tab-pane>
|
</el-tabs>
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
import elDragDialog from '@/directive/el-drag-dialog'
|
import waves from '@/directive/waves'
|
import { WareHouseSelect } from '@/api/materialManager'
|
import { ProductInHouseOrderSearch } from '@/api/produceManager'
|
import { handleDatetime } from '@/utils/global'
|
import { WorkShopSelect } from '@/api/deviceManager'
|
|
export default {
|
name: 'Zzjg',
|
components: {},
|
directives: { elDragDialog, waves },
|
data() {
|
return {
|
mainHeight: 0,
|
tableHeight: 0,
|
form: {
|
documentType: 'Y', // 单据类型
|
|
erpordercode: '', // 订单编号
|
mesordercode: '', // 工单编号
|
partcode: '', // 产品编码
|
partname: '', // 产品名称
|
partspec: '', // 规格型号
|
orderdate: '', // 工单日期
|
|
saleOrderCode: '', // 销售订单
|
WorkShop: '', // 生产车间
|
lm_date: '', // 单据日期
|
stockcode: '', // 入库仓库
|
xxx: ''
|
},
|
documentTypeArr: [
|
{ label: '有源单', value: 'Y' },
|
{ label: '无源单', value: 'N' }
|
],
|
tableDataDetail: [],
|
multipleSelection: [],
|
stockcodeArr: [], // 入库仓库数组
|
WorkShopArr: [], // 生产车间数组
|
|
xxx: ''
|
|
}
|
},
|
watch: {},
|
created() {
|
this.handleRequest()
|
},
|
mounted() {
|
window.addEventListener('resize', this.getHeight)
|
this.getHeight()
|
},
|
methods: {
|
handleRequest() {
|
this.getProductInHouseOrderSearch().then(res => {
|
if (res.code === '200') {
|
this.getWareHouseSelect()
|
this.getWorkShopSelect()
|
}
|
})
|
},
|
async getProductInHouseOrderSearch() {
|
let tempDate = this.form.orderdate
|
if (tempDate.length > 0) {
|
tempDate = handleDatetime(tempDate[0]) + '~' + handleDatetime(tempDate[1])
|
}
|
const data = {
|
erpordercode: this.form.erpordercode, // 订单编号
|
mesordercode: this.form.mesordercode, // 工单编号
|
partcode: this.form.partcode, // 产品编码
|
partname: this.form.partname, // 产品名称
|
partspec: this.form.partspec, // 规格型号
|
orderdate: tempDate// 工单日期
|
}
|
const res = await ProductInHouseOrderSearch(data)
|
// this.tableDataDetail = res.data
|
|
// 根据原单做过滤
|
this.tableDataDetail = res.data.filter(i => this.form.documentType === 'Y' ? i.m_po : !i.m_po)
|
|
this.$nextTick(() => {
|
this.$refs.tableDataRef.doLayout()
|
})
|
return { code: res.code }
|
},
|
// 获取仓库接口
|
async getWareHouseSelect() {
|
const { data: res } = await WareHouseSelect()
|
this.stockcodeArr = res
|
},
|
// 获取所属车间
|
async getWorkShopSelect() {
|
const { data: res } = await WorkShopSelect()
|
this.WorkShopArr = res
|
},
|
|
// 重置
|
reset() {
|
this.form.OrgCode = ''
|
this.form.OrgName = ''
|
this.form.OrgType = ''
|
this.form.UserName = ''
|
this.getOrganizationSearch()
|
},
|
|
handleSelectionChange(val) {
|
this.multipleSelection = val
|
},
|
|
// 获取页面高度
|
getHeight() {
|
this.$nextTick(() => {
|
this.mainHeight = window.innerHeight - 85
|
this.tableHeight = this.mainHeight - 255
|
this.$refs.tableDataRef.doLayout()
|
})
|
},
|
tableRowClassName({ row, rowIndex }) {
|
return 'custom-row'
|
}
|
}
|
}
|
</script>
|
|
<!--公共页面样式-->
|
<style lang="scss" scoped>
|
$main_color: #42b983;
|
::v-deep .el-range__icon {
|
line-height: 28px !important;
|
}
|
|
::v-deep .el-range-separator {
|
line-height: 28px !important;
|
}
|
|
::v-deep .el-range-input {
|
font-size: 14px;
|
}
|
|
::v-deep .el-range-separator {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
::v-deep .el-button--text {
|
font-size: 14px;
|
cursor: pointer;
|
}
|
|
.el-icon-share, .el-icon-delete, .el-icon-edit-outline {
|
color: $main_color;
|
cursor: pointer;
|
}
|
|
.el-icon-edit-outline {
|
margin-right: 15px;
|
}
|
|
::v-deep .el-button--primary, .el-button--default, .el-button--info {
|
height: 34px;
|
display: flex;
|
align-items: center;
|
padding: 0 15px;
|
}
|
|
::v-deep .el-button--primary {
|
//background-color: $main_color !important;
|
}
|
|
::v-deep .el-button--default {
|
background-color: #f8f8fa;
|
border: none;
|
}
|
|
::v-deep .el-input__inner {
|
height: 34px;
|
line-height: 34px;
|
//color: #a7a7a7;
|
}
|
|
::v-deep .el-dialog__body {
|
padding: 20px 100px !important;
|
}
|
|
::v-deep .dialogVisibleRoles .el-dialog__body {
|
padding: 20px 20px !important;
|
}
|
|
::v-deep .importPickerClass .el-dialog__body {
|
padding: 20px 20px !important;
|
}
|
|
::v-deep .el-dialog__footer {
|
display: flex;
|
justify-content: flex-end;
|
}
|
|
::v-deep .el-table .caret-wrapper {
|
transform: scale(0.8);
|
}
|
|
::v-deep .cell {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
::v-deep .el-table::before {
|
height: 0;
|
}
|
|
::v-deep .el-table__body-wrapper {
|
background-color: #f8f8fa;
|
}
|
|
::v-deep .el-table__body .el-table__row.hover-row td {
|
background-color: #eaecef;
|
}
|
|
::v-deep .el-form--inline .el-form-item__label {
|
color: #a7a7a7;
|
}
|
|
.body ::v-deep .el-divider {
|
border: 1px solid #eee;
|
width: 99%;
|
margin: 10px auto;
|
}
|
|
.body ::v-deep .el-form-item {
|
margin-bottom: 0;
|
}
|
|
.userDialogVisible ::v-deep .el-form-item {
|
margin-bottom: 0;
|
}
|
|
::v-deep .el-select__caret {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.tableFixed {
|
::v-deep .el-table__fixed-right {
|
height: 100% !important;
|
}
|
|
::v-deep .el-table__fixed {
|
height: 100% !important;
|
}
|
}
|
|
::v-deep .el-tabs__item {
|
padding-right: 0;
|
}
|
</style>
|
<style>
|
|
.el-table .custom-row {
|
background: #f8f8fa;
|
}
|
</style>
|
