<template>
|
<el-dialog
|
width="75%"
|
title="绑定产出批次"
|
top="5vh"
|
:visible.sync="innerVisible"
|
append-to-body
|
@close="$emit('update:currshowlist', false)"
|
:show="currshowlist"
|
class="part-dialog"
|
>
|
<el-table
|
ref="outPutBatchTable"
|
:data="outPutBatchList"
|
style="width: 100%"
|
@row-click="rowClick"
|
height="500px"
|
>
|
<el-table-column align="center" width="80">
|
<template slot="header" slot-scope="scope">
|
<el-button
|
type="text"
|
v-show="oriSelectedLength != currSelectedLength"
|
@click="selectAll()"
|
>全选</el-button
|
>
|
<el-button
|
type="text"
|
style="color:red;"
|
v-show="oriSelectedLength == currSelectedLength"
|
@click="cancelSelectAll()"
|
>取消全选</el-button
|
>
|
</template>
|
<template slot-scope="scope">
|
<el-checkbox
|
class="outbatch-table-single-checkbox"
|
v-model="scope.row.commonChecked"
|
disabled
|
></el-checkbox>
|
</template>
|
</el-table-column>
|
<el-table-column
|
type="index"
|
label="序号"
|
align="center"
|
width="50"
|
/>
|
<el-table-column
|
prop="moId"
|
align="center"
|
label="状态"
|
show-overflow-tooltip
|
>
|
<template slot-scope="scope">
|
<span :style="[scope.row.moId != null ? redStyles : greenStyles]">{{
|
scope.row.moId != null ? '不可绑' : '可绑'
|
}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="otcCustomerOrderNo"
|
align="center"
|
label="OTC订单号"
|
show-overflow-tooltip
|
>
|
<template slot-scope="scope">
|
<span>{{ scope.row.otcCustomerOrderNo }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="otcLineNo"
|
align="center"
|
label="OTC行项号"
|
show-overflow-tooltip
|
>
|
</el-table-column>
|
<el-table-column
|
prop="snNo"
|
align="center"
|
label="SN号"
|
show-overflow-tooltip
|
>
|
</el-table-column>
|
<el-table-column prop="qty" align="center" label="段长">
|
</el-table-column>
|
<el-table-column prop="selfNo" align="center" label="自编号">
|
</el-table-column>
|
<el-table-column prop="print" align="center" label="印字">
|
</el-table-column>
|
<el-table-column prop="direction" align="center" label="去向">
|
</el-table-column>
|
<el-table-column prop="section" align="center" label="区间">
|
</el-table-column>
|
<el-table-column prop="begining" align="center" label="始端">
|
</el-table-column>
|
<el-table-column prop="ending" align="center" label="终端">
|
</el-table-column>
|
<el-table-column prop="purpose" align="center" label="用途">
|
</el-table-column>
|
<el-table-column prop="endClassification" align="center" label="端别">
|
</el-table-column>
|
<el-table-column prop="company" align="center" label="公司名称">
|
</el-table-column>
|
<el-table-column prop="crccNumber" align="center" label="CRCC号">
|
</el-table-column>
|
<el-table-column
|
prop="finishedProductSpecification"
|
align="center"
|
label="成品规格型号"
|
>
|
</el-table-column>
|
<el-table-column prop="ymd" align="center" label="年月日">
|
</el-table-column>
|
</el-table>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="innerVisible = false">取 消</el-button>
|
<el-button type="primary" @click="dataFormSubmit">确定</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
<style>
|
/*自定义disabled状态下checkbox的样式*/
|
.outbatch-table-single-checkbox
|
.el-checkbox__input.is-disabled.is-checked
|
.el-checkbox__inner {
|
background-color: #006eff;
|
border-color: #006eff;
|
}
|
.outbatch-table-single-checkbox
|
.el-checkbox__input.is-disabled
|
.el-checkbox__inner {
|
background-color: #ffffff;
|
cursor: pointer;
|
}
|
.outbatch-table-single-checkbox .el-checkbox__inner::after {
|
border: 1px solid #fff !important;
|
border-left: 0 !important;
|
border-top: 0 !important;
|
cursor: pointer !important;
|
}
|
</style>
|
<script>
|
export default {
|
props: {
|
currshowlist: {
|
type: Boolean,
|
default: false
|
},
|
outPutBatchList: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
},
|
createOrderType: {
|
type: String,
|
default: null
|
}
|
},
|
data() {
|
return {
|
innerVisible: false,
|
qtyPlaned: 0,
|
redStyles: { color: 'red' },
|
greenStyles: { color: 'green' },
|
oriSelectedLength: 0
|
}
|
},
|
computed: {
|
currSelectedLength() {
|
let len = 0
|
for (let j = 0; j < this.outPutBatchList.length; j++) {
|
if (this.outPutBatchList[j].commonChecked) {
|
len++
|
}
|
}
|
return len
|
}
|
},
|
watch: {
|
currshowlist() {
|
this.innerVisible = this.currshowlist
|
this.qtyPlaned = 0
|
if (this.currshowlist) {
|
this.oriSelectedLength = 0
|
this.$nextTick(() => {
|
this.outPutBatchList.forEach((item) => {
|
if (item.commonChecked) {
|
this.qtyPlaned = this.qtyPlaned + Number(item.qty)
|
this.oriSelectedLength++
|
}
|
})
|
})
|
}
|
}
|
},
|
methods: {
|
selectAll() {
|
let qtyPlaned1 = 0
|
this.outPutBatchList.forEach((item) => {
|
if (item.moId == null) {
|
item.commonChecked = true
|
qtyPlaned1 = qtyPlaned1 + Number(item.qty)
|
}
|
})
|
this.qtyPlaned = Number(qtyPlaned1.toFixed(6))
|
},
|
cancelSelectAll() {
|
this.outPutBatchList.forEach((item) => {
|
if (item.moId == null) {
|
item.commonChecked = false
|
}
|
})
|
this.qtyPlaned = 0
|
},
|
rowClick(row) {
|
if (row.moId == null) {
|
row.commonChecked = !row.commonChecked
|
if (row.commonChecked) {
|
this.qtyPlaned = this.qtyPlaned + Number(row.qty)
|
} else {
|
this.qtyPlaned = this.qtyPlaned - Number(row.qty)
|
}
|
this.qtyPlaned = Number(this.qtyPlaned.toFixed(6))
|
}
|
},
|
dataFormSubmit() {
|
const selectedOutPutBatchList = []
|
let hasMore=false //是否还存在可绑定却未勾选的
|
this.outPutBatchList.forEach((item) => {
|
if (item.commonChecked) {
|
selectedOutPutBatchList.push(item)
|
}
|
if(!item.commonChecked&&!item.moId){
|
hasMore=true
|
}
|
})
|
if (selectedOutPutBatchList.length === 0) {
|
this.$message.error('请选择批次')
|
return
|
}
|
const selectedObj = {
|
outPutBatchList: selectedOutPutBatchList,
|
qtyPlaned: this.qtyPlaned,
|
createOrderType: this.createOrderType,
|
hasMore
|
}
|
this.$emit('returnBatchData', selectedObj)
|
this.innerVisible = false
|
}
|
}
|
}
|
</script>
|
