FISLib_Old/Vinno.FIS.Sonopost/Assets/wwwroot/pages/dicom/faillist.html

<style>
    #tablePager .layui-laypage {
        margin: 0;
    }

    #pageDicomFail .layui-table-body {
        overflow: hidden;
    }

    #pageDicomFail .layui-table-view .layui-btn-xs {
        padding: 0 8px;
    }

    #formDicomFailQuery {
        display: flex;
    }

    #formDicomFailQuery .layui-form-item {
        margin-bottom: 0;
    }
</style>
<div id="pageDicomFail">
    <div class="page-title" data-content="PageTitle4DicomFailList"></div>
    <div class="page-desc" data-content="PageDesc4DicomFailList"></div>
    <div id="formDicomFailQuery"
         class="layui-form"
         lay-filter="FormDicomFailQuery">
        <div class="layui-form-item" style="width: 280px">
            <select name="FailType" lay-filter="FailType">
                <option value="All" data-content="All"></option>
                <option value="UploadFail" data-content="UploadFailed"></option>
                <option value="ConvertFail" data-content="ConvertFailed"></option>
                <option value="Unknown" data-content="Unknown"></option>
            </select>
        </div>
        <div class="layui-form-item" style="margin-left: 5px">
            <button type="button"
                    lay-submit
                    lay-filter="Refresh"
                    class="layui-btn layui-btn-normal">
                <i class="layui-icon layui-icon-refresh"></i>
                <span data-content="Refresh"></span>
            </button>
        </div>
    </div>
    <table id="tableFailList" lay-filter="FailList" lay-even=""></table>
    <div id="tablePager"></div>
</div>
<script type="text/html" id="barFailItem">
    <a class="layui-btn layui-btn-normal layui-btn-xs"
       lay-event="download"
       data-content="Download"></a>
    {{# if(d.Status === 2||d.Status === 3){ }}
    <a class="layui-btn layui-btn-normal layui-btn-xs"
       lay-event="reupload"
       data-content="Reupload"></a>
    {{# } }}
    {{# if(d.Status != 0){ }}
    <a class="layui-btn layui-btn-normal layui-btn-xs"
       lay-event="delete"
       data-content="Delete"></a>
    {{# } }}
</script>
<script>
    function Page(app, runtime) {
        const { $api, $t } = runtime;
        const { table, laypage, util, layer, form } = layui;
        const FailReasonMap = {
            ConvertFail: 1,
            CreateScanDataFail: 2,
            UploadFail: 3,
            Unknown: 4
        };
        let tableIns = null;
        const PageSize = 15;
        let failType = "";

        this.onload = function () {
            tableIns = renderTable();
            bindTableBarEvents();
            queryPagedList(1, PageSize);
            form.on("select(FailType)", function (data) {
                failType = data.value === "All" ? "" : data.value;
                queryPagedList(1, PageSize);
            });
            form.on("submit(Refresh)", function (data) {
                queryPagedList(1, PageSize);
            });
        };

        this.onLanguageChanged = function (lang) {
            tableIns = renderTable();
            fixTableBarTranslation();
            queryPagedList(1, PageSize);
        };

        function fixTableBarTranslation() {
            setTimeout(function () {
                runtime.locale.translatePage($("#tableFailList").parent());
            });
        }

        function renderPager(count, index) {
            laypage.render({
                elem: "tablePager",
                count: count,
                curr: index,
                limit: PageSize,
                limits: [10, 15, 20, 25],
                jump: function (obj, first) {
                    !first && queryPagedList(obj.curr, obj.limit);
                }
            });
        }
        async function queryPagedList(index, size) {
            let request = {
                PageIndex: index,
                PageSize: size,
                FailType: failType
            };
            let res = await $api("dicom", "GetFailedList", request);
            if (res.IsSuccess) {
                let arr = res.Data.DataList;
                arr.forEach((x, i) => {
                    if (x.Status === FailReasonMap.ConvertFail) {
                        x.FailReason = $t("ConvertFailed");
                    }
                    else if (x.Status === FailReasonMap.UploadFail || x.Status === FailReasonMap.CreateScanDataFail) {
                        x.FailReason = $t("UploadFailed");
                    }
                    else if (x.Status === FailReasonMap.Unknown) {
                        x.FailReason = $t("Unknown");
                    }
                    x.CreateTime = util.toDateString(
                        new Date(x.CreateTime),
                        "yyyy/MM/dd HH:mm:ss"
                    );
                });
                tableIns.reload({ data: arr }); //通过此方式重载表格
                let count = res.Data.TotalCount;
                if (count > 0) {
                    $("#tablePager").show(function () {
                        renderPager(count, index);
                    });
                } else {
                    $("#tablePager").hide();
                }
                fixTableBarTranslation();
            } else {
                layer.msg.error($t(res.Code));
            }
        }

        function renderTable() {
            return table.render({
                id: "tableFailList",
                elem: "#tableFailList",
                skin: "nob",
                page: false,
                limit: PageSize,
                cols: [
                    [
                        {
                            field: "PatientId",
                            title: $t("PatientId")
                            // minWidth: 120
                        },
                        {
                            field: "PatientName",
                            title: $t("Name")
                            // minWidth: 120
                        },
                        {
                            field: "CreateTime",
                            title: $t("CreateTime")
                            // minWidth: 160
                        },
                        {
                            field: "FailReason",
                            title: $t("FailReason")
                            // minWidth: 160
                        },
                        {
                            field: "right",
                            title: $t("Operation"),
                            // minWidth: 120,
                            toolbar: "#barFailItem"
                        }
                    ]
                ],
                data: [],
                text: {
                    none: $t("NotAnyData")
                }
            });
        }
        function bindTableBarEvents() {
            table.on("tool(FailList)", async function (obj) {
                const { data, event, tr } = obj;
                if (event === "download") {
                    window.utils.file.download("/download/dicom?id=" + data.Id);
                } else if (event === "reupload") {
                    let res = await $api(
                        "dicom",
                        "ReuploadFailedRecord",
                        {
                            Id: data.Id
                        }
                    );
                    if (res.IsSuccess) {
                        tr.find("td[data-field=right]>div")
                            .empty()
                            .append(`<span>${$t("Retried")}</span>`);
                        // layer.msg.success($t('Success'));
                    } else {
                        layer.msg.error($t(res.Code));
                    }
                }
                else if (event === "delete") {
                    let res = await $api(
                        "dicom",
                        "DeleteFailedRecord",
                        {
                            Id: data.Id
                        }
                    );
                    if (res.IsSuccess) {
                        tr.find("td[data-field=right]>div")
                            .empty()
                            .append(`<span>${$t("Deleted")}</span>`);
                        // layer.msg.success($t('Success'));
                    } else {
                        layer.msg.error($t(res.Code));
                    }
                }
            });
        }
    }
</script>