cfc/cfc-web/src/views/Users.vue

<template>
  <div class="page-container">
    <el-card>
      <div slot="header">
        <span>用户管理</span>
        <el-button 
          type="primary" 
          size="small" 
          style="float: right"
          @click="handleRefresh"
          :loading="loading"
        >
          刷新
        </el-button>
      </div>

      <!-- 搜索和筛选 -->
      <el-form :inline="true" :model="searchForm" style="margin-bottom: 20px">
        <el-form-item label="角色">
          <el-select v-model="searchForm.role" placeholder="全部角色" clearable @change="handleSearch">
            <el-option label="家长" value="parent"></el-option>
            <el-option label="孩子" value="child"></el-option>
            <el-option label="成长规划师" value="teacher"></el-option>
            <el-option label="管理员" value="admin"></el-option>
            <el-option label="营养师" value="nutritionist"></el-option>
            <el-option label="文章管理员" value="article_manager"></el-option>
            <el-option label="活动管理员" value="activity_manager"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input 
            v-model="searchForm.nickname" 
            placeholder="请输入昵称" 
            clearable
            @keyup.enter.native="handleSearch"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input 
            v-model="searchForm.phone" 
            placeholder="请输入手机号" 
            clearable
            @keyup.enter.native="handleSearch"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-tag
                v-if="sortState.length > 0"
                closable
                size="mini"
                class="sort-tag"
                @close="clearSort"
                @click="clearSort"
              >
                {{ sortLabel }}
              </el-tag>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 用户列表 -->
<el-table 
        :data="tableData" 
        border 
        v-loading="loading"
        style="width: 100%"
        :max-height="tableHeight"
      >
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="nickname" label="昵称" width="150">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('nickname', $event)" @dblclick.stop="onSortToggle('nickname')">昵称<span v-if="sortIndex('nickname') !== null" class="sort-index" :class="sortClass('nickname') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('nickname') }}</span>{{ sortIcon('nickname') }}</span>

          </template></el-table-column>
        <el-table-column prop="realName" label="真实姓名" width="120"></el-table-column>
        <el-table-column prop="phone" label="手机号" width="120"></el-table-column>
        <el-table-column label="角色" width="200">
          <template slot-scope="scope">
            <el-tag
              v-for="r in (scope.row.roles || [scope.row.role])"
              :key="r"
              :type="getRoleType(r)"
              size="small"
              style="margin-right:4px"
            >
              {{ getRoleText(r) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="familyId" label="家庭ID" width="100"></el-table-column>
        <el-table-column prop="createdAt" label="创建时间" width="180">
          <template slot-scope="scope">
            {{ formatDate(scope.row.createdAt) }}
          </template>
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('createdAt', $event)" @dblclick.stop="onSortToggle('createdAt')">创建时间<span v-if="sortIndex('createdAt') !== null" class="sort-index" :class="sortClass('createdAt') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('createdAt') }}</span>{{ sortIcon('createdAt') }}</span>

          </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="resetPassword" icon="el-icon-key">重置密码</el-dropdown-item>
                <el-dropdown-item command="delete" icon="el-icon-delete">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        style="margin-top: 20px; text-align: right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.current"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pagination.size"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </el-card>

    <!-- 编辑用户弹窗 -->
    <el-dialog 
      title="编辑用户" 
      :visible.sync="editDialogVisible" 
      width="500px"
    >
      <el-form :model="editForm" :rules="editRules" ref="editForm" label-width="100px">
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="editForm.nickname" placeholder="请输入昵称"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="realName">
          <el-input v-model="editForm.realName" placeholder="请输入真实姓名"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="editForm.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-checkbox-group v-model="editForm.roles">
            <el-checkbox
              v-for="r in allRoles"
              :key="r.value"
              :label="r.value"
              :disabled="r.disabled"
            >{{ r.label }}</el-checkbox>
          </el-checkbox-group>
          <div style="font-size:12px;color:#999;margin-top:4px">
            platform roles: admin / teacher / nutritionist / article_manager / activity_manager
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitEdit" :loading="submitting">确定</el-button>
      </div>
    </el-dialog>

    <!-- 重置密码对话框 -->
    <el-dialog
      title="重置密码"
      :visible.sync="resetPasswordDialogVisible"
      width="400px"
    >
      <el-form :model="resetPasswordForm" label-width="80px">
        <el-form-item label="新密码">
          <el-input 
            v-model="resetPasswordForm.password" 
            type="password"
            placeholder="请输入新密码（至少6位）"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input 
            v-model="resetPasswordForm.confirmPassword" 
            type="password"
            placeholder="请再次输入新密码"
            show-password
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="resetPasswordDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmResetPassword" :loading="submitting">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import SortMixin from '@/mixins/SortMixin'
import { getUserList, updateUser, deleteUser, resetUserPassword } from '@/api/admin'

import { getRoleLabel } from '@/utils/permissions'

