mirror of
https://github.com/crmeb/CRMEB.git
synced 2026-01-19 05:48:15 +00:00
272 lines
11 KiB
PHP
272 lines
11 KiB
PHP
{extend name="public/container"}
|
|
{block name="content"}
|
|
<style>
|
|
.smallplace .citys {
|
|
width: auto;
|
|
background-color: #fff;
|
|
position: absolute;
|
|
top: 33px;
|
|
border: 1px solid #ccc;
|
|
z-index: 100;
|
|
display: none;
|
|
}
|
|
|
|
.smallplace .citys.on {
|
|
display: block;
|
|
}
|
|
|
|
.smallplace .citys > i.jt {
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 8px solid transparent;
|
|
border-right: 8px solid transparent;
|
|
border-bottom: 10px solid #ccc;
|
|
position: absolute;
|
|
top: -10px;
|
|
left: 20px;
|
|
}
|
|
|
|
.smallplace .citys .row-div {
|
|
min-width: 250px;
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.clearfloat {
|
|
zoom: 1;
|
|
}
|
|
|
|
.layui-input-block {
|
|
margin-left: 0
|
|
}
|
|
|
|
.jt-mk{
|
|
display: block;
|
|
position: absolute;
|
|
top: -10px;
|
|
left: 20px;
|
|
width: 252px;
|
|
height: 10px;
|
|
background-color: rgba(255, 255, 255, 0);
|
|
margin-left: -21px;
|
|
}
|
|
</style>
|
|
<div class="layui-fluid" style="background: #fff;margin-top: -10px;">
|
|
<div class="layui-row layui-col-space15" id="app" v-cloak="">
|
|
<div class="layui-col-md12">
|
|
<div class="layui-card">
|
|
<div class="layui-card-body" style="text-align: right">
|
|
<button type="button" class="layui-btn layui-btn-normal layui-btn-sm" @click="save">确定</button>
|
|
<button type="button" class="layui-btn layui-btn-warm layui-btn-sm" @click="clerl">取消</button>
|
|
</div>
|
|
<div class="layui-card-body">
|
|
<form class="layui-form" action="">
|
|
<div class="layui-form-item" pane="">
|
|
<div class="layui-input-block" v-cloak="">
|
|
<span @click="allCheckbox(true)">
|
|
<input type="radio" name="select" title="全选">
|
|
</span>
|
|
<span @click="allCheckbox(false)">
|
|
<input type="radio" name="select" title="取消">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item" pane="">
|
|
<div class="layui-input-block" v-cloak="">
|
|
<div style="margin-top: 15px;position: relative"
|
|
class="layui-col-md3 layui-col-lg3 layui-col-xs3 layui-col-sm3 selected"
|
|
v-for="(item,index) in cityList" @click="checkedClick(index)">
|
|
<input ref="checkbox" type="checkbox" lay-skin="primary" :title="item.name"
|
|
:checked="item.checked ? true : false" lay-filter="city" :value="index">
|
|
<span style="color: #ff0000">({{(item.count || 0) + '/' + item.children.length}})</span>
|
|
|
|
<div class="smallplace" @click.stop="">
|
|
<div class="citys" :class="item.on ? 'on' : ''">
|
|
<i class="jt"><i></i></i>
|
|
<i class="jt-mk"></i>
|
|
<div class="row-div clearfloat" style="max-width: 300px">
|
|
<div class="layui-form-item" pane="">
|
|
<div class="layui-input-block" v-cloak="" style="margin-left: 0;">
|
|
<span v-for="(val,i) in item.children"
|
|
@click="primary(index,i)">
|
|
<input type="checkbox" ref="primary" lay-skin="primary"
|
|
:title="val.name"
|
|
:checked="val.checked ? true : false">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="{__ADMIN_PATH}js/layuiList.js"></script>
|
|
{/block}
|
|
{block name="script"}
|
|
<script>
|
|
var type=<?=$type?>;
|
|
mpFrame.start(function (Vue) {
|
|
new Vue({
|
|
el: "#app",
|
|
data: {
|
|
cityList: [],
|
|
areaList: [],
|
|
selectList: {}
|
|
},
|
|
methods: {
|
|
/**
|
|
* 确认选中
|
|
*/
|
|
save: function () {
|
|
var that = this;
|
|
var selectList = [];
|
|
$.each(this.cityList, function (key, item) {
|
|
var data = {};
|
|
if (item.checked || item.children.find(function (k) {
|
|
return !!k.checked;
|
|
})) {
|
|
data = {
|
|
name: item.name,
|
|
city_id: item.city_id,
|
|
children: []
|
|
};
|
|
for (index in item.children) {
|
|
if (!!item.children[index].checked) {
|
|
data.children.push({
|
|
city_id: item.children[index].city_id,
|
|
});
|
|
}
|
|
}
|
|
selectList.push(data);
|
|
}
|
|
});
|
|
if(selectList.length ==0){
|
|
return that.showMsg('至少选择一个省份或者城市');
|
|
}
|
|
parent.selectCity(selectList,type);
|
|
var index = parent.layer.getFrameIndex(window.name);
|
|
parent.layer.close(index);
|
|
},
|
|
/**
|
|
* 关闭
|
|
*/
|
|
clerl: function () {
|
|
var index = parent.layer.getFrameIndex(window.name);
|
|
parent.layer.close(index);
|
|
},
|
|
/**
|
|
* 全选或者反选
|
|
* @param checked
|
|
*/
|
|
allCheckbox: function (checked) {
|
|
var that = this;
|
|
$.each(this.cityList, function (key, item) {
|
|
that.$set(that.cityList[key], 'checked', checked);
|
|
if (checked) {
|
|
that.$set(that.cityList[key], 'count', that.cityList[key].children.length);
|
|
} else {
|
|
that.$set(that.cityList[key], 'count', 0);
|
|
}
|
|
$.each(that.cityList[key].children, function (k, val) {
|
|
that.$set(that.cityList[key].children[k], 'checked', checked);
|
|
})
|
|
});
|
|
this.render();
|
|
},
|
|
/**
|
|
* 获取城市列表,绑定事件
|
|
*/
|
|
getCityList() {
|
|
var that = this;
|
|
layList.baseGet(layList.U({a: "city_list", q: {id: 0}}), function (res) {
|
|
that.$set(that, 'cityList', res.data);
|
|
that.render();
|
|
that.$nextTick(function () {
|
|
this.$nextTick(function () {
|
|
layList.form.render('radio');
|
|
$('.selected').on({
|
|
mouseover: function (event) {
|
|
event.stopPropagation()
|
|
$(this).find('.citys').addClass('on');
|
|
},
|
|
mouseout: function (event) {
|
|
event.stopPropagation()
|
|
$(this).find('.citys').removeClass('on');
|
|
}
|
|
})
|
|
})
|
|
});
|
|
});
|
|
|
|
},
|
|
/**
|
|
* 重新渲染checkbox
|
|
*/
|
|
render: function () {
|
|
this.$nextTick(function () {
|
|
layList.form.render('checkbox');
|
|
})
|
|
},
|
|
showMsg: function (msg, success) {
|
|
layui.use(['layer'], function () {
|
|
layui.layer.msg(msg, success);
|
|
});
|
|
},
|
|
/**
|
|
* 点击省
|
|
* @param index
|
|
*/
|
|
checkedClick: function (index) {
|
|
var that = this;
|
|
if (this.$refs.checkbox[index].checked) {
|
|
that.$set(that.cityList[index], 'count', that.cityList[index].children.length);
|
|
that.$set(that.cityList[index], 'checked', true);
|
|
$.each(that.cityList[index].children, function (key, item) {
|
|
that.$set(that.cityList[index].children[key], 'checked', true);
|
|
})
|
|
} else {
|
|
that.$set(that.cityList[index], 'count', 0);
|
|
that.$set(that.cityList[index], 'checked', false);
|
|
$.each(that.cityList[index].children, function (key, item) {
|
|
that.$set(that.cityList[index].children[key], 'checked', false);
|
|
})
|
|
}
|
|
this.render();
|
|
},
|
|
/**
|
|
* 点击市区
|
|
* @param index
|
|
* @param ind
|
|
*/
|
|
primary: function (index, ind) {
|
|
var checked = false, count = 0;
|
|
if (this.cityList[index].children[ind].checked === undefined) {
|
|
this.$set(this.cityList[index].children[ind], 'checked', true)
|
|
} else {
|
|
this.$set(this.cityList[index].children[ind], 'checked', !this.cityList[index].children[ind].checked);
|
|
}
|
|
$.each(this.cityList[index].children, function (key, item) {
|
|
if (item.checked) {
|
|
checked = true;
|
|
count++;
|
|
}
|
|
});
|
|
this.$set(this.cityList[index], 'count', count);
|
|
this.$set(this.cityList[index], 'checked', checked);
|
|
this.render();
|
|
}
|
|
},
|
|
mounted: function () {
|
|
this.getCityList();
|
|
}
|
|
})
|
|
})
|
|
</script>
|
|
{/block}
|