ibms/src/views/ready/buildfloor/drawGraphy/checkGraphy.vue

<template>
  <el-dialog id="checkGraphy" title="添加平面图" :visible.sync="checkGraphyVisible" width="900px" @close="handleClose">
    <div class="bodys">
      <el-cascader :options="options" :show-all-levels="false" @change="handleChange" @active-item-change='handleItemChange' clearable
        placeholder="请选择模型文件" v-model="casVal"></el-cascader>
      <div>
        或
        <el-button type="text">上传图片</el-button>
      </div>
      <!-- 展示框 -->
      <div class="showBox">
        <drawFloor ref="drawFloorDialog" :showTools="false" :id="0" :dialog="true"></drawFloor>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="bindGraphy">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import drawFloor from "./drawFloor";
import { mapGetters, mapActions } from "vuex";
import request from "@/api/model/file.js";
import { bindFloorModel } from "@/api/model/file";
export default {
  components: {
    drawFloor
  },
  computed: {
    ...mapGetters("layout", ["projectId"])
  },
  props: {
    alreadyRelatedModel: {
      default: []
    }
  },
  data() {
    return {
      casVal: [],
      jsonKey: "", //map.josn
      checkGraphyVisible: false,
      options: [],
      floor: {}, // 当前选中的楼层数据
      modelIdToFloorId: {}
    };
  },
  methods: {
    // 弹窗显示
    showDialog(floor) {
      this.floor = floor;
      this.checkGraphyVisible = true;
    },
    // 关闭弹窗
    handleClose() {
      this.checkGraphyVisible = false;
      this.casVal = []
      this.$refs.drawFloorDialog.clearGraphy()
    },
    // 更新楼层 平面图文件
    bindGraphy() {
      if (!this.jsonKey) {
        this.$message.warning("请选择模型文件");
        return
      }
      if (this.alreadyRelatedModel.indexOf(this.jsonKey) > -1) {
        this.$message.warning('此模型已关联该建筑下的楼层');
        return;
      }
      let pa = {
        FloorId: this.floor.FloorID,
        Id: this.modelIdToFloorId[this.jsonKey],
        BuildingId: this.floor.BuildID,
        Cover: true
      };
      bindFloorModel(pa, res => {
        this.$message.success("更新成功");
        this.handleClose()
        this.$emit('refresh', this.jsonKey)
      });
    },
    // 点击多级联动
    handleChange(val) {
      this.$refs.drawFloorDialog.initGraphy(val[1], 1)
      this.jsonKey = val[1]
    },
    // 通过id查询文件夹下模型文件
    handleItemChange(val) {
      let data = {
        FolderId: val[0],
        Status: '4',
        ProjectId: this.projectId
      };
      request.queryFloorList(data, res => {
        let tempArr = res.Content.map(t => {
          this.modelIdToFloorId[t.CurrentModelId] = t.Id;
          return {
            value: t.CurrentModelId,
            label: t.FloorName
          }
        })
        this.pushChild(this.options, tempArr, val[0])
      })
    },
    // 将模型文件list填到相应的文件夹下
    pushChild(options, arr, Code) {
      options.map(option => {
        if (option.value == Code) {
          option.children = arr;
        } else {
          if (option.children) {
            this.pushChild(option.children, arr, Code)
          }
        }
      })    },
    init() {
      this.getDirectory()
    },
    // 获取文件夹
    getDirectory() {
      request.queryModel("", res => {
        this.options = res.Content.map(t => {
          return {
            value: t.Id,
            label: t.Name,
            children: []
          }
        })
      });
    },
  },
  created() {
    this.init()
  },
  watch: {
    projectId() {
      this.init()
    }
  }
};
</script>
<style lang="less">
#checkGraphy {
  .bodys {
    .showBox {
      box-sizing: border-box;
      width: 100%;
      height: 300px;
      border: 1px #ccc solid;
      padding: 10px;
    }
  }
}
</style>