568 lines
14 KiB
Vue
Raw Normal View History

<template>
<view >
<view class="fixedheader">
<headers :showBack="true">
<view class="headerName">
{{pageTitle}}
</view>
</headers>
</view>
<scroll-view class="smallHeight" :style="{ 'padding-top': (statusBarHeight + 45) * 1.5 + 'rpx' }" scroll-y>
<view class="formBox">
<form @submit="formSubmit">
<!-- <view class="uni-form-item">
<view class="uni-form-label">
混泥土标号<text class="star">*</text>
</view>
<view class="uni-form-input">
<input class="uni-input" placeholder-class="cl" name="concreteTab" :value="form.concreteTab" placeholder="请输入" />
</view>
</view> -->
<view class="uni-form-item">
<view class="uni-form-label">
楼栋<text class="star">*</text>
</view>
<view class="uni-form-input">
<picker @change="bindPickerChange" :value="buildIndex" :range="buildList" range-key="buildName">
<view class="uni-input uni-select cl" v-if="buildIndex==null">
请选择 <image class="icon-down" src="/static/icon-down-black.png" mode=""></image>
</view>
<view class="uni-input uni-select" v-else>{{buildList[buildIndex].buildName}}
<image class="icon-down" src="/static/icon-down-black.png" mode=""></image>
</view>
</picker>
</view>
</view>
<view class="uni-form-item">
<view class="uni-form-label">
楼层<text class="star">*</text>
</view>
<view class="uni-form-input">
<picker @change="bindPickerChange2" :value="floorIndex" :range="floorList" range-key="floorName">
<view class="uni-input uni-select cl" v-if="floorIndex==null">
请选择 <image class="icon-down" src="/static/icon-down-black.png" mode=""></image>
</view>
<view class="uni-input uni-select" v-else>{{floorList[floorIndex].floorName}}
<image class="icon-down" src="/static/icon-down-black.png" mode=""></image>
</view>
</picker>
</view>
</view>
<!-- <view class="uni-form-item">
<view class="uni-form-label">
设计强度
</view>
<view class="uni-form-input">
</view>
</view>
<view class="designBox">
<checkbox-group @change="checkboxChange" class="designItem">
<label class="uni-list-cell uni-list-cell-pd" v-for="item in selectList" :key="item.name">
<checkbox :value="item.name" :checked="item.checked" />{{item.name}}
</label>
</checkbox-group>
</view> -->
<view class="uni-form-item">
<view class="uni-form-label">
施工段<text class="star">*</text>
</view>
<view class="uni-form-input">
<input class="uni-input" placeholder-class="cl" name="constructionSection" :value="form.constructionSection" placeholder="请输入" />
</view>
</view>
<view class="uni-form-item">
<view class="uni-form-label">
分包单位<text class="star">*</text>
</view>
<view class="uni-form-input">
<input class="uni-input" placeholder-class="cl" name="subpackage" :value="form.subpackage" placeholder="请输入" />
</view>
</view>
<view class="uni-form-item">
<view class="uni-form-label">
搅拌站单位<text class="star">*</text>
</view>
<view class="uni-form-input">
<input class="uni-input" placeholder-class="cl" name="mixingPlant" :value="form.mixingPlant" placeholder="请输入" />
</view>
</view>
<view class="uni-form-item">
<view class="uni-form-label">
浇筑日期<text class="star">*</text>
</view>
<view class="uni-form-input">
<picker mode="date" :value="form.pourTime" @change="bindDateChange">
<view class="uni-input uni-select cl" v-if="form.pourTime==''">
请选择 <image class="icon-down" src="/static/icon-down-black.png" mode=""></image>
</view>
<view class="uni-input uni-select" v-else>{{form.pourTime}}
<image class="icon-down" src="/static/icon-down-black.png" mode=""></image>
</view>
</picker>
</view>
</view>
<view class="uni-form-item n-bottom">
<view class="uni-form-label">
浇筑内容<text class="star">*</text>
</view>
</view>
<view class="tables">
<view class="t_header">
<view class="t_title">混凝土标号</view>
<view class="t_title">种类</view>
<view class="t_title">方量</view>
<view class="t_title">操作</view>
</view>
<view class="t_content">
<view class="t_td" v-for="(item,index) in tableData" :key="index">
<view class="t_input">
<input v-model="item.concreteLabel" placeholder="请输入" />
</view>
<view class="t_input">
<input v-model="item.concreteType" placeholder="请输入" />
</view>
<view class="t_input">
<input v-model="item.squareQuantity" placeholder="请输入" />
</view>
<view class="t_input">
<view class="delete_btn" @click="deleteTableData(index)">
<uni-icons2 type="trash" size="12" color="#F56C6C"></uni-icons2>
<text style="color: #F56C6C;">删除</text>
</view>
</view>
</view>
</view>
</view>
<view class="add_btn" @click="addTableData">添加</view>
<!-- <view class="uni-form-item">
<view class="uni-form-label">
计划方量<text class="star">*</text>
</view>
<view class="uni-form-input">
<input class="uni-input" placeholder-class="cl" name="planVolume" :value="form.planVolume" placeholder="请输入" />
</view>
</view> -->
<div class="submitBtn_warp">
<button form-type="submit" type="primary" class="btn submitBtn big">提交</button>
</div>
</form>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
pageTitle: '浇筑令申请',
buildIndex: null,
floorIndex:null,
selectList: [{name:'C15'}, {name:'C20'}, {name:'C25'}, {name:'C30'}, {name:'C35'},
{name:'C40'}, {name:'C45'}, {name:'C50'}, {name:'C55'}, {name:'C60'}],
selectArr:[],
buildList:[],
floorList:[],
tableData:[{
concreteLabel: '',
concreteType: '',
squareQuantity: ''
}],
form: {
buildId: '',
floorId: '',
mixingPlant: "",
pourTime: "",
projectSn: "",
subpackage: "",
constructionSection: ''
},
personList: [],
projectDetail: {},
isAdd: true,
statusBarHeight: 0
}
},
onLoad(options) {
this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'))
if (options.id) {
this.isAdd = false
this.pageTitle='编辑电子浇筑令'
this.getDetails(options.id)
}else{
this.loadBuildData()
}
},
onShow() {
this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight;
},
methods: {
deleteTableData(index){
if(this.tableData.length>1){
this.tableData.splice(index,1)
}
},
addTableData(val){
this.tableData.push({
concreteLabel: '',
concreteType: '',
squareQuantity: ''
})
},
loadBuildData(id){
this.sendRequest({
url: 'xmgl/massReboundBuild/getBuildFloorList',
data: {projectSn:this.projectDetail.projectSn},
method: "POST",
success:(res)=>{
this.buildList=res.result
if(id){
for (var i = 0; i < this.buildList.length; i++) {
var item = this.buildList[i];
if(item.id==this.form.buildId){
this.buildIndex=i
this.floorList=item.floorList;
for (var j = 0; j < this.floorList.length; j++) {
if(this.floorList[j].floorId==this.form.floorId){
this.floorIndex=j
}
}
}
}
}
}
})
},
goSelectPersonFn() {
uni.navigateTo({
url: './personList'
// url:'../../selectPerson/selectPerson2'
})
},
getDetails(id) {
this.sendRequest({
url: 'xmgl/electronPourOrder/queryById',
data: {
id: id
},
method: "POST",
success:(res)=> {
this.form = res.result
if(this.form.designStrength){
var items = this.selectList,values = [];
if(this.form.designStrength.indexOf(',')!=-1){
values=this.form.designStrength.split(',')
}else{
values=[this.form.designStrength]
}
for (var i = 0, lenI = this.selectList.length; i < lenI; ++i) {
const item = this.selectList[i]
if(values.includes(item.name)){
this.$set(item,'checked',true)
}else{
this.$set(item,'checked',false)
}
}
// console.log(this.selectList)
}
this.loadBuildData(id)
}
})
},
bindPickerChange: function(e) {
this.buildIndex = e.target.value
this.floorList=this.buildList[e.target.value].floorList
this.floorIndex=null
},
bindPickerChange2: function(e) {
this.floorIndex = e.target.value
},
bindDateChange: function(e) {
this.form.pourTime = e.target.value
},
checkboxChange: function (e) {
// var items = this.selectList,
// values = e.detail.value;
this.selectArr=e.detail.value;
// for (var i = 0, lenI = items.length; i < lenI; ++i) {
// const item = items[i]
// if(values.includes(item.value)){
// this.$set(item,'checked',true)
// }else{
// this.$set(item,'checked',false)
// }
// }
},
formSubmit(e) {
var that = this
console.log(e)
var params = e.detail.value
params.projectSn = this.projectDetail.projectSn
// if (params.concreteTab == '') {
// uni.showToast({
// title: '请输入混泥土标号',
// icon: 'none'
// })
// return false;
// }
params.contentList = this.tableData
if (this.buildIndex == null) {
uni.showToast({
title: '请选择楼栋',
icon: 'none'
})
return false;
}
if (this.floorIndex == null) {
uni.showToast({
title: '请选择楼层',
icon: 'none'
})
return false;
}
if (params.subpackage == ''){
uni.showToast({
title: '请输入分包单位',
icon: 'none'
})
return false;
}
if (params.mixingPlant == ''){
uni.showToast({
title: '请输入搅拌站单位',
icon: 'none'
})
return false;
}
params.buildId = this.buildList[this.buildIndex].id
params.floorId = this.floorList[this.floorIndex].floorId
params.pourTime = this.form.pourTime
if(params.pourTime == ''){
uni.showToast({
title: '请选择浇筑日期',
icon: 'none'
})
return false;
}
let flag = true
params.contentList.forEach(item=>{
if(item.concreteLabel === '' || item.concreteType === '' || item.squareQuantity === ''){
flag = false
}
})
if(!flag){
uni.showToast({
title: '浇筑内容不能为空',
icon: 'none'
})
return false;
}
console.log(params)
// var url = 'xmgl/electronPourOrder/edit'
// if (this.isAdd) {
// url = 'xmgl/electronPourOrder/add'
// } else {
// params.id = this.form.id
// }
this.sendRequest({
url: 'xmgl/massReboundPouringOrder/add',
data: params,
method: "POST",
success(res) {
uni.showToast({
title: '保存成功!'
})
uni.navigateBack({
})
}
})
}
}
}
</script>
<style lang="scss" scoped>
.personListBox {
// background-color: #f7f7f7;
border-radius: 4px;
overflow: hidden;
border-left: 1px dashed #e6e6e6;
position: relative;
.personLeft {
width: calc(100% - 20rpx);
}
.personItem {
float: left;
width: calc(33.33% - 21px);
height: 54px;
text-align: center;
font-size: 24rpx;
border-bottom: 1px dashed #e6e6e6;
padding: 0px 20rpx 0;
border-right: 1px dashed #e6e6e6;
border-top: 1px dashed #e6e6e6;
background-color: #f7f7f7;
.name {
font-size: 30rpx;
padding-top: 16rpx;
}
.txt {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
&.total {
display: inline-flex;
align-items: center;
font-size: 30rpx;
justify-content: center;
}
// &:nth-child(3n){
// border-right: none;
// }
}
.icon-right {
position: absolute;
right: 0;
top: calc(50% - 7px);
width: 16rpx;
height: 28rpx;
}
}
.designBox{
background-color: #f9f9f9;
border-radius: 4px;
padding: 20rpx 20rpx 0;
overflow: hidden;
margin-bottom: 40rpx;
.uni-list-cell{
width: 20%;
float: left;
margin-bottom: 20rpx;
}
}
.submitBtn{
width: 90%;
margin: 0 auto;
font-size: 40rpx;
// margin-top: 200rpx;
}
.formBox{
margin: 0;
.uni-form-item{
padding: 0 30rpx;
height: 90rpx;
border-bottom: 0.5rpx solid #E7E7E7;
font-size: 28rpx;
margin-bottom: 0;
.uni-form-input .uni-input {
border: 0;
padding: 0;
}
.icon-down{
transform: rotate(-90deg);
}
}
.n-bottom{
border-bottom: 0;
}
}
.tables{
padding: 0 50rpx;
font-size: 28rpx;
margin-bottom: 32rpx;
.t_header{
display: flex;
font-size: 24rpx;
.t_title{
flex: 1;
text-align: center;
line-height: 48rpx;
}
}
.t_content{
border-top: 1px solid #e7e7e7;
border-left: 1px solid #e7e7e7;
.t_td{
display: flex;
.t_input{
flex: 1;
height: 60rpx;
text-align: center;
border-right: 1px solid #e7e7e7;
border-bottom: 1px solid #e7e7e7;
uni-input{
height: 100%;
font-size: 28rpx;
}
.delete_btn{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
line-height: 60rpx;
uni-text{
margin-right: 10rpx;
}
}
}
}
}
}
.add_btn{
margin: 0 auto;
width: 252rpx;
height: 56rpx;
border: 1px solid #5181F6;
border-radius: 50rpx;
text-align: center;
font-size: 28rpx;
color: #5181F6;
line-height: 52rpx;
}
.fixedheader{
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 2;
}
.smallHeight{
padding-bottom: 180rpx;
}
.submitBtn_warp{
width: 100%;
height: 130rpx;
background: #fff;
padding-top: 20rpx;
position: fixed;
bottom: 0rpx;
left: 50%;
transform: translateX(-50%);
}
</style>