fix: 修改功能模块

zhengyiming

6 天以前 93393138afcda975703f8c89ae1702fb62502080

 src/views/System/ModuleManage.vue

@@ -6,7 +6,7 @@
          <div class="query-filter-list-item">
            <SearchInput
              v-model="state.searchValue"
              placeholder="角色名称"
              placeholder="菜单名称"
              @on-click-search="handleSearch"
              @keyup.enter="handleSearch()"
            >
@@ -45,18 +45,18 @@
          </template>
          <template v-else-if="column.property === 'isMenu'">
            <el-switch
              v-model="row.isMenu"
              :modelValue="row.type === EnumMenuType.Menu"
              :onUpdate:modelValue="(v: boolean) =>{
                 row.type=v?EnumMenuType.Menu:EnumMenuType.Page
              }"
              inline-prompt
              :active-value="1"
              :inactive-value="0"
              @change="(v: number) => handleChangeStatus(v, row, 'isMenu')"
            ></el-switch>
          </template>
          <template v-else-if="column.property === 'enabledMark'">
            <el-switch
              v-model="row.enabledMark"
              :active-value="1"
              :inactive-value="0"
              :modelValue="!row.isDisabled"
              :onUpdate:modelValue="(v: boolean) => row.isDisabled =!v"
              @change="(v: number) => handleChangeStatus(v, row, 'enabledMark')"
            ></el-switch>
          </template>
@@ -95,15 +95,24 @@
  OperationBtnType,
  SearchInput,
} from '@bole-core/components';
import * as baseModuleServices from '@/services/api/BaseModule';
import { ModuleUtils, TreeModuleDtoGroupDto, Message, TreeStore } from '@/utils';
import { ModuleUtils, TreeModuleDtoGroupDto, Message, TreeStore, flattenTree } from '@/utils';
import { TableInstance } from 'element-plus';
import { SubModuleType, SubModuleTitle, SubModuleKey, FastBtn, ModuleColumns } from '@/constants';
import {
  SubModuleType,
  SubModuleTitle,
  SubModuleKey,
  FastBtn,
  ModuleColumns,
  EnumMenuType,
} from '@/constants';
import SubModuleEditDrawer from './components/SubModuleEditDrawer.vue';
import AddOrEditModuleDialog from './components/AddOrEditModuleDialog.vue';
import { useDebounceFn } from '@vueuse/core';
import _ from 'lodash';
import { useReset } from '@bole-core/core';
import * as menuServices from '@/services/api/menu';
import { DrawerTableDataItem } from './types';

defineOptions({
  name: 'ModuleManage',
});
@@ -173,6 +182,7 @@
const BaseState = {
  loading: true,
  searchValue: '',
  group: 'default',
};
const state = reactive({ ...BaseState });
const moduleTreeStore = ref<TreeStore<TreeModuleDtoGroupDto>>();
@@ -189,8 +199,8 @@
  sortCode: 0,
  path: '',
  isCache: true,
  isMenu: 1,
  enabledMark: 1,
  isMenu: true,
  enabledMark: true,
  showCacheSelect: false,
  showIconSelect: false,
  showSubMenuIconSelect: false,
@@ -198,13 +208,14 @@
  title: '',
};
const editForm = reactive({ ...BaseFormData });
const currentDialogModule = ref<TreeModuleDtoGroupDto>({});
const currentDialogModule = ref<API.GetMenuQueryResult>({});
//drawer
const drawerVisible = ref(false);
const currentDrawerModule = ref<TreeModuleDtoGroupDto>({});
const currentDrawerModule = ref<API.GetMenuQueryResult>({});

