485 lines
17 KiB
Vue
485 lines
17 KiB
Vue
<template>
|
||
<div class="container">
|
||
<button class="btn-close" :disabled="disabled" @click="toExit" />
|
||
<div class="m-content">
|
||
<p>{{ screenData.device_name }}</p>
|
||
</div>
|
||
<div class="button-wraper" :style="screenData.region_points.length <= 2 ? 'justify-content: center' : 'justify-content: space-between'">
|
||
<div v-for="(e, i) in screenData.region_points" :key="i" class="button-item" :class="{'button-item_3': screenData.region_points.length <= 3}">
|
||
<p v-if="e.type === '1'" class="point_name">{{ e.name }}</p>
|
||
<p v-if="e.type === '0'" class="point_name point_name_btn" @click="showPop('IN', e)">{{ e.name }}</p>
|
||
<p class="point_value">{{ e.device_code }}</p>
|
||
<div v-if="e.type === '1'" class="button" @click="showPop('CONTAINER', e)">呼叫空框</div>
|
||
<div v-if="e.type === '1'" class="button" @click="showPop('SCANER', e)">完成入库</div>
|
||
<div v-if="e.type === '0'" class="button" @click="showPop('PALLET', e)">当前托盘</div>
|
||
<div v-if="e.type === '0'" class="button" @click="showPop('BACK', e)">回库</div>
|
||
</div>
|
||
</div>
|
||
<div v-show="type === 'IN'" class="pop-wraper pop-wraper-2" :class="{'popshow': show, 'pophide': !show}">
|
||
<div class="zd-row pop-grid">
|
||
<div class="pop-grid_l">
|
||
<div class="pop-grid_t">
|
||
<el-table
|
||
:data="popList"
|
||
height="100%"
|
||
@current-change="handleCurrentChange"
|
||
>
|
||
<el-table-column
|
||
prop="vehicle_code"
|
||
label="载具号"
|
||
/>
|
||
<el-table-column
|
||
prop="order_code"
|
||
label="订单号"
|
||
/>
|
||
<el-table-column
|
||
prop="region_code"
|
||
label="工序"
|
||
/>
|
||
<el-table-column
|
||
prop="material_qty"
|
||
label="物料数量"
|
||
/>
|
||
<el-table-column
|
||
prop="due_date"
|
||
label="交期时间"
|
||
/>
|
||
<el-table-column
|
||
prop="priority"
|
||
label="优先级"
|
||
/>
|
||
</el-table>
|
||
</div>
|
||
<div class="pop-grid_t">
|
||
<el-table
|
||
:data="popSecList"
|
||
height="100%"
|
||
>
|
||
<el-table-column
|
||
prop="order_code"
|
||
label="订单号"
|
||
/>
|
||
<el-table-column
|
||
prop="due_date"
|
||
label="交期时间"
|
||
/>
|
||
<el-table-column
|
||
prop="material_code"
|
||
label="零件号"
|
||
/>
|
||
<el-table-column
|
||
prop="material_qty"
|
||
label="物料数量"
|
||
/>
|
||
<el-table-column
|
||
prop="region_code"
|
||
label="工序"
|
||
/>
|
||
<el-table-column
|
||
prop="priority"
|
||
label="优先级"
|
||
/>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
<div class="pop-grid_r">
|
||
<img v-if="imgSrc !== ''" class="img_pallet" :src="imgSrc" alt="">
|
||
<!-- <img class="img_pallet" src="../../../assets/images/screen_bg.jpg" alt=""> -->
|
||
</div>
|
||
</div>
|
||
<el-row type="flex" justify="space-around">
|
||
<el-col :span="4">
|
||
<button class="login_button login_button_dis" @click="show = false">取消</button>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<button class="login_button" :disabled="disabled" @click="toSure">叫料</button>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<div v-show="type === 'CONTAINER'" class="pop-wraper pop-wraper-1" :class="{'popshow': show, 'pophide': !show}">
|
||
<div class="pop-h1">{{ popData.title }}</div>
|
||
<div class="filter-items">
|
||
<el-row class="filter-wraper" type="flex" justify="space-between">
|
||
<el-col :span="5" class="p-label">托盘类型</el-col>
|
||
<el-col :span="18" class="select-wraper">
|
||
<el-select v-model="value" :popper-append-to-body="false" placeholder="请选择">
|
||
<el-option
|
||
v-for="item in options"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
class="option-wraper"
|
||
/>
|
||
</el-select>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<el-row type="flex" justify="space-around">
|
||
<el-col :span="6">
|
||
<button class="login_button login_button_dis" @click="show = false">取消</button>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<button class="login_button" @click="toSure">确定</button>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<div v-show="type === 'SCANER'" class="pop-wraper" :class="{'popshow': show, 'pophide': !show}">
|
||
<el-row class="filter-wraper" type="flex" justify="space-between">
|
||
<el-col :span="2" class="p-label">目的地</el-col>
|
||
<el-col :span="8" class="select-wraper">
|
||
<el-select v-model="value1" placeholder="请选择">
|
||
<el-option
|
||
v-for="item in options1"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
class="option-wraper"
|
||
/>
|
||
</el-select>
|
||
</el-col>
|
||
<el-col :span="2" class="p-label" />
|
||
<el-col :span="2" class="p-label">载具号</el-col>
|
||
<el-col :span="8" class="select-wraper">
|
||
<input v-model="vcode" type="text" class="set-input">
|
||
</el-col>
|
||
</el-row>
|
||
<div class="pop-grid pop-grid_1">
|
||
<el-table
|
||
:data="popList"
|
||
height="100%"
|
||
>
|
||
<el-table-column
|
||
label="订单号"
|
||
>
|
||
<template slot-scope="scope">
|
||
<div class="select-wraper">
|
||
<el-select
|
||
v-model="scope.row.order_code"
|
||
filterable
|
||
allow-create
|
||
default-first-option
|
||
placeholder="请选择"
|
||
>
|
||
<el-option
|
||
v-for="item in options2"
|
||
:key="item.order_code"
|
||
:label="item.order_code"
|
||
:value="item.order_code"
|
||
class="option-wraper"
|
||
/>
|
||
</el-select>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="物料号"
|
||
>
|
||
<template slot-scope="scope">
|
||
<input v-model="scope.row.material_code" type="text" class="set-input">
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="数量"
|
||
>
|
||
<template slot-scope="scope">
|
||
<input v-model="scope.row.material_qty" type="text" class="set-input">
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="操作"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-button circle type="primary" icon="el-icon-plus" @click.native.prevent="addRow(scope.$index, popList)" />
|
||
<el-button circle type="primary" icon="el-icon-minus" @click.native.prevent="delRow(scope.$index, popList)" />
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<el-row type="flex" justify="space-around">
|
||
<el-col :span="4">
|
||
<button class="login_button login_button_dis" @click="show = false">取消</button>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<button class="login_button" :disabled="disabled" @click="toSure">确定</button>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<div v-show="type === 'BACK'" class="pop-wraper" :class="{'popshow': show, 'pophide': !show}">
|
||
<div class="zd-row pop-grid">
|
||
<div class="pop-grid_r">
|
||
<img v-if="imgSrc !== ''" class="img_pallet" :src="imgSrc" alt="">
|
||
</div>
|
||
<div class="pop-grid_l">
|
||
<el-table
|
||
:data="popList"
|
||
height="100%"
|
||
>
|
||
<el-table-column
|
||
prop="order_code"
|
||
label="订单号"
|
||
/>
|
||
<el-table-column
|
||
prop="material_id"
|
||
label="零件号"
|
||
/>
|
||
<el-table-column
|
||
label="数量"
|
||
>
|
||
<template slot-scope="scope">
|
||
<input v-model="scope.row.material_qty" type="number" class="set-input">
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
<el-row type="flex" justify="space-around">
|
||
<el-col :span="4">
|
||
<button class="login_button login_button_dis" @click="show = false">取消</button>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<button class="login_button" @click="toSure">确定</button>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<div v-show="type === 'PALLET'" class="pop-wraper" :class="{'popshow': show, 'pophide': !show}">
|
||
<div class="zd-row pop-grid">
|
||
<div class="pop-grid_l">
|
||
<img v-if="imgSrc !== ''" class="img_pallet" :src="imgSrc" alt="">
|
||
</div>
|
||
<div class="pop-grid_r">
|
||
<el-table
|
||
:data="popList"
|
||
height="100%"
|
||
@current-change="handleCurrentChange1"
|
||
>
|
||
<el-table-column
|
||
prop="material_id"
|
||
label="图纸查看"
|
||
/>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
<el-row type="flex" justify="space-around">
|
||
<el-col :span="4">
|
||
<button class="login_button login_button_dis" @click="show = false">取消</button>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<button class="login_button" @click="toSure">确定</button>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<div v-show="show" class="modal" />
|
||
<div v-show="alertShow" class="pop-wraper pop-wraper-1" :class="{'popshow': alertShow, 'pophide': !alertShow}" style="z-index: 22;">
|
||
<div class="pop-h1">提示</div>
|
||
<div class="filter-items"><p class="p-text">是否确认回库？</p></div>
|
||
<el-row type="flex" justify="space-around">
|
||
<el-col :span="6">
|
||
<button class="login_button login_button_dis" @click="alertShow = false">取消</button>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<button class="login_button" @click="toSure1">确定</button>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<div v-show="alertShow" class="modal" style="z-index: 21;" />
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import crudProduceScreen from './produceScreen'
|
||
// import crudProduceScreen from './mork'
|
||
export default {
|
||
data() {
|
||
return {
|
||
show: false,
|
||
type: null,
|
||
popData: {},
|
||
popList: [],
|
||
popSecList: [],
|
||
currentRow: null,
|
||
value: '',
|
||
options: [{ value: 'G01', label: 'G01' }, { value: 'R01', label: 'R01' }, { value: 'R02', label: 'R02' }, { value: 'R03', label: 'R03' }, { value: 'S04', label: 'S04' }, { value: 'S06', label: 'S06' }],
|
||
value1: '',
|
||
options1: [{ value: '1', label: '货架' }, { value: '2', label: '内部' }, { value: '3', label: '外协' }, { value: '4', label: '内部过道' }],
|
||
value2: '',
|
||
options2: [],
|
||
vcode: '',
|
||
disabled: false,
|
||
imgSrc: '',
|
||
alertShow: false
|
||
}
|
||
},
|
||
computed: {
|
||
screenData() {
|
||
let res = {}
|
||
if (this.$store.state.produceScreen.screenData !== '') {
|
||
res = JSON.parse(this.$store.state.produceScreen.screenData)
|
||
}
|
||
return res
|
||
}
|
||
},
|
||
methods: {
|
||
toExit() {
|
||
this.disabled = true
|
||
crudProduceScreen.loginOut({ username: this.screenData.username, device_code: this.screenData.device_code }).then(res => {
|
||
this.disabled = false
|
||
localStorage.removeItem('screenData')
|
||
this.$router.push('/produceScreen/setup')
|
||
}).catch(() => {
|
||
this.disabled = false
|
||
})
|
||
},
|
||
showPop(type, e) {
|
||
this.imgSrc = ''
|
||
this.popData = {}
|
||
this.popList = []
|
||
this.popSecList = []
|
||
this.currentRow = null
|
||
this.value = ''
|
||
this.value1 = ''
|
||
this.vcode = ''
|
||
this.type = type
|
||
this.popData = e
|
||
if (type === 'IN') {
|
||
crudProduceScreen.regionOrder(this.screenData.device_code, this.popData.device_code).then(res => {
|
||
this.popList = [...res.content]
|
||
this.show = true
|
||
})
|
||
} else if (type === 'CONTAINER') {
|
||
this.popData.title = '选择托盘类型'
|
||
this.emptyObj = {}
|
||
this.val1 = ''
|
||
this.show = true
|
||
this.emptyObj.device_code = e.name
|
||
} else if (type === 'SCANER') {
|
||
const arr = []
|
||
if (JSON.stringify(this.screenData) !== '{}') {
|
||
this.screenData.region_points.map(el => {
|
||
if (el.type === '0') {
|
||
arr.push(el.device_code)
|
||
}
|
||
})
|
||
}
|
||
crudProduceScreen.fabOrders({ deviceCodes: arr }).then(res => {
|
||
this.options2 = [...res]
|
||
})
|
||
crudProduceScreen.getPointVehicle({ device_code: this.popData.device_code }).then(res => {
|
||
this.vcode = res
|
||
})
|
||
this.popList.push({ order_code: '', material_qty: '', material_code: '' })
|
||
this.show = true
|
||
} else if (type === 'BACK') {
|
||
const arr = []
|
||
arr.push(this.popData.device_code)
|
||
crudProduceScreen.fabOrders({ deviceCodes: arr }).then(res => {
|
||
this.imgSrc = '//images.weserv.nl/?url=' + res.path
|
||
this.popList = [...res.material]
|
||
this.popList.map(el => {
|
||
this.$set(el, 'material_qty', 0)
|
||
})
|
||
this.show = true
|
||
})
|
||
} else if (type === 'PALLET') {
|
||
crudProduceScreen.selectMaterialAndJpg(this.popData.device_code).then(res => {
|
||
this.popList = [...res.materialList]
|
||
})
|
||
this.show = true
|
||
}
|
||
},
|
||
handleCurrentChange(val) {
|
||
if (val) {
|
||
this.currentRow = val
|
||
this.imgSrc = '//images.weserv.nl/?url=' + val.vehicle_path
|
||
crudProduceScreen.fabMaterial({ vehicle_code: this.currentRow.vehicle_code }).then(res => {
|
||
this.popSecList = [...res]
|
||
})
|
||
}
|
||
},
|
||
toSure() {
|
||
this.disabled = true
|
||
if (this.type === 'IN') {
|
||
if (this.popSecList.length === 0) {
|
||
this.disabled = false
|
||
return
|
||
}
|
||
crudProduceScreen.callMater({ mater: this.popSecList, device_code: this.popData.device_code, vehicle_code: this.currentRow.vehicle_code }).then(res => {
|
||
this.disabled = false
|
||
this.$message(res.msg)
|
||
}).catch(() => {
|
||
this.disabled = false
|
||
})
|
||
} else if (this.type === 'CONTAINER') {
|
||
if (!this.value) {
|
||
this.disabled = false
|
||
this.$message.error('请选择托盘类型！')
|
||
return
|
||
}
|
||
crudProduceScreen.callEmp({ vehicle_type: this.value, device_code: this.popData.device_code }).then(res => {
|
||
this.disabled = false
|
||
this.$message(res.msg)
|
||
}).catch(() => {
|
||
this.disabled = false
|
||
})
|
||
} else if (this.type === 'SCANER') {
|
||
if (!this.vcode) {
|
||
this.disabled = false
|
||
this.$message.error('请填写载具号')
|
||
return
|
||
}
|
||
if (!this.value1) {
|
||
this.disabled = false
|
||
this.$message.error('请选择目的地')
|
||
return
|
||
}
|
||
const arr = []
|
||
this.popList.map(el => {
|
||
if (el.order_code !== '' && el.material_qty !== '' && el.material_code !== '') {
|
||
arr.push(el)
|
||
}
|
||
})
|
||
crudProduceScreen.sendMater({ device_code: this.popData.device_code, mater: arr, point_code: this.value1, vehicle_code: this.vcode }).then(res => {
|
||
this.disabled = false
|
||
this.$message(res.msg)
|
||
}).catch(() => {
|
||
this.disabled = false
|
||
})
|
||
} else if (this.type === 'BACK') {
|
||
this.disabled = false
|
||
this.alertShow = true
|
||
return
|
||
}
|
||
this.show = false
|
||
},
|
||
toSure1() {
|
||
this.alertShow = false
|
||
this.show = false
|
||
crudProduceScreen.sendVehicle({ mater: this.popList, device_code: this.popData.device_code }).then(res => {
|
||
this.$message(res.msg)
|
||
}).catch(() => {})
|
||
},
|
||
addRow(index, rows) {
|
||
rows.splice(index, 0, { order_code: '', material_qty: '', material_code: '' })
|
||
},
|
||
delRow(index, rows) {
|
||
rows.splice(index, 1)
|
||
},
|
||
handleCurrentChange1(val) {
|
||
if (val) {
|
||
this.imgSrc = '//images.weserv.nl/?url=' + val.material_path
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||
@import './style.scss';
|
||
>>>.el-message-box {
|
||
background: rgba(45,88,184,0.1);
|
||
border: 1px solid #4980BD;
|
||
}
|
||
.custom-message-box {
|
||
background-color: #f56c6c;
|
||
}
|
||
</style>
|