AngularJS商品新增订单批量发货删除排序全选反选日期过滤

来源:互联网 发布:淘宝花卉店铺推荐 编辑:程序博客网 时间:2024/05/04 16:37
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../AngularJS库/angular.js" ></script>
        <script type="text/javascript" src="../AngularJS库/angular-route.js" ></script>
        <style>
            #tid1{
                font-size: 12px;
                text-align: center;
            }
            #tid1 thead{
                background: gray;
            }
            #tid1 tbody tr:nth-child(odd){
                background: gainsboro;
            }
            button{
                padding: 5px;
                background: green;
                color: #FFFFFF;
                border-radius: 5px;
                border: 0;
            }
            #btntj{
                padding: 5px;
                background: green;
                color: #FFFFFF;
                border-radius: 5px;
                border: 0;
            }
            #ul1{
                font-size: 11px;
                 width: 180px;
                 background-color: lightpink;
                    color: darkred;
                    border-radius: 4px;
                 padding: 5px 5px;
            }
            /*错误提示的边框*/
            .errorRed{
                border: 1px solid red;
            }
            
        </style>
        <script>
            var app =angular.module("myApp",['ngRoute']);
            
            //路由
            app.config(["$routeProvider",function($routeProvider){
                $routeProvider
                .when("/",{template:""})
                .when("/addNewDingdan",{
                    templateUrl:"addNewDingdan.html",
                    controller:"addNewCtrl"
                })
                .otherwise({redirectTo:"/"});
            }]);
            
            //路由里面 添加订单的操作
            app.controller("addNewCtrl",function($scope,$location){
               $scope.errorArr = [];//错误提示的数组,,如果有 输入不合格的 就添加到数组里
              
              $scope.submitAdd = function(){
                   $scope.errorArr = [];//每次点击时候清空数组
                $scope.hasError = false;//是否有误
                
                $scope.addGnameClass = "";
                $scope.addUnameClass = "";
                $scope.addTelClass = "";
                
                   //点击事件里面,,判断各输入框是否合法
                   if($scope.addGname==""||$scope.addGname==undefined||$scope.addGname.trim()==""){
                       $scope.errorArr.push("商品名不能为空!");
                       $scope.addGnameClass = "errorRed";//对应的框变红
                       $scope.hasError = true;
                   }
                   if($scope.addUname==""||$scope.addUname==undefined||$scope.addUname.trim()==""){
                       $scope.errorArr.push("用户名不能为空!");
                       $scope.addUnameClass = "errorRed";//对应的框变红
                       $scope.hasError = true;
                   }
                   if($scope.addTel == undefined || $scope.addTel == "" || $scope.addTel.trim() == ""){
                       $scope.errorArr.push("手机号不能为空!");
                       $scope.addTelClass = "errorRed";//对应的框变红
                       $scope.hasError = true;
                   }
                   if ($scope.addCity == undefined || $scope.addCity == "" || $scope.addCity.trim() == "") {
                    $scope.errorArr.push("请选择城市!");
                    $scope.hasError = true;
                }    
                
                   if($scope.addGname.trim().length<6||$scope.addGname.trim().length>20){
                       $scope.errorArr.push("商品名必须是6-20个字符!");
                       $scope.addGnameClass = "errorRed";//对应的框变红
                       $scope.hasError = true;    
                   }
                if($scope.addUname.trim().length<4||$scope.addUname.trim().length>16){
                       $scope.errorArr.push("用户名必须是4-16个字符!");
                       $scope.addUnameClass = "errorRed";//对应的框变红
                       $scope.hasError = true;    
                   }
                   if($scope.addTel.trim().length!=11){
                       $scope.errorArr.push("手机号格式不正确!");
                       $scope.addTelClass = "errorRed";//对应的框变红
                       $scope.hasError = true;    
                   }
                   
                   //判断hasError的值
                   if($scope.hasError){
                       return;
                   }
                   //拿到id最大值,
                   var indexMax = 0;
                   for(var i=0;i<$scope.goods.length;i++){
                       if($scope.goods[i].id>indexMax){
                           indexMax = $scope.goods[i].id;
                       }
                   }
                       //添加到数组里
                       $scope.goods.push({
                           id:indexMax+1,//最大值加1
                           gname:$scope.addGname,
                        uname:$scope.addUname,
                        tel:$scope.addTel,
                        price:6967.00,
                        city:$scope.addCity,
                        buyTime:"10-25 16:00",
                        state:"发货",
                        checkState:false
                       });
                   
                   $location.path('/');
                };
            });
            app.controller("myCtrl",function($scope,$location){
                $scope.goods = [{
                    id:1,
                    gname:"iPhone4",
                    uname:"张三",
                    tel:15111111111,
                    price:4999.00,
                    city:"北京",
                    buyTime:"08-01 10:00",
                    state:"发货",
                    checkState:false
                },{
                    id:2,
                    gname:"小米6",
                    uname:"李四",
                    tel:15222222222,
                    price:2999.00,
                    city:"北京",
                    buyTime:"08-02 10:00",
                    state:"发货",
                    checkState:false
                },{
                    id:3,
                    gname:"华为P9",
                    uname:"王五",
                    tel:15333333333,
                    price:3999.00,
                    city:"上海",
                    buyTime:"09-03 10:00",
                    state:"已发货",
                    checkState:false
                },{
                    id:4,
                    gname:"OPPO R11",
                    uname:"赵六",
                    tel:15444444444,
                    price:4999.00,
                    city:"天津",
                    buyTime:"09-04 10:00",
                    state:"已收货",
                    checkState:false
                },{
                    id:5,
                    gname:"vivo",
                    uname:"周七",
                    tel:15555555555,
                    price:2999.00,
                    city:"重庆",
                    buyTime:"10-04 10:00",
                    state:"已发货",
                    checkState:false
                }];
                
                
                //点击 新增订单 按钮 跳转路由
                $scope.goToUrl = function(url){
                    $location.path(url);
                };
                
                //默认状态下是
                $scope.cityC = "选择城市";
                //下拉菜单选择城市
                $scope.cityChaxun = function(city,cityC){
                    if($scope.cityC== "选择城市"){
                        return true;
                    }else{
                        if(city==cityC){
                        return true;
                    }else{
                        return false;
                    }
                    }
                };
                
                //默认的选择状态
                $scope.stateC = "选择状态";
                $scope.stateChaxun = function(state,stateC){
                    if($scope.stateC== "选择状态"){
                        return true;
                    }else{
                        if(state==stateC){
                        return true;
                    }else{
                        return false;
                    }
                    }
                };
                
                $scope.startMonthC = "开始月份";
                $scope.endMonthC = "结束月份";
                
                $scope.timeChaxun = function(buyTime,startMonthC,endMonthC){
                    if($scope.startMonthC=="开始月份"||$scope.endMonthC=="结束月份"){
                        return true;
                    }else{
                        var splitArr = buyTime.split(" ");
                        //alert(splitArr[0]);前面的日期 08-01
                        var timeSplitArr = splitArr[0].split("-");
                        //alert(timeSplitArr[0]);//08
                        //转码 必须转码
                        var numberBuyTime = parseInt(timeSplitArr[0]);
                        if(numberBuyTime>=$scope.startMonthC&&numberBuyTime<=$scope.endMonthC){
                            return true;
                        }else{
                            return false;
                        }
                    }
                }
                
                
                //当待发货时候  点击 发货按钮,改变状态
                $scope.djFahuo = function(index){
                    $scope.goods[index].state = "已发货";
                };
                
                //一开始默认是全不选
                $scope.checkedAll = false;
                var a=0;
                //正着全选
                $scope.selectAll =function(){
                    if($scope.checkedAll){
                        for(var i=0;i<$scope.goods.length;i++){
                            $scope.goods[i].checkState = true;
                            a++;
                        }
                    }else{
                        for(var i=0;i<$scope.goods.length;i++){
                            $scope.goods[i].checkState = false;
                            a--;
                        }
                    }
                };
                
                //反着全选
                $scope.selectOne = function(index){
                    if($scope.goods[index].checkState){
                        a++;
                    }else{
                        a--;
                    }
                    
                    if(a==$scope.goods.length){
                        //如果小按钮全部选中了,就让大的全选按钮也选中
                        $scope.checkedAll = true;
                    }else{
                        $scope.checkedAll = false;
                    }
                };
                
                //批量发货点击事件
                $scope.plFahuo = function(){
                    if(a==0){
                        alert("请选择要批量发货的商品!");
                    }else{
                        for(var i=0;i<$scope.goods.length;i++){
                            if($scope.goods[i].checkState){
                            $scope.goods[i].state = "已发货";
                                $scope.goods[i].checkState = false;
                            a--;
                            }
                        }
                    $scope.checkedAll = false;
                    }
                };
                
                //批量删除点击事件
                $scope.plDelete = function(){
                    if(a==0){
                        alert("请选择要批量删除的商品!");
                    }else{
                        for(var i=0;i<$scope.goods.length;i++){
                            if($scope.goods[i].checkState){
                               
                                $scope.goods.splice(i,1);
                                i--;//会出现下标越界,所以i--
                               a--;
                            }
                        }
                    $scope.checkedAll = false;
                    }
                };
                //默认是以id正序排列
                $scope.lieming = "id";
                $scope.zhengfu = false;//默认是正的false
            //点击按钮 根据列名排序
            $scope.idSort = function(liem){
                if($scope.zhengfu==true){
                    $scope.zhengfu=false;
                }else{
                    $scope.zhengfu=true;
                }
                //赋值给列名
                $scope.lieming = liem;
            }
            });
        </script>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
        <center width="68%" id="center1">
