cfc/cfc-web/src/views/admin/VirtualTeamDetail.vue

<template>
  <div class="virtual-team-detail admin-page">
    <el-card>
      <div slot="header">
        <el-button size="small" icon="el-icon-back" @click="goBack">返回</el-button>
        <span style="margin-left: 12px">团队成员管理 - {{ teamName }}</span>
        <el-button style="float: right" type="primary" size="small" @click="showAddDialog">+ 添加成员</el-button>
      </div>

      <div class="team-info" v-loading="infoLoading">
        <el-descriptions :column="3" border size="small">
          <el-descriptions-item label="团队名称">{{ teamInfo.name || '-' }}</el-descriptions-item>
          <el-descriptions-item label="描述">{{ teamInfo.description || '-' }}</el-descriptions-item>
          <el-descriptions-item label="利润率">{{ teamInfo.profitRate != null ? teamInfo.profitRate + '%' : '-' }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>

    <el-card style="margin-top: 16px">
      <div slot="header">
        <span>成员列表</span>
      </div>
      <div style="overflow:auto;max-height:calc(100vh - 300px);">
      <el-table style="max-height:calc(100vh - 300px);" :data="members" stripe v-loading="membersLoading">
        <el-table-column prop="id" label="关系ID" width="80"></el-table-column>
        <el-table-column prop="userId" label="用户ID" width="100"></el-table-column>
        <el-table-column label="用户昵称" width="140">
          <template slot-scope="scope">
            <div style="display: flex; align-items: center; gap: 6px">
              <el-avatar v-if="scope.row.userAvatar" :size="24" :src="scope.row.userAvatar"></el-avatar>
              <span>{{ scope.row.userNickname || '-' }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="depth" label="层级" width="80"></el-table-column>
        <el-table-column label="上级" width="140">
          <template slot-scope="scope">
            {{ getParentName(scope.row) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template slot-scope="{ row }">
            <el-button size="mini" type="primary" @click="showReassignDialog(row)">变更上级</el-button>
            <el-dropdown trigger="hover" @command="(cmd) => handleActionCmd(row, cmd)">
              <el-button size="mini">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="remove" icon="el-icon-remove">移除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table></div>
    </el-card>

    <el-dialog :visible.sync="addDialogVisible" title="添加成员" width="500px" :close-on-click-modal="false">
      <el-form :model="addForm" label-width="80px">
        <el-form-item label="用户">
          <el-select
            v-model="addForm.userId"
            filterable
            remote
            reserve-keyword
            placeholder="搜索用户(姓名/手机号)"
            :remote-method="searchUsers"
            :loading="userSearchLoading"
            style="width: 100%"
          >
            <el-option
              v-for="u in userSearchResults"
              :key="u.id"
              :label="(u.nickname || u.username || '') + ' (ID:' + u.id + ')'"
              :value="u.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上级">
          <el-select v-model="addForm.parentId" placeholder="无上级(根节点)" clearable style="width: 100%">
            <el-option
              v-for="m in members"
              :key="m.id"
              :label="(m.userNickname || 'ID:' + m.userId) + ' (层级:' + m.depth + ')'"
              :value="m.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="addSubmitting" @click="handleAddMember">添加</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="reassignDialogVisible" title="变更上级" width="500px" :close-on-click-modal="false">
      <el-form :model="reassignForm" label-width="80px">
        <el-form-item label="成员">
          <span>{{ reassignForm.memberName }}</span>
        </el-form-item>
        <el-form-item label="新上级">
          <el-select v-model="reassignForm.parentId" placeholder="无上级(根节点)" clearable style="width: 100%">
            <el-option
              v-for="m in reassignCandidates"
              :key="m.id"
              :label="(m.userNickname || 'ID:' + m.userId) + ' (层级:' + m.depth + ')'"
              :value="m.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="reassignDialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="reassignSubmitting" @click="handleReassign">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listVirtualTeams,
  getVirtualTeamMembers,
  addVirtualTeamMember,
  removeVirtualTeamMember,
  updateVirtualTeamMember,
  searchUsers
} from '@/api/admin'

export default {
  name: 'VirtualTeamDetail',
  props: {
    systemId: { type: [String, Number], required: true }
  },
  data() {
    return {
      teamInfo: {},
      infoLoading: false,
      members: [],
      membersLoading: false,
      addDialogVisible: false,
      addSubmitting: false,
      addForm: { userId: null, parentId: null },
      userSearchLoading: false,
      userSearchResults: [],
      reassignDialogVisible: false,
      reassignSubmitting: false,
      reassignForm: { id: null, parentId: null, memberName: '' }
    }
  },
  computed: {
    teamName() {
      return this.teamInfo.name || '加载中...'
    },
    reassignCandidates() {
      var self = this
      return this.members.filter(function(m) {
        return m.id !== self.reassignForm.id
      })
    }
  },
  created() {
    this.loadTeamInfo()
    this.loadMembers()
  },
  methods: {
    goBack() {
      this.$router.push('/virtual-teams')
    },
    getParentName(row) {
      if (!row.parentId) return '无(根节点)'
      var parent = this.members.find(function(m) { return m.id === row.parentId })
      if (parent) return parent.userNickname || ('ID:' + parent.userId)
      return 'ID:' + row.parentId
    },
    async loadTeamInfo() {
      this.infoLoading = true
      try {
        var res = await listVirtualTeams({})
        var list = res.data || []
        var id = parseInt(this.systemId)
        this.teamInfo = list.find(function(t) { return t.id === id }) || {}
      } catch (e) {
        console.error(e)
      } finally {
        this.infoLoading = false
      }
    },
    async loadMembers() {
      this.membersLoading = true
      try {
        var res = await getVirtualTeamMembers(this.systemId)
        this.members = res.data || []
      } catch (e) {
        console.error(e)
      } finally {
        this.membersLoading = false
      }
    },
    showAddDialog() {
      this.addForm = { userId: null, parentId: null }
      this.userSearchResults = []
      this.addDialogVisible = true
    },
    async searchUsers(query) {
      if (!query || query.length < 1) {
        this.userSearchResults = []
        return
      }
      this.userSearchLoading = true
      try {
        var res = await searchUsers({ keyword: query })
        this.userSearchResults = res.data || []
      } catch (e) {
        this.userSearchResults = []
      } finally {
        this.userSearchLoading = false
      }
    },
    async handleAddMember() {
      if (!this.addForm.userId) {
        this.$message.warning('请选择用户')
        return
      }
      this.addSubmitting = true
      try {
        await addVirtualTeamMember({
          systemId: this.systemId,
          userId: this.addForm.userId,
          parentId: this.addForm.parentId
        })
        this.$message.success('添加成功')
        this.addDialogVisible = false
        this.loadMembers()
      } catch (e) {
        this.$message.error('添加失败')
      } finally {
        this.addSubmitting = false
      }
    },
    async handleRemove(row) {
      var hasChildren = this.members.some(function(m) { return m.parentId === row.id })
      if (hasChildren) {
        this.$message.warning('该成员有下级成员，请先变更下级的上级再移除')
        return
      }
      try {
        await this.$confirm('确定移除成员"' + (row.userNickname || row.userId) + '"吗？', '提示', { type: 'warning' })
        await removeVirtualTeamMember(row.id)
        this.$message.success('移除成功')
        this.loadMembers()
      } catch (e) {
        if (e !== 'cancel') this.$message.error('移除失败')
      }
    },
    showReassignDialog(row) {
      this.reassignForm = {
        id: row.id,
        parentId: row.parentId,
        memberName: row.userNickname || ('ID:' + row.userId)
      }
      this.reassignDialogVisible = true
    },
    async handleReassign() {
      this.reassignSubmitting = true
      try {
        await updateVirtualTeamMember({
          id: this.reassignForm.id,
          parentId: this.reassignForm.parentId
        })
        this.$message.success('上级变更成功')
        this.reassignDialogVisible = false
        this.loadMembers()
      } catch (e) {
        this.$message.error('变更失败')
      } finally {
        this.reassignSubmitting = false
      }
    },
    handleActionCmd(row, cmd) {
      switch (cmd) {
        case 'remove':
          this.handleRemove(row)
          break
      }
    }
  }
}
</script>

<style scoped>
.virtual-team-detail { padding: 20px; }
.team-info { margin-bottom: 0; }
</style>