const drawerState = reactive<{
  type: SubModuleType;
  tableData: ValueOf<API.AllSubModule>;
  tableData: DrawerTableDataItem[];
}>({
  type: SubModuleType.PageButton,
  tableData: [],
@@ -215,10 +226,16 @@
});
async function getAllModule() {
  try {
    let res = await baseModuleServices.getAllModuleList({
      showLoading: !state.loading,
    });
    const treeStore = ModuleUtils.convertToModuleGroup(res);
    let res = await menuServices.getMenus(
      {
        userType: EnumUserType.Operation,
        clientType: EnumClientType.PcWeb,
      },
      {
        showLoading: false,
      }
    );
    const treeStore = ModuleUtils.convertToModuleGroup(flattenTree(res));
    moduleTreeStore.value = treeStore;
    originModuleTree.value = [...treeStore.data];
  } catch (error) {}
@@ -234,16 +251,21 @@
  statusType: T
) {
  try {
    let params = {
      ..._.omit(data, ['children', 'parentNode']),
      [statusType]: value,
    };
    await baseModuleServices.addOrEditModule(params);
    // let params = {
    //   ..._.omit(data, ['children', 'parentNode']),
    //   [statusType]: value,
    // };
    // await baseModuleServices.addOrEditModule(params);
  } catch (error) {
    Message.errorMessage('操作失败');
  }
}
function openDialog(options: {

async function getMenu(id: string) {
  return await menuServices.getMenu({ id: id });
}

async function openDialog(options: {
  module?: TreeModuleDtoGroupDto;
  showCacheSelect: boolean;
  showIconSelect: boolean;
@@ -252,46 +274,48 @@
  parentId: string;
  baseSortCode?: number;
}) {
  const {
    module,
    showCacheSelect,
    showIconSelect,
    showSubMenuIconSelect,
    showParentSelect,
    parentId,
    baseSortCode,
  } = options;
  if (module) {
    currentDialogModule.value = module;
    useSetReactive(editForm, {
      title: `${module.name}编辑`,
      enCode: module.enCode,
      name: module.name,
      icon: module.icon,
      sortCode: module.sortCode,
      path: module.path,
      isMenu: module.isMenu,
      enabledMark: module.enabledMark,
      parentId: parentId,
  try {
    const {
      module,
      showCacheSelect,
      showIconSelect,
      showSubMenuIconSelect,
      showParentSelect,
      isCache: module.isCache,
    });
  } else {
    currentDialogModule.value = {};
    useSetReactive(editForm, BaseFormData, {
      title: '新增功能模块',
      parentId: parentId,
      showCacheSelect,
      showIconSelect,
      showSubMenuIconSelect,
      showParentSelect,
      sortCode: baseSortCode,
    });
  }
  editDialogFormVisible.value = true;
      parentId,
      baseSortCode,
    } = options;
    if (module) {
      currentDialogModule.value = await getMenu(module.id);
      useSetReactive(editForm, {
        title: `${module.name}编辑`,
        enCode: module.code,
        name: module.name,
        icon: module.icon,
        sortCode: module.sort,
        path: module.url,
        isMenu: module.type == EnumMenuType.Menu,
        enabledMark: !module.isDisabled,
        parentId: parentId,
        showCacheSelect,
        showIconSelect,
        showSubMenuIconSelect,
        showParentSelect,
        isCache: module.isCache,
      });
    } else {
      currentDialogModule.value = {};
      useSetReactive(editForm, BaseFormData, {
        title: '新增功能模块',
        parentId: parentId,
        showCacheSelect,
        showIconSelect,
        showSubMenuIconSelect,
        showParentSelect,
        sortCode: baseSortCode,
      });
    }
    editDialogFormVisible.value = true;
  } catch (error) {}
}
function handleAddOrEditRootModule(module?: TreeModuleDtoGroupDto) {
  const showCacheSelect = false;
@@ -341,16 +365,17 @@
}
async function handleAddOrEditModule() {
  try {
    let params: API.ModuleDto = {
      enCode: editForm.enCode,
    let params: API.SaveMenuCommand = {
      userType: EnumUserType.Operation,
      clientType: EnumClientType.PcWeb,
      code: editForm.enCode,
      name: editForm.name,
      sortCode: editForm.sortCode,
      path: editForm.path,
      // isCache: true,
      isMenu: editForm.isMenu,
      enabledMark: editForm.enabledMark,
      type: editForm.isMenu ? EnumMenuType.Menu : EnumMenuType.Page,
      visitLevel: EnumMenuVisitLevel.NeedPower,
      icon: editForm.icon,
      // parentId:,
      url: editForm.path,
      isDisabled: !editForm.enabledMark,
      sort: editForm.sortCode,
    };
    if (editForm.showCacheSelect) {
      params.isCache = editForm.isCache;
@@ -360,8 +385,9 @@
    }
    if (currentDialogModule.value.id) {
      params.id = currentDialogModule.value.id;
      params.groups = currentDialogModule.value.groups;
    }
    const res = await baseModuleServices.addOrEditModule(params);
    const res = await saveMenu(params);
    if (res) {
      Message.successMessage('保存成功');
      getAllModule();
@@ -370,28 +396,57 @@
  } catch (e) {}
}

async function saveMenu(params: API.SaveMenuCommand) {
  try {
    const res = await menuServices.saveMenu(params);
    return res;
  } catch (error) {}
}

async function handleDelete(module: TreeModuleDtoGroupDto) {
  try {
    await Message.deleteMessage();
    const res = await baseModuleServices.deleteModule({ id: module.id });
    const res = await menuServices.deleteMenu({ ids: [module.id] });
    if (res) {
      Message.successMessage('删除成功');
      getAllModule();
    }
  } catch (error) {}
}
function openDrawer(module: TreeModuleDtoGroupDto, type: SubModuleType) {
  drawerState.type = type;
  currentDrawerModule.value = module;
  getBaseModuleGetAllSubModule(module, type);
async function openDrawer(module: TreeModuleDtoGroupDto, type: SubModuleType) {
  try {
    drawerState.type = type;
    getBaseModuleGetAllSubModule(module, type);
  } catch (error) {}
}
async function getBaseModuleGetAllSubModule(module: TreeModuleDtoGroupDto, type: SubModuleType) {
  try {
    let params = {
      moduleId: module.id,
    };
    const res = await baseModuleServices.getAllSubModule(params);
    drawerState.tableData = res[SubModuleKey[type]];
    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 = (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 = (
        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) {}
}
@@ -401,10 +456,10 @@
    enCode: '',
    name: '',
    sortCode: sortCode,
    width: 0,
    width: 0 as any as string,
    isEdit: true,
    apiName: '',
    realColumn: '',
    // apiName: '',
    // realColumn: '',
    isShow: true,
  };
  drawerState.tableData?.push(baseData);
@@ -420,13 +475,13 @@
    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(),
@@ -437,37 +492,29 @@
  }
  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);
@@ -478,28 +525,25 @@
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('保存成功');
@@ -509,15 +553,12 @@
  } 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);