Skip to content

J
jinfa-admin
Commit f8b7b5da authored by 前端-黄佳鑫's avatar 前端-黄佳鑫
Browse files
Options

feat: 修改请款单配置样式

parent 75ed863e
Hide whitespace changes
Inline Side-by-side
Showing with 126 additions and 58 deletions
src/pages/systemManage/invoiceProcessEng/add.tsx
View file @ f8b7b5da
......@@ -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
View file @ f8b7b5da
......@@ -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
View file @ f8b7b5da
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
View file @ f8b7b5da
......@@ -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
View file @ f8b7b5da
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
View file @ f8b7b5da
......@@ -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",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment