houseworking/hksystem/src/views/product-order/index.vue

<style lang="less">
    @import '../../styles/common.less';
</style>

<template>
    <div>
        <Row class="margin-top-10" v-show="proShow">
            <Col>
                <Card>
                    <p slot="title">
                        <Icon type="android-remove"></Icon>
                        产品订单
                        <span class="search">
                            <Input v-model="keyword" @on-enter="search" />
                            <Button type="primary" @click="search">搜索</Button>
                        </span>
                    </p>
                    <div class="edittable-table-height-con">
                        <Table :columns="columns" :data="prosHandle"></Table>
                        <Page :total="total" :page-size="pageSize" @on-change="changePage"></Page>
                    </div>
                </Card>
            </Col>
        </Row>
        <edit :editShow="editShow" :row="row" @close="closeModal"></edit>
        <remark :remarkShow="remarkShow" :row="row" @close="closeRemark"></remark>
        <detail v-show="!proShow" :form-content="formContent" @back="back"></detail>
    </div>
</template>

<script>
import edit from "./edit";
import remark from "./remark";
import detail from "./detail";
export default {
    name: 'product',
    components: {
        edit,
        remark,
        detail
    },
    computed: {
        prosHandle() {
            let products = [].concat(JSON.parse(JSON.stringify(this.products)));
            for (let product of products) {
                if (product.status == 0) {
                    product.status = "待处理";
                } else if (product.status == 1) {
                    product.status = "待支付";
                } else if (product.status == 2) {
                    product.status = "已支付";
                } else if (product.status == 3) {
                    product.status = "关闭";
                } else {
                    product.status = "支付失败";
                }
            }
            return products;
        }
    },
    data () {
        return {
            row: {},
            total: 0,
            pageSize: 20,
            proShow: true,
            editShow: false,
            remarkShow: false,
            keyword: '',
            formContent: {},
            columns: [
                {title: "产品列表", key: 'list', type: 'html', width: 300},
                // {title: "产品名称", key: 'name'},
                // {title: "购买数量", key: 'amount'},
                // {title: "买家备注", key: 'remark'},
                // {title: "卖家备注", key: 'info'},
                // {title: "服务地址", key: 'address'},
                {title: "联系人", key: 'contact', align: 'center'},
                {title: "联系电话", key: 'phone', align: 'center'},
                {title: "订单价格", key: 'price', align: 'center', editable: true},
                {title: "订单状态", key: 'status', align: 'center'},
                {title: "备注", key: 'info', align: 'center'},
                // {title: "评论", key: 'comment', align: 'center'},
                {
                    title: "操作",
                    key: "action",
                    align: 'center',
                    width: 300,
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'default'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.formContent = params.row;
                                        this.proShow = false;
                                    }
                                }
                            }, '详情'),
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'default'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.row = params.row;
                                        this.editShow = true;
                                    }
                                }
                            }, '修改'),
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'default'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.row = params.row;
                                        this.remarkShow = true;
                                    }
                                }
                            }, '备注'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'default'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        let id = params.row.id;
                                        this.$Modal.confirm({
                                            title: '注意',
                                            content: '确定要删除？',
                                            onOk: () => {
                                                this.axios.delete(`/product_order/${id}`)
                                                    .then((res) => {
                                                        this.products = this.products.filter((product) => {
                                                            if (product.id != id) {
                                                                return true;
                                                            }
                                                        });
                                                        this.$Modal.remove();
                                                    });
                                            },
                                            onCancel: () => {
                                                this.$Modal.remove();
                                            }
                                        });
                                    }
                                }
                            }, '删除')
                        ]);
                    }
                }
            ],
            products: []
        };
    },
    methods: {
        getData (num) {
            this.axios.get("/product_orders", {
                params: {
                    page: num || 1
                }
            }).then((res) => {
                let products = [];
                res.data.data.forEach((product, i) => {
                    let obj = JSON.parse(JSON.stringify(product));
                    let list = [];
                    let photo = [];
                    product.products.forEach((pro) => {
                        list.push(`分类：${pro.classify}，产品：${pro.name}，数量：${pro.pivot.product_amount}`);
                        if (pro.photo) {
                            photo.push(pro.photo);
                        }
                    });
                    obj.list = list.join("<br>");
                    obj.photo = photo.join(";");
                    products.push(obj);
                });
                this.products = products;
                this.pageSize = res.data.per_page;
                this.total = res.data.total;
            });
        },
        closeModal(row) {
            this.editShow = false;
            if (row && row.id) {
                this.products.forEach((product, i) => {
                    if (product.id == row.id) {
                        product.price = row.price;
                        this.$set(this.products, i, product);
                    }
                });
            }
        },
        closeRemark(row) {
            this.remarkShow = false;
            if (row && row.id) {
                this.products.forEach((product, i) => {
                    if (product.id == row.id) {
                        product.info = row.remark;
                        this.$set(this.products, i, product);
                    }
                });
            }
        },
        back() {
            this.proShow = true;
        },
        changePage(num) {
            if (this.keyword) {
                this.search(num);
            } else {
                this.getData(num);
            }
        },
        search(num) {
            this.axios.get("/product_orders", {
                params: {
                    keyword: this.keyword,
                    page: num || 1
                }
            }).then((res) => {
                this.products = res.data.data;
                this.pageSize = res.data.per_page;
                this.total = res.data.total;
            });
        }
    },
    created () {
        this.getData();
    }
};
</script>