Преглед изворни кода

Merge remote-tracking branch 'origin/master'

Csy817 пре 6 година
родитељ
комит
cc707160d7
3 измењених фајлова са 317 додато и 82 уклоњено
  1. 8 0
      src/pages/my/manage/goods/index.css
  2. 266 82
      src/pages/my/manage/goods/index.js
  3. 43 0
      src/utils/gql.js

+ 8 - 0
src/pages/my/manage/goods/index.css

@@ -53,4 +53,12 @@
 
 .modify-goods-modal{
     height: 470px
+}
+
+.not-like {
+    color: grey;
+}
+
+.like {
+    color: #3283fa;
 }

+ 266 - 82
src/pages/my/manage/goods/index.js

@@ -14,7 +14,15 @@ import {
 } from 'antd-mobile'
 import {Switch, Row, Col, Icon} from 'antd'
 import {withRouter} from 'react-router-dom'
-import {create_product, update_product, category_by_props, productbyprops} from "../../../../utils/gql"
+import {
+    create_product,
+    update_product,
+    category_by_props,
+    productbyprops,
+    update_category,
+    delete_category,
+    create_category
+} from "../../../../utils/gql"
 import {Query, Mutation} from "react-apollo"
 import gql from "graphql-tag"
 import {idGen} from "../../../../utils/func"
@@ -24,6 +32,14 @@ import axios from 'axios'
 import classNames from 'classnames'
 
 const Item = List.Item
