sohelp-eleplus 1.1.1-8.beta.1

package/sohelp-user-select/props.js

@@ -0,0 +1,71 @@
+/**
+ * 属性
+ */
+export const prop = {
+  url: {
+    type: String,
+    required: true
+  },
+
+
+  mappingFields:{
+    type: Object,
+    default: () => {
+      return {
+        label: 'label',
+        value: 'value'
+      }
+    }
+  },
+
+  width: {
+    type: String,
+    default: '200px'
+  },
+
+  placeholder: {
+    type: String,
+    default: '请选择'
+  },
+  modelValue: {
+    type: Array || String,
+    required: true
+  },
+  filterable: {
+    type: Boolean,
+    default: true
+  },
+  clearable: {
+    type: Boolean,
+    default: true
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  type: {
+    type: String,
+    default: 'select'
+  },
+  size: {
+    type: String,
+    validator: function (value) {
+      return ['large', 'default', 'small', ''].includes(value);
+    },
+    default: 'default'
+  },
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  type: {
+    type: String,
+    default: 'select'
+  }
+};
+
+/**
+ * 事件
+ */
+
+export const emit = ['update:modelValue','change'];

package/sohelp-user-tag/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>头像+nickname,如果没有显示默认公司LOGO</div>
+</template>
+<script>
+export default {
+  name: "SohelpUserTag"
+}
+</script>
+
+<style scoped>
+
+</style>

package/sohelp-user-tree/index.vue

@@ -0,0 +1,11 @@
+<template>
+<div>SohelpUserTree用户弹窗是继承SohelpTree</div>
+</template>
+<script>
+export default {
+  name: "SohelpUserTree"
+}
+</script>
+<style scoped>
+
+</style>

package/sohelp-vform-drawer/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <sohelp-drawer>
+    <sohelp-vform v-bind="$attrs" :refid="refid" ref="sohelpVformRef">
+      <slot>
+        <template v-for="(slotProps, slotName) in $scopedSlots" :key="slotName">
+          <slot :name="slotName" v-bind="slotProps" />
+        </template>
+      </slot>
+    </sohelp-vform>
+    <div class="drawer__footer">
+      <slot name="footer" />
+    </div>
+  </sohelp-drawer>
+</template>
+<script lang="ts">
+import SohelpVform from "../sohelp-vform-eleplus/index.vue"
+import SohelpDrawer from "../sohelp-drawer/index.vue"
+import {ref} from "vue";
+export default {
+  name: 'SohelpVformDrawer',
+  components: {SohelpDrawer, SohelpVform},
+  props: {
+    refid: {
+      type: String,
+      required: true
+    }
+  },
+  setup(props, {emits, attrs}) {
+    const sohelpVformRef = ref(null);
+    const getFormJson =()=>{
+      return sohelpVformRef.value.getFormJson();
+    }
+    const getFormData =()=>{
+      return sohelpVformRef.value.getFormData();
+    }
+    return {sohelpVformRef,getFormJson,getFormData};
+  }
+};
+</script>
+<style></style>

package/sohelp-vform-eleplus/index.vue

@@ -0,0 +1,297 @@
+<template>
+  <div class="sohelp-vform-eleplus" :class="moduleType">
+    <div class="sohelp-vform-main">
+      <VFormRender
+        :form-json="formJson"
+        :option-data="optionData"
+        ref="vFormRenderRef"
+        class="v-form-render"
+        v-model="modelValue"
+        :data="data"
+      >
+      </VFormRender>
+    </div>
+    <div class="vform-footer" v-if="toolbar?.length > 0">
+      <el-button
+        v-for="item in toolbar"
+        :key="item.id || item.title"
+        :type="buttonsType[item.type] || ''"
+        :icon="item.iconCls"
+        @click="toolbarButtonClick(item)"
+      >
+        {{ item.title }}
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { defineProps, getCurrentInstance, inject, onMounted, reactive, ref, watch } from 'vue';
+  import { moduleCache } from '../cache/ModuleCache.js';
+  import { useRoute } from 'vue-router';
+  import { ElMessage } from 'element-plus';
+  import { usePageTab } from '@/utils/use-page-tab.js';
+
+  const instance = getCurrentInstance();
+  const { finishPageTab, setPageTabTitle, addPageTab } = usePageTab();
+  const globalConfig = inject('globalConfig');
+  const vFormRenderRef = ref(null);
+  const formJson = reactive({});
+  const optionData = reactive({});
+
+  const modelValue = defineModel('modelValue', { default: () => ({}), type: Object });
+  const data = defineModel('data', { default: () => ({}), type: Object });
+
+  const props = defineProps({
+    refid: {
+      type: String,
+      default: ''
+    },
+    moduleType: {
+      type: String,
+      default: 'tab'
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  });
+
+  const buttonsType = {
+    custom: 'primary',
+    create: 'primary',
+    save: 'primary',
+    delete: 'danger',
+    confirm: 'primary',
+    cancel: '',
+    close: '',
+    submit: 'primary',
+    print: 'primary',
+    refresh: 'primary'
+  };
+
+  const route = useRoute();
+  const toolbar = ref([]);
+
+  /**
+   * 加载配置
+   * @param refid 配置地址
+   * @returns {Promise<void>}
+   */
+  const loadConfig = async (refid) => {
+    //从缓存中获取配置
+    const data = await moduleCache.getLayout(refid).catch((e) => {
+      ElMessage.error(e.message);
+    });
+    if (!data?.code) {
+      ElMessage.error('没有发现模块配置内容:' + route.meta.modulePath);
+    }
+    const config = JSON.parse(data?.code ?? '{}');
+    if (globalConfig?.size && config?.formConfig) {
+      config.formConfig.size = globalConfig.size;
+    }
+
+    toolbar.value = data?.toolbar || [];
+    setFormJson(config);
+  };
+
+  const setFormJson = (json) => {
+    vFormRenderRef.value.setFormJson(json);
+  };
+
+  const convertObjectToId = (obj) => {
+    if (!obj || typeof obj !== 'object') return obj;
+
+    const result = { ...obj };
+    for (const key in result) {
+      if (result[key] && typeof result[key] === 'object') {
+        // 如果是对象，并且有 id 属性，则替换为 id
+        if ('id' in result[key]) {
+          result[key] = result[key].id;
+        } else {
+          // 否则递归处理子对象
+          result[key] = convertObjectToId(result[key]);
+        }
+      }
+    }
+
+    return result;
+  };
+
+  const setFormData = (data) => {
+    setTimeout(() => {
+      vFormRenderRef.value.setFormData(data);
+      modelValue.value = convertObjectToId(data.value);
+    }, 100);
+  };
+
+  const setModelValue = (value) => {
+    modelValue.value = value;
+  };
+
+  const getFormData = (validate = true) => {
+    return vFormRenderRef.value.getFormData(validate);
+  };
+
+  //加载布局配置
+  loadConfig(decodeURI(props.refid));
+
+  onMounted(async () => {
+    window.$message = instance?.appContext?.config.globalProperties.$message;
+    setPageTabTitle(route.query.title || props.title || '');
+  });
+
+  //工具栏点击事件
+  const toolbarButtonClick = (config) => {
+    if (config.handler) {
+      try {
+        const scope = {
+          $vform: vFormRenderRef.value,
+          $message: window.$message,
+          $modelValue: modelValue.value,
+          $refid: props.refid,
+          $data: data.value,
+          $param: route.query,
+          $config: config
+        };
+        const func = new Function('modelValue', config.handler);
+        func.call(scope, modelValue.value || {});
+      } catch (e) {
+        console.error('工具栏按钮单击事件出错:' + props.refid, e);
+        ElMessage.error(e);
+      }
+    }
+  };
+
+  watch(
+    props.refid,
+    (val) => {
+      if (val) {
+        loadConfig(decodeURI(val));
+      }
+    },
+    { immediate: true }
+  );
+
+  defineExpose({
+    loadConfig,
+    setFormJson,
+    setFormData,
+    setModelValue,
+    getFormData,
+    toolbarButtonClick
+  });
+</script>
+<style scoped lang="scss">
+  .sohelp-vform-eleplus.tab {
+    flex-direction: column-reverse;
+
+    .vform-footer {
+      justify-content: flex-start;
+      border-top: 0;
+    }
+  }
+
+  .sohelp-vform-eleplus {
+    height: 100%;
+    width: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+
+    .sohelp-vform-main {
+      box-sizing: border-box;
+      overflow: auto;
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+    }
+
+    .vform-footer {
+      padding: 10px 20px;
+      height: 55px;
+      line-height: 30px;
+      border-top: 1px solid #ebeef5;
+      width: 100%;
+      overflow: hidden;
+      display: flex;
+      box-sizing: border-box;
+      justify-content: flex-end;
+      flex-shrink: 0; /* 防止footer被压缩 */
+    }
+
+    .vform-footer + .sohelp-vform-main {
+      /* 当footer存在时，调整main区域样式 */
+      max-height: calc(100% - 55px);
+    }
+
+    .v-form-render {
+      flex-shrink: 0;
+    }
+
+    .vform-footer .el-button:first-of-type {
+      margin-left: 0 !important;
+    }
+  }
+
+  .sohelp-page {
+    :deep(.sohelp-hidden-container) {
+      display: none !important;
+    }
+  }
+
+  .v-form-render {
+    border-radius: 10px;
+    background-color: white;
+    padding: 10px;
+    height: 100%;
+    box-sizing: border-box;
+    overflow: auto;
+
+    :deep(.sohelp-entity-form-widget-wrapper) {
+      & > .el-form-item:first-of-type > .el-form-item__label {
+        display: none;
+      }
+
+      .el-form-item {
+        margin-bottom: 18px !important;
+      }
+    }
+
+    :deep(.vform-hide-el) {
+      display: none;
+    }
+
+    :deep(.container-wrapper) {
+      height: 100%;
+      box-sizing: border-box;
+
+      .tab-container,
+      .el-tabs,
+      .el-container {
+        height: 100%;
+        box-sizing: border-box;
+      }
+
+      .el-main {
+        padding: 0px;
+        height: 100%;
+      }
+
+      .el-tabs__content {
+        height: calc(100% - 40px);
+        box-sizing: border-box;
+
+        .el-tab-pane {
+          height: 100%;
+        }
+      }
+    }
+
+    :deep(.ele-split-panel) {
+      height: 100%;
+      box-sizing: border-box;
+    }
+  }
+</style>

package/sohelp-vform-eleplus/preview.html

@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
+    <title>模块预览-SohelpBoot</title>
+    <link rel="stylesheet" href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-plus/2.0.4/index.min.css" />
+    <link rel="stylesheet" href="./render.style.css">
+    <style type="text/css">
+    </style>
+</head>
+<body>
+    <div id="app">
+        <div v-loading="loading">
+            <v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef"></v-form-render>
+        </div>
+    </div>
+    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.30/vue.global.min.js"></script>
+    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-plus/2.0.4/index.full.min.js"></script>
+    <script src="https://ks3-cn-beijing.ksyun.com/vform3/render.umd.js?t=20220129"></script>
+<!--    <script src="./render.umd.js?t=20220129"></script>-->
+    <script src="../../lib/axios.min.js"></script>
+    <script>
+        const url = window.location.href;
+        window.BASE_API_URL = url.substring(0,url.indexOf("/dev/"));
+        const { createApp } = Vue;
+        const token = localStorage.getItem("sohelp-boot-access-token");
+        window.$axios = axios.create({
+            baseURL: window.BASE_API_URL,
+            headers: {
+                'Authorization': token
+            }
+        });
+
+        const app = createApp({
+            data() {
+                return {
+                    formJson: {},
+                    formData: {},
+                    optionData: {},
+                    loading: false
+                }
+            },
+            mounted() {
+                this.load();
+            },
+            methods: {
+                load() {
+                    // 获取url参数
+                    const refid = decodeURIComponent(this.getQueryParam("refid") || '');
+                    if (refid) {
+                        this.loading = true;
+                        $axios.get('/engine/web/layout/read?refid=' + refid).then(res => {
+                            const { data: { data } } = res;
+                            if (data && data.code) {
+                                let _data = JSON.parse(data.code);
+                                this.$nextTick(() => {
+                                    this.$refs.vFormRef.setFormJson(_data);
+                                })
+                            }
+                            this.loading = false;
+                        }).catch(err => {
+                            this.$message.error(err);
+                            this.loading = false;
+                        })
+                    } else {
+                        this.$message.error("refid参数未提供");
+                    }
+                },
+                // 获取参数
+                getQueryParam(variable) {
+                    let query = window.location.search.substring(1);
+                    let vars = query.split("&")
+                    for (let i = 0; i < vars.length; i++) {
+                        let pair = vars[i].split("=")
+                        if (pair[0] == variable) {
+                            return pair[1]
+                        }
+                    }
+                    return undefined;
+                }
+            }
+        });
+        app.use(ElementPlus)
+        app.use(VFormRender)
+        app.mount("#app");
+    </script>
+</body>
+
+</html>