VberAdmin_V4/SourceCode/Src/VberAdmin.Web.Mvc/Views/Wf/Apply.cshtml

@using VberAdmin.Web.Models.Table
@using Microsoft.AspNetCore.Mvc.Rendering
@using VberAdmin.Web.Models.Search
@using VberZero

@{
    //ViewBag.Title = L("StateTitle");
    ViewBag.Title = "我的工作流程申请";
    string activeMenu = PermissionNames.VberMyWorkflowApplyMg; //The menu item will be active for this page.
    ViewBag.ActiveMenu = activeMenu;

    var table = new VmTable(VzConsts.ApiAppUrl + "Workflow/GetMyWorkflow", activeMenu, new VmSearch(new List<VmSearchItem>()
    {
        //new SearchItem("dd", L("stateName")).SetSearchIcon("q_u","ddd"),
        //new SearchItem("ff", L("stateName")).SetSelectItem("<option value=\"\">000</option><option value=\"S10001\">111</option><option value=\"S10002\">222</option>").SetSearchIcon("q_u","fff"),
        //new SearchItem("name1", L("stateName"),FieldType.D),
        //new VmSearchItem("id", "流程编号"),
        new VmSearchItem("title", "流程名称")
    })).AddItems(new List<VmTableItem>()
    {
        //new("id", "流程编号"),
        new("title", "流程名称"),
        //new("userName", "提交人"),
        new VmTableItem("creationTime", "提交时间","DateTimeFormatter").WithSort(),
        new("status", "审核状态","WorkflowStatusFormatter"),
        new("completeTime", "完成时间","DateTimeFormatter"),
        new("currentStepTitle", "当前阶段",""),
        new("", "操作","ActionsFormatter"),
        
    });
    //var modalBody = new VmModalBody()
    //    .AddInputs(new List<VmInputBase>()
    //    {
    //        new VmInputHidden("id"),
    //    })
    //    .AddInput(new VmInput("displayValue", L("displayValue")))
    //    .AddGroup(new List<VmInputBase>()
    //    {
    //        new VmInput("name", L("stateName")).WithDisabled(),
    //        new VmInput("codeKey", L("codeKey")).WithDisabled(),
    //        new VmInput("codeValue", L("codeValue")).WithDisabled(),
            
    //    }, 3);
    //var modal = new VmModal().WithHeaderAndFooter(L("state"), "").WithBody(modalBody);
}
@await Html.PartialAsync("_Table", table)

<div class="bg-white"
     id="audit_flow_detail"
     data-kt-drawer="true"
     data-kt-drawer-activate="true"
     @*data-kt-drawer-toggle="#"*@
     data-kt-drawer-close="#detail_close"
     data-kt-drawer-name="audit_flow_detail"
     data-kt-drawer-overlay="true"
     data-kt-drawer-width="{default:'300px', 'md': '600px'}"
     data-kt-drawer-direction="end">
    <div class="card rounded-0 w-100">
        <div class="card-header pe-5">
            <div class="card-title">
                <div class="d-flex justify-content-center flex-column me-3">
                    <a href="#" class="fs-4 me-1 text-gray-800 lh-1"><span class="px-2 fw-bolder text-primary " id="flow-title"></span> <span id="flow-status"></span></a>
                </div>
            </div>
            <div class="card-toolbar">
                <div class="btn btn-sm btn-icon btn-active-light-primary" id="detail_close">
                    <span class="svg-icon svg-icon-2">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor"></rect>
                            <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor"></rect>
                        </svg>
                    </span>
                </div>
            </div>
        </div>
        <div class="card-body hover-scroll-overlay-y pt-5">
            <div class="fs-4 me-1 lh-1 mb-3 fw-bolder">申请详情：</div>
            <div  class="px-5"><dl class="d-flex dl-line"><dt class="pe-2 fw-bolder">申请人：</dt><dd class="px-2 text-primary" id="flow-user-name"></dd></dl></div>
            <div id="flow-detail" class="px-5"></div>
            <div class="separator mb-3"></div>
            <div class="fs-4 me-1 lh-1 mb-3 fw-bolder">审批详情：</div>
            <div class="timeline-box" id="audit-records">
                <div>

                </div>
            </div>
        </div>
    </div>
