Php Laravel Voyager：如何向后端/CMS Voyager添加UI功能

是否有人知道如何将功能UI连接到CMS Voyager中的菜单并使其动态显示

我只想在出售房产的网站上添加一些功能。必须有一些功能，如多少卧室数量，我只想卧室的功能是动态的，可以由用户编辑添加或更改从管理后端（CMS航行者）卧室的数量

@如果（$edit）
{{method_field（“PUT”）}
@恩迪夫
{{csrf_field（）}}
@如果（计数（$errors）>0）

@foreach（$errors->all（）作为$error）
{{$error}}
@endforeach

@恩迪夫
@php
$dataTypeRows=$dataType->{（$edit？'editRows'：'addRows'）}；
@endphp
@foreach（$dataTypeRows作为$row）
@php
$display\u options=$row->details->display？？无效的
if（$dataTypeContent->{$row->field.''.'（$edit？'edit'：'add'））{
$dataTypeContent->{$row->field}=$dataTypeContent->{$row->field.'''.'（$edit？'edit'：'add'）；
}
@endphp
@if（设置（$row->details->legend）&&isset（$row->details->legend->text））
{{$row->详细信息->图例->文本}
@恩迪夫
id））{{“id=$display_options->id”}}@endif>
{{$row->slagify}
{{$row->display_name}
@包括（'voyager:：多语言。输入隐藏面包编辑添加'）
@if（设置（$row->details->view））
@包括（$row->details->view，['row'=>$row，'dataType'=>$dataType，'dataTypeContent'=>$dataTypeContent，'content'=>$dataTypeContent->{$row->field}，'action'=>（$edit？'edit'：'add'））
@elseif（$row->type=='relationship'）
@包括（'voyager:：formfields.relationship'，['options'=>$row->details]）
@否则
{！！app（'voyager'）->formField（$row，$dataType，$dataTypeContent）
@恩迪夫
@foreach（app（'voyager'）->afterFormFields（$row、$dataType、$dataTypeContent）作为$after）
{！！$after->handle（$row，$dataType，$dataTypeContent）！！}
@endforeach
@如果（$errors->has（$row->field））
@foreach（$errors->get（$row->field）作为$error）
{{$error}}
@endforeach
@恩迪夫
@endforeach
{{{（'voyager:：generic.save'）}
{{csrf_field（）}}
&时代；
{{{{（'voyager:：generic.you{}}
{{{{（'voyager:：generic.you__确定_delete'）}'
{{{（'voyager:：generic.cancel'）}
{{{{（'voyager:：generic.delete_confirm'）}
var params={}；
var$文件；
函数deleteHandler（标记，isMulti）{
返回函数（）{
$file=$（this）.slides（标记）；
参数={
slug:“{{$dataType->slug}}”，
文件名：$file.data（'file-name'），
id:$file.data（'id'），
字段：$file.parent（）.data（'field-name'），
multi:isMulti，
_令牌：“{csrf_token（）}}”
}
$（'.confirm_delete_name'）.text（params.filename）；
$（'confirm'u delete'u model'）。model（'show'）；
};
}
$（'document'）.ready（函数（）{
$（'.toggleswitch'）.bootstraptogle（）；
//如果定义了数据日期选择器属性，则初始化日期字段的日期选择器
//或者如果浏览器不处理日期输入
$（'.form group input[type=date]'）。每个（函数（idx，elt）{
if（elt.type！=“date”| elt.hasAttribute（'data-datepicker'））{
elt.type='text'；
$（elt）.datetimepicker（$（elt）.data（'datepicker'）；
}
});
@如果（$isModelTranslatable）
$（'.side body'）。多语言（{“editing”：true}）；
@恩迪夫
$（'.side body input[data slug origin]'）。每个（函数（i，el）{
$（el.slagify（）；
});
$（'.form group'）。在（'click'，'remove multi-image'，deleteHandler（'img'，true））；
$（'.form group'）。在（'click'，'remove single image'，deleteHandler（'img'，false））；
$（'.form group'）。在（'click'，'remove multi-file'，deleteHandler（'a'，true））；
$（'.form group'）。在（'click'，'remove single file'，deleteHandler（'a'，false））；
$（'confirm_delete'）。在（'click'，function（）上{
$.post（{{route（'voyager.media.remove'）}}），参数，函数（response
<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">&times;</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>