<template> <div> <el-dialog v-dialogDrag :close-on-click-modal="false" title="批量层" :visible.sync="isVisible" width="50%" @close="close" :modal-append-to-body="false" > <div> <table border="1"> <tr> <td class="tdright">层建筑面积(㎡)</td> <td> <el-input v-model="qlcData.cjzmj" oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null" ></el-input> </td> <td class="tdright"> 层套内建筑面积(㎡) </td> <td> <el-input v-model="qlcData.ctnjzmj" oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null" ></el-input> </td> </tr> <tr> <td class="tdright">层阳台面积(㎡)</td> <td> <el-input v-model="qlcData.cytmj" class="" oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null" ></el-input> </td> <td class="tdright"> 层半墙面积(㎡) </td> <td> <el-input v-model="qlcData.cbqmj" class="" oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null" ></el-input> </td> </tr> <tr> <td class="tdright">层共有建筑面积(㎡)</td> <td> <el-input v-model="qlcData.cgyjzmj" class="" oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null" ></el-input> </td> <td class="tdright"> 层分摊建筑面积(㎡) </td> <td> <el-input v-model="qlcData.cftjzmj" class="" oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null" placeholder="层分摊建筑面积(㎡)"></el-input> </td> </tr> <tr> <td class="tdright">层高(m)</td> <td> <el-input v-model="qlcData.cg" class="" oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null" placeholder="层高(m)"></el-input> </td> <td class="tdright"> 水平投影面积(㎡) </td> <td> <el-input v-model="qlcData.sptymj" class="" oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null" placeholder="水平投影面积(㎡)"></el-input> </td> </tr> </table> </div> <div class="shop"> <el-button type="primary" @click="save">保存</el-button> <el-button type="primary" @click="result" icon="el-icon-refresh">重置</el-button> <el-button type="primary" @click="cancel">取消</el-button> </div> </el-dialog> </div> </template> <script> import {updatePlc} from '@api/zrz' import {Message} from 'element-ui' export default { name: "plC", data() { return { isVisible: false, qlcData: { cbqmj: '', // 层半墙面积 cftjzmj: '', // 层分摊建筑面积 cg: '', // 层高 cgyjzmj: '', // 层共有建筑面积 cjzmj: '', // 层建筑面积 ctnjzmj: '', // 层套内建筑面积 cytmj: '', // 层阳台面积 sptymj: '' // 水平投影面积 } } }, props: { bsms: { type: Array, }, plcVisible: { type: Boolean, default: function () { return false } } }, methods: { lodding:function(){ this.$emit('lodding') }, save: function () { this.qlcData['bsms'] = this.bsms updatePlc(this.qlcData).then(res => { console.log(res) if (res.success) { Message.success("保存成功") this.lodding() this.close() } else { Message.error(res.message) } }) }, close: function () { this.$emit('close') this.isVisible = false this.result() }, cancel: function () { this.$emit('close') this.isVisible = false }, result: function () { this.qlcData = { cbqmj: '', // 层半墙面积 cftjzmj: '', // 层分摊建筑面积 cg: '', // 层高 cgyjzmj: '', // 层共有建筑面积 cjzmj: '', // 层建筑面积 ctnjzmj: '', // 层套内建筑面积 cytmj: '', // 层阳台面积 sptymj: '' // 水平投影面积 } } }, watch: { plcVisible(val) { this.isVisible = val } } } </script> <style scoped> table { margin-top: 10px; background-color: #fff; font-size: 14px; width: 100%; } td { text-align: center; height: 36px; min-width: 50px; } table:hover { cursor: pointer; } .inputtitle { line-height: 41px; width: 95%; border: none; height: 98%; outline: none; } .shop { margin-top: 20px; text-align: center; } </style>