ibms/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="RoomLocalID" clearable style="width:215px;margin-right:10px;"></el-input>
          </div>
          <div>
            <label><span style="color:red;">*</span>所属建筑楼层</label>
            <el-cascader placeholder='请选择' :options="options" @change="changeFloor" :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">
            <div v-if="otherList.length">
              <div class="suppMsg" v-for="(item, key) in otherList" :key="key">
                <label>{{item.InfoPointName}}:</label>
                <el-input :placeholder="`请输入${item.InfoPointName}`" v-model="item.inputValue" clearable style="width:215px;margin-right:10px;">
                </el-input>
              </div>
            </div>
            <p v-else>请选择业务空间类型</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, getDataDictionary, createZone } from '@/api/scan/request';
import { mapGetters } from 'vuex'
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,
      test: '1'
    }
  },
  computed: {
    ...mapGetters("layout", ["projectId"])
  },
  props: {

  },
  components: {
    locationPointMsg
  },
  created() {
    this.options = this.$route.params.floorData
    this.getSpaceList();
  },
  methods: {
    //创建
    createZ() {
      let param = {
        zone: '',
        data: {
          content: []
        }
      }
      let reqData = {
        Pic: {}
      };
      //图片信息
      this.$refs.pointMsg.choImg.map((item,key) => {
        reqData.Pic[`additionalProp${key + 1}`] = item;
      })
      //其他补充信息
      this.otherList.map(item => {
        if (item.inputValue) {
          reqData[item.InfoPointCode] = item.inputValue;
        }
      });
      if (this.RoomLocalName && this.buildFloor.length && this.space) {
        reqData.RoomLocalName = this.RoomLocalName;
        reqData.RoomLocalID = this.RoomLocalID;
        reqData.BuildingId = this.buildFloor[0];
        reqData.FloorId = this.buildFloor[1];
        param.zone = this.space;
        param.data.content = [reqData];
        createZone(param, res => {
          this.$message.success("创建成功");
          this.RoomLocalName = ''
          this.RoomLocalID = ''
          this.buildFloor = []
          this.space = ''
          
        })
      }
      else if (!this.RoomLocalName) {
        this.$message("请输入业务空间名称");
      }
      else if (!this.buildFloor.length) {
        this.$message("请选择所属建筑楼层");
      }
      else {
        this.$message("请选择业务空间类型");
      }
      console.log(param);
    },
    //获取空间列表
    getSpaceList() {
      let pa = {
        Filters: `parentId='Space'`
      }
      queryDictionaryHead(pa, res => {
        this.spaceList = res.Content.filter((item => { return item.Name != '元空间' }));
      });
    },
    //选择楼层
    changeFloor(val) {
      this.buildFloor = val;
    },
    //选择业务空间
    changeSpace(val) {
      this.space = val;
      let pa = {
        type: this.space,
        data: {
          "Orders": "sort asc", "PageNumber": 1, "PageSize": 500
        }
      };
      this.loadingOtherMsg = true;
      getDataDictionary(pa, res => {
        this.loadingOtherMsg = false;
        let filterCode = ["RoomLocalID", "RoomLocalName"]
        res.Content = res.Content.filter(item => {
          item.inputValue = null;
          return filterCode.indexOf(item.InfoPointCode) == -1
        });
        this.otherList = res.Content;
      })
    },
    //返回
    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>