sso-parent/sso-manage-console-web/src/components/accounts/enterprises/EnterpriseHome.vue

<template>
  <common-home
    :pageSize="pageParams.size"
    :total="total"
    :searchKeys="searchKeys"
    :searchKey="pageParams.key"
    :searchKeyword="pageParams.keyword"
    @current-change="handleCurrentChange"
    @refresh-data="handleRefreshData"
    @search="handleSearchAction">
    <div slot="screen-type">
      <!-- 认证状态 -->
      <label>认证状态</label>
      <el-select v-model="pageParams.validCode" clearable placeholder="不限" @change="handleRefreshData">
        <el-option
          v-for="item in validCodeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>

      <!-- 注册来源 -->
      <!--<label>注册来源</label>
      <el-select v-model="pageParams.fromApp" clearable placeholder="不限" @change="handleRefreshData">
        <el-option
          v-for="item in fromAppOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>-->
    </div>

    <el-table
      :data="tableData"
      stripe
      style="width: 100%">
      <el-table-column
        label="操作"
        width="120">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="spaceName"
        label="公司名称"
        width="200">
      </el-table-column>
      <el-table-column
        prop="businessCode"
        label="营业执照号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="validCode"
        label="认证状态"
        width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.validCode === 0">未认证</span>
          <span v-if="scope.row.validCode === 1" style="color: #E68615;">待认证</span>
          <span v-if="scope.row.validCode === 2">已认证</span>
          <span v-if="scope.row.validCode === 3">未通过</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="admin"
        label="管理员"
        width="100">
        <template slot-scope="scope" v-if="scope.row.admin && scope.row.admin.userUU">
          <span v-text="scope.row.admin.vipName"></span>
        </template>
      </el-table-column>
      <el-table-column
        prop="registerDate"
        label="注册时间"
        :formatter="formatDate">
      </el-table-column>
    </el-table>
  </common-home>
</template>

<script>
  import _ from 'lodash'
  import axios from '@/assets/js/axios'
  import { formatDate } from '@/assets/js/utils'
  import * as types from '@/store/mutation-types'
  import {ValidCode} from '@/Constant'
  import CommonHome from '../common/CommonHome'

  const searchKeys = [
    {
      label: '企业名称',
      value: 'spaceName'
    },
    {
      label: '营业执照号',
      value: 'businessCode'
    },
    {
      label: 'UU号',
      value: 'spaceUU'
    }
  ]

  export default {
    name: 'enterprise-home',
    components: {
      CommonHome
    },
    data () {
      return {
        pageParams: {
          page: 1,
          size: 8,
          validCode: null,
          fromApp: null,
          key: 'spaceName',
          keyword: null
        },
        pageContent: [],
        total: 0,
        validCodeOptions: ValidCode,
        searchKeys: searchKeys
      }
    },
    created () {
      this.fetchData()
    },
    computed: {
      tableData () {
        return this.pageContent
      },
      fromAppOptions () {
        return this.$store.getters.fromAppOptions
      }
    },
    watch: {
      '$route': 'fetchData'
    },
    methods: {
      fetchData () {
        const params = _.defaultsDeep({}, this.pageParams)
        params.page = params.page - 1

        const success = page => {
          this.pageContent = page.content || []
          this.total = page.totalElements
        }
        const error = response => {
          console.log(response)
          this.$message.error(response)
        }

        axios.get('/api/user/space//showSpaceByPagination', { params }).then(success).catch(
          error)
      },
      handleCurrentChange (currentPage) {
        this.pageParams.page = currentPage
        this.fetchData()
      },
      handleRefreshData () {
        console.log(this.pageParams)
        this.fetchData()
      },
      handleSearchAction (key, keyword) {
        console.log(key, keyword)
        this.pageParams.key = key
        this.pageParams.keyword = keyword

        this.fetchData()
      },
      handleClick (row) {
        this.$store.commit(types.CHOOSE_ENTERPRISE, row)
        const routeLocation = {name: 'EnterpriseBasicInfo', params: row}
        this.$router.push(routeLocation)
      },
      formatDate: formatDate
    }
  }
</script>

<style scoped>

</style>