UserManagement.vue

<template>
  <div class="space-y-6">
    <!-- 页面标题和操作区 -->
    <div class="flex items-center justify-between">
      <div>
        <h3 class="text-neutral-900 text-[20px] font-bold">账号管理</h3>
        <p class="text-sm text-neutral-500 mt-1">创建和管理系统用户，分配组织和角色</p>
      </div>
      <el-button 
        type="primary" 
        class="h-10 px-4"
        @click="handleOpenAddDialog"
      >
        <Plus class="h-4 w-4 mr-1" />
        新增用户
      </el-button>
    </div>
    <!-- 搜索和筛选 -->
    <el-card>
      <div class="grid grid-cols-5 gap-4 px-6 py-6">
        <div class="relative">
          <Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-neutral-500 z-10" />
          <el-input
            v-model="userNameSearch"
            placeholder="搜索用户姓名"
            class="h-10 search-input text-ellipsis-input"
            clearable
          />
        </div>
        <div class="relative">
          <Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-neutral-500 z-10" />
          <el-input
            v-model="phoneSearch"
            placeholder="搜索手机号"
            class="h-10 search-input text-ellipsis-input"
            clearable
          />
        </div>
        <div class="relative">
          <Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-neutral-500 z-10" />
          <el-input
            v-model="codeSearch"
            placeholder="搜索工号"
            class="h-10 search-input text-ellipsis-input"
            clearable
          />
        </div>
        
        <el-select 
          v-model="accountTypeFilter" 
          placeholder="账号类型"
          class="h-10 w-full"
          clearable
        >
          <el-option label="全部类型" value="" />
          <el-option label="地市级" value="1" />
          <el-option label="区县级" value="2" />
          <el-option label="一线人员" value="3" />
        </el-select>
        <el-select 
          v-model="statusFilter" 
          placeholder="状态"
          class="h-10 w-full"
          clearable
        >
          <el-option label="全部状态" value="all" />
          <el-option label="正常" value="1" />
          <el-option label="禁用" value="0" />
        </el-select>
        <el-select 
          v-model="organizationFilter" 
          placeholder="所属区域"
          class="h-10 w-full"
          clearable
        >
          <el-option label="全部区域" value="all" />
          <el-option 
            v-for="org in organizationOptions" 
            :key="org.id" 
            :label="org.label" 
            :value="org.id" 
          />
        </el-select>
      </div>
    </el-card>
    <!-- 用户列表 -->
    <el-card class="p-5">
      
      <div class="rounded-lg overflow-hidden">
        <el-table 
          :data="filteredUsers" 
          style="width: 100%"
          :header-cell-style="{ backgroundColor: '#f3f4f6', color: '#374151', fontWeight: '500', borderBottom: '1px solid #e5e7eb' }"
          :row-style="getRowStyle"
        >
          <el-table-column prop="realName" label="用户姓名" min-width="100">
            <template #default="{ row }">
              <div class="flex items-center gap-2">
                <span :class="{ 'font-semibold': isCurrentUser(row) }">{{ row.realName }}</span>
                <el-tag 
                  v-if="isCurrentUser(row)" 
                  type="primary" 
                  size="small"
                  class="text-xs"
                >
                  当前登录
                </el-tag>
              </div>
            </template>
          </el-table-column>
          
          <el-table-column prop="phone" label="手机号" min-width="120">
            <template #default="{ row }">
              {{ row.phone || '-' }}
            </template>
          </el-table-column>
          
          <el-table-column prop="username" label="工号" min-width="120">
            <template #default="{ row }">
              <span :class="{ 'font-semibold': isCurrentUser(row) }">{{ row.username }}</span>
            </template>
          </el-table-column>
          
          <el-table-column prop="accountType" label="账号类型" min-width="100">
            <template #default="{ row }">
            <el-tag 
              :type="getAccountTypeTagType(row.accountType)"
              effect="plain"
              size="small"
            >
              {{ row.accountType || '-' }}
            </el-tag>
            </template>
          </el-table-column>
          
          <el-table-column prop="roleId" label="角色" min-width="120">
            <template #default="{ row }">
              {{ getRoleById(row.roleId)?.name || '-' }}
            </template>
          </el-table-column>
          
          <el-table-column prop="status" label="状态" min-width="80">
            <template #default="{ row }">
              <el-tag 
                :type="row.status === '正常' ? 'success' : 'info'"
                size="small"
              >
                {{ row.status }}
              </el-tag>
            </template>
          </el-table-column>
          
          <el-table-column prop="organizationId" label="所属组织" min-width="150">
            <template #default="{ row }">
              <div v-if="getOrganizationById(row.organizationId)" class="flex items-center gap-2">
                <el-tag size="small" type="info">{{ getOrganizationById(row.organizationId)?.type }}</el-tag>
                <span>{{ getOrganizationById(row.organizationId)?.name }}</span>
              </div>
              <span v-else>-</span>
            </template>
          </el-table-column>
          
          <el-table-column prop="createTime" label="创建时间" min-width="120">
            <template #default="{ row }">
              {{ row.createTime || '-' }}
            </template>
          </el-table-column>
          
          <el-table-column label="操作" min-width="80" fixed="right">
            <template #default="{ row }">
              <el-button
                type="primary"
                link
                size="small"
                @click="handleOpenEditDialog(row)"
              >
                编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <!-- 新增/编辑用户对话框 -->
    <el-dialog
      v-model="isDialogOpen"
      :title="editingUser ? '编辑用户' : '新增用户'"
      width="800px"
      top="5vh"
      :close-on-click-modal="false"
      class="user-management-dialog"
    >
      <div class="space-y-6">
        <!-- 基本信息 -->
        <div class="space-y-4">
          <h3 class="text-neutral-900 pb-2 border-b border-neutral-200">基本信息</h3>
          
          <div class="grid grid-cols-2 gap-x-4">
            <el-form-item label="工号" required>
              <el-input
                v-model="formData.username"
                placeholder="员工工号"
                :disabled="!!editingUser"
              />
            </el-form-item>
            <el-form-item label="用户姓名" required>
              <el-input
                v-model="formData.realName"
                placeholder="真实姓名"
              />
            </el-form-item>
            <el-form-item label="手机号" required>
              <el-input
                v-model="formData.phone"
                placeholder="11位手机号"
              />
            </el-form-item>
            <el-form-item label="账号类型" required>
              <el-select 
                v-model="formData.accountType" 
                placeholder="选择账号类型"
                class="w-full"
                @change="handleAccountTypeChange"
              >
                <el-option label="地市级" value="地市级" />
                <el-option label="区县级" value="区县级" />
                <el-option label="一线人员" value="一线人员" />
              </el-select>
            </el-form-item>
            <el-form-item label="角色" required class="col-span-2">
              <el-select 
                v-model="formData.roleId" 
                placeholder="选择角色"
                class="w-full"
                @change="handleRoleChange"
              >
                <el-option 
                  v-for="role in availableRoles" 
                  :key="role.id" 
                  :label="`${role.roleName}${role.remark ? ` - ${role.remark}` : ''}`" 
                  :value="role.id" 
                />
              </el-select>
              <div v-if="roleHint" class="text-xs text-neutral-500 mt-1">
                {{ roleHint }}
              </div>
            </el-form-item>
          </div>
          <div class="flex items-center justify-between p-4 bg-neutral-50 rounded border border-neutral-200">
            <div>
              <div class="text-neutral-900 font-medium">用户状态</div>
              <p class="text-sm text-neutral-500 mt-1">禁用后，该用户无法登录系统</p>
            </div>
            <el-switch
              v-model="formData.isActive"
            />
          </div>
        </div>
        <!-- 所属组织（当前登录用户不可修改） -->
        <div v-if="!editingUser || !isCurrentUser(editingUser)" class="space-y-4">
          <div class="flex items-center justify-between pb-2 border-b border-neutral-200">
            <h3 class="text-neutral-900">所属区域 <span class="text-red-500">*</span></h3>
            <el-tag 
              v-if="formData.organizationId" 
              type="primary" 
              size="small"
            >
              已选择
            </el-tag>
          </div>
          
          <div class="border border-neutral-300 rounded p-4 bg-neutral-50 max-h-[250px] overflow-y-auto">
            <OrganizationTree
              :organizations="topLevelOrganizations"
              :selected-id="formData.organizationId"
              :role-id="formData.roleId"
              :roles="roles"
              :expanded-ids="organizationExpandedIds"
              :account-type="formData.accountType"
              @select="handleOrganizationSelect"
              @toggle-expand="handleToggleExpand"
            />
          </div>
          
          <p class="text-xs text-neutral-500">
            提示：点击组织名称选择，点击箭头展开/收起子组织。灰色不可选的组织表示不符合当前角色的层级要求。
          </p>
        </div>
        <!-- 当前登录用户的组织信息（只读显示） -->
        <div v-else-if="editingUser && isCurrentUser(editingUser)" class="space-y-4">
          <h3 class="text-neutral-900 pb-2 border-b border-neutral-200">所属组织</h3>
          <div class="p-4 bg-neutral-50 rounded border border-neutral-200">
            <div class="flex items-center gap-3">
              <Building2 class="h-5 w-5 text-neutral-500" />
              <div>
                <div class="flex items-center gap-2">
                  <el-tag size="small" type="info">
                    {{ getOrganizationById(editingUser.organizationId)?.type }}
                  </el-tag>
                  <span class="text-neutral-900">
                    {{ getOrganizationById(editingUser.organizationId)?.name }}
                  </span>
                </div>
                <p class="text-xs text-neutral-500 mt-1">
                  当前登录账号不可自行修改所属组织，如需修改请联系上级管理员
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <el-button @click="isDialogOpen = false">取消</el-button>
        <el-button type="primary" @click="handleSave">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, computed, watch ,onMounted,getCurrentInstance} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Building2, Search } from 'lucide-vue-next'
