plain-design 1.0.0-beta.8 → 1.0.0-beta.80

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

@@ -1,262 +1,282 @@
-import {computed, designComponent, getComponentCls, PropType, reactive, useClasses, watch} from "plain-design-composition";
-import {PlainObject} from "plain-utils/utils/event";
-import {Form} from "../Form";
-import {FormItem} from "../FormItem";
-import './filter-form-multiple.scss';
-import {iFilterOption, iFilterQueryParam} from "../FilterService/utils/filter.service.utils";
-import {FilterService} from "../FilterService";
-import {InputGroup} from "../InputGroup";
-import {Button} from "../Button";
-import {mergeQueryParam} from "../FilterService/utils/mergeQueryParam";
-import {incrementalMerge} from "../../utils/incrementalMerge";
-import {deepcopy} from "plain-utils/object/deepcopy";
-import {Select} from "../Select";
-import {SelectOption} from "../SelectOption";
-import i18n from "../i18n";
-
-export interface iFilterFormMultipleState {
-  /**
-   * 保存每个filterOption正在使用的filterHandler
-   * @author  韦胜健
-   * @date    2023.1.6 16:02
-   */
-  filterHandlerMap: Record<string, any>,
-  /**
-   * 表单对象
-   * @author  韦胜健
-   * @date    2023.1.6 16:02
-   */
-  formData: PlainObject,
-}
-
-/**
- * 派发数据类型
- * @author  韦胜健
- * @date    2023.1.6 18:29
- */
-export type iFilterFormMultipleData = iFilterFormMultipleState & { filterQueryParam: iFilterQueryParam }
-
-/**
- * 多字段筛选表单组件，需要重置所有功能的话，只能是改变key，令组件重新初始化
- * @author  韦胜健
- * @date    2023.1.5 20:27
- */
-export const FilterFormMultiple = designComponent({
-  name: 'filter-form-multiple',
-  props: {
-    filterOptions: { type: Array as PropType<iFilterOption[]> },
-    initialState: { type: Object as PropType<iFilterFormMultipleState> },
-    formAttrs: { type: Object as PropType<typeof Form.use.props> },
-    column: { type: Number, default: 3 },
-  },
-  slots: ['operation'],
-  emits: {
-    onReset: () => true,
-    onSearch: (data: iFilterFormMultipleData) => true,
-  },
-  setup({ props, event: { emit }, slots }) {
-
-    const classes = useClasses(() => [
-      getComponentCls('filter-form-multiple')
-    ]);
-
-    const utils = {
-      /**
-       * 创建默认的响应式状态
-       * @author  韦胜健
-       * @date    2023.1.6 12:45
-       */
-      createState: (filterOptions: iFilterOption[]): iFilterFormMultipleState => {
-        const formData = FilterService.getDefaultFormData(filterOptions);
-        const filterHandlerMap = filterOptions.reduce((prev, item) => {
-          prev[FilterService.getHandlerBindKey(item)] = item.filterHandler;
-          return prev;
-        }, {} as Record<string, string>);
-        return {
-          formData,
-          filterHandlerMap,
-        };
-      },
-    };
-
-    /**
-     * 响应式窗台
-     * @author  韦胜健
-     * @date    2023.1.6 15:57
-     */
-    const state = reactive(deepcopy(props.initialState) || utils.createState(props.filterOptions || []));
-
-    /**
-     * 正在使用的目标filterOptions
-     * @author  韦胜健
-     * @date    2023.1.6 16:00
-     */
-    const usingFilterOptions = computed(() => (props.filterOptions || []).map(i => (
-      { ...i, filterHandler: state.filterHandlerMap[FilterService.getHandlerBindKey(i)] }
-    )));
-
-    /**
-     * 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: (): iFilterFormMultipleState => ({ ...state }),
-      /**
-       * 更新当前内部状态
-       * @author  韦胜健
-       * @date    2023.1.6 16:12
-       */
-      update: (newState: iFilterFormMultipleState | null | undefined) => {
-        if (!!newState) {
-          Object.assign(state, newState);
-        } else {
-          Object.assign(state, utils.createState(props.filterOptions || []));
-        }
-      },
-      /**
-       * 合并新的filterOptions
-       * @author  韦胜健
-       * @date    2023.1.6 15:49
-       */
-      updateFilterOptions: (filterOptions: iFilterOption[]) => {
-        const { formData, filterHandlerMap } = utils.createState(filterOptions || []);
-        state.formData = incrementalMerge(state.formData, formData);
-        state.filterHandlerMap = incrementalMerge(state.filterHandlerMap, filterHandlerMap);
-      },
-      /**
-       * 应用新的filterOptions
-       * @author  韦胜健
-       * @date    2023.1.6 15:49
-       */
-      setFilterOptions: (filterOptions: iFilterOption[]) => {
-        Object.assign(state, utils.createState(filterOptions));
-      },
-      /**
-       * 重置动作
-       * @author  韦胜健
-       * @date    2023.1.6 12:46
-       */
-      reset: () => {
-        methods.setFilterOptions(props.filterOptions || []);
-        emit.onReset();
-      },
-      /**
-       * 获取查询参数
-       * @author  韦胜健
-       * @date    2023.1.6 18:30
-       */
-      getData: async (): Promise<iFilterFormMultipleData> => {
-        const { formData, filterHandlerMap } = state;
-        const queryParamList = (await Promise.all(
-          usingFilterOptions.value.map(
-            filterOption => FilterService.getQueryParam({ option: filterOption, formData })
-          )
-        )).filter(Boolean) as iFilterQueryParam[];
-        const filterQueryParam = mergeQueryParam(...queryParamList);
-        return deepcopy({ formData, filterHandlerMap, filterQueryParam });
-      },
-      /**
-       * 搜索
-       * @author  韦胜健
-       * @date    2023.1.6 12:46
-       */
-      search: async () => {emit.onSearch(await methods.getData());},
-    };
-
-    const formAttrs = computed(() => {
-      return {
-        column: props.column,
-        labelAlign: 'right' as const,
-        labelWidth: 100,
-        ...props.formAttrs,
-      };
-    });
-
-    const inputAttrs = { noClear: true };
-
-    return {
-      refer: {
-        ...methods,
-      },
-      render: () => (
-        <div className={classes.value}>
-          <Form
-            width="100%"
-            modelValue={state.formData}
-            {...formAttrs.value}
-          >
-            {(() => {
-              let countColumn = 0;
-              const formColumn = props.column;
-              return usingFilterOptions.value.map((filterOption) => {
-                const { label, field, startField, endField, filterType, filterConfig } = filterOption;
-                const key = [label, field, startField, endField, filterType].filter(Boolean).join('_');
-                const filter = FilterService.touch(filterType);
-                const handler = FilterService.getHandler(filterOption);
-                if (!handler) {return null;}
-
-                /*最左侧的列里边的文本要左对齐*/
-                const column: number = filterConfig.formItemAttrs?.column || 1;
-                let index = countColumn;
-                let isFirstColumn: boolean;
-                if ((index + column) > formColumn) {
-                  isFirstColumn = true;
-                  countColumn = column;
-                } else {
-                  isFirstColumn = index % formColumn === 0;
-                  countColumn += column;
-                }
-                if (countColumn >= formColumn) {countColumn = 0;}
-                return (
-                  <FormItem
-                    class={isFirstColumn ? 'filter-form-multiple-first-column' : undefined}
-                    key={key} label={label}
-                    column={column}
-                  >
-                    <InputGroup>
-                      <Select
-                        inputAttrs={inputAttrs}
-                        modelValue={state.filterHandlerMap[FilterService.getHandlerBindKey(filterOption)]}
-                        onUpdateModelValue={val => {
-                          handler.clearValue({ formData: state.formData, option: filterOption });
-                          state.filterHandlerMap[FilterService.getHandlerBindKey(filterOption)] = val;
-                        }}
-                        width={100}
-                      >
-                        {filter.state.list.map((handler) => (
-                          <SelectOption label={handler!.label} val={handler!.name} key={handler!.name}/>
-                        ))}
-                      </Select>
-                      {handler.render({ formData: state.formData, option: filterOption, confirm: methods.search })}
-                    </InputGroup>
-                  </FormItem>
-                );
-              });
-            })()}
-            <FormItem key="operation" colon={false} label={null} contentAlign="right" column={(() => {
-              const formColumn = formAttrs.value.column;
-              if (formColumn == null) {return 1;}
-              return Number(formColumn) - usingFilterOptions.value.length % Number(formColumn);
-            })()}>
-              <div className="filter-form-multiple-operation">
-                {slots.operation()}
-                <Button label={i18n('base.reset').d('重置')} icon="pi-delete" onClick={methods.reset}/>
-                <Button label={i18n('base.query').d('查询')} mode="fill" icon="pi-search" onClick={methods.search}/>
-              </div>
-            </FormItem>
-          </Form>
-        </div>
-      )
-    };
-  },
-});
-
-export default FilterFormMultiple;
+import {computed, designComponent, getComponentCls, mergeAttrs, PropType, reactive, useClasses, watch} from "plain-design-composition";
+import {PlainObject} from "plain-utils/utils/event";
+import {Form} from "../Form";
+import {FormItem} from "../FormItem";
+import './filter-form-multiple.scss';
+import {iFilterOption, iFilterQueryParam} from "../FilterService/utils/filter.service.utils";
+import {FilterService} from "../FilterService";
+import {InputGroup} from "../InputGroup";
+import {Button} from "../Button";
+import {mergeQueryParam} from "../FilterService/utils/mergeQueryParam";
+import {incrementalMerge} from "../../utils/incrementalMerge";
+import {deepcopy} from "plain-utils/object/deepcopy";
+import {Select} from "../Select";
+import {SelectOption} from "../SelectOption";
+import i18n from "../i18n";
+
+export interface iFilterFormMultipleState {
+  /**
+   * 保存每个filterOption正在使用的filterHandler
+   * @author  韦胜健
+   * @date    2023.1.6 16:02
+   */
+  filterHandlerMap: Record<string, any>,
+  /**
+   * 表单对象
+   * @author  韦胜健
+   * @date    2023.1.6 16:02
+   */
+  formData: PlainObject,
+}
+
+/**
+ * 派发数据类型
+ * @author  韦胜健
+ * @date    2023.1.6 18:29
+ */
+export type iFilterFormMultipleData = iFilterFormMultipleState & { filterQueryParam: iFilterQueryParam }
+
+/**
+ * 多字段筛选表单组件，需要重置所有功能的话，只能是改变key，令组件重新初始化
+ * @author  韦胜健
+ * @date    2023.1.5 20:27
+ */
+export const FilterFormMultiple = designComponent({
+  name: 'filter-form-multiple',
+  props: {
+    filterOptions: { type: Array as PropType<iFilterOption[]> },            // 删选表单配置对象
+    initialState: { type: Object as PropType<iFilterFormMultipleState> },   // 初始值
+    formAttrs: { type: Object as PropType<typeof Form.use.props> },         // 给Form传递的属性
+    column: { type: Number, default: 3 },                                   // 列数
+    hideSearchButton: { type: Boolean },                                    // 隐藏查询按钮
+    hideResetButton: { type: Boolean },                                     // 隐藏重置按钮
+    searchButtonAttrs: { type: Object as PropType<PlainObject> },           // 给查询按钮传递的属性
+    resetButtonAttrs: { type: Object as PropType<PlainObject> },            // 给重置按钮传递的属性
+  },
+  slots: ['operation'],
+  emits: {
+    onReset: () => true,
+    onSearch: (data: iFilterFormMultipleData) => true,
+  },
+  setup({ props, event: { emit }, slots }) {
+
+    const classes = useClasses(() => [
+      getComponentCls('filter-form-multiple')
+    ]);
+
+    const utils = {
+      /**
+       * 创建默认的响应式状态
+       * @author  韦胜健
+       * @date    2023.1.6 12:45
+       */
+      createState: (filterOptions: iFilterOption[]): iFilterFormMultipleState => {
+        const formData = FilterService.getDefaultFormData(filterOptions);
+        const filterHandlerMap = filterOptions.reduce((prev, item) => {
+          prev[FilterService.getHandlerBindKey(item)] = item.filterHandler;
+          return prev;
+        }, {} as Record<string, string>);
+        return {
+          formData,
+          filterHandlerMap,
+        };
+      },
+    };
+
+    /**
+     * 响应式窗台
+     * @author  韦胜健
+     * @date    2023.1.6 15:57
+     */
+    const state = reactive(deepcopy(props.initialState) || utils.createState(props.filterOptions || []));
+
+    /**
+     * 正在使用的目标filterOptions
+     * @author  韦胜健
+     * @date    2023.1.6 16:00
+     */
+    const usingFilterOptions = computed(() => (props.filterOptions || []).map(i => (
+      { ...i, filterHandler: state.filterHandlerMap[FilterService.getHandlerBindKey(i)] }
+    )));
+
+    /**
+     * 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: (): iFilterFormMultipleState => ({ ...state }),
+      /**
+       * 更新当前内部状态
+       * @author  韦胜健
+       * @date    2023.1.6 16:12
+       */
+      update: (newState: iFilterFormMultipleState | null | undefined) => {
+        if (!!newState) {
+          Object.assign(state, newState);
+        } else {
+          Object.assign(state, utils.createState(props.filterOptions || []));
+        }
+      },
+      /**
+       * 合并新的filterOptions
+       * @author  韦胜健
+       * @date    2023.1.6 15:49
+       */
+      updateFilterOptions: (filterOptions: iFilterOption[]) => {
+        const { formData, filterHandlerMap } = utils.createState(filterOptions || []);
+        state.formData = incrementalMerge(state.formData, formData);
+        state.filterHandlerMap = incrementalMerge(state.filterHandlerMap, filterHandlerMap);
+      },
+      /**
+       * 应用新的filterOptions
+       * @author  韦胜健
+       * @date    2023.1.6 15:49
+       */
+      setFilterOptions: (filterOptions: iFilterOption[]) => {
+        Object.assign(state, utils.createState(filterOptions));
+      },
+      /**
+       * 重置动作
+       * @author  韦胜健
+       * @date    2023.1.6 12:46
+       */
+      reset: () => {
+        methods.setFilterOptions(props.filterOptions || []);
+        emit.onReset();
+      },
+      /**
+       * 获取查询参数
+       * @author  韦胜健
+       * @date    2023.1.6 18:30
+       */
+      getData: async (): Promise<iFilterFormMultipleData> => {
+        const { formData, filterHandlerMap } = state;
+        const queryParamList = (await Promise.all(
+          usingFilterOptions.value.map(
+            filterOption => FilterService.getQueryParam({ option: filterOption, formData })
+          )
+        )).filter(Boolean) as iFilterQueryParam[];
+        const filterQueryParam = mergeQueryParam(...queryParamList);
+        return deepcopy({ formData, filterHandlerMap, filterQueryParam });
+      },
+      /**
+       * 搜索
+       * @author  韦胜健
+       * @date    2023.1.6 12:46
+       */
+      search: async () => {emit.onSearch(await methods.getData());},
+    };
+
+    const formAttrs = computed(() => {
+      return {
+        column: props.column,
+        labelAlign: 'right' as const,
+        labelWidth: 100,
+        ...props.formAttrs,
+      };
+    });
+
+    const inputAttrs = { noClear: true };
+
+    return {
+      refer: {
+        ...methods,
+      },
+      render: () => (
+        <div className={classes.value}>
+          <Form
+            width="100%"
+            modelValue={state.formData}
+            {...formAttrs.value}
+          >
+            {(() => {
+              let countColumn = 0;
+              const formColumn = props.column;
+              return usingFilterOptions.value.map((filterOption) => {
+                const { label, field, startField, endField, filterType, filterConfig } = filterOption;
+                const key = [label, field, startField, endField, filterType].filter(Boolean).join('_');
+                const filter = FilterService.touch(filterType);
+                const handler = FilterService.getHandler(filterOption);
+                if (!handler) {return null;}
+
+                /*最左侧的列里边的文本要左对齐*/
+                const column: number = filterConfig.formItemAttrs?.column || 1;
+                let index = countColumn;
+                let isFirstColumn: boolean;
+                if ((index + column) > formColumn) {
+                  isFirstColumn = true;
+                  countColumn = column;
+                } else {
+                  isFirstColumn = index % formColumn === 0;
+                  countColumn += column;
+                }
+                if (countColumn >= formColumn) {countColumn = 0;}
+                return (
+                  <FormItem
+                    class={isFirstColumn ? 'filter-form-multiple-first-column' : undefined}
+                    key={key} label={label}
+                    column={column}
+                  >
+                    <InputGroup>
+                      <Select
+                        inputAttrs={inputAttrs}
+                        modelValue={state.filterHandlerMap[FilterService.getHandlerBindKey(filterOption)]}
+                        onUpdateModelValue={val => {
+                          handler.clearValue({ formData: state.formData, option: filterOption });
+                          state.filterHandlerMap[FilterService.getHandlerBindKey(filterOption)] = val;
+                        }}
+                        width={100}
+                      >
+                        {filter.state.list.map((handler) => (
+                          <SelectOption label={handler!.label()} val={handler!.name} key={handler!.name}/>
+                        ))}
+                      </Select>
+                      {handler.render({ formData: state.formData, option: filterOption, confirm: methods.search })}
+                    </InputGroup>
+                  </FormItem>
+                );
+              });
+            })()}
+            <FormItem key="operation" colon={false} label={null} contentAlign="right" column={(() => {
+              const formColumn = formAttrs.value.column;
+              if (formColumn == null) {return 1;}
+              return Number(formColumn) - usingFilterOptions.value.length % Number(formColumn);
+            })()}>
+              {(!props.hideResetButton || !props.hideSearchButton || slots.operation.isExist()) && (
+                <div className="filter-form-multiple-operation">
+                  {slots.operation()}
+                  {!props.hideResetButton && (
+                    <Button {...mergeAttrs({
+                      label: i18n.$it('base.reset').d('重置'),
+                      icon: "pi-delete",
+                      onClick: methods.reset
+                    }, props.resetButtonAttrs)}/>
+                  )}
+                  {!props.hideSearchButton && (
+                    <Button
+                      {...mergeAttrs({
+                        label: i18n.$it('base.query').d('查询'),
+                        icon: "pi-search",
+                        onClick: methods.search,
+                      }, props.searchButtonAttrs)}
+                    />
+                  )}
+                </div>
+              )}
+            </FormItem>
+          </Form>
+        </div>
+      )
+    };
+  },
+});
+
+export default FilterFormMultiple;