Compare commits
No commits in common. 'e0ca17a4b7f83862268b7af5ddd9175c84c34009' and 'd8783898f4da814b7fe25b9392d02c10d2878f7a' have entirely different histories.
e0ca17a4b7
...
d8783898f4
@ -1,73 +0,0 @@ |
|||||||
// | ------------------------------------------------------------
|
|
||||||
// | @版本: version 0.1
|
|
||||||
// | @创建人: 【Nie-x7129】
|
|
||||||
// | @E-mail: x71291@outlook.com
|
|
||||||
// | @所在项目: hoto-auth-vue3
|
|
||||||
// | @文件描述: index.js -
|
|
||||||
// | @创建时间: 2024-07-11 14:26
|
|
||||||
// | @更新时间: 2024-07-11 14:26
|
|
||||||
// | @修改记录:
|
|
||||||
// | -*-*-*- (时间--修改人--修改说明) -*-*-*-
|
|
||||||
// | =
|
|
||||||
// | ------------------------------------------------------------
|
|
||||||
|
|
||||||
import HTTP from '@/api/http.js'; |
|
||||||
import { PageData } from '@utils/DefaultData.js'; |
|
||||||
|
|
||||||
export const CoreMenu = { |
|
||||||
/** |
|
||||||
* Name: createMenu |
|
||||||
* Desc: 新增菜单 |
|
||||||
* Time: 2024-07-11 14:33:50 - |
|
||||||
* */ |
|
||||||
createMenu: async (data) => { |
|
||||||
return HTTP({ |
|
||||||
method: 'post', |
|
||||||
url: '/coremenu', |
|
||||||
data, |
|
||||||
}); |
|
||||||
}, |
|
||||||
|
|
||||||
/** |
|
||||||
* Name: getMenu |
|
||||||
* Desc: 获取菜单的分页或列表 |
|
||||||
* Time: 2024-07-11 14:33:54 - |
|
||||||
* */ |
|
||||||
getMenu: async ( |
|
||||||
params = { |
|
||||||
...PageData, |
|
||||||
serviceInfo: undefined, |
|
||||||
}, |
|
||||||
) => { |
|
||||||
return HTTP({ |
|
||||||
method: 'get', |
|
||||||
url: '/coremenu', |
|
||||||
params, |
|
||||||
}); |
|
||||||
}, |
|
||||||
|
|
||||||
/** |
|
||||||
* Name: removeMenu |
|
||||||
* Desc: 删除菜单 |
|
||||||
* Time: 2024-07-11 14:33:59 - |
|
||||||
* */ |
|
||||||
removeMenu: async (menuId) => { |
|
||||||
return HTTP({ |
|
||||||
method: 'delete', |
|
||||||
url: `/coremenu/${menuId}`, |
|
||||||
}); |
|
||||||
}, |
|
||||||
|
|
||||||
/** |
|
||||||
* Name: updateMenu |
|
||||||
* Desc: 编辑菜单 |
|
||||||
* Time: 2024-07-11 14:34:03 - |
|
||||||
* */ |
|
||||||
updateMenu: async (menuId, data) => { |
|
||||||
return HTTP({ |
|
||||||
method: 'patch', |
|
||||||
url: `/coremenu/${menuId}`, |
|
||||||
data, |
|
||||||
}); |
|
||||||
}, |
|
||||||
}; |
|
@ -1,28 +0,0 @@ |
|||||||
<script setup name="TablePagination"> |
|
||||||
defineOptions({ |
|
||||||
name: 'TablePagination', |
|
||||||
}); |
|
||||||
const props = defineProps({ |
|
||||||
data: { |
|
||||||
type: Object, |
|
||||||
required: true, |
|
||||||
}, |
|
||||||
}); |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<APagination |
|
||||||
v-model:current="props.data.pageInfo.pageNumber" |
|
||||||
:total="props.data.total" |
|
||||||
:pageSize="props.data.pageInfo.pageSize" |
|
||||||
:pageSizeOptions="[10, 20, 50, 100, 200]" |
|
||||||
:showSizeChanger="true" |
|
||||||
:showQuickJumper="true" |
|
||||||
:showTotal="(total) => `共 ${total} 条`" |
|
||||||
@change="props.data.handlePageChange" |
|
||||||
/> |
|
||||||
</template> |
|
||||||
|
|
||||||
<style scoped> |
|
||||||
|
|
||||||
</style> |
|
@ -1,212 +0,0 @@ |
|||||||
// | ------------------------------------------------------------
|
|
||||||
// | @版本: version 0.1
|
|
||||||
// | @创建人: 【Nie-x7129】
|
|
||||||
// | @E-mail: x71291@outlook.com
|
|
||||||
// | @所在项目: hoto-auth-vue3
|
|
||||||
// | @文件描述: dataModal.js -
|
|
||||||
// | @创建时间: 2024-07-09 14:47
|
|
||||||
// | @更新时间: 2024-07-09 14:47
|
|
||||||
// | @修改记录:
|
|
||||||
// | -*-*-*- (时间--修改人--修改说明) -*-*-*-
|
|
||||||
// | =
|
|
||||||
// | ------------------------------------------------------------
|
|
||||||
|
|
||||||
import { IconPool } from '@/components/AntDesignVue/Icon/index.js'; |
|
||||||
import { h } from 'vue'; |
|
||||||
|
|
||||||
export class MenuFormType { |
|
||||||
constructor() { |
|
||||||
return new Object({ |
|
||||||
// 上级菜单
|
|
||||||
pid: undefined, |
|
||||||
// 接口路径
|
|
||||||
apiPath: '', |
|
||||||
// 页面路由
|
|
||||||
webPath: '', |
|
||||||
// 页面组件路径
|
|
||||||
webComponentPath: '', |
|
||||||
// 菜单名称
|
|
||||||
menuName: '', |
|
||||||
// 菜单描述
|
|
||||||
menuDesc: '', |
|
||||||
// 菜单类型
|
|
||||||
menuType: undefined, |
|
||||||
// 菜单图标
|
|
||||||
menuIcon: undefined, |
|
||||||
// 是否链接到外部
|
|
||||||
isFrame: 0, |
|
||||||
// 是否可见
|
|
||||||
isVisible: 1, |
|
||||||
// 是否激活
|
|
||||||
isActivate: 1, |
|
||||||
// 排序
|
|
||||||
orderNum: 0, |
|
||||||
// 所属服务
|
|
||||||
serviceOf: undefined, |
|
||||||
}); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// 查询数据
|
|
||||||
export class MenuSearchType { |
|
||||||
constructor() { |
|
||||||
return new Object({ |
|
||||||
// 每页数量
|
|
||||||
pageSize: 10, |
|
||||||
// 页码
|
|
||||||
pageNumber: 1, |
|
||||||
// 是否是列表
|
|
||||||
isList: false, |
|
||||||
// 排序方式
|
|
||||||
isAsc: false, |
|
||||||
// 菜单信息
|
|
||||||
menuInfo: undefined, |
|
||||||
// 菜单类型
|
|
||||||
menuType: undefined, |
|
||||||
// 是否链接到外部
|
|
||||||
isFrame: undefined, |
|
||||||
// 是否可见
|
|
||||||
isVisible: undefined, |
|
||||||
// 是否激活
|
|
||||||
isActivate: undefined, |
|
||||||
// 是否是原始数据
|
|
||||||
root: undefined, |
|
||||||
// 所属服务
|
|
||||||
serviceKey: undefined, |
|
||||||
// 状态
|
|
||||||
status: undefined, |
|
||||||
// 根据pid查
|
|
||||||
hierarchy: [], |
|
||||||
}); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// 表单规则
|
|
||||||
export class MenuFormRulesType { |
|
||||||
constructor() { |
|
||||||
return new Object({}); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Env表格列数据
|
|
||||||
export class MenuTableColumnType { |
|
||||||
constructor() { |
|
||||||
return new Object({ |
|
||||||
index: { |
|
||||||
title: '序号', |
|
||||||
key: 'index', |
|
||||||
width: 70, // 你可以根据需要设置列宽
|
|
||||||
customRender: ({ text, record, index, column }) => `${index + 1}`, // 使用索引 + 1 来显示序号
|
|
||||||
}, |
|
||||||
menuName: { |
|
||||||
title: '菜单名称', |
|
||||||
dataIndex: 'menuName', |
|
||||||
key: 'menuName', |
|
||||||
}, |
|
||||||
menuIcon: { |
|
||||||
title: '图标', |
|
||||||
dataIndex: 'menuIcon', |
|
||||||
customRender: ({ text, record, index, column }) => (text && IconPool[text] ? h(IconPool[text], { style: { fontSize: '20px' } }) : h('div', text)), |
|
||||||
key: 'menuIcon', |
|
||||||
}, |
|
||||||
menuType: { |
|
||||||
title: '类型', |
|
||||||
dataIndex: 'menuType', |
|
||||||
key: 'menuType', |
|
||||||
customRender: ({ text, record, index, column }) => record.menuTypeName, |
|
||||||
}, |
|
||||||
apiPath: { |
|
||||||
title: '接口路径', |
|
||||||
dataIndex: 'apiPath', |
|
||||||
key: 'apiPath', |
|
||||||
}, |
|
||||||
// 页面路由
|
|
||||||
webPath: { |
|
||||||
title: '页面路由', |
|
||||||
dataIndex: 'webPath', |
|
||||||
key: 'webPath', |
|
||||||
}, |
|
||||||
// 页面组件路径
|
|
||||||
webComponentPath: { |
|
||||||
title: '组件路径', |
|
||||||
dataIndex: 'webComponentPath', |
|
||||||
key: 'webComponentPath', |
|
||||||
}, |
|
||||||
isFrame: { |
|
||||||
title: '外链', |
|
||||||
dataIndex: 'isFrame', |
|
||||||
key: 'isFrame', |
|
||||||
customRender: ({ text, record, index, column }) => (text == '1' ? '是' : '否'), |
|
||||||
}, |
|
||||||
isVisible: { |
|
||||||
title: '可见', |
|
||||||
dataIndex: 'isVisible', |
|
||||||
key: 'isVisible', |
|
||||||
customRender: ({ text, record, index, column }) => (text == '1' ? '是' : '否'), |
|
||||||
}, |
|
||||||
isActivate: { |
|
||||||
title: '激活', |
|
||||||
dataIndex: 'isActivate', |
|
||||||
key: 'isActivate', |
|
||||||
customRender: ({ text, record, index, column }) => (text == '1' ? '是' : '否'), |
|
||||||
}, |
|
||||||
serviceKey: { |
|
||||||
title: '所属服务', |
|
||||||
dataIndex: 'serviceKey', |
|
||||||
key: 'serviceKey', |
|
||||||
customRender: ({ text, record, index, column }) => record.serviceName, |
|
||||||
}, |
|
||||||
haveChildren: { |
|
||||||
title: '子项', |
|
||||||
dataIndex: 'haveChildren', |
|
||||||
key: 'haveChildren', |
|
||||||
width: '50px', |
|
||||||
}, |
|
||||||
createtime: { |
|
||||||
title: '创建时间', |
|
||||||
dataIndex: 'createtime', |
|
||||||
key: 'createtime', |
|
||||||
width: '140px', |
|
||||||
sorter: true, |
|
||||||
}, |
|
||||||
createName: { |
|
||||||
title: '创建人', |
|
||||||
dataIndex: 'createName', |
|
||||||
key: 'createName', |
|
||||||
}, |
|
||||||
updatetime: { |
|
||||||
title: '更新时间', |
|
||||||
dataIndex: 'updatetime', |
|
||||||
key: 'updatetime', |
|
||||||
maxWidth: '140px', |
|
||||||
minWidth: '140px', |
|
||||||
}, |
|
||||||
updateName: { |
|
||||||
title: '更新人', |
|
||||||
dataIndex: 'updateName', |
|
||||||
key: 'updateName', |
|
||||||
}, |
|
||||||
action: { |
|
||||||
title: '操作', |
|
||||||
dataIndex: 'action', |
|
||||||
key: 'action', |
|
||||||
width: 100, |
|
||||||
align: 'center', |
|
||||||
}, |
|
||||||
}); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
// Env可选表格列
|
|
||||||
export class MenuTableColumnChooseType { |
|
||||||
constructor() { |
|
||||||
const excludeColumn = ['updateName', 'updatetime', 'createName']; |
|
||||||
const tableColumn = new MenuTableColumnType(); |
|
||||||
return Object.keys(tableColumn).map((i) => ({ |
|
||||||
title: tableColumn[i].title, |
|
||||||
key: tableColumn[i].key, |
|
||||||
status: excludeColumn.includes(i) ? false : true, |
|
||||||
})); |
|
||||||
} |
|
||||||
} |
|
@ -1,244 +0,0 @@ |
|||||||
<script setup name="MenuPage"> |
|
||||||
import { onMounted, reactive, watch } from 'vue'; |
|
||||||
import { MenuFormType, MenuSearchType, MenuTableColumnChooseType } from './DataModal.js'; |
|
||||||
import MenuForm from './MenuForm.vue'; |
|
||||||
import MenuTable from './MenuTable.vue'; |
|
||||||
import { useMessage } from 'naive-ui'; |
|
||||||
import { useBaseDataStore } from '@/stores/baseData.js'; |
|
||||||
import TablePagination from '@/components/AntDesignVue/CustomAntDesignVue/TablePagination/index.vue'; |
|
||||||
import { CoreMenu } from '@/api/index.js'; |
|
||||||
import MenuTree from '@/views/Auth/Menu/MenuTree.vue'; |
|
||||||
const baseDataStore = useBaseDataStore(); |
|
||||||
const Message = useMessage(); |
|
||||||
defineOptions({ |
|
||||||
name: 'MenuPage', |
|
||||||
}); |
|
||||||
// 待查询次数 |
|
||||||
let searchCount = 0; |
|
||||||
|
|
||||||
|
|
||||||
// ! 表单数据 |
|
||||||
const formData = reactive({ |
|
||||||
// 弹窗名称 |
|
||||||
modelName: '创建菜单', |
|
||||||
// 弹窗状态 |
|
||||||
status: false, |
|
||||||
// 编辑状态 |
|
||||||
isUpdate: false, |
|
||||||
// 菜单ID |
|
||||||
menuId: undefined, |
|
||||||
formData: new MenuFormType(), |
|
||||||
// 确认 |
|
||||||
handleAck: handleCreateAck, |
|
||||||
// 取消 |
|
||||||
handleCancel: () => clearFormData() |
|
||||||
}); |
|
||||||
// 表格数据 |
|
||||||
const tableData = reactive({ |
|
||||||
dataSource: [], |
|
||||||
pageInfo: new MenuSearchType(), |
|
||||||
searchBase:{ |
|
||||||
menuType: [] |
|
||||||
}, |
|
||||||
total: 0, |
|
||||||
methods: { |
|
||||||
handleTableChange, |
|
||||||
handleRemoveAck, |
|
||||||
handleUpdate, |
|
||||||
}, |
|
||||||
handlePageChange, |
|
||||||
columnList: new MenuTableColumnChooseType(), |
|
||||||
}); |
|
||||||
// @1确认添加 |
|
||||||
async function handleCreateAck(data) { |
|
||||||
await CoreMenu.createMenu(data); |
|
||||||
Message.success('添加菜单成功!'); |
|
||||||
clearSearchData(); |
|
||||||
clearFormData(); |
|
||||||
getPage(); |
|
||||||
baseDataStore.getMenuList(); |
|
||||||
} |
|
||||||
// @2确认删除 |
|
||||||
async function handleRemoveAck(data) { |
|
||||||
await CoreMenu.removeMenu(data.menuId); |
|
||||||
Message.success('删除菜单成功!'); |
|
||||||
if (tableData.dataSource.length == 1 && tableData.pageInfo.pageNumber > 1) { |
|
||||||
tableData.pageInfo.pageNumber--; |
|
||||||
} |
|
||||||
getPage(); |
|
||||||
baseDataStore.getMenuList(); |
|
||||||
} |
|
||||||
// @3更新数据 todo |
|
||||||
async function handleUpdate(data) { |
|
||||||
formData.modelName = '更新变量'; |
|
||||||
formData.status = true; |
|
||||||
formData.isUpdate = true; |
|
||||||
formData.menuId = data.menuId; |
|
||||||
formData.handleAck = handleUpdateAck; |
|
||||||
Object.keys(formData.formData).forEach(key => { |
|
||||||
formData.formData[key] = data[key]; |
|
||||||
}); |
|
||||||
} |
|
||||||
// @4确认更新数据 todo |
|
||||||
async function handleUpdateAck(data) { |
|
||||||
if(!data.pid){ |
|
||||||
data.pid = 0; |
|
||||||
} |
|
||||||
await CoreMenu.updateMenu(formData.menuId, data); |
|
||||||
Message.success('更新变量成功!'); |
|
||||||
clearFormData(); |
|
||||||
getPage(); |
|
||||||
baseDataStore.getMenuList(); |
|
||||||
} |
|
||||||
// @5监听筛选 todo |
|
||||||
watch(tableData.pageInfo, () => { |
|
||||||
getPage(); |
|
||||||
}); |
|
||||||
// @6获取表格数据 |
|
||||||
async function getPage() { |
|
||||||
if (searchCount === 0) { |
|
||||||
searchCount++; |
|
||||||
setTimeout(() => { |
|
||||||
searchCount = 0; |
|
||||||
}, 500); |
|
||||||
} else { |
|
||||||
searchCount++; |
|
||||||
return; |
|
||||||
} |
|
||||||
const pageInfo = {...tableData.pageInfo}; |
|
||||||
pageInfo.hierarchy = pageInfo.hierarchy.length > 0 ? pageInfo.hierarchy[0] : undefined; |
|
||||||
const resd = await CoreMenu.getMenu(pageInfo); |
|
||||||
tableData.dataSource = resd.rowData; |
|
||||||
tableData.total = Number(resd.total); |
|
||||||
} |
|
||||||
// @7页码变动 |
|
||||||
function handlePageChange(page, pageSize) { |
|
||||||
tableData.pageInfo.pageSize = pageSize; |
|
||||||
tableData.pageInfo.pageNumber = page; |
|
||||||
} |
|
||||||
// @7表格筛选变动 |
|
||||||
function handleTableChange(page, filter, sorter) { |
|
||||||
if (sorter.order == 'ascend') { |
|
||||||
tableData.pageInfo.isAsc = true; |
|
||||||
} else if (sorter.order == 'descend') { |
|
||||||
tableData.pageInfo.isAsc = false; |
|
||||||
} else { |
|
||||||
tableData.pageInfo.isAsc = undefined; |
|
||||||
} |
|
||||||
} |
|
||||||
// @8清除筛选条件 |
|
||||||
function clearSearchData() { |
|
||||||
const newPageInfo = new MenuSearchType(); |
|
||||||
Object.keys(tableData.pageInfo).forEach((key) => { |
|
||||||
tableData.pageInfo[key] = newPageInfo[key]; |
|
||||||
}); |
|
||||||
} |
|
||||||
// @9清除编辑数据 |
|
||||||
function clearFormData() { |
|
||||||
formData.modelName = '创建变量'; |
|
||||||
formData.isUpdate = false; |
|
||||||
formData.status = false; |
|
||||||
formData.menuId = undefined; |
|
||||||
formData.handleAck = handleCreateAck; |
|
||||||
const newFormData = new MenuFormType(); |
|
||||||
Object.keys(formData.formData).forEach((key) => { |
|
||||||
formData.formData[key] = newFormData[key]; |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
onMounted(() => { |
|
||||||
window.pino.deb('@1 MenuPage Mounted!'); |
|
||||||
getPage(); |
|
||||||
// ! 检测获取菜单类型列表 |
|
||||||
if (baseDataStore.state.menuTypeList?.length == 0) { |
|
||||||
baseDataStore.getMenuTypeList(); |
|
||||||
} |
|
||||||
|
|
||||||
// ! 检测获取服务列表 |
|
||||||
if (baseDataStore.state.serviceList?.length == 0) { |
|
||||||
baseDataStore.getServiceList(); |
|
||||||
} |
|
||||||
}); |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<WorkContainer> |
|
||||||
<template #header> |
|
||||||
<ASpace> |
|
||||||
<CreateAntdButton name="菜单" @click="formData.status = true" /> |
|
||||||
<TableColumChoose v-model:columnList="tableData.columnList" /> |
|
||||||
<AInputSearch v-model:value="tableData.pageInfo.menuInfo" placeholder="菜单名称/路径" style="width: 200px" @search="getPage" /> |
|
||||||
<ASelect |
|
||||||
style="width: 150px" |
|
||||||
placeholder="请选择所属服务" |
|
||||||
allowClear |
|
||||||
v-model:value="tableData.pageInfo.serviceKey" |
|
||||||
:options="baseDataStore.state.serviceList" |
|
||||||
:field-names="{ label: 'serviceName', value: 'serviceKey', options: 'children' }" |
|
||||||
/> |
|
||||||
<ASelect |
|
||||||
style="width: 150px" |
|
||||||
placeholder="请选择菜单类型" |
|
||||||
allowClear |
|
||||||
v-model:value="tableData.pageInfo.menuType" |
|
||||||
:options="baseDataStore.state.menuTypeTree" |
|
||||||
/> |
|
||||||
<ASelect style="width: 150px" placeholder="请选择可见状态" allowClear v-model:value="tableData.pageInfo.isVisible"> |
|
||||||
<ASelectOption :value="true">可见</ASelectOption> |
|
||||||
<ASelectOption :value="false">不可见</ASelectOption> |
|
||||||
</ASelect> |
|
||||||
<ASelect style="width: 150px" placeholder="请选择激活状态" allowClear v-model:value="tableData.pageInfo.isActivate"> |
|
||||||
<ASelectOption :value="true">激活</ASelectOption> |
|
||||||
<ASelectOption :value="false">未激活</ASelectOption> |
|
||||||
</ASelect> |
|
||||||
<ASelect style="width: 170px" placeholder="请选择是否是外部链接" allowClear v-model:value="tableData.pageInfo.isFrame"> |
|
||||||
<ASelectOption :value="true">外部链接</ASelectOption> |
|
||||||
<ASelectOption :value="false">非外部链接</ASelectOption> |
|
||||||
</ASelect> |
|
||||||
</ASpace> |
|
||||||
</template> |
|
||||||
<template #main> |
|
||||||
<div class="menuBody"> |
|
||||||
<div class="tree"> |
|
||||||
<MenuTree v-model:selectedKeys="tableData.pageInfo.hierarchy"/> |
|
||||||
</div> |
|
||||||
<div class="table"> |
|
||||||
<MenuTable :tableData="tableData"/> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
</template> |
|
||||||
<template #footer> |
|
||||||
<TablePagination :data="tableData"/> |
|
||||||
</template> |
|
||||||
<template #modal> |
|
||||||
<AModal v-model:open="formData.status" :title="formData.modelName" :centered="true" :maskClosable="false" :destroyOnClose="true" :onCancel="clearFormData"> |
|
||||||
<MenuForm :data="formData"/> |
|
||||||
<template #footer></template> |
|
||||||
</AModal> |
|
||||||
</template> |
|
||||||
</WorkContainer> |
|
||||||
</template> |
|
||||||
|
|
||||||
<style scoped> |
|
||||||
.menuBody { |
|
||||||
position: relative; |
|
||||||
height: 100%; |
|
||||||
width: 100%; |
|
||||||
display: flex; |
|
||||||
& > div.tree { |
|
||||||
position: relative; |
|
||||||
flex-shrink: 0; |
|
||||||
max-height: 100%; |
|
||||||
width: 300px; |
|
||||||
border-right: 1px solid #cdcdcd; |
|
||||||
padding-right: 5px; |
|
||||||
} |
|
||||||
& > div.table { |
|
||||||
position: relative; |
|
||||||
flex: 1; |
|
||||||
max-height: 100%; |
|
||||||
padding-left: 5px; |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
@ -1,34 +0,0 @@ |
|||||||
<script setup name="MenuTree"> |
|
||||||
defineOptions({ |
|
||||||
name: 'MenuTree', |
|
||||||
}); |
|
||||||
import { useBaseDataStore } from '@/stores/baseData.js'; |
|
||||||
import { onMounted, reactive } from 'vue'; |
|
||||||
const baseDataStore = useBaseDataStore(); |
|
||||||
|
|
||||||
|
|
||||||
// ! 树字段重置 |
|
||||||
const fieldNames = reactive({ |
|
||||||
children:'children', title:'label', key:'id' |
|
||||||
}); |
|
||||||
|
|
||||||
// 当页面加载时 |
|
||||||
onMounted(() => { |
|
||||||
window.pino.info('@4 MenuTree Mounted'); |
|
||||||
// ! 检测获取字典列表 |
|
||||||
if (baseDataStore.state.menuList?.length == 0) { |
|
||||||
baseDataStore.getMenuList(); |
|
||||||
} |
|
||||||
}); |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<ATree |
|
||||||
:treeData="baseDataStore.state.menuTree" |
|
||||||
:show-line="true" |
|
||||||
show-icon |
|
||||||
:fieldNames="fieldNames" |
|
||||||
/> |
|
||||||
</template> |
|
||||||
|
|
||||||
<style scoped></style> |
|
@ -0,0 +1,16 @@ |
|||||||
|
// | ------------------------------------------------------------
|
||||||
|
// | @版本: version 0.1
|
||||||
|
// | @创建人: 【Nie-x7129】
|
||||||
|
// | @E-mail: x71291@outlook.com
|
||||||
|
// | @所在项目: hoto-auth-vue3
|
||||||
|
// | @文件描述: dataModal.js -
|
||||||
|
// | @创建时间: 2024-07-09 14:47
|
||||||
|
// | @更新时间: 2024-07-09 14:47
|
||||||
|
// | @修改记录:
|
||||||
|
// | -*-*-*- (时间--修改人--修改说明) -*-*-*-
|
||||||
|
// | =
|
||||||
|
// | ------------------------------------------------------------
|
||||||
|
|
||||||
|
export const formType = new Object({ |
||||||
|
|
||||||
|
}) |
@ -0,0 +1,64 @@ |
|||||||
|
<script setup name="MenuPage"> |
||||||
|
import { onMounted, reactive } from 'vue'; |
||||||
|
|
||||||
|
defineOptions({ |
||||||
|
name: 'MenuPage', |
||||||
|
}); |
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
window.pino.info('MenuPage Mounted!'); |
||||||
|
}); |
||||||
|
// ! 表单数据 |
||||||
|
const formData = reactive({ |
||||||
|
// 弹窗名称 |
||||||
|
modelName: '创建菜单', |
||||||
|
// 弹窗状态 |
||||||
|
status: false, |
||||||
|
// 编辑状态 |
||||||
|
isUpdate: false, |
||||||
|
// 字典ID |
||||||
|
dictId: undefined, |
||||||
|
}); |
||||||
|
// ! 清理输入项表单 |
||||||
|
function clearFormData() {} |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<WorkContainer> |
||||||
|
<template #header> |
||||||
|
<ASpace> |
||||||
|
<CreateAntdButton name="菜单" @click="formData.status = true" /> |
||||||
|
</ASpace> |
||||||
|
</template> |
||||||
|
<template #main></template> |
||||||
|
<template #footer></template> |
||||||
|
<template #modal> |
||||||
|
<AModal v-model:open="formData.status" :title="formData.modelName" :centered="true" :maskClosable="false" :destroyOnClose="true" :onCancel="clearFormData"> |
||||||
|
<template #footer></template> |
||||||
|
</AModal> |
||||||
|
</template> |
||||||
|
</WorkContainer> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.menuBody { |
||||||
|
position: relative; |
||||||
|
height: 100%; |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
& > div.tree { |
||||||
|
position: relative; |
||||||
|
flex-shrink: 0; |
||||||
|
max-height: 100%; |
||||||
|
width: 300px; |
||||||
|
border-right: 1px solid #cdcdcd; |
||||||
|
padding-right: 5px; |
||||||
|
} |
||||||
|
& > div.table { |
||||||
|
position: relative; |
||||||
|
flex: 1; |
||||||
|
max-height: 100%; |
||||||
|
padding-left: 5px; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
Loading…
Reference in new issue