115 lines
3.8 KiB
JavaScript
115 lines
3.8 KiB
JavaScript
/*
|
|
* 自定义浏览框组件
|
|
*
|
|
* @Author: 黎永顺
|
|
* @Date: 2024/8/29
|
|
* @Wechat:
|
|
* @Email: 971387674@qq.com
|
|
* @description:
|
|
*/
|
|
import React, { Component } from "react";
|
|
import { WeaLocaleProvider, WeaTools } from "ecCom";
|
|
import AssociativeSearchMult from "./components/associativeSearchMult";
|
|
import AssociativeSearchSingle from "./components/AssociativeSearchSingle";
|
|
import CustomBrowserDialog from "./components/customBrowserDialog";
|
|
import classNames from "classnames";
|
|
import "./index.less";
|
|
|
|
const getLabel = WeaLocaleProvider.getLabel;
|
|
const getKey = WeaTools.getKey;
|
|
|
|
class Index extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
browserDialog: { visible: false },
|
|
selectedData: {}, searchKeys: [], // 搜索按钮选择的数据和keys
|
|
rightDatas: [] // 右侧展示的数据
|
|
};
|
|
}
|
|
|
|
componentDidMount() {
|
|
const { value, fieldConfig } = this.props;
|
|
const { browserConditionParam: { replaceDatas = [] } } = fieldConfig;
|
|
if (value && replaceDatas.length > 0) {
|
|
this.setState({
|
|
searchKeys: value.split(","),
|
|
selectedData: _.reduce(replaceDatas, (pre, cur) => ({ ...pre, [cur["id"]]: cur }), {})
|
|
});
|
|
}
|
|
}
|
|
|
|
renderSingle = () => {
|
|
const { fieldConfig } = this.props;
|
|
const { selectedData, searchKeys } = this.state;
|
|
return (<div>
|
|
<AssociativeSearchSingle
|
|
{...fieldConfig}
|
|
{...this.props}
|
|
datas={selectedData}
|
|
selectedValues={searchKeys}
|
|
onChange={this.onBrowerChangeHandler}
|
|
clickCallback={this.onBrowerClick}
|
|
/>
|
|
</div>);
|
|
};
|
|
renderMult = () => {
|
|
const { fieldConfig } = this.props;
|
|
const { selectedData, searchKeys } = this.state;
|
|
return (<div>
|
|
<AssociativeSearchMult
|
|
{...fieldConfig}
|
|
{...this.props}
|
|
datas={selectedData}
|
|
selectedValues={searchKeys}
|
|
onChange={this.onBrowerChangeHandler}
|
|
clickCallback={this.onBrowerClick}
|
|
/>
|
|
</div>);
|
|
};
|
|
onBrowerChangeHandler = (values, datas) => {
|
|
const { form, fieldConfig, isSingle } = this.props;
|
|
const { browserConditionParam = {} } = fieldConfig || {};
|
|
this.setState({
|
|
searchKeys: (isSingle || browserConditionParam.isSingle) ? values.slice(-1) : values,
|
|
selectedData: ((isSingle || browserConditionParam.isSingle) && !_.isEmpty(values)) ? { [_.last(values)]: datas[_.last(values)] } : datas
|
|
}, () => {
|
|
this.props.onChange && this.props.onChange(values.join(","));
|
|
if (form) {
|
|
form.updateFields({
|
|
[getKey(fieldConfig)]: { value: this.state.searchKeys.join(",") }
|
|
});
|
|
}
|
|
});
|
|
};
|
|
onBrowerClick = (keys, selectedObj) => {
|
|
if (_.isEmpty(keys)) {
|
|
this.setState({ searchKeys: [], selectedData: {}, rightDatas: [] });
|
|
}
|
|
this.setState({ browserDialog: { visible: true } });
|
|
};
|
|
|
|
render() {
|
|
const { browserDialog, selectedData, searchKeys } = this.state;
|
|
const { isSingle, viewAttr, fieldConfig = {} } = this.props;
|
|
const { browserConditionParam = {} } = fieldConfig || {};
|
|
const className = classNames({
|
|
"wea-browser": true,
|
|
"wea-field-readonly": viewAttr === "1" || fieldConfig.viewAttr === "1"
|
|
});
|
|
const browser = (isSingle || browserConditionParam.isSingle) ? this.renderSingle() : this.renderMult();
|
|
const style = {};
|
|
if (this.props.resize) style.visibility = "hidden";
|
|
return (<React.Fragment>
|
|
<div className={`${className} ${this.props.className || ""}`} style={style}>{browser}</div>
|
|
<CustomBrowserDialog
|
|
{...browserDialog} {...browserConditionParam} {...this.props} onChange={this.onBrowerChangeHandler}
|
|
onCancel={() => this.setState({ browserDialog: { visible: false } })}
|
|
datas={selectedData} selectedValues={searchKeys}/>
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Index;
|