BJ_ZTEITS-Developers / parking-cloud-ui

<script setup lang="ts">
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import { UserApi, type UserPageReqVO, type UserSaveReqVO, type UserVO } from '@/api/system/user'
import { OrgApi, type OrgVO } from '@/api/system/org'
import { RoleApi, type RoleVO } from '@/api/system/role'
import { formatDateTime } from '@/utils'

/**
 * 系统管理 - 用户管理
 *
 * 接口：/admin-api/system/user（权限点 system:user:*）
 *
 * 两处刻意的「不做」，都是为了避免静默改坏数据：
 *
 * 1. **表单里没有「备注」**：`UserSaveReqVO` 收 remark，但 `UserRespVO` 不返回它。
 *    也就是说详情接口取不到 remark，表单只能永远是空的；一旦提交就会把库里
 *    原有的备注**清成空串**（MyBatis-Plus 的 updateById 只忽略 null，不忽略 ""）。
 *    要支持编辑备注，得先让后端把 remark 加进 RespVO，否则宁可不放这个字段。
 *
 * 2. **修改时不提交空密码**：后端 `@Size(min = 4, max = 30)` 对空字符串的判定是
 *    「长度 0 < 4」→ 校验失败。所以「留空表示不改密码」必须靠**删除字段**实现，
 *    传 `password: ''` 会直接 400。
 */
defineOptions({ name: 'SystemUser' })

/** 超级管理员用户编号：后端 `AdminUserServiceImpl.SUPER_ADMIN_USER_ID` 会拒绝删除它 */
const SUPER_ADMIN_USER_ID = 1

const loading = ref(false)
const list = ref<UserVO[]>([])
const total = ref(0)
/** 表格勾选的用户 id，用于批量删除 */
const selectedIds = ref<number[]>([])

const queryParams = reactive<UserPageReqVO>({
  pageNo: 1,
  pageSize: 10,
  username: '',
  nickname: ''
})

/**
 * 表单下拉选项。
 * 组织树与角色列表分别是 /system/org/list、/system/role/list，需要各自的 query 权限；
 * 当前账号只有 system:user:* 时这两个请求会 403。查询失败**只影响下拉选项**，
 * 不应该让用户列表本身报错，所以这里静默兜底成空数组。
 */
const orgTree = ref<OrgVO[]>([])
const roleList = ref<RoleVO[]>([])

async function loadOptions() {
  try {
    orgTree.value = (await OrgApi.getOrgList()) || []
  } catch {
    orgTree.value = []
  }
  try {
    const roles = (await RoleApi.getRoleList()) || []
    // 内置的 super_admin 角色不给普通账号分配，避免提权
    roleList.value = roles.filter((r) => r.code !== 'super_admin')
  } catch {
    roleList.value = []
  }
}

async function loadList() {
  loading.value = true
  try {
    const page = await UserApi.getUserPage(queryParams)
    list.value = page.list || []
    total.value = page.total || 0
  } finally {
    loading.value = false
  }
}

function handleSearch() {
  queryParams.pageNo = 1
  loadList()
}

function handleReset() {
  queryParams.username = ''
  queryParams.nickname = ''
  queryParams.status = undefined
  handleSearch()
}

function handleSelectionChange(rows: UserVO[]) {
  selectedIds.value = rows.map((row) => row.id)
}

// ---------------------------------------------------------------------------
// 新增 / 修改
// ---------------------------------------------------------------------------

const dialogVisible = ref(false)
const submitting = ref(false)
const formRef = ref<FormInstance>()

function emptyForm(): UserSaveReqVO {
  return {
    username: '',
    nickname: '',
    orgId: undefined,
    mobile: '',
    email: '',
    sex: 0,
    password: '',
    status: 0,
    roleIds: []
  }
}

const form = reactive<UserSaveReqVO>(emptyForm())

const isUpdate = computed(() => !!form.id)

