商品管理系统

最新推荐文章于 2024-05-20 18:05:52 发布
biggrand
最新推荐文章于 2024-05-20 18:05:52 发布
阅读量3.2k
点赞数 2
文章标签：管理
本文链接：https://blog.csdn.net/biggrand/article/details/78607909
版权
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="lib/js/ionic.bundle.min.js"></script>
    <style type="text/css">
        /*隔行换色*/
        table tr:nth-child(2n) {
            background-color: #CCCCCA;
        }
    </style>
    <script>
        //注意：：过滤完后要在查询框单机空格键，不然表格没有内容
        angular.module("myApp", [])
            .controller("OneDeom", function($scope, $filter) {
                //新增区域默认不显示
                $scope.showadd = false;
                //定义数组
                $scope.datas = [];
                //通过循环将对象添加进数组
                for(var i = 1; i < 5; i++) {
                    var data1 = {
                        checked: false,
                        id: i,
                        goodName: "Iphone X" + i,
                        userName: "关羽" + i,
                        phone: "1590141516" + i,
                        price: "22.4" + i,
                        time: date = new Date(),
                        state: "待发货",
                        updata: "修改",
                        delete: "删除"
                    };
                    var data2 = {
                        checked: false,
                        id: 10 + i,
                        goodName: "Iphone X" + i,
                        userName: "关羽" + i,
                        phone: "1590141516" + i,
                        price: "22.4" + i,
                        time: date = new Date(),
                        state: "已发货",
                        updata: "修改",
                        delete: "删除"
                    };
                    //把对象放入数组
                    $scope.datas.push(data1);
                    $scope.datas.push(data2);

                }
                //添加
                $scope.add = function() { //点击添加按钮时显示
                    $scope.isShow = true;
                }
                //点击保存按钮
                $scope.save = function() {
                    $scope.tips = false; //控制错误信息是否显示
                    $scope.valArr = []; //定义一个放错误信息的数组
                    if($scope.goodName == undefined || $scope.goodName == null) {
                        $scope.valArr.push("商品不能为空");
                        return;
                    }
                    if($scope.userName == undefined || $scope.userName == null) {
                        $scope.valArr.push("用户名不能为空");
                        return;
                    } else if($scope.userName.length < 3) {
                        $scope.valArr.push("用户名长度要大于3个字符");
                        return;
                    }
                    var s = /^\d+$/;
                    if(!s.test($scope.price)) {
                        $scope.valArr.push("价钱只能是数字");
                        return;
                    }
                    if($scope.valArr.length > 0) {
                        $scope.tips = true;
                    } else {
                        var data2 = {
                            checked: false,
                            id: 100,
                            goodName: $scope.goodName,
                            userName: $scope.userName,
                            phone: "1590141516" + i,
                            price: $scope.price,
                            time: date = new Date(),
                            state: "待发货",
                            updata: "修改",
                            delete: "删除"
                        };
                        $scope.datas.push(data2); //把对象放入数组
                        $scope.isShow = false;
                    }
                }
                //删除
                $scope.del = function(d) { //当前删除行的对象
                    for(var i = 0; i < $scope.datas.length; i++) {
                        if($scope.datas[i].id == d.id) { //查找当前删除的对象在数组中的索引
                            $scope.datas.splice(i, 1);
                        }
                    }
                }
                //全选操作
                $scope.ckAll = function() {
                    var ck = $scope.isck; // 表头中的复选框
                    for(var i = 0; i < $scope.datas.length; i++) {
                        $scope.datas[i].checked = ck;
                    }
                }
                //批量删除
                $scope.delAll = function() {
                    var b = false; //默认没有选中
                    for(var i = 0; i < $scope.datas.length; i++) {
                        if($scope.datas[i].checked == true) { //如果多选框有选中的
                            b = true; //那么批量删除按钮也是选中
                            break;
                        }
                    }
                    //执行删除操作
                    if(b == true) {
                        for(var i = 0; i < $scope.datas.length; i++) {
                            if($scope.datas[i].checked == true) {
                                $scope.datas.splice(i, 1);
                                i--; //删除后,下次依然从当前索引开始
                            }
                        }
                    } else {
                        alert("请选择后操作");
                    }
                }
                //批量发货
                $scope.goAll = function() {
                    var b = false; //默认么有选中的
                    for(var i = 0; i < $scope.datas.length; i++) {
                        if($scope.datas[i].checked == true) {
                            b = true;
                            break;
                        }
                    }
                    //执行删除操作
                    if(b == true) {
                        for(var i = 0; i < $scope.datas.length; i++) {
                            if($scope.datas[i].checked == true) {
                                $scope.datas[i].state = "已发货";
                            }
                        }
                    } else {
                        alert("请选择后操作");
                    }
                }
            });
    </script>
</head>

<body ng-app="myApp" ng-controller="OneDeom">
    <input type="button" value="新增" ng-click="add()" />
    <input type="button" value="批量删除" ng-click="delAll()" />
    <input type="button" value="批量发货" ng-click="goAll()" />
    <input ng-model="selUserName" placeholder="根据用户名查询" />
    <!--ng-model查询时就过滤输入的内容查询-->
    <input ng-model="selGoodName" placeholder="根据商品名查询" />
    <select ng-model="orderType">
        <option value="">请选择排序方式</option>
        <option value="price">商品价格升序</option>
        <option value="-price">商品价格降序</option>
        <option value="time">生产日期升序</option>
        <option value="-time">生产日期降序</option>
    </select><br />
    <table border="1px;" style="width: 800px;">
        <thead>
            <tr>
                <td><input type="checkbox" ng-model="isck" ng-click="ckAll()" /></td>
                <td>商品名</td>
                <td>用户名</td>
                <td>手机号</td>
                <td>价格</td>
                <td>生产时间</td>
                <td>状态</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="data in datas|orderBy:orderType|filter:{'userName':selUserName,goodName:selGoodName}">
                <td><input type="checkbox" ng-model="data.checked" /></td>
                <td>{{data.goodName}}</td>
                <td>{{data.userName}}</td>
                <td>{{data.phone}}</td>
                <td>{{data.price|currency:"￥"}}</td>
                <td>{{data.time|date:"yyyy年MM月dd日 hh时mm分ss秒"}}</td>
                <td>
                    <span ng-show="data.state=='已发货'">{{data.state}}</span>
                    <span ng-show="data.state=='待发货'"><!--这里的值和上面的不能一样-->
                        <a href="#" ng-click="data.state='已发货'">
                            {{data.state}}
                        </a>
                    </span>
                </td>
                <td>
                    <a href="#" ng-hide="data.edit" ng-click="data.edit=true">修改</a>
                    <button ng-show="data.edit==true" ng-click="data.edit=false">保存</button>
                    <a href="#" ng-click="del(data)">{{data.delete}}</a>
                </td>

            </tr>
        </tbody>
    </table>
    <!--增加的-->
    <form ng-show="isShow">
        商品名称:<input ng-model="goodName" /><br /> 用户名称:
        <input ng-model="userName" /><br /> 价钱：
        <input ng-model="price" /><br />
        <div style="width: 200px; background-color: pink;">
            <ul>
                <!-- 点击保存时,把不合法的信息都放入数组  valArr -->
                <li ng-repeat="c in valArr ">{{c}}</li>
            </ul>
        </div>
        <input type="button" ng-click="save()" value="保存" />
    </form>
</body>

</html>
biggrand
关注
2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
商品管理系统

<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <script src="lib/js/ionic.bundle.min.js"></script> <style type="text/css"> /*隔行换色*/ table tr:nth-ch
复制链接

扫一扫