plain-design 1.0.0-beta.146 → 1.0.0-beta.147

package/src/packages/components/FilterFormSingle/index.tsx

@@ -1,178 +1,178 @@
-import {computed, designComponent, Fragment, PropType, reactive, watch} from "@peryl/react-compose";
-import {PlainObject} from "@peryl/utils/event";
-import {iFilterOption, iFilterQueryParam} from "../FilterService/utils/filter.service.utils";
-import {InputGroup} from "../InputGroup";
-import {Select} from "../Select";
-import {Button} from "../Button";
-import {FilterService} from "../FilterService";
-import {SelectOption} from "../SelectOption";
-import {incrementalMerge} from "../../utils/incrementalMerge";
-import {mergeQueryParam} from "../FilterService/utils/mergeQueryParam";
-import {deepcopy} from "@peryl/utils/deepcopy";
-import i18n from "../i18n";
-
-export interface iFilterFormSingleState {
-  field: string,
-  filterHandler: string,
-  formData: PlainObject,
-}
-
-export type iFilterFormSingleData = iFilterFormSingleState & { filterQueryParam: iFilterQueryParam }
-
-export const FilterFormSingle = designComponent({
-  name: 'filter-form-single',
-  props: {
-    filterOptions: { type: Array as PropType<iFilterOption[]> },
-    initialState: { type: Object as PropType<iFilterFormSingleState> },
-    hideFieldSelector: { type: Boolean },
-    hideHandlerSelector: { type: Boolean },
-    hideSearchButton: { type: Boolean },
-    width: { type: String, default: '440px' },
-    handleSearch: { type: Function as PropType<(data: iFilterFormSingleData) => void | Promise<void>> },
-  },
-  emits: {
-    onSearch: (data: iFilterFormSingleData) => true,
-  },
-  slots: ['prepend', 'append'],
-  setup({ props, event: { emit }, slots }) {
-
-    const utils = {
-      createState: ({ defaultField, filterOptions }: { defaultField?: string, filterOptions: iFilterOption[] }): iFilterFormSingleState => {
-        const defaultOption = filterOptions.find(i => !!defaultField ? i?.field === defaultField : i?.defaultSearch) || (filterOptions[0] as iFilterOption | undefined) || { label: i18n.$it('base.id').d('编号'), filterType: 'text', filterHandler: 'like', field: 'id' };
-        const formData = FilterService.getDefaultFormData(filterOptions);
-        return {
-          field: defaultOption.field,
-          filterHandler: defaultOption.filterHandler,
-          formData,
-        };
-      }
-    };
-
-    const state: iFilterFormSingleState = reactive(
-      deepcopy(props.initialState) ||
-      utils.createState({ filterOptions: props.filterOptions || [] })
-    );
-
-    /**
-     * 正在使用的目标filterOptions
-     * @author  韦胜健
-     * @date    2023.1.6 16:00
-     */
-    const usingFilterOption = computed((): iFilterOption => ({
-      ...(props.filterOptions || []).find(i => i.field === state.field)!,
-      filterHandler: state.filterHandler,
-    }));
-
-    /**
-     * props.filterOptions变化时更新内部状态
-     * @author  韦胜健
-     * @date    2023.1.6 15:57
-     */
-    watch(() => props.filterOptions, newFilterOptions => methods.updateFilterOptions(newFilterOptions || []));
-
-    const methods = {
-      /**
-       * 获取当前内部状态
-       * @author  韦胜健
-       * @date    2023.1.6 16:12
-       */
-      getState: (): iFilterFormSingleState => ({ ...state }),
-      /**
-       * 更新当前内部状态
-       * @author  韦胜健
-       * @date    2023.1.6 16:12
-       */
-      update: (newState: iFilterFormSingleState | null | undefined) => {
-        if (!!newState) {
-          Object.assign(state, newState);
-        } else {
-          Object.assign(state, utils.createState({ filterOptions: props.filterOptions || [] }));
-        }
-      },
-      /**
-       * 合并新的filterOptions
-       * @author  韦胜健
-       * @date    2023.1.6 15:49
-       */
-      updateFilterOptions: (filterOptions: iFilterOption[]) => {
-        const { formData, filterHandler } = utils.createState({ defaultField: state.field, filterOptions: filterOptions || [] });
-        state.formData = incrementalMerge(state.formData, formData);
-        state.filterHandler = filterHandler;
-      },
-      /**
-       * 获取查询数据
-       * @author  韦胜健
-       * @date    2023.1.6 18:32
-       */
-      getData: async () => {
-        const { field, formData, filterHandler } = state;
-        const queryParam = await FilterService.getQueryParam({ option: usingFilterOption.value, formData: state.formData });
-        const filterQueryParam = !queryParam ? {} : mergeQueryParam(queryParam, {});
-        return deepcopy({ field, formData, filterHandler, filterQueryParam });
-      },
-      /**
-       * 搜索
-       * @author  韦胜健
-       * @date    2023.1.6 12:46
-       */
-      search: async () => {
-        const data = await methods.getData();
-        emit.onSearch(data);
-        await props.handleSearch?.(data);
-      },
-    };
-
-    const handler = {
-      onUpdateField: (field: any) => {
-        const newState = utils.createState({ defaultField: field, filterOptions: props.filterOptions || [] });
-        const handler = FilterService.getHandler(usingFilterOption.value)!;
-        handler.clearValue({ formData: state.formData, option: usingFilterOption.value });
-        state.filterHandler = newState.filterHandler;
-        state.field = field;
-        // console.log({ ...state }, props.filterOptions);
-      },
-      onUpdateHandler: (filterHandler?: any) => {
-        const handler = FilterService.getHandler(usingFilterOption.value)!;
-        handler.clearValue({ formData: state.formData, option: usingFilterOption.value });
-        state.filterHandler = filterHandler;
-      },
-    };
-
-    const inputAttrs = { noClear: true };
-
-    return {
-      refer: {
-        state,
-        ...methods,
-      },
-      render: () => (
-        <InputGroup style={{ width: props.width }}>
-          {slots.prepend()}
-          {!props.hideFieldSelector && (
-            <Select key="field_selector" width={90} modelValue={state.field} onUpdateModelValue={handler.onUpdateField} inputAttrs={inputAttrs}>
-              {(props.filterOptions || []).map((option) => (
-                <SelectOption label={option.label} val={option.field} key={option.label + option.field}/>
-              ))}
-            </Select>
-          )}
-          {!props.hideHandlerSelector && (
-            <Select key={state.field} width={90} modelValue={state.filterHandler} onUpdateModelValue={handler.onUpdateHandler} inputAttrs={inputAttrs}>
-              {(FilterService.touch(usingFilterOption.value.filterType)).state.list.map((handler) => (
-                <SelectOption label={handler.label()} val={handler.name} key={handler.name}/>
-              ))}
-            </Select>
-          )}
-          <Fragment key={state.filterHandler}>
-            {FilterService.getHandler(usingFilterOption.value)!.render({ formData: state.formData, option: usingFilterOption.value, confirm: methods.search })}
-          </Fragment>
-          {!props.hideSearchButton && (
-            <Button label={i18n.$it('base.query').d('查询')} icon="pi-search" mode="fill" asyncHandler={methods.search}/>
-          )}
-          {slots.append()}
-        </InputGroup>
-      )
-    };
-  },
-});
-
-export default FilterFormSingle;
+import {computed, designComponent, Fragment, PropType, reactive, watch} from "@peryl/react-compose";
+import {PlainObject} from "@peryl/utils/event";
+import {iFilterOption, iFilterQueryParam} from "../FilterService/utils/filter.service.utils";
+import {InputGroup} from "../InputGroup";
+import {Select} from "../Select";
+import {Button} from "../Button";
+import {FilterService} from "../FilterService";
+import {SelectOption} from "../SelectOption";
+import {incrementalMerge} from "../../utils/incrementalMerge";
+import {mergeQueryParam} from "../FilterService/utils/mergeQueryParam";
+import {deepcopy} from "@peryl/utils/deepcopy";
+import i18n from "../i18n";
+
+export interface iFilterFormSingleState {
+  field: string,
+  filterHandler: string,
+  formData: PlainObject,
+}
+
+export type iFilterFormSingleData = iFilterFormSingleState & { filterQueryParam: iFilterQueryParam }
+
+export const FilterFormSingle = designComponent({
+  name: 'filter-form-single',
+  props: {
+    filterOptions: { type: Array as PropType<iFilterOption[]> },
+    initialState: { type: Object as PropType<iFilterFormSingleState> },
+    hideFieldSelector: { type: Boolean },
+    hideHandlerSelector: { type: Boolean },
+    hideSearchButton: { type: Boolean },
+    width: { type: String, default: '440px' },
+    handleSearch: { type: Function as PropType<(data: iFilterFormSingleData) => void | Promise<void>> },
+  },
+  emits: {
+    onSearch: (data: iFilterFormSingleData) => true,
+  },
+  slots: ['prepend', 'append'],
+  setup({ props, event: { emit }, slots }) {
+
+    const utils = {
+      createState: ({ defaultField, filterOptions }: { defaultField?: string, filterOptions: iFilterOption[] }): iFilterFormSingleState => {
+        const defaultOption = filterOptions.find(i => !!defaultField ? i?.field === defaultField : i?.defaultSearch) || (filterOptions[0] as iFilterOption | undefined) || { label: i18n.$it('base.id').d('编号'), filterType: 'text', filterHandler: 'like', field: 'id' };
+        const formData = FilterService.getDefaultFormData(filterOptions);
+        return {
+          field: defaultOption.field,
+          filterHandler: defaultOption.filterHandler,
+          formData,
+        };
+      }
+    };
+
+    const state: iFilterFormSingleState = reactive(
+      deepcopy(props.initialState) ||
+      utils.createState({ filterOptions: props.filterOptions || [] })
+    );
+
+    /**
+     * 正在使用的目标filterOptions
+     * @author  韦胜健
+     * @date    2023.1.6 16:00
+     */
+    const usingFilterOption = computed((): iFilterOption => ({
+      ...(props.filterOptions || []).find(i => i.field === state.field)!,
+      filterHandler: state.filterHandler,
+    }));
+
+    /**
+     * props.filterOptions变化时更新内部状态
+     * @author  韦胜健
+     * @date    2023.1.6 15:57
+     */
+    watch(() => props.filterOptions, newFilterOptions => methods.updateFilterOptions(newFilterOptions || []));
+
+    const methods = {
+      /**
+       * 获取当前内部状态
+       * @author  韦胜健
+       * @date    2023.1.6 16:12
+       */
+      getState: (): iFilterFormSingleState => ({ ...state }),
+      /**
+       * 更新当前内部状态
+       * @author  韦胜健
+       * @date    2023.1.6 16:12
+       */
+      update: (newState: iFilterFormSingleState | null | undefined) => {
+        if (!!newState) {
+          Object.assign(state, newState);
+        } else {
+          Object.assign(state, utils.createState({ filterOptions: props.filterOptions || [] }));
+        }
+      },
+      /**
+       * 合并新的filterOptions
+       * @author  韦胜健
+       * @date    2023.1.6 15:49
+       */
+      updateFilterOptions: (filterOptions: iFilterOption[]) => {
+        const { formData, filterHandler } = utils.createState({ defaultField: state.field, filterOptions: filterOptions || [] });
+        state.formData = incrementalMerge(state.formData, formData);
+        state.filterHandler = filterHandler;
+      },
+      /**
+       * 获取查询数据
+       * @author  韦胜健
+       * @date    2023.1.6 18:32
+       */
+      getData: async () => {
+        const { field, formData, filterHandler } = state;
+        const queryParam = await FilterService.getQueryParam({ option: usingFilterOption.value, formData: state.formData });
+        const filterQueryParam = !queryParam ? {} : mergeQueryParam(queryParam, {});
+        return deepcopy({ field, formData, filterHandler, filterQueryParam });
+      },
+      /**
+       * 搜索
+       * @author  韦胜健
+       * @date    2023.1.6 12:46
+       */
+      search: async () => {
+        const data = await methods.getData();
+        emit.onSearch(data);
+        await props.handleSearch?.(data);
+      },
+    };
+
+    const handler = {
+      onUpdateField: (field: any) => {
+        const newState = utils.createState({ defaultField: field, filterOptions: props.filterOptions || [] });
+        const handler = FilterService.getHandler(usingFilterOption.value)!;
+        handler.clearValue({ formData: state.formData, option: usingFilterOption.value });
+        state.filterHandler = newState.filterHandler;
+        state.field = field;
+        // console.log({ ...state }, props.filterOptions);
+      },
+      onUpdateHandler: (filterHandler?: any) => {
+        const handler = FilterService.getHandler(usingFilterOption.value)!;
+        handler.clearValue({ formData: state.formData, option: usingFilterOption.value });
+        state.filterHandler = filterHandler;
+      },
+    };
+
+    const inputAttrs = { noClear: true };
+
+    return {
+      refer: {
+        state,
+        ...methods,
+      },
+      render: () => (
+        <InputGroup style={{ width: props.width }}>
+          {slots.prepend()}
+          {!props.hideFieldSelector && (
+            <Select key="field_selector" width={90} modelValue={state.field} onUpdateModelValue={handler.onUpdateField} inputAttrs={inputAttrs}>
+              {(props.filterOptions || []).map((option) => (
+                <SelectOption label={option.label} val={option.field} key={option.label + option.field}/>
+              ))}
+            </Select>
+          )}
+          {!props.hideHandlerSelector && (
+            <Select key={state.field} width={90} modelValue={state.filterHandler} onUpdateModelValue={handler.onUpdateHandler} inputAttrs={inputAttrs}>
+              {(FilterService.touch(usingFilterOption.value.filterType)).state.list.map((handler) => (
+                <SelectOption label={handler.label()} val={handler.name} key={handler.name}/>
+              ))}
+            </Select>
+          )}
+          <Fragment key={state.filterHandler}>
+            {FilterService.getHandler(usingFilterOption.value)!.render({ formData: state.formData, option: usingFilterOption.value, confirm: methods.search })}
+          </Fragment>
+          {!props.hideSearchButton && (
+            <Button label={i18n.$it('base.query').d('查询')} icon="pi-search" mode="fill" asyncHandler={methods.search}/>
+          )}
+          {slots.append()}
+        </InputGroup>
+      )
+    };
+  },
+});
+
+export default FilterFormSingle;

