vue-rise-design/packages/store/formRealize.d.js

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

/**
 * 模块说明
 * @module 表单实现器 Store
 * @author Max.Law 2022/08/26
 */
import Vue from 'vue';
import {
  dataTypeOf,
  DEEP_CLONE,
  FIND_ITEM,
  FIND_REAL_ITEM,
  FIND_PARENT,
  DEL_WIDGET,
  MOUNT_DEFAULT_FORM,
  UNMOUNT_DEFAULT_FORM,
  MOUNT_DEFAULT,
  UNMOUNT_DEFAULT,
  SMARTS_OBJECT,
} from '../utils';

const rise_formRealize = {
  namespaced: true,
  state: () => ({
    formConfig: {
      formAttributes: {
        disabled: false,
      }, //表单属性
      type: '', //类型 {template:模版} {module:模块} {page:页面}
      column: [], //组件数组
    },
    formData: {},
  }),
  mutations: {
    RESET_ALL: (state) => {
      Vue.set(state, 'formConfig', {
        type: '',
        column: [],
        formAttributes: {},
      });
      Vue.set(state, 'formData', {});
    },
    RESET_FORMDATA: (state) => {
      Vue.set(state, 'formData', {});
    },
    /**
     * formConfig处理
     */
    SET_FORM_CONFIG: (state, action) => {
      if (action) {
        Vue.set(
          state,
          'formConfig',
          Object.assign({}, state.formConfig, action),
        );
      }
    },
    SET_FORM_EVENT: (state, { data, key }) => {
      Vue.set(state.formConfig.formEvent, key, data);
    },
    SET_FORM_WATCH_LIST: (state, data) => {
      if (data) {
        Vue.set(state.formConfig.formEvent, 'watchList', DEEP_CLONE(data));
      }
    },
    SET_FORM_ATTRIBUTES: (state, action) => {
      if (action) {
        const config = UNMOUNT_DEFAULT_FORM(action);
        Vue.set(state.formConfig, 'formAttributes', config);
      }
    },
    AFRESH_FORM_COLUMN: (state, action) => {
      if (action === 'column') {
        Vue.set(state.formConfig, 'column', []);
      } else {
        Vue.set(state, 'formConfig', {
          type: '',
          column: [],
          formAttributes: {},
        });
      }
    },
    /**
     * formData处理
     */
    SET_FORMDATA: (state, action) => {
      Vue.set(state, 'formData', Object.assign({}, state.formData, action));
    },
    SET_FORMDATA_WIDGET: (state, action) => {
      if (action) {
        const fn = (prop) => {
          let target = SMARTS_OBJECT('vue', prop, state.formData, action.value);
          Vue.set(target.target, target.prop, target.value);
        };

        if (dataTypeOf(action.prop) === 'array') {
          action.prop.forEach((element) => {
            fn(element);
          });
        } else {
          fn(action.prop);
        }
      }
    },
    /**
     * widget处理
     */
    ADD_WIDGET: (state, { column, parentId }) => {
      let tag;
      if (parentId) {
        tag = FIND_ITEM(parentId, state.formConfig.column, 'id');
      } else {
        tag = state.formConfig;
      }

      Vue.set(tag, 'column', column);
    },
    DEL_WIDGET: (state, widgetId) => {
      if (widgetId) {
        DEL_WIDGET(widgetId, state.formConfig.column);
      }
    },
    COPY_WIDGET(state, { parentId, index, copy }) {
      if (parentId === 'widgetLayout') {
        state.formConfig.column.splice(index, 0, copy);
      } else {
        let parent = FIND_ITEM(parentId, state.formConfig.column, 'id');
        parent.column.splice(index, 0, copy);
      }
    },
    SET_WIDGET_CONFIG: (state, action) => {
      if (action) {
        const configure = UNMOUNT_DEFAULT(action.config);
        const tag = FIND_PARENT(action.id, state.formConfig.column);
        Vue.set(tag.parents, tag.index, configure);
      }
    },
    CHANGE_WIDGET_CONFIG: (state, action) => {
      if (action) {
        const fn = (prop) => {
          const tag = FIND_ITEM(prop, state.formConfig.column, 'prop');
          if (tag) {
            for (const key in action.config) {
              if (Object.hasOwnProperty.call(action.config, key)) {
                const element = action.config[key];
                Vue.set(tag, key, element);
              }
            }
          }
        };
        if (dataTypeOf(action.prop) === 'array') {
          action.prop.forEach((element) => {
            fn(element);
          });
        } else {
          fn(action.prop);
        }
      }
    },
    SET_WIDGET_EVENT: (state, action) => {
      let tag = FIND_ITEM(action.widgetId, state.formConfig.column, 'id');
      if (action.data) {
        Vue.set(tag, action.key, action.data);
      } else {
        delete tag[action.key];
      }
    },
  },
  actions: {
    ADD_WIDGET({ commit }, params) {
      commit('ADD_WIDGET', params);
    },
    DEL_WIDGET({ commit }, params) {
      commit('DEL_WIDGET', params);
    },
    SET_FORM_CONFIG({ commit }, params) {
      commit('SET_FORM_CONFIG', params);
    },
  },
  getters: {
    formConfig: (state) => {
      if (state.formConfig.type) {
        return MOUNT_DEFAULT_FORM(state.formConfig);
      } else {
        return state.formConfig;
      }
    },
    GET_WIDGET_CONFIG:
      (state) =>
      (id, type = 'id') => {
        const tag = FIND_ITEM(id, state.formConfig.column, type);
        return tag ? MOUNT_DEFAULT(tag) : {};
      },
    GET_WIDGET_REAL_CONFIG:
      (state) =>
      (id, type = 'id') => {
        const tag = FIND_REAL_ITEM(
          id,
          DEEP_CLONE(state.formConfig.column),
          type,
          state.formConfig.formAttributes.disabled,
        );
        return tag ? MOUNT_DEFAULT(tag) : {};
      },
    GET_FORMDATA_WIDGET: (state) => (prop) => {
      return SMARTS_OBJECT('find', prop, state.formData);
    },
  },
};

export default rise_formRealize;