371 lines
7.4 KiB
Vue
371 lines
7.4 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="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> |