潘钊 / bsth_control · Commits

Commit e7ecd430d1e7ef7d89a495063e3d6d6ea0f65e57

Authored by 徐烜
1 parent 68ba727d

update

Inline Side-by-side
Showing 6 changed files with 499 additions and 18 deletions
src/main/resources/static/pages/scheduleApp/module/common/dt/MyCheckboxGroupWrapTemplate.html 0 → 100644
  View file @e7ecd43
  1 +<div name="{{$saCheckboxgroupCtrl.$name_attr}}" ng-model="$saCheckboxgroupCtrl.$$internalmodel">
  2 + <label class="checkbox-inline" ng-repeat="$d in $saCheckboxgroupCtrl.$$data">
  3 + <input type="checkbox"
  4 + ng-checked="$d.ischecked"
  5 + ng-click="$saCheckboxgroupCtrl.$$internal_updateCheck_fn($d)"/>
  6 + {{$d.name}}
  7 + </label>
  8 +</div>
0 9 \ No newline at end of file
... ...
src/main/resources/static/pages/scheduleApp/module/common/dt/MyDateGroupWrapTemplate.html 0 → 100644
  View file @e7ecd43
  1 +<div name="{{$saDategroupCtrl.$name_attr}}"
  2 + ng-model="$saDategroupCtrl.$$internalmodel">
  3 +
  4 + <style>
  5 + .date-select {
  6 + height: 180px;
  7 + border: 1px solid #ddd;
  8 + }
  9 + .date-select .date-input {
  10 + margin: 2px 5px 5px 5px;
  11 + padding-left: 0;
  12 + }
  13 + .date-select .date-select-cont {
  14 + text-align: left;
  15 + height: 100px;
  16 + padding-right: 0px;
  17 + }
  18 + .date-select .date-select-body {
  19 + margin-top: 10px;
  20 + overflow: auto;
  21 + width: auto;
  22 + height: 100px;
  23 + }
  24 + .date-select .date {
  25 + display: inline-block;
  26 + padding: 8px;
  27 + min-width: 85px;
  28 + text-align: center;
  29 + border: 1px solid #C1C1C1;
  30 + color: #666;
  31 + border-radius: 5px !important;
  32 + margin: 5px;
  33 + }
  34 + .date-select .date.active {
  35 + color: white;
  36 + background: #4095E8;
  37 + border: 1px solid #4095E8;
  38 + }
  39 +
  40 + </style>
  41 +
  42 + <div class="col-md-12 date-select">
  43 + <div class="col-md-12 date-input">
  44 + <div class="col-md-9">
  45 + <div class="input-group">
  46 + <input type="text" class="form-control"
  47 + placeholder="请选择日期（双击选择的日期可以删除）..."
  48 + uib-datepicker-popup="yyyy年MM月dd日"
  49 + is-open="$saDategroupCtrl.$$specialDateOpen"
  50 + ng-model="$saDategroupCtrl.$$date_select" readonly/>
  51 + <span class="input-group-btn">
  52 + <button type="button" class="btn btn-default"
  53 + ng-click="$saDategroupCtrl.$$specialDate_open()">
  54 + <i class="glyphicon glyphicon-calendar"></i>
  55 + </button>
  56 + </span>
  57 + </div>
  58 + </div>
  59 + </div>
  60 + <div class="col-md-12 date-select-cont">
  61 + <div class="date-select-body">
  62 + <div class="date active"
  63 + ng-repeat="$d in $saDategroupCtrl.$$data"
  64 + ng-dblclick="$saDategroupCtrl.$$internal_datestr_click($index)">
  65 + {{$d.datestr}}
  66 + </div>
  67 + </div>
  68 + </div>
  69 + </div>
  70 +
  71 +
  72 +
  73 +</div>
0 74 \ No newline at end of file
... ...
src/main/resources/static/pages/scheduleApp/module/common/prj-common-directive.js
  View file @e7ecd43
