<template>
|
<div class="mod-config">
|
<basic-container>
|
<el-row>
|
<el-col :span="12">
|
<div style="height:80vh;padding: 0px 10px;">
|
<avue-crud
|
:data="tableData"
|
ref="crud"
|
:option="option"
|
:span-method="spanMethod"
|
@refresh-change="getData"
|
@current-change="handleCurrentChange"
|
@size-change="handleSizeChange"
|
:page="page"
|
@selection-change="selectionRow"
|
:table-loading="loading">
|
<template #menu="{ row, index }">
|
<el-button type="text" icon="el-icon-edit" size="small" @click="editHandle(row, index)">编辑</el-button>
|
<el-button type="text" icon="el-icon-delete" size="small" @click="deleteHandle(row, index)">删除</el-button>
|
</template>
|
</avue-crud>
|
</div>
|
</el-col>
|
<el-col :span="12" style="padding-left: 10px">
|
<div style="">
|
<el-card>
|
<div slot="header" class="clearfix">
|
<span>调度时间线</span>
|
<el-button v-if="scheduleList.length>0" @click="openEditDialog" style="float: right; padding: 3px 0" type="text">编辑</el-button>
|
</div>
|
<div style="height:70vh;overflow-y: scroll;">
|
<el-timeline>
|
<el-timeline-item
|
placement="top"
|
v-for="(item, index) in scheduleList"
|
:key="index"
|
:timestamp="item.title">
|
<el-card shadow="hover" :body-style="{margin: '0',padding:'0px 20px 0px 20px'}" style="width:90%;">
|
<p>
|
<span style="font-weight: bold;">计划时间: </span>
|
{{item.planTime}}
|
</p>
|
<p>
|
<span style="font-weight: bold;">实际时间: </span>
|
{{ item.actualTime }}</p>
|
</el-card>
|
</el-timeline-item>
|
</el-timeline>
|
</div>
|
</el-card>
|
</div>
|
</el-col>
|
</el-row>
|
</basic-container>
|
<el-dialog
|
title="编辑时间线"
|
:visible.sync="dialogVisible"
|
top="5vh"
|
width="50%"
|
:before-close="handleClose">
|
<div style="height:60vh;overflow-y: scroll;">
|
<el-timeline>
|
<el-timeline-item
|
placement="top"
|
v-for="(item, index) in scheduleEditList"
|
:key="index"
|
:timestamp="item.title">
|
<el-card shadow="hover" style="width:90%" :body-style="{padding:'20px 20px 5px 20px'}">
|
<el-row>
|
<el-col :span="3">
|
<p style="font-weight: bold;line-height: 50%;">计划时间: </p>
|
</el-col>
|
<el-col :span="21">
|
<el-date-picker
|
style="width:100%"
|
v-model="item.planTime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
type="datetime"
|
placeholder="选择日期时间">
|
</el-date-picker>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="3">
|
<p style="font-weight: bold;line-height: 50%;">实际时间: </p>
|
</el-col>
|
<el-col :span="21">
|
<el-date-picker
|
style="width:100%"
|
v-model="item.actualTime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
type="datetime"
|
placeholder="选择日期时间">
|
</el-date-picker>
|
</el-col>
|
</el-row>
|
</el-card>
|
</el-timeline-item>
|
</el-timeline>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="confirmEditSchedul">确 定</el-button>
|
</span>
|
</el-dialog>
|
<el-dialog
|
title="编辑"
|
:visible.sync="editDialogVisible"
|
width="50%">
|
<el-form :model="editForm" label-width="120px">
|
<el-row>
|
<el-col :span="24">
|
<el-form-item label="生产情况:">
|
<el-input style="width:100%" placeholder="请输入生产情况" type="textarea" :row="2" v-model="editForm.productionStatus"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="24">
|
<el-form-item label="生产程度:">
|
<el-input style="width:100%" placeholder="请输入生产程度" type="textarea" :row="2" v-model="editForm.productionRoutine"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="editDialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="confirmEdit()">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {
|
fetchScheduleList,
|
fetchScheduleById,
|
fillTime,
|
deleteSchedul,
|
updateSchedul
|
} from '@/api//plan/productionschedul'
|
import ttable from '@/views/common/ztt-table.vue'
|
import { mapGetters } from 'vuex'
|
export default {
|
data() {
|
return {
|
editForm:{
|
id: null,
|
productionRoutine: null,
|
productionStatus: null,
|
},
|
editDialogVisible: false,
|
dialogVisible: false,
|
scheduleList: [],
|
scheduleEditList: [],
|
typeOptions: [],
|
multipleSelection: [],
|
loading: true,
|
tableData: [],
|
page: {
|
total: 10,
|
currentPage: 1,
|
pageSize: 10,
|
pagerCount: 5
|
},
|
option: {
|
height: 400,
|
selection: true,
|
columnBtn: false,
|
index: true,
|
indexFixed: false,
|
selectionFixed: false,
|
rowKey: 'mid',
|
indexLabel: '序号',
|
menuAlign: 'center',
|
menuWidth: 130,
|
editBtn: false,
|
delBtn: false,
|
addBtn: false,
|
border: true,
|
align: 'center',
|
column: [
|
{
|
minWidth: 120,
|
prop: 'projectName',
|
label: '项目名称',
|
overHidden: true,
|
},
|
{
|
minWidth: 100,
|
prop: 'contractNo',
|
label: '合同号',
|
overHidden: true,
|
},
|
{
|
minWidth: 120,
|
prop: 'orderTime',
|
label: '接单日期',
|
overHidden: true,
|
formatter: (row,columnValue)=> this.formatDate(row,columnValue)
|
},
|
{
|
minWidth: 120,
|
prop: 'customerName',
|
label: '客户名称',
|
overHidden: true,
|
},
|
{
|
minWidth: 120,
|
prop: 'deliveryDate',
|
label: '交货日期',
|
overHidden: true,
|
formatter: (row,columnValue)=> this.formatDate(row,columnValue)
|
},
|
{
|
minWidth: 120,
|
prop: 'productType',
|
label: '产品类型',
|
overHidden: true,
|
},
|
{
|
minWidth: 120,
|
prop: 'product',
|
label: '产品名',
|
overHidden: true,
|
},
|
{
|
minWidth: 120,
|
prop: 'specs',
|
label: '规格型号',
|
overHidden: true,
|
},
|
{
|
minWidth: 120,
|
prop: 'unit',
|
label: '单位',
|
overHidden: true,
|
},
|
{
|
minWidth: 120,
|
prop: 'number',
|
label: '数量',
|
overHidden: true,
|
},
|
{
|
minWidth: 120,
|
prop: 'productionStatus',
|
label: '生产情况',
|
overHidden: true,
|
},
|
{
|
minWidth: 120,
|
prop: 'productionRoutine',
|
label: '生产程度',
|
overHidden: true,
|
},
|
{
|
minWidth: 120,
|
prop: 'projectLeader',
|
label: '项目负责人',
|
overHidden: true,
|
},
|
{
|
minWidth: 150,
|
prop: 'remark',
|
label: '备注',
|
overHidden: true,
|
}
|
],
|
},
|
spanArr: [{
|
prop: 'projectName',
|
span: []
|
}, {
|
prop: 'contractNo',
|
span: []
|
},
|
{
|
prop: 'orderTime',
|
span: []
|
},
|
{
|
prop: 'customerName',
|
span: []
|
},
|
{
|
prop: 'deliveryDate',
|
span: []
|
},
|
{
|
prop: 'productType',
|
span: []
|
},
|
],
|
}
|
},
|
components: {
|
ttable,
|
},
|
computed: {
|
...mapGetters(['permissions']),
|
},
|
created(){
|
this.loading = true
|
this.getData()
|
this.getParamType()
|
this.rowSort()
|
this.rowCalc()
|
},
|
beforeUpdate() {
|
this.rowSort()
|
this.rowCalc()
|
},
|
watch:{
|
editDialogVisible(newVal){
|
if(!newVal){
|
this.editForm = {
|
id: null,
|
productionRoutine: null,
|
productionStatus: null,
|
}
|
}
|
}
|
},
|
mounted() {
|
|
},
|
beforeDestroy() {
|
},
|
methods: {
|
confirmEdit(){
|
const _than = this
|
updateSchedul(this.editForm).then(res=>{
|
if(res.status===200){
|
_than.$message.success("更新成功")
|
_than.editDialogVisible = false
|
_than.getData()
|
}
|
}).catch(error=>{
|
console.error(error);
|
})
|
},
|
editHandle(row,index){
|
if(row){
|
this.editForm.id = row.mid
|
this.editForm.productionRoutine = row.productionRoutine
|
this.editForm.productionStatus = row.productionStatus
|
this.editDialogVisible = true
|
}
|
},
|
openEditDialog(){
|
this.scheduleEditList = JSON.parse(JSON.stringify(this.scheduleList))
|
this.dialogVisible = true
|
},
|
confirmEditSchedul(){
|
let data = this.scheduleEditList
|
let orderObj = this.multipleSelection[0]
|
let obj = {
|
"documentActualTime": data[0].actualTime,
|
"documentPlanTime": data[0].planTime,
|
"bomActualTime": data[1].actualTime,
|
"bomPlanTime": data[1].planTime,
|
"contractActualTime": data[2].actualTime,
|
"contractPlanTime": data[2].planTime,
|
"arrivalActualTime": data[3].actualTime,
|
"arrivalPlanTime": data[3].planTime,
|
"checkActualTime": data[4].actualTime,
|
"checkPlanTime": data[4].planTime,
|
"productActualTime": data[5].actualTime,
|
"productPlanTime": data[5].planTime,
|
"id": orderObj.id,
|
"contractNo": orderObj.contractNo,
|
"customerName": orderObj.customerName,
|
"deliveryDate": orderObj.deliveryDate,
|
"orderTime": orderObj.orderTime,
|
"productType": orderObj.productType,
|
"projectName": orderObj.projectName
|
}
|
fillTime(obj).then(res=>{
|
if(res.status===200){
|
this.$message.success("更新成功")
|
}else{
|
this.$message.error("更新失败")
|
}
|
this.getScheduleById(orderObj.id)
|
this.dialogVisible = false
|
}).catch(error=>{
|
console.log(error);
|
})
|
|
},
|
handleClose(done){
|
done()
|
},
|
initTimeLine(data){
|
this.scheduleList = []
|
if(data){
|
let arr = [
|
{
|
title: '文件签发',
|
actualTime: data.documentActualTime,
|
planTime: data.documentPlanTime,
|
},
|
{
|
title: '下达物料需求',
|
actualTime: data.bomActualTime,
|
planTime: data.bomPlanTime,
|
},
|
{
|
title: '采购询价+合同签订',
|
actualTime: data.contractActualTime,
|
planTime: data.contractPlanTime,
|
},
|
{
|
title: '物料采购到货',
|
actualTime: data.arrivalActualTime,
|
planTime: data.arrivalPlanTime,
|
},
|
{
|
title: '物料到货检验',
|
actualTime: data.checkActualTime,
|
planTime: data.checkPlanTime,
|
},
|
{
|
title: '领料、装箱入库',
|
actualTime: data.productActualTime,
|
planTime: data.productPlanTime,
|
},
|
]
|
this.scheduleList = arr
|
}
|
},
|
getScheduleById(id){
|
if(id){
|
fetchScheduleById(id).then(res=>{
|
this.initTimeLine(res.data.data)
|
}).catch(error=>{
|
console.log(error);
|
})
|
}
|
},
|
selectionRow(val){
|
if (val.length > 1) {
|
const preVal = val.shift();
|
this.$refs.crud.toggleRowSelection(preVal, false);
|
}
|
else{
|
this.scheduleList=[]
|
}
|
this.multipleSelection = val
|
this.getScheduleById(val[0].id)
|
},
|
formatDate(row, cellValue){
|
if (cellValue) {
|
const dutyDateList = /\d{4}-\d{1,2}-\d{1,2}/g.exec(cellValue)
|
if (dutyDateList && dutyDateList.length > 0) {
|
return dutyDateList[0]
|
}
|
}
|
return ''
|
},
|
handleSizeChange(val){
|
if(val){
|
this.page.pageSize=val
|
this.getData()
|
}
|
},
|
handleCurrentChange(val){
|
if(val){
|
this.page.currentPage=val
|
this.getData()
|
}
|
},
|
// 获取数据列表
|
getData() {
|
this.loading = true
|
let param = {
|
size: this.page.pageSize,
|
current: this.page.currentPage,
|
}
|
fetchScheduleList(param).then((res) => {
|
this.tableData = res.data.data.records
|
this.page.total = res.data.data.total
|
this.page.currentPage = res.data.data.records.pages
|
this.scheduleList = []
|
})
|
this.loading = false
|
},
|
// 删除
|
deleteHandle(row,index) {
|
const _than = this
|
_than.$confirm('是否确认删除', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(function() {
|
deleteSchedul(row.mid).then(res=>{
|
if(res.status===200){
|
_than.$message.success("删除成功")
|
_than.getData()
|
}
|
}).catch(error=>{
|
console.error(error)
|
})
|
})
|
},
|
//动态合并方法
|
rowCalc() {
|
this.spanArr.forEach((ele, index) => {
|
let parent
|
if (index !== 0) parent = this.spanArr[ele.parent || index - 1].span
|
ele.span = this.rowSpan(ele.prop, parent)
|
})
|
},
|
rowSort(list) {
|
let propList = this.spanArr.map(ele => ele.prop)
|
this.spanArr.forEach((ele, index) => {
|
let key = ele.prop
|
this.tableData = this.tableData.sort((a, b) => {
|
let flag = true;
|
for (let i = 0; i < index; i++) {
|
let prop = this.spanArr[i].prop
|
flag = flag && a[prop] == b[prop]
|
}
|
if (flag) {
|
if (a[key] < b[key]) { return 1; }
|
else if (a[key] > b[key]) { return -1; }
|
return 0;
|
}
|
return 0;
|
})
|
})
|
},
|
rowSpan(key, parent) {
|
let list = [];
|
let position = 0;
|
this.tableData.forEach((item, index) => {
|
if (index === 0) {
|
list.push(1)
|
let position = 0;
|
} else {
|
if (this.tableData[index][key] === this.tableData[index - 1][key]) {
|
if (parent && parent[index] !== 0) {
|
list.push(1)
|
position = index
|
} else {
|
list[position] += 1;
|
list.push(0)
|
}
|
} else {
|
list.push(1)
|
position = index
|
}
|
}
|
})
|
return list
|
},
|
spanMethod({ row, column, rowIndex, columnIndex }) {
|
for (let i = 0; i < this.spanArr.length; i++) {
|
const ele = this.spanArr[i]
|
if (column.property == ele.prop) {
|
const _row = ele.span[rowIndex];
|
const _col = _row > 0 ? 1 : 0;
|
return {
|
rowspan: _row,
|
colspan: _col
|
}
|
}
|
}
|
}
|
}
|
}
|
</script>
|
<style>
|
.avue-crud__tip{
|
display: none;
|
}
|
.basic-template-table .el-table__body .el-table__row td:first-child .cell {
|
padding-left: 0px;
|
padding-right: 0px;
|
}
|
|
.basic-template-table .el-table__body .el-table__row:hover {
|
cursor: move;
|
}
|
|
.basic-template-table .el-table__body .el-table__row:hover .icon {
|
display: inline-block;
|
}
|
|
.basic-template-table .el-table__body .el-table__row .icon {
|
color: rgba(0, 0, 0, 0.45);
|
font-size: 12px;
|
line-height: 18px;
|
display: none;
|
}
|
|
.aufontAll {
|
font-family: aufontAll !important;
|
font-size: 14px;
|
font-style: normal;
|
-webkit-font-smoothing: antialiased;
|
-moz-osx-font-smoothing: grayscale;
|
}
|
|
.h-icon-all-drag {
|
background: url('/img/tz.png') center center no-repeat;
|
background-size: cover;
|
font-size: 14px;
|
}
|
.h-icon-all-drag:before {
|
content: '\E63E';
|
font-size: 14px;
|
visibility: hidden;
|
}
|
</style>
|
