| | |
| | | <AppContainer> |
| | | <ProTableQueryFilterBar @on-reset="handleReset"> |
| | | <template #query> |
| | | <QueryFilterItem> |
| | | <FieldRadio |
| | | v-model="state.clientType" |
| | | :value-enum="EnumClientTypeText" |
| | | buttonStyle |
| | | @change="getAllModule()" |
| | | /> |
| | | </QueryFilterItem> |
| | | <QueryFilterItem> |
| | | <FieldRadio |
| | | v-model="state.userType" |
| | | :value-enum="EnumUserTypeText" |
| | | buttonStyle |
| | | @change="getAllModule()" |
| | | /> |
| | | </QueryFilterItem> |
| | | <div class="query-filter-list-item"> |
| | | <SearchInput |
| | | v-model="state.searchValue" |
| | |
| | | row.type=v?EnumMenuType.Menu:EnumMenuType.Page |
| | | }" |
| | | inline-prompt |
| | | @change="(v: number) => handleChangeStatus(v, row, 'isMenu')" |
| | | @change="(v: boolean) => handleChangeStatus(v, row, 'isMenu')" |
| | | ></el-switch> |
| | | </template> |
| | | <template v-else-if="column.property === 'enabledMark'"> |
| | | <el-switch |
| | | :modelValue="!row.isDisabled" |
| | | :onUpdate:modelValue="(v: boolean) => row.isDisabled =!v" |
| | | @change="(v: number) => handleChangeStatus(v, row, 'enabledMark')" |
| | | @change="(v: boolean) => handleChangeStatus(v, row, 'enabledMark')" |
| | | ></el-switch> |
| | | </template> |
| | | </template> |
| | |
| | | LoadingLayout, |
| | | OperationBtnType, |
| | | SearchInput, |
| | | QueryFilterItem, |
| | | FieldRadio, |
| | | } from '@bole-core/components'; |
| | | import { ModuleUtils, TreeModuleDtoGroupDto, Message, TreeStore, flattenTree } from '@/utils'; |
| | | import { TableInstance } from 'element-plus'; |
| | |
| | | FastBtn, |
| | | ModuleColumns, |
| | | EnumMenuType, |
| | | EnumClientTypeText, |
| | | EnumUserTypeText, |
| | | } from '@/constants'; |
| | | import SubModuleEditDrawer from './components/SubModuleEditDrawer.vue'; |
| | | import AddOrEditModuleDialog from './components/AddOrEditModuleDialog.vue'; |
| | |
| | | import _ from 'lodash'; |
| | | import { useReset } from '@bole-core/core'; |
| | | import * as menuServices from '@/services/api/menu'; |
| | | import { DrawerTableDataItem } from './types'; |
| | | |
| | | defineOptions({ |
| | | name: 'ModuleManage', |
| | |
| | | const BaseState = { |
| | | loading: true, |
| | | searchValue: '', |
| | | group: 'default', |
| | | userType: EnumUserType.Operation, |
| | | clientType: EnumClientType.PcWeb, |
| | | }; |
| | | const state = reactive({ ...BaseState }); |
| | | const moduleTreeStore = ref<TreeStore<TreeModuleDtoGroupDto>>(); |
| | |
| | | //drawer |
| | | const drawerVisible = ref(false); |
| | | const currentDrawerModule = ref<API.GetMenuQueryResult>({}); |
| | | |
| | | const drawerState = reactive<{ |
| | | type: SubModuleType; |
| | | tableData: ValueOf<API.AllSubModule>; |
| | | tableData: DrawerTableDataItem[]; |
| | | }>({ |
| | | type: SubModuleType.PageButton, |
| | | tableData: [], |
| | |
| | | try { |
| | | let res = await menuServices.getMenus( |
| | | { |
| | | userType: EnumUserType.Operation, |
| | | clientType: EnumClientType.PcWeb, |
| | | userType: state.userType, |
| | | clientType: state.clientType, |
| | | }, |
| | | { |
| | | showLoading: false, |
| | |
| | | } |
| | | type StatusEventType = { |
| | | isCache: boolean; |
| | | isMenu: number; |
| | | enabledMark: number; |
| | | isMenu: boolean; |
| | | enabledMark: boolean; |
| | | }; |
| | | async function handleChangeStatus<T extends keyof StatusEventType>( |
| | | value: StatusEventType[T], |
| | | value: boolean, |
| | | data: TreeModuleDtoGroupDto, |
| | | statusType: T |
| | | ) { |
| | | try { |
| | | // let params = { |
| | | // ..._.omit(data, ['children', 'parentNode']), |
| | | // [statusType]: value, |
| | | // }; |
| | | // await baseModuleServices.addOrEditModule(params); |
| | | } catch (error) { |
| | | Message.errorMessage('操作失败'); |
| | | } |
| | | let params: API.SetMenuSwitchCommand = { |
| | | ids: [data.id], |
| | | type: data.type, |
| | | isDisabled: data.isDisabled, |
| | | isCache: data.isCache, |
| | | }; |
| | | if (statusType === 'isMenu') { |
| | | params.type = value ? EnumMenuType.Menu : EnumMenuType.Page; |
| | | } else if (statusType === 'isCache') { |
| | | params.isCache = value; |
| | | } else { |
| | | params.isDisabled = !value; |
| | | } |
| | | await menuServices.setMenuSwitch(params); |
| | | } catch (error) {} |
| | | } |
| | | |
| | | async function getMenu(id: string) { |
| | |
| | | async function handleAddOrEditModule() { |
| | | try { |
| | | let params: API.SaveMenuCommand = { |
| | | userType: EnumUserType.Operation, |
| | | clientType: EnumClientType.PcWeb, |
| | | userType: state.userType, |
| | | clientType: state.clientType, |
| | | code: editForm.enCode, |
| | | name: editForm.name, |
| | | type: editForm.isMenu ? EnumMenuType.Menu : EnumMenuType.Page, |
| | |
| | | async function saveMenu(params: API.SaveMenuCommand) { |
| | | try { |
| | | const res = await menuServices.saveMenu(params); |
| | | if (res) { |
| | | Message.successMessage('保存成功'); |
| | | getAllModule(); |
| | | editDialogFormVisible.value = false; |
| | | return res; |
| | | } |
| | | return res; |
| | | } catch (error) {} |
| | | } |
| | | |
| | |
| | | async function openDrawer(module: TreeModuleDtoGroupDto, type: SubModuleType) { |
| | | try { |
| | | drawerState.type = type; |
| | | currentDrawerModule.value = await getMenu(module.id); |
| | | await nextTick(); |
| | | getBaseModuleGetAllSubModule(module, type); |
| | | } catch (error) {} |
| | | } |
| | | async function getBaseModuleGetAllSubModule(module: TreeModuleDtoGroupDto, type: SubModuleType) { |
| | | try { |
| | | const defaultGroup = currentDrawerModule.value.groups.find((g) => g.group === 'default') ?? {}; |
| | | const menu = await getMenu(module.id); |
| | | currentDrawerModule.value = menu; |
| | | const currentGroup = menu.groups.find((g) => g.group === state.group) ?? {}; |
| | | if (type === SubModuleType.Column) { |
| | | drawerState.tableData = defaultGroup.fields ?? []; |
| | | drawerState.tableData = (currentGroup.fields ?? []).map((f) => ({ |
| | | enCode: f.code, |
| | | name: f.name, |
| | | sortCode: f.sort, |
| | | width: f.width, |
| | | isEdit: false, |
| | | isShow: false, |
| | | id: f.id, |
| | | })); |
| | | } else { |
| | | drawerState.tableData = |
| | | defaultGroup.buttonLocations?.find((b) => b.location === SubModuleKey[type])?.buttons ?? []; |
| | | drawerState.tableData = ( |
| | | currentGroup.buttonLocations?.find((b) => b.location === SubModuleKey[type])?.buttons ?? [] |
| | | ).map((b) => ({ |
| | | enCode: b.code, |
| | | name: b.name, |
| | | sortCode: b.sort, |
| | | width: b.width, |
| | | isEdit: false, |
| | | isShow: false, |
| | | id: b.id, |
| | | })); |
| | | } |
| | | drawerVisible.value = true; |
| | | } catch (error) {} |
| | |
| | | enCode: '', |
| | | name: '', |
| | | sortCode: sortCode, |
| | | width: 0, |
| | | width: 0 as any as string, |
| | | isEdit: true, |
| | | apiName: '', |
| | | realColumn: '', |
| | | // apiName: '', |
| | | // realColumn: '', |
| | | isShow: true, |
| | | }; |
| | | drawerState.tableData?.push(baseData); |
| | | } |
| | | function getDefaultSortCode() { |
| | | return drawerState.tableData.length > 0 |
| | | ? drawerState.tableData[drawerState.tableData.length - 1].sort + 1 |
| | | ? drawerState.tableData[drawerState.tableData.length - 1].sortCode + 1 |
| | | : 0; |
| | | } |
| | | function handleBatchAddColumn(keys: string[]) { |
| | |
| | | enCode: key, |
| | | name: '', |
| | | sortCode: sortCode + index, |
| | | width: 0, |
| | | width: 0 as any as string, |
| | | isEdit: true, |
| | | })); |
| | | drawerState.tableData?.push(...baseDataList); |
| | | } |
| | | function handleAddFastBtn(fastBtn: FastBtn) { |
| | | let subModule: API.ModuleButtonDto | API.ModuleColumnDto = { |
| | | let subModule: DrawerTableDataItem = { |
| | | enCode: fastBtn.enCode, |
| | | name: fastBtn.name, |
| | | sortCode: getDefaultSortCode(), |
| | |
| | | } |
| | | handleSaveSubModule(subModule); |
| | | } |
| | | async function handleSaveSubModule(subModule: API.ModuleButtonDto | API.ModuleColumnDto) { |
| | | async function handleSaveSubModule(subModule: DrawerTableDataItem) { |
| | | try { |
| | | let params = { |
| | | moduleId: currentDrawerModule.value.id, |
| | | enCode: subModule.enCode, |
| | | let params: API.SaveMenuFieldCommand = { |
| | | parentId: currentDrawerModule.value.id, |
| | | code: subModule.enCode, |
| | | name: subModule.name, |
| | | sortCode: subModule.sortCode, |
| | | group: state.group, |
| | | // location: 'string', |
| | | width: subModule.width, |
| | | sort: subModule.sortCode, |
| | | }; |
| | | if (subModule.id) { |
| | | //@ts-ignore |
| | | params.id = subModule.id; |
| | | } |
| | | if (drawerState.type === SubModuleType.Column) { |
| | | const _subModule = subModule as API.ModuleColumnDto; |
| | | params = { |
| | | ...params, |
| | | //@ts-ignore |
| | | width: _subModule.width, |
| | | apiName: _subModule.apiName, |
| | | realColumn: _subModule.realColumn, |
| | | isShow: _subModule.isShow, |
| | | }; |
| | | } else { |
| | | //@ts-ignore |
| | | params.buttonType = drawerState.type; |
| | | params.location = SubModuleKey[drawerState.type]; |
| | | } |
| | | let res = null; |
| | | if (drawerState.type === SubModuleType.Column) { |
| | | res = await baseModuleServices.addOrEditModuleColumn(params); |
| | | res = await menuServices.saveMenuField(params); |
| | | } else { |
| | | res = await baseModuleServices.addOrEditModuleButton(params); |
| | | res = await menuServices.saveMenuButton(params); |
| | | } |
| | | if (res) { |
| | | getBaseModuleGetAllSubModule(currentDrawerModule.value, drawerState.type); |
| | |
| | | async function handelBatchSaveColumn() { |
| | | try { |
| | | if (drawerState.type === SubModuleType.Column) { |
| | | let columnModuleList = drawerState.tableData as (API.ModuleColumnDto & { isEdit: boolean })[]; //.filter((d) => d.isEdit); |
| | | let columnModuleList = drawerState.tableData; //.filter((d) => d.isEdit); |
| | | if (columnModuleList.length > 0) { |
| | | let params = columnModuleList.map((columnModule) => { |
| | | let columnItem = { |
| | | moduleId: currentDrawerModule.value.id, |
| | | enCode: columnModule.enCode, |
| | | name: columnModule.name, |
| | | sortCode: columnModule.sortCode, |
| | | apiName: columnModule.apiName, |
| | | realColumn: columnModule.realColumn, |
| | | isShow: columnModule.isShow, |
| | | width: columnModule.width, |
| | | }; |
| | | if (columnModule.id) { |
| | | //@ts-ignore |
| | | columnItem.id = columnModule.id; |
| | | const groups = currentDrawerModule.value.groups.map((group) => { |
| | | if (group.group === state.group) { |
| | | group.fields = columnModuleList.map((c) => ({ |
| | | code: c.enCode, |
| | | name: c.name, |
| | | width: c.width, |
| | | sort: c.sortCode, |
| | | })); |
| | | } |
| | | return columnItem; |
| | | return group; |
| | | }); |
| | | let res = await baseModuleServices.addModuleColumnList(params, { |
| | | getResponse: true, |
| | | }); |
| | | let params: API.SaveMenuCommand = { |
| | | ...currentDrawerModule.value, |
| | | groups: groups, |
| | | }; |
| | | const res = await saveMenu(params); |
| | | if (res) { |
| | | getBaseModuleGetAllSubModule(currentDrawerModule.value, drawerState.type); |
| | | Message.successMessage('保存成功'); |
| | |
| | | } catch (error) {} |
| | | } |
| | | |
| | | async function handleDeleteSubModule(subModule: API.ModuleButtonDto | API.ModuleColumnDto) { |
| | | async function handleDeleteSubModule(subModule: DrawerTableDataItem) { |
| | | try { |
| | | await Message.deleteMessage(); |
| | | let res = null; |
| | | if (drawerState.type === SubModuleType.Column) { |
| | | res = await baseModuleServices.deleteModuleColumn({ id: subModule.id }); |
| | | } else { |
| | | res = await baseModuleServices.deleteModuleButton({ id: subModule.id }); |
| | | } |
| | | let res = await menuServices.deleteMenu({ |
| | | ids: [subModule.id], |
| | | }); |
| | | if (res) { |
| | | Message.successMessage('删除成功'); |
| | | getBaseModuleGetAllSubModule(currentDrawerModule.value, drawerState.type); |