refactor: base-condition

 @import '~@qx/ui/src/style/variable.less';
 
 .qx-base-condition-item {
+  margin-bottom: 16px;
+  flex-grow: 1;
+
   &__header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     font-size: 14px;
-    color: @N9
+    color: @N9;
+    height: 22px;
+    margin-bottom: 4px;
+    overflow: hidden;
   }
 
   &__header-icon {
@@ -28,7 +34,7 @@
     color: @N8;
 
     &:hover {
-      color: @E3
+      color: @E3;
     }
   }
 
@@ -44,7 +50,35 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      color: @N7
+      color: @N7;
+    }
+
+    &-value-render {
+      position: absolute;
+      background-color: #fff;
+      width: calc(100% - 33px);
+      height: 30px;
+      display: flex;
+      align-items: center;
+      top: 1px;
+      left: 8px;
+      z-index: 1;
+    }
+  }
+
+  &__header-filter {
+    margin-right: 8px;
+  }
+
+  &__header-right {
+    transition: all 0.2s ease;
+    transform: translateX(20px);
+    text-align: right;
+  }
+
+  &:hover {
+    .qx-base-condition-item__header-right {
+      transform: translateX(0);
     }
   }
 }

 import { ControlOutlined } from '@ant-design/icons';
-import { Select, Tooltip } from 'antd';
+import { Select, Tooltip, Input } from 'antd';
+import { size } from 'lodash-es';
 import React, { useState } from 'react';
 import type { QxBaseConditionField } from '../qx-base-condition';
 import { QxBaseIcon } from '../qx-base-icon';
@@ -7,6 +8,18 @@ import { QxFieldSetter } from '../qx-field-setter';
 
 import './index.less';
 
+export const multipleType = [
+  'STRING',
+  'REL_MULTI',
+  'ENUM',
+  'ENUM_MULTI',
+  'TEXT',
+  // 'TREE',
+  // 'USER',
+  'USER_MULTI',
+  // 'ORG',
+  'ORG_MULTI',
+];
 /**
  * 过滤条件运算符及默认选项
  */
@@ -636,6 +649,23 @@ export const ConditionCol: any = {
   },
 };
 
