perf: image-format 的buildUrl支持异步

fast-crud · Dec 16, 2022 · 58229a2 · 58229a2
1 parent c6cbb08
commit 58229a2
Show file tree

Hide file tree

Showing 9 changed files with 276 additions and 74 deletions.
diff --git a/docs/zh/guide/advance/compute.md b/docs/zh/guide/advance/compute.md
@@ -46,11 +46,46 @@ showTableRef.value = true
 > 开发过程中但凡遇到需要根据表单数据或者行数据参与动态计算的，用`compute`或者`asyncCompute`就对了
 
 
+
 * 方法：compute(Function(context))
 * context： [上下文](#context【上下文】)，一般包含`row`/`form`/`index`/`getComponentRef`
 * return: 返回计算后的配置值
 
-示例：
+
+示例1：      
+可应用于某个组件需要多个输入参数的场景       
+比如：每一条记录是一种设备，不同的设备温度的上限和下限不一样，我们一个滑动输入组件，用来显示设备温度。
+
+```js
+const records = [
+    {name:"内部水温",temp:"50",max:100,min:0},
+    {name:"外壳温度",temp:"300",max:1000,min:-10},
+]
+```
+```js
+
+import { useCompute } from "@fast-crud/fast-crud";
+const {compute} = useCompute()
+const crudOptions={
+    columns:{
+        temp:{
+            title:"温度",
+            column:{
+                name:"a-slider",
+                // 此处温度的上限和下限由每一行的max和min字段决定
+                max: compute(({row})=>{
+                    return row.max
+                }),
+                min: compute(({row})=>{
+                    return row.min
+                })
+            }
+        },
+    }
+}
+```
+
+示例2：
 ```js
 import { useCompute } from "@fast-crud/fast-crud";
 const {compute} = useCompute()

diff --git a/packages/fast-admin/fs-admin-antdv b/packages/fast-admin/fs-admin-antdv
diff --git a/packages/fast-crud/src/components/crud/fs-form-item.vue b/packages/fast-crud/src/components/crud/fs-form-item.vue
@@ -18,7 +18,7 @@
       >
         <template #[$fsui.tooltip.content]>
           <span class="fs-form-helper-tooltip">
-            <fs-form-helper :helper="item.helper" :scope="buildItemScope(item)" />
+            <fs-form-helper :helper="item.helper" :scope="scopeComputed" />
           </span>
         </template>
         <template #[$fsui.tooltip.trigger]>
@@ -30,29 +30,25 @@
     </template>
     <div class="fs-form-item-content">
       <div class="fs-form-item-render">
-        <fs-render v-if="item.prefixRender" :render-func="item.prefixRender" :scope="buildItemScope(item)" />
+        <fs-render v-if="item.prefixRender" :render-func="item.prefixRender" :scope="scopeComputed" />
         <div class="fs-form-item-component">
-          <fs-slot-render v-if="formSlot" :slots="formSlot" :scope="buildItemScope(item)" />
+          <fs-slot-render v-if="formSlot" :slots="formSlot" :scope="scopeComputed" />
           <template v-else-if="item.component?.show !== false">
-            <fs-render
-              v-if="item.component?.render"
-              :render-func="item.component.render"
-              :scope="buildItemScope(item)"
-            />
+            <fs-render v-if="item.component?.render" :render-func="item.component.render" :scope="scopeComputed" />
             <fs-component-render
               v-else
               ref="componentRenderRef"
               v-bind="item.component"
               :model-value="modelValue"
-              :scope="buildItemScope(item)"
+              :scope="scopeComputed"
               @update:modelValue="updateModelValue"
             />
           </template>
         </div>
-        <fs-render v-if="item.suffixRender" :render-func="item.suffixRender" :scope="buildItemScope(item)" />
+        <fs-render v-if="item.suffixRender" :render-func="item.suffixRender" :scope="scopeComputed" />
       </div>
       <template v-if="item.helper && computedHelperPosition !== 'label'">
-        <fs-form-helper :helper="item.helper" :scope="buildItemScope(item)" />
+        <fs-form-helper :helper="item.helper" :scope="scopeComputed" />
       </template>
     </div>
   </component>
@@ -95,10 +91,10 @@ export default {
   emits: ["update:modelValue"],
   setup(props, ctx) {
     const componentRenderRef = ref();
-    function buildItemScope(item) {
+    const scopeComputed = computed(() => {
       const scope = props.getContextFn ? props.getContextFn() : {};
-      return { value: props.modelValue, key: item.key, ...scope };
-    }
+      return { value: props.modelValue, key: props.item.key, ...scope };
+    });
 
     function updateModelValue(value) {
       ctx.emit("update:modelValue", value);
@@ -127,7 +123,7 @@ export default {
     });
     return {
       updateModelValue,
-      buildItemScope,
+      scopeComputed,
       getComponentRef,
       componentRenderRef,
       computedHelperPosition,

diff --git a/packages/fast-crud/src/components/render/fs-component-render.jsx b/packages/fast-crud/src/components/render/fs-component-render.jsx
@@ -71,8 +71,7 @@ export default {
      * modelValue的属性名
      */
     vModel: {
-      type: String,
-      Object
+      type: String
     },
     /**
      * 组件参数，会与attrs合并

diff --git a/packages/fast-crud/src/directives/drag-modal.ts b/packages/fast-crud/src/directives/drag-modal.ts
@@ -0,0 +1,50 @@
+import { App, nextTick } from "vue";
+
+export const FsDragModalDirective = {
+  install(app: App) {
+    app.directive("drag-modal", async (el, bindings, vnode) => {
+      await nextTick();
+      // @ts-ignore
+      const { visible, destroyOnClose } = vnode.componentInstance;
+      // 防止未定义 destroyOnClose 关闭弹窗时dom未被销毁，指令被重复调用
+      if (!visible) return;
+      const [modal] = el.getElementsByClassName("ant-modal");
+      const [header] = el.getElementsByClassName("ant-modal-header");
+      let left = 0;
+      let top = 0;
+
+      // 鼠标变成可移动的指示
+      header.style.cursor = "move";
+
+      // 未定义 destroyOnClose 时，dom未被销毁，关闭弹窗再次打开，弹窗会停留在上一次拖动的位置
+      if (!destroyOnClose) {
+        left = modal.left || 0;
+        top = modal.top || 0;
+      }
+      // top 初始值为 offsetTop
+      top = top || modal.offsetTop;
+      header.onmousedown = (e) => {
+        const startX = e.clientX;
+        const startY = e.clientY;
+        header.left = header.offsetLeft;
+        header.top = header.offsetTop;
+        el.onmousemove = (event) => {
+          const endX = event.clientX;
+          const endY = event.clientY;
+          modal.left = header.left + (endX - startX) + left;
+          modal.top = header.top + (endY - startY) + top;
+          modal.style.left = modal.left + "px";
+          modal.style.top = modal.top + "px";
+        };
+        el.onmouseup = () => {
+          left = modal.left;
+          top = modal.top;
+          el.onmousemove = null;
+          el.onmouseup = null;
+          header.releaseCapture && header.releaseCapture();
+        };
+        header.setCapture && header.setCapture();
+      };
+    });
+  }
+};
diff --git a/packages/fast-crud/src/directives/index.ts b/packages/fast-crud/src/directives/index.ts
@@ -0,0 +1 @@
+export * from "./drag-modal";
diff --git a/packages/fast-crud/src/index.ts b/packages/fast-crud/src/index.ts
@@ -13,6 +13,9 @@ const { dict, setDictRequest } = useDictDefine();
 const { ComputeValue, compute, asyncCompute } = useCompute();
 export { ComputeValue, compute, asyncCompute, dict, utils, useI18n, uiContext };
 export * from "./d.ts/index";
+
+import * as directives from "./directives";
+export * from "./directives";
 export const FastCrud = {
   install(app, options) {
     if (options?.ui) {
@@ -33,6 +36,11 @@ export const FastCrud = {
       app.component(key, com);
     }
 
+    for (const key in directives) {
+      const d = directives[key];
+      app.use(d);
+    }
+
     types.install();
 
     app.config.globalProperties.$fsui = uiContext.get();

diff --git a/packages/fast-extends/src/uploader/components/fs-file-uploader.vue b/packages/fast-extends/src/uploader/components/fs-file-uploader.vue
@@ -58,6 +58,13 @@ export default {
         };
       }
     },
+    buildUrls: {
+      default() {
+        return async (urls) => {
+          return urls;
+        };
+      }
+    },
     /**
      * 上传按钮配置，参考FsButton参数
      */