vue-rise-design/packages/config/mixin/configMixin.js

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

/**
 * 模块说明
 * @module 组件配置 mixin
 * @author Max.Law 2022/07/22
 */

import { isEmptyObject } from '../../utils';
const configMixin = {
  props: {
    configure: {
      type: Object,
    },
  },
  data() {
    return {
      config: {
        prop: null,
        isHide: null,
        disabled: null,
      },
    };
  },
  created() {
    Object.assign(this.config, this.configure);
    setTimeout(() => {
      this.setWatch();
    }, 50);
  },
  methods: {
    setWatch() {
      // 避免初始化触发
      this.$watch(
        'config',
        function (val) {
          // 去除未改变的值
          let newParams = {};

          if (val.type === 'self') {
            newParams = val;
          } else {
            Object.keys(val).forEach((key) => {
              if (!isEmptyObject(val[key])) {
                newParams[key] = val[key];
              }
            });
          }

          if (this.config.type) {
            this.$store.commit('rise_formRealize/SET_WIDGET_CONFIG', {
              config: newParams,
              id: this.config.id,
            });
          } else {
            this.$store.commit(
              'rise_formRealize/SET_FORM_ATTRIBUTES',
              newParams,
            );
          }
        },
        {
          deep: true,
        },
      );
    },
  },
};

export default configMixin;