video_system/Modules/Camera/Resources/views/camera_add.blade.php

<style>
    .layui-upload-list {
        width: auto;
        height: auto;
        margin-bottom: 0;
    }

    .layui-elem-quote {
        padding-bottom: 5px;
    }

    .layui-upload-img {
        /*width: 92px;*/
        height: 92px;
    }

    hr {
        margin: 15px 0;
    }

    .uk-alert-danger {
        background: #fff1f0;
        color: #d85030;
        margin-bottom: 15px;
        padding: 10px;
        border: 1px solid rgba(216, 80, 48, .3);
        border-radius: 4px;
        text-shadow: 0 1px 0 #fff;
    }

    .imgItem {
        display: inline-block;
        position: relative;
        margin: 0 10px 10px 0;
    }

    .imgItem .layui-close {
        position: absolute;
        top: 0;
        right: 0;
        height: 16px;
        line-height: 16px;
        text-align: center;
        color: #000;
        width: 16px;
        border: 1px solid #000;
        background-color: #fff;
    }

    iframe.fr-iframe {
        padding: 0 20px;
    }

    .fr-wrapper.show-placeholder .fr-placeholder {
        padding-left: 30px !important;
    }

    .layui-form-label {
        width: {{ $colWidth }}px;
    }

    .layui-input-block {
        margin-left: {{ $colWidth + 30 }}px;
    }

    .weadmin-body {
        overflow: initial;
    }
