html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>服务资源管理</title>
<link rel="stylesheet" type="text/css" href="../lib/layui/css/layui.css" />
<link rel="stylesheet" type="text/css" href="../css/participation/serviceManage.css" />
<script type="text/javascript" src="../lib/lib-jquery/jquery.min.js"></script>
<script type="text/javascript" src="../lib/lib-jquery/jquery.cookie.js"></script>
<script type="text/javascript" src="../lib/layer/layer.js"></script>
<script type="text/javascript" src="../lib/layui/layui.js"></script>
<script type="text/javascript" src="../lib/lib-jquery/jquery.cookie.js"></script>
<script type="text/javascript" src="../lib/moment/moment.js"></script>
<script type="text/javascript" src="../lib/layui/xm-select.js"></script>
</head>
<body>
<!-- 服务资源管理123123 -->
<div class="warning-container">
<div id="indexWarningPage">
<div class="search-content">
<div class="search-content-top">
<label for="searchKey">
<input type="text" placeholder="请输入姓名" autocomplete="off" id="searchKey" class="search-input"
lay-affix="clear" />
</label>
<label for="searchStatus">
<select id="searchStatus" class="search-input">
<option value="">请选择资源类型</option>
</select>
</label>
<div style="cursor: pointer; color: #498fe5;display: inline-block;">
<i class="layui-icon layui-icon-refresh" id="example-anim-element"></i>
<span id="example-anim-usage">刷新表格</span>
</div>
<span style="margin-left: 100px;">共计 <span id="peopleNumber"
style="color: #498fe5;font-size: 26px;">99+</span><span
style="font-size: 22px;margin-left: 5px;">人</span></span>
<div class="layui-form-item" id="searchTopBtns">
<!-- <button type="button" class="layui-btn btnn" onclick="resetSearch()">重置</button> -->
<button
style="margin: 0px 10px;border-radius: 5px;height: 35px;line-height: 30px;font-size: 14px;padding: 0px 15px; background: #48AB6C;"
type="button" class="layui-btn layui-btn-sm" onclick="searchBtn()">搜索</button>
</div>
</div>
</div>
<!-- 表格 -->
<div class="progress-table" id="progress-bg">
<div class="layui-table-box">
<div class="layui-table-body layui-table-main">
<table class="layui-table" lay-skin="line" lay-filter="checkTable" id="checkTable">
<!-- 表格内容 -->
</table>
</div>
</div>
<div class="layui-inline" id="searchs">
<button type="button" class="layui-btn btnnn" onclick="downloadProjectData()"
style="border-radius: 4px;width: 100px;height: 30px;line-height: 30px;margin-left: 10px; background: #48AB6C;">下载数据</button>
</div>
</div>
</div>
<!-- 新增页面 -->
<div class="add-project-layer" id="addProjectLayer">
<form class="layui-form" id="addGoodsForm" lay-filter="form">
<div class="edit-content">
<div class="layui-form-item " id="nameWrite1" style="width:calc(100% - 55px)">
<label class="layui-form-label"><span class="star">*</span>姓名:</label>
<div class="layui-input-block">
<input type="text" id="name" name="name" autocomplete="off" placeholder="请输入姓名"
class="layui-input nameIput" />
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><span class="star">*</span>性别</label>
<div style="margin-left: 130px;">
<div class="layui-form" style="display: flex;">
<div class="radio-item">
<input type="radio" checked name="gender" value="0" title="男"
class="necessary-radio" />
</div>
<div class="radio-item">
<input type="radio" name="gender" value="1" title="女" class="necessary-radio" />
</div>
</div>
</div>
</div>
<!-- <div class="layui-form-item ">
<label class="layui-form-label">出生年月:<span class="star">*</span>:</label>
<div class="layui-input-block">
<input type="text" autocomplete="off" id="birthday" name="birthday" class="layui-input" />
</div>
</div> -->
<div class="layui-form-item " style="width:calc(100% - 55px)">
<label class="layui-form-label">出生年月:</label>
<div class="layui-input-block">
<input type="text" id="birthday" style="width: 230px;" name="birthday" autocomplete="off"
placeholder="请输入出生年月" class="layui-input nameIput" />
<i class="layui-icon layui-icon-date"
style="font-size: 20px;position: absolute;top: 0px;right: 180px;"></i>
</div>
</div>
<div class="layui-form-item " style="width:calc(100% - 55px)">
<label class="layui-form-label"><span class="star">*</span>手机号码:</label>
<div class="layui-input-block">
<input type="text" id="phone" name="phone" autocomplete="off" placeholder="请输入手机号码"
class="layui-input nameIput" />
</div>
</div>
<div class="layui-form-item " style="width:calc(100% - 55px)">
<label class="layui-form-label"><span class="star">*</span>身份证号:</label>
<div class="layui-input-block">
<input type="text" id="identityCard" name="identityCard" autocomplete="off"
placeholder="请输入身份证号" class="layui-input nameIput" />
</div>
</div>
<div class="layui-form-item " style="width:calc(100% - 55px)">
<label class="layui-form-label">家庭住址:</label>
<div class="layui-input-block">
<input type="text" id="address" name="address" autocomplete="off"
placeholder="xx路xx弄xx小区xx号xx楼xxx室" class="layui-input nameIput" />
</div>
</div>
<div class="layui-form-item " style="width:calc(100% - 55px)">
<label class="layui-form-label" for="searchStatus"><span class="star">*</span>政治面貌:</label>
<div class="layui-input-block">
<select id="politics" name="politics" class="search-input" style="width: 250px;"
lay-filter="politics">
<option value="">请选择政治面貌</option>
</select>
</div>
</div>
<div class="layui-form-item " style="width:calc(100% - 55px)">
<label class="layui-form-label">工作单位:</label>
<div class="layui-input-block">
<input type="text" id="unit" name="unit" autocomplete="off" placeholder="请输入工作单位"
class="layui-input nameIput" />
</div>
</div>
<div class="layui-form-item " style="width:calc(100% - 55px)">
<label class="layui-form-label" for="searchStatus"><span class="star">*</span>所属居(村)委:</label>
<div class="layui-input-block">
<select id="community" name="community" class="search-input" lay-filter="community">
<option value="">请选择居(村)委</option>
</select>
</div>
</div>
<div class="layui-form-item " style="width:calc(100% - 55px)">
<label class="layui-form-label" for="searchStatus">资源类型:</label>
<div class="layui-input-block">
<select id="typeName" name="typeName" class="search-input">
<option value="">请选择资源类型</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">是否有补助:</label>
<div style="margin-left: 130px;">
<div class="layui-form" style="display: flex;">
<div class="radio-item">
<input type="radio" checked name="hasSubsidy" value="true" title="是"
class="necessary-radio" />
</div>
<div class="radio-item">
<input type="radio" name="hasSubsidy" value="false" title="否"
class="necessary-radio" />
</div>
</div>
</div>
</div>
<div class="layui-form-item " style="width:calc(100% - 55px)">
<label class="layui-form-label">补助金额:</label>
<div class="layui-input-block">
<input type="number" id="subsidy" name="subsidy" autocomplete="off" placeholder="请输入补助金额"
class="layui-input nameIput" />
</div>
</div>
<div class="layui-form-item " style="width:calc(100% - 55px)">
<label class="layui-form-label">标签:</label>
<div class="layui-input-block">
<button class=" layui-btn layui-btn-primary layui-btn-xs layui-btn-radius"
id="btnOpenDialog">
<i class="layui-icon layui-icon-add-circle"></i>
<span>新建标签</span>
</button>
<!-- 生成标签的地方 -->
<span id="labelButton">
</span>
</div>
</div>
</div>
<div class=" authority-btns">
<button type="button" class="layui-btn layui-btn-primary" onclick="cancelProjectLayer()">取消</button>
<button type="button" onclick="saveProjectBtn()" class="layui-btn layui-btn-normal"
style="background: #48AB6C;">确认</button>
</div>
</form>
<!-- 标签弹窗 -->
<div id="dialogContent" style="display: none;">
<div id="typeShowList">
</div>
</div>
</div>
</div>
</body>
<script type="text/html" id="zizeng">
{{d.LAY_TABLE_INDEX+1}}
</script>
<script type="text/javascript" src="../js/config.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript" src="../js/participation/serviceManage.js"></script>
</html>css
/* 最外部大盒子 */
.warning-container {
padding: 0 10px;
background-color: #fff;
width: 96%;
height: 95vh;
margin-left: 1.5%;
border-radius: 5px 5px;
margin-top: 1.5%;
overflow: auto;
}
/* 动画旋转 */
.layui-anim-rotate {
animation: example-anim-rotate 1s linear infinite;
}
/* 隐藏单元格内的下拉框 */
.layui-table-grid-down {
display: none !important;
}
@keyframes example-anim-rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
#addProjectLayer .layui-form-select {
width: 230px !important;
}
/* 搜索 */
.search-content {
width: 100%;
height: 50px;
padding-top: 5px;
margin-bottom: 20px;
}
.search-content-top {
/* float: left; */
margin: 15px 0px 0px 0px;
}
/* 弹框 */
.edit-project-layer {
display: none;
}
.search-input {
width: 240px;
display: inline-block;
height: 35px;
border-radius: 5px;
border: 1px solid #ccc;
padding-left: 10px;
margin-right: 10px;
}
/* 新增编辑弹窗页面 */
.add-project-layer {
padding-top: 10px;
width: 100%;
height: 97%;
display: none;
}
.edit-project-layer .layui-input {
width: 200px;
}
/* 驳回页面 */
.back-project-layer {
width: 100%;
height: 97%;
display: none;
}
/* 新增编辑表单样式 */
.container {
padding: 0 10px;
background-color: #fff;
width: 96%;
height: 95vh;
margin-left: 1.5%;
border-radius: 5px 5px;
margin-top: 1.5%;
overflow: auto;
}
.layui-table-page {
border-bottom: 1px solid #e6e5e5;
}
/* 分页旁边按钮*/
#progress-bg {
position: relative;
}
#searchs {
position: absolute;
bottom: 7px;
right: 15px;
}
/* 新增标签列表样式 */
.optionType {
height: 34px !important;
line-height: 34px;
cursor: pointer;
}
.typeCheck {
margin: 0px 10px;
width: 16px;
height: 16px;
position: relative;
top: 3.5px;
}
.optionType:hover {
background-color: #eee;
}
/* 表格换行 */
.layui-table-cell {
height: auto;
white-space: normal;
word-wrap: break-word;
text-align: center !important;
}
#dialogContent .layui-layer-content {
position: relative;
}
.typeStyle {
padding: 1px !important;
height: 25px !important;
width: 70px !important;
}
#dialogContent {
position: absolute;
width: 200px;
background-color: #ffffff;
top: 425px;
left: 155px;
border: 1px solid #e2e2e2;
height: 202px;
overflow: hidden;
overflow-y: scroll;
box-shadow: 0 0 25px 10px #E7E7E7;
}
#addProjectLayer .layui-layer-content {
position: relative;
}
/* .layui-form-select-layer {
background-color: #f0f0f0 !important;
height: 50px !important;
border-radius: 10px !important;
border: 1px solid #ccc !important;
} */
/* 自定义选项样式 */
.layui-form-select-layer .custom-option {
background-color: #f0f0f0 !important;
color: #333333 !important;
font-size: 14px !important;
border: 1px solid #cccccc !important;
}
/* 鼠标悬停时的样式 */
.layui-form-select-layer .custom-option:hover {
background-color: #cccccc !important;
color: #ffffff !important;
}
.progress-materials,
.progress-materials-file {
width: 100%;
height: calc(100% - 50px);
overflow: auto;
}
/* ----------------------------------- */
::-webkit-scrollbar {
width: 5px;
height: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #CBB486;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 10px;
background: #EDEDED;
}
.overview-main {
padding: 0 10px;
background-color: #fff;
width: 96%;
height: 95vh;
margin-left: 1.5%;
border-radius: 5px 5px;
margin-top: 1.5%;
overflow: auto;
}
.overview-top {
color: #7F838A;
font-weight: bold;
}
.overview-box {
width: 100%;
height: 97%;
padding-top: 10px;
}
.overview-box2 {
width: 80%;
height: 97%;
margin-left: 10%;
}
.box-top {
width: 100%;
height: 48%;
display: flex;
justify-content: space-between;
align-items: center;
}
.box-bottom {
width: 100%;
height: 48%;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 2%;
}
.layui-table,
.layui-table-view {
margin: 0 !important;
}
.card {
width: 100%;
height: 100%;
}
.top-title {
width: 80%;
height: 5%;
border-bottom: 2px #CBB486 solid;
margin-left: 10%;
text-align: center;
line-height: 40px;
}
.layui-input {
background: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
height: 35px;
padding-left: 4px;
font-size: 14px;
}
.layui-form-label {
font-weight: bold;
margin-left: 30px;
text-align: left !important;
width: 90px !important;
}
#searchTopBtns {
display: inline;
float: right;
}
.operation-item {
height: 30px;
line-height: 40px;
cursor: pointer;
}
.authority-btns {
width: 100%;
background-color: white;
position: sticky;
bottom: 0px;
padding: 15px 0px;
text-align: center;
}
.edit-content>.title {
font-size: 16px;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #DCDFE6;
margin-bottom: 15px;
}
.edit-content .layui-form-item {
width: 45%;
display: inline-block;
margin-left: 25px;
vertical-align: bottom;
}
.edit-content .layui-form-item>label {
color: #6E798C;
text-align: left !important;
/* width: 135px !important; */
padding: 9px 0px;
}
.edit-content .layui-input-block {
margin-left: 130px !important;
line-height: 38px !important;
width: 400px;
}
.edit-content .layui-form-item .layui-input {
border-radius: 5px;
}
.star {
color: red;
}
.no-change {
border: 0px;
pointer-events: none;
background-color: #EDEDED;
}
.no-change-echo {
border-bottom: 1px solid #474647;
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-radius: 0px;
pointer-events: none;
}
.layui-laypage .layui-laypage-curr .layui-laypage-em {
background-color: #48AB6C !important;
}
.layui-table-grid-down {
display: none !important;
}js
// 服务资源管理
$(function () {
verifyToken();
authorityEvent();
initCheckTable()
getTypeList()
// 获取社区 居委标签
getCommunityAndNeighborhood()
// 获取政治面貌
getPoliticsList()
})
// 权限
var authorityContent = "";
function authorityEvent() {
authorityContent = getUserRole();
if (authorityContent.indexOf(GRADEB) != -1) {
$("#searchTopBtns").append(
'<button style="margin: 0px 10px;border-radius: 5px;height: 35px;line-height: 30px;font-size: 14px;padding: 0px 15px;background: #48AB6C;"' +
'type="button" class="layui-btn layui-btn-normal layui-btn-sm" onclick="addBtn()" >添加资源</button>');
}
}
// 获取后台返回的ID与对应文字的映射关系，保存在一个对象中
var projectTypeMap = {};
// // 获取 居委标签
function getCommunityAndNeighborhood() {
$.ajax({
type: "get",
url: getCommunityList,
async: false,
headers: {
'dm-authorize-token': $.cookie("token"),
},
data: {
},
success: function (res) {
if (res.code == 200) {
// console.log(res);
for (var i = 0; i < res.data.length; i++) {
$("#community").append('<option value="' + res.data[i].id + '" label="' + res.data[i].name + '">' + res.data[i].name + '</option>');
let id = res.data[i].id;
let text = res.data[i].name;
projectTypeMap[id] = text;
}
} else {
layer.msg(res.msg);
}
},
error: function (res) {
layer.msg(res.msg);
}
});
}
// 获取政治面貌列表
function getPoliticsList() {
$.ajax({
type: "get",
url: getPolitics,
async: false,
headers: {
'dm-authorize-token': $.cookie("token"),
},
data: {
},
success: function (res) {
if (res.code == 200) {
// console.log(res);
for (var i = 0; i < res.data.length; i++) {
$("#politics").append('<option value="' + res.data[i].id + '" label="' + res.data[i].name + '">' + res.data[i].name + '</option>');
}
} else {
layer.msg(res.msg);
}
},
error: function (res) {
layer.msg(res.msg);
}
});
}
// 获取人员标签
var selectedData = []; //默认空数据
function getShowList() {
$.ajax({
type: "get",
url: getPeopleTagList,
async: false,
headers: {
'dm-authorize-token': $.cookie("token"),
},
data: {
pageSize: 1000000000,
pageNum: 1
},
success: function (res) {
if (res.code == 200) {
// console.log('人员标签', res);
$('#typeShowList').empty();
// 遍历数据并展示
for (var i = 0; i < res.data.data.length; i++) {
var item = res.data.data[i];
var checkboxId = 'checkbox' + i;
// 创建多选框和名称展示
var checkbox = $('<input type="checkbox" class="typeCheck" id="' + checkboxId + '">');
var nameSpan = $('<span>' + item.name + '</span>');
// 监听多选框的点击事件
// checkbox.click(function () {
// // 在这里可以根据需要处理多选框的状态变化
// selectedData = [];
// // 遍历所有选中的复选框
// $('.typeCheck:checked').each(function () {
// var checkboxId = $(this).attr('id');
// var dataIndex = parseInt(checkboxId.replace('checkbox', ''));
// var selectedItem = res.data.data[dataIndex];
// $('#labelButton').empty();
// // 将选中的数据项添加到选中数据数组中
// selectedData.push(selectedItem);
// });
// // 输出选中的数据
// if (selectedData != [] && selectedData) {
// for (var i = 0; i < selectedData.length; i++) {
// $("#labelButton").append('<button type="button" style="background-color:' + selectedData[i].color + '" class="layui-btn layui-btn-xs layui-btn-radius">' + selectedData[i].name + '</button>');
// }
// }
// // console.log(selectedData);
// });
checkbox.click(function () {
// 在这里可以根据需要处理多选框的状态变化
selectedData = [];
// 遍历所有选中的复选框
$('.typeCheck:checked').each(function () {
var checkboxId = $(this).attr('id');
var dataIndex = parseInt(checkboxId.replace('checkbox', ''));
var selectedItem = res.data.data[dataIndex];
$('#labelButton').empty();
// 将选中的数据项添加到选中数据数组中
selectedData.push(selectedItem);
});
// 输出选中的数据
if (selectedData.length > 0) {
for (var i = 0; i < selectedData.length; i++) {
$("#labelButton").append('<button type="button" style="background-color:' + selectedData[i].color + '" class="layui-btn layui-btn-xs layui-btn-radius">' + selectedData[i].name + '</button>');
}
}
// console.log(selectedData);
if (!$(this).prop('checked')) {
// 取消勾选时移除对应的数据项
var checkboxId = $(this).attr('id');
var dataIndex = parseInt(checkboxId.replace('checkbox', ''));
var deselectedItem = res.data.data[dataIndex];
var deselectedIndex = selectedData.findIndex(function (selectedItem) {
return selectedItem.id === deselectedItem.id;
});
if (deselectedIndex !== -1) {
selectedData.splice(deselectedIndex, 1);
}
$('#labelButton').empty();
for (var i = 0; i < selectedData.length; i++) {
$("#labelButton").append('<button type="button" style="background-color:' + selectedData[i].color + '" class="layui-btn layui-btn-xs layui-btn-radius">' + selectedData[i].name + '</button>');
}
}
});
// 创建数据项容器，并将多选框和名称展示添加进去
var itemContainer = $('<div class="optionType"></div>');
itemContainer.append(checkbox, nameSpan);
// 将数据项容器添加到数据容器中
$('#typeShowList').append(itemContainer);
// 判断当前项是否为回显数据，并设置选中状态
if (selectedData.find(function (selectedItem) {
return selectedItem.id === item.id;
})) {
checkbox.prop('checked', true);
}
}
} else {
layer.msg(res.msg);
}
},
error: function (res) {
layer.msg(res.msg);
}
});
}
// 获取服务资源类型列表
function getTypeList() {
$.ajax({
type: "get",
url: getserviceResourcesTypeList,
async: false,
headers: {
'dm-authorize-token': $.cookie("token"),
},
data: {
// id: data.id,
},
success: function (res) {
if (res.code == 200) {
for (var i = 0; i < res.data.length; i++) {
$("#searchStatus").append('<option value="' + res.data[i].id + '" label="' + res.data[i].name + '">' + res.data[i].name + '</option>');
$("#typeName").append('<option value="' + res.data[i].id + '" label="' + res.data[i].name + '">' + res.data[i].name + '</option>');
}
} else {
layer.msg(res.msg);
}
},
error: function (res) {
layer.msg(res.msg);
}
});
}
function initCheckTable() {
layui.use(['table', 'form'], function () {
var table = layui.table;
form = layui.form;
var token = $.cookie("token");
var name = $("#searchKey").val();
var status = $("#searchStatus").val();
var colsList = [
{ field: 'zizeng', width: 58, title: '序号', templet: "#zizeng", },
{ field: 'name', title: '姓名' },
{
field: 'gender', width: 58, title: '姓别',
templet: function (d) {
return d.gender == '0' ? d.gender = '男' : d.gender = '女';
}
},
{ field: 'phone', title: '电话' },
{ field: 'identityCard', title: '身份号' },
{ field: 'address', title: '家庭住址' },
// { field: 'communityName', title: '所属社区' },
{
field: 'community', title: '所属居委', templet: function (d) {
var typeId = d.community;
return projectTypeMap[typeId] || ''; // 如果找不到对应的文字内容，返回空字符串
}
},
{ field: 'typeName', title: '服务资源类型' },
{
field: 'tags', title: '标签', templet: function (d) {
var html = '';
for (var i = 0; i < d.tags.length; i++) {
html += '<button type="button" style="background-color:' + d.tags[i].color + '" class="layui-btn layui-btn-xs layui-btn-radius tableLabel">' + d.tags[i].name + '</button>'
}
return html
}
}];
if (authorityContent.indexOf(GRADEB) != -1) {
colsList.push({
field: 'wealth', title: '操作', align: 'center', fixed: 'right',
templet: function (item) {
return '<span style="margin:0px 5px; color:#498fe5;cursor: pointer;" lay-event="updata" >编辑</span>' +
'<a style="margin:0px 5px; color:#498fe5;cursor: pointer;" lay-event="delete">删除</a>';
}
})
}
table.render({
url: serviceResources,
headers: {
"dm-authorize-token": token,
},
where: {
name: name,
type: status,
},
elem: '#checkTable',
page: true,
cols: [colsList],
height: 'full-150',
limit: 10,
even: true,
page: true,
response: {
statusCode: 200
},
request: {
pageName: "pageNum",
limitName: "pageSize"
},
parseData: function (res) {
// console.log(res);
$('#peopleNumber').html(res.data.count)
return {
"code": res.code,
"msg": res.msg,
"count": res.data.count,
"data": res.data.data,
};
},
done: function (res, curr, count) {
},
});
// 监听按钮点击事件
let ONOFF = true;
$('#btnOpenDialog').click(function () {
event.preventDefault(); // 阻止默认行为
if (ONOFF) {
$('#dialogContent').show()
ONOFF = false;
} else {
$('#dialogContent').hide()
ONOFF = true;
}
getShowList()
});
// 绑定点击事件
table.on('tool(checkTable)', function (obj) {
var data = obj.data;//获得当前行数据
var layEvent = obj.event; 获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
if (obj.event === 'updata') {
$.ajax({
type: "get",
url: serviceDetail + '/' + data.id,
async: false,
headers: {
'dm-authorize-token': $.cookie("token"),
},
data: {
id: data.id,
},
success: function (e) {
if (e.code == 200) {
// console.log('编辑数据', e);
// 赋予编辑id
editProjectId = e.data.id
addBtn(true, e.data)
} else {
layer.msg(e.msg);
}
},
error: function (e) {
layer.msg(e.msg);
}
});
} else if (obj.event === 'delete') {
layer.confirm('您确认删除数据吗?删除后无法恢复',
{ icon: 3, title: '删除信息提示' },
function (index) {
layer.close(index);
// 删除执行的操作
$.ajax({
type: "post",
url: deleteServiceResources + '/' + data.id,
async: false,
headers: {
'dm-authorize-token': $.cookie("token"),
},
data: {
id: data.id,
},
success: function (e) {
if (e.code == 200) {
layer.msg("操作成功");
initCheckTable();
} else {
layer.msg(e.msg);
}
},
error: function (e) {
layer.msg(e.msg);
}
});
});
}
});
// 监听下拉框事件
// 监听 select 事件
// form.on('select(community)', function (data) {
// var fatherID = data.value; // 获取选中的值
// var text = data.elem[data.elem.selectedIndex].text; // 获取选中的文本
// console.log(fatherID, text);
// if (fatherID != '' && fatherID) {
// $.ajax({
// type: "get",
// url: getNeighborhood,
// async: false,
// headers: {
// 'dm-authorize-token': $.cookie("token"),
// },
// data: {
// id: fatherID
// },
// success: function (res) {
// // 获取后面子项下拉框的选择器
// var $villageCommittee = $('#villageCommittee');
// // 清空后面子项下拉框的选项
// $villageCommittee.empty();
// if (res.code == 200) {
// for (var i = 0; i < res.data.length; i++) {
// $("#villageCommittee").append('<option value="' + res.data[i].id + '" label="' + res.data[i].name + '">' + res.data[i].name + '</option>');
// }
// form.render('select');
// } else {
// layer.msg(res.msg);
// }
// },
// error: function (res) {
// layer.msg(res.msg);
// }
// });
// }
// });
});
}
// 新增编辑
function addBtn(type, data) {
layer.closeAll("tips");
// 标题
var title = "新增资源";
editProjectId = ''
if (type) {
title = "编辑资源";
editProjectId = data.id
}
layer.open({
type: 1,
area: ["680px", "640px"],
title: title,
content: $("#addProjectLayer"),
resize: false,
cancel: function () {
cancelProjectLayer()
},
success: function (layero, index_0) {
if (type) {
$("#name").addClass("no-change");
$("input[name='gender'][value='" + data.gender + "']").prop("checked", "checked");
$("input[name='hasSubsidy'][value='" + data.hasSubsidy + "']").prop("checked", "checked");
// 数据回显
form.val("form", {
"name": data.name,
"phone": data.phone,
"identityCard": data.identityCard,
"address": data.address,
// 户籍地址
// "huJiAddress": data.domicileAddress,
"community": data.community,
// "villageCommittee": data.villageCommittee,
"typeName": data.type,
"subsidy": data.subsidy,
"birthday": data.birthday,
"politics": data.politics,
"unit": data.unit,
})
// 输出选中的数据
if (data.tags != [] && data.tags) {
selectedData = data.tags
for (var i = 0; i < data.tags.length; i++) {
$("#labelButton").append('<div style="background-color:' + data.tags[i].color + '" class="layui-btn layui-btn-xs layui-btn-radius typeStyle">' + data.tags[i].name + '</div>');
}
}
} else {
$('#labelButton').empty();
$("#name").removeClass("no-change");
$("input[name='gender'][value='0']").prop("checked", "checked");
$("input[name='hasSubsidy'][value='true']").prop("checked", "checked");
initTimeEvent()
}
},
});
}
// 搜索
function searchBtn() {
initCheckTable()
}
// 刷新表格动画
$('#example-anim-usage').on('click', function () { // 获取当前图标元素
var icon = $('#example-anim-element'); // 添加旋转类
icon.addClass('layui-anim layui-anim-rotate layui-anim-loop'); // 模拟请求延迟
cancelProjectLayer()
layer.msg('刷新成功');
setTimeout(function () { // 移除旋转类
icon.removeClass('layui-anim layui-anim-rotate layui-anim-loop');
}, 1000);
});
// 上传
layui.use(function () {
var upload = layui.upload;
var $ = layui.$;
// 渲染
upload.render({
elem: '#ID-upload-demo-drag',
url: 'https://httpbin.org/post', // 此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
done: function (res) {
layer.msg('上传成功');
$('#ID-upload-demo-preview').removeClass('layui-hide')
.find('img').attr('src', res.files.file);
}
});
});
// 日期
function initTimeEvent() {
layui.use(['laydate'], function () {
var laydate = layui.laydate;
// var nowTime = new moment().format("yyyy-MM-DD");
laydate.render({
elem: '#birthday',
trigger: 'click',
value: '',
format: 'yyyy-MM-dd', //设置日期格式
// min: 'string', //设置最小值
done: function (value, date) {
}
});
});
}
// 取消
function cancelProjectLayer() {
$("input[name='gender'][value='0']").prop("checked", "checked");
$("input[name='hasSubsidy'][value='true']").prop("checked", "checked");
// 清空表单 （“addGoodsForm”是表单的id）
$("#addGoodsForm")[0].reset();
layui.form.render();
// 清空编辑id
editProjectId = ''
// 关闭标签弹窗
$('#dialogContent').hide()
// 清空标题数组
$('#labelButton').empty();
selectedData = []
layer.closeAll()
$("#searchKey").val('');
$("#searchStatus").val('');
initCheckTable()
}
// 确认退回
function quRenProjectBtn() {
var backProjectContent = $("#backProjectContent").val()
if (backProjectContent == "" || backProjectContent == null) {
return layer.msg("退回理由不能为空");
}
cancelProjectLayer()
}
// 保存
function saveProjectBtn() {
var name = $("#name").val();
var gender = $('input[name="gender"]:checked').val()//获取选中的值;
var phone = $("#phone").val();
var identityCard = $("#identityCard").val();
var address = $("#address").val();
var community = $("#community").val();
var typeName = $("#typeName").val();
var hasSubsidy = $('input[name="hasSubsidy"]:checked').val();
var subsidy = $("#subsidy").val();
var birthday = $("#birthday").val();
var politics = $("#politics").val();
var unit = $("#unit").val();
if (name == "" || name == null) {
return layer.msg("姓名不能为空");
}
if (gender == "" || gender == null) {
return layer.msg("性别不能为空");
}
if (community == "" || community == null) {
return layer.msg("所属居(村)委不能为空");
}
if (phone == "" || phone == null) {
return layer.msg("手机号不能为空");
}
if (identityCard == "" || identityCard == null) {
return layer.msg("身份证号不能为空");
}
if (politics == "" || politics == null) {
return layer.msg("政治面貌不能为空");
}
var url = addServiceResources;
var msg = ('添加成功');
var serviceResource = {
name: name,
gender: gender,
phone: phone,
identityCard: identityCard,
address: address,
birthday: birthday,
politics: politics,
unit: unit,
community: community,
type: typeName,
hasSubsidy: hasSubsidy,
subsidy: subsidy,
tags: selectedData,
};
if (editProjectId != "" && editProjectId != null) {
url = editServiceResources;
msg = ('修改成功');
serviceResource = {
name: name,
gender: gender,
phone: phone,
identityCard: identityCard,
address: address,
community: community,
birthday: birthday,
politics: politics,
unit: unit,
type: typeName,
hasSubsidy: hasSubsidy,
subsidy: subsidy,
tags: selectedData,
id: editProjectId
};
}
// console.log(serviceResource);
$.ajax({
type: "post",
url: url,
async: false,
headers: {
'Content-Type': 'application/json',
'dm-authorize-token': $.cookie("token"),
},
data: JSON.stringify(serviceResource),
success: function (e) {
if (e.code == 200) {
cancelProjectLayer();
setTimeout(function () {
layer.msg(msg);
}, 300)
} else {
layer.msg(e.msg);
}
},
error: function (e) {
layer.msg(e.msg);
}
});
}
//导出数据
function downloadProjectData(data) {
var name = $("#searchKey").val();
var type = $("#searchStatus").val();
var requestOptions = {
method: 'get',
headers: {
'dm-authorize-token': $.cookie("token"),
},
};
layer.confirm('您确定导出现在表中的数据吗?',
{ icon: 3, title: '导出提示' },
function (index) {
layer.close(index);
fetch(
exportServiceResources + "?name=" + name + "&type=" + type,
requestOptions
)
.then((response) => {
return response.blob();
})
.then((res) => {
const link = document.createElement('a');
let blob = new Blob([res], {
type:
".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel'",
});
link.href = URL.createObjectURL(blob);
link.download = `服务资源数据.xlsx`;
link.click();
})
.catch((error) => console.log('error', error))
.finally(() => {
this.submitLoading = true;
});
})
}
