adm/src/views/data_admin/buildGraphy/createPointZone.vue

<template>
  <div id="createPoint">
    <div class="condition">
      <div class="header">
        <el-button style="float:left;" size="small" type="default" icon="el-icon-back" @click="goBack"></el-button>
        <el-button size="small" style="float:right" @click="createZ">创建</el-button>
      </div>
      <el-scrollbar style="height:calc(100% - 43px)">
        <div class="item">
          <span>基本信息：</span>
          <div>
            <label><span style="color:red;">*</span>业务空间名称</label>
            <el-input placeholder="请输入业务空间名称" v-model="RoomLocalName" clearable
                      style="width:215px;margin-right:10px;"></el-input>
            <label>业务空间编码</label>
            <el-input placeholder="请输入业务空间编码" v-model="localId" clearable
                      style="width:215px;margin-right:10px;"></el-input>
          </div>
          <div>
            <label><span style="color:red;">*</span>所属建筑楼层</label>
            <el-cascader placeholder='请选择' v-model="buildFloor" :options="options" :props="floorProps" filterable
                         ref="buildfloor"
                         style="width:215px;margin-right:10px;"></el-cascader>
            <label><span style="color:red;">*</span>业务空间类型</label>
            <el-select v-model="space" placeholder="请选择空间" style="width:215px;margin-right:10px;" @change="changeSpace">
              <el-option v-for="item in spaceList" :key="item.Code" :label="item.Name" :value="item.Code">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="item">
          <span>其它可补充信息：</span>
          <i style="cursor: pointer;" :class="showEx"
             @click="showEx = (showEx == 'el-icon-arrow-up' ? 'el-icon-arrow-down' : 'el-icon-arrow-up')"></i>
          <div v-show="showEx == 'el-icon-arrow-up'" v-loading="loadingOtherMsg">
            <zoneInput v-show="otherList.length" :inputList="otherList" labelWidth="140px" ref="zoneInput"></zoneInput>
            <p v-show="!otherList.length">请选择业务空间类型</p>
          </div>
        </div>
        <div class="item">
          <p>位置标签图片信息:</p>
          <locationPointMsg ref="pointMsg" :pointObj="$route.params.item"></locationPointMsg>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import locationPointMsg from '@/views/data_admin/buildGraphy/locationPointMsg'
import { queryDictionaryHead, zoneCreate } from '@/api/scan/request';
import { getDataDictionary } from "@/api/dict";

import { mapGetters } from 'vuex'
import zoneInput from '@/components/data_admin/zoneInput'

export default {
  data() {
    return {
      floorProps: {
        value: 'BuildID',
        label: 'BuildLocalName',
        children: 'Floor'
      },
      options: [],//建筑楼层
      spaceList: [],//空间列表
      space: '',//当前空间
      buildFloor: [],//建筑楼层信息
      zoneName: '',//业务空间名称
      zoneLocalId: '',//业务空间编码
      showEx: 'el-icon-arrow-down',//下拉菜单
      RoomLocalID: '',//业务空间本地编码
      RoomLocalName: '',//业务空间名称
      otherList: [],//可补充信息list
      loadingOtherMsg: false,
    }
  },
  computed: {
    ...mapGetters("layout", ["projectId"])
  },
  props: {},
  components: {
    locationPointMsg,
    zoneInput
  },
  created() {
    this.options = this.$route.params.floorData
    this.getSpaceList();
  },
  methods: {
    //创建
    createZ() {
      let param = {
        Content: []
      }
      let zObj = this.$refs.zoneInput.getFormData();
      zObj.Pic = this.$refs.pointMsg.choImg.concat();
      zObj.Pic = zObj.Pic.map(item => ({
        Id: item.ObjectId,
        Key: item.Key,
        Name: item.Name,
        Type: item.Type
      }))
      if (this.RoomLocalName && this.buildFloor.length && this.space) {
        zObj.classCode = this.space;
        zObj.localName = this.RoomLocalName;
        zObj.localId = this.RoomLocalID;
        zObj.buildingId = this.buildFloor[0];
        zObj.floorId = this.buildFloor[1];
        param.content = [zObj];
        zoneCreate(param, res => {
          this.$message.success("创建成功");
          this.$refs.pointMsg.clearImg();
          this.RoomLocalName = ''
          this.RoomLocalID = ''
          this.buildFloor = []
          this.space = ''
          this.otherList = []
        })
      } else if (!this.RoomLocalName) {
        this.$message("请输入业务空间名称");
      } else if (!this.buildFloor.length) {
        this.$message("请选择所属建筑楼层");
      } else {
        this.$message("请选择业务空间类型");
      }
    },
    //获取空间列表
    getSpaceList() {
      let pa = {
        Filters: `parentId='Space'`
      }
      queryDictionaryHead(pa, res => {
        this.spaceList = res.Content.filter((item => {
          return item.Name != '元空间'
        }));
      });
    },
    //选择业务空间
    changeSpace(val) {
      this.space = val;
      let pa = {
        type: this.space,
        orders: "sort asc",
        pageNumber: 1,
        pageSize: 500
      };
      this.loadingOtherMsg = true;
      getDataDictionary(pa, res => {
        this.loadingOtherMsg = false;
        let filterCode = ["localId", "localName"]
        res.content = res.content.filter(item => {
          item.inputValue = null;
          return filterCode.indexOf(item.code) == -1
        });
        this.otherList = res.Content;
        this.$refs.zoneInput.init(this.otherList);
      })
    },
    //返回
    goBack() {
      this.$router.push({
        name: "buildGraphy",
        params: { nowBuildFloor: this.$route.params.nowBuildFloor }
      })
    }
  },
  watch: {
    projectId: {
      handler(val) {
        this.goBack();
      }
    }
  }
}
</script>

<style lang="less" scoped>
.condition {
  position: relative;
  padding: 10px 10px;
  display: flex;
  height: calc(100% - 22px);
  flex-direction: column;
  border: 1px solid #dfe6ec;
  background: #fff;

  .header {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);

    span {
      line-height: 33px;
      margin-left: 15px;
    }

    /deep/ .buildFloor {
      line-height: 32px;
    }
  }
}

/deep/ .el-scrollbar__wrap {
  overflow-x: hidden;
}

.item {
  padding: 10px 10px;

  label {
    display: inline-block;
    padding: 5px 10px;
    width: 130px;
  }
}

.suppMsg {
  display: inline-block;
  position: relative;
}
</style>