补充物流管理配送规则地区选择

src/main/webapp/resources/js/vendor/controllers/forstore/vendor_deliveryRule_add_ctrl.js

@@ -1,6 +1,6 @@
 define([ 'app/app' ], function(app) {
     'use strict';
-    app.register.controller('vendorDeliveryRuleAddCtrl', ['$scope', '$rootScope', '$stateParams', 'Enterprise', 'toaster', 'DistributionRule', function ($scope, $rootScope, $stateParams, Enterprise, toaster, DistributionRule) {
+    app.register.controller('vendorDeliveryRuleAddCtrl', ['$scope', '$rootScope', '$stateParams', 'Enterprise', 'toaster', 'DistributionRule', '$http', 'TreeData', function ($scope, $rootScope, $stateParams, Enterprise, toaster, DistributionRule, $http, TreeData) {
         $rootScope.active = 'vendor_deliveryRule';
         // $scope.tab = 'deliverRule';
         $scope.title = '新增配送规则';
@@ -121,5 +121,170 @@ define([ 'app/app' ], function(app) {
         $scope.checkTab = function (t) {
             $scope.rule.fareType = t;
         };
+
+        $scope.chooseBox = false;
+        $scope.cancel = function () {
+            $scope.chooseBox = false;
+        };
+        // 选择地区
+        $scope.chooseAddress = function () {
+            $scope.chooseBox = true;
+            function getData() {
+                $http.get('static/js/prod/data/city.json').success(function (data) {
+                    console.log(convert(data));
+                    $scope.tree = new TreeData(convert(data));
+                }).error(function (res) {
+                    console.log(res);
+                });
+            }
+
+            /**
+             * 将本地地址数据转化为可用的结构
+             * @param item
+             * @returns {Array}
+             */
+            function convert(item) {
+                var arr = []
+                if(angular.isArray(item)) {
+                    angular.forEach(item, function (v) {
+                        arr.push({
+                            label: v
+                        })
+                    })
+                } else {
+                    angular.forEach(item, function (v, k) {
+                        arr.push({
+                            label: k,
+                            items: convert(v),
+                            folded: true
+                        })
+                    })
+                }
+                return arr;
+            }
+
+            getData();
+        }
     }]);
+// 地区选择
+    app.register.factory('TreeData', function () {
+        return function (tree) {
+            var me = this;
+            me.$data = tree;
+
+            /**
+             * 折叠或展开文件夹
+             * @param item
+             * @param folded
+             */
+            me.toggleFold = function (item, folded) {
+                item.folded = angular.isUndefined(folded) ? !item.folded : folded;
+            }
+
+            /**
+             * 折叠文件夹
+             * @param item
+             */
+            me.fold = function (item) {
+                item.folded = true;
+            }
+
+            /**
+             * 展开文件夹
+             * @param item
+             */
+            me.unFold = function (item) {
+                item.folded = false;
+            }
+
+            /**
+             * 选中单个
+             * @param item
+             */
+            me.check = function (item) {
+                me._updateChildrenCheck(item);
+                me._updateParentsCheck(me.$data);
+            }
+
+            /**
+             * 更新子树的选中状态
+             * @param item
+             * @private
+             */
+            me._updateChildrenCheck = function (item) {
+                if(item.items) {
+                    angular.forEach(item.items, function (v) {
+                        v.checked = item.checked;
+                        me._updateChildrenCheck(v);
+                    })
+                }
+            }
+
+            /**
+             * 根据子树状态更新父节点选中状态
+             * @param items
+             * @private
+             */
+            me._updateParentsCheck = function (items) {
+                angular.forEach(items, function (d) {
+                    if(d.items) {
+                        me._updateParentsCheck(d.items);
+                        d.checked = me._hasCheckedChildren(d);
+                        d.semiChecked = me._hasUncheckedChildren(d);
+                    }
+                })
+            }
+
+            /**
+             * 判断是否有选中的子树
+             * @param item
+             * @returns {boolean}
+             * @private
+             */
+            me._hasCheckedChildren = function (item) {
+                var result = false;
+                angular.forEach(item.items, function (v) {
+                    result = result || v.checked;
+                    if(v.items && !result) {
+                        result = result || me._hasCheckedChildren(v);
+                    }
+                })
+                return result;
+            }
+
+            /**
+             * 判断是否有没有选中的子树
+             * @param item
+             * @returns {boolean}
+             * @private
+             */
+            me._hasUncheckedChildren = function (item) {
+                var result = false;
+                angular.forEach(item.items, function (v) {
+                    result = result || !v.checked;
+                    if(v.items && !result) {
+                        result = result || me._hasUncheckedChildren(v);
+                    }
+                })
+                return result;
+            }
+
+            /**
+             * 是否半选中
+             * @param item
+             * @returns {boolean|*}
+             */
+            me.isSemiChecked = function (item) {
+                return item.checked && item.semiChecked;
+            }
+
+            /**
+             * 获取所有选中的数据
+             */
+            me.getChecked = function () {
+
+            }
+
+        }
+    })
 });

src/main/webapp/resources/view/vendor/forstore/vendor_delivery_add_rule.html

@@ -363,6 +363,91 @@
 	.add-box .add{
 		color: #32b500;
 	}
+
+	/*选择地区*/
+	.choose-box{
+		width: 320px;
+		height: 438px;
+		box-shadow: 2px 5px 8px #dee0e2;
+		position: absolute;
+		top: 120%;
+		left: 487px;
+		background: #fff;
+		z-index: 10000;
+		border: #e6eefe 1px solid;
+		border-radius: 5px;
+	}
+	.choose-box:after{
+		content: "";
+		width: 15px;
+		height: 15px;
+		display: inline-block;
+		background: #fff;
+		transform: rotate(-45deg);
+		position: absolute;
+		top: -8px;
+		left: 142px;
+		z-index: 1;
+		border: #e6eefe 1px solid;
+		border-bottom: none;
+		border-left: none;
+	}
+	.choose-box .tree{
+		width: 290px;
+		max-height: 364px;
+		overflow-y: auto;
+		margin: 0 auto;
+		border: #e8e9ea 1px solid;
+		padding-top: 15px;
+		margin-top: 16px;
+	}
+	.choose-box .tree li {
+		cursor: pointer;
+		padding-left: 1.3em;
+		width: 100%;
+		float: left;
+	}
+
+	.choose-box .tree ul {
+		list-style: none;
+		padding-left: 0;
+	}
+
+	.choose-box .intermediate {
+		opacity: 0.3;
+	}
+	.choose-box .tree ul i{
+		float: left;
+		font-size: 18px;
+		position: relative;
+		top: 3px;
+		right: 3px;
+		color: #ff8522;
+	}
+	.choose-box .tree ul div.check-1{
+		float: right;
+	}
+	.choose-box .tree ul li span{
+		color: #666;
+		line-height: 24px !important;
+		margin-right: 3px !important;
+	}
+	.choose-box .tree ul li em{
+		color: #999;
+		font-size: 12px;
+		position: relative;
+		top: -2px;
+		left: 2px;
+	}
+	.choose-box .hidden {
+		display: none;
+	}
+	.choose-box .check-1 input{
+		/*display: none;*/
+	}
+	.rule-main .rule-content .row .choose-box label{
+		margin-right: 12px;
+	}
 </style>
 <!--右侧主体部分-->
 <div class="count user_right fr">
@@ -441,7 +526,7 @@
 						<!--<option value="3">所有用户</option>-->
 					</select>
 				</div>
-				<div class="row">
+				<div class="row" style="position: relative;">
 					<span>适用地区</span>
 					<div class="area-content">
 						<a href="#"><em>广东省 / 东莞市</em><i class="fa fa-minus-circle"></i></a>
@@ -453,7 +538,59 @@
 						<a href="#"><em>广东省 / 东莞市</em><i class="fa fa-minus-circle"></i></a>
 						<a href="#"><em>广东省 / 东莞市</em><i class="fa fa-minus-circle"></i></a>
 					</div>
-					<button>选择地区</button>
+					<button ng-click="chooseAddress()">选择地区</button>
+					<!--选择地区 begin-->
+					<div class="choose-box" ng-if="chooseBox">
+						<div>
+							<div class="tree">
+								<ul>
+									<li ng-repeat="address in tree.$data">
+										<div>
+											<i class="fa" ng-class="address.folded?'fa-caret-right':'fa-caret-down'" ng-click="tree.toggleFold(address)"></i>
+											<span ng-bind="address.label"></span><em>(1)</em>
+											<div class="check-1">
+												<label class="check-act" ng-class="{'intermediate': tree.isSemiChecked(address)}">
+													<input type="checkbox" ng-model="address.checked" ng-change="tree.check(address)"  id="{{address.label}}">
+													<label for="{{address.label}}"></label>
+												</label>
+											</div>
+										</div>
+										<ul ng-hide="address.folded">
+											<li ng-repeat="city in address.items">
+												<div>
+													<i ng-if="city.items" class="fa" ng-class="city.folded?'fa-caret-right':'fa-caret-down'" ng-click="tree.toggleFold(city)"></i>
+													<span ng-bind="city.label"></span><em>(1)</em>
+													<div class="check-1">
+														<label class="check-act" ng-class="{'intermediate': tree.isSemiChecked(city)}" >
+															<input type="checkbox" ng-model="city.checked" ng-change="tree.check(city)" id="{{city.label}}">
+															<label for="{{city.label}}"></label>
+														</label>
+													</div>
+												</div>
+												<ul ng-hide="city.folded">
+													<li ng-repeat="area in city.items">
+															<label style="width: 100%;">
+																<span ng-bind="area.label"></span>
+																	<div class="check-1">
+																	<label class="check-act">
+																		<input type="checkbox" ng-model="area.checked" ng-change="tree.check(area)" id="{{area.label}}">
+																		<label for="{{area.label}}"></label>
+																	</label>
+																</div>
+															</label>
+													</li>
+												</ul>
+											</li>
+										</ul>
+									</li>
+								</ul>
+							</div>
+							<div class="deal-btn">
+								<a ng-click="cancel()" class="off">取消</a>
+								<a ng-click="" class="ok">确认</a>
+							</div>
+						</div>
+					</div>
 					<!--<i class="notes">默认对全部地区生效</i>-->
 				</div>
 			</div>
@@ -501,18 +638,18 @@
 				<!--按总金额计算-->
 				<div class="style-price common-style" ng-if="rule.fareType==2">
 					<!--<div class="row dot">-->
-						<!--<span>总金额在</span>-->
-						<!--<div class="price-input">-->
-							<!--<i class="currency" ng-if="rule.currencyName=='RMB'">￥</i>-->
-							<!--<i class="currency" ng-if="rule.currencyName=='USD'">$</i>-->
-							<!--<input type="text" class="form-control" placeholder="0" />-->
-							<!--<em>以下，</em>-->
-						<!--</div>-->
-						<!--<div class="price-input">-->
-							<!--<em>运费为</em>-->
-							<!--<i class="currency">$</i>-->
-							<!--<input type="text" class="form-control" placeholder="0" />-->
-						<!--</div>-->
+					<!--<span>总金额在</span>-->
+					<!--<div class="price-input">-->
+					<!--<i class="currency" ng-if="rule.currencyName=='RMB'">￥</i>-->
+					<!--<i class="currency" ng-if="rule.currencyName=='USD'">$</i>-->
+					<!--<input type="text" class="form-control" placeholder="0" />-->
+					<!--<em>以下，</em>-->
+					<!--</div>-->
+					<!--<div class="price-input">-->
+					<!--<em>运费为</em>-->
+					<!--<i class="currency">$</i>-->
+					<!--<input type="text" class="form-control" placeholder="0" />-->
+					<!--</div>-->
 					<!--</div>-->
 					<div class="row" ng-repeat="(data, index) in fareArray" ng-class="{'dot' : index==0}">
 						<span>总金额在</span>
@@ -538,16 +675,16 @@
 						</div>
 					</div>
 					<!--<div class="row">-->
-						<!--<span>总金额在</span>-->
-						<!--<div class="price-input">-->
-							<!--<em><i>$1000</i>以上，</em>-->
-						<!--</div>-->
-						<!--<div class="price-input">-->
-							<!--<em>运费为</em>-->
-							<!--<i class="currency">$</i>-->
-							<!--<input type="text" class="form-control" placeholder="2000" />-->
-						<!--</div>-->
-						<!--<button style="margin-left: 20px;">增加范围</button>-->
+					<!--<span>总金额在</span>-->
+					<!--<div class="price-input">-->
+					<!--<em><i>$1000</i>以上，</em>-->
+					<!--</div>-->
+					<!--<div class="price-input">-->
+					<!--<em>运费为</em>-->
+					<!--<i class="currency">$</i>-->
+					<!--<input type="text" class="form-control" placeholder="2000" />-->
+					<!--</div>-->
+					<!--<button style="margin-left: 20px;">增加范围</button>-->
 					<!--</div>-->
 					<!--计算说明-->
 					<div class="row" style="background: none; padding: 0; margin-top: 10px !important;">