+const categoryFilterRefetch = {
+    "status": "1",
+    "limit": 7,
+    "sort_by": {"order": "asc"}
+}
+const categoryFilter = {
+    "sort_by": {"order": "asc"}
+}
 
 class Goods extends Component {
     constructor(props) {
@@ -72,8 +88,6 @@ class Goods extends Component {
     }
 }
 
-export default withRouter(Goods)
-
 class AddGoods extends Component {
     constructor(props) {
         super(props)
@@ -81,7 +95,7 @@ class AddGoods extends Component {
             files: [],
             imgDatas: [],
         }
-        if(props.good === undefined) {
+        if (props.good === undefined) {
             this.state = {
                 ...state,
                 name: '',
@@ -93,7 +107,7 @@ class AddGoods extends Component {
                 newGood: true
             }
         } else {
-            console.log(props.good)
+            // console.log(props.good)
             let {name, price, intro, stock, id} = props.good
             this.state = {
                 ...state,
@@ -147,11 +161,7 @@ class AddGoods extends Component {
 
     render() {
         let {files, imgDatas, name, intro, stock, price, category_id, newGood} = this.state
-        let id = newGood? idGen('goods'): this.state.id
-        const categoryFilter = {
-            "status": "1",
-            "sort_by": {"order": "asc"}
-        }
+        let id = newGood ? idGen('goods') : this.state.id
         return (
             <List className="my-add-goods-list">
                 <InputItem onChange={(e) => {
@@ -182,7 +192,7 @@ class AddGoods extends Component {
                                         cols={1}
                                         value={this.state.category_id}
                                         onChange={v => {
-                                            this.setState({category_id: v});
+                                            this.setState({category_id: v})
                                         }}
                                 >
                                     <List.Item arrow="horizontal">选择种类</List.Item>
@@ -210,7 +220,7 @@ class AddGoods extends Component {
                         multiple={false}
                     />
                     {
-                        newGood?
+                        newGood ?
                             <Mutation mutation={gql(create_product)}>
                                 {(createproduct, {loading, error}) => {
                                     if (loading)
@@ -226,7 +236,7 @@ class AddGoods extends Component {
                                     let varObj = {
                                         id,
                                         unit: '1件',
-                                        status: '',
+                                        status: '1',
                                         recommend: 0,
                                         category_id: category_id[0],
                                         name,
@@ -243,7 +253,11 @@ class AddGoods extends Component {
                                                 let img = imgDatas.length === 1 ? prefix + imgDatas[0]['file-name'] : imgDatas.map((imgData, index) => (
                                                     prefix + imgDatas[index]['file-name']
                                                 ))
-                                                createproduct({variables: {...varObj, img}})
+                                                let variables = {...varObj}
+                                                if (imgDatas.length !== 0) {
+                                                    variables.img = img
+                                                }
+                                                createproduct({variables})
                                             })
                                         }}>创建</Button>
                                     )
@@ -265,7 +279,7 @@ class AddGoods extends Component {
                                     let varObj = {
                                         id,
                                         unit: '1件',
-                                        status: '',
+                                        status: '1',
                                         recommend: 0,
                                         category_id: category_id[0],
                                         name,
@@ -281,7 +295,11 @@ class AddGoods extends Component {
                                                 let img = imgDatas.length === 1 ? prefix + imgDatas[0]['file-name'] : imgDatas.map((imgData, index) => (
                                                     prefix + imgDatas[index]['file-name']
                                                 ))
-                                                updateproduct({variables: {...varObj, img}})
+                                                let variables = {...varObj}
+                                                if (imgDatas.length !== 0) {
+                                                    variables.img = img
+                                                }
+                                                updateproduct({variables})
                                             })
                                         }}>更新</Button>
                                     )
@@ -294,65 +312,6 @@ class AddGoods extends Component {
     }
 }
 
-class AllCategory extends Component {
-    constructor(props) {
-        super(props)
-        this.state = {
-            newCategory: ''
-        }
-    }
-
-    render() {
-        let {newCategory} = this.state
-        const categoryFilter = {
-            "status": "1",
-            "sort_by": {"order": "asc"}
-        }
-        return (
-            <div>
-                <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
-                            // id: "coat", text: "外套", icon: "https://ece-img-1254337200.cos.ap-chengdu.myqcloud.com/icon/coat.png"
-                            return (
-                                <List>
-                                    {
-                                        categoryList.map(category => {
-                                            console.log(category.status)
-                                            return (
-                                                <Item key={category.id} extra={<div className='list-extra'><Switch
-                                                    checked={category.status === '1'}/><Button type='warning' inline
-                                                                                               size="small">删除</Button>
-                                                </div>}>{category.text}</Item>
-                                            )
-                                        })
-                                    }
-                                </List>
-                            )
-                        }
-                    }
-                </Query>
-                <InputItem onChange={(e) => {
-                    this.setState({newCategory: e})
-                }} value={newCategory} placeholder="请输入分类名称"
-                           extra={<Button type='primary' inline size="small">添加</Button>}>新的分类</InputItem>
-            </div>
-        )
-    }
-}
-
 class AllGoods extends Component {
     constructor(props) {
         super(props)
@@ -366,7 +325,7 @@ class AllGoods extends Component {
         this.setState({
             modal: bool
         })
-        if(!bool) {
+        if (!bool) {
             this.setState({
                 product: {}
             })
@@ -374,7 +333,7 @@ class AllGoods extends Component {
     }
 
     render() {
-        let {modal,product} = this.state
+        let {modal, product} = this.state
         return (
             <Query query={gql(productbyprops)} variables={{}}>
                 {
@@ -398,10 +357,43 @@ class AllGoods extends Component {
                                             return (
                                                 <Row className='good-block' key={product.id}>
                                                     <Col span={6}>
-                                                        <div className='good-image' style={{backgroundImage: `url(${product.img})`}}/>
+                                                        <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>
-                                                    <Col span={11} offset={2}>{product.name}</Col>
-                                                    <Col span={1} offset={3}><Icon type="form" onClick={()=>{this.setState({modal: true, product})}}/></Col>
                                                 </Row>
                                             )
                                         })
@@ -415,7 +407,7 @@ class AllGoods extends Component {
                                     className='modify-goods-modal'
                                 >
                                     <div className='close-popup' onClick={this.controlModal(false)}>X</div>
-                                    <div style={{paddingTop:52}}>
+                                    <div style={{paddingTop: 52}}>
                                         <AddGoods good={product}/>
                                     </div>
                                 </Modal>
@@ -426,4 +418,196 @@ class AllGoods extends Component {
             </Query>
         )
     }
-}
+}
+
+class AllCategory extends Component {
+    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="Loading..." 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)
+                        return (
+                            <div className="loading">
+                                <div className="align">
+                                    <ActivityIndicator text="Loading..." 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>
+        )
+    }
+}
+
+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="Loading..." 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="Loading..." 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>
+        )
+    }
+
+}
+
+export default withRouter(Goods)

+ 43 - 0
src/utils/gql.js

@@ -9,6 +9,46 @@ const category_by_props = `
     }
 `
 
+const update_category = `
+    mutation updatecategory($id: ID, $img: String, $order: Int, $status: String, $updatedAt: String) {
+        updatecategory: update_category(id: $id img: $img order: $order status: $status updatedAt: $updatedAt) {
+            result
+            category {
+                id
+                name
+                img
+                order
+                status
+                createdAt
+                updatedAt
+            }
+        }
+    }
+`
+
+const delete_category = `
+    mutation deletecategory($id: ID) {
+        deletecategory: delete_category(id: $id)
+    }
+`
+
+const create_category = `
+    mutation createcategory($id: ID!, $name: String, $img: String, $order: Int, $status: String, $createdAt: String, $updatedAt: String) {
+        createcategory: create_category(id: $id name: $name img: $img order: $order status: $status createdAt: $createdAt updatedAt: $updatedAt) {
+            result
+            category {
+                id
+                name
+                img
+                order
+                status
+                createdAt
+                updatedAt
+            }
+        }
+    }
+`
+
 const productbyprops = `
     query productbyprops($recommend: Int, $where: product_filter, $sort_by: product_sort_by, $limit: Int, $unit: String, $order_by: OrderBy, $name: String, $filter: Filter, $status: String, $price: Float, $category_id: ID, $img: String, $stock: Int, $skip: Int) {
         productbyprops: product_by_props(recommend: $recommend where: $where sort_by: $sort_by limit: $limit unit: $unit order_by: $order_by name: $name filter: $filter status: $status price: $price category_id: $category_id img: $img stock: $stock skip: $skip) {
@@ -444,6 +484,9 @@ const update_product = `
 
 export {
     category_by_props,
+    update_category,
+    delete_category,
+    create_category,
     productbyprops,
     productAndSpec_by_id,
     create_userCart,