From 74960e7d4f3042fb9e0ec54af823a360d4aa2bbe Mon Sep 17 00:00:00 2001 From: liuwh <964324856@qq.com> Date: Tue, 17 Sep 2024 17:17:45 +0800 Subject: [PATCH] 提交 --- gz-customerSystem/src/components/NewTableSearch/index.jsx | 149 ++++++++++++++++++++++++++----------------------- 1 files changed, 80 insertions(+), 69 deletions(-) diff --git a/gz-customerSystem/src/components/NewTableSearch/index.jsx b/gz-customerSystem/src/components/NewTableSearch/index.jsx index 5e8a818..e08aa71 100644 --- a/gz-customerSystem/src/components/NewTableSearch/index.jsx +++ b/gz-customerSystem/src/components/NewTableSearch/index.jsx @@ -18,7 +18,7 @@ * handleSearch, // 搜索 * exportButton //导出按钮 */ -const NewTableSearch = ({ form, itemData, labelLength = 5, rowNum = 3, handleReset, handleSearch, exportButton }) => { +const NewTableSearch = ({ form, itemData, labelLength = 5, rowNum = 3, handleReset, handleSearch, exportButtonShow = true, exportButton }) => { const [searchMore, setSearchMore] = useState(false); const span = 24 / rowNum; @@ -60,80 +60,91 @@ return ( <Form form={form} labelAlign="right" className="tableSearch"> - - {itemData.map((x, t) => { - let placeholder = x.placeholder || setPlaceholder(x.name, x.type); - let allowClear = x.allowClear || true; - let dom = null; - let rules = {}; - if (x.type === 'Input') { - dom = <Input placeholder={placeholder} allowClear {...x} />; - rules = { max: x.max || 32, message: '搜索内容过长' }; - } - if (x.type === 'Select') { - dom = ( - <Select allowClear placeholder={placeholder} {...x}> - {x.selectdata?.map((y) => ( - <Option key={y.value}>{y.label}</Option> - ))} - </Select> - ); - } - if (x.type === 'RangePicker') { - rules = { type: 'array' }; - dom = ( - <RangePicker - style={{ width: '100%' }} - ranges={{ - '今日': [$$.myMoment(), $$.myMoment()], - '本月': [$$.myMoment().startOf('month'), $$.myMoment().endOf('month')], - }} - allowClear - {...x} - /> - ); - } - if (x.type === 'TreeSelect') { - dom = ( - <TreeSelect - showSearch - placeholder={placeholder} - dropdownStyle={{ maxHeight: 500, overflow: 'auto' }} - treeData={x.treedata} - treeDefaultExpandAll - allowClear - filterTreeNode={(inputValue, treeNode) => (treeNode.label.indexOf(inputValue) !== -1 ? true : false)} - {...x} - /> - ); - } - return ( - <Row className='tableSearch-searchMore-row' gutter={[24, 16]} style={display && { display: searchMore ? 'block' : t < lineNum ? 'block' : 'none' }}> - <Col span={x.span || 8} key={t + 1}> - <Form.Item name={x.name} rules={[rules]} label={<div style={{ width: `${fontSize * labelLength}px` }}>{x.label}</div>}> - {dom} - </Form.Item> + <Row className='tableSearch-searchMore-row' gutter={[24, 16]} > + {itemData.map((x, t) => { + let placeholder = x.placeholder || setPlaceholder(x.name, x.type); + let allowClear = x.allowClear || true; + let dom = null; + let rules = {}; + if (x.type === 'Input') { + dom = <Input placeholder={placeholder} allowClear {...x} />; + rules = { max: x.max || 32, message: '搜索内容过长' }; + } + if (x.type === 'Select') { + dom = ( + <Select allowClear placeholder={placeholder} {...x}> + {x.selectdata?.map((y) => ( + <Option key={y.value}>{y.label}</Option> + ))} + </Select> + ); + } + if (x.type === 'RangePicker') { + rules = { type: 'array' }; + dom = ( + <RangePicker + style={{ width: '100%' }} + ranges={{ + '今日': [$$.myMoment(), $$.myMoment()], + '本月': [$$.myMoment().startOf('month'), $$.myMoment().endOf('month')], + }} + allowClear + {...x} + /> + ); + } + if (x.type === 'TreeSelect') { + dom = ( + <TreeSelect + showSearch + placeholder={placeholder} + dropdownStyle={{ maxHeight: 500, overflow: 'auto' }} + treeData={x.treedata} + treeDefaultExpandAll + allowClear + filterTreeNode={(inputValue, treeNode) => (treeNode.label.indexOf(inputValue) !== -1 ? true : false)} + {...x} + /> + ); + } + if (x.type === 'null') { + dom = ( + <Col span={x.span || 8}></Col> + ); + } + return ( + <Col span={x.span || 8} style={display && { display: searchMore ? 'block' : t < lineNum ? 'block' : 'none' }} key={t + 1}> + { + x.type === 'null' ? <>{ dom }</> : + <Form.Item name={x.name} rules={[rules]} label={<div style={{ width: `${fontSize * labelLength}px` }}>{x.label}</div>}> + {dom} + </Form.Item> + } </Col> - </Row> - // <div> - // <Col span={8} style={display && { display: searchMore ? 'block' : t < lineNum ? 'block' : 'none' }} key={t + 1}> - // <Form.Item name={x.name} rules={[rules]} label={<div style={{ width: `${fontSize * labelLength}px` }}>{x.label}</div>}> - // {dom} - // </Form.Item> - // </Col> - // <Col span={8}></Col> - // <Col span={8}></Col> - // </div> - ); - })} + // <div> + // <Col span={8} style={display && { display: searchMore ? 'block' : t < lineNum ? 'block' : 'none' }} key={t + 1}> + // <Form.Item name={x.name} rules={[rules]} label={<div style={{ width: `${fontSize * labelLength}px` }}>{x.label}</div>}> + // {dom} + // </Form.Item> + // </Col> + // <Col span={8}></Col> + // <Col span={8}></Col> + // </div> + ); + })} + </Row> + <div className='NewTableSearch-border'></div> <Row style={{ marginTop: '16px' }}> <Col span={24} style={{ textAlign: 'left' }}> <Button className="public-buttonMargin" type="primary" htmlType="submit" icon={<SearchOutlined />} onClick={handleSearch}> 查询 </Button> - <Button className="public-buttonMargin" type="primary" ghost htmlType="submit" onClick={exportButton}> - 导出查询结果 - </Button> + { + exportButtonShow && + <Button className="public-buttonMargin" type="primary" ghost htmlType="submit" onClick={exportButton}> + 导出查询结果 + </Button> + } <Button onClick={handleReset}> 重置条件 </Button> -- Gitblit v1.8.0