|
|
@@ -0,0 +1,374 @@
|
|
|
+<template>
|
|
|
+ <div v-loading="loading">
|
|
|
+ <div class="white-box">
|
|
|
+ <el-tabs v-model="tabActiveName">
|
|
|
+ <el-tab-pane :label="$t('atlas.sponsorNetworkDiagram')" 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">{{ $t('atlas.topMember') }}<!-- 顶级会员 --></template>
|
|
|
+ </el-input>
|
|
|
+ <el-input v-model="expandDeep" size="small" style="width:200px;">
|
|
|
+ <template slot="prepend">{{ $t('atlas.spreadDepth') }}<!-- 展开深度 --></template>
|
|
|
+ </el-input>
|
|
|
+ <el-input v-model="periodNum" size="small" style="width:150px;" v-show="false">
|
|
|
+ <template slot="prepend">{{ $t('atlas.numberOfPeriods') }}<!-- 期数 --></template>
|
|
|
+ </el-input>
|
|
|
+ <el-button type="primary" size="small" @click="getMainData()">{{ $t('common.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"><!-- 代数 -->{{ $t('atlas.algebra') }}： {{countTopDeep(data.TOP_RELATION_DEEP,topDeep)}}</el-tag>
|
|
|
+ <el-tag><!-- 会员编号 -->{{ $t('atlas.memberCode') }}：{{ node.label }}</el-tag>
|
|
|
+ <el-tag type="success">{{ $t('atlas.name') }}<!-- 姓名 -->：{{data.REAL_NAME}}</el-tag>
|
|
|
+ <el-tag type="warning">{{ $t('atlas.level') }}<!-- 级别 -->：{{data.DEC_LV_NAME}}</el-tag>
|
|
|
+ <el-tag type="warning">{{ $t('atlas.highest') }}：<!-- 聘级 -->{{data.EMP_LV_NAME}}, {{data.CROWN_LV_NAME}}</el-tag>
|
|
|
+ <!-- <el-tag type="warning">Star：<!– 星级 –>{{data.CROWN_LV_NAME}}</el-tag>-->
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </el-tree>
|
|
|
+ <div v-if="treeChartShow" class="tree-chart">
|
|
|
+ <tree-chart :tree-data="treeData" :top-deep="topDeep" type="placement" @clickNode="getNodeData" :clickNodeList="clickNodeList" />
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane :label="$t('atlas.sponsorNetworkList')" name="two" v-if="permission.hasPermission(`atlas/relation-list`)"><!-- 开拓网络列表 -->
|
|
|
+ <div class="filter-user">
|
|
|
+ <el-input v-model="filterForm.userName" size="small" style="width:300px;">
|
|
|
+ <template slot="prepend"><!-- 会员编号 -->{{ $t('atlas.memberCode') }}</template>
|
|
|
+ </el-input>
|
|
|
+ <el-input v-model="filterForm.deep" size="small" style="width:150px;">
|
|
|
+ <template slot="prepend"><!-- 深度 -->{{ $t('atlas.depth') }}</template>
|
|
|
+ </el-input>
|
|
|
+ <el-input v-model="filterForm.periodNum" size="small" style="width:150px;" v-show="false">
|
|
|
+ <template slot="prepend"><!-- 期数 -->{{ $t('atlas.numberOfPeriods') }}</template>
|
|
|
+ </el-input>
|
|
|
+ <el-button type="primary" size="small" @click="handleFilter">{{ $t('common.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="$t('atlas.subordinatesMember')" 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>
|
|
|
+ </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`)">{{ $t('common.exportExcel') }}<!-- 导出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 { getRelation, mainUserInfo, relationList, relationListExport } from '@/api/atlas'
|
|
|
+import Pagination from '@/components/Pagination'
|
|
|
+import treeChart from '@/components/TreeChart/index.vue'
|
|
|
+import baseInfo from '@/utils/baseInfo'
|
|
|
+import permission from '@/utils/permission'
|
|
|
+import tool from '@/utils/tool'
|
|
|
+import store from '@/utils/vuexStore'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: 'atlas_relation-ex',
|
|
|
+ components: {Pagination,treeChart},
|
|
|
+ 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,
|
|
|
+
|
|
|
+ //tree
|
|
|
+ treeChartShow: false,
|
|
|
+ treeData: {
|
|
|
+ name: null,
|
|
|
+ children: null
|
|
|
+ },
|
|
|
+ clickNodeList:[],
|
|
|
+ clickNodeUserId:null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //tree
|
|
|
+ getNodeData(e) {
|
|
|
+ // console.log(e)
|
|
|
+ if (e.collapsed === false && e.data.children == null) {
|
|
|
+ console.log(e.name + '---节点展开')
|
|
|
+ }
|
|
|
+ if (e.data.children == null) {
|
|
|
+ this.clickNodeUserId = e.data.USER_ID
|
|
|
+ this.getChildData(e.data, 'clickNode')
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ getData() {
|
|
|
+ this.$message({
|
|
|
+ message: this.$t('atlas.getDataWait'),//正在获取数据，请稍后
|
|
|
+ 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: this.$t('atlas.getDataWait'),//正在获取数据，请稍后
|
|
|
+ })
|
|
|
+ let thisObj = this
|
|
|
+ let requestData = {
|
|
|
+ periodNum: this.periodNum
|
|
|
+ }
|
|
|
+ if (this.mainUserName !== null) {
|
|
|
+ requestData = {userName: this.mainUserName,periodNum: this.periodNum}
|
|
|
+ }
|
|
|
+ mainUserInfo(requestData).then(response=>{
|
|
|
+ thisObj.treeData = response.data
|
|
|
+ thisObj.topDeep = Number(response.data[0].TOP_RELATION_DEEP)
|
|
|
+ thisObj.listPeriodNum = response.data[0].listPeriodNum
|
|
|
+ if(getList) thisObj.getListData()
|
|
|
+ thisObj.loading = false
|
|
|
+ }).catch(err => {
|
|
|
+ this.$message({
|
|
|
+ message: err,
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ 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: this.$t('atlas.getDataWait'),//正在获取数据，请稍后
|
|
|
+ })
|
|
|
+ thisData.displayNone = ''
|
|
|
+ getRelation({
|
|
|
+ id: userId,
|
|
|
+ deep: thisObj.expandDeep,
|
|
|
+ periodNum: this.periodNum
|
|
|
+ }).then(response => {
|
|
|
+ thisObj.$refs.tree.updateKeyChildren(userId, response.data.allData)
|
|
|
+ thisData.listPeriodNum = response.data.periodNum
|
|
|
+ thisData.displayNone = 'display-none'
|
|
|
+ thisData.isExpanded = true
|
|
|
+ }).catch(err => {
|
|
|
+ this.$message({
|
|
|
+ message: err,
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ countTopDeep(deep,topDeep){
|
|
|
+ return Number(deep)-Number(topDeep)
|
|
|
+ },
|
|
|
+ getListData(page, pageSize) {
|
|
|
+ let obj = this
|
|
|
+ let filterData = this.filterForm
|
|
|
+ const paramsData = Object.assign({
|
|
|
+ page: (page === null || page == undefined) ? 1 : page,
|
|
|
+ pageSize: (pageSize === null || pageSize == undefined) ? obj.pageSize : pageSize
|
|
|
+ }, filterData)
|
|
|
+ relationList(paramsData).then(response => {
|
|
|
+ obj.tableHeaders = response.data.columnsShow ? response.data.columnsShow : []
|
|
|
+ obj.tableData = response.data.list
|
|
|
+ obj.filterTypes = response.data.filterTypes
|
|
|
+ obj.allData = response.data.list
|
|
|
+ obj.listTopDeep = response.data.listTopDeep
|
|
|
+ obj.periodNum = response.data.periodNum
|
|
|
+ obj.currentPage = page
|
|
|
+ obj.totalPages = parseInt(response.data.totalPages)
|
|
|
+ obj.totalCount = parseInt(response.data.totalCount)
|
|
|
+ obj.pageSize = pageSize
|
|
|
+ obj.loading = false
|
|
|
+ }).catch(err => {
|
|
|
+ obj.loading = false
|
|
|
+ this.$message({
|
|
|
+ message: err,
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ 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(this.$t('atlas.exportNotice'), this.$t('common.hint'), {
|
|
|
+ confirmButtonText: this.$t('common.confirm'), // 确定
|
|
|
+ cancelButtonText: this.$t('common.cancel'), // 取消
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ relationListExport(this.filterForm).then(response => {
|
|
|
+ this.$message({
|
|
|
+ message: response.data,
|
|
|
+ type: 'success'
|
|
|
+ })
|
|
|
+ }).catch(err => {
|
|
|
+ this.$message({
|
|
|
+ message: err,
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </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>
|
tyler