@bit-sun/business-component 2.3.22-beta9 → 2.3.23-beta01

package/src/components/Business/JsonQueryTable/components/Formula.tsx

@@ -1,205 +1,206 @@
-import { Button, Modal, Row, Col, Input } from 'antd';
-import React, { useState, useEffect } from 'react';
-import { CloseCircleOutlined } from '@ant-design/icons';
-import {
-  SortableContainer,
-  SortableElement,
-  SortableHandle,
-} from 'react-sortable-hoc';
-import { arrayMoveImmutable } from 'array-move';
-import { ModalForm, request } from 'bssula';
-
-
-const App = ({
-  record,
-  setValue,
-  formula
-}:{
-  record:any,
-  setValue:any,
-  formula:any,
-}) => {
-  const [formul, setFormul] = useState(record.formula)
-  const [state, UpdateState]:any = useState([])
-  const [fieldList, UpdateFiedList] = useState([])
-
-  useEffect(() => {
-    request({
-      url: '/basic/flow/businessField/listNoPage',
-      params: {
-        'qp-businessType-eq': record.businessType,
-        'qp-fieldGroup-eq': record.fieldGroup,
-      },
-      converter: ({ response, data }:any) => {
-        if (response.code === '000000') {
-          // UpdateFiedList(data.filter(item => item.valueType == 20 || item.valueType == 21 || item.valueType == 22))
-          const resData = data.filter((item:any) => item.inputType != 40 && (item.valueType == 20 || item.valueType == 21 || item.valueType == 22)).map((item:any) => ({value: item.code, name: item.name}))
-          UpdateFiedList(resData)
-          let res:any = [];
-          formul && formul.replace(/(\w+|\+|\-|\*|\/|\(|\))/g, (item:any) => {
-            if (resData.filter((initem:any) => initem.value === item).length) {
-              res = res.concat(resData.filter((initem:any) => initem.value === item))
-            } else {
-              res = res.concat(['+', '-', '*', '/', '(', ')'].filter(initem => initem === item).map(item => ({value: item, name: item})))
-            }
-          })
-
-          UpdateState(res)
-        }
-      }
-    })
-  }, [])
-
-  const [isModalVisible, setIsModalVisible] = useState(false);
-
-  const showModal = () => {
-    setIsModalVisible(true);
-  };
-
-  const handleOk = () => {
-    setIsModalVisible(false);
-    setValue(state);
-    setFormul(state.map((item:any) => {
-      if (['+', '-', '*', '/', '(', ')'].indexOf(item.value) == -1) {
-        return `{${item.value}}`
-      }
-      return item.value;
-    }).join(''))
-  };
-
-  const handleCancel = () => {
-    setIsModalVisible(false);
-  };
-
-
-  const onSortEnd = ({ oldIndex, newIndex }:any) => {
-    UpdateState(arrayMoveImmutable(state, oldIndex, newIndex))
-  };
-
-  const deleteItem = (value:any, indexOrder:any) => {
-    UpdateState([].concat(state).filter((item, index) => index !== indexOrder))
-
-  }
-
-  const SortableItem = SortableElement(({ value, sortIndex }:any) => {
-    debugger
-    return <span style={{
-      // height: '100px',
-      padding: '5px 10px',
-      margin: '10px',
-      height: '40px',
-      lineHeight: '30px',
-      flexBasis: '1',
-      border: '1px solid #e8eaee',
-      borderRadius: '5px',
-      cursor: 'pointer',
-    }}>{value} &nbsp; <CloseCircleOutlined onClick={(e) => {
-      deleteItem(value, sortIndex)
-    }} /></span>
-  });
-  
-  const SortableList = SortableContainer(({ items }:any) => {
-    return (
-      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
-        {items.map((value:any, index:any) => (
-          <>
-            {/* @ts-ignore */}
-            <SortableItem key={`item-${value.value}`} sortIndex={index} index={index} value={value.name} />
-          </>
-        ))}
-      </div>
-    );
-  });
-
-  const add = ((item:any) => {
-    UpdateState([...state, item])
-  })
-
-  const formatFormul = () => {
-    if (!fieldList.length || !formul) return '';
-    let res = formul.replace(/\w+/g, (item:any) => {
-      // @ts-ignore
-      return fieldList.filter((inneritem:any) => inneritem.value === item)[0].name
-    })
-
-    return res.replace(/(\{|\})/g, '')
-  }
-
-
-  return (
-    <>
-      <>
-        <Input value={formatFormul()} style={{width: '540px'}} disabled />
-        <Button type="primary" onClick={showModal}>
-          编辑表达式
-        </Button>
-        <Modal title="编辑表达式" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} width={1000}>
-          <div style={{ height: '600px' }}>
-            <Row>
-              <Col span={6}>
-                <div style={{
-                  border: '1px solid #e8eaee',
-                  padding: '10px',
-                  display: 'flex',
-                  justifyContent: 'space-around',
-                  borderRadius: '5px',
-                  flexWrap: 'wrap',
-                  overflow: 'auto',
-                  maxHeight: '600px'
-                }}
-                >
-                  {[...fieldList].map((item:any) => (
-                    <span onClick={() => { add(item) }} style={{
-                      width: '80px',
-                      // height: '100px',
-                      padding: '10px',
-                      margin: '10px 0px',
-                      flexBasis: '1',
-                      border: '1px solid #e8eaee',
-                      borderRadius: '5px',
-                      cursor: 'pointer',
-                    }}>{item.name}</span>
-                  ))}
-                </div>
-              </Col>
-              <Col span={18}>
-                <Row>
-                  <div>
-                    {['+', '-', '*', '/', '(', ')'].map(item => <span onClick={() => { add({name: item, value: item}) }}  style={{
-                      width: '50px',
-                      textAlign: 'center',
-                      display: 'inline-block',
-                      padding: '5px 10px',
-                      margin: '10px',
-                      height: '40px',
-                      lineHeight: '30px',
-                      flexBasis: '1',
-                      border: '1px solid #e8eaee',
-                      borderRadius: '5px',
-                      cursor: 'pointer',
-                    }}>{item}</span>)}
-                  </div>
-                </Row>
-                <Row>
-                  <div style={{
-                    width: '700px',
-                    padding: '10px',
-                    marginLeft: '10px',
-                    flexBasis: '1',
-                    border: '1px solid #e8eaee',
-                    minHeight: '560px'
-                  }}>
-                    {/* @ts-ignore */}
-                    <SortableList distance={20} helperClass="row-dragging" items={state} axis='xy' onSortEnd={onSortEnd} />
-                  </div>
-                </Row>
-              </Col>
-            </Row>
-          </div>
-        </Modal>
-      </>
-    </>
-  );
-};
-
-export default App;
+import { Button, Modal, Row, Col, Input } from 'antd';
+import React, { useState, useEffect } from 'react';
+import { CloseCircleOutlined } from '@ant-design/icons';
+import {
+  SortableContainer,
+  SortableElement,
+  SortableHandle,
+} from 'react-sortable-hoc';
+import { arrayMoveImmutable } from 'array-move';
+import { ModalForm, request } from 'bssula';
+import { judgeIsRequestSuccess } from '@/utils/requestUtils';
+
+
+const App = ({
+  record,
+  setValue,
+  formula
+}:{
+  record:any,
+  setValue:any,
+  formula:any,
+}) => {
+  const [formul, setFormul] = useState(record.formula)
+  const [state, UpdateState]:any = useState([])
+  const [fieldList, UpdateFiedList] = useState([])
+
+  useEffect(() => {
+    request({
+      url: '/basic/flow/businessField/listNoPage',
+      params: {
+        'qp-businessType-eq': record.businessType,
+        'qp-fieldGroup-eq': record.fieldGroup,
+      },
+      converter: ({ response, data }:any) => {
+        if (judgeIsRequestSuccess(response)) {
+          // UpdateFiedList(data.filter(item => item.valueType == 20 || item.valueType == 21 || item.valueType == 22))
+          const resData = data.filter((item:any) => item.inputType != 40 && (item.valueType == 20 || item.valueType == 21 || item.valueType == 22)).map((item:any) => ({value: item.code, name: item.name}))
+          UpdateFiedList(resData)
+          let res:any = [];
+          formul && formul.replace(/(\w+|\+|\-|\*|\/|\(|\))/g, (item:any) => {
+            if (resData.filter((initem:any) => initem.value === item).length) {
+              res = res.concat(resData.filter((initem:any) => initem.value === item))
+            } else {
+              res = res.concat(['+', '-', '*', '/', '(', ')'].filter(initem => initem === item).map(item => ({value: item, name: item})))
+            }
+          })
+
+          UpdateState(res)
+        }
+      }
+    })
+  }, [])
+
+  const [isModalVisible, setIsModalVisible] = useState(false);
+
+  const showModal = () => {
+    setIsModalVisible(true);
+  };
+
+  const handleOk = () => {
+    setIsModalVisible(false);
+    setValue(state);
+    setFormul(state.map((item:any) => {
+      if (['+', '-', '*', '/', '(', ')'].indexOf(item.value) == -1) {
+        return `{${item.value}}`
+      }
+      return item.value;
+    }).join(''))
+  };
+
+  const handleCancel = () => {
+    setIsModalVisible(false);
+  };
+
+
+  const onSortEnd = ({ oldIndex, newIndex }:any) => {
+    UpdateState(arrayMoveImmutable(state, oldIndex, newIndex))
+  };
+
+  const deleteItem = (value:any, indexOrder:any) => {
+    UpdateState([].concat(state).filter((item, index) => index !== indexOrder))
+
+  }
+
+  const SortableItem = SortableElement(({ value, sortIndex }:any) => {
+    debugger
+    return <span style={{
+      // height: '100px',
+      padding: '5px 10px',
+      margin: '10px',
+      height: '40px',
+      lineHeight: '30px',
+      flexBasis: '1',
+      border: '1px solid #e8eaee',
+      borderRadius: '5px',
+      cursor: 'pointer',
+    }}>{value} &nbsp; <CloseCircleOutlined onClick={(e) => {
+      deleteItem(value, sortIndex)
+    }} /></span>
+  });
+
+  const SortableList = SortableContainer(({ items }:any) => {
+    return (
+      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+        {items.map((value:any, index:any) => (
+          <>
+            {/* @ts-ignore */}
+            <SortableItem key={`item-${value.value}`} sortIndex={index} index={index} value={value.name} />
+          </>
+        ))}
+      </div>
+    );
+  });
+
+  const add = ((item:any) => {
+    UpdateState([...state, item])
+  })
+
+  const formatFormul = () => {
+    if (!fieldList.length || !formul) return '';
+    let res = formul.replace(/\w+/g, (item:any) => {
+      // @ts-ignore
+      return fieldList.filter((inneritem:any) => inneritem.value === item)[0].name
+    })
+
+    return res.replace(/(\{|\})/g, '')
+  }
+
+
+  return (
+    <>
+      <>
+        <Input value={formatFormul()} style={{width: '540px'}} disabled />
+        <Button type="primary" onClick={showModal}>
+          编辑表达式
+        </Button>
+        <Modal title="编辑表达式" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} width={1000}>
+          <div style={{ height: '600px' }}>
+            <Row>
+              <Col span={6}>
+                <div style={{
+                  border: '1px solid #e8eaee',
+                  padding: '10px',
+                  display: 'flex',
+                  justifyContent: 'space-around',
+                  borderRadius: '5px',
+                  flexWrap: 'wrap',
+                  overflow: 'auto',
+                  maxHeight: '600px'
+                }}
+                >
+                  {[...fieldList].map((item:any) => (
+                    <span onClick={() => { add(item) }} style={{
+                      width: '80px',
+                      // height: '100px',
+                      padding: '10px',
+                      margin: '10px 0px',
+                      flexBasis: '1',
+                      border: '1px solid #e8eaee',
+                      borderRadius: '5px',
+                      cursor: 'pointer',
+                    }}>{item.name}</span>
+                  ))}
+                </div>
+              </Col>
+              <Col span={18}>
+                <Row>
+                  <div>
+                    {['+', '-', '*', '/', '(', ')'].map(item => <span onClick={() => { add({name: item, value: item}) }}  style={{
+                      width: '50px',
+                      textAlign: 'center',
+                      display: 'inline-block',
+                      padding: '5px 10px',
+                      margin: '10px',
+                      height: '40px',
+                      lineHeight: '30px',
+                      flexBasis: '1',
+                      border: '1px solid #e8eaee',
+                      borderRadius: '5px',
+                      cursor: 'pointer',
+                    }}>{item}</span>)}
+                  </div>
+                </Row>
+                <Row>
+                  <div style={{
+                    width: '700px',
+                    padding: '10px',
+                    marginLeft: '10px',
+                    flexBasis: '1',
+                    border: '1px solid #e8eaee',
+                    minHeight: '560px'
+                  }}>
+                    {/* @ts-ignore */}
+                    <SortableList distance={20} helperClass="row-dragging" items={state} axis='xy' onSortEnd={onSortEnd} />
+                  </div>
+                </Row>
+              </Col>
+            </Row>
+          </div>
+        </Modal>
+      </>
+    </>
+  );
+};
+
+export default App;