Browse Source

补充城市和区域数据表缺少的数据

wechat_public_accounts
linyaostalker 5 years ago
parent
commit
75707cb193
  1. 428
      backend/views/express-template/area.php
  2. 9210
      backend/web/js/jquery.js
  3. 2966
      backend/web/js/jquery.min.js
  4. 20
      console/migrations/m191203_112307_add_data_to_table_city_and_area.php
  5. 8
      console/migrations/sql/add_data.sql

428
backend/views/express-template/area.php

@ -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

2966
backend/web/js/jquery.min.js
File diff suppressed because it is too large
View File

20
console/migrations/m191203_112307_add_data_to_table_city_and_area.php

@ -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;
}
}

8
console/migrations/sql/add_data.sql

@ -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');
Loading…
Cancel
Save