official_website/app/admin/view/formmodel/index.html

463 lines
12 KiB
HTML

{extend name="foxcms_content" /}
{block name="css"}
{/block}
{block name="body"}
<input name="bcid" value="{$bcid}" type="hidden" />
<input name="columnId" value="{$columnId}" type="hidden" />
<input name="bind_form" value="{$bind_form}" type="hidden" />
<div class="foxcms-content-inner">
<!-- page content -->
{if $bind_form == 0}
<div class="company-news-content">
<div style="text-align: center;">
<div style="font-size: 18px;">请先绑定应用表单</div>
<div class="section-main-item">
<div class="foxui-input-group" style="justify-content: center;">
<div class="input-label">
<label>应用表单:</label>
</div>
<div class="input-box" style="display: flex;">
<div class="foxui-select">
<div class="foxui-select-handle foxui-select-icon">
<input name="apply_form" class="foxui-select-input foxui-size-small" readonly="readonly" placeholder="请选择应用表单">
<i class="foxui-icon-close-circle" style="display: none;"></i>
</div>
<div class="foxui-select-menu" x-placement="bottom-left" style="top: 6px; left: 0px; display: none;">
<ul class="foxui-select-slide">
{foreach $formList as $key=>$vo }
<li class="foxui-select-item" data-id="{$vo.id}">{$vo.name}</li>
{/foreach}
</ul>
</div>
</div>
<button class="foxui-text-primary foxui-size-small" style="margin-left: 5px;">
<a href="{$formUrl}"><i class="foxui-icon-jiahao-o"></i>添加</a>
</button>
</div>
</div>
</div>
<div class="section-main-item">
<button class="is-long foxui-size-small foxui-solid-primary" id="save">保存</button>
</div>
</div>
</div>
{else/}
<div>
<input name="formListId" value="{$formListId}" type="hidden" />
<input id="tableItemStr" value="{$tableItemStr}" type="hidden" />
</div>
<div class="diy-form-content">
<div class="content-top-operation">
<div class="left">
</div>
<div class="right display-flex">
<div class="foxui-input-group item-input margin-right-20">
<div class="foxui-input-prepend">
<input class="foxui-size-small" placeholder="请输入关键字" required value="" name="keyword"/>
</div>
</div>
<button class="foxui-solid-primary foxui-size-small search-btn">搜索</button>
</div>
</div>
<div class="section section-panel margin-top-10">
<div class="foxui-table foxui-table-border-bottom foxui-table-hover foxui-checkbox-group">
<ul class="foxui-table-thead foxui-checkbox-head">
<li class="foxui-table-tr">
<div class="foxui-table-th" style="flex: initial; width: 40px">
<div class="foxui-checkbox foxui-checkbox-all">
<span class="foxui-checkbox-input">
<i class="foxui-checkbox-icon"></i>
<input type="checkbox" value="" />
</span>
</div>
</div>
<div class="foxui-table-th">ID</div>
{foreach $tableHeads as $key=>$vo }
<div class="foxui-table-th">{$vo.title}</div>
{/foreach}
<div class="foxui-table-th">操作</div>
</li>
</ul>
<ul class="foxui-table-tbody foxui-checkbox-list" id="loadingContainer">
<!--表格内容-->
</ul>
<div class="table-footer foxui-checkbox-head">
<div class="left display-flex foxui-align-items-center">
<div class="foxui-checkbox foxui-checkbox-all margin-right-24">
<span class="foxui-checkbox-input">
<i class="foxui-checkbox-icon"></i>
<input type="checkbox" value="" />
</span>
</div>
<div class="display-flex">
<button class="foxui-plain-info foxui-size-mini delete-btn">
<i class="foxui-icon-shanchu-o"></i>
<span>删除</span>
</button>
</div>
</div>
<div class="right total">共N条记录</div>
</div>
<div id="pagination"></div>
</div>
</div>
</div>
{/if}
</div>
{include file="footed-copy"/}
{/block}
{block name="js"}
<script>
$("#save").click(function () {
//应用表单
let form_list_id = $('input[name="apply_form"]').attr("data-id");
if(form_list_id == undefined || form_list_id == ""){
foxui.message({
type:'danger',
text:'请绑定应用表单!'
})
return;
}
let columnId = $('input[name="columnId"]').val();
let data = {form_list_id, columnId};
foxui.dialog({
title: '保存',
content: '您确定要保存吗',
cancelText: '取消',
confirmText: '保存',
confirm: function (callback) {
$.ajax({
type: "post",
url: "{:url('save')}",
dataType: "json",
data: data,
success: function (res) {
if (res.code == 1) {
foxui.message({
type:'success',
text:res.msg
})
window.location.reload();
} else {
foxui.message({
type:'warning',
text:res.msg
})
}
}, error: function (res) {
foxui.message({
type:'warning',
text:res.msg
})
}
});
callback();
},
cancel: function () {
foxui.message({
type:'warning',
text:'取消操作'
})
},
});
});
</script>
<script>
let formListId = $("input[name='formListId']").val();
/**
* 初始化数据
*/
function init(param){
let keyword = $('input[name="keyword"]').val();
let columnId = $('input[name="columnId"]').val();
let searchData = {
"keyword": keyword,
"formListId": formListId,
"columnId":columnId,
pageSize: 10,
};
if (param) searchData={...searchData, ...param};
$.ajax({
type: "post",
url: "{:url('index')}",
dataType: "json",
data: searchData,
async:false,
success: function (res) {
if (res.code == 1 && res.data) {
let data = res.data;
let paginationData = {
pageSize: data.per_page,
total: data.total,
currentPage: data.current_page
};
initTable(paginationData, data.data);
}
$('#loadingContainer').removeClass('loading-container');
}, error: function (res) {
$('#loadingContainer').removeClass('loading-container');
}
});
}
/**
* @description: 初始化表格
* @param {*} pageSize
* @param {*} total
* @param {*} currentPage
* @param {*} dataList
* @return {*}
* @Date: 2022-01-12 10:55:11
*/
function initTable({ pageSize, total, currentPage }, dataList) {
if (dataList == undefined){
dataList = [];
}
if(total == undefined){
total = 0;
}
// 追加表格 html
_appendToTable(dataList);
// 分页
foxui.pagination(
{
el: '#pagination',
currentPage: currentPage,
total: total,
onchange: function ({ currentPage, pageSize, total }, callback) {
callback({ total, pageSize, currentPage });
$('#loadingContainer').addClass('loading-container');
init({pageSize, currentPage});
},
},
{
type: 'plain',
isShowJump: true,
isShowTotal: true,
isShowSize: true,
pageSize: pageSize
}
);
//总数
$(".right.total").empty().html("共" + total + "条记录");
}
/**
* @description: 追加表格 html
* @param {*} dataList
* @return {*}
* @Date: 2022-01-12 00:18:40
*/
function _appendToTable(dataList) {
const html = _trsHtml(dataList);
$('.foxui-table-tbody').empty().append(html);
}
/**
* @description: 表格 html
* @param {*} dataList
* @return {*}
* @Date: 2022-01-12 00:18:52
*/
function _trsHtml(dataList) {
let htmlArr = [];
let tableItemStr = $("#tableItemStr").val();
let tableItem = [];//表项
if(tableItemStr.length > 0){
tableItem = tableItemStr.split(",");
}
dataList.forEach(item => {
let fieldHtml = [];//拼装字段值
$.each (tableItem, function(k,v){
if(v != "id"){
fieldHtml.push(`<div class="foxui-table-td"><span class="foxui-ellipsis-2">${item[v]}</span></div>`);
}
})
htmlArr.push(`
<li class="foxui-table-tr">
<div class="foxui-table-td" style="flex: initial; width: 40px">
<div class="foxui-checkbox">
<span class="foxui-checkbox-input">
<i class="foxui-checkbox-icon"></i>
<input type="checkbox" value="" />
</span>
</div>
</div>
<div class="foxui-table-td">${item.id}</div>
${fieldHtml.join("")}
<div class="foxui-table-td">
<button class="foxui-text-primary foxui-size-medium delete-btn" id="${item.id}" onclick="deleteItem(event)">删除</button>
<button class="foxui-text-primary foxui-size-medium delete-btn" id="${item.id}" onclick="detailItem(event)">详情</button>
</div>
</li>
`);
});
return htmlArr.join('');
}
// let bind_form = "{$bind_form}";
let bind_form = $('input[name="bind_form"]').val();
if(bind_form == 1){
init();
}
//搜索
$(".search-btn").on('click', function() {
init();
});
//详情
function detailItem(event){
let obj = $(event.target);
let isBtn = $(obj).is('button');//判断是否为button标签
if(!isBtn){
obj = $(obj).parent('button');
}
let id = $(obj).attr("id");
window.location.href="{:url('form/FormList/detail')}" + '?id=' + id + '&type=1' + '&formListId='+ formListId;
}
//单向删除
function deleteItem(event) {
let obj = $(event.target);
let isBtn = $(obj).is('button');//判断是否为button标签
if(!isBtn){
obj = $(obj).parent('button');
}
let id = $(obj).attr("id");
foxui.dialog({
title: '删除',
content: '您确定要删除吗?',
cancelText: '取消',
confirmText: '删除',
buttonType: 'danger',
confirm: function(callback) {
foxui.closeLoading();
$.ajax({
type: "post",
url: "{:url('form/FormList/lookDeletes')}",
dataType: "json",
data:{"idList":JSON.stringify([id]), "formListId": formListId},
success: function(res) {
foxui.closeLoading();
if (res.code == 1) {
foxui.message({
text: res.msg,
type: 'success',
});
init();
} else {
foxui.message({
text: res.msg,
type: 'error',
});
}
},
error: function(res) {
foxui.closeLoading();
foxui.message({
text: res.msg,
type: 'info',
});
}
});
callback();
},
cancel: function() {
foxui.message({
message: '取消删除',
type: 'info'
});
},
});
}
// 多选删除
$('.table-footer .delete-btn').click(function () {
let $isChecked = $('.foxui-table-td .foxui-checkbox.is-checked'),
$checkedTr = $isChecked.closest('.foxui-table-tr'),
len = $isChecked.length,
idList = [];
if (len < 1) {
foxui.message({
text: '请先选译要删除的数据!',
type: 'danger',
});
} else {
foxui.dialog({
title: '确认',
content: '您确定要删除选中的所有数据吗?',
confirmText: '删除',
cancelText: '取消',
buttonType: 'danger',
buttonSize: 'small',
confirm: function (callback) {
// 异步删除数据
$checkedTr.each(function () {
let id = $(this).find('.foxui-table-td:nth-child(2)').text();
idList.push(id);
});
$.ajax({
type: "post",
url: "{:url('form/FormList/lookDeletes')}",
dataType: "json",
data: {
"idList": JSON.stringify(idList),
"formListId": formListId
},
success: function(res) {
if (res.code == 1) {
foxui.message({
text: res.msg,
type: 'success',
});
init();
}else{
foxui.message({
text: res.msg,
type: 'warning',
});
}
},
error: function(res) {
foxui.message({
text: res.responseJSON.msg,
type: 'warning',
});
}
});
callback();
},
});
}
});
</script>
{/block}