import OrganizationTree from './OrganizationTree.vue'
const { $api } = getCurrentInstance()!.appContext.config.globalProperties
// 类型定义
export interface User {
  id: string
  username: string
  realName: string
  organizationId: string
  roleId: string
  accountType?: '地市级' | '区县级' | '一线人员'
  phone?: string
  email?: string
  status: '正常' | '禁用'
  createTime?: string
  creatorId?: string
}
interface Role {
  id: string
  name: string
  description?: string
  level: '地市级' | '区县级' | '一线人员'
  status: '启用' | '禁用'
  permissions: string[]
}
interface Organization {
  id: string
  name: string
  type: '地市' | '区县' | '客户经理团队'
  parentId?: string
  children?: Organization[]
}
// Props
interface UserManagementProps {
  users: User[]
  roles: Role[]
  organizations: Organization[]
  currentUserId: string
}
const props = defineProps<UserManagementProps>()
const emit = defineEmits<{
  addUser: [user: Omit<User, 'id' | 'createTime' | 'creatorId'>]
  updateUser: [id: string, updates: Partial<User>]
}>()
// 响应式数据
const isDialogOpen = ref(false)
const editingUser = ref<User | null>(null)
const userNameSearch = ref('')
const phoneSearch = ref('')
const codeSearch = ref('')
const roleFilter = ref<string>('all')
const accountTypeFilter = ref<'' | '1' | '2' | '3'>('')
const statusFilter = ref<'' | '1' | '0'>('')
const organizationFilter = ref<string>('all')
const organizationExpandedIds = ref(new Set<string>())
// 表单数据
const formData = ref({
  username: '',
  realName: '',
  phone: '',
  accountType: '',
  organizationId: '',
  roleId: '',
  isActive: true
})
// 计算属性
const availableRoles = ref([])
const filteredUsers = ref([])
const topLevelOrganizations = computed(() => 
  props.organizations.filter(o => o.id)
)
onMounted(() => {
  getRoleList()
  getAccountList()
})
const getRoleList = async ()=>{
  try {
      const response = await $api.queryRoleList({})
      if (response && response.c === 0) {
        availableRoles.value = response.d.filter(item=>{return item.status==1})
      }
    } catch (error) {
      
    }
}
const getAccountList = async ()=>{
  try {
      const response = await $api.queryAccountList({
        phone: '',
        status: '',

      })
      if (response && response.c === 0) {
        filteredUsers.value = response.d
      }
    } catch (error) {
      
    }
}


