306 lines
7.3 KiB
Vue
306 lines
7.3 KiB
Vue
<template>
|
|
<!-- 新增制梁台座 -->
|
|
<view class="fullHeight">
|
|
<headers :showBack="true" class="">
|
|
<view class="headerName">
|
|
工序详情
|
|
<view class="headerBack" @click="returnBack">
|
|
<u-icon name="arrow-left" color="#333333" size="40"></u-icon>
|
|
</view>
|
|
</view>
|
|
</headers>
|
|
<view class="makeBeamForm">
|
|
<u-form :model="form" ref="uForm">
|
|
<u-form-item label="工序名称" prop="name" label-width="200">
|
|
<u-input :disabled="!isShowDetail" v-model="form.name" placeholder="请输入工序名称" />
|
|
</u-form-item>
|
|
<u-form-item label="计划开始时间" prop="time" label-width="200">
|
|
<span class="mustInput">*</span>
|
|
<view class="input-text" @click="openPlanTime(1)" v-if="form.planStartTime == ''">
|
|
请选择时间
|
|
</view>
|
|
<view class="input-detail" @click="openPlanTime(1)" v-else>
|
|
{{ form.planStartTime }}
|
|
</view>
|
|
</u-form-item>
|
|
<u-form-item label="计划结束时间" prop="name" label-width="200">
|
|
<span class="mustInput">*</span>
|
|
<view class="input-text" @click="openPlanTime(2)" v-if="form.planStartTime2 == ''">
|
|
请选择时间
|
|
</view>
|
|
<view class="input-detail" @click="openPlanTime(2)" v-else>
|
|
{{ form.planStartTime2 }}
|
|
</view>
|
|
</u-form-item>
|
|
<u-form-item label="实际开始时间" prop="name" label-width="200">
|
|
<view class="input-text" @click="openPlanTime(3)" v-if="form.planStartTime3 == ''">
|
|
请选择时间
|
|
</view>
|
|
<view class="input-detail" @click="openPlanTime(3)" v-else>
|
|
{{ form.planStartTime3 }}
|
|
</view>
|
|
</u-form-item>
|
|
<u-form-item label="实际结束时间" prop="name" label-width="200">
|
|
<view class="input-text" @click="openPlanTime(4)" v-if="form.planStartTime4 == ''">
|
|
请选择时间
|
|
</view>
|
|
<view class="input-detail" @click="openPlanTime(4)" v-else>
|
|
{{ form.planStartTime4 }}
|
|
</view>
|
|
</u-form-item>
|
|
<u-form-item label="制梁台座编号" prop="name" label-width="200">
|
|
<u-input :disabled="!isShowDetail" v-model="form.name" placeholder="请输入制梁台座编号" />
|
|
</u-form-item>
|
|
<u-form-item label="工序负责人" prop="name" label-width="200">
|
|
<u-input :disabled="!isShowDetail" v-model="form.name" placeholder="请输入工序负责人" />
|
|
</u-form-item>
|
|
</u-form>
|
|
</view>
|
|
|
|
<!-- 计划开始时间 -->
|
|
<u-picker v-model="showPlanStart" mode="time" @confirm="confirmPlanStart" :params="timeParams"></u-picker>
|
|
<!-- 计划结束时间 -->
|
|
<u-picker v-model="showPlanStart2" mode="time" @confirm="confirmPlanStart2" :params="timeParams"></u-picker>
|
|
<!-- 实际开始时间 -->
|
|
<u-picker v-model="showPlanStart3" mode="time" @confirm="confirmPlanStart3" :params="timeParams"></u-picker>
|
|
<!-- 实际结束时间 -->
|
|
<u-picker v-model="showPlanStart4" mode="time" @confirm="confirmPlanStart4" :params="timeParams"></u-picker>
|
|
|
|
<view class="submitMakeBeam" @click="submit" v-if="isShowDetail">
|
|
确定
|
|
</view>
|
|
<view class="submitMakeBeam" @click="isShowDetail = true" v-else>
|
|
更新进度
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import multiplePicker from "@/components/multiple-picker/multiple-picker";
|
|
export default {
|
|
components: {
|
|
multiplePicker
|
|
},
|
|
data() {
|
|
return {
|
|
timeParams: {
|
|
year: true,
|
|
month: true,
|
|
day: true,
|
|
hour: true,
|
|
minute: true,
|
|
second: true
|
|
},
|
|
isShowDetail: false,
|
|
showType: false,
|
|
showPlanStart: false,
|
|
showPlanStart2: false,
|
|
showPlanStart3: false,
|
|
showPlanStart4: false,
|
|
list: [{
|
|
value: '1',
|
|
label: '江'
|
|
},
|
|
{
|
|
value: '2',
|
|
label: '湖'
|
|
}
|
|
],
|
|
form: {
|
|
planStartTime: "",
|
|
planStartTime2: "",
|
|
planStartTime3: "",
|
|
planStartTime4: "",
|
|
selectValue: '', //回显输入框
|
|
selectIndex: [], //回显下拉框
|
|
},
|
|
selectMultiple: {
|
|
show: false,
|
|
index: [],
|
|
columns: [{
|
|
label: '测试1',
|
|
value: '1',
|
|
},
|
|
{
|
|
label: '测试2',
|
|
value: '2',
|
|
},
|
|
{
|
|
label: '测试3',
|
|
value: '3',
|
|
},
|
|
{
|
|
label: '测试4',
|
|
value: '4',
|
|
},
|
|
{
|
|
label: '测试5',
|
|
value: '5',
|
|
},
|
|
{
|
|
label: '测试6',
|
|
value: '6',
|
|
},
|
|
{
|
|
label: '测试7',
|
|
value: '7',
|
|
}
|
|
],
|
|
},
|
|
};
|
|
},
|
|
methods: {
|
|
// 确认选中时间
|
|
confirmPlanStart(e) {
|
|
//此处实现选择器值的接收
|
|
this.form.planStartTime = e.year + '-' + e.month + '-' +
|
|
e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
|
|
},
|
|
confirmPlanStart2(e) {
|
|
//此处实现选择器值的接收
|
|
this.form.planStartTime2 = e.year + '-' + e.month + '-' +
|
|
e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
|
|
},
|
|
confirmPlanStart3(e) {
|
|
//此处实现选择器值的接收
|
|
this.form.planStartTime3 = e.year + '-' + e.month + '-' +
|
|
e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
|
|
},
|
|
confirmPlanStart4(e) {
|
|
//此处实现选择器值的接收
|
|
this.form.planStartTime4 = e.year + '-' + e.month + '-' +
|
|
e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
|
|
},
|
|
|
|
|
|
openPlanTime(type) {
|
|
if (!this.isShowDetail) {
|
|
console.log("详情状态无法编辑")
|
|
return
|
|
}
|
|
|
|
if (type === 1) {
|
|
this.showPlanStart = true
|
|
}
|
|
if (type === 2) {
|
|
this.showPlanStart2 = true
|
|
}
|
|
if (type === 3) {
|
|
this.showPlanStart3 = true
|
|
}
|
|
if (type === 4) {
|
|
this.showPlanStart4 = true
|
|
}
|
|
},
|
|
returnBack() {
|
|
console.log("返回")
|
|
uni.navigateBack()
|
|
},
|
|
confirm(e) {
|
|
console.log("下拉确认", e)
|
|
this.form.type = e[0].label
|
|
},
|
|
openTypeSelect() {
|
|
this.showType = true
|
|
},
|
|
handleMultiple(val) {
|
|
console.log(val);
|
|
|
|
this.selectMultiple.index = val || [];
|
|
this.selectMultiple.show = true;
|
|
},
|
|
confirmMultiple(e) {
|
|
console.log(e);
|
|
|
|
let temp = [];
|
|
e.selected.forEach(item => {
|
|
temp.push(item.label);
|
|
})
|
|
this.form.selectValue = temp.toString();
|
|
this.form.selectIndex = e.value;
|
|
this.selectMultiple.show = false;
|
|
},
|
|
changeMultiple(e) {
|
|
console.log("选择改变", e);
|
|
},
|
|
submit() {
|
|
this.$refs.uForm.validate(valid => {
|
|
if (valid) {
|
|
console.log('验证通过');
|
|
this.isShowDetail = false
|
|
} else {
|
|
console.log('验证失败');
|
|
}
|
|
});
|
|
}
|
|
},
|
|
onReady() {}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.headerBack {
|
|
position: absolute;
|
|
left: 5%;
|
|
top: 5%;
|
|
}
|
|
|
|
.makeBeamForm {
|
|
padding: 0 38rpx;
|
|
|
|
.input-text {
|
|
color: rgb(192, 196, 204);
|
|
}
|
|
}
|
|
|
|
.mustInput {
|
|
color: red;
|
|
position: absolute;
|
|
top: 26rpx;
|
|
left: -20rpx;
|
|
}
|
|
|
|
.submitMakeBeam {
|
|
position: fixed;
|
|
bottom: 50rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 665rpx;
|
|
height: 69rpx;
|
|
margin-left: 40rpx;
|
|
color: #fff;
|
|
background: #5181F6;
|
|
border-radius: 142rpx;
|
|
}
|
|
|
|
.form {
|
|
width: 100%;
|
|
padding: 40rpx 30rpx;
|
|
box-sizing: border-box;
|
|
|
|
.item {
|
|
width: 100%;
|
|
padding: 20rpx 0;
|
|
|
|
.select {
|
|
width: 100%;
|
|
border: 1px solid #dadbde;
|
|
padding-top: 6px;
|
|
padding-bottom: 6px;
|
|
padding-left: 9px;
|
|
padding-right: 9px;
|
|
border-radius: 4px;
|
|
font-size: 30rpx;
|
|
box-sizing: border-box;
|
|
color: #CCCCCC;
|
|
line-height: 52rpx;
|
|
|
|
&.selected {
|
|
color: black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |