黔南双选会展位组件修改

one_stop_public/libs/Split/TableSelectZhanWei.js

@@ -6,7 +6,7 @@
  * 27345 门户--单位个人中心，，，双选会申请，选择展位的图片优化
  * */
 import React, { Fragment } from 'react';
-import { Tag, Radio } from 'antd';
+import { Tag, Radio, Tooltip } from 'antd';
 import styles from './styles.less';
 
 
@@ -17,25 +17,28 @@ export default function TableSelectZhanWei(props) {
     valueName, dataSource,
     columns3, allWidth,
     get, otherProps,
-    callback,selects
+    callback, selects,
   } = props;
 
-  const { headerInfoFields,
+  const {
+    headerInfoFields,
     rowKey,
     prefixName = '',
     statusKey,
+    noDataSentence = '暂无可选数据',
     canSelectKeys = [],
     typeList = [],
+    selectedStyle = {},
   } = otherProps;
   // console.log(otherProps, dataSource.list);
   if (!dataSource || !dataSource.list || !dataSource.list.length) {
-    return <div>暂无可选数据</div>;
+    return <div className={styles.noData}>{noDataSentence}</div>;
   }
   const data = dataSource.list;
 
   const selectItem = (selectData) => {
     callback(selectData);
-  }
+  };
 
   // console.log(selects);
 
@@ -44,8 +47,8 @@ export default function TableSelectZhanWei(props) {
     {headerInfoFields && headerInfoFields.length &&
     <div className={styles.header}>
       {headerInfoFields.map((g) => {
-        return <span key={g.key}>
-          {g.label} : {data[0][g.key]}
+        return <span key={g.key} className={styles.headOne}>
+          <span className={styles.headTitle}>{g.label}</span> : {data[0][g.key]}
         </span>;
       })}
     </div>
@@ -61,8 +64,46 @@ export default function TableSelectZhanWei(props) {
           const nowSelect = !!selects[item[rowKey]];
           return <div className={styles.item}
                       key={item[rowKey]}
+                      style={
+                        nowSelect ? {
+                          ...selectedStyle,
+                        } : {
+                          ...typeConfig.style,
+                        }
+                      }
+                      onClick={() => {
+                        if (defaultChecked) {
+                          selectItem(item);
+                        }
+                      }}
           >
-            <div className={styles.itemHead}>
+
+            <div className={styles.name}>
+              <Tooltip title={nowSelect ? '当前选择' : typeConfig.text}>
+                {prefixName + item.booth_no_name}
+              </Tooltip>
+            </div>
+          </div>;
+        })
+      }
+    </div>
+
+    <div className={styles.footer}>
+      {
+        Object.keys(typeList).map((g) => {
+          const typeOne = typeList[g];
+          return <span key={g} className={styles.tipsSpan}>
+            <span className={styles.tipsBlock} style={typeOne.styleTips}></span>
+            <span className={styles.tipsText}>{typeOne.text}</span>
+          </span>;
+        })
+      }
+    </div>
+
+  </div>;
+}
+
+{/* <div className={styles.itemHead}>
               <div>
                 <Radio disabled={!defaultChecked}
                        checked={!defaultChecked || nowSelect}
@@ -77,14 +118,5 @@ export default function TableSelectZhanWei(props) {
                   {typeConfig.text}
                 </Tag>
               </div>
-            </div>
-            <div className={styles.name}>
-              {prefixName + item.booth_no_name}
-            </div>
-          </div>;
-        })
-      }
-    </div>
-
-  </div>;
+            </div>*/
 }

one_stop_public/libs/Split/styles.less

@@ -8,36 +8,65 @@
     }
   }
 }
+.headOne{
+  padding-right: 20px;
+}
+.headTitle{
+  color: #999;
+}
 
 .zhanWei{
+  height: 100%;
   //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%);
+    //grid-template-columns: repeat(auto-fill, 50%);
+    text-align: center;
+    border-radius: 2px;
+  }
+  .footer{
+    background: #f2f2f2;
+    color: #000;
+    padding: 10px;
+    min-height: 40px;
+    font-size: 14px;
+    //grid-template-columns: repeat(auto-fill, 50%);
+    text-align: center;
+    border-radius: 4px;
+    margin: 20px 0;
+
   }
   .list{
     display: grid;
-    grid-template-columns: repeat(auto-fill, 30%);
+    grid-template-columns: repeat(auto-fill, 50px);
     column-gap: 15px;
     row-gap: 15px;
-    max-height: 50vh;
+    height: 80%;
+    //max-height: 50vh;
+    //min-height: 30vh;
     overflow-y: auto;
-    margin-top: 20px;
+    margin: 20px 0;
+    grid-auto-rows: min-content;
     .item{
       display: grid;
       grid-template-columns: 1fr;
-      grid-template-rows: 20px 1fr;
-      height: 70px;
+      grid-template-rows: 1fr;
+      height: 50px;
       align-items: center;
       justify-items: center;
-      border: 1px solid #e6e6e6;
-      border-radius: 2px;
+      //border: 1px solid #e6e6e6;
+      border: 1px solid #999999;
+      border-radius: 4px;
       padding: 5px;
+      font-size: 12px;
+      font-family: PingFangSC, PingFangSC-Medium;
+      font-weight: 500;
+      text-align: center;
+      color: #222222;
       .itemHead{
         display: grid;
         grid-template-columns: 1fr 1fr;
@@ -50,9 +79,33 @@
         justify-self: end;
       }
       .name{
-        font-weight: bold;
-        font-size: 16px;
+        //font-weight: bold;
+        //font-size: 16px;
       }
     }
   }
 }
+
+.noData{
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  width: 100%;
+  height: 100%;
+  min-height: 400px;
+}
+
+.tipsSpan{
+  padding: 0 20px;
+  .tipsBlock{
+    display: inline-block;
+    border: 1px solid #999999;
+    border-radius: 4px;
+    height: 14px;
+    width: 14px;
+  }
+  .tipsText{
+    padding-left: 10px;
+
+  }
+}

one_stop_public/libs/UploadCom.js

@@ -56,7 +56,6 @@ class UploadCom extends React.Component {
 			previewImage: '',
 		};
 		this.otherProps = {};
-		console.log(props.json);
 		if (props.json?.otherProps) {
 			this.otherProps = props.json?.otherProps;
 			try {