Skip to content

W
WebPublic
提交 50e595bb authored 作者: 钟是志's avatar 钟是志
浏览文件
操作

28713 【弹出列表框】禁用优化

上级 b02d0411
隐藏空白字符变更
内嵌 并排
正在显示 包含 341 行增加 和 290 行删除
one_stop_public/libs/TableSelect.js
浏览文件 @ 50e595bb
import React from "react"; import React from 'react';
import { Button, message, Table, Tag } from "antd"; import { Button, message, Table, Tag } from 'antd';
import FormList from "./formList/index"; import FormList from './formList/index';
import { connect } from "dva"; import { connect } from 'dva';
import { getModal } from '@/webPublic/one_stop_public/utils/utils'; import { getModal } from '@/webPublic/one_stop_public/utils/utils';
import TableSelectNormal from '@/webPublic/one_stop_public/libs/Split/TableSelectNormal'; import TableSelectNormal from '@/webPublic/one_stop_public/libs/Split/TableSelectNormal';
import styles from './Split/styles.less'; import styles from './Split/styles.less';
const Modal = getModal(); const Modal = getModal();
@connect(({ DataColumn, SqlManageEntity, loading }) => ({ @connect(({
DataColumn, DataColumn,
SqlManageEntity, SqlManageEntity,
loading: loading.models.DataColumn || loading.models.SqlManageEntity, loading
}) => ({
DataColumn,
SqlManageEntity,
loading: loading.models.DataColumn || loading.models.SqlManageEntity,
})) }))
export default class TableSelect extends React.Component { export default class TableSelect extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
const value = props.value || {}; const value = props.value || {};
this.otherProps = {}; this.otherProps = {};
if (props.json.otherProps && props.json.otherProps.length) { if (props.json.otherProps && props.json.otherProps.length) {
try { try {
this.otherProps = new Function(props.json.otherProps)(); this.otherProps = new Function(props.json.otherProps)();
} catch (e) { } catch (e) {
console.log('TableSelect组件 otherProps 获取失败') console.log('TableSelect组件 otherProps 获取失败');
} }
} }
this.state = { this.state = {
selects: value.selects || {}, selects: value.selects || {},
visiable: value.visiable, visiable: value.visiable,
isAll: value.isAll != null ? value.isAll : false, isAll: value.isAll != null ? value.isAll : false,
querys: value.querys || [], querys: value.querys || [],
sql: value.sql, sql: value.sql,
}; };
} }
triggerChange = (changedValue) => {
// Should provide an event to pass value to Form.
const onChange = this.props.onChange;
if (onChange) {
// console.log('changedValue', changedValue);
onChange(Object.assign({}, this.state, changedValue));
}
};
triggerChange = (changedValue) => { componentWillReceiveProps(nextProps) {
// Should provide an event to pass value to Form. // Should be a controlled component.
const onChange = this.props.onChange; if ('value' in nextProps) {
if (onChange) { const value = nextProps.value;
// console.log('changedValue', changedValue);
onChange(Object.assign({}, this.state, changedValue));
}
};
componentWillReceiveProps(nextProps) { if (value != null && value instanceof Object) {
// Should be a controlled component. this.setState(value);
if ('value' in nextProps) { }
const value = nextProps.value; //
}
}
if (value != null && value instanceof Object) { remove = (rowKey) => {
this.setState(value); const { selects } = this.state;
} delete selects[rowKey];
// if (!('value' in this.props)) {
} this.setState({ selects });
} }
this.triggerChange({ selects });
};
remove = (rowKey) => { select = (obj) => {
const { selects } = this.state; var { selects } = this.state;
delete selects[rowKey]; const {
if (!('value' in this.props)) { json: {
this.setState({ selects }); isMultiple,
} optionType
this.triggerChange({ selects }); },
}; } = this.props;
let valueName = this.props.json.valueName;
select = (obj) => { if (optionType == 'reference' && this.props.dataColumn.referenceObjId) {
var { selects } = this.state; valueName = this.props.dataColumn.referenceCodeName;
const { }
json: { isMultiple, optionType },
} = this.props;
let valueName = this.props.json.valueName;
if (optionType == 'reference' && this.props.dataColumn.referenceObjId) { const kk = obj[valueName];
valueName = this.props.dataColumn.referenceCodeName; if (kk == null) {
} message.error('指定的取值字段不存在或者值为空');
return;
}
if (!isMultiple) {
selects = {
[kk]: {
...obj,
selectKey: kk
}
};
} else {
selects[kk] = obj;
selects[kk].selectKey = kk;
}
if (!('value' in this.props)) {
this.setState({ selects });
}
this.triggerChange({ selects });
};
selectAll = () => {
let { selects } = this.state;
const {
dataSource,
json
} = this.props;
let {
valueName,
optionType
} = json;
const { list } = dataSource;
if (optionType == 'reference' && this.props.dataColumn.referenceObjId) {
valueName = this.props.dataColumn.referenceCodeName;
}
if (list && Array.isArray(list)) {
for (let item of list) {
let kk = item[valueName];
selects[kk] = item;
selects[kk].selectKey = kk;
}
}
if (!('value' in this.props)) {
this.setState({ selects });
}
this.triggerChange({ selects });
};
const kk = obj[valueName]; cancelAll = () => {
if (kk == null) { let selects = {};
message.error('指定的取值字段不存在或者值为空'); if (!('value' in this.props)) {
return; this.setState({ selects });
} }
if (!isMultiple) { this.triggerChange({ selects });
selects = { [kk]: { ...obj, selectKey: kk } }; };
} else {
selects[kk] = obj;
selects[kk].selectKey = kk;
}
if (!('value' in this.props)) {
this.setState({ selects });
}
this.triggerChange({ selects });
};
selectAll = () => { close = (i) => {
let { selects } = this.state; var {
const { dataSource, json } = this.props; values,
let { valueName, optionType } = json; labels
const { list } = dataSource; } = this.state;
if (optionType == 'reference' && this.props.dataColumn.referenceObjId) { values.splice(i, 1);
valueName = this.props.dataColumn.referenceCodeName; labels.splice(i, 1);
} if (!('value' in this.props)) {
if (list && Array.isArray(list)) { this.setState({
for (let item of list) { values,
let kk = item[valueName]; labels
selects[kk] = item; });
selects[kk].selectKey = kk; }
} this.triggerChange({
} values,
if (!('value' in this.props)) { labels
this.setState({ selects }); });
} };
this.triggerChange({ selects });
};
cancelAll = () => { open = () => {
let selects = {}; if (!('value' in this.props)) {
if (!('value' in this.props)) { this.setState({ visiable: true });
this.setState({ selects }); }
} this.triggerChange({ visiable: true });
this.triggerChange({ selects }); };
};
close = (i) => { closeModal = () => {
var { values, labels } = this.state; if (!('value' in this.props)) {
values.splice(i, 1); this.setState({ visiable: false });
labels.splice(i, 1); }
if (!('value' in this.props)) { const { resetSearchText } = this.props;
this.setState({ values, labels }); resetSearchText && resetSearchText();
} this.triggerChange({ visiable: false });
this.triggerChange({ values, labels }); };
};
open = () => { cancelOne = (record) => {
if (!('value' in this.props)) { var { selects } = this.state;
this.setState({ visiable: true }); const {
} json: {
this.triggerChange({ visiable: true }); isMultiple,
}; optionType
},
} = this.props;
let valueName = this.props.json.valueName;
closeModal = () => { if (optionType == 'reference' && this.props.dataColumn.referenceObjId) {
if (!('value' in this.props)) { valueName = this.props.dataColumn.referenceCodeName;
this.setState({ visiable: false }); }
}
const { resetSearchText } = this.props;
resetSearchText && resetSearchText();
this.triggerChange({ visiable: false });
};
cancelOne = (record) => { const kk = record[valueName];
var { selects } = this.state; if (kk == null) {
const { message.error('指定的取值字段不存在或者值为空');
json: { isMultiple, optionType }, return;
} = this.props; }
let valueName = this.props.json.valueName; if (selects[kk]) {
delete selects[kk];
}
if (!('value' in this.props)) {
this.setState({ selects });
}
this.triggerChange({ selects });
};
if (optionType == 'reference' && this.props.dataColumn.referenceObjId) { render() {
valueName = this.props.dataColumn.referenceCodeName; const {
} json: {
isMultiple,
sql,
optionType,
showTable,
isShowQuanXuan
},
dataColumn: { referenceObjId },
sqlModel,
columns,
dataSource,
} = this.props;
let disabled = this.props.disabled || this.props.json.disabled;
const { cardSelectModalProps = {} } = this.otherProps;
const kk = record[valueName]; let {
if (kk == null) { valueName,
message.error('指定的取值字段不存在或者值为空'); labelName
return; } = this.props.json;
} if (optionType == 'reference' && referenceObjId) {
if (selects[kk]) { valueName = this.props.dataColumn.referenceCodeName;
delete selects[kk]; labelName = this.props.dataColumn.referenceNameName;
} }
if (!('value' in this.props)) { if (valueName == null || valueName == '') {
this.setState({ selects }); return <>请指定取值的列名</>;
} }
this.triggerChange({ selects }); const {
}; selects,
visiable,
labels
} = this.state;
const keys = [];
for (let i in selects) {
keys.push(selects[i][valueName]);
}
const columns2 = [
...columns,
];
if (!disabled) {
columns2.push({
title: '操作',
render: (val, record) => <a onClick={this.remove.bind(this, record.selectKey)}>移除</a>,
},);
}
const columns3 = [
...columns,
];
if (!disabled) {
columns3.push( {
title: '操作',
render: (val, record) =>
keys.includes(record[valueName]) ? (
<a
onClick={() => {
this.cancelOne(record);
}}>
已选择
</a>
) : (
<a onClick={this.select.bind(this, record)}>选择</a>
),
},);
}
render() {
const {
json: { isMultiple, sql, optionType, showTable, isShowQuanXuan },
dataColumn: { referenceObjId },
sqlModel,
columns,
dataSource,
disabled,
} = this.props;
const { cardSelectModalProps = {} } = this.otherProps;
let { valueName, labelName } = this.props.json; const custom = {
if (optionType == 'reference' && referenceObjId) { isAll: this.state.isAll,
valueName = this.props.dataColumn.referenceCodeName; querys: this.state.querys,
labelName = this.props.dataColumn.referenceNameName; sql: this.state.sql,
} };
if (valueName == null || valueName == '') { let allWidth = 0;
return <>请指定取值的列名</>; if (columns3) {
} columns3.map((item, index) => {
const { selects, visiable, labels } = this.state; if (index === columns3.length - 1) {
const keys = []; item.fixed = 'right';
for (let i in selects) { item.width = 90;
keys.push(selects[i][valueName]); allWidth += 90;
} return item;
const columns2 = [ }
...columns, if (index === columns3.length - 2) {
{ allWidth += 150;
title: '操作', } else {
render: (val, record) => <a onClick={this.remove.bind(this, record.selectKey)}>移除</a>, if (item.width) {
}, allWidth += item.width;
]; } else {
const columns3 = [ item.width = 180;
...columns, allWidth += 180;
{ }
title: '操作', }
render: (val, record) => return item;
keys.includes(record[valueName]) ? ( });
<a }
onClick={() => {
this.cancelOne(record);
}}>
已选择
</a>
) : (
<a onClick={this.select.bind(this, record)}>选择</a>
),
},
];
const custom = {
isAll: this.state.isAll,
querys: this.state.querys,
sql: this.state.sql,
};
let allWidth = 0;
if (columns3) {
columns3.map((item, index) => {
if (index === columns3.length - 1) {
item.fixed = 'right';
item.width = 90;
allWidth += 90;
return item;
}
if (index === columns3.length - 2) {
allWidth += 150;
} else {
if (item.width) {
allWidth += item.width;
} else {
item.width = 180;
allWidth += 180;
}
}
return item;
});
}
return ( return (
<div> <div>
{Object.keys(selects).length > 0 ? ( // 是否显示表格 {Object.keys(selects).length > 0 ? ( // 是否显示表格
showTable ? ( showTable ? (
<Table <Table
rowKey={valueName} rowKey={valueName}
size="small" size="small"
dataSource={Object.values(selects)} dataSource={Object.values(selects)}
columns={columns2} columns={columns2}
pagination={false} pagination={false}
/> />
) : ( ) : (
Object.keys(selects).map((k) => ( Object.keys(selects)
<Tag key={k} closable={!disabled} onClose={this.remove.bind(this, k)}> .map((k) => (
{selects[k][labelName]} <Tag key={k} closable={!disabled} onClose={this.remove.bind(this, k)}>
</Tag> {selects[k][labelName]}
)) </Tag>
) ))
) : ( )
'' ) : (
)} ''
{!disabled && ( )}
<Button type="primary" onClick={this.open}> {!disabled && (
选择 <Button type="primary" onClick={this.open}>
</Button> 选择
)} </Button>
)}
{visiable && ( {visiable && (
<Modal <Modal
className={styles.ModalDiy} className={styles.ModalDiy}
width={this.props.get === 'mobile' ? '100%' : '60%'} width={this.props.get === 'mobile' ? '100%' : '60%'}
maskClosable={false} maskClosable={false}
title={`请选择`} title={`请选择`}
visible={visiable} visible={visiable}
// footer={[ // footer={[
// <Button key="back" // <Button key="back"
// onClick={this.closeModal} // onClick={this.closeModal}
...@@ -290,42 +341,42 @@ export default class TableSelect extends React.Component { ...@@ -290,42 +341,42 @@ export default class TableSelect extends React.Component {
// 确定 // 确定
// </Button>, // </Button>,
// ]} // ]}
onOk={this.closeModal} onOk={this.closeModal}
onCancel={this.closeModal} onCancel={this.closeModal}
{...cardSelectModalProps} {...cardSelectModalProps}
> >
{optionType === 'reference' ? ( {optionType === 'reference' ? (
referenceObjId ? ( referenceObjId ? (
<FormList <FormList
rights={this.props.rights || []} rights={this.props.rights || []}
notShowBack={true} notShowBack={true}
value={custom} value={custom}
objId={referenceObjId} objId={referenceObjId}
isFormCom={true} isFormCom={true}
isSelect={true} isSelect={true}
selects={keys} selects={keys}
valueName={valueName} valueName={valueName}
callback={this.select} callback={this.select}
sql={sql} sql={sql}
/> />
) : ( ) : (
'未关联数据对象' '未关联数据对象'
) )
) : sqlModel.dataObjId ? ( ) : sqlModel.dataObjId ? (
<FormList <FormList
rights={this.props.rights || []} rights={this.props.rights || []}
notShowBack={true} notShowBack={true}
value={custom} value={custom}
objId={sqlModel.dataObjId} objId={sqlModel.dataObjId}
isFormCom={true} isFormCom={true}
isSelect={true} isSelect={true}
selects={keys} selects={keys}
valueName={valueName} valueName={valueName}
callback={this.select} callback={this.select}
sql={sql} sql={sql}
/> />
) : ( ) : (
<TableSelectNormal isMultiple={isMultiple} <TableSelectNormal isMultiple={isMultiple}
allWidth={allWidth} allWidth={allWidth}
cancelAll={this.cancelAll} cancelAll={this.cancelAll}
selectAll={this.selectAll} selectAll={this.selectAll}
...@@ -339,10 +390,10 @@ export default class TableSelect extends React.Component { ...@@ -339,10 +390,10 @@ export default class TableSelect extends React.Component {
callback={this.select} callback={this.select}
/> />
)} )}
</Modal> </Modal>
)} )}
</div> </div>
); );
} }
} }
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论