package/src/packages/components/FilterService/filter/filter.city.tsx

@@ -1,85 +1,85 @@
-import {iFilterService} from "../index";
-import {eFilterOperator, iFilterOption} from "../utils/filter.service.utils";
-import {Input} from "../../Input";
-import {$configuration} from "../../$configuration";
-import {eAddressTypeEnum} from "../../$address/address.utils";
-import {AddressCascade} from "../../AddressCascade";
-import {createAddressDescriptionGetter} from "./filter.province";
-import {PlainObject} from "@peryl/utils/event";
-import i18n from "../../i18n";
-
-/**
- * 文本筛选
- * @author  韦胜健
- * @date    2023.1.6 16:45
- */
-export function installFilterCity(
-  {
-    touch,
-    checkEmpty,
-    defaultNullHandler,
-    defaultNotnullHandler,
-  }: iFilterService) {
-  touch('city')
-    .setHandler('like', {
-      label: () => i18n.$it('base.filter.like').d('约等于'),
-      render: ({ formData, option, confirm }) => (<Input v-model={formData[option.field!]} onEnter={confirm}/>),
-      getQueryParam: async ({ formData, option }) => {
-        const { isEmpty, value, field } = checkEmpty(formData, option);
-        if (isEmpty) {return;}
-        const metas = await $configuration.get('address')!.getAddressByLabel(value, eAddressTypeEnum.city);
-        if (metas.length === 0) {return;}
-        return { queries: [{ field, value: metas.map(i => i.code).join(','), operator: eFilterOperator.in }] };
-      },
-    })
-    .setHandler('eq', {
-      label: () => i18n.$it('base.filter.equal').d('等于'),
-      getDescription: ({ formData, option }: { formData: PlainObject, option: iFilterOption }) => {
-        const val = formData[option.field]?.city;
-        const service = $configuration.get('address')!;
-        return service.getAddressByCodesComputed(val);
-      },
-      render: ({ formData, option }) => {
-        let val = formData[option.field!] || {};
-        return (
-          <AddressCascade
-            province={val.province}
-            city={val.city}
-            onSingleChange={(val) => {
-              if (!!val && !val.province && !val.city) {val = null;}
-              formData[option.field!] = val;
-            }}
-            types="pc"
-          />
-        );
-      },
-      getQueryParam: async ({ formData, option }) => {
-        const { isEmpty, value: _value, field } = checkEmpty(formData, option);
-        if (isEmpty) {return;}
-        const value = typeof _value === "string" ? _value : _value.city;
-        return { queries: [{ field, value: value, operator: eFilterOperator.eq }] };
-      },
-    })
-    .setHandler('in', {
-      label: () => i18n.$it('base.filter.include').d('包含'),
-      getDescription: createAddressDescriptionGetter({ multiple: true, valueType: 'arraystring' }),
-      render: ({ formData, option }) => (<AddressCascade v-model={formData[option.field!]} types="pc" multiple valueType="arraystring"/>),
-      getQueryParam: async ({ formData, option }) => {
-        const { isEmpty, value, field } = checkEmpty(formData, option);
-        if (isEmpty) {return;}
-        return { queries: [{ field, value, operator: eFilterOperator.in }] };
-      },
-    })
-    .setHandler('not_in', {
-      label: () => i18n.$it('base.filter.notInclude').d('不包含'),
-      getDescription: createAddressDescriptionGetter({ multiple: true, valueType: 'arraystring' }),
-      render: ({ formData, option }) => (<AddressCascade v-model={formData[option.field!]} types="pc" multiple valueType="arraystring"/>),
-      getQueryParam: async ({ formData, option }) => {
-        const { isEmpty, value, field } = checkEmpty(formData, option);
-        if (isEmpty) {return;}
-        return { queries: [{ field, value, operator: eFilterOperator.not_in }] };
-      },
-    })
-    .setHandler(...defaultNullHandler)
-    .setHandler(...defaultNotnullHandler);
-}
+import {iFilterService} from "../index";
+import {eFilterOperator, iFilterOption} from "../utils/filter.service.utils";
+import {Input} from "../../Input";
+import {$configuration} from "../../$configuration";
+import {eAddressTypeEnum} from "../../$address/address.utils";
+import {AddressCascade} from "../../AddressCascade";
+import {createAddressDescriptionGetter} from "./filter.province";
+import {PlainObject} from "@peryl/utils/event";
+import i18n from "../../i18n";
+
+/**
+ * 文本筛选
+ * @author  韦胜健
+ * @date    2023.1.6 16:45
+ */
+export function installFilterCity(
+  {
+    touch,
+    checkEmpty,
+    defaultNullHandler,
+    defaultNotnullHandler,
+  }: iFilterService) {
+  touch('city')
+    .setHandler('like', {
+      label: () => i18n.$it('base.filter.like').d('约等于'),
+      render: ({ formData, option, confirm }) => (<Input v-model={formData[option.field!]} onEnter={confirm}/>),
+      getQueryParam: async ({ formData, option }) => {
+        const { isEmpty, value, field } = checkEmpty(formData, option);
+        if (isEmpty) {return;}
+        const metas = await $configuration.get('address')!.getAddressByLabel(value, eAddressTypeEnum.city);
+        if (metas.length === 0) {return;}
+        return { queries: [{ field, value: metas.map(i => i.code).join(','), operator: eFilterOperator.in }] };
+      },
+    })
+    .setHandler('eq', {
+      label: () => i18n.$it('base.filter.equal').d('等于'),
+      getDescription: ({ formData, option }: { formData: PlainObject, option: iFilterOption }) => {
+        const val = formData[option.field]?.city;
+        const service = $configuration.get('address')!;
+        return service.getAddressByCodesComputed(val);
+      },
+      render: ({ formData, option }) => {
+        let val = formData[option.field!] || {};
+        return (
+          <AddressCascade
+            province={val.province}
+            city={val.city}
+            onSingleChange={(val) => {
+              if (!!val && !val.province && !val.city) {val = null;}
+              formData[option.field!] = val;
+            }}
+            types="pc"
+          />
+        );
+      },
+      getQueryParam: async ({ formData, option }) => {
+        const { isEmpty, value: _value, field } = checkEmpty(formData, option);
+        if (isEmpty) {return;}
+        const value = typeof _value === "string" ? _value : _value.city;
+        return { queries: [{ field, value: value, operator: eFilterOperator.eq }] };
+      },
+    })
+    .setHandler('in', {
+      label: () => i18n.$it('base.filter.include').d('包含'),
+      getDescription: createAddressDescriptionGetter({ multiple: true, valueType: 'arraystring' }),
+      render: ({ formData, option }) => (<AddressCascade v-model={formData[option.field!]} types="pc" multiple valueType="arraystring"/>),
+      getQueryParam: async ({ formData, option }) => {
+        const { isEmpty, value, field } = checkEmpty(formData, option);
+        if (isEmpty) {return;}
+        return { queries: [{ field, value, operator: eFilterOperator.in }] };
+      },
+    })
+    .setHandler('not_in', {
+      label: () => i18n.$it('base.filter.notInclude').d('不包含'),
+      getDescription: createAddressDescriptionGetter({ multiple: true, valueType: 'arraystring' }),
+      render: ({ formData, option }) => (<AddressCascade v-model={formData[option.field!]} types="pc" multiple valueType="arraystring"/>),
+      getQueryParam: async ({ formData, option }) => {
+        const { isEmpty, value, field } = checkEmpty(formData, option);
+        if (isEmpty) {return;}
+        return { queries: [{ field, value, operator: eFilterOperator.not_in }] };
+      },
+    })
+    .setHandler(...defaultNullHandler)
+    .setHandler(...defaultNotnullHandler);
+}