... ... @@ -1028,8 +1028,349 @@ angular.module(&#39;ScheduleApp&#39;).directive(&quot;saSelect3&quot;, [
1028 1028 }
1029 1029 ]);
1030 1030  
  1031 +/**
  1032 + * saCheckboxgroup指令
  1033 + * 属性如下：
  1034 + * model（必须）：指定一个外部object，独立作用域，如：model=ctrl.employeeInfoForSave
  1035 + * dcvalue（必须）：绑定的model字段值，如：dcvalue={{ctrl.employeeInfoForSave.xl.id}}
  1036 + * dcname（必须）：绑定的model字段名，如：dcname=xl.id
  1037 + * name（必须）：控件的名字
  1038 + * required（可选）：是否要用required验证
  1039 + * disabled（可选）：标示框是否可选
  1040 + *
  1041 + */
  1042 +angular.module('ScheduleApp').directive('saCheckboxgroup', [
  1043 + function() {
  1044 + return {
  1045 + restrict: 'E',
  1046 + templateUrl: '/pages/scheduleApp/module/common/dt/MyCheckboxGroupWrapTemplate.html',
  1047 + scope: {
  1048 + model: "=" // 独立作用域，关联外部的模型object
  1049 + },
  1050 + controllerAs: "$saCheckboxgroupCtrl",
  1051 + bindToController: true,
  1052 + controller: function($scope) {
  1053 + var self = this;
  1054 + self.$$data = []; // 内部的数据
  1055 +
  1056 + // TODO：数据写死，周一至周日选择数据，以后有别的数据再议
  1057 + self.$$data = [
  1058 + {name: "星期一", checkedvalue: "1", uncheckedvalue: "0", ischecked: false},
  1059 + {name: "星期二", checkedvalue: "1", uncheckedvalue: "0", ischecked: false},
  1060 + {name: "星期三", checkedvalue: "1", uncheckedvalue: "0", ischecked: false},
  1061 + {name: "星期四", checkedvalue: "1", uncheckedvalue: "0", ischecked: false},
  1062 + {name: "星期五", checkedvalue: "1", uncheckedvalue: "0", ischecked: false},
  1063 + {name: "星期六", checkedvalue: "1", uncheckedvalue: "0", ischecked: false},
  1064 + {name: "星期日", checkedvalue: "1", uncheckedvalue: "0", ischecked: false}
  1065 + ];
  1066 + },
1031 1067  
  1068 + /**
  1069 + * 此阶段可以改dom结构，此时angular还没扫描指令，
  1070 + * 这里就可以动态添加其他angularjs的指令字符串，如required指令字符串。
  1071 + * @param tElem
  1072 + * @param tAttrs
  1073 + * @returns {{pre: Function, post: Function}}
  1074 + */
  1075 + compile: function(tElem, tAttrs) {
  1076 + // 获取所有的属性
  1077 + var $name_attr = tAttrs["name"]; // 控件的名字
  1078 + var $required_attr = tAttrs["required"]; // 是否需要required验证
  1079 + var $disabled_attr = tAttrs["disabled"]; // 是否禁用
  1080 + var $dcname_attr = tAttrs["dcname"]; // 绑定的model字段名
1032 1081  
  1082 + // controlAs名字
  1083 + var ctrlAs = '$saCheckboxgroupCtrl';
  1084 +
  1085 + // 如果有required属性，添加angularjs required验证
  1086 + if ($required_attr != undefined) {
  1087 + //console.log(tElem.html());
  1088 + tElem.find("div").attr("required", "");
  1089 + }
  1090 + // 如果有disabled属性，添加禁用标志
  1091 + if ($disabled_attr != undefined) {
  1092 + tElem.find("input").attr("ng-disabled", "true");
  1093 + }
  1094 +
  1095 + return {
  1096 + pre: function(scope, element, attr) {
  1097 + // TODO：
  1098 + },
  1099 + /**
  1100 + * 相当于link函数。
  1101 + * @param scope
  1102 + * @param element
  1103 + * @param attr
  1104 + */
  1105 + post: function(scope, element, attr) {
  1106 + // name属性
  1107 + if ($name_attr) {
  1108 + scope[ctrlAs]["$name_attr"] = $name_attr;
  1109 + }
  1110 +
  1111 + /**
  1112 + * checkbox选择事件处理函数。
  1113 + * @param $d 数据对象，$$data中的元素对象
  1114 + */
  1115 + scope[ctrlAs].$$internal_updateCheck_fn = function($d) {
  1116 + $d.ischecked = !$d.ischecked;
  1117 + console.log($d);
  1118 + };
  1119 +
  1120 + // 测试使用watch监控$$data的变化
  1121 + scope.$watch(
  1122 + function() {
  1123 + return scope[ctrlAs]["$$data"];
  1124 + },
  1125 + function(newValue, oldValue) {
  1126 + // 根据$$data生成对应的数据
  1127 + var rule_days_arr = [];
  1128 + var i;
  1129 + for (i = 0; i < scope[ctrlAs]["$$data"].length; i++) {
  1130 + if (scope[ctrlAs]["$$data"][i].ischecked)
  1131 + rule_days_arr.push(scope[ctrlAs]["$$data"][i].checkedvalue);
  1132 + else
  1133 + rule_days_arr.push(scope[ctrlAs]["$$data"][i].uncheckedvalue);
  1134 + }
  1135 + scope[ctrlAs].$$internalmodel = rule_days_arr.join(",");
  1136 + //scope[ctrlAs].$$internalmodel = undefined;
  1137 + console.log("bbbbbbbb--->" + scope[ctrlAs].$$internalmodel);
  1138 +
  1139 + // 更新model
  1140 + if ($dcname_attr) {
  1141 + eval("scope[ctrlAs].model" + "." + $dcname_attr + " = rule_days_arr.join(',');");
  1142 + }
  1143 +
  1144 +
  1145 + },
  1146 + true
  1147 + );
  1148 +
  1149 + // TODO：
  1150 +
  1151 + // 监控dcvalue model值变换
  1152 + attr.$observe("dcvalue", function(value) {
  1153 + console.log("saCheckboxgroup 监控dc1 model值变换：" + value);
  1154 + if (value) {
  1155 + // 根据value值，修改$$data里的值
  1156 + var data_array = value.split(",");
  1157 + var i;
  1158 + if (data_array.length > scope[ctrlAs]["$$data"].length) {
  1159 + for (i = 0; i < scope[ctrlAs]["$$data"].length; i ++) {
  1160 + if (data_array[i] == scope[ctrlAs]["$$data"][i].checkedvalue) {
  1161 + scope[ctrlAs]["$$data"][i].ischecked = true;
  1162 + } else {
  1163 + scope[ctrlAs]["$$data"][i].ischecked = false;
  1164 + }
  1165 + }
  1166 + } else {
  1167 + for (i = 0; i < data_array.length; i ++) {
  1168 + if (data_array[i] == scope[ctrlAs]["$$data"][i].checkedvalue) {
  1169 + scope[ctrlAs]["$$data"][i].ischecked = true;
  1170 + } else {
  1171 + scope[ctrlAs]["$$data"][i].ischecked = false;
  1172 + }
  1173 + }
  1174 + }
  1175 +
  1176 + }
  1177 + });
  1178 + }
  1179 +
  1180 + };
  1181 +
  1182 +
  1183 + }
  1184 +
  1185 + };
  1186 + }
  1187 +]);
  1188 +
  1189 +/**
  1190 + * saDategroup指令
  1191 + * 属性如下：
  1192 + * model（必须）：指定一个外部object，独立作用域，如：model=ctrl.employeeInfoForSave
  1193 + * dcvalue（必须）：绑定的model字段值，如：dcvalue={{ctrl.employeeInfoForSave.xl.id}}
  1194 + * dcname（必须）：绑定的model字段名，如：dcname=xl.id
  1195 + * name（必须）：控件的名字
  1196 + * required（可选）：是否要用required验证
  1197 + * disabled（可选）：标示框是否可选
  1198 + *
  1199 + */
  1200 +angular.module('ScheduleApp').directive('saDategroup', [
  1201 + '$filter',
  1202 + function($filter) {
  1203 + return {
  1204 + restrict: 'E',
  1205 + templateUrl: '/pages/scheduleApp/module/common/dt/MyDateGroupWrapTemplate.html',
  1206 + scope: {
  1207 + model: "=" // 独立作用域，关联外部的模型object
  1208 + },
  1209 + controllerAs: "$saDategroupCtrl",
  1210 + bindToController: true,
  1211 + controller: function($scope) {
  1212 + var self = this;
  1213 + self.$$data = []; // 内部的数据
  1214 + self.$$date_select; // 内部选中的日期
  1215 +
  1216 + //// 测试数据
  1217 + //self.$$data = [
  1218 + // {datestr: '2011-01-01', ischecked: true},
  1219 + // {datestr: '2011-01-01', ischecked: true},
  1220 + // {datestr: '2011-01-01', ischecked: true}
  1221 + //];
  1222 + },
  1223 +
  1224 + /**
  1225 + * 此阶段可以改dom结构，此时angular还没扫描指令，
  1226 + * 这里就可以动态添加其他angularjs的指令字符串，如required指令字符串。
  1227 + * @param tElem
  1228 + * @param tAttrs
  1229 + * @returns {{pre: Function, post: Function}}
  1230 + */
  1231 + compile: function(tElem, tAttrs) {
  1232 + // 获取所有的属性
  1233 + var $name_attr = tAttrs["name"]; // 控件的名字
  1234 + var $required_attr = tAttrs["required"]; // 是否需要required验证
  1235 + var $disabled_attr = tAttrs["disabled"]; // 是否禁用
  1236 + var $dcname_attr = tAttrs["dcname"]; // 绑定的model字段名
  1237 +
  1238 + // controlAs名字
  1239 + var ctrlAs = '$saDategroupCtrl';
  1240 +
  1241 + // 如果有required属性，添加angularjs required验证
  1242 + if ($required_attr != undefined) {
  1243 + //console.log(tElem.html());
  1244 + tElem.find("div").attr("required", "");
  1245 + }
  1246 + // 如果有disabled属性，添加禁用标志
  1247 + if ($disabled_attr != undefined) {
  1248 + tElem.find("input").attr("ng-disabled", "true");
  1249 + tElem.find("div").attr("ng-disabled", "true");
  1250 + }
  1251 +
  1252 + return {
  1253 + pre: function (scope, element, attr) {
  1254 + // TODO：
  1255 + },
  1256 + /**
  1257 + * 相当于link函数。
  1258 + * @param scope
  1259 + * @param element
  1260 + * @param attr
  1261 + */
  1262 + post: function (scope, element, attr) {
  1263 + // name属性
  1264 + if ($name_attr) {
  1265 + scope[ctrlAs]["$name_attr"] = $name_attr;
  1266 + }
  1267 +
  1268 +
  1269 + // 日期open属性，及方法
  1270 + scope[ctrlAs].$$specialDateOpen = false;
  1271 + scope[ctrlAs].$$specialDate_open = function() {
  1272 + scope[ctrlAs].$$specialDateOpen = true;
  1273 + };
  1274 +
  1275 + // 监控选择的日期
  1276 + scope.$watch(
  1277 + function() {
  1278 + return scope[ctrlAs]['$$date_select'];
  1279 + },
  1280 + function(newValue, oldValue) {
  1281 + if (newValue) {
  1282 + //console.log("saDategroup--->selectdate：" + newValue);
  1283 + // 调用内置filter，转换日期到yyyy-MM-dd格式
  1284 + var text = $filter('date')(newValue, 'yyyy-MM-dd');
  1285 + var i;
  1286 + var isexist = false; // 日期是否已经选择标识
  1287 + for (i = 0; i < scope[ctrlAs]["$$data"].length; i++) {
  1288 + if (scope[ctrlAs]["$$data"][i].datestr == text) {
  1289 + isexist = true;
  1290 + break;
  1291 + }
  1292 + }
  1293 + if (!isexist) {
  1294 + scope[ctrlAs]["$$data"].push(
  1295 + {
  1296 + datestr: text,
  1297 + ischecked: true
  1298 + }
  1299 + );
  1300 + }
  1301 +
  1302 + }
  1303 +
  1304 + }
  1305 + );
  1306 +
  1307 + /**
  1308 + * 日期点击事件处理函数。
  1309 + * @param $index 索引
  1310 + */
  1311 + scope[ctrlAs].$$internal_datestr_click = function($index) {
  1312 + scope[ctrlAs].$$data.splice($index, 1);
  1313 + };
  1314 +
  1315 + // 测试使用watch监控$$data的变化
  1316 + scope.$watch(
  1317 + function() {
  1318 + return scope[ctrlAs]['$$data'];
  1319 + },
  1320 + function(newValue, oldValue) {
  1321 + // 根据$$data生成对应的数据
  1322 + var special_days_arr = [];
  1323 + var i;
  1324 + for (i = 0; i < scope[ctrlAs]["$$data"].length; i++) {
  1325 + special_days_arr.push(scope[ctrlAs]["$$data"][i].datestr);
  1326 + }
  1327 +
  1328 + scope[ctrlAs].$$internalmodel = special_days_arr.join(",");
  1329 + console.log("bbbbbbbb--->" + scope[ctrlAs].$$internalmodel);
  1330 +
  1331 + // 更新model
  1332 + if ($dcname_attr) {
  1333 + eval("scope[ctrlAs].model" + "." + $dcname_attr + " = special_days_arr.join(',');");
  1334 + }
  1335 + },
  1336 + true
  1337 + );
  1338 +
  1339 + // 监控dcvalue model值变换
  1340 + attr.$observe("dcvalue", function(value) {
  1341 + console.log("saDategroup 监控dc1 model值变换：" + value);
  1342 + if (value) {
  1343 + // 根据value值，修改$$data里的值
  1344 + var date_array = value.split(",");
  1345 + var i;
  1346 + scope[ctrlAs]["$$data"] = [];
  1347 + for (i = 0; i < date_array.length; i++) {
  1348 + scope[ctrlAs]["$$data"].push(
  1349 + {
  1350 + datestr: date_array[i],
  1351 + ischecked: true
  1352 + }
  1353 + );
  1354 + }
  1355 +
  1356 +
  1357 +
  1358 +
  1359 +
  1360 +
  1361 +
  1362 +
  1363 +
  1364 + }
  1365 + });
  1366 +
  1367 + }
  1368 +
  1369 + };
  1370 + }
  1371 + }
  1372 + }
  1373 +]);
