official_website/app/admin/view/member_model/edit.html

792 lines
33 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{extend name="foxcms" /}
{block name="css"}
{/block}
{block name="body"}
<input name="columnId" type="hidden" value="{$columnId}"/>
<input name="modelId" type="hidden" value="{$memberModel.id}"/>
<div class="foxcms-content-inner">
<!-- page content -->
<div class="attach-set-content">
<div class="foxui-tabs foxui-type-line">
<div class="foxui-tabs-header">
<div class="foxui-tabs-item">基本设置</div>
<div class="foxui-tabs-item is-active">内容字段</div>
<div class="foxui-tabs__active-bar" style="width: 112px; transform: translateX(0px);"></div></div>
<div class="foxui-tabs-content">
<div class="foxui-tabs-pane" style="">
<div class="section">
<div class="section-title">设置</div>
<div class="section-main">
<div class="section-main-item">
<div class="foxui-input-group">
<div class="input-label">
<label>模型类型:</label>
</div>
<div class="input-box display-flex foxui-align-items-center">
<mark>{$memberModel.systemtext}</mark>
</div>
</div>
</div>
<div class="section-main-item">
<div class="foxui-input-group">
<div class="input-label">
<label>模型名称:</label>
</div>
<div class="input-box display-flex foxui-align-items-center">
<input class="foxui-size-small" disabled placeholder="请输入内容" value="{$memberModel.name}"/>
</div>
</div>
</div>
<div class="section-main-item">
<div class="foxui-input-group">
<div class="input-label">
<label>数据表名:</label>
</div>
<div class="input-box display-flex foxui-align-items-center">
<input class="foxui-size-small" disabled value="{$memberModel.table}"/>
</div>
</div>
</div>
<div class="section-main-item">
<div class="foxui-input-group">
<div class="input-label">
<label>会员类型:</label>
</div>
<div class="input-box">
<div class="foxui-select">
<div class="foxui-select-handle foxui-select-icon is-disabled">
<input class="foxui-select-input" readonly="readonly" name="member_type" placeholder="请选择" value="{$memberModel['memberTypeText']}" data-id="{$memberModel['member_type']}" />
</div>
<div class="foxui-select-menu">
<ul class="foxui-select-slide">
{foreach $memberTypes as $key=>$vo }
<li class="foxui-select-item" data-id="{$vo.dict_value}">{$vo.dict_label}</li>
{/foreach}
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="foxui-tabs-pane" style="display: none;">
<div class="section">
<div class="foxcms-content-inner">
<!-- page content -->
<div class="diy-form-content">
<div class="content-top-operation">
<div class="left">
<button class="foxui-size-small foxui-solid-primary" onclick="modifyTableItem()">
<i class="foxui-icon-jiahao-o"></i>
<span>添加字段</span>
</button>
</div>
<div class="right display-flex">
<div class="foxui-input-group item-input">
<label>字段搜索:</label>
<input class="foxui-size-small" placeholder="请输入字段标题 / 字段名称" value="" name="keyword">
</div>
<div class="foxui-input-group item-select">
<label>状态:</label>
<div class="foxui-select">
<div class="foxui-select-handle foxui-select-icon">
<input class="foxui-select-input foxui-size-small" readonly="readonly" placeholder="请选择状态" value="全部" name="status">
<i class="foxui-icon-close-circle"></i>
</div>
<div class="foxui-select-menu">
<ul class="foxui-select-slide">
<li class="foxui-select-item" data-id="1">全部</li>
<li class="foxui-select-item" data-id="2">启用</li>
<li class="foxui-select-item" data-id="3">禁用</li>
</ul>
</div>
</div>
</div>
<button class="foxui-solid-primary foxui-size-small search-btn">搜索</button>
<button class="foxui-text-primary foxui-size-small reset-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>
<div class="foxui-table-th">标题</div>
<div class="foxui-table-th">名称</div>
<div class="foxui-table-th">类型</div>
<div class="foxui-table-th">所属分类</div>
<div class="foxui-table-th">状态</div>
<div class="foxui-table-th">操作</div>
</li>
</ul>
<ul class="foxui-table-tbody foxui-checkbox-list">
<!--表格内容-->
</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 enable-btn">
<i class="foxui-icon-zhengque-o"></i>
<span>启用</span>
</button>
<button class="foxui-plain-info foxui-size-mini disabled-btn">
<i class="foxui-icon-jinyong-o"></i>
<span>禁用</span>
</button>
<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>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{include file="footed-copy"/}
{/block}
{block name="js"}
<script>
/**
* @description: 添加/编辑item有效编辑无效添加
* @param {*} item
* @return {*}
* @Date: 2022-01-10 10:08:32
*/
function modifyTableItem(id) {
let fieldTitel = '',
fieldName = '',
fieldType = '',
selects = '',
oldName = '',
tips = '';
if (id) {
// 根据 id 异步请求数据(赋值)
fieldTitel = '默认模型';
fieldName = 'default';
fieldType = '多选项';
selects = '男,女';
tips = '选择性别';
$.ajax({
type: "get",
url: ADMIN_PATH + '/MemberModelField/getMemberModelField?id=' + id,
dataType: "json",
async: false,
success: function (res) {
if (res.code == 1) {
let data = res.data;
fieldTitel = data.title;
fieldName = data.name;
fieldType = data.dtype;
selects = data.dfvalue;
tips = data.remark;
oldName = data.name;
}
}, error: function (res) {
console.log("查询失败")
}
});
}
foxui.dialog({
title: id ? '编辑字段' : '添加字段',
content: _modifyTableItemHtml(fieldTitel, fieldName, fieldType, selects, tips),
cancelText: '取消',
confirmText: id ? '确定' : '添加',
buttonSize: 'small',
buttonAlign: 'center',
width: '710px',
longButton: true,
border: true,
confirm: function (callback) {
let title = $('input[name="title"]').val();
let modelId = $('input[name="modelId"]').val();
let name = $('input[name="name"]').val();
let dtype = $('.dtype .foxui-radio.is-checked input').val();
let dfvalue = $('textarea[name="dfvalue"]').val();
let remark = $('textarea[name="remark"]').val();
let datas ={"id": id, "oldName": oldName, "modelId": modelId, "name": name, "title":title, "dtype":dtype, "dfvalue":dfvalue, "remark":remark};
let url = id?ADMIN_PATH + '/MemberModelField/edit': ADMIN_PATH + '/MemberModelField/add';
$.ajax({
type: "post",
url: url,
dataType: "json",
data: datas,
success: function (res) {
if (res.code == 1) {
foxui.message({
text: id ? '修改成功' : '添加成功',
type: 'success',
});
//拉取模型字段
init();
} else {
foxui.message({
text: res.msg,
type: 'warning',
});
}
}, error: function (res) {
foxui.message({
text: id ? '修改失败' : '添加失败',
type: 'warning',
});
}
});
callback();
},
cancel: function () {},
});
}
/**
* @description: 修改字段类型/添加字段类型 html
* @param {*} fieldTitel 字段标题
* @param {*} fieldName 字段名称
* @param {*} fieldType 字段类型
* @param {*} selects 默认值
* @param {*} tips 提示文字
* @return {*}
* @Date: 2022-01-10 13:26:40
*/
function _modifyTableItemHtml(fieldTitel, fieldName, fieldType, selects, tips) {
return `
<div class="column-field-add-content">
<div class="section-main">
<div class="section-main-item margin-top-0">
<div class="foxui-input-group">
<div class="input-label">
<label>字段标题:</label>
</div>
<div class="input-box">
<div class="foxui-input-suffix">
<input name="title" class="foxui-size-small" maxlength="10" placeholder="" value="${fieldTitel || ''}" />
<i class="foxui-suffix-icon foxui-suffix-count">0/10</i>
</div>
</div>
</div>
</div>
<div class="section-main-item">
<div class="foxui-input-group">
<div class="input-label">
<label>字段名称:</label>
</div>
<div class="input-box">
<div class="foxui-input-suffix">
<input name="name" class="foxui-size-small" maxlength="30" placeholder="" value="${fieldName || ''}" onkeyup="this.value=this.value.replace(/[^a-z0-9]/g,'');"/>
<i class="foxui-suffix-icon foxui-suffix-count">0/30</i>
</div>
</div>
</div>
<p class="input-box-info">只能用英文字母或数字,数据表的真实字段名</p>
</div>
<div class="section-main-item">
<div class="foxui-input-group foxui-align-items-start">
<div class="input-label">
<label>字段类型:</label>
</div>
<div class="input-box">
<div class="foxui-radio-group foxui-row radio-box-gapless foxui-gutter-2 dtype">
${_fieldTypeHtml(fieldType)}
</div>
</div>
</div>
</div>
<div class="section-main-item">
<div class="foxui-input-group foxui-align-items-start">
<div class="input-label">
<label>默认值:</label>
</div>
<div class="input-box">
<div class="foxui-textarea">
<textarea autocomplete="off" rows="4" placeholder="" name="dfvalue">${selects || ''}</textarea>
</div>
</div>
</div>
<p class="input-box-info">如果字段类型为单择项、多选项、下拉框时,此处填写被选择的项目用英文“,”分隔。如“男孩,女孩”</p>
</div>
<div class="section-main-item">
<div class="foxui-input-group foxui-align-items-start">
<div class="input-label">
<label>提示文字:</label>
</div>
<div class="input-box">
<div class="foxui-textarea">
<textarea autocomplete="off" rows="4" placeholder="" name="remark">${tips || ''}</textarea>
</div>
</div>
</div>
</div>
</div>
</div>
`;
}
/**
* @description: 字段类型列表项
* @param {*} value
* @return {*}
* @Date: 2022-01-10 13:17:59
*/
function _fieldTypeHtml(value) {
let fieldTypeList = [
// { id: 1, label: '单行文本' },
// { id: 2, label: '单选项' },
];
$.ajax({
type: "get",
// url: ADMIN_PATH + '/MemberModelField/fieldTypeList?dtype='+ value,
url: "{:url('MemberModelField/fieldTypeList')}?dtype="+value,
dataType: "json",
async: false,
success: function (res) {
if (res.code == 1) {
fieldTypeList = res.data;
}
}, error: function (res) {
console.log("操作失败");
}
});
let htmlArr = [];
value = value || fieldTypeList[0].name;
fieldTypeList.forEach(item => {
htmlArr.push(`
<div class="foxui-radio foxui-col-xs-6 foxui-col-sm-6 ${item.name === value ? ' is-checked' : ''} ${item.isDisable? ' is-disabled' : ''}" data-id=${item.id}>
<span class="foxui-radio-input">
<i class="foxui-radio-icon"></i>
<input type="radio" value="${item.name}"/>
</span>
<span class="foxui-radio-label">${item.title}</span>
</div>
`);
});
return htmlArr.join('');
}
</script>
<script>
/**
* 初始化数据
*/
function init(){
let keyword = $('input[name="keyword"]').val();
let bcid = $("input[name='bcid']").val();
let status = $("input[name='status']").val();
let modelId = $('input[name="modelId"]').val();
let searchData = {
"keyword": keyword,
"bcid": bcid,
"status": status,
"modelId": modelId
};
$.ajax({
type: "post",
// url: ADMIN_PATH + '/MemberModelField/index',
url: "{:url('MemberModelField/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);
}
}, error: function (res) {
}
});
}
/**
* @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);
//总数
$(".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 = [];
dataList.forEach(item => {
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>
<div class="foxui-table-td blue-color">${item.title}</div>
<div class="foxui-table-td">${item.field}</div>
<div class="foxui-table-td">${item.type}</div>
<div class="foxui-table-td">
<span class="${item.is_system == 1?'state-enable':'state-disabled'}">${item.category}</span>
</div>
<div class="foxui-table-td">
<span class="${item.status == 1?'state-enable':'state-disabled'}">${item.statustext}</span>
</div>
<div class="foxui-table-td">
<button class="foxui-text-primary foxui-size-medium edit-btn" onclick="modifyTableItem(${item.id})">编辑</button>
<button class="foxui-text-primary foxui-size-medium delete-btn" id="${item.id}" title="${item.title}" onclick="deleteItem(this)">删除</button>
</div>
</li>
`);
});
return htmlArr.join('');
}
</script>
<script>
init();
//搜索
$(".search-btn").on('click', function() {
init();
});
//重置
$(".reset-btn").on('click', function (){
$('input[name="status"]').val("全部");
$('input[name="keyword"]').val("");
});
/**
* @description: 删除
* @param {*} id
* @return {*}
* @Date: 2022-01-10 09:49:40
*/
function deleteItem(obj) {
let title = $(obj).attr("title");
let id = $(obj).attr("id");
foxui.dialog({
title: '删除',
content: '您确定要删除【' + title + '】吗',
cancelText: '取消',
confirmText: '删除',
type: 'danger',
confirm: function(callback) {
$.ajax({
type: "get",
url: ADMIN_PATH + '/MemberModelField/delete',
data:{
"id": id
},
dataType: "json",
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.msg,
type: 'info',
});
}
});
callback();
},
cancel: function() {
foxui.message({
text: '取消删除',
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: ADMIN_PATH + '/MemberModelField/deletes',
dataType: "json",
data: {
"idList": JSON.stringify(idList),
},
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.msg,
type: 'warning',
});
}
});
callback();
},
});
}
});
//启用所有
$('.table-footer .enable-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: ADMIN_PATH + '/MemberModelField/updateStatus',
dataType: "json",
data: {
"idList": JSON.stringify(idList),
"status":1
},
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: '操作失败',
type: 'warning',
});
}
});
callback();
},
});
}
});
//禁用
$('.table-footer .disabled-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: ADMIN_PATH + '/MemberModelField/updateStatus',
dataType: "json",
data: {
"idList": JSON.stringify(idList),
"status":0
},
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: '操作失败',
type: 'warning',
});
}
});
callback();
},
});
}
});
</script>
{/block}