template-10561/src/views/project/projectDetail/components/app-users.vue

<template>
  <a-space style="margin-bottom: 20px">
    <SelectStaff
      v-if="hasRole('superAdmin') || hasRole('admin')"
      :placeholder="`添加成员`"
      @done="addProjectDevUser"
    />
    <a-button type="primary">邀请添加</a-button>
  </a-space>
  <div class="content">
    <table class="ele-table ele-table-border ele-table-stripe ele-table-medium">
      <thead>
        <tr>
          <th>用户</th>
          <th>角色</th>
          <th>加入时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(user, index) in userList" :key="index">
          <td>
            <a-space>
              <a-avatar :src="user.avatar" :size="30" />
              <span>{{ user.nickname || user.userId }}</span>
            </a-space>
          </td>
          <td>
            <a-tag v-if="user.role === 10">项目成员</a-tag>
            <a-tag v-if="user.role === 20" color="orange">项目成员</a-tag>
            <a-tag v-if="user.role === 30" color="red" class="ele-text-danger">所有者</a-tag>
          </td>
          <td>{{ user.createTime }}</td>
          <td>
            <div v-if="user.role !== 30">
              <a
                @click="removeUser(user)"
                v-if="hasRole('superAdmin') || hasRole('admin')"
              >
                移除
              </a>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script lang="ts" setup>
  import { User } from '@/api/system/user/model';
  import { Project } from '@/api/project/project/model';
  import { hasRole } from '@/utils/permission';
  import { ProjectUser } from '@/api/project/projectUser/model';
  import { addProjectUser, pageProjectUser, removeProjectUser } from '@/api/project/projectUser';
  import { message } from 'ant-design-vue';
  import { ref, watch } from 'vue';

  const props = defineProps<{
    appId: any;
    data: Project;
  }>();

  const emit = defineEmits<{
    (e: 'done'): void;
    (e: 'update:visible', visible: boolean): void;
  }>();

  const userList = ref<ProjectUser[]>();

  // 添加开发成员
  const addProjectDevUser = (data: User) => {
    addProjectUser({
      userId: data.userId,
      appId: props.data?.appId,
      nickname: data.nickname,
      avatar: data.avatar,
      role: 20
    })
      .then((msg) => {
        reload();
        message.success(msg);
        emit('done');
      })
      .catch((e) => {
        message.error(e.message);
      });
  };

  // 添加体验成员
  const addProjectExpUser = (data: User) => {
    addProjectUser({
      userId: data.userId,
      appId: props.data?.appId,
      nickname: data.nickname,
      avatar: data.avatar,
      role: 10
    })
      .then((msg) => {
        reload();
        message.success(msg);
        emit('done');
      })
      .catch((e) => {
        message.error(e.message);
      });
  };

  // 移除成员
  const removeUser = (data: ProjectUser) => {
    removeProjectUser(data.appUserId)
      .then((msg) => {
        reload();
        message.success(msg);
        emit('done');
      })
      .catch((e) => {
        message.error(e.message);
      });
  };

  const reload = () => {
    // 加载项目成员
    pageProjectUser({ appId: props.appId }).then((res) => {
      if (res?.list) {
        userList.value = res.list;
      }
    });
  };

  watch(
    () => props.appId,
    (appId) => {
      if (appId) {
        reload();
      }
    },
    { immediate: true }
  );
</script>