VberAdmin_V4/SourceCode/Src/VberAdmin.Web.Mvc/Views/Shared/Query/_QueryModal.cshtml

@using System.Linq;
@using VberAdmin.Web.Models.Modals
@using VberZero.Tools.StringModel

@model VmQueryModal
@{
    string modalId = Model?.ModalId ?? "";
    string submit = Model?.SubmitEventName ?? "";
    string dbClick = Model?.ItemDbClickEventName ?? "";
    string width = Model?.ModalWidth > 0 ? "min-width:" + Model.ModalWidth + "px" : "";
    VmQueryTreeSearch treeSearch = Model?.VmQueryTreeSearch;
    string treeField = "", treeSelectUrl = "", treeSelectFiledName = "";
    int treeFType = 0; int treeEType = 0;
    if (treeSearch != null)
    {
        treeField = treeSearch.Field;
        treeFType = treeSearch.FType;
        treeEType = treeSearch.EType;
        treeSelectUrl = treeSearch.SelectUrl;
        treeSelectFiledName = treeSearch.SelectFieldName;
    }
    string searchBindFunc = Model?.SearchBindFun;
   
}

<!-- QUERY-MODAL  @(Model?.ModalId)  START-->
<style>
    .query-modal.KeyWords {
        text-decoration: none;
    }
</style>
<section>
    <div class="modal fade query-modal" id="@(modalId)" role="dialog" tabindex="-1" aria-hidden="true" 
         data-tree="@(treeSearch==null?"false":"true")" data-tree-select-filed="@(treeSelectFiledName)" data-tree-url="@(treeSelectUrl)" data-tree-field="@(treeField):@(treeFType):@(treeEType)" data-search-bind-func="@(searchBindFunc)">
        <div class="modal-dialog modal-lg" role="document" style="@(width)">
            <div class="modal-content">
                @await Html.PartialAsync("Modals/_Header", new VmModalHeader(Model?.ModalName))
                <div class="modal-body scroll-y p-3">
                    <div id="tree-box_@(modalId)" class="row">
                        @{
                            string colClass = "col-md-12";
                            if (treeSearch != null)
                            {
                                colClass = "col-md-9";
                                <div class="col-md-3" style="padding-right: 0;">
                                    <div style="height: 100%; padding: 5px 0;">
                                        <div id="treeView_@(modalId)" class="vb-treeView"></div>
                                    </div>
                                </div>
                            }
                        }
                        <div class="@colClass" style="">
                            <div id="@(modalId)_table_box" class=" table-box vb-bootstrap-table fs-6 p-1 text-gray-700">
                                    <div class="d-flex flex-stack ">
                                        @if (Model.Search != null)
                                        {
                                            @await Html.PartialAsync("_Search", Model.Search)
                                        }
                                    </div>
                                    <table id="table_query_@(modalId)" class="table text-start table-striped table-row-dashed text-gray-700 fs-6 gx-3 gy-2"
                                           data-url="@Model.QueryUrl"
                                           data-server-side="true"
                                           data-row-id="@(Model.RowId)"
                                           data-method="post"
                                           data-length-menu="[10]"
                                           data-page-select="@(Model.PageSelect)"
                                           data-single-select="@(Model.SingleSelect)"
                                           data-click-to-select="true"
                                           data-processing="true"
                                           data-paging="true">
                                        <thead>
                                        <tr class="text-start text-gray-800 fw-bolder fs-4 text-uppercase gx-3 gy-3">
                                            @if (Model.QueryItems != null && Model.QueryItems.Any())
                                            {
                                                <th class="w-10px pe-2" data-check-box="true" data-sortable="false">
                                                    @if (!Model.IsSingleSelect)
                                                    {
                                                        //data-kt-check="true" data-kt-check-target="#@(Model.TableId) .form-check-input"
                                                        <div class="form-check form-check-sm form-check-custom form-check-solid me-3">
                                                            <input class="form-check-input" type="checkbox" value="1"/>
                                                        </div>
                                                    }

                                                </th>
                                                foreach (var item in Model.QueryItems)
                                                {
                                                    if (item.IsFieldHidden)
                                                    {
                                                        continue;
                                                    }
                                                    <th data-field="@(item.FiledName)" data-class-name="@(item.ClassName)" @(Html.Raw(item.Sort)) @(Html.Raw(item.FormatterStr)) @(Html.Raw(item.WidthStr))>@(item.DisplayName)</th>
                                                }
                                            }
                                        </tr>
                                        </thead>
                                    </table>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn  btn-sm btn-light me-5" style="min-width: 100px;" onclick="Clear_@(modalId)()">@(L("Clear"))</button>
                    <button type="button" class="btn btn-sm  btn-primary" style="min-width: 100px;" onclick="Save_@(modalId)()">@(L("OK"))</button>
                </div>
            </div>
        </div>
    </div>
</section>



<script>
    var $@(modalId)_table = $("#table_query_@(modalId)"), _searchKeyWord_@(modalId) = "";

    function @(modalId)Refresh(){
        $@(modalId)_table.VbTable('refresh', true);
    }
    function @(modalId)Search() {
        @if (treeField.NotEmpty())
        {
            <text>
                $('#treeView_@modalId').VbTreeView({
                    url: '@Html.Raw(treeSelectUrl)',
                    onNodeSelected: function(e, d) {
                        _searchKeyWord_@(modalId)  = d["@Html.Raw(treeSelectFiledName)"];
                        debug_log("_searchKeyWord_", _searchKeyWord_@(modalId));

                        $@(modalId)_table.VbTable('refresh', true);
                    },
                    onNodeUnselected: function () {
                        _searchKeyWord_@(modalId) = "";
                        $@(modalId)_table.VbTable('refresh', true);
                    },
                    table:$@(modalId)_table
                });
            </text>
        }
        LoadTable({
            table: $@(modalId)_table,
            searchForm:'@(modalId)_search',
            onDblClickRow: DbClickRow_@(modalId),
            searchFun: SearchList_@(modalId)
        });
    }
   

    function SearchList_@(modalId)(searchList) {
        if (_searchKeyWord_@(modalId)) {
            searchList.push({
                KeyWords: _searchKeyWord_@(modalId),
                KeyField: "@(treeField)",
                FieldType: "@(treeFType)",
                ExpType: "@(treeEType)"
            });
        }
        @if (searchBindFunc.NotEmpty()) {
            <text>
                let searchBindFunc = '@(searchBindFunc)';
                if ( window[searchBindFunc] && typeof window[searchBindFunc] == "function") {
                    window[searchBindFunc].call();
                }
            </text>
        }
    }

    function Clear_@(modalId)() {
        Save_@(modalId)(false, true);
    }

    function DbClickRow_@(modalId)(row) {
        row = row || {};
        @if(!Model.IsSingleSelect){
            if (dbClick.Empty())
            {
                <text>
                    Submit_@(modalId)(row);
                </text>
            }
            else
            {
                <text>
                    @(dbClick)(row);
                </text>
            }
        }
    }
   
    function Save_@(modalId)(data, isClear) {
        debug_log('@(modalId)submit', isClear);
        @if (string.IsNullOrEmpty(submit))
        {
               <text>
                   let $target, value = '', rows = data || window.GetSelections($@(modalId)_table), name = '';
                   if (!rows|| !rows.length) {
                       abp.message.warn(abp.localization.localize("ChooseOneToOp"));
                   }
               </text>
               int i = 0;
            foreach (var tFields in Model.TargetFields)
            {
                 @if (Model.IsSingleSelect) {
                  <text>
                      if (!isClear) {
                          let row = Array.isArray(rows) ? rows[0] : rows;
                          value = row && row['@Html.Raw(Model.OriginFields[i])'] ? row['@Html.Raw(Model.OriginFields[i])'] : "";
                          name = row && row['@Html.Raw(Model.AjaxSelectNameField)'] ? row['@Html.Raw(Model.AjaxSelectNameField)'] : "";
                      }
                  </text>
                 }
                 else
                 {
                     <text>
                         if (!isClear) {
                             value = "";
                             rows.forEach(function(v) {
                                 value += (value ? "" : ",") + v && v['@(Model.OriginFields[i])'] ? v['@(Model.OriginFields[i])'] : "";
                             });
                         }
                     </text>
                     <text>
                         debug_log('@modalId',value,`@(string.Join(",", tFields))`)
                     </text>
                 }
                foreach (var targetFiled in tFields)
                {
                     <text>
                         $target = $(window.queryModalTarget + " @Html.Raw(targetFiled)");
                         if ($target.length) {
                             $target.val(value);
                             if ($target.is('select')) {
                                 if ($target.hasClass('ajax-select') && !isClear) {
                                     window.ChangAjaxSelectValue($target, value, name);
                                 } else {
                                     $target.trigger('change');
                                 }
                             }
                         }
                     </text>
                }
                i++;
            }
        }
        else
        {
          <text>
              submit(data,isClear);
          </text>
        }
        $("#@modalId").modal('hide');
    }


</script>

<!-- QUERY-MODAL  @(Model.ModalId)  END-->
@*
    
    @if (string.IsNullOrEmpty(submit))
    {
        <text>
            let value = '', rows = data || $@(modalId)_table.VbTable("getSelections"), name = '';
            if (!rows|| !rows.length) {
                abp.message.warn(abp.localization.localize("ChooseOneToOp"));
            }
        </text>
        int i = 0;
        foreach (var tFields in Model.TargetFields)
        {

              @if (Model.IsSingleSelect) {
                  <text>
                      if (!isClear) {
                          let row = Array.isArray(rows) ? rows[0] : rows;
                          value = row && row['@Html.Raw(Model.OriginFields[i])'] ? row['@Html.Raw(Model.OriginFields[i])'] : "";
                          name = row && row['@Html.Raw(Model.AjaxSelectNameField)'] ? row['@Html.Raw(Model.AjaxSelectNameField)'] : "";
                      }
                  </text>
              }
              else
              {
                  <text>
                      if (!isClear) {
                          value = "";
                          rows.forEach(function(v) {
                              value += (value ? "" : ",") + v && v['@(Model.OriginFields[i])'] ? v['@(Model.OriginFields[i])'] : "";
                          });
                      }
                  </text>
              }
                
            foreach (var targetFiled in tFields)
            {
                <text>
                    let $target = $(window.queryModalTarget + ' @Html.Raw(targetFiled)');
                    if ($target.length) {
                        $target.val(value);
                        if ($target.is('select')) {
                            if ($target.hasClass('ajax-select') && !isClear) {
                                window.ChangAjaxSelectValue($target, value, name);
                            } else {
                                $target.trigger('change');
                            }
                        }
                    }
                </text>
            }
            i++;
        }
    }
    else
    {
          <text>
              submit(data.isClear);
          </text>
    }
    
*@