展位选择修改

one_stop_public/libs/Split/TableSelectNormal.js

+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>
+  );
+}

one_stop_public/libs/Split/TableSelectZhanWei.js

+/**
+ * 钟是志
+ * 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>;
+}

one_stop_public/libs/Split/styles.less

+.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;
+      }
+    }
+  }
+}

one_stop_public/libs/TableSelect.js

@@ -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>
 				)}