09/18

src/main/walk-china-admin/src/App.vue

@@ -1,43 +1,47 @@
 <template>
-    <router-view class="router-view" :class="{'small-screen':isSmallScreen}" />
+    <router-view class="router-view" :class="{'small-screen':isSmallScreen}"/>
 </template>
 <script>
-import { mapState } from 'vuex';
+    import {mapState} from 'vuex';
 
-export default {
-    computed: {
-        ...mapState(['isSmallScreen']),
-    },
-};
+    export default {
+        computed: {
+            ...mapState(['isSmallScreen']),
+        },
+    };
 </script>
 
 <style lang="less">
-html,
-body {
-    width: 100%;
-    height: 100%;
-    padding: 0;
-    margin: 0;
-    font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial,
+    html,
+    body {
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        margin: 0;
+        font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial,
         sans-serif;
-}
-.router-view {
-    height: 100%;
-}
-.el-menu-item.is-active {
-    background: #1f2d3d !important;
-    border-left: 2px solid rgb(32, 160, 255);
-    box-sizing: border-box;
-}
-.el-table .ellipsis .cell {
-    overflow: hidden !important;
-    white-space: nowrap !important;
-    text-overflow: ellipsis !important;
-}
-.form-inline {
-    .el-form-item {
-        width: 50%;
+    }
+
+    .router-view {
+        height: 100%;
+    }
+
+    .el-menu-item.is-active {
+        background: #1f2d3d !important;
+        border-left: 2px solid rgb(32, 160, 255);
         box-sizing: border-box;
     }
-}
+
+    .el-table .ellipsis .cell {
+        overflow: hidden !important;
+        white-space: nowrap !important;
+        text-overflow: ellipsis !important;
+    }
+
+    .form-inline {
+        .el-form-item {
+            width: 50%;
+            box-sizing: border-box;
+        }
+    }
 </style>

src/main/walk-china-admin/src/views/Home.vue

@@ -29,171 +29,194 @@
         <el-container>
             <el-header>
                 <button class="btn-menu" @click="collapse=!collapse">
-                    <v-icon name="bars" />
+                    <v-icon name="bars"/>
                 </button>
                 <router-link tag="span" :to="{name:'dashboard'}">走遍城市小程序后台</router-link>
             </el-header>
             <el-main>
-                <router-view class="page"></router-view>
+                <keep-alive include="orders">
+                    <router-view class="page"></router-view>
+                </keep-alive>
             </el-main>
         </el-container>
     </el-container>
 </template>
 <script>
-import { mapState } from 'vuex';
-import SysMenu from '@/components/SysMenu';
-
-export default {
-    name: 'home',
-    data() {
-        return {
-            collapse: false,
-            rawMenus: [],
-            menus: [],
-            activeMenu: '',
-            menuPath: [],
-        };
-    },
-    created() {
-        this.collapse = localStorage.getItem('collapseMenu') === 'true' || this.isSmallScreen;
-        this.$http.get('/menu/all').then(res => {
-            if (res.success) {
-                this.menus = res.data;
-            }
-        });
-    },
-    computed: {
-        ...mapState(['isSmallScreen']),
-        showMenu() {
-            if (this.isSmallScreen) {
-                return !this.collapse;
-            }
-            return true;
+    import {mapState} from 'vuex';
+    import SysMenu from '@/components/SysMenu';
+
+    export default {
+        name: 'home',
+        data() {
+            return {
+                collapse: false,
+                rawMenus: [],
+                menus: [],
+                activeMenu: '',
+                menuPath: [],
+            };
+        },
+        created() {
+            this.collapse = localStorage.getItem('collapseMenu') === 'true' || this.isSmallScreen;
+            this.$http.get('/menu/all').then(res => {
+                if (res.success) {
+                    this.menus = res.data;
+                }
+            });
+        },
+        computed: {
+            ...mapState(['isSmallScreen']),
+            showMenu() {
+                if (this.isSmallScreen) {
+                    return !this.collapse;
+                }
+                return true;
+            },
+        },
+        watch: {
+            collapse(val) {
+                localStorage.setItem('collapseMenu', val);
+            },
         },
-    },
-    watch: {
-        collapse(val) {
-            localStorage.setItem('collapseMenu', val);
+        components: {
+            SysMenu,
         },
-    },
-    components: {
-        SysMenu,
-    },
-};
+    };
 </script>
 <style lang="less">
-.el-aside {
-    height: 100%;
-    width: auto !important;
-    .menu-wrapper {
+    .el-aside {
         height: 100%;
-        background: #324157;
-        display: flex;
-        flex-direction: column;
-        .logo {
-            background: shade(#324157, 20%);
-            height: 60px;
-            line-height: 60px;
-            min-height: 60px;
-            text-align: center;
-            color: white;
-        }
-        .el-menu {
-            flex-basis: 0;
-            flex-grow: 1;
-            overflow: auto;
-            border: none !important;
-            &::-webkit-scrollbar {
-                display: none;
+        width: auto !important;
+
+        .menu-wrapper {
+            height: 100%;
+            background: #324157;
+            display: flex;
+            flex-direction: column;
+
+            .logo {
+                background: shade(#324157, 20%);
+                height: 60px;
+                line-height: 60px;
+                min-height: 60px;
+                text-align: center;
+                color: white;
+            }
+
+            .el-menu {
+                flex-basis: 0;
+                flex-grow: 1;
+                overflow: auto;
+                border: none !important;
+
+                &::-webkit-scrollbar {
+                    display: none;
+                }
             }
         }
     }
-}
-.el-header {
-    line-height: 60px;
-    border-bottom: 1px solid @borderColor;
-    color: @textColor;
-    font-size: 18px;
-    > * {
-        vertical-align: middle;
-    }
-    .btn-menu {
-        margin-right: 10px;
-        height: 60px;
-        margin-left: -20px;
-        width: 60px;
-        font-size: 24px;
-        border: none;
-        background: transparent;
-        outline: none;
-        cursor: pointer;
-    }
-}
-.el-menu {
-    width: 300px;
-    &.el-menu--collapse {
-        width: 64px;
+
+    .el-header {
+        line-height: 60px;
+        border-bottom: 1px solid @borderColor;
+        color: @textColor;
+        font-size: 18px;
+
+        > * {
+            vertical-align: middle;
+        }
+
+        .btn-menu {
+            margin-right: 10px;
+            height: 60px;
+            margin-left: -20px;
+            width: 60px;
+            font-size: 24px;
+            border: none;
+            background: transparent;
+            outline: none;
+            cursor: pointer;
+        }
     }
-}
-.small-screen {
-    .el-aside {
-        position: absolute;
-        width: 100% !important;
-        padding-right: 100px;
-        z-index: 999;
+
+    .el-menu {
+        width: 300px;
+
+        &.el-menu--collapse {
+            width: 64px;
+        }
     }
-    .menu-wrapper {
-        .el-menu {
-            width: 100%;
+
+    .small-screen {
+        .el-aside {
+            position: absolute;
+            width: 100% !important;
+            padding-right: 100px;
+            z-index: 999;
         }
-        .logo {
-            position: relative;
-            border-right: none;
-            .btn-close {
-                color: white;
-                font-size: 24px;
-                position: absolute;
-                right: 0;
-                top: 0;
-                bottom: 0;
-                margin: auto;
-                width: 30px;
-                height: 30px;
-                padding: 10px;
+
+        .menu-wrapper {
+            .el-menu {
+                width: 100%;
+            }
+
+            .logo {
+                position: relative;
+                border-right: none;
+
+                .btn-close {
+                    color: white;
+                    font-size: 24px;
+                    position: absolute;
+                    right: 0;
+                    top: 0;
+                    bottom: 0;
+                    margin: auto;
+                    width: 30px;
+                    height: 30px;
+                    padding: 10px;
+                }
             }
         }
     }
-}
-.slide-enter,
-.slide-leave-active {
-    transform: translateX(-100%);
-}
-.slide-enter-active,
-.slide-leave-active {
-    transition: all 0.3s;
-}
-.el-main {
-    background: #f2f4f5;
-    .page {
-        background: white;
-        padding: 20px 20px 20px 20px;
-        .action-container {
-            display: flex;
-            align-content: center;
-            margin-bottom: 15px;
-            .action {
+
+    .slide-enter,
+    .slide-leave-active {
+        transform: translateX(-100%);
+    }
+
+    .slide-enter-active,
+    .slide-leave-active {
+        transition: all 0.3s;
+    }
+
+    .el-main {
+        background: #f2f4f5;
+
+        .page {
+            background: white;
+            padding: 20px 20px 20px 20px;
+
+            .action-container {
                 display: flex;
-                margin-right: 20px;
-            }
-            .search-box {
-                width: 250px;
+                align-content: center;
+                margin-bottom: 15px;
+
+                .action {
+                    display: flex;
+                    margin-right: 20px;
+                }
+
+                .search-box {
+                    width: 250px;
+                }
             }
-        }
-        .el-form-item {
-            &:last-child {
-                margin-bottom: 0;
+
+            .el-form-item {
+                &:last-child {
+                    margin-bottom: 0;
+                }
             }
         }
     }
-}
 </style>

src/main/walk-china-admin/src/views/OrderEdit.vue

@@ -1,20 +1,21 @@
 <template>
     <div>
         <el-form :model="formData" :rules="rules" ref="form" label-width="80px"
-            label-position="right" size="small">
+                 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>
+                                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>
+                {{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>
@@ -33,7 +34,7 @@
             </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>
+                                value-format="yyyy-MM-dd HH:mm:ss" disabled>
                 </el-date-picker>
             </el-form-item>
             <el-form-item prop="contactName" label="联系人">
@@ -51,108 +52,108 @@
             <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>
+                               :label="item.label" :value="item.value"></el-option>
                 </el-select>
             </el-form-item>
             <el-form-item prop="shipTime" label="发货时间" v-if="formData.shipTime">
                 <el-date-picker v-model="formData.shipTime" type="datetime"
-                    value-format="yyyy-MM-dd HH:mm:ss" disabled>
+                                value-format="yyyy-MM-dd HH:mm:ss" disabled>
                 </el-date-picker>
             </el-form-item>
             <el-form-item prop="expressCompany" label="物流公司">
                 <el-input v-model="formData.expressCompany"></el-input>
             </el-form-item>
-            <el-form-item prop="trackingNo" label="物流单号"
-                v-if="formData.status === 'DELIVERING'">
+            <el-form-item prop="trackingNo" label="物流单号">
                 <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>
+                           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);
+    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;
                     }
-                })
-                .catch(e => {
-                    this.loading = false;
-                    console.log(e);
                 });
+            }
+        },
+        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;
-//     }
-// }
+    // .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/main/walk-china-admin/src/views/Orders.vue

@@ -3,7 +3,7 @@
         <div class="action-container">
             <div class="action">
                 <el-input v-model="id" placeholder="搜索订单号" @keyup.enter.native="page=0,getData()" size="small"
-                style="width:250px;"></el-input>
+                          style="width:250px;"></el-input>
             </div>
             <div class="action">
                 <el-select v-model="type" placeholder="状态" size="small">
@@ -60,6 +60,7 @@
     import paginationMixin from '@/mixins/pagination';
 
     export default {
+        name: 'orders',
         mixins: [paginationMixin],
         data() {
             return {