数据类型配置

src/service/datamodeler.js

-import { PostFile, GetJSON, PostJSON, Post, Get, Delete } from "../util/axios"
+import { PostFile, GetJSON, PostJSON, Post, Get, Delete, Delete1 } from "../util/axios"
 
 export function loadDataModelCatalog() {
   return GetJSON("/datamodeler/easyDataModelerCURD/loadDataModelCatalog");
@@ -531,7 +531,7 @@ export function addDataTypeConfig(payload) {
 }
 
 export function batchDeleteDataTypeConfig(payload) {
-  return Delete("/datamodeler/easyDataModelerColumnDataType/dels", payload)
+  return Delete1("/datamodeler/easyDataModelerColumnDataType/dels", payload)
 }
 
 export function getDataTypeConfigs() {

src/util/axios.js

@@ -127,6 +127,16 @@ export function Delete(url, params) {
   )
 }
 
+export function Delete1(url, payload) {
+  const { params = null, data = null } = payload||{};
+  const cancelToken = __source ? __source.token : null;
+  return instance.delete(url, {
+    params, data, cancelToken,
+  }).then(
+    callback
+  )
+}
+
 export function PostJSON(url, payload) {
   const { params = null, data = null } = payload||{};
   const cancelToken = __source ? __source.token : null;

src/view/Manage/DataTypeConfig/index.jsx

 import React from "react"
-import { Tooltip, Typography, Button } from 'antd'
+import { Tooltip, Typography, Button, Modal } from 'antd'
 
 import { dispatch } from '../../../model'
 import Table from '../../../util/Component/Table'
+import UpdateConfig from './update-config'
 
 import '../AssetTask/index.less'
+import { showMessage } from "../../../util"
 
 const FC = (props) => {
   const [loading, setLoading] = React.useState(false)
   const [data, setData] = React.useState()
+  const [updateConfigParams, setUpdateConfigParams] = React.useState({
+    visible: false,
+    type: undefined,
+    item: undefined,
+  })
+  const [modal, contextHolder] = Modal.useModal()
 
   const cols = [
     {
@@ -35,10 +43,10 @@ const FC = (props) => {
         ) {
           text = '长度: '
           if (record.lengthMinValue!==null && record.lengthMinValue!==undefined) {
-            text = `${text} 大于${record.lengthMinValue}`
+            text = `${text} 大于${record.lengthMinValue-1}`
           }
           if (record.lengthMaxValue!==null && record.lengthMaxValue!==undefined) {
-            text = `${text} 小于${record.lengthMaxValue}`
+            text = `${text} 小于${record.lengthMaxValue+1}`
           } 
         }
 
@@ -51,10 +59,10 @@ const FC = (props) => {
           text = text?`${text}; `:''
           text = `${text}精度: `
           if (record.precisionMinValue!==null && record.precisionMinValue!==undefined) {
-            text = `${text} 大于${record.precisionMinValue}`
+            text = `${text} 大于${record.precisionMinValue-1}`
           }
           if (record.precisionMaxValue!==null && record.precisionMaxValue!==undefined) {
-            text = `${text} 小于${record.precisionMaxValue}`
+            text = `${text} 小于${record.precisionMaxValue+1}`
           } 
         }
 
@@ -103,15 +111,40 @@ const FC = (props) => {
   }
 
   const onAddClick = () => {
-
+    setUpdateConfigParams({
+      visible: true,
+      type: 'add',
+      item: undefined,
+    })
   }
 
   const onRightMenuItemClick = (key, record) => {
     if (key === '编辑') {
-
+      setUpdateConfigParams({
+        visible: true,
+        type: 'edit',
+        item: record,
+      })
     }
     if (key === '删除') {
-
+      modal.confirm({
+        title:'提示',
+        content: '您确定要删除该配置吗?',
+        okText: '确认',
+        cancelText: '取消',
+        onOk: () => {
+          dispatch({
+            type: 'datamodel.batchDeleteDataTypeConfig',
+            payload: {
+              data: [record?.id]
+            },
+            callback: data => {
+              showMessage('success', '删除成功')
+              getDataTypeConfigs() 
+            }
+          })
+        }
+      })
     }
   }
 
@@ -135,6 +168,19 @@ const FC = (props) => {
           onMenuItemClick={onRightMenuItemClick}
         />
       </div>
+      <UpdateConfig
+        {...updateConfigParams}
+        onCancel={(refresh) => {
+          setUpdateConfigParams({
+            visible: false,
+            type: undefined,
+            item: undefined,
+          })
+
+          refresh && getDataTypeConfigs()
+        }}
+      />
+      {contextHolder}
     </div>
   )
 }

src/view/Manage/DataTypeConfig/update-config.jsx

+import React from 'react'
+import { Button, Modal, Form, Select, Checkbox, Row, Col, Spin, Space, InputNumber } from 'antd'
+
+import { dispatch } from '../../../model'
+
+const FC = (props) => {
+  const { visible, type, item, onCancel } = props
+  const [waiting, setWaiting] = React.useState(false)
+
+  const basicFormRef = React.useRef()
+
+  const title = React.useMemo(() => {
+    if (type === 'add') return '新增数据类型'
+    if (type === 'edit') return '修改数据类型'
+
+    return ''
+  }, [type])
+
+  const close = (refresh = false) => {
+    setWaiting(false)
+    onCancel?.(refresh)
+  }
+
+  const save = async () => {
+    try {
+      const basicRows = await basicFormRef.current?.validate()
+      console.log('basic rows', basicRows)
+
+      setWaiting(true)
+      if (type === 'add') {
+        dispatch({
+          type: 'datamodel.addDataTypeConfig',
+          payload: {
+            data: basicRows
+          },
+          callback: () => {
+            close(true)
+          },
+          error: () => {
+            setWaiting(false)
+          }
+        })
+      } else {
+        dispatch({
+          type: 'datamodel.addDataTypeConfig',
+          payload: {
+            data: {
+              ...item, 
+              ...basicRows,
+            }
+          },
+          callback: () => {
+            close(true)
+          },
+          error: () => {
+            setWaiting(false)
+          }
+        })
+      }
+    } catch (e) {
+      
+    }
+  }
+
+  const footer = React.useMemo(() => {
+    return [
+      <Button key={'cancel'}
+        onClick={() => close()}
+      >取消</Button>,
+      <Button key={'save'} type='primary'
+        disabled={waiting}
+        onClick={() => save()}
+      >保存</Button>
+    ]
+  }, [close, save, waiting])
+
+  return (
+    <Modal
+      visible={visible}
+      footer={footer}
+      width={900}
+      bodyStyle={{ padding: '15px', overflowX: 'auto', maxHeight: '80vh' }}
+      title={title}
+      centered destroyOnClose
+      onCancel={() => { close() }}
+    >
+      <Spin spinning={waiting}>
+        <BasicForm ref={basicFormRef} type={type} item={item} />
+      </Spin>
+    </Modal>
+  )
+}
+
+export default FC
+
+const BasicForm = React.forwardRef(function ({ type, item }, ref) {
+  const [loadingStandardTypes, setLoadingStandardTypes] = React.useState(false)
+  const [standardTypes, setStandardTypes] = React.useState()
+  const [loadingDbTypes, setLoadingDbTypes] = React.useState(false)
+  const [dbTypes, setDbTypes] = React.useState()
+  const [loadingColumnTypes, setLoadingColumnTypes] = React.useState(false)
+  const [columnTypes, setColumnTypes] = React.useState()
+  const [lengthMin, setLengthMin] = React.useState(Number.MIN_SAFE_INTEGER)
+  const [lengthMax, setLengthMax] = React.useState(Number.MAX_SAFE_INTEGER)
+  const [precisionMin, setPrecisionMin] = React.useState(Number.MIN_SAFE_INTEGER)
+  const [precisionMax, setPrecisionMax] = React.useState(Number.MAX_SAFE_INTEGER)
+
+  const [form] = Form.useForm()
+
+  React.useImperativeHandle(ref, () => ({
+    validate: async () => {
+      const rows = await form.validateFields() 
+      if (rows.standardTypeId) {
+        const index = (standardTypes??[]).findIndex(item => item.id === rows.standardTypeId)
+        if (index !== -1) {
+          rows.standardType = standardTypes[index]
+        }
+      }
+
+      return rows
+    },
+  }), [form, standardTypes])
+
+  const marginBottom = React.useMemo(() => {
+    return 15
+  }, [type])
+
+  React.useEffect(() => {
+    getStandardTypes()
+    getSupportDBTypes()
+
+    if (item) {
+      if (item.dbType) {
+        getColumnTypes(item?.dbType)
+      }
+
+      if (item.lengthMinValue!==null && item.lengthMinValue!==undefined) {
+        setLengthMin(item.lengthMinValue)
+      }
+      if (item.lengthMaxValue!==null && item.lengthMaxValue!==undefined) {
+        setLengthMax(item.lengthMaxValue)
+      }
+      if (item.precisionMinValue!==null && item.precisionMinValue!==undefined) {
+        setPrecisionMin(item.precisionMinValue)
+      }
+      if (item.precisionMaxValue!==null && item.precisionMaxValue!==undefined) {
+        setPrecisionMax(item.precisionMaxValue)
+      }
+    }
+  }, [])
+
+  React.useEffect(() => {
+    if (item) {
+      form?.setFieldsValue({
+        ...item, 
+        standardTypeId: item.standardType?.id,
+      })
+    }
+  }, [item])
+
+  const getStandardTypes = () => {
+    setLoadingStandardTypes(true)
+    dispatch({
+      type: 'datamodel.getStandardTypes',
+      callback: data => {
+        setLoadingStandardTypes(false)
+        setStandardTypes(data)
+      },
+      error: () => {
+        setLoadingStandardTypes(false)
+      }
+    })
+  }
+
+  const getSupportDBTypes = () => {
+    setLoadingDbTypes(true)
+    dispatch({
+      type: 'datamodel.getSupportDBTypes',
+      callback: data => {
+        setLoadingDbTypes(false)
+        setDbTypes(data)
+      },
+      error: () => {
+        setLoadingDbTypes(false)
+      }
+    })
+  }
+
+  const getColumnTypes = (dbType) => {
+    setLoadingColumnTypes(true)
+    dispatch({
+      type: 'datamodel.getColumnTypes',
+      payload: {
+        dbType,
+      },
+      callback: data => {
+        setLoadingColumnTypes(false)
+        setColumnTypes(data)
+      },
+      error: () => {
+        setLoadingColumnTypes(false)
+      }
+    })
+  }
+
+  const onValuesChange = (changedValues, allValues) => {
+
+  }
+
+  return (
+    <Form
+      form={form}
+      labelCol={{ span: 4 }}
+      wrapperCol={{ span: 20 }}
+      autoComplete="off"
+      onValuesChange={onValuesChange}
+    >
+      <Form.Item
+        label="标准数据类型"
+        name="standardTypeId"
+        style={{ marginBottom }}
+        rules={[{ required: true, message: '请选择标准数据类型!' }]}
+      >
+        <Select 
+          placeholder='请选择标准数据类型' 
+          loading={loadingStandardTypes}
+          allowClear
+        >
+          {standardTypes?.map(item => <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>)}
+        </Select>
+      </Form.Item>
+      <Form.Item
+        label="长度配置"
+        style={{ marginBottom }}
+      >
+        <Space>
+          <Form.Item name='lengthSelected' valuePropName='checked' noStyle>
+            <Checkbox />
+          </Form.Item>
+          <Form.Item name='lengthMinValue' noStyle>
+            <InputNumber max={lengthMax} placeholder='最小值' onChange={(val) => {
+              if (val!==null && val!==undefined) {
+                setLengthMin(val)
+              } else {
+                setLengthMin(Number.MIN_SAFE_INTEGER)
+              }
+            }} />
+          </Form.Item>
+          <Form.Item name='lengthMaxValue' noStyle>
+            <InputNumber min={lengthMin} placeholder='最大值' onChange={(val) => {
+              if (val!==null && val!==undefined) {
+                setLengthMax(val)
+              } else {
+                setLengthMax(Number.MAX_SAFE_INTEGER)
+              }
+            }} />
+          </Form.Item>
+        </Space>
+      </Form.Item>
+      <Form.Item
+        label="精度配置"
+        style={{ marginBottom }}
+      >
+        <Space>
+          <Form.Item name='precisionSelected' valuePropName='checked' noStyle>
+            <Checkbox />
+          </Form.Item>
+          <Form.Item name='precisionMinValue' noStyle>
+            <InputNumber max={precisionMax} placeholder='最小值' onChange={(val) => {
+              if (val!==null && val!==undefined) {
+                setPrecisionMin(val)
+              } else {
+                setPrecisionMin(Number.MIN_SAFE_INTEGER)
+              }
+            }} />
+          </Form.Item>
+          <Form.Item name='precisionMaxValue' noStyle>
+            <InputNumber min={precisionMin} placeholder='最大值' onChange={(val) => {
+              if (val!==null && val!==undefined) {
+                setPrecisionMax(val)
+              } else {
+                setPrecisionMax(Number.MAX_SAFE_INTEGER)
+              }
+            }} />
+          </Form.Item>
+        </Space>
+      </Form.Item>
+      <Form.Item
+        label="数据库类型"
+        name="dbType"
+        style={{ marginBottom }}
+        rules={[{ required: true, message: '请选择数据库类型' }]}
+      >
+        <Select 
+          placeholder='请选择数据库类型' 
+          loading={loadingDbTypes}
+          onChange={(val) => {
+            if (val) {
+              getColumnTypes(val)
+            } else {
+              setColumnTypes()
+            }
+          }}
+          allowClear
+        >
+          {dbTypes?.map(item => <Select.Option key={item} value={item}>{item}</Select.Option>)}
+        </Select>
+      </Form.Item>
+      <Form.Item
+        label="数据类型"
+        name="columnTypeSelectedList"
+        style={{ marginBottom }}
+        rules={[{ required: true, message: '请选择数据类型' }]}
+      >
+        <Checkbox.Group>
+          <Spin spinning={loadingColumnTypes}>
+            <Row>
+            {
+              columnTypes?.map((item, index) => (
+                <Col key={index} span={8}>
+                  <Checkbox value={item}
+                    style={{
+                      lineHeight: '32px',
+                    }}
+                  >
+                    {item}
+                  </Checkbox>
+                </Col>
+              ))
+            }
+            </Row>
+          </Spin>
+        </Checkbox.Group>
+      </Form.Item>
+    </Form>
+  )
+})
\ No newline at end of file