sohelp-eleplus 1.1.1-8.beta.1

package/sohelp-rate/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-relation/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>输入框，外键关键</div>
+</template>
+<script>
+export default {
+  name: "SohelpRelation"
+}
+</script>
+<style scoped>
+
+</style>

package/sohelp-rich-text/index.vue

@@ -0,0 +1,242 @@
+<!-- 富文本编辑器 -->
+<template>
+  <component v-if="inlineEditor" :is="tagName" :id="elementId" />
+  <textarea v-else :id="elementId"></textarea>
+</template>
+
+<script setup>
+  import {
+    watch,
+    onMounted,
+    onBeforeUnmount,
+    onActivated,
+    onDeactivated,
+    nextTick,
+    useAttrs
+  } from 'vue';
+  import tinymce from 'tinymce/tinymce';
+  import 'tinymce/themes/silver';
+  import 'tinymce/icons/default';
+  import 'tinymce/plugins/code';
+  import 'tinymce/plugins/preview';
+  import 'tinymce/plugins/fullscreen';
+  import 'tinymce/plugins/paste';
+  import 'tinymce/plugins/searchreplace';
+  //import 'tinymce/plugins/save';
+  //import 'tinymce/plugins/autosave';
+  import 'tinymce/plugins/link';
+  import 'tinymce/plugins/autolink';
+  import 'tinymce/plugins/image';
+  import 'tinymce/plugins/media';
+  import 'tinymce/plugins/table';
+  import 'tinymce/plugins/codesample';
+  import 'tinymce/plugins/lists';
+  import 'tinymce/plugins/advlist';
+  import 'tinymce/plugins/hr';
+  import 'tinymce/plugins/charmap';
+  import 'tinymce/plugins/emoticons';
+  import 'tinymce/plugins/anchor';
+  import 'tinymce/plugins/directionality';
+  import 'tinymce/plugins/pagebreak';
+  import 'tinymce/plugins/quickbars';
+  import 'tinymce/plugins/nonbreaking';
+  import 'tinymce/plugins/visualblocks';
+  import 'tinymce/plugins/visualchars';
+  import 'tinymce/plugins/wordcount';
+  import 'tinymce/plugins/emoticons/js/emojis';
+  import { storeToRefs } from 'pinia';
+  import { useThemeStore } from '@/store/modules/theme';
+  import {
+    DEFAULT_CONFIG,
+    DARK_CONFIG,
+    uuid,
+    bindHandlers,
+    openAlert
+  } from './util';
+
+  const props = defineProps({
+    /** 编辑器唯一id */
+    id: String,
+    /** v-model */
+    modelValue: String,
+    /** 编辑器配置 */
+    init: Object,
+    /** 是否内联模式 */
+    inline: Boolean,
+    /** model events */
+    modelEvents: {
+      type: String,
+      default: 'change input undo redo'
+    },
+    /** 内联模式标签名 */
+    tagName: {
+      type: String,
+      default: 'div'
+    },
+    /** 是否禁用 */
+    disabled: Boolean,
+    /** 是否跟随框架主题 */
+    autoTheme: {
+      type: Boolean,
+      default: true
+    },
+    /** 不跟随框架主题时是否使用暗黑主题 */
+    darkTheme: Boolean
+  });
+
+  const emit = defineEmits(['update:modelValue']);
+
+  const attrs = useAttrs();
+  const themeStore = useThemeStore();
+  const { darkMode } = storeToRefs(themeStore);
+
+  /** 编辑器唯一id */
+  const elementId = props.id || uuid('tiny-vue');
+
+  /** 编辑器实例 */
+  let editorIns = null;
+
+  /** 是否内联模式 */
+  const inlineEditor = props.init?.inline || props.inline;
+
+  /** 更新value */
+  const updateValue = (value) => {
+    emit('update:modelValue', value);
+  };
+
+  /** 修改内容 */
+  const setContent = (value) => {
+    if (
+      editorIns &&
+      typeof value === 'string' &&
+      value !== editorIns.getContent()
+    ) {
+      editorIns.setContent(value);
+    }
+  };
+
+  /** 渲染编辑器 */
+  const render = () => {
+    const isDark = props.autoTheme ? darkMode.value : props.darkTheme;
+    tinymce.init({
+      ...DEFAULT_CONFIG,
+      ...(isDark ? DARK_CONFIG : {}),
+      ...props.init,
+      selector: `#${elementId}`,
+      readonly: props.disabled,
+      inline: inlineEditor,
+      setup: (editor) => {
+        editorIns = editor;
+        editor.on('init', (e) => {
+          // 回显初始值
+          if (props.modelValue) {
+            setContent(props.modelValue);
+          }
+          // v-model
+          editor.on(props.modelEvents, () => {
+            updateValue(editor.getContent());
+          });
+          // valid events
+          bindHandlers(e, attrs, editor);
+        });
+        if (typeof props.init?.setup === 'function') {
+          props.init.setup(editor);
+        }
+      }
+    });
+  };
+
+  /** 销毁编辑器 */
+  const destory = () => {
+    if (tinymce != null && editorIns != null) {
+      tinymce.remove(editorIns);
+      editorIns = null;
+    }
+  };
+
+  /** 弹出提示框 */
+  const alert = (option) => {
+    openAlert(editorIns, option);
+  };
+
+  defineExpose({ editorIns, alert });
+
+  watch(
+    () => props.modelValue,
+    (val, prevVal) => {
+      if (val !== prevVal) {
+        setContent(val || '');
+      }
+    }
+  );
+
+  watch(
+    () => props.disabled,
+    (disable) => {
+      if (editorIns !== null) {
+        if (typeof editorIns.mode?.set === 'function') {
+          editorIns.mode.set(disable ? 'readonly' : 'design');
+        } else {
+          editorIns.setMode(disable ? 'readonly' : 'design');
+        }
+      }
+    }
+  );
+
+  watch(
+    () => props.tagName,
+    () => {
+      destory();
+      nextTick(() => {
+        render();
+      });
+    }
+  );
+
+  watch(darkMode, () => {
+    if (props.autoTheme) {
+      destory();
+      nextTick(() => {
+        render();
+      });
+    }
+  });
+
+  onMounted(() => {
+    render();
+  });
+
+  onBeforeUnmount(() => {
+    destory();
+  });
+
+  onActivated(() => {
+    render();
+  });
+
+  onDeactivated(() => {
+    destory();
+  });
+</script>
+
+<script>
+  export default {
+    name: 'SohelpRichText'
+  };
+</script>
+
+<style>
+  body .tox.tox-tinymce-aux,
+  body.tox-fullscreen .tox.tox-tinymce-aux {
+    z-index: 19990000;
+  }
+
+  textarea[id^='tiny-vue'] {
+    width: 0;
+    height: 0;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    box-sizing: border-box;
+  }
+</style>

