AngularJs实现增加订单、批量发货

梦里梦外; 2022-06-06 00:48 181阅读 0赞

**实现效果：**

![Center][]

![Center 1][]

实现要求：

1、 完成页面

2、 点击“新增订单”，弹出上框，新增订单状态都是“待发货”

3、 实现排序

4、 提交订单时，检查表单，提示错误内容，并且将文本框颜色变红色（错误提示）

5、 选择状态查询：待发货、已发货、已收货

6、 点击“发货”按钮，将“待发货”状态改成“已发货”

7、 通过Checkbox全选和全不选

8、 点击“批量删除”按钮，删除选中的订单

9、 选择“开始月份”：01~12

10、 选择“结束月份”：01~12，查询开始月份和结束月份之间的订单

**源码：**

<!DOCTYPE html>
    <html ng-app="myApp">
    <head lang="en">
        <meta charset="UTF-8">
        <script type="text/javascript" src="jquery.1.12.4.js"></script>
        <script type="text/javascript" src="angular-1.3.0.js"></script>
        <title>月考模拟</title>
        <style type="text/css">
            #all{
                width: 800px;
                height: 700px;
                margin: auto;
            }
            .filter {
                width: 800px;
                height: 60px;
                margin: 0 auto;
            }
    
            .filter input {
                width: 152px;
                height: 24px;
                border: 1px solid #999;
                border-radius: 4px;
                padding-left: 8px;
            }
    
            .filter select {
                width: 86px;
                height: 24px;
                border: 1px solid #999;
                border-radius: 4px;
            }
            button {
                background-color: green;
                border: 0;
                border-radius: 4px;
                color: white;
            }
            .add{
                width: 80px;
                height: 30px;
                margin-top: 5px;
                background: green;
                color: snow;
            }
            .show{
                width: 80px;
                height: 30px;
                margin-top: 5px;
                background: green;
                color: snow;
            }
            table{
                width: 800px;
                text-align: center;
            }
            table th{
                background: #aaaaaa;
            }
            #add_show{
                margin-top: 10px;
                width: 798px;
                height: 600px;
                border: 1px solid black;
            }
            #add_show b{
                font-size: 20px;
                margin: 10px;
            }
            #add_from{
                width: 600px;
                margin: auto;
            }
            #add_from span{
                margin-top: 15px;
                font-size: 20px;
                margin-right: 10px;
            }
            #add_from input{
                font-size: 20px;
                margin-top: 15px;
                width: 500px;
                height: 30px;
            }
            #add_from select{
                font-size: 20px;
                width: 130px;
                height: 30px;
                margin-top: 15px;
            }
            #add_erro{
                width: 500px;
                height: 250px;
                background: lightpink;
                margin-left: 68px;
                margin-top: 15px;
            }
            #add_erro ul{
                width: 300px;
                height: 250px;
                padding-top: 10px;
                margin-left: 20px;
                color: palevioletred;
            }
            #add_erro li{
                margin-top: 10px;
            }
            #button{
                background: green;
                color: aliceblue;
                width: 60px;
                height: 40px;
                font-size: 16px;
                margin-left: 168px;
                margin-top: 10px;
            }
        </style>
        <script type="text/javascript">
            $(document).ready(function(){
                odd= {
      "background":"#ddd"};//奇数样式 even={
      "background":"#fff"};//偶数样式 odd_even("#table_test",odd,even);
            });
            function odd_even(id,odd,even){
                $("table").find("tr").each(function(index,element){
                    if(index%2==1)
                        $(this).css(odd);
                    else $(this).css(even);
                });
            }
            var app = angular.module("myApp", []);
            app.controller("myCtrl", function ($scope) {
                $scope.users = [
                    {
                        id:1,
                        show_name:"iPhone4",
                        name:"张三",
                        number:"1213213123",
                        price:4999,
                        city:"北京",
                        time:"08-01 15:32",
                        status:"待发货" },
                    {
                        id:2,
                        show_name:"小米6",
                        name:"李四",
                        number:"346363466",
                        price:2999,
                        city:"北京",
                        time:"05-02 14:22",
                        status:"待发货" },
                    {
                        id:3,
                        show_name:"华为P9",
                        name:"王五",
                        number:"32532535",
                        price:3999,
                        city:"上海",
                        time:"08-03 09:18",
                        status:"已发货" },
                    {
                        id:4,
                        show_name:"OPPO R11",
                        name:"赵六",
                        number:"976969464",
                        price:4999,
                        city:"天津",
                        time:"10-04 13:32",
                        status:"已收货" },
                    {
                        id:5,
                        show_name:"VIVO",
                        name:"周七",
                        number:"213141125",
                        price:2999,
                        city:"重庆",
                        time:"06-05 21:34",
                        status:"已发货" },
                ]
                //按月查找 $scope.filterByMonth = function (user) {
                    if ($scope.filter_begin_month == undefined || $scope.filter_begin_month == "") {
                        return true;
                    }
    
                    if ($scope.filter_end_month == undefined || $scope.filter_end_month == "") {
                        return true;
                    }
    
                    var beginMonth = parseInt($scope.filter_begin_month);
                    var endMonth = parseInt($scope.filter_end_month);
                    if (beginMonth > endMonth) {
                        return true;
                    }
    
    
                    var month = user.time.substring(0, user.time.indexOf("-"));
                    month = parseInt(month);
                    return (month >= beginMonth && month <= endMonthd);
                };
                $scope.showAddOrderForm = function () {
                    $scope.isShowAddOrderForm = true;
                };
                //全选按钮 $scope.gou=function () {
                    for(var i=0;i<$scope.users.length;i++) {
                        if($scope.checkAll==true) {
                            $scope.users[i].state=true;
                        } else {
                            $scope.users[i].state=false;
                        }
                    }
                }
                //价格排序 $scope.changePriceOrderType = function () {
                    if ($scope.price_order_type == "price") {
                        $scope.price_order_type = "-price";
                    } else {
                        $scope.price_order_type = "price";
                    }
                };
                //时间排序 $scope.changeTimeOrderType = function () {
                    if ($scope.time_order_type == "time") {
                        $scope.time_order_type = "-time";
                    } else {
                        $scope.time_order_type = "time";
                    }
                };
                //ID排序 $scope.order = function () {
                    if ($scope.search_id == 1) {
                        $scope.users.sort(function (json1, json2) {
                            return (json1.id < json2.id) ? 1 : -1;
                        });
                    } else if ($scope.search_id == 2) {
                        $scope.users.sort(function (json1, json2) {
                            return (json1.id > json2.id) ? 1 : -1;
                        });
                    }
                }
                // 将待发货，改成已发货 $scope.deliver = function (id) {
                    for (var i in $scope.users) {
                        if ($scope.users[i].id == id) {
                            $scope.users[i].status = "已发货";
                        }
                    }
                };
                //批量发货 $scope.sendShow=function(){
                    var userNames=[];
                    for(index in $scope.users){
                        if($scope.users[index].state == true){
                            userNames.push($scope.users[index].id);
                        }
                    }
    
                    if(userNames.length>0){
                        if(confirm("是否对选中项发货？")){
                            for(i in userNames){
                                var id=userNames[i];
                                for (var i in $scope.users) {
                                    if ($scope.users[i].id == id) {
                                        $scope.users[i].status = "已发货";
                                    }
                                }
                            }
                        }
                    }else{
                        alert("请选择发货的项")
                    }
                }
                //批量删除 $scope.deleteShow=function(){
                    var userNames=[];
                    for(index in $scope.users){
                        if($scope.users[index].state == true){
                            userNames.push($scope.users[index].name);
                        }
                    }
    
                    if(userNames.length>0){
                        if(confirm("是否删除选中项？")){
                            for(i in userNames){
                                var name=userNames[i];
                                for(i2 in $scope.users){
                                    if($scope.users[i2].name==name){
                                        $scope.users.splice(i2,1);
                                    }
                                }
                            }
                        }
                    }else{
                        alert("请选择删除的项")
                    }
                }
                //创建date对象 var date = new Date();
                //获取年 var y = date.getFullYear();
                //月 默认是0-11 [0,12) var m = date.getMonth()+1;
                //日 var d  = date.getDay();//获取一个星期里面的第几天 var dd = date.getDate();//或某个月的某一天 //时分秒 var h = date.getHours();
                var mm = date.getMinutes();
                var s = date.getSeconds();
                //拼接 var t = m+"-"+dd+" "+h+":"+mm;
                $scope.erro_show = false;
                $scope.l1 = false;
                $scope.l2 = false;
                $scope.l3 = false;
                $scope.l4 = false;
                $scope.l5 = false;
                $scope.l6 = false;
                $scope.l7 = false;
                $scope.sub = function(){
                    var show_name = $scope.add_show_name;
                    var name = $scope.add_name;
                    var number = $scope.add_number;
                    var city = $scope.add_city;
                    if(show_name!=null){
                        if(show_name.length>=6&&show_name.length<=20){
                            $scope.show_name_style ={
                                "border":"1px solid #ccc" }
                            if(name!=null){
                                if(name.length>=4&&name.length<=16){
                                    $scope.name_style ={
                                        "border":"1px solid #ccc" }
                                    if(number!=null){
                                        if(number.length==11){
                                            $scope.number_style ={
                                                "border":"1px solid #ccc" }
                                            if(city!=undefined&&city!=""){
                                                $scope.city_style ={
                                                    "border":"1px solid #ccc" }
                                                var newUser = {
                                                    id:$scope.users.length + 1,
                                                    show_name:$scope.add_show_name,
                                                    name:$scope.add_name,
                                                    number:$scope.add_number,
                                                    price:2999,
                                                    city:$scope.add_city,
                                                    time:t,
                                                    status:"待发货",
                                                }
                                                //添加新用户. $scope.users.push(newUser);
                                                $scope.isShowAddOrderForm = false;
                                            }else{
                                                $scope.city_style ={
                                                    "border":"1px solid red" }
                                                $scope.erro_show = true;
                                                $scope.l7 = true;
                                            }
                                        }else{
                                            $scope.number_style ={
                                                "border":"1px solid red" }
                                            $scope.erro_show = true;
                                            $scope.l6 = true;
                                        }
                                    }else{
                                        $scope.number_style ={
                                            "border":"1px solid red" }
                                        $scope.erro_show = true;
                                        $scope.l5 = true;
                                    }
                                }else{
                                    $scope.name_style ={
                                        "border":"1px solid red" }
                                    $scope.erro_show = true;
                                    $scope.l4 = true;
                                }
                            }else{
                                $scope.name_style ={
                                    "border":"1px solid red" }
                                $scope.erro_show = true;
                                $scope.l3 = true;
                            }
                        }else{
                            $scope.show_name_style ={
                                "border":"1px solid red" }
                            $scope.erro_show = true;
                            $scope.l2 = true;
                        }
                    }else{
                        $scope.show_name_style ={
                            "border":"1px solid red" }
                        $scope.erro_show = true;
                        $scope.l1 = true;
                    }
    
    
                }
            });
    
    
        </script>
    </head>
    <body ng-controller="myCtrl">
    <div id="all">
        <div class="filter">
            <input type="text" placeholder="用户名搜索" ng-model="search_name">
            <input type="text" placeholder="手机号搜索" ng-model="search_num">
            <select ng-model="search_city">
                <option value="">选择城市</option>
                <option>北京</option>
                <option>上海</option>
                <option>重庆</option>
                <option>天津</option>
                <option>深圳</option>
            </select>
            <select ng-model="search_status">
                <option value="">选择状态</option>
                <option value="待发货">待发货</option>
                <option value="已发货">已发货</option>
                <option value="已收货">已收货</option>
            </select>
            <select ng-model="filter_begin_month">
                <option value="">开始月份</option>
                <option value="1">01</option>
                <option value="2">02</option>
                <option value="3">03</option>
                <option value="4">04</option>
                <option value="5">05</option>
                <option value="6">06</option>
                <option value="7">07</option>
                <option value="8">08</option>
                <option value="9">09</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
            </select>-
            <select ng-model="filter_end_month">
                <option value="">结束月份</option>
                <option value="1">01</option>
                <option value="2">02</option>
                <option value="3">03</option>
                <option value="4">04</option>
                <option value="5">05</option>
                <option value="6">06</option>
                <option value="7">07</option>
                <option value="8">08</option>
                <option value="9">09</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
            </select>
            <select ng-model="search_id" ng-change="order()">
                <option value="">排序</option>
                <option value="1">ID正序</option>
                <option value="2">ID倒序</option>
            </select>
            <br>
            <input type="button" value="新增订单" class="add" ng-click="showAddOrderForm();" >
            <input type="button" value="批量发货" class="show" ng-click="sendShow();">
            <input type="button" value="批量删除" class= "show" ng-click="deleteShow();">
        </div>
        <table border="1" cellspacing="0" cellpadding="10">
            <thead>
            <tr>
                <th><input type="checkbox" ng-click="gou()" ng-model="checkAll"></th>
                <th>ID</th>
                <th>商品名</th>
                <th>用户名</th>
                <th>手机号</th>
                <th>价格<button ng-click="changePriceOrderType()">排序</button></th>
                <th>城市</th>
                <th>下单时间<button ng-click="changeTimeOrderType()">排序</button></th>
                <th>状态</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="user in users | filter:{ 'name':search_name}|filter:{ 'number':search_num}|filter:{ 'city':search_city}|filter:{ 'status':search_status}| filter: filterByMonth| orderBy: id|orderBy: price_order_type|orderBy: time_order_type">
                <td><input ng-model="user.state" type="checkbox"></td>
                <td>{
      {
      user.id}}</td>
                <td>{
      {
      user.show_name}}</td>
                <td>{
      {
      user.name}}</td>
                <td>{
      {
      user.number}}</td>
                <td>{
      {
      user.price| currency: "￥"}}</td>
                <td>{
      {
      user.city}}</td>
                <td>{
      {
      user.time}}</td>
                <td>
                    <span ng-show="user.status=='待发货'" ng-click="deliver(user.id)">
                        <a href="javascript: void(0);">发货</a>
                    </span>
                    <span ng-show="user.status=='已发货'">已发货</span>
                    <span ng-show="user.status=='已收货'">已收货</span>
                </td>
            </tr>
            </tbody>
        </table>
        <div id="add_show" ng-show="isShowAddOrderForm">
            <b>新增订单</b>
            <div id="add_from" >
                <span>商品名</span><input type="text" placeholder="6-20个字符" ng-model="add_show_name" ng-style="show_name_style"><br>
                <span>用户名</span><input type="text" placeholder="4-16个字符" ng-model="add_name" ng-style="name_style"><br>
                <span>手机号</span><input type="text" ng-model="add_number" ng-style="number_style"><br>
                <span style="margin-left: 16px;">城市</span>
                <select ng-model="add_city" ng-style="city_style">
                    <option value="">选择城市</option>
                    <option>北京</option>
                    <option>上海</option>
                    <option>天津</option>
                    <option>重庆</option>
                    <option>深圳</option>
                </select>
                <div id="add_erro" ng-show="erro_show">
                    <ul>
                        <li ng-show="l1">商品名不能为空</li>
                        <li ng-show="l2">商品名必须是6-20个字符</li>
                        <li ng-show="l3">用户名不能为空</li>
                        <li ng-show="l4">用户名必须是4-16个字符</li>
                        <li ng-show="l5">手机号不能为空</li>
                        <li ng-show="l6">手机号格式不正确</li>
                        <li ng-show="l7">请选择城市</li>
                    </ul>
                </div>
            </div>
            <input type="button" value="提交" ng-click="sub()" id="button">
        </div>
    
    </div>
    </body>
    </html>

[Center]: /images/20220606/15734fa6fcf641a2857b77e1540c4b83.png
[Center 1]: /images/20220606/8fe627d9b89148d1841968787ce9063b.png