noob-components/plugs/store/index.ts

import { createStore as create } from "vuex";
import { Styles, Size } from "../config";
import { getByCodes, getMenus, logout, getActions } from "../api/public";
import { mapping } from "../api/role";
import { clearAndAssign } from "../util/objectUtil";

export class State {
  dict = {
    active_status: {
      A: "启用",
      B: "禁用",
    },
  };
  roles = {};
  menus = [];
  roleRefresh = true;
  style = Styles.plain;
  size = Size.normal;
  actions = [];
  user = {};
  actionPers = {};
  refreshFlags = new Map();
}

export class Actions {
  getDictMap = ({ state, commit }, codes) => {
    if (codes == null) {
      return;
    }
    const arr: Array<any> = [];
    for (let i = 0; i < codes.length; i++) {
      const code = codes[i];
      state.dict[code] || arr.push(code);
    }
    if (arr.length == 0) {
      return;
    }
    getByCodes({ codes: arr.join() }).then((rsp: any) => {
      if (rsp) {
        for (let i = 0; i < arr.length; i++) {
          const key = arr[i];
          const dict = {};
          if (rsp[key]) {
            rsp[key].forEach((item) => {
              dict[item.code] = item.name;
            });
          }
          commit("updateDict", [key, dict]);
        }
      }
    });
  };
  getRoleMap = ({ state, commit }) => {
    state.roleRefresh &&
      mapping().then((rsp) => {
        commit("updateState", ["roles", rsp]);
        commit("updateState", ["roleRefresh", false]);
      });
  };
  getMenus = ({ state, commit }) => {
    getMenus().then((rsp) => commit("updateState", ["menus", rsp]));
  };
  getMyActions = ({ state, commit }, content) => {
    getActions(content).then((rsp) => commit("updateState", ["actions", rsp]));
  };
  login = (store) => {
    const { state, commit } = store;
    state.size.headHeight = state.size.head + "px";
    state.size.asideWidth = state.size.aside + "px";
    commit("initSize");
    this.getMenus(store);
  };

  setRefreshFlag = ({ state, commit }, flags: string[]) => {
    commit("setRefreshFlag", flags);
  };

  unsetRefreshFlag = ({ state, commit }, params: { flags: string[]; token: string }) => {
    commit("unsetRefreshFlag", params);
  };
}

export class Mutations {
  updateState = (state, [k, v]) => {
    state[k] = v;
  };

  initSize = (state, param) => {
    const size = state.size;
    const aside = parseInt(size.asideWidth);
    const head = parseInt(size.headHeight);
    const mainPad = parseInt(size.mainPad);
    const searchRow = parseInt(size.searchRowHeight);
    const searchRowPad = parseInt(size.searchRowPad);
    const headRightWidth = parseInt(size.headRightWidth);
    if (param) {
      size.height = param[0];
      size.width = param[1];
    }
    size.mainHeight = Math.floor(size.height - head) + "px";
    size.tableHeight = size.height - 2 * (mainPad + searchRowPad) - 3 - searchRow - head;
    size.pTableHeight = size.tableHeight - size.pageHeight;

    size.headLeftWidth = size.width - aside - headRightWidth - 20 + "px";
  };
  updateDict = (state, param) => {
    state.dict[param[0]] = param[1];
  };

  setRefreshFlag = (state, flags: string[]) => {
    for (const flag of flags) {
      state.refreshFlags.set(flag, new Set());
    }
  };

  unsetRefreshFlag = (state, { flags, token }: { flags: string[]; token: string }) => {
    for (const flag of flags) {
      if (!state.refreshFlags.has(flag)) {
        state.refreshFlags.set(flag, new Set());
      }
      state.refreshFlags.get(flag).add(token);
    }
  };
}

export class Getters {
  menuIconSize = (state) => {
    return state.size.menuIconSize;
  };
}

export interface StoreOptions {
  state?: State;
  getters?: Getters;
  actions?;
  mutations?: Mutations;
  modules?;
  plugins?;
  strict?: boolean;
  devtools?: boolean;
}

export const createStore = (options) => {
  return create(options);
};