package/sohelp-rich-text/util.js

@@ -0,0 +1,231 @@
+const BASE_URL = import.meta.env.BASE_URL;
+
+
+/** 默认加载插件 */
+const PLUGINS = [
+  'code',
+  'preview',
+  'fullscreen',
+  'paste',
+  'searchreplace',
+  //'save',
+  //'autosave',
+  'link',
+  'autolink',
+  'image',
+  'media',
+  'table',
+  'codesample',
+  'lists',
+  'advlist',
+  'hr',
+  'charmap',
+  'emoticons',
+  'anchor',
+  'directionality',
+  'pagebreak',
+  'quickbars',
+  'nonbreaking',
+  'visualblocks',
+  'visualchars',
+  'wordcount'
+].join(' ');
+
+/** 默认工具栏布局 */
+const TOOLBAR = [
+  'fullscreen',
+  'preview',
+  'code',
+  '|',
+  'undo',
+  'redo',
+  '|',
+  'forecolor',
+  'backcolor',
+  '|',
+  'bold',
+  'italic',
+  'underline',
+  'strikethrough',
+  '|',
+  'alignleft',
+  'aligncenter',
+  'alignright',
+  'alignjustify',
+  '|',
+  'outdent',
+  'indent',
+  '|',
+  'numlist',
+  'bullist',
+  '|',
+  'formatselect',
+  'fontselect',
+  'fontsizeselect',
+  '|',
+  'link',
+  'image',
+  'media',
+  'emoticons',
+  'charmap',
+  'anchor',
+  'pagebreak',
+  'codesample',
+  '|',
+  'ltr',
+  'rtl'
+].join(' ');
+
+/** 默认配置 */
+export const DEFAULT_CONFIG = {
+  height: 300,
+  branding: false,
+  skin_url: BASE_URL + 'tinymce/skins/ui/oxide',
+  content_css: BASE_URL + 'tinymce/skins/content/default/content.min.css',
+  language_url: BASE_URL + 'tinymce/langs/zh_CN.js',
+  language: 'zh_CN',
+  plugins: PLUGINS,
+  toolbar: TOOLBAR,
+  draggable_modal: true,
+  toolbar_mode: 'sliding',
+  quickbars_insert_toolbar: '',
+  convert_urls: false,
+  images_upload_handler: (blobInfo, success, error) => {
+    if (blobInfo.blob().size / 1024 > 400) {
+      error('大小不能超过 400KB');
+      return;
+    }
+    success('data:image/jpeg;base64,' + blobInfo.base64());
+  },
+  file_picker_types: 'media image file',
+  file_picker_callback: () => {}
+};
+
+/** 暗黑主题配置 */
+export const DARK_CONFIG = {
+  skin_url: BASE_URL + 'tinymce/skins/ui/oxide-dark',
+  content_css: BASE_URL + 'tinymce/skins/content/dark/content.min.css'
+};
+
+/** 支持监听的事件 */
+export const VALID_EVENTS = [
+  'onActivate',
+  'onAddUndo',
+  'onBeforeAddUndo',
+  'onBeforeExecCommand',
+  'onBeforeGetContent',
+  'onBeforeRenderUI',
+  'onBeforeSetContent',
+  'onBeforePaste',
+  'onBlur',
+  'onChange',
+  'onClearUndos',
+  'onClick',
+  'onContextMenu',
+  'onCopy',
+  'onCut',
+  'onDblclick',
+  'onDeactivate',
+  'onDirty',
+  'onDrag',
+  'onDragDrop',
+  'onDragEnd',
+  'onDragGesture',
+  'onDragOver',
+  'onDrop',
+  'onExecCommand',
+  'onFocus',
+  'onFocusIn',
+  'onFocusOut',
+  'onGetContent',
+  'onHide',
+  'onInit',
+  'onKeyDown',
+  'onKeyPress',
+  'onKeyUp',
+  'onLoadContent',
+  'onMouseDown',
+  'onMouseEnter',
+  'onMouseLeave',
+  'onMouseMove',
+  'onMouseOut',
+  'onMouseOver',
+  'onMouseUp',
+  'onNodeChange',
+  'onObjectResizeStart',
+  'onObjectResized',
+  'onObjectSelected',
+  'onPaste',
+  'onPostProcess',
+  'onPostRender',
+  'onPreProcess',
+  'onProgressState',
+  'onRedo',
+  'onRemove',
+  'onReset',
+  'onSaveContent',
+  'onSelectionChange',
+  'onSetAttrib',
+  'onSetContent',
+  'onShow',
+  'onSubmit',
+  'onUndo',
+  'onVisualAid'
+];
+
+let unique = 0;
+
+/**
+ * 生成编辑器 id
+ */
+export function uuid(prefix) {
+  const time = Date.now();
+  const random = Math.floor(Math.random() * 1000000000);
+  unique++;
+  return prefix + '_' + random + unique + String(time);
+}
+
+/**
+ * 绑定事件
+ */
+export function bindHandlers(initEvent, listeners, editor) {
+  const validEvents = VALID_EVENTS.map((event) => event.toLowerCase());
+  Object.keys(listeners)
+    .filter((key) => validEvents.includes(key.toLowerCase()))
+    .forEach((key) => {
+      const handler = listeners[key];
+      if (typeof handler === 'function') {
+        if (key === 'onInit') {
+          handler(initEvent, editor);
+        } else {
+          editor.on(key.substring(2), (e) => handler(e, editor));
+        }
+      }
+    });
+}
+
+/**
+ * 弹出提示框
+ */
+export function openAlert(editor, option = {}) {
+  editor?.windowManager?.open?.({
+    title: option.title ?? '提示',
+    body: {
+      type: 'panel',
+      items: [
+        {
+          type: 'htmlpanel',
+          html: `<p>${option.content ?? ''}</p>`
+        }
+      ]
+    },
+    buttons: [
+      {
+        type: 'cancel',
+        name: 'closeButton',
+        text: '确定',
+        primary: true
+      }
+    ]
+  });
+}

