aiforge/web_src/vuepages/pages/tech/adminview/index.vue

<template>
  <div>
    <div class="ui container">
      <div class="top-container">
        <el-checkbox class="check-toggle" v-model="allChecked" @change="allSelectChange">全选/全不选</el-checkbox>
        <el-button class="btn-agree">批量同意展示</el-button>
        <el-button class="btn-cancel">批量取消展示</el-button>
      </div>
      <div class="table-container">
        <div class="table-title">2030科技项目管理</div>
        <div class="table-wrap">
          <el-table ref="tableRef" border :data="tableData" style="width:100%;" v-loading="loading" stripe row-key="id">
            <el-table-column label="" align="center" header-align="center" width="40" fixed>
              <template slot-scope="scope">
                <el-checkbox v-model="scope.row.checked" @change="rowSelectChange(scope.row)"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="启智项目名称" align="center" header-align="center" fixed></el-table-column>
            <el-table-column prop="tech_name" label="科技项目名称" align="center" header-align="center"
              fixed></el-table-column>
            <el-table-column prop="status" label="展示状态" align="center" header-align="center" fixed></el-table-column>
            <el-table-column prop="tech_number" label="项目立项编号" align="center" header-align="center"></el-table-column>
            <el-table-column prop="institution" label="项目承担单位" align="center" header-align="center"></el-table-column>
            <el-table-column prop="execute_period" label="执行周期" align="center" header-align="center"></el-table-column>
            <el-table-column prop="contact" label="联系人" align="center" header-align="center"></el-table-column>
            <el-table-column prop="contact_phone" label="电话" align="center" header-align="center"></el-table-column>
            <el-table-column prop="apply_user" label="申请账号" align="center" header-align="center"></el-table-column>
            <el-table-column prop="" label="操作" align="center" header-align="center" fixed="right"></el-table-column>
          </el-table>
        </div>
        <div class="center">
          <el-pagination ref="paginationRef" background @current-change="currentChange" @size-change="sizeChange"
            :current-page.sync="page" :page-sizes="pageSizes" :page-size.sync="pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getTechAdminList, setTechAdminOperation } from '~/apis/modules/tech';

export default {
  data() {
    return {
      allChecked: false,
      loading: false,
      tableData: [],

      page: 1,
      pageSizes: [15, 30, 50, 100],
      pageSize: 50,
      total: 0,
    };
  },
  components: {},
  methods: {
    getData() {
      this.loading = true;
      getTechAdminList({
        page: this.page,
        pageSize: this.pageSize,
      }).then(res => {
        this.loading = false;
        const { total, data } = res.data;
        this.tableData = data.map((item, index) => {
          return {
            checked: false,
            id: 'id' + Math.random(),
            ...item,
          }
        });
        this.total = total;
      }).catch(err => {
        this.loading = false;
        console.log(err);
      });
    },
    allSelectChange() {
      for (let i = 0, iLen = this.tableData.length; i < iLen; i++) {
        this.tableData[i].checked = this.allChecked;
      }
      this.tableData.splice(1, 0);
    },
    rowSelectChange(row) {
      if (row.checked == false) {
        this.allChecked = false;
      } else {
        if (this.tableData.filter((item) => item.checked).length == this.tableData.length) {
          this.allChecked = true;
        }
      }
      this.tableData.splice(1, 0);
    },
    currentChange(page) {
      this.page = page;
      this.getData();
    },
    sizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getData();
    },
  },
  beforeMount() {

  },
  mounted() {
    this.tableData = new Array(15).fill(0).map((item, index) => {
      return {
        id: '记录的id-' + index,
        name: '启智项目名称-' + index,
        owner_name: '启智项目拥有者名称-' + index,
        tech_name: '科技项目名称-' + index,
        tech_number: '科技项目编号-' + index,
        institution: '项目承担单位-' + index,
        execute_period: '执行周期-' + index,
        contact: '联系人-' + index,
        contact_phone: '联系电话-' + index,
        contact_email: '联系邮件-' + index,
        apply_user: '申请账号-' + index,
        status: '状态-' + index,
      }
    });
    this.total = this.tableData.length;
  },
  beforeDestroy() { },
};
</script>

<style scoped lang="less">
.top-container {
  display: flex;
  align-items: center;
  margin: 15px 0;

  .check-toggle {
    margin-right: 20px;
  }

  .btn-agree {
    margin-right: 10px;
    background: rgb(50, 145, 248);
    color: rgb(255, 255, 255);

    &:hover {
      opacity: 0.9;
    }

    &:active {
      opacity: 0.8;
    }
  }

  .btn-cancel {
    margin-right: 10px;
    background: rgb(250, 140, 22);
    color: rgb(255, 255, 255);

    &:hover {
      opacity: 0.9;
    }

    &:active {
      opacity: 0.8;
    }
  }
}

.table-container {
  .table-title {
    height: 43px;
    font-size: 16px;
    font-weight: 700;
    padding: 15px;
    color: rgb(16, 16, 16);
    border-color: rgb(212, 212, 213);
    border-width: 1px;
    border-style: solid;
    border-radius: 5px 5px 0px 0px;
    background: rgb(240, 240, 240);
    display: flex;
    align-items: center;
  }

  .table-wrap {
    margin-bottom: 12px;
    overflow-x: auto;

    /deep/ .el-table__header {
      th {
        background: rgb(249, 249, 249);
        font-size: 12px;
        color: rgb(136, 136, 136);
        font-weight: normal;
      }
    }

    /deep/ .el-table__body {
      td {
        font-size: 12px;
      }
    }

    /deep/ .el-radio__label {
      display: none;
    }
  }
}
</style>