添加树表模版，树选择器

admin/src/api/org/post.ts

@@ -1,7 +1,7 @@
 import request from '@/utils/request'
 
 // 岗位列表
-export function postLists(params: any) {
+export function postLists(params?: any) {
     return request.get({ url: '/system/post/list', params })
 }
 // 岗位列表

admin/src/views/template/api.ts

@@ -1,7 +1,7 @@
 import request from '@/utils/request'
 
 // 岗位列表
-export function postLists(params: Record<string, any>) {
+export function postLists(params?: Record<string, any>) {
     return request.get({ url: '/system/post/list', params })
 }
 

admin/src/views/template/edit.vue

@@ -39,7 +39,7 @@
 </template>
 <script lang="ts" setup>
 import type { FormInstance } from 'element-plus'
-import { postEdit, postAdd } from '@/api/org/post' //接口要替换
+import { postEdit, postAdd, postAll } from '@/api/org/post' //接口要替换
 import Popup from '@/components/popup/index.vue'
 import feedback from '@/utils/feedback'
 import type { PropType } from 'vue'
@@ -52,6 +52,9 @@ defineProps({
 const emit = defineEmits(['success', 'close'])
 const formRef = shallowRef<FormInstance>()
 const popupRef = shallowRef<InstanceType<typeof Popup>>()
+// 树表才有
+const treeList = ref<any[]>([])
+// 树表才有
 const mode = ref('add')
 const popupTitle = computed(() => {
     return mode.value == 'edit' ? '编辑岗位' : '新增岗位' //要替换
@@ -109,6 +112,17 @@ const handleClose = () => {
     emit('close')
 }
 
+// 树表才有
+const getLists = () => {
+    const data: any = await postAll()
+    const item = { id: 0, menuName: '顶级', children: [] }
+    item.children = data
+    treeList.value.push(item)
+}
+
+getLists()
+// 树表才有
+
 defineExpose({
     open,
     setFormData

admin/src/views/template/form_item/select.vue

@@ -12,7 +12,7 @@
             :value="item.value"
             :disabled="!item.status"
         />
-        //
+        //没有选字典数据时渲染
         <el-option label="请选择字典生成" value="" />
     </el-select>
 </el-form-item>

admin/src/views/template/form_item/treeSelect.vue

@@ -0,0 +1,15 @@
+<el-form-item label="${字段描述}" prop="${字段名}">
+    <el-tree-select
+        class="flex-1"
+        v-model="formData.${字段名}"
+        :data="treeList"
+        clearable
+        node-key="${树主键}"
+        :props="{
+            label: ${显示的字段名如name}
+        }"
+        :default-expand-all="true"
+        placeholder="请选择${字段描述}"
+        check-strictly
+    />
+</el-form-item>

admin/src/views/template/index_tree.vue

@@ -0,0 +1,182 @@
+<template>
+    <div class="index-tree">
+        <el-card class="!border-none mb-4" shadow="never">
+            <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
+                <el-form-item label="岗位编码">
+                    <el-input class="w-56" v-model="queryParams.code" />
+                </el-form-item>
+                <el-form-item label="岗位名称">
+                    <el-input class="w-56" v-model="queryParams.name" />
+                </el-form-item>
+                <el-form-item label="岗位状态">
+                    <el-select class="w-56" v-model="queryParams.isStop">
+                        <el-option label="全部" value />
+                    </el-select>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" @click="getLists">查询</el-button>
+                    <el-button @click="getLists">重置</el-button>
+                </el-form-item>
+            </el-form>
+        </el-card>
+        <el-card class="!border-none" shadow="never">
+            <div>
+                <el-button v-perms="['system:menu:add']" type="primary" @click="handleAdd()">
+                    <template #icon>
+                        <icon name="el-icon-Plus" />
+                    </template>
+                    新增
+                </el-button>
+                <el-button @click="handleExpand"> 展开/折叠 </el-button>
+            </div>
+            <el-table
+                v-loading="loading"
+                ref="tableRef"
+                class="mt-4"
+                size="large"
+                :data="lists"
+                row-key="id"
+                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+            >
+                <el-table-column
+                    label="菜单名称"
+                    prop="menuName"
+                    min-width="150"
+                    show-overflow-tooltip
+                />
+                <el-table-column label="类型" prop="menuType" min-width="80">
+                    <template #default="{ row }">
+                        <div v-if="row.menuType == MenuEnum.CATALOGUE">目录</div>
+                        <div v-else-if="row.menuType == MenuEnum.MENU">菜单</div>
+                        <div v-else-if="row.menuType == MenuEnum.BUTTON">按钮</div>
+                    </template>
+                </el-table-column>
+                <el-table-column label="图标" prop="menuIcon" min-width="80">
+                    <template #default="{ row }">
+                        <div class="flex">
+                            <icon :name="row.menuIcon" :size="20" />
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column
+                    label="权限标识"
+                    prop="perms"
+                    min-width="150"
+                    show-overflow-tooltip
+                />
+                <el-table-column label="状态" prop="isDisable" min-width="100">
+                    <template #default="{ row }">
+                        <el-tag v-if="row.isDisable == 0">正常</el-tag>
+                        <el-tag v-else type="danger">停用</el-tag>
+                    </template>
+                </el-table-column>
+                <el-table-column label="排序" prop="menuSort" min-width="100" />
+                <el-table-column
+                    label="更新时间"
+                    prop="updateTime"
+                    min-width="180"
+                ></el-table-column>
+                <el-table-column label="操作" width="160" fixed="right">
+                    <template #default="{ row }">
+                        <el-button
+                            v-perms="['system:menu:add']"
+                            type="primary"
+                            link
+                            @click="handleAdd(row.id)"
+                        >
+                            新增
+                        </el-button>
+                        <el-button
+                            v-perms="['system:menu:edit']"
+                            type="primary"
+                            link
+                            @click="handleEdit(row)"
+                        >
+                            编辑
+                        </el-button>
+                        <el-button
+                            v-perms="['system:menu:del']"
+                            type="danger"
+                            link
+                            @click="handleDelete(row.id)"
+                        >
+                            删除
+                        </el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </el-card>
+        <edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
+    </div>
+</template>
+<script lang="ts" setup>
+import { menuDelete, menuLists } from '@/api/perms/menu'
+import type { ElTable } from 'element-plus'
+import { MenuEnum } from '@/enums/appEnums'
+import EditPopup from './edit.vue'
+import feedback from '@/utils/feedback'
+const tableRef = shallowRef<InstanceType<typeof ElTable>>()
+const editRef = shallowRef<InstanceType<typeof EditPopup>>()
+let isExpand = false
+const showEdit = ref(false)
+const loading = ref(false)
+const lists = ref<any[]>([])
+
+const queryParams = reactive({
+    //需要替换
+    code: '',
+    name: '',
+    isStop: ''
+})
+
+const getLists = async () => {
+    loading.value = true
+    try {
+        const data = await menuLists(queryParams)
+        lists.value = data
+        loading.value = false
+    } catch (error) {
+        loading.value = false
+    }
+}
+
+const handleAdd = async (id?: number) => {
+    showEdit.value = true
+    await nextTick()
+    if (id) {
+        editRef.value?.setFormData({
+            pid: id
+        })
+    }
+    editRef.value?.open('add')
+}
+
+const handleEdit = async (data: any) => {
+    showEdit.value = true
+    await nextTick()
+    editRef.value?.open('edit')
+    editRef.value?.setFormData(data)
+}
+
+const handleDelete = async (id: number) => {
+    await feedback.confirm('确定要删除？')
+    await menuDelete({ id })
+    getLists()
+}
+
+const handleExpand = () => {
+    isExpand = !isExpand
+    toggleExpand(lists.value, isExpand)
+}
+
+const toggleExpand = (children: any[], unfold = true) => {
+    for (const key in children) {
+        tableRef.value?.toggleRowExpansion(children[key], unfold)
+        if (children[key].children) {
+            toggleExpand(children[key].children!, unfold)
+        }
+    }
+}
+
+getLists()
+</script>