org.vue

<template>
  <div class="template-box content_div_main org-box">
    <div class="videoleft-box">
      <el-tree
      v-loading="loading"
      highlight-current
        :props="defaultProps"
        :load="loadNode"
        lazy
        @node-click="handleNodeClick"
        >
      </el-tree>
    </div>
    <div class="org-right-box">
      <!-- <el-button class="search-btn ml10 mt10" @click="addorg()" icon="el-icon-plus">添加</el-button> -->
      <el-table
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        ref="multipleTable"
        :data="tableData"
        :height="680"
        tooltip-effect="dark"
        style="width: 100%;margin-top:20px"
      >
        <div slot="empty">
          <div class="no-data-box">
            <img src="../../assets/img/nodata.png" alt="暂无数据" />
            <div>暂无数据</div>
          </div>
        </div>
        <el-table-column type="type" width="55" label="#"></el-table-column>
        <el-table-column label="本地IP" prop="localIp"></el-table-column>
        <el-table-column label="设备序列号" prop="serialnum"></el-table-column>
        <el-table-column label="状态" :formatter="formatHpzl" prop="status"></el-table-column>
        <el-table-column label="外网IP" prop="wanIp"></el-table-column>
        <!-- <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="info" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
    <div class="dialog-org">
      <el-dialog title="添加组织机构" :visible.sync="dialogVisible" width="30%" @close="dialogclose()">
        <el-row>
          <el-form ref="orgform" :model="orgform" label-width="170px" class="demo-ruleForm">
            <el-form-item label="父节点名称" prop="org_name">
              <el-input class v-model="curOrgData.org_name" disabled style="width:100%"></el-input>
            </el-form-item>
            <el-form-item
              label="节点类型"
              prop="oreType"
              :rules="[
                          { required: true, message: '请选择节点类型！', trigger: 'blur' } ]"
            >
              <el-select v-model="orgform.oreType" placeholder="请选择添加类型" class="selbox">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="节点名称"
              prop="orgname"
              :rules="[
                          { required: true, message: '请输入节点名称！', trigger: 'blur' } ]"
            >
              <el-input class v-model="orgform.orgname" style="width:100%"></el-input>
            </el-form-item>
            <el-col :span="15" :offset="5"></el-col>
          </el-form>
        </el-row>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveORg">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    var validate= (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请先点击左侧选择父节点！'));
            } else {
              callback();
            }
          };
    return {
      loading:false,
      tableData: [],
      parentname: "",
      options: [
        {
          value: "org",
          label: "组织"
        },
        {
          value: "address",
          label: "地点"
        },
        {
          value: "root",
          label: "根节点"
        }
      ],
      treedata: [],
      defaultProps: {
        children: "childs",
        label: "name",
        isLeaf: "leaf"
      },
      dialogVisible: false,
      orgform: {
        oreType:'',
        orgname:''
      },
      curOrgData: {},
      accountId:localStorage.getItem('accountId')
    };
  },
  methods: {
    dialogclose(){
      this.$refs.orgform.resetFields()
    },
    handleNodeClick(data,node) {
      if(node.childNodes.length>0&&data.floorId){
        this.tableData=[]
        node.childNodes.forEach(item=>{
          this.tableData.push(item.data)
        })
      }
    },
    formatHpzl(data) {
      if (data.status == 0) return "离线";
      if (data.status == 1) return "在线";
    },
    buildTree(data) {
      if (!data) {
        return;
      }
      var store = [];
      store.push(data);
      let substore;
      while (store.length > 0) {
        substore = store.pop();
        if (substore.childs && substore.childs.length > 0) {
          var i = substore.childs.length - 1;
          for (i = substore.childs.length - 1; i >= 0; i--) {
            if (substore.childs[i].org_type == "vchan") {
              substore.childs.splice(i,1)
            }
            store.push(substore.childs[i]);
          }
        }
      }
    },
    addorg(){
      this.dialogVisible = true
    },
    handleDelete(index, row) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            this.axios.delete(this.API.org.deleteorg(row.unid)).then((response)=> {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                this.deleteorg(row)
            });

        }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });
        });
    },
    saveORg() {
      // store.append({ id: 11, label: 'testtest', children: [] }, data);
      var data = {
        org_name: this.orgform.orgname,
        org_pid: this.curOrgData.unid,
        is_leaf: true,
        org_type: this.orgform.oreType
      };
      if (data.org_type == "root") {
        data.org_pid = 0;
        data.org_type = "org";
        this.eiditroot = true;
      }
      if (this.curOrgData.unid == 0||!this.curOrgData.unid ) {
               this.$message({
                 type: "warning",
                 message: "请点击左侧选择父节点！"
               });
               return;
             }
      if (this.curOrgData.org_type != "address") {
        if (data.org_type == "address" && this.curOrgData.pid == 0) {
          this.$message({
            type: "warning",
            message: "根节点下不能添加地址！"
          });
          return;
        }
        this.$refs["orgform"].validate(valid => {
          if (valid) {
            this.axios.post(this.API.org.getorg, data).then(response => {
              if (this.orgform.oreType == "root") {
                //添加根节点
                this.getorgtree();
              }
              if (this.orgform.oreType == "address") {
                this.faceapi.getAddress();
              }
              if (this.orgform.oreType == "org") {
                this.faceapi.getOrg();
              }
              console.log('aaa')
              this.dialogVisible = false;
              var obj = {
                unid: response.data.unid,
                org_name: this.orgform.orgname,
                org_type: response.data.org_type,
                pid: response.data.org_pid,
                childs: []
              };
              this.searchCurDate(this.treedata, obj);
              this.$message({
                type: "success",
                message: "添加成功"
              });
            });
          }
        });
      } else {
        if (this.curOrgData.org_type == "address") {
          this.$message({
            type: "warning",
            message: "地点下不能添加机构"
          });
        }
      }
    },
    deleteorg(row) {
      this.deleteorgData(this.treedata, row);
      // this.getorgtree();
    },
    deleteorgData(alldata, deleteData) {
      for (var i = 0; i < alldata.length; i++) {
        if (alldata[i] == deleteData) {
          alldata.splice(i, 1);
        } else {
          if (alldata[i].childs)
            this.deleteorgData(alldata[i].childs, deleteData);
        }
      }
      console.log(alldata)
    },
     loadNode(node, resolve) {
       this.loading = true;
        if (node.level === 0) {
            this.axios.get(this.API.url+"/malls",{
              params:{
                accountId:this.accountId,
                status:1
              }
            }).then((res)=>{
              return resolve(res.data.data)
            })
        }
        if (node.level === 1){
              this.axios.get(this.API.url+"/gates/filter",{
                params:{
                  mallId:node.data.id,
                  accountId:this.accountId,
                  status:1
                }
              }).then((res)=>{
                return resolve(res.data.data)
              })

        }
        if(node.level === 2){
          let deviceArr=[];
                this.axios.get(this.API.url+"/channels",{
                  params:{
                    gateId:node.data.id
                  }
                }).then((res)=>{
                  const promises=res.data.data.map((item)=>{
                    return this.axios.get(this.API.url+"/devices/"+item.deviceId)
                  })
                  Promise.all(promises).then(res=>{
                    res.forEach(item=>{
                      item.data.data.leaf=true;
                      deviceArr.push(item.data.data)
                    })
                    this.tableData=deviceArr;
                    return resolve(deviceArr)
                  })
                })
        }
        this.loading = false;
        if(node.level > 2){
          return resolve([])
        }
      },
    getorgtree() {
      this.axios.get(this.API.org.getorgtree).then(res => {
        this.treedata = res.data;
        // if (res.data.length > 0) {
        //   res.data.forEach(e => {
        //     this.buildTree(e);
        //   });
        // }
      });
    },
  searchCurDate(alldata, childrenData) {
      for (var i = 0; i < alldata.length; i++) {
        if (alldata[i] == this.curOrgData) {
          if (alldata[i].childs) {
            console.log('www')
            alldata[i].childs.push(childrenData);
            // alldata[i].childs.$set(alldata[i].childs.length, childrenData)
            console.log(alldata[i].childs)
          }
        } else {
          if (alldata[i].childs)
            this.searchCurDate(alldata[i].childs, childrenData);
        }
      }
      return alldata;
    },
  },
  created() {
    this.getorgtree();
  }
};
</script>
<style lang="stylus">
.org-box {
  display: flex;
}

.videoleft-box {
  margin: 5px;
  width: 230px;
  height: calc(100vh - 130px);
  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.1);
  background: #ffffff;
  border-radius: 5px;
  overflow: hidden;
}

.org-right-box {
  width: calc(100vw - 220px);
  margin: 5px;
  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.1);
}

.selbox {
  width: 100%;
}
</style>