create-simpleadmin-ui 2.0.0

package/template/src/views/system/user/index.vue

@@ -0,0 +1,373 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { get, post, put, del, getSilent } from '@/utils/request'
+import AppPage from '@/components/AppPage.vue'
+import { formatDateTime } from '@/utils/datetime'
+
+interface UserItem {
+  id: number
+  userName: string
+  nickName: string
+  phone?: string
+  status: number
+  deptId?: number | null
+  deptName?: string
+  createTime: string
+}
+
+interface DeptTreeNode {
+  id: number
+  label: string
+  children?: DeptTreeNode[]
+}
+
+/** 扁平下拉选项（岗位 / 角色）。 */
+interface SelectOption {
+  id: number
+  label: string
+}
+
+interface UserForm {
+  id?: number
+  deptId?: number | null
+  userName: string
+  password: string
+  nickName: string
+  phone: string
+  email: string
+  status: number
+  sex: number
+  roleIds: number[]
+  postIds: number[]
+}
+
+const loading = ref(false)
+const total = ref(0)
+const list = ref<UserItem[]>([])
+const deptTree = ref<DeptTreeNode[]>([])
+const roleOptions = ref<SelectOption[]>([])
+const postOptions = ref<SelectOption[]>([])
+const query = reactive({ pageIndex: 1, pageSize: 10, keyword: '' })
+const dialogVisible = ref(false)
+const form = reactive<UserForm>({
+  id: undefined,
+  deptId: undefined,
+  userName: '',
+  password: '',
+  nickName: '',
+  phone: '',
+  email: '',
+  status: 0,
+  sex: 0,
+  roleIds: [],
+  postIds: [],
+})
+
+const treeSelectProps = {
+  label: 'label',
+  value: 'id',
+  children: 'children',
+}
+
+async function loadDepts() {
+  deptTree.value = (await getSilent<DeptTreeNode[]>('/depts/options')) || []
+}
+
+/** 加载角色、岗位下拉（用户表单用）。 */
+async function loadFormOptions() {
+  const [roles, posts] = await Promise.all([
+    getSilent<SelectOption[]>('/roles/options'),
+    getSilent<SelectOption[]>('/posts/options'),
+  ])
+  roleOptions.value = roles || []
+  postOptions.value = posts || []
+}
+
+async function load() {
+  loading.value = true
+  try {
+    const data = await get<{ total: number; items: UserItem[] }>('/users', query)
+    total.value = data.total
+    list.value = data.items
+  } finally {
+    loading.value = false
+  }
+}
+
+function resetForm() {
+  Object.assign(form, {
+    id: undefined,
+    deptId: undefined,
+    userName: '',
+    password: 'admin123',
+    nickName: '',
+    phone: '',
+    email: '',
+    status: 0,
+    sex: 0,
+    roleIds: [],
+    postIds: [],
+  })
+}
+
+async function ensureFormLookups() {
+  const tasks: Promise<void>[] = []
+  if (!deptTree.value.length) tasks.push(loadDepts())
+  if (!roleOptions.value.length || !postOptions.value.length) tasks.push(loadFormOptions())
+  if (tasks.length) await Promise.all(tasks)
+}
+
+async function openCreate() {
+  resetForm()
+  await ensureFormLookups()
+  dialogVisible.value = true
+}
+
+async function openEdit(row: UserItem) {
+  await ensureFormLookups()
+  const detail = await get<UserForm & { id: number }>(`/users/${row.id}`)
+  Object.assign(form, {
+    id: detail.id,
+    deptId: detail.deptId ?? undefined,
+    userName: detail.userName,
+    password: '',
+    nickName: detail.nickName || '',
+    phone: detail.phone || '',
+    email: (detail as { email?: string }).email || '',
+    status: detail.status ?? 0,
+    sex: detail.sex ?? 0,
+    roleIds: detail.roleIds || [],
+    postIds: detail.postIds || [],
+  })
+  dialogVisible.value = true
+}
+
+async function save() {
+  if (!form.userName.trim()) {
+    ElMessage.warning('请填写账号')
+    return
+  }
+  if (!form.nickName.trim()) {
+    ElMessage.warning('请填写昵称')
+    return
+  }
+  if (!form.id && !form.password) {
+    ElMessage.warning('请填写密码')
+    return
+  }
+  const payload = {
+    id: form.id,
+    deptId: form.deptId ?? null,
+    userName: form.userName.trim(),
+    password: form.id ? undefined : form.password,
+    nickName: form.nickName.trim(),
+    phone: form.phone.trim() || null,
+    email: form.email.trim() || null,
+    status: form.status,
+    sex: form.sex,
+    roleIds: form.roleIds,
+    postIds: form.postIds,
+  }
+  if (form.id) await put('/users', payload)
+  else await post('/users', payload)
+  ElMessage.success('保存成功')
+  dialogVisible.value = false
+  load()
+}
+
+async function remove(row: UserItem) {
+  await ElMessageBox.confirm(`确认删除用户 ${row.userName}？`, '提示')
+  await del('/users', { ids: [row.id] })
+  ElMessage.success('已删除')
+  load()
+}
+
+/**
+ * 重置指定用户密码。
+ * @param row 列表行
+ */
+async function resetPassword(row: UserItem) {
+  const { value } = await ElMessageBox.prompt(
+    `为账号「${row.userName}」设置新密码（至少 6 位）`,
+    '重置密码',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      inputType: 'password',
+      inputPlaceholder: '请输入新密码',
+      inputValidator: (val) => {
+        if (!val || String(val).length < 6) return '密码至少 6 位'
+        return true
+      },
+    },
+  )
+  await put('/users/reset-password', { userId: row.id, password: value })
+  ElMessage.success('密码已重置')
+}
+
+onMounted(async () => {
+  await Promise.all([load(), loadDepts(), loadFormOptions()])
+})
+</script>
+
+<template>
+  <AppPage title="用户管理" description="维护登录账号、部门归属与角色岗位">
+    <div class="toolbar">
+      <el-input v-model="query.keyword" placeholder="账号/昵称" clearable style="width: 220px" @keyup.enter="load" />
+      <el-button type="primary" @click="load">查询</el-button>
+      <el-button type="success" v-permission="'system:user:add'" @click="openCreate">新增</el-button>
+    </div>
+    <el-table :data="list" v-loading="loading" border stripe>
+      <el-table-column prop="userName" label="账号" min-width="110" />
+      <el-table-column prop="nickName" label="昵称" min-width="110" />
+      <el-table-column prop="deptName" label="部门" min-width="120" show-overflow-tooltip />
+      <el-table-column prop="phone" label="手机" min-width="120" show-overflow-tooltip>
+        <template #default="{ row }">
+          {{ row.phone || '—' }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="status" label="状态" width="90">
+        <template #default="{ row }">
+          <el-tag :type="row.status === 0 ? 'success' : 'danger'">{{ row.status === 0 ? '正常' : '停用' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="createTime"
+        label="创建时间"
+        width="170"
+        class-name="is-datetime"
+        show-overflow-tooltip
+      >
+        <template #default="{ row }">
+          <span class="datetime-cell">{{ formatDateTime(row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="300" fixed="right" align="center">
+        <template #default="{ row }">
+            <div class="row-actions">
+              <el-button
+                size="small"
+                type="primary"
+                v-permission="'system:user:edit'"
+                @click="openEdit(row)"
+              >
+                编辑
+              </el-button>
+              <el-button
+                size="small"
+                type="warning"
+                v-permission="'system:user:resetPwd'"
+                @click="resetPassword(row)"
+              >
+                重置密码
+              </el-button>
+              <el-button
+                size="small"
+                type="danger"
+                v-permission="'system:user:remove'"
+                @click="remove(row)"
+              >
+                删除
+              </el-button>
+            </div>
+          </template>
+        </el-table-column>
+    </el-table>
+    <el-pagination
+      class="pager"
+      background
+      layout="total, prev, pager, next"
+      :total="total"
+      v-model:current-page="query.pageIndex"
+      v-model:page-size="query.pageSize"
+      @current-change="load"
+    />
+    <el-dialog
+      v-model="dialogVisible"
+      :title="form.id ? '编辑用户' : '新增用户'"
+      width="560px"
+      append-to-body
+      align-center
+      destroy-on-close
+    >
+      <el-form label-width="80px">
+        <el-form-item label="账号">
+          <el-input v-model="form.userName" :disabled="!!form.id" />
+        </el-form-item>
+        <el-form-item v-if="!form.id" label="密码">
+          <el-input v-model="form.password" type="password" show-password />
+        </el-form-item>
+        <el-form-item label="昵称">
+          <el-input v-model="form.nickName" />
+        </el-form-item>
+        <el-form-item label="部门">
+          <el-tree-select
+            v-model="form.deptId"
+            :data="deptTree"
+            :props="treeSelectProps"
+            check-strictly
+            clearable
+            filterable
+            placeholder="请选择部门"
+            style="width: 100%"
+          />
+        </el-form-item>
+        <el-form-item label="角色">
+          <el-select
+            v-model="form.roleIds"
+            multiple
+            filterable
+            clearable
+            collapse-tags
+            collapse-tags-tooltip
+            placeholder="请选择角色"
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in roleOptions"
+              :key="item.id"
+              :label="item.label"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="岗位">
+          <el-select
+            v-model="form.postIds"
+            multiple
+            filterable
+            clearable
+            collapse-tags
+            collapse-tags-tooltip
+            placeholder="请选择岗位"
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in postOptions"
+              :key="item.id"
+              :label="item.label"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="手机">
+          <el-input v-model="form.phone" />
+        </el-form-item>
+        <el-form-item label="邮箱">
+          <el-input v-model="form.email" />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-radio-group v-model="form.status">
+            <el-radio :value="0">正常</el-radio>
+            <el-radio :value="1">停用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="save">确定</el-button>
+      </template>
+    </el-dialog>
+  </AppPage>
+</template>

package/template/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/template/tsconfig.app.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}

package/template/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/template/tsconfig.node.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/template/vite.config.ts

@@ -0,0 +1,22 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { fileURLToPath, URL } from 'node:url'
+
+// Element Plus 已在 main.ts 全量注册，此处不再使用 unplugin（避免 Node/ESM 兼容问题）
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:5080',
+        changeOrigin: true,
+      },
+    },
+  },
+})