**接口地址**：`GET /residentOrg/page`
**接口描述**：获取居民台账的分页列表
**请求参数**：CitySyncResidentOrgPageReqVo对象
| 参数名 | 类型 | 是否必选 | 描述 |
|
------------------------ |
------- |
-------- |
------------------------------------------------ |
| page | Integer | 是 | 当前页码 |
| limit | Integer | 是 | 每页记录数 |
| areaCoding | String | 否 | 区编码 |
| streetCoding | String | 否 | 街道编码 |
| commCoding | String | 否 | 社区编码 |
| name | String | 否 | 居住区名称 |
| managementUnit | String | 否 | 管理单位 |
| collectionEnterpriseName | String | 否 | 收集公司 |
| orgType | Integer | 是 | 主体类型 0:城市居住区 1:农村居住区
2:平房居住区 |
| orgTypeId | String | 否 | 主体uuid |
**响应结果**：ResponseResult<PageUtils<CitySyncResidentOrgRespVo>>
**响应参数说明**：
| 参数名 | 类型 | 描述 |
|
----------------------------------------- |
------- |
------------------------------------ |
| code | Integer | 响应码，
200表示成功 |
| msg | String | 响应消息 |
| data | Object | 分页数据 |
| data.totalCount | Integer | 总记录数 |
| data.pageSize | Integer | 每页记录数 |
| data.totalPage | Integer | 总页数 |
| data.currPage | Integer | 当前页数 |
| data.list | Array | 居民台账列表数据 |
| data.list[].id | Long | 自增主键 |
| data.list[].orgId | String | 主体uuid |
| data.list[].areaCoding | String | 区编码 |
| data.list[].areaName | String | 区名称 |
| data.list[].streetCoding | String | 街道编码 |
| data.list[].streetName | String | 街道名称 |
| data.list[].commCoding | String | 社区编码 |
| data.list[].commName | String | 社区名称 |
| data.list[].name | String | 居住区名称 |
| data.list[].bulletinBoardImage | String | 公示牌照片 |
| data.list[].detailedAddress | String | 详细地址 |
| data.list[].isDeleted | Integer | 是否删除
(0
-否,1
-是
) |
| data.list[].orgTypeId | String | 主体类型uuid |
| data.list[].orgTypeIdName | String | 主体类型名称 |
| data.list[].orgSubTypeId | String | 主体类型子类uuid |
| data.list[].orgSubTypeIdName | String | 主体类型子类名称 |
| data.list[].householdNumber | String | 户数 |
| data.list[].peopleNumber | String | 人数 |
| data.list[].latitude | String | 主体地址
-纬度 |
| data.list[].longitude | String | 主体地址
-经度 |
| data.list[].createTime | Long | 创建时间戳 |
| data.list[].updateTime | Long | 更新时间戳 |
| data.list[].isHasWashingBucket | Integer | 是否具有洗桶设施
(0
-否,1
-是
) |
| data.list[].installGrinderHouseholdNumber | Integer | 安装厨余垃圾粉碎机的户数 |
| data.list[].decrementDesc | String | 有减量设备的家庭地址，以；分隔 |
| data.list[].i
sModel | Integer | 是否是示范小区/示范行政村
(0
-否,1
-是
) |
| data.list[].modelDate | Date | 取得示范小区的时间 |
| data.list[].kitchenWasteCollectCar | String | 厨余垃圾直收直运收集单位名称 |
| data.list[].kitchenWasteRubbish | String | 厨余垃圾垃圾楼名称 |
| data.list[].kitchenWasteLocal | String | 厨余垃圾就地处理设施名称 |
| data.list[].otherWasteCollectCar | String | 其他垃圾直收直运收集单位名称 |
| data.list[].otherWasteRubbish | String | 其他垃圾垃圾楼名称 |
| data.list[].recycleWasteCollectName | String | 可回收垃圾收集点名称 |
| data.list[].recycleWasteCollectAddr | String | 可回收垃圾收集点地址 |
| data.list[].recycleLatitude | String | 可回收垃圾收集位置
-纬度 |
| data.list[].recycleLongitude | String | 可回收垃圾收集位置
-经度 |
| data.list[].harmfulWasteCollectName | String | 有害垃圾收集点名称 |
| data.list[].harmfulWasteCollectAddr | String | 有害垃圾收集点地址 |
| data.list[].harmfulLatitude | String | 有害垃圾收集位置
-纬度 |
| data.list[].harmfulLongitude | String | 有害垃圾收集位置
-经度 |
| data.list[].bigRubbishCollectName | String | 大件垃圾收运公司名称 |
| data.list[].decorationWasteCollectName | String | 装修垃圾收运公司名称 |
| data.list[].fixedPointName | String | 定点投放
-名称 |
| data.list[].fixedPointAddr | String | 定点投放
-地址 |
| data.list[].fixedLatitude | String | 定点投放
-位置
-纬度 |
| data.list[].fixedLongitude | String | 定点投放
-位置
-经度 |
| data.list[].flowOther | String | 流动收集
-直收直运其他垃圾公司名称 |
| data.list[].flowKitchen | String | 流动收集
-直收直运厨余垃圾公司名称 |
| data.list[].propertyCompanies | String | 物业公司 |
| data.list[].qllsj | Date | 在区平台的录入时间 |
**示例请求**：
```
GET /residentOrg/page?page
=1&limit
=10&orgType
=1
```
**示例响应**：
```json
{
"code":
200,
"msg": "success",
"data": {
"totalCount": 100,
"pageSize": 10,
"totalPage": 10,
"currPage": 1,
"list": [
{
"id": 1,
"orgId": "ORG001",
"areaCoding": "110101",
"areaName": "东城区",
"streetCoding": "110101001",
"streetName": "景山街道",
"commCoding": "110101001001",
"commName": "隆福寺社区",
"name": "隆福寺小区",
"bulletinBoardImage": "http://example.com/image.jpg",
"detailedAddress": "东城区景山街道隆福寺街95号",
"isDeleted": 0,
"orgTypeId": "TYPE001",
"orgTypeIdName": "居民小区",
"orgSubTypeId": "SUBTYPE001",
"orgSubTypeIdName": "普通小区",
"householdNumber": "500",
"peopleNumber": "1500"
}
]
}
}
```
上面是接口,下面是代码,js
文件代码和后缀ftl
文件代码
// import upload from '../../../view/infoSys/upload.vue'
// window.customElements.define
('upload', upload
)
// import myMixins from "../mixins.js";
// Vue.component
(upload
);
var vues
= new Vue
({
el: '#app',
// mixins: [myMixins],
// components:{
// upload
// },
data: {
navList:[],//nav模块
paramList:{},//nav模块
-url
tableHead: [[
{type: 'numbers', width: "6%", title: '序号'},
{
width: "
20%", title: '街镇名称', templet: function
(res
) {
return !res.name ? '
-' : res.name;
}
},
{
width: "10%", title: '负责人', templet: function
(res
) {
return !res.personInCharge ? '
-' : res.personInCharge;
}
},
{
width: "10%", title: '联系方式', templet: function
(res
) {
return !res.contact ? '
-' : res.contact;
}
},
{
width: "10%", title: '面积', templet: function
(res
) {
return !res.area ? '
-' : res.area;
}
},
{
field: 'address', width: "30%", title: '详细地址', templet: function
(res
) {
return !res.address ? '
-' : res.address;
}
},
// {width: "110", title: '图片', templet: function
(res
){
// if
(res.imageUrl
){
// return '<div><img src
="'+res.imageUrl+'" alt
="" style
="width:80px; height:80px;" onclick
="vues.showBigImage
(this
)"></div>'
// }else{
// return'
-'
// }
// }},
// {width: "10%", title: '垃圾分类开始时间', templet: function
(res
){
// return !res.startTime ? '
-': res.startTime;
// }},
{
fixed: 'right',
title: '操作',
width: "
220", templet: function
(res
) {
var
btn = "";
//
btn +
= '<a target
="_blank"
class="
layui-btn layui-btn-xs" lay
-event
="look">查看</a>';
var
btn = "";
var use
Btn = "";
if
(res.isEnable
== 0
) {
use
Btn = "停用";
} else if
(res.isEnable
== 1
) {
use
Btn = "启用";
} else {
use
Btn = "启用";
}
vues.menu
Btn.forEach
((e
) => {
if
(e.button
Class == 'look'
) {
btn +
= '<a target
="_blank"
class="
layui-btn layui-btn-xs" lay
-event
="look">查看</a>';
}else if
(e.button
Class == 'edit'
) {
btn +
= '<a target
="_blank"
class="
layui-btn layui-btn-xs
layui-btn-normal" lay
-event
="edit">编辑</a>';
} else if
(e.button
Class == 'delete'
) {
btn +
= '<a target
="_blank"
class="
layui-btn layui-btn-xs
layui-btn-normal" lay
-event
="delete">删除</a>';
} else if
(e.button
Class == 'status'
) {
btn +
= '<a target
="_blank"
class="
layui-btn layui-btn-xs" lay
-event
="status">' + use
Btn + '</a>';
}
}
)
//
btn +
= '<a target
="_blank"
class="
layui-btn layui-btn-xs" lay
-event
="look">查看</a>';
//
btn +
= '<a target
="_blank"
class="
layui-btn layui-btn-xs
layui-btn-normal" lay
-event
="edit">编辑</a>';
//
btn +
= '<a target
="_blank"
class="
layui-btn layui-btn-xs
layui-btn-normal" lay
-event
="delete">删除</a>';
//
btn +
= '<a target
="_blank"
class="
layui-btn layui-btn-xs" lay
-event
="status">' + use
Btn + '</a>';
return
btn;
}
}
]],
streetList: [],
communityList: [],
menu
Btn: [],
btnJson: {
add: false,
moreUpload: false,
download: false,
export: false,
print: false
},
isHaveHandle: false,
searchListFlag: false,
searchLi: [],
printQuery: '',
cheakliat: "",
name: '',
imgShow: false,
type: '',
url: '',
upload
File: new FormData
(),
uploadsVar: ''
},
mounted: function
() {
// this.getNav
()
this.menuList
Btn()
this.table
();
// this.selcetInit
();
},
methods: {
menuList
Btn() {
this.$nextTick
(() => {
let arr
= []
menusButtonList.forEach
((e
) => {
if
(e.menuId
== menusIds
) {
this.menu
Btn.push
(e
)
if
(e.attrType
== 1
) {
arr.push
(e
)
}
}
}
)
console.log
(this.menu
Btn)
this.menu
Btn.forEach
((e
) => {
if
(e.button
Class == 'add'
) {
vues.
btnJson.add
= true
} else if
(e.button
Class == 'moreUpload'
) {
vues.
btnJson.moreUpload
= true
} else if
(e.button
Class == 'download'
) {
vues.
btnJson.download
= true
} else if
(e.button
Class == 'export'
) {
vues.
btnJson.export
= true
} else if
(e.button
Class == 'print'
) {
vues.
btnJson.print
= true
}
}
)
if
(arr.length
== 0
) {
this.isHaveHandle
= true;
this.tableHead[0].pop
();
}
}
)
},
//显示大图片
showBigImage
(e
) {
layer.open
({
type: 1,
title: false,
close
Btn: 0,
shadeClose: true, //点击阴影关闭
area: [$
(e
).width + 'px', $
(e
).height + 'px'], //宽高
content: "<img src
=" + $
(e
).attr
('src'
) + " />"
}
);
},
//打印
prints
() {
var v
= document.createElement
("div"
);
let self
= this;
$.ajax
({
url: ctx + '/service/base/street/list',
data: {limit: 999999, page: 1, name: self.name},
success: function
(res
) {
if
(res.code
== 0
) {
if
(res.data.length
) {
// <head><link rel
="stylesheet" href
="'+ctx+'/plugins/
layui/css/
layui.css"></head>
let str
= '<html><body><head><style>tr,td{padding:3px}.
layui-table {width: 100%;background
-color: #fff;color: #666;margin: 10px 0;}.
layui-table
-cell {height:
28px;line
-height:
28px;padding: 0 15px;position: relative;box
-sizing: border
-box}.
layui-table
-cell{top:
-1px;padding: 0}.
layui-table
-cell .
layui-table
-link {color: #01AAED}</style></head><table border style
="width: 100%;border
-collapse: collapse;border
-spacing: 0;"
class="
layui-table">';
str +
= '<thead style
="background
-color: #f
2f
2f
2;width: 100%">';
str +
= '<tr
class="
layui-table
-col
-special
layui-table
-cell laytable
-cell
-1
-0
-5" style
="background
-color: #f
2f
2f
2;font
-weight: 700">';
str +
= '<td style
="background: #f
2f
2f
2;width: 4%">序号</td>';
str +
= '<td style
="background: #f
2f
2f
2;width: 10%">街镇名称</td>';
str +
= '<td style
="background: #f
2f
2f
2;width: 10%">负责人</td>';
str +
= '<td style
="background: #f
2f
2f
2;width: 10%">联系方式</td>';
str +
= '<td style
="background: #f
2f
2f
2;width: 10%">面积</td>';
str +
= '<td style
="background: #f
2f
2f
2;width: 10%">详细地址</td>';
// str+
='<td style
="background: #f
2f
2f
2;">经纬度</td>';
str +
= '<td style
="background: #f
2f
2f
2;width: 10%">图片</td>';
str +
= '<td style
="background: #f
2f
2f
2;width: 10%">创建人</td>';
str +
= '<td style
="background: #f
2f
2f
2;width: 10%">垃圾分类开始时间</td>';
str +
= '</tr>';
str +
= '</thead>';
str +
= '<tbody style
="width: 100%">';
for
(var i
= 0; i < res.data.length; i++
) {
str +
= '<tr
class="
layui-table" >';
str +
= '<td style
="width: 4%">' +
(i + 1
) + '</td>';
str +
= '<td style
="width: 10%">' + res.data[i].name || '
-' + '</td>';
str +
= '<td style
="width: 10%">' +
(res.data[i].personInCharge || '
-'
) + '</td>';
str +
= '<td style
="width: 10%">' +
(res.data[i].contact ? res.data[i].contact : '
-'
) + '</td>';
str +
= '<td style
="width: 10%">' +
(res.data[i].area ? res.data[i].area : '
-'
) + '</td>';
str +
= '<td style
="width: 10%">' +
(res.data[i].address || '
-'
) + '</td>';
str +
= '<td style
="width: 10%">' +
(res.data[i].image ? res.data[i].image : '
-'
) + '</td>';
str +
= '<td style
="width: 10%">' +
(res.data[i].creatorName ? res.data[i].creatorName : '
-'
) + '</td>';
str +
= '<td style
="width: 10%">' +
(res.data[i].startTime ? res.data[i].startTime : '
-'
) + '</td>';
str +
= '</tr>';
}
str +
= '</tbody>';
str +
= '</table></body></html>';
var h
= window.open
("打印窗口", "_blank"
);
h.document.write
(str + $
(v
).prop
("outerHTML"
));
h.document.close
();
console.log
(h
)
h.print
();
h.close
();
} else {
layerObj.failMsg
("该条件下暂无数据，无法打印！"
);
}
}
;
}
}
);
},
//list
table: function
() {
var self
= this;
//默认list
var dataUrl
= ctx + 'residentOrg/page`';
layerObj.tableList
(self.tableHead, 'allTable', dataUrl, 'tool
(allTable
)', function
(res, curr, count
) {
}, function
(e
) {
let id
= e.data.id;
//查看
if
(e.event
=== "look"
) {
self.alertFun
(id, 'look'
)
}
//编辑
if
(e.event
=== "edit"
) {
self.alertFun
(id, 'edit'
)
}
if
(e.event
== 'status'
) {
//启用禁用
let id
= e.data.id;
let tip
= e.data.isEnable
== 0 ? '停用' : '启用'
layer.confirm
('确定' + tip + '吗？', {
btn: ['确定', '取消'] //可以无限个按钮
}, function
(index, layero
) {
$.ajax
({
url: ctx + '/service/base/street/editEnable?id
=' + id + '&isEnable
=' +
(e.data.isEnable
== 0 ? 1 : 0
),
type: "get",
success: function
(res
) {
if
(res.code
== 0
) {
layerObj.succes
sMsg
("修改成功！"
);
self.table
();
} else {
layerObj.failMsg
(res.msg ? res.msg : "修改失败！"
);
}
}
}
);
layer.close
(index
);
}, function
(index
) {
layer.close
(index
);
}
);
}
// 删除
if
(e.event
=== 'delete'
) {
layer.confirm
('是否删除所属街镇及其关联的数据
(收运单位,物业,合同
)？', {
btn: ['确定', '取消'] //可以无限个按钮
}, function
(index, layero
) {
layerObj.ajaxSend
(
'get',
ctx + '/service/base/street/delete?id
=' + id,
'json',
{},
function
(data
) {
if
(data.code
=== 1
) {
layer.alert
(data.msg
);
} else {
self.table
();
}
}
);
layer.close
(index
);
}, function
(index
) {
layer.close
(index
);
}
);
}
}, "allTable"
);
//搜索
layui.use
(['form', 'table', 'upload'], function
() {
var form
= layui.form;
var table
= layui.table;
var upload
= layui.upload;
form.on
("submit
(formSearch
)", function
(data
) {
table.reload
("allTable", {
headers: self.tableHead,
url: dataUrl,
page: {curr: 1},
where: data.field,
done: function
() {
}
}, 'data'
);
}
);
// 重置
form.on
("submit
(formReset
)", function
(data
) {
self.condition
= null
table.reload
("allTable", {
headers: self.tableHead,
url: dataUrl,
page: {curr: 1},
where: self.condition,
done: function
() {
}
}, 'data'
);
}
);
//导出
form.on
("submit
(export
)", function
(data
) {
var name
= $
('input[name
="name"]'
).val
();
var cs
= ctx + "/service/base/street/export?name
=" + name;
window.open
(cs
);
}
);
// // 监听导入按钮
// upload.render
({
// elem: '#moreUpload'
// , url: ctx + '/service/base/street/import'
// , multiple: false
// , accept: "
file"
// , acceptMime: "
file/xls,
file/xlsx"
// , exts: "xls|xlsx"
// , drag: true
// , before: function
(obj
) {
// layer.load
(1
);
// }, done: function
(res
) {
// layer.closeAll
("loading"
);
// if
(res.code
== 0
) {//
上传成功
// layer.msg
('导入成功'
);
// } else {
// layer.msg
(res.msg ? res.msg : '导入失败'
);
// }
// }, error: function
(res
) {
// layer.closeAll
("loading"
);
// layer.msg
(res.msg ? res.msg : '导入失败'
);
// }
// }
);
//
上传附件
var uploadInst
= upload.render
({
elem: '#
uploadBtn'
, url: ctx + '/service/upload/minio/uploadAttach'
, accept: '
file' //普通
文件
, choose: function
(obj
) {
obj.preview
(function
(index,
file, result
) {
self.
fileName
= file.name;
$
('#attachUrl'
).html
(file.name
);
}
)
}
, done: function
(res
) {
if
(res.code > 0
) {
self.
filePath
= res.data.
filePath
self.imgShow
= true
$
('#attachUrl'
).on
('click', function
() {
window.location.href
= ctx + '/service/upload/minio/downloadReplace
FileName?
filename
=' + $
('#attachUrl'
).text
() + '&
fileUrlName
=' + res.data.
fileName
}
)
layer.msg
('
上传成功'
);
}else {
layer.msg
(res.msg
);
}
}
}
);
}
);
},
//添加和编辑弹窗
alertFun
(myid, type
) {
var self
= this;
self.type
= type
document.getElementById
("information"
).reset
();
self.imgShow
= false
$
('#image'
).val
(""
);
$
("#roleIds,#roleNames"
).val
(""
);
var titleName;
var postUrl
= '';
if
(type
== 'edit'
) {
titleName
= "编辑";
postUrl
= ctx + "/service/base/street/editItem"
} else if
(type
== 'add'
){
titleName
= "新建";
postUrl
= ctx + "/service/base/street/addItem"
}
$
('#imageWrapper'
).html
('<input type
="hidden" name
="image" id
="image" />'
)
layui.use
(['form', 'layer', 'upload', 'laydate'], function
() {
let form
= layui.form;
let layer
= layui.layer;
let upload
= layui.upload;
let laydate
= layui.laydate;
var myLayer
= layer.open
({
title: titleName + "菜单",
type: 1,
area: ["900px", "700px"],
content: $
("#information"
),
success: function
() {
if
(myid
) {
//回显
$.ajax
({
url: ctx + "/service/base/street/detail?id
=" + myid,
success: function
(res
) {
form.val
("information", {
name: res.data.name ? res.data.name : '',
personInCharge: res.data.personInCharge ? res.data.personInCharge : '',
contact: res.data.contact ? res.data.contact : '',
residentNum: res.data.residentNum ? res.data.residentNum : '',
area: res.data.area ? res.data.area : '',
longitude: res.data.longitude,
latitude: res.data.latitude,
longitudeLatitude: res.data.longitude ? res.data.longitude + "," + res.data.latitude : "",
address: res.data.address ? res.data.address : '',
}
);
//地图标注
if
(res.data.latitude && res.data.longitude
) {
addPointFun
(res.data.longitude, res.data.latitude, true
);
}
//
文件
var image
= res.data.image;
self.
filePath
= image
if
(image && image !
= ""
) {
self.imgShow
= image ? true : false;
$
('#attachUrl'
).html
(image.split
('_'
)[image.split
('_'
).length
- 1]
);
$
('#attachUrl'
).on
('click', function
() {
window.location.href
= ctx + '/service/upload/minio/downloadReplace
FileName?
filename
=' + $
('#attachUrl'
).text
() + '&
fileUrlName
=' + image
}
)
}
self.$nextTick
(() => {
form.render
()
}
)
}
}
);
} else {
form.val
("information", {}
);
$
('#attachUrl'
).html
(''
);
self.imgShow
= false;
self.$nextTick
(() => {
form.render
()
}
)
}
form.on
('submit
(up
)', function
(data
) {
let paramObj
= data.field;
paramObj.pid
= self.pid;
paramObj.imageUrl
= self.
filePath;
if
(myid
) {
paramObj.id
= myid;
}
layerObj.commonAjax
('POST', postUrl, "json", paramObj, function
(data
) {
if
(data.code
== 0
) {
layer.closeAll
();
layerObj.succes
sMsg
("保存成功！"
);
self.table
();
} else {
layerObj.failMsg
(data.msg
);
}
}
);
}
);
// 校验
form.verify
({
population: function
(value
) {
//户口
return reregister
(value, '请输入正确的人口数量'
);
},
area: function
(value
) {
//面积
return floating
(value, '请输入正确的面积'
);
},
// 联系方式
informationl: function
(value
) {
return information
(value, '请输入正确的联系方式'
);
},
}
)
}
}
);
}
);
},
// //三级联动
// selcetInit:function
(){
// var self
= this;
//
layui.use
(['form'], function
() {
// var form
= layui.form;
// $.ajax
({
// url: ctx + "/service/dictionary/getDicByCode?code
=district",
// success: function
(res
) {
// if
( res.code
==1
){
// self.streetList
= res.data.children[0].children;
// setTimeout
(function
(){
// form.render
("select"
);
// },150
);
// };
// }
// }
);
//
// form.on
('select
(street
)', function
(data
){
// self.communityList
= [];
// $
("#community"
).val
(""
);
// if
(data.value !
= ""
) {
// var index
= $
(data.elem
).find
("option:selected"
).index
()-1;
// self.communityList
= self.streetList[index].children;
// setTimeout
(function
(){
// form.render
("select"
);
// },150
);
// };
// }
);
// }
);
// },
//点击搜索列表
query
Btn: function
() {
var self
= this;
self.searchListFlag
= true;
$.ajax
({
url: ctx + '/service/baiduMap/get/suggestion',
type: 'post',
data: {
"keyword": self.printQuery,
"region": "北京市",
"pageSize":
20,
"pageNum": 1
},
success: function
(res
) {
if
(res.data.results
) {
self.searchLi
= res.data.results;
}
}
}
);
},
//确认选择li
chooseLi: function
(item
) {
var self
= this;
self.searchListFlag
= false;
var lng
= item.location.longitude,
lat
= item.location.latitude;
addPointFun
(lng, lat
);
$
(".longitudeLatitude"
).val
(lng + "," + lat
);
$
(".longitude"
).val
(lng
);
$
(".latitude"
).val
(lat
);
self.printQuery
= item.address;
$
(".detailAddress"
).val
(item.address
);
bm.centerAndZoom
(new BMap.Point
(lng, lat
), 14
);
},
// 页面初始化
pageInit
() {
var self
= this;
layui.use
(['form', 'upload', 'layer'], function
() {
var upload
= layui.upload;
self.uploadsVar
= upload.render
({
elem: '#choice',
accept: '
file',
acceptMime: 'application/vnd.ms
-excel, application/vnd.openxmlformats
-officedocument.spreadsheetml.sheet',
exts: 'xlsx|xls', //只允许
上传excel
文件,
auto: false,
bindAction: '#check
File'
}
);
}
)
},
//
上传弹框
uploads
() {
$
('#choiceWrapper'
).html
('<button type
="button"
class="
layui-btn layui-btn-normal" id
="choice">选择
文件</button>'
);
this.uploadsVar
= '';
$
('.
layui-upload
-choose'
).html
(''
);
$
('#check
FileWrapper'
).html
('<span id
="check
FileWrapper"><button type
="button"
class="
layui-btn" id
="check
File">校验</button></span>'
);
this.pageInit
()
this.$nextTick
(() => {
$
('#startUpload'
).css
('display', 'none'
)
}
)
let self
= this
layui.use
(['form', 'upload', 'layer'], function
() {
let form
= layui.form;
let layer
= layui.layer;
var upload
= layui.upload;
var checkurl
= ''
var myLayer
= layer.open
({
title: '
上传文件',
type: 1,
area: ["680px", "
250px"],
content: $
("#Upload
File"
),
success: function
(res
) {
// 校验接口
checkurl
= ctx + '/service/base/street/checkExcelUpload'
self.uploadsVar.reload
({
elem: '#choice',
accept: '
file',
acceptMime: 'application/vnd.ms
-excel, application/vnd.openxmlformats
-officedocument.spreadsheetml.sheet',
exts: 'xlsx|xls', //只允许
上传excel
文件,
url: checkurl,
auto: false,
bindAction: '#check
File',
choose:
(obj
) => {
$
('#startUpload'
).css
('display', 'none'
)
self.upload
File = new FormData
();
var
files
= obj.push
File();
var firstProp;
var count
= 0;
// 获取第一个属性
for
(var key in
files
) {
if
(files.hasOwnProperty
(key
)) {
firstProp
= key;
break;
}
}
// 统计
文件数
for
(var k in
files
) {
count++;
}
if
(count > 1
) {
delete
files[firstProp];
}
//预读本地
文件，如果是多
文件，则会遍历。
(不支持ie8/9
)
obj.preview
(function
(index,
file, result
) {
self.upload
File.append
('
file',
file);
}
);
},
done: function
(res, index
) {
if
(res.code
== 0
) {
layer.msg
(res.msg
);
$
('#startUpload'
).css
('display', 'inline
-block'
)
} else {
layer.alert
(res.msg
);
$
('#startUpload'
).css
('display', 'none'
)
}
}
}
);
}
, end:
() => {
$
('#startUpload'
).css
('display', 'none'
)
}
}
)
}
)
},
//
上传
fnUpload
File() {
var self
= this
layui.use
(['layer'], function
() {
var layer
= layui.layer;
//
上传接口
var url
= ''
url
= ctx + '/service/base/street/import'
let key
= self.upload
File.getAll
('
file'
)[0];
$.ajax
({
url: url,
method: 'post',
data: self.upload
File,
contentType: false,
processData: false,
dataType: "json",
async: false,
success:
(res
) => {
if
(res.code
== 0
) {
layer.msg
(res.msg
);
setTimeout
(() => {
layer.closeAll
();
self.table
();
},
2500
);
} else {
layer.alert
(res.msg
);
}
},
fail:
(res
) => {
layer.alert
(res.msg
);
}
}
)
}
)
},
//nav
-获取列表
getNav
(){
let self
= this
let url
= document.location.toString
()
let urlObj
= url.split
('?'
)
let paramObj
let paramList
= {}//url参数集合
if
(urlObj.length >0
){
paramObj
= urlObj[1].split
('&'
)
paramObj.forEach
((val,index
)=>{
let arrList
= val.split
('
='
)
Object.defineProperty
(paramList,arrList[0],{value:arrList[1]}
)
// paramList.arrList[0]
= arrList[1]
}
)
}
self.paramList
= paramList
// console.log
('paramList',urlObj,paramList
)
//获取菜单列表并渲染
$.ajax
({
url:ctx + "/service/authorityMenu/listByMenuId?menuId
="+paramList.pid,
type:"get",
success:function
(res
) {
console.log
('菜单请求返回值',res
)
if
(res.code
== 0
){
//修改数据内容 渲染nav选中项
res.data.forEach
((val,index
)=>{
if
(val.childMenus.length>0
){
val.childMenus.forEach
((value
)=>{
value.select
= false;
if
(value.id
== self.paramList.cid||value.id
== self.paramList.cPid
){
value.select
= true;
}
value.childMenus
}
)
}
}
)
self.navList
= res.data
// console.log
('self.navList',self.navList
)
// self.changeNavState
()
}
}
}
)
},
//nav
-页面跳转
toUrl
(items
){
console.log
(items
)
if
(items.url.indexOf
('?'
) !
= -1
){
window.location.href
= ctx + items.url+'&pid
='+this.paramList.pid+'&cid
='+items.id+'&cPid
='+items.pid
}else{
window.location.href
= ctx + items.url+'?pid
='+this.paramList.pid+'&cid
='+items.id+'&cPid
='+items.pid
}
},
//nav
-渲染nav选中项
changeNavState
(items
){
items.select
= !items.select
},
},
}
)
//时间戳转日期函数
function DateFormat
(sjc
) {
var date
= new Date
(sjc
);
var y
= date.getFullYear
();
var m
= date.getMonth
() + 1;
m
= m < 10 ? '0' + m : m;
var d
= date.getDate
();
d
= d < 10 ?
("0" + d
) : d;
var h
= date.getHours
();
h
= h < 10 ?
("0" + h
) : h;
var min
= date.getMinutes
();
min
= min < 10 ?
("0" + min
) : min;
var s
= date.getSeconds
();
s
= s < 10 ?
("0" + s
) : s;
var str
= y + "
-" + m + "
-" + d + " " + h + ":" + min + ":" + s;
return str;
};
这个是js代码
下面是ftl代码
<!DOCTYPE html>
<html lang
="en">
<#include "/common/taglibs.ftl">
<head>
<meta charset
="UTF
-8">
<meta name
="apple
-mobile
-web
-app
-capable" content
="yes">
<meta name
="apple
-mobile
-web
-app
-status
-bar
-style" content
="black">
<title>街镇管理</title>
<link rel
="stylesheet" href
="${ctx}/plugins/
layui/css/
layui.css">
<link rel
="stylesheet" href
="${ctx}/infoSys/css/style.css">
<script src
="${ctx}/plugins/jquery
-3.3.1.min.js"></script>
<script src
="${ctx}/plugins/vue/vue.js"></script>
<script src
="${ctx}/plugins/
layui/
layui.js"></script>
<script src
="${ctx}/plugins/common/custom_
layui.js"></script>
<script src
="${ctx}/plugins/nightMap/api.js"></script>
<script src
="${ctx}/plugins/nightMap/heatmap_min.js"></script>
<script src
="${ctx}/plugins/nightMap/mapv.js"></script>
<script src
="${ctx}/plugins/nightMap/haidian.js"></script>
<script src
="${ctx}/aiplatform/js/verifyList.js"></script>
<style>
.left
-nav
-ul .streetManage {
border
-left:
2px #
2080E7 solid;
}
.left
-nav
-ul .streetManage a {
color: #
2080E7;
background
-image: url
(${ctx}/othersSys/images/icon
-lajilou
2.svg
);
}
.
layui-table
-box th, .
layui-table
-box td {
text
-align: center;
}
.
layui-table
-cell {
height: auto;
line
-height: auto;
}
#addMap {
width: 100%;
}
</style>
</head>
<body
class="body">
<div
class="padding
-body" id
="app" v
-cloak>
<iframe src
="${ctx}/service/allNav" style
="position: fixed;left: 0;top: 0;width: 18rem;height: 100%;" allowfullscreen allow
="autoplay; fullscreen"></iframe>
<!
-- left
-->
<#
-- <#include "/infoSys/nav
2.ftl">
-->
<!
-- header
-->
<#include "/infoSys/header.ftl">
<!
-- main
-->
<section
class="main">
<div
class="header
-title white
-bg clearfix">
<h1>街镇管理</h1>
</div>
<div
class="main
-content white
-bg">
<form
class="
layui-form search
-form" onkeypress
="return event.keyCode !
= 13;">
<div
class="
layui-inline">
<label
class="
layui-form
-label first
-label">街镇名称：</label>
<div
class="
layui-input
-inline">
<input type
="text" id
="voicetValue" name
="name" v
-model
="name" placeholder
="请输入街镇名称"
autocomplete
="off"
class="
layui-input"/>
</div>
</div>
<#
--阻止回车触发提交
-->
<div
class="
layui-input
-inline" style
="width:
200px;display: none;">
<select lay
-verify
="" type
="hidden">
</select>
</div>
<div
class="
layui-inline margin
-left15" style
="float: right;margin
-right:
20px;">
<#
-- <button type
="button"
class="
layui-btn layui-btn-normal" id
="taste_button" lay
-submit
="record"
-->
<#
-- lay
-filter
="record">语音
-->
<#
-- </button>
-->
<#
-- <button type
="button"
class="
layui-btn layui-btn-normal" id
="start_button"
class="start
-button"
-->
<#
-- style
="display: none">停止
-->
<#
-- </button>
-->
<button type
="button"
class="
layui-btn layui-btn-normal" lay
-submit
="" lay
-filter
="formSearch">查询
</button>
<button type
="reset" lay
-submit lay
-filter
="formReset"
class="
layui-btn layui-btn-primary">重置</button>
</div>
</form>
<div>
<a
class="
layui-btn layui-btn-normal
layui-btn-sm" v
-if
="
btnJson.add" @click
="alertFun
('','add'
)">新建</a>
<#
-- <a
class="
layui-btn layui-btn-normal
layui-btn-sm" v
-if
="
btnJson.moreUpload" id
="moreUpload"
-->
<#
-- class="moreUpload">导入</a>
-->
<a
class="
layui-btn layui-btn-normal
layui-btn-sm" v
-if
="
btnJson.moreUpload" id
="moreUpload"
class="moreUpload" @click
="uploads">导入</a>
<#
-- <a
class="
layui-btn layui-btn-normal
layui-btn-sm" v
-if
="
btnJson.download"
-->
<#
-- href
="../../../excel/model_street_export.xlsx" download
="街镇模板">模板下载</a>
-->
<a
class="
layui-btn layui-btn-normal
layui-btn-sm" lay
-submit
="" v
-if
="
btnJson.export"
lay
-filter
="export">导出</a>
<#
-- <a
class="
layui-btn layui-btn-normal
layui-btn-sm" v
-if
="
btnJson.print" @click
="prints
()">打印</a>
-->
<#
-- <a
class="
layui-btn layui-btn-normal
layui-btn-sm">新建</a>
-->
<#
-- <a
class="
layui-btn layui-btn-normal
layui-btn-sm" id
="moreUpload"
class="moreUpload">导入</a>
-->
<#
-- <a
class="
layui-btn layui-btn-normal
layui-btn-sm" href
="../../../excel/model_street_export.xlsx" download
="街镇模板">模板下载</a>
-->
<#
-- <a
class="
layui-btn layui-btn-normal
layui-btn-sm" lay
-submit
="" lay
-filter
="export">导出</a>
-->
<#
-- <a
class="
layui-btn layui-btn-normal
layui-btn-sm" @click
="prints
()">打印</a>
-->
</div>
<div style
="clear:both;"></div>
<table id
="allTable" lay
-filter
="allTable" lay
-skin
="line"></table>
</div>
</section>
<!
-- 添加和编辑查看弹窗
-->
<form
class="
layui-form" lay
-filter
="information" id
="information" style
="display:none;padding:35px 30px">
<div
class="
layui-form
-item">
<div
class="
layui-inline">
<label
class="
layui-form
-label"><span
class="red">*</span> 街镇名称</label>
<div
class="
layui-input
-inline">
<input type
="text" name
="name" autocomplete
="off" lay
-verify
="required"
class="
layui-input"/>
</div>
</div>
</div>
<div
class="
layui-form
-item">
<div
class="
layui-inline">
<label
class="
layui-form
-label">街镇负责人</label>
<div
class="
layui-input
-inline">
<input type
="text" name
="personInCharge" autocomplete
="off"
class="
layui-input"/>
</div>
</div>
</div>
<div
class="
layui-form
-item">
<div
class="
layui-inline">
<label
class="
layui-form
-label">联系方式</label>
<div
class="
layui-input
-inline">
<input type
="text" name
="contact" autocomplete
="off" lay
-verify
="informationl"
class="
layui-input"/>
</div>
</div>
</div>
<div
class="
layui-form
-item">
<div
class="
layui-inline">
<label
class="
layui-form
-label">人口数量</label>
<div
class="
layui-input
-inline">
<input type
="text" name
="residentNum" lay
-verify
="population" autocomplete
="off"
class="
layui-input"/>
</div>
</div>
</div>
<div
class="
layui-form
-item">
<div
class="
layui-inline">
<label
class="
layui-form
-label">面积</label>
<div
class="
layui-input
-inline">
<input type
="text" name
="area" autocomplete
="off" lay
-verify
="area"
class="
layui-input"/>
</div>
</div>
</div>
<div
class="
layui-form
-item">
<#
-- <div
class="
layui-form
-item">
-->
<#
-- <div
class="
layui-inline">
-->
<#
-- <label
class="
layui-form
-label">
上传</label>
-->
<#
-- <div
class="
layui-input
-inline">
-->
<#
-- <button type
="button"
class="
layui-btn layui-btn-primary" id
="
uploadBtn">附件
上传</button>
-->
<#
-- <div
class="
layui-upload
-list">
-->
<#
-- <div id
="imageWrapper"><input type
="hidden" name
="image" id
="image"/></div>
-->
<#
-- <a id
="attachUrl" v
-show
="imgShow"></a>
-->
<#
-- </div>
-->
<#
-- </div>
-->
<#
-- </div>
-->
<#
-- </div>
-->
<div
class="
layui-form
-item">
<div
class="
layui-inline">
<label
class="
layui-form
-label"><span
class="red">*</span> 经纬度</label>
<div
class="
layui-input
-inline">
<input type
="text" name
="longitudeLatitude" lay
-verify
="required" placeholder
="请点击地图标注"
maxlength
="45" readonly
class="
layui-input longitudeLatitude"/>
<input type
="hidden" name
="longitude"
class="longitude"/>
<input type
="hidden" name
="latitude"
class="latitude"/>
</div>
</div>
</div>
<div
class="
layui-form
-item ">
<div
class="
layui-input
-block search
-wrapper">
<div
class="add
-map
-div" id
="addMap"></div>
<div
class="search
-block">
<div
class="
layui-input
-inline" style
="margin
-right:
2px">
<input type
="text" name
="searchAddress" id
="searchAddress" v
-model
="printQuery"
autocomplete
="off"
placeholder
="请输入搜索地址"
class="
layui-input" @keyup.enter
="query
Btn()"/>
<div
class="command
-search
-list" v
-if
="searchListFlag">
<ul
class="searchList">
<li v
-for
="item in searchLi" @click
="chooseLi
(item
)">{{item.name}}</li>
</ul>
</div>
</div>
<button type
="button"
class="
layui-btn layui-btn-sm search
-btn" @click
="query
Btn()"><i
class="
layui-icon
layui-icon
-search" style
="font
-size: 50px; color: #fff;"></i>
</button>
</div>
</div>
</div>
<div
class="
layui-form
-item">
<div
class="
layui-block">
<label
class="
layui-form
-label">详细地址</label>
<div
class="
layui-input
-block">
<input type
="text" name
="address" maxlength
="150" autocomplete
="off"
class="
layui-input detailAddress"/>
</div>
</div>
</div>
</div>
<div
class="
layui-form
-item">
<div
class="
layui-input
-block">
<button type
="button" v
-show
="type!
=='look'"
class="
layui-btn layui-btn-lg
layui-btn-normal"
lay
-submit
="" lay
-filter
="up">提交
</button>
<button type
="button"
class="
layui-btn layui-btn-lg
layui-btn-normal" onclick
="layer.closeAll
()">取消
</button>
</div>
</div>
</form>
<div id
="Upload
File"
class="Upload
FileWrapper"
style
="width: 100%;height: 100%;padding: 1rem;box
-sizing: border
-box;display: none">
<div
class="
layui-btn-container" id
="upload
-btn-warp">
<span id
="choiceWrapper"><button type
="button"
class="
layui-btn layui-btn-normal" id
="choice">选择
文件</button></span>
<span id
="check
FileWrapper"><button type
="button"
class="
layui-btn" id
="check
File">校验</button></span>
<button type
="button"
class="
layui-btn" id
="startUpload" @click
="fnUpload
File">开始
上传</button>
</div>
<div style
="margin: 1rem 0">
<div>操作步骤：</div>
<div>1.选择需要
上传的
文件</div>
<div>
2.选择完成后点击“校验”按钮</div>
<div>3.校验通过后点击“确认
上传”</div>
</div>
</div>
</div>
<script>
var menusButtonList
= '${Session.buttonList?default
(""
)}';
menusButtonList
= menusButtonList ? JSON.parse
(menusButtonList
) : []
$
(document
).on
("keypress", "form", function
(event
) {
return event.keyCode !
= 13;
}
)
</script>
<script src
="${ctx}/infoSys/js/public.js"></script>
<#
--<script src
="${ctx}/infoSys/js/street/list.js"></script>
-->
<script src
="${ctx}/infoSys/js/city/list.js"></script>
<script src
="${ctx}/infoSys/js/add
-map.js"></script>
<script src
="${ctx}/plugins/rtasr/hmac
-sha
256.js"></script>
<script src
="${ctx}/plugins/rtasr/HmacSHA1.js"></script>
<script src
="${ctx}/plugins/rtasr/md5.js"></script>
<script src
="${ctx}/plugins/rtasr/enc
-base64
-min.js"></script>
<script src
="${ctx}/plugins/rtasr/index.js"></script>
<script src
="${ctx}/infoSys/js/navPublic.js"></script>
</body>
</html>
数据接口请求异常：error
这个项目是前后端不分离的项目, 给你的这两个
文件是ftl
文件和js
文件
本文详细介绍了一种分红协议及票据附件的动态表格生成与上传处理机制，利用JavaScript与jQuery实现表格行的增删，以及文件上传功能。通过下拉菜单选择分红单位类型和投资单位，联动显示相应选项，同时支持分红年限、分红比例、投资金额的输入。
扫一扫
1429
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