/** 密码：新增必填，修改留空（留空即不改，提交时会删掉该字段） */
const rules = computed<FormRules>(() => ({
  username: [
    { required: true, message: '请输入登录账号', trigger: 'blur' },
    { max: 30, message: '登录账号长度不能超过 30 个字符', trigger: 'blur' }
  ],
  nickname: [
    { required: true, message: '请输入用户昵称', trigger: 'blur' },
    { max: 30, message: '用户昵称长度不能超过 30 个字符', trigger: 'blur' }
  ],
  email: [
    { type: 'email', message: '邮箱格式不正确', trigger: 'blur' },
    { max: 50, message: '邮箱长度不能超过 50 个字符', trigger: 'blur' }
  ],
  password: isUpdate.value
    ? [{ min: 4, max: 30, message: '密码长度为 4-30 位', trigger: 'blur' }]
    : [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 4, max: 30, message: '密码长度为 4-30 位', trigger: 'blur' }
      ]
}))

function handleCreate() {
  Object.assign(form, emptyForm())
  dialogVisible.value = true
  nextTick(() => formRef.value?.clearValidate())
}

async function handleUpdate(row: UserVO) {
  // 必须走 /get：列表接口不下发 roleIds（避免为每一行都查一次「用户 ↔ 角色」）
  const detail = await UserApi.getUser(row.id)
  Object.assign(form, emptyForm(), {
    id: detail.id,
    username: detail.username,
    nickname: detail.nickname,
    orgId: detail.orgId ?? undefined,
    mobile: detail.mobile || '',
    email: detail.email || '',
    sex: detail.sex ?? 0,
    status: detail.status ?? 0,
    roleIds: (detail.roleIds || []).map(Number),
    password: ''
  })
  dialogVisible.value = true
  nextTick(() => formRef.value?.clearValidate())
}

async function handleSubmit() {
  try {
    await formRef.value?.validate()
  } catch {
    return
  }
  submitting.value = true
  try {
    const data: UserSaveReqVO = { ...form }
    // 修改且未填密码 → 删掉字段，才是「不改密码」；传空串会被 @Size(min=4) 拒掉
    if (data.id && !data.password) delete data.password
    if (data.id) {
      await UserApi.updateUser(data)
    } else {
      await UserApi.createUser(data)
    }
    ElMessage.success(data.id ? '修改成功' : '新增成功')
    dialogVisible.value = false
    loadList()
  } finally {
    submitting.value = false
  }
}

// ---------------------------------------------------------------------------
// 删除 / 重置密码
// ---------------------------------------------------------------------------

function handleDelete(row: UserVO) {
  ElMessageBox.confirm(`确认删除用户「${row.nickname}」吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await UserApi.deleteUser(row.id)
      ElMessage.success('删除成功')
      loadList()
    })
    .catch(() => {})
}

function handleDeleteList() {
  if (selectedIds.value.length === 0) {
    ElMessage.warning('请先勾选要删除的用户')
    return
  }
  ElMessageBox.confirm(`确认删除选中的 ${selectedIds.value.length} 个用户吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await UserApi.deleteUserList(selectedIds.value)
      ElMessage.success('删除成功')
      selectedIds.value = []
      loadList()
    })
    .catch(() => {})
}

function handleResetPassword(row: UserVO) {
  ElMessageBox.prompt(`为用户「${row.nickname}」设置新密码`, '重置密码', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputType: 'password',
    inputPlaceholder: '4-100 位',
    // 后端 UserUpdatePasswordReqVO 是 @NotEmpty + @Size(min=4, max=100)，
    // 这里先挡一道，避免为了一个字符的错走一次网络
    inputValidator: (value: string) => (value && value.length >= 4 ? true : '密码至少 4 位')
  })
    .then(async ({ value }) => {
      await UserApi.resetPassword(row.id, value)
      ElMessage.success('密码重置成功')
    })
    .catch(() => {})
}

async function handleExport() {
  await UserApi.exportUser(queryParams)
}

onMounted(() => {
  loadList()
  loadOptions()
})
</script>

