| | |
| | | import { CloseOutlined } from '@ant-design/icons'; |
| | | import './index.less'; |
| | | import * as $$ from '../../utils/utility'; |
| | | import { Modal } from '@arco-design/web-react'; |
| | | import { Modal, Spin } from '@arco-design/web-react'; |
| | | |
| | | const { Search } = Input; |
| | | |
| | | const txtMap = { |
| | | dept: '部门', |
| | | person: '人', |
| | | unit: '组织' |
| | | } |
| | | |
| | | // 获取人员,组织,部门数据 |
| | | function getDataApi(type, searchData) { |
| | |
| | | * onOk, // 点击确定的回调 |
| | | */ |
| | | const SelectObjModal = ({ visible = false, checkKeys = [], type = 'dept', isCheckbox = false, searchData = {}, onClose, onOk, }) => { |
| | | const nameStr = type === 'person' ? '人员' : type === 'unit' ? '组织' : '部门'; |
| | | const nameStr = txtMap[type]; |
| | | // 默认调解员查询'22_00024-4' |
| | | const searchRole = type === 'person' ? { roleCode: '22_00024-4' } : {}; |
| | | const [data, setData] = useState([]); |
| | |
| | | const [searchValue, setSearchValue] = useState(''); |
| | | const [autoExpandParent, setAutoExpandParent] = useState(true); |
| | | const [dataList, setDataList] = useState([]); |
| | | const [loading, setLoading] = useState(false); |
| | | |
| | | useEffect(() => { |
| | | if (!visible) return; |
| | | // 获取数据 |
| | | async function getData() { |
| | | // global.setSpinning(true); |
| | | setLoading(true) |
| | | const res = await getDataApi(type, { ...searchRole, ...searchData }); |
| | | // global.setSpinning(false); |
| | | setLoading(false) |
| | | if (res.type) { |
| | | setData(res.data || []); |
| | | } |
| | |
| | | <Search placeholder={`查询${nameStr}名称`} onChange={(e) => handleSearch(e.target.value, dataList)} /> |
| | | </div> |
| | | <div className="selectObjModal-left-main"> |
| | | {data.length > 0 ? ( |
| | | <Tree |
| | | checkable |
| | | checkStrictly |
| | | defaultExpandAll |
| | | onExpand={(newExpandedKeys) => { |
| | | setExpandedKeys(newExpandedKeys); |
| | | setAutoExpandParent(false); |
| | | }} |
| | | expandedKeys={expandedKeys} |
| | | autoExpandParent={autoExpandParent} |
| | | selectable={false} |
| | | onCheck={(checkedKeys, e) => handleCheck(checkedKeys, e)} |
| | | checkedKeys={checkedKeys.keys} |
| | | treeData={treeData} |
| | | fieldNames={{ title: 'label', key: 'value' }} |
| | | height={400} |
| | | /> |
| | | ) : ( |
| | | $$.MyEmpty() |
| | | )} |
| | | <Spin loading={loading} style={{ width: '100%', height: '100%' }}> |
| | | {data.length > 0 ? ( |
| | | <Tree |
| | | checkable |
| | | checkStrictly |
| | | defaultExpandAll |
| | | onExpand={(newExpandedKeys) => { |
| | | setExpandedKeys(newExpandedKeys); |
| | | setAutoExpandParent(false); |
| | | }} |
| | | expandedKeys={expandedKeys} |
| | | autoExpandParent={autoExpandParent} |
| | | selectable={false} |
| | | onCheck={(checkedKeys, e) => handleCheck(checkedKeys, e)} |
| | | checkedKeys={checkedKeys.keys} |
| | | treeData={treeData} |
| | | fieldNames={{ title: 'label', key: 'value' }} |
| | | height={400} |
| | | /> |
| | | ) : ( |
| | | $$.MyEmpty() |
| | | )} |
| | | </Spin> |
| | | </div> |
| | | </div> |
| | | <div className="selectObjModal-right"> |
| | |
| | | </div> |
| | | </div> |
| | | <div className="selectObjModal-footer"> |
| | | <div>已选中:{checkedKeys.keys.length}人</div> |
| | | <div>已选中:{checkedKeys.keys.length}{txtMap[type]}</div> |
| | | <Space size="middle"> |
| | | <Button onClick={onClose}>取消</Button> |
| | | <Button type="primary" onClick={() => onOk && onOk(checkedKeys)}> |