vue-rise-design/packages/store/formDesign.js

一款服务于 Rise 前端低代码平台的表单设计器

/**
 * 模块说明
 * @module 表单设计器 Store
 * @author Max.Law 2022/08/26
 */
import { ADD_WIDGET } from '../utils';

const rise_formDesign = {
  namespaced: true,
  state: {
    activeId: '', //当前活动组件ID
    history: '', //历史编辑
    //web编辑器
    monaco: {
      editorVisible: false, //编辑器开关
      //编辑器配置
      editorOption: {
        readOnly: false,
        language: 'javascript',
        key: '',
        value: '',
      },
    },
  },
  mutations: {
    // 当前活动组件
    SET_ACTIVE: (state, action) => {
      state.activeId = action;
    },
    /**
     * 脚本编辑器
     */
    OPEN_MONACO_EDITOR: (state, action) => {
      state.monaco.editorVisible = true;
      state.monaco.editorOption = action;
    },
    CLOSE_MONACO_EDITOR: (state) => {
      state.monaco.editorVisible = false;
    },
    // 修改history
    SET_HISTORY: (state, action) => {
      state.history = JSON.stringify(action);
    },
  },
  actions: {
    //添加组件
    ADD_WIDGET({ commit, dispatch }, { column, parentId, parentType }) {
      let params = column.map((val) => {
        if (parentType === 'form-table') {
          val.tableWidget = true;
        } else {
          val.tableWidget = false;
        }
        if (!val.id) {
          const tag = ADD_WIDGET(val);
          commit('SET_ACTIVE', tag.id);
          return tag;
        } else {
          return val;
        }
      });
      dispatch(
        'rise_formRealize/ADD_WIDGET',
        { column: params, parentId },
        { root: true },
      );
    },
    //删除组件
    DEL_WIDGET({ commit, dispatch }, widgetId) {
      commit('SET_ACTIVE', '');
      dispatch('rise_formRealize/DEL_WIDGET', widgetId, { root: true });
    },
    //生成formConfig历史快照
    CREAT_HISTORY({ commit, rootState }) {
      commit('SET_HISTORY', rootState.rise_formRealize.formConfig);
    },
    //恢复formConfig历史快照
    RECOVER_HISTORY({ dispatch, state }) {
      dispatch('rise_formRealize/SET_FORM_CONFIG', JSON.parse(state.history), {
        root: true,
      });
    },
  },
  getters: {
    ActiveId: (state) => {
      return state.activeId;
    },
  },
};

export default rise_formDesign;