const totalUsers = computed(() => props.users.length - 1) // 排除当前登录用户
const hasFilters = computed(() => 
  generalSearch.value !== '' || 
  roleFilter.value !== 'all' || 
  accountTypeFilter.value !== 'all' || 
  statusFilter.value !== 'all' ||
  organizationFilter.value !== 'all'
)

const roleHint = computed(() => {
  if (!formData.value.roleId) return ''
  
  const role = getRoleById(formData.value.roleId)
  if (!role) return ''
  
  return `${role.name}`
})
// 工具函数
const getOrganizationById = (id: string): Organization | undefined => {
  const find = (orgs: Organization[]): Organization | undefined => {
    for (const org of orgs) {
      if (org.id === id) return org
      if (org.children) {
        const found = find(org.children)
        if (found) return found
      }
    }
    return undefined
  }
  return find(props.organizations)
}
const getRoleById = (id: string): Role | undefined => {
  return props.roles.find(r => r.id === id)
}
const getAccountTypeTagType = (accountType: string) => {
  switch (accountType) {
    case '地市级': return 'warning'
    case '区县级': return 'primary'
    case '一线人员': return 'success'
    default: return 'info'
  }
}
const isCurrentUser = (user: User): boolean => {
  return user.id === props.currentUserId
}
const getRowStyle = ({ row }: { row: User }) => {
  if (isCurrentUser(row)) {
    return { backgroundColor: '#f0f9ff', borderLeft: '4px solid #1677ff' }
  }
  return {}
}
// 事件处理
const handleOpenAddDialog = () => {
  editingUser.value = null
  formData.value = {
    username: '',
    realName: '',
    phone: '',
    accountType: '一线人员' as '地市级' | '区县级' | '一线人员',
    organizationId: '',
    roleId: '',
    isActive: true
  }
  isDialogOpen.value = true
}
const handleOpenEditDialog = (user: User) => {
  editingUser.value = user
  formData.value = {
    username: user.username,
    realName: user.realName,
    phone: user.phone || '',
    accountType: user.accountType || '一线人员',
    organizationId: user.organizationId,
    roleId: user.roleId,
    isActive: user.status === '正常'
  }
  isDialogOpen.value = true
}
const handleAccountTypeChange = () => {
  // 当账号类型变更时，清空组织选择
  formData.value.organizationId = ''
  
  // 根据账号类型设置组织选择的层级限制
  const accountType = formData.value.accountType
  if (accountType === '地市级') {
    ElMessage.info('账号类型为地市级，所属组织只能选择地市级')
  } else if (accountType === '区县级') {
    ElMessage.info('账号类型为区县级，所属组织只能选择区县级')
  } else if (accountType === '一线人员') {
    ElMessage.info('账号类型为一线人员，所属组织只能选择客户经理团队')
  }
}
const handleRoleChange = () => {
  // 角色变更时不进行层级检查
}
const handleOrganizationSelect = (orgId: string) => {
  formData.value.organizationId = orgId
}
const handleToggleExpand = (orgId: string) => {
  if (organizationExpandedIds.value.has(orgId)) {
    organizationExpandedIds.value.delete(orgId)
  } else {
    organizationExpandedIds.value.add(orgId)
  }
}
const isOrganizationSelectable = (orgType: string, roleId: string): boolean => {
  // 只根据账号类型进行组织层级限制，不根据角色层级限制
  const accountType = formData.value.accountType
  
  switch (accountType) {
    case '地市级':
      // 地市级只能选择地市级组织
      return orgType === '地市'
    case '区县级':
      // 区县级只能选择区县级组织
      return orgType === '区县'
    case '一线人员':
      // 一线人员只能选择客户经理团队
      return orgType === '客户经理团队'
    default:
      // 如果没有选择账号类型，可以选择所有组织
      return true
  }
}
const handleSave = async () => {
  // 表单验证
  if (!formData.value.username.trim()) {
    ElMessage.error('请输入工号')
    return
  }
  if (!formData.value.realName.trim()) {
    ElMessage.error('请输入用户姓名')
    return
  }
  if (!formData.value.phone.trim()) {
    ElMessage.error('请输入手机号')
    return
  }
  // 验证手机号格式
  const phoneRegex = /^1[3-9]\d{9}$/
  if (!phoneRegex.test(formData.value.phone.trim())) {
    ElMessage.error('请输入正确的11位手机号')
    return
  }
  if (!formData.value.accountType) {
    ElMessage.error('请选择账号类型')
    return
  }
  if (!formData.value.roleId) {
    ElMessage.error('请选择角色')
    return
  }
  // 当前登录用户不需要验证组织（不可修改）
  if (!editingUser.value || !isCurrentUser(editingUser.value)) {
    if (!formData.value.organizationId) {
      ElMessage.error('请选择所属区域')
      return
    }
  }
  
  // 检查用户名是否重复
  const existingUser = props.users.find(u => 
    u.username === formData.value.username.trim() && u.id !== editingUser.value?.id
  )
  if (existingUser) {
    ElMessage.error('该工号已存在')
    return
  }
  const userData: any = {
    username: formData.value.username.trim(),
    realName: formData.value.realName.trim(),
    roleId: formData.value.roleId,
    accountType: formData.value.accountType,
    status: formData.value.isActive ? '正常' : '禁用',
    phone: formData.value.phone.trim() || undefined,
    creatorId: props.currentUserId
  }
  // 当前登录用户不可修改自己的所属组织
  // if (!editingUser.value || !isCurrentUser(editingUser.value)) {
  //   userData.organizationId = formData.value.organizationId
  // }



  const response = await $api.addAndUpdateRole({
    
  })
  if (response.c === 0) {
    //handleFilter()
    ElMessage.success(editingUser.value?'编辑成功':'创建成功');
  } else {
    ElMessage.error(response.m);
  }

  isDialogOpen.value = false
}
// 组织下拉选项（扁平化带缩进）
const organizationOptions = computed(() => {
  const result: { id: string; label: string }[] = []
  const traverse = (orgs: Organization[], depth = 0) => {
    const prefix = depth > 0 ? '— '.repeat(depth) : ''
    orgs.forEach(org => {
      result.push({ id: org.id, label: `${prefix}${org.name}` })
      if (org.children && org.children.length) traverse(org.children, depth + 1)
    })
  }
  traverse(props.organizations || [])
  return result
})
</script>
<style scoped>
/* 让表单项标签和输入框呈上下结构 */
:deep(.el-form-item) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
:deep(.el-form-item__label) {
  margin-bottom: 0;
  text-align: left !important;
  padding: 0 !important;
}
:deep(.el-form-item__content) {
  margin-left: 0 !important;
}
.space-y-6 > * + * {
  margin-top: 1.5rem;
}
.space-y-4 > * + * {
  margin-top: 1rem;
}
.grid {
  display: grid;
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.gap-4 {
  gap: 1rem;
}
.h-10 {
  height: 2.5rem;
}
.w-full {
  width: 100%;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.font-semibold {
  font-weight: 600;
}
.font-bold {
  font-weight: 700;
}
.text-neutral-500 {
  color: #6b7280;
}
.text-neutral-700 {
  color: #374151;
}
.text-neutral-900 {
  color: #111827;
}
.text-blue-600 {
  color: #2563eb;
}
.text-red-500 {
  color: #ef4444;
}
.border-neutral-200 {
  border-color: #e5e7eb;
}
.border-neutral-300 {
  border-color: #d1d5db;
}
.bg-neutral-50 {
  background-color: #f9fafb;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.border {
  border-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.mr-1 {
  margin-right: 0.25rem;
}
.flex {
  display: flex;
}
.items-center {
  align-items: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-y-auto {
  overflow-y: auto;
}
.max-h-\[400px\] {
  max-height: 400px;
}
/* 用户管理对话框样式 */
:deep(.user-management-dialog) {
  max-height: 90vh;
  margin-top: 5vh !important;
  margin-bottom: 5vh !important;
  display: flex;
  flex-direction: column;
}
:deep(.user-management-dialog .el-dialog__body) {
  flex: 1;
  overflow-y: auto;
  max-height: calc(90vh - 120px); /* 减去头部和底部的空间 */
  padding: 24px !important;
}
:deep(.user-management-dialog .el-dialog__header) {
  flex-shrink: 0;
  padding: 24px 24px 0 24px !important;
}
:deep(.user-management-dialog .el-dialog__footer) {
  flex-shrink: 0;
  padding: 0 24px 24px 24px !important;
}
/* 搜索输入框样式 - 与订单管理保持一致 */
:deep(.search-input .el-input__wrapper) {
  padding-left: 2.5rem !important;
}
:deep(.search-input .el-input__inner) {
  padding-left: 0 !important;
}
</style>