319 lines
6.3 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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="dataList">
<view class="listItem" v-for="item in makeBeamList" :key="item.id" style="border-bottom: none;">
<view class="itemBox" @click="toSaveBeamRecord">
<view class="qrCode">
<image class="img" :src="url_config+'image/'+item.qrCode"></image>
</view>
<view class="makeBeamText">
<view class="makeType">
{{ item.pedestalTypeName }}
</view>
</view>
<view class="makeBeamTool">
<view class="edit-btn">
编辑
</view>
<view class="delete-btn">
删除
</view>
</view>
</view>
</view>
<view class="addMakeBeam" @click="toAddSaveBeam">
新增存梁台座
</view>
<!-- <view class="noData" v-if="makeBeamList.length === 0">
暂无数据~
</view> -->
</view>
<!-- 新增 存梁台座 输入框 -->
<u-popup v-model="addSaveBeamShow" :closeable="true" mode="center" border-radius="14">
<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="200">
<span class="mustInput">*</span>
<u-input v-model="form.name" />
</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>
</view>
</template>
<script>
import headers from "@/components/headers/headers.vue"
export default {
components: {
headers
},
data() {
return {
form: {
name: ''
},
makeBeamList: [],
addSaveBeamShow: false,
};
},
mounted() {
this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'))
this.getMakeBeamList()
},
// 必须要在onReady生命周期因为onLoad生命周期组件可能尚未创建完毕
methods: {
toSaveBeamRecord() {
uni.navigateTo({
url: "/pages/projectEnd/smartBeamField/saveBeamRecord"
})
},
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>
.dataList {
padding: 0 40rpx;
padding-bottom: 70rpx;
.listTitle {
font-family: Acme, Acme;
color: #545454;
font-size: 32rpx;
margin-top: 50rpx
}
.listSearch {
margin-top: 30rpx
}
.addMakeBeam {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
bottom: 20rpx;
width: 665rpx;
height: 69rpx;
color: #FFFFFF;
font-size: 27rpx;
background: #5181F6;
border-radius: 142rpx;
}
.listItem {
padding: 20rpx 0;
border-bottom: 1px solid #E6E6E6;
// 制梁台座
.itemBox {
width: 688rpx;
height: 170rpx;
padding: 30rpx 22rpx;
background: #FFFFFF;
box-shadow: 0px 0 19rpx 0px #E6E6E6;
border-radius: 19rpx;
margin: 0 auto;
display: flex;
position: relative;
.qrCode {
width: 100rpx;
height: 100rpx;
image {
width: 100%;
height: 100%;
}
}
.makeBeamText {
margin-left: 32rpx;
.makeType {
font-size: 31rpx;
color: #333333;
}
.makeStage {
font-size: 24rpx;
color: #8C8C8C;
margin-top: 14rpx;
}
.makeName {
font-size: 24rpx;
color: #8C8C8C;
margin-top: 14rpx;
}
}
.makeBeamTool {
display: flex;
position: absolute;
right: 30rpx;
bottom: 30rpx;
.edit-btn {
display: flex;
align-items: center;
justify-content: center;
width: 77rpx;
height: 40rpx;
cursor: pointer;
color: #5680FA;
font-size: 20rpx;
background: rgba(86, 128, 250, 0.1);
border-radius: 8rpx;
}
.delete-btn {
display: flex;
align-items: center;
justify-content: center;
width: 77rpx;
height: 40rpx;
cursor: pointer;
color: #EA3941;
font-size: 20rpx;
margin-left: 24rpx;
background: rgba(234, 57, 65, 0.1);
border-radius: 8rpx;
}
}
}
.itemTitle {
font-size: 27rpx;
font-family: Advent Pro, Advent Pro;
color: #333333;
}
}
}
.noData {
text-align: center;
padding: 120rpx 0;
color: #999;
}
.headerScan {
position: absolute;
right: 5%;
top: 5%;
}
.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: 10rpx;
}
.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;
}
</style>