1

src/components.d.ts

@@ -11,6 +11,8 @@ declare module 'vue' {
     ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDialog: typeof import('element-plus/es')['ElDialog']
@@ -32,6 +34,8 @@ declare module 'vue' {
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTree: typeof import('element-plus/es')['ElTree']
+    ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
     MapSelector: typeof import('./components/MapSelector.vue')['default']
     Pagination: typeof import('./components/Pagination/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

src/views/AuthManage/HandleDialog.vue

@@ -43,6 +43,7 @@ const submitForm = async () => {
     ...formField.value,
     id: isAdd.value ? null : props.row.id,
   }
+  loading.value = true
   RPC.post(api, params)
     .then((res) => {
       ElMessage.success('操作成功')

src/views/ModelManage/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="title">角色管理</div>
+    <div class="title">模板管理</div>
     <el-form
       ref="searchFormRef"
       class="form"
@@ -103,9 +103,9 @@ const {
   tableContainerEl,
 } = useTableRPC({
   queryParams: {},
-  remoteDataFn: '/role/list',
+  remoteDataFn: '/template/list',
   deleteConfig: {
-    remote: '/role/delete',
+    remote: '/template/delete',
     key: 'id',
     message(row) {
       return `确认删除 “${row.name}”`

src/views/RoleManage/AuthDialog.vue

@@ -0,0 +1,83 @@
+<script setup>
+import RPC from '@/utils/rpc'
+const props = defineProps({
+  row: [Object],
+  authList: {
+    type: Array,
+    default: [],
+  },
+})
+
+const emit = defineEmits(['closed', 'onSuccess'])
+
+const dialogVisible = ref(false)
+
+const isAdd = computed(() => props.type === 'add')
+
+onMounted(() => {
+  dialogVisible.value = true
+})
+
+const formRef = ref(null)
+const formField = ref({})
+const formRules = reactive({})
+
+const loading = ref(false)
+
+function closed() {
+  emit('closed')
+}
+
+const submitForm = async () => {
+  const checkedNodes = treeRef.value.getCheckedNodes() || []
+  loading.value = true
+  RPC.post('/assign_permissions', {
+    role_id: props.row.id,
+    permission_ids: checkedNodes.map((item) => item.id) || [],
+  })
+    .then((res) => {
+      ElMessage.success('操作成功')
+      emit('onSuccess')
+      emit('closed')
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+const authValue = ref(props.row?.permissions?.map((item) => item.id) || [])
+
+const treeRef = ref()
+</script>
+
+<template>
+  <el-dialog
+    align-center
+    title="分配权限"
+    width="80%"
+    v-model="dialogVisible"
+    @closed="closed"
+    :close-on-click-modal="false"
+  >
+    <el-tree
+      ref="treeRef"
+      :data="authList"
+      show-checkbox
+      check-strictly
+      node-key="id"
+      default-expand-all
+      :default-checked-keys="authValue"
+      :props="{
+        children: 'children',
+        label: 'name',
+      }"
+    />
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="closed"> 取 消 </el-button>
+        <el-button type="primary" :loading="loading" @click="submitForm"> 确 定 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped></style>

src/views/RoleManage/HandleDialog.vue

@@ -42,6 +42,7 @@ const submitForm = async () => {
     ...formField.value,
     id: isAdd.value ? null : props.row.id,
   }
+  loading.value = true
   RPC.post(api, params)
     .then((res) => {
       ElMessage.success('操作成功')

src/views/RoleManage/index.vue

@@ -37,15 +37,12 @@
         <el-table-column align="center" label="名称" prop="name" show-overflow-tooltip />
         <el-table-column align="center" label="字段" prop="code" show-overflow-tooltip />
         <el-table-column align="center" label="描述" prop="description" show-overflow-tooltip />
-        <el-table-column align="center" label="操作" width="120">
+        <el-table-column align="center" label="操作" width="180">
           <template #default="{ row }">
-            <el-button v-if="row.status != 1" link type="primary" @click="edit(row)">
-              编辑
-            </el-button>
+            <el-button link type="primary" @click="editAuth(row)"> 分配权限 </el-button>
+            <el-button link type="primary" @click="edit(row)"> 编辑 </el-button>
 
-            <el-button v-if="row.status != 1" link type="danger" @click="handleDelete(row)">
-              删除
-            </el-button>
+            <el-button link type="danger" @click="handleDelete(row)"> 删除 </el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -67,12 +64,56 @@
       @closed="isShowDialog = false"
       @on-success="getList"
     />
+
+    <AuthDialog
+      v-if="isShowAuthDialog"
+      :row="currentRow"
+      :authList="authList"
+      @closed="isShowAuthDialog = false"
+      @on-success="getList"
+    />
   </div>
 </template>
 
 <script setup>
 import { useTableRPC } from '@/utils/hook'
 import HandleDialog from './HandleDialog.vue'
+import AuthDialog from './AuthDialog.vue'
+import RPC from '@/utils/rpc'
+
+const editAuth = (row) => {
+  isShowAuthDialog.value = true
+  currentRow.value = row
+}
+
+function buildTree(data, rootId = 0) {
+  // 1. 建立一个 id -> 节点 的映射表，方便快速查找
+  const map = {}
+  data.forEach((item) => {
+    map[item.id] = { ...item, children: [] }
+  })
+
+  // 2. 遍历数据，组装父子关系
+  const tree = []
+  data.forEach((item) => {
+    const node = map[item.id]
+    if (item.parent_id === rootId) {
+      // 顶级节点
+      tree.push(node)
+    } else if (map[item.parent_id]) {
+      // 非顶级，挂到父节点的 children
+      map[item.parent_id].children.push(node)
+    }
+  })
+
+  return tree
+}
+
+const isShowAuthDialog = ref(false)
+const authList = ref([])
+RPC.post('/permission/list', { page: 1, limit: -1 }).then((res) => {
+  authList.value = buildTree(res.rows || [])
+})
 
 const rowType = ref('')
 const currentRow = ref(null)

src/views/UserManage/HandleDialog.vue

@@ -42,6 +42,7 @@ const submitForm = async () => {
     ...formField.value,
     id: isAdd.value ? null : props.row.id,
   }
+  loading.value = true
   RPC.post(api, params)
     .then((res) => {
       ElMessage.success('操作成功')
@@ -57,20 +58,6 @@ if (!isAdd.value) {
   formField.value = {
     ...props.row,
   }
-  RPC.post('/user_permissions', {
-    user_id: props.row.id,
-    type: 2,
-    as_tree: false,
-  }).then((res) => {
-    console.log(2, res)
-  })
-  RPC.post('/user_permissions', {
-    user_id: props.row.id,
-    type: 3,
-    as_tree: false,
-  }).then((res) => {
-    console.log(3, res)
-  })
 }
 </script>
 

src/views/UserManage/RoleDialog.vue

@@ -0,0 +1,67 @@
+<script setup>
+import RPC from '@/utils/rpc'
+const props = defineProps({
+  row: [Object],
+  roleList: {
+    type: Array,
+    default: [],
+  },
+})
+
+const emit = defineEmits(['closed', 'onSuccess'])
+
+const dialogVisible = ref(false)
+
+const isAdd = computed(() => props.type === 'add')
+
+onMounted(() => {
+  dialogVisible.value = true
+})
+
+const formRef = ref(null)
+const formField = ref({})
+const formRules = reactive({})
+
+const loading = ref(false)
+
+function closed() {
+  emit('closed')
+}
+
+const submitForm = async () => {
+  loading.value = true
+  RPC.post('/assign_roles', { user_id: props.row.id, role_ids: checkList.value })
+    .then((res) => {
+      ElMessage.success('操作成功')
+      emit('onSuccess')
+      emit('closed')
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+const checkList = ref(props.row?.roles?.map((item) => item.id) || [])
+</script>
+
+<template>
+  <el-dialog
+    align-center
+    title="分配权限"
+    width="80%"
+    v-model="dialogVisible"
+    @closed="closed"
+    :close-on-click-modal="false"
+  >
+    <el-checkbox-group v-model="checkList">
+      <el-checkbox v-for="item in roleList" :label="item.name" :value="item.id" />
+    </el-checkbox-group>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="closed"> 取 消 </el-button>
+        <el-button type="primary" :loading="loading" @click="submitForm"> 确 定 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped></style>

src/views/UserManage/index.vue

@@ -37,15 +37,17 @@
         <el-table-column align="center" label="用户名" prop="username" show-overflow-tooltip />
         <el-table-column align="center" label="电话" prop="phone" show-overflow-tooltip />
         <el-table-column align="center" label="邮件" prop="email" show-overflow-tooltip />
-        <el-table-column align="center" label="操作" width="120">
+        <el-table-column align="center" label="角色" prop="roles">
           <template #default="{ row }">
-            <el-button v-if="row.status != 1" link type="primary" @click="edit(row)">
-              编辑
-            </el-button>
+            {{ row.roles?.map((item) => item.name)?.join(',') }}
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="操作" width="180">
+          <template #default="{ row }">
+            <el-button link type="primary" @click="editRole(row)"> 分配角色 </el-button>
+            <el-button link type="primary" @click="edit(row)"> 编辑 </el-button>
 
-            <el-button v-if="row.status != 1" link type="danger" @click="handleDelete(row)">
-              删除
-            </el-button>
+            <el-button link type="danger" @click="handleDelete(row)"> 删除 </el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -63,10 +65,16 @@
       v-if="isShowDialog"
       :type="rowType"
       :row="currentRow"
-      :categoryList="categoryList"
       @closed="isShowDialog = false"
       @on-success="getList"
     />
+    <RoleDialog
+      v-if="isShowRoleDialog"
+      :row="currentRow"
+      :roleList="roleList"
+      @closed="isShowRoleDialog = false"
+      @on-success="getList"
+    />
   </div>
 </template>
 
@@ -75,6 +83,7 @@ import { useTableRPC } from '@/utils/hook'
 import dayjs from 'dayjs'
 import RPC from '@/utils/rpc'
 import HandleDialog from './HandleDialog.vue'
+import RoleDialog from './RoleDialog.vue'
 
 const rowType = ref('')
 const currentRow = ref(null)
@@ -88,6 +97,16 @@ const edit = (row) => {
   rowType.value = 'edit'
   currentRow.value = row
 }
+const editRole = (row) => {
+  isShowRoleDialog.value = true
+  currentRow.value = row
+}
+
+const isShowRoleDialog = ref(false)
+const roleList = ref([])
+RPC.post('/role/list', { page: 1, limit: -1 }).then((res) => {
+  roleList.value = res.rows || []
+})
 
 const {
   loading,