Compare commits
2 Commits
d849360af5
...
96bafe0ca8
| Author | SHA1 | Date |
|---|---|---|
|
|
96bafe0ca8 | |
|
|
8b32bf5ede |
|
|
@ -0,0 +1,31 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 获取所有位置
|
||||
export function getLocationList() {
|
||||
return request.get({ url: '/location/list' })
|
||||
}
|
||||
|
||||
// 添加位置
|
||||
export function addLocation(params?: any) {
|
||||
return request.post({ url: '/location/add', params })
|
||||
}
|
||||
|
||||
// 修改位置
|
||||
export function updateLocation(params?: any) {
|
||||
return request.post({ url: '/location/update', params })
|
||||
}
|
||||
|
||||
// 获取指定位置
|
||||
export function getLocation(params?: any) {
|
||||
return request.get({ url: '/location/detail', params })
|
||||
}
|
||||
|
||||
// 删除位置
|
||||
export function deleteLocation(params?: any) {
|
||||
return request.post({ url: '/location/del', params })
|
||||
}
|
||||
|
||||
// 返回指定位置的所有子位置
|
||||
export function getSubLocations(params?: any) {
|
||||
return request.get({ url: '/location/children', params })
|
||||
}
|
||||
|
|
@ -47,14 +47,27 @@ export function useDictOptions<T = any>(options: Options) {
|
|||
}
|
||||
}
|
||||
|
||||
export function useDictData<T = any>(id: number) {
|
||||
export function useDictData<T = Record<string, any>>(ids: number | number[]) {
|
||||
const dictIds = Array.isArray(ids) ? ids : [ids]
|
||||
const dictData: any = reactive({})
|
||||
const refresh = async () => {
|
||||
const data = await getDictList({
|
||||
type_id: id
|
||||
})
|
||||
Object.assign(dictData, data.lists)
|
||||
|
||||
// 初始化单个字典
|
||||
const initDict = async (id: number) => {
|
||||
const data = await getDictList({ type_id: id })
|
||||
dictData[id] = {}
|
||||
Object.assign(dictData[id], data.lists) // 保持原有数据结构
|
||||
}
|
||||
|
||||
// 刷新字典(支持指定ID,不传则刷新所有)
|
||||
const refresh = async (targetIds?: number | number[]) => {
|
||||
const targetDictIds = targetIds
|
||||
? Array.isArray(targetIds) ? targetIds : [targetIds]
|
||||
: dictIds
|
||||
// 并行加载指定字典
|
||||
await Promise.all(targetDictIds.map(initDict))
|
||||
}
|
||||
|
||||
// 初始化所有字典
|
||||
const initPromise = refresh()
|
||||
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -9,17 +9,10 @@
|
|||
@close="handleClose"
|
||||
>
|
||||
<el-form ref="formRef" :model="formData" label-width="80px" :rules="formRules">
|
||||
<el-form-item label="菜单类型" prop="type" required>
|
||||
<el-radio-group v-model="formData.type">
|
||||
<el-radio :label="MenuEnum.CATALOGUE">目录</el-radio>
|
||||
<el-radio :label="MenuEnum.MENU">菜单</el-radio>
|
||||
<el-radio :label="MenuEnum.BUTTON">按钮</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="父级菜单" prop="pid">
|
||||
<el-form-item label="父级位置" prop="pid">
|
||||
<el-tree-select
|
||||
class="flex-1"
|
||||
v-model="formData.pid"
|
||||
v-model="formData.parentId"
|
||||
:data="menuOptions"
|
||||
clearable
|
||||
node-key="id"
|
||||
|
|
@ -27,135 +20,53 @@
|
|||
label: 'name'
|
||||
}"
|
||||
:default-expand-all="true"
|
||||
placeholder="请选择父级菜单"
|
||||
placeholder="请选择父级位置"
|
||||
check-strictly
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入菜单名称" clearable />
|
||||
<el-form-item label="位置名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入位置名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formData.type != MenuEnum.BUTTON" label="菜单图标" prop="icon">
|
||||
<icon-picker class="flex-1" v-model="formData.icon" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="formData.type != MenuEnum.BUTTON" label="路由路径" prop="paths">
|
||||
<div class="flex-1">
|
||||
<el-input v-model="formData.paths" placeholder="请输入路由路径" clearable />
|
||||
<div class="form-tips">
|
||||
访问的路由地址,如:`user`,如外网地址需内链访问则以`http(s)://`开头
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="formData.type == MenuEnum.MENU"
|
||||
label="组件路径"
|
||||
prop="component"
|
||||
>
|
||||
<div class="flex-1">
|
||||
<el-autocomplete
|
||||
class="w-full"
|
||||
v-model="formData.component"
|
||||
:fetch-suggestions="querySearch"
|
||||
clearable
|
||||
placeholder="请输入组件路径"
|
||||
<el-form-item label="位置类型" prop="type" required>
|
||||
<el-select
|
||||
v-model="formData.type"
|
||||
class="w-[280px]"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in dictData[9]"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:value="item.value"
|
||||
/>
|
||||
<div class="form-tips">
|
||||
访问的组件路径,如:`user/setting`,默认在`views`目录下
|
||||
</div>
|
||||
</div>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="选中菜单"
|
||||
prop="selected"
|
||||
v-if="formData.type == MenuEnum.MENU"
|
||||
label="位置状态"
|
||||
prop="status"
|
||||
required
|
||||
>
|
||||
<div class="flex-1">
|
||||
<el-input
|
||||
v-model="formData.selected"
|
||||
placeholder="请输入路由路径"
|
||||
clearable
|
||||
<el-select
|
||||
v-model="formData.type"
|
||||
class="w-[280px]"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in dictData[10]"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:value="item.value"
|
||||
/>
|
||||
<div class="form-tips">
|
||||
访问详情页面,编辑页面时,菜单高亮显示,如`/consumer/lists`
|
||||
</div>
|
||||
</div>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="formData.type != MenuEnum.CATALOGUE"
|
||||
label="权限字符"
|
||||
prop="perms"
|
||||
>
|
||||
<div class="flex-1">
|
||||
<el-input v-model="formData.perms" placeholder="请输入权限字符" clearable />
|
||||
<div class="form-tips">
|
||||
将作为server端API验权使用,如`auth.admin/user`,请谨慎修改
|
||||
</div>
|
||||
</div>
|
||||
<el-form-item label="面积(m²)" prop="area">
|
||||
<el-input v-model="formData.area" placeholder="请输入面积" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="formData.type == MenuEnum.MENU" label="路由参数" prop="params">
|
||||
<div>
|
||||
<div class="flex-1">
|
||||
<el-input
|
||||
v-model="formData.params"
|
||||
placeholder="请输入路由参数"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
<div class="form-tips">
|
||||
访问路由的默认传递参数,如:`{"id": 1, "name":
|
||||
"admin"}`或`id=1&name=admin`
|
||||
</div>
|
||||
</div>
|
||||
<el-form-item label="可容纳人数" prop="capacity">
|
||||
<el-input v-model="formData.capacity" placeholder="请输入可容纳人数" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="formData.type == MenuEnum.MENU"
|
||||
label="是否缓存"
|
||||
prop="isCache"
|
||||
required
|
||||
>
|
||||
<div>
|
||||
<el-radio-group v-model="formData.isCache">
|
||||
<el-radio :label="1">缓存</el-radio>
|
||||
<el-radio :label="0">不缓存</el-radio>
|
||||
</el-radio-group>
|
||||
<div class="form-tips">选择缓存则会被`keep-alive`缓存</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="formData.type != MenuEnum.BUTTON"
|
||||
label="是否显示"
|
||||
prop="isShow"
|
||||
required
|
||||
>
|
||||
<div>
|
||||
<el-radio-group v-model="formData.isShow">
|
||||
<el-radio :label="1">显示</el-radio>
|
||||
<el-radio :label="0">隐藏</el-radio>
|
||||
</el-radio-group>
|
||||
<div class="form-tips">
|
||||
选择隐藏则路由将不会出现在侧边栏,但仍然可以访问
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="formData.type != MenuEnum.BUTTON"
|
||||
label="菜单状态"
|
||||
prop="isDisable"
|
||||
required
|
||||
>
|
||||
<div>
|
||||
<el-radio-group v-model="formData.isDisable">
|
||||
<el-radio :label="0">正常</el-radio>
|
||||
<el-radio :label="1">停用</el-radio>
|
||||
</el-radio-group>
|
||||
<div class="form-tips">选择停用则路由将不会出现在侧边栏,也不能被访问</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单排序" prop="sort">
|
||||
<div>
|
||||
<el-input-number v-model="formData.sort" :min="0" :max="9999" />
|
||||
<div class="form-tips">数值越大越排前</div>
|
||||
</div>
|
||||
<el-form-item label="楼层号" prop="floorNumber">
|
||||
<el-input v-model="formData.floorNumber" placeholder="请输入楼层号" clearable />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</popup>
|
||||
|
|
@ -164,9 +75,9 @@
|
|||
<script lang="ts" setup>
|
||||
import type { FormInstance } from 'element-plus'
|
||||
|
||||
import { menuAdd, menuDetail, menuEdit, menuLists } from '@/api/perms/menu'
|
||||
import { getLocationList, addLocation, getLocation, getSubLocations, updateLocation } from '@/api/location'
|
||||
import Popup from '@/components/popup/index.vue'
|
||||
import { MenuEnum } from '@/enums/appEnums'
|
||||
import { useDictData } from '@/hooks/useDictOptions'
|
||||
import { getModulesKey } from '@/router'
|
||||
import { snakeToCamel } from '@/utils/format'
|
||||
import { arrayToTree, treeToArray } from '@/utils/util'
|
||||
|
|
@ -176,9 +87,11 @@ const formRef = shallowRef<FormInstance>()
|
|||
const popupRef = shallowRef<InstanceType<typeof Popup>>()
|
||||
const mode = ref('add')
|
||||
const popupTitle = computed(() => {
|
||||
return mode.value == 'edit' ? '编辑菜单' : '新增菜单'
|
||||
return mode.value == 'edit' ? '编辑位置' : '新增位置'
|
||||
})
|
||||
|
||||
const { dictData } = useDictData<Array<{name: string, value: any}>>([9,10])
|
||||
|
||||
const componentsOptions = ref(getModulesKey())
|
||||
const querySearch = (queryString: string, cb: any) => {
|
||||
const results = queryString
|
||||
|
|
@ -191,77 +104,58 @@ const querySearch = (queryString: string, cb: any) => {
|
|||
const formData = reactive({
|
||||
id: '',
|
||||
//父级id
|
||||
pid: 0,
|
||||
parentId: 0,
|
||||
//类型
|
||||
type: MenuEnum.CATALOGUE,
|
||||
//图标
|
||||
icon: '',
|
||||
type: '',
|
||||
//面积
|
||||
area: 0,
|
||||
//名称
|
||||
name: '',
|
||||
//排序号
|
||||
sort: 0,
|
||||
// 路由路径
|
||||
paths: '',
|
||||
//权限链接
|
||||
perms: '',
|
||||
//前端组件
|
||||
component: '',
|
||||
//选中路径
|
||||
selected: '',
|
||||
//路由参数
|
||||
params: '',
|
||||
//是否缓存 0=否, 1=是
|
||||
isCache: 1,
|
||||
//是否显示 0=否, 1=是
|
||||
isShow: 1,
|
||||
//是否禁用 0=否, 1=是
|
||||
isDisable: 0
|
||||
//可容纳人数
|
||||
capacity: 0,
|
||||
//楼层号
|
||||
floorNumber: 0,
|
||||
//状态
|
||||
status: 0
|
||||
})
|
||||
|
||||
const formRules = {
|
||||
pid: [
|
||||
parentId: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择父级菜单',
|
||||
message: '请选择父级位置',
|
||||
trigger: ['blur', 'change']
|
||||
}
|
||||
],
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入菜单名称',
|
||||
message: '请输入位置名称',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
paths: [
|
||||
type: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入路由地址',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
component: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入组件地址',
|
||||
trigger: 'blur'
|
||||
message: '请选择位置类型',
|
||||
trigger: ['blur', 'change']
|
||||
}
|
||||
]
|
||||
}
|
||||
const menuOptions = ref<any[]>([])
|
||||
|
||||
const getMenu = async () => {
|
||||
const data: any = await menuLists({ page_type: 0 })
|
||||
const data: any = await getLocationList()
|
||||
const menu: any = { id: 0, name: '顶级', children: [] }
|
||||
menu.children = arrayToTree(
|
||||
treeToArray(data.lists).filter((item) => item.type != MenuEnum.BUTTON)
|
||||
treeToArray(data.childLocation).filter((item) => item.type != "ER")
|
||||
)
|
||||
menuOptions.value.push(menu)
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
await formRef.value?.validate()
|
||||
mode.value == 'edit' ? await menuEdit(formData) : await menuAdd(formData)
|
||||
mode.value == 'edit' ? await updateLocation(formData) : await addLocation(formData)
|
||||
popupRef.value?.close()
|
||||
emit('success')
|
||||
}
|
||||
|
|
@ -282,9 +176,7 @@ const setFormData = (data: Record<any, any>) => {
|
|||
}
|
||||
|
||||
const getDetail = async (row: Record<string, any>) => {
|
||||
const data = await menuDetail({
|
||||
id: row.id
|
||||
})
|
||||
const data = await getLocation({ id: row.id })
|
||||
setFormData(data)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
v-loading="pager.loading"
|
||||
:data="pager.lists"
|
||||
row-key="id"
|
||||
:tree-props="{ children: 'children' }"
|
||||
:tree-props="{ children: 'childLocation' }"
|
||||
>
|
||||
<el-table-column
|
||||
label="位置名称"
|
||||
|
|
@ -25,47 +25,55 @@
|
|||
min-width="150"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column label="位置类型" prop="type" min-width="80">
|
||||
<template #default="{ row }">
|
||||
<div>
|
||||
{{ dictData.find(item => item.value === row.type)?.name || '-' }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="面积(平方米)"
|
||||
prop="area"
|
||||
label="位置类型"
|
||||
min-width="80"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
label="可容纳人数"
|
||||
prop="capacity"
|
||||
min-width="150"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
label="楼层号"
|
||||
prop="floorNumber"
|
||||
min-width="150"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column label="状态" prop="is_disable" min-width="100">
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.is_disable == 0">正常</el-tag>
|
||||
<el-tag v-else type="danger">停用</el-tag>
|
||||
{{ getTypeName(row.type) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="面积"
|
||||
min-width="60"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<template #default="{ row }">
|
||||
{{ row.area === 0 || row.area === '' || row.area === undefined ? '/' : row.area }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="可容纳人数"
|
||||
min-width="80"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<template #default="{ row }">
|
||||
{{ row.capacity === 0 || row.capacity === '' || row.capacity === undefined ? '/' : row.capacity }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="楼层号"
|
||||
min-width="80"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<template #default="{ row }">
|
||||
{{ row.floorNumber === 0 || row.floorNumber === '' || row.floorNumber === undefined ? '/' : row.floorNumber }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" prop="status" min-width="100">
|
||||
<template #default="{ row }">
|
||||
{{ getStatusName(row.status) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="排序" prop="sort" min-width="100" />
|
||||
<el-table-column
|
||||
label="更新时间"
|
||||
prop="update_time"
|
||||
prop="updateTime"
|
||||
min-width="180"
|
||||
></el-table-column>
|
||||
<el-table-column label="操作" width="160" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
v-if="row.type !== MenuEnum.BUTTON"
|
||||
v-perms="['auth.menu/add']"
|
||||
type="primary"
|
||||
link
|
||||
|
|
@ -99,26 +107,60 @@
|
|||
<script lang="ts" setup name="permission-menu">
|
||||
import type { ElTable } from 'element-plus'
|
||||
|
||||
import { menuDelete, menuLists } from '@/api/perms/menu'
|
||||
import { getLocationList, addLocation, deleteLocation, getSubLocations } from '@/api/location'
|
||||
import { MenuEnum } from '@/enums/appEnums'
|
||||
import { useDictData } from '@/hooks/useDictOptions'
|
||||
import { usePaging } from '@/hooks/usePaging'
|
||||
import feedback from '@/utils/feedback'
|
||||
|
||||
import EditPopup from './edit.vue'
|
||||
import element from '@/install/plugins/element'
|
||||
|
||||
const tableRef = shallowRef<InstanceType<typeof ElTable>>()
|
||||
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
|
||||
let isExpand = false
|
||||
const showEdit = ref(false)
|
||||
const { pager, getLists } = usePaging({
|
||||
fetchFun: menuLists,
|
||||
params: {
|
||||
page_type: 0
|
||||
fetchFun: async () => {
|
||||
const response = await getLocationList()
|
||||
return {
|
||||
lists: response.childLocation || [],
|
||||
total: response.childLocation?.length || 0
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const { dictData } = useDictData<Array<{ name: string; value: string | number }>>(9)
|
||||
const { dictData } = useDictData<Array<{ name: string; value: string | number }>>([9,10])
|
||||
|
||||
const typeMap = computed(() => {
|
||||
const map: Record<string, string> = {}
|
||||
if (dictData[9] && typeof dictData[9] === 'object') {
|
||||
Object.values(dictData[9]).forEach((item: any) => {
|
||||
map[item.value] = item.name
|
||||
})
|
||||
}
|
||||
return map
|
||||
})
|
||||
|
||||
const statusMap = computed(() => {
|
||||
const map: Record<string, string> = {}
|
||||
if (dictData[10] && typeof dictData[10] === 'object') {
|
||||
Object.values(dictData[10]).forEach((item: any) => {
|
||||
map[item.value] = item.name
|
||||
})
|
||||
}
|
||||
return map
|
||||
})
|
||||
|
||||
const getTypeName = (value: string | number | undefined) => {
|
||||
if (!value) return '-'
|
||||
return typeMap.value[value] || value
|
||||
}
|
||||
|
||||
const getStatusName = (value: string | number | undefined) => {
|
||||
if (!value) return '-'
|
||||
return statusMap.value[value] || value
|
||||
}
|
||||
|
||||
const handleAdd = async (id?: number) => {
|
||||
showEdit.value = true
|
||||
|
|
@ -134,14 +176,14 @@ const handleAdd = async (id?: number) => {
|
|||
const handleEdit = async (data: any) => {
|
||||
showEdit.value = true
|
||||
await nextTick()
|
||||
console.log(data.children)
|
||||
console.log(data.childLocation)
|
||||
editRef.value?.open('edit')
|
||||
editRef.value?.getDetail(data)
|
||||
}
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
await feedback.confirm('确定要删除?')
|
||||
await menuDelete({ id })
|
||||
await deleteLocation({ id })
|
||||
getLists()
|
||||
}
|
||||
|
||||
|
|
@ -153,8 +195,8 @@ const handleExpand = () => {
|
|||
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)
|
||||
if (children[key].childLocation) {
|
||||
toggleExpand(children[key].childLocation!, unfold)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
>
|
||||
<el-option label="全部" value="" />
|
||||
<el-option
|
||||
v-for="(item, index) in dictData"
|
||||
v-for="(item, index) in dictData[7]"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:value="item.value"
|
||||
|
|
|
|||
Loading…
Reference in New Issue