@lingxiteam/ebe-utils 0.5.11 → 0.6.2

package/lib/pcpublic/src/components/pcfactory/src/QueryForm/FilterDrawer.tsx

@@ -0,0 +1,428 @@
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { Button, Divider, Drawer, Input, Popover, Select } from 'antd';
+import {
+  MinusCircleOutlined,
+  PlusCircleOutlined,
+  SearchOutlined,
+  DeleteOutlined,
+  CloseOutlined,
+} from '@lingxiteam/icons';
+import { EngineApisType } from '@lingxiteam/engine-types';
+import LcdpForm from '../Form';
+import classNames from 'classnames';
+import _ from 'lodash';
+import { usePersistFn } from '../utils/ahooks';
+import { useDrawerResize } from './useResizeBox';
+import { FilterMode } from './useQueryForm';
+
+export interface FilterDrawerProps {
+
+  /**
+     * 高级查询字段
+     */
+  seniorFields?: string[];
+
+  /**
+   * 渲染方法
+   */
+  MemoRenderer: EngineApisType['MemoRenderer'];
+
+  /**
+   * 跳转文案
+   */
+  openLabel: string;
+
+  /**
+   * 表单属性
+   */
+  formProps: any;
+
+  /**
+   * 确认回调
+   */
+  onOk?:(v: any) => void;
+
+  /**
+   * 高级搜索方式
+   */
+  filterMode?: FilterMode;
+
+  /**
+   * 删除已选高级搜索回调
+   */
+  onResetField?: (v: string) => void;
+}
+
+export const prefixCls = 'ued-queryform-filter';
+const operators = [{ label: '且', value: 'and' }];
+const connectors = [{ label: '等于', value: '===' }];
+export type SearchProps = {
+  onSelected?: (c: string) => void;
+  seniorFields?: string[];
+  actived?:(c: string) => boolean;
+  labelFn: (c: string) => string;
+}
+const FilterSearchComp: React.FC<SearchProps> = (props) => {
+  const { labelFn, actived, onSelected, seniorFields } = props;
+  const [searchValue, setSearchValue] = useState<string>('');
+
+  return (
+    <>
+      <Input suffix={<SearchOutlined />} value={searchValue} placeholder="请输入" onChange={(e) => setSearchValue(e.target.value)} />
+      <div
+        className={`${prefixCls}-select-group`}
+      >{seniorFields?.filter(c => labelFn?.(c).includes(searchValue))?.map(c => (
+        <div
+          onClick={() => {
+            if (actived?.(c)) {
+              return;
+            }
+            onSelected?.(c);
+          }}
+          className={
+              classNames(`${prefixCls}-select-item`,
+                actived?.(c) ? `${prefixCls}-select-active-item` : undefined)}
+          key={c}
+        >
+          {labelFn?.(c)}
+        </div>
+      ))}
+      </div>
+    </>
+  );
+};
+const FilterDrawer = forwardRef<any, FilterDrawerProps>((props, ref) => {
+  const { seniorFields, MemoRenderer, openLabel, formProps, onOk, filterMode, onResetField } = props;
+  const { renderer } = MemoRenderer;
+  const { components } = renderer || {};
+  const [open, setOpen] = useState<boolean>(false);
+  const [selectedItem, setSelectedItem] = useState<Array<{left: string; operator: 'and'; connector: '===';}>>([]);
+  const componentMap = useMemo(() => {
+    const map: Record<string, any> = {};
+    components?.forEach((c) => {
+      map[c.id] = c;
+    });
+    return map;
+  }, [components]);
+  const lcdpFormRef = useRef<any>();
+  const isInit = useRef<boolean>(false);
+  const [hasValue, setHasValue] = useState<boolean>(false);
+  const { modalWidth, resizeBox, resizeHandler, onClickChangeSize, isDragging } = useDrawerResize({
+    MAX: window.innerWidth - 40,
+    MIN: 568,
+    visible: open,
+  });
+  const [compValueMap, setCompValueMap] = useState<any>({});
+
+  const clearAllValues = (resetKeys: string[] = [...selectedKey]) => {
+    if (lcdpFormRef.current?.form?.getFieldsValue) {
+      const finalValues: any = {};
+      const idMap: Record<string, any> = {};
+      resetKeys.forEach((id) => {
+        const { fieldName } = componentMap[id]?.props || {};
+        if (fieldName) {
+          idMap[id] = undefined;
+          _.set(finalValues, fieldName.split('.'), undefined);
+        }
+      });
+      lcdpFormRef.current?.form?.setFieldsValue(finalValues);
+      setCompValueMap((pre: any) => ({
+        ...pre,
+        ...idMap,
+      }));
+    }
+  };
+
+  useImperativeHandle(ref, () => ({
+    handleOpenDrawer: (vis: boolean) => {
+      setOpen(vis);
+    },
+    resetFilter: () => {
+      clearAllValues();
+      if (seniorFields?.length) {
+        setSelectedItem(seniorFields?.slice(0, 2).map((c) => ({ left: c, operator: 'and', connector: '===' })) || []);
+      }
+    },
+  }));
+
+  useEffect(() => {
+    // 初始化内置前面两个变量
+    if (!isInit.current && seniorFields?.length) {
+      setSelectedItem(seniorFields.slice(0, 2).map((c) => ({ left: c, operator: 'and', connector: '===' })));
+    }
+  }, [seniorFields]);
+
+  const checkedHasValue = usePersistFn((selectedList = selectedItem) => {
+    if (lcdpFormRef.current?.form?.getFieldsValue) {
+      const values = lcdpFormRef.current.form.getFieldsValue();
+      const flag = selectedList.find((c) => {
+        const { fieldName } = componentMap[c.left]?.props || {};
+        if (fieldName) {
+          const val = _.get(values, fieldName.split('.'));
+          return val !== undefined && val !== '' && val !== null;
+        }
+        return false;
+      });
+      setHasValue(!!flag);
+    }
+  });
+
+  const selectedKey = useMemo(() => {
+    const key = new Set<string>();
+    selectedItem.forEach((c) => {
+      key.add(c.left);
+    });
+    return key;
+  }, [selectedItem]);
+
+  useEffect(() => {
+    checkedHasValue(selectedItem);
+  }, [selectedItem]);
+
+  const selectedItemList = useMemo(() => {
+    return [...selectedKey].filter(c => compValueMap[c] !== undefined && compValueMap[c] !== null && compValueMap[c] !== '');
+  }, [selectedKey, compValueMap]);
+
+  const handleSelected = (params: {id?: string, insertIndex?: number; removeId?: string}) => {
+    const { id, removeId, insertIndex } = params || {};
+    setSelectedItem(pre => {
+      const newList = pre.filter(c => c.left !== removeId);
+      if (id !== undefined) {
+        if (insertIndex !== undefined) {
+          newList[insertIndex].left = id;
+        } else {
+          // 插入到最后
+          newList.push({ left: id, operator: 'and', connector: '===' });
+        }
+      }
+      return newList;
+    });
+  };
+
+  const handleOnConfirm = (selectedList: string[] = [...selectedKey]) => {
+    if (lcdpFormRef.current?.form?.getFieldsValue) {
+      const values = lcdpFormRef.current.form.getFieldsValue();
+      const finalValues: any = {};
+      const idMap: Record<string, any> = {};
+      selectedList.forEach((id) => {
+        const { fieldName } = componentMap[id]?.props || {};
+        if (fieldName) {
+          const val = _.get(values, fieldName.split('.'));
+          idMap[id] = val;
+          _.set(finalValues, fieldName.split('.'), val);
+        }
+      });
+      setCompValueMap(idMap);
+      onOk?.(values);
+    }
+  };
+  return (
+    <>
+      {filterMode === 'drawer' && selectedItemList.length > 0 ? (
+        <div
+          className={`${prefixCls}-selected-field`}
+        >
+          <div className={`${prefixCls}-selected-field-label`}>
+            已选
+          </div>
+          <div className={`${prefixCls}-selected-field-content`}>
+            {selectedItemList?.map((id, i: number) => {
+              return (
+                <div
+                  className={`${prefixCls}-field-item`}
+                >
+                  <div className={`${prefixCls}-field-item-label`}>{componentMap[id]?.props?.name}：</div>
+                  <div className={`${prefixCls}-readonly`}>
+                    {
+                componentMap[id] ? renderer.renderComponents(
+                  [{
+                    ...componentMap[id],
+                    id: `${id}_readOnly`,
+                    props: {
+                      ...componentMap[id].props,
+                      value: compValueMap[id],
+                      readOnly: true,
+                    },
+                  }],
+                  {
+                    ...renderer.options,
+                    index: i,
+                  },
+                  {
+                    compId: `${id}_readOnly`,
+                    isLoop: false,
+                    itemId: `${id}_readOnly`,
+                  }
+                ) : null
+              }
+                  </div>
+                  <div className={`${prefixCls}-field-item-remove`}>
+                    <CloseOutlined onClick={(e) => {
+                      e.stopPropagation();
+                      handleSelected({
+                        removeId: id,
+                      });
+                      const { fieldName } = componentMap[id]?.props || {};
+                      onResetField?.(fieldName);
+                      clearAllValues([id]);
+                    }}
+                    />
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      ) : null}
+      <Drawer
+        open={open}
+        className={classNames('ued-drawer-wrap', `${prefixCls}-drawer`, isDragging ? `${prefixCls}-drawer-dragging` : undefined)}
+        title={openLabel}
+        width="fit-content"
+        footer={(
+          <>
+            <Button
+              size="middle"
+              onClick={() => {
+                setOpen(false);
+              }}
+            >取消
+            </Button>
+            <Button
+              type="primary"
+              size="middle"
+              onClick={() => {
+                setOpen(false);
+                handleOnConfirm();
+              }}
+            >确定
+            </Button>
+          </>
+    )}
+        onClose={() => {
+          setOpen(false);
+        }}
+      >
+        <div ref={resizeHandler} className={`${prefixCls}-resize-handler`} onClick={onClickChangeSize} />
+        <div
+          ref={resizeBox}
+          style={{
+            width: modalWidth,
+          }}
+          className={`${prefixCls}-drawer-content`}
+        >
+          <LcdpForm
+            {...formProps as any}
+            layout="horizontal"
+            rowSpace={0}
+            colSpace={0}
+            ref={lcdpFormRef}
+            style={undefined}
+            onValuesChange={() => {
+              checkedHasValue();
+            }}
+          >
+            {selectedItem?.map((c, i: number) => (
+              <div className={`${prefixCls}-item`}>
+                <div className={`${prefixCls}-operator`}>
+                  {i === 0 ? <span className={`${prefixCls}-operator-text`}>当</span> : (
+                    <Select defaultValue="and">
+                      {operators.map((o) => (
+                        <Select.Option value={o.value}>{o.label}</Select.Option>
+                      ))}
+                    </Select>
+                  )}
+                </div>
+                <Select
+                  onChange={(e) => {
+                    handleSelected({ id: e, insertIndex: i });
+                  }}
+                  placeholder="请选择"
+                  value={c.left}
+                >
+                  {(seniorFields || []).map(id => (
+                    <Select.Option value={id} key={id} disabled={selectedKey.has(id)}>
+                      {componentMap[id]?.props?.name}
+                    </Select.Option>
+                  ))}
+                </Select>
+                <Select className={`${prefixCls}-connector`} defaultValue="===">
+                  {connectors.map((o) => (
+                    <Select.Option value={o.value}>{o.label}</Select.Option>
+                  ))}
+                </Select>
+                <div className={`${prefixCls}-editComponent`}>
+                  {
+                componentMap[c.left] ? renderer.renderComponents(
+                  [componentMap[c.left]],
+                  {
+                    ...renderer.options,
+                    index: i,
+                  },
+                  {
+                    compId: c.left,
+                    isLoop: false,
+                    itemId: c.left,
+                  }
+                ) : null
+              }
+                </div>
+                <MinusCircleOutlined onClick={() => {
+                  handleSelected({
+                    removeId: c.left,
+                  });
+                }}
+                />
+              </div>
+            ))}
+            <div className={`${prefixCls}-add`}>
+              <Popover
+                placement="bottomLeft"
+                showArrow={false}
+                trigger="click"
+                overlayClassName={`${prefixCls}-popover`}
+                content={(
+                  <div className={`${prefixCls}-popover-content`}>
+                    <FilterSearchComp
+                      seniorFields={seniorFields}
+                      onSelected={(c) => {
+                        handleSelected({
+                          id: c,
+                        });
+                      }}
+                      actived={(c) => selectedKey.has(c)}
+                      labelFn={(c) => componentMap[c]?.props?.name}
+                    />
+                  </div>
+      )}
+              >
+                <a className={`${prefixCls}-add-item`}>
+                  <PlusCircleOutlined />
+                  添加筛选条件
+                </a>
+              </Popover>
+              {hasValue ? (
+                <>
+                  <Divider type="vertical" />
+                  <a
+                    className={`${prefixCls}-add-item`}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      clearAllValues();
+                      checkedHasValue();
+                    }}
+                  >
+                    <DeleteOutlined />
+                    清空值
+                  </a>
+                </>
+              ) : null}
+            </div>
+          </LcdpForm>
+        </div>
+      </Drawer>
+    </>
+  );
+});
+
+export default FilterDrawer;

package/lib/pcpublic/src/components/pcfactory/src/QueryForm/index.tsx

@@ -0,0 +1,135 @@
+import React, { useRef, useImperativeHandle } from 'react';
+import LcdpForm from '../Form';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import useQueryForm, { FilterMode } from './useQueryForm';
+import FilterDrawer from './FilterDrawer';
+  
+export interface QueryFormProps {
+
+    /**
+     * 高级查询字段
+     */
+    seniorFields?: string[];
+
+    /**
+     * 查询容器按钮数据
+     */
+    handleExtends: any[];
+
+    /**
+     * 高级搜索方式
+     */
+    filterMode?: FilterMode;
+
+    /**
+     * 跳转文本
+     */
+    openLabel?: string;
+
+    [key: string]: any;
+  }
+  
+  
+const QueryForm = LingxiForwardRef<any, QueryFormProps>((props, ref) => {
+  const {
+    seniorFields,
+    handleExtends,
+    foldLabel,
+    unfoldLabel,
+    filterMode = 'fold',
+    openLabel,
+    ...restProps
+  } = props;
+
+  const drawerRef = useRef<{handleOpenDrawer?: any, resetFilter?: any}>();
+
+  const { MemoRenderer } = props?.getEngineApis?.();
+
+  // 表单ref
+  const lcdpFormRef = useRef<any>({});
+    
+
+  const { QueryFormView, foldFields } = useQueryForm({
+    seniorFields,
+    // 点击按钮
+    onClickButton: (e, type, eventValue) => {
+      switch (type) {
+        // 查询按钮
+        case 'query': {
+          const values = lcdpFormRef.current?.getFieldsValue() || {};
+          // 获取表单值
+          props[eventValue || '']?.(e, values);
+          break; }
+        // 重置按钮
+        case 'reset':
+          lcdpFormRef.current?.resetFields();
+          props[eventValue || '']?.(e);
+          if (typeof drawerRef?.current?.resetFilter === 'function') {
+            drawerRef.current.resetFilter();
+          }
+          break;
+        // 高级搜索抽屉
+        case 'drawer': {
+          if (typeof drawerRef?.current?.handleOpenDrawer === 'function') {
+            drawerRef.current.handleOpenDrawer(true);
+          }
+          break;
+        }
+        default:
+          if (eventValue && props[eventValue]) {
+            props[eventValue]?.(e);
+          }
+          break;
+      }
+    },
+    handleExtends,
+    compProps: props,
+    source: 'engine',
+    foldLabel,
+    unfoldLabel,
+    filterMode,
+    openLabel,
+    rowSpace: restProps?.rowSpace,
+    layout: restProps?.layout,
+  });
+
+  useImperativeHandle(ref, () => ({
+    // 表单钩子
+    ...lcdpFormRef.current,
+  }));
+
+  return (
+    <>
+      <LcdpForm
+        {...restProps as any}
+        ref={lcdpFormRef}
+        QueryFormView={QueryFormView}
+        foldFields={foldFields}
+      />
+      <FilterDrawer
+        ref={drawerRef}
+        openLabel={openLabel || ''}
+        seniorFields={seniorFields}
+        MemoRenderer={MemoRenderer}
+        formProps={restProps}
+        filterMode={filterMode}
+        onOk={(v) => {
+          if (lcdpFormRef.current) {
+            // 点击确认时将过滤条件的值同步到表单上
+            lcdpFormRef.current.setFieldsValue(v);
+          }
+        }}
+        onResetField={(fieldName: string) => {
+          if (lcdpFormRef.current) {
+            // 删除已选高级搜索时，需要同步到表单
+            lcdpFormRef.current.setFieldsValue({
+              [String(fieldName.split('.'))]: undefined,
+            });
+          }
+        }}
+      />
+    </>
+  );
+});
+  
+export default QueryForm;