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.
428 lines
14 KiB
428 lines
14 KiB
<?php
|
|
use yii\helpers\Html;
|
|
use antkaz\vue\VueAsset;
|
|
use xj\babel\BrowserAsset;
|
|
|
|
VueAsset::register($this); // register VueAsset
|
|
xj\babel\BrowserAsset::register($this);
|
|
|
|
?>
|
|
<style>
|
|
.goods-create {
|
|
overflow: visible!important;
|
|
}
|
|
.city--list.popup {
|
|
top: 35px;
|
|
max-height: 480px;
|
|
overflow: auto;
|
|
}
|
|
|
|
#app label {
|
|
display: flex;
|
|
margin: 0;
|
|
}
|
|
#app label span {
|
|
flex-shrink: 0;
|
|
}
|
|
#app label input {
|
|
width: unset!important;
|
|
}
|
|
.fade-enter-active, .fade-leave-active {
|
|
transition: opacity .5s;
|
|
}
|
|
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
|
opacity: 0;
|
|
}
|
|
.list-complete-item {
|
|
transition: all 1s;
|
|
display: inline-block;
|
|
margin-right: 10px;
|
|
}
|
|
.list-complete-enter, .list-complete-leave-to
|
|
/* .list-complete-leave-active for below version 2.1.8 */ {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
.list-complete-leave-active {
|
|
position: absolute;
|
|
}
|
|
div,p{margin:0;padding:0; line-height:1.5;}
|
|
.checks{ padding-left:20px;}
|
|
|
|
.province--list, .city--list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding-left: 10px;
|
|
list-style-type: none;
|
|
}
|
|
|
|
.province--list > li {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
margin-right: 10px;
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
.province--list > li .city--list {
|
|
position: absolute;
|
|
padding: 10px;
|
|
background: #fff;
|
|
z-index: 10000;
|
|
box-shadow: 0 0 40px 10px rgba(0, 0, 0, .1);
|
|
border-radius: 10px;
|
|
/*opacity: 0;*/
|
|
/*transition: all .2s;*/
|
|
}
|
|
|
|
/*.province--list > li.active {*/
|
|
/*box-shadow: 0 0 40px 10px rgba(0, 0, 0, .1);*/
|
|
/*}*/
|
|
|
|
.province--list > li.active {
|
|
color: #259c24;
|
|
}
|
|
.province--list > li.active .city--list {
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
.province--list > li ul li {
|
|
display: block;
|
|
width: 200px;
|
|
padding: 0;
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.fa {
|
|
padding: 5px;
|
|
transition: all .2s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.fa.fa-menu-down.switch--popup {
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
.province--list > li.active .fa {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.shade {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1000;
|
|
}
|
|
label {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.display-checked ul li {
|
|
position: relative;
|
|
display: inline-block;
|
|
padding: 5px 10px;
|
|
margin: 5px;
|
|
border-radius: 5px;
|
|
list-style-type: none;
|
|
background: #00a65a;
|
|
color: #fff;
|
|
}
|
|
|
|
.display-checked ul li ul {
|
|
position: absolute;
|
|
left: 50%;
|
|
width: 200px;
|
|
padding: 10px;
|
|
opacity: 0;
|
|
background: #fff;
|
|
z-index: 10000;
|
|
box-shadow: 0 0 40px 10px rgba(0, 0, 0, .1);
|
|
border-radius: 10px;
|
|
transform: translateX(-50%);
|
|
transition: all .2s;
|
|
}
|
|
|
|
.display-checked ul li:hover ul {
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
.display-checked .close {
|
|
float: none!important;
|
|
padding: 0;
|
|
font-size: 1em;
|
|
color: #fff;
|
|
opacity: 1;
|
|
transition: all .2s;
|
|
}
|
|
|
|
.display-checked .close:active {
|
|
transform: scale(.6);
|
|
}
|
|
</style>
|
|
<div id="app" class="vue">
|
|
<div class="display-checked">
|
|
<p>已选：</p>
|
|
<ul>
|
|
<li
|
|
v-for="province in area.filter(i => i.city.find(j => j.checked))"
|
|
:key="province.id"
|
|
class="list-complete-item"
|
|
>
|
|
<div
|
|
class="close fa fa-remove"
|
|
title="删除"
|
|
@click="province.checked = false; province.city.forEach(i => i.checked = false)"
|
|
></div>
|
|
<span>{{province.province}}</span>
|
|
<!-- <ul>-->
|
|
<!-- <li>-->
|
|
<!-- <div class="close fa fa-remove" title="删除"></div>-->
|
|
<!-- <span>广东省</span>-->
|
|
<!-- </li>-->
|
|
<!-- </ul>-->
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="J_CheckWrap">
|
|
<div v-if="activeProvince >= 0" @click="activeProvince = -1" class="shade" id="shade-layer"></div>
|
|
<label class="check-all"><input type="checkbox" v-model="isCheckAll" /><span>全选</span></label>
|
|
<div class="checks">
|
|
<ul class="province--list">
|
|
<li data-role="province" v-for="(province, index) in area">
|
|
<label data-type="province">
|
|
<input
|
|
type="checkbox"
|
|
v-model="province.checked"
|
|
@change="province.city.forEach(i => i.checked = province.checked)"
|
|
/>
|
|
<span>{{province.province}}</span>
|
|
</label>
|
|
<div
|
|
class="fa fa-angle-down switch--popup"
|
|
@click="activeProvince = index"
|
|
></div>
|
|
<transition name="fade">
|
|
<ul v-show="activeProvince === index" class="city--list popup">
|
|
<li class="checks" v-for="city in province.city">
|
|
<label>
|
|
<input
|
|
type="checkbox"
|
|
:name="`area[${city.id}]`"
|
|
<?php // in_array($city->city_id,$cities)?'checked':'' ?>
|
|
value="city.id"
|
|
v-model="city.checked"
|
|
@change="province.id = area[area.length - 1].id + 1; province.checked = province.city.every(i => i.checked)"
|
|
/>{{city.name}}</label>
|
|
</li>
|
|
</ul>
|
|
</transition>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
area: (<?= json_encode($data) ?>).map(i => {
|
|
return {
|
|
...i,
|
|
city: i.city.map(j => {return {...j, checked: false}}),
|
|
checked: false
|
|
}
|
|
}),
|
|
checkedAreaIds: (<?= json_encode($cities) ?>),
|
|
activeProvince: -1
|
|
},
|
|
computed: {
|
|
isCheckAll: {
|
|
get() {
|
|
return this.area.every(i => i.checked)
|
|
},
|
|
set(value) {
|
|
this.area.forEach(i => {
|
|
i.checked = value;
|
|
i.city.forEach(j => j.checked = value)
|
|
})
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
clickProvince(index) {
|
|
for (let city in this.area[index].city) {
|
|
city.checked = this.area[index].checked
|
|
}
|
|
},
|
|
reverseMessage: function () {
|
|
this.message = this.message.split('').reverse().join('')
|
|
}
|
|
},
|
|
created() {
|
|
this.checkedAreaIds.length > 0 && this.area.forEach(province => {
|
|
let count = 0;
|
|
province.city.forEach(city => {
|
|
if (this.checkedAreaIds.indexOf(city.id.toString()) >= 0) {
|
|
city.checked = true;
|
|
count++;
|
|
}
|
|
});
|
|
if (count >= province.city.length) {
|
|
province.checked = true;
|
|
}
|
|
})
|
|
// document.body.addEventListener('click', e => {
|
|
// let isSwitch = e.target.classList.contains('switch--popup');
|
|
// let isCheckbox = e.target.type === 'checkbox';
|
|
// let isLabel = e.target.dataset.type === 'province';
|
|
//
|
|
// if (this.activeProvince >= 0 && !isCheckbox && !isSwitch && !isLabel) {
|
|
// this.activeProvince = -1;
|
|
// e.stopPropagation();
|
|
// }
|
|
// })
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<div>
|
|
|
|
|
|
<script type="text/javascript" src="/js/jquery.min.js"></script>
|
|
<!--<script >-->
|
|
<!--//-->
|
|
<!--// (function (win, doc, $) {-->
|
|
<!--// $.fn.extend({-->
|
|
<!--// checktree : function () {-->
|
|
<!--// this.click(function (evt) {-->
|
|
<!--// var evtEle = $(evt.target).closest("input:checkbox");-->
|
|
<!--// if (!evtEle[0]) {-->
|
|
<!--// return;-->
|
|
<!--// }-->
|
|
<!--// //check child all-->
|
|
<!--// evtEle.parent().next(".checks").find("input:checkbox").attr("checked", evtEle[0].checked);-->
|
|
<!--//-->
|
|
<!--// //check parent-->
|
|
<!--// if (evtEle.is("input:checked")) {-->
|
|
<!--// // evtEle.parents(".checks").each(function () {-->
|
|
<!--// // !$(this).children("p").children("input:checkbox").filter(function () {-->
|
|
<!--// // return !this.checked;-->
|
|
<!--// // })[0] && $(this).prev().children("input:checkbox").attr("checked", "checked");-->
|
|
<!--// // });-->
|
|
<!--// } else {-->
|
|
<!--// evtEle.parents(".checks").prev().children("input:checkbox").attr("checked", false);-->
|
|
<!--// }-->
|
|
<!--// });-->
|
|
<!--// }-->
|
|
<!--// });-->
|
|
<!--//// document.querySelector('.container-fluid.form-vertical').addEventListener('submit', function (e) {-->
|
|
<!--////-->
|
|
<!--//// alert('ggg');-->
|
|
<!--//// e.preventDefault();-->
|
|
<!--//// return false;-->
|
|
<!--//// })-->
|
|
<!--// })(window, document, jQuery);-->
|
|
<!---->
|
|
<!-- function $(query) {-->
|
|
<!-- return document.querySelector(query);-->
|
|
<!-- }-->
|
|
<!---->
|
|
<!-- function $$(query) {-->
|
|
<!-- return document.querySelectorAll(query);-->
|
|
<!-- }-->
|
|
<!---->
|
|
<!-- var activeProvince = null;-->
|
|
<!---->
|
|
<!-- window.addEventListener('click', function (e) {-->
|
|
<!-- function $(query) {-->
|
|
<!-- return document.querySelector(query);-->
|
|
<!-- }-->
|
|
<!---->
|
|
<!-- if (e.target.type === 'checkbox') {-->
|
|
<!-- var parent = e.target.parentElement;-->
|
|
<!---->
|
|
<!-- if (parent.dataset.type === 'province') {-->
|
|
<!-- // 点击省复选框-->
|
|
<!-- // parent.parentElement.className = e.target.checked ? 'active' : '';-->
|
|
<!---->
|
|
<!-- var ul = parent.nextElementSibling;-->
|
|
<!-- var inputList = ul.querySelectorAll('input[type="checkbox"]');-->
|
|
<!---->
|
|
<!-- for (var i = 0, input; input = inputList[i++];) {-->
|
|
<!-- input.checked = e.target.checked;-->
|
|
<!-- }-->
|
|
<!---->
|
|
<!-- var isCheckedAllProvince = Array.prototype.every.call($$('.checkbox-province'), i => i.checked);-->
|
|
<!---->
|
|
<!-- $('#check-all-province').checked = isCheckedAllProvince;-->
|
|
<!-- } else {-->
|
|
<!-- // 点击城市复选框-->
|
|
<!-- var parentUL = e.target.parentElement.parentElement.parentElement;-->
|
|
<!-- var inputList = parentUL.querySelectorAll('input');-->
|
|
<!-- var parentInput = parentUL.previousElementSibling.querySelector('input');-->
|
|
<!-- var isCheckedAllCity = Array.prototype.every.call(inputList, i => i.checked);-->
|
|
<!-- parentInput.checked = isCheckedAllCity;-->
|
|
<!-- var isCheckedAllProvince = Array.prototype.every.call($$('.checkbox-province'), i => i.checked);-->
|
|
<!-- $('#check-all-province').checked = isCheckedAllProvince;-->
|
|
<!-- }-->
|
|
<!-- }-->
|
|
<!-- if (e.target.className === 'fa fa-menu-down switch--popup') {-->
|
|
<!-- var parentLi = e.target.parentElement;-->
|
|
<!---->
|
|
<!-- if (parentLi.classList.contains('active')) {-->
|
|
<!-- parentLi.classList.remove('active');-->
|
|
<!-- activeProvince = null;-->
|
|
<!-- $('#shade-layer').className = ''-->
|
|
<!-- } else {-->
|
|
<!-- activeProvince && (activeProvince.className = '');-->
|
|
<!-- parentLi.classList.add('active');-->
|
|
<!-- activeProvince = parentLi;-->
|
|
<!-- // $('#shade-layer').className = 'shade'-->
|
|
<!-- }-->
|
|
<!-- } else {-->
|
|
<!-- function $(query) {-->
|
|
<!-- return document.querySelector(query);-->
|
|
<!-- }-->
|
|
<!-- activeProvince && (activeProvince.className = '');-->
|
|
<!-- activeProvince = null;-->
|
|
<!-- $('#shade-layer').className = '';-->
|
|
<!-- }-->
|
|
<!-- });-->
|
|
<!---->
|
|
<!-- $('#check-all-province').addEventListener('change', function (e) {-->
|
|
<!-- Array.prototype.forEach.call($$('.checkbox-province'), function (input) {-->
|
|
<!-- input.checked = e.target.checked;-->
|
|
<!-- var parent = input.parentElement;-->
|
|
<!---->
|
|
<!-- var ul = parent.nextElementSibling;-->
|
|
<!-- var inputList = ul.querySelectorAll('input[type="checkbox"]');-->
|
|
<!---->
|
|
<!-- for (var i = 0, item; item = inputList[i++];) {-->
|
|
<!-- item.checked = e.target.checked;-->
|
|
<!-- }-->
|
|
<!-- })-->
|
|
<!-- });-->
|
|
<!---->
|
|
<!-- // $('#shade-layer').addEventListener('click', function () {-->
|
|
<!-- // function $(query) {-->
|
|
<!-- // return document.querySelector(query);-->
|
|
<!-- // }-->
|
|
<!-- // activeProvince && (activeProvince.className = '');-->
|
|
<!-- // activeProvince = null;-->
|
|
<!-- // $('#shade-layer').className = '';-->
|
|
<!-- // });-->
|
|
<!---->
|
|
<!--</script>-->
|
|
<!--<script>-->
|
|
<!-- $(".J_CheckWrap").checktree();-->
|
|
<!--</script>-->
|
|
</div>
|