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

@using WeApp.Configuration
@using WeApp.Authorization
@using WeApp.Views.Shared.Modals
@using WeApp.Views.Shared.SearchForm
@using WeApp.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 packageNo = ViewBag.PackageNo;
    string phoneQuestion = ViewBag.PhoneQuestion;
    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(400),
                                                                                                                                                                                                                                                                                                                                                                                            });
    var attachTable = new TableViewModel(IwbConsts.ApiAppUrl + "Camp/GetAttachFiles?no=" + packageNo, 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),
            new Input("phoneQuestionNos", "电话提问").SetNotRequired().SetSelectOptions(phoneQuestion),
        }), "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, phoneQuestionNos, sceneNo, sceneName) {
            $.iwbAjax4({
                url: abp.appUrl + 'camp/GetAttachSelectStr?no=@(packageNo)',
                success: function(res) {
                    $('#modal-scene #attachNos').html(res).select2();
                    var arr = attachNos ? attachNos.split(',') : [];
                    var arr2 = phoneQuestionNos ? phoneQuestionNos.split(',') : [];
                    OpenModal({
                        table: $table,
                        modal: 'modal-scene',
                        url: abp.appUrl + 'Camp/AttachFile',
                        data: { campNo: campNo, sceneNo: sceneNo, sceneName: sceneName, attachNos: arr, phoneQuestionNos: arr2 }
                    });
                }
            });
        }

        function AddFile() {
            OpenModal({
                table: $attachTable,
                modal: 'modal-file',
                url: abp.appUrl + 'AttachFiles/FileUpload',
                data: { campNo: campNo, tableName: 'Train', columnName: 'CampPackage', sourceKey: '@(packageNo)' + "_" + $.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}\',\'{4}\',\'{1}\',\'{2}\')">{3}配置附件/电话</span>'.format(r.attachNos, r.sceneNo, r.sceneName, icon, r.phoneQuestionNos),
                link = '<a class="table-action" href="{1}" style="font-weight: 400;margin:0;" target="_blank">{0}</a>';
            str += action;
            if (r.attachInfos && r.attachInfos.length > 0) {
                str += `<span class="table-action" style="padding: 0 5px;margin:0;">附件:</span>`;
                r.attachInfos.forEach(function (val) {
                    str += link.format(val.fileTitle, val.filePath);
                });
            }
            if (r.questionInfo) {
                str += `<span class="table-action" style="padding: 0 5px;margin:0;">电话:</span>`;
                //r.questionInfos.forEach(function (v) {

                //});
                str += `<span class="table-action" style="padding:0 8px 0 0;font-weight: 400;margin:0;">${r.questionInfo.name}</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>