|
|
@@ -22,7 +22,8 @@ import {
|
|
|
productbyprops,
|
|
|
update_category,
|
|
|
delete_category,
|
|
|
- create_category
|
|
|
+ create_category,
|
|
|
+ specificationStock_by_props
|
|
|
} from "../../../../utils/gql"
|
|
|
import {Query, Mutation} from "react-apollo"
|
|
|
import gql from "graphql-tag"
|
|
|
@@ -91,376 +92,6 @@ class Goods extends Component {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-class AddGoods extends Component {
|
|
|
- constructor(props) {
|
|
|
- super(props)
|
|
|
- let state = {
|
|
|
- files: [],
|
|
|
- imgDatas: [],
|
|
|
- }
|
|
|
- if (props.good === undefined) {
|
|
|
- this.state = {
|
|
|
- ...state,
|
|
|
- name: '',
|
|
|
- price: 0,
|
|
|
- intro: '',
|
|
|
- stock: 20,
|
|
|
- category: '',
|
|
|
- category_id: '',
|
|
|
- newGood: true
|
|
|
- }
|
|
|
- } else {
|
|
|
- // console.log(props.good)
|
|
|
- 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
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- onChange = (id) => (files, operationType) => {
|
|
|
- let imgDatas = []
|
|
|
-
|
|
|
- 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/${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
|
|
|
- })
|
|
|
- ))
|
|
|
- }
|
|
|
-
|
|
|
- render() {
|
|
|
- let {files, imgDatas, name, intro, stock, price, category_id, newGood} = this.state
|
|
|
- let id = newGood ? idGen('goods') : this.state.id
|
|
|
- return (
|
|
|
- <List className="my-add-goods-list">
|
|
|
- <InputItem onChange={(e) => {
|
|
|
- this.setState({name: e})
|
|
|
- }} value={name} placeholder="请输入名称">名称</InputItem>
|
|
|
- <Query query={gql(category_by_props)} variables={categoryFilter}>
|
|
|
- {
|
|
|
- ({loading, error, data}) => {
|
|
|
- if (loading) {
|
|
|
- return (
|
|
|
- <div className="loading-center">
|
|
|
- <ActivityIndicator text="Loading..." 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({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>
|
|
|
- <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="Loading..." size="large"/>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- )
|
|
|
- if (error)
|
|
|
- return 'error'
|
|
|
- let varObj = {
|
|
|
- id,
|
|
|
- unit: '1件',
|
|
|
- status: '1',
|
|
|
- recommend: 0,
|
|
|
- category_id: category_id[0],
|
|
|
- name,
|
|
|
- stock,
|
|
|
- intro,
|
|
|
- price,
|
|
|
- discountRate: 100,
|
|
|
- createdAt: moment().format('YYYY-MM-DD HH:mm:ss'),
|
|
|
- updatedAt: ''
|
|
|
- }
|
|
|
- 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
|
|
|
- }
|
|
|
- createproduct({variables})
|
|
|
- })
|
|
|
- }}>创建</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="Loading..." size="large"/>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- )
|
|
|
- if (error)
|
|
|
- return 'error'
|
|
|
- let varObj = {
|
|
|
- id,
|
|
|
- unit: '1件',
|
|
|
- status: '1',
|
|
|
- recommend: 0,
|
|
|
- category_id: category_id[0],
|
|
|
- name,
|
|
|
- stock,
|
|
|
- intro,
|
|
|
- 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="Loading..." size="large"/>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- )
|
|
|
- if (error)
|
|
|
- return 'error'
|
|
|
- return (
|
|
|
- <Button type="warning" size="small" inline onClick={() => {
|
|
|
- deleteproduct({variables: {id}})
|
|
|
- }}>删除</Button>
|
|
|
- )
|
|
|
- }}
|
|
|
- </Mutation>
|
|
|
- </div>
|
|
|
- }
|
|
|
- </div>
|
|
|
- </List>
|
|
|
- )
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-class AllGoods extends Component {
|
|
|
- constructor(props) {
|
|
|
- super(props)
|
|
|
- this.state = {
|
|
|
- modal: false,
|
|
|
- product: {}
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- controlModal = (bool) => () => {
|
|
|
- this.setState({
|
|
|
- modal: 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="Loading..." 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="Loading..."
|
|
|
- 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 AllCategory extends Component {
|
|
|
constructor(props) {
|
|
|
super(props)
|
|
|
@@ -651,4 +282,453 @@ class AllCategoryInput extends Component {
|
|
|
|
|
|
}
|
|
|
|
|
|
+class AllGoods extends Component {
|
|
|
+ constructor(props) {
|
|
|
+ super(props)
|
|
|
+ this.state = {
|
|
|
+ modal: false,
|
|
|
+ product: {}
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ controlModal = (bool) => () => {
|
|
|
+ this.setState({
|
|
|
+ modal: 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="Loading..." 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="Loading..."
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ if (props.good === undefined) {
|
|
|
+ this.state = {
|
|
|
+ ...state,
|
|
|
+ name: '',
|
|
|
+ price: 0,
|
|
|
+ intro: '',
|
|
|
+ stock: 20,
|
|
|
+ category: '',
|
|
|
+ category_id: '',
|
|
|
+ newGood: true
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // console.log(props.good)
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ onChange = (id) => (files, operationType) => {
|
|
|
+ let imgDatas = []
|
|
|
+
|
|
|
+ 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/${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
|
|
|
+ })
|
|
|
+ ))
|
|
|
+ }
|
|
|
+
|
|
|
+ controlModal = (bool) => () => {
|
|
|
+ this.setState({
|
|
|
+ modal: bool
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+ let {files, imgDatas, name, intro, stock, price, category_id, newGood, modal} = this.state
|
|
|
+ let id = newGood ? idGen('goods') : this.state.id
|
|
|
+ return (
|
|
|
+ <Query query={gql(specificationStock_by_props)} variables={{product_id: id}}>
|
|
|
+ {
|
|
|
+ ({loading, error, data}) => {
|
|
|
+ if (loading) {
|
|
|
+ return (
|
|
|
+ <div className="loading-center">
|
|
|
+ <ActivityIndicator text="Loading..." size="large"/>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ if (error) {
|
|
|
+ return 'error!'
|
|
|
+ }
|
|
|
+
|
|
|
+ let specs = data.specificationStockbyprops
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <List className="my-add-goods-list">
|
|
|
+ <InputItem onChange={(e) => {
|
|
|
+ this.setState({name: e})
|
|
|
+ }} value={name} placeholder="请输入名称">名称</InputItem>
|
|
|
+ <Query query={gql(category_by_props)} variables={categoryFilter}>
|
|
|
+ {
|
|
|
+ ({loading, error, data}) => {
|
|
|
+ if (loading) {
|
|
|
+ return (
|
|
|
+ <div className="loading-center">
|
|
|
+ <ActivityIndicator text="Loading..." 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({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="Loading..."
|
|
|
+ size="large"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ if (error)
|
|
|
+ return 'error'
|
|
|
+ let varObj = {
|
|
|
+ id,
|
|
|
+ unit: '1件',
|
|
|
+ status: '1',
|
|
|
+ recommend: 0,
|
|
|
+ category_id: category_id[0],
|
|
|
+ name,
|
|
|
+ stock,
|
|
|
+ intro,
|
|
|
+ price,
|
|
|
+ discountRate: 100,
|
|
|
+ createdAt: moment().format('YYYY-MM-DD HH:mm:ss'),
|
|
|
+ updatedAt: ''
|
|
|
+ }
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ createproduct({variables})
|
|
|
+ })
|
|
|
+ }}>创建</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="Loading..."
|
|
|
+ size="large"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ if (error)
|
|
|
+ return 'error'
|
|
|
+ let varObj = {
|
|
|
+ id,
|
|
|
+ unit: '1件',
|
|
|
+ status: '1',
|
|
|
+ recommend: 0,
|
|
|
+ category_id: category_id[0],
|
|
|
+ name,
|
|
|
+ stock,
|
|
|
+ intro,
|
|
|
+ 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="Loading..."
|
|
|
+ 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>
|
|
|
+ <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}/>
|
|
|
+ </div>
|
|
|
+ </Modal>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </Query>
|
|
|
+ )
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+class AddSpecStock extends Component {
|
|
|
+ constructor(props) {
|
|
|
+ super(props)
|
|
|
+ this.state = {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+ let {specs} = this.props
|
|
|
+ return (
|
|
|
+ <List renderHeader={() => '规格设置'}>
|
|
|
+ {
|
|
|
+ specs.map(spec=>(
|
|
|
+ <Item key={spec.id} arrow="horizontal" onClick={() => {}}>{spec.color} {spec.size}</Item>
|
|
|
+ ))
|
|
|
+ }
|
|
|
+ <Item arrow="horizontal" onClick={() => {}}>新增规格</Item>
|
|
|
+ </List>
|
|
|
+ )
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
export default withRouter(Goods)
|
kulley