模型筛选

src/model/datamodel.js

@@ -470,4 +470,12 @@ export function* uploadCommentFile(payload) {
 
 export function* deleteCommentFile(payload) {
   return yield call(datamodelerService.deleteCommentFile, payload)
+}
+
+export function* getSearchProperties() {
+  return yield call(datamodelerService.getSearchProperties)
+}
+
+export function* searchModelBySearchProperties(payload) {
+  return yield call(datamodelerService.searchModelBySearchProperties, payload)
 }
\ No newline at end of file

src/service/datamodeler.js

@@ -422,4 +422,12 @@ export function uploadCommentFile(payload) {
 
 export function deleteCommentFile(payload) {
   return Delete("/datamodelercomment/file/del", payload) 
+}
+
+export function getSearchProperties() {
+  return GetJSON("/datamodeler/easyDataModelerCURD/getModelSearchProperties")
+}
+
+export function searchModelBySearchProperties(payload) {
+  return GetJSON("/datamodeler/easyDataModelerCURD/searchEasyDataModelerDataModelsByModelSearchProperties", payload);
 }
\ No newline at end of file

src/view/Manage/Model/Component/select-search-properties.jsx

+import React from 'react'
+import { Modal, Button, Select, Space, Input, Tooltip } from 'antd'
+import produce from 'immer'
+
+import { dispatch } from '../../../../model'
+import { draft } from '../../../../service/datamodeler'
+import Table from '../../../../util/Component/Table'
+import { showMessage } from '../../../../util'
+
+const FC = (props) => {
+  const { visible, onCancel } = props
+  const basicRef = React.useRef()
+
+  const close = (searchProperties = null) => {
+    onCancel?.(searchProperties)
+  }
+
+  const save = () => {
+    const searchProperties = basicRef.current.searchProperties
+    if ((searchProperties??[]).length === 0) {
+      showMessage('warn', '请先添加筛选条件')
+      return
+    }
+
+    close(searchProperties)
+  }
+
+  const footer = React.useMemo(() => {
+    return [
+      <Button key={'cancel'}
+        onClick={() => close()}
+      >取消</Button>,
+      <Button key={'save'} type='primary'
+        onClick={() => save()}
+      >确定</Button>
+    ]
+  }, [close, save])
+
+  return (
+    <Modal
+      width={800}
+      visible={visible}
+      footer={footer}
+      bodyStyle={{ padding: '15px', overflowX: 'auto', minHeight: '60vh', maxHeight: '80vh' }}
+      centered destroyOnClose 
+      maskClosable={false}
+      closable={false}
+      onCancel={() => { close() }}
+    >
+      <Basic ref={basicRef} />
+    </Modal>
+  )
+}
+
+export default FC
+
+export const Basic = React.forwardRef(function ({}, ref) {
+  const [loading, setLoading] = React.useState(false)
+  const [properties, setProperties] = React.useState()
+  const [currentProperty, setCurrentProperty] = React.useState()
+  const [currentPropertyMatchType, setCurrentPropertyMatchType] = React.useState()
+  const [currentPropertyMatchValue, setCurrentPropertyMatchValue] = React.useState()
+  const [tableData, setTableData] = React.useState()
+
+  React.useImperativeHandle(ref, () => ({
+    searchProperties: tableData,
+  }), [tableData])
+
+  React.useEffect(() => {
+    getProperties()
+  }, [])
+
+  const onDeleteClick = (index) => {
+    setTableData(prevTableData => {
+      const newTableData = [...prevTableData||[]]
+      newTableData.splice(index, 1);
+      return newTableData
+    })
+  }
+
+  const cols = React.useMemo(() => {
+    return ([
+      {
+        title: '筛选属性',
+        dataIndex: 'cnName',
+      },
+      {
+        title: '筛选方式',
+        dataIndex: 'matchType',
+      },
+      {
+        title: '值',
+        dataIndex: 'valueName',
+      },
+      {
+        title: '操作',
+        dataIndex: 'action',
+        width: 80,
+        render: (_, __ ,index) => <a onClick={() => {onDeleteClick(index)}}>删除</a>
+      }
+    ])
+  }, [onDeleteClick])
+
+  const getProperties = () => {
+    setLoading(true)
+    dispatch({
+      type: 'datamodel.getSearchProperties',
+      callback: data => {
+        setLoading(false)
+        setProperties(data)
+        if ((data??[]).length > 0) {
+          setCurrentProperty(data[0])
+          if ((data[0].supportedMatchTypes??[]).length > 0) {
+            setCurrentPropertyMatchType(data[0].supportedMatchTypes[0])
+          }
+        }
+      },
+      error: () => {
+        setLoading(false)
+      }
+    }) 
+  }
+
+  const onPropertyChange = (value) => {
+    const index = (properties??[]).findIndex(item => item.name === value)
+    if (index !== -1) {
+      setCurrentProperty(properties[index])
+      if ((properties[index].supportedMatchTypes??[]).length > 0) {
+        setCurrentPropertyMatchType(properties[index].supportedMatchTypes[0])
+        setCurrentPropertyMatchValue()
+      }
+    }
+  }
+
+  const onPropertyMatchTypeChange = (value) => {
+    const index = (currentProperty?.supportedMatchTypes??[]).findIndex(item => item.type === value)
+    if (index !== -1) {
+      setCurrentPropertyMatchType(currentProperty?.supportedMatchTypes[index])
+      setCurrentPropertyMatchValue()
+    }
+  }
+
+  const onPropertyMatchValueChange = (value) => {
+    setCurrentPropertyMatchValue(value)
+  }
+
+  const onAddClick = () => {
+    const newProperty = produce(currentProperty, (draft) => {
+      draft.matchType = currentPropertyMatchType?.type
+      draft.value = currentPropertyMatchValue
+
+      draft.valueName = currentPropertyMatchValue
+      if (draft.valueType === 'List<String>') {
+        draft.valueName = (draft.selectItems??[]).filter(item => (currentPropertyMatchValue??[]).indexOf(item.id) !== -1).map(item => item.name).toString()
+      }
+    })
+
+    setTableData(prevTableData => {
+      const newTableData = [...prevTableData||[]]
+      const index = newTableData.findIndex(item => item.name === newProperty.name)
+      if (index === -1) {
+        newTableData.push(newProperty)
+      } else {
+        newTableData.splice(index, 1, newProperty);
+      }
+
+      return newTableData
+    })
+  }
+
+  const onClearClick = () => {
+    setTableData()
+  }
+
+  return (
+    <div>
+      <div className='flex' style={{ justifyContent: 'space-between' }}>
+        <Space>
+          <Select loading={loading}
+            value={currentProperty?.name}
+            onChange={onPropertyChange}
+            placeholder='请选择筛选属性'
+            style={{ width: 120 }} 
+          >
+            { 
+              (properties??[]).map((item, index) => (
+                <Select.Option key={index} value={item.name}>{item.cnName}</Select.Option>
+              )) 
+            }
+          </Select>
+          <Select 
+            value={currentPropertyMatchType?.type}
+            onChange={onPropertyMatchTypeChange}
+            placeholder='请选择筛选方式'
+            style={{ width: 120 }} 
+          >
+            { 
+              (currentProperty?.supportedMatchTypes??[]).map((item, index) => (
+                <Select.Option key={index} value={item.type}>{item.name}</Select.Option>
+              )) 
+            }
+          </Select>
+          {
+            (currentProperty?.valueType === 'List<String>') && <Select mode='multiple' value={currentPropertyMatchValue}   
+              onChange={(value) => {
+                onPropertyMatchValueChange(value)
+              }}
+              placeholder='请选择搜索值'
+              style={{ width: 200 }} 
+              maxTagCount='responsive'
+            >
+              {
+                (currentProperty?.selectItems??[]).map((item, index) => (
+                  <Select.Option key={index} value={item.id}>{item.name}</Select.Option>
+                )) 
+              }
+            </Select>
+          }
+          {
+            (currentProperty?.valueType === 'String') && <Input 
+              value={currentPropertyMatchValue}
+              placeholder='搜索值'
+              onChange={(e) => {
+                onPropertyMatchValueChange(e.target.value)
+              }} 
+              style={{ width: 200 }} 
+            />
+          }
+          <Tooltip title={currentPropertyMatchValue?'':'请先输入搜索值'}>
+            <Button onClick={onAddClick} disabled={!currentPropertyMatchValue}>添加</Button>
+          </Tooltip>
+        </Space>
+        <Space>
+          <a onClick={onClearClick}>清空筛选</a>
+        </Space>
+      </div>
+      <div className='mt-3'>
+        <Table columns={cols} dataSource={tableData??[]} pagination={false} />
+      </div>
+    </div>
+  )
+})
\ No newline at end of file

src/view/Manage/Model/index.jsx

@@ -21,6 +21,7 @@ import { AppContext } from '../../../App';
 import DebounceInput from './Component/DebounceInput';
 import ColSettingModal from './Component/ColSettingModal';
 import PermissionButton from '../../../util/Component/PermissionButton';
+import SelectSearchProperties from './Component/select-search-properties';
 
 import './index.less';
 
@@ -65,6 +66,7 @@ class Model extends React.Component {
       canChangeCatalog: false,
       canDelete: false,
       permissions: [],
+      selectSearchPropertiesVisible: false,
     }
   }
   
@@ -281,6 +283,10 @@ class Model extends React.Component {
     });
   }
 
+  onSearchPropertiesClick = () => {
+    this.setState({ selectSearchPropertiesVisible: true })
+  }
+
   onImportUnconditionBtnClick = () => {
     const { catalogId, currentView } = this.state;
 
@@ -658,7 +664,7 @@ class Model extends React.Component {
                   style={{ width: inputWidth, marginLeft: 'auto' }}
                 />
               </Space>
-
+              <Button onClick={this.onSearchPropertiesClick}>筛选</Button>
             </Space>
 
           </div>
@@ -743,6 +749,16 @@ class Model extends React.Component {
           visible={colSettingModalVisible}
           onCancel={this.onColSettingModalCancel}
         />
+
+        <SelectSearchProperties
+          visible={this.state.selectSearchPropertiesVisible}
+          onCancel={(searchProperties) => {
+            this.setState({ selectSearchPropertiesVisible: false })
+            if ((searchProperties??[]).length > 0) {
+              
+            }
+          }}
+        />
       </div>
       }
       </AppContext.Consumer>