tmr-admin/.svn/pristine/ae/ae703ce1b1eed4ecd54830f4b83de540e1270a1e.svn-base

<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane label="集团名称" name="first">
        <div class="search">
          <el-input v-model="table.getdataListParm.parammaps.groupsname" placeholder="集团名称" style="width: 180px;" class="filter-item" clearable />
          <el-button class="successBorder" @click="handleSearch">查询</el-button>
        </div>

        <div class="table">
          <el-table
            :key="table.tableKey"
            v-loading="table.listLoading"
            element-loading-text="给我一点时间"
            :data="table.list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
            :row-style="rowStyle"
            :cell-style="cellStyle"
            class="elTable table-fixed"
          >
            <el-table-column label="序号" align="center" type="index" width="50px">
              <template slot-scope="scope">
                <span>{{ scope.$index + (table.pageNum-1) * table.pageSize + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="集团ID" min-width="130px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.groupscode }}</span>
              </template>
            </el-table-column>
            <el-table-column label="集团名称" min-width="130px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.groupsname }}</span>
              </template>
            </el-table-column>
            <el-table-column label="联系人" min-width="130px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.emp }}</span>
              </template>
            </el-table-column>
            <el-table-column label="联系方式" min-width="130px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.phone }}</span>
              </template>
            </el-table-column>
          </el-table>
          <pagination v-show="table.total>0" :total="table.total" :page.sync="table.getdataListParm.offset" :limit.sync="table.getdataListParm.pagecount" @pagination="getList" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="牧场管理" name="second">
        <div class="search">
          <el-input v-model="table.getdataListParm.parammaps.pasturename" placeholder="牧场名称" style="width: 180px;" class="filter-item" clearable />
          <el-button class="successBorder" @click="handleSearch">查询</el-button>
        </div>

        <div class="table">
          <el-table
            :key="table2.tableKey"
            v-loading="table2.listLoading"
            element-loading-text="给我一点时间"
            :data="table2.list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
            :row-style="rowStyle"
            :cell-style="cellStyle"
            class="elTable table-fixed"
          >
            <el-table-column label="序号" align="center" type="index" width="50px">
              <template slot-scope="scope">
                <span>{{ scope.$index + (table2.pageNum-1) * table2.pageSize + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="牧场ID" min-width="130px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.pasturecode }}</span>
              </template>
            </el-table-column>
            <el-table-column label="牧场名称" min-width="130px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.pasturename }}</span>
              </template>
            </el-table-column>
            <el-table-column label="所属集团" min-width="130px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.groupsnames }}</span>
              </template>
            </el-table-column>
          </el-table>
          <pagination v-show="table2.total>0" :total="table2.total" :page.sync="table2.getdataListParm.offset" :limit.sync="table2.getdataListParm.pagecount" @pagination="getList2" />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { GetDataByName } from '@/api/common'
import Pagination from '@/components/Pagination'
import Cookies from 'js-cookie'
export default {
  name: 'GroupInformation',
  components: { Pagination },
  data() {
    return {
      activeName: 'first',
      table: {
        getdataListParm: {
          name: 'getGroupsList',
          page: 1,
          offset: 1,
          pagecount: 10,
          returntype: 'Map',
          parammaps: {
            groupsname: '',
            pastureid: Cookies.get('pastureid'),
            groupsid: ''
          }
        },
        tableKey: 0,
        list: [],
        total: 0,
        listLoading: true
      },
      table2: {
        getdataListParm: {
          name: 'getPastureListJT',
          page: 1,
          offset: 1,
          pagecount: 10,
          returntype: 'Map',
          parammaps: {
            pasturename: '',
            pastureid: Cookies.get('pastureid'),
            groupsid: ''
          }
        },
        tableKey: 0,
        list: [],
        total: 0,
        listLoading: true
      },
      rowStyle: { maxHeight: 30 + 'px', height: 30 + 'px' },
      cellStyle: { padding: 0 + 'px' }
    }
  },

  created() {
    this.getList()
    this.activeName = 'first'
  },

  methods: {
    handleTabClick(val) {
      console.log(val)
      if (val.name === 'first') {
        this.getList()
      } else if (val.name === 'second') {
        this.getList2()
      }
    },
    getList() {
      this.table.listLoading = true
      GetDataByName(this.table.getdataListParm).then(response => {
        console.log('集团信息table数据', response.data.list)
        if (response.data.list !== null) {
          this.table.list = response.data.list
          this.table.pageNum = response.data.pageNum
          this.table.pageSize = response.data.pageSize
          this.table.total = response.data.total
        } else {
          this.table.list = []
        }
        setTimeout(() => {
          this.table.listLoading = false
        }, 100)
      })
    },
    handleSearch() {
      console.log('点击了集团信息查询')
      if (this.activeName == 'first') {
        this.getList()
      } else {
        this.getList2()
      }
    },
    getList2() {
      this.table2.listLoading = true
      GetDataByName(this.table2.getdataListParm).then(response => {
        console.log('牧场管理table数据', response.data.list)
        if (response.data.list !== null) {
          this.table2.list = response.data.list
          this.table2.pageNum = response.data.pageNum
          this.table2.pageSize = response.data.pageSize
          this.table2.total = response.data.total
        } else {
          this.table2.list = []
        }
        setTimeout(() => {
          this.table2.listLoading = false
        }, 100)
      })
    },
    handleSearch() {
      console.log('点击了牧场管理查询')
      this.getList()
    }

  }
}
</script>
<style lang="scss" scoped>
  .table{margin-top:10px;}
 </style>