fix: 台账选择器增加

src/core/Account/components/TablePack/index.js

@@ -5,7 +5,7 @@ import FileView from './components/FileView'
 import CoordView from './components/CoordView'
 import SelectView from './components/SelectView'
 import IconPack from '../../../components/IconPack'
-import { isJson, isObject } from '../../../../utils'
+import { isObject } from '../../../../utils'
 
 const getFileInfo = (formJson) => {
   let obj = {}
@@ -25,7 +25,7 @@ const getFileInfo = (formJson) => {
 
 const TablePack = (props) => {
 
-  const { readOnly, config, loading, dataSource, tableChange, btnsClick } = props
+  const { parent, readOnly, config, loading, dataSource, rowSelection, onRow, tableChange, btnsClick } = props
   const searchInput = useRef(null)
 
   const handleReset = (clearFilters, confirm) => {
@@ -103,7 +103,7 @@ const TablePack = (props) => {
         icon: <IconPack.ShanChu />,
       }
     ]
-  }, [readOnly])
+  }, [readOnly, parent])
 
   const fileColumns = useMemo(() => {
     const { webShowFieldGroup, formJson } = config
@@ -141,7 +141,7 @@ const TablePack = (props) => {
   }, [config])
 
   const columns = useMemo(() => {
-    return [
+    let columns = [
       {
         title: '序号',
         dataIndex: 'r',
@@ -197,7 +197,11 @@ const TablePack = (props) => {
         }
       }
     ]
-  }, [btns, fileColumns])
+    if (parent === '台账选择器') {
+      return fileColumns
+    }
+    return columns
+  }, [parent, btns, fileColumns])
 
   return (
     <Table
@@ -207,6 +211,8 @@ const TablePack = (props) => {
       loading={loading}
       columns={columns}
       dataSource={dataSource}
+      rowSelection={rowSelection}
+      onRow={onRow}
       pagination={false}
       scroll={{ y: 'calc(100% - 40px)' }}
       onChange={tableChange}

src/core/Account/index.less

@@ -5,7 +5,7 @@
   .tableRender {
     width: 100%;
     height: 100%;
-    padding-bottom: 40px;
+    padding-bottom: 50px;
     position: relative;
     .content {
       width: 100%;
@@ -92,9 +92,8 @@
       position: absolute;
       bottom: 0;
       left: 0;
-      padding: 0 20px;
       width: 100%;
-      height: 40px;
+      height: 50px;
       display: flex;
       align-items: center;
       justify-content: space-between;

src/core/widgets/business/AccountSelector/index.js

-import React, { useState, useMemo, useEffect } from 'react';
-import { Modal, Input, Table, Tooltip, message } from 'antd';
-import { SnippetsOutlined } from '@ant-design/icons';
-import { GetAccountConfigInfo, GetAccountPageList, getStationListByUserID } from '../../../../apis/process';
+import React, { useState, useEffect } from 'react'
+import { Input, message, Pagination } from 'antd'
+import { SnippetsOutlined } from '@ant-design/icons'
+import { GetAccountConfigInfo, GetAccountPageList, getStationListByUserID } from '../../../../apis/process'
 import styles from './index.less';
-import { isJson } from '../../../../utils';
-import Drag from '../../../components/Drag';
+import { isJson } from '../../../../utils'
+import TablePack from '../../../../core/Account/components/TablePack'
+import SearchGroup from '../../../../core/Account/components/SearchGroup'
+import Drag from '../../../components/Drag'
 
 const AccountSelector = (props) => {
 
-  const userID = window?.globalConfig?.userInfo?.OID || 1;
-  const { value, onChange, schema, addons } = props;
-  const { disabled, accountName, fieldshine, siteFilter, sql, isMultiple, presetValue, placeholder } = schema;
-
-  const [params, setParams] = useState({ info: '', total: 0, pageIndex: 1, pageSize: 20 });
-  const [loading, setLoading] = useState(false);
-  const [dataSource, setDataSource] = useState([]);
-  const [pageConfig, setPageConfig] = useState({ webShowFieldGroup: '' });
-  const [visible, setVisible] = useState(false);
-  const [keys, setKeys] = useState([]);
-
-  const columns = useMemo(() => {
-    const { webShowFieldGroup } = pageConfig;
-    let fields = webShowFieldGroup.split(',');
-    let array = [];
-    if (fields.length) {
-      fields.forEach(v => {
-        if (v) {
-          array.push({
-            key: new Date().getTime(),
-            title: v,
-            dataIndex: v,
-            width: 120,
-            ellipsis: true,
-            render: (value, r) => <Tooltip placement="top" title={value}>{value}</Tooltip>
-          });
-        }
-      });
-    }
-    return array;
-  }, [pageConfig]);
-
-  const onSearch = (value) => {
-    getPageList({ info: value });
-  };
+  const userID = window?.globalConfig?.userInfo?.OID || 1
+  const { value, onChange, schema, addons } = props
+  const { disabled, accountName, fieldshine, siteFilter, sql, isMultiple, presetValue, placeholder } = schema
+
+  const [params, setParams] = useState({
+    userID: userID,
+    accountName,
+    sortFields: '录入时间',
+    direction: 'desc',
+    total: 0,
+    pageIndex: 1,
+    pageSize: 100
+  })
+  const [loading, setLoading] = useState(false)
+  const [dataSource, setDataSource] = useState([])
+  const [config, setConfig] = useState({ webShowFieldGroup: '' })
+  const [visible, setVisible] = useState(false)
+  const [keys, setKeys] = useState([])
 
   const iconClick = () => {
     if (addons) {
@@ -53,21 +38,21 @@ const AccountSelector = (props) => {
         return message.info('请配置映射字段！');
       }
       setVisible(true);
-      if (!pageConfig.webShowFieldGroup) {
-        getPageConfig();
+      if (!config.webShowFieldGroup) {
+        getConfig();
       }
-      getPageList();
+      getDataSource();
     }
-  };
+  }
 
-  const getPageConfig = async () => {
+  const getConfig = async () => {
     const { code, data } = await GetAccountConfigInfo(accountName);
     if (code == 0) {
-      setPageConfig(data);
+      setConfig({ ...data, formJson: isJson(data.formJson) ? JSON.parse(data.formJson) : {} })
     }
-  };
+  }
 
-  const getPageList = async (outParams = {}) => {
+  const getDataSource = async (outParams = {}) => {
     let queryWheres = [];
     if (siteFilter) {
       const { code, data } = await getStationListByUserID(...[userID, false]);
@@ -105,15 +90,23 @@ const AccountSelector = (props) => {
       message.error(msg);
     }
     setLoading(false);
-  };
-
-  const tableChange = ({ current, pageSize }) => {
-    getPageList({ pageIndex: current, pageSize });
-  };
+  }
 
-  const rowChange = (keys, rows) => {
-    setKeys(keys);
-  };
+  const tableChange = (page, filters, sorter) => {
+    let queryWheres = []
+    Object.keys(filters).forEach(k => {
+      if (filters[k]?.[0]) {
+        queryWheres.push({ field: k, type: '包括', value: filters[k][0] })
+      }
+    })
+    let param = {
+      sortFields: sorter.order ? sorter.field : '录入时间',
+      direction: sorter.order !== 'ascend' ? 'desc' : 'asc',
+      queryWheres
+    }
+    setParams({ ...params, ...param })
+    getDataSource(param)
+  }
 
   const rowClick = (row) => {
     if (isMultiple) {
@@ -127,7 +120,7 @@ const AccountSelector = (props) => {
     } else {
       setKeys([row.ID]);
     }
-  };
+  }
 
   const onOk = () => {
     if (fieldshine.length > 1) {
@@ -154,7 +147,16 @@ const AccountSelector = (props) => {
       }
     }
     setVisible(false);
-  };
+  }
+
+  const search = (values) => {
+    setParams({ ...params, ...values })
+    getDataSource({ ...values })
+  }
+
+  const pageChange = (pageIndex, pageSize) => {
+    getDataSource({ pageIndex, pageSize })
+  }
 
   useEffect(() => {
     if (addons) {
@@ -162,9 +164,9 @@ const AccountSelector = (props) => {
     } else {
       onChange(presetValue);
     }
-  }, [presetValue]);
+  }, [presetValue])
 
-  const addonAfter = <SnippetsOutlined onClick={() => iconClick()} style={{ color: 'rgba(0, 0, 0, 0.25)' }} />;
+  const addonAfter = <SnippetsOutlined onClick={() => iconClick()} style={{ color: 'rgba(0, 0, 0, 0.25)' }} />
 
   return (
     <div className={styles.AccountSelector}>
@@ -182,53 +184,56 @@ const AccountSelector = (props) => {
         title={accountName}
         visible={visible}
         getContainer={false}
-        bodyStyle={{ height: 570, overflowY: 'auto' }}
+        bodyStyle={{ height: 570, paddingBottom: 0 }}
       >
-        <div style={{ display: 'flex' }}>
-          <div style={{ lineHeight: '31px', paddingRight: '10px' }}>快捷搜索:</div>
-          <Input.Search
-            value={params.info}
-            placeholder="请输入检索内容"
-            allowClear
-            onChange={(e) => setParams({ ...params, info: e.target.value })}
-            onSearch={onSearch}
-            enterButton
-            size={'middle'}
-            style={{ width: '400px', marginBottom: '10px' }}
-          />
+        <div className={styles.content}>
+          <div className={styles.top}>
+            <SearchGroup
+              onChange={search}
+              readOnly={true}
+            />
+          </div>
+          <div className={styles.bottom}>
+            <TablePack
+              loading={loading}
+              readOnly={true}
+              config={config}
+              dataSource={dataSource}
+              btnsClick={() => { }}
+              tableChange={tableChange}
+              parent='台账选择器'
+              rowSelection={{
+                type: isMultiple && fieldshine.length === 1 ? 'checkbox' : 'radio',
+                selectedRowKeys: keys,
+                fixed: 'left',
+                onChange: (keys) => setKeys(keys)
+              }}
+              onRow={record => ({
+                onClick: event => {
+                  event.stopPropagation();
+                  rowClick(record);
+                },
+              })}
+            />
+          </div>
+          <div className={styles.footer}>
+            <div className={styles.total}>共计{params.total}条数据</div>
+            <div className={styles.pagination}>
+              <Pagination
+                size='small'
+                showQuickJumper
+                pageSize={params.pageSize}
+                current={params.pageIndex}
+                total={params.total}
+                onChange={pageChange}
+              />
+            </div>
+          </div>
         </div>
-        <Table
-          rowKey={r => r.ID}
-          loading={loading}
-          bordered
-          size="small"
-          scroll={{ x: '100%', y: 400 }}
-          rowSelection={{
-            type: isMultiple && fieldshine.length === 1 ? 'checkbox' : 'radio',
-            selectedRowKeys: keys,
-            fixed: 'left',
-            onChange: rowChange
-          }}
-          onRow={record => ({
-            onClick: event => {
-              event.stopPropagation();
-              rowClick(record);
-            },
-          })}
-          pagination={{
-            total: params.total,
-            current: params.pageIndex,
-            pageSize: params.pageSize,
-            showTotal: (total) => `共 ${total} 条`
-          }}
-          onChange={tableChange}
-          dataSource={dataSource}
-          columns={columns}
-        />
       </Drag>
     </div>
-  );
+  )
 
-};
+}
 
-export default AccountSelector;
+export default AccountSelector
\ No newline at end of file

src/core/widgets/business/AccountSelector/index.less

 @import '~antd/es/style/themes/default.less';
 .AccountSelector {
-  .@{ant-prefix}-table-thead {
-    .@{ant-prefix}-table-cell {
-      background: white;
-    }
-    th {
-      border-bottom: 2px solid #DBE7FB;
-      text-align: center;
-    }
-  }
-  .@{ant-prefix}-table-body {
-    tr {
-      td {
-        border-bottom: 1px solid #DBE7FB;
-        border-right: 1px solid #DBE7FB;
-      }
-    }
-    .@{ant-prefix}-table-row {
-      padding: 4px !important;
-    }
-    tr:nth-child(even) {
-      background: #F6F9FE;
-      .panda-civ-workflow-table-cell-fix-right {
-        background-color: #F6F9FEed;
+  .content {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    padding-bottom: 40px;
+    .top {
+      width: 100%;
+      height: 50px;
+    }
+    .bottom {
+      width: 100%;
+      height: calc(100% - 50px);
+      .@{ant-prefix}-table-wrapper {
+        height: 100%;
+        .@{ant-prefix}-spin-nested-loading {
+          height: 100%;
+        }
+        .@{ant-prefix}-spin-container {
+          height: 100%;
+        }
+        .@{ant-prefix}-table {
+          height: 100%;
+          .@{ant-prefix}-table-container {
+            height: 100%;
+          }
+        }
       }
     }
-    &::-webkit-scrollbar {
-      width: 8px;
-      height: 8px;
-    }
-    &::-webkit-scrollbar-thumb {
-      background: #c8c8c8;
-    }
-    &::-webkit-scrollbar-track {
-      background: #f7f4f5;
-      padding: 0 3px;
+    .footer {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
     }
   }
 }
\ No newline at end of file