<template>
|
<view class="page">
|
<view class="workstation-index-bg" />
|
<u-navbar title="机台管理" :background="background" :border-bottom="false" :title-bold="true" title-color="#000"
|
back-icon-color="#000" />
|
|
<view class="wrap">
|
<view>
|
<uni-notice-bar class="content-notice" background-color="#A3E0C8" color="#007145" single
|
v-if="submitNotice" :text="submitNotice"></uni-notice-bar>
|
<uni-notice-bar class="content-notice" color="#D53F3F" single v-if="unsubmitNotice"
|
:text="unsubmitNotice"></uni-notice-bar>
|
</view>
|
<view class="content">
|
<view class="content-header">
|
<view class="content-header-left">
|
<view class="content-header-icon-one"></view>
|
<view class="content-header-title">编号：</view>
|
<text>{{dutyRecordInfo.dutyNo}}</text>
|
</view>
|
<view class="content-header-right">
|
<view class="clear-icon" @click="clear()"></view>
|
<view class="edit-icon" @click="edit()"></view>
|
</view>
|
</view>
|
<view class="content-body">
|
<view class="content-body-title">
|
班次登记
|
</view>
|
|
<view class="content-body-item param-extra">
|
<view class="content-body-item-left">
|
机 台：
|
</view>
|
<view class="content-body-item-right" @click="toWorkstation()">
|
( {{ workstationInfo.workCenter }} ) {{workstationInfo.workstationName}}
|
<u-icon name="arrow-right" color="#687792" size="28" @click="toWorkstation"
|
style="padding-left: 10rpx;"></u-icon>
|
</view>
|
</view>
|
|
<view class="content-body-item param-extra">
|
<view class="content-body-item-left">
|
班 次：
|
</view>
|
<view class="content-body-item-right">
|
<uni-data-select class="_select" v-model="dutyRecordInfo.shiftId" :localdata="shiftList"
|
:border="false" :disabled="editState" @change="selectShiftChanged"></uni-data-select>
|
</view>
|
</view>
|
|
<view class="content-body-item param-extra">
|
<view class="content-body-item-left">
|
班 组：
|
</view>
|
<view class="content-body-item-right">
|
<uni-data-select class="_select" v-model="dutyRecordInfo.crewId" :localdata="crewList"
|
:border="false" :disabled="editState"></uni-data-select>
|
</view>
|
</view>
|
|
<view class="content-body-item param-extra">
|
<view class="content-body-item-left">
|
班次日期：
|
</view>
|
<view class="content-body-item-right">
|
<uni-datetime-picker type="date" :clear-icon="false"
|
v-model="dutyRecordInfo.dutyDate" :disabled="editState" @change="dutyDateChange" />
|
</view>
|
</view>
|
|
<view class="content-body-item param-extra">
|
<view class="content-body-item-left">
|
开始时间：
|
</view>
|
<view class="content-body-item-right">
|
<uni-datetime-picker type="datetime" v-model="dutyRecordInfo.startTime"
|
:disabled="editState" />
|
</view>
|
</view>
|
|
<view class="content-body-item param-extra">
|
<view class="content-body-item-left">
|
结束时间：
|
</view>
|
<view class="content-body-item-right">
|
<uni-datetime-picker class="_time-picker" type="datetime" v-model="dutyRecordInfo.endTime"
|
:disabled="editState" />
|
</view>
|
</view>
|
</view>
|
<view class="content-footer">
|
<view class="footer-button">
|
<wu-button :custom-style="customStyleOne" size="normal" text="提交"
|
@click="submitDutyRecord"></wu-button>
|
</view>
|
<view class="footer-button">
|
<wu-button :custom-style="customStyleTwo" size="normal" text="保存"
|
@click="saveDutyRecord"></wu-button>
|
</view>
|
</view>
|
</view>
|
<view class="bottom">
|
<view class="bottom-btn">
|
<wu-button :custom-style="customStyleFive" shape="circle" :hairline="true" size="small"
|
@click="deleteDutyRecord" :plain="true">
|
<image src="/static/custom/operationTask/red-delete-icon.png"
|
style="width: 30rpx; height: 30rpx; margin-right: 5rpx;"></image>
|
删除
|
</wu-button>
|
</view>
|
<view class="bottom-btn">
|
<wu-button :custom-style="customStyleThree" shape="circle" :hairline="true" size="small"
|
@click="toDutyRecordHistory" :plain="true">
|
<image src="/static/custom/operationTask/workstation/icon_history.png"
|
style="width: 30rpx; height: 30rpx; margin-right: 5rpx;"></image>
|
历史
|
</wu-button>
|
</view>
|
<view class="bottom-btn">
|
<wu-button :custom-style="customStyleFour" shape="circle" :hairline="true" size="small"
|
@click="toUnSubmitDutyRecord" :plain="true">
|
<image src="/static/custom/operationTask/workstation/icon_batch_submit.png"
|
style="width: 30rpx; height: 30rpx; margin-right: 5rpx;"></image>
|
批量提交
|
</wu-button>
|
</view>
|
<view class="bottom-btn">
|
<wu-button :custom-style="customStyleFour" shape="circle" :hairline="true" size="small"
|
@click="toBatchSaveDutyRecord" :plain="true">
|
<image src="/static/custom/operationTask/workstation/icon_batch_save.png"
|
style="width: 30rpx; height: 30rpx; margin-right: 5rpx;"></image>
|
批量保存
|
</wu-button>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
<script>
|
import content_bg from '@/static/custom/product/productBg.png'
|
import {
|
dateFormat
|
} from "@/utils/date.js";
|
export default {
|
components: {},
|
data() {
|
return {
|
background: {
|
backgroundImage: `url(${content_bg})`,
|
backgroundAttachment: 'fixed',
|
backgroundSize: '100% auto',
|
backgroundRepeat: 'no-repeat',
|
},
|
dutyRecordInfo: {
|
crewId: null,
|
dutyDate: null,
|
dutyNo: null,
|
dutyTime: null,
|
endTime: null,
|
id: null,
|
isLimitUpd: true,
|
isSubmit: null,
|
operationType: null,
|
shiftId: null,
|
startTime: null,
|
isConfirm: null,
|
workstationId: null
|
},
|
updateDutyForm: {
|
dutyNo: null,
|
crewId: null,
|
dutyDate: null,
|
startTime: null,
|
endTime: null,
|
dutyTime: null,
|
shiftId: null,
|
id: null,
|
isSubmit: null
|
},
|
status: false,
|
editState: true,
|
shiftList: [],
|
crewList: [],
|
shifts: [],
|
submitNotice: "",
|
unsubmitNotice: "",
|
workstationInfo: {
|
workstationId: null,
|
workstationNo: null,
|
workstationName: null,
|
workCenter: null,
|
dutyRecordId: null
|
}
|
}
|
},
|
computed: {
|
customStyleOne() {
|
return {
|
color: '#FFFFFF',
|
background: '#214DED',
|
width: '140rpx'
|
}
|
},
|
customStyleTwo() {
|
return {
|
color: '#000000',
|
// background: '#214DED',
|
width: '150rpx'
|
}
|
},
|
customStyleThree() {
|
return {
|
color: '#214DED',
|
// background: 'rgba(250, 252, 255, 0.36);',
|
width: '150rpx',
|
border: "1px solid #214DED"
|
}
|
},
|
customStyleFour() {
|
return {
|
color: '#214DED',
|
// background: 'rgba(250, 252, 255, 0.36);',
|
width: '190rpx',
|
border: "1px solid #214DED"
|
}
|
},
|
customStyleFive() {
|
return {
|
color: 'red',
|
width: '140rpx',
|
border: "1px solid red"
|
}
|
}
|
},
|
onLoad(option) {
|
this.getShiftList();
|
this.getCrewList();
|
|
if (option && option.id !== "null") {
|
this.getWorkstationList(option.id);
|
}
|
},
|
onShow() {
|
|
},
|
methods: {
|
toWorkstation() {
|
uni.navigateTo({
|
url: '/pages/product/produce/workstationList/workstationList'
|
})
|
},
|
toDutyRecordHistory() {
|
uni.navigateTo({
|
url: './dutyRecordHistory?id=' + this.workstationInfo.workstationId
|
})
|
},
|
toUnSubmitDutyRecord() {
|
uni.navigateTo({
|
url: './unSubmitDutyRecord?workCenter=' + this.workstationInfo.workCenter
|
})
|
},
|
toBatchSaveDutyRecord() {
|
const validResult = this.validDutyForm()
|
if (validResult.result) {
|
if (this.dutyRecordInfo.id) {
|
this.$u.toast('该班次已存在，不可进行批量保存操作')
|
} else {
|
let params = this.dutyRecordInfo;
|
this.$set(params, 'workCenter', this.workstationInfo.workCenter)
|
|
uni.navigateTo({
|
url: './dutyRecordWorkstation?params=' + encodeURIComponent(JSON.stringify(params))
|
})
|
}
|
} else {
|
uni.showModal({
|
title: '提示',
|
content: validResult.msg,
|
showCancel: false,
|
success: function() {}
|
});
|
}
|
},
|
setWorkstation(workstation) {
|
this.workstationInfo.workstationId = workstation.id;
|
this.workstationInfo.workstationNo = workstation.workstationNo;
|
this.workstationInfo.workstationName = workstation.name;
|
this.workstationInfo.workCenter = workstation.workCenter;
|
this.workstationInfo.dutyRecordId = workstation.dutyRecordId;
|
// 存入缓存
|
uni.setStorage({
|
key: 'workstation',
|
data: JSON.stringify(workstation),
|
success: function() {}
|
});
|
|
this.clear();
|
this.getDutyRecordByWorkstationId(workstation.id);
|
},
|
getShiftList() {
|
this.$u.api.operationTask.getShiftList({}).then(res => {
|
res.data.forEach((el) => {
|
const shift = {
|
text: el.name,
|
value: el.id
|
};
|
this.shiftList.push(shift);
|
this.shifts = res.data;
|
});
|
});
|
},
|
getCrewList() {
|
this.$u.api.operationTask.getCrewList({}).then(res => {
|
res.data.forEach((el) => {
|
const crew = {
|
text: el.crewName,
|
value: el.id
|
};
|
this.crewList.push(crew);
|
});
|
});
|
},
|
getDutyRecordByWorkstationId(workstationId) {
|
this.$u.api.outputRegister.getDutyRecordByWorkstationId({
|
id: workstationId
|
}).then(res => {
|
if (res.data) {
|
this.dutyRecordInfo = res.data;
|
this.workstationInfo.dutyRecordId = this.dutyRecordInfo.id;
|
if (this.dutyRecordInfo.isConfirm) {
|
this.status = true;
|
} else {
|
this.status = false;
|
}
|
this.noticeShow();
|
}
|
});
|
},
|
saveDutyRecord() {
|
this.dutyRecordInfo.workstationId = this.workstationInfo.workstationId;
|
const validResult = this.validDutyForm();
|
if (validResult.result) {
|
if (this.dutyRecordInfo.id) {
|
if (!this.status) {
|
this.updateDutyForm.dutyNo = this.dutyRecordInfo.dutyNo
|
this.updateDutyForm.crewId = this.dutyRecordInfo.crewId
|
this.updateDutyForm.dutyDate = this.dutyRecordInfo.dutyDate
|
this.updateDutyForm.startTime = this.dutyRecordInfo.startTime
|
this.updateDutyForm.endTime = this.dutyRecordInfo.endTime
|
this.updateDutyForm.dutyTime = this.dutyRecordInfo.dutyTime
|
this.updateDutyForm.shiftId = this.dutyRecordInfo.shiftId
|
this.updateDutyForm.id = this.dutyRecordInfo.id
|
this.updateDutyForm.isSubmit = this.dutyRecordInfo.isSubmit
|
|
this.$set(this.updateDutyForm, 'operationType', '编辑');
|
this.$set(this.updateDutyForm, 'isLimitUpd', true);
|
|
this.updDutyRecord();
|
} else {
|
uni.showModal({
|
title: '提示',
|
content: '该班次已确认，不可修改',
|
showCancel: false,
|
success: function() {}
|
});
|
return;
|
}
|
} else {
|
this.dutyRecordInfo.isSubmit = false;
|
this.addDutyRecord();
|
}
|
} else {
|
uni.showModal({
|
title: '提示',
|
content: validResult.msg,
|
showCancel: false,
|
success: function() {}
|
});
|
return;
|
}
|
},
|
addDutyRecord() {
|
this.$u.api.operationTask.addDutyRecord(this.dutyRecordInfo).then(res => {
|
if (res.code == 0) {
|
this.dutyRecordInfo = res.data;
|
this.status = false;
|
this.editState = true;
|
this.updWorkstation();
|
|
uni.showModal({
|
title: '提示',
|
content: '保存成功',
|
showCancel: false,
|
success: function() {}
|
})
|
} else {
|
uni.showModal({
|
title: '提示',
|
content: res.msg,
|
showCancel: false,
|
success: function() {}
|
})
|
}
|
});
|
},
|
updDutyRecord() {
|
this.$u.api.operationTask.updDutyRecord(this.updateDutyForm).then(res => {
|
if (res.code == 0) {
|
this.editState = true;
|
this.dutyRecordInfo = res.data;
|
uni.showModal({
|
title: '提示',
|
content: '修改成功',
|
showCancel: false,
|
success: function() {}
|
})
|
} else {
|
uni.showModal({
|
title: '提示',
|
content: res.msg,
|
showCancel: false,
|
success: function() {
|
|
}
|
})
|
}
|
});
|
},
|
submitDutyRecord() {
|
if (!this.dutyRecordInfo.id) {
|
uni.showModal({
|
title: '提示',
|
content: '请选择班次提交',
|
showCancel: false,
|
success: function() {}
|
});
|
return;
|
}
|
|
const params = {
|
id: this.dutyRecordInfo.id,
|
isLimitUpd: true,
|
isSubmit: true,
|
operationType: '提交'
|
}
|
|
this.$u.api.operationTask.updDutyRecord(params).then(res => {
|
if (res.code == 0) {
|
this.dutyRecordInfo = res.data;
|
this.noticeShow();
|
uni.showModal({
|
title: '提示',
|
content: '提交成功',
|
showCancel: false,
|
success: function() {}
|
})
|
} else {
|
uni.showModal({
|
title: '提示',
|
content: res.msg,
|
showCancel: false,
|
success: function() {
|
|
}
|
})
|
}
|
});
|
},
|
// 工作站绑定班次
|
updWorkstation() {
|
const params = {
|
id: this.workstationInfo.workstationId,
|
dutyRecordId: this.dutyRecordInfo.id
|
};
|
this.$u.api.operationTask.updWorkstation(params);
|
},
|
getWorkstationList(workstationId) {
|
this.$u.api.operationTask.getWorkstationList({
|
id: workstationId
|
}).then(res => {
|
if (res.code == 0) {
|
const workstation = res.data[0];
|
this.workstationInfo.workstationId = workstation.id;
|
this.workstationInfo.workstationNo = workstation.workstationNo;
|
this.workstationInfo.workstationName = workstation.name;
|
this.workstationInfo.workCenter = workstation.workCenter;
|
|
this.getDutyRecordByWorkstationId(workstation.id);
|
}
|
});
|
},
|
selectShiftChanged(shiftId) {
|
const shift = this.shifts.find((item) => item.id === shiftId)
|
let date = new Date()
|
if (this.dutyRecordInfo.dutyDate) {
|
date = this.dutyRecordInfo.dutyDate
|
} else {
|
this.dutyRecordInfo.dutyDate = dateFormat(date)
|
}
|
this.autoValue(shift, date)
|
},
|
selectDutyDate(dutyDate) {
|
const shift = this.shifts.find(
|
(item) => item.id === this.dutyRecordInfo.shiftId
|
)
|
if (shift) {
|
this.autoValue(shift, dutyDate)
|
}
|
},
|
deleteDutyRecord() {
|
if (this.dutyRecordInfo.isSubmit) {
|
this.$u.toast('该班次已提交！不可删除！');
|
return;
|
}
|
let that = this
|
uni.showModal({
|
title: '提示',
|
content: '是否确认删除班次记录编号为：' + this.dutyRecordInfo.dutyNo,
|
success: function(res) {
|
if (res.confirm) {
|
that.$u.api.operationTask.delDutyRecord({
|
id: that.dutyRecordInfo.id
|
}).then(res => {
|
if (res.code == 0) {
|
that.clear();
|
}
|
});
|
} else if (res.cancel) {
|
return;
|
}
|
}
|
});
|
},
|
autoValue(shift, date) {
|
const a = [
|
'sunday',
|
'monday',
|
'tuesday',
|
'wensday',
|
'thursday',
|
'friday',
|
'saturday'
|
]
|
const day = a[new Date().getDay()]
|
const hours = day + 'Hours'
|
const workHours = day + 'WorkHours'
|
const start = shift[`${hours}`].split('-')[0]
|
const end = shift[`${hours}`].split('-')[1]
|
this.dutyRecordInfo.startTime =
|
this.dutyRecordInfo.dutyDate.split(' ')[0] + ' ' + start + ':00'
|
// 夜班这种情况结束时间要计算到下一天
|
if (start < end) {
|
this.dutyRecordInfo.endTime =
|
this.dutyRecordInfo.dutyDate.split(' ')[0] + ' ' + end + ':00'
|
} else {
|
const nextDay = dateFormat(
|
new Date(new Date().setDate(new Date(date).getDate() + 1))
|
)
|
this.dutyRecordInfo.endTime = nextDay.split(' ')[0] + ' ' + end + ':00'
|
}
|
this.dutyRecordInfo.dutyTime = shift[`${workHours}`]
|
},
|
dutyDateChange(e) {
|
this.dutyRecordInfo.dutyDate = e + ' 00:00:00';
|
this.selectDutyDate();
|
},
|
validDutyForm() {
|
if (!this.dutyRecordInfo.dutyDate) {
|
return {
|
result: false,
|
msg: '班次日期不能为空'
|
}
|
}
|
if (!this.dutyRecordInfo.startTime) {
|
return {
|
result: false,
|
msg: '开始时间不能为空'
|
}
|
}
|
if (!this.dutyRecordInfo.endTime) {
|
return {
|
result: false,
|
msg: '结束时间不能为空'
|
}
|
}
|
if (!this.dutyRecordInfo.dutyTime) {
|
return {
|
result: false,
|
msg: '班次时间不能为空'
|
}
|
}
|
if (!this.dutyRecordInfo.shiftId) {
|
return {
|
result: false,
|
msg: '班次不能为空'
|
}
|
}
|
if (!this.dutyRecordInfo.workstationId) {
|
return {
|
result: false,
|
msg: '工作站不能为空'
|
}
|
}
|
return {
|
result: true,
|
msg: ''
|
}
|
},
|
noticeShow() {
|
if (this.dutyRecordInfo.isSubmit) {
|
this.submitNotice = "该班次已提交!";
|
this.unsubmitNotice = "";
|
} else {
|
this.unsubmitNotice = "该班次未提交!";
|
this.submitNotice = "";
|
}
|
},
|
clear() {
|
Object.keys(this.dutyRecordInfo).forEach(key => {
|
this.dutyRecordInfo[key] = null;
|
});
|
if (this.workstationInfo.workstationId) {
|
this.dutyRecordInfo.workstationId = this.workstationInfo.workstationId;
|
}
|
this.submitNotice = "";
|
this.unsubmitNotice = "";
|
},
|
edit() {
|
this.editState = !this.editState;
|
}
|
},
|
}
|
</script>
|
<style lang="scss" scoped>
|
.workstation-index-bg {
|
background-color: #F6F9FF;
|
background-image: url('~@/static/custom/product/productBg.png');
|
// background: linear-gradient(180deg,rgba(206,227,254,1),rgba(206,227,254,1) 20%,rgba(206,227,254,0.5) 40%,rgba(206,227,254,0.25) 60%,rgba(206,227,254,0.08) 80%,rgba(206,227,254,0));
|
padding: 0 20rpx;
|
background-attachment: fixed;
|
background-size: 100% auto;
|
background-repeat: no-repeat;
|
position: fixed;
|
top: 0;
|
bottom: 0;
|
width: 100%;
|
z-index: -1;
|
}
|
|
.slot-box {
|
/* #ifndef APP-NVUE */
|
display: flex;
|
/* #endif */
|
flex-direction: row;
|
align-items: center;
|
}
|
|
.slot-text {
|
flex: 1;
|
font-size: 30rpx;
|
margin-right: 10px;
|
}
|
|
.content-notice {
|
height: 45rpx;
|
text-align: center;
|
margin: 0;
|
}
|
|
.content {
|
font-size: 12px;
|
background-color: rgba(250, 252, 255, 0.36);
|
box-sizing: border-box;
|
border-radius: 10rpx;
|
margin: 0rpx 0rpx 24rpx;
|
padding: 10rpx 20rpx;
|
box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(127, 127, 127, 0.1) !important;
|
position: relative;
|
|
.content-header {
|
height: 90rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
|
.content-header-left {
|
display: flex;
|
align-items: center;
|
margin-left: 10rpx;
|
|
.content-header-icon-one {
|
background-image: url('~@/static/custom/materialReturn/label-icon-1.png');
|
background-size: 100% auto;
|
background-repeat: no-repeat;
|
height: 32rpx;
|
width: 32rpx;
|
}
|
|
.content-header-title {
|
margin-left: 11rpx;
|
font-size: 32rpx;
|
font-weight: bold;
|
color: #333333;
|
}
|
|
text {
|
font-size: 32rpx;
|
}
|
}
|
|
.content-header-right {
|
display: flex;
|
|
.edit-icon {
|
background-image: url('~@/static/custom/operationTask/edit-icon.png');
|
background-size: 100% auto;
|
background-repeat: no-repeat;
|
height: 32rpx;
|
width: 32rpx;
|
margin-right: 35rpx;
|
}
|
|
.clear-icon {
|
background-image: url('~@/static/custom/operationTask/workstation/icon_clear.png');
|
background-size: 100% auto;
|
background-repeat: no-repeat;
|
height: 32rpx;
|
width: 32rpx;
|
margin-right: 35rpx;
|
}
|
}
|
}
|
|
.content-body {
|
margin-top: 20rpx;
|
|
.content-body-title {
|
margin-left: 30rpx;
|
font-size: 38rpx;
|
font-weight: bold;
|
}
|
|
.content-body-item {
|
height: 100rpx;
|
border: 1px solid #ADC8E4;
|
line-height: 100rpx;
|
display: flex;
|
justify-content: space-between;
|
border: none;
|
margin: 20rpx 30rpx 0rpx 30rpx;
|
font-size: 32rpx;
|
|
.content-body-item-left {}
|
|
.content-body-item-right {
|
|
|
|
|
._select {
|
padding-top: 10rpx;
|
width: 300rpx;
|
border: none;
|
text-align: right;
|
}
|
}
|
}
|
|
.param-extra {
|
border-bottom: 1px solid #D5D5D5;
|
}
|
}
|
|
.content-footer {
|
margin: 30rpx ;
|
display: flex;
|
justify-content: flex-end;
|
|
.footer-button {
|
margin-right: 35rpx;
|
}
|
}
|
}
|
|
.bottom {
|
height: 100rpx;
|
display: flex;
|
justify-content: space-between;
|
|
.bottom-btn {
|
margin: 10rpx 10rpx;
|
}
|
}
|
</style>
|
