完成规格列表

This commit is contained in:
zhenxianyimeng 2019-09-01 12:43:17 +08:00
parent 1f053b59f0
commit 14f6d76088
3 changed files with 385 additions and 31 deletions

View File

@ -1,5 +1,14 @@
import { message } from 'antd';
import { productAttrTree, productAttrValueAdd, productAttrPage } from '../../services/product';
import {
productAttrTree,
productAttrValueAdd,
productAttrPage,
productAttrAdd,
productAttrUpdate,
productAttrUpdateStatus,
productAttrValueUpdate,
productAttrValueUpdateStatus,
} from '../../services/product';
import PaginationHelper from '../../../helpers/PaginationHelper';
export default {
@ -7,33 +16,61 @@ export default {
state: {
list: [],
// tree: [],
attrData: [],
pagination: PaginationHelper.defaultPaginationConfig,
},
effects: {
// *add({ payload }, { call, put }) {
// const { callback, body } = payload;
// const response = yield call(productCategoryAdd, body);
// if (callback) {
// callback(response);
// }
// yield put({
// type: 'tree',
// payload: {},
// });
// },
// *update({ payload }, { call, put }) {
// const { callback, body } = payload;
// const response = yield call(productCategoryUpdate, body);
// if (callback) {
// callback(response);
// }
// yield put({
// type: 'tree',
// payload: {},
// });
// },
*add({ payload }, { call, put }) {
const { onSuccess, onFail, body } = payload;
const response = yield call(productAttrAdd, body);
if (response && response.code === 0) {
onSuccess && onSuccess();
} else {
onFail && onFail(response);
}
},
*update({ payload }, { call, put }) {
const { onSuccess, onFail, body } = payload;
const response = yield call(productAttrUpdate, body);
if (response && response.code === 0) {
onSuccess && onSuccess();
} else {
onFail && onFail(response);
}
},
*value_update({ payload }, { call, put }) {
const { onSuccess, onFail, body } = payload;
const response = yield call(productAttrValueUpdate, body);
if (response && response.code === 0) {
onSuccess && onSuccess();
} else {
onFail && onFail(response);
}
},
*update_status({ payload }, { call, put }) {
const { onSuccess, onFail, body } = payload;
const response = yield call(productAttrUpdateStatus, body);
if (response && response.code === 0) {
onSuccess && onSuccess();
} else {
onFail && onFail(response);
}
},
*value_update_status({ payload }, { call, put }) {
const { onSuccess, onFail, body } = payload;
const response = yield call(productAttrValueUpdateStatus, body);
if (response && response.code === 0) {
onSuccess && onSuccess();
} else {
onFail && onFail(response);
}
},
// *updateStatus({ payload }, { call, put }) {
// const { callback, body } = payload;
// const response = yield call(productCategoryUpdateStatus, body);
@ -80,6 +117,17 @@ export default {
},
});
},
*value_add({ payload }, { call, put }) {
const { onSuccess, onFail, body } = payload;
const response = yield call(productAttrValueAdd, body);
if (response && response.code === 0) {
onSuccess && onSuccess();
} else {
onFail && onFail(response);
}
},
*addValue({ payload, callback }, { call, put }) {
// debugger;
// const {queryParams} = payload;

View File

@ -1,5 +1,5 @@
import React, { PureComponent, Fragment, Component } from 'react';
import { Form, Card, Table, Button, Divider, Modal, Input } from 'antd';
import { Form, Card, Table, Button, Divider, Modal, Input, message, Switch, Select } from 'antd';
import moment from 'moment';
import { connect } from 'dva';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
@ -7,6 +7,85 @@ import PaginationHelper from '../../../helpers/PaginationHelper';
import styles from './ProductAttrList.less';
const FormItem = Form.Item;
const Option = Select.Option;
const ValueCreateForm = Form.create()(props => {
const {
valueModalVisible,
form,
handleValueAdd,
handleValueModalVisible,
modalType,
initValues,
tree,
} = 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();
handleValueAdd({
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={valueModalVisible}
onOk={okHandle}
okText={okText}
onCancel={() => handleValueModalVisible()}
>
{modalType === 'add' ? (
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="规格">
{form.getFieldDecorator('attrId', {
// initialValue: template.durationHour ? template.durationHour : '3',
rules: [
{
required: true,
message: '请选择规格',
},
],
})(
<Select placeholder="请选择规格" style={{ width: 120 }}>
{tree.map(item => (
<Option value={item.id}>{item.name}</Option>
))}
{/* <Option value="1">1</Option> */}
</Select>
)}
</FormItem>
) : null}
<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>
);
});
const CreateForm = Form.create()(props => {
const { modalVisible, form, handleAdd, handleModalVisible, modalType, initValues } = props;
@ -59,17 +138,23 @@ const CreateForm = Form.create()(props => {
@connect(({ productAttrList, loading }) => ({
productAttrList,
attrData: productAttrList.attrData,
tree: productAttrList.tree,
loading: loading.models.productAttrList,
}))
@Form.create()
export default class ProductAttrList extends PureComponent {
state = {
modalVisible: false,
valueModalVisible: false,
modalType: 'add', //add or update
initValues: {},
};
componentDidMount() {
this.initFetch();
}
initFetch = () => {
const { dispatch } = this.props;
dispatch({
type: 'productAttrList/page',
@ -77,7 +162,133 @@ export default class ProductAttrList extends PureComponent {
...PaginationHelper.defaultPayload,
},
});
}
// const { dispatch } = this.props;
dispatch({
type: 'productAttrList/tree',
payload: {
...PaginationHelper.defaultPayload,
},
});
};
expandedRowRender = record => {
const columns = [
{
title: '规格值',
dataIndex: 'name',
},
{
title: '状态',
// dataIndex: 'status',
render: (text, record) => (
<Switch
checked={record.status === 1}
onChange={checked => this.switchValueChange(checked, record)}
/>
),
},
{
title: '创建时间',
dataIndex: 'createTime',
sorter: true,
render: val => <span>{moment(val).format('YYYY-MM-DD')}</span>,
},
{
title: '操作',
render: (text, record) => (
<Fragment>
<a onClick={() => this.handleValueModalVisible(true, 'update', record)}>编辑</a>
<Divider type="vertical" />
{/* <a className={styles.tableDelete} onClick={() => this.handleDelete(record)}>
删除
</a> */}
</Fragment>
),
},
];
return <Table columns={columns} dataSource={record.values} pagination={false} />;
};
handleAdd = ({ fields, modalType, initValues }) => {
const { dispatch } = this.props;
if (modalType === 'add') {
dispatch({
type: 'productAttrList/add',
payload: {
body: {
...fields,
},
onSuccess: () => {
message.success('添加成功');
this.handleModalVisible();
this.initFetch();
},
onFail: response => {
message.warn('添加失败' + response.message);
},
},
});
} else {
dispatch({
type: 'productAttrList/update',
payload: {
body: {
...initValues,
...fields,
},
onSuccess: () => {
message.success('更新成功');
this.handleModalVisible();
this.initFetch();
},
onFail: response => {
message.warn('更新失败' + response.message);
},
},
});
}
};
handleValueAdd = ({ fields, modalType, initValues }) => {
const { dispatch } = this.props;
if (modalType === 'add') {
dispatch({
type: 'productAttrList/value_add',
payload: {
body: {
...fields,
},
onSuccess: () => {
message.success('添加成功');
this.handleValueModalVisible();
this.initFetch();
},
onFail: response => {
message.warn('添加失败' + response.message);
},
},
});
} else {
dispatch({
type: 'productAttrList/value_update',
payload: {
body: {
...initValues,
...fields,
},
onSuccess: () => {
message.success('更新成功');
this.handleValueModalVisible();
this.initFetch();
},
onFail: response => {
message.warn('更新失败' + response.message);
},
},
});
}
};
handleModalVisible = (flag, modalType, initValues) => {
this.setState({
@ -87,8 +298,50 @@ export default class ProductAttrList extends PureComponent {
});
};
handleValueModalVisible = (flag, modalType, initValues) => {
this.setState({
valueModalVisible: !!flag,
initValues: initValues || {},
modalType: modalType || 'add',
});
};
switchValueChange = (checked, record) => {
const { dispatch } = this.props;
dispatch({
type: 'productAttrList/value_update_status',
payload: {
body: {
id: record.id,
status: checked ? 1 : 2,
},
onSuccess: () => {
message.success('修改状态成功');
this.initFetch();
},
},
});
};
switchChange = (checked, record) => {
const { dispatch } = this.props;
dispatch({
type: 'productAttrList/update_status',
payload: {
body: {
id: record.id,
status: checked ? 1 : 2,
},
onSuccess: () => {
message.success('修改状态成功');
this.initFetch();
},
},
});
};
render() {
const { attrData, productAttrList, loading, pagination } = this.props;
const { attrData, productAttrList, loading, pagination, tree } = this.props;
const columns = [
{
title: '规格名称',
@ -96,8 +349,13 @@ export default class ProductAttrList extends PureComponent {
},
{
title: '状态',
dataIndex: 'status',
render: val => <span>{val === 1 ? '开启' : '禁用'}</span>,
// dataIndex: 'status',
render: (text, record) => (
<Switch
checked={record.status === 1}
onChange={checked => this.switchChange(checked, record)}
/>
),
},
{
title: '创建时间',
@ -111,15 +369,16 @@ export default class ProductAttrList extends PureComponent {
<Fragment>
<a onClick={() => this.handleModalVisible(true, 'update', record)}>编辑</a>
<Divider type="vertical" />
<a className={styles.tableDelete} onClick={() => this.handleDelete(record)}>
<a onClick={() => this.handleValueModalVisible(true, 'add', {})}>新建规格值</a>
{/* <a className={styles.tableDelete} onClick={() => this.handleDelete(record)}>
删除
</a>
</a> */}
</Fragment>
),
},
];
const { modalVisible, modalType, initValues } = this.state;
const { modalVisible, modalType, initValues, valueModalVisible } = this.state;
const parentMethods = {
handleAdd: this.handleAdd,
@ -128,6 +387,14 @@ export default class ProductAttrList extends PureComponent {
initValues,
};
const valueFormParentMethods = {
handleValueAdd: this.handleValueAdd,
handleValueModalVisible: this.handleValueModalVisible,
modalType,
initValues,
tree: tree,
};
return (
<PageHeaderWrapper>
<Card>
@ -149,9 +416,13 @@ export default class ProductAttrList extends PureComponent {
rowKey="id"
loading={loading}
pagination={pagination}
expandedRowRender={this.expandedRowRender}
/>
</Card>
{modalVisible ? <CreateForm {...parentMethods} modalVisible={modalVisible} /> : null}
{valueModalVisible ? (
<ValueCreateForm {...valueFormParentMethods} valueModalVisible={valueModalVisible} />
) : null}
</PageHeaderWrapper>
);
}

View File

@ -91,12 +91,47 @@ export async function productAttrPage(params) {
});
}
export async function productAttrAdd(params) {
return request(`/product-api/admins/attr/add?${stringify(params)}`, {
method: 'POST',
body: {},
});
}
export async function productAttrUpdate(params) {
return request(`/product-api/admins/attr/update?${stringify(params)}`, {
method: 'POST',
body: {},
});
}
export async function productAttrUpdateStatus(params) {
return request(`/product-api/admins/attr/update_status?${stringify(params)}`, {
method: 'POST',
body: {},
});
}
export async function productAttrTree(params) {
return request(`/product-api/admins/attr/tree?${stringify(params)}`, {
method: 'GET',
});
}
export async function productAttrValueUpdate(params) {
return request(`/product-api/admins/attr_value/update?${stringify(params)}`, {
method: 'POST',
body: {},
});
}
export async function productAttrValueUpdateStatus(params) {
return request(`/product-api/admins/attr_value/update_status?${stringify(params)}`, {
method: 'POST',
body: {},
});
}
export async function productAttrValueAdd(params) {
return request(`/product-api/admins/attr_value/add?${stringify(params)}`, {
method: 'POST',