资产自定义主题加搜索

src/view/Manage/AssetManage/Component/AssetTable.jsx

@@ -289,22 +289,24 @@ const AssetTable = (props) =>{
           onChange={ onCheckAll } 
         />
         <div>
-          {
-            !readOnly && <Space>
-              <span>资产要素:</span>
-              <Button type="primary" onClick={onImportElementBtnClick}>导入</Button>
-              <Button type="primary" onClick={onExportElementBtnClick}>导出</Button>
-              <Popover 
-                placement="bottom" 
-                content={<FilterElement onCancel={onFilterElementVisibleChange} />} 
-                title='资产要素过滤'
-                visible={filterElementVisible} 
-                onVisibleChange={onFilterElementVisibleChange}
-                trigger="hover">
-                <Button type="primary">过滤</Button>
-              </Popover>
-            </Space>
-          }
+          <Space>
+            <span>资产要素:</span>
+            {
+              !readOnly && <>
+                <Button type="primary" onClick={onImportElementBtnClick}>导入</Button>
+                <Button type="primary" onClick={onExportElementBtnClick}>导出</Button>
+              </>
+            }
+            <Popover 
+              placement="bottom" 
+              content={<FilterElement onCancel={onFilterElementVisibleChange} />} 
+              title='资产要素过滤'
+              visible={filterElementVisible} 
+              onVisibleChange={onFilterElementVisibleChange}
+              trigger="hover">
+              <Button type="primary">过滤</Button>
+            </Popover>
+          </Space>
           <Space className='ml-5'>
             <span>资产:</span>
             {
@@ -339,15 +341,19 @@ const AssetTable = (props) =>{
                           <span title={assetNames[index]||''} style={{ marginLeft:8 }}>{assetNames[index]||''}</span>
                         </div>
                         <Space className='m-3' style={{ marginLeft: 'auto' }} size='small'>
-                          <Tooltip placement='bottom' title={'修改'}>
+                        {
+                          !readOnly && <Tooltip placement='bottom' title={'修改'}>
                             <Button icon={<EditOutlined />} size='small' onClick={() => { editAsset(item); }} />
                           </Tooltip>
+                        }
                           <Tooltip placement='bottom' title={'详情'}>
                             <Button icon={<ReconciliationOutlined />} size='small' onClick={() => { detailAsset(item); }} />
                           </Tooltip>
-                          <Tooltip placement='bottom' title={'删除'}>
+                        {
+                          !readOnly && <Tooltip placement='bottom' title={'删除'}>
                             <Button icon={<DeleteOutlined />} size='small' onClick={() => { deleteAsset(item); }} />
                           </Tooltip>
+                        }
                         </Space>
                       </div>
                       <Divider />

src/view/Manage/AssetManage/Component/CustomDirectoryModal.jsx

@@ -13,7 +13,9 @@ import { showMessage } from '../../../../util';
 const CustomDirectoryModal = (props) => {
   const { visible, onCancel, action, dirId } = props;
 
+  const [ keyword, setKeyword ] = useState('');
   const [ data, setData ] = useState([]);
+  const [ filterData, setFilterData ] = useState([]);
   const [ previewTreeData, setPreviewTreeData ] = useState({});
   const [ checkedValues, setCheckedValues ] = useState([]);
   const [ checkedData, setCheckedData ] = useState([]);
@@ -43,6 +45,7 @@ const CustomDirectoryModal = (props) => {
       type: 'assetmanage.listCustomElements',
       callback: elements => {
         setData(elements||[]);
+        setFilterData((elements||[]).filter(item => (item.name||'').indexOf(keyword)!==-1));
         if (action === 'edit') {
           getCurrentDirectory(elements||[]);
         }
@@ -59,7 +62,7 @@ const CustomDirectoryModal = (props) => {
       callback: data => {
         setCheckedValues(data.elementIds||[]);
         form.setFieldsValue({ name: data.name||'', desc: data.desc||'' });
-        onChange(data.elementIds||[], elements);
+        onCheckboxChange(data.elementIds||[], elements);
       }
     })
   }
@@ -76,7 +79,12 @@ const CustomDirectoryModal = (props) => {
     })
   }
 
-  const onChange = (checkedValues, elements = data) => {
+  const onSearchChange = (e) => {
+    setKeyword(e.target.value);
+    setFilterData((data||[]).filter(item => (item.name||'').indexOf(e.target.value)!==-1));
+  }
+
+  const onCheckboxChange = (checkedValues, elements = data) => {
     setCheckedValues(checkedValues);
     const _checkedData = [];
 
@@ -93,6 +101,7 @@ const CustomDirectoryModal = (props) => {
 
   const reset = () => {
     setConfirmLoading(false);
+    setKeyword('');
     setCheckedValues([]);
     setCheckedData([]);
     setPreviewTreeData({});
@@ -160,7 +169,7 @@ const CustomDirectoryModal = (props) => {
     const index = newCheckedValues.indexOf(id);
     if (index !== -1) {
       newCheckedValues.splice(index, 1);
-      onChange(newCheckedValues);
+      onCheckboxChange(newCheckedValues);
     }
   }
   
@@ -192,10 +201,16 @@ const CustomDirectoryModal = (props) => {
       <Row gutter={30}>
         <Col span={8} style={{ borderRight: '1px solid #EFEFEF' }}>
           <div className='mb-3'>资产要素</div>
+          <Input  
+            value={keyword}
+            placeholder='请输入资产要素'
+            style={{ marginBottom:10 }} 
+            onChange={(e) => { onSearchChange(e) }}
+          />
           <div style={{ maxHeight: 500, overflow: 'auto' }}>
-            <Checkbox.Group value={checkedValues} onChange={onChange}>
+            <Checkbox.Group value={checkedValues} onChange={onCheckboxChange}>
             {
-              (data||[]).map((item, index) => {
+              (filterData||[]).map((item, index) => {
                 return (
                   <Row key={index}>
                     <Checkbox value={item.id||''}>{item.name||''}</Checkbox>