@ -4,7 +4,7 @@
< th:block th:include = "include :: header('涉密网络设备列表')" / >
< / head >
< body class = "gray-bg" >
< div class = "container-div" >
< div class = "container-div" id = "app" >
< div class = "row" >
< div class = "col-sm-12 search-collapse" >
< form id = "formId" >
@ -12,11 +12,21 @@
< ul >
< li >
< label > 所属市州：< / label >
< input type = "text" name = "framework" / >
< select id = "City" name = "framework" @ change = "getAreaList()" v-model = "City" >
< option value = "" > 请选择< / option >
< option v-for = "option in CityList" :value = "option.id" :key = "option.id" >
{{ option.name }}
< / option >
< / select >
< / li >
< li >
< label > 所属区县：< / label >
< input type = "text" name = "area" / >
< select id = "Area" name = "area" v-model = "Area" class = "form-control m-b" >
< option value = "" > 请选择< / option >
< option v-for = "option in AreaList" :value = "option.id" :key = "option.id" >
{{ option.name }}
< / option >
< / select >
< / li >
< li >
< label > 使用单位：< / label >
@ -61,7 +71,15 @@
var listFlag = [[${@permission.hasPermi('system:network:list')}]];
var netMijiDatas = [[${@dict.getType('sys_file_miji')}]];
var prefix = ctx + "system/network";
let datas = []
$.ajax({
url: ctx + "system/area/getAllList",
type: 'GET',
data:{parentId:''} ,
success:((res)=>{
datas = res.data
}) ,
});
$(function() {
var options = {
url: prefix + "/list",
@ -80,11 +98,17 @@
},
{
field: 'framework',
title: '所属市州'
title: '所属市州',
formatter: function(value, row, index) {
return getCity(datas, value)
}
},
{
field: 'area',
title: '所属区县'
title: '所属区县',
formatter: function(value, row, index) {
return getCity(datas, value)
}
},
{
field: 'netDepart',
@ -127,11 +151,69 @@
};
$.table.init(options);
});
function getCity(datas,value){
if ($.common.isEmpty(datas) || $.common.isEmpty(value)) {
return '';
}
var actions = []
$.each(datas, function(index, city) {
if (city.id === ('' + value)) {
actions.push($.common.sprintf("< span > %s< / span > ", city.name));
return false;
}
});
if (actions.length === 0) {
actions.push($.common.sprintf("< span > %s< / span > ", value))
}
return actions.join('');
}
/*网络设备列表-详细*/
function detail(netId) {
var url = prefix + '/detail/' + netId;
$.modal.openTab("网络设备列表数据", url);
}
var app = new Vue({
el: '#app',
data: {
CityList: [],
AreaList:[],
City:'',
Area:'',
params:{
parentId:'',
}
},
mounted(){
// 初始化地市列表
this.getCityList();
if (this.City){
this.getAreaList()
}
},
methods:{
getCityList(){
$.ajax({
url: ctx + "system/area/getSysAreaList",
type: 'GET',
data:this.params ,
success:((res)=>{
this.CityList = res.data
}) ,
});
},
getAreaList(){
this.params.parentId = this.City
$.ajax({
url: ctx + "system/area/getSysAreaList",
type: 'GET',
data:this.params,
success:((res)=>{
this.AreaList = res.data
}) ,
});
}
}
})
< / script >
< / body >
< / html >
dshclm
11 months ago