1033 1374  
1034 1375  
1035 1376  
... ...
src/main/resources/static/pages/scheduleApp/module/core/timeTableManage/detail.html
  View file @e7ecd43
... ... @@ -105,13 +105,28 @@
105 105 </div>
106 106 </div>
107 107  
108   - <!--<div class="form-group">-->
109   - <!--<label class="col-md-2 control-label">常规有效日：</label>-->
110   - <!--</div>-->
  108 + <div class="form-group">
  109 + <label class="col-md-2 control-label">常规有效日：</label>
  110 + <div class="col-md-6">
  111 + <sa-Checkboxgroup model="ctrl.timeTableManageForForm"
  112 + name="rule_days"
  113 + dcvalue="{{ctrl.timeTableManageForDetail.rule_days}}"
  114 + disabled >
  115 + </sa-Checkboxgroup>
  116 + </div>
  117 + </div>
111 118  
112   - <!--<div class="form-group">-->
113   - <!--<label class="col-md-2 control-label">特殊有效日：</label>-->
114   - <!--</div>-->
  119 + <div class="form-group">
  120 + <label class="col-md-2 control-label">特殊有效日：</label>
  121 + <div class="col-md-6">
  122 + <sa-Dategroup model="ctrl.timeTableManageForForm"
  123 + name="special_days"
  124 + dcvalue="{{ctrl.timeTableManageForDetail.special_days}}"
  125 + disabled
  126 + >
  127 + </sa-Dategroup>
  128 + </div>
  129 + </div>
