@ebiz/designer-components 0.1.55 → 0.1.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebiz/designer-components",
-  "version": "0.1.55",
+  "version": "0.1.57",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -25,7 +25,9 @@
     "unplugin-auto-import": "^19.0.0",
     "unplugin-vue-components": "^28.0.0",
     "vue": "^3.5.13",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.2.5",
+    "@wangeditor/editor": "^5.1.23",
+    "@wangeditor/editor-for-vue": "^5.1.12"
   },
   "devDependencies": {
     "@opentiny/tiny-engine-mock": "^2.1.0",

package/src/components/EbizApproval.vue

@@ -92,7 +92,7 @@ interface Employee {
 interface Props {
   approverList: (string | number)[] // 选中的审批人ID列表
   ccList: (string | number)[] // 选中的抄送人ID列表
-  key: string // 审批流程的唯一标识
+  workFlowKey: string // 审批流程的唯一标识
   id: number // 审批流程的编号
   required: boolean // 是否必填
   type?: 'organization' | 'role' | 'all' // 查询类型
@@ -106,7 +106,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   approverList: () => [],
   ccList: () => [],
-  key: '',
+  workFlowKey: '',
   id: 0,
   required: true,
   showRootOrg: true,
@@ -120,7 +120,7 @@ const emit = defineEmits(['update:approverList', 'update:ccList', 'change'])
 const fetchHistory = () => {
   dataService.fetch({
     bussinessKey: props.id ? props.id.toString() : null,
-    type: props.key
+    type: props.workFlowKey
   }, {}, '/tasks/process/detail').then(res => {
     selectedApprover.value = res?.variables?.form?.approverList ?? [];
     selectedCC.value = res?.variables?.form?.ccList ?? [];
@@ -244,7 +244,7 @@ const handleAddCC = () => {
 
 
 // 监听查询条件变化
-watch([() => props.type, () => props.value, () => props.showRootOrg, () => props.childDeptEnable], () => {
+watch([() => props.type, () => props.value, () => props.showRootOrg, () => props.childDeptEnable,()=>props.workFlowKey], () => {
   fetchEmployeeList()
 }, { immediate: true })
 </script>

package/src/components/EbizEmployeeSelector.vue

@@ -123,7 +123,7 @@
                         <t-avatar v-if="item.avatar" :image="item.avatar" size="small" />
                         <t-avatar v-else size="small">{{ getAvatarText(item.name) }}</t-avatar>
                       </div>
-                      <div style="display: flex; align-items: center; justify-content: space-between; width: 350px;">
+                      <div style="display: flex; align-items: center; justify-content: space-between; width: 300px;">
                         <div class="employee-info">
                           <div class="employee-code">{{ item.no }} - </div>
                           <div class="employee-name">{{ item.name }}</div>
@@ -150,7 +150,7 @@
                         <t-avatar v-if="item.avatar" :image="item.avatar" size="small" />
                         <t-avatar v-else size="small">{{ getAvatarText(item.name) }}</t-avatar>
                       </div>
-                      <div style="display: flex; align-items: center; justify-content: space-between;width: 350px;">
+                      <div style="display: flex; align-items: center; justify-content: space-between;width: 300px;">
                         <div class="employee-info">
                           <div class="employee-code">{{ item.no }} - </div>
                           <div class="employee-name">{{ item.name }}</div>

package/src/components/EbizRichTextEditor.vue

@@ -0,0 +1,276 @@
+<template>
+    <div class="ebiz-rich-text-editor" style="border: 1px solid #ccc">
+        <Toolbar 
+            style="border-bottom: 1px solid #ccc" 
+            :editor="editorRef" 
+            :defaultConfig="mergedToolbarConfig" 
+            :mode="mode" 
+        />
+        <Editor 
+            :style="{height: `${height}px`, overflowY: 'hidden'}" 
+            v-model="computedModelValue" 
+            :defaultConfig="mergedEditorConfig" 
+            :mode="mode"
+            @onCreated="handleCreated"
+            @onChange="handleChange"
+            @onDestroyed="handleDestroyed"
+            @onFocus="handleFocus"
+            @onBlur="handleBlur"
+            @customAlert="handleCustomAlert"
+            @customPaste="handleCustomPaste"
+        />
+    </div>
+</template>
+
+<script>
+/**
+ * @displayName 富文本编辑器
+ * @description 基于WangEditor的富文本编辑器组件，支持图片和视频上传
+ * @category 表单组件
+ * @name EbizRichTextEditor
+ */
+export default {
+    name: "EbizRichTextEditor"
+}
+</script>
+
+<script setup>
+import '@wangeditor/editor/dist/css/style.css'
+import { defineProps, defineEmits, computed, ref, shallowRef, onBeforeUnmount, onMounted } from 'vue'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+// import { upload } from '../utils/upload'
+
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef()
+
+// 编辑器内容
+const valueHtml = ref('')
+
+// 编辑器模式
+const mode = ref('default') // 或 'simple'
+
+const props = defineProps({
+    /**
+     * 绑定的值
+     */
+    modelValue: {
+        type: String,
+        default: ''
+    },
+    /**
+     * 是否禁用
+     */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 是否只读
+     */
+    readonly: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 占位文本
+     */
+    placeholder: {
+        type: String,
+        default: '请输入内容...'
+    },
+    /**
+     * 编辑器高度
+     */
+    height: {
+        type: [String, Number],
+        default: 300
+    },
+    /**
+     * 工具栏配置
+     */
+    toolbarConfig: {
+        type: Object,
+        default: () => ({})
+    },
+    /**
+     * 编辑器配置
+     */
+    editorConfig: {
+        type: Object,
+        default: () => ({})
+    },
+    /**
+     * 图片上传路径
+     */
+    imagePath: {
+        type: String,
+        default: 'editor'
+    },
+    /**
+     * 视频上传路径
+     */
+    videoPath: {
+        type: String,
+        default: 'video'
+    },
+    /**
+     * 最大长度
+     */
+    maxLength: {
+        type: Number,
+        default: undefined
+    }
+});
+
+const emit = defineEmits([
+    'update:modelValue',
+    'change',
+    'focus',
+    'blur',
+    'created',
+    'destroyed'
+]);
+
+// 计算属性处理v-model双向绑定
+const computedModelValue = computed({
+    get: () => props.modelValue,
+    set: (val) => {
+        emit('update:modelValue', val);
+    }
+});
+
+// 合并工具栏配置
+const mergedToolbarConfig = computed(() => {
+    return {
+        ...props.toolbarConfig
+    };
+});
+
+// 合并编辑器配置
+const mergedEditorConfig = computed(() => {
+    return {
+        placeholder: props.placeholder,
+        readOnly: props.disabled || props.readonly,
+        maxLength: props.maxLength,
+        MENU_CONF: {
+            uploadImage: {
+                customUpload(file, insertFn) {
+                    
+                    upload({
+                        path: props.imagePath,
+                        file: {
+                            name: file.name,
+                            raw: file
+                        },
+                        onSuccess: (res) => {
+                            insertFn(res.url, '', '');
+                        }
+                    });
+                },
+            },
+            uploadVideo: {
+                customUpload(file, insertFn) {
+                    upload({
+                        path: props.videoPath,
+                        file: {
+                            name: file.name,
+                            raw: file
+                        },
+                        onSuccess: (res) => {
+                            insertFn(res.url, '', '');
+                        }
+                    });
+                },
+            },
+            ...props.editorConfig?.MENU_CONF
+        },
+        ...props.editorConfig
+    };
+});
+
+// 编辑器创建完成回调
+const handleCreated = (editor) => {
+    editorRef.value = editor; // 记录编辑器实例
+    emit('created', editor);
+};
+
+// 内容变化事件
+const handleChange = (editor) => {
+    emit('change', editor.getHtml());
+};
+
+// 销毁事件
+const handleDestroyed = (editor) => {
+    emit('destroyed', editor);
+};
+
+// 获得焦点事件
+const handleFocus = (editor) => {
+    emit('focus', editor);
+};
+
+// 失去焦点事件
+const handleBlur = (editor) => {
+    emit('blur', editor);
+};
+
+// 自定义提示事件
+const handleCustomAlert = (info, type) => {
+    console.log(`【自定义提示】${type} - ${info}`);
+};
+
+// 自定义粘贴事件
+const handleCustomPaste = (editor, event, callback) => {
+    console.log('ClipboardEvent 粘贴事件对象', event);
+    // 返回值（注意，vue 事件的返回值，不能用 return）
+    callback(true); // true 继续默认的粘贴行为
+};
+
+// 组件销毁时，销毁编辑器实例
+onBeforeUnmount(() => {
+    const editor = editorRef.value;
+    if (editor === null) return;
+    editor.destroy();
+});
+
+// 暴露编辑器实例和方法
+defineExpose({
+    editor: editorRef,
+    insertText: (text) => {
+        if (editorRef.value) {
+            editorRef.value.insertText(text);
+        }
+    },
+    getHtml: () => {
+        if (editorRef.value) {
+            return editorRef.value.getHtml();
+        }
+        return '';
+    },
+    getText: () => {
+        if (editorRef.value) {
+            return editorRef.value.getText();
+        }
+        return '';
+    }
+});
+</script>
+
+<style scoped>
+.ebiz-rich-text-editor {
+    border-radius: var(--td-radius-default);
+    overflow: hidden;
+}
+
+.ebiz-rich-text-editor :deep(.w-e-text-container) {
+    z-index: 1; /* 避免编辑区域遮挡其他元素 */
+}
+
+.ebiz-rich-text-editor :deep(.w-e-toolbar) {
+    z-index: 2; /* 确保工具栏在编辑区域之上 */
+}
+
+.ebiz-rich-text-editor :deep(.w-e-text-placeholder) {
+    color: var(--td-text-color-placeholder);
+}
+</style> 

package/src/components/senior/EbizSForm/item.vue

@@ -121,6 +121,23 @@
                     @change="handleChange" />
             </template>
 
+            <!-- 富文本编辑器 -->
+            <template v-else-if="type === 'rich-text'">
+                <ebiz-rich-text-editor 
+                    v-model="computedModelValue" 
+                    :placeholder="placeholder || '请输入内容'"
+                    :disabled="disabled" 
+                    :readonly="readonly" 
+                    :height="editorHeight"
+                    :toolbar-config="editorToolbarConfig"
+                    :editor-config="editorConfig"
+                    :image-path="editorImagePath"
+                    :video-path="editorVideoPath"
+                    :max-length="maxLength"
+                    @change="handleChange" 
+                />
+            </template>
+
             <!-- 子表格 -->
             <template v-else-if="type === 'table'">
                 <div class="ebiz-form-table">
@@ -239,7 +256,7 @@ export default {
 </script>
 
 <script setup>
-import { defineProps, defineEmits, computed, watch } from 'vue';
+import { defineProps, defineEmits, computed, watch, onMounted } from 'vue';
 import {
     FormItem as TFormItem,
     Input as TInput,
@@ -263,6 +280,7 @@ import EbizRemoteSelect from '../../EbizRemoteSelect.vue';
 import EbizEmployeeSelector from '../../EbizEmployeeSelector.vue';
 import EbizDepartmentSelector from '../../EbizDepartmentSelector.vue';
 import { EbizUpload } from '../../../index.js'
+import EbizRichTextEditor from '../../EbizRichTextEditor.vue';
 
 const props = defineProps({
     /**
@@ -275,7 +293,7 @@ const props = defineProps({
         validator: (val) => [
             'input', 'number', 'textarea', 'select', 'date', 'datetime', 'time', 'radio',
             'checkbox', 'switch', 'slider', 'upload', 'cascader', 'tree-select',
-            'color-picker', 'employee', 'dept', 'table'
+            'color-picker', 'employee', 'dept', 'table', 'rich-text'
         ].includes(val)
     },
     /**
@@ -649,6 +667,41 @@ const props = defineProps({
     addButtonText: {
         type: String,
         default: '添加数据'
+    },
+    /**
+     * 富文本编辑器高度
+     */
+    editorHeight: {
+        type: [String, Number],
+        default: 300
+    },
+    /**
+     * 富文本编辑器工具栏配置
+     */
+    editorToolbarConfig: {
+        type: Object,
+        default: () => ({})
+    },
+    /**
+     * 富文本编辑器配置
+     */
+    editorConfig: {
+        type: Object,
+        default: () => ({})
+    },
+    /**
+     * 富文本图片上传路径
+     */
+    editorImagePath: {
+        type: String,
+        default: 'editor'
+    },
+    /**
+     * 富文本视频上传路径
+     */
+    editorVideoPath: {
+        type: String,
+        default: 'video'
     }
 });
 
@@ -804,6 +857,10 @@ watch(
     },
     { deep: true }
 );
+
+// 组件挂载时初始化文件列表
+onMounted(() => {
+});
 </script>
 
 <style scoped>

package/src/index.js

@@ -100,6 +100,7 @@ import EbizFileList from './components/EbizFileList.vue'
 import EbizDetailView from './components/EbizDetailView.vue'
 import EbizDetailItem from './components/EbizDetailItem.vue'
 import EbizPdfViewer from './components/EbizPdfViewer.vue'
+import EbizRichTextEditor from './components/EbizRichTextEditor.vue'
 
 // 导出组件
 export {
@@ -242,5 +243,7 @@ export {
   EbizDetailView,
   EbizDetailItem,
   // PDF预览组件
-  EbizPdfViewer
+  EbizPdfViewer,
+  // 富文本编辑器组件
+  EbizRichTextEditor
 }

package/src/views/EbizSForm/index.vue

@@ -4,12 +4,7 @@
     <div class="demo-section">
       <h3>基础表单示例</h3>
       <div class="demo-block">
-        <ebiz-s-form 
-          ref="basicFormRef"
-          :data="formData" 
-          :rules="formRules"
-          show-error-message
-          @success="handleSuccess"
+        <ebiz-s-form ref="basicFormRef" :data="formData" :rules="formRules" show-error-message @success="handleSuccess"
           @error="handleError">
           <ebiz-s-form-item label="姓名" name="name" type="input" placeholder="请输入姓名"></ebiz-s-form-item>
           <ebiz-s-form-item label="年龄" name="age" type="number" placeholder="请输入年龄"></ebiz-s-form-item>
@@ -17,6 +12,10 @@
           <ebiz-s-form-item label="爱好" name="hobbies" type="checkbox" :options="hobbyOptions"></ebiz-s-form-item>
           <ebiz-s-form-item label="职业" name="occupation" type="select" :options="occupationOptions"></ebiz-s-form-item>
           <ebiz-s-form-item label="出生日期" name="birthday" type="date"></ebiz-s-form-item>
+
+          <ebiz-s-form-item v-model="formData.richText" label="富文本" name="richText" type="rich-text"></ebiz-s-form-item>
+
+        
           {{ formData.bio }}
           <ebiz-s-form-item v-model="formData.bio" label="简介" name="bio" type="table" :tableColumns="[
             { name: '名称', key: 'name' },
@@ -33,16 +32,9 @@
           <t-button @click="openEditFormWithData">打开编辑表单（预设数据）</t-button>
           <t-button @click="openEditFormWithId">打开编辑表单（加载详情）</t-button>
         </t-space>
-        <ebiz-s-form 
-          ref="editFormRef"
-          :api-config="submitApiConfig"
-          :detail-api-config="detailApiConfig"
-          :rules="editFormRules"
-          show-error-message
-          reset-on-success
-          @success="handleEditSuccess"
-          @error="handleEditError"
-          @detail-loaded="handleDetailLoaded">
+        <ebiz-s-form ref="editFormRef" :api-config="submitApiConfig" :detail-api-config="detailApiConfig"
+          :rules="editFormRules" show-error-message reset-on-success @success="handleEditSuccess"
+          @error="handleEditError" @detail-loaded="handleDetailLoaded">
           <ebiz-s-form-item label="ID" name="id" type="input" disabled></ebiz-s-form-item>
           <ebiz-s-form-item label="标题" name="title" type="input" placeholder="请输入标题"></ebiz-s-form-item>
           <ebiz-s-form-item label="内容" name="body" type="textarea" placeholder="请输入内容"></ebiz-s-form-item>
@@ -54,10 +46,7 @@
     <div class="demo-section">
       <h3>行内表单示例</h3>
       <div class="demo-block">
-        <ebiz-s-form 
-          :data="inlineFormData" 
-          layout="inline"
-          label-width="60px">
+        <ebiz-s-form :data="inlineFormData" layout="inline" label-width="60px">
           <ebiz-s-form-item label="用户名" name="username" type="input" placeholder="请输入用户名"></ebiz-s-form-item>
           <ebiz-s-form-item label="密码" name="password" type="input" placeholder="请输入密码"></ebiz-s-form-item>
         </ebiz-s-form>
@@ -84,9 +73,7 @@
     <div class="demo-section">
       <h3>顶部标签表单示例</h3>
       <div class="demo-block">
-        <ebiz-s-form 
-          :data="topLabelFormData" 
-          label-align="top">
+        <ebiz-s-form :data="topLabelFormData" label-align="top">
           <ebiz-s-form-item label="邮箱" name="email" type="input" placeholder="请输入邮箱"></ebiz-s-form-item>
           <ebiz-s-form-item label="手机号" name="phone" type="input" placeholder="请输入手机号"></ebiz-s-form-item>
           <ebiz-s-form-item label="是否启用" name="enabled" type="switch"></ebiz-s-form-item>

package/src/utils/upload.ts

@@ -1,126 +0,0 @@
-import {request} from "./request";
-import COS from "cos-js-sdk-v5";
-import OSS from "ali-oss";
-import moment from "moment/moment";
-
-const defaultOnPercent = () => {
-}
-const defaultOnSuccess = () => {
-}
-const defaultOnFail = () => {
-}
-
-export const upload = (options: any) => {
-  const path: string = options.path;
-  const file: any = options.file;
-  const onPercent: Function = options.onProgress || defaultOnPercent;
-  const onSuccess: Function = options.onSuccess || defaultOnSuccess;
-  const onFail: Function = options.onFail || defaultOnFail;
-
-  let credentials: any, url;
-  request.get({
-    url: "/file/getSecretKey"
-  }).then((res) => {
-    if (res.oss_type === 'ALIYUN') {
-      const client = new OSS({
-        // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
-        region: res.region,
-        // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
-        accessKeyId: res.accessKeyId,
-        accessKeySecret: res.accessKeySecret,
-        // 从STS服务获取的安全令牌（SecurityToken）。
-        stsToken: res.securityToken,
-        // 刷新临时访问凭证的时间间隔，单位为毫秒。
-        refreshSTSTokenInterval: 300000,
-        // 填写Bucket名称。
-        bucket: res.bucket
-      });
-      const options = {
-        mime: "json",
-        headers: {"Content-Type": "text/plain"},
-      };
-      client.put(handleUploadName("img", path, file.name), file.raw, options).then((uploadRes: any) => {
-        console.log(uploadRes)
-        // 创建一个 URL 对象
-        const urlObj = new URL(uploadRes.url);
-        // 从 URL 对象中获取路径部分
-        const url = res.host + urlObj.pathname.substring(1);
-
-        request.get({
-          url: "/file/getAccessUrl",
-          params: {
-            url,
-          }
-        }).then(res => {
-          console.log(res)
-          onSuccess({url: res})
-        })
-      }).catch((e: any) => {
-        onFail(e)
-      });
-    } else {
-      credentials = res.credentials;
-      let cos = new COS({
-        getAuthorization: function (options, callback) {
-          callback({
-            TmpSecretId: credentials.tmpSecretId,
-            TmpSecretKey: credentials.tmpSecretKey,
-            SecurityToken: credentials.sessionToken,
-            StartTime: credentials.startTime,
-            ExpiredTime: credentials.expiredTime
-          });
-        }
-      });
-      cos.uploadFile(
-        {
-          Bucket: credentials.bucket,
-          Region: credentials.region,
-          Key: handleUploadName("img", path, file.name),
-          Body: file.raw,
-          SliceSize: 1024 * 1024 * 5 /* 触发分块上传的阈值，超过5MB使用分块上传，小于5MB使用简单上传。可自行设置，非必须 */,
-          onProgress: (progressData) => {
-            if (!!onPercent) {
-              onPercent({file, percent: progressData.percent});
-            }
-          },
-          onFileFinish: (err, data, options) => {
-            url = credentials.path + "/" + options.Key;
-            request.get({
-              url: "/file/getAccessUrl",
-              params: {
-                url,
-              }
-            }).then(res => {
-              console.log(res)
-              onPercent({file, percent: 100});
-              onSuccess({url: res})
-            })
-          }
-        },
-        function (err, data) {
-          onFail(err)
-        }
-      );
-    }
-
-  });
-}
-
-
-// 规范上传图片格式
-const handleUploadName = function (type: string, path: string, file_name: string) {
-  // /img/类型（avatar/category/article）/年月日/md5(文件名+随机字符串+毫秒数)+时间.文件后缀
-  let newFileName =
-    type +
-    '/' +
-    path +
-    '/' +
-    moment(new Date()).format('YYMMDD') +
-    '/' +
-    file_name.split(file_name.substring(file_name.lastIndexOf('.')))[0] +
-    Math.random().toString(36).substring(2) +
-    Date.now() +
-    moment(new Date()).format('HHmm') +
-    file_name.substring(file_name.lastIndexOf('.'));
-  return newFileName;
-};