+const optValTypeCheck = {
+  // 条件是否为"为空"、"不为空"
+  isEmptyType: (opt: any) => {
+    return ['IS_NULL', 'NOT_NULL'].includes(opt || '');
+  },
+  // 范围类型
+  isRangeType: (opt: any) => {
+    return ['IN', 'NOT_IN'].includes(opt || '');
+  },
+  // 流程条件多选优化
+  isMultiType: (opt: any) => {
+    return ['BELONG', 'NOT_BELONG', 'INCLUDE', 'NOT_INCLUDE'].includes(
+      opt || '',
+    );
+  },
+};
+
 export const WidgetsIcon = ({ widgetName }: { widgetName: string }) => {
   let iconType: string = '';
   switch (widgetName) {
@@ -762,15 +792,16 @@ export const WidgetsIcon = ({ widgetName }: { widgetName: string }) => {
 
 export const QxBaseConditionItem: React.FC<QxBaseConditionItemProps> = ({
   value,
-  isMultiple = false,
-  isRange = false,
   field,
   remove,
   onChange,
+  mode = 'condition',
   ValueAssignmentPopup,
 }) => {
   const [CustomValueRender, setCustomValueRender] =
-    useState<React.ReactNode>(null);
+    useState<() => React.ReactNode>();
+
+  const [open, setOpen] = useState(false);
 
   const handleChange = (val: any) => {
     onChange?.({
@@ -781,40 +812,89 @@ export const QxBaseConditionItem: React.FC<QxBaseConditionItemProps> = ({
   };
 
   const handleFilerChange = (val: string) => {
-    onChange?.({
+    const newValue = {
       ...(value || {}),
       opt: val,
-    });
+    };
+
+    // "为空"、"不为空"条件时，置空"值"
+    if (optValTypeCheck.isEmptyType(newValue.opt)) {
+      newValue.valuesObj = [];
+    }
+
+    // 切换到非'范围'类型时，删除第2个值
+    if (optValTypeCheck.isRangeType(newValue?.opt)) {
+      newValue.valuesObj = (newValue.valuesObj || []).filter(
+        (it) => it?.isRange,
+      );
+    } else if (
+      optValTypeCheck.isMultiType(newValue?.opt) ||
+      multipleType.includes(newValue.fieldGroupType)
+    ) {
+    } else {
+      const vals = (newValue.valuesObj || []).map((it) => it?.isRange);
+      if (size(vals) > 1) {
+        newValue.valuesObj = [newValue.valuesObj[0]];
+      }
+    }
+
+    onChange?.(newValue);
   };
 
   const handleDefaultValueSettingChange = (
     val: any,
-    valueRender: React.ReactNode,
+    valueRender: () => React.ReactNode,
   ) => {
     handleChange(val);
-    setCustomValueRender(valueRender);
+    setCustomValueRender(() => valueRender);
   };
 
+  const handleOpenChange = setOpen;
+
   const RenderContent = (
     <>
-      {CustomValueRender && (
+      {typeof CustomValueRender === 'function' && (
         <div className="qx-base-condition-item__content-value-render">
-          {CustomValueRender}
+          {CustomValueRender()}
         </div>
       )}
       <QxFieldSetter
         value={value?.valuesObj}
         fieldGroupType={value?.fieldGroupType}
         onChange={handleChange}
-        isMultiple={isMultiple}
-        isRange={isRange}
+        isMultiple={multipleType.includes(value?.fieldGroupType)}
+        isRange={optValTypeCheck.isRangeType(value?.opt)}
+        disabled={optValTypeCheck.isEmptyType(value?.opt)}
       />
-      {ValueAssignmentPopup && (
-        <ControlOutlined className="qx-base-condition-item__content-suffix" />
+      {typeof ValueAssignmentPopup !== 'undefined' && (
+        <ControlOutlined
+          onClick={() => {
+            handleOpenChange(!open);
+          }}
+          className="qx-base-condition-item__content-suffix"
+        />
       )}
     </>
   );
 
+  const RenderFilter = () => {
+    switch (mode) {
+      case 'condition':
+        return (
+          <Select
+            value={value?.opt}
+            className="qx-base-condition-item__header-filter__select"
+            bordered={false}
+            fieldNames={{ label: 'text', value: 'key' }}
+            options={ConditionCol[value.fieldGroupType]?.operations || []}
+            onChange={handleFilerChange}
+          />
+        );
+      default:
+        return <a>设为</a>;
+    }
+  };
+
   return (
     <div className="qx-base-condition-item">
       <div className="qx-base-condition-item__header">
@@ -828,14 +908,7 @@ export const QxBaseConditionItem: React.FC<QxBaseConditionItemProps> = ({
         </div>
         <div className="qx-base-condition-item__header-right">
           <span className="qx-base-condition-item__header-filter">
-            <Select
-              value={value?.opt}
-              className="qx-base-condition-item__header-filter__select"
-              bordered={false}
-              fieldNames={{ label: 'text', value: 'key' }}
-              options={ConditionCol[value.fieldGroupType]?.operations || []}
-              onChange={handleFilerChange}
-            />
+            <RenderFilter />
           </span>
           <span className="qx-base-condition-item__header-delete">
             <Tooltip title="删除">
@@ -848,12 +921,13 @@ export const QxBaseConditionItem: React.FC<QxBaseConditionItemProps> = ({
         </div>
       </div>
       <div className="qx-base-condition-item__content">
-        {ValueAssignmentPopup ? (
+        {typeof ValueAssignmentPopup !== 'undefined' ? (
           <ValueAssignmentPopup
+            open={open}
             value={value}
-            isMultiple={isMultiple}
             field={field}
             onChange={handleDefaultValueSettingChange}
+            onOpenChange={handleOpenChange}
           >
             {RenderContent}
           </ValueAssignmentPopup>
@@ -868,15 +942,16 @@ export const QxBaseConditionItem: React.FC<QxBaseConditionItemProps> = ({
 export interface ValueAssignmentPopupProps
   extends Omit<QxBaseConditionItemProps, 'onChange'> {
   children?: React.ReactNode;
-  onChange?: (val: any, valueRender: React.ReactNode) => void;
+  onChange?: (val: any, valueRender: () => React.ReactNode) => void;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
 }
 
 export interface QxBaseConditionItemProps {
   field: QxBaseConditionField;
   value?: any;
-  isMultiple?: boolean;
-  isRange?: boolean;
   onChange?: (val: any) => void;
   remove?: (field: QxBaseConditionField) => void;
   ValueAssignmentPopup?: React.FC<ValueAssignmentPopupProps>;
+  mode?: string;
 }

 @import '~@qx/ui/src/style/variable.less';
 
-.qx-condition-list {
+.qx-base-condition-list {
+  
   &-item {
     display: flex;
     align-items: center;
 
+
     &__idx {
       color: @N9;
       margin-right: 4px;
@@ -12,9 +14,4 @@
       display: inline-block;
     }
   }
-
-  .qx-base-condition-item {
-    margin-bottom: 16px;
-    flex-grow: 1;
-  }
 }

@@ -51,4 +51,72 @@ export default () => {
 };
 ```
 
+```tsx
+import { QxBaseCondition } from '@qx/common';
+import { Dropdown, Form, Select, Tag } from 'antd';
+
+const ValueAssignmentPopup = (props) => {
+  const handleChange = (val) => {
+    props.onChange?.([{
+      type: '111',
+      value: val
+    }], () => <Tag>111111</Tag>)
+  }
+  return (
+    <Dropdown
+      {...props}
+      dropdownRender={() => (
+        <Select
+          onChange={handleChange}
+          options={[
+            {
+              label: '标题',
+              value: 'title',
+            },
+          ]}
+        />
+      )}
+    >
+      {props.children}
+    </Dropdown>
+  );
+};
+
+export default () => {
+  return (
+    <div>
+      <Form>
+        <Form.Item name="condition">
+          <QxBaseCondition
+            ValueAssignmentPopup={ValueAssignmentPopup}
+            showIdx={false}
+            mode="variable"
+            options={[
+              {
+                field: 'text',
+                fieldType: 'STRING',
+                fieldName: '文本',
+                extract: { widget: 'qxInput' },
+              },
+              {
+                field: 'num_cagoif',
+                fieldType: 'DOUBLE',
+                fieldName: '数值',
+                extract: { widget: 'qxNumber' },
+              },
+              {
+                field: 'date_uvpapz',
+                fieldType: 'YEAR_SEC',
+                fieldName: '日期',
+                extract: { widget: 'qxDatetime' },
+              },
+            ]}
+          />
+        </Form.Item>
+      </Form>
+    </div>
+  );
+};
+```
+
 <API id="QxBaseCondition"></API>

@@ -9,11 +9,9 @@ export enum FieldBaseType {
   YEAR_SEC = 'DATE',
 }
 
-export const rangeType = ['DOUBLE']
-export const multipleType = ['STRING']
 
 export const QxBaseCondition: React.FC<QxBaseConditionProps> = (props) => {
-  const [localOptions, setLocalOptions] = useState(props.options || []);
+  const [localOptions, setLocalOptions] = useState(props.value || props.options || []);
 
   const getDefaultConditionOptions = (item: QxBaseConditionField) => ({
     ...item,
@@ -38,6 +36,7 @@ export const QxBaseCondition: React.FC<QxBaseConditionProps> = (props) => {
   const handleDelete = (key: number) => {
     localOptions.splice(key, 1);
     setLocalOptions([...localOptions]);
+    props.onChange?.([...localOptions])
   };
 
   useEffect(() => {
@@ -45,29 +44,28 @@ export const QxBaseCondition: React.FC<QxBaseConditionProps> = (props) => {
   }, [props.options]);
 
   const RenderCondition = localOptions?.map((item, key) => (
-    <div className="qx-condition-list-item" key={item.code || key}>
+    <div className="qx-base-condition-list-item" key={item.code || key}>
       {(props?.showIdx ?? true) && (
-        <span className="qx-condition-list-item__idx">{key + 1}.</span>
+        <span className="qx-base-condition-list-item__idx">{key + 1}.</span>
       )}
       <QxBaseConditionItem
         key={item.code || key}
-        isMultiple={multipleType.includes(item.fieldType)}
-        isRange={rangeType.includes(item.fieldType)}
+        mode={props.mode}
         {...item}
         value={props.value?.[key] || getDefaultConditionOptions(item)}
         field={item}
         onChange={(val) => handleItemChange(val, key)}
         remove={() => handleDelete(key)}
         ValueAssignmentPopup={
-          item.showValueAssignmentPopup ? props.ValueAssignmentPopup : undefined
+          (item.showValueAssignmentPopup ?? true) ? props.ValueAssignmentPopup : undefined
         }
       />
     </div>
   ));
 
   return (
-    <div className="qx-condition">
-      <div className="qx-condition-list">{RenderCondition}</div>
+    <div className="qx-base-condition">
+      <div className="qx-base-condition-list">{RenderCondition}</div>
     </div>
   );
 };
@@ -76,6 +74,7 @@ export interface QxBaseConditionField {
   field: string;
   fieldType: string;
   fieldName: string;
+  fieldGroupType: string;
   qxProps?: string;
   extract?: any;
 }
@@ -87,10 +86,13 @@ export interface QxBaseConditionOptionsProps extends QxBaseConditionField {
   [key: string]: any;
 }
 
+export type QxBaseConditionMode  = 'condition' | 'variable'
+
 export interface QxBaseConditionProps {
   showIdx?: boolean;
+  mode: QxBaseConditionMode;
   options: QxBaseConditionOptionsProps[];
   value: any[];
   onChange?: (val: any[]) => void;
-  ValueAssignmentPopup?: React.FC<ValueAssignmentPopupProps>
+  ValueAssignmentPopup?: React.FC<ValueAssignmentPopupProps>;
 }