<template>
|
<div>
|
<div class="body" :style="{height:mainHeight+'px'}">
|
|
<div class="headTitle">
|
浙江优步体育用品股份有限公司工序SOP
|
</div>
|
|
<div class="bodyTopFormGroup" style="margin-top: 0px;">
|
<el-form
|
ref="form"
|
:model="form"
|
label-width="100px"
|
inline
|
style="display: flex;"
|
>
|
<div class="elForm">
|
<el-form-item label="车间名称" style=" display: flex;">
|
<el-select
|
v-model="form.wkshopcode"
|
filterable
|
:popper-append-to-body="false"
|
style="width: 200px"
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="item in wkshopcodeArr"
|
:key="item.torg_code"
|
:label="item.torg_name"
|
:value="item.torg_code"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="工单状态" style=" display: flex;">
|
<el-select
|
v-model="form.mesorderstus"
|
:popper-append-to-body="false"
|
style="width: 200px"
|
placeholder="请选择"
|
filterable
|
>
|
<el-option
|
v-for="item in erporderstusArr"
|
:key="item.code"
|
:label="item.name"
|
:value="item.code"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="工单编号" style=" display: flex;">
|
<el-input v-model="form.mesordercode" placeholder="请输入" style="width: 200px" />
|
</el-form-item>
|
<el-form-item label="源单单号" style="display: flex;">
|
<el-input v-model="form.sourceorder" style="width: 200px" placeholder="请输入" />
|
</el-form-item>
|
<el-form-item label="销售订单" style="display: flex;">
|
<el-input v-model="form.saleordercode" style="width: 200px" placeholder="请输入" />
|
</el-form-item>
|
<!-- <el-form-item v-show="isExpandForm" label="单据类型" style=" display: flex;">-->
|
<!-- <el-select-->
|
<!-- v-model="form.ordertype"-->
|
<!-- :popper-append-to-body="false"-->
|
<!-- style="width: 200px"-->
|
<!-- placeholder="请选择"-->
|
<!-- >-->
|
<!-- <el-option-->
|
<!-- v-for="item in ordertypeArr"-->
|
<!-- :key="item.code"-->
|
<!-- :label="item.name"-->
|
<!-- :value="item.code"-->
|
<!-- />-->
|
<!-- </el-select>-->
|
<!-- </el-form-item>-->
|
<el-form-item v-show="isExpandForm" label="产品编码" style=" display: flex;">
|
<el-input v-model="form.partcode" style="width: 200px" placeholder="请输入" />
|
</el-form-item>
|
<el-form-item v-show="isExpandForm" label="产品名称" style=" display: flex;">
|
<el-input v-model="form.partname" style="width: 200px" placeholder="请输入" />
|
</el-form-item>
|
<el-form-item v-show="isExpandForm" label="产品规格" style=" display: flex;">
|
<el-input v-model="form.partspec" style="width: 200px" placeholder="请输入" />
|
</el-form-item>
|
<el-form-item v-show="isExpandForm" label="创建人员" style=" display: flex;">
|
<el-input v-model="form.creatuser" style="width: 200px" placeholder="请输入" />
|
</el-form-item>
|
<DateType
|
ref="DateTypeRef"
|
:is-expand-form="isExpandForm"
|
style="display:flex;justify-content: center;align-items: center;position: relative"
|
:datatype-list="datatypeList"
|
@DateTypeChange="DateTypeChange"
|
@cycleTimeChange="cycleTimeChange"
|
/>
|
</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="getMesOrderSearch">查询</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+40)+'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="80"
|
label="序号"
|
fixed
|
/>
|
<el-table-column
|
prop="wo_code"
|
label="工单编号"
|
show-tooltip-when-overflow
|
sortable="custom"
|
/>
|
<el-table-column
|
prop="m_po"
|
label="源单单号"
|
sortable="custom"
|
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="saleOrderCode"
|
label="销售订单"
|
sortable="custom"
|
show-tooltip-when-overflow
|
>
|
<template slot-scope="{row}">
|
<div v-if="row.saleOrderCode">{{ row.saleOrderCode }}</div>
|
<div v-else>/</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="partcode"
|
label="产品编码"
|
show-tooltip-when-overflow
|
sortable="custom"
|
/>
|
<el-table-column
|
prop="partname"
|
|
label="产品名称"
|
show-tooltip-when-overflow
|
sortable="custom"
|
/>
|
<el-table-column
|
prop="partspec"
|
label="产品规格"
|
sortable="custom"
|
|
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="route_name"
|
label="工艺路线"
|
sortable="custom"
|
show-tooltip-when-overflow
|
>
|
<template slot-scope="{row}">
|
<div v-if="row.route_name">{{ row.route_name }}</div>
|
<div v-else>/</div>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
prop="plan_qty"
|
label="工单数"
|
sortable="custom"
|
show-tooltip-when-overflow
|
/>
|
|
<el-table-column
|
prop="wkshp_name"
|
label="生产车间"
|
show-tooltip-when-overflow
|
sortable="custom"
|
>
|
<template slot-scope="{row}">
|
<div v-if="row.wkshp_name">{{ row.wkshp_name }}</div>
|
<div v-else>/</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="getMesOrderSearch"
|
/>
|
|
<div class="elTableDiv">
|
<el-table
|
ref="tableDataRef2"
|
:data="tableDataDetail"
|
border
|
height="310px"
|
:row-class-name="tableRowClassName"
|
highlight-current-row
|
:header-cell-style="this.$headerCellStyle"
|
:cell-style="this.$cellStyle"
|
>
|
<el-table-column
|
width="50"
|
type="index"
|
prop="序号"
|
fixed
|
/>
|
|
<!-- <el-table-column-->
|
<!-- prop="partcode"-->
|
<!-- label="产品编码"-->
|
<!-- width="150"-->
|
<!-- show-tooltip-when-overflow-->
|
<!-- />-->
|
<!-- <el-table-column-->
|
<!-- prop="partname"-->
|
<!-- label="产品名称"-->
|
<!-- width="200"-->
|
<!-- show-tooltip-when-overflow-->
|
<!-- />-->
|
|
<el-table-column
|
label="工序编码"
|
prop="step_code"
|
show-tooltip-when-overflow
|
width="150"
|
/>
|
<el-table-column
|
label="工序名称"
|
show-tooltip-when-overflow
|
prop="stepname"
|
width="150"
|
/>
|
|
<el-table-column
|
label="已生产数量"
|
show-tooltip-when-overflow
|
prop="produceq_qty"
|
/>
|
<el-table-column
|
label="合格数量"
|
show-tooltip-when-overflow
|
prop="good_qty"
|
/>
|
<el-table-column
|
label="不良数量"
|
show-tooltip-when-overflow
|
prop="ng_qty"
|
/>
|
<el-table-column
|
label="工废数量"
|
show-tooltip-when-overflow
|
prop="laborbad_qty"
|
/>
|
<el-table-column
|
label="料废数量"
|
show-tooltip-when-overflow
|
prop="materielbad_qty"
|
/>
|
<el-table-column
|
label="总可报数量"
|
show-tooltip-when-overflow
|
prop="plan_qty"
|
/>
|
<el-table-column
|
label="待产数量"
|
show-tooltip-when-overflow
|
prop="delive_qty"
|
/>
|
<el-table-column
|
label="sop预览"
|
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"
|
@click="view(row)"
|
/>
|
</el-tooltip>
|
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
|
<!-- sop-->
|
<el-dialog
|
title="浙江优步体育用品股份有限公司SOP预览"
|
:visible.sync="SopDialogVisible"
|
fullscreen
|
:close-on-click-modal="false"
|
@closed="handleSopClose"
|
@close="handleSopClose"
|
>
|
|
<el-form inline label-width="110px" style="display:flex">
|
|
<el-form-item label="工单号">
|
<el-input v-model="rowData.wo_code" disabled style="width: 200px" />
|
</el-form-item>
|
|
<el-form-item label="产品名称">
|
<el-input v-model="rowData.partname" disabled style="width: 200px" />
|
</el-form-item>
|
|
<el-form-item label="工序SOP">
|
<el-select
|
v-model="dialogSopForm.sop"
|
style="width:200px"
|
placeholder="请选择"
|
filterable
|
:popper-append-to-body="false"
|
@change="sopChange"
|
>
|
<el-option
|
v-for="item in sopArr"
|
:key="item.filepath"
|
:label="item.filename"
|
:value="item.filepath"
|
/>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="Sop版本">
|
<el-input v-model="dialogSopForm.v" disabled style="width: 200px" />
|
</el-form-item>
|
</el-form>
|
|
<div style="border: 5px solid #ccc;">
|
<iframe
|
:src="baseUrl+dialogSopForm.sop"
|
style="width: 100%;height: 80vh"
|
frameborder="0"
|
/>
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
<div class="footerButton">
|
<el-button v-waves style="width: 100px;" type="primary" @click="handleSopClose">返 回</el-button>
|
</div>
|
</span>
|
</el-dialog>
|
|
</div>
|
</template>
|
|
<script>
|
import Pagination from '@/components/Pagination'
|
import elDragDialog from '@/directive/el-drag-dialog'
|
import waves from '@/directive/waves'
|
import { PrentOrganizationNoCompany } from '@/api/GeneralBasicData'
|
import DateType from '@/components/DateType'
|
import {
|
SopSearchMesOrderProcessSopSearch,
|
SopSearchMesOrderSearch,
|
SopSearchUpdateMesOrderStepSearch
|
} from '@/api/SopManager'
|
|
export default {
|
name: 'WorkOrderList',
|
components: {
|
Pagination, DateType
|
},
|
directives: { elDragDialog, waves },
|
data() {
|
return {
|
mouseHoverType: 'mouseout',
|
mouseHoverTypeDialog: 'mouseout',
|
isExpandForm: false,
|
mainHeight: 0,
|
tableHeight: 0,
|
form: {
|
wkshopcode: '', // 车间编码
|
mesorderstus: '', // 工单状态码
|
mesordercode: '', // 工单编号
|
partcode: '', // 产品编码
|
ordertype: '', // ordertype
|
sourceorder: '', // 源单单号
|
saleordercode: '', // 销售订单
|
partname: '', // 产品名称
|
partspec: '', // 产品规格
|
creatuser: '', // 创建人员
|
// createdate: '', // 创建时间
|
datatype: 'ED', // 日期类型(计划开工(PS)、计划完工(PE)、预计交付(ED)、创建日期(CT))
|
timeValue: [], // 查询日期
|
prop: 'lm_date', // 排序字段
|
order: 'desc', // 排序字段
|
page: 1, // 第几页
|
rows: 20 // 每页多少条
|
},
|
erporderstusArr: [
|
{ code: 'NEW', name: '新工单' },
|
// { code: 'CREATING', name: '执行中' },
|
// { code: 'CREATED', name: '已关闭' }
|
{ code: 'ALLO', name: '已派发' },
|
{ code: 'START', name: '开工' },
|
{ code: 'CLOSED', name: '完工' }
|
// { code: 'NOSCHED', name: '待排程' },
|
// { code: 'SCHED', name: '已排程' }
|
],
|
wkshopcodeArr: [],
|
total: 10,
|
tableData: [],
|
ordertypeArr: [// 工单类型
|
{ code: 'PO', name: '标准工单' },
|
{ code: 'FO', name: '报废补单' }
|
],
|
datatypeList: [
|
{ code: 'PS', name: '预计开工日期' },
|
{ code: 'PE', name: '预计完工日期' },
|
{ code: 'ED', name: '预计交付日期' },
|
{ code: 'CT', name: '工单创建日期' }
|
],
|
tableDataDetail: [],
|
rowData: {}, // 行点击事件存储值
|
SopDialogVisible: false,
|
dialogSopForm: { // 设备SOP表单
|
sop: '',
|
v: ''
|
},
|
sopArr: [],
|
baseUrl: process.env.VUE_APP_BASE_API_FILE
|
|
}
|
},
|
activated() {
|
window.addEventListener('resize', this.getHeight)
|
|
this.getHeight()
|
this.handleRequest()
|
},
|
created() {
|
this.handleRequest()
|
},
|
mounted() {
|
window.addEventListener('resize', this.getHeight)
|
this.getHeight()
|
},
|
methods: {
|
// 弹出框关闭
|
handleSopClose() {
|
this.SopDialogVisible = false
|
this.dialogSopForm = { // 设备SOP表单
|
sop: '',
|
v: ''
|
}
|
},
|
sopChange(val) {
|
this.dialogSopForm.v = this.sopArr.find(i => i.filepath === val).version
|
},
|
async view(row) {
|
const data = {
|
materielcode: this.rowData.partcode,
|
routecode: this.rowData.route_code,
|
stepcode: row.step_code
|
}
|
const { data: res } = await SopSearchMesOrderProcessSopSearch(data)
|
console.log(res)
|
if (res.length === 0) {
|
return this.$message.error('此工序未上传sop，请先上传!')
|
}
|
this.sopArr = res
|
this.dialogSopForm.sop = res[0].filepath
|
this.dialogSopForm.v = res[0].version
|
this.SopDialogVisible = true
|
},
|
|
DateTypeChange(value) {
|
this.form.datatype = value
|
},
|
cycleTimeChange(val) {
|
this.form.timeValue = val
|
},
|
tableRowClassName({ row, rowIndex }) {
|
return 'custom-row'
|
},
|
handleRequest() {
|
this.getMesOrderSearch().then(res => {
|
if (res.code === '200') {
|
this.getPrentOrganizationNoCompany()
|
}
|
})
|
},
|
async getPrentOrganizationNoCompany() {
|
const { data: res } = await PrentOrganizationNoCompany()
|
this.wkshopcodeArr = res
|
},
|
async getMesOrderSearch() {
|
// let tempDate = this.form.createdate
|
// if (tempDate.length > 0) {
|
// tempDate = handleDatetime(tempDate[0]) + '~' + handleDatetime(tempDate[1])
|
// }
|
|
const data = {
|
wkshopcode: this.form.wkshopcode,
|
mesorderstus: this.form.mesorderstus, // 工单状态码
|
mesordercode: this.form.mesordercode, // 工单编号
|
partcode: this.form.partcode, // 产品编码
|
partname: this.form.partname, // 产品名称
|
partspec: this.form.partspec, // 产品规格
|
creatuser: this.form.creatuser, // 创建人员
|
sourceorder: this.form.sourceorder, // 源单单号
|
saleordercode: this.form.saleordercode, // 销售订单
|
ordertype: this.form.ordertype, // 单据类型
|
datatype: this.form.datatype,
|
searchdate: this.form.timeValue.join('~'),
|
// createdate: this.form.createdate.toString().length > 0 ? handleDatetime(this.form.createdate) : '', // 创建时间
|
prop: this.form.prop, // 排序字段
|
order: this.form.order, // 排序字段
|
page: this.form.page, // 第几页
|
rows: this.form.rows // 每页多少条
|
}
|
const res = await SopSearchMesOrderSearch(data)
|
this.tableData = res.data
|
this.total = res.count
|
|
// this.form.createdate = tempDate
|
return { code: res.code }
|
},
|
// 排序改变时
|
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.getMesOrderSearch()
|
},
|
// 重置
|
reset(val) {
|
this.form.wkshopcode = ''
|
this.form.mesorderstus = ''
|
this.form.mesordercode = ''
|
this.form.partcode = ''
|
this.form.partname = ''
|
this.form.partspec = ''
|
this.form.paydate = ''
|
this.form.creatuser = ''
|
this.form.sourceorder = ''
|
this.form.ordertype = ''
|
// this.form.createdate = ''
|
|
this.form.timeValue = []
|
this.cycleTime = null
|
this.$refs.DateTypeRef.clearValue()
|
|
this.getMesOrderSearch()
|
},
|
|
// 行点击事件
|
async rowClick(row, event, column) {
|
this.rowData = row
|
const data = {
|
sourceid: row.sourceid,
|
sourcewo: row.m_po,
|
wocode: row.wo_code,
|
data_sources: row.data_sources
|
}
|
const { data: res } = await SopSearchUpdateMesOrderStepSearch(data)
|
this.tableDataDetail = res.stepdata
|
},
|
// 获取页面高度
|
getHeight() {
|
this.$nextTick(() => {
|
this.mainHeight = window.innerHeight
|
this.tableHeight = this.mainHeight - 600
|
this.$refs.tableDataRef.doLayout()
|
this.$refs.tableDataRef2.doLayout()
|
})
|
}
|
}
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
.footerButton{
|
position: absolute;
|
bottom: 15px;
|
margin-left: calc(50% - 50px);
|
}
|
|
::v-deep .el-dialog__body{
|
padding: 0 20px !important;
|
}
|
|
.headTitle{
|
height: 70px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 36px;
|
font-weight: bolder;
|
font-family: Arial;
|
//font-family: "Avenir", Helvetica, Arial, sans-serif;
|
|
}
|
</style>
|
