条件组{index + 1}
分组关系
)
}
const CPanelHeader = connect(({ app }) => ({ app }))(PanelHeader)
class SearchGroupField extends Component {
// 注意：该组件作为循环嵌套使用的子组件时，state 值均为父组件 state 的值的引用，无需 cloneDeep
constructor (props) {
super(props)
this.state = {
data: {},
groupConfigs: [],
queryFields: []
}
}
componentDidMount () {
// 如果是 PanelContent 中渲染出来的该组件，那么可以直接拿 groups 属性作为 groupConfigs
if (this.props.childField) {
this.setState({
data: this.props.data,
groupConfigs: this.props.groups,
queryFields: this.props.queryFields
})
return
}
this.getQueryFields()
const { onRef, fields, groups, presetValue } = this.props
this.setGroupConfigs({ fields, groups, presetValue })
onRef instanceof Function && onRef(this)
}
UNSAFE_componentWillReceiveProps (nextProps) {
// 如果是 PanelContent 中渲染出来的该组件，那么共享 queryFields
// 放在 UNSAFE_componentWillReceiveProps 生命周期中是因为父组件的 queryFields 是通过接口获取的
if (this.props.childField && !isEqual(nextProps.queryFields, this.state.queryFields)) {
this.setState({ queryFields: this.props.queryFields })
}
}
getQueryFields = () => {
const { code, formId, customConfigId, login, dispatch } = this.props
const json = initFilter(login.OrgId, formId, '', 0, 1, customConfigId, login.userId, code)
dispatch({
type: 'search/getUserConfig',
payload: json
}).then(ret => {
if (ret && ret.Nav_Fields) {
this.setState({
queryFields: ret.Nav_Fields.filter(item => !item.IsCustom)
})
}
})
}
getGroupConfigs = (fields, groups, parentId, parent, list, fieldConfigs) => {
const tempGroups = groups.filter(item => item.PARENT_ID === parentId)
if (tempGroups && tempGroups.length) {
tempGroups.sort((x, y) => x.NUM - y.NUM)
tempGroups.forEach(group => {
const config = {
id: group.ID || guid(),
title: group.TITLE,
parentId: group.PARENT_ID,
code: group.CODE,
relationType: group.RELATION_TYPE,
isDisplay: group.IS_DISPLAY,
userCCQueryId: group.USER_C_C_QUERY_ID
}
const tempFields = fields.filter(item => item.USER_C_C_QUERY_GROUP_ID === config.id)
if (tempFields && tempFields.length) {
config.fieldConfigs = []
tempFields.forEach(item => {
const fieldConfig = getFieldConfigs({
field: item,
onPressEnter: this.onPressEnter,
onChange: this.onChange
})
config.fieldConfigs.push(fieldConfig)
fieldConfigs.push(fieldConfig)
})
}
if (parent) {
!parent.childGroups && (parent.childGroups = [])
parent.childGroups.push(config)
} else {
list.push(config)
}
this.getGroupConfigs(fields, groups, config.id, config, list, fieldConfigs)
})
}
}
setGroupConfigs = ({ fields, groups, presetValue }) => {
const fieldConfigs = []
const groupConfigs = []
if (groups && groups.length) {
groups.sort((x, y) => x.NUM - y.NUM)
this.getGroupConfigs(fields, groups, null, null, groupConfigs, fieldConfigs)
}
// 赋值 data { field: value }
const data = {}
fieldConfigs.forEach(item => {
if (presetValue !== undefined && typeof presetValue === 'object' && Object.keys(presetValue).length) {
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.setState({
data,
groupConfigs
})
}
// 新增一组配置 提供给 ref 调用
addGroupConfig = (id) => {
const { code, customConfigId } = this.props
const config = {
id: guid(),
parentId: id,
relationType: 1,
isDisplay: true,
code,
userCCQueryId: customConfigId || null
}
const find = digGroupData(this.state.groupConfigs, id)
if (find) {
!find.childGroups && (find.childGroups = [])
find.childGroups.push(config)
} else if (!id) {
// 无 id，代表新增根配置
this.state.groupConfigs.push(config)
}
// 直接修改 state，并使用 forceUpdate 更新，目的是为了保持对父组件 state 值的引用
this.forceUpdate()
}
// 删除一组配置
deleteGroupConfig = (id) => {
const findIndex = this.state.groupConfigs.findIndex(item => item.id === id)
if (findIndex !== -1) {
this.state.groupConfigs.splice(findIndex, 1)
// 直接修改 state，并使用 forceUpdate 更新，目的是为了保持对父组件 state 值的引用
this.forceUpdate()
}
}
// 分组关系选择
onSelectChange = (id, value) => {
const find = digGroupData(this.state.groupConfigs, id)
if (find) {
find.relationType = value
// 直接修改 state，并使用 forceUpdate 更新，目的是为了保持对父组件 state 值的引用
this.forceUpdate()
}
}
// PanelContent 内容更新
onPanelContentChange = () => {
this.forceUpdate()
}
// 回车搜索
onPressEnter = ({ e: evt }) => {
evt.stopPropagation()
this.handleSearch()
}
// field change 时候赋值给 data
onChange = (params) => {
const { value, colConfig } = params
setDataFieldValue(this.state.data, colConfig.id, value)
// 直接修改 state，并使用 forceUpdate 更新，目的是为了保持对父组件 state 值的引用
this.forceUpdate()
}
/**
* 执行搜索，搜索流程为：
* 调用 Search 组件 onSearch 方法，
* 然后 Search 分别通过 ref 分别调用 AdvanceSearch 和 SearchGroupField 的 getSearchParams 方法获取到搜索参数，
* 最后再由 Search 组件完成搜索操作，这样搜索就统一在 Search 中做了
*/
handleSearch = () => {
const { onSearch } = this.props
onSearch instanceof Function && onSearch()
}
// 获取搜索参数 提供给 ref 调用
getSearchParams = (groups = []) => {
return getGroupByGroupConfigs(this.state.data, this.state.groupConfigs, null, groups,this.props.user)
}
render () {
const { data, groupConfigs, queryFields } = this.state
return (