deepdragon/src/ldmap/components/comExit/reconExit.vue

<template>
  <el-row>
    <el-col :span="24">
      <el-form  ref="dataRef" :model="form" label-width="120px" >
        <el-form-item label="户数:" prop="households">
          <el-input v-model="form.households" type="number" placeholder="请输入" class="inputCss" />
        </el-form-item>
        <el-form-item label="人数:" prop="peopleNum">
          <el-input v-model="form.peopleNum" type="number" placeholder="请输入" class="inputCss" />
        </el-form-item>
        <el-form-item label="建筑物结构:" prop="houseMaterial">
             <el-select
               v-model="form.houseMaterial"
               placeholder="建筑物结构"
               clearable
               class="inputCss"
            >
               <el-option
                  v-for="dict in houseList"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
               />
            </el-select>

        </el-form-item>
        <el-form-item label="楼层:" prop="houseFloors">
          <el-input v-model="form.houseFloors" type="number" placeholder="请输入" class="inputCss" />
        </el-form-item>

        <el-form-item label="面积:" prop="area">
          <el-input v-model="form.area" type="number" placeholder="请输入" class="inputCss" />
           <span class="info">m²</span>
        </el-form-item>
        <el-form-item label="给水量:" prop="inWater">
          <el-input v-model="form.inWater"  type="number" placeholder="请输入"  class="inputCss"/>
           <span class="info">L人/天</span>
        </el-form-item>
        <el-form-item label="出水量:" prop="outWater">
          <el-input v-model="form.outWater" type="number" placeholder="请输入" class="inputCss"/>
           <span class="info">L人/天</span>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>

  <div class="footBottm">
    <el-button
    v-hasPermi="['ldmap:role:edit']"
      type="primary"
      @click="add()"
      style="margin-right: 50px"
      :loading="loading"
      >确定</el-button
    >
    <el-button
      type="warning"
      @click="
        () => {
          emit('closeDialog',false);
        }
      "
      >取消</el-button
    >
  </div>
</template>
<script setup lang="ts">
import {recognitionAdd} from "@map/api/exit.js"
const loading = ref(false)
const props = defineProps({
  layerId:String,
  detailInfo:{
    type:Object,
    default:{
          households:'String',
          peopleNum:'String',
          houseMaterial:'String',
          houseFloors:'Number',
          area:'String',
          inWater:'Number',
          outWater:'Number',
          geometryId:'String'

    }

  }
});
const emit = defineEmits(['closeDialog'])
const oldValue = props.detailInfo
const form =ref( {...props.detailInfo}||{
          households:'',
          peopleNum:'',
          houseMaterial:'',
          houseFloors:'',
          area:'',
          inWater:'',
          outWater:'',
})
const { proxy } = getCurrentInstance();
const  rules=ref( {
    households: [{ required: true, message: "数据不能为空", trigger: "blur" }],
    peopleNum: [{ required: true, message: "数据不能为空", trigger: "blur" }],
    houseMaterial: [{ required: true, message: "数据不能为空", trigger: "blur" }],
    houseFloors: [{ required: true, message: "数据不能为空", trigger: "blur" }],
    area: [{ required: true, message: "数据不能为空", trigger: "blur" }],
    inWater: [{ required: true, message: "数据不能为空", trigger: "blur" }],
    outWater: [{ required: true, message: "数据不能为空", trigger: "blur" }]
 })
 const houseList=ref([
   {label:'硂', value:'硂'},
   {label:'砖', value:'砖'},
   {label:'石', value:'石'},
   {label:'混', value:'混'},
   {label:'坚', value:'坚'},
   {label:'破', value:'破'},
   {label:'玻', value:'玻'},
   {label:'建', value:'建'},
   {label:'未调绘', value:'未调绘'},
 ])
function add(){
    proxy.$refs["dataRef"].validate(valid => {
       if (valid) {
          let data ={
            ...props.detailInfo,
            path:props.detailInfo.path,
            innerings:props.detailInfo.innerings,
            layersId:props.layerId,
            geometryId:props.detailInfo.geometryId,
            type:'House',

          }

          data.extend = {
            households:form.value.households,
            peopleNum:form.value.peopleNum,
            houseMaterial:form.value.houseMaterial,
            houseFloors:form.value.houseFloors,
            area:form.value.area,
            inWater:form.value.inWater,
            outWater:form.value.outWater,
         }
           if(data.id){
            recognitionAdd(data).then(res=>{
              proxyUseCallback(data)
            })

           }else{

            proxyUseCallback(data)

           }

    }})


}
function proxyUseCallback(data){
              proxy.detailInfo.households = form.value.households
             proxy.detailInfo.peopleNum = form.value.peopleNum
             proxy.detailInfo.houseMaterial = form.value.houseMaterial
             proxy.detailInfo.houseFloors = form.value.houseFloors
             proxy.detailInfo.area = form.value.area
             proxy.detailInfo.inWater = form.value.inWater
             proxy.detailInfo.outWater = form.value.outWater
             proxy.detailInfo.isExit = true
            emit('closeDialog',data)
}
</script>
<style scoped lang="scss">
:deep(.el-form-item__label) {
  color: #fff;
}
:deep(.el-textarea__inner) {
  background: transparent;
  color: #fff;
}
:deep {
  .el-input__wrapper {
    background: rgb(0, 0, 0, 0.1);
  }
  .el-input__inner {
    color: #fff;
  }
}
.footBottm {
  display: flex;
  justify-content: end;
}
.inputCss{
  width:80%;
}
.info{
  color:#fff;
  padding-left:8px;
}
</style>