crmeb/admin/src/views/pm/building/pmbuilding-add-and-update.vue

<template>
  <div>
    <!-- 基于 Element UI 新增和修改弹窗 -->
    <el-dialog
        :title="!dataForm.id ? '添加' : '修改'"
        :close-on-click-modal="false"
        :visible.sync="visible">
      <!-- 新增和修改表单 -->
      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataSubmit()" label-width="80px">
      <el-form-item label="楼栋编号" prop="buildingNo">
        <el-input v-model="dataForm.buildingNo" placeholder="楼栋编号"></el-input>
      </el-form-item>
      <el-form-item label="总层数" prop="totalFloors">
        <el-input v-model="dataForm.totalFloors" placeholder="总层数"></el-input>
      </el-form-item>
      <el-form-item label="单元数" prop="unitCount">
        <el-input v-model="dataForm.unitCount" placeholder="单元数"></el-input>
      </el-form-item>
      <el-form-item label="楼栋类型" prop="buildingType">
        <el-input v-model="dataForm.buildingType" placeholder="楼栋类型"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
      </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <!-- 如果是编辑状态，显示房屋管理相关按钮 -->
        <el-button v-if="dataForm.id" type="info" @click="addHouseHandle">新增房屋</el-button>
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="dataSubmit()">确定</el-button>
      </span>
    </el-dialog>

    <!-- 房屋新增/修改弹窗 -->
    <PmhouseAddAndUpdate
      :visible="houseVisible"
      :default-building-id="dataForm.id"
      :default-project-id="dataForm.projectId"
      @close="houseVisible = false"
      @refresh-data-list="refreshHouseList"
    />
  </div>
</template>

<script>
  import * as api from '@/api/pmbuilding.js'
  import PmhouseAddAndUpdate from '../houser/pmhouse-add-and-update.vue'
  export default {
    components: {
      PmhouseAddAndUpdate
    },
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      defaultProjectId: {
        type: String,
        default: ''
      }
    },
    data () {
      return {
        dataForm: {
          id: 0,
          projectId: '' ,
          buildingNo: '' ,
          totalFloors: '' ,
          unitCount: '' ,
          buildingType: '' ,
          remark: '' ,
        },
        // 房屋新增/修改弹窗显示状态
        houseVisible: false,
        dataRule: {
          projectId: [
            { required: true, message: '项目id  为必填项', trigger: 'blur' }
          ],
          buildingNo: [
            { required: true, message: '楼栋编号  为必填项', trigger: 'blur' }
          ],
          totalFloors: [
            { required: true, message: '总层数  为必填项', trigger: 'blur' }
          ],
          unitCount: [
            { required: true, message: '单元数  为必填项', trigger: 'blur' }
          ],
          buildingType: [
            { required: true, message: '楼栋类型  为必填项', trigger: 'blur' }
          ],
          remark: [
            { required: false, message: '请输入备注', trigger: 'blur' }
          ],
        }
      }
    },
    watch: {
      // 监听默认项目ID变化，自动设置到表单中
      defaultProjectId: {
        handler (newVal) {
          if (newVal && !this.dataForm.id) {
            this.dataForm.projectId = newVal
          }
        },
        immediate: true
      },
      // 监听visible变化，当对话框关闭时重置表单
      visible (newVal) {
        if (!newVal) {
          this.$emit('close')
        }
      }
    },
    methods: {
      init (id) { // 初始化表单验证规则
        this.dataForm.id = id || 0
        this.$nextTick(function() {
          if (this.$refs['dataForm']) {
            this.$refs['dataForm'].resetFields()
          }
          // 如果有默认项目ID，设置到表单中
          if (!this.dataForm.id && this.defaultProjectId) {
            this.dataForm.projectId = this.defaultProjectId
          }
          if (this.dataForm.id) {
            api.pmbuildingDetailApi(id).then(function(res) {
              this.dataForm = res;
            }.bind(this))
          }
        }.bind(this))
      },
      // 新增房屋
      addHouseHandle () {
        this.houseVisible = true
      },
      // 刷新房屋列表
      refreshHouseList () {
        // 通知父组件刷新房屋列表
        this.$emit('refreshHouseList')
      },
      // 表单数据提交
      dataSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            if (this.dataForm.id) {
              api.pmbuildingUpdateApi(this.dataForm).then(function(res) {
                this.$message.success('保存成功')
                this.$emit('close')
                this.$emit('refreshDataList')
              }.bind(this));
            } else {
              api.pmbuildingCreateApi(this.dataForm).then(function(res) {
                this.$message.success('新增成功')
                this.$emit('close')
                this.$emit('refreshDataList')
              }.bind(this));
            }
          }
        })
      }
    }
  }
</script>