fix : 默认值组件更换部分样式待更改

邱嘉伟
1 parent d0ed0f0c
Showing 5 changed files with 129 additions and 110 deletions
src/qx-base-condition-item/index.tsx
src/qx-parameter-setting/ParameterModal.tsx
src/qx-parameter-setting/index.md
src/qx-parameter-setting/index.tsx
src/qx-parameter-setting/style.less
--- a/src/qx-base-condition-item/index.tsx
View file @bfdaf9b
+++ b/src/qx-base-condition-item/index.tsx
View file @bfdaf9b
@@ -763,10 +763,10 @@ export const QxBaseConditionItem: React.FC<QxBaseConditionItemProps> = ({
   useEffect(() => {
     if (fieldSelectorRef.current && !isMount.current) {
       setTimeout(() => {
-        console.log('getName-2', fieldSelectorRef.current.getInputDisplay?.());
-        const display = fieldSelectorRef.current.getInputDisplay?.();
+        // console.log('getName-2', fieldSelectorRef.current.getInputDisplay?.());
+        const display = fieldSelectorRef?.current?.getInputDisplay?.();
         isMount.current = !!display;
-        setInputDisplay(fieldSelectorRef.current.getInputDisplay?.());
+        setInputDisplay(fieldSelectorRef?.current?.getInputDisplay?.());
       }, 10);
     }
   });
--- a/src/qx-parameter-setting/ParameterModal.tsx
View file @bfdaf9b
+++ b/src/qx-parameter-setting/ParameterModal.tsx
View file @bfdaf9b
 /* eslint-disable array-callback-return */
 /* eslint-disable eqeqeq */
 import { SnippetsOutlined } from '@ant-design/icons';
-import { QxFieldSetter, QxFormSelect } from '@qx/common';
+import { QxBaseCondition, QxFormSelect } from '@qx/common';
 import {
   Button,
   Col,
@@ -35,11 +35,6 @@ import { SubDropIcon, SubNodeIcon } from './sub-node-icon';
 import '../style/reset.less';
-type ValueOptionProps = {
-  key: number | string;
-  value: string;
-};
-
 const valueOptions = [
   { key: 'STRING', title: '文本' },
   { key: 'NUMBER', title: '数字' },
@@ -125,22 +120,6 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
     setSearchValue(value);
   };
-  const getValueOptions = (item: any): ValueOptionProps[] | undefined => {
-    const widget = typeTranslateWidget(item.type);
-    if (widget === 'userSelector') {
-      return [];
-      // return [{key: 'MYSELF', value: "当前用户"}]
-    }
-    if (widget === 'orgSelector') {
-      // return [{key: 'MY_ORG', value: "当前人所在部门"}]
-      return [];
-    }
-    if (widget === 'qxDatetime') {
-      return [{ key: 'NOW', value: '当前时间' }];
-    }
-    return undefined;
-  };
-
   const checkShowTree = (_data: any) => {
     if (_data.type == 'ARRAY') {
       if (_data.child && _data.child.length > 0) {
@@ -202,7 +181,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
         </div>
       ),
       dataIndex: 'title',
-      width: '112px',
+      width: '120px',
       className: 'ps-table-cell',
       key: 'title',
       render: (text, record) => {
@@ -275,8 +254,37 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
       width: '116px',
       key: 'valueMapping',
       render: (text, record) => (
-        <div className="editable-cell ">
-          <QxFieldSetter
+        <div className="editable-cell-default ">
+          <QxBaseCondition
+            value={[
+              {
+                mappingValues: text?.mappingValues || [],
+                // disabled: disabled,
+                valuesObj: record.valuesObj || [],
+                params: { appCode: 'appCode', useId: true },
+                // valueOptions: getValueOptions(nodeData),
+                field: record.code,
+                widget: typeTranslateWidget(record.type),
+                fieldType: typeTranslateFieIdtype(record.type),
+                type: typeTranslateFieIdtype(record.type),
+                fieldGroupType: typeTranslateGrouptype(record.type),
+                isMixValue: false, //暂时只支持单选
+                // typeTranslateFieIdtype(record.type) == 'STRING'
+                //   ? true
+                //   : false,
+                // colsTree: props.nodeItem,
+                isMultiple: false,
+                // popupOnBody: true,
+                // inputDis: true,
+                showHeader: false,
+              },
+            ]}
+            onChange={(val) => handleChangeField(val, record)}
+            showIdx={false}
+            node={props.nodeItem}
+            mode="variable"
+          />
+          {/* <QxFieldSetter
             disabled={record.disabled || typeDis}
             value={record.valuesObj || []}
             params={{ appCode: 'appCode', useId: true }}
@@ -292,7 +300,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
             onChange={(val) => handleChangeField(val, record)}
             popupOnBody={true}
             inputDis={true}
-          />
+          /> */}
         </div>
       ),
     },
@@ -305,7 +313,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
       dataIndex: 'description',
       className: 'ps-table-cell',
       key: 'description',
-      width: '102px',
+      width: '120px',
       render: (text, record) => (
         <Form.Item
           name={'description' + record.id}
@@ -392,7 +400,7 @@ const ParameterModal: React.FC<ParameterSettingProps> = (props) => {
     ),
     dataIndex: 'qxProps',
     className: 'ps-table-cell',
-    width: '314px',
+    width: '350px',
     key: 'qxProps',
     render: (qxProps: any, record: any) => {
       switch (record.type) {
--- a/src/qx-parameter-setting/index.md
View file @bfdaf9b
+++ b/src/qx-parameter-setting/index.md
View file @bfdaf9b
@@ -122,9 +122,9 @@ export default () => {
         nodeItem={nodeItem}
         // componentItem={componentItem}
         onChange={handleChange}
-        isHideSearch={isHide}
+        // isHideSearch={isHide}
         isShowField={true}
-        title={titleDom}
+        // title={titleDom}
         // type={'preview'}
         // component={QxTagsInput}
         request={request}
--- a/src/qx-parameter-setting/index.tsx
View file @bfdaf9b
+++ b/src/qx-parameter-setting/index.tsx
View file @bfdaf9b
@@ -22,7 +22,7 @@ import {
   typeTranslateWidget,
 } from './constant';
-import { QxBaseIcon, QxFieldSetter } from '@qx/common';
+import { QxBaseCondition, QxBaseIcon } from '@qx/common';
 import moment from 'dayjs';
 import { cloneDeep, isEmpty } from 'lodash-es';
 import type { ParamDesignModel } from './constant';
@@ -30,11 +30,6 @@ import { uidGen } from './stringUtil';
 import './style.less';
-type ValueOptionProps = {
-  key: number | string;
-  value: string;
-};
-
 import { SubDropIcon, SubNodeIcon } from './sub-node-icon';
 const valueOptions = [
@@ -332,7 +327,13 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
   };
   // 删除树
-  const deleteParameter = (data: ParamDesignModel) => {
+  const deleteParameter = (e: any, data: ParamDesignModel) => {
+    e.persist();
+    let item = e.currentTarget;
+    e.currentTarget.disabled = true;
+    setTimeout(() => {
+      item.disabled = false;
+    }, 500);
     Modal.confirm({
       title: '删除',
       content: `确定要删除此参数吗？`,
@@ -568,39 +569,28 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
     // }
   };
-  const getValueOptions = (item: any): ValueOptionProps[] | undefined => {
-    const widget = typeTranslateWidget(item.type);
-    if (widget === 'userSelector') {
-      return [];
-      // return [{key: 'MYSELF', value: "当前用户"}]
-    }
-    if (widget === 'orgSelector') {
-      // return [{key: 'MY_ORG', value: "当前人所在部门"}]
-      return [];
-    }
-    if (widget === 'qxDatetime') {
-      return [{ key: 'NOW', value: '当前时间' }];
-    }
-    return undefined;
-  };
-
   const changeField = (val: any, data: any) => {
     if (!val || isEmpty(val)) {
       return;
     }
+    console.log('changeField', val);
     const _newData = cloneDeep(treeData);
     const loopChangeTree = (treeList: ParamDesignModel[]) => {
-      let newMappingValues = [];
+      let newMappingValues = [],
+        newValuesObj = [];
       for (let i = 0; i < treeList.length; i++) {
         if (treeList[i].id == data.id) {
           newMappingValues = val.map((item: any) =>
-            item?.extVal ? item?.extVal : item?.value,
+            item?.mappingValues ? item?.mappingValues[0] : '',
+          );
+          newValuesObj = val.map((item: any) =>
+            item?.valuesObj ? item?.valuesObj[0] : {},
           );
           treeList[i].valueMapping = {
             ...data.valueMapping,
             mappingValues: newMappingValues,
           };
-          treeList[i].valuesObj = val;
+          treeList[i].valuesObj = newValuesObj;
           return;
         } else if (!!treeList[i]?.child?.length) {
           loopChangeTree(treeList[i].child || []);
@@ -617,7 +607,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
     let level = [];
     const treeList = generateList(treeData);
     const loop = (list: any[]) => {
-      if (!!list.pid) {
+      if (!!list?.pid) {
         const index = treeList.findIndex((o: any) => o.id === list.pid);
         level.push(treeList[index]);
         loop(treeList[index]);
@@ -626,6 +616,9 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
       }
     };
     loop(nodeData);
+
+    // const test = document.getElementByClassName('ant-tree-node-content-wrapper')
+    // console.log('test', test)
     const treeLevel2 = !!nodeData.pid ? level.length : 0;
     const treeLevel = nodeData.child && nodeData.child.length > 0 ? 1 : 0;
     const leftD = 22 + treeLevel * 22 + treeLevel2 * 24;
@@ -691,23 +684,21 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
                 }
                 disabled={disabled}
                 type="link"
-                onClick={() => deleteParameter(nodeData)}
+                onClick={(e) => deleteParameter(e, nodeData)}
               />
             </div>
             <div className="opt-left">
               <Input
                 status={!nodeData.title ? 'error' : ''}
                 placeholder={!nodeData.title ? '请输入参数名' : ''}
-                className={
-                  index > -1 && searchValue ? 'search-selected' : 'sp-input'
-                }
+                className={index > -1 && searchValue ? 'search-selected' : ''}
                 draggable={true}
                 onDragStart={(event) => {
                   event.stopPropagation();
                   event.preventDefault();
                 }}
                 key={inputKey}
-                style={{ width: '100%' }}
+                style={{ width: '100%', borderRadius: '4px' }}
                 maxLength={50}
                 disabled={disabled}
                 bordered={true}
@@ -720,25 +711,34 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
           </div>
           {props?.isShowField && (
             <div className="opt-left-down">
-              <QxFieldSetter
-                disabled={disabled}
-                value={nodeData.valuesObj || []}
-                params={{ appCode: 'appCode', useId: true }}
-                valueOptions={getValueOptions(nodeData)}
-                field={nodeData.code}
-                widget={typeTranslateWidget(nodeData.type)}
-                fieldType={typeTranslateFieIdtype(nodeData.type)}
-                fieldGroupType={typeTranslateGrouptype(nodeData.type)}
-                isMixValue={
-                  typeTranslateFieIdtype(nodeData.type) == 'STRING'
-                    ? true
-                    : false
-                }
-                colsTree={props.nodeItem}
-                isMultiple={false}
+              <QxBaseCondition
+                value={[
+                  {
+                    mappingValues: nodeData?.valueMapping?.mappingValues || [],
+                    // disabled: disabled,
+                    valuesObj: nodeData.valuesObj || [],
+                    params: { appCode: 'appCode', useId: true },
+                    // valueOptions: getValueOptions(nodeData),
+                    field: nodeData.code,
+                    widget: typeTranslateWidget(nodeData.type),
+                    fieldType: typeTranslateFieIdtype(nodeData.type),
+                    type: typeTranslateFieIdtype(nodeData.type),
+                    fieldGroupType: typeTranslateGrouptype(nodeData.type),
+                    isMixValue: false,
+                    // typeTranslateFieIdtype(nodeData.type) == 'STRING'
+                    //   ? true
+                    //   : false,
+                    // colsTree: props.nodeItem,
+                    isMultiple: false,
+                    // popupOnBody: true,
+                    // inputDis: true,
+                    showHeader: false,
+                  },
+                ]}
                 onChange={(val) => changeField(val, nodeData)}
-                popupOnBody={true}
-                inputDis={true}
+                showIdx={false}
+                node={props.nodeItem}
+                mode="variable"
               />
             </div>
           )}
@@ -819,7 +819,7 @@ export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
                 rootClassName={'qx-parameter-tree-list'}
                 treeData={treeData || []}
                 fieldNames={{
-                  title: 'label',
+                  title: null,
                   key: 'id',
                   children: 'child',
                 }}
--- a/src/qx-parameter-setting/style.less
View file @bfdaf9b
+++ b/src/qx-parameter-setting/style.less
View file @bfdaf9b
@@ -162,34 +162,25 @@
   .ant-input-affix-wrapper {
     border-color: @N4;
   }
-
-  .sp-input {
-    &::placeholder {
-      color: red !important;
-    }
-  }
 }
 .opt-left-down {
-  display: flex;
-  align-items: center;
-  width: 100%;
+  // display: flex;
+  // align-items: center;
+  // width: 80%;
   margin-top: 2px;
   margin-bottom: 2px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  background-color: #fff;
-  border-radius: 4px;
-
-  .qx-field-setter {
-    border-width: 1px;
-    border-style: solid;
-    border-color: #d9d9d9;
-    border-radius: 6px;
-    // height: 32px;
-
-    .qx-formula-cm {
-      padding-left: 10px !important;
+  // overflow: hidden;
+  // text-overflow: ellipsis;
+  // background-color: #fff;
+  // border-radius: 4px;
+  .qx-base-condition-item {
+    margin: 0;
+
+    .qx-field-setter {
+      .qx-tags-input {
+        background-color: #fff;
+      }
     }
   }
 }
@@ -223,13 +214,27 @@
   .ant-input-affix-wrapper,
   .qx-field-setter {
     border-width: 0;
+
+    .qx-tags-input {
+      background-color: transparent;
+    }
+  }
+}
+
+.editable-cell-default {
+  .qx-base-condition-item {
+    margin: 0;
+  }
+
+  .qx-field-setter {
+    border-width: 0;
   }
 }
 .search-selected {
-  .ant-input {
-    color: #1890ff;
-  }
+  // .ant-input {
+  color: #1890ff;
+  // }
 }
 .editable-cell-value-wrap {
@@ -340,6 +345,12 @@
     }
   }
+  .opt-btn {
+    .ant-select-selection-item {
+      color: #242835;
+    }
+  }
+
   .ant-tree-node-content-wrapper.ant-tree-node-selected {
     background-color: transparent;
   }