📖 File Reader
{include file="public/top"/}
{include file="public/vue"/}
<link href="__PUBLIC__/layui-v2.9.14/layui/css/layui.css" rel="stylesheet">
<style>
.control-label{
font-weight:normal!important;
}
.col-sm-10{
padding-left:0px;
}
.form-control{
height: 38px;
line-height: 1.3;
}
.bixuan{
color:red;
}
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight" id="vue">
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-title" style="position: relative;">
<h5>地区管理 <small>创建</small></h5>
<a href="/admin/Config/region_list">
<div style="position: absolute;right: 20px;top: 50%;transform: translateY(-50%);width: 100px;height: 40px;text-align: center;line-height: 40px;color: #8d8c8c;font-size: 12px;">返回上一页</div>
</a>
</div>
<div class="ibox-content" style= padding-top:30px;">
<form method="post" onSubmit="return chkform(this)" name="form" id="form" action="" enctype="multipart/form-data" onkeydown="if(event.keyCode==13)return false;" class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">所属地区</label>
<div class="col-sm-10">
<select v-model="province" @change="region(province,2)" class="form-control" style="width: 20%;float:left;margin-right:5px;">
<option value="0">请选择省</option>
<option v-for="item in region_list1" :value="item.id">{{item.name}}</option>
</select>
<select v-if="region_list2 != ''" v-model="city" @change="region(city,3)" class="form-control" style="width: 20%;float:left;margin-right:5px;">
<option value="0">请选择市</option>
<option v-for="item in region_list2" :value="item.id">{{item.name}}</option>
</select>
<select v-if="region_list3 != ''" v-model="district" class="form-control" style="width: 20%;float:left;margin-right:5px;">
<option value="0">请选择区</option>
<option v-for="item in region_list3" :value="item.id">{{item.name}}</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"><a class="bixuan">* </a>地区名称</label>
<div class="col-sm-10">
<input type="text" v-model="name" placeholder="请输入名称" value="" class="form-control" style="width: 40%;">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"><a class="bixuan">* </a>首字母（大写）</label>
<div class="col-sm-10">
<input type="text" v-model="first" placeholder="请输入名称" value="" class="form-control" style="width: 40%;">
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<div class="col-sm-4 col-sm-offset-2">
<button class="btn btn-primary" type="button" @click="SubmitForm()">保存内容</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script>
var vm = new Vue({
el: '#vue',
data: {
'id':0,
'region_info':{},//地区详细信息
'region_list1':[],//省
'region_list2':[],//市
'region_list3':[],//区
'province':0,
'city':0,
'district':0,
'name':'',
'first':'',
},
methods: {
/*地区详情*/
RegionInfo:function(){
var that = this;
req_post('/admin/Config/region_info', {'id':that.id}).then(res => {
console.log(res.data.info)
that.name = res.data.info.name;
that.first = res.data.info.first;
that.region_info = res.data.info;
that.province= res.data.info.province_id;
that.city= res.data.info.city_id;
that.district= res.data.info.district_id;
if (res.data.info.province_id>0){
that.region(that.province,2,1);
}
if (res.data.info.city_id>0){
that.region(that.city,3,1);
}
});
},
/*获取地区*/
region:function(id,level,is_chaxun) {
var that = this;
that.region_id = id;
if (is_chaxun != 1){
if (level == 2){
that.region_list2 = [];
that.city = 0
that.region_list3 = [];
that.district = 0;
}
if (level == 3){
that.region_list3 = [];
that.district = 0;
}
}
req_post('/admin/Config/region_d', {'region_id':that.region_id}).then(res => {
if (level == 1){
that.region_list1 = res.data.list;
}
if (level == 2){
if (that.province != 0){
that.region_list2 = res.data.list;
}
}
if (level == 3){
if (that.city != 0) {
that.region_list3 = res.data.list;
}
}
});
},
/*表单提交处理*/
SubmitForm:function(){
var that = this;
if (!that.name){
parent.layer.msg('请输入地区名称', {shift: 1});
return false;
}
if (!that.first){
parent.layer.msg('请输入地区名称首字母（大写）', {shift: 1});
return false;
}
req_post('/admin/Config/region_update', {'id':that.id,'province':that.province,'city':that.city,'district':that.district,'name':that.name,'first':that.first}).then(res => {
if (res.code == 200){
layer.msg(res.msg,{
icon:1,
time:1800,
end:function () {
window.location.href="/admin/Config/region_list.html";
}
})
}
});
},
},
created() {
var that = this;
that.id = "{$id}";
that.region(0,1);
if (that.id > 0){
that.RegionInfo();
}
}
})
//监听并触发分页
vm.$watch('current_page', function (nval, oval) {
this.load();
});
</script>
</body>
</html>