front / rider-admin · Files

<template>
  <div>
    <a-card title="平台账号管理" :bordered="false" class="list-table-card">
      <div class="list-toolbar">
        <div class="list-toolbar-left">
          <a-input-search v-model:value="keyword" placeholder="搜索账号/昵称" @search="loadList" class="list-search" />
        </div>
        <div class="list-toolbar-right">
          <a-button type="primary" @click="openAdd">新增平台账号</a-button>
        </div>
      </div>
      <a-table :dataSource="list" :columns="columns" :loading="loading" rowKey="id" :pagination="false">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'roleId'">
            {{ getRoleName(record.roleId) }}
          </template>
          <template v-if="column.key === 'status'">
            <a-tag :color="record.userStatus === 1 ? 'green' : 'red'">
              {{ record.userStatus === 1 ? '正常' : '禁用' }}
            </a-tag>
          </template>
          <template v-if="column.key === 'action'">
            <a-space>
              <a @click="openEdit(record)">编辑</a>
              <a @click="openChangePwd(record)">改密码</a>
              <a-popconfirm
                :title="record.userStatus === 1 ? '确认禁用？' : '确认启用？'"
                @confirm="toggleBan(record)"
              >
                <a :style="record.userStatus === 1 ? 'color:red' : ''">
                  {{ record.userStatus === 1 ? '禁用' : '启用' }}
                </a>
              </a-popconfirm>
              <a-popconfirm title="确认删除？" @confirm="handleDel(record.id)">
                <a style="color:red">删除</a>
              </a-popconfirm>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-card>

    <a-modal v-model:open="modalVisible" :title="editingId ? '编辑平台账号' : '新增平台账号'" @ok="handleSave" :confirmLoading="saving">
      <div class="soft-page-stack">
        <div class="soft-note-card">
          <strong>平台账号说明</strong>
          <p>平台账号用于后台平台功能管理，不绑定租户，通过菜单角色控制显示哪些平台菜单。</p>
        </div>
        <a-form :model="form" layout="vertical">
          <a-form-item label="菜单角色">
            <a-select v-model:value="form.roleId" placeholder="选择角色">
              <a-select-option v-for="item in roleOptions" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="登录账号">
            <a-input v-model:value="form.userLogin" :disabled="!!editingId" />
          </a-form-item>
          <a-form-item label="昵称">
            <a-input v-model:value="form.userNickname" />
          </a-form-item>
          <a-form-item :label="editingId ? '新密码（不填不修改）' : '密码'">
            <a-input-password v-model:value="form.userPass" />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>

    <a-modal v-model:open="pwdVisible" title="修改密码" @ok="handleChangePwd" :confirmLoading="pwdSaving">
      <div class="soft-page-stack">
        <div class="soft-note-card">
          <strong>密码修改说明</strong>
          <p>这里修改的是当前选中平台账号的登录密码，提交时会按目标平台账号执行。</p>
        </div>
        <a-form layout="vertical">
          <a-form-item label="原密码">
            <a-input-password v-model:value="pwdForm.oldPassword" />
          </a-form-item>
          <a-form-item label="新密码">
            <a-input-password v-model:value="pwdForm.newPassword" />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { adminUserApi, systemRoleApi } from '@/api'

const loading = ref(false)
const saving = ref(false)
const list = ref<any[]>([])
const roleOptions = ref<any[]>([])
const keyword = ref('')
const modalVisible = ref(false)
const editingId = ref<number | null>(null)
const form = reactive({ roleId: undefined, userLogin: '', userNickname: '', userPass: '' })

const columns = [
  { title: 'ID', dataIndex: 'id', width: 80 },
  { title: '账号', dataIndex: 'userLogin' },
  { title: '昵称', dataIndex: 'userNickname' },
  { title: '角色', key: 'roleId' },
  { title: '状态', key: 'status' },
  { title: '操作', key: 'action' },
]

function getRoleName(roleId?: number) {
  const role = roleOptions.value.find(item => item.id === roleId)
  return role?.name || (roleId ? `角色#${roleId}` : '-')
}

async function loadList() {
  loading.value = true
  try {
    const res: any = await adminUserApi.list(keyword.value)
    list.value = res.data
  } finally { loading.value = false }
}

async function loadRoles() {
  const res: any = await systemRoleApi.list()
  roleOptions.value = Array.isArray(res?.data) ? res.data.filter((item: any) => item.roleScope === 'PLATFORM') : []
}

function openAdd() {
  editingId.value = null
  Object.assign(form, { roleId: roleOptions.value[0]?.id, userLogin: '', userNickname: '', userPass: '' })
  modalVisible.value = true
}

function openEdit(record: any) {
  editingId.value = record.id
  Object.assign(form, { roleId: record.roleId, userLogin: record.userLogin, userNickname: record.userNickname, userPass: '' })
  modalVisible.value = true
}

async function handleSave() {
  if (!form.roleId) {
    message.error('请选择菜单角色')
    return
  }
  saving.value = true
  try {
    if (editingId.value) {
      await adminUserApi.edit({ ...form, id: editingId.value })
    } else {
      await adminUserApi.add(form)
    }
    message.success('保存成功')
    modalVisible.value = false
    loadList()
  } finally { saving.value = false }
}

async function toggleBan(record: any) {
  if (record.userStatus === 1) {
    await adminUserApi.ban(record.id)
  } else {
    await adminUserApi.cancelBan(record.id)
  }
  message.success('操作成功')
  loadList()
}

async function handleDel(id: number) {
  await adminUserApi.del(id)
  message.success('删除成功')
  loadList()
}

const pwdVisible = ref(false)
const pwdSaving = ref(false)
const pwdForm = reactive({ oldPassword: '', newPassword: '' })
const pwdTargetId = ref(0)

function openChangePwd(record: any) {
  pwdTargetId.value = record.id
  Object.assign(pwdForm, { oldPassword: '', newPassword: '' })
  pwdVisible.value = true
}

async function handleChangePwd() {
  if (!pwdForm.oldPassword || !pwdForm.newPassword) {
    message.error('请填写完整密码')
    return
  }
  pwdSaving.value = true
  try {
    await adminUserApi.changePassword({ id: pwdTargetId.value, ...pwdForm })
    message.success('密码修改成功')
    pwdVisible.value = false
  } finally { pwdSaving.value = false }
}

onMounted(() => { loadList(); loadRoles() })
</script>