|
|
@@ -1,887 +1,895 @@
|
|
|
import React, {Component} from 'react'
|
|
|
import './index.css'
|
|
|
-import {
|
|
|
- Picker,
|
|
|
- NavBar,
|
|
|
- Accordion,
|
|
|
- List,
|
|
|
- InputItem,
|
|
|
- ImagePicker,
|
|
|
- Button,
|
|
|
- ActivityIndicator,
|
|
|
- Stepper,
|
|
|
- Modal
|
|
|
-} from 'antd-mobile'
|
|
|
-import {Switch, Row, Col, Icon} from 'antd'
|
|
|
+import {Picker, NavBar, List, InputItem, ImagePicker, Button, ActivityIndicator, Stepper, Modal, Tabs } from 'antd-mobile'
|
|
|
+import {Switch, Row, Col, Icon, message} from 'antd'
|
|
|
import {withRouter} from 'react-router-dom'
|
|
|
import {
|
|
|
- create_product,
|
|
|
- update_product,
|
|
|
- delete_product_by_id,
|
|
|
- category_by_props,
|
|
|
- productbyprops,
|
|
|
- update_category,
|
|
|
- delete_category,
|
|
|
- create_category,
|
|
|
- specificationStock_by_props,
|
|
|
- delete_specificationStock,
|
|
|
- update_specificationStock,
|
|
|
- create_specificationStock
|
|
|
+ create_product,
|
|
|
+ update_product,
|
|
|
+ delete_product_by_id,
|
|
|
+ category_by_props,
|
|
|
+ productbyprops,
|
|
|
+ update_category,
|
|
|
+ delete_category,
|
|
|
+ create_category,
|
|
|
+ specificationStock_by_props,
|
|
|
+ delete_specificationStock,
|
|
|
+ update_specificationStock,
|
|
|
+ create_specificationStock
|
|
|
} from "../../../../utils/gql"
|
|
|
import {Query, Mutation} from "react-apollo"
|
|
|
import gql from "graphql-tag"
|
|
|
-import {idGen} from "../../../../utils/func"
|
|
|
+import axios from 'axios'
|
|
|
import moment from 'moment'
|
|
|
+
|
|
|
+import {idGen} from "../../../../utils/func"
|
|
|
import {storeFile} from "../../../../configs/url"
|
|
|
-import axios from 'axios'
|
|
|
-import classNames from 'classnames'
|
|
|
import {getCookie} from "../../../../utils/cookie"
|
|
|
|
|
|
+const alert = Modal.alert
|
|
|
const Item = List.Item
|
|
|
const categoryFilterRefetch = {
|
|
|
- "status": "1",
|
|
|
- "limit": 7,
|
|
|
- "sort_by": {"order": "asc"}
|
|
|
+ "status": "1",
|
|
|
+ "limit": 7,
|
|
|
+ "sort_by": {"order": "asc"}
|
|
|
}
|
|
|
const categoryFilter = {
|
|
|
- "sort_by": {"order": "asc"}
|
|
|
+ "sort_by": {"order": "asc"}
|
|
|
}
|
|
|
|
|
|
-class Goods extends Component {
|
|
|
- constructor(props) {
|
|
|
- super(props)
|
|
|
- this.state = {
|
|
|
- accordionKey: undefined
|
|
|
- }
|
|
|
- }
|
|
|
+const tabs = [
|
|
|
+ { title: '全部分类' },
|
|
|
+ { title: '全部商品' }
|
|
|
+];
|
|
|
|
|
|
- render() {
|
|
|
- let {accordionKey} = this.state
|
|
|
-
|
|
|
- return (
|
|
|
- <div className='goods-wrap'>
|
|
|
- <NavBar
|
|
|
- className='navbar'
|
|
|
- mode="light"
|
|
|
- icon={<Icon type="left"/>}
|
|
|
- onLeftClick={() => {
|
|
|
- this.props.history.go(-1)
|
|
|
- }}
|
|
|
- >商品管理</NavBar>
|
|
|
- <div className='content-wrap'>
|
|
|
- <div className='my-list-subtitle' style={{color: 'grey'}}><Icon type="bulb"
|
|
|
- style={{marginRight: 10}}/>{accordionKey ? '折叠单项以展开更多分类' : '请选择需要打开的分类'}
|
|
|
- </div>
|
|
|
- <Accordion className="my-accordion" onChange={(key) => {
|
|
|
- this.setState({
|
|
|
- accordionKey: key[0]
|
|
|
- })
|
|
|
- }}>
|
|
|
- <Accordion.Panel header="全部分类"
|
|
|
- className={classNames({'hidden': accordionKey === '1' || accordionKey === '2'})}>
|
|
|
- <AllCategory/>
|
|
|
- </Accordion.Panel>
|
|
|
- <Accordion.Panel header="全部商品"
|
|
|
- className={classNames({'hidden': accordionKey === '0' || accordionKey === '2'})}>
|
|
|
- <AllGoods/>
|
|
|
- </Accordion.Panel>
|
|
|
- <Accordion.Panel header="添加商品"
|
|
|
- className={classNames({'hidden': accordionKey === '0' || accordionKey === '1'})}>
|
|
|
- <AddGoods/>
|
|
|
- </Accordion.Panel>
|
|
|
- </Accordion>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- )
|
|
|
+class Goods extends Component {
|
|
|
+ constructor(props) {
|
|
|
+ super(props)
|
|
|
+ this.state = {
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className='goods-wrap'>
|
|
|
+ <NavBar
|
|
|
+ className='navbar'
|
|
|
+ mode="light"
|
|
|
+ icon={<Icon type="left"/>}
|
|
|
+ onLeftClick={() => {
|
|
|
+ this.props.history.go(-1)
|
|
|
+ }}
|
|
|
+ >商品管理</NavBar>
|
|
|
+ <Tabs tabs={tabs} onChange={(tab, index) => { console.log('onChange', index, tab); }}>
|
|
|
+ <AllCategory/>
|
|
|
+ <AllGoods/>
|
|
|
+ </Tabs>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
class AllCategory extends Component {
|
|
|
- constructor(props) {
|
|
|
- super(props)
|
|
|
- this.state = {}
|
|
|
- }
|
|
|
-
|
|
|
- render() {
|
|
|
- return (
|
|
|
- <div>
|
|
|
- <Query query={gql(category_by_props)} variables={categoryFilter}>
|
|
|
+ constructor(props) {
|
|
|
+ super(props)
|
|
|
+ this.state = {}
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <Query query={gql(category_by_props)} variables={categoryFilter}>
|
|
|
+ {
|
|
|
+ ({loading, error, data}) => {
|
|
|
+ if (loading) {
|
|
|
+ return (
|
|
|
+ <div className="loading-center">
|
|
|
+ <ActivityIndicator text="加载中..." size="large"/>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ if (error) {
|
|
|
+ return 'error!'
|
|
|
+ }
|
|
|
+ let categoryList = data.categorybyprops
|
|
|
+ console.log("AllCategory categoryList",categoryList)
|
|
|
+ return (
|
|
|
+ <div className='goods-body'>
|
|
|
+ <List>
|
|
|
{
|
|
|
- ({loading, error, data}) => {
|
|
|
- if (loading) {
|
|
|
- return (
|
|
|
- <div className="loading-center">
|
|
|
- <ActivityIndicator text="加载中..." size="large"/>
|
|
|
- </div>
|
|
|
- )
|
|
|
- }
|
|
|
- if (error) {
|
|
|
- return 'error!'
|
|
|
- }
|
|
|
- let categoryList = data.categorybyprops
|
|
|
- return (
|
|
|
- <div>
|
|
|
- <List>
|
|
|
- {
|
|
|
- categoryList.map(category => {
|
|
|
- return (
|
|
|
- <Item key={category.id} extra={
|
|
|
- <div className='list-extra'>
|
|
|
- <AllCategorySwitch category={category}/>
|
|
|
- <AllCategoryButton category={category}/>
|
|
|
- </div>
|
|
|
- }>
|
|
|
- {category.text}
|
|
|
- </Item>
|
|
|
- )
|
|
|
- })
|
|
|
- }
|
|
|
- </List>
|
|
|
- <AllCategoryInput order={categoryList.length + 1}/>
|
|
|
- </div>
|
|
|
- )
|
|
|
- }
|
|
|
- }
|
|
|
- </Query>
|
|
|
- </div>
|
|
|
- )
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-class AllCategorySwitch extends Component {
|
|
|
- constructor(props) {
|
|
|
- super(props)
|
|
|
- this.state = {
|
|
|
- checked: props.category.status === '1'
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- render() {
|
|
|
- let {category} = this.props
|
|
|
- let {checked} = this.state
|
|
|
- return (
|
|
|
- <Mutation mutation={gql(update_category)} refetchQueries={[
|
|
|
- {query: gql(category_by_props), variables: categoryFilter},
|
|
|
- {query: gql(category_by_props), variables: categoryFilterRefetch}
|
|
|
- ]}>
|
|
|
- {(updatecategory, {loading, error}) => {
|
|
|
- if (loading)
|
|
|
+ categoryList.map(category => {
|
|
|
return (
|
|
|
- <div className="loading">
|
|
|
- <div className="align">
|
|
|
- <ActivityIndicator text="加载中..." size="large"/>
|
|
|
- </div>
|
|
|
+ <Item key={category.id} extra={
|
|
|
+ <div className='list-extra'>
|
|
|
+ <AllCategorySwitch category={category}/>
|
|
|
+ <AllCategoryButton category={category}/>
|
|
|
</div>
|
|
|
+ }>
|
|
|
+ {category.text}
|
|
|
+ </Item>
|
|
|
)
|
|
|
- if (error)
|
|
|
- return 'error'
|
|
|
- let obj = {
|
|
|
- id: category.id,
|
|
|
- updatedAt: moment().format('YYYY-MM-DD HH:mm:ss')
|
|
|
+ })
|
|
|
}
|
|
|
- return (
|
|
|
- <Switch checked={checked} onChange={(bool) => {
|
|
|
- this.setState({checked: bool})
|
|
|
- updatecategory({variables: {...obj, status: bool ? '1' : '0'}})
|
|
|
- }}/>
|
|
|
- )
|
|
|
- }}
|
|
|
- </Mutation>
|
|
|
- )
|
|
|
- }
|
|
|
+ </List>
|
|
|
+ <AllCategoryInput order={categoryList.length + 1}/>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </Query>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-class AllCategoryButton extends Component {
|
|
|
- constructor(props) {
|
|
|
- super(props)
|
|
|
- this.state = {}
|
|
|
+class AllCategorySwitch extends Component {
|
|
|
+ constructor(props) {
|
|
|
+ super(props)
|
|
|
+ this.state = {
|
|
|
+ checked: props.category.status === '1'
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+ let {category} = this.props
|
|
|
+ let {checked} = this.state
|
|
|
+ return (
|
|
|
+ <Mutation mutation={gql(update_category)} refetchQueries={[
|
|
|
+ {query: gql(category_by_props), variables: categoryFilter},
|
|
|
+ {query: gql(category_by_props), variables: categoryFilterRefetch}
|
|
|
+ ]}>
|
|
|
+ {(updatecategory, {loading, error}) => {
|
|
|
+ if (loading)
|
|
|
+ return (
|
|
|
+ <div className="loading">
|
|
|
+ <div className="align">
|
|
|
+ <ActivityIndicator text="加载中..." size="large"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ if (error)
|
|
|
+ return 'error'
|
|
|
+ let obj = {
|
|
|
+ id: category.id,
|
|
|
+ updatedAt: moment().format('YYYY-MM-DD HH:mm:ss')
|
|
|
+ }
|
|
|
+ return (
|
|
|
+ <Switch checked={checked} onChange={(bool) => {
|
|
|
+ this.setState({checked: bool})
|
|
|
+ updatecategory({variables: {...obj, status: bool ? '1' : '0'}})
|
|
|
+ }}/>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </Mutation>
|
|
|
+ )
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
- render() {
|
|
|
- let {category} = this.props
|
|
|
-
|
|
|
- return (
|
|
|
- <Mutation mutation={gql(delete_category)} refetchQueries={[
|
|
|
- {query: gql(category_by_props), variables: categoryFilter},
|
|
|
- {query: gql(category_by_props), variables: categoryFilterRefetch}
|
|
|
- ]}>
|
|
|
- {(deletecategory, {loading, error}) => {
|
|
|
- if (loading)
|
|
|
- return (
|
|
|
- <div className="loading">
|
|
|
- <div className="align">
|
|
|
- <ActivityIndicator text="加载中..." size="large"/>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- )
|
|
|
- if (error)
|
|
|
- return 'error'
|
|
|
- return (
|
|
|
- <Button type='warning' inline size="small" onClick={() => {
|
|
|
- deletecategory({variables: {id: category.id}})
|
|
|
- }}>删除</Button>
|
|
|
- )
|
|
|
- }}
|
|
|
- </Mutation>
|
|
|
- )
|
|
|
- }
|
|
|
+class AllCategoryButton extends Component {
|
|
|
+ constructor(props) {
|
|
|
+ super(props)
|
|
|
+ this.state = {}
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+ let {category} = this.props
|
|
|
+
|
|
|
+ return (
|
|
|
+ <Mutation mutation={gql(delete_category)} refetchQueries={[
|
|
|
+ {query: gql(category_by_props), variables: categoryFilter},
|
|
|
+ {query: gql(category_by_props), variables: categoryFilterRefetch}
|
|
|
+ ]}>
|
|
|
+ {(deletecategory, {loading, error}) => {
|
|
|
+ if (loading)
|
|
|
+ return (
|
|
|
+ <div className="loading">
|
|
|
+ <div className="align">
|
|
|
+ <ActivityIndicator text="加载中..." size="large"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ if (error)
|
|
|
+ return 'error'
|
|
|
+ return (
|
|
|
+ <Button type='warning' inline size="small" onClick={() => {
|
|
|
+ deletecategory({variables: {id: category.id}})
|
|
|
+ }}>删除</Button>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </Mutation>
|
|
|
+ )
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
class AllCategoryInput extends Component {
|
|
|
- constructor(props) {
|
|
|
- super(props)
|
|
|
- this.state = {
|
|
|
- newCategory: ''
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- render() {
|
|
|
- let {order} = this.props
|
|
|
- let {newCategory} = this.state
|
|
|
- return (
|
|
|
- <Mutation mutation={gql(create_category)} refetchQueries={[
|
|
|
- {query: gql(category_by_props), variables: categoryFilter},
|
|
|
- {query: gql(category_by_props), variables: categoryFilterRefetch}
|
|
|
- ]}>
|
|
|
- {(createcategory, {loading, error}) => {
|
|
|
- if (loading)
|
|
|
- return (
|
|
|
- <div className="loading">
|
|
|
- <div className="align">
|
|
|
- <ActivityIndicator text="加载中..." size="large"/>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- )
|
|
|
- if (error)
|
|
|
- return 'error'
|
|
|
- let obj = {
|
|
|
- id: idGen('category'),
|
|
|
- name: newCategory,
|
|
|
- img: '',
|
|
|
- order,
|
|
|
- status: '1',
|
|
|
- createdAt: moment().format('YYYY-MM-DD HH:mm:ss'),
|
|
|
- updatedAt: ''
|
|
|
- }
|
|
|
- return (
|
|
|
- <InputItem
|
|
|
- onChange={(e) => {
|
|
|
- this.setState({newCategory: e})
|
|
|
- }}
|
|
|
- value={newCategory}
|
|
|
- placeholder="请输入分类名称"
|
|
|
- extra={
|
|
|
- <Button type='primary' inline size="small"
|
|
|
- onClick={() => {
|
|
|
- createcategory({variables: obj})
|
|
|
- }}>添加</Button>
|
|
|
- }>
|
|
|
- 新的分类
|
|
|
- </InputItem>
|
|
|
- )
|
|
|
- }}
|
|
|
- </Mutation>
|
|
|
- )
|
|
|
+ constructor(props) {
|
|
|
+ super(props)
|
|
|
+ this.state = {
|
|
|
+ newCategory: ''
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+ let {order} = this.props
|
|
|
+ let {newCategory} = this.state
|
|
|
+ return (
|
|
|
+ <Mutation mutation={gql(create_category)} refetchQueries={[
|
|
|
+ {query: gql(category_by_props), variables: categoryFilter},
|
|
|
+ {query: gql(category_by_props), variables: categoryFilterRefetch}
|
|
|
+ ]}>
|
|
|
+ {(createcategory, {loading, error}) => {
|
|
|
+ if (loading)
|
|
|
+ return (
|
|
|
+ <div className="loading">
|
|
|
+ <div className="align">
|
|
|
+ <ActivityIndicator text="加载中..." size="large"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ if (error)
|
|
|
+ return 'error'
|
|
|
+ let obj = {
|
|
|
+ id: idGen('category'),
|
|
|
+ name: newCategory,
|
|
|
+ img: '',
|
|
|
+ order,
|
|
|
+ status: '1',
|
|
|
+ createdAt: moment().format('YYYY-MM-DD HH:mm:ss'),
|
|
|
+ updatedAt: ''
|
|
|
+ }
|
|
|
+ return (
|
|
|
+ <InputItem
|
|
|
+ onChange={(e) => {
|
|
|
+ this.setState({newCategory: e})
|
|
|
+ }}
|
|
|
+ value={newCategory}
|
|
|
+ placeholder="请输入分类名称"
|
|
|
+ extra={
|
|
|
+ <Button type='primary' inline size="small"
|
|
|
+ onClick={() => {
|
|
|
+ createcategory({variables: obj})
|
|
|
+ }}>添加</Button>
|
|
|
+ }>
|
|
|
+ 新的分类
|
|
|
+ </InputItem>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </Mutation>
|
|
|
+ )
|
|
|
+ }
|
|
|
|
|
|
}
|
|
|
|
|
|
class AllGoods extends Component {
|
|
|
- constructor(props) {
|
|
|
- super(props)
|
|
|
- this.state = {
|
|
|
- modal: false,
|
|
|
- product: {}
|
|
|
- }
|
|
|
+ constructor(props) {
|
|
|
+ super(props)
|
|
|
+ this.state = {
|
|
|
+ goodsModal: false,
|
|
|
+ product: {},
|
|
|
+ addOrUpdate: 'add'
|
|
|
}
|
|
|
-
|
|
|
- controlModal = (bool) => () => {
|
|
|
- this.setState({
|
|
|
- modal: bool
|
|
|
- })
|
|
|
- if (!bool) {
|
|
|
- this.setState({
|
|
|
- product: {}
|
|
|
- })
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
+ controlGoodsModal = (bool,e) => {
|
|
|
+ e.persist()
|
|
|
+ this.setState({
|
|
|
+ goodsModal: bool
|
|
|
+ })
|
|
|
+ if (!bool) {
|
|
|
+ this.setState({
|
|
|
+ product: {}
|
|
|
+ })
|
|
|
}
|
|
|
-
|
|
|
- render() {
|
|
|
- let {modal, product} = this.state
|
|
|
- return (
|
|
|
- <Query query={gql(productbyprops)} variables={{}}>
|
|
|
- {
|
|
|
- ({loading, error, data}) => {
|
|
|
- if (loading) {
|
|
|
- return (
|
|
|
- <div className="loading-center">
|
|
|
- <ActivityIndicator text="加载中..." size="large"/>
|
|
|
- </div>
|
|
|
- )
|
|
|
- }
|
|
|
- if (error) {
|
|
|
- return 'error!'
|
|
|
- }
|
|
|
- let products = data.productbyprops
|
|
|
- return (
|
|
|
- <div>
|
|
|
- <div className='all-goods'>
|
|
|
- {
|
|
|
- products.map(product => {
|
|
|
- return (
|
|
|
- <Row className='good-block' key={product.id}>
|
|
|
- <Col span={6}>
|
|
|
- <div className='good-image'
|
|
|
- style={{backgroundImage: `url(${product.img})`}}/>
|
|
|
- </Col>
|
|
|
- <Col span={11} offset={1}>{product.name}</Col>
|
|
|
- <Col span={5}
|
|
|
- style={{display: 'flex', justifyContent: 'space-around'}}>
|
|
|
- <Mutation mutation={gql(update_product)} refetchQueries={[
|
|
|
- {query: gql(productbyprops), variables: {}},
|
|
|
- {
|
|
|
- query: gql(productbyprops),
|
|
|
- variables: {status: '1', recommend: 1}
|
|
|
- }
|
|
|
- ]}>
|
|
|
- {(updateproduct, {loading, error}) => {
|
|
|
- if (loading)
|
|
|
- return (
|
|
|
- <div className="loading">
|
|
|
- <div className="align">
|
|
|
- <ActivityIndicator text="加载中..." size="large"/>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- )
|
|
|
- if (error)
|
|
|
- return 'error'
|
|
|
- let {id, recommend} = product
|
|
|
- let variables = {
|
|
|
- id,
|
|
|
- recommend: Number(!recommend),
|
|
|
- updatedAt: moment().format('YYYY-MM-DD HH:mm:ss')
|
|
|
- }
|
|
|
- return (
|
|
|
- <Icon type="like"
|
|
|
- className={classNames('not-like', {'like': recommend === 1})}
|
|
|
- onClick={() => {
|
|
|
- updateproduct({variables})
|
|
|
- }}/>
|
|
|
- )
|
|
|
- }}
|
|
|
- </Mutation>
|
|
|
- <Icon type="form" onClick={() => {
|
|
|
- this.setState({modal: true, product})
|
|
|
- }}/>
|
|
|
- </Col>
|
|
|
- </Row>
|
|
|
- )
|
|
|
- })
|
|
|
- }
|
|
|
- </div>
|
|
|
- <Modal
|
|
|
- popup
|
|
|
- visible={modal}
|
|
|
- onClose={this.controlModal(false)}
|
|
|
- animationType="slide-up"
|
|
|
- className='modify-goods-modal'
|
|
|
- >
|
|
|
- <div className='close-popup' onClick={this.controlModal(false)}>X</div>
|
|
|
- <div style={{paddingTop: 52}}>
|
|
|
- <AddGoods good={product}/>
|
|
|
- </div>
|
|
|
- </Modal>
|
|
|
- </div>
|
|
|
- )
|
|
|
- }
|
|
|
- }
|
|
|
- </Query>
|
|
|
- )
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-class AddGoods extends Component {
|
|
|
- constructor(props) {
|
|
|
- super(props)
|
|
|
- let state = {
|
|
|
- files: [],
|
|
|
- imgDatas: [],
|
|
|
- modal: false
|
|
|
+ }
|
|
|
+
|
|
|
+ deleteProduct = (deleteproduct, id, e) => {
|
|
|
+ alert('', `确定要删除此商品吗？`, [
|
|
|
+ { text: '取消', onPress: () => console.log('cancel') },
|
|
|
+ {
|
|
|
+ text: '确定',
|
|
|
+ onPress: () => {
|
|
|
+ deleteproduct({variables: {id}}).then((data)=> {
|
|
|
+ console.log("deleteProduct data", data)
|
|
|
+ this.controlGoodsModal(false, e)
|
|
|
+ if(data.data && data.data.deleteproduct === 'ok') {
|
|
|
+ message.success('删除成功')
|
|
|
+ }else {
|
|
|
+ message.error('删除失败，请稍后重试！')
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
- // console.log("goods",props.good)
|
|
|
- if (props.good === undefined) {
|
|
|
- this.state = {
|
|
|
- ...state,
|
|
|
- id:'',
|
|
|
- name: '',
|
|
|
- price: null,
|
|
|
- intro: '',
|
|
|
- stock: 20,
|
|
|
- category: '',
|
|
|
- category_id: '',
|
|
|
- newGood: true
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+ let {goodsModal, product, addOrUpdate} = this.state
|
|
|
+ return (
|
|
|
+ <Query query={gql(productbyprops)} variables={{}}>
|
|
|
+ {
|
|
|
+ ({loading, error, data}) => {
|
|
|
+ if (loading) {
|
|
|
+ return (
|
|
|
+ <div className="loading-center">
|
|
|
+ <ActivityIndicator text="加载中..." size="large"/>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
}
|
|
|
- } else {
|
|
|
- let {name, price, intro, stock, id} = props.good
|
|
|
- this.state = {
|
|
|
- ...state,
|
|
|
- id,
|
|
|
- name,
|
|
|
- price,
|
|
|
- intro,
|
|
|
- stock,
|
|
|
- category: props.good.category_id.name,
|
|
|
- category_id: [props.good.category_id.id],
|
|
|
- newGood: false
|
|
|
+ if (error) {
|
|
|
+ return 'error!'
|
|
|
}
|
|
|
+ let products = data.productbyprops
|
|
|
+ return (
|
|
|
+ <div className='goods-body' style={{marginTop: '142px'}}>
|
|
|
+ <div className='goods-add' onClick={() => {this.setState({goodsModal: true, product:{}, addOrUpdate: 'add'})}}>
|
|
|
+ <div className='goods-add-content'>
|
|
|
+ <span className='goods-add_name'>添加新商品</span>
|
|
|
+ <Icon type="plus" className='goods-add_icon'/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className='all-goods'>
|
|
|
+ {
|
|
|
+ products.map(product => {
|
|
|
+ return (
|
|
|
+ <Row className='good-block' key={product.id}>
|
|
|
+ <Col span={6}>
|
|
|
+ <div className='good-image'
|
|
|
+ style={{backgroundImage: `url(${product.img})`}}/>
|
|
|
+ </Col>
|
|
|
+ <Col span={11} offset={1}>{product.name}</Col>
|
|
|
+ <Col span={5}
|
|
|
+ style={{display: 'flex', justifyContent: 'space-around'}}>
|
|
|
+ <Icon type="form" onClick={() => {this.setState({goodsModal: true, product, addOrUpdate: 'update'})}}/>
|
|
|
+ <Mutation mutation={gql(delete_product_by_id)} refetchQueries={[
|
|
|
+ {query: gql(productbyprops), variables: {}},
|
|
|
+ {
|
|
|
+ query: gql(productbyprops),
|
|
|
+ variables: {status: '1', recommend: 1}
|
|
|
+ }
|
|
|
+ ]}>
|
|
|
+ {(deleteproduct, {loading, error}) => {
|
|
|
+ if (loading)
|
|
|
+ return (
|
|
|
+ <div className="loading">
|
|
|
+ <div className="align">
|
|
|
+ <ActivityIndicator text="加载中..." size="large"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ if (error)
|
|
|
+ return 'error'
|
|
|
+ return (
|
|
|
+ <Icon type="delete"
|
|
|
+ onClick={(e) => {
|
|
|
+ this.deleteProduct(deleteproduct, product.id, e)}
|
|
|
+ }
|
|
|
+ />
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </Mutation>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ )
|
|
|
+ })
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ <Modal
|
|
|
+ popup
|
|
|
+ visible={goodsModal}
|
|
|
+ onClose={(e)=>this.controlGoodsModal(false, e)}
|
|
|
+ animationType="slide-up"
|
|
|
+ className='modify-goods-modal'
|
|
|
+ >
|
|
|
+ <div className='close-popup' onClick={(e)=>this.controlGoodsModal(false, e)}>
|
|
|
+ <Icon type="close" />
|
|
|
+ </div>
|
|
|
+ <div style={{paddingTop: 45}}>
|
|
|
+ <AddGoods good={product} addOrUpdate={addOrUpdate}/>
|
|
|
+ </div>
|
|
|
+ </Modal>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- onChange = (id) => (files, operationType) => {
|
|
|
- let imgDatas = []
|
|
|
- let openid = getCookie("openid")
|
|
|
-
|
|
|
- files.forEach((file, index) => {
|
|
|
- let base64Cont = files[index].url.split(',')[1]
|
|
|
- let imgType = files[index].file.type.split('/')[1]
|
|
|
- let imgNewName = `good_id_${id}.${imgType}`
|
|
|
-
|
|
|
- const imgData = {
|
|
|
- 'file-name': `e-commerce/images/${openid}/img/${imgNewName}`,
|
|
|
- 'bucket': 'case',
|
|
|
- 'cont': base64Cont,
|
|
|
- 'public': true,
|
|
|
- 'format': 'base64'
|
|
|
- }
|
|
|
- imgDatas.push(imgData)
|
|
|
- })
|
|
|
+ </Query>
|
|
|
+ )
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
- this.setState({
|
|
|
- imgDatas,
|
|
|
- files
|
|
|
- })
|
|
|
+class AddGoods extends Component {
|
|
|
+ constructor(props) {
|
|
|
+ super(props)
|
|
|
+ let state = {
|
|
|
+ files: [],
|
|
|
+ imgDatas: [],
|
|
|
+ modal: false
|
|
|
}
|
|
|
-
|
|
|
- uploadImg = () => {
|
|
|
- let {imgDatas} = this.state
|
|
|
-
|
|
|
- return imgDatas.map((imgData) => (
|
|
|
- axios({
|
|
|
- url: storeFile,
|
|
|
- method: 'post',
|
|
|
- data: imgData
|
|
|
- })
|
|
|
- ))
|
|
|
+ console.log("AddGoods goods",props.good)
|
|
|
+ if (props.good === undefined || props.addOrUpdate === 'add') {
|
|
|
+ this.state = {
|
|
|
+ ...state,
|
|
|
+ id:'',
|
|
|
+ name: '',
|
|
|
+ price: null,
|
|
|
+ intro: '',
|
|
|
+ stock: 20,
|
|
|
+ category: '',
|
|
|
+ category_id: '',
|
|
|
+ recommend: 1,
|
|
|
+ newGood: true
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ let {name, price, intro, stock, id, recommend} = props.good
|
|
|
+ this.state = {
|
|
|
+ ...state,
|
|
|
+ id,
|
|
|
+ name,
|
|
|
+ price,
|
|
|
+ intro,
|
|
|
+ stock,
|
|
|
+ recommend,
|
|
|
+ category: props.good.category_id.name,
|
|
|
+ category_id: [props.good.category_id.id],
|
|
|
+ newGood: false
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
- controlModal = (bool) => () => {
|
|
|
- this.setState({
|
|
|
- modal: bool
|
|
|
- })
|
|
|
+ }
|
|
|
+
|
|
|
+ onChange = (id) => (files, operationType) => {
|
|
|
+ let imgDatas = []
|
|
|
+ let openid = getCookie("openid")
|
|
|
+
|
|
|
+ files.forEach((file, index) => {
|
|
|
+ let base64Cont = files[index].url.split(',')[1]
|
|
|
+ let imgType = files[index].file.type.split('/')[1]
|
|
|
+ let imgNewName = `good_id_${id}.${imgType}`
|
|
|
+
|
|
|
+ const imgData = {
|
|
|
+ 'file-name': `e-commerce/images/${openid}/img/${imgNewName}`,
|
|
|
+ 'bucket': 'case',
|
|
|
+ 'cont': base64Cont,
|
|
|
+ 'public': true,
|
|
|
+ 'format': 'base64'
|
|
|
+ }
|
|
|
+ imgDatas.push(imgData)
|
|
|
+ })
|
|
|
+
|
|
|
+ this.setState({
|
|
|
+ imgDatas,
|
|
|
+ files
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ uploadImg = () => {
|
|
|
+ let {imgDatas} = this.state
|
|
|
+
|
|
|
+ return imgDatas.map((imgData) => (
|
|
|
+ axios({
|
|
|
+ url: storeFile,
|
|
|
+ method: 'post',
|
|
|
+ data: imgData
|
|
|
+ })
|
|
|
+ ))
|
|
|
+ }
|
|
|
+
|
|
|
+ showModal = (key,e) => {
|
|
|
+ e.preventDefault(); // 修复 Android 上点击穿透
|
|
|
+ this.setState({
|
|
|
+ [key]: true,
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ onClose = (key,e) => {
|
|
|
+ e.preventDefault(); // 修复 Android 上点击穿透
|
|
|
+ this.setState({
|
|
|
+ [key]: false,
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ addProduct = (createproduct) => {
|
|
|
+ let {imgDatas, name, intro, stock, price, category_id, id} = this.state
|
|
|
+
|
|
|
+ Promise.all(this.uploadImg()).then(res => {
|
|
|
+ let prefix = 'https://case-1254337200.cos.ap-beijing.myqcloud.com/'
|
|
|
+ let img = imgDatas.length === 1 ? prefix + imgDatas[0]['file-name'] : imgDatas.map((imgData, index) => (
|
|
|
+ prefix + imgDatas[index]['file-name']
|
|
|
+ ))
|
|
|
+ let productId = id ? id : idGen('goods')
|
|
|
+ this.setState({id:productId})
|
|
|
+ // console.log("goods id",id)
|
|
|
+ let varObj = {
|
|
|
+ id: productId,
|
|
|
+ unit: '1件',
|
|
|
+ status: '1',
|
|
|
+ recommend: 1,
|
|
|
+ category_id: category_id[0],
|
|
|
+ name,
|
|
|
+ stock,
|
|
|
+ intro,
|
|
|
+ price: parseFloat(price),
|
|
|
+ discountRate: 100,
|
|
|
+ createdAt: moment().format('YYYY-MM-DD HH:mm:ss'),
|
|
|
+ updatedAt: ''
|
|
|
+ }
|
|
|
+ let variables = {...varObj}
|
|
|
+ if (imgDatas.length !== 0) {
|
|
|
+ variables.img = img
|
|
|
+ }
|
|
|
+ console.log("createproduct variables",variables)
|
|
|
+ createproduct({variables}).then((data)=>{
|
|
|
+ console.log("createproduct data",data)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ updateProduct = (updateproduct) => {
|
|
|
+ let {imgDatas, name, intro, stock, price, category_id, id} = this.state
|
|
|
+ let varObj = {
|
|
|
+ id,
|
|
|
+ unit: '1件',
|
|
|
+ status: '1',
|
|
|
+ recommend: 1,
|
|
|
+ category_id: category_id[0],
|
|
|
+ name,
|
|
|
+ stock,
|
|
|
+ intro,
|
|
|
+ price: parseFloat(price),
|
|
|
+ updatedAt: moment().format('YYYY-MM-DD HH:mm:ss')
|
|
|
}
|
|
|
|
|
|
- render() {
|
|
|
- let {files, imgDatas, name, intro, stock, price, category_id, newGood, modal, id} = this.state
|
|
|
-
|
|
|
- return (
|
|
|
- <div>
|
|
|
- <List className="my-add-goods-list">
|
|
|
- <Query query={gql(category_by_props)} variables={categoryFilter}>
|
|
|
- {
|
|
|
- ({loading, error, data}) => {
|
|
|
- if (loading) {
|
|
|
- return (
|
|
|
- <div className="loading-center">
|
|
|
- <ActivityIndicator text="加载中..." size="large"/>
|
|
|
- </div>
|
|
|
- )
|
|
|
- }
|
|
|
- if (error) {
|
|
|
- return 'error!'
|
|
|
- }
|
|
|
-
|
|
|
- let categoryList = data.categorybyprops.map(category => {
|
|
|
- category.value = category.id
|
|
|
- category.label = category.text
|
|
|
- return category
|
|
|
- })
|
|
|
-
|
|
|
- return (
|
|
|
- <Picker data={categoryList}
|
|
|
- cols={1}
|
|
|
- value={this.state.category_id}
|
|
|
- onChange={v => {
|
|
|
- this.setState({category_id: v})
|
|
|
- }}
|
|
|
- >
|
|
|
- <List.Item arrow="horizontal">选择种类</List.Item>
|
|
|
- </Picker>
|
|
|
- )
|
|
|
- }
|
|
|
- }
|
|
|
- </Query>
|
|
|
- <InputItem onChange={(e) => {
|
|
|
- this.setState({name: e})
|
|
|
- }} value={name} placeholder="请输入名称">名称</InputItem>
|
|
|
- <InputItem onChange={(e) => {
|
|
|
- this.setState({intro: e})
|
|
|
- }} value={intro} placeholder="请输入简介">简介</InputItem>
|
|
|
- <InputItem onChange={(e) => {
|
|
|
- this.setState({price: e})
|
|
|
- }} value={price} placeholder="请输入价格">价格</InputItem>
|
|
|
- <Item extra={<Stepper onChange={(e) => {
|
|
|
- this.setState({stock: e})
|
|
|
- }} value={stock} style={{width: '100%', minWidth: '100px'}} showNumber
|
|
|
- size="small"/>}>库存</Item>
|
|
|
- <Item arrow="horizontal"
|
|
|
- onClick={this.controlModal(true)}>{newGood ? '点击添加规格' : '点击修改规格'}</Item>
|
|
|
- <div className='list-others'>
|
|
|
- <div className='list-others-subtitle'>商品图片</div>
|
|
|
- <ImagePicker
|
|
|
- files={files}
|
|
|
- onChange={this.onChange(id)}
|
|
|
- onImageClick={(index, fs) => console.log(index, fs)}
|
|
|
- selectable={true}
|
|
|
- multiple={false}
|
|
|
- />
|
|
|
- {
|
|
|
- newGood ?
|
|
|
- <Mutation mutation={gql(create_product)} refetchQueries={[
|
|
|
- {query: gql(productbyprops), variables: {}},
|
|
|
- {query: gql(productbyprops), variables: {status: '1', recommend: 1}}
|
|
|
- ]}>
|
|
|
- {(createproduct, {loading, error}) => {
|
|
|
- if (loading)
|
|
|
- return (
|
|
|
- <div className="loading">
|
|
|
- <div className="align">
|
|
|
- <ActivityIndicator text="加载中..." size="large"/>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- )
|
|
|
- if (error)
|
|
|
- return 'error'
|
|
|
- return (
|
|
|
- <Button type="primary" size="small" inline onClick={() => {
|
|
|
- Promise.all(this.uploadImg()).then(res => {
|
|
|
- let prefix = 'https://case-1254337200.cos.ap-beijing.myqcloud.com/'
|
|
|
- let img = imgDatas.length === 1 ? prefix + imgDatas[0]['file-name'] : imgDatas.map((imgData, index) => (
|
|
|
- prefix + imgDatas[index]['file-name']
|
|
|
- ))
|
|
|
- let productId = id ? id : idGen('goods')
|
|
|
- this.setState({id:productId})
|
|
|
- // console.log("goods id",id)
|
|
|
- let varObj = {
|
|
|
- id: productId,
|
|
|
- unit: '1件',
|
|
|
- status: '1',
|
|
|
- recommend: 1,
|
|
|
- category_id: category_id[0],
|
|
|
- name,
|
|
|
- stock,
|
|
|
- intro,
|
|
|
- price: parseFloat(price),
|
|
|
- discountRate: 100,
|
|
|
- createdAt: moment().format('YYYY-MM-DD HH:mm:ss'),
|
|
|
- updatedAt: ''
|
|
|
- }
|
|
|
- let variables = {...varObj}
|
|
|
- if (imgDatas.length !== 0) {
|
|
|
- variables.img = img
|
|
|
- }
|
|
|
- createproduct({variables}).then((data)=>{
|
|
|
- // console.log("createproduct data",data)
|
|
|
- })
|
|
|
- })
|
|
|
- }}>创建</Button>
|
|
|
- )
|
|
|
- }}
|
|
|
- </Mutation>
|
|
|
- :
|
|
|
- <div>
|
|
|
- <Mutation mutation={gql(update_product)} refetchQueries={[
|
|
|
- {query: gql(productbyprops), variables: {}},
|
|
|
- {
|
|
|
- query: gql(productbyprops),
|
|
|
- variables: {status: '1', recommend: 1}
|
|
|
- }
|
|
|
- ]}>
|
|
|
- {(updateproduct, {loading, error}) => {
|
|
|
- if (loading)
|
|
|
- return (
|
|
|
- <div className="loading">
|
|
|
- <div className="align">
|
|
|
- <ActivityIndicator text="加载中..." size="large"/>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- )
|
|
|
- if (error)
|
|
|
- return 'error'
|
|
|
- let varObj = {
|
|
|
- id,
|
|
|
- unit: '1件',
|
|
|
- status: '1',
|
|
|
- recommend: 1,
|
|
|
- category_id: category_id[0],
|
|
|
- name,
|
|
|
- stock,
|
|
|
- intro,
|
|
|
- price: parseFloat(price),
|
|
|
- updatedAt: moment().format('YYYY-MM-DD HH:mm:ss')
|
|
|
- }
|
|
|
- return (
|
|
|
- <Button type="primary" size="small" inline
|
|
|
- onClick={() => {
|
|
|
- Promise.all(this.uploadImg()).then(res => {
|
|
|
- let prefix = 'https://case-1254337200.cos.ap-beijing.myqcloud.com/'
|
|
|
- let img = imgDatas.length === 1 ? prefix + imgDatas[0]['file-name'] : imgDatas.map((imgData, index) => (
|
|
|
- prefix + imgDatas[index]['file-name']
|
|
|
- ))
|
|
|
- let variables = {...varObj}
|
|
|
- if (imgDatas.length !== 0) {
|
|
|
- variables.img = img
|
|
|
- }
|
|
|
- updateproduct({variables})
|
|
|
- })
|
|
|
- }}>更新</Button>
|
|
|
- )
|
|
|
- }}
|
|
|
- </Mutation>
|
|
|
- <Mutation mutation={gql(delete_product_by_id)} refetchQueries={[
|
|
|
- {query: gql(productbyprops), variables: {}},
|
|
|
- {
|
|
|
- query: gql(productbyprops),
|
|
|
- variables: {status: '1', recommend: 1}
|
|
|
- }
|
|
|
- ]}>
|
|
|
- {(deleteproduct, {loading, error}) => {
|
|
|
- if (loading)
|
|
|
- return (
|
|
|
- <div className="loading">
|
|
|
- <div className="align">
|
|
|
- <ActivityIndicator text="加载中..." size="large"/>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- )
|
|
|
- if (error)
|
|
|
- return 'error'
|
|
|
- return (
|
|
|
- <Button type="warning" size="small" inline
|
|
|
- style={{marginLeft: 10}} onClick={() => {
|
|
|
- deleteproduct({variables: {id}})
|
|
|
- }}>删除</Button>
|
|
|
- )
|
|
|
- }}
|
|
|
- </Mutation>
|
|
|
- </div>
|
|
|
- }
|
|
|
- </div>
|
|
|
- </List>
|
|
|
- <Query query={gql(specificationStock_by_props)} variables={{product_id: id}}>
|
|
|
- {
|
|
|
- ({loading, error, data}) => {
|
|
|
- if (loading) {
|
|
|
- return (
|
|
|
- <div className="loading-center">
|
|
|
- <ActivityIndicator text="加载中5..." size="large"/>
|
|
|
- </div>
|
|
|
- )
|
|
|
- }
|
|
|
- if (error) {
|
|
|
- return 'error!'
|
|
|
- }
|
|
|
-
|
|
|
- let specs = data.specificationStockbyprops
|
|
|
-
|
|
|
- return (
|
|
|
- <Modal
|
|
|
- popup
|
|
|
- visible={modal}
|
|
|
- onClose={this.controlModal(false)}
|
|
|
- animationType="slide-up"
|
|
|
- className='modify-goods-modal'
|
|
|
- >
|
|
|
- <div className='close-popup'
|
|
|
- onClick={this.controlModal(false)}>X
|
|
|
- </div>
|
|
|
- <div style={{paddingTop: 52}}>
|
|
|
- <AddSpecStock specs={specs} productID={id}/>
|
|
|
- </div>
|
|
|
- </Modal>
|
|
|
- );
|
|
|
- }
|
|
|
- }
|
|
|
- </Query>
|
|
|
- </div>
|
|
|
- )
|
|
|
- }
|
|
|
+ Promise.all(this.uploadImg()).then(res => {
|
|
|
+ let prefix = 'https://case-1254337200.cos.ap-beijing.myqcloud.com/'
|
|
|
+ let img = imgDatas.length === 1 ? prefix + imgDatas[0]['file-name'] : imgDatas.map((imgData, index) => (
|
|
|
+ prefix + imgDatas[index]['file-name']
|
|
|
+ ))
|
|
|
+ let variables = {...varObj}
|
|
|
+ if (imgDatas.length !== 0) {
|
|
|
+ variables.img = img
|
|
|
+ }
|
|
|
+ updateproduct({variables})
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+ let {files, name, intro, stock, price, newGood, modal, id, recommend} = this.state
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <List className="my-add-goods-list">
|
|
|
+ <Query query={gql(category_by_props)} variables={categoryFilter}>
|
|
|
+ {
|
|
|
+ ({loading, error, data}) => {
|
|
|
+ if (loading) {
|
|
|
+ return (
|
|
|
+ <div className="loading-center">
|
|
|
+ <ActivityIndicator text="加载中..." size="large"/>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ if (error) {
|
|
|
+ return 'error!'
|
|
|
+ }
|
|
|
+
|
|
|
+ let categoryList = data.categorybyprops.map(category => {
|
|
|
+ category.value = category.id
|
|
|
+ category.label = category.text
|
|
|
+ return category
|
|
|
+ })
|
|
|
+
|
|
|
+ return (
|
|
|
+ <Picker data={categoryList}
|
|
|
+ cols={1}
|
|
|
+ value={this.state.category_id}
|
|
|
+ onChange={v => {
|
|
|
+ this.setState({category_id: v})
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <List.Item arrow="horizontal">选择种类</List.Item>
|
|
|
+ </Picker>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </Query>
|
|
|
+ <InputItem onChange={(e) => {
|
|
|
+ this.setState({name: e})
|
|
|
+ }} value={name} placeholder="请输入名称">名称</InputItem>
|
|
|
+ <InputItem onChange={(e) => {
|
|
|
+ this.setState({intro: e})
|
|
|
+ }} value={intro} placeholder="请输入简介">简介</InputItem>
|
|
|
+ <InputItem onChange={(e) => {
|
|
|
+ this.setState({price: e})
|
|
|
+ }} value={price} placeholder="请输入价格">价格</InputItem>
|
|
|
+ <Item extra={
|
|
|
+ <Stepper onChange={(e) => {
|
|
|
+ this.setState({stock: e})
|
|
|
+ }} value={stock} style={{width: '100%', minWidth: '100px'}} showNumber size="small"/>}>库存</Item>
|
|
|
+ <Item arrow="horizontal" onClick={(e)=>{this.showModal('modal',e)}}>{newGood ? '点击添加规格' : '点击修改规格'}</Item>
|
|
|
+ <Item extra={
|
|
|
+ <Switch
|
|
|
+ checked={recommend}
|
|
|
+ color={'#f44'}
|
|
|
+ onChange={() => {
|
|
|
+ this.setState((preState) => ({
|
|
|
+ recommend: !preState.recommend
|
|
|
+ }))
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ }>设为店长推荐</Item>
|
|
|
+ <div className='list-others'>
|
|
|
+ <div className='list-others-subtitle'>商品图片</div>
|
|
|
+ <ImagePicker
|
|
|
+ files={files}
|
|
|
+ onChange={this.onChange(id)}
|
|
|
+ onImageClick={(index, fs) => console.log(index, fs)}
|
|
|
+ selectable={true}
|
|
|
+ multiple={false}
|
|
|
+ />
|
|
|
+ {
|
|
|
+ newGood ?
|
|
|
+ <Mutation mutation={gql(create_product)} refetchQueries={[
|
|
|
+ {query: gql(productbyprops), variables: {}},
|
|
|
+ {query: gql(productbyprops), variables: {status: '1', recommend: 1}}
|
|
|
+ ]}>
|
|
|
+ {(createproduct, {loading, error}) => {
|
|
|
+ if (loading)
|
|
|
+ return (
|
|
|
+ <div className="loading">
|
|
|
+ <div className="align">
|
|
|
+ <ActivityIndicator text="加载中..." size="large"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ if (error)
|
|
|
+ return 'error'
|
|
|
+ return (
|
|
|
+ <Button className='goods-add_button' type="primary" size="small" inline
|
|
|
+ onClick={() => {
|
|
|
+ this.addProduct()
|
|
|
+ }}>
|
|
|
+ 创建
|
|
|
+ </Button>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </Mutation>
|
|
|
+ :
|
|
|
+ <div>
|
|
|
+ <Mutation
|
|
|
+ mutation={gql(update_product)}
|
|
|
+ refetchQueries={[
|
|
|
+ {query: gql(productbyprops), variables: {}},
|
|
|
+ {query: gql(productbyprops), variables: {status: '1', recommend: 1}}
|
|
|
+ ]}>
|
|
|
+ {(updateproduct, {loading, error}) => {
|
|
|
+ if (loading)
|
|
|
+ return (
|
|
|
+ <div className="loading">
|
|
|
+ <div className="align">
|
|
|
+ <ActivityIndicator text="加载中..." size="large"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ if (error)
|
|
|
+ return 'error'
|
|
|
+ return (
|
|
|
+ <Button type="primary" size="small" inline
|
|
|
+ onClick={() => {
|
|
|
+ this.updateProduct(updateproduct)
|
|
|
+ }}>
|
|
|
+ 更新
|
|
|
+ </Button>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </Mutation>
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ </List>
|
|
|
+ <Query query={gql(specificationStock_by_props)} variables={{product_id: id}}>
|
|
|
+ {
|
|
|
+ ({loading, error, data}) => {
|
|
|
+ if (loading) {
|
|
|
+ return (
|
|
|
+ <div className="loading-center">
|
|
|
+ <ActivityIndicator text="加载中5..." size="large"/>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ if (error) {
|
|
|
+ return 'error!'
|
|
|
+ }
|
|
|
+
|
|
|
+ let specs = data.specificationStockbyprops
|
|
|
+
|
|
|
+ return (
|
|
|
+ <Modal
|
|
|
+ popup
|
|
|
+ visible={modal}
|
|
|
+ onClose={(e)=>this.onClose('modal',e)}
|
|
|
+ animationType="slide-up"
|
|
|
+ className='modify-goods-modal'
|
|
|
+ >
|
|
|
+ <div className='close-item'>
|
|
|
+ <span className='close-popup' onClick={(e)=>this.onClose('modal',e)}>X</span>
|
|
|
+ </div>
|
|
|
+ <div style={{paddingTop: 52}}>
|
|
|
+ <AddSpecStock specs={specs} productID={id}/>
|
|
|
+ </div>
|
|
|
+ </Modal>
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </Query>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
class AddSpecStock extends Component {
|
|
|
- constructor(props) {
|
|
|
- super(props)
|
|
|
- this.state = {
|
|
|
- list: true,
|
|
|
- size: '',
|
|
|
- color: '',
|
|
|
- stock: 0,
|
|
|
- id: ''
|
|
|
- }
|
|
|
+ constructor(props) {
|
|
|
+ super(props)
|
|
|
+ this.state = {
|
|
|
+ list: true,
|
|
|
+ size: '',
|
|
|
+ color: '',
|
|
|
+ stock: 0,
|
|
|
+ id: ''
|
|
|
}
|
|
|
-
|
|
|
- controlList = (bool, index) => () => {
|
|
|
- let {specs} = this.props
|
|
|
- this.setState({
|
|
|
- list: bool,
|
|
|
- index
|
|
|
- })
|
|
|
- if (index !== -1) {
|
|
|
- let {size, color, stock, id} = specs[index]
|
|
|
- this.setState({
|
|
|
- size,
|
|
|
- color,
|
|
|
- stock,
|
|
|
- id
|
|
|
- })
|
|
|
- } else {
|
|
|
- this.setState({
|
|
|
- size: '',
|
|
|
- color: '',
|
|
|
- stock: 20,
|
|
|
- id: idGen('spec')
|
|
|
- })
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
+ controlList = (bool, index) => () => {
|
|
|
+ let {specs} = this.props
|
|
|
+ this.setState({
|
|
|
+ list: bool,
|
|
|
+ index
|
|
|
+ })
|
|
|
+ if (index !== -1) {
|
|
|
+ let {size, color, stock, id} = specs[index]
|
|
|
+ this.setState({
|
|
|
+ size,
|
|
|
+ color,
|
|
|
+ stock,
|
|
|
+ id
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.setState({
|
|
|
+ size: '',
|
|
|
+ color: '',
|
|
|
+ stock: 20,
|
|
|
+ id: idGen('spec')
|
|
|
+ })
|
|
|
}
|
|
|
-
|
|
|
- render() {
|
|
|
- let {specs, productID} = this.props
|
|
|
- let {list, size, color, stock, id, index} = this.state
|
|
|
- return (
|
|
|
- <div>
|
|
|
- {
|
|
|
- list ?
|
|
|
- <List renderHeader={() => '规格设置'}>
|
|
|
- {
|
|
|
- specs.map((spec, index) => (
|
|
|
- <Item key={spec.id} arrow="horizontal"
|
|
|
- onClick={this.controlList(false, index)}>{spec.color} {spec.size}</Item>
|
|
|
- ))
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+ let {specs, productID} = this.props
|
|
|
+ let {list, size, color, stock, id, index} = this.state
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ {
|
|
|
+ list ?
|
|
|
+ <List renderHeader={() => '规格设置'}>
|
|
|
+ {
|
|
|
+ specs.map((spec, index) => (
|
|
|
+ <Item key={spec.id} arrow="horizontal"
|
|
|
+ onClick={this.controlList(false, index)}>{spec.color} {spec.size}</Item>
|
|
|
+ ))
|
|
|
+ }
|
|
|
+ <Item arrow="horizontal" onClick={this.controlList(false, -1)}>新增规格</Item>
|
|
|
+ </List>
|
|
|
+ :
|
|
|
+ <List renderHeader={() => <div onClick={this.controlList(true, -1)}>
|
|
|
+ <Icon type="left"/> 点击返回规格列表</div>}>
|
|
|
+ <InputItem onChange={(e) => {
|
|
|
+ this.setState({size: e})
|
|
|
+ }} value={size} placeholder="请输入尺寸">尺寸</InputItem>
|
|
|
+ <InputItem onChange={(e) => {
|
|
|
+ this.setState({color: e})
|
|
|
+ }} value={color} placeholder="请输入颜色">颜色</InputItem>
|
|
|
+ <Item extra={<Stepper onChange={(e) => {
|
|
|
+ this.setState({stock: e})
|
|
|
+ }} value={stock} style={{width: '100%', minWidth: '100px'}} showNumber
|
|
|
+ size="small"/>}>库存</Item>
|
|
|
+ <div className='list-others'>
|
|
|
+ <div className='spec-button-group'>
|
|
|
+ {
|
|
|
+ index === -1?
|
|
|
+ <Mutation mutation={gql(create_specificationStock)} refetchQueries={[
|
|
|
+ {query: gql(specificationStock_by_props), variables: {product_id: productID}}
|
|
|
+ ]}>
|
|
|
+ {(createspecificationStock, {loading, error}) => {
|
|
|
+ if (loading)
|
|
|
+ return (
|
|
|
+ <div className="loading">
|
|
|
+ <div className="align">
|
|
|
+ <ActivityIndicator text="加载中..." size="large"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ if (error)
|
|
|
+ return 'error'
|
|
|
+ let varObj = {
|
|
|
+ id,
|
|
|
+ product_id: productID,
|
|
|
+ color,
|
|
|
+ size,
|
|
|
+ stock,
|
|
|
+ slideImg: [],
|
|
|
+ detailImg: [],
|
|
|
+ status: '1',
|
|
|
+ createdAt: moment().format('YYYY-MM-DD HH:mm:ss'),
|
|
|
+ updatedAt: ''
|
|
|
+ }
|
|
|
+ return (
|
|
|
+ <Button type="primary" size="small" inline
|
|
|
+ onClick={() => {
|
|
|
+ createspecificationStock({variables: varObj})
|
|
|
+ }}>添加</Button>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </Mutation>
|
|
|
+ :
|
|
|
+ <div>
|
|
|
+ <Mutation mutation={gql(update_specificationStock)} refetchQueries={[
|
|
|
+ {query: gql(specificationStock_by_props), variables: {product_id: productID}}
|
|
|
+ ]}>
|
|
|
+ {(updatespecificationStock, {loading, error}) => {
|
|
|
+ if (loading)
|
|
|
+ return (
|
|
|
+ <div className="loading">
|
|
|
+ <div className="align">
|
|
|
+ <ActivityIndicator text="加载中..." size="large"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ if (error)
|
|
|
+ return 'error'
|
|
|
+ let varObj = {
|
|
|
+ id,
|
|
|
+ color,
|
|
|
+ size,
|
|
|
+ stock,
|
|
|
+ updatedAt: moment().format('YYYY-MM-DD HH:mm:ss')
|
|
|
}
|
|
|
- <Item arrow="horizontal" onClick={this.controlList(false, -1)}>新增规格</Item>
|
|
|
- </List>
|
|
|
- :
|
|
|
- <List renderHeader={() => <div onClick={this.controlList(true, -1)}><Icon
|
|
|
- type="left"/> 点击返回规格列表</div>}>
|
|
|
- <InputItem onChange={(e) => {
|
|
|
- this.setState({size: e})
|
|
|
- }} value={size} placeholder="请输入尺寸">尺寸</InputItem>
|
|
|
- <InputItem onChange={(e) => {
|
|
|
- this.setState({color: e})
|
|
|
- }} value={color} placeholder="请输入颜色">颜色</InputItem>
|
|
|
- <Item extra={<Stepper onChange={(e) => {
|
|
|
- this.setState({stock: e})
|
|
|
- }} value={stock} style={{width: '100%', minWidth: '100px'}} showNumber
|
|
|
- size="small"/>}>库存</Item>
|
|
|
- <div className='list-others'>
|
|
|
- <div className='spec-button-group'>
|
|
|
- {
|
|
|
- index === -1?
|
|
|
- <Mutation mutation={gql(create_specificationStock)} refetchQueries={[
|
|
|
- {query: gql(specificationStock_by_props), variables: {product_id: productID}}
|
|
|
- ]}>
|
|
|
- {(createspecificationStock, {loading, error}) => {
|
|
|
- if (loading)
|
|
|
- return (
|
|
|
- <div className="loading">
|
|
|
- <div className="align">
|
|
|
- <ActivityIndicator text="加载中..." size="large"/>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- )
|
|
|
- if (error)
|
|
|
- return 'error'
|
|
|
- let varObj = {
|
|
|
- id,
|
|
|
- product_id: productID,
|
|
|
- color,
|
|
|
- size,
|
|
|
- stock,
|
|
|
- slideImg: [],
|
|
|
- detailImg: [],
|
|
|
- status: '1',
|
|
|
- createdAt: moment().format('YYYY-MM-DD HH:mm:ss'),
|
|
|
- updatedAt: ''
|
|
|
- }
|
|
|
- return (
|
|
|
- <Button type="primary" size="small" inline
|
|
|
- onClick={() => {
|
|
|
- createspecificationStock({variables: varObj})
|
|
|
- }}>添加</Button>
|
|
|
- )
|
|
|
- }}
|
|
|
- </Mutation>
|
|
|
- :
|
|
|
- <div>
|
|
|
- <Mutation mutation={gql(update_specificationStock)} refetchQueries={[
|
|
|
- {query: gql(specificationStock_by_props), variables: {product_id: productID}}
|
|
|
- ]}>
|
|
|
- {(updatespecificationStock, {loading, error}) => {
|
|
|
- if (loading)
|
|
|
- return (
|
|
|
- <div className="loading">
|
|
|
- <div className="align">
|
|
|
- <ActivityIndicator text="加载中..." size="large"/>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- )
|
|
|
- if (error)
|
|
|
- return 'error'
|
|
|
- let varObj = {
|
|
|
- id,
|
|
|
- color,
|
|
|
- size,
|
|
|
- stock,
|
|
|
- updatedAt: moment().format('YYYY-MM-DD HH:mm:ss')
|
|
|
- }
|
|
|
- return (
|
|
|
- <Button type="primary" size="small" inline
|
|
|
- onClick={() => {
|
|
|
- updatespecificationStock({variables: varObj})
|
|
|
- }}>更新</Button>
|
|
|
- )
|
|
|
- }}
|
|
|
- </Mutation>
|
|
|
- <Mutation mutation={gql(delete_specificationStock)} refetchQueries={[
|
|
|
- {query: gql(specificationStock_by_props), variables: {product_id: productID}},
|
|
|
- ]}>
|
|
|
- {(deletespecificationStock, {loading, error}) => {
|
|
|
- if (loading)
|
|
|
- return (
|
|
|
- <div className="loading">
|
|
|
- <div className="align">
|
|
|
- <ActivityIndicator text="加载中..." size="large"/>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- )
|
|
|
- if (error)
|
|
|
- return 'error'
|
|
|
- return (
|
|
|
- <Button type="warning" size="small" inline
|
|
|
- style={{marginLeft: 10}} onClick={() => {
|
|
|
- deletespecificationStock({variables: {id}})
|
|
|
- }}>删除</Button>
|
|
|
- )
|
|
|
- }}
|
|
|
- </Mutation>
|
|
|
- </div>
|
|
|
- }
|
|
|
+ return (
|
|
|
+ <Button type="primary" size="small" inline
|
|
|
+ onClick={() => {
|
|
|
+ updatespecificationStock({variables: varObj})
|
|
|
+ }}>更新</Button>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </Mutation>
|
|
|
+ <Mutation mutation={gql(delete_specificationStock)} refetchQueries={[
|
|
|
+ {query: gql(specificationStock_by_props), variables: {product_id: productID}},
|
|
|
+ ]}>
|
|
|
+ {(deletespecificationStock, {loading, error}) => {
|
|
|
+ if (loading)
|
|
|
+ return (
|
|
|
+ <div className="loading">
|
|
|
+ <div className="align">
|
|
|
+ <ActivityIndicator text="加载中..." size="large"/>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </List>
|
|
|
- }
|
|
|
- </div>
|
|
|
- )
|
|
|
- }
|
|
|
+ )
|
|
|
+ if (error)
|
|
|
+ return 'error'
|
|
|
+ return (
|
|
|
+ <Button type="warning" size="small" inline
|
|
|
+ style={{marginLeft: 10}} onClick={() => {
|
|
|
+ deletespecificationStock({variables: {id}})
|
|
|
+ }}>删除</Button>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </Mutation>
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </List>
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
export default withRouter(Goods)
|
Csy817