<input style="width: 100px;font-size: 12px;" type="text" ng-model="yhmss" placeholder="用户名搜索"/>
        <input style="width: 100px;font-size: 12px;" ng-model="telss" type="text" placeholder="手机号搜索"/>
    <select ng-model="cityC">
        <option>选择城市</option>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>天津</option>
        <option>重庆</option>
        <option>厦门</option>
    </select>
    <select ng-model="stateC">
        <option>选择状态</option>
        <option value="发货">待发货</option>
        <option>已发货</option>
        <option>已收货</option>
    </select>
        <select ng-model="startMonthC">
        <option>开始月份</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
    </select>
    ~
    </select>
        <select ng-model="endMonthC">
        <option>结束月份</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
    </select>
    <br />
    <br />
    <button ng-click="goToUrl('/addNewDingdan')">新增订单</button>
    <button ng-click="plFahuo()">批量发货</button>
    <button ng-click="plDelete()">批量删除</button>
    <br /><br />
    </center>
    <center  id="center2">
    <table id="tid1" border="1" cellpadding="5" cellspacing="0" width="68%">
                <thead>
                    <tr>
                        <th>
             <input type="checkbox" ng-model="checkedAll" ng-click="selectAll()"/>
                        </th>
                        <th>ID
        <button ng-click="idSort('id')">排序</button>
                        </th>
                        <th>商品名</th>
                        <th>用户名</th>
                        <th>手机号</th>
                        <th>价格
        <button ng-click="idSort('price')">排序</button>
                        </th>
                        <th>城市</th>
                        <th>下单时间
        <button ng-click="idSort('buyTime')">排序</button>
                        </th>
                        <th>状态</th>
                    </tr>
                </thead>
                <tbody>
