<template>
|
<div>
|
<div class="body" :style="{height:mainHeight+'px'}">
|
|
<!-- <div class="bodyTopButtonGroup">-->
|
<!-- <el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>-->
|
<!-- <el-button v-waves type="success" icon="el-icon-connection" @click="">派发</el-button>-->
|
<!-- </div>-->
|
|
<div class="bodyTopFormGroup" style="margin-top: 10px">
|
<el-form
|
ref="form"
|
:model="form"
|
label-width="100px"
|
inline
|
style="display: flex;"
|
>
|
<div class="elForm">
|
|
<el-form-item label="入库单号" style="display: flex;">
|
<el-input v-model="form.hbillno" placeholder="请输入" style="width: 200px" />
|
</el-form-item>
|
|
<el-form-item label="单据日期" style="display: flex;align-items: center">
|
<el-date-picker
|
v-model="form.hbdate"
|
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>
|
|
<el-form-item label="操作人员" style="display: flex;">
|
<el-input v-model="form.username" style="width: 200px" placeholder="请输入" />
|
</el-form-item>
|
|
<el-form-item label="操作时间" style="display: flex;align-items: center">
|
<el-date-picker
|
v-model="form.userdate"
|
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
|
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="getStorageRecordMainSearch()">查询</el-button>
|
<el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
|
</div>
|
|
</el-form>
|
<div
|
class="bodyTopFormExpand"
|
>
|
<!-- <svg-icon-->
|
<!-- v-show="mouseHoverType==='mouseout'"-->
|
<!-- style="cursor: pointer"-->
|
<!-- :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"-->
|
<!-- @mouseenter="mouseHoverType=$event.type"-->
|
<!-- />-->
|
<!-- <svg-icon-->
|
<!-- v-show="mouseHoverType==='mouseenter'"-->
|
<!-- style="cursor: pointer"-->
|
<!-- :icon-class="!isExpandForm?'doubleDown':'doubleUp'"-->
|
<!-- @click="isExpandForm=!isExpandForm"-->
|
<!-- @mouseout="mouseHoverType=$event.type"-->
|
<!-- />-->
|
</div>
|
</div>
|
|
<div class="elTableDiv">
|
<el-table
|
ref="tableDataRef"
|
class="tableFixed"
|
:data="tableData"
|
:height="isExpandForm?tableHeight:(tableHeight+80)+'px'"
|
border
|
:row-class-name="tableRowClassName"
|
:style="{width: 100+'%',height:isExpandForm?tableHeight:(tableHeight+80)+'px'}"
|
highlight-current-row
|
:header-cell-style="this.$headerCellStyle"
|
:cell-style="this.$cellStyle"
|
@sort-change="sortChange"
|
@row-click="rowClick"
|
>
|
<el-table-column
|
prop="rowNum"
|
width="50"
|
label="序号"
|
fixed
|
/>
|
|
<el-table-column
|
prop="hbillno"
|
label="入库单号"
|
show-tooltip-when-overflow
|
sortable="custom"
|
/>
|
<el-table-column
|
prop="hbilltype"
|
label="单据类型"
|
show-tooltip-when-overflow
|
sortable="custom"
|
/>
|
<el-table-column
|
prop="hbdate"
|
label="单据日期"
|
show-tooltip-when-overflow
|
sortable="custom"
|
/>
|
|
<el-table-column
|
prop="create_user"
|
show-tooltip-when-overflow
|
label="创建人员"
|
sortable="custom"
|
/>
|
<el-table-column
|
prop="create_date"
|
label="创建时间"
|
show-tooltip-when-overflow
|
sortable="custom"
|
/>
|
<el-table-column
|
label="操作"
|
width="160"
|
fixed="right"
|
>
|
<template slot-scope="{row}">
|
<div class="operationClass">
|
<el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">
|
<i class="el-icon-delete" :style="{color:$store.state.settings.theme}" @click.stop="del(row)" />
|
</el-tooltip>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<!--分页-->
|
<pagination
|
:total="total"
|
:page.sync="form.page"
|
:limit.sync="form.rows"
|
align="right"
|
layout="total,prev, pager, next,sizes,jumper"
|
popper-class="select_bottom"
|
@pagination="getStorageRecordMainSearch"
|
/>
|
|
<div class="elTableDiv">
|
<el-table
|
ref="tableDataRef2"
|
:data="tableDataDetail"
|
border
|
height="210px"
|
:row-class-name="tableRowClassName"
|
highlight-current-row
|
:header-cell-style="this.$headerCellStyle"
|
:cell-style="this.$cellStyle"
|
>
|
<el-table-column
|
width="50"
|
prop="rownumber"
|
label="序号"
|
fixed
|
/>
|
<el-table-column
|
prop="stockname"
|
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="salecode"
|
label="销售单号"
|
min-width="160"
|
show-tooltip-when-overflow
|
>
|
<template slot-scope="{row}">
|
<div v-if="row.salecode">{{ row.salecode }}</div>
|
<div v-else>/</div>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
prop="mo_no"
|
label="订单编号"
|
min-width="160"
|
show-tooltip-when-overflow
|
>
|
<template slot-scope="{row}">
|
<div v-if="row.mo_no">{{ row.mo_no }}</div>
|
<div v-else>/</div>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
prop="wocode"
|
label="工单编号"
|
min-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.partspec">{{ row.partspec }}</div>
|
<div v-else>/</div>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
prop="unitname"
|
label="单位名称"
|
width="160"
|
show-tooltip-when-overflow
|
>
|
<template slot-scope="{row}">
|
<div v-if="row.unitname">{{ row.unitname }}</div>
|
<div v-else>/</div>
|
</template>
|
</el-table-column>
|
|
<!-- <el-table-column-->
|
<!-- prop="wkshp_name"-->
|
<!-- label="部门名称"-->
|
<!-- width="160"-->
|
<!-- show-tooltip-when-overflow-->
|
<!-- >-->
|
<!-- <template slot-scope="{row}">-->
|
<!-- <div v-if="row.wkshp_name">{{ row.wkshp_name }}</div>-->
|
<!-- <div v-else>/</div>-->
|
<!-- </template>-->
|
<!-- </el-table-column>-->
|
|
<el-table-column
|
prop="stepname"
|
label="工序名称"
|
min-width="160"
|
show-tooltip-when-overflow
|
>
|
<template slot-scope="{row}">
|
<div v-if="row.stepname">{{ row.stepname }}</div>
|
<div v-else>/</div>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
prop="qty"
|
label="入库数量"
|
min-width="95"
|
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="130"-->
|
<!-- fixed="right"-->
|
<!-- >-->
|
<!-- <!– <template slot-scope="{row}">–>-->
|
<!-- <!– <el-input-number v-model="row.stinhouseqty" :min="0" :max="row.good_qty" size="small" />–>-->
|
<!-- <!– </template>–>-->
|
<!-- </el-table-column>-->
|
<!-- <el-table-column-->
|
<!-- label="操作"-->
|
<!-- width="120"-->
|
<!-- fixed="right"-->
|
<!-- >-->
|
<!-- <template slot-scope="{row}">-->
|
<!-- <div class="operationClass">-->
|
<!-- <el-tooltip v-del-tab-index class="item" effect="dark" content="SOP预览" placement="top">-->
|
<!-- <i-->
|
<!-- class="el-icon-files"-->
|
<!-- style="cursor: pointer;color:#42b983;margin-right: 15px"-->
|
<!-- />-->
|
<!-- </el-tooltip>-->
|
<!-- </div>-->
|
<!-- </template>-->
|
<!-- </el-table-column>-->
|
</el-table>
|
</div>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
import Pagination from '@/components/Pagination'
|
import waves from '@/directive/waves'
|
import {
|
StorageRecordDelete,
|
StorageRecordMainSearch,
|
StorageRecordSubSearch
|
} from '@/api/ReportManager'
|
import { handleDatetime, handleDatetime2 } from '@/utils/global'
|
|
export default {
|
name: 'WorkOrderList',
|
components: {
|
Pagination
|
},
|
directives: { waves },
|
data() {
|
return {
|
mouseHoverType: 'mouseout',
|
mouseHoverTypeDialog: 'mouseout',
|
isExpandForm: false,
|
isIpad: false,
|
mainHeight: 0,
|
tableHeight: 0,
|
username: '',
|
form: {
|
hbillno: '', // 入库单号
|
hbdate: '', // 单据日期
|
username: '', // 操作人员
|
userdate: '', // 操作时间
|
prop: 'hbillno', // 排序字段
|
order: 'desc', // 排序字段
|
page: 1, // 第几页
|
rows: 20 // 每页多少条
|
},
|
tableData: [],
|
total: 10,
|
tableDataDetail: []
|
}
|
},
|
|
activated() {
|
window.addEventListener('resize', this.getHeight)
|
this.getHeight()
|
},
|
created() {
|
this.getStorageRecordMainSearch()
|
},
|
mounted() {
|
window.addEventListener('resize', this.getHeight)
|
this.getHeight()
|
},
|
methods: {
|
async getStorageRecordMainSearch() {
|
let tempDate = this.form.hbdate
|
if (tempDate.length > 0) {
|
tempDate = handleDatetime(tempDate[0]) + '~' + handleDatetime(tempDate[1])
|
}
|
let tempDate2 = this.form.userdate
|
if (tempDate2.length > 0) {
|
tempDate2 = handleDatetime(tempDate2[0]) + '~' + handleDatetime(tempDate2[1])
|
}
|
|
const data = {
|
hbillno: '', // 入库单号
|
hbdate: tempDate, // 单据日期
|
username: '', // 操作人员
|
userdate: tempDate2, // 操作时间
|
prop: this.form.prop, // 排序字段
|
order: this.form.order, // 排序字段
|
page: this.form.page, // 第几页
|
rows: this.form.rows // 每页多少条
|
}
|
const res = await StorageRecordMainSearch(data)
|
if (res.code === '200') {
|
this.tableData = res.data
|
this.total = res.count
|
|
if (res.data.length > 0) {
|
await this.getStorageRecordSubSearch(res.data[0].hbillno)
|
} else {
|
this.tableDataDetail = []
|
}
|
}
|
},
|
async getStorageRecordSubSearch(hbillno) {
|
const { data: res } = await StorageRecordSubSearch({ hbillno })
|
this.tableDataDetail = res
|
console.log(123, this.tableDataDetail)
|
},
|
rowClick(row, event, column) {
|
this.getStorageRecordSubSearch(row.hbillno)
|
},
|
reset() {
|
this.form.hbillno = ''
|
this.form.hbdate = ''
|
this.form.username = ''
|
this.form.userdate = ''
|
this.getStorageRecordMainSearch()
|
},
|
async del(row) {
|
await this.getStorageRecordSubSearch(row.hbillno)
|
console.log(1111)
|
this.$confirm('是否确认删除?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
const data = []
|
this.tableDataDetail.forEach(i => {
|
data.push({
|
'hbillno': i.hbillno, // 入库单号
|
'inbarcode': i.inbarcode, // 入库条码
|
'wocode': i.wocode, // 工单号
|
'stepcode': i.step_code, // 工序编码
|
'style': i.style, // 报工类型(B/S)
|
'qty': i.qty.toString(), // 入库数量
|
'create_user': localStorage.getItem('username'), // 操作人员
|
'create_date': handleDatetime2(new Date())// --操作时间
|
})
|
})
|
// console.log(JSON.stringify(data))
|
StorageRecordDelete(data).then(res => {
|
if (res.code === '200') {
|
this.$message.success('删除成功!')
|
if (this.form.page > 1 && this.tableData.length === 1) {
|
this.form.page--
|
}
|
this.getStorageRecordMainSearch()
|
}
|
})
|
}).catch(() => {
|
this.$message.info('已取消删除')
|
})
|
},
|
|
// 排序改变时
|
sortChange({ column, prop, order }) {
|
if (order === 'descending') {
|
order = 'desc'
|
} else if (order === 'ascending') {
|
order = 'asc'
|
} else {
|
order = 'desc'
|
}
|
this.form.order = order
|
this.form.prop = prop
|
this.getStorageRecordSearch()
|
},
|
getHeight() {
|
this.$nextTick(() => {
|
this.mainHeight = window.innerHeight - 85
|
this.tableHeight = this.mainHeight - 450
|
|
this.$refs.tableDataRef.doLayout()
|
this.$refs.tableDataRef2.doLayout()
|
})
|
},
|
tableRowClassName({ row, rowIndex }) {
|
return 'custom-row'
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
$main_color: #42b983;
|
|
.stepSelectedValueClass {
|
::v-deep input {
|
//min-height: 34px !important;
|
height: 68px !important;
|
}
|
}
|
|
.dialogVisibleRoute {
|
.myCheckboxGroup {
|
display: flex;
|
flex-wrap: wrap;
|
|
.myCheckbox {
|
//border: 1px solid $main_color;
|
border: 1px solid #eee;
|
display: flex;
|
min-width: 100px;
|
padding: 10px;
|
margin: 10px 30px 0 0;
|
border-radius: 5px;
|
cursor: default;
|
|
.myCheckboxInput {
|
margin: 1px 5px 0 0;
|
cursor: pointer;
|
}
|
|
}
|
|
//.myCheckbox{
|
// border: 1px solid $main_color;
|
//}
|
|
input[type=checkbox] {
|
cursor: pointer;
|
position: relative;
|
width: 14px;
|
height: 14px;
|
font-size: 14px;
|
}
|
|
input[type=checkbox]::after {
|
position: absolute;
|
top: 0;
|
//color: rgb(130, 35, 35);
|
color: $main_color;
|
width: 14px;
|
height: 14px;
|
display: inline-block;
|
visibility: visible;
|
padding-left: 0px;
|
text-align: center;
|
content: ' ';
|
border-radius: 3px
|
}
|
|
input[type=checkbox]:checked::after {
|
//content: "✓";
|
content: "√";
|
color: #fff;
|
font-size: 12px;
|
font-weight: bold;
|
background-color: $main_color;
|
}
|
}
|
}
|
|
.dialogVisibleRoute {
|
::v-deep .el-dialog__body {
|
padding: 20px 20px !important;
|
}
|
}
|
|
.el-date-editor {
|
font-size: 14px;
|
}
|
|
::v-deep .el-dialog__body {
|
padding: 20px 100px !important;
|
}
|
|
.sop {
|
::v-deep .el-dialog__body {
|
padding: 50px 80px !important;
|
}
|
}
|
|
.dialogVisibleSearch ::v-deep .el-dialog__body {
|
padding: 20px 20px !important;
|
}
|
|
.dialogVisibleConfirmClass ::v-deep .el-dialog__body {
|
padding: 20px 20px !important;
|
}
|
|
::v-deep .el-table .caret-wrapper {
|
transform: scale(0.8);
|
}
|
|
::v-deep .el-button--text {
|
color: $main_color;
|
font-size: 14px;
|
cursor: pointer;
|
}
|
|
::v-deep .el-radio.is-bordered + .el-radio.is-bordered {
|
margin: 10px 30px 0px 0;
|
}
|
|
.body ::v-deep .el-form-item {
|
margin-bottom: 0;
|
}
|
|
.elForm ::v-deep .el-form-item {
|
margin-bottom: 0;
|
}
|
|
.elTableDiv {
|
::v-deep .el-radio__label {
|
display: none;
|
}
|
|
}
|
|
.el-table::before {
|
height: 0;
|
}
|
|
//.dialogVisibleConfirmClass >>>.el-table--border, .el-table--fit {
|
// border-bottom: 2px solid #000 ;
|
// //outline: #000 solid 2px !important;
|
//}
|
|
.tableDataPrint ::v-deep div.cell {
|
display: flex !important;
|
align-items: center !important;
|
justify-content: center !important;
|
}
|
|
.formContent {
|
width: 240px;
|
}
|
|
</style>
|
|
<style>
|
.formContent .el-form-item__label {
|
color: #000 !important;
|
}
|
</style>
|
<!--公共页面样式-->
|
<style lang="scss" scoped>
|
$main_color: #42b983;
|
|
::v-deep .el-range-input {
|
font-size: 14px !important;
|
}
|
|
::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--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;
|
}
|
|
.dateMini {
|
::v-deep .el-input__inner {
|
line-height: 34px;
|
height: 34px;
|
width: 200px;
|
display: flex;
|
font-size: 14px !important;
|
align-items: center !important;
|
}
|
|
::v-deep .el-input__prefix {
|
margin-top: -3px;
|
}
|
|
//::v-deep .el-range__icon{
|
// line-height: 28px;
|
//}
|
}
|
|
::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;
|
}
|
}
|
</style>
|
<style>
|
.el-table .custom-row {
|
background: #f8f8fa;
|
}
|
</style>
|