package/sohelp-richtext/index.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>Richtext</div>
+</template>
+
+<script setup>
+
+</script>
+<style scoped>
+
+</style>

package/sohelp-role-select/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <sohelp-dyn-select
+    v-bind="$attrs"
+    :url="url"
+    :labelField="labelField"
+    :valueField="valueField"
+    v-model="modelValue"
+  ></sohelp-dyn-select>
+</template>
+<script setup>
+import SohelpDynSelect from "../sohelp-dyn-select/index.vue";
+const modelValue = defineModel("modelValue", { type: [String, Number, Array], default: "" });
+const props = defineProps({
+  url: {
+    type: String,
+    default: "/engine/web/role/list"
+  },
+  labelField: {
+    type: String,
+    default: "role_name"
+  },
+  valueField: {
+    type: String,
+    default: "id"
+  }
+});
+</script>
+<script>
+export default {
+  name: "SohelpRoleSelect"
+};
+</script>
+<style></style>

package/sohelp-search/index.vue

@@ -0,0 +1,49 @@
+<template>
+    <el-button v-if="!showSearch" @click="showSearch=true">筛选</el-button>
+    <el-form v-if="showSearch">
+      <el-form-item label="dsd">
+        <el-input></el-input>
+      </el-form-item>
+      <el-button @click="showSearch=false">关闭</el-button>
+    </el-form>
+    <sohelp-vxe-grid refid="/商邦示例/组件数据!数据列表"></sohelp-vxe-grid>
+</template>
+<script setup>
+//查询条件
+import {ref} from "vue";
+import SohelpVxeGrid from "../sohelp-vxe-grid/index.vue";
+
+const condition = {
+  "string": {
+    "EQ": "等于",
+    "LIKE": "包含",
+    "LLIKE": "左包含",
+    "RLIKE": "右包含",
+    "NOTLIKE": "不含包"
+  },
+  "number": {
+    "EQ": "等于",
+    "GEQ": "大等于",
+    "LET": "小等于",
+    "NOTEQ": "不等于"
+  },
+  "dict": {
+    "selected": true //多选与单选
+  }
+}
+
+const showSearch = ref(false);
+const showSearchForm = () => {
+  showSearch.value = true;
+}
+
+
+</script>
+<script>
+export default {
+  name: 'SohelpSearch',
+  setup(props, {emit, attrs}) {
+  }
+};
+</script>
+<style></style>

package/sohelp-search-pro-form/index.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+  $END$
+</template>
+
+<style scoped lang="scss">
+
+</style>