You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

427 lines
14 KiB

  1. <?php
  2. use yii\helpers\Html;
  3. use antkaz\vue\VueAsset;
  4. use xj\babel\BrowserAsset;
  5. VueAsset::register($this); // register VueAsset
  6. xj\babel\BrowserAsset::register($this);
  7. ?>
  8. <style>
  9. .goods-create {
  10. overflow: visible!important;
  11. }
  12. .city--list.popup {
  13. top: 35px;
  14. max-height: 480px;
  15. overflow: auto;
  16. }
  17. #app label {
  18. display: flex;
  19. margin: 0;
  20. }
  21. #app label span {
  22. flex-shrink: 0;
  23. }
  24. #app label input {
  25. width: unset!important;
  26. }
  27. .fade-enter-active, .fade-leave-active {
  28. transition: opacity .5s;
  29. }
  30. .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  31. opacity: 0;
  32. }
  33. .list-complete-item {
  34. transition: all 1s;
  35. display: inline-block;
  36. margin-right: 10px;
  37. }
  38. .list-complete-enter, .list-complete-leave-to
  39. /* .list-complete-leave-active for below version 2.1.8 */ {
  40. opacity: 0;
  41. transform: translateY(30px);
  42. }
  43. .list-complete-leave-active {
  44. position: absolute;
  45. }
  46. div,p{margin:0;padding:0; line-height:1.5;}
  47. .checks{ padding-left:20px;}
  48. .province--list, .city--list {
  49. display: flex;
  50. flex-wrap: wrap;
  51. padding-left: 10px;
  52. list-style-type: none;
  53. }
  54. .province--list > li {
  55. display: inline-flex;
  56. align-items: center;
  57. flex-shrink: 0;
  58. position: relative;
  59. margin-right: 10px;
  60. padding: 5px 10px;
  61. }
  62. .province--list > li .city--list {
  63. position: absolute;
  64. padding: 10px;
  65. background: #fff;
  66. z-index: 10000;
  67. box-shadow: 0 0 40px 10px rgba(0, 0, 0, .1);
  68. border-radius: 10px;
  69. /*opacity: 0;*/
  70. /*transition: all .2s;*/
  71. }
  72. /*.province--list > li.active {*/
  73. /*box-shadow: 0 0 40px 10px rgba(0, 0, 0, .1);*/
  74. /*}*/
  75. .province--list > li.active {
  76. color: #259c24;
  77. }
  78. .province--list > li.active .city--list {
  79. opacity: 1;
  80. }
  81. .province--list > li ul li {
  82. display: block;
  83. width: 200px;
  84. padding: 0;
  85. }
  86. input[type="checkbox"] {
  87. margin-right: 5px;
  88. }
  89. .glyphicon {
  90. padding: 5px;
  91. transition: all .2s;
  92. cursor: pointer;
  93. }
  94. .glyphicon.glyphicon-menu-down.switch--popup {
  95. position: relative;
  96. top: -1px;
  97. }
  98. .province--list > li.active .glyphicon {
  99. transform: rotate(180deg);
  100. }
  101. .shade {
  102. position: fixed;
  103. top: 0;
  104. left: 0;
  105. width: 100%;
  106. height: 100%;
  107. z-index: 1000;
  108. }
  109. label {
  110. font-weight: normal;
  111. }
  112. .display-checked ul li {
  113. position: relative;
  114. display: inline-block;
  115. padding: 5px 10px;
  116. margin: 5px;
  117. border-radius: 5px;
  118. list-style-type: none;
  119. background: #00a65a;
  120. color: #fff;
  121. }
  122. .display-checked ul li ul {
  123. position: absolute;
  124. left: 50%;
  125. width: 200px;
  126. padding: 10px;
  127. opacity: 0;
  128. background: #fff;
  129. z-index: 10000;
  130. box-shadow: 0 0 40px 10px rgba(0, 0, 0, .1);
  131. border-radius: 10px;
  132. transform: translateX(-50%);
  133. transition: all .2s;
  134. }
  135. .display-checked ul li:hover ul {
  136. opacity: 1;
  137. }
  138. .display-checked .close {
  139. float: none!important;
  140. padding: 0;
  141. font-size: 1em;
  142. color: #fff;
  143. opacity: 1;
  144. transition: all .2s;
  145. }
  146. .display-checked .close:active {
  147. transform: scale(.6);
  148. }
  149. </style>
  150. <div id="app" class="vue">
  151. <div class="display-checked">
  152. <p>已选:</p>
  153. <ul>
  154. <li
  155. v-for="province in area.filter(i => i.city.find(j => j.checked))"
  156. :key="province.id"
  157. class="list-complete-item"
  158. >
  159. <div
  160. class="close glyphicon glyphicon-remove"
  161. title="删除"
  162. @click="province.checked = false; province.city.forEach(i => i.checked = false)"
  163. ></div>
  164. <span>{{province.province}}</span>
  165. <!-- <ul>-->
  166. <!-- <li>-->
  167. <!-- <div class="close glyphicon glyphicon-remove" title="删除"></div>-->
  168. <!-- <span>广东省</span>-->
  169. <!-- </li>-->
  170. <!-- </ul>-->
  171. </li>
  172. </ul>
  173. </div>
  174. <div class="J_CheckWrap">
  175. <div v-if="activeProvince >= 0" @click="activeProvince = -1" class="shade" id="shade-layer"></div>
  176. <label class="check-all"><input type="checkbox" v-model="isCheckAll" /><span>全选</span></label>
  177. <div class="checks">
  178. <ul class="province--list">
  179. <li data-role="province" v-for="(province, index) in area">
  180. <label data-type="province">
  181. <input
  182. type="checkbox"
  183. v-model="province.checked"
  184. @change="province.city.forEach(i => i.checked = province.checked)"
  185. />
  186. <span>{{province.province}}</span>
  187. </label>
  188. <div
  189. class="fa fa-angle-down switch--popup"
  190. @click="activeProvince = index"
  191. ></div>
  192. <transition name="fade">
  193. <ul v-show="activeProvince === index" class="city--list popup">
  194. <li class="checks" v-for="city in province.city">
  195. <label>
  196. <input
  197. type="checkbox"
  198. :name="`area[${city.id}]`"
  199. <?php // in_array($city->city_id,$cities)?'checked':'' ?>
  200. value="city.id"
  201. v-model="city.checked"
  202. @change="province.id = area[area.length - 1].id + 1; province.checked = province.city.every(i => i.checked)"
  203. />{{city.name}}</label>
  204. </li>
  205. </ul>
  206. </transition>
  207. </li>
  208. </ul>
  209. </div>
  210. </div>
  211. </div>
  212. <script>
  213. var app = new Vue({
  214. el: '#app',
  215. data: {
  216. area: (<?= json_encode($data) ?>).map(i => {
  217. return {
  218. ...i,
  219. city: i.city.map(j => {return {...j, checked: false}}),
  220. checked: false
  221. }
  222. }),
  223. checkedAreaIds: (<?= json_encode($cities) ?>),
  224. activeProvince: -1
  225. },
  226. computed: {
  227. isCheckAll: {
  228. get() {
  229. return this.area.every(i => i.checked)
  230. },
  231. set(value) {
  232. this.area.forEach(i => {
  233. i.checked = value;
  234. i.city.forEach(j => j.checked = value)
  235. })
  236. }
  237. }
  238. },
  239. methods: {
  240. clickProvince(index) {
  241. for (let city in this.area[index].city) {
  242. city.checked = this.area[index].checked
  243. }
  244. },
  245. reverseMessage: function () {
  246. this.message = this.message.split('').reverse().join('')
  247. }
  248. },
  249. created() {
  250. this.checkedAreaIds.length > 0 && this.area.forEach(province => {
  251. let count = 0;
  252. province.city.forEach(city => {
  253. if (this.checkedAreaIds.indexOf(city.id.toString()) >= 0) {
  254. city.checked = true;
  255. count++;
  256. }
  257. });
  258. if (count >= province.city.length) {
  259. province.checked = true;
  260. }
  261. })
  262. // document.body.addEventListener('click', e => {
  263. // let isSwitch = e.target.classList.contains('switch--popup');
  264. // let isCheckbox = e.target.type === 'checkbox';
  265. // let isLabel = e.target.dataset.type === 'province';
  266. //
  267. // if (this.activeProvince >= 0 && !isCheckbox && !isSwitch && !isLabel) {
  268. // this.activeProvince = -1;
  269. // e.stopPropagation();
  270. // }
  271. // })
  272. }
  273. });
  274. </script>
  275. <div>
  276. <script type="text/javascript" src="/js/jquery.min.js"></script>
  277. <!--<script >-->
  278. <!--//-->
  279. <!--// (function (win, doc, $) {-->
  280. <!--// $.fn.extend({-->
  281. <!--// checktree : function () {-->
  282. <!--// this.click(function (evt) {-->
  283. <!--// var evtEle = $(evt.target).closest("input:checkbox");-->
  284. <!--// if (!evtEle[0]) {-->
  285. <!--// return;-->
  286. <!--// }-->
  287. <!--// //check child all-->
  288. <!--// evtEle.parent().next(".checks").find("input:checkbox").attr("checked", evtEle[0].checked);-->
  289. <!--//-->
  290. <!--// //check parent-->
  291. <!--// if (evtEle.is("input:checked")) {-->
  292. <!--// // evtEle.parents(".checks").each(function () {-->
  293. <!--// // !$(this).children("p").children("input:checkbox").filter(function () {-->
  294. <!--// // return !this.checked;-->
  295. <!--// // })[0] && $(this).prev().children("input:checkbox").attr("checked", "checked");-->
  296. <!--// // });-->
  297. <!--// } else {-->
  298. <!--// evtEle.parents(".checks").prev().children("input:checkbox").attr("checked", false);-->
  299. <!--// }-->
  300. <!--// });-->
  301. <!--// }-->
  302. <!--// });-->
  303. <!--//// document.querySelector('.container-fluid.form-vertical').addEventListener('submit', function (e) {-->
  304. <!--////-->
  305. <!--//// alert('ggg');-->
  306. <!--//// e.preventDefault();-->
  307. <!--//// return false;-->
  308. <!--//// })-->
  309. <!--// })(window, document, jQuery);-->
  310. <!---->
  311. <!-- function $(query) {-->
  312. <!-- return document.querySelector(query);-->
  313. <!-- }-->
  314. <!---->
  315. <!-- function $$(query) {-->
  316. <!-- return document.querySelectorAll(query);-->
  317. <!-- }-->
  318. <!---->
  319. <!-- var activeProvince = null;-->
  320. <!---->
  321. <!-- window.addEventListener('click', function (e) {-->
  322. <!-- function $(query) {-->
  323. <!-- return document.querySelector(query);-->
  324. <!-- }-->
  325. <!---->
  326. <!-- if (e.target.type === 'checkbox') {-->
  327. <!-- var parent = e.target.parentElement;-->
  328. <!---->
  329. <!-- if (parent.dataset.type === 'province') {-->
  330. <!-- // 点击省复选框-->
  331. <!-- // parent.parentElement.className = e.target.checked ? 'active' : '';-->
  332. <!---->
  333. <!-- var ul = parent.nextElementSibling;-->
  334. <!-- var inputList = ul.querySelectorAll('input[type="checkbox"]');-->
  335. <!---->
  336. <!-- for (var i = 0, input; input = inputList[i++];) {-->
  337. <!-- input.checked = e.target.checked;-->
  338. <!-- }-->
  339. <!---->
  340. <!-- var isCheckedAllProvince = Array.prototype.every.call($$('.checkbox-province'), i => i.checked);-->
  341. <!---->
  342. <!-- $('#check-all-province').checked = isCheckedAllProvince;-->
  343. <!-- } else {-->
  344. <!-- // 点击城市复选框-->
  345. <!-- var parentUL = e.target.parentElement.parentElement.parentElement;-->
  346. <!-- var inputList = parentUL.querySelectorAll('input');-->
  347. <!-- var parentInput = parentUL.previousElementSibling.querySelector('input');-->
  348. <!-- var isCheckedAllCity = Array.prototype.every.call(inputList, i => i.checked);-->
  349. <!-- parentInput.checked = isCheckedAllCity;-->
  350. <!-- var isCheckedAllProvince = Array.prototype.every.call($$('.checkbox-province'), i => i.checked);-->
  351. <!-- $('#check-all-province').checked = isCheckedAllProvince;-->
  352. <!-- }-->
  353. <!-- }-->
  354. <!-- if (e.target.className === 'glyphicon glyphicon-menu-down switch--popup') {-->
  355. <!-- var parentLi = e.target.parentElement;-->
  356. <!---->
  357. <!-- if (parentLi.classList.contains('active')) {-->
  358. <!-- parentLi.classList.remove('active');-->
  359. <!-- activeProvince = null;-->
  360. <!-- $('#shade-layer').className = ''-->
  361. <!-- } else {-->
  362. <!-- activeProvince && (activeProvince.className = '');-->
  363. <!-- parentLi.classList.add('active');-->
  364. <!-- activeProvince = parentLi;-->
  365. <!-- // $('#shade-layer').className = 'shade'-->
  366. <!-- }-->
  367. <!-- } else {-->
  368. <!-- function $(query) {-->
  369. <!-- return document.querySelector(query);-->
  370. <!-- }-->
  371. <!-- activeProvince && (activeProvince.className = '');-->
  372. <!-- activeProvince = null;-->
  373. <!-- $('#shade-layer').className = '';-->
  374. <!-- }-->
  375. <!-- });-->
  376. <!---->
  377. <!-- $('#check-all-province').addEventListener('change', function (e) {-->
  378. <!-- Array.prototype.forEach.call($$('.checkbox-province'), function (input) {-->
  379. <!-- input.checked = e.target.checked;-->
  380. <!-- var parent = input.parentElement;-->
  381. <!---->
  382. <!-- var ul = parent.nextElementSibling;-->
  383. <!-- var inputList = ul.querySelectorAll('input[type="checkbox"]');-->
  384. <!---->
  385. <!-- for (var i = 0, item; item = inputList[i++];) {-->
  386. <!-- item.checked = e.target.checked;-->
  387. <!-- }-->
  388. <!-- })-->
  389. <!-- });-->
  390. <!---->
  391. <!-- // $('#shade-layer').addEventListener('click', function () {-->
  392. <!-- // function $(query) {-->
  393. <!-- // return document.querySelector(query);-->
  394. <!-- // }-->
  395. <!-- // activeProvince && (activeProvince.className = '');-->
  396. <!-- // activeProvince = null;-->
  397. <!-- // $('#shade-layer').className = '';-->
  398. <!-- // });-->
  399. <!---->
  400. <!--</script>-->
  401. <!--<script>-->
  402. <!-- $(".J_CheckWrap").checktree();-->
  403. <!--</script>-->
  404. </div>