feature/2.15.1.2407.01-权限
This commit is contained in:
parent
a729826c8d
commit
a56ee784db
|
|
@ -0,0 +1,26 @@
|
|||
/*
|
||||
* 自定义浏览框组件
|
||||
* 单选
|
||||
* @Author: 黎永顺
|
||||
* @Date: 2024/9/3
|
||||
* @Wechat:
|
||||
* @Email: 971387674@qq.com
|
||||
* @description:
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
import { WeaLocaleProvider } from "ecCom";
|
||||
import AssociativeSearchMult from "./associativeSearchMult";
|
||||
|
||||
const getLabel = WeaLocaleProvider.getLabel;
|
||||
|
||||
class AssociativeSearchSingle extends Component {
|
||||
|
||||
|
||||
render() {
|
||||
return (
|
||||
<AssociativeSearchMult {...this.props}/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default AssociativeSearchSingle;
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
/*
|
||||
* 自定义浏览框组件
|
||||
* 多选
|
||||
* @Author: 黎永顺
|
||||
* @Date: 2024/8/29
|
||||
* @Wechat:
|
||||
* @Email: 971387674@qq.com
|
||||
* @description:
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
import { WeaLocaleProvider } from "ecCom";
|
||||
import { Button, Icon, Select } from "antd";
|
||||
import classNames from "classnames";
|
||||
import { postFetch } from "../../../util/request";
|
||||
|
||||
const getLabel = WeaLocaleProvider.getLabel;
|
||||
const Option = Select.Option;
|
||||
|
||||
class AssociativeSearchMult extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
loading: false, data: [], activeKey: "", dropdownWidth: 200
|
||||
};
|
||||
this.selectedData = {};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const { dropdownWidth } = this.state;
|
||||
const w = $(this.refs.searchWrapperMui).outerWidth();
|
||||
if (dropdownWidth < w) {
|
||||
this.setState({ dropdownWidth: w });
|
||||
}
|
||||
}
|
||||
|
||||
handleSearch = (value) => {
|
||||
this.setState({ loading: true });
|
||||
this.getData(value);
|
||||
};
|
||||
getData = (name = "") => {
|
||||
const { browserConditionParam } = this.props;
|
||||
const { completeURL, searchParamsKey, convertDatasource, dataParams = {} } = browserConditionParam;
|
||||
if (_.trim(name)) {
|
||||
postFetch(completeURL, { ...dataParams, [searchParamsKey]: name, current: 1, pageSize: 9999 })
|
||||
.then(({ status, data }) => {
|
||||
this.setState({ loading: false });
|
||||
if (status && data.list) {
|
||||
this.setState({
|
||||
data: convertDatasource ? convertDatasource(data.list) : data.list,
|
||||
activeKey: this.getActiveKey(convertDatasource ? convertDatasource(data.list) : data.list)
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
data: _.map(data, o => ({ ...o, id: String(o.id), name: o.name })),
|
||||
activeKey: this.getActiveKey(data)
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.setState({ data: [], loading: false, activeKey: "" });
|
||||
}
|
||||
};
|
||||
getActiveKey = (data) => {
|
||||
const { selectedValues = [] } = this.props;
|
||||
let v = "";
|
||||
if (data && data.length > 0) {
|
||||
let target = data.filter((d) => selectedValues.indexOf(d.id) === -1);
|
||||
if (!_.isEmpty(target)) v = String(target[0].id);
|
||||
}
|
||||
return v;
|
||||
};
|
||||
getItemById = (id) => {
|
||||
const { data } = this.state, { datas } = this.props;
|
||||
if (datas[id]) return datas[id];
|
||||
if (!_.isEmpty(data)) {
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
if (id === data[i].id) return data[i];
|
||||
}
|
||||
}
|
||||
};
|
||||
handleChange = (values) => {
|
||||
this.selectedData = {};
|
||||
values.forEach((v) => {
|
||||
let item = this.getItemById(v);
|
||||
if (item) this.selectedData[v] = item;
|
||||
});
|
||||
this.props.onChange && this.props.onChange(values, this.selectedData);
|
||||
this.setState({ activeKey: "" });
|
||||
};
|
||||
handleBlur = () => this.setState({ data: [], activeKey: "" });
|
||||
handleClick = (e) => {
|
||||
e && e.preventDefault();
|
||||
const { datas, selectedValues } = this.props;
|
||||
if (this.props.clickCallback) this.props.clickCallback(selectedValues, datas);
|
||||
};
|
||||
isReadOnly = () => {
|
||||
const { viewAttr } = this.props;
|
||||
return viewAttr === 1 || viewAttr === "1";
|
||||
};
|
||||
|
||||
render() {
|
||||
const { data, dropdownWidth } = this.state;
|
||||
const { viewAttr, selectedValues, datas, isSingle, browserConditionParam = {} } = this.props;
|
||||
const clsname = classNames({
|
||||
"required": (viewAttr === 3 || viewAttr === "3") && _.isEmpty(selectedValues),
|
||||
"mr12": viewAttr === "3" && _.isEmpty(selectedValues),
|
||||
"wea-associative-single": (isSingle || browserConditionParam.isSingle),
|
||||
"wea-associative-search-mult": !(isSingle || browserConditionParam.isSingle)
|
||||
});
|
||||
if (this.isReadOnly()) {
|
||||
let arr = [];
|
||||
selectedValues && selectedValues.map(v => {
|
||||
let item = datas[v].name;
|
||||
if (_.isString(item)) {
|
||||
arr.push(<a className="child-item wdb">{item}</a>);
|
||||
} else {
|
||||
arr.push(<a className="child-item wdb" dangerouslySetInnerHTML={{ __html: item }}> </a>);
|
||||
}
|
||||
});
|
||||
return (
|
||||
<span className={`wea-associative-search wea-field-readonly ${clsname} `} ref="searchWrapperMui">{arr}</span>
|
||||
);
|
||||
}
|
||||
let options = data.map(d => <Option key={d.id} title={d.name}>{d.name}</Option>);
|
||||
selectedValues && selectedValues.map((v) => {
|
||||
v && options.unshift(<Option key={v} title={datas[v].name}>{datas[v].name}</Option>);
|
||||
});
|
||||
const select = <Select
|
||||
{...this.props}
|
||||
hasScroll={false}
|
||||
hideSelected={true}
|
||||
transitionName=""
|
||||
animation=""
|
||||
multiple={true}
|
||||
notFoundContent=""
|
||||
defaultActiveFirstOption={true}
|
||||
showArrow={false}
|
||||
filterOption={false}
|
||||
defaultValue={selectedValues}
|
||||
value={selectedValues}
|
||||
dropdownStyle={{ minWidth: dropdownWidth }}
|
||||
onSearch={_.debounce(this.handleSearch, 400)}
|
||||
onChange={this.handleChange}
|
||||
onBlur={this.handleBlur}
|
||||
>
|
||||
{options}
|
||||
</Select>;
|
||||
return (
|
||||
<div className={`wea-associative-search ${clsname}`} ref="searchWrapperMui">
|
||||
{select}
|
||||
<Icon type="loading" style={{ display: this.state.loading ? "block" : "none" }}/>
|
||||
<div className="ant-input-group-wrap">
|
||||
<Button type="ghost" icon="search" onClick={this.handleClick}/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default AssociativeSearchMult;
|
||||
|
|
@ -0,0 +1,181 @@
|
|||
/*
|
||||
* 自定义浏览框组件
|
||||
* 弹框选择
|
||||
* @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";
|
||||
|
||||
const getLabel = WeaLocaleProvider.getLabel;
|
||||
|
||||
class CustomBrowserDialog extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
loading: false, listDatas: [], pageInfo: { current: 1, pageSize: 10, total: 0 }, selectedRowKeys: [],
|
||||
query: { [props.searchParamsKey]: "" }
|
||||
};
|
||||
this.selectedData = {};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps, nextContext) {
|
||||
if (nextProps.visible !== this.props.visible && nextProps.visible) this.getData();
|
||||
if (nextProps.visible !== this.props.visible && nextProps.visible) this.setState({ selectedRowKeys: nextProps.selectedValues });
|
||||
if (nextProps.visible !== this.props.visible && !nextProps.visible) {
|
||||
this.setState({ pageInfo: { current: 1, pageSize: 10, total: 0 } });
|
||||
this.selectedData = {};
|
||||
}
|
||||
}
|
||||
|
||||
getData = () => {
|
||||
const { pageInfo, query } = this.state;
|
||||
const { dialogType, completeURL, convertDatasource, dataParams = {} } = this.props;
|
||||
let payload = { ...dataParams };
|
||||
dialogType === "table" && (payload = { ...pageInfo, ...payload, ...query });
|
||||
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,
|
||||
pageInfo: { ...pageInfo, current, pageSize, total }
|
||||
});
|
||||
} else {
|
||||
this.setState({ listDatas: data });
|
||||
}
|
||||
});
|
||||
};
|
||||
handleRowClick = record => {
|
||||
if (!this.props.isSingle) return;
|
||||
const values = [record.id];
|
||||
const selectedData = { [record["id"]]: record };
|
||||
this.props.onCancel();
|
||||
this.props.onChange && this.props.onChange(values, selectedData);
|
||||
};
|
||||
handleClear = () => {
|
||||
this.props.onCancel();
|
||||
this.props.onChange && this.props.onChange([], {});
|
||||
};
|
||||
handleOk = () => {
|
||||
const { selectedRowKeys } = this.state;
|
||||
selectedRowKeys.forEach((v) => {
|
||||
let item = this.getItemById(v);
|
||||
if (item) this.selectedData[v] = item;
|
||||
});
|
||||
this.props.onChange && this.props.onChange(selectedRowKeys, this.selectedData);
|
||||
this.props.onCancel && this.props.onCancel();
|
||||
};
|
||||
getItemById = (id) => {
|
||||
const { listDatas } = this.state;
|
||||
if (this.selectedData[id]) return this.selectedData[id];
|
||||
if (!_.isEmpty(listDatas)) {
|
||||
for (let i = 0; i < listDatas.length; i++) {
|
||||
if (id === listDatas[i].id) return listDatas[i];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { loading, listDatas, pageInfo, selectedRowKeys, query } = this.state;
|
||||
const { dialogType, tableProps: { rowKey, columns }, isSingle, searchParamsKey } = this.props;
|
||||
const sheight = this.dialog ? this.dialog.state.height - 55 : 260;
|
||||
const buttons = [
|
||||
<Button type="primary" onClick={this.handleOk}>{getLabel(111, "确 定")}</Button>,
|
||||
<Button type="ghost" onClick={this.handleClear}>{getLabel(111, "清 除")}</Button>,
|
||||
<Button type="ghost" onClick={this.props.onCancel}>{getLabel(111, "取 消")}</Button>];
|
||||
let dom = <Spin spinning={loading}>
|
||||
<div style={{ padding: 10, height: "100%" }}>
|
||||
<div className="wea-hr-muti-input-left">
|
||||
<Row style={{ height: 35 }}>
|
||||
<Col span="24"> <WeaInputSearch/> </Col>
|
||||
</Row>
|
||||
<div>
|
||||
<WeaNewScroll height={sheight}>
|
||||
<CustomBrowserMutiLeft
|
||||
datas={listDatas}
|
||||
/>
|
||||
</WeaNewScroll>
|
||||
</div>
|
||||
</div>
|
||||
<div className="wea-transfer-opration">
|
||||
<CustomBrowserOperation/>
|
||||
</div>
|
||||
<div className="wea-hr-muti-input-right">
|
||||
<CustomBrowserMutiRight height={sheight}/>
|
||||
</div>
|
||||
</div>
|
||||
</Spin>;
|
||||
if (dialogType === "table") {
|
||||
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();
|
||||
selectedRowKeys.forEach((v) => {
|
||||
let item = this.getItemById(v);
|
||||
if (item) this.selectedData[v] = item;
|
||||
});
|
||||
});
|
||||
},
|
||||
onChange: current => {
|
||||
this.setState({ pageInfo: { ...pageInfo, current } }, () => {
|
||||
this.getData();
|
||||
selectedRowKeys.forEach((v) => {
|
||||
let item = this.getItemById(v);
|
||||
if (item) this.selectedData[v] = item;
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
const rowSelection = {
|
||||
selectedRowKeys,
|
||||
onChange: selectedRowKeys => this.setState({ selectedRowKeys })
|
||||
};
|
||||
dom = <React.Fragment>
|
||||
<WeaInputSearch value={query[searchParamsKey]} className="tableSearch"
|
||||
onChange={value => this.setState({ query: { ...query, [searchParamsKey]: value } })}
|
||||
onSearch={() => {
|
||||
this.setState({ pageInfo: { ...pageInfo, current: 1 } }, () => {
|
||||
this.getData();
|
||||
selectedRowKeys.forEach((v) => {
|
||||
let item = this.getItemById(v);
|
||||
if (item) this.selectedData[v] = item;
|
||||
});
|
||||
});
|
||||
}}/>
|
||||
<WeaTable dataSource={listDatas} loading={loading} pagination={pagination} scroll={{ y: sheight }}
|
||||
onRowClick={this.handleRowClick} rowSelection={!isSingle ? rowSelection : null}
|
||||
rowKey={rowKey || "id"} columns={columns}/>
|
||||
</React.Fragment>;
|
||||
}
|
||||
dialogType === "table" && isSingle && buttons.splice(0, 1);
|
||||
return (
|
||||
<WeaDialog
|
||||
{...this.props} initLoadCss ref={dom => this.dialog = dom} title={getLabel(111, "数据选择")}
|
||||
className="custom_browser_dialog" 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 CustomBrowserDialog;
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
/*
|
||||
* 自定义浏览框组件
|
||||
* 选择框左边
|
||||
* @Author: 黎永顺
|
||||
* @Date: 2024/8/30
|
||||
* @Wechat:
|
||||
* @Email: 971387674@qq.com
|
||||
* @description:
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
import { WeaLocaleProvider } from "ecCom";
|
||||
|
||||
const getLabel = WeaLocaleProvider.getLabel;
|
||||
|
||||
class CustomBrowserMutiLeft extends Component {
|
||||
render() {
|
||||
const { datas } = this.props;
|
||||
const list = datas.map(item => {
|
||||
return <li>
|
||||
<div className="item-wrap" style={{ fontSize: 12 }}> {item.name} </div>
|
||||
<div className="icon-wrap"/>
|
||||
<i className="icon-coms-Selected"/>
|
||||
</li>;
|
||||
});
|
||||
return (
|
||||
<div className="wea-crm-list">
|
||||
<ul className="wea-crm-list-wrapper">
|
||||
{list}
|
||||
</ul>
|
||||
{
|
||||
list.length === 0 &&
|
||||
<div className="empty-tip" style={{ color: "#2f2929", paddingTop: 30, textAlign: "center" }}>
|
||||
{getLabel(111, "没有可显示的数据")}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default CustomBrowserMutiLeft;
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
/*
|
||||
* 自定义浏览框组件
|
||||
* 选择框右边
|
||||
* @Author: 黎永顺
|
||||
* @Date: 2024/8/30
|
||||
* @Wechat:
|
||||
* @Email: 971387674@qq.com
|
||||
* @description:
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
import { WeaInputSearch, WeaLocaleProvider, WeaNewScroll } from "ecCom";
|
||||
import { Tree } from "antd";
|
||||
|
||||
const getLabel = WeaLocaleProvider.getLabel;
|
||||
const TreeNode = Tree.TreeNode;
|
||||
|
||||
class CustomBrowserMutiRight extends Component {
|
||||
generateTreeNodes = () => {
|
||||
|
||||
};
|
||||
|
||||
render() {
|
||||
const { height } = this.props;
|
||||
return (
|
||||
<div className="wea-transfer-right">
|
||||
<WeaInputSearch/>
|
||||
<div>
|
||||
<WeaNewScroll height={height || 400}>
|
||||
{/*<Tree className="transfer-tree"*/}
|
||||
{/* draggable*/}
|
||||
{/* multiple={true}*/}
|
||||
{/* async={true}*/}
|
||||
{/* selectable={true}>*/}
|
||||
{/* {this.generateTreeNodes()}*/}
|
||||
{/*</Tree>*/}
|
||||
</WeaNewScroll>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default CustomBrowserMutiRight;
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
/*
|
||||
* 自定义浏览框组件
|
||||
* 弹框操作栏
|
||||
* @Author: 黎永顺
|
||||
* @Date: 2024/8/30
|
||||
* @Wechat:
|
||||
* @Email: 971387674@qq.com
|
||||
* @description:
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
import { WeaLocaleProvider } from "ecCom";
|
||||
import { Button } from "antd";
|
||||
|
||||
const getLabel = WeaLocaleProvider.getLabel;
|
||||
|
||||
class CustomBrowserOperation extends Component {
|
||||
render() {
|
||||
const {
|
||||
moveToLeft,
|
||||
moveToRight,
|
||||
leftArrowText,
|
||||
rightArrowText,
|
||||
leftActive,
|
||||
rightActive,
|
||||
className,
|
||||
leftAllActive,
|
||||
moveAllToLeft,
|
||||
rightAllActive,
|
||||
moveAllToRight
|
||||
} = this.props;
|
||||
|
||||
const moveToLeftButton = (
|
||||
<Button type="primary" size="small" disabled={!rightActive} onClick={moveToRight}>
|
||||
{<span><i className="icon-coms-Browse-box-Add-to"/></span>}
|
||||
</Button>
|
||||
);
|
||||
const moveToRightButton = (
|
||||
<Button type="primary" size="small" disabled={!leftActive} onClick={moveToLeft}>
|
||||
{<span><i className="icon-coms-Browse-box-delete"/></span>}
|
||||
</Button>
|
||||
);
|
||||
|
||||
const moveAllToLeftButton = (
|
||||
<Button type="primary" size="small" disabled={!leftAllActive} onClick={moveAllToRight}>
|
||||
{<span><i className="icon-coms-Browse-box-add-all"/></span>}
|
||||
</Button>
|
||||
);
|
||||
const moveAllToRightButton = (
|
||||
<Button type="primary" size="small" disabled={!rightAllActive} onClick={moveAllToLeft}>
|
||||
{<span><i className="icon-coms-Browse-box-Delete-all"/></span>}
|
||||
</Button>
|
||||
);
|
||||
return (
|
||||
<div className={className}>
|
||||
{moveToLeftButton}
|
||||
{moveToRightButton}
|
||||
{moveAllToLeftButton}
|
||||
{moveAllToRightButton}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default CustomBrowserOperation;
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
/*
|
||||
* 自定义浏览框组件
|
||||
*
|
||||
* @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;
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
.custom_browser_dialog {
|
||||
.tableSearch {
|
||||
float: right;
|
||||
margin: 16px;
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.ant-spin-nested-loading, .ant-spin-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.wea-input-focus {
|
||||
height: 35px !important;
|
||||
//width: 100% !important;
|
||||
|
||||
input {
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -12,6 +12,26 @@ export const roleConditions = [
|
|||
rules: "required|string",
|
||||
viewAttr: 3
|
||||
},
|
||||
{
|
||||
browserConditionParam: {},
|
||||
conditionType: "CUSTOMBROWSER",
|
||||
domkey: ["taxAgentIds"],
|
||||
fieldcol: 14,
|
||||
label: "个税扣缴义务人",
|
||||
lanId: 111,
|
||||
labelcol: 6,
|
||||
viewAttr: 2
|
||||
},
|
||||
{
|
||||
browserConditionParam: {},
|
||||
conditionType: "CUSTOMBROWSER",
|
||||
domkey: ["sobIds"],
|
||||
fieldcol: 14,
|
||||
label: "薪资账套",
|
||||
lanId: 111,
|
||||
labelcol: 6,
|
||||
viewAttr: 2
|
||||
},
|
||||
{
|
||||
conditionType: "TEXTAREA",
|
||||
domkey: ["description"],
|
||||
|
|
@ -9,9 +9,11 @@
|
|||
*/
|
||||
import React, { Component } from "react";
|
||||
import { WeaInputSearch, WeaLocaleProvider, WeaTable, WeaTop } from "ecCom";
|
||||
import { Button, message, Modal } from "antd";
|
||||
import * as API from "../../apis/taxAgent";
|
||||
import { Button } from "antd";
|
||||
import "./index.less";
|
||||
import AddRoleDialog from "./components/addRoleDialog";
|
||||
import RoleDetailSetDialog from "./components/roleDetailSetDialog";
|
||||
|
||||
const getLabel = WeaLocaleProvider.getLabel;
|
||||
|
||||
|
|
@ -19,7 +21,8 @@ class Index extends Component {
|
|||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
query: { name: "" }, dataSource: [], columns: [], pageInfo: { current: 1, pageSize: 10, total: 0 }
|
||||
query: { name: "" }, dataSource: [], columns: [], pageInfo: { current: 1, pageSize: 10, total: 0 },
|
||||
loading: false, selectedRowKeys: [], addRoleDialog: { taxAgentId: "", visible: false }
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -30,17 +33,49 @@ class Index extends Component {
|
|||
getRoleList = () => {
|
||||
const { query, pageInfo } = this.state;
|
||||
const paylaod = { ...pageInfo, ...query };
|
||||
this.setState({ loading: true });
|
||||
API.getRoleList(paylaod).then(({ status, data }) => {
|
||||
this.setState({ loading: false });
|
||||
if (status) {
|
||||
console.log(data);
|
||||
const { list: dataSource, columns, pageNum: current, pageSize, total } = data;
|
||||
this.setState({
|
||||
dataSource, pageInfo: { ...pageInfo, current, pageSize, total },
|
||||
columns: [...columns, {
|
||||
title: getLabel(111, "操作"), width: 120, dataIndex: "action",
|
||||
render: (__, record) => (
|
||||
<a href="javascript:void(0)" onClick={() => this.deleteAuthRole([record.id])}>{getLabel(111, "删除")}</a>)
|
||||
}]
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
deleteAuthRole = (payload) => {
|
||||
Modal.confirm({
|
||||
title: getLabel(111, "信息确认"),
|
||||
content: getLabel(111, "确认要删除吗?"),
|
||||
onOk: () => {
|
||||
API.deleteAuthRole(payload).then(({ status, errormsg }) => {
|
||||
if (status) {
|
||||
message.success(getLabel(111, "操作成功！"));
|
||||
this.setState({ selectedRowKeys: [] }, () => this.getRoleList());
|
||||
} else {
|
||||
message.error(errormsg);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { query, dataSource, columns, pageInfo } = this.state;
|
||||
const {
|
||||
query, dataSource, columns, pageInfo, loading, selectedRowKeys, addRoleDialog, roleSetDialog
|
||||
} = this.state;
|
||||
const buttons = [
|
||||
<Button type="primary">{getLabel(111, "新建")}</Button>,
|
||||
<Button type="primary" onClick={() => this.setState({
|
||||
addRoleDialog: { taxAgentId: "", visible: true }
|
||||
})}>{getLabel(111, "新建")}</Button>,
|
||||
<Button type="ghost" disabled={_.isEmpty(selectedRowKeys)}
|
||||
onClick={() => this.deleteAuthRole(selectedRowKeys)}>{getLabel(111, "批量删除")}</Button>,
|
||||
<WeaInputSearch value={query.name} onChange={name => this.setState({ query: { name } })}
|
||||
onSearch={() => this.setState({ pageInfo: { ...pageInfo, current: 1 } },
|
||||
() => this.getRoleList())}/>
|
||||
|
|
@ -58,14 +93,28 @@ class Index extends Component {
|
|||
this.setState({ pageInfo: { ...pageInfo, current } }, () => this.getRoleList());
|
||||
}
|
||||
};
|
||||
const rowSelection = {
|
||||
selectedRowKeys, onChange: (selectedRowKeys) => this.setState({ selectedRowKeys })
|
||||
};
|
||||
return (
|
||||
<WeaTop
|
||||
title={getLabel(111, "角色管理")} icon={<i className="icon-coms-Flow-setting"/>}
|
||||
iconBgcolor="#F14A2D" buttons={buttons} className="rolemanagement-index"
|
||||
>
|
||||
<div className="rolemanagement-content">
|
||||
<WeaTable dataSource={dataSource} columns={columns} pagination={pagination}
|
||||
scroll={{ y: `calc(100vh - 173px)` }}/>
|
||||
<WeaTable dataSource={dataSource} columns={columns} pagination={pagination} loading={loading}
|
||||
rowSelection={rowSelection} scroll={{ y: `calc(100vh - 173px)` }}/>
|
||||
{/*添加角色*/}
|
||||
<AddRoleDialog {...addRoleDialog} onSearch={this.getRoleList}
|
||||
showRoleSetDialog={this.showRoleSetDialog}
|
||||
onCancel={callback => this.setState({
|
||||
addRoleDialog: { ...addRoleDialog, visible: false }
|
||||
}, () => callback && callback())}/>
|
||||
{/*角色详情设置*/}
|
||||
<RoleDetailSetDialog {...roleSetDialog} onSearch={this.getRoleList}
|
||||
onCancel={callback => this.setState({
|
||||
roleSetDialog: { ...roleSetDialog, visible: false }
|
||||
}, () => callback && callback())}/>
|
||||
</div>
|
||||
</WeaTop>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -9,4 +9,8 @@
|
|||
background: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
.wea-input-focus .ant-input {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ import EditModal from "./editModal";
|
|||
import TipLabel from "../../components/TipLabel";
|
||||
import { decentralizationConditions, editConditions } from "./editConditions";
|
||||
import LogDialog from "../../components/logViewModal";
|
||||
import RoleSetting from "./components/roleSetting";
|
||||
import "./index.less";
|
||||
|
||||
const getLabel = WeaLocaleProvider.getLabel;
|
||||
|
|
@ -412,11 +411,6 @@ export default class TaxAgent extends React.Component {
|
|||
);
|
||||
}
|
||||
};
|
||||
} else if (item.dataIndex === "role") {
|
||||
return {
|
||||
...item,
|
||||
render: (text, record) => (<RoleSetting taxAgent={record} onSearch={() => getTaxAgentList({})}/>)
|
||||
};
|
||||
} else {
|
||||
return { ...item };
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { Spin } from "antd";
|
||||
import { WeaSwitch } from "comsMobx";
|
||||
import { WeaAlertPage, WeaFormItem, WeaHelpfulTip, WeaLocaleProvider, WeaSearchGroup } from "ecCom";
|
||||
import CustomBrowser from "../components/CustomBrowser";
|
||||
|
||||
const getLabel = WeaLocaleProvider.getLabel;
|
||||
|
||||
|
|
@ -26,7 +27,7 @@ export const getConditionFields = (condition) => {
|
|||
};
|
||||
|
||||
// 渲染form表单: 一般对form的渲染都统一使用该方法
|
||||
export const getSearchs = (form, condition, col, isCenter, onChange = () => void (0), title) => {
|
||||
export const getSearchs = (form, condition, col, isCenter, onChange = () => void (0), title, classnames = "") => {
|
||||
const { isFormInit } = form;
|
||||
const formParams = form.getFormParams();
|
||||
let group = [];
|
||||
|
|
@ -41,14 +42,13 @@ export const getSearchs = (form, condition, col, isCenter, onChange = () => void
|
|||
wrapperCol={{ span: `${fields.fieldcol}` }} // 右侧控件占一行比例
|
||||
error={form.getError(fields)} // 错误提示: 处理表单中有必填项,保存的校验
|
||||
tipPosition="bottom" // 错误提示的显示位置: top/bottom
|
||||
className={(fields.domkey[0] === "subcompanyName" || fields.domkey[0] === "departmentName") ? "hideFormItem" : ""}
|
||||
className={(fields.domkey[0] === "subcompanyName" || fields.domkey[0] === "departmentName") ? "hideFormItem" : classnames}
|
||||
>
|
||||
<WeaSwitch
|
||||
fieldConfig={fields}
|
||||
form={form}
|
||||
formParams={formParams}
|
||||
onChange={onChange}
|
||||
/>
|
||||
{
|
||||
fields.conditionType === "CUSTOMBROWSER" ?
|
||||
<CustomBrowser fieldConfig={fields} onChange={onChange} form={form} formParams={formParams}/> :
|
||||
<WeaSwitch fieldConfig={fields} form={form} formParams={formParams} onChange={onChange}/>
|
||||
}
|
||||
{
|
||||
fields.helpfulTitle &&
|
||||
<WeaHelpfulTip title={fields.helpfulTitle} style={{ position: "absolute", right: "-20px", top: "25%" }}/>
|
||||
|
|
|
|||
Loading…
Reference in New Issue