115 130  
116 131 <!--<div class="form-group">-->
117 132 <!--<label class="col-md-2 control-label">备注：</label>-->
... ...
src/main/resources/static/pages/scheduleApp/module/core/timeTableManage/edit.html
  View file @e7ecd43
... ... @@ -154,13 +154,35 @@
154 154 </div>
155 155 </div>
156 156  
157   - <!--<div class="form-group">-->
158   - <!--<label class="col-md-2 control-label">常规有效日：</label>-->
159   - <!--</div>-->
  157 + <div class="form-group">
  158 + <label class="col-md-2 control-label">常规有效日：</label>
  159 + <div class="col-md-6">
  160 + <sa-Checkboxgroup model="ctrl.timeTableManageForForm"
  161 + name="rule_days"
  162 + dcvalue="{{ctrl.timeTableManageForForm.rule_days}}"
  163 + dcname="rule_days"
  164 + required >
  165 + </sa-Checkboxgroup>
  166 + </div>
  167 + <div class="alert alert-danger well-sm" ng-show="myForm.rule_days.$error.required">
  168 + 请操作一下1
  169 + </div>
  170 + </div>
160 171  
161   - <!--<div class="form-group">-->
162   - <!--<label class="col-md-2 control-label">特殊有效日：</label>-->
163   - <!--</div>-->
  172 + <div class="form-group">
  173 + <label class="col-md-2 control-label">特殊有效日：</label>
  174 + <div class="col-md-6">
  175 + <sa-Dategroup model="ctrl.timeTableManageForForm"
  176 + name="special_days"
  177 + dcvalue="{{ctrl.timeTableManageForForm.special_days}}"
  178 + dcname="special_days"
  179 + >
  180 + </sa-Dategroup>
  181 + </div>
  182 + <div class="alert alert-danger well-sm" ng-show="myForm.special_days.$error.required">
  183 + 请操作一下2
  184 + </div>
  185 + </div>
