diff --git a/yudao-ui-admin-vue3/src/views/system/menu/index.vue b/yudao-ui-admin-vue3/src/views/system/menu/index.vue index 43f74225d..fdbee6ca5 100644 --- a/yudao-ui-admin-vue3/src/views/system/menu/index.vue +++ b/yudao-ui-admin-vue3/src/views/system/menu/index.vue @@ -3,12 +3,27 @@ import * as MenuApi from '@/api/system/menu' import { MenuVO } from '@/api/system/menu/types' import { useI18n } from '@/hooks/web/useI18n' import { useMessage } from '@/hooks/web/useMessage' +import { IconSelect } from '@/components/Icon' +import { Tooltip } from '@/components/Tooltip' import { required } from '@/utils/formRules.js' import { onMounted, reactive, ref } from 'vue' import { VxeTableInstance } from 'vxe-table' -import { DICT_TYPE } from '@/utils/dict' +import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' import { SystemMenuTypeEnum, CommonStatusEnum } from '@/utils/constants' - +import { + ElRow, + ElCol, + ElForm, + ElFormItem, + ElInput, + ElInputNumber, + ElSelect, + ElTreeSelect, + ElOption, + ElRadioGroup, + ElRadioButton +} from 'element-plus' +import { handleTree } from '@/utils/tree' const { t } = useI18n() // 国际化 const message = useMessage() const xTable = ref() @@ -18,6 +33,7 @@ const actionLoading = ref(false) // 遮罩层 const actionType = ref('') // 操作按钮的类型 const dialogVisible = ref(false) // 是否显示弹出层 const dialogTitle = ref('edit') // 弹出层标题 +const statusOption = ref() // 状态选项 const menuForm = ref({ id: 0, name: '', @@ -33,12 +49,32 @@ const menuForm = ref({ keepAlive: true, createTime: '' }) +const menuProps = { + checkStrictly: true, + children: 'children', + label: 'name', + value: 'id' +} +interface Tree { + id: number + name: string + children?: Tree[] | any[] +} +const menuOptions = ref([]) // 树形结构 +const getTree = async () => { + menuOptions.value = [] + const res = await MenuApi.listSimpleMenusApi() + let menu: Tree = { id: 0, name: '主类目', children: [] } + menu.children = handleTree(res) + menuOptions.value.push(menu) +} // ========== 查询 ========== const queryParams = reactive({ - name: undefined, - status: undefined + name: null, + status: null }) const getList = async () => { + statusOption.value = getIntDictOptions(DICT_TYPE.COMMON_STATUS) tableLoading.value = true const res = await MenuApi.getMenuListApi(queryParams) tableData.value = res @@ -50,6 +86,10 @@ const setDialogTile = (type: string) => { actionType.value = type dialogVisible.value = true } +// 新建操作 +const handleCreate = () => { + setDialogTile('create') +} // 修改操作 const handleUpdate = async (row: MenuVO) => { // 设置数据 @@ -73,6 +113,16 @@ const rules = reactive({ path: [required], status: [required] }) +// 查询操作 +const handleQuery = async () => { + await getList() +} +// 重置操作 +const resetQuery = async () => { + queryParams.name = null + queryParams.status = null + await getList() +} // 保存操作 const isExternal = (path: string) => { return /^(https?:|mailto:|tel:)/.test(path) @@ -111,12 +161,41 @@ const submitForm = async () => { } onMounted(async () => { await getList() + getTree() }) +