Merge branch 'v2-220518' into 'v2-220518'

src/pages/systemManage/invoiceProcessEng/add.tsx

@@ -61,9 +61,10 @@ const AddInvoiceProcessEng: React.FC<{}> = () => {
     let fetchApi = (path === 'edit' ? postSettleAccountsBusinessApplyAmountProcessUpdate : postSettleAccountsBusinessApplyAmountProcessSave)
     form.validateFields().then(values => {
       setLoading(true)
+      console.log(values, 'values')
       const params = {
         ...values,
-        allMembers: values.allMembers === 1 ? true : false,
+        allMembers: values.allMembers,
         members: values?.members?.map(_item => {
           return {
             memberId: _item.memberId,
@@ -71,7 +72,7 @@ const AddInvoiceProcessEng: React.FC<{}> = () => {
           }
         })
       }
-      values.allMembers === 1 && delete params.members;
+      values.allMembers && delete params.members;
       delete values.allMembers;
       delete values.members;
       path === 'edit' && (params.processId = processId)
@@ -99,7 +100,7 @@ const AddInvoiceProcessEng: React.FC<{}> = () => {
         form.setFieldsValue({
           'name': data.name,
           'baseProcessId': data.baseProcessId,
-          'allMembers': data.allMembers ? 1 : 2,
+          'allMembers': data.allMembers,
           'members': data.allMembers
         })
         onFieldsChange(form)

src/pages/systemManage/invoiceProcessEng/components/invoiceType/index.less

@@ -18,4 +18,9 @@
       width: 100%;
     }
   }
+  .space-box {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-end;
+  }
 }

src/pages/systemManage/invoiceProcessEng/components/invoiceType/index.tsx

-import React, { useCallback, useEffect, useState } from 'react';
-import { Button, Form, message, Popconfirm, Radio, Space, Table } from 'antd';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Button, Checkbox, Col, Form, Input, message, Popconfirm, Row, Space, Table } from 'antd';
 import { FormInstance } from 'antd/es/form/hooks/useForm';
 import { ColumnType } from 'antd/lib/table/interface';
 import { PlusOutlined } from '@ant-design/icons';
@@ -24,11 +24,9 @@ interface InvoiceTypeProps {
 const InvoiceTypeLayout: React.FC<InvoiceTypeProps> = (props: any) => {
   const { form, onFieldsChange, disabled, processId } = props;
   const [visible, setVisible] = useState<boolean>(false);
-  const [member, setMember] = useState<any>([])
-  const mock = [
-    { value: 1, label: '所有会员（默认）' },
-    { value: 2, label: '指定会员' },
-  ]
+  const [member, setMember] = useState<any>([]);
+  const [keywordName, setKeywordName] = useState<string>('');
+  const [value, setValue] = useState<string>('');
 
   const columns: ColumnType<any>[] = [
     {
@@ -84,6 +82,13 @@ const InvoiceTypeLayout: React.FC<InvoiceTypeProps> = (props: any) => {
     setVisible(flag)
   }
 
+  const fliterTableData = useMemo(() => {
+    if (!keywordName) {
+      return member
+    }
+    return member.filter(v => v.name.toString().includes(keywordName))
+  }, [member, keywordName])
+
   const handleConfirm = (selectRow: number[] | string[], selectedRows: { [key: string]: any }[]) => {
     setMember(selectedRows)
     form.setFieldsValue({
@@ -137,6 +142,17 @@ const InvoiceTypeLayout: React.FC<InvoiceTypeProps> = (props: any) => {
     return params
   }, [member])
 
+  const handleCheckbox = (e) => {
+    const { checked } = e.target;
+    if (checked) {
+      setMember([])
+      form.setFieldsValue({
+        'members': []
+      })
+    }
+  }
+
+
   return (
     <CardLayout
       id="invoiceType"
@@ -145,37 +161,40 @@ const InvoiceTypeLayout: React.FC<InvoiceTypeProps> = (props: any) => {
       bodyStyle={{ paddingBottom: '1px' }}
       classNames={styles['invoice-type']}
     >
-      <Form.Item
-        name='allMembers'
-        initialValue={1}
-        rules={[
-          { required: true, message: '请选择适用会员' },
-        ]}
-      >
-        <Radio.Group disabled={disabled}>
-          {mock.map(_item => (
-            <Radio key={_item.value} value={_item.value}>{_item.label}</Radio>
-          ))}
-        </Radio.Group>
-      </Form.Item>
+      <Row>
+        <Col span={12}>
+          <Form.Item
+            name='allMembers'
+            initialValue={true}
+            valuePropName='checked'
+          >
+            <Checkbox disabled={disabled} value={true} defaultChecked={true} onChange={handleCheckbox}>所有会员（默认）</Checkbox>
+          </Form.Item>
+        </Col>
+        <Col span={12}>
+          <Space className={styles['space-box']}>
+            <Input.Search disabled={form.getFieldValue('allMembers')} placeholder='会员名称' value={value} onChange={(e) => setValue(e.target.value)} onSearch={(e) => setKeywordName(e)} />
+            <Button type='default' onClick={() => { setKeywordName(''); setValue('') }}>重置</Button>
+          </Space>
+        </Col>
+      </Row>
+
       <Form.Item
         noStyle
         shouldUpdate={(prevValues, currentValues) => prevValues.allMembers !== currentValues.allMembers}
       >
-        {({ getFieldValue }) =>
-          getFieldValue('allMembers') === 2 ? (
-            <Space direction='vertical'>
-              {!disabled && (<Button block type='dashed' icon={<PlusOutlined />} onClick={() => toggle(true)}>选择</Button>)}
-              <Form.Item name="members" rules={[{ required: true, message: '请选择适用会员' }]}>
-                <Table
-                  rowKey='id'
-                  columns={columnFunc()}
-                  dataSource={member}
-                />
-              </Form.Item>
-            </Space>
-          ) : null
-        }
+        {({ getFieldValue }) => (
+          <Space direction='vertical'>
+            {!disabled && (<Button block type='dashed' icon={<PlusOutlined />} onClick={() => toggle(true)} disabled={getFieldValue('allMembers')}>选择</Button>)}
+            <Form.Item name="members" rules={[{ required: !getFieldValue('allMembers'), message: '请选择适用会员' }]}>
+              <Table
+                rowKey='id'
+                columns={columnFunc()}
+                dataSource={fliterTableData}
+              />
+            </Form.Item>
+          </Space>
+        )}
       </Form.Item>
       <TableModal
         modalType="Drawer"

src/pages/systemManage/invoiceProcessEng/components/processSelect/index.less

@@ -5,10 +5,12 @@
 
       .ant-radio-wrapper {
         width: 100%;
-        padding: 16px 0px;
+        padding: 16px;
         display: flex;
         align-items: center;
-        border-bottom: 1px solid #F5F6F7;
+        border: 1px solid #F5F6F7;
+        background-color: #F5F6F7;
+        border-radius: 8px;
 
         .ant-radio {
           width: 16px;
@@ -20,15 +22,25 @@
           display: inline-block;
         }
       }
-      .ant-radio-wrapper:last-child {
-        border-bottom: 0px;
+
+      .ant-radio-wrapper-checked {
+        border: 1px solid #00A98F;
+        background-color: rgba(0, 169, 143, 0.04);
+        span {
+          color: #00A98F;
+        }
       }
+
+      // .ant-radio-wrapper:last-child {
+      //   border-bottom: 0px;
+      // }
     }
   }
 
   .box {
     display: flex;
     align-items: center;
+    height: 52px;
     justify-content: space-between;
 
     .box-clerk {
@@ -58,4 +70,21 @@
       background-color: #ECF2FE;
     }
   }
+
+  .show-more {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-bottom: 16px;
+  }
+
+  .show {
+    height: auto;
+  }
+
+  .hide {
+    height: 188px;
+    overflow: hidden;
+  }
+
 }

src/pages/systemManage/invoiceProcessEng/components/processSelect/index.tsx

 import React, { useEffect, useState } from 'react';
-import { Form, message, Radio, Empty, Space } from 'antd';
+import { Form, message, Radio, Empty, Row, Col } from 'antd';
 import { FormInstance } from 'antd/es/form/Form';
 import CardLayout from '../card';
 import styles from './index.less';
 import { getSettleAccountsBusinessApplyAmountProcessBaseList, GetSettleAccountsBusinessApplyAmountProcessBaseListResponse } from '@/services/SettleV2Api';
+import { CaretDownOutlined } from '@ant-design/icons';
 
 interface ProcessSelectProps {
   /** FormInstance */
@@ -14,7 +15,8 @@ interface ProcessSelectProps {
 
 const ProcessSelectLayout: React.FC<ProcessSelectProps> = (props: any) => {
   const { form, onFieldsChange, disabled } = props;
-  const [dataSource, setDataSource] = useState<GetSettleAccountsBusinessApplyAmountProcessBaseListResponse>([])
+  const [dataSource, setDataSource] = useState<GetSettleAccountsBusinessApplyAmountProcessBaseListResponse>([]);
+  const [visible, setVisible] = useState<boolean>(false);
 
   useEffect(() => {
     getSettleAccountsBusinessApplyAmountProcessBaseList().then(res => {
@@ -27,6 +29,10 @@ const ProcessSelectLayout: React.FC<ProcessSelectProps> = (props: any) => {
     })
   }, [])
 
+  const showMore = () => {
+    setVisible(!visible)
+  }
+
   return (
     <CardLayout
       id="processSelect"
@@ -36,6 +42,7 @@ const ProcessSelectLayout: React.FC<ProcessSelectProps> = (props: any) => {
       classNames={styles['select-box']}
     >
       <Form.Item
+        className={visible ? styles['show'] : styles['hide']}
         name='baseProcessId'
         rules={[
           { required: true, message: '请选择流程' },
@@ -44,23 +51,29 @@ const ProcessSelectLayout: React.FC<ProcessSelectProps> = (props: any) => {
         {
           JSON.stringify(dataSource) !== '[]' ? (
             <Radio.Group disabled={disabled}>
-              {dataSource.map(_item => (
-                <Radio key={_item.baseProcessId} value={_item.baseProcessId}>
-                  <div className={styles['box']}>
-                    <div className={styles['box-clerk']}>
-                      <div className={styles['box-clerk-name']}>{_item.processName}</div>
-                      <div className={styles['box-clerk-value']}>{_item.description}</div>
-                    </div>
-                    <div className={styles['box-tag']}>{_item.processTypeName}</div>
-                  </div>
-                </Radio>
-              ))}
+              <Row gutter={[16, 16]}>
+                {dataSource.map(_item => (
+                  <Col span={12} key={_item.baseProcessId} >
+                    <Radio value={_item.baseProcessId}>
+                      <div className={styles['box']}>
+                        <div className={styles['box-clerk']}>
+                          <div className={styles['box-clerk-name']}>{_item.processName}</div>
+                          <div className={styles['box-clerk-value']}>{_item.description}</div>
+                        </div>
+                        <div className={styles['box-tag']}>{_item.processTypeName}</div>
+                      </div>
+                    </Radio>
+                  </Col>
+                ))}
+              </Row>
             </Radio.Group>
           ) : (
             <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
           )}
       </Form.Item>
-
+      {(JSON.stringify(dataSource) !== '[]' && dataSource.length >=5) && (
+        <div className={styles['show-more']} onClick={() => showMore()}>显示更多<CaretDownOutlined /></div>
+      )}
     </CardLayout>
   )
 }

src/pages/systemManage/invoiceProcessEng/index.tsx

@@ -53,9 +53,9 @@ const InvoiceProcessEng: React.FC<{}> = () => {
       ...name,
       render: (_text, record) => <Link to={`/system/ruleSettingManager/invoiceProcessEng/preview?processId=${record.processId}`}>{_text}</Link>
     },
-    {
-      ...processName,
-    },
+    // {
+    //   ...processName,
+    // },
     {
       ...createTime,
       render: (_text) => format(_text)
@@ -83,6 +83,7 @@ const InvoiceProcessEng: React.FC<{}> = () => {
     <TableLayout
       reload={ref}
       columns={columns}
+      rowKey='processId'
       fetch={getSettleAccountsBusinessApplyAmountProcessPage}
       schema={{
         type: "object",