boss/pages/main/index/group_list.vue

<template>
  <div id="withdraw">
    <!-- <el-select @change="changeSelect" v-model="selectValue" placeholder="请选择">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>-->
    <div class="table">
      <el-table
        v-if="tableData.length"
        border
        style="width: 100%"
        :data="tableData"
        :row-class-name="tableRowClassName"
      >
        <el-table-column
          v-for="(prop, index) of tableProps"
          :key="index"
          :prop="prop"
          :label="tableHeaders[index]"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              v-if="prop === 'nickname'"
              @click="clickUID(scope.row)"
            >{{scope.row[prop]}}</el-button>
            <el-button
              v-else-if="prop === 'ctrl' && scope.row['status'] !== '1'"
              type="text"
              @click="clickSuper(scope.row)"
            >超管查看</el-button>
            <span v-else>{{scope.row[prop]}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      @current-change="getTableData"
      :current-page.sync="currentPage"
      :page-size="pageSize"
      layout="total, prev, pager, next"
      :total="totalCount"
    ></el-pagination>
  </div>
</template>

<script>
const tableHeaders = [
  "创建者",
  "群组ID",
  "群组名称",
  "管理人员",
  "关联工作",
  "创建时间",
  "最近更新",
  "操作"
];
const tableProps = [
  "nickname",
  "id",
  "name",
  "managers",
  "jobs",
  "create_date",
  "update_date",
  "ctrl"
];

export default {
  data() {
    return {
      options: [
        {
          value: -1,
          label: "全部"
        },
        {
          value: 0,
          label: "提交"
        },
        {
          value: 1,
          label: "成功"
        },
        {
          value: 2,
          label: "失败"
        },
        {
          value: 3,
          label: "进行中"
        }
      ],
      selectValue: -1,
      // 数据总条目
      totalCount: 0,
      currentPage: 1,
      // 列表头显示内容
      tableHeaders,
      // 列表头字段
      tableProps,
      // 列表数据
      tableData: [],
      env: `test`,
      isSuper: false,
      pageSize: 20
    };
  },
  computed: {
    isTest() {
      return this.env === `test`;
    }
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    changeSelect(status) {
      this.getTableData();
    },
    // 点击超管
    async clickSuper(row) {
      if (!this.isSuper) {
        this.$message({
          message: `不是超管, 没有权限`
        });
        return;
      }
      window.open(
        this.$store.state.domainConfig.siteUrl +
          `/rooter/loginmember?uid=${row.uid}&next=/group/${row.id}`
      );
    },
    // 点击用户的 uid
    clickUID(row) {
      window.open(
        this.$store.state.domainConfig.siteUrl + `/rooter/user/${row.uid}`
      );
    },
    // 根据状态显示图表样式
    tableRowClassName({ row, rowIndex }) {
      let className = "";
      if (row.status === "1") className = "success-row";
      return className;
    },
    // 格式化列表数据
    formatTableData(data) {
      return data.map(i => ({
        ...i,
        managers: i.managers
          .map(m => {
            return m ? m.nickname : ``;
          })
          .join(`;`),
        jobs: Object.keys(i.jobs)
          .map(key => {
            let j = i.jobs[key];
            return j ? `${j.nickname}(${j.id})` : ``;
          })
          .join(`;`)
      }));
    },
    // 获取列表数据
    async getTableData(page = this.currentPage) {
      this.tableData = [];
      const res = await this.$post("/api/admin/group/list", {
        page,
        page_size: 20
      });
      const data = res.data;
      this.env = data.current_env;
      this.isSuper = data.is_super_admin;
      this.tableData = this.formatTableData(data.list);
      this.totalCount = Number(data.total);
      this.totalPage = data.totalPage;
    }
  }
};
</script>

<style scoped>
.table {
  height: calc(100% - 40px);
}
</style>