FE-V2-PC/src/views/comprehensive/laboratoryManagement/building/indexOne.vue

<!--布局管理(针对矿大增加了楼栋与楼层的选择)-->
<template>
  <div class="app-container building">
    <div class="left-max-box">
      <el-tree :data="deptOptions" :props="defaultProps"
               accordion @node-click="handleNodeClick">
      </el-tree>
    </div>
    <div class="right-max-box">
      <p class="right-top-title color_33" v-if="rightDataList[0]">{{rightTitle}}</p>
      <div class="map-img-box border-solid-color-99" v-if="rightDataList[0]">
        <div class="map-max-box" :class="buttonId == 5?'map-max-box-1':(buttonId==6?'map-max-box-2':(buttonId==7?'map-max-box-3':''))" v-for="(item,index) in rightDataList" :key="index" v-if="index == fatherIndex">
          <!--<div class="map-max-box map-seven-max-box" v-for="(item,index) in rightDataList" :key="index" v-if="index == fatherIndex">-->
          <div class="map-min-box for-box" v-for="(minItem,minIndex) in item.list" :key="minIndex">
            <p>{{minItem.isSubject == 1?minItem.room:minItem.room}}</p>
            <p @click.stop="shadeClick(minItem)">点击编辑</p>
          </div>
        </div>
      </div>
      <div class="carousel" v-if="rightDataList[0]">
        <p class="button-box el-icon-arrow-left cursor_hover" @click="minMapButton('left')" v-if="rightDataList[1]"></p>
        <div class="for-max-box">
          <div class="for-min-box"  v-for="(item,index) in rightDataList" :key="index">
            <div class="img-box" :class="fatherIndex==index?'border-solid-color-one':'border-solid-color-99'" @click="minMapClick(index)">
              <img src="@/assets/ZDimages/kuangdaMap/map1.png" v-if="item.id==5">
              <img src="@/assets/ZDimages/kuangdaMap/map2.png" v-if="item.id==6">
              <img src="@/assets/ZDimages/kuangdaMap/map3.png" v-if="item.id==7">
            </div>
            <p>{{item.name}}</p>
          </div>
        </div>
        <p class="button-box el-icon-arrow-right cursor_hover" @click="minMapButton('right')" v-if="rightDataList[1]"></p>
      </div>
      <img class="null-p-img" src="@/assets/ZDimages/null-data.png" v-if="!rightDataList[0]">
      <p class="null-p-text" v-if="!rightDataList[0]">暂无数据</p>
    </div>
    <el-dialog title="修改房间信息" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="房间编号" prop="joinUserId">
          <el-input v-model="form.room" placeholder="请输入房间编号" />
        </el-form-item>
        <el-form-item label="房间类型">
          <el-radio-group v-model="form.isSubject">
            <el-radio label="0">非实验室</el-radio>
            <el-radio label="1">实验室</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getBuilding,listBuilding, updateSubject } from "@/api/laboratory/building";
  import { treeselect } from "@/api/system/dept";

  export default {
    name: "Building",
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 楼栋表格数据
        buildingList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize:20,
          name: null,
          type: null,
          parentId: null,
          deptId: null,
          deptName: null,
          userId: null,
        },
        // 表单参数
        form: {
          room:"",
          isSubject:"",
        },
        // 表单校验
        rules: {
          room:[
            {required: true, message: '请输入房间编号', trigger: 'blur'},
            { required: true, message: "请输入房间编号", validator: this.spaceJudgment, trigger: "blur" }
          ],
          isSubject:[
            {required: true, message: '请选择实验室类型', trigger: 'blur'}
          ],
        },
        //左侧列表数据
        deptOptions:[],
        defaultProps:{
          children: 'children',
          label: 'label'
        },
        //右侧数据
        rightDataList:[],
        //左侧列表选装状态
        fatherIndex:0,
        // 楼宇id
        buildingId:"",
        //楼层id
        buttonId:null,
        //名称
        rightTitle:"",
      };
    },
    created() {
      this.getList();
      this.getTreeselect();
    },
    methods: {
      //点击修改
      shadeClick(item){
        if(item){
          this.form = {...item};
          this.form.isSubject = ''+item.isSubject;
          this.$forceUpdate();
          this.open = true;
          console.log("item",item)
        }
      },
      /** 查询部门下拉树结构 */
      getTreeselect() {
        this.loading = true;
        treeselect().then(response => {
          this.deptOptions = response.data;
          if(this.deptOptions[0].children){
            if(this.deptOptions[0].children[0].children){
              this.buildingId = this.deptOptions[0].children[0].children[0].id;
            }else{
              this.buildingId = this.deptOptions[0].children[0].id;
            }
          }else{
            this.buildingId = this.deptOptions[0].id;
          }

          this.getBuilding();
          this.loading = false;
        });
      },
      //树结构选中
      handleNodeClick(data) {
        if(!data.children){
          console.log(data);
          this.buildingId = data.id;
          this.getBuilding();
        }
      },
      //获取楼宇数据
      getBuilding(){
        this.loading = true;
        getBuilding(this.buildingId).then(response => {
          this.rightDataList = response.data;
          this.rightTitle = this.rightDataList[this.fatherIndex].remark +'    '+ this.rightDataList[this.fatherIndex].name;
          this.buttonId = this.rightDataList[this.fatherIndex].id;
          this.loading = false;
        });
      },
      minMapClick(index){
        if (this.fatherIndex!=index){
          this.fatherIndex = index;
          this.rightTitle = this.rightDataList[index].remark +'    '+ this.rightDataList[index].name;
          this.buttonId = this.rightDataList[index].id;
        }
      },
      minMapButton(type){
        if(type=='left'){
          if (this.fatherIndex>0){
            this.fatherIndex--
          }
        }else if(type=='right'){
          if (this.fatherIndex<this.rightDataList.length-1){
            this.fatherIndex++
          }
        }
        this.rightTitle = this.rightDataList[this.fatherIndex].remark +'    '+ this.rightDataList[this.fatherIndex].name;
        this.$forceUpdate();
      },
      /** 查询楼栋列表 */
      getList() {
        this.loading = true;
        listBuilding(this.queryParams).then(response => {
          this.buildingList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          room: null,
          isSubject: null,
          id: null,
        };
        this.resetForm("form");
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              let obj = {
                id:this.form.id,
                room: this.form.room,
                isSubject: this.form.isSubject,
              };
              updateSubject(obj).then(response => {
                this.msgSuccess("修改成功");
                this.open = false;
                this.reset();
                this.getBuilding();
              });
            }
          }
        });
      },
    }
  };
