<template> <div class="boundaryLine itemForm"> <el-form :model="boundaryLine" :rules="rules" ref="formList" label-width="121px" :key="key"> <div v-for="(item, index) in boundaryLine.ruleForm" :key="index" class="boundaryLine-item"> <p class="boundaryLine-item-name">界址线{{ index + 1 }}</p> <div class="boundaryLine-item-list"> <el-row> <el-col :span="8"> <el-form-item> <span slot="label"> 标识码: <br /> <p class="label-detail">(BSM)</p> </span> <p :class="{ 'disabled': $store.state.business.Edit }"> {{ boundaryLine.ruleForm[index].bsm }} </p> </el-form-item> </el-col> <el-col :span="8"> <el-form-item :prop="'ruleForm.' + index + '.YSDM'" :rules="rules.YSDM"> <span slot="label"> 要素代码: <br /> <p class="label-detail">(YSDM)</p> </span> <el-input :disabled="$store.state.business.Edit" v-model="boundaryLine.ruleForm[index].YSDM" maxlength="10" placeholder="要素代码"></el-input> </el-form-item> </el-col> <el-col :span="8"> <el-form-item :prop="'ruleForm.' + index + '.ZDZHDM'" :rules="rules.ZDZHDM"> <span slot="label"> 宗地/宗海代码: <br /> <p class="label-detail">(ZDZHDM)</p> </span> <el-input :disabled="$store.state.business.Edit" v-model="boundaryLine.ruleForm[index].ZDZHDM" maxlength="19" placeholder="宗地/宗海代码"></el-input> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="8"> <el-form-item :prop="'ruleForm.' + index + '.JZXCD'" :rules="{ ...rules.JZXCD, ...typeNum }"> <span slot="label"> 界址线长度: <br /> <p class="label-detail">(JZXCD)</p> </span> <el-input :disabled="$store.state.business.Edit" v-model.number="boundaryLine.ruleForm[index].JZXCD" type="number" v-only-number="{ max: 999999999999999, min: 0, precision: 2 }" placeholder="界址线长度"></el-input> </el-form-item> </el-col> <el-col :span="8"> <el-form-item :prop="'ruleForm.' + index + '.JZXLB'" :rules="rules.JZXLB"> <span slot="label"> 界址线类别: <br /> <p class="label-detail">(JZXLB)</p> </span> <el-select :disabled="$store.state.business.Edit" v-model="boundaryLine.ruleForm[index].JZXLB" placeholder="界址线类别"> <el-option v-for="item in dicData['A48']" :key="item.DCODE" :label="item.DNAME" :value="item.DCODE"> </el-option> </el-select> </el-form-item> </el-col> <el-col :span="8"> <el-form-item :prop="'ruleForm.' + index + '.JZXWZ'" :rules="rules.JZXWZ"> <span slot="label"> 界址线位置: <br /> <p class="label-detail">(JZXWZ)</p> </span> <el-select :disabled="$store.state.business.Edit" v-model="boundaryLine.ruleForm[index].JZXWZ" placeholder="界址线位置"> <el-option v-for="item in dicData['A3']" :key="item.DCODE" :label="item.DNAME" :value="item.DCODE"> </el-option> </el-select> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="8"> <el-form-item :prop="'ruleForm.' + index + '.JXXZ'" class="borderTopNone" :rules="rules.JXXZ"> <span slot="label"> 界线性质: <br /> <p class="label-detail">(JXXZ)</p> </span> <el-select :disabled="$store.state.business.Edit" v-model="boundaryLine.ruleForm[index].JXXZ" placeholder="界线性质"> <el-option v-for="item in dicData['A2']" :key="item.DCODE" :label="item.DNAME" :value="item.DCODE"> </el-option> </el-select> </el-form-item> </el-col> <el-col :span="8"> <el-form-item :prop="'ruleForm.' + index + '.QSJXXYSBH'" class="borderTopNone" :rules="rules.QSJXXYSBH"> <span slot="label"> 权属界线协议书编号: <br /> <p class="label-detail">(QSJXXYSBH)</p> </span> <el-input :disabled="$store.state.business.Edit" v-model="boundaryLine.ruleForm[index].QSJXXYSBH" placeholder="权属界线协议书编号"></el-input> </el-form-item> </el-col> <el-col :span="8"> <el-form-item :prop="'ruleForm.' + index + '.QSJXXYS'" class="borderTopNone" :rules="rules.QSJXXYS"> <span slot="label"> 权属界线协议书: <br /> <p class="label-detail">(QSJXXYS)</p> </span> <el-input :disabled="$store.state.business.Edit" v-model="boundaryLine.ruleForm[index].QSJXXYS" placeholder="权属界线协议书"></el-input> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="8"> <el-form-item :prop="'ruleForm.' + index + '.QSZYYYSBH'" :rules="rules.QSZYYYSBH"> <span slot="label"> 权属争议原由书编号: <br /> <p class="label-detail">(QSZYYYSBH)</p> </span> <el-input :disabled="$store.state.business.Edit" v-model="boundaryLine.ruleForm[index].QSZYYYSBH" placeholder="权属争议原由书编号"></el-input> </el-form-item> </el-col> <el-col :span="8"> <el-form-item :prop="'ruleForm.' + index + '.QSZYYYS'" :rules="rules.QSZYYYS"> <span slot="label"> 权属争议原由书: <br /> <p class="label-detail">(QSZYYYS)</p> </span> <el-input :disabled="$store.state.business.Edit" v-model="boundaryLine.ruleForm[index].QSZYYYS" placeholder="权属争议原由书"></el-input> </el-form-item> </el-col> </el-row> </div> </div> </el-form> <message-tips ref="msg" /> </div> </template> <script> import kttGyJzx from '@/api/kttGyJzx' import ruleMixin from '@/mixins/ruleMixin.js' // 界址线信息 export default { mixins: [ruleMixin], props: { bsmSjsb: { type: String, default: '' }, bsmYwsjb: { type: String, default: '' } }, data () { return { boundaryLine: { ruleForm: [ { BSM: '', YSDM: '', ZDZHDM: '', JZXCD: undefined, JZXLB: '', JZXWZ: '', JXXZ: '', QSJXXYSBH: '', QSJXXYS: '', QSZYYYSBH: '', QSZYYYS: '' } ] } } }, methods: { async featchData () { try { let { result: res } = await kttGyJzx.getKttGyJzxById(this.bsmSjsb) this.boundaryLine.ruleForm = res //this.featchRule() } catch (error) { this.$refs.msg.messageShow() } }, handleUpdateForm () { return new Promise(async (resolve) => { try { let res = await kttGyJzx.updateKttGyJzx(this.boundaryLine.ruleForm) resolve(res.code) } catch (error) { this.$refs.msg.messageShow() } }) } } } </script> <style scoped lang="scss"> @import "./css/itemForm.scss"; .boundaryLine-item { display: flex; height: 100%; margin-bottom: 15px; margin-right: 5px; &-name { display: flex; align-items: center; justify-content: center; width: 20px; padding: 10px 20px; line-height: 28px; border: 1px solid #ccc; margin-right: 15px; border-radius: 3px; } &-list { width: 100%; flex: 1; display: flex; justify-content: center; flex-direction: column; } } </style>