<template>
|
<el-dialog
|
width="75%"
|
title="工单排序"
|
top="5vh"
|
:visible.sync="innerVisible"
|
append-to-body
|
@close="$emit('update:currshowlist', false)"
|
:show="currshowlist"
|
class="part-dialog"
|
:close-on-click-modal="false"
|
>
|
<div slot="title">
|
<div style="display:flex;align-items:center;">
|
<div>工单排序</div>
|
<div style="color:red;">
|
(勾选目标工单，点击上移、下移按钮，进行排序)
|
</div>
|
</div>
|
</div>
|
<div>
|
<div
|
style="display:flex;height:23px;align-items:center;margin-bottom:5px;"
|
>
|
<div class="task-order-btn-group">
|
<div
|
:class="['task-order-btn', upShow ? 'upBtn' : 'disUpBtn']"
|
@click="moveParam('up', upShow)"
|
></div>
|
</div>
|
<div class="task-order-btn-group">
|
<div
|
:class="['task-order-btn', downShow ? 'downBtn' : 'disDownBtn']"
|
@click="moveParam('down', downShow)"
|
></div>
|
</div>
|
</div>
|
<div>
|
<el-table
|
:data="operationTaskOrders"
|
class="l-mes"
|
style="width: 100%;"
|
height="450px"
|
@current-change="handleCurrentChange"
|
highlight-current-row
|
ref="taskOrderTable"
|
>
|
<el-table-column align="center" width="55" label="单选">
|
<template slot-scope="scope">
|
<el-checkbox
|
class="task-order-table-single-checkbox"
|
v-model="scope.row.commonChecked"
|
disabled
|
></el-checkbox>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="optaskNo"
|
label="工单编号"
|
align="center"
|
show-overflow-tooltip
|
>
|
</el-table-column>
|
<el-table-column
|
prop="customerOrderNo"
|
label="销售订单"
|
align="center"
|
show-overflow-tooltip
|
>
|
</el-table-column>
|
<el-table-column prop="mpsNo" label="主计划号" align="center">
|
</el-table-column>
|
<el-table-column prop="moNo" label="车间订单编号" align="center">
|
</el-table-column>
|
<el-table-column
|
prop="partName"
|
label="零件"
|
align="center"
|
show-overflow-tooltip
|
>
|
</el-table-column>
|
<el-table-column prop="workCenter" label="工作中心" align="center">
|
</el-table-column>
|
<el-table-column prop="workstationName" label="工作站" align="center">
|
</el-table-column>
|
<el-table-column prop="operationName" label="工序" align="center">
|
</el-table-column>
|
<el-table-column
|
prop="plannedQuantity"
|
label="计划数量"
|
align="center"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="plannedStartDate"
|
label="计划开始时间"
|
align="center"
|
width="140px"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="plannedFinishDate"
|
label="计划完成时间"
|
align="center"
|
width="140px"
|
>
|
</el-table-column>
|
<el-table-column prop="unit" label="单位" align="center">
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="innerVisible = false">取 消</el-button>
|
<el-button
|
type="primary"
|
:disabled="isSubmit"
|
v-thinclick="`saveSelectRow`"
|
>确 定</el-button
|
>
|
</div>
|
</el-dialog>
|
</template>
|
<script>
|
import { batchUpdatePriority } from '@/api/plan/operationtask'
|
export default {
|
props: {
|
currshowlist: {
|
type: Boolean,
|
default: false
|
},
|
operationTasks: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
}
|
},
|
data() {
|
return {
|
innerVisible: false,
|
isSubmit: false,
|
operationTaskOrders: [],
|
currTaskOrderRow: null,
|
upShow: false,
|
downShow: false
|
}
|
},
|
methods: {
|
saveSelectRow() {
|
this.isSubmit = true
|
const orderedTasks = []
|
this.operationTaskOrders.forEach((item) => {
|
orderedTasks.push({
|
id: item.id,
|
priority: item.priority
|
})
|
})
|
batchUpdatePriority(orderedTasks)
|
.then((response) => {
|
const resData = response.data.data
|
const resCode = response.data.code
|
if (resCode === 0) {
|
this.innerVisible = false
|
this.$emit('refreshDataList')
|
this.$message.success('工单排序成功')
|
} else {
|
this.$message.error('工单排序失败')
|
}
|
this.isSubmit = false
|
})
|
.catch(() => {
|
this.isSubmit = false
|
})
|
},
|
handleCurrentChange(row) {
|
if (row != null) {
|
this.operationTaskOrders.forEach((item) => {
|
// 排他,每次选择时把其他选项都清除
|
if (item.id !== row.id) {
|
item.commonChecked = false
|
} else {
|
item.commonChecked = true
|
}
|
})
|
} else {
|
this.operationTaskOrders.forEach((item) => {
|
item.commonChecked = false
|
})
|
}
|
this.currTaskOrderRow = row
|
if (this.currTaskOrderRow != null) {
|
const index = this.operationTaskOrders.indexOf(this.currTaskOrderRow)
|
const arrLastIndex = this.operationTaskOrders.length - 1
|
if (index === 0) {
|
if (index === arrLastIndex) {
|
this.upShow = false
|
this.downShow = false
|
} else {
|
this.upShow = false
|
this.downShow = true
|
}
|
} else {
|
if (index === arrLastIndex) {
|
this.upShow = true
|
this.downShow = false
|
} else {
|
this.upShow = true
|
this.downShow = true
|
}
|
}
|
} else {
|
this.upShow = false
|
this.downShow = false
|
}
|
},
|
moveParam(moveType, isMove) {
|
if (isMove) {
|
const moveParamRow = this.currTaskOrderRow
|
const currIndex = this.operationTaskOrders.indexOf(
|
this.currTaskOrderRow
|
)
|
const copyOperationTaskOrders = this.operationTaskOrders
|
if (moveType === 'down') {
|
this.downGo(copyOperationTaskOrders, currIndex)
|
} else {
|
this.upGo(copyOperationTaskOrders, currIndex)
|
}
|
this.operationTaskOrders = []
|
this.$nextTick(() => {
|
this.operationTaskOrders = copyOperationTaskOrders
|
this.$refs.taskOrderTable.setCurrentRow(moveParamRow)
|
})
|
}
|
},
|
upGo(arr, index) {
|
const preOrder = arr[index - 1].priority
|
const nextOrder = arr[index].priority
|
arr[index] = arr.splice(index - 1, 1, arr[index])[0]
|
arr[index - 1].priority = preOrder
|
arr[index].priority = nextOrder
|
},
|
downGo(arr, index) {
|
const preOrder = arr[index].priority
|
const nextOrder = arr[index + 1].priority
|
arr[index] = arr.splice(index + 1, 1, arr[index])[0]
|
arr[index].priority = preOrder
|
arr[index + 1].priority = nextOrder
|
}
|
},
|
watch: {
|
currshowlist() {
|
this.innerVisible = this.currshowlist
|
this.operationTaskOrders = []
|
if (this.currshowlist) {
|
this.$nextTick(() => {
|
const tasks = []
|
this.operationTasks.forEach((item, index) => {
|
tasks.push({
|
id: item.id,
|
optaskNo: item.optaskNo,
|
customerOrderNo: item.customerOrderNo,
|
mpsNo: item.mpsNo,
|
moNo: item.moNo,
|
partName: item.partName,
|
workCenter: item.workCenter,
|
workstationName: item.workstationName,
|
operationName: item.operationName,
|
plannedQuantity: item.plannedQuantity,
|
plannedStartDate: item.plannedStartDate,
|
plannedFinishDate: item.plannedFinishDate,
|
unit: item.unit,
|
commonChecked: false,
|
priority: item.priority
|
})
|
})
|
tasks.sort((a, b) => {
|
return a.priority - b.priority
|
})
|
this.operationTaskOrders = tasks
|
})
|
}
|
}
|
}
|
}
|
</script>
|
<style>
|
.part-dialog .el-dialog__header {
|
padding: 10px 20px 10px;
|
}
|
.part-dialog .el-dialog__header .el-dialog__headerbtn {
|
top: 10px;
|
}
|
.part-dialog .el-dialog__body {
|
padding: 5px 20px;
|
}
|
|
.part-dialog .el-dialog__footer {
|
padding: 5px 20px 10px;
|
}
|
|
.part-dialog .el-dialog__body .avue-crud__pagination {
|
margin-top: 0px;
|
margin-bottom: 5px;
|
}
|
.task-order-btn-group {
|
margin-left: 5px;
|
width: 22px;
|
height: 23px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border: 1px solid #ddd;
|
border-radius: 3px;
|
background: #f2f2f2;
|
}
|
.task-order-btn {
|
width: 16px;
|
height: 16px;
|
}
|
.upBtn {
|
background-image: url('/img/upIcon16_dis.png');
|
cursor: pointer;
|
}
|
.downBtn {
|
background-image: url('/img/downIcon16_dis.png');
|
cursor: pointer;
|
}
|
.disDownBtn {
|
background-image: url('/img/downIcon16_dis.png');
|
background-position: 0 -16px;
|
cursor: not-allowed;
|
}
|
.disUpBtn {
|
background-image: url('/img/upIcon16_dis.png');
|
background-position: 0 -16px;
|
cursor: not-allowed;
|
}
|
.task-order-table-single-checkbox
|
.el-checkbox__input.is-disabled.is-checked
|
.el-checkbox__inner {
|
background-color: #006eff;
|
border-color: #006eff;
|
}
|
.task-order-table-single-checkbox
|
.el-checkbox__input.is-disabled
|
.el-checkbox__inner {
|
background-color: #ffffff;
|
cursor: pointer;
|
}
|
.task-order-table-single-checkbox .el-checkbox__inner::after {
|
border: 1px solid #fff !important;
|
border-left: 0 !important;
|
border-top: 0 !important;
|
cursor: pointer !important;
|
}
|
</style>
|