164 186  
165 187 <!--<div class="form-group">-->
166 188 <!--<label class="col-md-2 control-label">备注：</label>-->
... ...
src/main/resources/static/pages/scheduleApp/module/core/timeTableManage/form.html
  View file @e7ecd43
... ... @@ -154,13 +154,35 @@
154 154 </div>
155 155 </div>
156 156  
157   - <!--<div class="form-group">-->
158   - <!--<label class="col-md-2 control-label">常规有效日：</label>-->
159   - <!--</div>-->
  157 + <div class="form-group">
  158 + <label class="col-md-2 control-label">常规有效日：</label>
  159 + <div class="col-md-6">
  160 + <sa-Checkboxgroup model="ctrl.timeTableManageForForm"
  161 + name="rule_days"
  162 + dcvalue="{{ctrl.timeTableManageForForm.rule_days}}"
  163 + dcname="rule_days"
  164 + required >
  165 + </sa-Checkboxgroup>
  166 + </div>
  167 + <div class="alert alert-danger well-sm" ng-show="myForm.rule_days.$error.required">
  168 + 请操作一下1
  169 + </div>
  170 + </div>
160 171  
161   - <!--<div class="form-group">-->
162   - <!--<label class="col-md-2 control-label">特殊有效日：</label>-->
163   - <!--</div>-->
  172 + <div class="form-group">
  173 + <label class="col-md-2 control-label">特殊有效日：</label>
  174 + <div class="col-md-6">
  175 + <sa-Dategroup model="ctrl.timeTableManageForForm"
  176 + name="special_days"
  177 + dcvalue="{{ctrl.timeTableManageForForm.special_days}}"
  178 + dcname="special_days"
  179 + >
  180 + </sa-Dategroup>
  181 + </div>
  182 + <div class="alert alert-danger well-sm" ng-show="myForm.special_days.$error.required">
  183 + 请操作一下2
  184 + </div>
  185 + </div>
164 186  
165 187 <!--<div class="form-group">-->
166 188 <!--<label class="col-md-2 control-label">备注：</label>-->
... ...