ibms/src/components/market/owner/build.vue

<template>
    <section>
        <div v-if="buildType == 'create'">
            <el-form ref="copyData" :model="copyData" label-width="120px" style="border: 1px solid #ccc;padding:3px;padding-top:30px;">
                <el-form-item label="本地名称"
                :rules="{ required: true, message: '本地名称不能为空', trigger: 'blur' }">
                    <el-input v-model="copyData.infos.BuildLocalName"></el-input>
                </el-form-item>
                <el-form-item label="本地编码"
                :rules="{ required: true, message: '本地编码不能为空', trigger: 'blur' }">
                    <el-input v-model="copyData.infos.BuildLocalID"></el-input>
                </el-form-item>
                <el-form-item label="建筑年代">
                    <el-date-picker
                    style="width:100%;"
                    v-model="copyData.infos.BuildAge"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="建筑功能类型">
                    <el-cascader
                    :options="arr"
                    v-model="copyData.infos.BuildFuncType"
                    :props="props"
                    ></el-cascader>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                    <el-button @click="noCreate">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="build-border" v-else>
            <!-- 建筑基本信息 -->
            <div v-show="!messBuild">
                <form-input :value="copyData.infos.BuildLocalName" @change="changed" :keys="'BuildLocalName'" :label="'本地名称'" :isRule="false"></form-input>
                <form-input :value="copyData.infos.BuildLocalID" @change="changed" :keys="'BuildLocalID'" :label="'本地编码'" :isRule="false"></form-input>
                <form-input type="year" :value="copyData.infos.BuildAge" @change="changed" :keys="'BuildAge'" :label="'建筑年代'" :isRule="false"></form-input>
                <form-input type="cascader" :typeArr="arr" :value="copyData.infos.BuildFuncType" @change="changed" :keys="'BuildFuncType'" :label="'建筑功能类型'" :isRule="false"></form-input>
            </div>
            <!-- 建筑详情 -->
            <div v-show="messBuild">
                <!-- 一级标签 -->
                <div v-for="item in buildMess" v-if="item.firstTag != '能耗信息' && item.firstTag != '建筑文档'">
                    <h3 class="first-tag">{{item.firstTag}}</h3>
                    <div v-for="i in item.details">
                        <h4 class="second-tag">{{i.secondTag}}</h4>
                        <template v-for="detail in i.details">
                            <form-input v-if="isShow(detail.inputMode)" :width="170" :type="detail.inputMode" :typeArr="detail.dataSource" :value="copyData.infos[detail.infoPointCode]" :unit="detail.unit" @change="changed" :keys="detail.infoPointCode" :label="detail.infoPointName" :isRule="false"></form-input>
                        </template>
                    </div>
                </div>
            </div>
            <el-button type="text" @click="lookDetails" class="font-right">{{!messBuild ? '维护详细信息' : '收起'}}</el-button>
        </div>
    </section>    
</template>

<script>
import formInput from "@/components/market/owner/formInput";

export default {
  name: "buildTemplete",
  props: {
    buildType: String, //create创建
    funcTypeArr: Array, //建筑下拉的options
    id: String, //项目id，当其为空时为create
    buildMess: Array, //建筑详情的数组label
    buildData: Object, //默认数据
  },
  components: {
    formInput
  },
  data() {
    return {
      year: "",
      arr: [],
      copyData: {
        infos: {
          BuildID: "",
          BuildLocalID: "",
          BuildLocalName: "",
          BuildName: "",
          BuildAge: "",
          BuildFuncType: []
        }
      },
      messBuild: false, // 是否显示详情
      props: {
        label: "name",
        value: "code",
        children: "content"
      } //修改默认数据格式
    };
  },
  created() {
    this.arr = this.toMyNeed(this.funcTypeArr);
    this.copyData = Object.assign({},this.buildData)
  },
  methods: {
    //提交
    onSubmit() {
      if(this.copyData.infos.BuildLocalID && this.copyData.infos.BuildLocalName){
        this.copyData.projectId = this.id
        let params = JSON.parse(JSON.stringify(this.copyData))
        let func = this.copyData.infos.BuildFuncType
        if(func instanceof Array){
          params.infos.BuildFuncType = func[func.length -1]
        }
        this.postJson("/server/business-os/proprietor/project/building/create",params,res=>{
          this.copyData.id = res.id
          this.buildData = Object.assign({},params)
          this.buildType ="change"
          this.$emit("created",params)
        })
      }else{
        this.$message.error("请确定输入本地编码和本地名称")
      }
    },

    //取消
    noCreate(){
      this.$emit("del")
    },

    //处理key值转换关系
    toMyNeed(arr) {
      return arr.map(res => {
        let param = {};
        if (res.content && res.content.length != 0) {
          param.content = this.toMyNeed(res.content);
        }
        param.name = res.name;
        param.code = res.code;
        return param;
      });
    },

    //判断是否是显示类型
    isShow(code) {
      if (
        code == "L" ||
        code == "L1" ||
        code == "L2" ||
        code == "M" ||
        code == "N1" ||
        code == "N2" ||
        code == "K" ||
        code == "F2" ||
        code == "G1" ||
        code == "G2" ||
        code == "G3" ||
        code == "G4" ||
        code == "H" ||
        code == "I" ||
        code == "J" ||
        code == "K" ||
        code == "E2" 
      ) {
          return false
      }else{
          return true
      }
    },

    //formInput的修改事件
    changed(val, key) {
      this.copyData.infos[key] = val;
      this.postJson("/server/business-os/proprietor/project/building/update",this.copyData,res=>{
      })
    },

    //修改详情中的数值
    changDetail(val, key) {
      this.copyData.infos[key] = val;
    },

    //查看建筑详情，修改
    lookDetails(item) {
      this.messBuild = !this.messBuild;
    }
  },
  watch:{
    buildType:{
      deep: true,
      handler(old,newVal){
        this.copyData = this.buildData
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.build-border {
  border: 1px solid #ccc;
  margin-top: 10px;
  padding-top: 10px;
  overflow: hidden;
  .font-right {
    float: right;
    margin-right: 30px;
  }
}
.first-tag{
  line-height: 40px;
  font-weight: 600;
  margin-left: 5px;
}
.second-tag{
  line-height: 40px;
  font-weight: 500;
  margin-left: 20px;
  color: #6BCAE2;
}
</style>