</style>
<script src="/js/admin/xm-select.js"></script>
<script src="/laydate/laydate.js"></script>
<form class="layui-form" id="form-unify" method="post" action="{{ $path ?? '' }}" style="padding:20px;">
    @csrf
    <h2 class="uk-modal-title">{{ $fromTitle }}</h2>
    <br>
    @foreach($columns as $key => $column)
        @switch($column['type'])
            @case('tree_select')
            <div class="layui-form-item">
                <label class="layui-form-label">{{ $column['label'] }}</label>
                <div class="layui-input-block">
                    {{-- {!! json_encode($column) !!} --}}
                    <select name="{{ $key }}">
                        @if($column['isShowNull'] == true)
                            <option value="0" @if(!isset($item)) selected @endif>无</option>
                        @endif
                        @if(count($column['options']) > 0)
                            @include('admin::component.multi_select_option', ['selects' => $column['options'], 'selectPid' => $item[$key] ?? ($column['default'] ?? '')])
                        @endif
                    </select>
                </div>
            </div>
            @break
        @endswitch
    @endforeach

    <div class="layui-form-item">
        <label class="layui-form-label">摄像头名称</label>
        <div class="layui-input-block">
            <input class="layui-input" type="text" placeholder="请输入摄像头名称" name="camera_name"/>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">摄像头类型</label>
        <div class="layui-input-block">
            <?php /*dd($columns);exit;*/?>
            <select name="camera_type">
                <option value="0">无</option>
                @foreach($columns['camera_type']['options'] as $k=>$v)
                    @if($k == 1 && count($columns['camera_type']['options']) > 0)
                        <option value="{{ $k }}" selected>{{ $v }}</option>
                    @else
                        <option value="{{ $k }}">{{ $v }}</option>
                    @endif
                @endforeach
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">摄像头来源</label>
        <div class="layui-input-block">
            <select name="camera_source" id="camera_source" lay-filter="camera_source">
                <option value="0">无</option>
                @foreach($columns['camera_source']['options'] as $k=>$v)
                    @if($k == 1 && count($columns['camera_source']['options']) > 0)
                        <option value="{{ $k }}" selected>{{ $v }}</option>
                    @else
                        <option value="{{ $k }}">{{ $v }}</option>
                    @endif
                @endforeach
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-form-label">录像机品牌</div>
        <div class="layui-input-block">
            @foreach($columns['video_recorder']['options'] as $k => $v)
                @if($k == 1 && count($columns['video_recorder']['options']) > 0)
                    <label><input type="radio" name="video_recorder" value="{{ $k }}" checked title="{{ $v }}"/></label>
                @else
                    <label><input type="radio" name="video_recorder" value="{{ $k }}" title="{{ $v }}"/></label>
                @endif
            @endforeach
        </div>
    </div>

    <div class="layui-form-item" id="camera_url">
        <label class="layui-form-label">摄像头链接</label>
        <div class="layui-input-block">
            <input class="layui-input" type="text" placeholder="请输入摄像头链接" name="camera_url"/>
        </div>
    </div>

    <div class="layui-form-item" id="user_name">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input class="layui-input" type="text" placeholder="请输入用户名" name="user_name"/>
        </div>
    </div>

    <div class="layui-form-item" id="password">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input class="layui-input" type="text" placeholder="请输入密码" name="password"/>
        </div>
    </div>

    <div class="layui-form-item" id="ip">
        <label class="layui-form-label">ip地址</label>
        <div class="layui-input-block">
            <input class="layui-input" type="text" placeholder="请输入ip地址" name="ip"/>
        </div>
    </div>

    <div class="layui-form-item" id="port">
        <label class="layui-form-label">端口</label>
        <div class="layui-input-block">
            <input class="layui-input" type="text" placeholder="请输入端口" name="port"/>
        </div>
    </div>

    <div class="layui-form-item" id="com_number">
        <label class="layui-form-label">通道号</label>
        <div class="layui-input-block">
            <input class="layui-input" type="text" placeholder="请输入通道号" name="com_number"/>
        </div>
    </div>

    <div class="layui-form-item" id="code_stream">
        <label class="layui-form-label">视频码流</label>
        <div class="layui-input-block">
            <?php /*dd($columns);exit;*/?>
            <select name="code_stream">
                <option value="0">无</option>
                @foreach($columns['code_stream']['options'] as $k=>$v)
                    @if($k == 1 && count($columns['code_stream']['options']) > 0)
                        <option value="{{ $k }}" selected>{{ $v }}</option>
                    @else
                        <option value="{{ $k }}">{{ $v }}</option>
                    @endif
                @endforeach
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-block">
            <input class="layui-input" type="text" placeholder="请输入排序" name="sort" value="0"/>
        </div>
    </div>

    @foreach($columns as $key => $column)
        @switch($column['type'])
            @case('uploadImg')
            <label class="layui-form-label">{{ $column['label'] }}</label>
            <div class="layui-upload">
                <img id="pre" class="layui-upload-img none">

                @if (strlen($column['default']) > 0)
                    <script>
                        $('#pre').attr('src', '{{ $column['default'] }}');
                    </script>
                @endif

                <span style="display: inline-table;">
                    <button type="button" class="layui-btn" id="selectImgBtn">上传图片</button>
                    <p id="uploadTips">
                        <input type="hidden" name="{{ $key }}" value="{{ $column['default'] ?? '' }}"/>
                    </p>
                </span>
            </div>
            <style>
                .layui-upload-img {
                    /*width: 92px;*/
                    height: 92px;
                    margin: 10px 10px 10px 10px;
                }

                #uploadTips {
                    line-height: 30px;
                }
            </style>
            <script>
                layui.use('upload', function () {

                    var $ = layui.jquery
                        , upload = layui.upload;

                    var uploadInst = upload.render({
                        elem: '#selectImgBtn'
                        , url: "{{ $column['uploadURLPath'] }}"
                        , acceptMime: 'image/jpg, image/png, image/jpeg'
                        , number: 1
                        , before: function (obj) {
                            //预读本地文件示例，不支持ie8
                            obj.preview(function (index, file, result) {
                                $('#pre').attr('src', result); //图片链接（base64）
                            });
                        }
                        , done: function (res) {
                            //如果上传失败
                            if (res.code > 0) {
                                return layer.msg('上传失败');
                            }
                            //上传成功
                            $("input[name='{{ $key }}']").val(res.data.image_path);
                        }
                        , error: function () {
                            //演示失败状态，并实现重传
                            var uploadTips = $('#uploadTips');
                            uploadTips.html('<span style="color: #FF5722; text-align:center">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                            uploadTips.find('.demo-reload').on('click', function () {
                                uploadInst.upload();
                            });
                        }
                    });

                });
            </script>
            @break

            @default
        @endswitch
        @if($hasHr)
            <hr>
        @endif
    @endforeach

    @if(!is_null($footBtns))
        <hr>
        <div style="text-align: right">
            @if(in_array('goback',$footBtns))
                @if($isAjax)
                    <button class="layui-btn layui-btn-primary layui-layer-close" style="position:relative;"
                            type="button">
                        取消
                    </button>
                @else
                    <button class="layui-btn layui-btn-primary layui-layer-close" style="position:relative;"
                            type="button"
                            onclick="javascript:history.go(-1);">返回
                    </button>
                @endif
            @endif
            @if(in_array('save',$footBtns))
                <button class="layui-btn" type="submit" lay-submit lay-filter="formBox">保存</button>
            @endif
        </div>
    @endif
</form>