<template>
  <div class="app-container">
    <el-card shadow="never" class="mb-3">
      <el-form :model="queryParams" inline class="search-form">
        <el-form-item label="用户名">
          <el-input v-model="queryParams.username" placeholder="请输入用户名" clearable style="width: 180px" />
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="queryParams.nickname" placeholder="请输入昵称" clearable style="width: 180px" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryParams.status" placeholder="全部" clearable style="width: 120px">
            <el-option label="开启" :value="0" />
            <el-option label="停用" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card shadow="never">
      <div class="mb-3">
        <el-button v-hasPermi="'system:user:create'" type="primary" @click="handleCreate">新增</el-button>
        <el-button v-hasPermi="'system:user:delete'" type="danger" plain @click="handleDeleteList">
          批量删除
        </el-button>
        <el-button v-hasPermi="'system:user:export'" plain @click="handleExport">导出</el-button>
        <el-button plain @click="loadList">刷新</el-button>
      </div>

      <el-table
        v-loading="loading"
        :data="list"
        border
        stripe
        size="small"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="45" align="center" />
        <el-table-column type="index" label="#" width="50" align="center" />
        <el-table-column prop="username" label="用户名" min-width="120" />
        <el-table-column prop="nickname" label="昵称" min-width="120" />
        <el-table-column prop="orgName" label="所属组织" min-width="140" />
        <el-table-column prop="mobile" label="手机号" min-width="130" />
        <el-table-column label="性别" width="80" align="center">
          <template #default="{ row }">
            <DictTag dict-type="system_user_sex" :value="row.sex" />
          </template>
        </el-table-column>
        <el-table-column label="状态" width="90" align="center">
          <template #default="{ row }">
            <DictTag dict-type="system_common_status" :value="row.status" />
          </template>
        </el-table-column>
        <el-table-column label="最后登录" width="170">
          <template #default="{ row }">{{ formatDateTime(row.loginDate) }}</template>
        </el-table-column>
        <el-table-column label="创建时间" width="170">
          <template #default="{ row }">{{ formatDateTime(row.createTime) }}</template>
        </el-table-column>
        <el-table-column label="操作" width="210" fixed="right" align="center">
          <template #default="{ row }">
            <el-button v-hasPermi="'system:user:update'" link type="primary" @click="handleUpdate(row)">
              编辑
            </el-button>
            <el-button v-hasPermi="'system:user:update'" link type="primary" @click="handleResetPassword(row)">
              重置密码
            </el-button>
            <el-button
              v-hasPermi="'system:user:delete'"
              link
              type="danger"
              :disabled="row.id === SUPER_ADMIN_USER_ID"
              @click="handleDelete(row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-model:current-page="queryParams.pageNo"
        v-model:page-size="queryParams.pageSize"
        :total="total"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        class="mt-3 justify-end"
        @current-change="loadList"
        @size-change="handleSearch"
      />
    </el-card>

    <el-dialog v-model="dialogVisible" :title="isUpdate ? '修改用户' : '新增用户'" width="640px">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="90px">
        <el-form-item label="登录账号" prop="username">
          <el-input v-model="form.username" placeholder="请输入登录账号" maxlength="30" />
        </el-form-item>
        <el-form-item label="用户昵称" prop="nickname">
          <el-input v-model="form.nickname" placeholder="请输入用户昵称" maxlength="30" />
        </el-form-item>
        <el-form-item label="所属组织" prop="orgId">
          <!-- 后端 /system/org/list 直接返回整棵树，这里不需要前端再拼 -->
          <el-tree-select
            v-model="form.orgId"
            :data="orgTree"
            :props="{ label: 'name', children: 'children' }"
            node-key="id"
            check-strictly
            clearable
            check-on-click-node
            placeholder="请选择所属组织"
            class="w-full"
          />
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="form.mobile" placeholder="请输入手机号" maxlength="20" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="form.sex" placeholder="请选择性别" class="w-full">
            <el-option label="未知" :value="0" />
            <el-option label="男" :value="1" />
            <el-option label="女" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="form.password"
            type="password"
            show-password
            :placeholder="isUpdate ? '留空表示不修改密码' : '请输入密码（4-30 位）'"
            maxlength="30"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio :label="0">开启</el-radio>
            <el-radio :label="1">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="角色" prop="roleIds">
          <el-select
            v-model="form.roleIds"
            multiple
            placeholder="请选择角色"
            class="w-full"
            no-data-text="暂无可分配角色（内置的 super_admin 不在此处分配）"
          >
            <el-option v-for="role in roleList" :key="role.id" :label="role.name" :value="role.id" />
          </el-select>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="submitting" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>