<template>
|
<view class="page">
|
<!-- 上半部分 -->
|
<!-- 开工完工 -->
|
<view class="top-section">
|
<!-- 第一行：工单号和刷新按钮 -->
|
<view class="header-row">
|
<text class="order-label">工单号</text>
|
<text class="order-input">{{ orderNo }}</text>
|
<button @click="handleRefresh" class="refresh-btn">刷新</button>
|
</view>
|
|
<!-- 三列布局 -->
|
<view class="three-column-layout">
|
<!-- 第一列：按钮 -->
|
<view class="column buttons-column">
|
<view class="button-item">
|
<button class="btn-disabled">开工</button>
|
</view>
|
<view class="button-item">
|
<button class="btn-disabled">完工</button>
|
</view>
|
<view class="button-item">
|
<button @click="stateCheck(2)" class="btn-blue">暂停</button>
|
</view>
|
</view>
|
|
<!-- 第二列：输入框 -->
|
<view class="column inputs-column">
|
<view class="input-item">
|
<input class="input-box" v-model="startTime" disabled="true" placeholder="开工时间=首件合格后取送检时间" />
|
</view>
|
<view class="input-item">
|
<input class="input-box" v-model="endTime" disabled="true" placeholder="报工数达到计划数后自动完工" />
|
</view>
|
<view class="input-item">
|
<input class="input-box" v-model="suspendTime" disabled="true" placeholder="点暂停按钮时写入" />
|
</view>
|
</view>
|
|
<!-- 第三列：工单状态 -->
|
<view class="column status-column">
|
<text class="status-label">工单状态</text>
|
<view class="status-circle">
|
<input class="status-input" v-model="workOrderStatus" disabled="true" />
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 下半部分保存取消按钮 -->
|
<view class="bottom-section">
|
<button class="save-btn" @click="sumbit">提交</button>
|
<button class="cancel-btn" @click="clean">取消</button>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
orderNo: String,
|
orderId: Number,
|
machineNo: String
|
},
|
data() {
|
return {
|
workOrderStatus: "",
|
startTime: "",
|
endTime: "",
|
suspendTime: "",
|
reverseTime: "",
|
statusForm: {},
|
flag: -1
|
};
|
},
|
created() {
|
|
// let machine = uni.getStorageSync('machine');
|
// let orderId = uni.getStorageSync('orderId');
|
// let orderNo = uni.getStorageSync('orderNo');
|
|
// if (orderId) {
|
// this.orderId = orderId;
|
// } else {
|
// if (!this.orderId) {
|
// this.orderId = uni.getStorageSync('id');
|
// }
|
|
// }
|
|
// if (orderNo) {
|
// this.orderNo = orderNo;
|
// } else {
|
// if (!this.orderNo) {
|
// this.orderNo = uni.getStorageSync('daa001');
|
// }
|
// }
|
|
// if (machine) {
|
// this.machineNo = machine;
|
// } else {
|
// if (!this.machineNo) {
|
// this.machineNo = uni.getStorageSync('machineNo');
|
// }
|
// }
|
|
|
if (!this.orderId && !this.orderNo) {
|
return;
|
}
|
|
this.init();
|
},
|
methods: {
|
// 刷新方法
|
handleRefresh() {
|
this.init(); // 刷新数据
|
},
|
sumbit() {
|
this.$post({
|
url: "/MesOrderSta/UpdateTime",
|
data: {
|
startTime: this.startTime,
|
endTime: this.endTime,
|
suspendTime: this.suspendTime,
|
reverseTime: this.reverseTime,
|
id: this.statusForm.id,
|
orderId: this.orderId,
|
machineNo: this.machineNo,
|
flag: this.flag
|
}
|
}).then(res => {
|
if (res.data.tbBillList) {
|
this.init();
|
this.$showMessage("保存成功");
|
} else {
|
this.clean();
|
this.$showMessage("保存失败");
|
}
|
})
|
},
|
clean() {
|
this.startTime = this.statusForm.startTime;
|
this.endTime = this.statusForm.endTime;
|
this.suspendTime = this.statusForm.suspendTime;
|
this.reverseTime = this.statusForm.reverseTime;
|
},
|
init() {
|
this.$post({
|
url: "/MesOrderSta/init",
|
data: {
|
orderId: this.orderId,
|
orderNo: this.orderNo,
|
machineNo: this.machineNo
|
}
|
}).then(res => {
|
this.findByOrderId();
|
})
|
},
|
findByOrderId() {
|
this.$post({
|
url: "/MesOrderSta/FindByOrderNo",
|
data: {
|
orderId: this.orderId,
|
orderNo: this.orderNo
|
}
|
}).then(res => {
|
this.statusForm = res.data.tbBillList;
|
this.startTime = res.data.tbBillList.startTime;
|
this.endTime = res.data.tbBillList.endTime;
|
this.suspendTime = res.data.tbBillList.suspendTime;
|
this.reverseTime = res.data.tbBillList.reverseTime;
|
this.workOrderStatus = res.data.tbBillList.orderStatus;
|
})
|
},
|
stateCheck(item) {
|
this.$post({
|
url: "/MesOrderSta/StateCheck",
|
data: {
|
orderId: this.orderId,
|
flag: item
|
}
|
}).then(res => {
|
if (res.data.tbBillList) {
|
this.flag = item;
|
switch (item) {
|
case 0:
|
this.startTime = this.$getDate('yyyy-mm-dd hh24:mi:ss');
|
this.endTime = this.statusForm.endTime;
|
this.suspendTime = this.statusForm.suspendTime;
|
this.reverseTime = this.statusForm.reverseTime;
|
break;
|
case 1:
|
this.startTime = this.statusForm.startTime;
|
this.endTime = this.$getDate('yyyy-mm-dd hh24:mi:ss');
|
this.suspendTime = this.statusForm.suspendTime;
|
this.reverseTime = this.statusForm.reverseTime;
|
break;
|
case 2:
|
this.startTime = this.statusForm.startTime;
|
this.endTime = this.statusForm.endTime;
|
this.suspendTime = this.$getDate('yyyy-mm-dd hh24:mi:ss');
|
this.reverseTime = this.statusForm.reverseTime;
|
break;
|
case 3:
|
this.startTime = this.statusForm.startTime;
|
this.endTime = this.statusForm.endTime;
|
this.suspendTime = this.statusForm.suspendTime;
|
this.reverseTime = this.$getDate('yyyy-mm-dd hh24:mi:ss');
|
break;
|
}
|
} else {
|
this.$showMessage(res.message);
|
}
|
})
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.page {
|
padding: 1vh; /* 原2vh，缩小整体上下间距 */
|
display: flex;
|
flex-direction: column;
|
box-sizing: border-box;
|
width: 100%;
|
}
|
|
/* 第一行：工单号和刷新按钮 */
|
.header-row {
|
display: flex;
|
align-items: center;
|
margin-bottom: 2vh;
|
width: 100%;
|
box-sizing: border-box;
|
}
|
|
.order-label {
|
font-size: 22px;
|
font-weight: 500;
|
white-space: nowrap;
|
flex-shrink: 0; /* 防止标签被压缩 */
|
margin-right: 1vw;
|
}
|
|
.order-input {
|
flex: 1;
|
padding: 0 1vw;
|
font-size: 30px; /* 设置为30px字体 */
|
font-weight: bold; /* 加粗显示 */
|
box-sizing: border-box;
|
height: 80px; /* 与按钮高度一致 */
|
min-width: 0; /* 允许输入框收缩 */
|
margin-right: 1vw; /* 与刷新按钮之间留间隙 */
|
display: flex;
|
align-items: center;
|
}
|
|
/* 刷新按钮样式 */
|
.refresh-btn {
|
background-color: #00A2E9;
|
/* 蓝色背景 */
|
color: white;
|
padding: 8px 20px;
|
border: none;
|
border-radius: 4px;
|
font-size: 22px;
|
font-weight: 500;
|
cursor: pointer;
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
transition: all 0.3s;
|
width: 150px; /* 设置宽度为150px */
|
height: 80px; /* 设置高度为80px */
|
flex-shrink: 0; /* 防止按钮被压缩 */
|
}
|
|
/* 三列布局 */
|
.three-column-layout {
|
display: flex;
|
gap: 2vw;
|
flex: 1;
|
width: 100%;
|
box-sizing: border-box;
|
}
|
|
.column {
|
display: flex;
|
flex-direction: column;
|
gap: 1.5vh;
|
flex: 1; /* 每列等宽 */
|
min-width: 0; /* 允许列收缩 */
|
}
|
|
/* 按钮列 */
|
.buttons-column {
|
/* width: 30%; 移除固定宽度 */
|
}
|
|
.button-item {
|
display: flex;
|
align-items: center;
|
height: 6vh;
|
width: 100%;
|
}
|
|
/* 输入框列 */
|
.inputs-column {
|
/* width: 40%; 移除固定宽度 */
|
}
|
|
.input-item {
|
display: flex;
|
align-items: center;
|
height: 6vh;
|
width: 100%;
|
}
|
|
/* 状态列 */
|
.status-column {
|
/* width: 30%; 移除固定宽度 */
|
justify-content: center;
|
padding-top: 2vh;
|
}
|
|
.status-label {
|
font-size: 22px;
|
font-weight: 500;
|
text-align: center;
|
margin-bottom: 1vh;
|
}
|
|
/* 上半部分：左右布局 */
|
.top-section {
|
display: flex;
|
flex-direction: column;
|
flex-grow: 1;
|
margin-bottom: 1.5vh; /* 原4vh，缩小上下间隔 */
|
width: 100%;
|
box-sizing: border-box;
|
}
|
|
/* 统一按钮和输入框的高度 */
|
button,
|
.input-box {
|
height: 6vh; /* 按钮和输入框更高 */
|
}
|
|
button {
|
width: 100%; /* 按钮占满容器宽度 */
|
padding: 0;
|
font-size: 22px; /* 字体更大 */
|
font-weight: 500;
|
line-height: 6vh;
|
border-radius: 4px;
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
transition: all 0.3s;
|
box-sizing: border-box;
|
}
|
|
.btn-disabled {
|
background-color: #ccc;
|
color: #fff;
|
border: none;
|
}
|
|
.btn-blue {
|
background-color: #00A2E9;
|
color: #fff;
|
border: none;
|
}
|
|
.input-box {
|
width: 100%; /* 输入框占满容器宽度 */
|
padding: 0 1vw;
|
font-size: 22px; /* 字体更大 */
|
border: 1px solid #ccc;
|
border-radius: 4px;
|
box-sizing: border-box;
|
min-width: 0; /* 允许输入框收缩 */
|
}
|
|
.status-circle {
|
width: 11vw;
|
/* Enlarged status circle */
|
height: 11vw;
|
background-color: #00A2E9;
|
border-radius: 50%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
margin: 0 auto;
|
min-width: 80px; /* 设置最小宽度 */
|
min-height: 80px; /* 设置最小高度 */
|
}
|
|
.status-input {
|
color: white;
|
font-size: 22px;
|
font-weight: 500;
|
/* Increased font size for status input */
|
background: transparent;
|
border: none;
|
text-align: center;
|
width: 100%;
|
height: 100%;
|
outline: none;
|
}
|
|
/* 下半部分：保存和取消按钮 */
|
.bottom-section {
|
display: flex;
|
justify-content: space-between;
|
margin-top: 0.5vh; /* 原1vh，缩小与上方间隔 */
|
height: 100%;
|
width: 100%;
|
box-sizing: border-box;
|
}
|
|
.save-btn,
|
.cancel-btn {
|
width: 48%;
|
padding: 1.5vh;
|
background-color: #00A2E9;
|
color: white;
|
border: none;
|
text-align: center;
|
font-size: 22px;
|
font-weight: 500;
|
/* Larger font for buttons */
|
height: 100%;
|
border-radius: 4px;
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
transition: all 0.3s;
|
box-sizing: border-box;
|
}
|
</style>
|
