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