php - Laravel Voyager:如何将 UI 功能添加到后端/CMS Voyager
问题描述
有谁知道如何连接功能 UI 并动态制作到菜单中CMS Voyager
?
我只想添加一些功能,例如在销售该物业的网站上。必须有一些功能,例如卧室数量,我只希望功能卧室是动态的,并且可以由用户编辑以从管理后端(CMS Voyager)添加或更改卧室数量。
<div class="page-content edit-add container-fluid">
<div class="row">
<div class="col-md-12">
<div class="panel panel-bordered">
<!-- form start -->
<form role="form"
class="form-edit-add"
action="{{ $edit ? route('voyager.'.$dataType->slug.'.update', $dataTypeContent->getKey()) : route('voyager.'.$dataType->slug.'.store') }}"
method="POST" enctype="multipart/form-data">
<!-- PUT Method if we are editing -->
@if($edit)
{{ method_field("PUT") }}
@endif
<!-- CSRF TOKEN -->
{{ csrf_field() }}
<div class="panel-body">
@if (count($errors) > 0)
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<!-- Adding / Editing -->
@php
$dataTypeRows = $dataType->{($edit ? 'editRows' : 'addRows' )};
@endphp
@foreach($dataTypeRows as $row)
<!-- GET THE DISPLAY OPTIONS -->
@php
$display_options = $row->details->display ?? NULL;
if ($dataTypeContent->{$row->field.'_'.($edit ? 'edit' : 'add')}) {
$dataTypeContent->{$row->field} = $dataTypeContent->{$row->field.'_'.($edit ? 'edit' : 'add')};
}
@endphp
@if (isset($row->details->legend) && isset($row->details->legend->text))
<legend class="text-{{ $row->details->legend->align ?? 'center' }}" style="background-color: {{ $row->details->legend->bgcolor ?? '#f0f0f0' }};padding: 5px;">{{ $row->details->legend->text }}</legend>
@endif
<div class="form-group @if($row->type == 'hidden') hidden @endif col-md-{{ $display_options->width ?? 12 }} {{ $errors->has($row->field) ? 'has-error' : '' }}" @if(isset($display_options->id)){{ "id=$display_options->id" }}@endif>
{{ $row->slugify }}
<label class="control-label" for="name">{{ $row->display_name }}</label>
@include('voyager::multilingual.input-hidden-bread-edit-add')
@if (isset($row->details->view))
@include($row->details->view, ['row' => $row, 'dataType' => $dataType, 'dataTypeContent' => $dataTypeContent, 'content' => $dataTypeContent->{$row->field}, 'action' => ($edit ? 'edit' : 'add')])
@elseif ($row->type == 'relationship')
@include('voyager::formfields.relationship', ['options' => $row->details])
@else
{!! app('voyager')->formField($row, $dataType, $dataTypeContent) !!}
@endif
@foreach (app('voyager')->afterFormFields($row, $dataType, $dataTypeContent) as $after)
{!! $after->handle($row, $dataType, $dataTypeContent) !!}
@endforeach
@if ($errors->has($row->field))
@foreach ($errors->get($row->field) as $error)
<span class="help-block">{{ $error }}</span>
@endforeach
@endif
</div>
@endforeach
</div><!-- panel-body -->
<div class="panel-footer">
<button type="submit" class="btn btn-primary save">{{ __('voyager::generic.save') }}</button>
</div>
</form>
<iframe id="form_target" name="form_target" style="display:none"></iframe>
<form id="my_form" action="{{ route('voyager.upload') }}" target="form_target" method="post"
enctype="multipart/form-data" style="width:0;height:0;overflow:hidden">
<input name="image" id="upload_file" type="file"
onchange="$('#my_form').submit();this.value='';">
<input type="hidden" name="type_slug" id="type_slug" value="{{ $dataType->slug }}">
{{ csrf_field() }}
</form>
</div>
</div>
</div>
</div>
<div class="modal fade modal-danger" id="confirm_delete_modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title"><i class="voyager-warning"></i> {{ __('voyager::generic.are_you_sure') }}</h4>
</div>
<div class="modal-body">
<h4>{{ __('voyager::generic.are_you_sure_delete') }} '<span class="confirm_delete_name"></span>'</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">{{ __('voyager::generic.cancel') }}</button>
<button type="button" class="btn btn-danger" id="confirm_delete">{{ __('voyager::generic.delete_confirm') }}</button>
</div>
</div>
</div>
</div>
<!-- End Delete File Modal -->
<script>
var params = {};
var $file;
function deleteHandler(tag, isMulti) {
return function() {
$file = $(this).siblings(tag);
params = {
slug: '{{ $dataType->slug }}',
filename: $file.data('file-name'),
id: $file.data('id'),
field: $file.parent().data('field-name'),
multi: isMulti,
_token: '{{ csrf_token() }}'
}
$('.confirm_delete_name').text(params.filename);
$('#confirm_delete_modal').modal('show');
};
}
$('document').ready(function () {
$('.toggleswitch').bootstrapToggle();
//Init datepicker for date fields if data-datepicker attribute defined
//or if browser does not handle date inputs
$('.form-group input[type=date]').each(function (idx, elt) {
if (elt.type != 'date' || elt.hasAttribute('data-datepicker')) {
elt.type = 'text';
$(elt).datetimepicker($(elt).data('datepicker'));
}
});
@if ($isModelTranslatable)
$('.side-body').multilingual({"editing": true});
@endif
$('.side-body input[data-slug-origin]').each(function(i, el) {
$(el).slugify();
});
$('.form-group').on('click', '.remove-multi-image', deleteHandler('img', true));
$('.form-group').on('click', '.remove-single-image', deleteHandler('img', false));
$('.form-group').on('click', '.remove-multi-file', deleteHandler('a', true));
$('.form-group').on('click', '.remove-single-file', deleteHandler('a', false));
$('#confirm_delete').on('click', function(){
$.post('{{ route('voyager.media.remove') }}', params, function (response) {
if ( response
&& response.data
&& response.data.status
&& response.data.status == 200 ) {
toastr.success(response.data.message);
$file.parent().fadeOut(300, function() { $(this).remove(); })
} else {
toastr.error("Error removing file.");
}
});
$('#confirm_delete_modal').modal('hide');
});
$('[data-toggle="tooltip"]').tooltip();
});
</script>
解决方案
推荐阅读
- r - 使用 lapply 修剪数据以去除异常值
- angular - ERROR 错误:未捕获(在承诺中):错误:无法匹配任何路由。URL 段:“列表”错误:无法匹配任何路由。URL 段:“列表”
- javascript - 我想在我的网页上显示 LED 开/关
- maya - Select objects with certain prefix in maya with Python
- java - 引起:java.lang.NoClassDefFoundError: io/jsonwebtoken/SignatureAlgorithm wildfly
- python-3.x - 目标变量为字符/字符串时的动作
- python - 如何将斐波那契数列保存到列表中?
- c++ - 对自定义对象进行排序时,向量的 std::sort 引发错误
- cron - 在 cron 设置中设置多个时间
- javascript - 如何找到存储在对象数组中的值并控制台键?