zhenxianyimeng
7 years ago
parent
37d85b37ca
commit
795314ca04
@ -0,0 +1,158 @@
|
||||
import React, { PureComponent, Fragment, Component } from 'react';
|
||||
import { Form, Card, Table, Button, Divider, Modal, Input } from 'antd';
|
||||
import moment from 'moment';
|
||||
import { connect } from 'dva';
|
||||
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
|
||||
import PaginationHelper from '../../../helpers/PaginationHelper';
|
||||
import styles from './ProductAttrList.less';
|
||||
|
||||
const FormItem = Form.Item;
|
||||
const CreateForm = Form.create()(props => {
|
||||
const { modalVisible, form, handleAdd, handleModalVisible, modalType, initValues } = props;
|
||||
|
||||
const okHandle = () => {
|
||||
form.validateFields((err, fieldsValue) => {
|
||||
if (err) return;
|
||||
let pid = fieldsValue.pid;
|
||||
if (fieldsValue.pid) {
|
||||
pid = pid.split('-')[1];
|
||||
fieldsValue.pid = pid;
|
||||
}
|
||||
form.resetFields();
|
||||
handleAdd({
|
||||
fields: fieldsValue,
|
||||
modalType,
|
||||
initValues,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const selectStyle = {
|
||||
width: 200,
|
||||
};
|
||||
|
||||
function onTypeChange(event) {
|
||||
initValues.type = parseInt(event.target.value);
|
||||
}
|
||||
|
||||
const title = modalType === 'add' ? '添加规格' : '编辑规格';
|
||||
const okText = modalType === 'add' ? '添加' : '编辑';
|
||||
return (
|
||||
<Modal
|
||||
destroyOnClose
|
||||
title={title}
|
||||
visible={modalVisible}
|
||||
onOk={okHandle}
|
||||
okText={okText}
|
||||
onCancel={() => handleModalVisible()}
|
||||
>
|
||||
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="规格名称">
|
||||
{form.getFieldDecorator('name', {
|
||||
initialValue: initValues ? initValues.name : null,
|
||||
rules: [{ required: true, message: '请输入规格名称！', min: 2 }],
|
||||
})(<Input placeholder="规格名称" />)}
|
||||
</FormItem>
|
||||
</Modal>
|
||||
);
|
||||
});
|
||||
|
||||
@connect(({ productAttrList, loading }) => ({
|
||||
productAttrList,
|
||||
attrData: productAttrList.attrData,
|
||||
loading: loading.models.productAttrList,
|
||||
}))
|
||||
@Form.create()
|
||||
export default class ProductAttrList extends PureComponent {
|
||||
state = {
|
||||
modalVisible: false,
|
||||
modalType: 'add', //add or update
|
||||
initValues: {},
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
const { dispatch } = this.props;
|
||||
dispatch({
|
||||
type: 'productAttrList/page',
|
||||
payload: {
|
||||
...PaginationHelper.defaultPayload,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
handleModalVisible = (flag, modalType, initValues) => {
|
||||
this.setState({
|
||||
modalVisible: !!flag,
|
||||
initValues: initValues || {},
|
||||
modalType: modalType || 'add',
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { attrData, productAttrList, loading, pagination } = this.props;
|
||||
const columns = [
|
||||
{
|
||||
title: '规格名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
render: val => <span>{val === 1 ? '开启' : '禁用'}</span>,
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
sorter: true,
|
||||
render: val => <span>{moment(val).format('YYYY-MM-DD')}</span>,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
render: (text, record) => (
|
||||
<Fragment>
|
||||
<a onClick={() => this.handleModalVisible(true, 'update', record)}>编辑</a>
|
||||
<Divider type="vertical" />
|
||||
<a className={styles.tableDelete} onClick={() => this.handleDelete(record)}>
|
||||
删除
|
||||
</a>
|
||||
</Fragment>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const { modalVisible, modalType, initValues } = this.state;
|
||||
|
||||
const parentMethods = {
|
||||
handleAdd: this.handleAdd,
|
||||
handleModalVisible: this.handleModalVisible,
|
||||
modalType,
|
||||
initValues,
|
||||
};
|
||||
|
||||
return (
|
||||
<PageHeaderWrapper>
|
||||
<Card>
|
||||
<div className={styles.tableList}>
|
||||
<div className={styles.tableListOperator}>
|
||||
<Button
|
||||
icon="plus"
|
||||
type="primary"
|
||||
onClick={() => this.handleModalVisible(true, 'add', {})}
|
||||
>
|
||||
新建规格
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Table
|
||||
defaultExpandAllRows={true}
|
||||
columns={columns}
|
||||
dataSource={attrData.attrs ? attrData.attrs : []}
|
||||
rowKey="id"
|
||||
loading={loading}
|
||||
pagination={pagination}
|
||||
/>
|
||||
</Card>
|
||||
{modalVisible ? <CreateForm {...parentMethods} modalVisible={modalVisible} /> : null}
|
||||
</PageHeaderWrapper>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
@import '~antd/lib/style/themes/default.less';
|
||||
@import '~@/utils/utils.less';
|
||||
|
||||
.tableList {
|
||||
.tableListOperator {
|
||||
margin-bottom: 16px;
|
||||
button {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue