Merge branch 'feature/dataflow' of http://gitlab.qgutech.com/tianqiang/qx-common…

… into feature/dataflow

 {
 {
   "name": "@qx/common",
   "name": "@qx/common",
-  "version": "3.0.0-alpha.45",
+  "version": "3.0.0-alpha.47",
   "description": "A react library developed with dumi",
   "description": "A react library developed with dumi",
   "license": "MIT",
   "license": "MIT",
   "module": "dist/index.js",
   "module": "dist/index.js",
@@ -51,6 +51,9 @@
     "classnames": "^2.3.2",
     "classnames": "^2.3.2",
     "codemirror": "5.65.8",
     "codemirror": "5.65.8",
     "dayjs": "^1.11.9",
     "dayjs": "^1.11.9",
+    "hot-formula-parser": "^4.0.0",
+    "js-beautify": "^1.14.9",
+    "jshint": "^2.13.6",
     "lodash-es": "^4.17.21",
     "lodash-es": "^4.17.21",
     "rc-virtual-list": "^3.4.13",
     "rc-virtual-list": "^3.4.13",
     "react-codemirror2": "^7.2.1"
     "react-codemirror2": "^7.2.1"
@@ -59,6 +62,10 @@
     "@commitlint/cli": "^17.1.2",
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
     "@commitlint/config-conventional": "^17.1.0",
     "@qx/utils": "0.0.58",
     "@qx/utils": "0.0.58",
+    "@types/codemirror": "^5.60.10",
+    "@types/hot-formula-parser": "^4.0.1",
+    "@types/js-beautify": "^1.14.1",
+    "@types/jshint": "^2.12.2",
     "@types/lodash-es": "^4.17.8",
     "@types/lodash-es": "^4.17.8",
     "@types/react": "^18.0.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/react-dom": "^18.0.0",

+export enum FIELD_TYPE_PROPS {
+  EMPTY = '',
+  // 文本
+  TEXT = 'TEXT',
+  STRING = 'STRING',
+
+  // 日期
+  DATE = 'DATE',
+  DATE_TIME = 'DATE_TIME',
+  // 人员
+  USER = 'USER',
+  USER_MULTI = 'USER_MULTI',
+  // 部门
+  ORG = 'ORG',
+  ORG_MULTI = 'ORG_MULTI',
+  // 数字
+  NUM = 'NUM',
+  // 布尔
+  BOOL = 'BOOL',
+  // 枚举
+  ENUM = 'ENUM',
+  ENUM_MULTI = 'ENUM_MULTI',
+  // 文件
+  FILE = 'FILE',
+
+  // 公式：数值类
+  FORMULA = 'FORMULA',
+
+  DOUBLE = 'DOUBLE',
+  INTEGER = 'INTEGER',
+  DECIMAL = 'DECIMAL',
+  PERCENT = 'PERCENT',
+
+  YEAR = 'YEAR',
+  YEAR_MONTH = 'YEAR_MONTH',
+  YEAR_HOUR = 'YEAR_HOUR',
+  YEAR_DATE = 'YEAR_DATE',
+  YEAR_MIN = 'YEAR_MIN',
+  YEAR_SEC = 'YEAR_SEC',
+  HOUR = 'HOUR',
+  HOUR_MIN = 'HOUR_MIN',
+  HOUR_SEC = 'HOUR_SEC',
+
+  TREE = 'TREE',
+  REL = 'REL',
+  REL_MULTI = 'REL_MULTI',
+  REL_FIELD = 'REL_FIELD',
+
+  TABLE = 'TABLE',
+
+  // 流程专用
+  FLOW_WF_APRV_USR = 'FLOW_WF_APRV_USR',
+  FLOW_WF_DQ_MODEL = 'FLOW_WF_DQ_MODEL',
+  FLOW_WF_RECORD = 'FLOW_WF_RECORD',
+
+  //参数专用
+  OBJECT = 'OBJECT',
+  ARRAY = 'ARRAY',
+
+  // 组合文本，用于文本和变量组合
+  COMBINED_TEXT = 'COMBINED_TEXT',
+  // 时间
+  TIME = 'TIME',
+}
+
+export const formatEnum: Record<string, string> = {
+  YEAR: 'YYYY',
+  YEAR_MONTH: 'YYYY-MM',
+  YEAR_DATE: 'YYYY-MM-DD',
+  YEAR_HOUR: 'YYYY-MM-DD HH:00',
+  YEAR_MIN: 'YYYY-MM-DD HH:mm',
+  YEAR_SEC: 'YYYY-MM-DD HH:mm:ss',
+  HOUR_MIN: 'HH:mm',
+  HOUR_SEC: 'HH:mm:ss',
+};

-export * from './qx-filter-condition';
-export * from './qx-parameter-setting';
-export * from './qx-sort-condition';
-export * from './qx-base-icon';
-export * from './qx-tags-input';
-export * from './qx-user-selector';
-export * from './qx-org-selector';
-export * from './qx-form-select';
-export * from './qx-pos-selector';
-export * from './qx-role-selector';
 export * from './qx-app-selector';
 export * from './qx-app-selector';
-export * from './utils';
-export * from './qx-field';
-export * from './qx-field-setter';
 export * from './qx-base-condition';
 export * from './qx-base-condition';
+export * from './qx-base-icon';
 export * from './qx-btn';
 export * from './qx-btn';
-export * from './qx-progress';
-export * from './qx-search-input';
+export * from './qx-condition';
 export * from './qx-dynamic-component';
 export * from './qx-dynamic-component';
-export * from './qx-widget-icon';
+export * from './qx-field';
+export * from './qx-field-setter';
+export * from './qx-filter-condition';
 export * from './qx-flow-node-selector';
 export * from './qx-flow-node-selector';
+export * from './qx-form-select';
+export * from './qx-function-operation';
 export * from './qx-icon-selector';
 export * from './qx-icon-selector';
-export * from './qx-condition';
-
-
+export * from './qx-org-selector';
+export * from './qx-parameter-setting';
+export * from './qx-pos-selector';
+export * from './qx-progress';
+export * from './qx-role-selector';
+export * from './qx-search-input';
+export * from './qx-sort-condition';
+export * from './qx-tags-input';
+export * from './qx-user-selector';
+export * from './qx-widget-icon';
+export * from './utils';

+import React, { useEffect, useState } from 'react';
+import { UnControlled as CodeMirror } from 'react-codemirror2';
+import { cloneDeep, flatten, sortBy, size, isEqual, forEach, debounce } from 'lodash-es';
+import type { VariableMappingProps } from '../qx-field-setter';
+import funObjects from './functions';
+import 'codemirror/lib/codemirror.css';
+import 'codemirror/addon/hint/show-hint';
+import 'codemirror/addon/hint/show-hint.css';
+import { CloseCircleFilled } from '@ant-design/icons';
+import './index.less';
+
+/**
+ * 填充到指定位数
+ * eg：000000000
+ *
+ * @param val     原始值
+ * @param length  填充后长度
+ * @param fill    填充值
+ */
+const strFill = (val: string | number, length: number, fill: string | number) => {
+  return val.toString().padStart(length, fill.toString());
+};
+
+type PositionProps = {
+  s: number;
+  e: number;
+};
+
+export type VariableProps = {
+  variable: string;
+  pos: PositionProps;
+};
+
+/**
+ * 字符串中提取变量（${xxx}）
+ * @param code
+ */
+export const getAllVariable = (code: string) => {
+  let codeLocal: string = cloneDeep(code);
+  if (!codeLocal) {
+    return [];
+  }
+  const variables: VariableProps[] = [];
+
+  function loopGet() {
+    const pos: PositionProps = {
+      s: codeLocal.indexOf('${'),
+      e: codeLocal.indexOf('}'),
+    };
+    if (pos.s === -1 && pos.e === -1) {
+      return;
+    }
+    const variable = codeLocal.slice(pos.s, pos.e + 1);
+    variables.push({ variable, pos });
+    codeLocal = codeLocal.replace(variable, strFill(0, variable.length, 0));
+
+    loopGet();
+  }
+
+  loopGet();
+  return variables;
+};
+
+const domTagGen = (variable: string, text: string, color?: string) => {
+  // tag html
+  const dom = document.createElement('span');
+  // dom.className = 'ant-tag tag';
+  dom.style.background = '#c9dffc';
+  dom.style.borderRadius = '2px';
+  dom.style.margin = '0 1px';
+  dom.style.padding = '1px 3px';
+  dom.style.fontSize = '96%';
+  if (color) {
+    dom.style.color = color;
+  }
+  dom.setAttribute('data-widget', variable);
+  dom.innerHTML = text;
+  return dom;
+};
+
+type CodeHighLightProps = {
+  // eg: 'hello ${v1} ${v2}!'
+  value: string;
+  // eg: {'${v1}': 'hehe', '${v2}': 'enen'}
+  variableObj: Record<string, string> | undefined;
+  onChange: (val: any) => void;
+  className?: any;
+  newVariable?: VariableMappingProps;
+  style?: any;
+  autofocus?: boolean;
+  focusFunHandler?: (str: string) => void;
+  readOnly?: boolean;
+  // 是否使用函数（使用，则执行针对函数关键词的高亮匹配处理）
+  isUseFun?: boolean;
+  from?: string;
+  resetValue?: string;
+  allowClear?: boolean | undefined;
+};
+
+/**
+ * 变量高亮
+ *  const inputRef = React.useRef<any>(null);
+ * `const cm = inputRef.current.editor;`
+ *
+ * @param props
+ * @constructor
+ */
+const CodeEditor: React.FC<CodeHighLightProps> = ({
+  value,
+  variableObj,
+  newVariable,
+  className,
+  onChange,
+  autofocus,
+  focusFunHandler,
+  readOnly,
+  isUseFun,
+  from,
+  resetValue,
+  allowClear,
+}) => {
+  const [valueLocal, setValueLocal] = useState<string>();
+  // 变量值、名称映射关系
+  const [variableObjLocal, setVariableObjLocal] = useState<Record<string, string>>({});
+  const [codeEditor, setCodeEditor] = useState<any>();
+  const [isInitDone, setIsInitDone] = useState<boolean>(false);
+  const [focusFun, setFocusFun] = useState<string>();
+
+  const funObjs = flatten(funObjects.map((item: any) => item.children));
+  const funObjSimple: any = {};
+  funObjs.map((item) => Object.assign(funObjSimple, { [item.title]: item.title }));
+  // 以变量字符长度排序，确保`DATAIF`比`IF`优先匹配
+  const funObjsSort = sortBy(funObjs, function (o) {
+    return 0 - o.title.length;
+  });
+
+  useEffect(() => {
+    if (value && variableObj) {
+      // 限制初始值只设置一次
+      if (!isInitDone) {
+        setValueLocal(value);
+      }
+
+      if (size(variableObj) > 0) {
+        setVariableObjLocal(variableObj);
+      }
+    }
+  }, [value, variableObj]);
+
+  useEffect(() => {
+    if (typeof focusFunHandler === 'function') {
+      focusFunHandler(focusFun || '');
+    }
+  }, [focusFun]);
+
+  const cmUtils = {
+    // 插入变量
+    insert: (editor: any, variable: string, isFormula: boolean = false) => {
+      if (!editor) {
+        return;
+      }
+      // 光标位置插入新值（变量）
+      editor.replaceSelection(variable);
+      cmUtils.variableRender(editor);
+
+      // "公式"类型变量时
+      if (isFormula) {
+        // 光标位置固定插入内容
+        editor.replaceSelection('()');
+        // 光标左移
+        codeEditor.execCommand('goCharLeft');
+      }
+      // 让编辑器聚集
+      editor.focus();
+    },
+
+    // 替换变量（变量示例：${xxx}）
+    variableRender: (editor: any) => {
+      if (!editor) {
+        return;
+      }
+
+      const code = cloneDeep(editor.getValue());
+      // 换行分隔
+      const codeArr = code.split('\n');
+      const variReplace = (cm: any, line: number) => {
+        const sIndex = codeArr[line].indexOf('${');
+        const eIndex = codeArr[line].indexOf('}');
+        if (sIndex === -1 && eIndex === -1) {
+          return;
+        }
+
+        const variable = codeArr[line].slice(sIndex, eIndex + 1);
+        const text: string = variableObjLocal[variable] || '（已缺失）';
+        const hasError: boolean = variableObjLocal[variable] === undefined;
+
+        cm?.markText(
+          {
+            line: line,
+            ch: sIndex,
+          },
+          {
+            line: line,
+            ch: eIndex + 1,
+          },
+          {
+            replacedWith: domTagGen(variable, text, hasError ? 'red' : '#026be1'),
+          },
+        );
+        codeArr[line] = codeArr[line].replace(variable, strFill(0, variable.length, 0));
+
+        variReplace(cm, line);
+      };
+
+      const funReplace = (cm: any, line: number, funStr: string) => {
+        const sIndex = codeArr[line].indexOf(funStr);
+        const eIndex = sIndex + funStr.length;
+        if (sIndex === -1) {
+          return;
+        }
+        const variable = codeArr[line].slice(sIndex, eIndex);
+        const text: string = funObjSimple[variable] || '（已缺失）';
+        const hasError: boolean = funObjSimple[variable] === undefined;
+
+        cm?.markText(
+          {
+            line: line,
+            ch: sIndex,
+          },
+          {
+            line: line,
+            ch: eIndex,
+          },
+          {
+            replacedWith: domTagGen(variable, text, hasError ? 'red' : '#026be1'),
+          },
+        );
+        codeArr[line] = codeArr[line].replace(variable, strFill(0, variable.length, 0));
+
+        funReplace(cm, line, funStr);
+      };
+
+      for (let i = 0; i < editor.doc.size; i++) {
+        variReplace(editor, i);
+        if (Boolean(isUseFun)) {
+          funObjsSort.map((v) => funReplace(editor, i, v.title));
+        }
+      }
+    },
+  };
+
+  useEffect(() => {
+    if (!codeEditor || !newVariable) {
+      return;
+    }
+
+    setVariableObjLocal(() => {
+      return Object.assign(variableObjLocal, {
+        [newVariable.key]: newVariable.name,
+      });
+    });
+
+    cmUtils.insert(codeEditor, newVariable.key, newVariable.type === 'fun');
+  }, [newVariable, codeEditor]);
+
+  useEffect(() => {
+    // 消息提醒 新增模板时  触发方式变为"定时触发"时 需要将消息内容中的表单字段值清除
+    if (resetValue) {
+      setValueLocal(resetValue);
+    }
+    // console.log('--resetValue--',resetValue)
+  }, [resetValue]);
+
+  const onValueChange = (editor: any, data: any, val: string) => {
+    setCodeEditor(editor);
+    cmUtils.variableRender(editor);
+
+    // TODO 默认值bug修复 暂时注释
+    // const isSame = isEqual(valueLocal, val);
+    // if (isSame) {
+    //   return;
+    // }
+
+    setIsInitDone(true);
+    onChange(val);
+  };
+
+  useEffect(() => {
+    if (variableObjLocal) {
+      cmUtils.variableRender(codeEditor);
+    }
+  }, [variableObjLocal]);
+
+  // 字符串反转
+  const strReverse = (str: string) => {
+    return str.split('').reverse().join('');
+  };
+
+  /**
+   * 查找编辑器光标所对应函数，设置其函数说明信息
+   * todo 待优化，规则不够完善
+   * @param editor
+   */
+  const findFocusFun = (editor: any) => {
+    const cursor = editor.getCursor();
+    const lineStr = editor.getLine(cursor.line);
+    const lineStrPart = lineStr.substring(0, cursor.ch);
+    const lineStrPartRev = strReverse(lineStrPart);
+
+    let flag: boolean = false;
+    let funName: string = '';
+
+    forEach(funObjsSort, (v) => {
+      if (flag) {
+        return;
+      }
+      const i = (lineStrPartRev || '').indexOf(strReverse(v.title));
+      if (i > -1) {
+        flag = true;
+        funName = v.title;
+        return;
+      }
+    });
+    return funName;
+  };
+
+  const handleClear = () => {
+    // 清除组件内容
+    codeEditor.doc.setValue('');
+  };
+
+  return (
+    //这里className中的qx-copy-send-cm 是抄送节点--消息内容专用的样式,如果有必要，可将className回滚设置为'qx-formula-cm '  + className
+    <div
+      className={
+        from === 'copySend' ? 'qx-copy-send-cm ' + className : 'qx-formula-cm ' + className
+      }
+      style={{ height: '100%', padding: 0 }}
+    >
+      <CodeMirror
+        value={(valueLocal || '').toString()}
+        editorDidMount={(editor) => setCodeEditor(editor)}
+        // onCursorActivity={(e) => console.log('e', e)}
+        // onCursorActivity={(e) => e?.showHint()} //没有会报错
+        options={{
+          // mode: 'text/html',
+          lineNumbers: false,
+          autofocus,
+          readOnly: Boolean(readOnly),
+          cursorHeight: Boolean(readOnly) ? 0 : 'auto',
+          // 滚动（false，默认）或自动换行
+          lineWrapping: true,
+        }}
+        onChange={debounce(onValueChange, 300)}
+        onCursor={(editor) => {
+          const funName = findFocusFun(editor);
+          setFocusFun(funName);
+        }}
+      />
+      {allowClear && value && (
+        <CloseCircleFilled className={'qx-field-setter__clear'} onClick={handleClear} />
+      )}
+    </div>
+  );
+};
+
+export default CodeEditor;

-import React, { useEffect, useState } from 'react';
-import { UnControlled as CodeMirror } from 'react-codemirror2';
-import { cloneDeep, flatten, sortBy, size, isEqual, forEach, debounce } from 'lodash-es';
-import type { VariableMappingProps } from '../qx-field-setter';
-import funObjects from './functions';
+import { CloseCircleFilled } from '@ant-design/icons';
+import _ from 'lodash-es';
+import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { handleHighlight } from '../qx-function-operation/components/var-picker';
+import {
+  domTagGen,
+  flatten,
+  reverseStr,
+  strFill,
+  widgetMapping,
+} from '../qx-function-operation/util';
+import './style.less';
+
+import Cm from 'codemirror';
 import 'codemirror/lib/codemirror.css';
 import 'codemirror/lib/codemirror.css';
-import 'codemirror/addon/hint/show-hint';
+import 'codemirror/lib/codemirror.js';
+import { UnControlled as CodeMirror } from 'react-codemirror2';
+import './plugins/cm-extensions';
+
+import 'codemirror/mode/javascript/javascript.js';
+import 'codemirror/theme/idea.css';
+
 import 'codemirror/addon/hint/show-hint.css';
 import 'codemirror/addon/hint/show-hint.css';
-import { CloseCircleFilled } from '@ant-design/icons';
-import './index.less';
+import 'codemirror/addon/hint/show-hint.js'; // ctrl代码提示补全
 
 
-/**
- * 填充到指定位数
- * eg：000000000
- *
- * @param val     原始值
- * @param length  填充后长度
- * @param fill    填充值
- */
-const strFill = (val: string | number, length: number, fill: string | number) => {
-  return val.toString().padStart(length, fill.toString());
-};
+import 'codemirror/addon/selection/active-line.js'; // 光标代码高亮
+
+import 'codemirror/addon/edit/matchbrackets.js';
+import 'codemirror/addon/lint/javascript-lint.js';
+import 'codemirror/addon/lint/lint.css';
+import 'codemirror/addon/lint/lint.js'; // 错误提示
+import beautify from 'js-beautify';
+import { JSHINT } from 'jshint';
+window.JSHINT = JSHINT;
 
 
 type PositionProps = {
 type PositionProps = {
   s: number;
   s: number;
@@ -36,7 +49,7 @@ export type VariableProps = {
  * @param code
  * @param code
  */
  */
 export const getAllVariable = (code: string) => {
 export const getAllVariable = (code: string) => {
-  let codeLocal: string = cloneDeep(code);
+  let codeLocal: string = _.clone(code);
   if (!codeLocal) {
   if (!codeLocal) {
     return [];
     return [];
   }
   }
@@ -61,307 +74,655 @@ export const getAllVariable = (code: string) => {
   return variables;
   return variables;
 };
 };
 
 
-const domTagGen = (variable: string, text: string, color?: string) => {
-  // tag html
-  const dom = document.createElement('span');
-  // dom.className = 'ant-tag tag';
-  dom.style.background = '#c9dffc';
-  dom.style.borderRadius = '2px';
-  dom.style.margin = '0 1px';
-  dom.style.padding = '1px 3px';
-  dom.style.fontSize = '96%';
-  if (color) {
-    dom.style.color = color;
+const getWidgetByType = (type?: string) => {
+  let res: string;
+  switch (type) {
+    case 'TEXT':
+      res = 'qxInput';
+      break;
+    case 'NUM':
+      res = 'qxNumber';
+      break;
+    default:
+      res = '';
   }
   }
-  dom.setAttribute('data-widget', variable);
-  dom.innerHTML = text;
-  return dom;
+  // @ts-ignore
+  return res;
+};
+
+type VarProps = {
+  key: string;
+  name?: string;
+  type?: string;
 };
 };
 
 
-type CodeHighLightProps = {
+type EditorProps = {
+  cRef: any;
   // eg: 'hello ${v1} ${v2}!'
   // eg: 'hello ${v1} ${v2}!'
   value: string;
   value: string;
   // eg: {'${v1}': 'hehe', '${v2}': 'enen'}
   // eg: {'${v1}': 'hehe', '${v2}': 'enen'}
-  variableObj: Record<string, string> | undefined;
-  onChange: (val: any) => void;
+  // variableObj: Record<string, string> | undefined;
+  isUseFun: boolean;
+  autofocus?: boolean;
+  newVariable: VarProps;
+  funcDataList: any[];
+  varDataList: any[];
   className?: any;
   className?: any;
-  newVariable?: VariableMappingProps;
   style?: any;
   style?: any;
-  autofocus?: boolean;
-  focusFunHandler?: (str: string) => void;
   readOnly?: boolean;
   readOnly?: boolean;
-  // 是否使用函数（使用，则执行针对函数关键词的高亮匹配处理）
-  isUseFun?: boolean;
   from?: string;
   from?: string;
   resetValue?: string;
   resetValue?: string;
   allowClear?: boolean | undefined;
   allowClear?: boolean | undefined;
+  onChange: (code: string) => void;
+  onFocusFunc: (funcName: string | null) => void;
 };
 };
 
 
-/**
- * 变量高亮
- *  const inputRef = React.useRef<any>(null);
- * `const cm = inputRef.current.editor;`
- *
- * @param props
- * @constructor
- */
-const CodeEditor: React.FC<CodeHighLightProps> = ({
+const CodeEditor: React.FC<EditorProps> = ({
+  cRef,
+  funcDataList,
+  varDataList,
+  isUseFun,
+  autofocus,
+  readOnly,
+  allowClear,
+  resetValue,
   value,
   value,
-  variableObj,
   newVariable,
   newVariable,
+  from,
   className,
   className,
   onChange,
   onChange,
-  autofocus,
-  focusFunHandler,
-  readOnly,
-  isUseFun,
-  from,
-  resetValue,
-  allowClear,
+  onFocusFunc,
 }) => {
 }) => {
-  const [valueLocal, setValueLocal] = useState<string>();
-  // 变量值、名称映射关系
-  const [variableObjLocal, setVariableObjLocal] = useState<Record<string, string>>({});
-  const [codeEditor, setCodeEditor] = useState<any>();
   const [isInitDone, setIsInitDone] = useState<boolean>(false);
   const [isInitDone, setIsInitDone] = useState<boolean>(false);
-  const [focusFun, setFocusFun] = useState<string>();
-
-  const funObjs = flatten(funObjects.map((item: any) => item.children));
-  const funObjSimple: any = {};
-  funObjs.map((item) => Object.assign(funObjSimple, { [item.title]: item.title }));
-  // 以变量字符长度排序，确保`DATAIF`比`IF`优先匹配
-  const funObjsSort = sortBy(funObjs, function (o) {
-    return 0 - o.title.length;
-  });
+  const [valueLocal, setValueLocal] = useState<string>();
+  const [editor, setEditor] = useState<any>(null);
+  const formatRef = useRef(false); // 代码格式化引起的变化
+  // 定义匹配括号的正则表达式
+  const bracketRegex = /[(){}\[\]]/g;
 
 
   useEffect(() => {
   useEffect(() => {
-    if (value && variableObj) {
-      // 限制初始值只设置一次
-      if (!isInitDone) {
-        setValueLocal(value);
+    if (!editor) return;
+    editor.on('mousedown', (_cm: any, event: any) => {
+      // 1 = 鼠标左键，2 = 鼠标右键，4 = 鼠标中键
+      if (event.buttons === 1) {
+        const element = event.target as Element;
+        if (element.classList.contains('funcName')) {
+          const funcName = element.getAttribute('data-widget');
+          const funcData = funcDataListFlatten.current.find(
+            (data: any) => data.funcNameEg === funcName,
+          );
+          if (funcData && typeof onFocusFunc === 'function') {
+            onFocusFunc(funcData);
+          }
+        }
+      }
+    });
+    // 添加占位符功能
+    const placeholderText = editor.getOption('placeholder');
+    const placeholderElement = document.createElement('div');
+    placeholderElement.className = 'CodeMirror-placeholder';
+    placeholderElement.textContent = placeholderText;
+    editor.getWrapperElement().appendChild(placeholderElement);
+
+    const handleChange = () => {
+      const value = editor.getValue();
+      if (value?.length) {
+        placeholderElement.style.display = 'none';
+      } else {
+        placeholderElement.style.display = 'block';
       }
       }
+      const lastLine = editor.lastLine();
+      editor.scrollIntoView(
+        { line: lastLine, ch: 0, margin: { bottom: 50 } },
+        100,
+      );
+
+      setTimeout(() => {
+        // 获取编辑器的包装元素
+        const wrapperElements =
+          document.getElementsByClassName('CodeMirror-widget');
+        // 将 cm-ignore-events 的值设为 false
+        for (let i = 0; i < (wrapperElements || []).length; i++) {
+          wrapperElements[i].setAttribute('cm-ignore-events', 'false');
+        }
+      }, 100);
+
+      // 在内容中查找匹配的括号
+      let match: any;
+      while ((match = bracketRegex.exec(value))) {
+        const from = { line: 0, ch: match.index };
+        const to = { line: 0, ch: match.index + 1 };
 
 
-      if (size(variableObj) > 0) {
-        setVariableObjLocal(variableObj);
+        // 标记匹配的括号并应用 CSS 类名
+        editor.markText(from, to, { className: 'bracket-mark' });
       }
       }
-    }
-  }, [value, variableObj]);
+
+      // const processedContent = value.replace(/(\(|\)|\[|\]|\{|\})/g, '<span class="custom-paren">$1</span>');
+      // editor.setValue(processedContent);
+    };
+    handleChange();
+
+    // 监听编辑器的输入事件
+    editor.on('change', handleChange);
+  }, [editor]);
+
+  // 扁平化dataSource
+  const funcDataListFlatten: any = useRef([]);
+  if (!funcDataListFlatten.current.length && funcDataList.length) {
+    flatten(funcDataList, funcDataListFlatten.current);
+  }
+  const funcDataListSimple: any = {};
+  funcDataListFlatten.current.forEach((item: any) => {
+    Object.assign(funcDataListSimple, { [item.title]: item.title });
+  });
+  // 以变量字符长度排序，确保`DATAIF`比`IF`优先匹配
+  const funcDataListSort = funcDataListFlatten.current;
 
 
   useEffect(() => {
   useEffect(() => {
-    if (typeof focusFunHandler === 'function') {
-      focusFunHandler(focusFun || '');
+    if (funcDataListSort.length) {
+      setTimeout(() => {
+        cmUtils.variableRender();
+      }, 100);
     }
     }
-  }, [focusFun]);
+  }, [JSON.stringify(funcDataListSort)]);
 
 
-  const cmUtils = {
-    // 插入变量
-    insert: (editor: any, variable: string, isFormula: boolean = false) => {
-      if (!editor) {
-        return;
+  // const varDataListFlatten: any[] = [];
+  const varDataListFlatten = useRef<any[]>([]);
+  if (!varDataListFlatten.current.length && varDataList.length) {
+    flatten(varDataList, varDataListFlatten.current);
+  }
+  // flatten(varDataList, varDataListFlatten);
+  const varDataListSimple: any = {};
+  varDataListFlatten.current.forEach((item) => {
+    Object.assign(varDataListSimple, { [item.key]: item.titleStr });
+    if (item.attrs) {
+      item.attrs.forEach((attrItem: any) =>
+        Object.assign(varDataListSimple, {
+          [attrItem.key]: `${item.titleStr}.${attrItem.titleStr}`,
+        }),
+      );
+    }
+  });
+
+  // 插入的变量在函数内，并且前面也是变量
+  const isInFunc = (id: number, code: string) => {
+    let left1: number = 0;
+    let left2: number = 0;
+    let right1: number = 0;
+    let right2: number = 0;
+    // 前面是否是变量
+    const beforeVar = code.split('')[id - 1] === '}';
+    code.split('').forEach((item, index) => {
+      if (index < id) {
+        if (item === '(') {
+          left1++;
+        } else if (item === ')') {
+          left2++;
+        }
+      } else {
+        if (item === '(') {
+          right1++;
+        } else if (item === ')') {
+          right2++;
+        }
       }
       }
+    });
+    return left1 > left2 && right1 < right2 && beforeVar;
+  };
+
+  const cmUtils: {
+    insert: (variable: string, isFormula: boolean) => void;
+    variableRender: () => void;
+  } = {
+    // 插入变量
+    insert: (variable: string, isFormula: boolean = false) => {
       // 光标位置插入新值（变量）
       // 光标位置插入新值（变量）
-      editor.replaceSelection(variable);
-      cmUtils.variableRender(editor);
+      // editor.replaceSelection(variable);
 
 
       // "公式"类型变量时
       // "公式"类型变量时
       if (isFormula) {
       if (isFormula) {
         // 光标位置固定插入内容
         // 光标位置固定插入内容
-        editor.replaceSelection('()');
+        editor.replaceSelection(variable + '()');
         // 光标左移
         // 光标左移
-        codeEditor.execCommand('goCharLeft');
+        editor.execCommand('goCharLeft');
+      } else {
+        const pos = editor.getCursor()?.ch;
+        const inFunc = isInFunc(pos, editor.getValue());
+        if (inFunc) {
+          editor.replaceSelection(',' + variable);
+        } else {
+          editor.replaceSelection(variable);
+        }
       }
       }
+      cmUtils.variableRender();
       // 让编辑器聚集
       // 让编辑器聚集
       editor.focus();
       editor.focus();
     },
     },
 
 
     // 替换变量（变量示例：${xxx}）
     // 替换变量（变量示例：${xxx}）
-    variableRender: (editor: any) => {
-      if (!editor) {
-        return;
-      }
-
-      const code = cloneDeep(editor.getValue());
+    variableRender: () => {
+      const code = _.cloneDeep(editor.getValue());
       // 换行分隔
       // 换行分隔
       const codeArr = code.split('\n');
       const codeArr = code.split('\n');
-      const variReplace = (cm: any, line: number) => {
-        const sIndex = codeArr[line].indexOf('${');
-        const eIndex = codeArr[line].indexOf('}');
-        if (sIndex === -1 && eIndex === -1) {
-          return;
-        }
 
 
-        const variable = codeArr[line].slice(sIndex, eIndex + 1);
-        const text: string = variableObjLocal[variable] || '（已缺失）';
-        const hasError: boolean = variableObjLocal[variable] === undefined;
-
-        cm?.markText(
+      const makeText = (
+        line: number,
+        sIndex: number,
+        eIndex: number,
+        variable: string,
+        text: string,
+        hasError: boolean,
+        type?: string,
+      ) => {
+        editor.markText(
           {
           {
             line: line,
             line: line,
             ch: sIndex,
             ch: sIndex,
           },
           },
           {
           {
             line: line,
             line: line,
-            ch: eIndex + 1,
+            ch: eIndex,
           },
           },
           {
           {
-            replacedWith: domTagGen(variable, text, hasError ? 'red' : '#026be1'),
+            replacedWith: domTagGen(
+              variable,
+              text,
+              hasError ? 'red' : '#026be1',
+              type,
+            ),
+            inclusiveRight: false,
+            readOnly: false,
           },
           },
         );
         );
-        codeArr[line] = codeArr[line].replace(variable, strFill(0, variable.length, 0));
-
-        variReplace(cm, line);
       };
       };
 
 
-      const funReplace = (cm: any, line: number, funStr: string) => {
-        const sIndex = codeArr[line].indexOf(funStr);
-        const eIndex = sIndex + funStr.length;
-        if (sIndex === -1) {
-          return;
+      const replacement = (
+        line: number,
+        regexp: any,
+        refObj: any,
+        type?: string,
+      ) => {
+        const lineStr = codeArr[line];
+        let match: any;
+        while ((match = regexp.exec(lineStr)) !== null) {
+          const variable = match[0];
+          const sIndex = match.index;
+          const eIndex = sIndex + variable.length;
+          const text: string = refObj[variable] || '（已缺失）';
+          if (!type || (type === 'function' && lineStr[eIndex] === '(')) {
+            const hasError: boolean = refObj[variable] === undefined;
+            makeText(line, sIndex, eIndex, variable, text, hasError, type);
+            codeArr[line] = codeArr[line].replace(
+              variable,
+              strFill(0, variable.length, 0),
+            );
+          }
         }
         }
-        const variable = codeArr[line].slice(sIndex, eIndex);
-        const text: string = funObjSimple[variable] || '（已缺失）';
-        const hasError: boolean = funObjSimple[variable] === undefined;
-
-        cm?.markText(
-          {
-            line: line,
-            ch: sIndex,
-          },
-          {
-            line: line,
-            ch: eIndex,
-          },
-          {
-            replacedWith: domTagGen(variable, text, hasError ? 'red' : '#026be1'),
-          },
-        );
-        codeArr[line] = codeArr[line].replace(variable, strFill(0, variable.length, 0));
-
-        funReplace(cm, line, funStr);
       };
       };
 
 
+      const funcRegexp = new RegExp(
+        funcDataListSort
+          .map((data: any) => {
+            return '\\b' + data.title + '\\b';
+          })
+          .join('|'),
+        'g',
+      );
+
       for (let i = 0; i < editor.doc.size; i++) {
       for (let i = 0; i < editor.doc.size; i++) {
-        variReplace(editor, i);
-        if (Boolean(isUseFun)) {
-          funObjsSort.map((v) => funReplace(editor, i, v.title));
+        // 替换变量名称
+        const regexp = /\$\{.*?\}/g;
+        replacement(i, regexp, varDataListSimple);
+        if (Boolean(isUseFun) && funcDataListSort.length > 0) {
+          // 替换函数公式名称
+          replacement(i, funcRegexp, funcDataListSimple, 'function');
         }
         }
       }
       }
     },
     },
   };
   };
 
 
+  const getFuncId = (name: string) => {
+    return funcDataListFlatten.current.find(
+      (item: any) => item.funcNameEg === name,
+    )?.id;
+  };
+
   useEffect(() => {
   useEffect(() => {
-    if (!codeEditor || !newVariable) {
-      return;
+    if (value && !isInitDone) {
+      // 限制初始值只设置一次
+      setValueLocal(value);
     }
     }
-
-    setVariableObjLocal(() => {
-      return Object.assign(variableObjLocal, {
-        [newVariable.key]: newVariable.name,
-      });
-    });
-
-    cmUtils.insert(codeEditor, newVariable.key, newVariable.type === 'fun');
-  }, [newVariable, codeEditor]);
+  }, [value]);
 
 
   useEffect(() => {
   useEffect(() => {
     // 消息提醒 新增模板时  触发方式变为"定时触发"时 需要将消息内容中的表单字段值清除
     // 消息提醒 新增模板时  触发方式变为"定时触发"时 需要将消息内容中的表单字段值清除
     if (resetValue) {
     if (resetValue) {
       setValueLocal(resetValue);
       setValueLocal(resetValue);
     }
     }
-    // console.log('--resetValue--',resetValue)
   }, [resetValue]);
   }, [resetValue]);
 
 
-  const onValueChange = (editor: any, data: any, val: string) => {
-    setCodeEditor(editor);
-    cmUtils.variableRender(editor);
-
-    // TODO 默认值bug修复 暂时注释
-    // const isSame = isEqual(valueLocal, val);
-    // if (isSame) {
-    //   return;
-    // }
+  useEffect(() => {
+    if (newVariable) {
+      cmUtils.insert(newVariable.key, newVariable.type === 'fun');
+    }
+  }, [newVariable]);
 
 
+  // 编辑器内容变化响应
+  const onHandleChange = (editor: any, data: any, value: string) => {
+    cmUtils.variableRender();
+    onChange(value);
     setIsInitDone(true);
     setIsInitDone(true);
-    onChange(val);
-  };
-
-  useEffect(() => {
-    if (variableObjLocal) {
-      cmUtils.variableRender(codeEditor);
+    if (!formatRef.current) {
+      editor.showHint();
+    }
+    formatRef.current = false;
+    // 函数补全时，光标左移
+    if (data.origin === 'complete' && data.text?.[0]?.endsWith('()')) {
+      editor.execCommand('goCharLeft');
+      const funcName = data.text?.[0].slice(0, -2);
+      const funcData = funcDataListFlatten.current.find(
+        (data: any) => data.funcNameEg === funcName,
+      );
+      if (funcData && typeof onFocusFunc === 'function') {
+        onFocusFunc(funcData);
+      }
     }
     }
-  }, [variableObjLocal]);
+    if (value === '') {
+      onFocusFunc(null);
+    }
+  };
 
 
-  // 字符串反转
-  const strReverse = (str: string) => {
-    return str.split('').reverse().join('');
+  // 光标移动响应
+  // const onHandleCursor = (editor: any, cursor: any) => {
+  //   const lineStr = editor.getLine(cursor.line);
+  //   const funcName = getLegalVaribleNameFromIndex(lineStr, cursor.ch);
+  //   const funcData = funcDataListFlatten.find(
+  //     (data) => data.title === funcName,
+  //   );
+  //   if (funcData && typeof onFocusFunc === 'function') {
+  //     onFocusFunc(funcData);
+  //   }
+  // };
+
+  // 格式化code文本
+  const autoFormatSelection = () => {
+    const code = editor.getValue(); // 获取编辑器中的代码
+    let beautifiedCode = beautify(code); // 使用代码美化工具（如 js-beautify）美化代码
+    beautifiedCode = beautifiedCode.replace(
+      /\$\s*\{\s*(.*?)\s*\}/g,
+      function (a, b) {
+        return '${' + b + '}';
+      },
+    );
+    formatRef.current = true;
+    editor.setValue(beautifiedCode); // 将美化后的代码设置回编辑器
   };
   };
 
 
-  /**
-   * 查找编辑器光标所对应函数，设置其函数说明信息
-   * todo 待优化，规则不够完善
-   * @param editor
-   */
-  const findFocusFun = (editor: any) => {
-    const cursor = editor.getCursor();
-    const lineStr = editor.getLine(cursor.line);
-    const lineStrPart = lineStr.substring(0, cursor.ch);
-    const lineStrPartRev = strReverse(lineStrPart);
-
-    let flag: boolean = false;
-    let funName: string = '';
-
-    forEach(funObjsSort, (v) => {
-      if (flag) {
-        return;
-      }
-      const i = (lineStrPartRev || '').indexOf(strReverse(v.title));
-      if (i > -1) {
-        flag = true;
-        funName = v.title;
-        return;
-      }
+  // 代码提示
+  const hintCompletion = (cm: any, options: any) => {
+    const funRegex = /[a-zA-Z0-9_\u4e00-\u9fff]/;
+    const dotRegex = /\./;
+    const varRegex = /^\.(\}.*?\{\$)/;
+    const comp = funcDataListSort.map((data: any) => data.title);
+    return new Promise((accept) => {
+      setTimeout(() => {
+        const cursor = cm.getCursor();
+        const line = cm.getLine(cursor.line);
+        let start = cursor.ch;
+        let end = cursor.ch;
+        let completions = [];
+        while (start && funRegex.test(line.charAt(start - 1))) --start;
+        while (end < line.length && funRegex.test(line.charAt(end))) ++end;
+        const word = line.slice(start, end);
+        if (start && dotRegex.test(line.charAt(start - 1))) {
+          // 提示对象.属性
+          if (word === '') {
+            const lineReverse = reverseStr(line.slice(0, start));
+            const matched = varRegex.exec(lineReverse);
+            const word = matched ? reverseStr(matched[1]) : '';
+            const findVar = varDataListFlatten.current.find(
+              (item: any) => item.key === word,
+            );
+            if (findVar && findVar.attrs) {
+              completions.push(
+                ...findVar.attrs.map((attrItem: any) => ({
+                  text: attrItem.key,
+                  displayText: attrItem.titleStr,
+                  from: Cm.Pos(cursor.line, start - word.length - 1),
+                  to: Cm.Pos(cursor.line, end),
+                  customInfo: {
+                    widget: getWidgetByType(attrItem.fieldGroupType),
+                  },
+                })),
+              );
+            }
+          }
+        } else {
+          // 提示公式函数名、变量
+          if (word) {
+            for (let i = 0; i < comp.length; i++) {
+              if (comp[i].toLowerCase().indexOf(word.toLowerCase()) > -1) {
+                completions.push(comp[i]);
+              }
+            }
+            for (let i = 0; i < varDataListFlatten.current.length; i++) {
+              const it = varDataListFlatten.current[i];
+              if (it.titleStr.indexOf(word) > -1) {
+                completions.push({
+                  text: it.key,
+                  displayText: it.titleStr,
+                });
+              }
+            }
+          }
+        }
+
+        // const firstFieldIndex = completions.findIndex(item => typeof item !== 'string');
+        completions = completions.map((item: any, index) => {
+          if (typeof item === 'string') {
+            return {
+              text: item + '()',
+              displayText: item,
+              render: (element: any, self: any, data: any) => {
+                const container = document.createElement('div');
+                container.className = 'hint-line';
+                const top = document.createElement('div');
+                // @ts-ignore
+                const jsxEl: React.ReactElement = handleHighlight(
+                  item,
+                  word,
+                  'fx',
+                );
+                ReactDOM?.render(jsxEl, top);
+                // top.innerHTML = <span>122</span>;
+                top.className = 'hint-line_left';
+                const bottom = document.createElement('div');
+                bottom.className = 'hint-line_right';
+                // @ts-ignore
+                const desc =
+                  funcDataListFlatten.current.find(
+                    (it: any) => it.funcNameEg === item,
+                  )?.funcName || '';
+                bottom.innerHTML = desc;
+                container.appendChild(top);
+                container.appendChild(bottom);
+                element.appendChild(container);
+                element.addEventListener('click', function () {
+                  self.complete(); // 选择当前提示项并插入到编辑器中
+                  self.close(); // 关闭代码提示列表
+                });
+              },
+            };
+          } else {
+            return {
+              text: item.text,
+              displayText: item.displayText,
+              ...(item.from && {
+                from: item.from,
+                to: item.to,
+              }),
+              render: (element: any, self: any) => {
+                element.style.padding = '5px';
+                const DIV = document.createElement('div');
+                DIV.style.display = 'flex';
+                DIV.style.justifyContent = 'space-between';
+                const LEFT = document.createElement('span');
+                // @ts-ignore
+                const jsxEl: React.ReactElement = handleHighlight(
+                  item.displayText,
+                  word,
+                );
+                ReactDOM?.render(jsxEl, LEFT);
+                // LEFT.innerHTML = item.displayText;
+                const variable = varDataListFlatten.current.find(
+                  (it) => it.key === item.text,
+                );
+                let RIGHT;
+                if (variable?.widget) {
+                  const { name, color, bgColor } =
+                    widgetMapping[variable.widget] || {};
+                  RIGHT = document.createElement('span');
+                  RIGHT.className = 'tag';
+                  RIGHT.innerHTML = name;
+                  RIGHT.style.color = color;
+                  RIGHT.style.backgroundColor = bgColor;
+                } else if (item.customInfo?.widget) {
+                  const { name, color, bgColor } =
+                    widgetMapping[item.customInfo?.widget] || {};
+                  RIGHT = document.createElement('span');
+                  RIGHT.className = 'tag';
+                  RIGHT.innerHTML = name;
+                  RIGHT.style.color = color;
+                  RIGHT.style.backgroundColor = bgColor;
+                }
+                DIV.appendChild(LEFT);
+                if (RIGHT) DIV.appendChild(RIGHT);
+                // if (firstFieldIndex === index) {
+                //   const TITLE = document.createElement('div');
+                //   TITLE.innerHTML = '当前表单字段';
+                //   TITLE.style.padding = '5px';
+                //   element.appendChild(TITLE)
+                // }
+                element.appendChild(DIV);
+                element.addEventListener('click', function () {
+                  self.complete(); // 选择当前提示项并插入到编辑器中
+                  self.close(); // 关闭代码提示列表
+                });
+              },
+            };
+          }
+        });
+
+        if (completions.length) {
+          return accept({
+            list: completions,
+            from: Cm.Pos(cursor.line, start),
+            to: Cm.Pos(cursor.line, end),
+          });
+        } else {
+          return accept(null);
+        }
+      }, 50);
     });
     });
-    return funName;
   };
   };
 
 
-  const handleClear = () => {
-    // 清除组件内容
-    codeEditor.doc.setValue('');
+  // 清除组件内容
+  const onHandleClear = () => {
+    editor.doc.setValue('');
   };
   };
 
 
+  useImperativeHandle(cRef, () => ({
+    autoFormatSelection,
+    // 获取编辑器使用到的函数公式名称, eg: [IF, SUM, CONCAT]
+    getUsedFuncList() {
+      const usedFuncList = [];
+      const codeArr = _.cloneDeep(editor.getValue()).split('\n');
+      if (Boolean(isUseFun) && funcDataListSort.length > 0) {
+        const funcRegexp = new RegExp(
+          funcDataListSort
+            .map((data: any) => {
+              return '\\b' + data.title + '\\b';
+            })
+            .join('|'),
+          'g',
+        );
+        for (let i = 0; i < editor.doc.size; i++) {
+          const lineStr = codeArr[i];
+          let match: any;
+          while ((match = funcRegexp.exec(lineStr)) !== null) {
+            const variable = match[0];
+            if (lineStr[match['index'] + variable.length] === '(') {
+              const funcId = getFuncId(variable);
+              if (funcDataListSimple[variable] && funcId) {
+                usedFuncList.push(funcId);
+              }
+            }
+          }
+        }
+      }
+      return usedFuncList;
+    },
+    getEditor() {
+      return editor;
+    },
+  }));
+
+  function customLint() {
+    return [];
+  }
+
   return (
   return (
-    //这里className中的qx-copy-send-cm 是抄送节点--消息内容专用的样式,如果有必要，可将className回滚设置为'qx-formula-cm '  + className
     <div
     <div
       className={
       className={
-        from === 'copySend' ? 'qx-copy-send-cm ' + className : 'qx-formula-cm ' + className
+        from === 'copySend'
+          ? 'qx-copy-send-cm ' + className
+          : 'qx-formula-cm ' + className
       }
       }
-      style={{ height: '100%', padding: 0 }}
     >
     >
+      {/* @ts-ignore */}
       <CodeMirror
       <CodeMirror
+        editorDidMount={(editor) => {
+          setEditor(editor);
+          editor.addKeyMap({
+            'Ctrl-f': autoFormatSelection,
+          });
+        }}
         value={(valueLocal || '').toString()}
         value={(valueLocal || '').toString()}
-        editorDidMount={(editor) => setCodeEditor(editor)}
-        // onCursorActivity={(e) => console.log('e', e)}
-        // onCursorActivity={(e) => e?.showHint()} //没有会报错
         options={{
         options={{
-          // mode: 'text/html',
-          lineNumbers: false,
-          autofocus,
+          mode: 'javascript', // 语言
+          theme: 'idea',
+          placeholder: '请输入函数',
+          extraKeys: { Ctrl: 'autocomplete' }, //ctrl+空格自动提示配置
+          hintOptions: {
+            completeSingle: false,
+            hint: hintCompletion,
+            className: 'myCodeMirrorHint',
+          },
+          autofocus, //自动获取焦点
+          matchBrackets: true, // 匹配括号
+          autoCloseBrackets: true,
+          lint: {
+            getAnnotations: customLint,
+          },
           readOnly: Boolean(readOnly),
           readOnly: Boolean(readOnly),
           cursorHeight: Boolean(readOnly) ? 0 : 'auto',
           cursorHeight: Boolean(readOnly) ? 0 : 'auto',
           // 滚动（false，默认）或自动换行
           // 滚动（false，默认）或自动换行
           lineWrapping: true,
           lineWrapping: true,
+          styleActiveLine: true, // 光标行代码高亮
         }}
         }}
-        onChange={debounce(onValueChange, 300)}
-        onCursor={(editor) => {
-          const funName = findFocusFun(editor);
-          setFocusFun(funName);
-        }}
+        // onKeyEvent={handleKeyEvent}
+        // onBeforeChange={handleBeforeChange}
+        // onCursorActivity={handleCursorActivity}
+        // onCursor={onHandleCursor}
+        onChange={onHandleChange}
       />
       />
       {allowClear && value && (
       {allowClear && value && (
-        <CloseCircleFilled className={'qx-field-setter__clear'} onClick={handleClear} />
+        <CloseCircleFilled
+          className={'qx-field-setter__clear'}
+          onClick={onHandleClear}
+        />
       )}
       )}
     </div>
     </div>
   );
   );
 };
 };
-
 export default CodeEditor;
 export default CodeEditor;

+import CodeMirror from 'codemirror';
+
+// Comment/uncomment the specified range
+CodeMirror.defineExtension('commentRange', function (isComment, from, to) {
+  let cm = this,
+    curMode = CodeMirror.innerMode(
+      cm.getMode(),
+      cm.getTokenAt(from).state,
+    ).mode;
+  cm.operation(function () {
+    if (isComment) {
+      // Comment range
+      cm.replaceRange(curMode.commentEnd, to);
+      cm.replaceRange(curMode.commentStart, from);
+      if (from.line == to.line && from.ch == to.ch)
+        // An empty comment inserted - put cursor inside
+        cm.setCursor(from.line, from.ch + curMode.commentStart.length);
+    } else {
+      // Uncomment range
+      let selText = cm.getRange(from, to);
+      let startIndex = selText.indexOf(curMode.commentStart);
+      let endIndex = selText.lastIndexOf(curMode.commentEnd);
+      if (startIndex > -1 && endIndex > -1 && endIndex > startIndex) {
+        // Take string till comment start
+        selText =
+          selText.substr(0, startIndex) +
+          // From comment start till comment end
+          selText.substring(
+            startIndex + curMode.commentStart.length,
+            endIndex,
+          ) +
+          // From comment end till string end
+          selText.substr(endIndex + curMode.commentEnd.length);
+      }
+      cm.replaceRange(selText, from, to);
+    }
+  });
+});
+
+// Applies automatic formatting to the specified range
+CodeMirror.defineExtension('autoFormatRange', function (from, to) {
+  let cm = this;
+  let outer = cm.getMode(),
+    text = cm.getRange(from, to).split('\n');
+  let state = CodeMirror.copyState(outer, cm.getTokenAt(from).state);
+  let tabSize = cm.getOption('tabSize');
+
+  let out = '',
+    lines = 0,
+    atSol = from.ch == 0;
+  function newline() {
+    out += '\n';
+    atSol = true;
+    ++lines;
+  }
+
+  for (let i = 0; i < text.length; ++i) {
+    let stream = new CodeMirror.StringStream(text[i], tabSize);
+    while (!stream.eol()) {
+      let inner = CodeMirror.innerMode(outer, state);
+      let style = outer.token(stream, state),
+        cur = stream.current();
+      stream.start = stream.pos;
+      if (!atSol || /\S/.test(cur)) {
+        out += cur;
+        atSol = false;
+      }
+      if (
+        !atSol &&
+        inner.mode.newlineAfterToken &&
+        inner.mode.newlineAfterToken(
+          style,
+          cur,
+          stream.string.slice(stream.pos) || text[i + 1] || '',
+          inner.state,
+        )
+      )
+        newline();
+    }
+    if (!stream.pos && outer.blankLine) outer.blankLine(state);
+    if (!atSol) newline();
+  }
+
+  cm.operation(function () {
+    cm.replaceRange(out, from, to);
+    for (let cur = from.line + 1, end = from.line + lines; cur <= end; ++cur)
+      cm.indentLine(cur, 'smart');
+    cm.setSelection(from, cm.getCursor(false));
+  });
+});
+
+// Applies automatic mode-aware indentation to the specified range
+CodeMirror.defineExtension('autoIndentRange', function (from, to) {
+  let cmInstance = this;
+  this.operation(function () {
+    for (let i = from.line; i <= to.line; i++) {
+      cmInstance.indentLine(i, 'smart');
+    }
+  });
+});

+@import '~@qx/ui/src/style/variable.less';
+
+.qx-formula-cm {
+  .CodeMirror {
+    height: auto;
+    line-height: 24px;
+  }
+}
+
+.cm-bg .CodeMirror {
+  border: 1px solid #e7e6e6;
+  background-color: #f9f9f9 !important;
+}
+
+.qx-copy-send-cm {
+  height: 100%;
+
+  .react-codemirror2 {
+    height: 100%;
+
+    .CodeMirror {
+      height: auto;
+      min-height: 80px;
+      line-height: 24px;
+    }
+  }
+}
+
+.qx-field-setter__clear {
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  color: #bcb9b9;
+  font-size: 14px;
+}
+
+.CodeMirror-line {
+  .CodeMirror-matchingbracket {
+    outline: none !important;
+    background: #ccc;
+    border-radius: 2px;
+    //padding: 0 1px 2px;
+  }
+}
+
+body {
+  .CodeMirror-hints.idea {
+    background: #fff !important;
+    border: 1px solid @N4;
+    border-radius: 5px;
+    width: 240px;
+    .tree-node-high {
+      color: @B8;
+    }
+    .tag {
+      padding: 0 8px;
+      border-radius: 4px;
+      background-color: #e7efff;
+      font-size: 14px;
+      color: #1764ff;
+      white-space: nowrap;
+      margin-left: 10px;
+    }
+    .hint-line {
+      padding: 5px 0;
+      display: flex;
+      justify-content: space-between;
+      font-size: 13px;
+      &_left {
+        //overflow: hidden;
+        //white-space: nowrap;
+        //text-overflow: ellipsis;
+        width: 50%;
+        margin-right: 10px;
+      }
+      &_right {
+        color: #7c7e86;
+        width: 50%;
+        overflow: hidden;
+        text-align: right;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+  .CodeMirror-hints.idea .CodeMirror-hint-active {
+    background: #f5f5f5 !important;
+  }
+  .CodeMirror-hints::-webkit-scrollbar {
+    width: 10px; /* 设置滚动条宽度 */
+    background-color: #fff;
+    border-radius: 5px;
+  }
+
+  .CodeMirror-hints::-webkit-scrollbar-track {
+    background-color: #f1f1f1; /* 设置滚动条轨道背景色 */
+    border-radius: 10px; /* 设置滚动条轨道的圆角 */
+  }
+
+  .CodeMirror-hints::-webkit-scrollbar-thumb {
+    background-color: #ccc; /* 设置滚动条滑块颜色 */
+    border-radius: 10px; /* 设置滚动条滑块的圆角 */
+  }
+
+  .CodeMirror-hints::-webkit-scrollbar-thumb:hover {
+    background-color: #555; /* 设置滚动条滑块的悬停颜色 */
+  }
+  .CodeMirror-placeholder {
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    color: #bfbfbf;
+  }
+}
+
+.CodeMirror-hint:hover {
+  background: #f5f5f5 !important;
+}
+
+.CodeMirror-line {
+  .bracket-mark {
+    padding: 0 1px 2px;
+    margin: 0 1px 0 0;
+  }
+}

+import {
+  CloseOutlined,
+  ControlOutlined,
+  RightOutlined,
+} from '@ant-design/icons';
+import { QxFieldPopover } from '@qx/common';
+import {
+  DatePicker,
+  Input,
+  InputNumber,
+  Menu,
+  Select,
+  Tag,
+  TimePicker,
+  message,
+} from 'antd';
+import type { DataNode } from 'antd/lib/tree';
+import moment from 'dayjs';
+import { cloneDeep, findIndex, isEmpty, isEqual, size } from 'lodash-es';
 import type { ReactElement } from 'react';
 import type { ReactElement } from 'react';
 import React, {
 import React, {
+  useCallback,
   useEffect,
   useEffect,
   useImperativeHandle,
   useImperativeHandle,
+  useMemo,
   useRef,
   useRef,
   useState,
   useState,
-  useMemo,
-  useCallback,
 } from 'react';
 } from 'react';
-import { DatePicker, Input, InputNumber, Menu, Select, Tag, message, TimePicker } from 'antd';
-import { NumFormulaEnum, NumFormulaOptions } from './constant';
-import type { DataNode } from 'antd/lib/tree';
-import moment from 'dayjs';
+import { formatEnum } from '../constant';
+import CodeEditor, {
+  VariableProps,
+  getAllVariable,
+} from '../qx-code-editor-old';
 import type { MappingValueProps } from '../qx-filter-condition/filter';
 import type { MappingValueProps } from '../qx-filter-condition/filter';
-import CodeEditor, { getAllVariable, VariableProps } from '../qx-code-editor';
-import { CloseOutlined, ControlOutlined, RightOutlined } from '@ant-design/icons';
-import { cloneDeep, isEqual, isEmpty, findIndex, size } from 'lodash-es';
-import { RelTreeSetter } from './components/rel-tree-setter';
+import {
+  ConditionCol,
+  FIELD_TYPE,
+  FIELD_TYPE_PROPS,
+  ParamValueType,
+} from '../qx-filter-condition/filter';
 import { AddressSetter } from './components/address-setter';
 import { AddressSetter } from './components/address-setter';
-import {QxFieldPopover} from '@qx/common';
 import { InputSetter } from './components/input-setter';
 import { InputSetter } from './components/input-setter';
 import { OrgSetter } from './components/org-setter';
 import { OrgSetter } from './components/org-setter';
 import { RelSetter } from './components/rel-setter';
 import { RelSetter } from './components/rel-setter';
+import { RelTreeSetter } from './components/rel-tree-setter';
 import { UserSetter } from './components/user-setter';
 import { UserSetter } from './components/user-setter';
-import { getSelect, getPreviewSelect } from './service';
-import { QxBaseIcon } from '@qx/common';
-import { ConditionCol, FIELD_TYPE_PROPS, FIELD_TYPE, ParamValueType } from '../qx-filter-condition/filter';
+import { NumFormulaEnum, NumFormulaOptions } from './constant';
 import './index.less';
 import './index.less';
+import { getPreviewSelect, getSelect } from './service';
 
 
 const { Option } = Select;
 const { Option } = Select;
 const dateFormat = 'YYYY-MM-DD';
 const dateFormat = 'YYYY-MM-DD';
 const dateTimeFormat = 'YYYY-MM-DD HH:mm:ss';
 const dateTimeFormat = 'YYYY-MM-DD HH:mm:ss';
 
 
-export const formatEnum: Record<string, string> = {
-  YEAR: 'YYYY',
-  YEAR_MONTH: 'YYYY-MM',
-  YEAR_DATE: 'YYYY-MM-DD',
-  YEAR_HOUR: 'YYYY-MM-DD HH:00',
-  YEAR_MIN: 'YYYY-MM-DD HH:mm',
-  YEAR_SEC: 'YYYY-MM-DD HH:mm:ss',
-  HOUR_MIN: 'HH:mm',
-  HOUR_SEC: 'HH:mm:ss',
-};
-
 // 时间可选字段过滤
 // 时间可选字段过滤
 const timeSelectedFormatEnum: Record<string, string> = {
 const timeSelectedFormatEnum: Record<string, string> = {
   YEAR_HOUR: 'YYYY-MM-DD HH:00',
   YEAR_HOUR: 'YYYY-MM-DD HH:00',
@@ -156,7 +166,7 @@ export interface paramColSelectProps extends ColSelectProps {
   iconText?: string; // Popover-icon 自定义 后面跟随文本
   iconText?: string; // Popover-icon 自定义 后面跟随文本
   allowClear?: boolean;
   allowClear?: boolean;
   popupOnBody?: boolean; // 下拉 跟随 body 还是自身
   popupOnBody?: boolean; // 下拉 跟随 body 还是自身
-  getName?: (val: any) => void
+  getName?: (val: any) => void;
 }
 }
 
 
 export const QxFieldSetter: React.FC<paramColSelectProps> = ({
 export const QxFieldSetter: React.FC<paramColSelectProps> = ({
@@ -201,7 +211,10 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
 
 
   // @ts-ignore
   // @ts-ignore
   const isEnum =
   const isEnum =
-      (!!fieldGroupType && [FIELD_TYPE_PROPS.ENUM_MULTI, FIELD_TYPE_PROPS.ENUM].includes(fieldGroupType)) ||
+    (!!fieldGroupType &&
+      [FIELD_TYPE_PROPS.ENUM_MULTI, FIELD_TYPE_PROPS.ENUM].includes(
+        fieldGroupType,
+      )) ||
     ['qxSelect', 'qxMultiSelect'].includes(props?.widget || '');
     ['qxSelect', 'qxMultiSelect'].includes(props?.widget || '');
   //单选多选 选项数据
   //单选多选 选项数据
   const [options, setOptions] = useState<any[]>([]);
   const [options, setOptions] = useState<any[]>([]);
@@ -232,7 +245,11 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
         request = getSelect;
         request = getSelect;
       }
       }
 
 
-      request(params.appCode ? params.appCode : 'id', params.funCode, _data).then((res: any) => {
+      request(
+        params.appCode ? params.appCode : 'id',
+        params.funCode,
+        _data,
+      ).then((res: any) => {
         if (!!res?.length) {
         if (!!res?.length) {
           setOptions(
           setOptions(
             res.filter((item: any) => {
             res.filter((item: any) => {
@@ -305,7 +322,10 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
       valueFin = valCp;
       valueFin = valCp;
     } else if (Boolean(isMixValue) && valueType === ParamValueType.FIELD) {
     } else if (Boolean(isMixValue) && valueType === ParamValueType.FIELD) {
       // 多选时，如果是`TreeSelect`传入值，val为当前选择项。这里处理追加上已选择的项
       // 多选时，如果是`TreeSelect`传入值，val为当前选择项。这里处理追加上已选择的项
-      valueFin = [...(getMappingValues(valueLocal || [], ParamValueType.FIELD) || []), ...valueFin];
+      valueFin = [
+        ...(getMappingValues(valueLocal || [], ParamValueType.FIELD) || []),
+        ...valueFin,
+      ];
     } else if (Boolean(isMultiple)) {
     } else if (Boolean(isMultiple)) {
       valueFin = valCp;
       valueFin = valCp;
     } else if (valueFin && valueFin.length > 0) {
     } else if (valueFin && valueFin.length > 0) {
@@ -356,92 +376,97 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
    * @param str 字符串形式
    * @param str 字符串形式
    * @param joinParent 拼接父节点
    * @param joinParent 拼接父节点
    */
    */
-  const getName = props?.getName || ((val: string[], str?: boolean, joinParent?: boolean) => {
-    const name: any[] = [];
-    let flag: boolean = false;
-    (colsTree || []).map((tree) => {
-      (val || []).map((valItem: any) => {
-        if (tree.key === valItem) {
-          if (str) {
-            name.push(tree?.titleStr);
-          } else {
-            name.push(tree?.title || tree?.titleStr);
-          }
-          flag = true;
-          return;
-        }
-      });
-      (tree?.children || []).map((treeChild: any) => {
+  const getName =
+    props?.getName ||
+    ((val: string[], str?: boolean, joinParent?: boolean) => {
+      const name: any[] = [];
+      let flag: boolean = false;
+      (colsTree || []).map((tree) => {
         (val || []).map((valItem: any) => {
         (val || []).map((valItem: any) => {
-          if (treeChild.key === valItem) {
+          if (tree.key === valItem) {
             if (str) {
             if (str) {
-              if (typeof joinParent === 'boolean' && !joinParent) {
-                name.push(`${treeChild?.titleStr}`);
+              name.push(tree?.titleStr);
+            } else {
+              name.push(tree?.title || tree?.titleStr);
+            }
+            flag = true;
+            return;
+          }
+        });
+        (tree?.children || []).map((treeChild: any) => {
+          (val || []).map((valItem: any) => {
+            if (treeChild.key === valItem) {
+              if (str) {
+                if (typeof joinParent === 'boolean' && !joinParent) {
+                  name.push(`${treeChild?.titleStr}`);
+                } else {
+                  name.push(
+                    <>
+                      ${tree?.titleStr}
+                      <RightOutlined className={'qx-field-setter__icon'} />$
+                      {treeChild?.titleStr}
+                    </>,
+                  );
+                }
               } else {
               } else {
                 name.push(
                 name.push(
                   <>
                   <>
-                    ${tree?.titleStr}
-                    <RightOutlined className={'qx-field-setter__icon'} />${treeChild?.titleStr}
+                    {tree?.title || tree?.titleStr}
+                    <RightOutlined className={'qx-field-setter__icon'} />
+                    {treeChild?.title || treeChild?.titleStr}
                   </>,
                   </>,
                 );
                 );
               }
               }
-            } else {
-              name.push(
-                <>
-                  {tree?.title || tree?.titleStr}
-                  <RightOutlined className={'qx-field-setter__icon'} />
-                  {treeChild?.title || treeChild?.titleStr}
-                </>,
-              );
+              flag = true;
+              return;
             }
             }
-            flag = true;
-            return;
-          }
-        });
-        if (treeChild.children) {
-          treeChild.children.map((_it: any) => {
-            (val || []).map((valItem: any) => {
-              if (_it.key === valItem) {
-                if (str) {
-                  if (typeof joinParent === 'boolean' && !joinParent) {
-                    name.push(`${_it?.titleStr}`);
+          });
+          if (treeChild.children) {
+            treeChild.children.map((_it: any) => {
+              (val || []).map((valItem: any) => {
+                if (_it.key === valItem) {
+                  if (str) {
+                    if (typeof joinParent === 'boolean' && !joinParent) {
+                      name.push(`${_it?.titleStr}`);
+                    } else {
+                      name.push(
+                        <>
+                          ${tree?.titleStr}
+                          <RightOutlined className={'qx-field-setter__icon'} />$
+                          {treeChild?.titleStr}
+                          <RightOutlined className={'qx-field-setter__icon'} />$
+                          {_it?.titleStr}
+                        </>,
+                      );
+                    }
                   } else {
                   } else {
                     name.push(
                     name.push(
                       <>
                       <>
-                        ${tree?.titleStr}
-                        <RightOutlined className={'qx-field-setter__icon'} />${treeChild?.titleStr}
-                        <RightOutlined className={'qx-field-setter__icon'} />${_it?.titleStr}
+                        {tree?.title || tree?.titleStr}
+                        <RightOutlined className={'qx-field-setter__icon'} />
+                        {treeChild?.title || treeChild?.titleStr}
+                        <RightOutlined className={'qx-field-setter__icon'} />
+                        {_it?.title || _it?.titleStr}
                       </>,
                       </>,
                     );
                     );
                   }
                   }
-                } else {
-                  name.push(
-                    <>
-                      {tree?.title || tree?.titleStr}
-                      <RightOutlined className={'qx-field-setter__icon'} />
-                      {treeChild?.title || treeChild?.titleStr}
-                      <RightOutlined className={'qx-field-setter__icon'} />
-                      {_it?.title || _it?.titleStr}
-                    </>,
-                  );
+                  flag = true;
+                  return;
                 }
                 }
-                flag = true;
-                return;
-              }
+              });
             });
             });
-          });
-        }
+          }
+        });
       });
       });
+      if (colsTree === undefined && val?.[0]?.startsWith('${')) {
+        return;
+      }
+      if (str) {
+        return flag ? name : undefined;
+      } else {
+        return flag ? name : val;
+      }
     });
     });
-    if (colsTree === undefined && val?.[0]?.startsWith('${')) {
-      return;
-    }
-    if (str) {
-      return flag ? name : undefined;
-    } else {
-      return flag ? name : val;
-    }
-  });
 
 
   /**
   /**
    * 名称转换
    * 名称转换
@@ -449,7 +474,11 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
    * @param str 字符串形式
    * @param str 字符串形式
    * @param joinParent 拼接父节点
    * @param joinParent 拼接父节点
    */
    */
-  const getCompleteName = (val: string[], str?: boolean, joinParent?: boolean) => {
+  const getCompleteName = (
+    val: string[],
+    str?: boolean,
+    joinParent?: boolean,
+  ) => {
     const name: any[] = [];
     const name: any[] = [];
     let flag: boolean = false;
     let flag: boolean = false;
 
 
@@ -564,7 +593,11 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
       type = FIELD_TYPE_PROPS.ORG;
       type = FIELD_TYPE_PROPS.ORG;
     } else {
     } else {
       // 无值时，或手动设置值时，组件类型使用传入类型判断
       // 无值时，或手动设置值时，组件类型使用传入类型判断
-      if (!valueLocal || valueLocal.length === 0 || valueLocal[0]?.type === ParamValueType.MANUAL) {
+      if (
+        !valueLocal ||
+        valueLocal.length === 0 ||
+        valueLocal[0]?.type === ParamValueType.MANUAL
+      ) {
         if (fieldGroupType === FIELD_TYPE_PROPS.NUM) {
         if (fieldGroupType === FIELD_TYPE_PROPS.NUM) {
           type = COMP_TYPES.INPUT_NUMBER;
           type = COMP_TYPES.INPUT_NUMBER;
         }
         }
@@ -579,7 +612,10 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
    * @param mValues
    * @param mValues
    * @param type
    * @param type
    */
    */
-  function getMappingValues(mValues: MappingValueProps[], type?: ParamValueType) {
+  function getMappingValues(
+    mValues: MappingValueProps[],
+    type?: ParamValueType,
+  ) {
     if (!mValues || size(mValues) === 0) {
     if (!mValues || size(mValues) === 0) {
       return [];
       return [];
     }
     }
@@ -591,7 +627,10 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
     }
     }
   }
   }
 
 
-  function getMappingExtValue(mValues: MappingValueProps[], type?: ParamValueType) {
+  function getMappingExtValue(
+    mValues: MappingValueProps[],
+    type?: ParamValueType,
+  ) {
     if (!mValues || size(mValues) === 0) {
     if (!mValues || size(mValues) === 0) {
       return [];
       return [];
     }
     }
@@ -661,15 +700,21 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
     //手机/邮箱/地址 只能选自己类型的
     //手机/邮箱/地址 只能选自己类型的
     if (
     if (
       co.extract &&
       co.extract &&
-      ['qxMobile', 'qxEmail', 'qxSwitch', 'qxBizNo', 'qxAddress', 'qxUploadImage'].indexOf(
-        props.widget || '',
-      ) > -1
+      [
+        'qxMobile',
+        'qxEmail',
+        'qxSwitch',
+        'qxBizNo',
+        'qxAddress',
+        'qxUploadImage',
+      ].indexOf(props.widget || '') > -1
     ) {
     ) {
       return co.extract.widget === props.widget;
       return co.extract.widget === props.widget;
     }
     }
 
 
     if (
     if (
-      (fieldGroupType === FIELD_TYPE_PROPS.REL || fieldGroupType === FIELD_TYPE_PROPS.REL_MULTI) &&
+      (fieldGroupType === FIELD_TYPE_PROPS.REL ||
+        fieldGroupType === FIELD_TYPE_PROPS.REL_MULTI) &&
       co.fieldGroupType === FIELD_TYPE_PROPS.FLOW_WF_RECORD
       co.fieldGroupType === FIELD_TYPE_PROPS.FLOW_WF_RECORD
     ) {
     ) {
       return true;
       return true;
@@ -690,7 +735,10 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
         return true;
         return true;
       }
       }
       if (ex && co.extract && ex.relId) {
       if (ex && co.extract && ex.relId) {
-        return ex.relId === co.extract.relId || ex.relId === co.extract.qxProps?.relId;
+        return (
+          ex.relId === co.extract.relId ||
+          ex.relId === co.extract.qxProps?.relId
+        );
       } else {
       } else {
         return false;
         return false;
       }
       }
@@ -740,7 +788,9 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
           ((co.extract && co.extract.fieldKey === 'id') ||
           ((co.extract && co.extract.fieldKey === 'id') ||
             co.key.endsWith('.id') ||
             co.key.endsWith('.id') ||
             co.key.endsWith('|id'))) ||
             co.key.endsWith('|id'))) ||
-        (co.fieldGroupType === 'TIME' && fieldGroupType === 'DATE' && !!props?.timeSelected) ||
+        (co.fieldGroupType === 'TIME' &&
+          fieldGroupType === 'DATE' &&
+          !!props?.timeSelected) ||
         (co.fieldGroupType === 'DATE' &&
         (co.fieldGroupType === 'DATE' &&
           fieldGroupType === 'TIME' &&
           fieldGroupType === 'TIME' &&
           !!props?.dateSelected &&
           !!props?.dateSelected &&
@@ -752,7 +802,8 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
   };
   };
 
 
   // @ts-ignore
   // @ts-ignore
-  const loopCheckCol = useCallback((nodeChildren: ColsTreeProps[]) => {
+  const loopCheckCol = useCallback(
+    (nodeChildren: ColsTreeProps[]) => {
       return nodeChildren.filter((co: ColsTreeProps) => {
       return nodeChildren.filter((co: ColsTreeProps) => {
         if (co.children && co.children.length > 0) {
         if (co.children && co.children.length > 0) {
           co.children = loopCheckCol(co.children);
           co.children = loopCheckCol(co.children);
@@ -777,9 +828,13 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
 
 
   // 禁用选项
   // 禁用选项
   if (excludeKeys && size(excludeKeys) > 0) {
   if (excludeKeys && size(excludeKeys) > 0) {
-    colsTreeProps = colsTreeProps?.filter((co: ColsTreeProps) => excludeKeys.includes(co.key));
+    colsTreeProps = colsTreeProps?.filter((co: ColsTreeProps) =>
+      excludeKeys.includes(co.key),
+    );
     colsTreeProps.map((col) => {
     colsTreeProps.map((col) => {
-      col.children = col?.children?.filter((co: ColsTreeProps) => excludeKeys.includes(co.key));
+      col.children = col?.children?.filter((co: ColsTreeProps) =>
+        excludeKeys.includes(co.key),
+      );
     });
     });
   }
   }
   // 公式相关
   // 公式相关
@@ -791,7 +846,9 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
       const formula = valueLocal?.[0]?.value;
       const formula = valueLocal?.[0]?.value;
       const variableObjNew: Record<string, string> = {};
       const variableObjNew: Record<string, string> = {};
       // 追加公式（简版）变量预定义
       // 追加公式（简版）变量预定义
-      const formulaOptions = NumFormulaOptions.filter((item) => item.key !== NumFormulaEnum.CUSTOM);
+      const formulaOptions = NumFormulaOptions.filter(
+        (item) => item.key !== NumFormulaEnum.CUSTOM,
+      );
       formulaOptions.map((item) =>
       formulaOptions.map((item) =>
         Object.assign(variableObjNew, {
         Object.assign(variableObjNew, {
           [`\${${item.key}\}`]: item.key,
           [`\${${item.key}\}`]: item.key,
@@ -863,7 +920,10 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
         fieldGroupType === FIELD_TYPE_PROPS.COMBINED_TEXT ? (
         fieldGroupType === FIELD_TYPE_PROPS.COMBINED_TEXT ? (
           <CodeEditor
           <CodeEditor
             className={'select ant-input btn-text ' + (colsTree ? '' : 'full')}
             className={'select ant-input btn-text ' + (colsTree ? '' : 'full')}
-            value={getMappingValues(valueLocal || [], ParamValueType.MANUAL)?.[0] || ''}
+            value={
+              getMappingValues(valueLocal || [], ParamValueType.MANUAL)?.[0] ||
+              ''
+            }
             variableObj={variableObj}
             variableObj={variableObj}
             resetValue={props?.resetValue || ''}
             resetValue={props?.resetValue || ''}
             allowClear={!!props?.allowClear}
             allowClear={!!props?.allowClear}
@@ -877,25 +937,39 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
             value={valueLocal}
             value={valueLocal}
             disabled={disabled}
             disabled={disabled}
             getName={getName}
             getName={getName}
-            onChange={(val) => onFilterValueChange(val || [], ParamValueType.MANUAL)}
+            onChange={(val) =>
+              onFilterValueChange(val || [], ParamValueType.MANUAL)
+            }
           />
           />
-        ) : getFieldSimpleComType() === COMP_TYPES.INPUT_NUMBER && !isMultiple ? (
+        ) : getFieldSimpleComType() === COMP_TYPES.INPUT_NUMBER &&
+          !isMultiple ? (
           <InputNumber
           <InputNumber
             className={'select ' + (colsTree ? '' : 'full')}
             className={'select ' + (colsTree ? '' : 'full')}
             placeholder="请填写数字"
             placeholder="请填写数字"
             defaultValue={
             defaultValue={
-              valueLocal == undefined || valueLocal?.length == 0 || valueLocal[0]?.value == ''
+              valueLocal == undefined ||
+              valueLocal?.length == 0 ||
+              valueLocal[0]?.value == ''
                 ? ''
                 ? ''
-                : Number(getMappingValues(valueLocal || [], ParamValueType.MANUAL))
+                : Number(
+                    getMappingValues(valueLocal || [], ParamValueType.MANUAL),
+                  )
             }
             }
             value={
             value={
-              valueLocal == undefined || valueLocal?.length == 0 || valueLocal[0]?.value == ''
+              valueLocal == undefined ||
+              valueLocal?.length == 0 ||
+              valueLocal[0]?.value == ''
                 ? ''
                 ? ''
-                : Number(getMappingValues(valueLocal || [], ParamValueType.MANUAL))
+                : Number(
+                    getMappingValues(valueLocal || [], ParamValueType.MANUAL),
+                  )
             }
             }
             disabled={disabled}
             disabled={disabled}
             onChange={(val) =>
             onChange={(val) =>
-              onFilterValueChange([val == 0 || val ? val.toString() : ''], ParamValueType.MANUAL)
+              onFilterValueChange(
+                [val == 0 || val ? val.toString() : ''],
+                ParamValueType.MANUAL,
+              )
             }
             }
           />
           />
         ) : getFieldSimpleComType() === COMP_TYPES.USER ? (
         ) : getFieldSimpleComType() === COMP_TYPES.USER ? (
@@ -907,7 +981,9 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
             getName={getName}
             getName={getName}
             // @ts-ignore
             // @ts-ignore
             params={{ ...props.params, field: props.field }}
             params={{ ...props.params, field: props.field }}
-            onChange={(val, type, isDelete) => onFilterValueChange(val || [], type, 0, isDelete)}
+            onChange={(val, type, isDelete) =>
+              onFilterValueChange(val || [], type, 0, isDelete)
+            }
           />
           />
         ) : getFieldSimpleComType() === COMP_TYPES.ORG ? (
         ) : getFieldSimpleComType() === COMP_TYPES.ORG ? (
           <OrgSetter
           <OrgSetter
@@ -918,7 +994,9 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
             // @ts-ignore
             // @ts-ignore
             getName={getName}
             getName={getName}
             params={{ ...props.params, field: props.field }}
             params={{ ...props.params, field: props.field }}
-            onChange={(val, type, isDelete) => onFilterValueChange(val || [], type, 0, isDelete)}
+            onChange={(val, type, isDelete) =>
+              onFilterValueChange(val || [], type, 0, isDelete)
+            }
           />
           />
         ) : getFieldSimpleComType() === COMP_TYPES.REL ? (
         ) : getFieldSimpleComType() === COMP_TYPES.REL ? (
           <RelSetter
           <RelSetter
@@ -954,30 +1032,36 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
         ) : getFieldSimpleComType() === COMP_TYPES.INPUT ? (
         ) : getFieldSimpleComType() === COMP_TYPES.INPUT ? (
           <Input
           <Input
             className={'select ' + (colsTree ? '' : 'full')}
             className={'select ' + (colsTree ? '' : 'full')}
-            defaultValue={getMappingValues(valueLocal || [], ParamValueType.MANUAL).toString()}
+            defaultValue={getMappingValues(
+              valueLocal || [],
+              ParamValueType.MANUAL,
+            ).toString()}
             // value={getMappingValues(valueLocal || [], ParamValueType.MANUAL).toString()}
             // value={getMappingValues(valueLocal || [], ParamValueType.MANUAL).toString()}
             placeholder="请输入"
             placeholder="请输入"
             disabled={disabled}
             disabled={disabled}
-            onChange={(e) => onFilterValueChange([e.target.value], ParamValueType.MANUAL)}
+            onChange={(e) =>
+              onFilterValueChange([e.target.value], ParamValueType.MANUAL)
+            }
           />
           />
         ) : getFieldSimpleComType() === COMP_TYPES.DATE_PICKER ? (
         ) : getFieldSimpleComType() === COMP_TYPES.DATE_PICKER ? (
-            <DatePicker
-                className={'select ' + (colsTree ? '' : 'full')}
-                placeholder="请输入日期（时间）"
-                defaultValue={
-                  getMappingValues(valueLocal || [], ParamValueType.FIELD) ?
-                      undefined : moment(
-                          getMappingValues(valueLocal || [], ParamValueType.FIELD),
-                          formatEnum[
-                              !!extract?.type
-                                  ? extract.type === 'REL_FIELD'
-                                      ? extract.renderData.type
-                                      : extract.type
-                                  : fieldType || 'YEAR_SEC'
-                              ] || dateFormat,
-                      )
-                }
-                value={
+          <DatePicker
+            className={'select ' + (colsTree ? '' : 'full')}
+            placeholder="请输入日期（时间）"
+            defaultValue={
+              getMappingValues(valueLocal || [], ParamValueType.FIELD)
+                ? undefined
+                : moment(
+                    getMappingValues(valueLocal || [], ParamValueType.FIELD),
+                    formatEnum[
+                      !!extract?.type
+                        ? extract.type === 'REL_FIELD'
+                          ? extract.renderData.type
+                          : extract.type
+                        : fieldType || 'YEAR_SEC'
+                    ] || dateFormat,
+                  )
+            }
+            value={
               getMappingValues(valueLocal || [], ParamValueType.FIELD)
               getMappingValues(valueLocal || [], ParamValueType.FIELD)
                 ? undefined
                 ? undefined
                 : moment(
                 : moment(
@@ -1008,7 +1092,12 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
         ) : getFieldSimpleComType() === COMP_TYPE_FORMULA ? (
         ) : getFieldSimpleComType() === COMP_TYPE_FORMULA ? (
           <CodeEditor
           <CodeEditor
             className={'select ant-input btn-text ' + (colsTree ? '' : 'full')}
             className={'select ant-input btn-text ' + (colsTree ? '' : 'full')}
-            value={getMappingValues(valueLocal || [], ParamValueType.OPERATOR)?.[0] || ''}
+            value={
+              getMappingValues(
+                valueLocal || [],
+                ParamValueType.OPERATOR,
+              )?.[0] || ''
+            }
             variableObj={variableObj}
             variableObj={variableObj}
             newVariable={newVariable}
             newVariable={newVariable}
             onChange={(val: string) => {
             onChange={(val: string) => {
@@ -1028,14 +1117,24 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
               style={{ flex: 1 }}
               style={{ flex: 1 }}
               placeholder="请填写数字"
               placeholder="请填写数字"
               defaultValue={
               defaultValue={
-                valueLocal == undefined || valueLocal?.length == 0 || valueLocal[0]?.value == ''
+                valueLocal == undefined ||
+                valueLocal?.length == 0 ||
+                valueLocal[0]?.value == ''
                   ? ''
                   ? ''
-                  : getMappingValues(valueLocal || [], ParamValueType.MANUAL)?.[0]
+                  : getMappingValues(
+                      valueLocal || [],
+                      ParamValueType.MANUAL,
+                    )?.[0]
               }
               }
               value={
               value={
-                valueLocal == undefined || valueLocal?.length == 0 || valueLocal[0]?.value == ''
+                valueLocal == undefined ||
+                valueLocal?.length == 0 ||
+                valueLocal[0]?.value == ''
                   ? ''
                   ? ''
-                  : getMappingValues(valueLocal || [], ParamValueType.MANUAL)?.[0]
+                  : getMappingValues(
+                      valueLocal || [],
+                      ParamValueType.MANUAL,
+                    )?.[0]
               }
               }
               disabled={disabled}
               disabled={disabled}
               onChange={(val) =>
               onChange={(val) =>
@@ -1060,14 +1159,24 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
               style={{ flex: 1 }}
               style={{ flex: 1 }}
               placeholder="请填写数字"
               placeholder="请填写数字"
               defaultValue={
               defaultValue={
-                valueLocal == undefined || valueLocal?.length == 0 || valueLocal[1]?.value == ''
+                valueLocal == undefined ||
+                valueLocal?.length == 0 ||
+                valueLocal[1]?.value == ''
                   ? ''
                   ? ''
-                  : getMappingValues(valueLocal || [], ParamValueType.MANUAL)?.[1]
+                  : getMappingValues(
+                      valueLocal || [],
+                      ParamValueType.MANUAL,
+                    )?.[1]
               }
               }
               value={
               value={
-                valueLocal == undefined || valueLocal?.length == 0 || valueLocal[1]?.value == ''
+                valueLocal == undefined ||
+                valueLocal?.length == 0 ||
+                valueLocal[1]?.value == ''
                   ? ''
                   ? ''
-                  : getMappingValues(valueLocal || [], ParamValueType.MANUAL)?.[1]
+                  : getMappingValues(
+                      valueLocal || [],
+                      ParamValueType.MANUAL,
+                    )?.[1]
               }
               }
               disabled={disabled}
               disabled={disabled}
               onChange={(val) =>
               onChange={(val) =>
@@ -1088,7 +1197,10 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
               value={
               value={
                 getMappingValues(valueLocal || [], ParamValueType.MANUAL)?.[0]
                 getMappingValues(valueLocal || [], ParamValueType.MANUAL)?.[0]
                   ? moment(
                   ? moment(
-                      getMappingValues(valueLocal || [], ParamValueType.MANUAL)?.[0],
+                      getMappingValues(
+                        valueLocal || [],
+                        ParamValueType.MANUAL,
+                      )?.[0],
                       formatEnum[
                       formatEnum[
                         !!extract?.type
                         !!extract?.type
                           ? extract.type === 'REL_FIELD'
                           ? extract.type === 'REL_FIELD'
@@ -1139,7 +1251,10 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
               value={
               value={
                 getMappingValues(valueLocal || [], ParamValueType.MANUAL)?.[1]
                 getMappingValues(valueLocal || [], ParamValueType.MANUAL)?.[1]
                   ? moment(
                   ? moment(
-                      getMappingValues(valueLocal || [], ParamValueType.MANUAL)?.[1],
+                      getMappingValues(
+                        valueLocal || [],
+                        ParamValueType.MANUAL,
+                      )?.[1],
                       formatEnum[
                       formatEnum[
                         !!extract?.type
                         !!extract?.type
                           ? extract.type === 'REL_FIELD'
                           ? extract.type === 'REL_FIELD'
@@ -1185,7 +1300,9 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
             getCompleteName={getCompleteName}
             getCompleteName={getCompleteName}
             disabled={disabled}
             disabled={disabled}
             params={{ ...props.params, field: props.field }}
             params={{ ...props.params, field: props.field }}
-            onChange={(val) => onFilterValueChange(val || [], ParamValueType.MANUAL)}
+            onChange={(val) =>
+              onFilterValueChange(val || [], ParamValueType.MANUAL)
+            }
           />
           />
         ) : getFieldSimpleComType() === COMP_TYPES.RANGE_TIME ? (
         ) : getFieldSimpleComType() === COMP_TYPES.RANGE_TIME ? (
           <div className={'select full'} style={{ width: '100%' }}>
           <div className={'select full'} style={{ width: '100%' }}>
@@ -1195,7 +1312,10 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
               value={
               value={
                 getMappingValues(valueLocal || [], ParamValueType.MANUAL)?.[0]
                 getMappingValues(valueLocal || [], ParamValueType.MANUAL)?.[0]
                   ? moment(
                   ? moment(
-                      getMappingValues(valueLocal || [], ParamValueType.MANUAL)?.[0],
+                      getMappingValues(
+                        valueLocal || [],
+                        ParamValueType.MANUAL,
+                      )?.[0],
                       formatEnum[
                       formatEnum[
                         !!extract?.type
                         !!extract?.type
                           ? extract.type === 'REL_FIELD'
                           ? extract.type === 'REL_FIELD'
@@ -1235,7 +1355,10 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
               value={
               value={
                 getMappingValues(valueLocal || [], ParamValueType.MANUAL)?.[1]
                 getMappingValues(valueLocal || [], ParamValueType.MANUAL)?.[1]
                   ? moment(
                   ? moment(
-                      getMappingValues(valueLocal || [], ParamValueType.MANUAL)?.[1],
+                      getMappingValues(
+                        valueLocal || [],
+                        ParamValueType.MANUAL,
+                      )?.[1],
                       formatEnum[
                       formatEnum[
                         !!extract?.type
                         !!extract?.type
                           ? extract.type === 'REL_FIELD'
                           ? extract.type === 'REL_FIELD'
@@ -1279,7 +1402,8 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
                 className={'select qx-filter-select' + (colsTree ? '' : 'full')}
                 className={'select qx-filter-select' + (colsTree ? '' : 'full')}
                 mode={
                 mode={
                   !Boolean(isMultiple) ||
                   !Boolean(isMultiple) ||
-                  (Boolean(isMultiple) && fieldGroupType === FIELD_TYPE_PROPS.TEXT)
+                  (Boolean(isMultiple) &&
+                    fieldGroupType === FIELD_TYPE_PROPS.TEXT)
                     ? 'tags'
                     ? 'tags'
                     : 'multiple'
                     : 'multiple'
                 }
                 }
@@ -1302,7 +1426,8 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
                       closable={closable}
                       closable={closable}
                       onClose={onClose}
                       onClose={onClose}
                     >
                     >
-                      {_val === undefined ? null : String(_val) === String([String(label)]) &&
+                      {_val === undefined ? null : String(_val) ===
+                          String([String(label)]) &&
                         String(label).startsWith('${') ? (
                         String(label).startsWith('${') ? (
                         <span style={{ color: 'red' }}>已缺失</span>
                         <span style={{ color: 'red' }}>已缺失</span>
                       ) : (
                       ) : (
@@ -1325,7 +1450,9 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
                   );
                   );
                 }}
                 }}
                 onChange={(val) => {
                 onChange={(val) => {
-                  const valOptionsArr = getValueOptions().map((valItem: any) => valItem?.key);
+                  const valOptionsArr = getValueOptions().map(
+                    (valItem: any) => valItem?.key,
+                  );
                   // 原值类型
                   // 原值类型
                   let valueType: any;
                   let valueType: any;
                   // 查询原值（如果存在于`valueLocal`下）类型
                   // 查询原值（如果存在于`valueLocal`下）类型
@@ -1343,9 +1470,17 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
                       valueType = ParamValueType.MANUAL;
                       valueType = ParamValueType.MANUAL;
                     }
                     }
                   }
                   }
-                  if (fieldGroupType === FIELD_TYPE_PROPS.BOOL && !Boolean(isMultiple)) {
+                  if (
+                    fieldGroupType === FIELD_TYPE_PROPS.BOOL &&
+                    !Boolean(isMultiple)
+                  ) {
                     if (val.length > 0) {
                     if (val.length > 0) {
-                      onFilterValueChange([val[val.length - 1]], valueType, -1, true);
+                      onFilterValueChange(
+                        [val[val.length - 1]],
+                        valueType,
+                        -1,
+                        true,
+                      );
                     } else {
                     } else {
                       onFilterValueChange(val, valueType, -1, true);
                       onFilterValueChange(val, valueType, -1, true);
                     }
                     }
@@ -1355,17 +1490,26 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
                 }}
                 }}
               >
               >
                 {getValueOptions().map((valItem: any) => (
                 {getValueOptions().map((valItem: any) => (
-                  <Option key={valItem?.key || valItem?.code} value={valItem?.key || valItem?.code}>
+                  <Option
+                    key={valItem?.key || valItem?.code}
+                    value={valItem?.key || valItem?.code}
+                  >
                     {valItem?.value || valItem?.name}
                     {valItem?.value || valItem?.name}
                   </Option>
                   </Option>
                 ))}
                 ))}
                 {fieldGroupType && fieldGroupType === FIELD_TYPE_PROPS.DATE && (
                 {fieldGroupType && fieldGroupType === FIELD_TYPE_PROPS.DATE && (
-                  <Option value={'__action_date'} style={{ borderTop: '1px solid #f0f0f0' }}>
+                  <Option
+                    value={'__action_date'}
+                    style={{ borderTop: '1px solid #f0f0f0' }}
+                  >
                     指定日期
                     指定日期
                   </Option>
                   </Option>
                 )}
                 )}
                 {fieldGroupType && fieldGroupType === FIELD_TYPE_PROPS.TIME && (
                 {fieldGroupType && fieldGroupType === FIELD_TYPE_PROPS.TIME && (
-                  <Option value={'__action_time'} style={{ borderTop: '1px solid #f0f0f0' }}>
+                  <Option
+                    value={'__action_time'}
+                    style={{ borderTop: '1px solid #f0f0f0' }}
+                  >
                     指定时间
                     指定时间
                   </Option>
                   </Option>
                 )}
                 )}
@@ -1391,10 +1535,14 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
                       : disabled
                       : disabled
                     : disabled
                     : disabled
                 }
                 }
-                allowClear={!isMixValue || valueLocal?.[0]?.type === ParamValueType.FIELD}
+                allowClear={
+                  !isMixValue || valueLocal?.[0]?.type === ParamValueType.FIELD
+                }
                 onChange={(val) => {
                 onChange={(val) => {
                   const valLocal = typeof val === 'string' ? [val] : val;
                   const valLocal = typeof val === 'string' ? [val] : val;
-                  const valOptionsArr = getValueOptions().map((valItem: any) => valItem?.key);
+                  const valOptionsArr = getValueOptions().map(
+                    (valItem: any) => valItem?.key,
+                  );
                   let valueType = (valOptionsArr || []).includes(valLocal?.[0])
                   let valueType = (valOptionsArr || []).includes(valLocal?.[0])
                     ? ParamValueType.OPERATOR
                     ? ParamValueType.OPERATOR
                     : ParamValueType.MANUAL;
                     : ParamValueType.MANUAL;
@@ -1405,27 +1553,42 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
                 }}
                 }}
               >
               >
                 {fieldGroupType && fieldGroupType === FIELD_TYPE_PROPS.DATE && (
                 {fieldGroupType && fieldGroupType === FIELD_TYPE_PROPS.DATE && (
-                  <Option value={'__action_date'} style={{ borderBottom: '1px solid #f0f0f0' }}>
+                  <Option
+                    value={'__action_date'}
+                    style={{ borderBottom: '1px solid #f0f0f0' }}
+                  >
                     指定日期
                     指定日期
                   </Option>
                   </Option>
                 )}
                 )}
                 {fieldGroupType && fieldGroupType === FIELD_TYPE_PROPS.USER && (
                 {fieldGroupType && fieldGroupType === FIELD_TYPE_PROPS.USER && (
-                  <Option value={'__action_user'} style={{ borderBottom: '1px solid #f0f0f0' }}>
+                  <Option
+                    value={'__action_user'}
+                    style={{ borderBottom: '1px solid #f0f0f0' }}
+                  >
                     选择人员
                     选择人员
                   </Option>
                   </Option>
                 )}
                 )}
                 {fieldGroupType && fieldGroupType === FIELD_TYPE_PROPS.ORG && (
                 {fieldGroupType && fieldGroupType === FIELD_TYPE_PROPS.ORG && (
-                  <Option value={'__action_org'} style={{ borderBottom: '1px solid #f0f0f0' }}>
+                  <Option
+                    value={'__action_org'}
+                    style={{ borderBottom: '1px solid #f0f0f0' }}
+                  >
                     选择部门
                     选择部门
                   </Option>
                   </Option>
                 )}
                 )}
                 {fieldGroupType && fieldGroupType === FIELD_TYPE_PROPS.TIME && (
                 {fieldGroupType && fieldGroupType === FIELD_TYPE_PROPS.TIME && (
-                  <Option value={'__action_time'} style={{ borderBottom: '1px solid #f0f0f0' }}>
+                  <Option
+                    value={'__action_time'}
+                    style={{ borderBottom: '1px solid #f0f0f0' }}
+                  >
                     指定时间
                     指定时间
                   </Option>
                   </Option>
                 )}
                 )}
                 {getValueOptions().map((valItem: any) => (
                 {getValueOptions().map((valItem: any) => (
-                  <Option key={valItem?.key || valItem?.code} value={valItem?.key || valItem?.code}>
+                  <Option
+                    key={valItem?.key || valItem?.code}
+                    value={valItem?.key || valItem?.code}
+                  >
                     {valItem?.value || valItem?.name}
                     {valItem?.value || valItem?.name}
                   </Option>
                   </Option>
                 ))}
                 ))}
@@ -1438,7 +1601,9 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
             // @ts-ignore
             // @ts-ignore
             width={
             width={
               props.popWidth ||
               props.popWidth ||
-              (currentElem && currentElem.current && currentElem.current.clientWidth + 'px')
+              (currentElem &&
+                currentElem.current &&
+                currentElem.current.clientWidth + 'px')
             }
             }
             data={colsTreeProps}
             data={colsTreeProps}
             popFooter={props.extraFooter}
             popFooter={props.extraFooter}
@@ -1471,7 +1636,8 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
               //TODO 临时方案，可多选字段
               //TODO 临时方案，可多选字段
               if (FIELD_TYPE.FORMULA === fieldType) {
               if (FIELD_TYPE.FORMULA === fieldType) {
                 const _historyValue =
                 const _historyValue =
-                  getMappingValues(valueLocal || [], ParamValueType.FIELD) || [];
+                  getMappingValues(valueLocal || [], ParamValueType.FIELD) ||
+                  [];
                 if (!_historyValue.includes(val.toString())) {
                 if (!_historyValue.includes(val.toString())) {
                   const newVal = [..._historyValue, ...[val.toString()]];
                   const newVal = [..._historyValue, ...[val.toString()]];
                   onFilterValueChange(newVal, ParamValueType.FIELD, 0, true);
                   onFilterValueChange(newVal, ParamValueType.FIELD, 0, true);
@@ -1488,7 +1654,9 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
             >
             >
               <ControlOutlined />
               <ControlOutlined />
               {props?.iconText ? (
               {props?.iconText ? (
-                <span className={'qx-field-setter__icon-text'}>{props.iconText}</span>
+                <span className={'qx-field-setter__icon-text'}>
+                  {props.iconText}
+                </span>
               ) : null}
               ) : null}
             </span>
             </span>
           </QxFieldPopover>
           </QxFieldPopover>
@@ -1520,7 +1688,9 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
           }
           }
           placeholder="请输入日期（时间）"
           placeholder="请输入日期（时间）"
           defaultValue={
           defaultValue={
-            !isEmpty(getMappingExtValue(valueLocal || [], ParamValueType.MANUAL))
+            !isEmpty(
+              getMappingExtValue(valueLocal || [], ParamValueType.MANUAL),
+            )
               ? moment(
               ? moment(
                   getMappingExtValue(valueLocal || [], ParamValueType.MANUAL),
                   getMappingExtValue(valueLocal || [], ParamValueType.MANUAL),
                   formatEnum[
                   formatEnum[
@@ -1534,7 +1704,9 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
               : undefined
               : undefined
           }
           }
           value={
           value={
-            !isEmpty(getMappingExtValue(valueLocal || [], ParamValueType.MANUAL))
+            !isEmpty(
+              getMappingExtValue(valueLocal || [], ParamValueType.MANUAL),
+            )
               ? moment(
               ? moment(
                   getMappingExtValue(valueLocal || [], ParamValueType.MANUAL),
                   getMappingExtValue(valueLocal || [], ParamValueType.MANUAL),
                   formatEnum[
                   formatEnum[
@@ -1556,7 +1728,9 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
           style={{ width: '100%', marginTop: '6px' }}
           style={{ width: '100%', marginTop: '6px' }}
           placeholder="请输入时间"
           placeholder="请输入时间"
           defaultValue={
           defaultValue={
-            !isEmpty(getMappingExtValue(valueLocal || [], ParamValueType.MANUAL))
+            !isEmpty(
+              getMappingExtValue(valueLocal || [], ParamValueType.MANUAL),
+            )
               ? moment(
               ? moment(
                   getMappingExtValue(valueLocal || [], ParamValueType.MANUAL),
                   getMappingExtValue(valueLocal || [], ParamValueType.MANUAL),
                   formatEnum[
                   formatEnum[
@@ -1570,7 +1744,9 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
               : undefined
               : undefined
           }
           }
           value={
           value={
-            !isEmpty(getMappingExtValue(valueLocal || [], ParamValueType.MANUAL))
+            !isEmpty(
+              getMappingExtValue(valueLocal || [], ParamValueType.MANUAL),
+            )
               ? moment(
               ? moment(
                   getMappingExtValue(valueLocal || [], ParamValueType.MANUAL),
                   getMappingExtValue(valueLocal || [], ParamValueType.MANUAL),
                   formatEnum[
                   formatEnum[
@@ -1616,4 +1792,4 @@ export const QxFieldSetter: React.FC<paramColSelectProps> = ({
       )}
       )}
     </div>
     </div>
   );
   );
-}
+};

 import type { DataNode } from 'antd/lib/tree';
 import type { DataNode } from 'antd/lib/tree';
+import { FIELD_TYPE_PROPS } from '../constant';
+
+export { FIELD_TYPE_PROPS };
 
 
 export type OperatorProps = {
 export type OperatorProps = {
   text: string;
   text: string;
@@ -691,71 +694,6 @@ export interface ColsTreeProps extends DataNode {
   type?: any;
   type?: any;
 }
 }
 
 
-export enum FIELD_TYPE_PROPS {
-  EMPTY = '',
-  // 文本
-  TEXT = 'TEXT',
-  STRING = 'STRING',
-
-  // 日期
-  DATE = 'DATE',
-  DATE_TIME = 'DATE_TIME',
-  // 人员
-  USER = 'USER',
-  USER_MULTI = 'USER_MULTI',
-  // 部门
-  ORG = 'ORG',
-  ORG_MULTI = 'ORG_MULTI',
-  // 数字
-  NUM = 'NUM',
-  // 布尔
-  BOOL = 'BOOL',
-  // 枚举
-  ENUM = 'ENUM',
-  ENUM_MULTI = 'ENUM_MULTI',
-  // 文件
-  FILE = 'FILE',
-
-  // 公式：数值类
-  FORMULA = 'FORMULA',
-
-  DOUBLE = 'DOUBLE',
-  INTEGER = 'INTEGER',
-  DECIMAL = 'DECIMAL',
-  PERCENT = 'PERCENT',
-
-  YEAR = 'YEAR',
-  YEAR_MONTH = 'YEAR_MONTH',
-  YEAR_HOUR = 'YEAR_HOUR',
-  YEAR_DATE = 'YEAR_DATE',
-  YEAR_MIN = 'YEAR_MIN',
-  YEAR_SEC = 'YEAR_SEC',
-  HOUR = 'HOUR',
-  HOUR_MIN = 'HOUR_MIN',
-  HOUR_SEC = 'HOUR_SEC',
-
-  TREE = 'TREE',
-  REL = 'REL',
-  REL_MULTI = 'REL_MULTI',
-  REL_FIELD = 'REL_FIELD',
-
-  TABLE = 'TABLE',
-
-  // 流程专用
-  FLOW_WF_APRV_USR = 'FLOW_WF_APRV_USR',
-  FLOW_WF_DQ_MODEL = 'FLOW_WF_DQ_MODEL',
-  FLOW_WF_RECORD = 'FLOW_WF_RECORD',
-
-  //参数专用
-  OBJECT = 'OBJECT',
-  ARRAY = 'ARRAY',
-
-  // 组合文本，用于文本和变量组合
-  COMBINED_TEXT = 'COMBINED_TEXT',
-  // 时间
-  TIME = 'TIME',
-}
-
 export interface QxQueryProps {
 export interface QxQueryProps {
   paramMappings?: ParamMappingProps[];
   paramMappings?: ParamMappingProps[];
   sqlType?: SqlTypeProps;
   sqlType?: SqlTypeProps;
@@ -855,7 +793,11 @@ export const getOperationsType = (data: any) => {
     fileTypeTem = fieldType;
     fileTypeTem = fieldType;
   } else if (fieldType === FIELD_TYPE_PROPS.REL_FIELD) {
   } else if (fieldType === FIELD_TYPE_PROPS.REL_FIELD) {
     fileTypeTem = data.refType;
     fileTypeTem = data.refType;
-  } else if (fieldType === 'HOUR_MIN' || fieldType === 'HOUR_SEC' || fieldType === 'TIME') {
+  } else if (
+    fieldType === 'HOUR_MIN' ||
+    fieldType === 'HOUR_SEC' ||
+    fieldType === 'TIME'
+  ) {
     fileTypeTem = FIELD_TYPE_PROPS.TIME;
     fileTypeTem = FIELD_TYPE_PROPS.TIME;
   } else {
   } else {
     fileTypeTem = FIELD_TYPE_PROPS.TEXT;
     fileTypeTem = FIELD_TYPE_PROPS.TEXT;

+import React, { useEffect, useState } from 'react';
+
+import { FunctionProps } from '../index';
+
+type DescProps = {
+  scriptEdit: boolean;
+  funcData: FunctionProps | undefined | null;
+};
+
+const highLightFunc = (str: string | undefined, func: string) => {
+  if (!str) return '';
+  const startIndex = str.indexOf(func);
+  const endIndex = startIndex + func.length;
+  if (startIndex > -1) {
+    return (
+      <>
+        <span>{str.slice(0, startIndex)}</span>
+        <span className="highlight">{func}</span>
+        <span>{str.slice(endIndex)}</span>
+      </>
+    );
+  } else {
+    return str;
+  }
+};
+
+const DescBox: React.FC<DescProps> = ({ scriptEdit, funcData }) => {
+  const defaulTips = () => {
+    return (
+      <ul className={'fx-ul'}>
+        <li className="line">从左侧面板选择函数和变量，或输入函数</li>
+        <li className="line">公式编辑示例：PRODUCT(单价, 数量)</li>
+        <li
+          className="line"
+          dangerouslySetInnerHTML={{
+            __html:
+              '支持运算符：加（+）、减（-）、乘（*）、除（/）、大于（>）、小于（<）、等于（==）、不等于（!=）、大于等于（>=）、小于等于（<=）',
+          }}
+        ></li>
+        <li className="line">支持用"."来获取对象/对象数组的属性</li>
+      </ul>
+    );
+  };
+
+  const scriptTips = () => {
+    return (
+      <ul className={'fx-ul'}>
+        <li className="line">
+          支持JavaScript ES5标准语法，请在函数头部定义变量接受字段动态值
+        </li>
+        <li className="line">脚本需要有‘return’ 关键字显式的返回数据类型</li>
+        <li className="line">每行最大支持1000字符，最多支持2000行</li>
+      </ul>
+    );
+  };
+
+  const fxTips = () => {
+    const { title, desc, formula, returnType, demon, funcNameEg } =
+      funcData || {};
+    return (
+      <>
+        <div className="line">
+          <span style={{ fontWeight: 600 }}>描述</span>：
+          <span className="highlight">{title}</span>
+          {desc}
+        </div>
+        <div className="line">
+          <span style={{ fontWeight: 600 }}>表达式</span>：
+          {highLightFunc(formula, funcNameEg)}
+        </div>
+        <div className="line">
+          <span style={{ fontWeight: 600 }}>返回值类型</span>：{returnType}
+        </div>
+        <div className="line">
+          <span style={{ fontWeight: 600 }}>示例</span>：
+          {highLightFunc(demon, funcNameEg)}
+        </div>
+      </>
+    );
+  };
+
+  const [tips, setTips] = useState<any>(null);
+  useEffect(() => {
+    let tips = !!funcData ? fxTips() : scriptEdit ? scriptTips() : defaulTips();
+    setTips(tips);
+  }, [scriptEdit, funcData]);
+
+  return (
+    <div className="describle-box">
+      <div className="title-bar">{funcData?.title}</div>
+      <div className="desc-content">{tips}</div>
+    </div>
+  );
+};
+
+export default DescBox;

+import { DownOutlined, SearchOutlined } from '@ant-design/icons';
+import { Empty, Input, Tree } from 'antd';
+import _ from 'lodash-es';
+import React, {
+  memo,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { FunctionProps } from '../index';
+import emptyImg from '../svg/custom_chart_null.png';
+import { handleHighlight } from './var-picker';
+type PickProps = {
+  dataSource: FunctionProps[];
+  onHover: (nodeData: FunctionProps | null) => void;
+  onPick: (funcData: FunctionProps) => void;
+  pickFunc: (funcData: FunctionProps) => void;
+};
+const FxPicker: React.FC<PickProps> = ({
+  onHover,
+  onPick,
+  pickFunc,
+  ...props
+}): JSX.Element => {
+  const [searchVal, setSearchVal] = useState('');
+  const [selectIndex, setSelectIndex] = useState(0);
+  const searchInputRef = useRef(null);
+  const [filterData, setFilterData] = useState<FunctionProps[]>([]);
+  // const selectFunc = useRef<string>('');
+  // const change
+
+  const dataSource: FunctionProps[] = useMemo(() => {
+    let cloneData = _.cloneDeep(props.dataSource || []);
+    cloneData.forEach((item) => {
+      (item.children || []).forEach((it: any) => {
+        // @ts-ignore
+        if (!it.titleCopy && typeof it.title === 'string') {
+          it.titleCopy = it.title;
+        }
+        // @ts-ignore
+        it.title = <span style={{ display: 'inline-block' }}>{it.title}</span>;
+      });
+    });
+    return cloneData;
+  }, [props.dataSource]);
+
+  useEffect(() => {
+    let cloneData = _.cloneDeep(dataSource);
+    cloneData.forEach((item: any) => {
+      if (item.title?.includes(searchVal)) {
+        item.title = handleHighlight(item.title, searchVal);
+        item._hidden = false;
+      } else {
+        if ((item.children || []).length === 0) {
+          item._hidden = true;
+        }
+        (item.children || []).forEach((it: any) => {
+          if (!it.funcNameEg.toLowerCase()?.includes(searchVal.toLowerCase())) {
+            it._hidden = true;
+            item.hiddenLen = (item.hiddenLen || 0) + 1;
+            if (item.hiddenLen === item.children?.length) {
+              item._hidden = true;
+            }
+          } else {
+            const title = handleHighlight(it.titleCopy, searchVal, 'fx');
+            it.title = <span style={{ display: 'inline-block' }}>{title}</span>;
+          }
+        });
+      }
+    });
+    cloneData = cloneData.filter((item: any) => item._hidden !== true);
+    cloneData.forEach((item) => {
+      item.children = (item.children || []).filter((it: any) => !it._hidden);
+    });
+    setFilterData(cloneData);
+  }, [searchVal]);
+
+  // 根据查询value过滤公式列表数据
+  // const dataSourceFilter: FunctionProps[] = useMemo(() => {
+  //   // 扁平化dataSource
+  //   const dataSourceFlatten: FunctionProps[] = [];
+  //   flatten(dataSource, dataSourceFlatten);
+  //   return dataSourceFlatten.filter((ds) => ds.title.includes(searchVal));
+  // }, [searchVal, dataSource]);
+
+  const handleSearch = _.debounce((val: string) => {
+    setSelectIndex(0);
+    setSearchVal(val);
+  }, 200);
+
+  // 搜索框值变化时触发
+  const onHandleSearchChange = (e: any) => {
+    const val = e.target.value;
+    handleSearch(val);
+  };
+
+  // 设置当前选中的函数公式
+  // const onHandlePickFunc = (funcData: FunctionProps) => {
+  //   _.isFunction(onPick) && onPick(funcData);
+  //   searchInputRef?.current?.blur();
+  // };
+  /**
+   * 设置键盘事件逻辑
+   * keyCode 38:ArrowUp  40:ArrowDown  13: Enter
+   */
+  // const onHandleKeydown = (e: any) => {
+  //   if (e.keyCode == 38 && selectIndex > 0) {
+  //     setSelectIndex(selectIndex - 1);
+  //   } else if (e.keyCode == 40 && selectIndex < dataSourceFilter.length - 1) {
+  //     setSelectIndex(selectIndex + 1);
+  //   } else if (e.keyCode == 13) {
+  //     onHandlePickFunc(dataSourceFilter[selectIndex]);
+  //   }
+  //   _.isFunction(onHover) && onHover(dataSourceFilter[selectIndex]);
+  // };
+
+  // 设置popover-content内滚动条位置。DOM更新之后立即执行
+  useLayoutEffect(() => {
+    const dom = document.getElementsByClassName('fun-selected')[0];
+    if (dom) {
+      dom.scrollIntoView(Object.assign({ block: 'center', inline: 'nearest' }));
+    }
+  }, [selectIndex]);
+
+  // const onHandleUpload = () => {
+  //   message.info('功能暂未开发');
+  // };
+
+  // const onHandleCustomFunc = () => {
+  //   message.info('功能暂未开发');
+  // };
+
+  const onHandleMouseEnter = (event: any, nodeData: FunctionProps) => {
+    if (nodeData.children && nodeData.children.length > 0) return;
+    if (_.isFunction(onHover)) {
+      onHover(nodeData);
+    }
+  };
+
+  const onHandleSelectTNode = (key: any, event: any) => {
+    if (event.node.children && event.node.children.length > 0) return;
+    if (_.isFunction(onPick)) {
+      onPick(event.node);
+    }
+    if (_.isFunction(onHover)) {
+      onHover(event.node);
+    }
+    pickFunc(event.node);
+    // selectFunc.current = event.node.funcNameEg;
+  };
+
+  // 设置popover-content
+  // const searchContent = useMemo(() => {
+  //   return (
+  //     <div className="search-content">
+  //       {dataSourceFilter.map((ds, index) => {
+  //         return (
+  //           <div
+  //             className={index === selectIndex ? 'fun-selected' : ''}
+  //             key={ds.key}
+  //             onClick={() => onHandlePickFunc(ds)}
+  //           >
+  //             {ds.title}
+  //           </div>
+  //         );
+  //       })}
+  //     </div>
+  //   );
+  // }, [dataSourceFilter, selectIndex]);
+
+  const treeRender = useMemo(() => {
+    return searchVal.length && !filterData?.length ? (
+      <Empty
+        image={emptyImg}
+        style={{
+          height: '100%',
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          color: '#999',
+        }}
+      />
+    ) : (
+      <Tree
+        key={Math.random()}
+        rootClassName={'custom-tree'}
+        blockNode={true}
+        selectable={true}
+        defaultExpandAll={!!searchVal.length}
+        switcherIcon={<DownOutlined />}
+        titleRender={(nodeData) => {
+          const { title, titleDesc } = nodeData;
+          return (
+            <div
+              className="custom-title"
+              onMouseEnter={(event) => {
+                onHandleMouseEnter(event, nodeData);
+              }}
+              onMouseLeave={() => {
+                // if (nodeData.funcNameEg === selectFunc.current) {
+                //   selectFunc.current = '';
+                //   return;
+                // }
+                if (_.isFunction(onHover)) {
+                  onHover(null);
+                }
+              }}
+            >
+              <span>{title}</span>
+              <span>{titleDesc}</span>
+            </div>
+          );
+        }}
+        treeData={searchVal.length ? filterData : dataSource}
+        defaultExpandedKeys={['COMMON']}
+        onSelect={onHandleSelectTNode}
+      />
+    );
+  }, [dataSource, filterData]);
+
+  return (
+    <div className="function-box">
+      <div className="search-bar">
+        {/*<Popover*/}
+        {/*  overlayClassName={'custom-search-popover'}*/}
+        {/*  placement="bottom"*/}
+        {/*  content={searchContent}*/}
+        {/*  trigger={'focus'}*/}
+        {/*  autoAdjustOverflow={false}*/}
+        {/*  getPopupContainer={(HTMLElement) => HTMLElement.parentNode}*/}
+        {/*>*/}
+        <Input
+          bordered={false}
+          ref={searchInputRef}
+          onChange={onHandleSearchChange}
+          prefix={<SearchOutlined className="search" />}
+          // addonAfter={
+          //   <>
+          //     <UploadOutlined className="upload" onClick={onHandleUpload} />
+          //     <PlusOutlined className="plus" onClick={onHandleCustomFunc} />
+          //   </>
+          // }
+          placeholder="搜索函数"
+        />
+        {/*</Popover>*/}
+      </div>
+      {dataSource?.length ? (
+        treeRender
+      ) : (
+        <div className={'qx-empty-center'}>（暂无数据）</div>
+      )}
+      {/*{_.size(dataSource) === 0 && (*/}
+      {/*  <div className={'qx-empty-center'}>（暂无数据）</div>*/}
+      {/*)}*/}
+    </div>
+  );
+};
+
+export default memo(FxPicker);

+import { DownOutlined, SearchOutlined } from '@ant-design/icons';
+import { getWidgetsIcon } from '@qx/utils';
+import { Empty, Input, Tooltip, Tree } from 'antd';
+import _ from 'lodash-es';
+import React, {
+  memo,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { ColsTreeSelectProps } from '../index';
+import emptyImg from '../svg/custom_chart_null.png';
+import { widgetMapping } from '../util';
+
+type VarProps = {
+  dataSource: ColsTreeSelectProps[];
+  onPick: (varData: ColsTreeSelectProps) => void;
+};
+
+const IconMap: any = {
+  CUR_USER: 'qx-f-icon-user',
+  CUR_ORG: 'qx-f-icon-org',
+  CUR_CORP: 'qx-f-icon-corp',
+  LOGIN_INFO: 'qx-f-icon-loginInfo',
+  CUR_SERVER: 'qx-f-icon-server',
+};
+
+export const handleHighlight = (title: string, val: string, type?: string) => {
+  if (!title) return null;
+  let index: number;
+  if (type === 'fx') {
+    index = title.toLowerCase()?.indexOf(val.toLowerCase());
+  } else {
+    index = title.indexOf(val);
+  }
+  return (
+    <span>
+      {title.slice(0, index)}
+      <span className={'tree-node-high'}>
+        {title.slice(index, index + val.length)}
+      </span>
+      {title.slice(index + (val?.length || 0))}
+    </span>
+  );
+};
+
+const VarPicker: React.FC<VarProps> = ({ onPick, ...props }) => {
+  const [searchVal, setSearchVal] = useState('');
+  const [selectIndex, setSelectIndex] = useState(0);
+  const searchInputRef = useRef(null);
+  const [filterData, setFilterData] = useState<ColsTreeSelectProps[]>([]);
+
+  const dataSource: ColsTreeSelectProps[] = useMemo(() => {
+    let cloneData = _.cloneDeep(props.dataSource || []);
+    cloneData.forEach((item) => {
+      (item.children || []).forEach((it) => {
+        // @ts-ignore
+        it.title = <span style={{ display: 'inline-block' }}>{it.title}</span>;
+      });
+    });
+    return cloneData;
+  }, [props.dataSource]);
+
+  useEffect(() => {
+    let cloneData = _.cloneDeep(dataSource);
+    cloneData.forEach((item: any) => {
+      if (item.titleStr?.includes(searchVal)) {
+        item.titleStr = handleHighlight(item.titleStr, searchVal);
+        item._hidden = false;
+      } else {
+        (item.children || []).forEach((it: any) => {
+          if (!it.titleStr?.includes(searchVal)) {
+            it._hidden = true;
+            item.hiddenLen = (item.hiddenLen || 0) + 1;
+            if (item.hiddenLen === item.children?.length) {
+              item._hidden = true;
+            }
+          } else {
+            it.titleStr = handleHighlight(it.titleStr, searchVal);
+          }
+        });
+      }
+    });
+    cloneData = cloneData.filter((item: any) => item._hidden !== true);
+    cloneData.forEach((item) => {
+      item.children = (item.children || []).filter((it: any) => !it._hidden);
+    });
+    setFilterData(cloneData);
+  }, [searchVal]);
+
+  // 根据查询value过滤公式列表数据
+  // const dataSourceFilter: ColsTreeSelectProps[] = useMemo(() => {
+  //   // 扁平化dataSource
+  //   const dataSourceFlatten: ColsTreeSelectProps[] = [];
+  //   flatten(dataSource, dataSourceFlatten);
+  //   return dataSourceFlatten.filter((ds) => ds.titleStr?.includes(searchVal));
+  // }, [searchVal, dataSource]);
+
+  const handleSearch = _.debounce((val: string) => {
+    setSelectIndex(0);
+    setSearchVal(val.trim());
+  }, 200);
+
+  // 搜索框值变化时触发
+  const onHandleSearchChange = (e: any) => {
+    const val = e.target.value;
+    handleSearch(val);
+  };
+
+  // 设置当前选中的变量
+  const onHandlePickVar = (varData: ColsTreeSelectProps) => {
+    _.isFunction(onPick) && onPick(varData);
+    searchInputRef?.current?.blur();
+  };
+  /**
+   * 设置键盘事件逻辑
+   * keyCode 38:ArrowUp  40:ArrowDown  13: Enter
+   */
+  // const onHandleKeydown = (e: any) => {
+  //   if (e.keyCode == 38 && selectIndex > 0) {
+  //     setSelectIndex(selectIndex - 1);
+  //   } else if (e.keyCode == 40 && selectIndex < dataSourceFilter.length - 1) {
+  //     setSelectIndex(selectIndex + 1);
+  //   } else if (e.keyCode == 13) {
+  //     onHandlePickVar(dataSourceFilter[selectIndex]);
+  //   }
+  // };
+
+  // 设置popover-content内滚动条位置。DOM更新之后立即执行
+  useLayoutEffect(() => {
+    const dom = document.getElementsByClassName('var-selected')[0];
+    dom &&
+      dom.scrollIntoView(Object.assign({ block: 'center', inline: 'nearest' }));
+  }, [selectIndex]);
+
+  const onHandleSelectTNode: any = (key: string, event: any) => {
+    if (event.node.children && event.node.children.length > 0) return;
+    _.isFunction(onPick) && onPick(event.node);
+  };
+
+  // 设置popover-content
+  // const searchContent = useMemo(() => {
+  //   return (
+  //     <div className="search-content">
+  //       {dataSourceFilter.map((ds, index) => {
+  //         return (
+  //           <div
+  //             className={index === selectIndex ? 'var-selected' : ''}
+  //             key={ds.key}
+  //             onClick={() => onHandlePickVar(ds)}
+  //           >
+  //             {ds.titleStr}
+  //           </div>
+  //         );
+  //       })}
+  //     </div>
+  //   );
+  // }, [dataSourceFilter, selectIndex]);
+
+  const treeRender = useMemo(() => {
+    return searchVal.length && !filterData?.length ? (
+      <Empty
+        image={emptyImg}
+        style={{
+          height: '100%',
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          color: '#999',
+        }}
+      />
+    ) : (
+      <Tree
+        key={Math.random()}
+        rootClassName={'custom-tree'}
+        blockNode={true}
+        selectable={true}
+        switcherIcon={<DownOutlined />}
+        defaultExpandAll={!!searchVal.length}
+        titleRender={(nodeData: any) => {
+          const { titleStr, widget } = nodeData;
+          const key = nodeData.key.slice(6, -1);
+          const { name, color, bgColor } = widgetMapping[widget] || {};
+          const icon = getWidgetsIcon(widget);
+          return (
+            <div className="custom-title">
+              <Tooltip title={titleStr} placement={'topRight'}>
+                <div
+                  style={
+                    IconMap[key]
+                      ? { display: 'flex', alignItems: 'center' }
+                      : {}
+                  }
+                >
+                  {IconMap[key] ? (
+                    <span className={`qx-f-icon-common ${IconMap[key]}`} />
+                  ) : widget ? (
+                    <span className="icon">{icon}</span>
+                  ) : null}
+                  <span>{titleStr}</span>
+                </div>
+              </Tooltip>
+              {widget && (
+                <span
+                  className="tag"
+                  style={{ backgroundColor: bgColor, color: color }}
+                >
+                  {name}
+                </span>
+              )}
+            </div>
+          );
+        }}
+        treeData={searchVal.length ? filterData : dataSource}
+        defaultExpandedKeys={['FORM']}
+        onSelect={onHandleSelectTNode}
+      />
+    );
+  }, [dataSource, filterData]);
+
+  return (
+    <div className="variable-box">
+      <div className="search-bar">
+        {/*<Popover*/}
+        {/*  overlayClassName={'custom-search-popover'}*/}
+        {/*  placement="bottom"*/}
+        {/*  content={searchContent}*/}
+        {/*  trigger={'focus'}*/}
+        {/*  autoAdjustOverflow={false}*/}
+        {/*  getPopupContainer={(HTMLElement) => HTMLElement.parentNode}*/}
+        {/*>*/}
+        <Input
+          bordered={false}
+          ref={searchInputRef}
+          onChange={onHandleSearchChange}
+          prefix={<SearchOutlined className="search" />}
+          placeholder="搜索变量"
+        />
+        {/*</Popover>*/}
+      </div>
+      {dataSource?.length ? (
+        treeRender
+      ) : (
+        <div className={'qx-empty-center'}>（暂无数据）</div>
+      )}
+      {/*{_.size(dataSource) === 0 && (*/}
+      {/*  <div className={'qx-empty-center'}>（暂无数据）</div>*/}
+      {/*)}*/}
+    </div>
+  );
+};
+
+export default memo(VarPicker);

+@import '~@qx/ui/src/style/variable.less';
+
+.fx-wrapper {
+  .ant-modal-content {
+    border-radius: 8px;
+    background-color: #ffffff;
+    padding: 0 24px;
+
+    .ant-modal-close,
+    .ant-modal-header,
+    .ant-modal-footer {
+      display: none;
+    }
+    .ant-modal-body {
+      position: relative;
+      height: 600px;
+      padding: 0 0 48px;
+
+      .header {
+        padding: 24px 0 12px;
+        height: 60px;
+        line-height: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        > .header-item {
+          height: 100%;
+          display: flex;
+          align-items: center;
+        }
+        // 左侧
+        .title {
+          font-size: 16px;
+          font-weight: 700;
+          color: #242835;
+          padding-right: 8px;
+        }
+        .manual {
+          display: flex;
+          align-items: center;
+          color: @N8;
+          cursor: pointer;
+          font-size: 12px;
+          .qx-f-icon-help {
+            margin-right: 4px;
+            cursor: pointer;
+            height: 16px;
+            width: 16px;
+            path {
+              fill: @N6;
+            }
+          }
+
+          &:hover {
+            color: @B8;
+            .qx-f-icon-help {
+              path {
+                fill: @B8;
+              }
+            }
+          }
+        }
+        // 右侧
+        .icon-right {
+          cursor: pointer;
+          width: 16px;
+          height: 16px;
+          color: @N7;
+          &.expand {
+            margin-right: 12px;
+          }
+        }
+      }
+      .qx-operation {
+        height: calc(100% - 60px);
+        overflow: auto;
+        border: 1px solid #e9e9ea;
+        border-radius: 4px;
+        //display: flex;
+        //flex-direction: column;
+
+        .toolbar {
+          display: flex;
+          height: 40px;
+          border-radius: 4px 4px 0px 0px;
+          background-color: #f4f4f5;
+          justify-content: space-between;
+          padding: 8px 12px;
+          line-height: 24px;
+
+          .field-name {
+            font-size: 14px;
+            font-weight: 700;
+            color: #242835;
+          }
+          .tools {
+            display: flex;
+            font-size: 14px;
+            font-weight: 400;
+            color: #242835;
+
+            .tool-item {
+              position: relative;
+              cursor: pointer;
+              display: flex;
+              height: 24px;
+              align-items: center;
+              margin-left: 16px;
+              &:not(:last-child) {
+                width: 56px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                &:hover {
+                  border-radius: 2px;
+                  background-color: @N4;
+                }
+                .qx-f-icon-beautify,
+                .qx-f-icon-copy {
+                  width: 16px;
+                  height: 16px;
+                  margin-right: 4px;
+                }
+                .qx-f-icon-beautify {
+                  background: url('./svg/beautify.svg') no-repeat;
+                }
+                .qx-f-icon-copy {
+                  background: url('./svg/copy.svg') no-repeat;
+                }
+              }
+              &:last-child {
+                button.ant-switch {
+                  bottom: 0;
+                  position: relative;
+                  line-height: 24px;
+                  margin-right: 4px;
+                  &:after {
+                    position: absolute;
+                    width: 60px;
+                    height: 16px;
+                    left: 28px;
+                    top: 0;
+                    content: '';
+                    z-index: 99;
+                  }
+                }
+              }
+            }
+          }
+        }
+        .editor-box {
+          position: relative;
+          height: 200px;
+          min-height: 200px;
+          max-height: 452px;
+          padding-top: 8px;
+          overflow: hidden;
+
+          .drag-bar {
+            position: absolute;
+            right: 0;
+            bottom: 0;
+            height: 12px;
+            width: 12px;
+            cursor: ns-resize;
+
+            &::before {
+              content: '';
+              position: absolute;
+              left: 50%;
+              top: 0;
+              bottom: 0;
+              width: 1px;
+              background-color: #86909c;
+              transform: rotateZ(45deg);
+            }
+            &::after {
+              content: '';
+              position: absolute;
+              left: 75%;
+              top: 50%;
+              bottom: 0;
+              width: 1px;
+              background-color: #86909c;
+              transform: rotateZ(45deg);
+            }
+          }
+          .qx-formula-cm {
+            max-height: 100%;
+            padding: 0 8px 36px 8px;
+            overflow: auto;
+          }
+          .error-zone {
+            position: absolute;
+            bottom: -36px;
+            left: 0;
+            right: 0;
+            height: 36px;
+            line-height: 36px;
+            text-align: center;
+            font-size: 14px;
+            font-weight: 400;
+            color: #e34d59;
+            background-color: #fdf2f3;
+            transition: bottom 0.2s linear;
+
+            &.show {
+              bottom: 0;
+            }
+          }
+          .cm-s-idea .CodeMirror-activeline-background {
+            background-color: #fff;
+          }
+        }
+        .custom {
+          display: flex;
+          height: calc(100% - 240px);
+
+          .function-box,
+          .variable-box,
+          .describle-box {
+            position: relative;
+            width: 30%;
+            padding-top: 32px;
+            border-top: 1px solid #e9e9ea;
+            border-right: 1px solid #e9e9ea;
+
+            &::before {
+              content: '';
+              position: absolute;
+              top: 32px;
+              left: 0;
+              right: 0;
+              height: 1px;
+              background-color: #e9e9ea;
+            }
+
+            .search-bar {
+              position: absolute;
+              top: 0;
+              left: 0;
+              height: 32px;
+              width: 100%;
+              padding: 0 12px;
+              .ant-input-prefix {
+                margin-right: 8px;
+              }
+
+              .search {
+                color: #7c7e86;
+                width: 14px;
+                height: 14px;
+              }
+
+              .custom-search-popover {
+                width: 100%;
+                padding-top: 0;
+
+                .ant-popover-arrow {
+                  display: none;
+                }
+                .ant-popover-inner-content {
+                  padding: 6px 0;
+                  height: 215px;
+                  overflow: auto;
+                }
+                .search-content {
+                  height: 100%;
+                  div {
+                    height: 32px;
+                    padding: 0 12px;
+                    line-height: 32px;
+                    cursor: pointer;
+
+                    &:hover,
+                    &.fun-selected,
+                    &.var-selected {
+                      background-color: #f4f4f5;
+                    }
+                  }
+                }
+              }
+            }
+            .custom-tree {
+              height: 100%;
+              overflow: auto;
+
+              .tree-node-high {
+                color: @B8;
+              }
+
+              .ant-tree-treenode {
+                padding: 0 4px;
+
+                &:hover {
+                  background-color: #f4f4f5;
+                }
+
+                .ant-tree-node-selected {
+                  background-color: transparent;
+                }
+              }
+              .ant-tree-switcher {
+                line-height: 36px;
+                position: relative;
+                .anticon {
+                  color: @N9 !important;
+                }
+                &:after {
+                  content: '';
+                  position: absolute;
+                  max-width: 200px;
+                  min-width: 170px;
+                  height: 36px;
+                  background: transparent;
+                  top: 0;
+                  left: 24px;
+                  z-index: 999;
+                }
+              }
+              .ant-tree-switcher-noop {
+                display: none;
+              }
+              .custom-title {
+                display: flex;
+                height: 36px;
+                padding: 7px 0;
+                line-height: 22px;
+                justify-content: space-between;
+              }
+            }
+          }
+          .function-box {
+            .search-bar {
+              padding: 0;
+              .upload {
+                height: 16px;
+                width: 16px;
+                margin-right: 12px;
+                cursor: pointer;
+              }
+              .plus {
+                height: 16px;
+                width: 16px;
+                color: #1764ff;
+                cursor: pointer;
+              }
+              .ant-input-group-addon {
+                background-color: transparent;
+                border: none;
+              }
+            }
+            .custom-tree {
+              .ant-tree-node-content-wrapper {
+                &:hover {
+                  background-color: unset;
+                }
+              }
+            }
+            .custom-title {
+              span {
+                &:not(:first-child) {
+                  color: @N7;
+                }
+              }
+            }
+          }
+          .variable-box {
+            .search-bar {
+              padding: 0;
+            }
+            .custom-tree {
+              .ant-tree-node-content-wrapper {
+                flex: 1;
+                overflow: hidden;
+                &:hover {
+                  background-color: unset;
+                }
+              }
+              .custom-title {
+                div {
+                  flex: 1;
+                  max-width: 129px;
+                  overflow: hidden;
+                  white-space: nowrap;
+                  text-overflow: ellipsis;
+                  //.custom-title_left {
+                  //  width: 100%;
+                  //  overflow: hidden;
+                  //  white-space: nowrap;
+                  //  text-overflow: ellipsis;
+                  //}
+                }
+                .icon {
+                  padding-right: 4px;
+                }
+                .tag {
+                  padding: 0 8px;
+                  border-radius: 4px;
+                  background-color: #e7efff;
+                  font-size: 14px;
+                  color: #1764ff;
+                  white-space: nowrap;
+                  margin-left: 10px;
+                }
+              }
+            }
+          }
+          .describle-box {
+            width: 40%;
+            border-right: none;
+
+            .title-bar {
+              position: absolute;
+              top: 0;
+              left: 0;
+              height: 32px;
+              width: 100%;
+              padding: 0 12px;
+              font-size: 14px;
+              font-weight: 400;
+              line-height: 32px;
+              color: #242835;
+            }
+            .desc-content {
+              height: 100%;
+              overflow: auto;
+              padding: 8px 12px;
+              .fx-ul {
+                list-style: disc !important;
+                padding-inline-start: 20px;
+              }
+
+              .line {
+                font-size: 14px;
+                font-weight: 400;
+                line-height: 22px;
+                color: #50535d;
+
+                .highlight {
+                  color: #00a870;
+                }
+              }
+            }
+          }
+        }
+      }
+      .footer {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 48px;
+        padding: 8px 0;
+        text-align: right;
+
+        .ant-btn {
+          border-radius: 4px;
+
+          &:not(:last-child) {
+            margin-right: 8px;
+          }
+        }
+      }
+    }
+  }
+
+  &.fx-fullscreen {
+    .ant-modal-content {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border-radius: 0 !important;
+
+      .ant-modal-body {
+        position: relative;
+        height: 100%;
+        width: 100%;
+        padding: 60px 0 48px;
+
+        .header {
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          height: 60px;
+        }
+        .qx-operation {
+          position: relative;
+          height: 100%;
+          width: 100%;
+          padding: 40px 0 250px;
+
+          .toolbar {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 40px;
+          }
+          // 全屏
+          .editor-box {
+            height: 100% !important;
+
+            .drag-bar {
+              display: none !important;
+            }
+            .qx-formula-cm {
+              height: 100%;
+            }
+          }
+          .custom {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 250px !important;
+          }
+        }
+        .footer {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          height: 48px;
+        }
+      }
+    }
+  }
+}
+
+.CodeMirror-lint-tooltip {
+  z-index: 9999 !important;
+}
+.CodeMirror-hints {
+  display: block !important;
+  z-index: 9999 !important;
+
+  .CodeMirror-hint {
+    display: block !important;
+
+    &.CodeMirror-hint-active {
+    }
+  }
+}
+.rel-more_modal_full.ant-modal {
+  .ant-modal-body {
+    height: 98% !important;
+    padding: 0 0 48px !important;
+    .qx-operation .editor-box {
+      height: 55% !important;
+      max-height: unset !important;
+    }
+    .qx-operation .custom {
+      height: calc(45% - 40px) !important;
+    }
+  }
+}
+
+.qx-empty-center {
+  color: #999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.qx-f-icon-common {
+  width: 24px;
+  height: 24px;
+  padding: 4px;
+  display: inline-block;
+  color: #7c7e86;
+}
+
+.qx-f-icon-user {
+  background: url('./svg/people.svg') no-repeat;
+  background-size: 16px 16px;
+  background-position: 3px 3px;
+}
+
+.qx-f-icon-corp {
+  background: url('./svg/company.svg') no-repeat;
+  background-size: 16px 16px;
+  background-position: 3px 3px;
+}
+
+.qx-f-icon-loginInfo {
+  background: url('./svg/idcard.svg') no-repeat;
+  background-size: 16px 16px;
+  background-position: 3px 3px;
+}
+
+.qx-f-icon-server {
+  background: url('./svg/storage.svg') no-repeat;
+  background-size: 16px 16px;
+  background-position: 3px 3px;
+}
+
+.qx-f-icon-org {
+  background: url('./svg/department.svg') no-repeat;
+  background-size: 16px 16px;
+  background-position: 3px 3px;
+}
+
+.hint-className {
+  padding: 5px 0;
+  font-size: 14px;
+}

+### 函数编辑器
+
+### 
+
+```tsx
+import { request, QxFunctionOperationModal } from '@qx/common';
+import React, { useState, useMemo } from 'react';
+import { FIELD_TYPE_PROPS } from '../constant';
+
+const numWidgets = ['qxNumber', 'qxMoney', 'qxPercent', 'qxFormula'];
+const dateWidgets = ['qxDatetime'];
+const boolWidgets = ['qxSwitch'];
+
+
+/**
+ * 归类字段类型
+ */
+const getOperationsType = (data: any) => {
+  if (!data) {
+    return undefined;
+  }
+  const fieldType = data.fieldType;
+  if (!fieldType) {
+    return FIELD_TYPE_PROPS.EMPTY;
+  }
+  let fileTypeTem: FIELD_TYPE_PROPS;
+  if (fieldType.startsWith(FIELD_TYPE_PROPS.USER)) {
+    fileTypeTem = FIELD_TYPE_PROPS.USER;
+  } else if (fieldType.indexOf(FIELD_TYPE_PROPS.ORG) !== -1) {
+    fileTypeTem = FIELD_TYPE_PROPS.ORG;
+  } else if (
+    fieldType === 'DATETIME' ||
+    fieldType === FIELD_TYPE_PROPS.DATE ||
+    fieldType === 'TIME' ||
+    // fieldType.startsWith(FIELD_TYPE_PROPS.HOUR) ||
+    fieldType.startsWith(FIELD_TYPE_PROPS.YEAR)
+  ) {
+    fileTypeTem = FIELD_TYPE_PROPS.DATE;
+  } else if (
+    fieldType === FIELD_TYPE_PROPS.DOUBLE ||
+    fieldType === FIELD_TYPE_PROPS.DECIMAL ||
+    fieldType === FIELD_TYPE_PROPS.INTEGER ||
+    fieldType === FIELD_TYPE_PROPS.FORMULA ||
+    fieldType === FIELD_TYPE_PROPS.PERCENT
+  ) {
+    fileTypeTem = FIELD_TYPE_PROPS.NUM;
+  } else if (
+    fieldType === FIELD_TYPE_PROPS.ENUM ||
+    fieldType === FIELD_TYPE_PROPS.ENUM_MULTI ||
+    fieldType === FIELD_TYPE_PROPS.TREE ||
+    fieldType === FIELD_TYPE_PROPS.REL ||
+    fieldType === FIELD_TYPE_PROPS.REL_MULTI ||
+    fieldType === FIELD_TYPE_PROPS.TABLE ||
+    fieldType === FIELD_TYPE_PROPS.FILE ||
+    fieldType === FIELD_TYPE_PROPS.BOOL
+  ) {
+    fileTypeTem = fieldType;
+  } else if (fieldType === FIELD_TYPE_PROPS.REL_FIELD) {
+    fileTypeTem = data.refType;
+  } else if (fieldType === 'HOUR_MIN' || fieldType === 'HOUR_SEC') {
+    fileTypeTem = FIELD_TYPE_PROPS.TIME;
+  } else if (fieldType === 'LOCATION') {
+    fileTypeTem = FIELD_TYPE_PROPS.LOCATION;
+  } else {
+    fileTypeTem = FIELD_TYPE_PROPS.TEXT;
+  }
+  return fileTypeTem;
+};
+
+const getOperationsTypeByWidget = (widget: string, qxProps?: any, max?: number) => {
+  if (!widget) {
+    return FIELD_TYPE_PROPS.EMPTY;
+  }
+  let fileTypeTem: FIELD_TYPE_PROPS | undefined;
+  if (widget === 'userSelector') {
+    fileTypeTem = FIELD_TYPE_PROPS.USER;
+  } else if (widget === 'orgSelector') {
+    fileTypeTem = FIELD_TYPE_PROPS.ORG;
+  } else if (
+    dateWidgets.includes(widget) ||
+    (widget === 'qxFormula' &&
+      qxProps?.calculateMode === 'DATE' &&
+      qxProps?.calculate?.formula === 'INC_DEC')
+  ) {
+    fileTypeTem = FIELD_TYPE_PROPS.DATE;
+  } else if (numWidgets.includes(widget)) {
+    fileTypeTem = FIELD_TYPE_PROPS.NUM;
+  } else if (boolWidgets.includes(widget)) {
+    fileTypeTem = FIELD_TYPE_PROPS.BOOL;
+  } else if (widget === 'relField') {
+    fileTypeTem = getOperationsType({ fieldType: qxProps?.refFieldType || '' });
+  } else if (widget === 'qxTime') {
+    fileTypeTem = FIELD_TYPE_PROPS.TIME;
+  } else if (widget === 'qxLocation') {
+    fileTypeTem = FIELD_TYPE_PROPS.LOCATION;
+  } else if (widget === 'qxSelect') {
+    fileTypeTem = FIELD_TYPE_PROPS.ENUM;
+  } else if (widget === 'qxMultiSelect') {
+    fileTypeTem = FIELD_TYPE_PROPS.ENUM_MULTI;
+  } else if (widget === 'relSelector') {
+    if (max === 1) {
+      fileTypeTem = FIELD_TYPE_PROPS.REL;
+    } else {
+      fileTypeTem = FIELD_TYPE_PROPS.REL_MULTI;
+    }
+  } else if (widget === 'qxTree') {
+    fileTypeTem = FIELD_TYPE_PROPS.TREE;
+  } else if (widget === 'qxUpload' || widget === 'qxUploadImage') {
+    fileTypeTem = FIELD_TYPE_PROPS.FILE;
+  } else {
+    fileTypeTem = FIELD_TYPE_PROPS.TEXT;
+  }
+  // if (textWidgets.includes(widget)) {
+  //   fileTypeTem =
+  // })
+  return fileTypeTem;
+};
+
+
+export default () => {
+  const [modalVisible, setModalVisible] = useState(true);
+
+  const [props, setProps] = useState({
+    value: {
+      type: 'FORMULA',
+      expression: undefined,
+      values: undefined,
+      customScript: false,
+    },
+    schema: {
+      qxProps: {
+        widget: 'qxInput',
+        fieldName: {
+          title: '文本11',
+        },
+        calculateMode: '',
+        calculate: {
+          formula: '',
+        },
+        refFieldType: '', // 关联属性需要
+        relId: ''
+      }
+    }
+  });
+
+  const formulaColsTree = useMemo(() => {
+    return [];
+  }, []);
+
+
+  const uniKey = useMemo(() => {
+    return '';
+  }, []);
+  
+  const handleFxChange = (val: string, usedFuncList?: string, scriptEdit?: boolean) => {
+    setProps((prev) => ({
+      ...prev,
+      value: {
+        type: 'FORMULA',
+        expression: val,
+        functionList: usedFuncList,
+        customScript: scriptEdit,
+      }
+    }));
+  };
+
+  return (
+      <QxFunctionOperationModal
+        modalParams={{
+          visible: modalVisible,
+          onCancel:() => setModalVisible(false),
+          onOk:() => setModalVisible(false),
+        }}
+        autofocus={true}
+        colsTree={formulaColsTree}
+        value={props?.value?.type === 'FORMULA' ? (props?.value?.values || props?.value?.expression || '') : ''}
+        onChange={handleFxChange}
+        isScriptEditMode={props.value?.customScript}
+        fieldName={props.schema?.fieldName?.title || props?.addons?.formData?.title || ''}
+        uniKey={uniKey}
+        isInSubForm={false}
+        defaultSetting={{
+          widget: props?.schema?.qxProps?.widget,
+          fieldName: props.schema?.fieldName?.title || props?.addons?.formData?.title || '',
+          fieldGroupType: getOperationsTypeByWidget(props?.schema?.qxProps?.widget, props?.schema?.qxProps),
+          currentRelId: props?.schema?.qxProps?.relId,
+        }}
+      />
+  );
+};
+```
+
+<API id="QxFunctionOperationModal"></API>

+import React, {
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import './index.less';
+
+import {
+  CloseOutlined,
+  CompressOutlined,
+  ExpandOutlined,
+} from '@ant-design/icons';
+import { handleWindowOpen } from '@qx/utils';
+import { Button, Modal, Switch } from 'antd';
+import { ModalProps, TreeDataNode } from 'antd/lib';
+import _ from 'lodash-es';
+import { FIELD_TYPE_PROPS } from '../constant';
+import CodeEditor from '../qx-code-editor';
+import DescBox from './components/desc-box';
+import FxPicker from './components/fx-picker';
+import VarPicker from './components/var-picker';
+import { getFunctionList } from './service';
+import {
+  SYSVariable,
+  checkFormulaExpress,
+  copyText,
+  handleFlattenList,
+} from './util';
+
+export interface FunctionProps {
+  title: string;
+  titleDesc?: string;
+  key: string;
+  selectable?: boolean;
+  icon?: any;
+  children?: FunctionProps[];
+  desc?: string;
+  formula?: string;
+  params?: any;
+  returnType?: string;
+  demon?: string;
+  funcNameEg: string;
+}
+export interface ColsTreeSelectProps extends TreeDataNode {
+  attrs?: { titleStr: string; fieldGroupType: FIELD_TYPE_PROPS; key: string }[];
+  key: string;
+  titleStr?: string;
+  iconName?: string;
+  widget?: string;
+  fieldGroupType?: FIELD_TYPE_PROPS;
+  children?: ColsTreeSelectProps[];
+}
+
+interface QxFunOperationProps {
+  appCode: string;
+  funCode: string;
+  cRef?: any;
+  value: any;
+  onChange: (val: string, val2?: string[], val3?: boolean) => void;
+  colsTree: ColsTreeSelectProps[];
+  style?: any;
+  autofocus?: boolean;
+  fieldName: string;
+  fieldType: FIELD_TYPE_PROPS;
+  uniKey: string;
+  isScriptEditMode?: boolean;
+  isInSubForm?: boolean;
+  isFullScreen: boolean;
+}
+
+/**
+ * 启效函数运算器
+ *
+ * @param props
+ * @constructor
+ */
+export const QxFunctionOperation: React.FC<QxFunOperationProps> = ({
+  cRef,
+  value,
+  appCode,
+  funCode,
+  onChange,
+  colsTree,
+  autofocus,
+  fieldName = '',
+  fieldType,
+  isScriptEditMode = false,
+  uniKey,
+  isInSubForm,
+}) => {
+  const editorBoxRef = useRef<any>();
+  const codeEditorRef = useRef<any>();
+
+  // 变量列表
+  const [varDataList, setVarDataList] = useState<ColsTreeSelectProps[]>([]);
+  // 公式函数列表
+  const [funcDataList, setFuncDataList] = useState<FunctionProps[]>([]);
+  // 动态设置函数释义下的"当前函数"
+  const [funDescription, setFunDescription] = useState<FunctionProps | null>();
+  // 新变量（插入）
+  const [newVariable, setNewVariable] = useState<any>();
+  // 标识脚本编辑
+  const [scriptEdit, setScriptEdit] = useState(false);
+  // 错误悬浮提示
+  const [errorMap, setErrorMap] = useState({
+    show: false,
+    msg: '',
+  });
+  const pickedFunc = useRef<FunctionProps>(null);
+  const pickFunc = (data: FunctionProps) => {
+    // @ts-ignore
+    pickedFunc.current = data;
+    setFunDescription(data);
+  };
+
+  // const onMouseDown = (event: any) => {
+  //   let startPy = event.clientY;
+  //   let offsetHeight = editorBoxRef?.current.offsetHeight;
+  //   document.body.onmousemove = function (e: any) {
+  //     const offsetY = e.clientY - startPy;
+  //     const height = offsetHeight + offsetY;
+  //     if (!startPy || height > 400 || height < 200) return;
+  //     editorBoxRef?.current?.setAttribute('style', `height: ${height}px`);
+  //   };
+  //   document.body.onmouseup = function () {
+  //     document.body.onmousemove = null;
+  //   };
+  // };
+
+  useEffect(() => {
+    if (isScriptEditMode) setScriptEdit(isScriptEditMode);
+  }, [isScriptEditMode]);
+
+  const dealFunctionList = (originData: any) => {
+    // const titleEnum: any = {
+    //   TEXT: '文本函数',
+    //   MATH: '数学函数',
+    //   DATE: '日期函数',
+    //   LOGICAL: '逻辑函数',
+    //   REGULAR: '正则函数',
+    //   ADVANCED: '高级函数',
+    //   CUSTOM: '自定义',
+    //   COMMON: '常用函数',
+    // };
+    if (!_.isArray(originData)) {
+      return;
+    }
+    const funcList = originData?.map(
+      (item: { name: string; code: string; details?: any[] }) => {
+        return {
+          key: item.code,
+          title: item.name,
+          selectable: false,
+          children: (item.details || []).map((it: any) => ({
+            ...it,
+            title: it.funcNameEg,
+            key: it.id,
+            titleDesc: it.funcName,
+            formula: it.methodView,
+            desc: it.description,
+            returnType: it.dataType,
+            demon: it.executeDemo,
+          })),
+        };
+      },
+    );
+    setFuncDataList(funcList);
+  };
+
+  useEffect(() => {
+    let _colsTree;
+    let curLevel = colsTree.filter((o) => !o.titleStr?.startsWith('【主表】'));
+    const mainLevel = colsTree
+      .filter((o) => o.titleStr?.startsWith('【主表】'))
+      .map((o) => ({
+        ...o,
+        titleStr: o.titleStr?.substring(4),
+      }));
+    if (isInSubForm) {
+      if (_.isEmpty(curLevel)) {
+        _colsTree = mainLevel;
+      } else {
+        _colsTree = mainLevel.concat({
+          key: 'SUB',
+          titleStr: '子表字段',
+          children: curLevel,
+        });
+      }
+    } else {
+      _colsTree = curLevel;
+    }
+    setVarDataList([
+      {
+        key: 'FORM',
+        titleStr: '表单变量',
+        children: _colsTree,
+      },
+      {
+        key: 'SYS',
+        titleStr: '系统变量',
+        children: SYSVariable,
+      },
+    ]);
+  }, [JSON.stringify(colsTree), SYSVariable, isInSubForm]);
+  useEffect(() => {
+    getFunctionList(appCode, funCode).then((res: any) => {
+      if (res) {
+        dealFunctionList(res);
+      }
+    });
+  }, []);
+
+  const flattenVarList = useMemo(() => {
+    const _list: any[] = [];
+    handleFlattenList(varDataList || [], _list);
+    return _list;
+  }, [varDataList]);
+
+  // 编辑器光标移动
+  const onHandleHoverFxChange = useCallback((data: any) => {
+    if (data) {
+      setFunDescription(data);
+    } else if (pickedFunc.current) {
+      setFunDescription(pickedFunc.current);
+    } else {
+      setFunDescription(null);
+    }
+  }, []);
+
+  // 选中函数公式
+  const onHandlerPickFunc = useCallback((data: any) => {
+    setNewVariable({
+      key: data.funcNameEg,
+      name: data.title,
+      type: 'fun',
+    });
+  }, []);
+
+  // 选中变量
+  const onHandlerPickVar = useCallback((data: any) => {
+    setNewVariable({
+      key: data.key,
+      name: data.titleStr,
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!funcDataList.length) return;
+    const { errMsg, errCode } = checkFormulaExpress(
+      value,
+      funcDataList,
+      varDataList,
+      codeEditorRef?.current?.getUsedFuncList(),
+      fieldType,
+      flattenVarList,
+    );
+    setErrorMap({
+      show: errCode ? true : false,
+      msg: errMsg,
+    });
+  }, [funcDataList]);
+
+  // 捕获编辑器内容改变
+  const onHandlerEditorChange = (code: any) => {
+    console.log('code: ', code);
+    onChange(code);
+    if (!funcDataList.length) return;
+    const { errMsg, errCode } = checkFormulaExpress(
+      code,
+      funcDataList,
+      varDataList,
+      codeEditorRef?.current?.getUsedFuncList(),
+      fieldType,
+      flattenVarList,
+    );
+    setErrorMap({
+      show: errCode ? true : false,
+      msg: errMsg,
+    });
+  };
+
+  useImperativeHandle(cRef, () => ({
+    scriptEdit,
+    getUsedFuncList() {
+      return codeEditorRef?.current?.getUsedFuncList();
+    },
+  }));
+
+  return (
+    <div className="qx-operation">
+      <div className="toolbar">
+        <div className="field-name">{fieldName} =</div>
+        <div className="tools">
+          <div
+            className="tool-item"
+            onClick={() => {
+              codeEditorRef?.current?.autoFormatSelection();
+            }}
+          >
+            <span className="qx-f-icon-beautify" />
+            {/* <UngroupOutlined /> */}
+            <span className="text ">美化</span>
+          </div>
+          <div
+            className="tool-item"
+            onClick={() => {
+              const editor = codeEditorRef?.current?.getEditor();
+              const s_len = editor.getValue().length;
+              const startPos = { line: 0, ch: 0, sticky: null };
+              const endPos = editor.doc.posFromIndex(s_len);
+              editor.setSelection(startPos, endPos);
+              copyText(editor.getValue());
+            }}
+          >
+            <span className="qx-f-icon-copy" />
+            <span className="text ">复制</span>
+          </div>
+          <div className="tool-item">
+            <Switch
+              checked={scriptEdit}
+              size="small"
+              onChange={(checked) => {
+                setScriptEdit(checked);
+              }}
+            />
+            <span className="text">脚本编辑</span>
+          </div>
+        </div>
+      </div>
+      <div
+        ref={editorBoxRef}
+        className="editor-box"
+        onClick={() => {
+          const editor = codeEditorRef?.current?.getEditor();
+          editor.focus();
+        }}
+      >
+        <CodeEditor
+          cRef={codeEditorRef}
+          key={uniKey}
+          value={value}
+          isUseFun={true}
+          autofocus={autofocus}
+          funcDataList={funcDataList}
+          varDataList={varDataList}
+          newVariable={newVariable}
+          onChange={onHandlerEditorChange}
+          onFocusFunc={(data: any) => {
+            // @ts-ignore
+            pickedFunc.current = data;
+            setFunDescription(data);
+          }}
+        />
+        <div className={`error-zone ${errorMap.show ? 'show' : ''}`}>
+          {errorMap.msg}
+        </div>
+      </div>
+      <div className="custom">
+        <FxPicker
+          dataSource={funcDataList}
+          onHover={onHandleHoverFxChange}
+          onPick={onHandlerPickFunc}
+          pickFunc={pickFunc}
+        />
+        <VarPicker dataSource={varDataList} onPick={onHandlerPickVar} />
+        <DescBox scriptEdit={scriptEdit} funcData={funDescription} />
+      </div>
+    </div>
+  );
+};
+
+interface QxFunOperationModalProps extends QxFunOperationProps {
+  modalParams: ModalProps;
+  defaultSetting?: any; // 函数公式 一个字段校验 所需参数 放置处
+  isInSubForm?: boolean;
+  appCode: string;
+  funCode: string;
+}
+
+/**
+ * "函数运算器"Modal弹窗版
+ *
+ * @param value
+ * @param onChange
+ * @param style
+ * @param colsTree
+ * @param autofocus
+ * @param modalParams
+ * @param fieldName
+ * @param fieldType
+ * @param uniKey
+ * @constructor
+ */
+export const QxFunctionOperationModal: React.FC<QxFunOperationModalProps> = ({
+  value,
+  onChange,
+  style,
+  colsTree,
+  autofocus,
+  modalParams,
+  fieldName,
+  fieldType,
+  uniKey,
+  isScriptEditMode,
+  isInSubForm,
+  appCode,
+  funCode,
+}) => {
+  const qxFuncOperaionRef = useRef<any>();
+  const [funValues, setFunValues] = useState<any>();
+
+  useEffect(() => {
+    setFunValues(value);
+  }, [value]);
+
+  const [isFullScreen, setIsFullScreen] = useState(false);
+  /**实现F11全屏效果*/
+  const fullScreen = () => {
+    // var docElm = document.documentElement;
+    // /*W3C*/
+    // if (docElm.requestFullscreen) {
+    //   docElm.requestFullscreen();
+    // } /*FireFox */ else if (docElm.mozRequestFullScreen) {
+    //   docElm.mozRequestFullScreen();
+    // } /*Chrome等 */ else if (docElm.webkitRequestFullScreen) {
+    //   docElm.webkitRequestFullScreen();
+    // } /*IE11*/ else if (docElm.msRequestFullscreen) {
+    //   docElm.msRequestFullscreen();
+    // }
+    setIsFullScreen(true);
+  };
+  /**退出F11全屏*/
+  const exitFullScreen = () => {
+    // if (document.exitFullscreen) {
+    //   document.exitFullscreen();
+    // } else if (document.mozCancelFullScreen) {
+    //   document.mozCancelFullScreen();
+    // } else if (document.webkitCancelFullScreen) {
+    //   document.webkitCancelFullScreen();
+    // } else if (document.msExitFullscreen) {
+    //   document.msExitFullscreen();
+    // }
+    setIsFullScreen(false);
+  };
+
+  // 点击确定 调用方法
+  const onHandleCancel = () => {
+    setFunValues(value || '');
+
+    const e: any = new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+    });
+    setTimeout(() => modalParams?.onCancel && modalParams?.onCancel(e), 200);
+  };
+
+  // 点击确定 调用方法
+  const onHandleOk = () => {
+    const { getUsedFuncList, scriptEdit } = qxFuncOperaionRef.current;
+    if (!_.isEqual(funValues, value) || scriptEdit !== isScriptEditMode) {
+      const usedFuncList = getUsedFuncList();
+      console.log(
+        'code: ',
+        funValues,
+        ' useFuncList: ',
+        usedFuncList,
+        ' scriptEdit: ',
+        scriptEdit,
+      );
+      onChange(funValues, usedFuncList, scriptEdit);
+    }
+
+    const e: any = new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+    });
+    setTimeout(() => modalParams?.onOk && modalParams?.onOk(e), 200);
+  };
+
+  const newColsTree = useMemo(() => {
+    (colsTree || []).forEach((item) => {
+      if (item.widget === 'qxSelect') {
+        const code = item.key.slice(2, -1);
+        item.attrs = [
+          {
+            key: '${' + code + '.code' + '}',
+            titleStr: '编号',
+            fieldGroupType: FIELD_TYPE_PROPS.TEXT,
+          },
+          {
+            key: '${' + code + '.name' + '}',
+            titleStr: '文本',
+            fieldGroupType: FIELD_TYPE_PROPS.TEXT,
+          },
+          {
+            key: '${' + code + '.score' + '}',
+            titleStr: '赋值',
+            fieldGroupType: FIELD_TYPE_PROPS.NUM,
+          },
+        ];
+      }
+    });
+    return colsTree;
+  }, [colsTree]);
+
+  // const handleTree = (colsTree: ColsTreeSelectProps) => {
+  //   console.log(colsTree);
+  //   return colsTree;
+  // };
+
+  return (
+    <Modal
+      key={uniKey}
+      visible={modalParams.visible}
+      wrapClassName={`fx-wrapper`}
+      width={880}
+      centered={true}
+      maskClosable={false}
+      destroyOnClose={true}
+      footer={null}
+      {...modalParams}
+      className={`rel-more_modal ${isFullScreen ? 'rel-more_modal_full' : ''}`}
+    >
+      <div className="header">
+        <div className="header-item">
+          <span className="title">函数编辑</span>
+          <span
+            className="manual"
+            onClick={() => {
+              handleWindowOpen(
+                'https://qgutech.yuque.com/g/team-qx/helper/mlh9yzyewec7hb81/collaborator' +
+                  '/join?token=mjqmsZwJo9iTTkTb&source=doc_collaborator#',
+              );
+            }}
+          >
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+              className="qx-f-icon-help"
+            >
+              <g>
+                <path
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M1.33331 7.99992C1.33331 4.31802 4.31808 1.33325 7.99998 1.33325C11.6819 1.33325 14.6666 4.31802 14.6666 7.99992C14.6666 11.6818 11.6819 14.6666 7.99998 14.6666C4.31808 14.6666 1.33331 11.6818 1.33331 7.99992ZM6.86652 6.65945V6.50573C6.86732 6.32282 6.93273 6.11993 7.07868 5.96739C7.21347 5.82651 7.4762 5.66659 7.99602 5.66659C8.48416 5.66659 8.8236 5.89964 8.99671 6.16424C9.18158 6.4468 9.14515 6.68389 9.05741 6.80234C8.94799 6.95007 8.81212 7.08651 8.64793 7.23433C8.59797 7.2793 8.5364 7.33288 8.47038 7.39032L8.47037 7.39034C8.35231 7.49307 8.22004 7.60817 8.11457 7.70852C7.74008 8.06486 7.3333 8.5622 7.3333 9.33325L7.33547 9.67087L8.66877 9.6623L8.66665 9.33143C8.66714 9.10341 8.76061 8.93428 9.03368 8.67446C9.12546 8.58712 9.20797 8.51574 9.30238 8.43406L9.30242 8.43402C9.37224 8.37362 9.44858 8.30758 9.54 8.22528C9.73012 8.05413 9.94168 7.84862 10.1288 7.59597C10.6342 6.91365 10.516 6.05112 10.1125 5.43426C9.69713 4.79943 8.94146 4.33325 7.99602 4.33325C7.17786 4.33325 6.54355 4.59802 6.11528 5.04563C5.69841 5.48133 5.5347 6.0303 5.53318 6.50235V6.65945H6.86652ZM7.33545 10.3333V11.6692H8.66879V10.3333H7.33545Z"
+                />
+              </g>
+            </svg>
+            公式使用帮助手册
+          </span>
+        </div>
+        {/* <Tooltip placement="right" title={'公式使用帮助手册'}>
+        </Tooltip> */}
+        <div className="header-item">
+          {isFullScreen ? (
+            <CompressOutlined
+              className="icon-right expand"
+              onClick={exitFullScreen}
+            />
+          ) : (
+            <ExpandOutlined
+              className="icon-right expand"
+              onClick={fullScreen}
+            />
+          )}
+          <CloseOutlined
+            className="icon-right close"
+            onClick={onHandleCancel}
+          />
+        </div>
+      </div>
+      <QxFunctionOperation
+        cRef={qxFuncOperaionRef}
+        value={funValues}
+        onChange={(code: string) => {
+          setFunValues(code);
+        }}
+        appCode={appCode}
+        funCode={funCode}
+        isInSubForm={isInSubForm}
+        style={style}
+        colsTree={newColsTree}
+        isScriptEditMode={isScriptEditMode}
+        autofocus={autofocus}
+        fieldName={fieldName}
+        fieldType={fieldType}
+        uniKey={uniKey}
+        isFullScreen={isFullScreen}
+      />
+      <div className="footer">
+        <Button onClick={onHandleCancel}>取消</Button>
+        <Button type="primary" onClick={onHandleOk}>
+          确定
+        </Button>
+      </div>
+    </Modal>
+  );
+};

+import { request } from '@qx/common';
+
+/**
+ *
+ * @param appCode
+ * @param funCode
+ */
+export function getFunctionList(appCode: string, funCode: string) {
+  return request.get(
+    `/qx-apaas-lowcode/function/${appCode}/${funCode}/listFunctions`,
+  );
+}

+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="general/beautify">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M8.08163 1.33325C7.62049 1.33325 7.24695 1.70679 7.24695 2.16793V4.37048C7.24695 4.59185 7.33489 4.80416 7.49142 4.96069C7.64795 5.11722 7.86026 5.20516 8.08163 5.20516C8.303 5.20516 8.5153 5.11722 8.67183 4.96069C8.82836 4.80416 8.9163 4.59185 8.9163 4.37048V2.16793C8.9163 1.70658 8.54206 1.33325 8.08163 1.33325ZM4.01636 3.17374C3.90543 3.1727 3.79541 3.19377 3.69272 3.23574C3.59003 3.27771 3.49674 3.33973 3.4183 3.41818C3.33985 3.49662 3.27784 3.58991 3.23587 3.6926C3.1939 3.79529 3.17282 3.90531 3.17386 4.01624C3.17491 4.12717 3.19806 4.23678 3.24195 4.33866C3.28539 4.43947 3.34828 4.53071 3.42701 4.60717L4.98284 6.16251C5.13936 6.31898 5.35162 6.40688 5.57294 6.40688C5.79426 6.40688 6.00656 6.31894 6.16308 6.16247C6.48896 5.83659 6.48896 5.30856 6.16308 4.98268L4.60727 3.42686C4.53082 3.34814 4.43958 3.28526 4.33878 3.24183C4.2369 3.19793 4.12729 3.17479 4.01636 3.17374ZM12.1493 3.1871C11.9306 3.18504 11.7199 3.26885 11.5624 3.42052L11.5602 3.4227L9.99996 4.98288C9.84375 5.13937 9.75601 5.35146 9.75601 5.57257C9.75601 5.74239 9.80776 5.90688 9.90254 6.04496V6.06536L10.0002 6.163C10.1567 6.31947 10.369 6.40737 10.5903 6.40737C10.8116 6.40737 11.0239 6.31943 11.1805 6.16296L12.7404 4.60298L12.7426 4.60072C12.8943 4.44323 12.9781 4.23251 12.976 4.01387C12.974 3.79524 12.8862 3.58614 12.7316 3.43153C12.577 3.27692 12.3679 3.18916 12.1493 3.1871ZM8.08281 7.24019C7.97188 7.23914 7.86186 7.26022 7.75917 7.30219C7.65648 7.34416 7.56318 7.40618 7.48474 7.48462C7.4063 7.56306 7.34428 7.65635 7.30231 7.75904C7.26034 7.86173 7.23926 7.97176 7.24031 8.08269C7.24135 8.19362 7.2645 8.30322 7.3084 8.40511C7.35182 8.50589 7.41469 8.59711 7.49339 8.67355L13.2457 14.4259L13.2497 14.4296C13.4079 14.5778 13.6175 14.6586 13.8341 14.655C14.0508 14.6514 14.2575 14.5637 14.4107 14.4104C14.5639 14.2572 14.6514 14.0503 14.6549 13.8337C14.6583 13.617 14.5773 13.4075 14.4291 13.2494L14.4255 13.2456L8.67368 7.49328C8.59724 7.41457 8.50601 7.3517 8.40523 7.30828C8.30335 7.26438 8.19374 7.24123 8.08281 7.24019ZM2.16805 7.24683C1.70762 7.24683 1.33337 7.62015 1.33337 8.0815C1.33337 8.30287 1.42131 8.51518 1.57785 8.67171C1.73438 8.82824 1.94668 8.91618 2.16805 8.91618H4.37061C4.59198 8.91618 4.80428 8.82824 4.96081 8.67171C5.11734 8.51518 5.20528 8.30287 5.20528 8.0815C5.20528 7.86013 5.11734 7.64783 4.96081 7.4913C4.80428 7.33477 4.59198 7.24683 4.37061 7.24683H2.16805ZM11.6295 7.24683C11.4081 7.24683 11.1958 7.33477 11.0393 7.4913C10.8827 7.64783 10.7948 7.86013 10.7948 8.0815C10.7948 8.30287 10.8827 8.51518 11.0393 8.67171C11.1958 8.82824 11.4081 8.91618 11.6295 8.91618H13.832C14.0534 8.91618 14.2657 8.82824 14.4222 8.67171C14.5788 8.51518 14.6667 8.30287 14.6667 8.0815C14.6667 7.86013 14.5788 7.64783 14.4222 7.4913C14.2657 7.33477 14.0534 7.24683 13.832 7.24683H11.6295ZM5.45959 9.87733C5.24095 9.87512 5.03018 9.95879 4.87258 10.1104L4.87024 10.1126L3.31014 11.6727C3.15367 11.8292 3.06577 12.0415 3.06577 12.2628C3.06577 12.4328 3.11761 12.5974 3.21255 12.7356V12.756L3.31038 12.8537C3.46687 13.0099 3.67896 13.0976 3.90007 13.0976C4.12119 13.0976 4.33348 13.0097 4.48997 12.8534L6.04987 11.2935L6.05196 11.2914C6.20374 11.134 6.28771 10.9233 6.2858 10.7047C6.28389 10.486 6.19627 10.2769 6.04177 10.1222C5.88727 9.96746 5.67823 9.87954 5.45959 9.87733ZM8.08163 10.7952C7.6207 10.7952 7.24695 11.1685 7.24695 11.6294V13.8319C7.24695 14.0533 7.33489 14.2656 7.49142 14.4221C7.64795 14.5786 7.86026 14.6666 8.08163 14.6666C8.303 14.6666 8.5153 14.5786 8.67183 14.4221C8.82836 14.2656 8.9163 14.0533 8.9163 13.8319V11.6294C8.9163 11.1683 8.54185 10.7952 8.08163 10.7952Z" fill="#50535D"/>
+</g>
+</svg>

+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" ><path fill-rule="evenodd" fill="#7C7E86" d="M16 3a2 2 0 0 1 2 2v1h12V5a2 2 0 1 1 4 0v1h6a4 4 0 0 1 4 4v30a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V10a4 4 0 0 1 4-4h6V5a2 2 0 0 1 2-2Zm14 7v1a2 2 0 1 0 4 0v-1h6v7H8v-7h6v1a2 2 0 1 0 4 0v-1h12ZM8 40V21h32v19H8Zm5-11h8v-4h-8v4Zm8 7h-8v-4h8v4Zm6-7h8v-4h-8v4Z" clip-rule="evenodd"/></svg>

+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" ><path fill="#7C7E86" fill-rule="evenodd" d="M8 8h14v32H8V8Zm14 36H4V8a4 4 0 0 1 4-4h14a4 4 0 0 1 4 4v4h14a4 4 0 0 1 4 4v28H22Zm4-28v24h14V16H26Zm-12-2h-4v-3h4v3Zm-4 5h4v-3h-4v3Zm22 3h-4v-3h4v3Zm-16-8h4v-3h-4v3Zm4 5h-4v-3h4v3Zm14 3h4v-3h-4v3Z" clip-rule="evenodd"/></svg>

+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="edit/copy">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M12.6667 2.66659H6.66667V1.33325H12.6667C13.403 1.33325 14 1.93021 14 2.66659V9.99992H12.6667V2.66659ZM2 5.33325C2 4.59687 2.59695 3.99992 3.33333 3.99992H10C10.735 3.99992 11.3333 4.5944 11.3333 5.33218V13.3361C11.3333 14.075 10.7347 14.6666 10.0009 14.6666H3.33184C2.59351 14.6666 2 14.0677 2 13.3333V5.33325ZM10 5.33325H3.33333V13.3333H10V5.33325Z" fill="#50535D"/>
+</g>
+</svg>

+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path fill="#7C7E86" fill-rule="evenodd" d="M15 7a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3h-4v1h9a3 3 0 0 1 3 3v2h3a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H31a3 3 0 0 1-3-3V31a3 3 0 0 1 3-3h3v-1H14v1h3a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V31a3 3 0 0 1 3-3h3v-2a3 3 0 0 1 3-3h9v-1h-4a3 3 0 0 1-3-3V7Zm4 1v10h10V8H19ZM8 32v8h8v-8H8Zm24 0v8h8v-8h-8Z" clip-rule="evenodd"/></svg>

+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" ><path fill="#7C7E86"  fill-rule="evenodd" d="M4 10a4 4 0 0 1 4-4h32a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V10Zm36 0H8v28h32V10Zm-20 9h-9v-4h9v4Zm0 7h-9v-4h9v4Zm-4 7h-5v-4h5v4Zm13-5a5 5 0 0 0-5 5h-4a9.002 9.002 0 0 1 5.357-8.232 6 6 0 1 1 7.286 0A9.002 9.002 0 0 1 38 33h-4a5 5 0 0 0-5-5Zm-2-8a2 2 0 1 1 4 0 2 2 0 0 1-4 0Z" clip-rule="evenodd"/></svg>

+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" ><path fill="#7C7E86" fill-rule="evenodd" d="M21 13a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm3-7a7 7 0 1 0 0 14C12.954 20 4 28.954 4 40a2 2 0 1 0 4 0c0-8.837 7.163-16 16-16s16 7.163 16 16a2 2 0 1 0 4 0c0-11.046-8.954-20-20-20a7 7 0 1 0 0-14Z" clip-rule="evenodd"/></svg>

+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path fill="#7C7E86" fill-rule="evenodd" d="M8 4a3 3 0 0 0-3 3v34a3 3 0 0 0 3 3h32a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H8Zm31 24H9v-8h30v8ZM9 40v-8h30v8H9Zm30-24V8H9v8h30ZM15.02 34H11v4.02h4.02V34ZM11 10h4.02v4.02H11V10Zm4.02 12H11v4.02h4.02V22Z" clip-rule="evenodd"/></svg>