sohelp-eleplus 1.1.1-8.beta.1

package/sohelp-entity-form/index.vue

@@ -0,0 +1,524 @@
+<template>
+  <div class="sohelp-entity-form" v-loading="loading">
+    <sohelp-pro-form
+      ref="proFormRef"
+      :model="formValue"
+      :data="formData"
+      :items="items"
+      :footer="false"
+      :readonly="readonly"
+      :label-width="labelWidth"
+      :labelPosition="grid === 1 ? 'top' : 'left'"
+      v-bind="$attrs"
+      :size="globalConfig.size"
+      :grid="grid === 1 ? false : { span: 24 / grid }"
+      :rowProps="{
+        gutter: 20
+      }"
+      @updateValue="setFieldValue"
+    >
+      <!-- 自定义插槽 -->
+      <template v-for="name in Object.keys($slots)" #[name]="slotProps">
+        <slot :name="name" v-bind="slotProps || {}"></slot>
+      </template>
+    </sohelp-pro-form>
+  </div>
+</template>
+<script setup>
+  import { inject, nextTick, reactive, ref, watch } from 'vue';
+  import SohelpProForm from '../sohelp-pro-form/index.vue';
+  import { arrayTypes, stringTypes } from '../sohelp-pro-form/util';
+  import { useRoute } from 'vue-router';
+  import CrudHttp from '../http/CrudHttp.js';
+
+  import { filterFields, matchingType } from '../utils/ProFormConvertUtil.js';
+  import { moduleCache } from '../cache/ModuleCache';
+  import { useMobile } from '@/utils/use-mobile';
+  import { useI18n } from 'vue-i18n';
+  import { EleMessage } from '@/components/ele-admin-plus/components';
+
+  const { query } = useRoute();
+  const formValue = ref({});
+  const formData = ref({});
+  const defaultFormValue = ref({});
+  const form = ref({});
+  const loading = ref(false);
+  const { mobile } = useMobile();
+  const emit = defineEmits(['update:modelValue', 'update:data']);
+  const props = defineProps({
+    modelValue: Object,
+    data: Object,
+    /** 实体配置 */
+    refid: {
+      type: String,
+      required: true
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    /**是否自动加载数据*/
+    autoLoad: {
+      type: Boolean,
+      default: true
+    },
+    /** 表单配置 */
+    formConfig: {
+      type: Object,
+      required: true
+    },
+    /**标签宽度 */
+    labelWidth: String,
+    /** 列数  */
+    gridNum: {
+      type: Number,
+      default: 1
+    }
+  });
+
+  /**
+   * 存储表单初始值用于对比变更
+   *
+   * @type {Ref<Object>}
+   */
+  const originModelValue = ref({});
+  const proFormRef = ref(null);
+  /**
+   * 表单项
+   * @type {Ref<UnwrapRef<*[]>>}
+   */
+  const items = ref([]);
+  /**
+   * 默认显示1列
+   * @type {Ref<UnwrapRef<number>>}
+   */
+  const grid = ref(1);
+  /**
+   * 标签宽度
+   * @type {Ref<UnwrapRef<string>>}
+   */
+  const labelWidth = ref('auto');
+  /**
+   * 临时存储公式
+   * @type {UnwrapNestedRefs<{}>}
+   */
+  const formulaMap = reactive({});
+  const watchFields = reactive({});
+
+  const { t } = useI18n();
+
+  const globalConfig = inject('globalConfig');
+
+  // 初始化表单配置
+  const isConfigInitialized = ref(false);
+
+  /**
+   * 计算表单列属性
+   * @param grid
+   * @param colSpan
+   */
+  const getColProps = (grid, colSpan) => {
+    if (grid === 1 || colSpan === 1) {
+      return;
+    }
+    const span = 24 / grid;
+    return { span: span * colSpan };
+  };
+  /**根据ProForm参数要求进行初始化类型*/
+  const getDefaultType = (item) => {
+    if ('sliderRange' === item.type) {
+      return [30, 60];
+    }
+    if (arrayTypes.includes(item.type)) {
+      return [];
+    }
+    if (stringTypes.includes(item.type)) {
+      return '';
+    }
+    return '';
+  };
+
+  /**提取计算公式中涉及的字段 */
+  const extractFields = (list) => {
+    const fieldMap = {};
+    const regex = /{\s*(\w+)\s*}/g;
+    list.forEach((item) => {
+      let match;
+      while ((match = regex.exec(item.formulaValue)) !== null) {
+        const field = match[1];
+        if (!fieldMap[field]) {
+          fieldMap[field] = [];
+        }
+        fieldMap[field].push({
+          field: item.formulaField,
+          formulaValue: item.formulaValue
+        });
+      }
+    });
+
+    return fieldMap;
+  };
+
+  /**
+   * 根据名称获取组件实例
+   * @param refName
+   * @returns {*}
+   */
+  const getRef = (refName) => {
+    return proFormRef.value.getRef(refName);
+  };
+  /**根据实体表单配置初始化表单数据 */
+  const loadConfig = async (refid = props?.refid) => {
+    if (!refid) {
+      return false;
+    }
+    isConfigInitialized.value = false;
+    const init = {};
+
+    const entityFormConfig = await moduleCache.getEntityForm(refid);
+    if (entityFormConfig?.properties) {
+      entityFormConfig.properties.forEach((item) => {
+        init[item.name] = getDefaultType(item);
+      });
+
+      items.value = entityFormConfig.properties
+        .filter((item) => item.insert)
+        .filter((item) => !filterFields.includes(item.name))
+        .map((item, index) => {
+          if (item.i18n) {
+            const i18n = t(item.i18n);
+            item.label = i18n && i18n.indexOf('.') == -1 ? i18n : item.label;
+          }
+          let editParams = item?.editorParam ? JSON.parse(item.editorParam) : {};
+          if (item.editor === 'SohelpDict') {
+            editParams['code'] = item.dict || editParams?.code;
+          }
+          if (item['length'] > 0) {
+            editParams['maxlength'] = item['length'];
+          }
+          editParams.readonly = item?.readonly || false;
+
+          return {
+            key: item?.name || 'tempKey' + index,
+            type: item?.editor ? item.editor : matchingType(item?.type || ''),
+            i18n: item.i18n,
+            label: item.label,
+            length: item.length,
+            fieldType: item.type,
+            isEntity: item?.isEntity ?? true,
+            required: item.notNull,
+            itemProps: item?.formItemOption ? JSON.parse(item.formItemOption) : '',
+            props: editParams,
+            options: item?.editorData ? JSON.parse(item.editorData) : '',
+            prop: item?.name,
+            hidden: item.hidden || filterFields.includes(item.name),
+            colProps: getColProps(entityFormConfig.gridNum, item.gridNum)
+          };
+        })
+        .filter((p) => p.hidden !== true);
+      labelWidth.value = props.labelWidth || entityFormConfig.labelWidth || 'auto';
+      grid.value = mobile.value ? 1 : entityFormConfig.gridNum || props.gridNum;
+
+      // 计算公式
+      if (entityFormConfig.formula && entityFormConfig.formula.length > 0) {
+        Object.assign(
+          formulaMap,
+          entityFormConfig.formula.reduce((a, c) => (a[c.formulaField] || (a[c.formulaField] = c), a), {})
+        );
+        Object.assign(watchFields, extractFields(entityFormConfig.formula));
+      }
+    }
+    isConfigInitialized.value = true;
+    defaultFormValue.value = init;
+    return Promise.resolve(init);
+  };
+  /**
+   * 获取表单数据
+   */
+  const getFormData = () => {
+    return { ...formData.value };
+  };
+
+  /**
+   * 获取表单值
+   */
+  const getFormValue = () => {
+    return { ...formValue.value };
+  };
+  /**
+   * 设置表数据
+   * @param value
+   */
+  const setFormValue = (newModelValue) => {
+    resetFormValue();
+    formValue.value = newModelValue;
+    originModelValue.value = { ...newModelValue };
+    loading.value = false;
+  };
+
+  /**
+   *  设置表单字段值
+   * @param fieldName  字段名称
+   * @param fieldValue
+   */
+  const setFieldValue = (fieldName, fieldValue) => {
+    formValue.value[fieldName] = fieldValue;
+  };
+  /**
+   * 获取表单字段值
+   * @param fieldName 字段名称
+   * @returns {*}
+   */
+  const getFieldValue = (fieldName) => {
+    return formValue.value[fieldName];
+  };
+
+  /**
+   * 设置表单数据
+   * @param _data 数据对象
+   */
+
+  const setFormData = async (_formData = {}) => {
+    loading.value = true;
+
+    await isConfigDone();
+    Object.assign(formData.value, _formData);
+    setFormValue(switchFormValue(_formData));
+    setTimeout(() => {
+      clearValidate();
+    }, 0);
+  };
+
+  /**
+   * 清理表单验证信息
+   */
+  const clearValidate = () => {
+    nextTick(() => {
+      proFormRef.value?.clearValidate();
+    });
+  };
+
+  const validate = () => {
+    return proFormRef.value?.validate();
+  };
+
+  /**
+   * 对比两个对象，找出修改过的属性和值
+   * @param oldObj
+   * @param newObj
+   */
+  function shallowCompare(oldObj, newObj) {
+    oldObj = oldObj || {};
+    newObj = newObj || {};
+
+    const changedProps = {};
+    const allKeys = new Set([...Object.keys(oldObj), ...Object.keys(newObj)]);
+
+    for (const key of allKeys) {
+      if (oldObj[key] !== newObj[key]) {
+        changedProps[key] = newObj[key];
+      }
+    }
+    return { id: oldObj?.id || newObj?.id || '', ...changedProps };
+  }
+
+  /**
+   * 仅仅获取已更新的数据对象
+   */
+  const getCrudUpdater = async () => {
+    await isConfigDone();
+    return shallowCompare(originModelValue.value, formValue.value);
+  };
+
+  loadConfig(props.refid).then(async (init = {}) => {
+    setFormData(init);
+  });
+  /**
+   * 从formData对象转化ModelValue
+   * @param formData
+   * @returns {{}}
+   */
+  const switchFormValue = (formData) => {
+    const result = {};
+    Object.keys(formData).forEach((key) => {
+      const obj = formData[key];
+      if (typeof obj === 'object') {
+        result[key] = obj?.id || '';
+      } else {
+        result[key] = obj;
+      }
+    });
+    return result;
+  };
+
+  /**
+   * 配置是否加载完成
+   */
+  const isConfigDone = async () => {
+    return new Promise((resolve) => {
+      if (isConfigInitialized.value) {
+        resolve();
+      } else {
+        let timer = setInterval(() => {
+          if (isConfigInitialized.value) {
+            clearInterval(timer);
+            resolve();
+          }
+        }, 10);
+      }
+    });
+  };
+
+  /**
+   * 通过引擎加载数据
+   * @param params
+   * @param callback
+   */
+  const load = async (params = {}, callback) => {
+    loading.value = true;
+    await isConfigDone();
+    CrudHttp.getById(props.refid, params, async (res) => {
+      if (res.meta.success) {
+        await setFormData(res.data);
+      }
+      callback && callback(res);
+    });
+  };
+  /**
+   * 加载表单初始化数据
+   * @param params
+   * @returns {Promise<void>}
+   */
+  const loadByInitial = async (params = {}, callback) => {
+    await isConfigDone();
+    return CrudHttp.initial(props.refid, params, async (res) => {
+      if (res.meta.success) {
+        await setFormData(res.data);
+        callback && callback(res);
+        return Promise.resolve(res);
+      } else {
+        callback && callback(res);
+        EleMessage.error(res.meta.message);
+        return Promise.reject(res);
+      }
+    });
+  };
+
+  /**
+   * 通过引擎保存数据
+   * @param params
+   * @param callback
+   */
+  const save = async (params = {}, callback) => {
+    await isConfigDone();
+    loading.value = true;
+    const refid = props.refid;
+    const key = refid && refid.indexOf('!') !== -1 ? refid.split('!')[1] : 'default';
+    let data = {};
+    data[key] = {
+      ...(await getCrudUpdater()),
+      ...params
+    };
+    return CrudHttp.save(refid, data, (res) => {
+      callback?.(res);
+      loading.value = false;
+    });
+  };
+
+  /**
+   * 监听表单值变化以处理计算公式
+   */
+  watch(
+    formValue,
+    (val) => {
+      emit('update:modelValue', val);
+      emit('update:data', formData);
+      if (val) {
+        if (Object.keys(watchFields).length > 0) {
+          Object.keys(val).forEach((changedField) => {
+            if (watchFields.hasOwnProperty(changedField)) {
+              const formulas = watchFields[changedField];
+              formulas.forEach((formula) => {
+                if (formula && formula.formulaValue) {
+                  try {
+                    // 公式表达式处理
+                    const expr = formula.formulaValue.replace(/\s+/g, '').replace(/\${/g, 'row.').replace(/}/g, '');
+                    val[formula.field] = new Function('row', `return ${expr}`)(val);
+                  } catch (e) {
+                    console.error('计算公式错误', e);
+                    EleMessage.error('计算公式错误' + e.message);
+                  }
+                }
+              });
+            }
+          });
+        }
+      }
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  );
+  /**
+   * 获取配置项
+   * @param fieldName
+   * @returns {*}
+   */
+  const getItemValue = (fieldName) => {
+    return items.value[fieldName];
+  };
+  /**
+   * 重新定义事件和属性
+   * @param fieldName
+   * @param objectValue
+   */
+  const setItemValue = (fieldName, objectValue) => {
+    items.value.map((item) => {
+      if (item.key === fieldName) {
+        Object.assign(item, objectValue);
+        return item;
+      }
+    });
+  };
+
+  const resetFormValue = () => {
+    formValue.value = { ...defaultFormValue.value };
+  };
+
+  defineExpose({
+    loadConfig,
+    getItemValue,
+    setItemValue,
+    loadByInitial,
+    load,
+    save,
+    getRef,
+    proFormRef,
+    clearValidate,
+    setFieldValue,
+    getFieldValue,
+    labelWidth,
+    grid,
+    getFormData,
+    setFormData,
+    setFormValue,
+    getFormValue,
+    getCrudUpdater,
+    globalConfig,
+    resetFormValue,
+    validate
+  });
+</script>
+<script>
+  export default {
+    name: 'SohelpEntityForm'
+  };
+</script>
+
+<style lang="scss" scoped>
+  .sohelp-entity-form {
+    height: auto;
+  }
+</style>
+;

package/sohelp-entity-grid/index.vue

@@ -0,0 +1,30 @@
+<template>
+  <sohelp-grid-view v-bind="$attrs" ref="sohelpEntityGridRef" :refid="refid" :isEntityGrid="true"></sohelp-grid-view>
+</template>
+<script>
+import SohelpGridView from '../sohelp-grid-view/index.vue'
+import {ref} from "vue";
+export default {
+  name: "SohelpEntityGrid",
+  components: {SohelpGridView},
+  props:{
+    modelValue: Object,
+    /** 实体配置 */
+    refid: {
+      type: String,
+      required: true
+    }
+  },
+  setup(props, {emits}) {
+    const sohelpEntityGridRef = ref();
+
+    return {
+      sohelpEntityGridRef
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>