v3-lab-web/src/views/integratedManagement/buildingManagement/index.vue

<!--楼栋管理-->
<template>
  <div class="app-container buildingManagement">
    <div class="max-left-box">
      <div class="tree-box scrollbar-box" v-if="treeList[0]">
        <p style="color:#0183FA;font-size:18px;">{{schoolName}}</p>
        <div class="terr-max-box" v-for="(item,index) in treeList" :key="index">
          <div class="max-name-box">
            <p class="max-name" :class="checkTreeId==item.id?'check-color':''" @click="clickCheckTree(item,1)">
              {{item.name}}</p>
            <el-dropdown @command="(command)=>handleCommand(command,item)" trigger="click">
              <img src="@/assets/ZDimages/integratedManagement/icon_bjgl_gd.png"
                   style="cursor:pointer;width:16px;height:4px;margin-top:7px;">
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="1" v-hasPermiRouter="['system:build:edit']">编辑</el-dropdown-item>
                <el-dropdown-item command="2" v-hasPermiRouter="['system:build:del']">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="terr-big-box" v-for="(itemOne,indexOne) in item.buildFloorVoList" :key="indexOne">
            <div class="big-name-box">
              <p v-if="!itemOne.buildFloorVoList[0]" style="width:16px;"></p>
              <img v-if="!itemOne.onType&&itemOne.buildFloorVoList[0]"
                   src="@/assets/ZDimages/integratedManagement/icon_bjgl_jt.png" @click="terrClick(itemOne)">
              <img v-if="itemOne.onType&&itemOne.buildFloorVoList[0]"
                   src="@/assets/ZDimages/integratedManagement/icon_bjgl_xjt.png" @click="terrClick(itemOne)">
              <p class="name-p" :class="checkTreeId==itemOne.id?'check-color':''" @click="clickCheckTree(itemOne,2)">
                {{itemOne.name}}</p>
            </div>
            <div v-if="itemOne.onType" class="terr-min-box" v-for="(itemTwo,indexTwo) in itemOne.buildFloorVoList"
                 :key="indexTwo">
              <p class="min-name" :class="checkTreeId==itemTwo.id?'check-color':''"
                 @click="clickCheckTree(itemTwo,3,itemOne)">{{itemTwo.name}}</p>
            </div>
          </div>
        </div>
      </div>
      <p class="tree-null-p" v-if="!treeList[0]">暂无数据</p>
      <p class="max-left-big-button" v-hasPermiRouter="['system:build:add']" @click="handleCommand(3)">新增校区</p>
    </div>
    <div class="max-right-box">
      <div class="school-box" v-if="checkTreeType == 1">
        <div class="max-right-button-box">
          <p class="null-p"></p>
          <p class="max-right-big-button" @click="handleCommand(4)" v-hasPermiRouter="['system:build:add']">新增楼栋</p>
        </div>
        <div class="right-big-list-box scrollbar-box">
          <div class="for-max-box" v-for="(item,index) in buildingList" :key="index"
               @dragover.prevent="dragoverPrevent(item)">
            <div class="for-big-box">
              <div class="for-big-box-left">
                <img src="@/assets/ZDimages/integratedManagement/icon_bjgl_td.png" class="for-img-one"
                     draggable="true"
                     @dragstart="dragstartPlay($event)"
                     @dragend="dragEnterOver($event, item)">
                <p class="for-text-one">{{item.name}}</p>
                <img src="@/assets/ZDimages/integratedManagement/icon_bjgl_lcs.png" class="for-img-two">
                <div class="for-text-box-one">
                  <p>{{item.floorNum}}</p>
                  <p>楼层数</p>
                </div>
                <img src="@/assets/ZDimages/integratedManagement/icon_bjgl_fj.png" class="for-img-three">
                <div class="for-text-box-two">
                  <p>{{item.roomNum}}</p>
                  <p>房间数</p>
                </div>
              </div>
              <div class="for-button-min-box">
                <div @click="handleCommand(5,item)" v-hasPermiRouter="['system:build:edit']">
                  <span class="iconfont iconfont-a icon-bianji"></span>
                  <p>编辑</p>
                </div>
                <div @click="handleCommand(6,item)" v-hasPermiRouter="['system:build:del']">
                  <span class="iconfont iconfont-b icon-a-shanchu"></span>
                  <p>删除</p>
                </div>
              </div>
            </div>
          </div>
          <img class="null-img" v-if="!buildingList[0]" src="@/assets/ZDimages/basicsModules/null-data-1.png">
        </div>
      </div>
      <div class="building-box" v-if="checkTreeType == 2">
        <div class="max-right-button-box">
          <p class="null-p"></p>
          <p class="page-submit-common-style-button"
             style="margin-right:4px;width: 130px" @click="handleCommand(7)"
            v-hasPermiRouter="['system:build:add']"
          >新增楼层</p>
        </div>
        <div class="right-big-list-box scrollbar-box">
          <div class="for-max-box" v-for="(item,index) in buildingList" :key="index"
               @dragover.prevent="dragoverPrevent(item)">
            <div class="for-big-box">
              <div class="for-big-box-left">
                <img src="@/assets/ZDimages/integratedManagement/icon_bjgl_td.png" class="for-img-one"
                     draggable="true"
                     @dragstart="dragstartPlay($event)"
                     @dragend="dragEnterOver($event, item)">
                <p class="for-text-one">{{item.name}}</p>
              </div>
              <div class="for-button-min-box">
                <div v-hasPermiRouter="['system:build:edit']" @click="handleCommand(8,item)">
                  <span class="iconfont iconfont-a icon-bianji"></span>
                  <p>编辑</p>
                </div>
                <div v-hasPermiRouter="['system:build:del']" @click="handleCommand(9,item)">
                  <span class="iconfont iconfont-b icon-a-shanchu"></span>
                  <p>删除</p>
                </div>
              </div>
            </div>
          </div>
          <img class="null-img" v-if="!buildingList[0]" src="@/assets/ZDimages/basicsModules/null-data-1.png">
        </div>
      </div>
      <div class="floor-box" v-if="checkTreeType == 3">
        <div class="floor-table-box">
          <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="关键字" prop="searchValue" style="margin-right:20px;">
              <el-input
                v-model="queryParams.searchValue"
                placeholder="房间号/房间名称"
                clearable
                size="small"
              />
            </el-form-item>
            <el-form-item label="房间类型" prop="roomType" style="margin-right:20px;">
              <el-select v-model="queryParams.roomType" placeholder="请选择房间类型">
                <el-option
                  v-for="dict in roomTypeOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value">
                </el-option>
              </el-select>
            </el-form-item>
            <p class="page-inquire-common-style-button" @click="handleQuery">查询</p>
            <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
            <p class="page-submit-common-style-button"
               style="float: right;"
               @click="roomButton(1)"
               v-hasPermiRouter="['system:roominfo:add']"
            >新增房间</p>
          </el-form>
          <el-table  class="table-box" border :data="dataList">
            <el-table-column label="房间号" align="left" prop="roomNum" width="240"/>
            <el-table-column label="房间名称" align="left" prop="roomName"/>
            <el-table-column label="房间类型" align="left" prop="roomType" width="200">
              <template slot-scope="scope">
                <span v-for="(item,index) in roomTypeOptions" :key="index" v-if="item.value == scope.row.roomType">{{item.label}}</span>
              </template>
            </el-table-column>
            <el-table-column label="创建人" align="left" prop="createName" width="200"/>
            <el-table-column label="创建时间" align="left" prop="createTime" width="200">
              <template slot-scope="scope">
                {{ parseTime(scope.row.createTime,"{y}-{m}-{d} {h}:{i}") }}
              </template>
            </el-table-column>
            <el-table-column label="操作" align="left" width="140">
              <template slot-scope="scope">
                <div class="table-button-box">
                  <p class="table-button-null"></p>
                  <p class="table-button-p"
                     @click="roomButton(2,scope.row)"
                     v-hasPermiRouter="['system:roominfo:edit']"
                  >编辑</p>
                  <p class="table-button-p"
                     v-hasPermiRouter="['system:roominfo:del']"
                     @click="roomButton(3,scope.row)"
                  >删除</p>
                  <p class="table-button-null"></p>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.page"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </div>
    </div>
    <!-- 新增/编辑校区 -->
    <el-dialog :title="dialogTitle" v-if="dialogOpen" :visible.sync="dialogOpen" width="600px" append-to-body>
      <el-form ref="dialogForm" :model="dialogForm" :rules="rules" label-width="110px">
        <el-form-item label="校区名称：" prop="campusName">
          <el-input v-model="dialogForm.campusName" maxlength="10" placeholder="请输入校区名称"
                    :disabled="dialogType==2 || dialogType==22 || dialogType==3 || dialogType==33"/>
        </el-form-item>
        <el-form-item label="楼栋名称：" prop="buildingName"
                      v-if="dialogType==2 || dialogType==22 || dialogType==3 || dialogType==33">
          <el-input v-model="dialogForm.buildingName" maxlength="10" placeholder="请输入楼栋名称"
                    :disabled="dialogType==3 || dialogType==33"/>
        </el-form-item>
        <el-form-item label="楼层名称：" prop="floorName" v-if="dialogType==3 || dialogType==33">
          <el-input v-model="dialogForm.floorName" maxlength="10" placeholder="请输入楼层名称"/>
        </el-form-item>
        <el-form-item label="排序序号：" prop="sortNo" class="dialog-sort-no-form-item-box">
          <el-input-number v-model="dialogForm.sortNo" :min="0" :max="999" placeholder="请输入排序序号" :controls="false"
                           style="width:450px;"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer dialog-footer-box">
        <p class="dialog-footer-button-null"></p>
        <p class="dialog-footer-button-info" @click="cancel">取消</p>
        <p class="dialog-footer-button-primary" @click="submitForm">提交</p>
        <p class="dialog-footer-button-null"></p>
      </div>
    </el-dialog>
    <!-- 新增/编辑房间 -->
    <el-dialog :title="dialogRoomTitle" v-if="dialogRoomOpen" :visible.sync="dialogRoomOpen" width="600px" append-to-body>
      <el-form ref="dialogRoomForm" :model="dialogRoomForm" :rules="rules" label-width="110px">
        <el-form-item label="房间号：" prop="roomNum">
          <el-input v-model="dialogRoomForm.roomNum" maxlength="20" style="width:400px;" placeholder="请输入房间号"/>
        </el-form-item>
        <el-form-item label="房间名称：" prop="roomName">
          <el-input v-model="dialogRoomForm.roomName" maxlength="20" style="width:400px;" placeholder="请输入房间名称"/>
        </el-form-item>
        <el-form-item label="房间类型：" prop="roomType">
          <el-select v-model="dialogRoomForm.roomType" placeholder="请选择房间类型" style="width:400px;">
            <el-option
              v-for="dict in roomTypeOptions"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer dialog-footer-box">
        <p class="dialog-footer-button-null"></p>
        <p class="dialog-footer-button-info" @click="roomCancel">取消</p>
        <p class="dialog-footer-button-primary" @click="roomSubmitForm">提交</p>
        <p class="dialog-footer-button-null"></p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { systemBuildingGetTreeList,} from "@/api/commonality/permission";
  import { getDicts,} from "@/api/commonality/noPermission";
  import { systemBuildingGetTreeAdd,systemBuildingGetUpdate,
    systemBuildingGetList,systemBuildingEditSortNum,systemBuildingEditDelete,
    systemRoomInfoList,systemRoomInfoAdd,systemRoomInfoUpdate,
    systemRoomInfoDelete,systemRoomInfoDetail} from "@/api/integratedManagement/index";
  export default {
    name: 'index',
    data(){
      return{
        schoolName:localStorage.getItem('schoolName'),
        pageType: 1,
        //拖拽排序起始Y点(用于计算朝向)
        clientY: null,
        clientId: null,
        //学校/楼栋/楼层
        treeList: [],
        //选中状态
        checkTreeId: null,
        checkTreeType: 1,
        buildingList: [],
        //楼层展开/关闭状态
        //编辑弹窗开关
        dialogOpen: false,
        dialogType: null,
        dialogTitle: '',
        // 表单参数
        dialogForm: {},
        //校区名称
        yxName: null,
        ldName: null,
        lcName: null,
        parentId: null,
        // 表单校验
        rules: {
          campusName: [
            { required: true, message: '请输入校区名称', trigger: 'blur' },
            { required: true, message: '请输入校区名称', validator: this.spaceJudgment, trigger: 'blur' }
          ],
          buildingName: [
            { required: true, message: '请输入楼栋名称', trigger: 'blur' },
            { required: true, message: '请输入楼栋名称', validator: this.spaceJudgment, trigger: 'blur' }
          ],
          floorName: [
            { required: true, message: '请输入楼层名称', trigger: 'blur' },
            { required: true, message: '请输入楼层名称', validator: this.spaceJudgment, trigger: 'blur' }
          ],
          sortNo: [
            { required: true, message: '请输入排序序号', trigger: 'blur' },
            { required: true, message: '请输入排序序号', validator: this.spaceJudgment, trigger: 'blur' }
          ],
          roomNum: [
            { required: true, message: '请输入房间号', trigger: 'blur' },
            { required: true, message: '请输入房间号', validator: this.spaceJudgment, trigger: 'blur' }
          ],
          roomName: [
            { required: true, message: '请输入房间名称', trigger: 'blur' },
            { required: true, message: '请输入房间名称', validator: this.spaceJudgment, trigger: 'blur' }
          ],
          roomType: [
            { required: true, message: '请选择房间类型', trigger: 'blur' },
          ]
        },
        // 显示搜索条件
        showSearch: true,
        loading: false,
        //楼层查询数据
        queryParams: {},
        //房间列表数据
        dataList: [],
        total: 10,
        //房间类型列表
        roomTypeOptions: [],
        //传参数据
        propsData: {},
        //房间
        dialogRoomTitle:"",
        dialogRoomOpen:false,
        dialogRoomForm:{},
      }
    },
    created() {
      this.getDicts();
    },
    mounted() {
      this.getTreeList();
    },
    methods: {
      //新增学校/楼栋/楼层数据
      addBuildFloor(type) {
        this.$refs['dialogForm'].validate(valid => {
          if (valid) {
            //1.学校 2.楼栋 3.楼层
            let obj = {
              name: type == 1 ? this.dialogForm.campusName : (type == 2 ? this.dialogForm.buildingName : (type == 3 ? this.dialogForm.floorName : '')),
              type: type,
              sortNo: this.dialogForm.sortNo,
              parentId: type == 1 ? 0 : this.checkTreeId
            }
            systemBuildingGetTreeAdd(obj).then(response => {
              this.msgSuccess(response.message)
              this.cancel()
              this.getTreeList()
            })
          }
        })
      },
      //编辑学校/楼栋/楼层数据
      putBuildFloor(type) {
        this.$refs['dialogForm'].validate(valid => {
          if (valid) {
            //1.学校 2.楼栋 3.楼层
            let obj = {
              id: this.dialogForm.id,
              name: type == 1 ? this.dialogForm.campusName : (type == 2 ? this.dialogForm.buildingName : (type == 3 ? this.dialogForm.floorName : '')),
              type: type,
              sortNo: this.dialogForm.sortNo
            }
            systemBuildingGetUpdate(obj).then(response => {
              this.msgSuccess(response.message)
              this.cancel()
              this.getTreeList()
            })
          }
        })
      },
      //删除学校/楼栋/楼层数据
      delBuildFloor(id) {
        systemBuildingEditDelete({id:id}).then(response => {
          this.msgSuccess(response.message)
          this.getTreeList()
        })
      },
      //调整排序
      editSortNum(data) {
        systemBuildingEditSortNum(data).then(response => {
          this.msgSuccess(response.message)
          this.getTreeList()
        })
      },
      roomButton(type,row){
        let self = this;
        if(type == 1){
          this.$set(this, 'dialogRoomTitle', '新增房间')
          this.$set(this, 'dialogRoomForm', {
            roomNum: '',
            roomName: '',
            roomType: '',
          })
          this.$set(this, 'dialogRoomOpen', true)
        }else if(type == 2){
          this.$set(this, 'dialogRoomTitle', '编辑房间')
          this.$set(this, 'dialogRoomForm', row)
          this.$set(this, 'dialogRoomOpen', true)
        }else if(type == 3){
          this.$confirm('是否确认删除?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
          }).then(() => {
            systemRoomInfoDelete({roomId:row.roomId}).then(response => {
              self.msgSuccess(response.message)
              self.getList();
            });
          }).catch(() => {});
        }
      },
      // 取消按钮
      roomCancel() {
        this.$set(this, 'dialogRoomOpen', false)
        this.$set(this, 'dialogRoomForm', {})
        this.$set(this, 'dialogRoomTitle', null)
      },
      //确定按钮
      roomSubmitForm() {
        let obj = JSON.parse(JSON.stringify(this.dialogRoomForm))
        if(obj.roomId){
          systemRoomInfoUpdate(obj).then(response => {
            this.msgSuccess(response.message);
            this.getList()
            this.$set(this, 'dialogRoomOpen', false)
          })
        }else{
          obj.floorId = this.checkTreeId;
          systemRoomInfoAdd(obj).then(response => {
            this.msgSuccess(response.message);
            this.getList()
            this.$set(this, 'dialogRoomOpen', false)
          })
        }
      },
      // 取消按钮
      cancel() {
        this.$set(this, 'dialogOpen', false)
        this.$set(this, 'dialogForm', {})
        this.$set(this, 'dialogType', null)
      },
      //确定按钮
      submitForm() {
        if (this.dialogType == 1) {
          //新增
          this.addBuildFloor(1)
        } else if (this.dialogType == 11) {
          //编辑
          this.putBuildFloor(1)
        } else if (this.dialogType == 2) {
          //新增
          this.addBuildFloor(2)
        } else if (this.dialogType == 22) {
          //编辑
          this.putBuildFloor(2)
        } else if (this.dialogType == 3) {
          //新增
          this.addBuildFloor(3)
        } else if (this.dialogType == 33) {
          //编辑
          this.putBuildFloor(3)
        }
      },
      //楼栋弹出下啦列表选中事件
      handleCommand(command, item) {
        let self = this
        if (command == 1) {
          //编辑校区
          this.$set(this, 'dialogTitle', '编辑校区')
          this.$set(this, 'dialogForm', {
            id: item.id,
            campusName: item.name,
            sortNo: item.sortNo
          })
          this.$set(this, 'dialogType', 11)
          this.$set(this, 'dialogOpen', true)
        } else if (command == 2) {
          //删除校区
          this.$confirm('确定要删除该校区吗?', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(function() {
            self.delBuildFloor(item.id)
          }).then(() => {
          }).catch(() => {
          })
        } else if (command == 3) {
          //新增校区
          this.$set(this, 'dialogForm', {})
          this.$set(this, 'dialogTitle', '新增校区')
          this.$set(this, 'dialogType', 1)
          this.$set(this, 'dialogOpen', true)
        } else if (command == 4) {
          //新增楼栋
          this.$set(this, 'dialogForm', {
            campusName: this.yxName
          })
          this.$set(this, 'dialogTitle', '新增楼栋')
          this.$set(this, 'dialogType', 2)
          this.$set(this, 'dialogOpen', true)
        } else if (command == 5) {

          //编辑楼栋
          this.$set(this, 'dialogForm', {
            id: item.id,
            campusName: this.yxName,
            buildingName: item.name,
            sortNo: item.sortNo
          })
          this.$set(this, 'dialogTitle', '编辑楼栋')
          this.$set(this, 'dialogType', 22)
          this.$set(this, 'dialogOpen', true)
        } else if (command == 6) {
          //删除楼栋
          this.$confirm('确定要删除该楼栋吗?', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(function() {
            self.delBuildFloor(item.id)
          }).then(() => {
          }).catch(() => {
          })
        } else if (command == 7) {
          //新增楼层
          this.$set(this, 'dialogForm', {
            campusName: this.yxName,
            buildingName: this.ldName
          })
          this.$set(this, 'dialogTitle', '新增楼层')
          this.$set(this, 'dialogType', 3)
          this.$set(this, 'dialogOpen', true)
        } else if (command == 8) {
          //编辑楼层
          this.$set(this, 'dialogForm', {
            id: item.id,
            campusName: this.yxName,
            buildingName: this.ldName,
            floorName: item.name,
            sortNo: item.sortNo
          })
          this.$set(this, 'dialogTitle', '编辑楼层')
          this.$set(this, 'dialogType', 33)
          this.$set(this, 'dialogOpen', true)
        } else if (command == 9) {
          //删除楼层
          this.$confirm('确定要删除该楼层吗?', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(function() {
            self.delBuildFloor(item.id)
          }).then(() => {
          }).catch(() => {
          })
        }
      },
      //获取学校/楼栋/楼层树状数据
      getTreeList() {
        systemBuildingGetTreeList({}).then(response => {
          if (response.data[0]) {
            for (let i = 0; i < response.data.length; i++) {
              for (let o = 0; o < response.data[i].buildFloorVoList.length; o++) {
                response.data[i].buildFloorVoList[o].onType = true
              }
            }
            this.$set(this, 'treeList', response.data)
            if (!this.checkTreeId) {
              this.$set(this, 'checkTreeId', response.data[0].id)
              this.$set(this, 'yxName', response.data[0].name)
              this.$set(this, 'parentId', response.data[0].parentId)
            }
            let obj = {
              parentId: this.checkTreeId ? this.checkTreeId : response.data[0].id,
              type:this.checkTreeType
            }
            if(this.checkTreeType == 3){
              this.resetQuery()
            }else{
              this.getTreeSonList(obj);
            }
          }
        })
      },
      //获取校区/楼栋/楼层列表数据
      getTreeSonList(data) {
        systemBuildingGetList(data).then(response => {
          this.$set(this, 'buildingList', response.data)
        })
      },
      //获取楼层实验室数据列表
      getList() {
        let obj = JSON.parse(JSON.stringify(this.queryParams));
        obj.floorId = this.checkTreeId;
        systemRoomInfoList(obj).then(response => {
          this.dataList = response.data.records
          this.total = response.data.total
        })
      },
      //页面切换
      clickPage(type, item) {
        if (type == 1) {
          this.$set(this, 'pageType', type)
        } else if (type == 2) {
          this.$set(this, 'propsData', item)
          if(item.name){
            this.$set(this.propsData, 'buildName', item.buildName)
            this.$set(this.propsData, 'floorName', item.name)
          }else{
            this.$set(this.propsData, 'buildName', this.ldName)
            this.$set(this.propsData, 'floorName', this.lcName)
          }
          this.$set(this, 'pageType', type)
        }else if(type == 3){
          this.$set(this, 'pageType', 1)
          this.resetQuery()
        }
      },
      selectFocus() {

      },
      //树状结构选中
      clickCheckTree(item, type, itemOne) {
        if (item.id != this.checkTreeId) {
          this.$set(this, 'checkTreeId', item.id)
          this.$set(this, 'checkTreeType', type)
          if (type == 1) {
            this.$set(this, 'yxName', item.name)
            this.$set(this, 'buildingList', [])
          } else if (type == 2) {
            this.$set(this, 'ldName', item.name)
            this.$set(this, 'buildingList', [])
          } else if (type == 3) {
            this.$set(this, 'ldName', itemOne.name)
            this.$set(this, 'lcName', item.name)
            this.$set(this, 'buildingList', {})
          }
          let obj = {
            parentId: item.id,
            type:this.checkTreeType
          }
          this.$set(this,'parentId',item.parentId);
          if(type == 3){
            this.resetQuery(obj)
          }else{
            this.getTreeSonList(obj);
          }
        }
      },
      //树状结构展开收回
      terrClick(itemOne) {
        itemOne.onType = !itemOne.onType
      },
      //拖拽抓取时触发
      dragstartPlay(event) {
        this.$set(this, 'clientY', event.clientY)
      },
      //拖拽途径触发
      dragoverPrevent(item) {
        this.$set(this, 'clientId', item.id)
      },
      //拖拽释放触发
      dragEnterOver(event, item) {
        let self = this
        let newList = []
        if (this.clientId && item.id != this.clientId) {
          let list = []
          let obj = null
          for (let i = 0; i < self.buildingList.length; i++) {
            if (self.buildingList[i].id == item.id) {
              obj = JSON.parse(JSON.stringify(self.buildingList[i]))
            }
          }
          if (event.clientY > this.clientY) {
            for (let i = 0; i < self.buildingList.length; i++) {
              if (self.buildingList[i].id != item.id && self.buildingList[i].id != this.clientId) {
                list.push(self.buildingList[i])
              } else if (self.buildingList[i].id == this.clientId) {
                list.push(self.buildingList[i])
                list.push(obj)
              }
            }
          } else if (event.clientY < this.clientY) {
            for (let i = 0; i < self.buildingList.length; i++) {
              if (self.buildingList[i].id == this.clientId) {
                list.push(obj)
                list.push(self.buildingList[i])
              } else if (self.buildingList[i].id != item.id && self.buildingList[i].id != this.clientId) {
                list.push(self.buildingList[i])
              }
            }
          }
          for (let i = 0; i < list.length; i++) {
            newList.push({ id: list[i].id, sortNo: i })
          }
          this.$set(this, 'clientId', null)
          this.editSortNum(newList)
        }
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.$set(this.queryParams, 'page', 1)
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.$set(this, 'queryParams', {
          searchValue: '',
          roomType: '',
          page: 1,
          pageSize: 10
        })
        this.handleQuery()
      },
      /** 查询字典数据列表 */
      getDicts() {
        getDicts('layout_room_type').then(response => {
          let list = response.data;
          list.push({
            label:"其他",
            value:"-99",
          });
          this.$set(this,'roomTypeOptions',list);
        });
      },
    }
  }
</script>

<style scoped lang="scss">
  .buildingManagement{
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    padding:20px;
    .max-left-box {
      width: 281px;
      border-right: 1px dashed #A2A2A2;
      display: flex;
      flex-direction: column;
      .tree-null-p {
        text-align: center;
        line-height: 100px;
        flex: 1;
        color: #999;
      }
      .tree-box {
        flex: 1;
        .terr-max-box {
          margin-top: 20px;
          .max-name-box {
            display: flex;
            margin-right: 20px;
            margin-bottom: 10px;
            color: #D8D8D8;
            font-size: 20px;
            .max-name {
              flex: 1;
              margin-right: 19px;
              color: #333;
              font-size: 16px;
              line-height: 16px;
              margin-top: 3px;
              cursor: pointer;
            }
          }
          .terr-big-box {
            margin-left: 30px;
            .big-name-box {
              cursor: pointer;
              height: 40px;
              line-height: 40px;
              display: flex;
              font-size: 16px;
              color: #333;
              img {
                width: 16px;
                height: 16px;
                margin-top: 12px;
                margin-right: 4px;
              }
              .name-p {
                flex: 1;
              }
            }
            .terr-min-box {
              margin-left: 30px;
              .min-name {
                cursor: pointer;
                height: 40px;
                line-height: 40px;
                display: flex;
                font-size: 16px;
                color: #333;
              }
            }
          }
          .check-color {
            color: #0183FA !important;
          }
        }
      }
      .max-left-big-button {
        color: #0183FA;
        border: 1px dashed #0183FA;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        width: 180px;
        line-height: 40px;
        margin: 20px 0 20px 40px;
        text-align: center;
        font-size: 14px;
        cursor: pointer;
      }
      .max-left-big-button:hover {
        color: #fff;
        background: #0183FA;
        border: 1px solid #0183FA;
      }
    }
    .max-right-box {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .school-box {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .max-right-button-box {
          height: 40px;
          display: flex;
          margin-bottom: 22px;
          .null-p {
            flex: 1;
          }
          .max-right-big-button {
            color: #fff;
            background: #0045AF;
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            border-radius: 6px;
            width: 130px;
            line-height: 40px;
            text-align: center;
            font-size: 14px;
            cursor: pointer;
          }
          .max-right-big-button:hover {
            color: #fff;
            background: #0183FA;
          }
        }
        .right-big-list-box {
          flex: 1;
          position: relative;
          .for-max-box {
            .for-big-box {
              display: flex;
              border: 1px solid #dedede;
              height: 100px;
              box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.16);
              margin-bottom: 30px;
              margin-left: 36px;
              border-radius: 6px;
              .for-big-box-left {
                flex: 1;
                display: flex;
                .for-img-one {
                  cursor: pointer;
                  height: 30px;
                  width: 30px;
                  margin: 35px 0 0 30px;
                }
                .for-text-one {
                  font-size: 16px;
                  line-height: 100px;
                  margin-left: 95px;
                  width: 230px;
                  font-weight: 500;
                }
                .for-img-two {
                  height: 48px;
                  width: 48px;
                  margin: 26px 23px 0 30px;
                }
                .for-text-box-one {
                  width: 88px;
                  margin-right: 73px;
                  p {
                    text-align: center;
                  }
                  p:nth-child(1) {
                    margin-top: 20px;
                    font-size: 24px;
                    line-height: 30px;
                    color: #0183FA;
                  }
                  p:nth-child(2) {
                    margin-top: 10px;
                    font-size: 16px;
                    line-height: 16px;
                    color: #333;
                  }
                }
                .for-img-three {
                  height: 48px;
                  width: 48px;
                  margin: 26px 23px 0 0;
                }
                .for-text-box-two {
                  width: 88px;
                  p {
                    text-align: center;
                  }
                  p:nth-child(1) {
                    margin-top: 20px;
                    font-size: 24px;
                    line-height: 30px;
                    color: #0183FA;
                  }
                  p:nth-child(2) {
                    margin-top: 10px;
                    font-size: 16px;
                    line-height: 16px;
                    color: #333;
                  }
                }
              }
              .for-button-min-box {
                width: 220px;
                margin-top: 9px;
                height: 82px;
                border-left: 1px dashed rgba(0, 0, 0, 0.3);
                display: flex;
                line-height: 82px;
                div {
                  margin-left: 34px;
                  display: flex;
                  width: 60px;
                  cursor: pointer;
                  .iconfont-a{
                    margin-right:5px;
                    font-size:18px;
                    color:#0183FA;
                  }
                  .iconfont-b{
                    margin-right:5px;
                    margin-top: 1px;
                    font-size:15px;
                    color:#0183FA;
                  }
                  p {
                    font-size: 14px;
                    color: #333;
                  }
                }
              }
            }
          }
          .null-img {
            position: absolute;
            top: 40%;
            left: 50%;
            width: 276px;
            height: 321px;
            margin-top: -160px;
            margin-left: -138px;
          }
        }
      }
      .building-box {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .max-right-button-box {
          height: 40px;
          display: flex;
          margin-bottom: 22px;
          .null-p {
            flex: 1;
          }
          .max-right-big-button {
            color: #fff;
            background: #0045AF;
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            border-radius: 6px;
            width: 130px;
            line-height: 40px;
            text-align: center;
            font-size: 14px;
            cursor: pointer;
          }
          .max-right-big-button:hover {
            color: #fff;
            background: #0183FA;
          }
        }
        .right-big-list-box {
          flex: 1;
          position: relative;
          .for-max-box {
            margin-bottom: 30px;
            .for-big-box {
              display: flex;
              border: 1px solid #dedede;
              height: 100px;
              box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.16);
              margin-left: 36px;
              border-radius: 6px;
              .for-big-box-left {
                flex: 1;
                display: flex;
                .for-img-one {
                  cursor: pointer;
                  height: 30px;
                  width: 30px;
                  margin: 35px 0 0 30px;
                }
                .for-text-one {
                  font-size: 16px;
                  line-height: 100px;
                  margin-left: 95px;
                  width: 230px;
                  font-weight: 500;
                }
                .for-img-two {
                  height: 48px;
                  width: 48px;
                  margin: 26px 23px 0 30px;
                }
                .for-text-box-one {
                  width: 88px;
                  margin-right: 73px;
                  p {
                    text-align: center;
                  }
                  p:nth-child(1) {
                    margin-top: 20px;
                    font-size: 24px;
                    line-height: 30px;
                    color: #0183FA;
                  }
                  p:nth-child(2) {
                    margin-top: 10px;
                    font-size: 16px;
                    line-height: 16px;
                    color: #333;
                  }
                }
                .for-img-three {
                  height: 48px;
                  width: 48px;
                  margin: 26px 23px 0 0;
                }
                .for-text-box-two {
                  width: 88px;
                  p {
                    text-align: center;
                  }
                  p:nth-child(1) {
                    margin-top: 20px;
                    font-size: 24px;
                    line-height: 30px;
                    color: #0183FA;
                  }
                  p:nth-child(2) {
                    margin-top: 10px;
                    font-size: 16px;
                    line-height: 16px;
                    color: #333;
                  }
                }
              }
              .for-button-min-box {
                width: 330px;
                margin-top: 9px;
                height: 82px;
                border-left: 1px dashed rgba(0, 0, 0, 0.3);
                display: flex;
                line-height: 82px;
                div {
                  margin-left: 34px;
                  display: flex;
                  width: 60px;
                  cursor: pointer;
                  .iconfont-a{
                    margin-right:5px;
                    font-size:18px;
                    color:#0183FA;
                  }
                  .iconfont-b{
                    margin-right:5px;
                    margin-top: 1px;
                    font-size:15px;
                    color:#0183FA;
                  }
                  p {
                    font-size: 14px;
                    color: #333;
                  }
                }
              }
            }
            .layout-data-max-big-null-box {
              height: 400px;
              margin-left: 36px;
              border-left: 1px solid #e0e0e0;
              border-right: 1px solid #e0e0e0;
              border-bottom: 1px solid #e0e0e0;
              position: relative;
              overflow: hidden;
              img {
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -71px;
                margin-top: -71px;
                width: 142px;
                height: 142px;
              }
              div {
                margin-top: 300px;
                height: 30px;
                display: flex;
                p:nth-child(1) {
                  flex: 1;
                }
                p:nth-child(2) {
                  margin-right: 20px;
                  color: #333;
                  font-size: 14px;
                }
                p:nth-child(3) {
                  color: #0183FA;
                  font-size: 14px;
                  cursor: pointer;
                }
                p:nth-child(4) {
                  flex: 1;
                }
              }
            }
          }
          .null-img {
            position: absolute;
            top: 40%;
            left: 50%;
            width: 276px;
            height: 321px;
            margin-top: -160px;
            margin-left: -138px;
          }
        }
      }
      .floor-box {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .floor-table-box {
          margin-left: 36px;
          flex: 1;
          display: flex;
          flex-direction: column;
          overflow: hidden;
        }
      }
    }
  }
</style>