Skip to content

Y
yudao-cloud
提交 14f6d760 authored 作者: zhenxianyimeng's avatar zhenxianyimeng
浏览文件
操作

完成规格列表

上级 1f053b59
显示空白字符变更
内嵌 并排
正在显示 包含 384 行增加 和 30 行删除
admin-web/src/models/product/productAttrList.js
浏览文件 @ 14f6d760
import { message } from 'antd'; 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'; import PaginationHelper from '../../../helpers/PaginationHelper';
export default { export default {
...@@ -7,33 +16,61 @@ export default { ...@@ -7,33 +16,61 @@ export default {
state: { state: {
list: [], list: [],
// tree: [],
attrData: [], attrData: [],
pagination: PaginationHelper.defaultPaginationConfig, pagination: PaginationHelper.defaultPaginationConfig,
}, },
effects: { effects: {
// *add({ payload }, { call, put }) { *add({ payload }, { call, put }) {
// const { callback, body } = payload; const { onSuccess, onFail, body } = payload;
// const response = yield call(productCategoryAdd, body); const response = yield call(productAttrAdd, body);
// if (callback) { if (response && response.code === 0) {
// callback(response); onSuccess && onSuccess();
// } } else {
// yield put({ onFail && onFail(response);
// type: 'tree', }
// payload: {}, },
// });
// }, *update({ payload }, { call, put }) {
// *update({ payload }, { call, put }) { const { onSuccess, onFail, body } = payload;
// const { callback, body } = payload; const response = yield call(productAttrUpdate, body);
// const response = yield call(productCategoryUpdate, body); if (response && response.code === 0) {
// if (callback) { onSuccess && onSuccess();
// callback(response); } else {
// } onFail && onFail(response);
// yield put({ }
// type: 'tree', },
// payload: {},
// }); *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 }) { // *updateStatus({ payload }, { call, put }) {
// const { callback, body } = payload; // const { callback, body } = payload;
// const response = yield call(productCategoryUpdateStatus, body); // const response = yield call(productCategoryUpdateStatus, body);
...@@ -80,6 +117,17 @@ export default { ...@@ -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 }) { *addValue({ payload, callback }, { call, put }) {
// debugger; // debugger;
// const {queryParams} = payload; // const {queryParams} = payload;
......
admin-web/src/pages/Product/ProductAttrList.js
浏览文件 @ 14f6d760
import React, { PureComponent, Fragment, Component } from 'react'; 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 moment from 'moment';
import { connect } from 'dva'; import { connect } from 'dva';
import PageHeaderWrapper from '@/components/PageHeaderWrapper'; import PageHeaderWrapper from '@/components/PageHeaderWrapper';
...@@ -7,6 +7,85 @@ import PaginationHelper from '../../../helpers/PaginationHelper'; ...@@ -7,6 +7,85 @@ import PaginationHelper from '../../../helpers/PaginationHelper';
import styles from './ProductAttrList.less'; import styles from './ProductAttrList.less';
const FormItem = Form.Item; 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 CreateForm = Form.create()(props => {
const { modalVisible, form, handleAdd, handleModalVisible, modalType, initValues } = props; const { modalVisible, form, handleAdd, handleModalVisible, modalType, initValues } = props;
...@@ -59,17 +138,23 @@ const CreateForm = Form.create()(props => { ...@@ -59,17 +138,23 @@ const CreateForm = Form.create()(props => {
@connect(({ productAttrList, loading }) => ({ @connect(({ productAttrList, loading }) => ({
productAttrList, productAttrList,
attrData: productAttrList.attrData, attrData: productAttrList.attrData,
tree: productAttrList.tree,
loading: loading.models.productAttrList, loading: loading.models.productAttrList,
})) }))
@Form.create() @Form.create()
export default class ProductAttrList extends PureComponent { export default class ProductAttrList extends PureComponent {
state = { state = {
modalVisible: false, modalVisible: false,
valueModalVisible: false,
modalType: 'add', //add or update modalType: 'add', //add or update
initValues: {}, initValues: {},
}; };
componentDidMount() { componentDidMount() {
this.initFetch();
}
initFetch = () => {
const { dispatch } = this.props; const { dispatch } = this.props;
dispatch({ dispatch({
type: 'productAttrList/page', type: 'productAttrList/page',
...@@ -77,7 +162,133 @@ export default class ProductAttrList extends PureComponent { ...@@ -77,7 +162,133 @@ export default class ProductAttrList extends PureComponent {
...PaginationHelper.defaultPayload, ...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) => { handleModalVisible = (flag, modalType, initValues) => {
this.setState({ this.setState({
...@@ -87,8 +298,50 @@ export default class ProductAttrList extends PureComponent { ...@@ -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() { render() {
const { attrData, productAttrList, loading, pagination } = this.props; const { attrData, productAttrList, loading, pagination, tree } = this.props;
const columns = [ const columns = [
{ {
title: '规格名称', title: '规格名称',
...@@ -96,8 +349,13 @@ export default class ProductAttrList extends PureComponent { ...@@ -96,8 +349,13 @@ export default class ProductAttrList extends PureComponent {
}, },
{ {
title: '状态', title: '状态',
dataIndex: 'status', // dataIndex: 'status',
render: val => <span>{val === 1 ? '开启' : '禁用'}</span>, render: (text, record) => (
<Switch
checked={record.status === 1}
onChange={checked => this.switchChange(checked, record)}
/>
),
}, },
{ {
title: '创建时间', title: '创建时间',
...@@ -111,15 +369,16 @@ export default class ProductAttrList extends PureComponent { ...@@ -111,15 +369,16 @@ export default class ProductAttrList extends PureComponent {
<Fragment> <Fragment>
<a onClick={() => this.handleModalVisible(true, 'update', record)}>编辑</a> <a onClick={() => this.handleModalVisible(true, 'update', record)}>编辑</a>
<Divider type="vertical" /> <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> </Fragment>
), ),
}, },
]; ];
const { modalVisible, modalType, initValues } = this.state; const { modalVisible, modalType, initValues, valueModalVisible } = this.state;
const parentMethods = { const parentMethods = {
handleAdd: this.handleAdd, handleAdd: this.handleAdd,
...@@ -128,6 +387,14 @@ export default class ProductAttrList extends PureComponent { ...@@ -128,6 +387,14 @@ export default class ProductAttrList extends PureComponent {
initValues, initValues,
}; };
const valueFormParentMethods = {
handleValueAdd: this.handleValueAdd,
handleValueModalVisible: this.handleValueModalVisible,
modalType,
initValues,
tree: tree,
};
return ( return (
<PageHeaderWrapper> <PageHeaderWrapper>
<Card> <Card>
...@@ -149,9 +416,13 @@ export default class ProductAttrList extends PureComponent { ...@@ -149,9 +416,13 @@ export default class ProductAttrList extends PureComponent {
rowKey="id" rowKey="id"
loading={loading} loading={loading}
pagination={pagination} pagination={pagination}
expandedRowRender={this.expandedRowRender}
/> />
</Card> </Card>
{modalVisible ? <CreateForm {...parentMethods} modalVisible={modalVisible} /> : null} {modalVisible ? <CreateForm {...parentMethods} modalVisible={modalVisible} /> : null}
{valueModalVisible ? (
<ValueCreateForm {...valueFormParentMethods} valueModalVisible={valueModalVisible} />
) : null}
</PageHeaderWrapper> </PageHeaderWrapper>
); );
} }
......
admin-web/src/services/product.js
浏览文件 @ 14f6d760
...@@ -91,12 +91,47 @@ export async function productAttrPage(params) { ...@@ -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) { export async function productAttrTree(params) {
return request(`/product-api/admins/attr/tree?${stringify(params)}`, { return request(`/product-api/admins/attr/tree?${stringify(params)}`, {
method: 'GET', 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) { export async function productAttrValueAdd(params) {
return request(`/product-api/admins/attr_value/add?${stringify(params)}`, { return request(`/product-api/admins/attr_value/add?${stringify(params)}`, {
method: 'POST', method: 'POST',
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论