5 changed files with 12632 additions and 0 deletions
-
428backend/views/express-template/area.php
-
9210backend/web/js/jquery.js
-
2966backend/web/js/jquery.min.js
-
20console/migrations/m191203_112307_add_data_to_table_city_and_area.php
-
8console/migrations/sql/add_data.sql
@ -0,0 +1,428 @@ |
|||||
|
<?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; |
||||
|
} |
||||
|
|
||||
|
.glyphicon { |
||||
|
padding: 5px; |
||||
|
transition: all .2s; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.glyphicon.glyphicon-menu-down.switch--popup { |
||||
|
position: relative; |
||||
|
top: -1px; |
||||
|
} |
||||
|
.province--list > li.active .glyphicon { |
||||
|
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 glyphicon glyphicon-remove" |
||||
|
title="删除" |
||||
|
@click="province.checked = false; province.city.forEach(i => i.checked = false)" |
||||
|
></div> |
||||
|
<span>{{province.province}}</span> |
||||
|
<!-- <ul>--> |
||||
|
<!-- <li>--> |
||||
|
<!-- <div class="close glyphicon glyphicon-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="glyphicon glyphicon-menu-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 === 'glyphicon glyphicon-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> |
||||
9210
backend/web/js/jquery.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
2966
backend/web/js/jquery.min.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,20 @@ |
|||||
|
<?php |
||||
|
|
||||
|
use yii\db\Migration; |
||||
|
|
||||
|
/** |
||||
|
* Class m191203_112307_add_data_to_table_city_and_area |
||||
|
*/ |
||||
|
class m191203_112307_add_data_to_table_city_and_area extends Migration |
||||
|
{ |
||||
|
public function up() |
||||
|
{ |
||||
|
$sql = file_get_contents(__DIR__."/sql/add_data.sql"); |
||||
|
$this->execute($sql); |
||||
|
} |
||||
|
|
||||
|
public function down() |
||||
|
{ |
||||
|
return true; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,8 @@ |
|||||
|
|
||||
|
INSERT INTO `city` VALUES ('348', '710000', '台湾', '710000'); |
||||
|
INSERT INTO `city` VALUES ('349', '810000', '香港特别行政区', '810000'); |
||||
|
INSERT INTO `city` VALUES ('350', '820000', '澳门特别行政区', '820000'); |
||||
|
INSERT INTO `area` VALUES ('3193', '台湾', '710000', '710000'); |
||||
|
INSERT INTO `area` VALUES ('3194', '香港特别行政区', '810000', '810000'); |
||||
|
INSERT INTO `area` VALUES ('3195', '澳门特别行政区', '820000', '820000'); |
||||
|
|
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue