260 lines
8.1 KiB
Vue
260 lines
8.1 KiB
Vue
<template>
|
||
<div class="inner-wrap">
|
||
<nav-bar title="工单管理"></nav-bar>
|
||
<div class="wrap2">
|
||
<section class="grid-wraper mgt15">
|
||
<div class="slide_new">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>工单（明细）号</th>
|
||
<th>工单（明细）状态</th>
|
||
<th>物料编码</th>
|
||
<th>物料名称</th>
|
||
<th>外径</th>
|
||
<th>壁厚</th>
|
||
<th>长度（mm）</th>
|
||
<th>是否刻字</th>
|
||
<th>是否套冒</th>
|
||
<th>是否裹膜</th>
|
||
<th>是否捆扎</th>
|
||
<th>是否贴标</th>
|
||
<th>上料口</th>
|
||
<th>下料数量</th>
|
||
<th>客户编码</th>
|
||
<th>客户名称</th>
|
||
<th>图标前刻字信息</th>
|
||
<th>刻字图标</th>
|
||
<th>图标后刻字信息</th>
|
||
<th>套冒颜色</th>
|
||
<th>捆扎每包数量</th>
|
||
<th>贴标模板</th>
|
||
<th>创建者</th>
|
||
<th>创建时间</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="(e, i) in dataList" :key="e.order_id">
|
||
<td>
|
||
<div class="td_detail" @click="showSec(e, i)">
|
||
<p>{{e.order_code}}</p>
|
||
<div v-show="e.pid === 0" class="iconfont table_dropdown_icon" :class="{'rotate180': e.childShow}"></div>
|
||
</div>
|
||
</td>
|
||
<td v-show="e.pid === 0">{{['就绪', '已确认', '已下发', '执行中', '下发工单暂停', '工单暂停', '下发强制完成', '强制完成', '自动完成', '取消'][Number(e.order_status)]}}</td>
|
||
<td v-show="e.pid !== 0">{{['就绪', '分拣中', '下发工单明细暂停', '工单明细暂停', '下发强制完成', '强制完成', '自动完成', '取消'][Number(e.order_status)]}}</td>
|
||
<td>{{e.material_code}}</td>
|
||
<td>{{e.material_name}}</td>
|
||
<td>{{e.outer_diameter}}</td>
|
||
<td>{{e.wall_thickness}}</td>
|
||
<td>{{e.length}}</td>
|
||
<td>{{e.is_lettering}}</td>
|
||
<td>{{e.is_risking}}</td>
|
||
<td>{{e.is_coating}}</td>
|
||
<td>{{e.is_strapping}}</td>
|
||
<td>{{e.is_labeling}}</td>
|
||
<td>{{['A侧', 'B侧', '双侧'][Number(e.feeding_mouth) - 1]}}</td>
|
||
<td>{{e.qty}}</td>
|
||
<td>{{e.cust_code}}</td>
|
||
<td>{{e.cust_name}}</td>
|
||
<td>{{e.lettering_message}}</td>
|
||
<td>{{e.lettering_icon}}</td>
|
||
<td>{{e.lettering_message2}}</td>
|
||
<td>{{['蓝色', '黑色', '红色', '白色', '黄色', '绿色', '粉色', '墨绿色', '紫色'][Number(e.color_type) - 1]}}</td>
|
||
<td>{{e.strap_number}}</td>
|
||
<td>{{e.labeling_template}}</td>
|
||
<td>{{e.create_by}}</td>
|
||
<td>{{e.create_time}}</td>
|
||
<td>
|
||
<button v-show="e.pid === 0 && e.order_status === '00'" class="button--primary button--cancle button_table_font" :disabled="disabled1" @click="toOrderOperation1(e)">开始分拣</button>
|
||
<button v-show="e.pid === 0" class="button--primary button--cancle button_table_font" :disabled="disabled2" @click="toOrderOperation2(e)">强制完成工单</button>
|
||
<button v-show="e.pid !== 0" class="button--primary button--cancle button_table_font" :disabled="disabled3" @click="toOrderOperation3(e)">手动完成</button>
|
||
<button v-show="e.pid !== 0" class="button--primary button--cancle button_table_font" :disabled="disabled4" @click="toOrderOperation4(e)">强制完成明细</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import NavBar from '@components/NavBar.vue'
|
||
import {handOrder, orderOperation} from '@config/getData2.js'
|
||
export default {
|
||
name: 'OrderManage',
|
||
components: {
|
||
NavBar
|
||
},
|
||
data () {
|
||
return {
|
||
interTime: this.$store.getters.setTime,
|
||
timer: null,
|
||
dataList: [],
|
||
disabled1: false,
|
||
disabled2: false,
|
||
disabled3: false,
|
||
disabled4: false
|
||
}
|
||
},
|
||
created () {
|
||
this.refresh()
|
||
},
|
||
beforeDestroy () {
|
||
clearInterval(this.timer)
|
||
this.timer = null
|
||
},
|
||
methods: {
|
||
refresh () {
|
||
this._handOrder()
|
||
this.timer = setInterval(() => {
|
||
this._handOrder()
|
||
}, this.interTime)
|
||
},
|
||
showSec (e, i) {
|
||
e.childShow = !e.childShow
|
||
if (e.childShow) {
|
||
if (e.children.length > 0) {
|
||
e.children.map((el, j) => {
|
||
let obj = Object.assign({}, e, el, {children: [], pid: j + 1})
|
||
this.dataList.splice(i + j + 1, 0, obj)
|
||
})
|
||
}
|
||
} else {
|
||
if (e.children.length > 0) {
|
||
this.dataList.splice(i + 1, e.children.length)
|
||
}
|
||
}
|
||
},
|
||
/** 查询分拣工单及明细（定时查询） */
|
||
async _handOrder () {
|
||
let res = await handOrder()
|
||
if (res.code === '1') {
|
||
this.dataList = [...res.result]
|
||
this.dataList.map(el => {
|
||
this.$set(el, 'pid', 0)
|
||
this.$set(el, 'childShow', false)
|
||
})
|
||
} else {
|
||
this.Dialog(res.desc)
|
||
}
|
||
},
|
||
/** 工单操作 */
|
||
async _orderOperation (type, uuid, ouuid) {
|
||
try {
|
||
let res = await orderOperation(type, uuid, ouuid)
|
||
if (res.code === '1') {
|
||
this.toast(res.desc)
|
||
clearInterval(this.timer)
|
||
this.timer = null
|
||
this.refresh()
|
||
} else {
|
||
this.Dialog(res.desc)
|
||
}
|
||
this.disabled1 = false
|
||
this.disabled2 = false
|
||
this.disabled3 = false
|
||
this.disabled4 = false
|
||
} catch (err) {
|
||
this.Dialog(err)
|
||
this.disabled1 = false
|
||
this.disabled2 = false
|
||
this.disabled3 = false
|
||
this.disabled4 = false
|
||
}
|
||
},
|
||
toOrderOperation1 (e) {
|
||
this.disabled1 = true
|
||
this._orderOperation('1', '', e.order_id)
|
||
},
|
||
toOrderOperation2 (e) {
|
||
this.disabled2 = true
|
||
this._orderOperation('2', '', e.order_id)
|
||
},
|
||
toOrderOperation3 (e) {
|
||
this.disabled3 = true
|
||
this._orderOperation('3', e.order_id, e.parent_order_id)
|
||
},
|
||
toOrderOperation4 (e) {
|
||
this.disabled4 = true
|
||
this._orderOperation('4', e.order_id, e.parent_order_id)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="stylus" scoped>
|
||
@import '~@style/mixin.styl'
|
||
.wrap2
|
||
_wh(100%, calc(100% - .4rem))
|
||
.wrap-filter-button
|
||
padding 0.05rem 0.2rem
|
||
margin 0
|
||
.wrap-button
|
||
margin 0.01rem auto
|
||
.grid-wraper
|
||
_wh(100%, 100%)
|
||
overflow-y scroll
|
||
box-sizing border-box
|
||
.slide_new
|
||
table
|
||
table-layout fixed
|
||
min-width 100%
|
||
border-collapse separate
|
||
border-spacing 0
|
||
border 0
|
||
td, th
|
||
box-sizing border-box
|
||
overflow hidden
|
||
white-space nowrap
|
||
text-overflow ellipsis
|
||
white-space nowrap
|
||
padding 0 .15rem
|
||
border-bottom .05rem solid #f5f5f5
|
||
&:first-child
|
||
position sticky
|
||
left 0
|
||
&:last-child
|
||
position sticky
|
||
right 0
|
||
thead
|
||
tr
|
||
th
|
||
position sticky
|
||
top 0
|
||
z-index 101
|
||
background #d7d7d7
|
||
_font(.13rem, .5rem, #696969, bold)
|
||
border-right .01rem dashed #fff
|
||
&:first-child
|
||
background #d7d7d7
|
||
z-index 102
|
||
&:last-child
|
||
border-right none
|
||
tbody
|
||
tr
|
||
td
|
||
_font(.13rem, .5rem, #323232)
|
||
background #fff
|
||
border-right .01rem dashed #d7d7d7
|
||
z-index 99
|
||
&:first-child
|
||
z-index 100
|
||
&:last-child
|
||
border-right none
|
||
.td_detail
|
||
_fj(flex-start)
|
||
.table_dropdown_icon
|
||
_wh(.2rem, .2rem)
|
||
_font(.13rem, .2rem, #c0c4cc,,center)
|
||
margin-left .1rem
|
||
&::before
|
||
content: '\e62b'
|
||
.rotate180
|
||
transform rotate(-180deg)
|
||
transition transform 0.3s
|
||
</style>
|