</div>
@section scripts
{
    <script src="~/js/workflowHelper.js" asp-append-version="false"></script>
    <script type="text/javascript">
        let $table = $('#table'), curWorkflowId = '', curExecutionRecord = [];
        $(function() {
            var funs = window.LoadTable();
            funs["btnCreate"] = function() {
            };

            funs["btnUpdate"] = function() {
                let row = $table.VbTable("getSelection");
                if (row) {
                }
            };
        });


        function Detail(id) {
            const flow_detail_drawer = KTDrawer.getInstance($('#audit_flow_detail')[0]);
            curWorkflowId = id;
            $.vbAjax4({
                url: abp.appUrl + "workflow/getDetails?id=" + id,
                success: (res) => {
                    curExecutionRecord = res.executionRecords;
                    $('#flow-user-name').html(res.userName);
                    $('#flow-title').html(res.title);
                    $('#flow-status').html(WorkflowStatusFormatter(res.status));
                    ApplyDetail(res.data, res.inputs);
                    RecordDetail(id, res.executionRecords);
                    flow_detail_drawer.show();
                }
            });

            function ApplyDetail(data, inputs) {
                if (inputs && inputs.length) {
                    let str = '';
                    inputs.forEach(v => {
                        const col = v.length ? 12 / v.length : 0;
                        str += `<div class="row">`;
                        v.forEach(vv => {
                            str += `<dl class="col-${col} d-flex dl-line"><dt class="pe-2 fw-bolder">${vv.label}：</dt><dd >${GetInputValueText(vv)}</dd></dl>`;
                        });
                        str += `</div>`;
                    });
                    $('#flow-detail').html(str);
                }

                function GetInputValueText(input) {
                    if (input.type == "uploadImages") {
                        return `<img class="w-50 h-50" src="${data[input.name]}"/>`;
                    } else if (input.type == "uploadFiles") {
                        return `<a href="${data[input.name]}">查看附件</a>`;
                    } else if (input.items && input.items.length) {
                        const val = data[input.name];
                        if (typeof val == 'string') {
                            const item = input.items.find(v => v.value == val);
                            return item ? item.label : "";
                        } else if (val && val.length) {
                            let valueStr = '';
                            val.forEach(v => {
                                const item = input.items.find(vv => vv.value == v);
                                valueStr += item ? `${valueStr ? "，" : ""}${item.label}` : "";
                            });
                            return valueStr;
                        }
                    }
                    return data[input.name] || "";
                }
            }
        }

        function RecordDetail(id, executionRecords) {
            $.vbAjax4({
                url: abp.appUrl + "WorkflowAudit/GetAuditRecords",
                data: { id: id },
                success: r => { AuditRecordsFormatter(executionRecords, r) }
            });

            function AuditRecordsFormatter(data, auditData) {
                $('#audit-records').html('');
                if (data && data.length) {
                    let i = 0;
                    data.forEach(v => {
                        i++;
                        let records = auditData.auditRecords[v.executionPointerId];
                        if (records && records.length) {
                            let str = ``, styleStr = "bg-primary";
                            str += `<div class="timeline-label"><span class="{0} text-white px-3">${v.stepTitle}</span></div>`;
                            str += `<div>`;
                            records.forEach(vv => {
                                str += `<div class="timeline-item">`;
                                if (vv.status == 0  && i==data.length) {
                                    str += `<div class="timeline-header">`;
                                    str += HeadFormatter(vv);
                                    str += `</div>`;
                                } else if (vv.status !== 0 && vv.remark) {
                                    styleStr = vv.status == 1 ? "bg-success" : "bg-danger";
                                    str += `<div class="timeline-header">`;
                                    str += HeadFormatter(vv);
                                    str += `<div class="my-2"><span class="ps-5 fw-bolder"> 备注：</span>${vv.remark || ""}</div>`;
                                    str += `</div>`;
                                }
                                str += `</div>`;
                            });
                            str += `</div>`;
                            $('#audit-records').append(str.format(styleStr));
                        }
                    });
                }
            }

            function HeadFormatter(data) {
                var str = `<div class="d-flex flex-stack  align-items-cente mx-3">
                               <div>
                                   <div class="symbol symbol-25px"><img class="" src="${data.userHeadPhoto}" /></div>
                                   <span class="mx-2 fw-bolder">${data.userIdentityName}</span>
                                   <span class="">${AuditStatusFormatter(data.status)}</span>
                               </div>
                               <div class="fs-6"><span class="text-muted">${DateTimeFormatter(data.auditTime) || ""}</span></div>
                           </div>`;
                return str;
            }
        }
    </script>

    <script id="formatter" type="text/javascript">
        function AuditStatusFormatter(v) {
            var name = $('#hid-auditStatus option[value="' + v + '"]').text();
            if (v === 0) {
                return '<span class="badge badge-light-primary">' + name + '</span>';
            } else if (v === 1) {
                return '<span class="badge badge-light-success">' + name + '</span>';
            } else if (v === 2) {
                return '<span class="badge badge-light-danger">' + name + '</span>';
            } else if (v === 3) {
                return '<span class="badge badge-light-warning">' + name + '</span>';
            }
            return v;
        }

        function WorkflowStatusFormatter(v) {
            var name = $('#hid-wfStatus option[value="' + v + '"]').text();
            if (v === 0) {
                return '<span class="badge badge-primary">' + name + '</span>';
            } else if (v === 1) {
                return '<span class="badge badge-success">' + name + '</span>';
            } else if (v === 2) {
                return '<span class="badge badge-danger">' + name + '</span>';
            } else if (v === 3) {
                return '<span class="badge badge-warning">' + name + '</span>';
            }
            return v;
        }

        function ActionsFormatter(v, r) {
            let str = '';
            str += `<span class="table-action" onclick="Detail('${r.id}')">流程详情${icon}</span>`;
            return str;
        }


    </script>
}

<section style="display: none">
    <select id="hid-auditStatus">
        @Html.Raw(ViewBag.AuditStatus)
    </select>
    <select id="hid-wfStatus">
        @Html.Raw(ViewBag.WfStatus)
    </select>
</section>