<script>
    //根据摄像头来源显示内容
    if(document.getElementById("camera_source").value == 1){//硬盘录像机
        document.getElementById("camera_url").style.display = 'none';
        document.getElementById("user_name").style.display = 'block';
        document.getElementById("password").style.display = 'block';
        document.getElementById("ip").style.display = 'block';
        document.getElementById("port").style.display = 'block';
        document.getElementById("com_number").style.display = 'block';
        document.getElementById("code_stream").style.display = 'block';
    }
    if(document.getElementById("camera_source").value == 2){//视频服务器
        document.getElementById("camera_url").style.display = 'none';
        document.getElementById("user_name").style.display = 'none';
        document.getElementById("password").style.display = 'none';
        document.getElementById("ip").style.display = 'none';
        document.getElementById("port").style.display = 'none';
        document.getElementById("com_number").style.display = 'none';
        document.getElementById("code_stream").style.display = 'block';
    }
    if(document.getElementById("camera_source").value == 3){//内网摄像头
        document.getElementById("camera_url").style.display = 'block';
        document.getElementById("user_name").style.display = 'none';
        document.getElementById("password").style.display = 'none';
        document.getElementById("ip").style.display = 'none';
        document.getElementById("port").style.display = 'none';
        document.getElementById("com_number").style.display = 'none';
        document.getElementById("code_stream").style.display = 'none';
    }
    layui.use(['form', 'laydate', 'table'], function () {

        var form = layui.form, table = layui.table;
        form.render();

        form.on('checkbox', function (data) {
            $(data.othis).toggleClass('layui-form-checked');
        });

        form.on('select(camera_source)', function(data){
            var val=data.value;
            if(val == 1){
                document.getElementById("camera_url").style.display = 'none';
                document.getElementById("user_name").style.display = 'block';
                document.getElementById("password").style.display = 'block';
                document.getElementById("ip").style.display = 'block';
                document.getElementById("port").style.display = 'block';
                document.getElementById("com_number").style.display = 'block';
                document.getElementById("code_stream").style.display = 'block';
            }else if(val == 2){
                document.getElementById("camera_url").style.display = 'none';
                document.getElementById("user_name").style.display = 'none';
                document.getElementById("password").style.display = 'none';
                document.getElementById("ip").style.display = 'none';
                document.getElementById("port").style.display = 'none';
                document.getElementById("com_number").style.display = 'none';
                document.getElementById("code_stream").style.display = 'block';
            }else if(val == 3){
                document.getElementById("camera_url").style.display = 'block';
                document.getElementById("user_name").style.display = 'none';
                document.getElementById("password").style.display = 'none';
                document.getElementById("ip").style.display = 'none';
                document.getElementById("port").style.display = 'none';
                document.getElementById("com_number").style.display = 'none';
                document.getElementById("code_stream").style.display = 'none';
            }
        });

        @if($isAjax)
        form.on('submit(formBox)', function (data) {
            var urlPost = $('#form-unify').attr('action');
            var submitBtn = $(data.elem);
            submitBtn.addClass('layui-btn-disabled').prop('disabled', true).text('提交中……');
            $.ajax({
                url: urlPost,
                type: 'POST',
                dataType: 'json',
                data: data.field
            })
                .done(function (res) {
                    if (res.code === 0) {
                        submitBtn.text('完成');
                        layer.msg('完成！', {anim: 0}, function () {
                            if (res.data.table === '') {
                                location.reload();
                            } else {
                                layer.closeAll();
                                if (res.data.table !== undefined) {
                                    table.reload(res.data.table);
                                }
                                if (res.url !== undefined) {
                                    location.href = res.url;
                                }
                            }
                        });
                    } else {
                        layer.msg(res.message, {anim: 0}, function () {
                            submitBtn.removeClass('layui-btn-disabled').prop('disabled', false).text('重新保存');
                        });
                    }
                })
                .fail(function (res) {
                    layer.msg(res.message, {anim: 0}, function () {
                        submitBtn.removeClass('layui-btn-disabled').prop('disabled', false).text('重新保存');
                    });
                });
            return false;
        });
        @endif
    });

    $('.layui-form').on('click', '.layui-close', function () {
        var self = $(this);
        self.closest('.imgItem').remove();
    });

    $('.layui-form').on('click', '.file-delete', function () {
        var self = $(this);
        self.closest('tr').remove();
    });

    $('.date-input').datepicker({
        language: 'zh-CN',
        format: 'yyyy-mm-dd',
        zIndex: 19999999,
        autoHide: true
    });
    $('.dateMonth-input').datepicker({
        language: 'zh-CN',
        format: 'yyyy-mm',
        zIndex: 19999999,
        autoHide: true
    });
    $('.dateYear-input').datepicker({
        language: 'zh-CN',
        format: 'yyyy',
        zIndex: 19999999,
        autoHide: true
    });
</script>