fix: 修复文件上传的一些bug

fast-crud · Dec 9, 2022 · 52cbfff · 52cbfff
1 parent 0ec6d9c
commit 52cbfff
Show file tree

Hide file tree

Showing 19 changed files with 292 additions and 17 deletions.
diff --git a/docs/zh/.vitepress/config.js b/docs/zh/.vitepress/config.js
@@ -203,6 +203,9 @@ module.exports = {
                                         {
                                             text: "fs-editor-wang",
                                             link: '/api/components/extends/editor/components/fs-editor-wang/index'
+                                        },{
+                                            text: "fs-editor-wang5",
+                                            link: '/api/components/extends/editor/components/fs-editor-wang5/index'
                                         }
                                     ]
                                 },

diff --git a/docs/zh/api/common-options.md b/docs/zh/api/common-options.md
@@ -102,3 +102,8 @@ component:{
 }
 ```
 
+
+## xxxRender
+* 说明：文档中所有带render的配置都是指jsx/tsx渲染，请参考vue的jsx文档
+* 类型：Function
+* 相关：[jsx/tsx文档](https://cn.vuejs.org/guide/extras/render-function.html#jsx-tsx)
diff --git a/docs/zh/api/components/extends/editor/components/fs-editor-wang5/index.md b/docs/zh/api/components/extends/editor/components/fs-editor-wang5/index.md
@@ -0,0 +1,18 @@
+# FsEditorWang5
+
+> wangEditor5 组件封装
+> 文档：https://www.wangeditor.com/v5/for-frame.html#使用-1
+
+## Props
+
+| Prop name     | Description                                                                  | Type    | Values | Default |
+| ------------- | ---------------------------------------------------------------------------- | ------- | ------ | ------- |
+| container     | 容器配置<br/>包装 editor 和 toolbar 的外部容器配置，可以设置 class，style 等 | object  | -      |         |
+| mode          | editor 的模式                                                                | string  | -      |         |
+| toolbarConfig | 工具条配置                                                                   | object  | -      |         |
+| editorConfig  | 编辑器默认配置                                                               | object  | -      |         |
+| uploader      | uploader 参数<br/>配置则开启上传                                             | object  | -      |         |
+| readonly      | 只读                                                                         | boolean | -      |         |
+| disabled      | 是否禁用                                                                     | boolean | -      |         |
+
+---
diff --git a/docs/zh/api/components/extends/time/components/fs-time-humanize.md b/docs/zh/api/components/extends/time/components/fs-time-humanize.md
@@ -0,0 +1,17 @@
+# FsTimeHumanize
+
+> 日期人性化格式展示组件
+> 例如几天前，几分钟前，几个小时前
+
+## Props
+
+| Prop name        | Description                                                               | Type                            | Values | Default                            |
+| ---------------- | ------------------------------------------------------------------------- | ------------------------------- | ------ | ---------------------------------- |
+| modelValue       | 日期时间值，支持 long,string,date 等，由 dayjs 转化                       | undefined                       | -      | undefined                          |
+| valueFormat      | 输入格式化，不传则由 dayjs 自动转化                                       | string                          | -      | undefined                          |
+| format           | 日期输出格式化                                                            | string                          | -      | "YYYY-MM-DD HH:mm:ss"              |
+| useFormatGreater | 距离时间超过多少毫秒时，直接使用 format 格式，默认大于 3 天后             | number                          | -      | 1000 _ 60 _ 60 _ 24 _ 3            |
+| options          | HumanizeDuration 参数<br/>https://github.com/EvanHahn/HumanizeDuration.js | HumanizerOptions                | -      | function() {<br/> return {};<br/>} |
+| text             | 前后文本                                                                  | { prev: string; after: string } | -      | function() {<br/> return {};<br/>} |
+
+---
diff --git a/docs/zh/api/crud-options/columns.md b/docs/zh/api/crud-options/columns.md
@@ -134,6 +134,7 @@ const crudOptions = {
 ## [key].column.cellRender
 * 说明：自定义单元格渲染。
 * 类型：Function(scope)
+* 相关：[jsx/tsx文档](https://cn.vuejs.org/guide/extras/render-function.html#jsx-tsx)
 ```js
 { //crudOptions
     columns:{

diff --git a/docs/zh/api/crud-options/form.md b/docs/zh/api/crud-options/form.md
@@ -59,6 +59,7 @@
 * 说明: 可以在字段组件前面自定义渲染
 * 类型：Function
 * 默认：无
+* 相关：[jsx/tsx文档](https://cn.vuejs.org/guide/extras/render-function.html#jsx-tsx)
 ```js
 { // crudOptions.form
     prefixRender(scope){
@@ -71,6 +72,7 @@
 * 说明: 可以在字段组件后面自定义渲染
 * 类型：Function
 * 默认：无
+* 相关：[jsx/tsx文档](https://cn.vuejs.org/guide/extras/render-function.html#jsx-tsx)
 ```js
 { // crudOptions.form
     suffixRender(scope){

diff --git a/packages/fast-admin/fs-admin-antdv b/packages/fast-admin/fs-admin-antdv
diff --git a/packages/fast-admin/fs-admin-naive-ui b/packages/fast-admin/fs-admin-naive-ui
diff --git a/packages/fast-crud/src/components/crud/fs-form-helper.vue b/packages/fast-crud/src/components/crud/fs-form-helper.vue
@@ -39,12 +39,15 @@ export default {
 .fs-form-helper {
   color: #7e7e7e;
   line-height: 1.3;
-  margin-top: 2px;
+  margin-top: 4px;
+  margin-bottom: 6px;
+
   font-size: 12px;
   pre {
     font-family: inherit;
     white-space: pre-wrap;
     word-wrap: break-word;
+    margin-bottom: 0px;
   }
 }
 </style>
diff --git a/packages/fast-crud/src/components/crud/fs-form.vue b/packages/fast-crud/src/components/crud/fs-form.vue
@@ -404,8 +404,11 @@ export default {
     const errorsRef = ref({});
 
     function fillGroupError(fieldErrors) {
+      if (!computedGroup.value?.groupedKeys) {
+        return;
+      }
       for (let key in fieldErrors) {
-        const group = computedGroup.value.groupedKeys[key];
+        const group = computedGroup.value?.groupedKeys[key];
         if (group != null) {
           fieldErrors["group." + group] = true;
         }

diff --git a/packages/fast-extends/package.json b/packages/fast-extends/package.json
@@ -19,6 +19,8 @@
   "license": "MIT",
   "dependencies": {
     "@soerenmartius/vue3-clipboard": "^0.1.2",
+    "@wangeditor/editor": "^5.1.23",
+    "@wangeditor/editor-for-vue": "^5.1.12",
     "ali-oss": "^6.17.1",
     "cos-js-sdk-v5": "^1.4.13",
     "cropperjs": "^1.5.13",

diff --git a/packages/fast-extends/src/editor/components/fs-editor-wang/index.vue b/packages/fast-extends/src/editor/components/fs-editor-wang/index.vue
@@ -7,6 +7,7 @@
 </template>
 
 <script>
+
 import WangEditor from "wangeditor";
 import wangConfig from "./utils/config";
 import defaultConfig from "../../type/config";

diff --git a/packages/fast-extends/src/editor/components/fs-editor-wang5/index.vue b/packages/fast-extends/src/editor/components/fs-editor-wang5/index.vue
@@ -0,0 +1,222 @@
+<template>
+  <div class="fs-editor-wang5" v-bind="container">
+    <Toolbar
+        style="border-bottom: 1px solid #ccc"
+        :ref="toolbarRef"
+        :editor="editorRef"
+        :defaultConfig="toolbarConfig"
+        :mode="mode"
+    />
+    <Editor
+        style="height: 500px; overflow-y: hidden;"
+        :defaultConfig="editorConfig"
+        :mode="mode"
+        @onCreated="handleCreated"
+        v-bind="$attrs"
+    />
+    <fs-uploader ref="uploaderImplRef" :type="uploader?.type" />
+  </div>
+</template>
+
+<script lang="ts">
+import '@wangeditor/editor/dist/css/style.css' // 引入 css
+
+import { onBeforeUnmount,defineComponent, ref, shallowRef, onMounted,watch,computed } from 'vue'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+
+import defaultConfig from "../../type/config";
+import _ from "lodash-es";
+type InsertFnType = (url: string, alt?: string, href?: string) => void
+/**
+ * wangEditor5组件封装
+ * 文档：https://www.wangeditor.com/v5/for-frame.html#使用-1
+ */
+export default defineComponent({
+  components: { Editor, Toolbar },
+  name: "FsEditorWang5",
+  inheritAttrs: false,
+  props: {
+    /**
+     * 容器配置
+     * 包装editor和toolbar的外部容器配置，可以设置class，style等
+     */
+    container:{
+      type:Object
+    },
+    /**
+     * editor的模式
+     */
+    mode:{
+      type:String
+    },
+    /**
+     * 工具条配置
+     */
+    toolbarConfig: {
+      type: Object
+    },
+    /**
+     * 编辑器默认配置
+     */
+    editorConfig:{
+      type: Object
+    },
+    /**
+     * uploader参数
+     * 配置则开启上传
+     */
+    uploader: {
+      type: Object
+    },
+    /**
+     * 只读
+     */
+    readonly:{
+      type: Boolean
+    },
+    /**
+     * 是否禁用
+     */
+    disabled: {
+      type: Boolean
+    }
+  },
+  setup(props:any){
+    // 编辑器实例，必须用 shallowRef
+    const editorRef = shallowRef()
+    const toolbarRef = ref()
+    const uploaderImplRef = ref()
+    const valueHtml = ref('')
+
+    function toggleEnabled(value){
+      if(!editorRef.value){
+        return
+      }
+      if(value){
+        editorRef.value.enable()
+      }else{
+        editorRef.value.disable()
+      }
+    }
+
+    watch(()=>{
+      return props.readonly
+    },(value)=>{
+      toggleEnabled(!value)
+    },{
+      immediate: true
+    })
+
+    watch(()=>{
+      return props.disabled
+    },(value)=>{
+      toggleEnabled(!value)
+    },{
+      immediate: true
+    })
+
+    const toolbarConfig = computed(()=>{
+      return _.merge({ },defaultConfig.wangEditor5.toolbarConfig,props.toolbarConfig)
+    })
+
+    const MENU_CONF:any = {}
+    if (props.uploader) {
+      async function doUpload(option) {
+        option.options = props.uploader;
+        let uploaderRef = uploaderImplRef.value.getUploaderRef();
+        if (uploaderRef == null) {
+          throw new Error("Sorry，The component is not ready yet");
+        }
+        return await uploaderRef?.upload(option);
+      }
+      MENU_CONF.uploadImage = {
+        async customUpload(file: File, insertFn: InsertFnType) {  // TS 语法
+          // async customUpload(file, insertFn) {                   // JS 语法
+          // file 即选中的文件
+          // 自己实现上传，并得到图片 url alt href
+          // 最后插入图片
+
+          const item:any = {
+            status: "uploading",
+            progress: 0,
+            message:undefined
+          };
+
+          const onProgress = (e) => {
+            item.progress = e.percent;
+          };
+          const onError = (e) => {
+            item.status = "error";
+            item.message = "文件上传出错:" + e.message;
+            console.error(item.message, e);
+          };
+          const option = {
+            file: file,
+            fileName: file.name,
+            onProgress,
+            onError
+          };
+
+          const res = await doUpload(option);
+          let url = res?.url;
+          if (props.uploader?.buildUrl) {
+            url = await props.uploader.buildUrl(res);
+          }
+          // 上传图片，返回结果，将图片插入到编辑器中
+          insertFn(url)
+        }
+      };
+    }
+
+
+    const editorConfig = computed(()=>{
+      return _.merge({
+        placeholder: '请输入内容...',
+        MENU_CONF
+      },defaultConfig.wangEditor5.editorConfig,props.editorConfig)
+    })
+
+
+
+    // 组件销毁时，也及时销毁编辑器
+    onBeforeUnmount(() => {
+      const editor = editorRef.value
+      if (editor == null) return
+      editor.destroy()
+    })
+
+    const handleCreated = (editor) => {
+      editorRef.value = editor // 记录 editor 实例，重要！
+    }
+
+    function getEditorRef(){
+      return editorRef
+    }
+    function getToolRef(){
+      return toolbarRef
+    }
+
+
+
+    return {
+      uploaderImplRef,
+      getToolRef,
+      getEditorRef,
+      toolbarRef,
+      editorRef,
+      valueHtml,
+      toolbarConfig,
+      editorConfig,
+      handleCreated
+    };
+  },
+});
+</script>
+<style lang="less">
+.fs-editor-wang5 {
+  border:1px solid #eee;
+  .w-e-full-screen-container{
+    z-index: 20;
+  }
+}
+</style>
diff --git a/packages/fast-extends/src/editor/type/config.js b/packages/fast-extends/src/editor/type/config.js
@@ -1,4 +1,4 @@
 export default {
   wangEditor: {},
-  quillEditor: {}
+  wangEditor5:{editorConfig:{},toolbarConfig:{}},
 };
diff --git a/packages/fast-extends/src/editor/type/types.js b/packages/fast-extends/src/editor/type/types.js
@@ -3,8 +3,8 @@ export default function () {
     "editor-wang": {
       form: { component: { name: "fs-editor-wang" } }
     },
-    "editor-quill": {
-      form: { component: { name: "fs-editor-quill" } }
-    }
+    "editor-wang5": {
+      form: { component: { name: "fs-editor-wang5" } }
+    },
   };
 }