export default {
  mixins: [SortMixin],
  name: 'Users',
  computed: {
    tableHeight() {
      return window.innerHeight - 340
    }
  },
  data() {
    return {
      loading: false,
      submitting: false,
      tableData: [],
      sortableColumns: { nickname: '昵称', createdAt: '创建时间' },

      searchForm: {
        role: '',
        nickname: '',
        phone: ''
      },
      pagination: {
        current: 1,
        size: 10,
        total: 0
      },
      editDialogVisible: false,
      resetPasswordDialogVisible: false,
      resetPasswordForm: {
        userId: null,
        password: '',
        confirmPassword: ''
      },
      editForm: {
        id: null,
        nickname: '',
        realName: '',
        phone: '',
        roles: []
      },
      editRules: {
        nickname: [
          { required: true, message: '请输入昵称', trigger: 'blur' }
        ]
      },
      allRoles: [
        { value: 'admin', label: '管理员', disabled: false },
        { value: 'teacher', label: '成长规划师', disabled: false },
        { value: 'nutritionist', label: '营养师', disabled: false },
        { value: 'article_manager', label: '文章管理员', disabled: false },
        { value: 'activity_manager', label: '活动管理员', disabled: false },
      ]
    }
  },
  mounted() {
    this.loadUsers()
  },
  methods: {
    loadList() {
      this.loadUsers()
    },

    handleActionCmd(row, cmd) {
      switch (cmd) {
        case 'edit': this.handleEdit(row); break;
        case 'resetPassword': this.handleResetPassword(row); break;
        case 'delete': this.handleDelete(row); break;
      }
    },
    async loadUsers() {
      this.loading = true
      try {
        const params = {
          page: this.pagination.current,
          size: this.pagination.size,
          ...this.searchForm
        }
        if (this.sortState.length > 0) params.sort = this.sortState

        const res = await getUserList(params)
        this.tableData = res.data.records || res.data || []
        this.pagination.total = res.data.total || this.tableData.length
      } catch (error) {
        this.$message.error(error.message || '加载用户列表失败')
      } finally {
        this.loading = false
      }
    },
    handleSearch() {
      this.pagination.current = 1
      this.loadUsers()
    },
    handleReset() {
      this.searchForm = {
        role: '',
        nickname: '',
        phone: ''
      }
      this.handleSearch()
    },
    handleRefresh() {
      this.loadUsers()
    },
    handleSizeChange(val) {
      this.pagination.size = val
      this.pagination.current = 1
      this.loadUsers()
    },
    handleCurrentChange(val) {
      this.pagination.current = val
      this.loadUsers()
    },
    handleEdit(row) {
      this.editForm = {
        id: row.id,
        nickname: row.nickname,
        realName: row.realName || '',
        phone: row.phone || '',
        roles: row.roles ? [...row.roles] : (row.role ? [row.role] : [])
      }
      this.editDialogVisible = true
    },
    async submitEdit() {
      this.$refs.editForm.validate(async (valid) => {
        if (valid) {
          this.submitting = true
          try {
            const payload = { ...this.editForm }
            delete payload.id
            await updateUser(this.editForm.id, payload)
            this.$message.success('更新成功')
            this.editDialogVisible = false
            this.loadUsers()
          } catch (error) {
            this.$message.error(error.message || '更新失败')
          } finally {
            this.submitting = false
          }
        }
      })
    },
    handleDelete(row) {
      this.$confirm(`确定要删除用户 "${row.nickname}" 吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await deleteUser(row.id)
          this.$message.success('删除成功')
          this.loadUsers()
        } catch (error) {
          this.$message.error(error.message || '删除失败')
        }
      }).catch(() => {})
    },
    handleResetPassword(row) {
      this.resetPasswordForm.userId = row.id
      this.resetPasswordForm.password = ''
      this.resetPasswordForm.confirmPassword = ''
      this.resetPasswordDialogVisible = true
    },
    async confirmResetPassword() {
      const { password, confirmPassword } = this.resetPasswordForm
      if (!password || password.length < 6) {
        this.$message.error('密码长度不能少于6位')
        return
      }
      if (password !== confirmPassword) {
        this.$message.error('两次输入的密码不一致')
        return
      }
      this.submitting = true
      try {
        await resetUserPassword(this.resetPasswordForm.userId, password)
        this.$message.success('密码重置成功')
        this.resetPasswordDialogVisible = false
      } catch (error) {
        this.$message.error(error.message || '重置密码失败')
      } finally {
        this.submitting = false
      }
    },
    getRoleType(role) {
      const types = {
        parent: 'success',
        child: 'warning',
        teacher: 'primary',
        nutritionist: 'success',
        article_manager: '',
        activity_manager: 'warning'
      }
      return types[role] || 'info'
    },
    getRoleText(role) {
      return getRoleLabel(role)
    },
    formatDate(dateStr) {
      if (!dateStr) return '-'
      const date = new Date(dateStr)
      return date.toLocaleString('zh-CN')
    }
  }
}
</script>

<style scoped>

.sort-header {
  cursor: pointer;
  user-select: none;
  font-weight: 500;
  font-size: 12px;
}
.sort-header:hover {
  color: #409eff;
}
.sort-tag {
  margin-left: 8px;
  cursor: pointer;
  white-space: nowrap;
}
</style>