ngds/backendEle/src/views/atlas/relation-opt.vue

<template>
  <div v-loading="loading">
    <div class="white-box">
      <el-tabs v-model="tabActiveName">
        <el-tab-pane label="Development network diagram" name="first" v-if="permission.hasPermission(`atlas/relation`)"><!-- 开拓网络图 -->
          <div class="filter-user">
            <el-input v-model="mainUserName" size="small" style="width:300px;">
              <template slot="prepend">Top member<!-- 顶级会员 --></template>
            </el-input>
            <el-input v-model="expandDeep" size="small" style="width:200px;">
              <template slot="prepend">Spread depth<!-- 展开深度 --></template>
            </el-input>
            <el-input v-model="periodNum" size="small" style="width:150px;" v-show="false">
              <template slot="prepend">Number of periods<!-- 期数 --></template>
            </el-input>
            <el-button type="primary" size="small" @click="getMainData()">confirm<!-- 确定 --></el-button>
          </div>
          <el-tree :props="props" :data="treeData" node-key="USER_ID" @node-click="getChildData" ref="tree" :indent="0"
                   default-expand-all>
                <span :id="'node_'+data.USER_ID" :class="'custom-tree-node '+data.className"
                      slot-scope="{ node, data }">
                    <span :class="'el-icon-loading '+ data.displayNone"></span>
                    <span :class="data.icon"></span>
                    <span>
                      <el-tag type="danger"><!-- 代数 -->Algebra：{{countTopDeep(data.TOP_RELATION_DEEP,topDeep)}}</el-tag>
                      <el-tag><!-- 会员编号 -->Member code：{{ node.label }}</el-tag>
                      <el-tag type="success">Name<!-- 姓名 -->：{{data.REAL_NAME}}</el-tag>
                      <el-tag type="warning">Level<!-- 级别 -->：{{data.DEC_LV_NAME}}</el-tag>
                      <el-tag type="warning">Rank：<!-- 聘级 -->{{data.EMP_LV_NAME}}</el-tag>
                      <el-tag type="warning">Star：<!-- 星级 -->{{data.STAR_LV_NAME}}</el-tag>
                    </span>
                </span>
          </el-tree>
        </el-tab-pane>
        <el-tab-pane label="Development network list" name="two" v-if="permission.hasPermission(`user/relation-list`)"><!-- 开拓网络列表 -->
          <div class="filter-user">
            <el-input v-model="filterForm.userName" size="small" style="width:300px;">
              <template slot="prepend"><!-- 会员编号 -->Member code</template>
            </el-input>
            <el-input v-model="filterForm.deep" size="small" style="width:150px;">
              <template slot="prepend"><!-- 深度 -->depth</template>
            </el-input>
            <el-input v-model="filterForm.periodNum" size="small" style="width:150px;" v-show="false">
              <template slot="prepend"><!-- 期数 -->Number of periods</template>
            </el-input>
            <el-button type="primary" size="small" @click="handleFilter">confirm<!-- 确定 --></el-button>
          </div>

          <el-table :data="tableData" stripe style="width: 100%;" :height="tool.getTableHeight(true)">
            <!--<el-table-column type="selection" width="55" v-if="tableHeaders"></el-table-column>-->
            <el-table-column v-for="(tableHeader, key) in tableHeaders" :key="key" :label="tableHeader.header" :width="tableHeader.other.width ? tableHeader.other.width : ''">
              <template slot-scope="scope">
                <template v-if="scope.row[tableHeader.index].other.tag" >
                  <el-tag :type="scope.row[tableHeader.index].other.tag.type ? scope.row[tableHeader.index].other.tag.type : null" :size="scope.row[tableHeader.index].other.tag.size ? scope.row[tableHeader.index].other.tag.size : null" :class="scope.row[tableHeader.index].other.tag.class ? scope.row[tableHeader.index].other.tag.class : null" >{{scope.row[tableHeader.index].value}}</el-tag>
                </template>
                <template v-else-if="scope.row[tableHeader.index].other.progress" >
                  <el-progress type="circle" :percentage="Number.parseInt(percentList['MOVE_PERCENT'][scope.row.ID])"
                               :width="50"
                               :stroke-width="3"></el-progress>
                </template>
                <template v-else>
                  <template v-if="tableHeader.index === 'USER_NAME'">
                    <el-tooltip class="item" effect="dark" content="View the subordinates of this member" placement="top"><!-- 查看该会员的下级 -->
                      <el-button @click.native="handleShow(scope.row)" size="small" type="primary">
                        {{scope.row[tableHeader.index].value}}
                      </el-button>
                    </el-tooltip>
                  </template>
                  <template v-else>
                    <div v-html="scope.row[tableHeader.index].value"></div>
                  </template>
                </template>
                <!--<template v-else>-->
                  <!--<div v-html="scope.row[tableHeader.index].value"></div>-->
                <!--</template>-->
              </template>
            </el-table-column>
            <!--<el-table-column fixed="right" label="操作" width="180" v-if="tableHeaders">-->
              <!--<template slot-scope="scope">-->
                <!--<el-dropdown size="small" trigger="click">-->
                  <!--<el-button type="primary" size="small" @click.stop="">-->
                    <!--操作该数据<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
                  <!--</el-button>-->
                  <!--<el-dropdown-menu slot="dropdown">-->
                    <!--<el-dropdown-item command="edit" @click.native="handleShow(scope.row)">查看下级</el-dropdown-item>-->
                  <!--</el-dropdown-menu>-->
                <!--</el-dropdown>-->
              <!--</template>-->
            <!--</el-table-column>-->
          </el-table>
          <div class="white-box-footer">
            <el-button type="success" size="small" @click="handleExport"
                       v-show="permission.hasPermission(`atlas/relation-list-export`)">Export Excel<!-- 导出Excel -->
            </el-button>
            <pagination :total="totalCount" :page_size="pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"></pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import network from '@/utils/network'
  import tool from '@/utils/tool'
  import store from '@/utils/vuexStore'
  import permission from '@/utils/permission'
  import Pagination from '@/components/Pagination'
  import baseInfo from '@/utils/baseInfo'

  export default {
    name: 'atlas_relation-opt',
    components: {Pagination},
    mounted() {
      this.getData()
      store.state.socket.onMessageCallback = this.onMessageCallback
    },
    data() {
      return {
        loading: true,
        tabActiveName: 'first',
        permission: permission,
        //relation
        props: {
          label: 'USER_NAME',
          children: 'children',
          //isLeaf: 'leaf',
          icon: 'icon',
        },
        treeData: null,
        expandDeep: 2,
        topDeep: 0,
        mainUserName: '',
        periodNum: null,
        listPeriodNum: null,
        allData: null,
        tableHeaders: null,
        tableData: null,
        currentPage: 1,
        totalPages: 1,
        totalCount: 1,
        pageSize: 20,
        tool: tool,
        filterForm: {
          userName: null,
          deep: 2,
          periodNum: null,
        },
        listTopDeep: 0,
      }
    },
    methods: {
      getData() {
        this.$message({
          message: 'Getting data, please wait',//正在获取数据，请稍后
          duration:0
        })
        this.periodNum = baseInfo.nowPeriodNum()
        this.filterForm.periodNum = baseInfo.nowPeriodNum()
        if (permission.hasPermission(`atlas/relation-list`) && !permission.hasPermission(`atlas/relation`)) {
          this.tabActiveName = 'two'
          this.getListData()
        }
        if (permission.hasPermission(`atlas/relation`)) {
          this.tabActiveName = 'first'
          if (permission.hasPermission(`atlas/relation-list`)) {
            this.getMainData(null, true)
          } else {
            this.getMainData()
          }
        }
      },
      getMainData (userName = null, getList = false) {
        this.$message.closeAll()
        this.$message({
          message: 'Getting data, please wait',//正在获取数据，请稍后
        })
        let thisObj = this
        let requestData = {
          periodNum: this.periodNum
        }
        if (this.mainUserName !== null) {
          requestData = {userName: this.mainUserName,periodNum: this.periodNum}
        }
        network.getData('atlas/main-user-info', requestData).then(response => {
          thisObj.treeData = response
          thisObj.topDeep = Number(response[0].TOP_RELATION_DEEP)
          thisObj.listPeriodNum = response[0].listPeriodNum
          if(getList) thisObj.getListData()
          thisObj.loading = false
        }).catch(response => {
          thisObj.loading = false
        })
      },
      getChildData (data, node) {
        let thisObj = this
        let userId = data.USER_ID
        let thisData = data
        if (thisData.leaf) {
          return ''
        }
        if (thisData.isExpanded) {
          return ''
        }
        if (thisData.children !== null && thisData.children.length > 0) {
          return ''
        }
        this.$message({
          message: 'Getting data, please wait',//正在获取数据，请稍后
        })
        thisData.displayNone = ''
        network.getData('atlas/relation', {
          id: userId,
          deep: thisObj.expandDeep,
          periodNum: this.periodNum
        }).then(response => {
          thisObj.$refs.tree.updateKeyChildren(userId, response.allData)
          thisData.listPeriodNum = response.periodNum
          thisData.displayNone = 'display-none'
          thisData.isExpanded = true
        })
      },
      countTopDeep(deep,topDeep){
        return Number(deep)-Number(topDeep)
      },
      getListData(page, pageSize) {
        let obj = this
        network.getPageData(this, 'atlas/relation-list', page, pageSize, this.filterForm, function (response) {
          obj.allData = response
          obj.listTopDeep = response.listTopDeep
          obj.periodNum = response.periodNum
        })
      },
      handleCurrentChange(page) {
        this.getListData(page, this.pageSize)
      },
      handleSizeChange(pageSize) {
        this.getListData(this.currentPage, pageSize)
      },
      handleFilter() {
        this.getListData(1, this.pageSize)
        this.tabActiveName = 'two'
      },
      handleShow(row) {
        this.loading = true
        this.filterForm.userName = row.SEE_USER_NAME
        this.filterForm.deep = 1
        this.getListData(1, this.pageSize)
        this.tabActiveName = 'two'
      },
      onMessageCallback(data) {
        //this.getData(this.currentPage, this.pageSize, false)
      },
      handleExport(){
        this.$confirm(`Are you sure you want to export the current data？`, 'Hint', {//`确定要导出当前数据吗？`, '提示'
          confirmButtonText: 'confirm', // 确定
          cancelButtonText: 'cancel', // 取消
          type: 'warning'
        }).then(() => {
          return network.getData(`atlas/relation-list-export`, this.filterForm)
        }).then(response => {
          this.$message({
            message: response,
            type: 'success'
          })
        }).catch(response => {

        })
      },
    }
  }
</script>

<style>
  .filter-user{font-size: 14px;margin-bottom: 20px;}
  .filter-user:after{content: '';display: table;
    clear: both;}
  .filter-user .el-input-group{float: left;margin-right: 15px;}
  .el-tree {
    padding-bottom: 20px;
    font-size: 14px;
    overflow-x: auto;
  }

  .el-tree .el-tag {
    height: 20px;
    line-height: 18px;vertical-align: middle;
  }
  .el-tree-node{position: relative;}

  .el-tree-node__content {
    height: 30px;
    line-height: 30px;
  }

  .el-tree-node__children {
    position: relative;
    padding: 0 0 0 16px;
  }

  .el-tree-node:before {
    position: absolute;
    content: '';
    top: 0px;
    left: -4px;
    height: 100%;
    border-left: 1px solid #ccc;
  }
  .el-tree-node:last-child:before{height: 15px;}

  .custom-tree-node {
    position: relative;
    padding-left: 5px;
  }

  .first-node:before {
    display: none;
  }

  .custom-tree-node:before {
    position: absolute;
    width: 8px;
    content: '';
    top: 15px;
    left: -4px;
    border-bottom: 1px solid #ccc;
  }

  .el-tree-node__expand-icon {
    display: none !important;
  }
</style>