FE-V2-PC/src/views/comprehensive/laboratoryManagement/building/index.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 map-one-max-box" 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" @click="">
            <div class="img-box" :class="fatherIndex==index?'border-solid-color-one':'border-solid-color-99'" @click="minMapClick(index)">
              <img src="@/assets/ZDimages/icon_bj_syspmtcy_jinan.png">
            </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:"",
      //名称
      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.loading = false;
      });
    },
    minMapClick(index){
      if (this.fatherIndex!=index){
        this.fatherIndex = index;
        this.rightTitle = this.rightDataList[index].remark +'    '+ this.rightDataList[index].name;
      }
    },
    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:806px;
          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>