提交 27a5c3fe 作者: 龚洪江

功能:商城改版

上级 eda64db7
import { Button, Form, Input, Modal, ModalProps, Radio, Select, Table } from 'antd'; import { Button, Form, Input, Modal, ModalProps, Radio, Select, Table } from 'antd';
import { FC, useState } from 'react'; import { FC, useState } from 'react';
import EditableCell from '~/components/EditableCell'; import EditableCell from '~/components/EditableCell';
import { PlusOutlined } from '@ant-design/icons'; import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
type EditableTableProps = Parameters<typeof Table>[0]; type EditableTableProps = Parameters<typeof Table>[0];
type ColumnTypes = Exclude<EditableTableProps['columns'], undefined>; type ColumnTypes = Exclude<EditableTableProps['columns'], undefined>;
...@@ -11,7 +11,7 @@ interface selfProps { ...@@ -11,7 +11,7 @@ interface selfProps {
} }
const SkuAddOrEditModal: FC<ModalProps & selfProps> = ({ open, onCancel }) => { const SkuAddOrEditModal: FC<ModalProps & selfProps> = ({ open, onCancel }) => {
const [tableData] = useState<any>([{ id: 1 }]); const [tableData, setTableData] = useState<any>([{ id: 1 }]);
const defaultColumns: (ColumnTypes[number] & { const defaultColumns: (ColumnTypes[number] & {
editable?: boolean; editable?: boolean;
dataIndex?: string; dataIndex?: string;
...@@ -19,6 +19,12 @@ const SkuAddOrEditModal: FC<ModalProps & selfProps> = ({ open, onCancel }) => { ...@@ -19,6 +19,12 @@ const SkuAddOrEditModal: FC<ModalProps & selfProps> = ({ open, onCancel }) => {
radioOption?: { name: string; id: number }[]; radioOption?: { name: string; id: number }[];
})[] = [ })[] = [
{ {
title: '序号',
align: 'center',
width: '5%',
render: (_text: string, _record: any, index: number) => index + 1,
},
{
title: '图片', title: '图片',
align: 'center', align: 'center',
editable: true, editable: true,
...@@ -71,9 +77,27 @@ const SkuAddOrEditModal: FC<ModalProps & selfProps> = ({ open, onCancel }) => { ...@@ -71,9 +77,27 @@ const SkuAddOrEditModal: FC<ModalProps & selfProps> = ({ open, onCancel }) => {
title: '操作', title: '操作',
align: 'center', align: 'center',
width: '10%', width: '10%',
render: () => ( render: (_text: string, _record: any, index: number) => (
<> <>
<Button type='primary' icon={<PlusOutlined />}></Button> {tableData.length - 1 === index ? (
<Button
type='primary'
icon={<PlusOutlined />}
onClick={addSkuDataRowClick}
style={{ marginRight: '10px' }}
></Button>
) : (
''
)}
{index ? (
<Button
type='primary'
icon={<MinusOutlined />}
onClick={() => removeSkuDataRowClick(index)}
></Button>
) : (
''
)}
</> </>
), ),
}, },
...@@ -97,6 +121,15 @@ const SkuAddOrEditModal: FC<ModalProps & selfProps> = ({ open, onCancel }) => { ...@@ -97,6 +121,15 @@ const SkuAddOrEditModal: FC<ModalProps & selfProps> = ({ open, onCancel }) => {
const handleCancel = () => { const handleCancel = () => {
onCancel(); onCancel();
}; };
//新增一行规格值
const addSkuDataRowClick = () => {
setTableData([...tableData, { id: tableData.length + 1 }]);
};
//移除一行规格值
const removeSkuDataRowClick = (index: number) => {
tableData.splice(index, 1);
setTableData([...tableData]);
};
return ( return (
<Modal open={open} title='添加规格' width={1000} onCancel={handleCancel}> <Modal open={open} title='添加规格' width={1000} onCancel={handleCancel}>
...@@ -116,6 +149,7 @@ const SkuAddOrEditModal: FC<ModalProps & selfProps> = ({ open, onCancel }) => { ...@@ -116,6 +149,7 @@ const SkuAddOrEditModal: FC<ModalProps & selfProps> = ({ open, onCancel }) => {
}} }}
bordered bordered
dataSource={tableData} dataSource={tableData}
pagination={false}
></Table> ></Table>
</Form> </Form>
</Form.Item> </Form.Item>
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论