We_Relese/OnlineApp/Relese/Views/Train/CampAttach.cshtml

@using WeOnlineApp.Configuration
@using WeOnlineApp.Authorization
@using WeOnlineApp.Views.Shared.Modals
@using WeOnlineApp.Views.Shared.SearchForm
@using WeOnlineApp.Views.Shared.Table

@{
    ViewBag.Title = "培训营情景附件配置";
    string activeMenu = PermissionNames.PagesTrainMgCampMg; //The menu item will be active for this page.
    ViewBag.ActiveMenu = activeMenu;
    string fileType = "<option value=\"\" selected>请选择文件类型</option><option value=\"image\" >图片</option><option value=\"video\" >视频</option>";
    var campNo = ViewBag.CampNo;
    var searchForm = new SearchFormViewModel(new List<SearchItem>()
    {
        new SearchItem("sceneNo", "情景编号"),
        new SearchItem("sceneName", "情景简称"),
    });
    var searchForm2 = new SearchFormViewModel(new List<SearchItem>()
    {
        new SearchItem("fileName", "附件名称"),
    },"search-attach-form");
    var table = new TableViewModel(IwbConsts.ApiAppUrl + "Camp/GetSceneAttaches?no="+campNo,null, searchForm, tableId: "table")
    .SetFields(new List<FieldItem>()
    {
        new FieldItem("campName", "培训营"),
        new FieldItem("sceneNo", "情景编号"),
        new FieldItem("sceneName", "情景简称"),
        new FieldItem("", "附件信息","ActionFormatter").SetWidth(200),
    });
    var attachTable = new TableViewModel(IwbConsts.ApiAppUrl + "Camp/GetAttachFiles?no=" + campNo,null, searchForm2, tableId:"table-attach")
    .SetFields(new List<FieldItem>()
    {
        new FieldItem("fileTitle", "附件名称","LinkActionFormatter"),
        new FieldItem("", "操作","FileActionFormatter").SetWidth(120),
    });
}
@section css{
    
}
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-8">
            @Html.Partial("Table/_Table", table)
        </div>
        <div class="col-sm-4">
            @Html.Partial("Table/_Table", attachTable)
        </div>
    </div>
</div>

@section modal{
    <!--Main Modal-->
    @{
        var modal = new ModalViewModel("情景附件配置", new ModalBodyViewModel(new List<Input>()
        {
            new InputHide("id"),
            new InputHide("campNo"),
            new InputHide("sceneNo"),
            new Input("sceneName", "情景简称"),
            new Input("attachNos", "情景附件").SetNotRequired().SetSelectOptions("",true),
        }), "modal-scene");
        var modalFile = new ModalViewModel("上传附件", new ModalBodyViewModel(new List<Input>()
        {
            new InputHide("id"),
            new InputHide("campNo"),
            new InputHide("tableName"),
            new InputHide("columnName"),
            new InputHide("sourceKey"),
            new Input("fileTitle", "附件名称"),
            new Input("fileType", "附件类型").SetSelectOptions(fileType),
            new InputFile("file", "上传文件").SetFileOption("fileInfo","fileName","fileExt",100),

        }),"modal-file");
    }
    @Html.Partial("Modals/_Modal", modal)
    @Html.Partial("Modals/_Modal", modalFile)
}

@section scripts
{
    <script type="text/javascript">
        var $table = $('#table'), $attachTable = $('#table-attach'), campNo = '@(campNo)';
        $(function() {
            //$table.closest('.table-box').prepend(
            //    '<div class="btn-toolbar row tableTool"><div class="btn-group btn-group-sm"></div></div>');
            //$attachTable.closest('.table-box').prepend(
            //    '<div class="btn-toolbar row tableTool"><div class="btn-group btn-group-sm"><button type="button" class="btn btn-default menu-btn" onclick="AddFile()"><i class="far fa-plus-square"></i>添加附件</button></div></div>');
            //$attachTable.closest('.table-box').find('.tableTool>div').eq(0).remove();
            //$attachTable.closest('.table-box').find('.tableTool>div').eq(0).removeClass('col-sm-4').removeClass('col-lg-3');
            $attachTable.closest('.table-box').find('.tableTool>div').eq(0).prepend(
                '<div><div class="btn-group btn-group-sm"><button type="button" class="btn btn-default menu-btn" onclick="AddFile()"><i class="far fa-plus-square"></i>添加附件</button></div></div>');
            LoadTable({ table: $table });
            LoadTable({ table: $attachTable });

        });

        function SceneMap(attachNos, sceneNo, sceneName) {
            $.iwbAjax4({
                url: abp.appUrl + 'camp/GetAttachSelectStr?no=' + campNo,
                success: function(res) {
                    $('#modal-scene #attachNos').html(res).select2();
                    var arr = attachNos ? attachNos.split(',') : [];
                    OpenModal({
                        table: $table,
                        modal: 'modal-scene',
                        url: abp.appUrl + 'Camp/AttachFile',
                        data: { campNo: campNo, sceneNo: sceneNo, sceneName: sceneName, attachNos: arr }
                    });
                }
            });
        }

        function AddFile() {
            OpenModal({
                table: $attachTable,
                modal: 'modal-file',
                url: abp.appUrl + 'AttachFiles/FileUpload',
                data: { campNo: campNo, tableName: 'Train', columnName: 'Camp', sourceKey: campNo+"_"+$.now() }

            });
        }
        function DeleteFile(no) {
            MsgConfirm("确认要删除附件吗？","删除附件",
                function() {
                    $.iwbAjax1({
                        table: $attachTable,
                        url: abp.appUrl + 'camp/DeleteAttach?no=' + no
                    });
                });
           
        }


    </script>


    <!--格式化-->
    <script id="formatter-script" type="text/javascript">
        var icon = '<i class="fa fa-angle-double-right"></i>';
        function TypeFormatter(v) {
            var name = $('#hid-type option[value="' + v + '"]').text();
            switch (v) {
                case 0:
                    return '<span class="label label-danger">' + name + '</span>';
                default:
                    return '<span class="label label-info">' + name + '</span>';
            }
        }


        function ActionFormatter(v, r) {
            var str = '',
                action = '<span class="table-action" onclick="SceneMap(\'{0}\',\'{1}\',\'{2}\')">{3}配置附件</span>'.format(r.attachNos, r.sceneNo, r.sceneName,icon),
                link = '<a class="table-action" href="{1}" target="_blank">{0}</a>';
            str += action;
            if (r.attachInfos && r.attachInfos.length > 0) {
                //str += '<span style="padding-left:10px;color:red;">(</span>';
                r.attachInfos.forEach(function(val) {
                    str += link.format(val.fileTitle, val.filePath);
                });
                //str += '<span style="color:red;">)</span>';

            }
            return str;
        }

        function LinkActionFormatter(v, r) {
            var str = '',
                link = '<a class="table-action" href="{1}" target="_blank" title="查看附件">{0}</a>';
            str += link.format(r.fileTitle+"."+r.fileExt, r.filePath);

            return str;
        }
        function FileActionFormatter(v, r) {
            var str = '',
                action = '<span class="table-action" onclick="DeleteFile(\'{0}\')">{1}删除附件</span>'.format(r.attachNo,
                    icon);
            str += action;

            return str;
        }
    </script>
}


<section style="display: none">
    <select id="hid-type">
        <option value=""></option>
    </select>
   
    @*@Html.DropDownList("hid-type", type)*@
</section>