front-end-of-violet
/
orderManagement.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/element-lib/index.js"></script>
    <link rel="stylesheet" href="js/element-lib/theme-chalk/index.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/storeindex.css">
    <script src="js/franchisee.js"></script>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }

        /* 表单控件 */
        #search-box {
            font-size: 15px;
            margin-top: 50px;
        }

        /* 备注 字体的大小 */
        .custom-tag {
            font-size: 16px;
            /* 设置自定义的字体大小 */
        }
    </style>
</head>

<body>

    <div id="app">

        <el-container>
            <el-aside width="31%">
                <el-table :data="tableData.data" style="width: 100%;" height="320">
                    <el-table-column prop="productName" label="产品" width="150">
                    </el-table-column>
                    <el-table-column prop="purchaseQuantity" label="数量" width="130" align="center">
                    </el-table-column>
                    <el-table-column prop="productPrice" label="价格" width="130" align="center">
                    </el-table-column>
                </el-table>
                <div style="padding-top: 20px;width: 97%;">

                    <el-form ref="form" :model="form" label-width="60px">

                        <el-form-item label="姓名:" prop="userInfoName">{{userInfoName}}</el-form-item>
                        <el-form-item label="电话:"></el-form-item>
                        <el-form-item label="地址:"></el-form-item>
                        <el-form-item label="备注:" prop="orderInfoNumber">{{desc}}</el-form-item>

                        <el-form-item label="总计:">
                            <span>{{count}}</span>
                        </el-form-item>
                    </el-form>
                </div>
            </el-aside>
            <el-container>
                <el-header>
                    <el-menu default-active="3" class="el-menu-demo" mode="horizontal">
                        <el-menu-item index="1" onclick="location.href = 'storeindex.html'">主页</el-menu-item>
                        <el-menu-item index="2" onclick="location.href = 'addOrder.html'">新增订单</el-menu-item>
                        <el-menu-item index="3" onclick="location.href = 'orderManagement.html'">订单管理</el-menu-item>
                        <el-menu-item index="4">库存管理</el-menu-item>
                        <el-menu-item index="5">账号管理</el-menu-item>
                    </el-menu>

                </el-header>
                <el-main>
                    <el-table :data="orderInfoData" stripe style="width: 100%">
                        <el-table-column prop="orderInfoNumber" label="订单号" width="150" align="center">
                            <template slot-scope="scope">
                                <el-popover trigger="hover" placement="top">
                                    <p>订单备注: {{ scope.row.orderInfoNote }}</p>
                                    <div slot="reference" class="name-wrapper">
                                        <el-tag size="medium">{{ scope.row.orderInfoNumber }}</el-tag>
                                    </div>
                                </el-popover>
                            </template>
                        </el-table-column>
                        <el-table-column prop="userInfoName" label="用户名" width="150" align="center">
                        </el-table-column>
                        <el-table-column prop="franchiseStoresName" label="加盟店" width="150" align="center">
                        </el-table-column>
                        <el-table-column prop="orderInfoStateStr" label="订单状态" width="150" align="center">
                        </el-table-column>
                        <el-table-column prop="paymentMethod" label="支付方式" width="150" align="center">
                            <template slot-scope="scope">
                                <span v-if="scope.row.paymentMethod === 1">支付宝</span>
                                <span v-else-if="scope.row.paymentMethod === 2">微信</span>
                                <span v-else>第三方支付</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="orderInfoAddTime" label="订单日期" width="150" align="center">
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="150" align="center">
                            <template slot-scope="scope">
                                <el-row style="text-align: center;">
                                    <el-col>
                                        <el-link type="primary" @click="edit(scope.row)">查看</el-link>
                                        <el-link type="primary" @click="advance(scope.row.orderInfoState)">
                                            <span v-if="scope.row.orderInfoState === 0">制作完成</span>
                                            <span v-else-if="scope.row.orderInfoState === 1">订单完成</span>
                                        </el-link>
                                        <el-link type="primary" disabled>
                                            <span v-if="scope.row.orderInfoState === 2">已完成</span>
                                        </el-link>

                                    </el-col>
                                </el-row>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-main>
                <el-footer>Footer</el-footer>
            </el-container>
        </el-container>
    </div>

    <script>
        let vm = new Vue({
            el: "#app",
            data() {
                return {
                    isCollapse: false,
                    detailId: 0,
                    menuList: [],
                    menuActive: 0,
                    orderInfoData: [],
                    pageNo: 1,
                    pageSize: 6,
                    pageSizes: [5, 10, 15],
                    totalCount: 1,
                    orderInfoStateStr: undefined,
                    orderInfoNumber: "",
                    userInfoName: "",
                    franchiseStoresName: "",
                    orderInfoAddTime: "",
                    tableData: {
                        orderInfoId: 0,
                        data: [
                        ]
                    }, form: {
                        userInfoName: "",
                        desc: "",
                    }, orders: []

                }
            }, created() {
                this.getOrderInfoPagingList();
            }, methods: {
                tableRowClassName({ row, rowIndex }) {
                    if (rowIndex === 1) {
                        return 'warning-row';
                    } else if (rowIndex === 3) {
                        return 'success-row';
                    }
                    return '';
                }, logOff() {
                    localStorage.removeItem('nfLoginJwt');
                    location.href = "login.html"
                }, toggleCollapse() {
                    vm.isCollapse = !vm.isCollapse
                }, getOrderInfoPagingList() {
                    axios({
                        method: "GET",
                        url: "/order/info/get/order/info/by/token",
                    }).then(resp => {
                        this.orderInfoData = resp.data.data
                    })
                }, handleSizeChange(size) {
                    this.pageSize = size
                    this.getOrderInfoPagingList()
                    this.pageNo = 1
                }, handleCurrentChange(no) {
                    this.pageNo = no
                    this.getOrderInfoPagingList()
                }, edit(orderInfo) {
                    // console.log(id)
                    vm.userInfoName = orderInfo.userInfoName;
                    vm.desc = orderInfo.orderInfoNote;
                    axios({
                        method: "GET",
                        url: "/order/detail/get/order/detail/list/by/order/info/id",
                        params: {
                            orderInfoId: orderInfo.id
                        }
                    }).then(resp => {
                        vm.tableData.data = resp.data.data;
                        // vm.tableData.orderInfoId = id;
                    });
                }, advance(improvement) {
                    log(id);
                    axios({
                        method: "POST",
                        url: "/order/info/update/order/info/state/by/id",
                        params: {
                            id: id
                        }
                    }).then(resp => {
                        if (scope.row.orderInfoState > 1) {
                            console
                        }
                    });
                }
            }, computed: {
                count() {
                    var tl = this.tableData.data.length;
                    var result = 0;
                    for (var i = 0; i < tl; i++) {
                        result += this.tableData.data[i].productPrice * this.tableData.data[i].purchaseQuantity;
                    }
                    if (result == NaN) {
                        return 0;
                    }
                    return result;
                }
            }
        })
    </script>
</body>

</html>