think-plugs-notice/src/view/broadcast/form.html

<form action="{:sysuri()}" method="post" data-auto="true" class="layui-form layui-card" data-table-id="DeptTable">
    <div class="layui-card-body padding-left-40">
        <fieldset class="layui-bg-gray">
            <legend><b class="layui-badge think-bg-violet">基础信息</b></legend>
            <label class="layui-form-item relative block">
                <span class="help-label"><b>标题</b></span>
                <input maxlength="100" class="layui-input" name="title" value='{$vo.title|default=""}' required vali-name="标题" placeholder="请输入标题">
            </label>
            <label class="layui-form-item relative block">
                <span class="help-label"><b>类型</b></span>
                <select name="type" lay-search="{fuzzy: true}" lay-creatable="" required vali-name="类型" class="layui-select">
                    <option value="">请选择或输入类型</option>
                    {foreach $types as $type}{if isset($vo.type) and $type.type eq $vo.type}
                    <option selected value="{$type.type}">{$type.type}</option>
                    {else}
                    <option value="{$type.type}">{$type.type}</option>
                    {/if}{/foreach}
                </select>
            </label>
            <label class="layui-form-item relative block">
                <span class="help-label"><b>内容</b></span>
                <textarea class="layui-textarea" name="content" style="width: 100%" placeholder="请输入内容">
                    {$vo.content|default=""}
                </textarea>
            </label>
            <label class="layui-form-item relative block">
                <span class="help-label"><b>附件</b></span>
                <input type="hidden" name="files" value="{$vo.files|default=''}" class="layui-input" placeholder="请上传附件">
                <a data-file='mut' data-type="*" data-field="files" class="layui-btn layui-btn-primary layui-btn-sm" style="margin-top: 5px;">上传文件</a>
                <!-- 附件展示区域 -->
                <div id="files-display" style="margin-top: 10px;"></div>
            </label>
        </fieldset>
        <fieldset class="layui-bg-gray">
            <legend><b class="layui-badge think-bg-violet">通知人</b></legend>
            {notempty name='vo.id'}
            <input type="checkbox" lay-filter="rebroadcast" lay-skin="tag" lay-text="重新发送通知" name="rebroadcast" value='1'>
            <script>
                $(function () {
                    $(".rebroadcast").hide()
                })
            </script>
            {/notempty}

            <div class="layui-form-item rebroadcast">
                <input type="checkbox" lay-filter="to_all" lay-skin="tag" lay-text="通知所有人" name="to_all" value='1'>
            </div>
            <div class="layui-form-item rebroadcast" id="to_depts">
                <label class="layui-form-label"><span class="help-label"><b>通知部门</b></span></label>
                <div class="layui-input-block">
                    {foreach $depts as $dept}
                    <input type="checkbox" lay-filter="to_depts" lay-skin="tag" lay-text="{$dept.name}" name="to_depts[]" value='{$dept.id}'>
                    {/foreach}
                </div>
            </div>
        </fieldset>
    </div>

    <div class="hr-line-dashed"></div>
    {notempty name='vo.id'}<input type='hidden' value='{$vo.id}' name='id'>{/notempty}
    <input type="hidden" name="to" value='{$vo.to|default=""}'>

    <div class="layui-form-item text-center">
        <button class="layui-btn" type='submit'>{:lang('保存数据')}</button>
        <button class="layui-btn layui-btn-danger" type='button' data-confirm="{:lang('确定要取消编辑吗？')}" data-close>{:lang('取消编辑')}</button>
    </div>
</form>
<script>
    // 初始化附件上传功能
    $('input[name="files"]').uploadFile();
    
    // 附件处理功能
    function renderFiles() {
        var filesValue = $('input[name="files"]').val();
        var displayDiv = $('#files-display');
        displayDiv.empty();
        
        if (filesValue && filesValue.trim()) {
            var files = filesValue.split('|').filter(function(url) {
                return url.trim() !== '';
            });
            
            if (files.length > 0) {
                var html = '<div style="border: 1px solid #e6e6e6; border-radius: 4px; padding: 10px; background-color: #fafafa;">';
                html += '<div style="font-weight: bold; margin-bottom: 8px; color: #666;">已上传附件 (' + files.length + ')：</div>';
                
                files.forEach(function(url, index) {
                    if (url.trim()) {
                        var fileName = '附件' + (index + 1);
                        
                        // 尝试从URL参数中获取attname作为文件名
                        try {
                            var urlObj = new URL(url, window.location.origin);
                            var attname = urlObj.searchParams.get('attname');
                            if (attname) {
                                fileName = decodeURIComponent(attname);
                            } else {
                                // 如果没有attname参数，则使用URL路径的最后部分
                                fileName = url.split('/').pop() || '附件' + (index + 1);
                            }
                        } catch (e) {
                            // 如果URL解析失败，使用默认方式
                            fileName = url.split('/').pop() || '附件' + (index + 1);
                        }
                        
                        html += '<div style="margin-bottom: 6px; padding: 6px; background-color: #fff; border: 1px solid #ddd; border-radius: 3px; display: flex; align-items: center; justify-content: space-between;">';
                        html += '<div style="flex: 1; display: flex; align-items: center;">';
                        html += '<i class="layui-icon layui-icon-file" style="margin-right: 8px; color: #1E9FFF;"></i>';
                        html += '<a href="' + url + '" target="_blank" style="color: #1E9FFF; text-decoration: none; word-break: break-all;">' + fileName + '</a>';
                        html += '</div>';
                        html += '<button type="button" class="layui-btn layui-btn-xs layui-btn-danger" onclick="removeFile(\'' + url + '\')" style="margin-left: 10px;">删除</button>';
                        html += '</div>';
                    }
                });
                
                html += '</div>';
                displayDiv.html(html);
            }
        }
    }
    
    // 删除附件
    function removeFile(urlToRemove) {
        var filesValue = $('input[name="files"]').val();
        if (filesValue) {
            var files = filesValue.split('|').filter(function(url) {
                return url.trim() !== '' && url !== urlToRemove;
            });
            $('input[name="files"]').val(files.join('|'));
            renderFiles();
        }
    }
    
    // 监听附件字段变化
    $('input[name="files"]').on('input change', function() {
        renderFiles();
    });

    $(function () {
        // 页面加载时初始化附件显示
        renderFiles();
        
        layui.use(['form'], function () {
            const Form = layui.form;
            Form.on('checkbox(to_all)', function (data) {
                if (data.elem.checked) {
                    $('input[name="to"]').val('所有人')
                    $('#to_depts').hide()
                    $('select[name="to_depts"]').attr('disabled', true)
                } else {
                    $('input[name="to"]').val(
                        $('input[lay-filter="to_depts"]').filter(function (index, element) {
                            return element.checked;
                        }).map(function (index,element) {
                            return $(element).attr('title')
                        }).toArray().join(',')
                    )
                    $('#to_depts').show()
                }
            })
            Form.on('checkbox(to_depts)', function (data) {
                $('input[name="to"]').val(
                    $('input[lay-filter="to_depts"]').filter(function (index, element) {
                        return element.checked;
                    }).map(function (index,element) {
                        return $(element).attr('title')
                    }).toArray().join(',')
                )
            })
            Form.on('checkbox(rebroadcast)', function (data) {
                if (data.elem.checked) {
                    $('.rebroadcast').show()
                } else {
                    $('.rebroadcast').hide()
                }
            })
        });
    })
</script>