添加树表模版，树选择器
This commit is contained in:
Jason
parent
90c78a8aff
commit
e65979d0ce
|
|
@ -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 })
|
||||
}
|
||||
// 岗位列表
|
||||
|
|
|
|||
|
|
@ -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 })
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
:value="item.value"
|
||||
:disabled="!item.status"
|
||||
/>
|
||||
//
|
||||
//没有选字典数据时渲染
|
||||
<el-option label="请选择字典生成" value="" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue