diff --git a/docs/zh/guide/advance/compute.md b/docs/zh/guide/advance/compute.md index b55b326e..fa9189ec 100644 --- 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 index 34cbd827..ea531f9b 160000 --- a/packages/fast-admin/fs-admin-antdv +++ b/packages/fast-admin/fs-admin-antdv @@ -1 +1 @@ -Subproject commit 34cbd827dcd411142a24c05b11afcb60248f0721 +Subproject commit ea531f9b410da963630214601a4e5b37ba4bcdb4 diff --git a/packages/fast-crud/src/components/crud/fs-form-item.vue b/packages/fast-crud/src/components/crud/fs-form-item.vue index 551c3eec..69ed9297 100644 --- 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 @@ >
- +
- +
- +
@@ -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 index 3f665c27..6cbc0027 100644 --- 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 new file mode 100644 index 00000000..b52de03b --- /dev/null +++ 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 new file mode 100644 index 00000000..9479793e --- /dev/null +++ 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 index 8a640061..80e40085 100644 --- 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 index d4e1d360..3e0b8b8a 100644 --- 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参数 */ diff --git a/packages/fast-extends/src/uploader/components/fs-images-format.vue b/packages/fast-extends/src/uploader/components/fs-images-format.vue index 0ced6cfd..a6a01b3f 100644 --- a/packages/fast-extends/src/uploader/components/fs-images-format.vue +++ b/packages/fast-extends/src/uploader/components/fs-images-format.vue @@ -2,21 +2,21 @@
@@ -25,8 +25,8 @@