plain-design 1.0.0-beta.7 → 1.0.0-beta.71

package/src/packages/components/Object/createObjectRender.multiple.tsx

@@ -1,289 +1,289 @@
-import {iObjectCompositionParam, iObjectSelectOption} from "./object.utils";
-import {createEffects} from "plain-utils/utils/createEffects";
-import {Select} from "../Select";
-import {computed, reactive, useModel, useRefs} from "plain-design-composition";
-import {PlainObject} from "plain-utils/utils/event";
-import {delay} from "plain-utils/utils/delay";
-import {SelectOption} from "../SelectOption";
-import {iSelectProps} from "../Select/select.utils";
-import i18n from "../i18n";
-
-/**
- * 渲染对象选择框多选
- * @author  韦胜健
- * @date    2023.1.25 14:49
- */
-export function createObjectRenderMultiple(
-  { props, hooks, classes, inputSlots, event, object, loading, loadData, editComputed }: iObjectCompositionParam
-) {
-  const { effects } = createEffects();
-
-  const model = useModel(() => props.modelValue as PlainObject[] | null | undefined, event.emit.onUpdateModelValue as any, {
-    /**
-     * 当绑定值变化时重新计算select.state.value，更新选中的选项状态
-     * @author  韦胜健
-     * @date    2023.1.25 14:50
-     */
-    onChange: async (newVal, oldVal) => {
-      if (!!newVal && !newVal.length) {newVal = null;}
-      if (!!oldVal && !oldVal.length) {oldVal = null;}
-      if (newVal == oldVal && newVal == null) {return;}
-      if (!!newVal && !!oldVal && newVal.length === oldVal.length && newVal.every(i => !!oldVal!.find(j => j[props.keyField] === i[props.keyField]))) {return;}
-      await delay();
-      selectHandler.reset();
-    }
-  });
-
-  const { refs, onRef } = useRefs({ select: Select });
-
-  const publicHandler = {
-    /**
-     * 清空值
-     * @author  韦胜健
-     * @date    2023.1.25 8:17
-     */
-    onClear: () => {
-      model.value = null;
-      selectHandler.reset();
-    },
-    /**
-     * 应用新值
-     * @author  韦胜健
-     * @date    2023.1.25 8:17
-     */
-    onSelect: (selected: PlainObject[] | null | undefined) => {
-      if (!selected) {
-        publicHandler.onClear();
-      } else {
-        model.value = [...selected];
-      }
-      /*更新选中选项的状态*/
-      selectHandler.state.value = (model.value || []).map(i => i[props.keyField]);
-      event.emit.onSelect(selected);
-    },
-  };
-
-  const inputHandler = (() => {
-    const state = reactive({
-      /*多值输入框的绑定输入文本*/
-      multipleText: null as null | string,
-    });
-    const handler = {
-      /*处理获取焦点动作*/
-      onFocus: (e: FocusEvent) => {
-        hooks.onFocus.exec(e);
-      },
-      /*处理失去焦点动作*/
-      onBlur: (e: FocusEvent) => {
-        state.multipleText = null;
-        hooks.onBlur.exec(e);
-      },
-      /*处理输入值变化动作，如果没有禁用输入搜索，则立即开启加载状态*/
-      onUpdateMultipleText: (val: string | null) => {
-        if (props.disableFilter) {return;}
-        loading.value = !!val && !!val.trim().length;
-        state.multipleText = val;
-        hooks.onInputChange.exec(val);
-      },
-      /**
-       * 处理回车添加标签的动作，这里不做任何处理在回车事件中处理选中/取消选中当前元素
-       * @author  韦胜健
-       * @date    2023.1.25 14:47
-       */
-      handleAddTag: () => {return new Promise<void>(() => null);},
-      /**
-       * 处理移除标签动作
-       * @author  韦胜健
-       * @date    2023.1.25 14:47
-       */
-      handleRemoveTag: async (data: { index: number }) => {
-        /**
-         * 这里之所以要await delay；原因是因为如果直接删除这个option的话，会导致这个option所对应的multiple input tag消失
-         * 导致useClickOutside在判断的时候检测到  点击的close icon不是reference的子节点从而关闭popper。
-         * 这样做的原因就是避免在delete元素的时候关闭popper
-         * @author  韦胜健
-         * @date    2022/8/9 11:29
-         */
-        await delay();
-        const modelValue = [...model.value!];
-        modelValue.splice(data.index, 1);
-        publicHandler.onSelect(modelValue);
-      },
-    };
-    const inputAttrs = computed(() => {
-      /*当前选中数据的显示值*/
-      const label = props.modelValue;
-      /*空值占位符，没有focus的时候就显示真实的placeholder，否则显示当前匹配option的label*/
-      const placeholder = props.placeholder;
-      /*input绑定值，focus的时候显示具体绑定值，没有focus的时候显示匹配option的label*/
-      const multipleText = !props.disableFilter ? state.multipleText : label;
-      /*显示的数组文本*/
-      const inputValue = model.value?.map(i => i[props.labelField]);
-
-      return ({
-        ...handler,
-        multiple: true,
-        multipleText: multipleText,
-        placeholder,
-        modelValue: inputValue,
-        customReadonly: false,
-        loading: false,
-        clearHandler: publicHandler.onClear
-      });
-    });
-    return { state, inputAttrs };
-  })();
-
-  const selectHandler = (() => {
-
-    /**
-     * 重置Select的绑定值以及选项
-     * @author  韦胜健
-     * @date    2023.1.25 14:52
-     */
-    const getSelectValue = (): { value: string[] | null, option: iObjectSelectOption[] | null } => {
-      return !model.value || !model.value.length ? {
-        value: null,
-        option: null,
-      } : {
-        value: model.value.map(i => i[props.keyField]),
-        option: null,
-      };
-    };
-
-    const state = reactive(getSelectValue());
-
-    const reset = () => {Object.assign(state, getSelectValue());};
-
-    /**
-     * 输入搜索关键词的时候查询匹配的选项并且更新为Select的选项子组件
-     * @author  韦胜健
-     * @date    2023.1.25 14:53
-     */
-    effects.push(
-      hooks.onInputChange.use(val => {
-        state.option = null;
-        if (!val || !val.trim().length) {return;}
-        loadData(val, data => {state.option = data;});
-      })
-    );
-
-    const handler = {
-      /*popper开启的时候立即清空输入值，等待输入搜索关键词*/
-      onShow: () => {inputHandler.state.multipleText = null;},
-      /*popper关闭的时候，重置绑定值；不能在这里重置 inputHandler.state.inputValue，因为当选中select选项的时候也会触发onClose动作*/
-      onClose: () => {Object.assign(state, getSelectValue());},
-    };
-
-    /*监听select的选中选项动作*/
-    const onSelectChange = (codes: string[] | null) => {
-      const list = (state.option || []).map(i => i.data!);
-      const modelValue = [...model.value || []];
-      const leafValue = modelValue.filter(i => list.findIndex(j => j[props.keyField] === i[props.keyField]) === -1);
-      const externalValue = !codes ? [] : list.filter(i => codes!.indexOf(i[props.keyField]) > -1);
-
-      publicHandler.onSelect([...leafValue, ...externalValue]);
-    };
-    const checkHandler: Partial<iSelectProps> = {
-      /**
-       * 全选当前列表
-       * @author  韦胜健
-       * @date    2023.1.25 14:11
-       */
-      handleCheckAll: (options) => {
-        const list = options.map(i => i.data!);
-        const modelValue = [...model.value || []];
-        const leafValue = modelValue.filter(i => list.findIndex(j => j[props.keyField] === i[props.keyField]) === -1);
-
-        publicHandler.onSelect([...leafValue, ...list,]);
-      },
-      /**
-       * 清空当前列表的选中
-       * @author  韦胜健
-       * @date    2023.1.25 14:11
-       */
-      handleUncheckAll: (options) => {
-        const list = options.map(i => i.data!);
-        const modelValue = [...model.value || []];
-        const leafValue = modelValue.filter(i => list.findIndex(j => j[props.keyField] === i[props.keyField]) === -1);
-
-        publicHandler.onSelect([...leafValue,]);
-      },
-      /**
-       * 反选当前列表
-       * @author  韦胜健
-       * @date    2023.1.25 14:12
-       */
-      handleCheckReverse: (options) => {
-        const list = options.map(i => i.data!);
-        const modelValue = [...model.value || []];
-        const leafValue = modelValue.filter(i => list.findIndex(j => j[props.keyField] === i[props.keyField]) === -1);
-        const externalValue = list.filter(i => modelValue.findIndex(j => j[props.keyField] === i[props.keyField]) === -1);
-
-        publicHandler.onSelect([...leafValue, ...externalValue]);
-      },
-    };
-    /*监听popper的部分参数*/
-    const popperAttrs = computed(() => ({ ...handler, }));
-
-    /*给select传递的属性*/
-    const selectAttrs = computed(() => ({
-      ...checkHandler,
-      modelValue: state.value,
-      onUpdateModelValue: onSelectChange,
-      multiple: true,
-      loading: loading.value,
-      class: classes.value,
-      inputSlots: inputSlots,
-      suffixIcon: null as any,
-      popperAttrs: popperAttrs.value,
-      inputAttrs: inputHandler.inputAttrs.value,
-      /*禁用select的输入筛选，让select不处理搜索关键词避免隐藏部分option选项*/
-      disableFilter: true,
-      /*没有关键词的时候，提示输入关键词，已经有关键词并且没有选项的情况下提示placeholder*/
-      noDataLabel: !inputHandler.state.multipleText && state.option == null ? (props.searchPlaceholder || i18n('table.pleaseEnterSearchKey').d('请输入搜索关键词')) : undefined
-    }));
-    return { state, popperAttrs, onSelectChange, selectAttrs, reset };
-
-  })();
-
-  /**
-   * object服务选择处理
-   * @author  韦胜健
-   * @date    2023.1.25 8:28
-   */
-  const pickHandler = (() => {
-    const pick = async () => {
-      refs.select?.methods.hide();
-      await props.beforeOpenPicker?.();
-      const selected = await object({ option: props.option, selected: model.value!, multiple: true, });
-      publicHandler.onSelect(selected);
-      selectHandler.reset();
-      event.emit.onPick(selected);
-    };
-
-    /*点击后缀图标的时候，打开选择弹窗*/
-    effects.push(hooks.onClickSuffixIcon.use(() => {editComputed.value.editable && pick();}));
-
-    return { pick };
-  })();
-
-  effects.push(
-    hooks.onRender.use({
-      processor: ({ list, render }) => {list.push({ render, key: 'multiple', seq: 1 });},
-      render: () => (
-        <Select
-          ref={onRef.select}
-          {...selectHandler.selectAttrs.value}
-          v-slots={{
-            default: () => (
-              selectHandler.state.option?.map(({ label, val, data }) => <SelectOption label={label} val={val} data={data} key={val as any}/>)
-            )
-          }}
-        />
-      )
-    })
-  );
-
-  return effects.clear;
-}
+import {iObjectCompositionParam, iObjectSelectOption} from "./object.utils";
+import {createEffects} from "plain-utils/utils/createEffects";
+import {Select} from "../Select";
+import {computed, reactive, useModel, useRefs} from "plain-design-composition";
+import {PlainObject} from "plain-utils/utils/event";
+import {delay} from "plain-utils/utils/delay";
+import {SelectOption} from "../SelectOption";
+import {iSelectProps} from "../Select/select.utils";
+import i18n from "../i18n";
+
+/**
+ * 渲染对象选择框多选
+ * @author  韦胜健
+ * @date    2023.1.25 14:49
+ */
+export function createObjectRenderMultiple(
+  { props, hooks, classes, inputSlots, event, object, loading, loadData, editComputed }: iObjectCompositionParam
+) {
+  const { effects } = createEffects();
+
+  const model = useModel(() => props.modelValue as PlainObject[] | null | undefined, event.emit.onUpdateModelValue as any, {
+    /**
+     * 当绑定值变化时重新计算select.state.value，更新选中的选项状态
+     * @author  韦胜健
+     * @date    2023.1.25 14:50
+     */
+    onChange: async (newVal, oldVal) => {
+      if (!!newVal && !newVal.length) {newVal = null;}
+      if (!!oldVal && !oldVal.length) {oldVal = null;}
+      if (newVal == oldVal && newVal == null) {return;}
+      if (!!newVal && !!oldVal && newVal.length === oldVal.length && newVal.every(i => !!oldVal!.find(j => j[props.keyField] === i[props.keyField]))) {return;}
+      await delay();
+      selectHandler.reset();
+    }
+  });
+
+  const { refs, onRef } = useRefs({ select: Select });
+
+  const publicHandler = {
+    /**
+     * 清空值
+     * @author  韦胜健
+     * @date    2023.1.25 8:17
+     */
+    onClear: () => {
+      model.value = null;
+      selectHandler.reset();
+    },
+    /**
+     * 应用新值
+     * @author  韦胜健
+     * @date    2023.1.25 8:17
+     */
+    onSelect: (selected: PlainObject[] | null | undefined) => {
+      if (!selected) {
+        publicHandler.onClear();
+      } else {
+        model.value = [...selected];
+      }
+      /*更新选中选项的状态*/
+      selectHandler.state.value = (model.value || []).map(i => i[props.keyField]);
+      event.emit.onSelect(selected);
+    },
+  };
+
+  const inputHandler = (() => {
+    const state = reactive({
+      /*多值输入框的绑定输入文本*/
+      multipleText: null as null | string,
+    });
+    const handler = {
+      /*处理获取焦点动作*/
+      onFocus: (e: FocusEvent) => {
+        hooks.onFocus.exec(e);
+      },
+      /*处理失去焦点动作*/
+      onBlur: (e: FocusEvent) => {
+        state.multipleText = null;
+        hooks.onBlur.exec(e);
+      },
+      /*处理输入值变化动作，如果没有禁用输入搜索，则立即开启加载状态*/
+      onUpdateMultipleText: (val: string | null) => {
+        if (props.disableFilter) {return;}
+        loading.value = !!val && !!val.trim().length;
+        state.multipleText = val;
+        hooks.onInputChange.exec(val);
+      },
+      /**
+       * 处理回车添加标签的动作，这里不做任何处理在回车事件中处理选中/取消选中当前元素
+       * @author  韦胜健
+       * @date    2023.1.25 14:47
+       */
+      handleAddTag: () => {return new Promise<void>(() => null);},
+      /**
+       * 处理移除标签动作
+       * @author  韦胜健
+       * @date    2023.1.25 14:47
+       */
+      handleRemoveTag: async (data: { index: number }) => {
+        /**
+         * 这里之所以要await delay；原因是因为如果直接删除这个option的话，会导致这个option所对应的multiple input tag消失
+         * 导致useClickOutside在判断的时候检测到  点击的close icon不是reference的子节点从而关闭popper。
+         * 这样做的原因就是避免在delete元素的时候关闭popper
+         * @author  韦胜健
+         * @date    2022/8/9 11:29
+         */
+        await delay();
+        const modelValue = [...model.value!];
+        modelValue.splice(data.index, 1);
+        publicHandler.onSelect(modelValue);
+      },
+    };
+    const inputAttrs = computed(() => {
+      /*当前选中数据的显示值*/
+      const label = props.modelValue;
+      /*空值占位符，没有focus的时候就显示真实的placeholder，否则显示当前匹配option的label*/
+      const placeholder = props.placeholder;
+      /*input绑定值，focus的时候显示具体绑定值，没有focus的时候显示匹配option的label*/
+      const multipleText = !props.disableFilter ? state.multipleText : label;
+      /*显示的数组文本*/
+      const inputValue = model.value?.map(i => i[props.labelField]);
+
+      return ({
+        ...handler,
+        multiple: true,
+        multipleText: multipleText,
+        placeholder,
+        modelValue: inputValue,
+        customReadonly: false,
+        loading: false,
+        clearHandler: publicHandler.onClear
+      });
+    });
+    return { state, inputAttrs };
+  })();
+
+  const selectHandler = (() => {
+
+    /**
+     * 重置Select的绑定值以及选项
+     * @author  韦胜健
+     * @date    2023.1.25 14:52
+     */
+    const getSelectValue = (): { value: string[] | null, option: iObjectSelectOption[] | null } => {
+      return !model.value || !model.value.length ? {
+        value: null,
+        option: null,
+      } : {
+        value: model.value.map(i => i[props.keyField]),
+        option: null,
+      };
+    };
+
+    const state = reactive(getSelectValue());
+
+    const reset = () => {Object.assign(state, getSelectValue());};
+
+    /**
+     * 输入搜索关键词的时候查询匹配的选项并且更新为Select的选项子组件
+     * @author  韦胜健
+     * @date    2023.1.25 14:53
+     */
+    effects.push(
+      hooks.onInputChange.use(val => {
+        state.option = null;
+        if (!val || !val.trim().length) {return;}
+        loadData(val, data => {state.option = data;});
+      })
+    );
+
+    const handler = {
+      /*popper开启的时候立即清空输入值，等待输入搜索关键词*/
+      onShow: () => {inputHandler.state.multipleText = null;},
+      /*popper关闭的时候，重置绑定值；不能在这里重置 inputHandler.state.inputValue，因为当选中select选项的时候也会触发onClose动作*/
+      onClose: () => {Object.assign(state, getSelectValue());},
+    };
+
+    /*监听select的选中选项动作*/
+    const onSelectChange = (codes: string[] | null) => {
+      const list = (state.option || []).map(i => i.data!);
+      const modelValue = [...model.value || []];
+      const leafValue = modelValue.filter(i => list.findIndex(j => j[props.keyField] === i[props.keyField]) === -1);
+      const externalValue = !codes ? [] : list.filter(i => codes!.indexOf(i[props.keyField]) > -1);
+
+      publicHandler.onSelect([...leafValue, ...externalValue]);
+    };
+    const checkHandler: Partial<iSelectProps> = {
+      /**
+       * 全选当前列表
+       * @author  韦胜健
+       * @date    2023.1.25 14:11
+       */
+      handleCheckAll: (options) => {
+        const list = options.map(i => i.data!);
+        const modelValue = [...model.value || []];
+        const leafValue = modelValue.filter(i => list.findIndex(j => j[props.keyField] === i[props.keyField]) === -1);
+
+        publicHandler.onSelect([...leafValue, ...list,]);
+      },
+      /**
+       * 清空当前列表的选中
+       * @author  韦胜健
+       * @date    2023.1.25 14:11
+       */
+      handleUncheckAll: (options) => {
+        const list = options.map(i => i.data!);
+        const modelValue = [...model.value || []];
+        const leafValue = modelValue.filter(i => list.findIndex(j => j[props.keyField] === i[props.keyField]) === -1);
+
+        publicHandler.onSelect([...leafValue,]);
+      },
+      /**
+       * 反选当前列表
+       * @author  韦胜健
+       * @date    2023.1.25 14:12
+       */
+      handleCheckReverse: (options) => {
+        const list = options.map(i => i.data!);
+        const modelValue = [...model.value || []];
+        const leafValue = modelValue.filter(i => list.findIndex(j => j[props.keyField] === i[props.keyField]) === -1);
+        const externalValue = list.filter(i => modelValue.findIndex(j => j[props.keyField] === i[props.keyField]) === -1);
+
+        publicHandler.onSelect([...leafValue, ...externalValue]);
+      },
+    };
+    /*监听popper的部分参数*/
+    const popperAttrs = computed(() => ({ ...handler, }));
+
+    /*给select传递的属性*/
+    const selectAttrs = computed(() => ({
+      ...checkHandler,
+      modelValue: state.value,
+      onUpdateModelValue: onSelectChange,
+      multiple: true,
+      loading: loading.value,
+      class: classes.value,
+      inputSlots: inputSlots,
+      suffixIcon: null as any,
+      popperAttrs: popperAttrs.value,
+      inputAttrs: inputHandler.inputAttrs.value,
+      /*禁用select的输入筛选，让select不处理搜索关键词避免隐藏部分option选项*/
+      disableFilter: true,
+      /*没有关键词的时候，提示输入关键词，已经有关键词并且没有选项的情况下提示placeholder*/
+      noDataLabel: !inputHandler.state.multipleText && state.option == null ? (props.searchPlaceholder || i18n.$it('table.pleaseEnterSearchKey').d('请输入搜索关键词')) : undefined
+    }));
+    return { state, popperAttrs, onSelectChange, selectAttrs, reset };
+
+  })();
+
+  /**
+   * object服务选择处理
+   * @author  韦胜健
+   * @date    2023.1.25 8:28
+   */
+  const pickHandler = (() => {
+    const pick = async () => {
+      refs.select?.methods.hide();
+      await props.beforeOpenPicker?.();
+      const selected = await object({ option: props.option, selected: model.value!, multiple: true, });
+      publicHandler.onSelect(selected);
+      selectHandler.reset();
+      event.emit.onPick(selected);
+    };
+
+    /*点击后缀图标的时候，打开选择弹窗*/
+    effects.push(hooks.onClickSuffixIcon.use(() => {editComputed.value.editable && pick();}));
+
+    return { pick };
+  })();
+
+  effects.push(
+    hooks.onRender.use({
+      processor: ({ list, render }) => {list.push({ render, key: 'multiple', seq: 1 });},
+      render: () => (
+        <Select
+          ref={onRef.select}
+          {...selectHandler.selectAttrs.value}
+          v-slots={{
+            default: () => (
+              selectHandler.state.option?.map(({ label, val, data }) => <SelectOption label={label} val={val} data={data} key={val as any}/>)
+            )
+          }}
+        />
+      )
+    })
+  );
+
+  return effects.clear;
+}