374 lines
15 KiB
JavaScript
374 lines
15 KiB
JavaScript
|
// 核心库
|
|||
|
|
import React, { Component } from 'react'
|
|||
|
|
import { connect } from 'dva'
|
|||
|
|
// 组件库
|
|||
|
|
import { Form, Button } from 'antd'
|
|||
|
|
import IFComponent from '../common/IFComponent'
|
|||
|
|
import UserCustomSearchEditModel from './UserCustomSearchEditModel'
|
|||
|
|
// 工具库
|
|||
|
|
import { isEqual } from 'lodash'
|
|||
|
|
import {
|
|||
|
|
getDataFieldValue,
|
|||
|
|
setDataFieldValue
|
|||
|
|
} from '../utils/common'
|
|||
|
|
import storage from '../utils/storage'
|
|||
|
|
import getControl from '../utils/getControl'
|
|||
|
|
import { getFieldConfigs, getRuleByFieldConfigs } from '../utils/getFieldConfigs'
|
|||
|
|
|
|||
|
|
class AdvanceSearch extends Component {
|
|||
|
|
constructor (props) {
|
|||
|
|
super(props)
|
|||
|
|
this.state = {
|
|||
|
|
data: {},
|
|||
|
|
fieldConfigs: [],
|
|||
|
|
isShowContent: false // 展开收起
|
|||
|
|
}
|
|||
|
|
// 搜索条件共享与记忆
|
|||
|
|
const { filterItem = {}, filterList = [], maxShowContentNum = 4 } = props
|
|||
|
|
const { ID, SHARE_KEY, IS_REMEMBER } = filterItem
|
|||
|
|
this.insRef = ID // 当前 Search 组件的唯一标识
|
|||
|
|
this.insRefs = filterList.map(item => item.ID) // 同 filterList 组里面所有的 AdvanceSearch 组件标识
|
|||
|
|
this.shareKey = SHARE_KEY // 共享数据标识
|
|||
|
|
this.isRemember = IS_REMEMBER // 是否记忆搜索条件
|
|||
|
|
// 展开收起阈值
|
|||
|
|
this.maxShowContentNum = maxShowContentNum
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
componentDidMount () {
|
|||
|
|
const { preventDefaultSearch, onRef, fields, presetValue } = this.props
|
|||
|
|
// 只在初次加载时，提取本地存储的共享查询条件作为预设值
|
|||
|
|
this.setFieldConfigs({ fields, presetValue: this.checkPresetValue(presetValue) }, () => {
|
|||
|
|
!preventDefaultSearch && this.handleSearch()
|
|||
|
|
})
|
|||
|
|
onRef instanceof Function && onRef(this)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
UNSAFE_componentWillReceiveProps (nextProps) {
|
|||
|
|
if (!isEqual(nextProps.fields, this.props.fields) || !isEqual(nextProps.presetValue, this.props.presetValue)) {
|
|||
|
|
const { fields, presetValue } = nextProps
|
|||
|
|
this.setFieldConfigs({ fields, presetValue }, this.handleSearch)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
componentWillUnmount () {
|
|||
|
|
// 组件销毁时清空当前共享实例
|
|||
|
|
if (this.shareKey) {
|
|||
|
|
this.props.dispatch({
|
|||
|
|
type: 'search/cleanShareIns',
|
|||
|
|
payload: {
|
|||
|
|
key: this.shareKey,
|
|||
|
|
insRef: this.insRef
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
// 如果不记住查询条件，则组件销毁时，清空共享数据
|
|||
|
|
if (this.shareKey && !this.isRemember) {
|
|||
|
|
this.props.dispatch({
|
|||
|
|
type: 'search/setShareData',
|
|||
|
|
payload: {
|
|||
|
|
key: this.shareKey,
|
|||
|
|
data: []
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
storage('session').removeItem(this.shareKey)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 相同 formCode 的搜索组件共享搜索条件
|
|||
|
|
setShareIns = (self = true) => {
|
|||
|
|
const { search, dispatch } = this.props
|
|||
|
|
let stopSelfChangeSearch = false
|
|||
|
|
let stopSelfExtraSearch = false
|
|||
|
|
if (this.shareKey) {
|
|||
|
|
const instances = search.shareIns[this.shareKey] || []
|
|||
|
|
// 同一 filterList 组里面的 Search 组件不共享搜索条件
|
|||
|
|
const targetIns = instances.filter(ins => ins.insRef !== this.insRef && this.insRefs.indexOf(ins.insRef) === -1)
|
|||
|
|
if (targetIns.length) {
|
|||
|
|
// 设置自身状态
|
|||
|
|
if (self) {
|
|||
|
|
// 配置的查询条件
|
|||
|
|
const { instance } = targetIns[0]
|
|||
|
|
const { fieldConfigs: insFieldConfigs = [], data: insData = {} } = instance.state || {}
|
|||
|
|
const { fieldConfigs: thisFieldConfigs = [], data: thisData = {} } = this.state
|
|||
|
|
thisFieldConfigs.forEach(item => {
|
|||
|
|
// 拥有相同的编码 code 或者 field 字段，就表示查询项需要共享查询条件
|
|||
|
|
const find = insFieldConfigs.find(ifc => (item.code && ifc.code === item.code) || ifc.field === item.field)
|
|||
|
|
// 默认显示的查询条件才允许共享查询
|
|||
|
|
if (find && item.isDefaultQuery) {
|
|||
|
|
const setValue = getDataFieldValue(insData, find.id)
|
|||
|
|
if (Object.keys(insData).length) {
|
|||
|
|
item.value !== setValue && (stopSelfChangeSearch = true)
|
|||
|
|
item.value = setValue
|
|||
|
|
thisData[item.id] = setValue
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
// 自定义添加的额外查询条件
|
|||
|
|
const { getExtraData: insGetExtraData } = instance.props || {}
|
|||
|
|
const { setExtraData: thisSetExtraData, getExtraData: thisGetExtraData } = this.props
|
|||
|
|
if (insGetExtraData instanceof Function && thisSetExtraData instanceof Function && thisGetExtraData instanceof Function) {
|
|||
|
|
const insExtraData = insGetExtraData()
|
|||
|
|
const thisExtraData = thisGetExtraData()
|
|||
|
|
stopSelfExtraSearch = !isEqual(insExtraData, thisExtraData)
|
|||
|
|
}
|
|||
|
|
// 先判断额外搜索条件，额外搜索成立，则调用thisSetExtraData，并在回调中继续调用搜索
|
|||
|
|
if (stopSelfExtraSearch) {
|
|||
|
|
thisSetExtraData(insGetExtraData(), this.handleSearch)
|
|||
|
|
} else if (stopSelfChangeSearch) {
|
|||
|
|
// fieldConfigs 搜索成立，则调用 setState（因为之前在配置的查询条件中是直接更改 state 的），回调中继续调用搜索
|
|||
|
|
this.setState({ ...this.state }, this.handleSearch)
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// 设置其他关联的Search组件状态
|
|||
|
|
let stopChangeSearch = false
|
|||
|
|
let stopExtraSearch = false
|
|||
|
|
targetIns.forEach(({ instance }) => {
|
|||
|
|
// 配置的查询条件
|
|||
|
|
const { fieldConfigs: insFieldConfigs = [], data: insData = {} } = instance.state || {}
|
|||
|
|
const { fieldConfigs: thisFieldConfigs = [], data: thisData = {} } = this.state
|
|||
|
|
insFieldConfigs.forEach(item => {
|
|||
|
|
// 拥有相同的编码 code 或者 field 字段，就表示查询项需要共享查询条件
|
|||
|
|
const find = thisFieldConfigs.find(tfc => (item.code && tfc.code === item.code) || tfc.field === item.field)
|
|||
|
|
// 默认显示的查询条件才允许共享查询
|
|||
|
|
if (find && item.isDefaultQuery) {
|
|||
|
|
const setValue = getDataFieldValue(thisData, find.id)
|
|||
|
|
if (Object.keys(thisData).length) {
|
|||
|
|
item.value !== setValue && (stopChangeSearch = true)
|
|||
|
|
item.value = setValue
|
|||
|
|
insData[item.id] = setValue
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
// 自定义添加的额外查询条件
|
|||
|
|
const { setExtraData: insSetExtraData, getExtraData: insGetExtraData } = instance.props || {}
|
|||
|
|
const { getExtraData: thisGetExtraData } = this.props
|
|||
|
|
if (thisGetExtraData instanceof Function && insSetExtraData instanceof Function && insGetExtraData instanceof Function) {
|
|||
|
|
const thisExtraData = thisGetExtraData()
|
|||
|
|
const insExtraData = insGetExtraData()
|
|||
|
|
stopExtraSearch = !isEqual(thisExtraData, insExtraData)
|
|||
|
|
}
|
|||
|
|
// 先判断额外搜索条件，额外搜索成立，则调用thisSetExtraData，并在回调中继续调用搜索
|
|||
|
|
if (stopExtraSearch) {
|
|||
|
|
insSetExtraData(thisGetExtraData(), instance.handleSearch)
|
|||
|
|
} else if (stopChangeSearch) {
|
|||
|
|
// fieldConfigs 搜索成立，则调用 setState（因为之前在配置的查询条件中是直接更改 state 的），回调中继续调用搜索
|
|||
|
|
instance.setState({ ...instance.state }, instance.handleSearch)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 存储当前 Search 组件实例
|
|||
|
|
dispatch({
|
|||
|
|
type: 'search/setShareIns',
|
|||
|
|
payload: {
|
|||
|
|
key: this.shareKey,
|
|||
|
|
insRef: this.insRef,
|
|||
|
|
instance: this
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
// 存储当前 shareKey 的查询数据
|
|||
|
|
dispatch({
|
|||
|
|
type: 'search/setShareData',
|
|||
|
|
payload: {
|
|||
|
|
key: this.shareKey,
|
|||
|
|
data: this.state.fieldConfigs
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
storage('session').setItem(this.shareKey, this.state.fieldConfigs)
|
|||
|
|
}
|
|||
|
|
return stopSelfChangeSearch || stopSelfExtraSearch
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 提取本地存储的共享查询条件作为预设值
|
|||
|
|
checkPresetValue = (presetValue) => {
|
|||
|
|
const { search } = this.props
|
|||
|
|
const presetFieldConfigs = search.shareData[this.shareKey] || storage('session').getItem(this.shareKey).val
|
|||
|
|
const localPreset = {}
|
|||
|
|
if (Array.isArray(presetFieldConfigs)) {
|
|||
|
|
presetFieldConfigs.forEach(({ code, field, value }) => {
|
|||
|
|
// 编码 code 作为查询项共享查询条件的附加标识，因为有些查询项的 field 不一样，但又需要共享查询条件，所以额外配置 code 编码，
|
|||
|
|
// 当多个查询项拥有相同的编码 code 时，视为这些查询项需要共享查询条件
|
|||
|
|
code && (localPreset[code] = value)
|
|||
|
|
field && (localPreset[field] = value)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
return Object.assign(localPreset, presetValue)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理父组件传下来的 fields
|
|||
|
|
setFieldConfigs = ({ fields, presetValue }, callback) => {
|
|||
|
|
const fieldConfigs = []
|
|||
|
|
if (fields && fields.length) {
|
|||
|
|
fields.sort((x, y) => x.NUM - y.NUM)
|
|||
|
|
fields.forEach(item => {
|
|||
|
|
if (!item.USER_C_C_QUERY_GROUP_ID) {
|
|||
|
|
const config = getFieldConfigs({
|
|||
|
|
field: item,
|
|||
|
|
onLoadData: this.onLoadData,
|
|||
|
|
onPressEnter: this.onPressEnter,
|
|||
|
|
onSelect: this.onDropDownPaginationSelect,
|
|||
|
|
onChange: this.onChange,
|
|||
|
|
onSearchRef: this.handleSearch
|
|||
|
|
})
|
|||
|
|
fieldConfigs.push(config)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
// 赋值 data { field: value }
|
|||
|
|
const data = {}
|
|||
|
|
fieldConfigs.forEach(item => {
|
|||
|
|
if (presetValue !== undefined && typeof presetValue === 'object' && Object.keys(presetValue).length) {
|
|||
|
|
// 拥有相同编码 code 的查询项共享查询条件
|
|||
|
|
if (Object.prototype.hasOwnProperty.call(presetValue, item.code)) {
|
|||
|
|
data[item.id] = presetValue[item.code]
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (Object.prototype.hasOwnProperty.call(presetValue, item.field)) {
|
|||
|
|
data[item.id] = presetValue[item.field]
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (item.defaultValue !== undefined) {
|
|||
|
|
data[item.id] = item.defaultValue
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
this.saveFieldConfigs(fieldConfigs)
|
|||
|
|
this.setState({
|
|||
|
|
data,
|
|||
|
|
fieldConfigs
|
|||
|
|
}, callback)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// field change 时候赋值给 data
|
|||
|
|
onChange = (params) => {
|
|||
|
|
const { value, colConfig } = params
|
|||
|
|
const data = { ...this.state.data }
|
|||
|
|
setDataFieldValue(data, colConfig.id, value)
|
|||
|
|
this.setState({ data })
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 提供给分页下拉 下拉树选择 级联组件调用（详见 getControl.js），以获取上述组件的树数据，用于导出 table 时，获取到查询数据，并生成导出标题
|
|||
|
|
onLoadData = (id, data) => {
|
|||
|
|
const targetFieldConfig = this.state.fieldConfigs.find(item => item.id === id)
|
|||
|
|
if (targetFieldConfig) {
|
|||
|
|
targetFieldConfig.dataSource = data
|
|||
|
|
this.saveFieldConfigs(this.state.fieldConfigs)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 将对应 formCode 的 fieldConfigs 存到 store 中，用于导出 table 时获取到查询数据，并生成导出标题
|
|||
|
|
saveFieldConfigs = (fieldConfigs) => {
|
|||
|
|
const { formCode, dispatch } = this.props
|
|||
|
|
if (formCode) {
|
|||
|
|
dispatch({
|
|||
|
|
type: 'search/setFieldConfigs',
|
|||
|
|
payload: {
|
|||
|
|
key: formCode,
|
|||
|
|
data: fieldConfigs
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 回车搜索
|
|||
|
|
onPressEnter = ({ e: evt }) => {
|
|||
|
|
evt.stopPropagation()
|
|||
|
|
this.handleSearch(false)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 提供给分页下拉的回调
|
|||
|
|
onDropDownPaginationSelect = (params) => {
|
|||
|
|
const { record, complete, colConfig } = params || {}
|
|||
|
|
const data = { ...this.state.data }
|
|||
|
|
setDataFieldValue(data, colConfig.id, record ? record.ID : null)
|
|||
|
|
setDataFieldValue(data, `selectedRecord.${colConfig.id}`, record)
|
|||
|
|
|
|||
|
|
this.setState({ data }, () => complete instanceof Function && complete())
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 执行搜索，搜索流程为：
|
|||
|
|
* 调用 Search 组件 onSearch 方法，
|
|||
|
|
* 然后 Search 分别通过 ref 分别调用 AdvanceSearch 和 SearchGroupField 的 getSearchParams 方法获取到搜索参数，
|
|||
|
|
* 最后再由 Search 组件完成搜索操作，这样搜索就统一在 Search 中做了
|
|||
|
|
* @param {*} self 设置自身状态还是设置共享状态
|
|||
|
|
*/
|
|||
|
|
handleSearch = (self = true) => {
|
|||
|
|
if (this.setShareIns(self)) return
|
|||
|
|
|
|||
|
|
const { onSearch } = this.props
|
|||
|
|
onSearch instanceof Function && onSearch()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取搜索参数 提供给 ref 调用
|
|||
|
|
getSearchParams = (rules = [], groups = []) => {
|
|||
|
|
return getRuleByFieldConfigs(this.state.data, this.state.fieldConfigs, rules, groups,this.props.user)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
render () {
|
|||
|
|
const { fieldConfigs = [], data, isShowContent } = this.state
|
|||
|
|
const { formCode, formId, code, iconEle, extraInsertPlace, extraSearch = [], onEditModalClose, onAddGroupConfig } = this.props
|
|||
|
|
let extraFieldConfigs = extraInsertPlace === 'after' ? fieldConfigs.concat(extraSearch.map(extra => ({ extraSearch: true, extra }))) : extraSearch.map(extra => ({ extraSearch: true, extra })).concat(fieldConfigs)
|
|||
|
|
extraFieldConfigs = extraFieldConfigs.filter(item => item.isDefaultQuery || item.extraSearch)
|
|||
|
|
let showFieldConfigs = extraFieldConfigs
|
|||
|
|
if (showFieldConfigs.length > this.maxShowContentNum - 1) {
|
|||
|
|
showFieldConfigs = isShowContent ? extraFieldConfigs : extraFieldConfigs.slice(0, this.maxShowContentNum - 1)
|
|||
|
|
}
|
|||
|
|
return (
|
|||
|
|
<Form hideRequiredMark className='opt-search__form'>
|
|||
|
|
{
|
|||
|
|
showFieldConfigs.map(item => {
|
|||
|
|
if (item.extraSearch) return item.extra
|
|||
|
|
item.value = getDataFieldValue(data, item.id)
|
|||
|
|
return (
|
|||
|
|
<Form.Item
|
|||
|
|
key={item.id}
|
|||
|
|
label={<>{item.isRequire ? <span style={{ color: 'red' }}>*</span> : null}{item.label}</>}
|
|||
|
|
>
|
|||
|
|
{getControl(item, null, this)}
|
|||
|
|
</Form.Item>
|
|||
|
|
)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
<div className='opt-search__btns-zone'>
|
|||
|
|
<IFComponent IF={showFieldConfigs.length}>
|
|||
|
|
<Button type='primary' onClick={() => this.handleSearch(false)}>查询</Button>
|
|||
|
|
</IFComponent>
|
|||
|
|
<div className='opt-search__tool-wrap'>
|
|||
|
|
<div className='opt-search__children'>{iconEle}</div>
|
|||
|
|
<Button.Group>
|
|||
|
|
<UserCustomSearchEditModel
|
|||
|
|
formCode={formCode}
|
|||
|
|
formId={formId}
|
|||
|
|
code={code}
|
|||
|
|
close={onEditModalClose}
|
|||
|
|
>
|
|||
|
|
<Button icon='edit' title='添加自定义查询' size='small' />
|
|||
|
|
</UserCustomSearchEditModel>
|
|||
|
|
<Button icon='reload' size='small' title='刷新' onClick={() => this.handleSearch(false)} />
|
|||
|
|
<Button
|
|||
|
|
size='small'
|
|||
|
|
title='新增分组'
|
|||
|
|
icon='plus'
|
|||
|
|
onClick={onAddGroupConfig}
|
|||
|
|
/>
|
|||
|
|
<IFComponent IF={extraFieldConfigs.length >= this.maxShowContentNum}>
|
|||
|
|
<Button
|
|||
|
|
size='small'
|
|||
|
|
title='展开收起'
|
|||
|
|
icon={isShowContent ? 'up' : 'down'}
|
|||
|
|
onClick={() => this.setState({ isShowContent: !isShowContent })}
|
|||
|
|
/>
|
|||
|
|
</IFComponent>
|
|||
|
|
</Button.Group>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</Form>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default connect(({ search }) => ({ search }))(AdvanceSearch)
|