.

src/components/Pagination.vue

@@ -37,14 +37,14 @@ export default {
 
 <style lang="less" scoped>
 .pagination {
-    height: 54px;
+    height: 30px;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0 !important;
     margin-top: 10px;
     &.small {
-        height: 40px;
+        height: 24px;
     }
 }
 </style>

src/views/Home.vue

@@ -176,7 +176,7 @@ export default {
     background: #f2f4f5;
     .page {
         background: white;
-        padding: 20px 20px 1px 20px;
+        padding: 20px 20px 20px 20px;
         .action-container {
             display: flex;
             align-content: center;
@@ -189,6 +189,11 @@ export default {
                 width: 250px;
             }
         }
+        .el-form-item {
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
     }
 }
 </style>

src/views/OrderEdit.vue

@@ -0,0 +1,147 @@
+<template>
+    <div>
+        <el-form :model="formData" :rules="rules" ref="form" label-width="80px"
+            label-position="right" size="small">
+            <el-form-item prop="id" label="订单ID">{{formData.id}}</el-form-item>
+            <el-form-item prop="userId" label="用户ID">{{formData.userId}}
+            </el-form-item>
+            <el-form-item prop="createdAt" label="创建时间">
+                <el-date-picker v-model="formData.createdAt" type="datetime"
+                    value-format="yyyy-MM-dd HH:mm:ss" disabled>
+                </el-date-picker>
+            </el-form-item>
+            <el-form-item prop="productId" label="商品ID">
+                <el-input v-model="formData.productId"></el-input>
+            </el-form-item>
+            <el-form-item label="商品名称" style="width:100%;">
+                {{formData.product?formData.product.name:''}}</el-form-item>
+            <el-form-item prop="productSpecId" label="规格ID">
+                <el-input v-model="formData.productSpecId"></el-input>
+            </el-form-item>
+            <el-form-item label="规格名称">
+                {{formData.productSpec?formData.productSpec.name:''}}
+            </el-form-item>
+            <el-form-item prop="amount" label="购买数量">
+                <el-input-number v-model="formData.amount"></el-input-number>
+            </el-form-item>
+            <el-form-item prop="money" label="付款">
+                <el-input-number v-model="formData.money"></el-input-number>
+                &nbsp;元
+            </el-form-item>
+            <el-form-item prop="coin" label="商城币">
+                <el-input-number v-model="formData.coin"></el-input-number>
+            </el-form-item>
+            <el-form-item prop="payTime" label="创建时间" v-if="formData.payTime">
+                <el-date-picker v-model="formData.payTime" type="datetime"
+                    value-format="yyyy-MM-dd HH:mm:ss" disabled>
+                </el-date-picker>
+            </el-form-item>
+            <el-form-item prop="contactName" label="联系人">
+                <el-input v-model="formData.contactName"></el-input>
+            </el-form-item>
+            <el-form-item prop="phone" label="电话">
+                <el-input v-model="formData.phone"></el-input>
+            </el-form-item>
+            <el-form-item prop="address" label="地址">
+                <el-input v-model="formData.address"></el-input>
+            </el-form-item>
+            <el-form-item prop="status" label="状态">
+                <el-select v-model="formData.status">
+                    <el-option v-for="item in statusOptions" :key="item.value"
+                        :label="item.label" :value="item.value"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item prop="trackingNo" label="物流单号"
+                v-if="formData.status === 'DELIVERING'">
+                <el-input v-model="formData.trackingNo"></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-button @click="save" :loading="loading" type="primary"
+                    size="small">保存</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script>
+export default {
+    created() {
+        if (this.$route.params.formData) {
+            this.formData = this.$route.params.formData;
+        } else {
+            this.$http.get(`/order/${this.$route.query.id}`).then(res => {
+                if (res.success) {
+                    this.formData = res.data;
+                }
+            });
+        }
+    },
+    data() {
+        return {
+            rules: {},
+            formData: {},
+            statusOptions: [
+                {
+                    label: '待付款',
+                    value: 'NOT_PAID',
+                },
+                {
+                    label: '已付款',
+                    value: 'PAID',
+                },
+                {
+                    label: '待收货',
+                    value: 'DELIVERING',
+                },
+                {
+                    label: '待评价',
+                    value: 'NOT_RATED',
+                },
+                {
+                    label: '已完成',
+                    value: 'RATED',
+                },
+                {
+                    label: '已取消',
+                    value: 'CANCELED',
+                },
+            ],
+            loading: false,
+        };
+    },
+    methods: {
+        save() {
+            this.loading = true;
+            this.$axios
+                .post('/order/save', this.formData)
+                .then(res => {
+                    this.loading = false;
+                    if (res.data.success) {
+                        this.$message.success('保存成功');
+                    } else {
+                        this.$message.error(res.data.error);
+                    }
+                })
+                .catch(e => {
+                    this.loading = false;
+                    console.log(e);
+                });
+        },
+    },
+};
+</script>
+
+<style lang="less">
+// .el-form-item {
+//     width: 50%;
+//     box-sizing: border-box;
+//     padding-right: 10px;
+//     display: inline-block;
+// }
+// @media screen and (max-width: 1000px) {
+//     .el-form-item {
+//         width: auto;
+//         display: block;
+//     }
+// }
+</style>

src/views/Orders.vue

@@ -0,0 +1,91 @@
+<template>
+    <div>
+        <el-table :data="tableData">
+            <el-table-column prop="id" label="订单ID" width="200">
+            </el-table-column>
+            <el-table-column prop="userId" label="用户ID" width="100">
+            </el-table-column>
+            <el-table-column prop="product.name" label="商品名称"></el-table-column>
+            <el-table-column width="150" align="center">
+                <template slot-scope="{ row }">
+                    <el-button type="primary" size="mini" @click="edit(row)">编辑
+                    </el-button>
+                    <el-button v-if="row.status === 'PAID'" type="primary"
+                        size="mini" @click="ship(row)">发货
+                    </el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <pagination :page-size="pageSize" :current-page="page"
+            :total="totalElements" @size-change="onSizeChange"
+            @current-change="onCurrentChange"></pagination>
+    </div>
+</template>
+
+<script>
+import paginationMixin from '@/mixins/pagination';
+export default {
+    mixins: [paginationMixin],
+    data() {
+        return {};
+    },
+    methods: {
+        getData() {
+            this.$http
+                .get('/order/all', {
+                    page: this.page,
+                    size: this.pageSize,
+                })
+                .then(res => {
+                    if (res.success) {
+                        this.tableData = res.data.content;
+                        this.totalPages = res.data.totalPages;
+                        this.totalElements = res.data.totalElements;
+                    }
+                });
+        },
+        edit(row) {
+            this.$router.push({
+                name: 'orderEdit',
+                query: {
+                    id: row.id,
+                },
+                params: {
+                    formData: row,
+                },
+            });
+        },
+        ship(row) {
+            this.$prompt('请输入物流单号', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                inputValidator(val) {
+                    if (val) {
+                        return true;
+                    }
+                    return '请输入物流单号';
+                },
+            })
+                .then(({ value }) => {
+                    row.trackingNo = value;
+                    row.status = 'DELIVERING';
+                    return this.$axios.post('/order/save', row);
+                })
+                .then(res => {
+                    if (res.data.success) {
+                        this.$message.success('成功');
+                        this.getData();
+                    } else {
+                        this.$message.error(res.data.error);
+                    }
+                })
+                .catch(e => {
+                    console.log(e);
+                });
+        },
+    },
+};
+</script>
+
+<style>
+</style>

src/views/ProductEdit.vue

@@ -22,6 +22,7 @@
             </el-form-item>
             <el-form-item prop="specs" label="规格">
                 <el-table :data="formData.specs" size="small" border stripe>
+                    <el-table-column prop="id" label="ID" width="100"></el-table-column>
                     <el-table-column prop="name" label="规格名称"></el-table-column>
                     <el-table-column prop="stock" label="库存"></el-table-column>
                     <el-table-column prop="originalPrice" label="原价"></el-table-column>