Jquery 复选框点击生成标签源代码

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><spanstyle="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> --><buttonstyle="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;
}

// 服务资源管理
$(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);// 赋予编辑ideditProjectId = e.data.idaddBtn(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.tagsfor (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();// 清空编辑ideditProjectId = ''// 关闭标签弹窗$('#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;});})
}