ibms/src/components/ready/buildfloor/addBuild.vue

<template>
  <el-dialog
    :title="buildTitle"
    :visible.sync="buildDialogVis"
    id="messageDialog"
    width="50%"
  >
    <el-form
      :inline="true"
      :model="form"
      label-width="125px"
      :rules="rules"
      ref="ruleForm"
    >
      <template v-for="(val,key,index) in buildMessage">
        <h4>{{key}}</h4>

        <span
          :key="item.InfoPointCode"
          v-for="(item,index) in val"
          :class="[{'upload-file':item.InputMode == 'F2'}]"
        >
        <el-form-item
          :class="{FloorTypeSelect:item.InputMode == 'D1'||item.Unit}"
          :label="item.InfoPointName"
          :prop="item.InfoPointCode"
          v-if="all||item.Visible"
        >

          <el-input v-if="item.InputMode == 'B1' || item.InputMode == 'B2'" v-model="form[item.Path]"></el-input>

          <el-input type="number" v-else-if="item.InputMode == 'A1'||item.InputMode == 'A2'" v-model="form[item.Path]">
            <template slot="append" v-if="item.Unit">{{item.Unit}}</template>
          </el-input>
          <el-select placeholder="请选择" v-else-if="item.InputMode == 'D1'" v-model="form[item.Path]">
            <el-option :key="op.Code" :label="op.Name" :value="op.Code" v-for="op in item.options"></el-option>
          </el-select>
        <el-select placeholder="请选择" v-else-if="item.InputMode == 'D2'||item.InputMode == 'E2'"
                   v-model="form[item.Path]" multiple
                   collapse-tags>
            <el-option :key="op.Code" :label="op.Name" :value="op.Code" v-for="op in item.options"></el-option>
          </el-select>
           <el-date-picker
             v-model="form[item.Path]"
             type="daterange"
             v-else-if="item.InputMode == 'C6'"
             value-format="yyyy-MM-dd"
             range-separator="至"
             start-placeholder="开始日期"
             end-placeholder="结束日期"/>
             <el-cascader
               v-else-if="item.InputMode == 'D1L'"
               placeholder="请选择"
               :options="item.options"
               v-model="form[item.Path]"
               :props="{ checkStrictly: true ,value: 'Code',label:'Name'}"
               clearable
             />
          <el-input
            v-else-if="item.InputMode == 'L'||item.InputMode == 'L1'||item.InputMode == 'L2'||item.InputMode == 'M'"
            v-model="form[item.Path]">
            <template slot="append" v-if="item.Unit">{{item.Unit}}</template>
          </el-input>
          <el-date-picker
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            type="date" v-else-if="item.InputMode == 'C5'" v-model="form[item.Path]">
          </el-date-picker>
          <el-upload
            v-else-if="item.InputMode == 'F2'&& item.Path === 'BuildingInfo.BuildingType.Pic'"
            v-model="form[item.Path]"
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
          >
<!--               :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"-->
         <i class="el-icon-plus"></i>
        </el-upload>
           <upload-files
             v-else-if="item.InputMode == 'F2'"
             v-model="form[item.Path]"
             :readOnly="false"
             :keysArr="keysArr"
             :show-file-list="false"
             @change="changeItem"
             max="2"
           />

          <el-input disabled title="暂不支持" v-else v-model="form[item.Path]"></el-input>

        </el-form-item>
          <!--                   <span>{{item.InputMode}}</span>-->
      </span>
      </template>
      <!--      <h4>建筑信息-建筑类型</h4>-->
      <!--      <div>-->
      <!--        <p class="el-form-item__label"-->
      <!--           style="width: 125px"-->
      <!--        >建筑图片：</p>-->
      <!--        &lt;!&ndash;            :on-preview="handlePictureCardPreview"&ndash;&gt;-->
      <!--        &lt;!&ndash;            :on-remove="handleRemove"&ndash;&gt;-->
      <!--        <el-upload-->
      <!--          action="https://jsonplaceholder.typicode.com/posts/"-->
      <!--          list-type="picture-card"-->
      <!--          style="margin-left: 130px">-->
      <!--          <i class="el-icon-plus"/>-->
      <!--        </el-upload>-->
      <!--        <el-dialog :visible.sync="dialogVisible">-->
      <!--          <img-->
      <!--            :src="dialogImageUrl"-->
      <!--            alt=""-->
      <!--            width="100%"-->
      <!--          >-->
      <!--        </el-dialog>-->
      <!--      </div>-->
      <!--      <h4>建筑文档</h4>-->
      <!--      <uploadFile name="建筑图纸"/>-->
      <!--      <uploadFile name="档案"/>-->
      <!--      <uploadFile name="建筑能耗模型"/>-->
    </el-form>
    <span
      class="dialog-footer"
      slot="footer"
    >
    <el-button @click="buildDialogVis = false">取 消</el-button>
    <el-button @click="submitForm('ruleForm')" type="primary">确 定</el-button>
  </span>


    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </el-dialog>

</template>
<script>
  import uploadFiles from "@/components/business_space/lib/uploadFiles";

  function flattenKeys(obj) {
    let res = {}

    function isObject(val) {
      return typeof val === 'object' && !Array.isArray(val)
    }

    function digKeys(prev, obj) {
      Object.entries(obj).forEach(([key, value]) => {
        const currentKey = prev ? `${prev}.${key}` : key
        if (isObject(value)) {
          digKeys(currentKey, value)
        } else {
          res[currentKey] = value
        }
      })
    }

    digKeys('', obj)

    return res
  }

  export default {
    data() {
      return {
        buildName: '',
        keysArr: [], //保存临时的文件key
        buildDialogVis: false,
        form: {},
        dialogImageUrl: '',
        dialogVisible: false,
        all: true,
        rules: {
          "BuildLocalID": [
            {"required": true, "message": "请输入建筑本地编码", "trigger": "blur"}
          ],
          "BuildLocalName": [
            {"required": true, "message": "请输入建筑本地名称", "trigger": "blur"}
          ]
        },
        buildData: {},
        dialog:{
          uploadFiles:false
        }
      }
    },
    components: {uploadFiles},
    props: ['buildTitle', 'buildMessage', 'currentBuild'],
    computed: {},
    mounted() {


    },
    methods: {
      showDialog(data) {
        this.buildData = data || {};
        this.buildData = flattenKeys(this.buildData)
        this.timeoutSetVal()
        this.buildDialogVis = true
      },
      timeoutSetVal() {
        let that = this
        setTimeout(() => {
          if (that.form) {
            that.form = that.buildData
          } else {
            this.timeoutSetVal()
          }
        })
      },
      closeDialog() {
        this.buildDialogVis = false
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$emit('handleBuild', this.form)
          } else {
            return false;
          }
        });
      },
      changeItem(val) {
        console.log(val,'======')
      }
      //上传文件弹窗触发事件
      // fileChange(keys) {
      //   this.setDataToMain(keys, this.messKey, this.row);
      // },
      // handleRemove(file, fileList) {
      //   console.log(file, fileList);
      // },
      // handlePictureCardPreview(file) {
      //   this.dialogImageUrl = file.url;
      //   this.dialogVisible = true;
      // }
    }
  }
</script>
<style lang="less" scoped>

  #messageDialog {
    /deep/ .el-date-editor.el-input, .el-date-editor.el-input__inner, /deep/ .el-select {
      width: 200px;
    }

    /deep/ .FloorTypeSelect .el-form-item__content {
      width: 200px;
    }

    /deep/ .el-dialog__body {
      height: 420px;
      overflow: auto;
    }

    .upload-file {
      width: 100%;
      display: block;
    }
  }
</style>