webcons/src/views/jobuser/index.vue

<template>
  <div class="container">
    <Breadcrumb :items="['menu.jobuser', 'menu.jobuser.userlist']" />

    <a-card class="general-card" :title="$t('menu.jobuser.userlist')">
      <a-table :data="data">
        <template #columns>
          <a-table-column title="用户id" data-index="id"></a-table-column>
          <a-table-column title="用户名称" data-index="username"></a-table-column>
          <a-table-column title="用户积分" data-index="money"></a-table-column>
          <a-table-column title="上级代理" data-index="agent"></a-table-column>
          <a-table-column title="累计在线时长/分" data-index="time"></a-table-column>
          <a-table-column title="注册时间" data-index="created_at"></a-table-column>
          <a-table-column title="是否封禁" data-index="status"><template #cell="{ record }">
              {{ record.status == 0 ? '是' : '否' }}
            </template></a-table-column>
          <a-table-column title="操作">
            <template #cell="{ record }">
              <!-- <a-button @click="create(record.id)">编辑</a-button> -->
              <a-space>
                <a-button v-if="record.status == 1" status="danger" @click="showConfirm(record.id)">封禁</a-button>
                <a-button v-if="record.status == 0" status="danger" @click="showConfirm_out(record.id)">解禁</a-button>
                <a-button @click="show_group(record.id)">查看团队</a-button>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </a-card>
    <!-- 团队关系展示 -->
    <a-modal v-model:visible="modal_visible" width="800px">
      <template #title>
        团队关系展示
      </template>
      <showgroup :id="show_group_id">
        
      </showgroup>
      <FamilyTreeChart :id="show_group_id" v-if="modal_visible"></FamilyTreeChart>
      </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, reactive, watch, nextTick, onMounted } from 'vue';
import { lists, black, ListParams,OutBlack } from '@/api/jobuser';
import { Modal } from '@arco-design/web-vue';
import { Message } from '@arco-design/web-vue';

import showgroup from './components/showgroup.vue';
import FamilyTreeChart from './components/FamilyTreeChart.vue';

interface DataItem {
  id: number;
  username: string;
  password: string;
  time: Date;
  money: string;
}
let data = ref<DataItem[]>([])
//弹窗控制
const modal_visible = ref(false)
//传递下去的用户id
const show_group_id = ref(0)
const show_group = (id: number) => {
  show_group_id.value = id
  modal_visible.value = true
}

const showConfirm = (id: string) => {
  Modal.confirm({
    title: '操作提醒',
    content: '请确认是否要拉黑该用户',
    onOk: () => handleBlock(id),
    // onCancel: () => Message.info('取消操作'),
  });
};
const showConfirm_out = (id: string) => {
  Modal.confirm({
    title: '操作提醒',
    content: '请确认是否要解禁该用户',
    onOk: () => OutBlock(id),
    // onCancel: () => Message.info('取消操作'),
  });
};

const OutBlock = async (id: string) => {
  const res = await OutBlack(id);
  if (res.code == 200) {
    getAll()
  }
};

const handleBlock = async (id: string) => {
  const res = await black(id);
  if (res.code == 200) {
    Message.success('拉黑成功')
    getAll()
  } else {
    Message.error('拉黑失败')
  }
};
const queryParams = ref({
  black: null,
  username: null
});
/**
 * 获取所有的用户列表
 */
const getAll = async () => {
  const res= await lists();
  if(res.code==200){
    data.value = res.data;
  }
};
onMounted(async () => {
  getAll()
})
</script>


<style lang="less" scoped>
.container {
  padding: 0 20px 20px 20px;
}

.left-side {
  flex: 1;
  overflow: auto;
}

.right-side {
  width: 280px;
  margin-left: 16px;
}

.panel {
  background-color: var(--color-bg-2);
  border-radius: 4px;
  overflow: auto;
}

:deep(.panel-border) {
  margin-bottom: 0;
  border-bottom: 1px solid rgb(var(--gray-2));
}

.moduler-wrap {
  border-radius: 4px;
  background-color: var(--color-bg-2);

  :deep(.text) {
    font-size: 12px;
    text-align: center;
    color: rgb(var(--gray-8));
  }

  :deep(.wrapper) {
    margin-bottom: 8px;
    text-align: center;
    cursor: pointer;

    &:last-child {
      .text {
        margin-bottom: 0;
      }
    }

    &:hover {
      .icon {
        color: rgb(var(--arcoblue-6));
        background-color: #e8f3ff;
      }

      .text {
        color: rgb(var(--arcoblue-6));
      }
    }
  }

  :deep(.icon) {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-bottom: 4px;
    color: rgb(var(--dark-gray-1));
    line-height: 32px;
    font-size: 16px;
    text-align: center;
    background-color: rgb(var(--gray-1));
    border-radius: 4px;
  }
}
</style>

<style lang="less" scoped>
// responsive
.mobile {
  .container {
    display: block;
  }

  .right-side {
    // display: none;
    width: 100%;
    margin-left: 0;
    margin-top: 16px;
  }
}
</style>