<tr ng-repeat="x in goods | orderBy:lieming:zhengfu | filter:{uname:yhmss} | filter:{tel:telss}"
    ng-if="cityChaxun(x.city,cityC)&&stateChaxun(x.state,stateC)&&timeChaxun(x.buyTime,startMonthC,endMonthC)">
                   <td>
       <input type="checkbox" ng-model="x.checkState" ng-click="selectOne($index)"/>
                   </td>
                        <td>{{x.id}}</td>
                        <td>{{x.gname}}</td>
                        <td>{{x.uname}}</td>
                        <td>{{x.tel}}</td>
                        <td>{{x.price}}</td>
                        <td>{{x.city}}</td>
                        <td>{{x.buyTime}}</td>
                        <!--根据发货状态不同 显示隐藏标签,-->
                        <td>
                            <span ng-if="x.state == '发货'"><a href="#" ng-click="djFahuo($index)">{{x.state}}</a></span>
                            <span ng-if="x.state == '已发货'">{{x.state}}</span>
                            <span ng-if="x.state == '已收货'">{{x.state}}</span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </center>
        
        <script type="text/ng-template" id="addNewDingdan.html">
            <div style="border: 1px solid black;width: 50%;">
            <table>
                <caption>新增订单</caption>
                <tbody>
                    <tr>
                        <td>商品名</td>
                        <td>
             <input type="text" placeholder="6-20个字符" ng-model="addGname" ng-class="addGnameClass"/>
                        </td>
                    </tr>
                    <tr>
                        <td>用户名</td>
                        <td>
        <input type="text" placeholder="4-16个字符" ng-model="addUname" ng-class="addUnameClass"/>
                        </td>
                    </tr>
                    <tr>
                        <td>手机号</td>
                        <td>
                 <input type="text" ng-model="addTel" ng-class="addTelClass"/>
                        </td>
                    </tr>
                    <tr>
                        <td>城市</td>
                        <td>
                 <select ng-model="addCity">
                     <option value="">选择城市</option>
                     <option>北京</option>
                     <option>上海</option>
                     <option>广州</option>
                    <option>天津</option>
                    <option>重庆</option>
                    <option>厦门</option>
                     
                 </select>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                        <div id="ul1" ng-show="hasError">
                        <ul>
                            <li ng-repeat="e in errorArr">
                                {{e}}
                            </li>
                           </ul>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                    <button id="btntj" ng-click="submitAdd()">提交</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            </div>
        </script>
        <br />
        <center>
            <div ng-view=""></div>
        </center>
    </body>
</html>

阅读全文
0 0
原创粉丝点击