246 lines
9.7 KiB
JavaScript
246 lines
9.7 KiB
JavaScript
/*
|
|
* 自定义穿梭框组件
|
|
* 弹框选择
|
|
* @Author: 黎永顺
|
|
* @Date: 2024/8/30
|
|
* @Wechat:
|
|
* @Email: 971387674@qq.com
|
|
* @description:
|
|
*/
|
|
import React, { Component } from "react";
|
|
import { WeaDialog, WeaInputSearch, WeaLocaleProvider, WeaNewScroll, WeaTable } from "ecCom";
|
|
import { Button, Col, Row, Spin } from "antd";
|
|
import CustomBrowserMutiLeft from "./customBrowserMutiLeft";
|
|
import CustomBrowserMutiRight from "./customBrowserMutiRight";
|
|
import CustomBrowserOperation from "./customBrowserOperation";
|
|
import { postFetch } from "../../../util/request";
|
|
import "../index.less";
|
|
|
|
const getLabel = WeaLocaleProvider.getLabel;
|
|
|
|
class CustomTransferDialog extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
loading: false, listDatas: [], columns: [], selectedRowKeys: [], pageInfo: { current: 1, pageSize: 10, total: 0 },
|
|
query: props.searchParamsKey ? { [props.searchParamsKey]: "" } : {},
|
|
leftListSelectedKeys: [], // 左侧table选择的keys
|
|
leftListSelectedData: [], // 左侧table选择的数据
|
|
rightCheckedKeys: [], //右侧选择的keys
|
|
rightDatas: [] // 右侧展示的数据
|
|
};
|
|
this.selectedData = {};
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps, nextContext) {
|
|
if (nextProps.visible !== this.props.visible && nextProps.visible) {
|
|
this.getData(true, nextProps);
|
|
if (nextProps.datas) {
|
|
this.setState({
|
|
leftListSelectedData: _.values(nextProps.datas), rightDatas: _.values(nextProps.datas)
|
|
});
|
|
}
|
|
} else if (nextProps.visible !== this.props.visible && !nextProps.visible) {
|
|
this.setState({
|
|
query: { [this.props.searchParamsKey]: "" }, selectedRowKeys: [],
|
|
rightDatas: [], rightCheckedKeys: [], leftListSelectedData: [], leftListSelectedKeys: [],
|
|
pageInfo: { current: 1, pageSize: 10, total: 0 }
|
|
});
|
|
this.selectedData = {};
|
|
}
|
|
}
|
|
|
|
getData = (init = false, props) => {
|
|
const { query, pageInfo } = this.state;
|
|
const { completeURL, convertDatasource, dataParams = {}, dialogType } = props || this.props;
|
|
let payload = { ...dataParams, ...query };
|
|
dialogType === "table" && (payload = { ...payload, ...pageInfo });
|
|
this.setState({ loading: true });
|
|
postFetch(completeURL, payload).then(({ status, data }) => {
|
|
this.setState({ loading: false });
|
|
if (status && data.list) {
|
|
const { pageNum: current, pageSize, total } = data;
|
|
this.setState({
|
|
listDatas: convertDatasource ? convertDatasource(data.list) : data.list, columns: data.columns,
|
|
pageInfo: { ...pageInfo, current, pageSize, total }
|
|
});
|
|
} else {
|
|
this.setState({
|
|
listDatas: convertDatasource ? convertDatasource(data).listDatas : [],
|
|
leftListSelectedData: (init && convertDatasource) ? convertDatasource(data).checked : this.state.leftListSelectedData,
|
|
rightDatas: (init && convertDatasource) ? convertDatasource(data).checked : this.state.rightDatas
|
|
});
|
|
}
|
|
});
|
|
};
|
|
handleOk = () => {
|
|
const { rightDatas } = this.state;
|
|
this.props.onChange && this.props.onChange(rightDatas);
|
|
};
|
|
onLeftListCheck = (keys, datas) => {
|
|
const { leftListSelectedData } = this.state;
|
|
let targets = leftListSelectedData.concat(datas);
|
|
targets = _.uniqBy(targets, "id");
|
|
targets = targets.filter((t) => keys.indexOf(t["id"]) > -1);
|
|
this.setState({ leftListSelectedKeys: keys, leftListSelectedData: targets });
|
|
};
|
|
onleftDoubleClick = (data) => {
|
|
const { rightDatas } = this.state;
|
|
this.setState({
|
|
rightDatas: rightDatas.concat(data),
|
|
rightCheckedKeys: [],
|
|
leftListSelectedData: [],
|
|
leftListSelectedKeys: []
|
|
});
|
|
};
|
|
onRightDoubleClick = (key) => {
|
|
const { rightDatas } = this.state;
|
|
const newRightDatas = rightDatas.filter(item => String(item.id) !== key);
|
|
this.setState({ rightDatas: newRightDatas, rightCheckedKeys: [] });
|
|
};
|
|
moveTo = (direction) => {
|
|
const { rightDatas, rightCheckedKeys, listDatas, leftListSelectedData } = this.state;
|
|
if (direction === "right") {
|
|
this.setState({
|
|
rightDatas: rightDatas.concat(leftListSelectedData),
|
|
leftListSelectedData: [],
|
|
leftListSelectedKeys: []
|
|
});
|
|
} else if (direction === "left") {
|
|
this.setState({
|
|
rightDatas: rightDatas.filter(item => !rightCheckedKeys.some(checkedKey => String(item.id) === checkedKey)),
|
|
rightCheckedKeys: []
|
|
});
|
|
} else if (direction === "allToLeft") {
|
|
this.setState({ rightDatas: [], rightCheckedKeys: [] });
|
|
} else if (direction === "allToRight") {
|
|
if (this.leftListAllActive()) {
|
|
this.setState({
|
|
rightDatas: rightDatas.concat(listDatas),
|
|
rightCheckedKeys: [],
|
|
leftListSelectedData: [],
|
|
leftListSelectedKeys: []
|
|
});
|
|
}
|
|
}
|
|
};
|
|
leftListAllActive = () => {
|
|
const { rightDatas, listDatas } = this.state;
|
|
let bool = true;
|
|
if (_.isEmpty(listDatas)) bool = false;
|
|
if (!_.isEmpty(listDatas) && !_.isEmpty(rightDatas)) {
|
|
bool = listDatas.filter((l) => !rightDatas.some(r => l.id === r.id)).length !== 0;
|
|
}
|
|
return bool;
|
|
};
|
|
renderTitle = () => {
|
|
return (<div className="wea-hr-muti-dialog-title">
|
|
<span>{this.props.title || getLabel(111, "数据选择")}</span>
|
|
<div>{this.props.titleOptsComs}</div>
|
|
</div>);
|
|
};
|
|
|
|
render() {
|
|
const {
|
|
loading, listDatas, query, leftListSelectedKeys, rightDatas, rightCheckedKeys, pageInfo, selectedRowKeys,
|
|
columns
|
|
} = this.state;
|
|
const {
|
|
searchParamsKey, saveLoading, dialogType = "", rowKey, tableOpts = {}, buttons = [
|
|
<Button type="primary" loading={saveLoading} onClick={this.handleOk}
|
|
disabled={_.isEmpty(rightDatas)}>{getLabel(111, "确 定")}</Button>,
|
|
<Button type="ghost" onClick={this.props.onCancel}>{getLabel(111, "取 消")}</Button>
|
|
]
|
|
} = this.props;
|
|
let rightActive = false, leftActive = false, rightAllActive = false;
|
|
if (leftListSelectedKeys && leftListSelectedKeys.length > 0) rightActive = true;
|
|
if (rightCheckedKeys && rightCheckedKeys.length > 0) leftActive = true;
|
|
if (rightDatas && rightDatas.length > 0) rightAllActive = true;
|
|
let dom = <Spin spinning={loading}>
|
|
<div className="wea-hr-muti-dialog">
|
|
<div className="wea-hr-muti-input-left">
|
|
<Row style={{ height: 35 }}>
|
|
<Col span="24">
|
|
<WeaInputSearch value={query[searchParamsKey]} onSearch={() => this.getData()}
|
|
onChange={value => this.setState({ query: { ...query, [searchParamsKey]: value } })}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
<div>
|
|
<WeaNewScroll height={this.dialog ? this.dialog.state.height - 51 : 260}>
|
|
<CustomBrowserMutiLeft
|
|
filterData={rightDatas}
|
|
datas={listDatas}
|
|
onDoubleClick={this.onleftDoubleClick}
|
|
onClick={this.onLeftListCheck}
|
|
selectedKeys={leftListSelectedKeys}
|
|
/>
|
|
</WeaNewScroll>
|
|
</div>
|
|
</div>
|
|
<div className="wea-transfer-opration">
|
|
<CustomBrowserOperation
|
|
rightActive={rightActive}
|
|
leftActive={leftActive}
|
|
leftAllActive={this.leftListAllActive()}
|
|
rightAllActive={rightAllActive}
|
|
moveToRight={() => this.moveTo("right")}
|
|
moveToLeft={() => this.moveTo("left")}
|
|
moveAllToRight={() => this.moveTo("allToRight")}
|
|
moveAllToLeft={() => this.moveTo("allToLeft")}
|
|
/>
|
|
</div>
|
|
<div className="wea-hr-muti-input-right">
|
|
<CustomBrowserMutiRight
|
|
height={this.dialog ? this.dialog.state.height - 51 : 260}
|
|
data={rightDatas} checkedKeys={rightCheckedKeys}
|
|
checkedCb={rightCheckedKeys => this.setState({ rightCheckedKeys })}
|
|
onDoubleClick={this.onRightDoubleClick}
|
|
onDrag={(data) => {
|
|
this.setState({ rightDatas: data });
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Spin>;
|
|
if (dialogType === "table") {
|
|
const sheight = this.dialog ? this.dialog.state.height - 156 : 260;
|
|
const pagination = {
|
|
...pageInfo,
|
|
showTotal: total => `${getLabel(18609, "共")} ${total} ${getLabel(18256, "条")}`,
|
|
showQuickJumper: true,
|
|
showSizeChanger: true,
|
|
pageSizeOptions: ["10", "20", "50", "100"],
|
|
onShowSizeChange: (current, pageSize) => {
|
|
this.setState({
|
|
pageInfo: { ...pageInfo, current, pageSize }
|
|
}, () => this.getData());
|
|
},
|
|
onChange: current => {
|
|
this.setState({ pageInfo: { ...pageInfo, current } }, () => this.getData());
|
|
}
|
|
};
|
|
const rowSelection = {
|
|
selectedRowKeys,
|
|
onChange: selectedRowKeys => this.setState({ selectedRowKeys }, () => this.props.onSelect(selectedRowKeys))
|
|
};
|
|
dom = <div className="wea-hr-muti-input-table">
|
|
{this.props.children}
|
|
<WeaTable dataSource={listDatas} loading={loading} pagination={pagination} scroll={{ y: sheight }}
|
|
rowSelection={rowSelection} rowKey={rowKey || "id"}
|
|
columns={!_.isEmpty(tableOpts) ? [...columns, tableOpts] : columns}/>
|
|
</div>;
|
|
}
|
|
return (
|
|
<WeaDialog
|
|
{...this.props} initLoadCss ref={dom => this.dialog = dom} title={this.renderTitle()}
|
|
className="custom_browser_dialog" draggable={true} style={{
|
|
width: 784, height: 460, minHeight: 200, minWidth: 380,
|
|
maxHeight: "90%", maxWidth: "90%", overflow: "hidden", transform: "translate(0px, 0px)"
|
|
}} buttons={buttons}>{dom}</WeaDialog>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default CustomTransferDialog;
|