396 lines
14 KiB
Vue
396 lines
14 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<div>
|
|
<el-form :model="search" inline>
|
|
<el-form-item label="年">
|
|
<el-input v-model="search.year" placeholder="输入年份"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="周">
|
|
<el-input v-model="search.week" placeholder="输入周"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="日期" style="float: right">
|
|
<el-button-group>
|
|
<el-button type="primary" size="mini" @click="searchDate(1)">周一</el-button>
|
|
<el-button type="primary" size="mini" @click="searchDate(2)">周二</el-button>
|
|
<el-button type="primary" size="mini" @click="searchDate(3)">周三</el-button>
|
|
<el-button type="primary" size="mini" @click="searchDate(4)">周四</el-button>
|
|
<el-button type="primary" size="mini" @click="searchDate(5)">周五</el-button>
|
|
<el-button type="primary" size="mini" @click="searchDate(6)">周六</el-button>
|
|
<el-button type="primary" size="mini" @click="searchDate(7)">周日</el-button>
|
|
</el-button-group>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<el-divider></el-divider>
|
|
<el-tabs type="border-card">
|
|
<el-tab-pane label="已经排程" class="mytable">
|
|
<el-button type="primary" size="mini" v-if="disabled_d" @click="setJY">重新排序</el-button>
|
|
<el-button type="success" size="mini" v-if="!disabled_d" @click="SaveDragAndDropResults">保存排序结果</el-button>
|
|
<div class="table-responsive">
|
|
<table class="table table-striped table-hover" style="table-layout: fixed">
|
|
<thead>
|
|
<tr class="table-secondary">
|
|
<th style="width: 50px">#</th>
|
|
<th>id</th>
|
|
<th>生产计划id</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>优先级 1-100</th>
|
|
<th>颜色</th>
|
|
<th>工单顺序</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<draggable
|
|
element="tbody"
|
|
v-model="workorderList_Scheduled"
|
|
:disabled="disabled_d"
|
|
@start="onStart"
|
|
@end="onEnd"
|
|
:move="onMove"
|
|
animation="300"
|
|
>
|
|
<tr v-for="(item, index) in workorderList_Scheduled" :key="item.index">
|
|
<td>{{ index }}</td>
|
|
<td>{{ item.id }}</td>
|
|
<td>{{ item.fkProPlanId }}</td>
|
|
<td>{{ item.year }}</td>
|
|
<td>{{ item.week }}</td>
|
|
<td>{{ item.date }}</td>
|
|
<td>{{ item.arrangeStarttime }}</td>
|
|
<td>{{ item.arrangeEndtime }}</td>
|
|
<td>{{ item.productionTime }}</td>
|
|
<td>{{ item.productionName }}</td>
|
|
<td>{{ item.paintCylinderNumber }}</td>
|
|
<td>{{ item.specification }}</td>
|
|
<td>{{ item.carnum }}</td>
|
|
<td>{{ item.rack }}</td>
|
|
<td>{{ item.requireNum }}</td>
|
|
<td>{{ item.workblankpartnumber }}</td>
|
|
<td>{{ item.actualnumber }}</td>
|
|
<td>{{ item.priority }}</td>
|
|
<td>{{ item.color }}</td>
|
|
|
|
<td>{{ item.order }}</td>
|
|
<td>
|
|
<template v-if="item.wrokerorder_status === 1">
|
|
<el-button type="primary" @click="ReleaseProduction(item)" size="mini">开始领料</el-button>
|
|
<el-button type="warning" @click="cancel_scheduled(item)" size="mini">取消排程</el-button>
|
|
</template>
|
|
<template v-if="item.wrokerorder_status === 2">
|
|
<el-tag type="success">领料中</el-tag>
|
|
</template>
|
|
<template v-if="item.wrokerorder_status === 3">
|
|
<el-tag type="primary">领料结束</el-tag>
|
|
</template>
|
|
<template v-if="item.wrokerorder_status === 4">
|
|
<el-tag type="primary">生产中</el-tag>
|
|
</template>
|
|
<template v-if="item.wrokerorder_status === 5">
|
|
<el-tag type="primary">生产结束</el-tag>
|
|
</template>
|
|
<template v-if="item.wrokerorder_status === 6">
|
|
<el-tag type="primary">领料不合格</el-tag>
|
|
</template>
|
|
</td>
|
|
</tr>
|
|
</draggable>
|
|
</table>
|
|
</div>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="待产程">
|
|
<vxe-table border :column-config="{ resizable: true }" :data="workorderList_NOSchedule" :loading="loading_v2">
|
|
<vxe-column field="id" title="流水号" width="120"></vxe-column>
|
|
<vxe-column field="fkProPlanId" title="生产计划id" width="120"></vxe-column>
|
|
<vxe-column field="year" title="年份" width="120"></vxe-column>
|
|
<vxe-column field="week" title="周" width="120"></vxe-column>
|
|
<vxe-column field="date" title="周几" width="120"></vxe-column>
|
|
<vxe-column field="arrangeStarttime" title="预计排产开始时间" width="120"></vxe-column>
|
|
<vxe-column field="arrangeEndtime" title="预计排产开始时间" width="120"></vxe-column>
|
|
<vxe-column field="productionTime" title="预计工时" width="120"></vxe-column>
|
|
<vxe-column field="productionName" title="产品名称" width="120"></vxe-column>
|
|
<vxe-column field="paintCylinderNumber" title="油漆缸号" width="120"></vxe-column>
|
|
<vxe-column field="specification" title="规格" width="120"></vxe-column>
|
|
<vxe-column field="carnum" title="车数" width="120"></vxe-column>
|
|
<vxe-column field="rack" title="挂具摆放" width="120"></vxe-column>
|
|
<vxe-column field="requireNum" title="上件数" width="120"></vxe-column>
|
|
<vxe-column field="workblankpartnumber" title="毛坯零件号" width="120"></vxe-column>
|
|
<vxe-column field="finishedpartnumber" title="成品零件号" width="120"></vxe-column>
|
|
<vxe-column field="actualnumber" title="实际上件数" width="120"></vxe-column>
|
|
<vxe-column field="priority" title="优先级 1-100" width="120"></vxe-column>
|
|
<vxe-column field="color" title="颜色" width="120"></vxe-column>
|
|
<vxe-column field="wrokerorder_status" title="是否已排产" width="120"></vxe-column>
|
|
<vxe-column field="isProduction" title="是否已生产" width="120"></vxe-column>
|
|
<vxe-column field="order" title="工单顺序" width="120"></vxe-column>
|
|
<vxe-column title="操作" fixed="right" width="120">
|
|
<template #default="{ row }">
|
|
<vxe-button status="primary" content="排程" @click="Scheduling(row)"></vxe-button>
|
|
</template>
|
|
</vxe-column>
|
|
</vxe-table>
|
|
<pagination
|
|
:total="pagination2.total"
|
|
:page.sync="pagination2.pageNum"
|
|
:limit.sync="pagination2.pageSize"
|
|
@pagination="getList(this.dateitem)"
|
|
/>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
<el-dialog :title="dialog_2.title" :visible.sync="dialog_2.open" width="40%">
|
|
<el-form :model="Scheduling_form" label-width="150px">
|
|
<el-form-item label="工单号"> <el-input v-model="Scheduling_form.id" disabled></el-input> </el-form-item>
|
|
<el-form-item label="毛坯零件号"> <el-input v-model="Scheduling_form.workblankpartnumber" disabled></el-input> </el-form-item>
|
|
<el-form-item label="成品零件号"> <el-input v-model="Scheduling_form.finishedpartnumber" disabled></el-input> </el-form-item>
|
|
<el-form-item label="预计生产时间">
|
|
<el-time-picker
|
|
is-range
|
|
v-model="Scheduling_form.arrangetime"
|
|
range-separator="至"
|
|
start-placeholder="开始时间"
|
|
end-placeholder="结束时间"
|
|
placeholder="选择时间范围"
|
|
>
|
|
</el-time-picker>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="submitForm_2">确 定</el-button>
|
|
<el-button @click="cancel_2">取 消</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getWorkorderList_Scheduled,
|
|
getWorkorderList_NOSchedule,
|
|
addScheduling,
|
|
CancelScheduling,
|
|
releaseProduction,
|
|
saveSrotResults,
|
|
} from '@/api/productManagement/workorder.js'
|
|
import draggable from 'vuedraggable'
|
|
export default {
|
|
name: 'workorder',
|
|
data() {
|
|
return {
|
|
list: [
|
|
{ id: 1, name: 'Abby', sport: 'basket' },
|
|
{ id: 2, name: 'Brooke', sport: 'foot' },
|
|
{ id: 3, name: 'Courtenay', sport: 'volley' },
|
|
{ id: 4, name: 'David', sport: 'rugby' },
|
|
],
|
|
|
|
Scheduling_form: {
|
|
id: '',
|
|
workblankpartnumber: '',
|
|
finishedpartnumber: '',
|
|
arrangetime: [new Date(), new Date()],
|
|
}, //排程表单
|
|
search: {
|
|
year: new Date().getFullYear(),
|
|
week: 1,
|
|
},
|
|
pagination: {
|
|
total: 0,
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
},
|
|
pagination2: {
|
|
total: 0,
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
},
|
|
list: ['Item 1', 'Item 2', 'Item 3'],
|
|
workorderList_Scheduled: [], //生产工单 已经排程
|
|
workorderList_NOSchedule: [], //生产工单 未排程
|
|
loading_v2: true,
|
|
dateitem: -1,
|
|
dialog_2: {
|
|
title: '进行排程',
|
|
open: false,
|
|
},
|
|
WhetherToDragOrNot: true,
|
|
disabled_d: true,
|
|
}
|
|
},
|
|
components: {
|
|
draggable,
|
|
},
|
|
mounted() {
|
|
this.getList()
|
|
},
|
|
methods: {
|
|
//todo 搜索按钮
|
|
searchDate(dateitem) {
|
|
this.dateitem = dateitem
|
|
this.getList()
|
|
},
|
|
//todo 获取生产工单列表
|
|
getList() {
|
|
const query = { ...this.search, ...this.pagination }
|
|
query.date = this.dateitem
|
|
if (query.week == null || query.week == undefined || query.week == '') query.week = -1
|
|
if (query.year == null || query.year == undefined || query.year == '') query.year = -1
|
|
getWorkorderList_Scheduled(query)
|
|
.then((res) => {
|
|
if (res.code == 200) {
|
|
this.workorderList_Scheduled = res.data.item1
|
|
this.pagination.total = res.data.item2
|
|
}
|
|
return getWorkorderList_NOSchedule(query)
|
|
})
|
|
.then((res) => {
|
|
if (res.code == 200) {
|
|
this.loading_v2 = false
|
|
this.workorderList_NOSchedule = res.data.item1
|
|
this.pagination2.total = res.data.item2
|
|
}
|
|
})
|
|
},
|
|
//todo 排程按钮点击
|
|
Scheduling(row) {
|
|
this.dialog_2.open = true
|
|
this.Scheduling_form.id = row.id
|
|
this.Scheduling_form.workblankpartnumber = row.workblankpartnumber
|
|
this.Scheduling_form.finishedpartnumber = row.finishedpartnumber
|
|
},
|
|
//todo 排程对话框确认按钮
|
|
submitForm_2() {
|
|
this.dialog_2.open = false
|
|
const query = {
|
|
id: this.Scheduling_form.id,
|
|
arrange_starttime: this.Scheduling_form.arrangetime[0],
|
|
arrange_endtime: this.Scheduling_form.arrangetime[1],
|
|
}
|
|
addScheduling(query).then((res) => {
|
|
if (res.code == 200) {
|
|
if (res.data == 1) {
|
|
this.$notify.success('排程成功')
|
|
this.getList()
|
|
} else {
|
|
this.$notify.error('未知错误')
|
|
}
|
|
}
|
|
})
|
|
},
|
|
//todo 排程对话框取消按钮
|
|
cancel_2() {
|
|
this.dialog_2.open = false
|
|
this.Scheduling_form.id = ''
|
|
this.Scheduling_form.arrangetime = [new Date(), new Date()]
|
|
},
|
|
|
|
//todo 取消排程
|
|
cancel_scheduled(row) {
|
|
this.$modal
|
|
.confirm('是否确认取消已经排程工单' + row.id + '"的数据项？')
|
|
.then(function () {
|
|
return CancelScheduling(row.id)
|
|
})
|
|
.then((res) => {
|
|
if ((res.code == 200) & (res.data == 1)) {
|
|
this.$notify.success('取消已经排程工单成功')
|
|
this.getList()
|
|
} else {
|
|
this.$notify.error('未知错误')
|
|
}
|
|
})
|
|
},
|
|
//todo 下达领料指令
|
|
ReleaseProduction(row) {
|
|
this.$modal
|
|
.confirm('是否确认开始领料-' + row.id + '-的数据项？')
|
|
.then(function () {
|
|
return releaseProduction(row.id)
|
|
})
|
|
.then((res) => {
|
|
if ((res.code == 200) & (res.data == 1)) {
|
|
this.$notify.success('开始领料成功')
|
|
this.getList()
|
|
} else {
|
|
this.$notify.error('未知错误')
|
|
}
|
|
})
|
|
},
|
|
//todo 设置开启拖拽
|
|
setJY() {
|
|
this.disabled_d = false
|
|
},
|
|
//todo 结束并保存拖拽结果
|
|
SaveDragAndDropResults() {
|
|
this.disabled_d = true
|
|
|
|
const query = []
|
|
this.workorderList_Scheduled.forEach((item, index) => {
|
|
query.push({
|
|
id: item.id,
|
|
order: item.order,
|
|
})
|
|
})
|
|
|
|
saveSrotResults(query).then((res) => {
|
|
if ((res.code == 200) & (res.data >= 1)) {
|
|
this.$notify.success('保存成功')
|
|
this.getList()
|
|
} else {
|
|
this.$notify.error('未知异常')
|
|
}
|
|
})
|
|
},
|
|
//todo 拖拽开始事件
|
|
onStart(ev) {},
|
|
//todo 拓拽结束事件
|
|
onEnd(ev) {
|
|
this.workorderList_Scheduled.forEach((item, index) => {
|
|
item.order = index
|
|
})
|
|
},
|
|
//todo 处理拖拽事件
|
|
onMove(e, event) {
|
|
if (e.draggedContext.element.wrokerorder_status >1) {
|
|
return false
|
|
}
|
|
if (e.relatedContext.element.wrokerorder_status > 1) return false
|
|
return true
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style src="./bootstrap.css" scoped></style>
|
|
<style lang="scss" scoped>
|
|
.list-element {
|
|
padding: 10px;
|
|
background: #eee;
|
|
}
|
|
.mytable {
|
|
tr:last-child {
|
|
position: sticky;
|
|
right: 0;
|
|
}
|
|
td:last-child {
|
|
position: sticky;
|
|
right: 0;
|
|
}
|
|
tr {
|
|
th {
|
|
width: 250px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|