</script>

<style scoped lang="scss">
  .building {
    display: flex!important;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
    padding:11px 20px!important;
    .el-row{
      margin-bottom:20px;
    }
    .left-max-box{
      width:245px;
    }
    .right-max-box{
      flex:1;
      display: flex;
      flex-direction: column;
      .right-top-title{
        text-align: center;
        font-size:18px;
        margin:17px 0 0 0;
        line-height:109px;
      }
      .map-img-box{
        flex:1;
        margin:0 30px;
        position: relative;
        .map-max-box{
          position: absolute;
          top:50%;
          left:50%;
          display: block;
          width:790px;
          height:360px;
          margin-left:-395px;
          margin-top:-180px;
        }
      }
      .carousel{
        height:184px;
        display: flex;
        /*width: 1030px;*/
        margin: 0 auto;
        .button-box{
          width:40px;
          height:40px;
          margin:66px 50px 0;
          background: #cce6fd;
          color: #fff;
          text-align: center;
          line-height:40px;
          font-size:14px;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          border-radius: 50%;
        }
        .button-box:hover{
          background: #0183FA;
          color: #fff;
        }
        .for-max-box{
          display: flex;
          flex:1;
          cursor:pointer;
          .for-min-box{
            margin:0 20px;
            div{
              padding:10px;
              width:210px;
              height:109px;
              margin-top:29px;
              img{
                width:190px;
                height:89px;
              }
            }
            p{
              line-height:45px;
              font-size:16px;
              text-align: center;
              margin:0;
            }
          }
        }
      }
      .null-p-img{
        width:276px;
        height:274px;
        margin:200px auto 0;
      }
      .null-p-text{
        text-align:center;
        font-size:16px;
        color:#999;
        line-height:40px;
        margin-right:70px;
      }
    }
  }
</style>