订单发货

最新推荐文章于 2021-06-26 13:25:02 发布
gh323093
最新推荐文章于 2021-06-26 13:25:02 发布
阅读量585
点赞数
分类专栏： Web前端
本文链接：https://blog.csdn.net/gh323093/article/details/78613640
版权
Web前端专栏收录该内容
56 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border-collapse: collapse;
        }
        th{
            width: 200px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid black;
            background: gray;
        }
        td{
            width: 200px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid black;
        }
        .red{
            border: 1px solid red;
        }
        .font{
            border: green;
        }
    </style>
    <script src="../angular-1.5.5/angular.min.js"></script>
    <script>
        var myapp=angular.module("myapp",[]);
        myapp.controller("MysCtrl",function ($scope) {
            $scope.items=[
                { shopname:'小米6',name:"张三",call:'19876542',price:4955,city:"北京",time:"08-01 10:00",state:"发货",check:false},
                { shopname:'华为P9',name:"李四",call:'18653555',price:2141,city:"上海",time:"08-02 10:00",state:"发货",check:false},
                { shopname:'OPPO R11',name:"王五",call:'17562545',price:3200,city:"广州",time:"09-03 10:00",state:"以发货",check:false},
                { shopname:'VIVO X9',name:"小米",call:'17524633',price:1999,city:"天津",time:"09-04 10:00",state:"以发货",check:false},
                { shopname:'Iphone8',name:"小雷",call:'12345698',price:6810,city:"武汉",time:"10-04 9:00",state:"以发货",check:false}
            ];
            //按城市查询
            $scope.findCity="选择城市";
            $scope.citys=function (item) {
                if($scope.findCity!="选择城市"){

                    if($scope.findCity==item.city){
                        return true;
                    }else {
                        return false;
                    }
                }else{
                    return true;
                }
            };
            // 查询状态
            $scope.myStates="选择状态";
            $scope.states=function (item) {
                if($scope.myStates!="选择状态"){
                    if($scope.myStates==item.state){
                        return true;
                    }else{
                        return false;
                    }
                }else{
                    return true;
                }

            }
            //点击全选
            $scope.CheckedAll=function () {
                if($scope.AllChecked==true){
                    for(var i=0;i<$scope.items.length;i++){
                        $scope.items[i].check=true;
                    }
                }else{
                    for(var i=0;i<$scope.items.length;i++){
                        $scope.items[i].check=false;
                    }
                }
            };
            $scope.ItemsChecked=function () {
                var flag=0;
                for(var i=0;i<$scope.items.length;i++){
                    if($scope.items[i].check==true){
                        flag++;
                    }else{
                        flag--;
                    }
                }
                if(flag==$scope.items.length){
                    $scope.AllChecked=true;
                }else{
                    $scope.AllChecked=false;
                }
            };
            //批量删除
            $scope.piDelete=function () {
                for (var i = 0; i < $scope.items.length; i++) {
                    if ($scope.items[i].check) { //选中的
                        $scope.items.splice($scope.items.indexOf($scope.items[i]), 1);
                        i--;
                    }
                }
                //判断if全选那么把表头隐藏
                if($scope.AllChecked==true){
                    document.getElementsByTagName("table")[0].innerHTML="";
                }
            };
            $scope.show=false;
            $scope.add=function () {
                $scope.show=true;
            };
            //点击添加
            $scope.k_shName="";
            $scope.k_Name="";
            $scope.k_call="";
            $scope.show=false;
            $scope.checks=false;
            $scope.k_City="选择城市";
            $scope.tj=function () {

//                if($scope.k_shName==""|| $scope.k_shName.length<6|| $scope.k_shName.length<20
//                ||$scope.k_Name.length<4||$scope.k_Name.length<16
//                    ||$scope.k_City=="选择城市")
//                {
//
//                    $scope.show=true;
//                    $scope.checks=true;
//                }else
//                    {
                $scope.show=true;
                $scope.checks=true;
                $scope.items.push({
                    shopname:$scope.k_shName,
                    name:$scope.k_Name,
                    call:$scope.k_call,
                    city:$scope.k_City,
                    state:"发货"
                });
//                }

            };

            //排序

            $scope.correct=true;
            $scope.sortname="";
            $scope.sort=function (name) {
                $scope.sortname=name;
            };
            //状态改变
            $scope.kd=function (index) {
                if($scope.items[index].state=="发货"){
                    $scope.items[index].state="以发货"
                }
            }


        })
    </script>
</head>

<body ng-app="myapp" ng-controller="MysCtrl">
<input type="text" ng-model="key_name" placeholder="用户名搜索">
<input type="text" ng-model="key_call" placeholder="手机号搜索">
<select ng-model="findCity" ng-change="fun()">
    <option>选择城市</option>
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option>天津</option>
    <option>武汉</option>
</select>
<select ng-model="myStates" ng-change="run()">
    <option>选择状态</option>
    <option>发货</option>
    <option>以发货</option>
</select><br>
<button ng-click="add()">新增订单</button>
<button ng-click="piDelete()">批量发货</button>
<table>
    <thead>
    <tr>
        <th><input type="checkbox" ng-model="AllChecked" ng-click="CheckedAll()"></th>
        <th>ID<button ng-click="sort($index)" style="background: green">排序</button></th>
        <th>商品名</th>
        <th>用户名</th>
        <th>手机号</th>
        <th>价格<button ng-click="sort('price')" style="background: green">排序</button></th>
        <th>城市</th>
        <th>下单时间<button ng-click="sort('time')" style="background: green">排序</button></th>
        <th>状态</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="x in items|filter:{name:key_name}|filter:{call:key_call}|filter:citys|filter:states|orderBy:sortname">

        <td><input type="checkbox" ng-model="x.check" ng-click="ItemsChecked()"></td>
        <td>{{$index}}</td>
        <td>{{x.shopname}}</td>
        <td>{{x.name}}</td>
        <td>{{x.call}}</td>
        <td>{{x.price|currency:"￥"}}</td>
        <td>{{x.city}}</td>
        <td>{{x.time}}</td>
        <td ng-click="kd($index)">{{x.state}}</td>
    </tr>
    </tbody>
</table>
<div ng-show="show" style="width: 500px;height: 500px;text-align: center">
    <p>新增订单</p>
    <span>商品名</span><input type="text" ng-model="k_shName"  ng-class="{red:checks}" placeholder="6-20个字符"><br>
    <span>用户名</span><input type="text" ng-model="k_Name" ng-class="{red:checks}" placeholder="4-16个字符"><br>
    <span>手机号</span><input type="text" ng-model="k_call"  ng-class="{red:checks}" placeholder="请输入手机号"><br>
    <span>城市</span>
    <select  ng-model="k_City">
        <option>选择城市</option>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>南京</option>
    </select>
    <ul style="width: 200px;height: 200px;display:block;margin-left:150px;text-align: center;background: red;opacity: 0.8">
        <li>商品名不能为空</li>
        <li>商品名必须是6-20个字符</li>
        <li>用户名不能为空</li>
        <li>用户名必须是4-16个字符</li>
        <li>手机号格式不正确</li>
        <li>请选择城市!</li>
    </ul>
    <button ng-click="tj()" style="background: green">提交</button>
</div>
</body>
</html>
gh323093
关注
0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
订单发货

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> style> table{ border-collapse: collapse; } th{ width: 200px;
复制链接

扫一扫
专栏目录