提交 b0c968e6 authored 作者: 钟是志's avatar 钟是志

展位选择修改

上级 fdc6fe60
import React, { Fragment, useEffect, useRef, useState } from 'react';
import { Button, Table } from 'antd';
import TableSelectZhanWei from '@/webPublic/one_stop_public/libs/Split/TableSelectZhanWei';
export default function TableSelectNormal(props) {
const {
isMultiple, isShowQuanXuan,
selectAll, cancelAll,
valueName, dataSource,
columns3, allWidth,
get, otherProps,
} = props;
const [thisOtherProps, setThisOtherProps] = useState(null);
useEffect(() => {
if (otherProps && otherProps.length) {
try {
let thisOtherPropsN = new Function(otherProps)();
setThisOtherProps(thisOtherPropsN);
} catch (e) {
}
}
}, [otherProps]);
if(thisOtherProps && thisOtherProps.showType === 'card-select'){
return <TableSelectZhanWei {...props} otherProps={thisOtherProps}/>;
}
return (
<Fragment>
{isMultiple && isShowQuanXuan !== false && (
<>
{' '}
<Button
id={'quanXuanButton'}
type={'primary'}
style={{ margin: '0 10px 10px 0' }}
onClick={selectAll}>
全选
</Button>
<Button
id={'quXiaoQuanXuanButton'}
type={'primary'}
style={{ marginBottom: '10px' }}
onClick={cancelAll}>
取消全选
</Button>
</>
)}
<Table
rowKey={valueName}
size='small'
dataSource={dataSource.list}
columns={columns3}
scroll={{ x: get === 'mobile' ? 'max-content' : allWidth }}
/>
</Fragment>
);
}
/**
* 钟是志
* 2022年5月31日
* 禅道需求定制化
* 27141 [黔南]门户---单位个人中心,,双选会申请可视化展示,,发布到门户后,在邀请函页面也可视化展示
* */
import React, { Fragment } from 'react';
import { Tag, Radio } from 'antd';
import styles from './styles.less';
export default function TableSelectZhanWei(props) {
const {
isMultiple, isShowQuanXuan,
selectAll, cancelAll,
valueName, dataSource,
columns3, allWidth,
get, otherProps,
callback,selects
} = props;
const { headerInfoFields,
rowKey,
prefixName = '',
statusKey,
canSelectKeys = [],
typeList = [],
} = otherProps;
// console.log(otherProps, dataSource.list);
if (!dataSource || !dataSource.list || !dataSource.list.length) {
return <div>暂无可选数据</div>;
}
const data = dataSource.list;
const selectItem = (selectData) => {
callback(selectData);
}
// console.log(selects);
return <div className={styles.zhanWei}>
{headerInfoFields && headerInfoFields.length &&
<div className={styles.header}>
{headerInfoFields.map((g) => {
return <span key={g.key}>
{g.label} : {data[0][g.key]}
</span>;
})}
</div>
}
<div className={styles.list}>
{
data.map((item, index) => {
const status = item[statusKey];
const defaultChecked = canSelectKeys.includes(status + '');
const typeConfig = typeList[status + ''] || {};
const nowSelect = !!selects[item[rowKey]];
return <div className={styles.item}
key={item[rowKey]}
>
<div className={styles.itemHead}>
<div>
<Radio disabled={!defaultChecked}
checked={!defaultChecked || nowSelect}
onChange={(e) => {
selectItem(item);
}}
>
</Radio>
</div>
<div className={styles.statusTag}>
<Tag color={typeConfig.color}>
{typeConfig.text}
</Tag>
</div>
</div>
<div className={styles.name}>
{prefixName + item.booth_no_name}
</div>
</div>;
})
}
</div>
</div>;
}
.zhanWei{
//padding: 10px;
.header{
background-color: #EEF5FB;
color: #000;
display: grid;
padding: 10px;
min-height: 32px;
font-size: 16px;
grid-template-columns: repeat(auto-fill, 50%);
}
.list{
display: grid;
grid-template-columns: repeat(auto-fill, 30%);
column-gap: 15px;
row-gap: 15px;
max-height: 50vh;
overflow-y: auto;
margin-top: 20px;
.item{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 20px 1fr;
height: 70px;
align-items: center;
justify-items: center;
border: 1px solid #e6e6e6;
border-radius: 2px;
padding: 5px;
.itemHead{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
font-size: 12px;
justify-items: start;
width: 100%;
}
.statusTag{
justify-self: end;
}
.name{
font-weight: bold;
font-size: 16px;
}
}
}
}
......@@ -3,6 +3,7 @@ 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';
const Modal = getModal();
@connect(({ DataColumn, SqlManageEntity, loading }) => ({
......@@ -164,7 +165,7 @@ export default class TableSelect extends React.Component {
render() {
const {
json: { isMultiple, sql, optionType, showTable, isShowQuanXuan },
json: { isMultiple, sql, optionType, showTable, isShowQuanXuan, otherProps },
dataColumn: { referenceObjId },
sqlModel,
columns,
......@@ -238,11 +239,9 @@ export default class TableSelect extends React.Component {
});
}
// console.log(this.props);
// console.log('-0000 TableSelect000');
return (
<div>
{Object.keys(selects).length > 0 ? (
{Object.keys(selects).length > 0 ? ( // 是否显示表格
showTable ? (
<Table
rowKey={valueName}
......@@ -273,9 +272,11 @@ export default class TableSelect extends React.Component {
maskClosable={false}
title={`请选择`}
visible={visiable}
onOk={this.closeModal}
onCancel={this.closeModal}>
{optionType == 'reference' ? (
footer={null}
// onOk={this.closeModal}
onCancel={this.closeModal}
>
{optionType === 'reference' ? (
referenceObjId ? (
<FormList
rights={this.props.rights || []}
......@@ -306,35 +307,20 @@ export default class TableSelect extends React.Component {
sql={sql}
/>
) : (
<>
{isMultiple && isShowQuanXuan !== false && (
<>
{' '}
<Button
id={'quanXuanButton'}
type={'primary'}
style={{ margin: '0 10px 10px 0' }}
onClick={this.selectAll}>
全选
</Button>
<Button
id={'quXiaoQuanXuanButton'}
type={'primary'}
style={{ marginBottom: '10px' }}
onClick={this.cancelAll}>
取消全选
</Button>
</>
)}
<TableSelectNormal isMultiple={isMultiple}
allWidth={allWidth}
cancelAll={this.cancelAll}
selectAll={this.selectAll}
isShowQuanXuan={isShowQuanXuan}
valueName={valueName}
dataSource={dataSource}
columns3={columns3}
otherProps={otherProps}
get={this.props.get}
selects={this.state.selects}
callback={this.select}
<Table
rowKey={valueName}
size="small"
dataSource={dataSource.list}
columns={columns3}
scroll={{ x: this.props.get === 'mobile' ? 'max-content' : allWidth }}
/>
</>
/>
)}
</Modal>
)}
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论