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

<template>
  <div v-loading="loading">
    <div class="white-box">
      <div style="margin-bottom: 10px;">
        会员编号：
        <el-input v-model="filterForm.userName" size="mini" style="width:200px;"></el-input>
        深度：
        <el-input v-model="filterForm.deep" size="mini" style="width:60px;"></el-input>
        期数：
        <el-input v-model="filterForm.periodNum" size="mini" style="width:60px;"></el-input>
        <el-button type="primary" size="small" @click="handleFilter">确定</el-button>
      </div>
      <el-table :data="tableData" stripe style="width: 100%;" :height="tool.getTableHeight()">
        <el-table-column label="会员编号" prop="USER_NAME">
          <template slot-scope="scope">
            <el-tag size="small" class="no-border">{{scope.row.BASE_INFO.USER_NAME}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="会员姓名" prop="REAL_NAME">
          <template slot-scope="scope">
            <el-tag type="success" size="small" class="no-border">{{scope.row.BASE_INFO.REAL_NAME}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="级别">
          <template slot-scope="scope">
            {{scope.row.BASE_INFO.DEC_LV_NAME}}
          </template>
        </el-table-column>
        <el-table-column label="聘级">
          <template slot-scope="scope">
            {{scope.row.BASE_INFO.EMP_LV_NAME}}
          </template>
        </el-table-column>
        <!--<el-table-column label="团队人数" prop="CHILD_NUM"></el-table-column>-->
        <el-table-column label="加入期数">
          <template slot-scope="scope">
            {{scope.row.BASE_INFO.PERIOD_AT}}
          </template>
        </el-table-column>
        <el-table-column label="代数" prop="TOP_DEEP"></el-table-column>
        <el-table-column label="省" prop="BASE_INFO.PROVINCE_NAME"></el-table-column>
        <el-table-column label="市" prop="BASE_INFO.CITY_NAME"></el-table-column>
        <el-table-column label="创建时间" width="170">
          <template slot-scope="scope">
            {{tool.formatDate(scope.row.CREATED_AT)}}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="180">
          <template slot-scope="scope">
            <el-dropdown size="small" trigger="click">
              <el-button type="primary" size="small" @click.stop="">
                Operate on this data<i class="el-icon-arrow-down el-icon--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">Export Excel</el-button>
        <pagination :total="totalCount" :page_size="pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"></pagination>
      </div>
    </div>
  </div>
</template>

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

  export default {
    name: 'atlas_relation-list',
    components: {Pagination},
    mounted() {
      this.getData()
      store.state.socket.onMessageCallback = this.onMessageCallback
    },
    data() {
      return {
        allData: null,
        tableData: null,
        loading: true,
        currentPage: 1,
        totalPages: 1,
        totalCount: 1,
        pageSize: 20,
        tool: tool,
        baseDecLevels: baseInfo.decLevels(),
        baseEmpLevels: baseInfo.empLevels(),
        filterForm: {
          userName: null,
          deep: null,
          periodNum: null,
        },
      }
    },
    methods: {
      handleCurrentChange(page) {
        this.getData(page, this.pageSize)
      },
      handleSizeChange(pageSize) {
        this.getData(this.currentPage, pageSize)
      },
      handleFilter() {
        this.getData(1, this.pageSize)
      },
      handleShow(row) {
        this.loading = true
        this.filterForm.userName = row.BASE_INFO.USER_NAME
        this.filterForm.deep = 1
        this.getData(1, this.pageSize)
      },
      getData(page, pageSize) {
        let obj = this
        network.getPageData(this, 'atlas/relation-list', page, pageSize, this.filterForm, function (response) {
          obj.allData = response
        }).catch(response => {
          obj.loading = false
        })
      },
      handleExport(){
        this.$confirm(`确定要导出当前数据吗？`, 'Notice', {
          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 => {

        })
      },
      onMessageCallback(data) {
        //this.getData(this.currentPage, this.pageSize, false)
      },
    }
  }

</script>

<style scoped>

</style>