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

<template>
  <div class="virtual-team-list admin-page">
    <el-card>
      <div slot="header">
        <span>虚拟服务商团队</span>
        <el-button style="float: right" type="primary" size="small" @click="handleCreate">+ 创建团队</el-button>
      </div>

      <div class="toolbar">
        <el-input
          v-model="searchKeyword"
          placeholder="搜索团队名称"
          prefix-icon="el-icon-search"
          size="small"
          style="width: 240px"
          clearable
          @clear="loadData"
          @keyup.enter.native="loadData"
        ></el-input>
        <el-button size="small" type="primary" @click="loadData">查询</el-button>
    </div>

    <el-table :max-height="tableHeight" :data="pagedData" stripe v-loading="loading">
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="name" label="团队名称" width="160"></el-table-column>
        <el-table-column prop="description" label="描述" show-overflow-tooltip></el-table-column>
        <el-table-column prop="ownerId" label="负责人ID" width="100"></el-table-column>
        <el-table-column prop="profitRate" label="利润率" width="100">
          <template slot-scope="scope">
            {{ scope.row.profitRate != null ? (scope.row.profitRate + '%') : '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="enabled" label="状态" width="80">
          <template slot-scope="scope">
            <el-tag :type="scope.row.enabled ? 'success' : 'info'" size="mini">
              {{ scope.row.enabled ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="创建时间" width="170">
          <template slot-scope="scope">
            {{ formatDate(scope.row.createdAt) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template slot-scope="{ row }">
            <el-button size="mini" type="primary" @click="handleEdit(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="toggle" icon="el-icon-switch-button">{{ row.enabled ? '禁用' : '启用' }}</el-dropdown-item>
                <el-dropdown-item command="members" icon="el-icon-user">成员</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
    </el-table>

    <el-pagination
        v-if="filteredData.length > pageSize"
        style="margin-top: 16px; text-align: right"
        background
        layout="prev, pager, next, total"
        :total="filteredData.length"
        :page-size="pageSize"
        :current-page.sync="currentPage"
      ></el-pagination>
    </el-card>

    <el-dialog :visible.sync="dialogVisible" :title="isEdit ? '编辑团队' : '创建团队'" width="500px" :close-on-click-modal="false">
      <el-form :model="form" :rules="formRules" ref="teamForm" label-width="80px">
        <el-form-item label="团队名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入团队名称"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="form.description" type="textarea" :rows="3" placeholder="请输入团队描述"></el-input>
        </el-form-item>
        <el-form-item label="利润率" prop="profitRate">
          <el-input-number v-model="form.profitRate" :min="0" :max="100" :precision="1" :step="0.5" style="width: 200px"></el-input-number>
          <span style="margin-left: 8px; color: #909399">%</span>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="submitting" @click="handleSubmit">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="操作成功" :visible.sync="successDialogVisible" width="400px" :close-on-click-modal="false">
      <div style="text-align:center;padding:10px 0">
        <i class="el-icon-success" style="color:#67C23A;font-size:32px"></i>
        <p style="margin:12px 0 0;font-size:16px;color:#303133">保存成功</p>
      </div>
      <div slot="footer">
        <el-button type="primary" @click="handleContinue">继续添加</el-button>
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listVirtualTeams,
  createVirtualTeam,
  updateVirtualTeam,
  toggleVirtualTeam
} from '@/api/admin'

export default {
  name: 'VirtualTeamList',
  data() {
    return {
      teams: [],
      loading: false,
      submitting: false,
      searchKeyword: '',
      currentPage: 1,
      pageSize: 15,
      dialogVisible: false,
      successDialogVisible: false,
      isEdit: false,
      form: this.getEmptyForm(),
      formRules: {
        name: [{ required: true, message: '请输入团队名称', trigger: 'blur' }]
      }
    }
  },
  computed: {
    tableHeight() {
      return window.innerHeight - 300
    },
    filteredData() {
      if (!this.searchKeyword) return this.teams
      var kw = this.searchKeyword.toLowerCase()
      return this.teams.filter(function(t) {
        return t.name && t.name.toLowerCase().indexOf(kw) !== -1
      })
    },
    pagedData() {
      var start = (this.currentPage - 1) * this.pageSize
      return this.filteredData.slice(start, start + this.pageSize)
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    getEmptyForm() {
      return { id: null, name: '', description: '', profitRate: 0 }
    },
    formatDate(val) {
      if (!val) return '-'
      return val.replace('T', ' ').substring(0, 19)
    },
    handleSearch() {
      this.loadData()
    },
    async loadData() {
      this.loading = true
      try {
        var res = await listVirtualTeams({})
        this.teams = res.data || []
      } catch (e) {
        console.error(e)
      } finally {
        this.loading = false
      }
    },
    handleCreate() {
      this.isEdit = false
      this.form = this.getEmptyForm()
      this.dialogVisible = true
      this.$nextTick(function() {
        if (this.$refs.teamForm) this.$refs.teamForm.clearValidate()
      }.bind(this))
    },
    handleEdit(row) {
      this.isEdit = true
      this.form = { id: row.id, name: row.name, description: row.description, profitRate: row.profitRate || 0 }
      this.dialogVisible = true
      this.$nextTick(function() {
        if (this.$refs.teamForm) this.$refs.teamForm.clearValidate()
      }.bind(this))
    },
    async handleToggle(row) {
      var action = row.enabled ? '禁用' : '启用'
      try {
        await this.$confirm('确定' + action + '团队"' + row.name + '"吗？', '提示', { type: 'warning' })
        await toggleVirtualTeam(row.id)
        this.$message.success(action + '成功')
        this.loadData()
      } catch (e) {
        if (e !== 'cancel') this.$message.error(action + '失败')
      }
    },
    handleActionCmd(row, cmd) {
      switch (cmd) {
        case 'toggle': this.handleToggle(row); break
        case 'members': this.viewMembers(row); break
      }
    },
    viewMembers(row) {
      this.$router.push('/virtual-team-detail/' + row.id)
    },
    async handleSubmit() {
      this.$refs.teamForm.validate(function(valid) {
        if (!valid) return
      }.bind(this))
      if (!this.form.name) return
      this.submitting = true
      try {
        if (this.isEdit) {
          await updateVirtualTeam(this.form)
        } else {
          await createVirtualTeam(this.form)
        }
        this.$message.success('保存成功')
        this.successDialogVisible = true
      } catch (e) {
        this.$message.error('保存失败')
      } finally {
        this.submitting = false
      }
    },
    handleContinue() {
      this.successDialogVisible = false
      this.isEdit = false
      this.form = this.getEmptyForm()
      this.dialogVisible = true
      this.$nextTick(function() {
        if (this.$refs.teamForm) this.$refs.teamForm.clearValidate()
      }.bind(this))
    },
    handleClose() {
      this.successDialogVisible = false
      this.dialogVisible = false
      this.loadData()
    }
  }
}
</script>

<style scoped>
.virtual-team-list { padding: 20px; }
.toolbar { margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
</style>