完成规格列表

admin-web/src/models/product/productAttrList.js

@@ -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 }) {
+    *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 }) {
     //   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;

admin-web/src/pages/Product/ProductAttrList.js

@@ -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',
+        // dataIndex: 'status',
-        render: val => <span>{val === 1 ? '开启' : '禁用'}</span>,
+        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>
     );
   }

admin-web/src/services/product.js

@@ -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',