manyi/static/1.0/js/controllers/devConfig.js

app.controller('devConfigCtrl', ['$scope', '$http', '$timeout', 'toaster', 'FileUploader', function ($scope, $http, $timeout, toaster, FileUploader) {
    $scope.devTypeGridOptions = {
        data: 'myData',
        showGridFooter: true, //是否显示grid footer

        //-------- 分页属性 ----------------
        paginationPageSizes: [10, 20, 50, 100], //每页显示个数可选项
        paginationCurrentPage: 1, //当前页码
        paginationPageSize: 10, //每页显示个数
        totalItems: 0,// 总数量

        columnDefs: [],

        //---------------api---------------------
        onRegisterApi: function (gridApi) {
            $scope.gridApi = gridApi;
            gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
                if ($scope.setPagingData) {
                    $scope.getPagedDataAsync(newPage, pageSize);
                }
            });
        }
    };

    function setColumnDefs() {
        $scope.devTypeGridOptions.columnDefs = [
            {field: 'name', displayName: '设备名称',width: 120,},
            {field: 'code', displayName: '类型编码'},
            {field: 'majorDeviceType', displayName: '设备类型'},
            {field: 'instructions', displayName: '使用说明',width: 180,},
            {
                field: 'unit', displayName: '计费单位', width: 80,
            },
            {
                field: '___', displayName: '特性', width: 160,
                cellTemplate: '<div class="temp-row">' +
                    '<span ng-if="row.entity.stock" class="text-success">库存; </span>' +
                    '<span ng-if="row.entity.payableWhileBusy" class="text-success">追加投币; </span>' +
                    '<span ng-if="row.entity.isPulse" class="text-success">脉冲设备; </span>' +
                    '<span ng-if="row.entity.features.billAsService&&row.entity.features.billAsService.support&&row.entity.features.billAsService.on" class="text-success">服务费模式; </span>' +
                '</div>'
            },
            {
                field: 'package', displayName: '默认套餐', minWidth: 380,
                enableFiltering: false,
                enableSorting: false,
                enableHiding: false,//禁止在列选择器中隐藏
                enableColumnMenu: false,// 是否显示列头部菜单按钮
                cellTemplate: '<span class="grid-button"  ng-repeat=" item in row.entity.package" ><button class="btn btn-rounded btn-sm btn-success ">{{item.name}}</button></span>'
            }
        ];

        var fields = $scope.devTypeGridOptions.columnDefs;
        for (var index in fields) {
            var item = fields[index];
            if (item && item['minWidth'] == null) {
                item['minWidth'] = 80;
            }
        }
    }

    $scope.setPagingData = function (data, curPage, pageSize) {
        var pagedData = data.data.dataList;
        $scope.myData = pagedData;
        $scope.devTypeGridOptions.totalItems = data.data.total;
    };

    //刷新设备类型表格数据
    $scope.getPagedDataAsync = function (curPage, pageSize) {
        var params = {
            pageSize: pageSize,
            pageIndex: curPage
        };
        $http.get('/device/getDevTypeList', {
            params: params
        }).then(function (data) {
            $scope.setPagingData(data.data, curPage, pageSize);
        }).catch(function (data) {
            toaster.pop("error", "提示", "获取列表失败");
        });
    };

    function initDataGrid() {
        //首次加载表格
        $scope.getPagedDataAsync($scope.devTypeGridOptions.paginationCurrentPage, $scope.devTypeGridOptions.paginationPageSize);
    }

    setColumnDefs();
    initDataGrid();

    //编辑弹窗需要的数据
    $scope.dialogName = "编辑设备类型";
    $scope.dialogData = {};

    //事件
    $scope.ngEvent = {
    };

    //默认充值优惠信息
    $scope.config = {
        unitMap: ["分钟", "秒", "小时", "天", "次", "币", "度", "杯", "包", "升", "毫升", "斤", "公斤",],

        //单路接口类型
        ConnectorTypeList: [
            {value: 1, name: "家用插座（模式2）",},
            {value: 2, name: "交流接口插座（模式3，连接方式B）",},
            {value: 3, name: "交流接口插头（带枪线，模式3，连接方式C）",},
            {value: 4, name: "直流接口枪头（带枪线，模式4）",},
            {value: 5, name: "无线充电座",},
            {value: 6, name: "其他国家标准",},
        ],
    };

    //编辑设备类型
    $scope.editDevType = function () {
        //重置表单状态
        $scope.devTypeForm.$setPristine();
        $scope.devTypeForm.$setUntouched();

        //重置图片上传控件
        closeUploader();

        $scope.dialogName = "编辑设备类型";
        var rows = $scope.gridApi.selection.getSelectedRows();
        if (rows.length == 0) {
            toaster.pop("info", "提示", "请选择数据！");
            return;
        }
        if (rows.length > 1) {
            toaster.pop("info", "提示", "只能选中编辑一条数据");
            return;
        }

        //选中的第一条为准
        var item = rows[0];
        $scope.dialogData = $.extend(true, {
            features: {
                extraInfo: {},
                billAsService: {
                    support: false,//是否有此特性
                    on: false,//开关
                    elecCharge: 0,
                    serviceCharge: 0
                }
            }
        }, item);//需要深度克隆，因为套餐是数组

        //选中数据后，初始化对应的图片上传控件
        initUploader();

        $("#devTypePanel").modal();
    };

    $scope.deletePackage = function (index) {
        var packageItem = $scope.dialogData.package;
        if (packageItem[index]) {
            packageItem.splice(index, 1);
        }
    };

    $scope.addPackage = function () {
        var packageList = $scope.dialogData.package;
        if (!$.isArray(packageList)) {
            packageList = $scope.dialogData.package = [];
        }
        var length = packageList.length;
        var packageItem = {
            name: "套餐" + (length + 1),
            description: "",
            coins: length + 1,
            price: length + 1,
            imgList: [],
            time: (length + 1) * 15
        };
        packageList.push(packageItem);

        // 初始化对应的图片上传控件
        createUploader(packageItem);
    };

    //创建上传组件
    function createUploader(packageItem) {
        //文件提交控件
        var uploader = new FileUploader({
            url: '/common/upload?type=packageImg',
            queueLimit: 1, //文件个数
            removeAfterUpload: true   //上传后删除文件
        });

        //注册上传事件
        uploader.onCompleteItem = function (fileItem, response) {
            if (response.payload) {
                //适配数据
                response.data = response.payload;
            }
            if (response.result) {
                toaster.pop("success", "提示", "上传成功！");
                // 如果没有图片存放位置，怎新建一个imgList
                if (!$.isArray(packageItem.imgList)) {
                    packageItem.imgList = [];
                }
                packageItem.imgList[0] = response.data;
            } else {
                toaster.pop("error", "失败", response.description);
            }
        };
        uploader.onErrorItem = function (fileItem, response, status, headers) {
            toaster.pop("error", "提示", "上传失败，请重试");
        };

        packageItem.uploader = uploader;
    }

    // 编辑时，初始化套餐的图片上传控件
    function initUploader() {
        var packageList = $scope.dialogData.package;
        for (var index in packageList) {
            var item = packageList[index];
            createUploader(item)
        }
    }

    /*关闭上传框窗口后恢复上传框初始状态*/
    function closeUploader() {
        $(".fileUpload").val("");
        var packageList = $scope.dialogData.package;
        for (var index in packageList) {
            var item = packageList[index];
            if (item.uploader) {
                item.uploader.clearQueue();
                item.uploader.cancelAll();
            }
        }
    }

    //提交表单保存
    $scope.saveDevTypeData = function () {
        if ($scope.devTypeForm.$invalid) {
            return
        }

        var url = "";
        url = "/device/editDevType";

        // 删除多余的数据，否则无法保存
        var packageList = $scope.dialogData.package;
        for (var index in packageList) {
            var item = packageList[index];
            delete item.uploader
        }

        $http({
            method: 'POST',
            url: url,
            data: $scope.dialogData
        }).then(function (response) {
            //保存成功 弹窗消失
            $('#devTypePanel').modal('hide');

            $scope.getPagedDataAsync($scope.devTypeGridOptions.paginationCurrentPage, $scope.devTypeGridOptions.paginationPageSize);
        }, function (response) {
            toaster.pop("error", "提示", "保存失败！");
        });
    };

}]);