371 lines
7.4 KiB
Vue
Raw Normal View History

<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="save-beam-title">
存梁台座编号: 1#-1
</view>
<view class="current-save-beam">
<view class="list-title">
当前存梁
</view>
<view class="list-item" v-for="item in 2">
<view class="item-row">
<view class="row-title">
梁号:
</view>
<view class="row-text">
1#-1
</view>
</view>
<view class="item-row">
<view class="row-title">
所属桥段:
</view>
<view class="row-text">
新市枢纽D匝道1号桥
</view>
</view>
<view class="item-row">
<view class="row-title">
梁板类型:
</view>
<view class="row-text">
箱梁
</view>
</view>
</view>
</view>
<view class="current-save-beam">
<view class="list-title">
历史存梁
</view>
<view class="list-item" v-for="item in 2">
<view class="item-row">
<view class="row-title">
梁号:
</view>
<view class="row-text">
1#-1
</view>
</view>
<view class="item-row">
<view class="row-title">
所属桥段:
</view>
<view class="row-text">
新市枢纽D匝道1号桥
</view>
</view>
<view class="item-row">
<view class="row-title">
梁板类型:
</view>
<view class="row-text">
箱梁
</view>
</view>
</view>
</view>
<view class="addMakeBeam" @click="toAddSaveBeam">
变更存梁
</view>
<!-- 新增 存梁台座 输入框 -->
<u-popup v-model="addSaveBeamShow" :closeable="true" mode="center" border-radius="14" @close="changeSaveBeamClose">
<view class="dialog-content">
<view class="dialog-title">
变更存梁
</view>
<view class="input-form">
<u-form :model="form">
<u-form-item label="梁号" prop="name" label-width="100">
<span class="mustInput">*</span>
<view :class="['select', form.selectValue ? 'selected' : '']"
@tap="handleMultiple(form.selectIndex)">
{{form.selectValue || '请选择梁号'}}
</view>
</u-form-item>
</u-form>
</view>
<view class="dialog-tool">
<view class="cancel-btn" @click="addSaveBeamShow = false">
取消
</view>
<view class="submit-btn" @click="submitSaveBeam">
确定
</view>
</view>
</view>
</u-popup>
<multiple-picker :selectMax="2" title="请选择" :show="selectMultiple.show" :columns="selectMultiple.columns"
:defaultIndex="selectMultiple.index" @confirm="confirmMultiple" @cancel="selectMultiple.show = false"
@change="changeMultiple"></multiple-picker>
</view>
</template>
<script>
import multiplePicker from "@/components/multiple-picker/multiple-picker";
import headers from "@/components/headers/headers.vue"
export default {
components: {
headers,
multiplePicker
},
data() {
return {
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',
}
],
},
form: {
selectValue: '', //回显输入框
selectIndex: [], //回显下拉框
},
makeBeamList: [],
addSaveBeamShow: false,
};
},
mounted() {
this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'))
this.getMakeBeamList()
},
// 必须要在onReady生命周期因为onLoad生命周期组件可能尚未创建完毕
methods: {
changeSaveBeamClose() {
this.form = {
selectValue: '', //回显输入框
selectIndex: [], //回显下拉框
}
},
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);
},
submitSaveBeam() {
if (this.form.name == '') {
uni.showToast({
title: '请输入编号',
icon: 'error',
});
} else {
console.log("提交存梁台座", this.form.name)
this.addSaveBeamShow = false
}
},
toAddSaveBeam() {
console.log("去新增存梁台座")
this.addSaveBeamShow = true
},
returnBack() {
console.log("返回")
uni.navigateBack()
},
//获取制梁台座列表
getMakeBeamList() {
this.sendRequest({
url: "xmgl/smartBeamFieldMakeBeamPedestal/list",
data: {
projectSn: this.projectDetail.projectSn
},
method: "get",
success: res => {
console.log("制梁台座列表", res)
this.makeBeamList = res.result
}
})
},
},
}
</script>
<style lang="scss" scoped>
.save-beam-title {
padding: 0 40rpx;
margin-top: 30rpx;
font-size: 36rpx;
}
.current-save-beam {
padding: 0 40rpx;
padding-bottom: 50rpx;
border-bottom: 4rpx solid #E6E6E6;
.list-title {
font-weight: bold;
margin-top: 50rpx;
}
.list-item {
font-size: 27rpx;
.item-row {
display: flex;
margin-top: 40rpx;
.row-title {
width: 300rpx;
color: #8C8C8C;
}
.row-text {
color: #333333;
}
}
}
}
.noData {
text-align: center;
padding: 120rpx 0;
color: #999;
}
.headerBack {
position: absolute;
left: 5%;
top: 5%;
}
.dialog-content {
width: 680rpx;
padding: 30rpx;
padding-bottom: 50rpx;
position: relative;
.dialog-title {
border-left: 6rpx solid #5181F6;
padding-left: 20rpx;
}
.input-form {
margin-top: 40rpx;
margin-left: 30rpx;
.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;
}
}
}
.dialog-tool {
display: flex;
width: 400rpx;
margin: 0 auto;
margin-top: 50rpx;
.submit-btn {
display: flex;
justify-content: center;
align-items: center;
width: 165rpx;
height: 69rpx;
margin-left: 50rpx;
color: #FFFFFF;
font-size: 27rpx;
background: #5181F6;
border-radius: 42rpx;
}
.cancel-btn {
display: flex;
justify-content: center;
align-items: center;
width: 165rpx;
height: 69rpx;
font-size: 27rpx;
border: 1px solid #8C8C8C;
border-radius: 42rpx;
}
}
}
.mustInput {
color: red;
position: absolute;
top: 26rpx;
left: -20rpx;
}
.addMakeBeam {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
bottom: 20rpx;
width: 665rpx;
height: 69rpx;
margin-left: 40rpx;
color: #FFFFFF;
font-size: 27rpx;
background: #5181F6;
border-radius: 142rpx;
}
</style>