create-simpleadmin-ui 2.0.0

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

@@ -0,0 +1,546 @@
+<script setup lang="ts">
+import { nextTick, onMounted, reactive, ref, watch } from 'vue'
+import { ElMessage, ElMessageBox, type ElTree } from 'element-plus'
+import { get, post, put, del, getSilent } from '@/utils/request'
+import AppPage from '@/components/AppPage.vue'
+import { formatDateTime } from '@/utils/datetime'
+
+interface RoleItem {
+  id: number
+  roleName: string
+  roleCode: string
+  orderNum: number
+  dataScope: number
+  status: number
+  createTime: string
+}
+
+interface MenuNode {
+  id: number
+  label: string
+  menuType: string
+  children?: MenuNode[]
+}
+
+interface DeptNode {
+  id: number
+  label: string
+  children?: DeptNode[]
+}
+
+interface RoleForm {
+  id?: number
+  roleName: string
+  roleCode: string
+  orderNum: number
+  dataScope: number
+  status: number
+  remark: string
+  menuIds: number[]
+  deptIds: number[]
+}
+
+const DATA_SCOPE_OPTIONS = [
+  { value: 1, label: '全部数据权限' },
+  { value: 2, label: '自定义数据权限' },
+  { value: 3, label: '本部门数据权限' },
+  { value: 4, label: '本部门及以下数据' },
+  { value: 5, label: '仅本人数据权限' },
+]
+
+const MENU_TYPE_LABEL: Record<string, string> = {
+  M: '目录',
+  C: '菜单',
+  F: '按钮',
+}
+
+const loading = ref(false)
+const total = ref(0)
+const list = ref<RoleItem[]>([])
+const query = reactive({ pageIndex: 1, pageSize: 10, keyword: '' })
+const dialogVisible = ref(false)
+const saving = ref(false)
+const menuTree = ref<MenuNode[]>([])
+const deptTree = ref<DeptNode[]>([])
+const menuTreeRef = ref<InstanceType<typeof ElTree>>()
+const deptTreeRef = ref<InstanceType<typeof ElTree>>()
+/** 每次打开弹窗递增，强制重建树，避免勾选状态残留 */
+const treeRenderKey = ref(0)
+/** 待回显的菜单/部门 Id（在 @opened 时写入树） */
+const pendingMenuIds = ref<number[]>([])
+const pendingDeptIds = ref<number[]>([])
+
+const form = reactive<RoleForm>({
+  id: undefined,
+  roleName: '',
+  roleCode: '',
+  orderNum: 0,
+  dataScope: 1,
+  status: 0,
+  remark: '',
+  menuIds: [],
+  deptIds: [],
+})
+
+function dataScopeLabel(v: number) {
+  return DATA_SCOPE_OPTIONS.find((x) => x.value === v)?.label || String(v)
+}
+
+function menuTypeLabel(t: string) {
+  return MENU_TYPE_LABEL[t] || t
+}
+
+/**
+ * 仅保留叶子节点 Id，供级联勾选树回显（父节点勾选会连带全选子节点）。
+ */
+function pickLeafIds(nodes: MenuNode[] | DeptNode[], ids: number[], labelChildren = 'children'): number[] {
+  const wanted = new Set(ids.map((x) => Number(x)))
+  const leaves: number[] = []
+  const walk = (list: any[]) => {
+    for (const n of list || []) {
+      const kids = n[labelChildren] as any[] | undefined
+      if (kids?.length) {
+        walk(kids)
+      } else if (wanted.has(Number(n.id))) {
+        leaves.push(Number(n.id))
+      }
+    }
+  }
+  walk(nodes as any[])
+  return leaves
+}
+
+async function loadMenus() {
+  menuTree.value = (await getSilent<MenuNode[]>('/menus/options')) || []
+}
+
+async function loadDepts() {
+  deptTree.value = (await getSilent<DeptNode[]>('/depts/options')) || []
+}
+
+async function load() {
+  loading.value = true
+  try {
+    const data = await get<{ total: number; items: RoleItem[] }>('/roles', query)
+    total.value = data.total
+    list.value = data.items
+  } finally {
+    loading.value = false
+  }
+}
+
+function resetForm() {
+  Object.assign(form, {
+    id: undefined,
+    roleName: '',
+    roleCode: '',
+    orderNum: 0,
+    dataScope: 1,
+    status: 0,
+    remark: '',
+    menuIds: [],
+    deptIds: [],
+  })
+}
+
+/**
+ * 弹窗完全打开后再勾选，避免 destroy-on-close 导致树未挂载。
+ */
+function onDialogOpened() {
+  nextTick(() => {
+    const menuLeaves = pickLeafIds(menuTree.value, pendingMenuIds.value)
+    menuTreeRef.value?.setCheckedKeys(menuLeaves, false)
+    applyDeptChecks()
+  })
+}
+
+function applyDeptChecks() {
+  if (form.dataScope !== 2) return
+  nextTick(() => {
+    const deptKeys = pendingDeptIds.value.map(Number)
+    deptTreeRef.value?.setCheckedKeys(deptKeys, false)
+  })
+}
+
+watch(
+  () => form.dataScope,
+  (v) => {
+    if (dialogVisible.value && v === 2) applyDeptChecks()
+  },
+)
+
+async function openCreate() {
+  resetForm()
+  if (!menuTree.value.length) await loadMenus()
+  if (!deptTree.value.length) await loadDepts()
+  pendingMenuIds.value = []
+  pendingDeptIds.value = []
+  treeRenderKey.value += 1
+  dialogVisible.value = true
+}
+
+async function openEdit(row: RoleItem) {
+  if (!menuTree.value.length) await loadMenus()
+  if (!deptTree.value.length) await loadDepts()
+  const detail = await get<RoleForm>(`/roles/${row.id}`)
+  Object.assign(form, {
+    id: detail.id,
+    roleName: detail.roleName || '',
+    roleCode: detail.roleCode || '',
+    orderNum: detail.orderNum ?? 0,
+    dataScope: Number(detail.dataScope ?? 1),
+    status: Number(detail.status ?? 0),
+    remark: detail.remark || '',
+    menuIds: (detail.menuIds || []).map(Number),
+    deptIds: (detail.deptIds || []).map(Number),
+  })
+  pendingMenuIds.value = [...form.menuIds]
+  pendingDeptIds.value = [...form.deptIds]
+  treeRenderKey.value += 1
+  dialogVisible.value = true
+}
+
+function collectMenuIds(): number[] {
+  const checked = ((menuTreeRef.value?.getCheckedKeys(false) as Array<string | number>) || []).map(Number)
+  const half = ((menuTreeRef.value?.getHalfCheckedKeys() as Array<string | number>) || []).map(Number)
+  return Array.from(new Set([...checked, ...half]))
+}
+
+function collectDeptIds(): number[] {
+  return ((deptTreeRef.value?.getCheckedKeys(false) as Array<string | number>) || []).map(Number)
+}
+
+async function save() {
+  if (!form.roleName.trim()) {
+    ElMessage.warning('请填写角色名称')
+    return
+  }
+  if (!form.roleCode.trim()) {
+    ElMessage.warning('请填写角色编码')
+    return
+  }
+  const menuIds = collectMenuIds()
+  const deptIds = form.dataScope === 2 ? collectDeptIds() : []
+  if (!menuIds.length) {
+    ElMessage.warning('请至少勾选一项菜单权限')
+    return
+  }
+  if (form.dataScope === 2 && !deptIds.length) {
+    ElMessage.warning('自定义数据权限请勾选部门')
+    return
+  }
+
+  const payload = {
+    id: form.id,
+    roleName: form.roleName.trim(),
+    roleCode: form.roleCode.trim(),
+    orderNum: form.orderNum,
+    dataScope: form.dataScope,
+    status: form.status,
+    remark: form.remark.trim() || null,
+    menuIds,
+    deptIds,
+  }
+
+  saving.value = true
+  try {
+    if (form.id) await put('/roles', payload)
+    else await post('/roles', payload)
+    ElMessage.success('保存成功')
+    dialogVisible.value = false
+    load()
+  } finally {
+    saving.value = false
+  }
+}
+
+async function remove(row: RoleItem) {
+  if (row.id === 1) {
+    ElMessage.warning('不可删除超级管理员角色')
+    return
+  }
+  await ElMessageBox.confirm(`确认删除角色「${row.roleName}」？`, '提示')
+  await del('/roles', { ids: [row.id] })
+  ElMessage.success('已删除')
+  load()
+}
+
+onMounted(async () => {
+  await Promise.all([load(), loadMenus(), loadDepts()])
+})
+</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:role:add'" @click="openCreate">新增</el-button>
+    </div>
+
+    <el-table :data="list" v-loading="loading" border stripe>
+      <el-table-column prop="roleName" label="角色名称" min-width="120" />
+      <el-table-column prop="roleCode" label="角色编码" min-width="120" />
+      <el-table-column prop="orderNum" label="排序" width="80" />
+      <el-table-column label="数据范围" min-width="140" show-overflow-tooltip>
+        <template #default="{ row }">{{ dataScopeLabel(row.dataScope) }}</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="180" fixed="right" align="center">
+          <template #default="{ row }">
+            <div class="row-actions">
+              <el-button
+                size="small"
+                type="primary"
+                v-permission="'system:role:edit'"
+                @click="openEdit(row)"
+              >
+                编辑
+              </el-button>
+              <el-button
+                size="small"
+                type="danger"
+                v-permission="'system:role: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="760px"
+      class="role-perm-dialog"
+      append-to-body
+      align-center
+      destroy-on-close
+      @opened="onDialogOpened"
+    >
+      <el-form label-width="96px" class="role-form">
+        <el-row :gutter="0" class="role-form__row">
+          <el-col :span="12" class="role-form__col">
+            <el-form-item label="角色名称" required>
+              <el-input v-model="form.roleName" maxlength="64" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" class="role-form__col">
+            <el-form-item label="角色编码" required>
+              <el-input v-model="form.roleCode" maxlength="64" :disabled="form.id === 1" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" class="role-form__col">
+            <el-form-item label="显示排序">
+              <el-input-number v-model="form.orderNum" :min="0" controls-position="right" style="width: 100%" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" class="role-form__col">
+            <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-col>
+          <el-col :span="24">
+            <el-form-item label="数据范围">
+              <el-select v-model="form.dataScope" style="width: 100%">
+                <el-option
+                  v-for="opt in DATA_SCOPE_OPTIONS"
+                  :key="opt.value"
+                  :label="opt.label"
+                  :value="opt.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="备注">
+              <el-input v-model="form.remark" type="textarea" :rows="2" maxlength="200" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-form-item label="菜单权限" required class="perm-item">
+          <div class="perm-box">
+            <div class="perm-box__tip">勾选菜单与按钮权限；半选父级表示仅部分子权限</div>
+            <el-tree
+              :key="`menu-${treeRenderKey}`"
+              ref="menuTreeRef"
+              :data="menuTree"
+              show-checkbox
+              node-key="id"
+              :props="{ label: 'label', children: 'children' }"
+              default-expand-all
+              :check-on-click-node="false"
+            >
+              <template #default="{ data }">
+                <span class="tree-node">
+                  <span class="tree-node__name">{{ data.label }}</span>
+                  <el-tag size="small" effect="plain" class="tree-node__tag">
+                    {{ menuTypeLabel(data.menuType) }}
+                  </el-tag>
+                </span>
+              </template>
+            </el-tree>
+          </div>
+        </el-form-item>
+
+        <el-form-item v-if="form.dataScope === 2" label="数据权限" class="perm-item">
+          <div class="perm-box">
+            <div class="perm-box__tip">自定义数据范围时勾选可见部门（可单独勾选父/子级）</div>
+            <el-tree
+              :key="`dept-${treeRenderKey}`"
+              ref="deptTreeRef"
+              :data="deptTree"
+              show-checkbox
+              node-key="id"
+              check-strictly
+              :props="{ label: 'label', children: 'children' }"
+              default-expand-all
+              :check-on-click-node="false"
+            />
+          </div>
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="saving" @click="save">保存</el-button>
+      </template>
+    </el-dialog>
+  </AppPage>
+</template>
+
+<style scoped>
+.role-form {
+  width: 100%;
+  max-width: 100%;
+  overflow-x: hidden;
+}
+.role-form__row {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+.role-form__col:nth-child(odd) {
+  padding-right: 8px;
+}
+.role-form__col:nth-child(even) {
+  padding-left: 8px;
+}
+.perm-item {
+  align-items: flex-start;
+}
+.perm-item :deep(.el-form-item__content) {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  overflow: hidden;
+}
+.perm-box {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  max-height: 320px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 10px 12px 12px;
+  border: 1px solid var(--sa-border);
+  border-radius: 10px;
+  background: var(--sa-toolbar-bg, #f8fafc);
+}
+.perm-box__tip {
+  margin-bottom: 8px;
+  font-size: 12px;
+  color: var(--sa-ink-muted);
+}
+.perm-box :deep(.el-tree) {
+  width: 100%;
+  background: transparent;
+  overflow: hidden;
+}
+.perm-box :deep(.el-tree-node) {
+  width: 100%;
+}
+.perm-box :deep(.el-tree-node__content) {
+  width: 100%;
+  box-sizing: border-box;
+  height: 32px;
+  overflow: hidden;
+}
+.perm-box :deep(.el-tree-node__label),
+.perm-box :deep(.el-tree-node__content > .tree-node) {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+.tree-node {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  max-width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  vertical-align: middle;
+}
+.tree-node__name {
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.tree-node__tag {
+  flex-shrink: 0;
+  height: 20px;
+  line-height: 18px;
+}
+</style>
+
+<style>
+/* 弹窗仅纵向滚动，禁止左右滚动条 */
+.role-perm-dialog.el-dialog {
+  margin-top: 6vh !important;
+  width: min(760px, calc(100vw - 32px)) !important;
+  max-width: calc(100vw - 32px);
+  max-height: 88vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.role-perm-dialog .el-dialog__header,
+.role-perm-dialog .el-dialog__footer {
+  flex-shrink: 0;
+}
+.role-perm-dialog .el-dialog__body {
+  flex: 1;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  max-height: calc(88vh - 140px);
+  padding: 12px 20px 8px;
+  box-sizing: border-box;
+}
+</style>