admin-cms/src/layout/companyidentify/newsInfo.vue

<template>
  <div id="newsInfo">
    <el-row>
      <el-col :span="24">
        <template>
          <el-tabs v-model="activeName" @tab-click="handleClicks">
            <el-tab-pane label="认证中" name="first">
              <el-table
                ref="debtTable"
                :data="debtTable"
                tooltip-effect="dark"
                :default-sort="{ prop: 'date', order: 'descending' }"
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" align="center"> </el-table-column>

                <el-table-column type="index" label="序号" width="50" align="center"> </el-table-column>
                <el-table-column property="company_name" label="企业名称" align="center"> </el-table-column>
                <el-table-column label="状态" align="center">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.status === '0' ? '认证中' : scope.row.status === '1' ? '认证成功' : '认证失败' }}</span>
                  </template>
                </el-table-column>
                <el-table-column property="registered_capital" label="注册资本" align="center"> </el-table-column>
                <el-table-column property="number" label="从业人员数量" align="center"> </el-table-column>
                <el-table-column property="taking" label="营业收入" align="center"> </el-table-column>
                <el-table-column property="type" label="企业类型" align="center"> </el-table-column>
                <el-table-column label="操作" align="center" width="300px">
                  <template slot-scope="scope">
                    <!-- <el-button @click="handleClick(scope.row)" type="text"><i class="el-icon-view"></i></el-button> -->
                    <el-button size="mini" type="text" @click="handleClick(scope.row)" class="view" icon="el-icon-view"></el-button>
                  </template>
                </el-table-column>
              </el-table>

              <el-col class="page" :span="24">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  background
                  layout="total, prev, pager, next, jumper"
                  :total="total"
                >
                </el-pagination>
              </el-col>
            </el-tab-pane>
            <el-tab-pane label="认证成功" name="second">
              <el-table
                ref="shenheTable"
                :data="shenheTable"
                tooltip-effect="dark"
                :default-sort="{ prop: 'date', order: 'descending' }"
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" align="center"> </el-table-column>

                <el-table-column type="index" label="序号" width="50" align="center"> </el-table-column>
                <el-table-column property="company_name" label="企业名称" align="center"> </el-table-column>
                <el-table-column label="状态" align="center">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.status === '0' ? '认证中' : scope.row.status === '1' ? '认证成功' : '认证失败' }}</span>
                  </template>
                </el-table-column>
                <el-table-column property="registered_capital" label="注册资本" align="center"> </el-table-column>
                <el-table-column property="number" label="从业人员数量" align="center"> </el-table-column>
                <el-table-column property="taking" label="营业收入" align="center"> </el-table-column>
                <el-table-column property="type" label="企业类型" align="center"> </el-table-column>
                <el-table-column label="操作" align="center" width="300px">
                  <template slot-scope="scope">
                    <!-- <el-button @click="handleClick(scope.row)" type="text"><i class="el-icon-view"></i></el-button> -->
                    <el-button size="mini" type="text" @click="handleClick(scope.row)" class="view" icon="el-icon-view"></el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-col class="page" :span="24">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  background
                  layout="total,  prev, pager, next, jumper"
                  :total="totals"
                >
                </el-pagination>
              </el-col>
            </el-tab-pane>
            <el-tab-pane label="认证失败" name="third">
              <el-table
                ref="noshenhetable"
                :data="noshenhetable"
                tooltip-effect="dark"
                :default-sort="{ prop: 'date', order: 'descending' }"
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" align="center"> </el-table-column>

                <el-table-column type="index" label="序号" width="50" align="center"> </el-table-column>
                <el-table-column property="company_name" label="企业名称" align="center"> </el-table-column>
                <el-table-column label="状态" align="center">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.status === '0' ? '认证中' : scope.row.status === '1' ? '认证成功' : '认证失败' }}</span>
                  </template>
                </el-table-column>
                <el-table-column property="registered_capital" label="注册资本" align="center"> </el-table-column>
                <el-table-column property="number" label="从业人员数量" align="center"> </el-table-column>
                <el-table-column property="taking" label="营业收入" align="center"> </el-table-column>
                <el-table-column property="type" label="企业类型" align="center"> </el-table-column>
                <el-table-column label="操作" align="center" width="300px">
                  <template slot-scope="scope">
                    <!-- <el-button @click="handleClick(scope.row)" type="text"><i class="el-icon-view"></i></el-button> -->
                    <el-button size="mini" type="text" @click="handleClick(scope.row)" class="view" icon="el-icon-view"></el-button>
                  </template>
                </el-table-column>
              </el-table>

              <el-col class="page" :span="24">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  background
                  layout="total,  prev, pager, next, jumper"
                  :total="totalss"
                >
                </el-pagination>
              </el-col>
            </el-tab-pane>
          </el-tabs>
        </template>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'newsInfo',
  props: {
    debtTable: null,
    shenheTable: null,
    noshenhetable: null,
    total: null,
    totals: null,
    totalss: null,
  },
  components: {},
  data: () => ({
    activeName: 'first',
    input: '',
    currentPage: 1,
  }),
  created() {},
  computed: {
    status() {
      return this.$route.params.status;
    },
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    handleClicks(tab, event) {
      console.log(tab, event);
    },
    handleClick(id) {
      let newid = id.id;

      this.$emit('handleClick', newid);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: red;
  border-color: red;
}
/deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: red;
  border-color: red;
}
/deep/.el-table th {
  background-color: #f5f6fa;
  padding: 8px 0;
}
/deep/.el-table td {
  padding: 11px 0;
}
.other {
  color: #f36302;
}
.view {
  color: #f36302;
}
.edit {
  color: #2ccc02;
}
.delete {
  color: #e9021d;
}
/deep/.el-pagination {
  padding: 26px 20px;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: red;
}
</style>