ShWasher/src_0nline/ShwasherSys/ShwasherSys.Web/Views/Company/DeviceMgPlan.cshtml

@using ShwasherSys
@using ShwasherSys.Authorization.Permissions
@using ShwasherSys.Models.Layout
@using ShwasherSys.Views.Shared.New.Modals
@using ShwasherSys.Views.Shared.New.Table

@{
    ViewBag.Title = "设备维护计划";
    string activeMenu = PermissionNames.PagesCompanyDieMaintenanceDeviceMgPlan; //The menu item will be active for this page.
    List<SelectListItem> fixedAsset = ViewBag.FixedAsset, planType = ViewBag.PlanType;
    ViewBag.ActiveMenu = activeMenu;
    var searchForm = new SearchFormViewModal(new List<SearchItem>()
{
        new SearchItem("no","计划编号"),
        new SearchItem("name","设备名称").SetSearchItem(fixedAsset,isAddBlank:false),
        new SearchItem("expireDate","有效期限",FiledType.D,ExpType.GreaterOrEqual),
        new SearchItem("expireDate","至",FiledType.D,ExpType.LessOrEqual),
        new SearchItem("maintenanceDate","维护时间",FiledType.D,ExpType.GreaterOrEqual),
        new SearchItem("maintenanceDate","至",FiledType.D,ExpType.LessOrEqual),
        new SearchItem("nextMaintenanceDate","下一次维护时间",FiledType.Dnull,ExpType.GreaterOrEqual),
        new SearchItem("nextMaintenanceDate","至",FiledType.Dnull,ExpType.LessOrEqual),
    }, "search-form", false);

    var table = new TableViewModel("/api/services/app/DeviceMgPlan/GetAll", activeMenu, searchForm)
    .SetFields(new List<FieldItem>()
    {
        new FieldItem("no", "计划编号"),
        new FieldItem("planType", "计划类型","PlanTypeFormatter"),
        new FieldItem("name", "设备名称"),
        new FieldItem("expireDate", "有效期限","ExDateFormatter"),
        new FieldItem("maintenanceCycle", "维护周期"),
        new FieldItem("maintenanceDate", "维护时间","DateFormatter"),
        new FieldItem("nextMaintenanceDate", "下一次维护时间","MtDateFormatter"),
                    });
}
@section css{

}

@Html.Partial("New/Table/_Table", table)

@section modal{
    <!--Main Modal-->
    @{
        var modal = new ModalViewModel("设备计划", new ModalBodyViewModel(new List<Input>()
{
            new InputHide("id"),
            new InputHide("no", "计划编号"),
            new Input("planType", "计划类型").SetSelectOptions(planType),
            new InputHide("deviceNo").SetNotRequired(),
            //new Input("deviceName1", "设备名称",@class:"type type1",other:"onchange=DeviceNameChange(this)").SetSelectOptions(fixedAsset,isAddBlank:false),

            new Input("deviceName1", "模具名称",@class:"type type1").SetSearchIcon("query_mold_modal","#modal"),
            new Input("deviceName2", "设备名称",@class:"type type2").SetSearchIcon("query_device_modal","#modal"),
            new Input("name","设备名称",@class:"type type3"),
            new InputDate("expireDate", "有效期限"),
            new InputNumber("maintenanceCycle", "维护周期(天)",other:"min=1"),
            new InputDate("maintenanceDate", "维护时间"),
            new InputTextarea("description", "维护内容").SetNotRequired(),
        }));
    }
    @{
        var recordModal = new ModalViewModel("添加维护记录", "", new ModalBodyViewModel(new List<Input>()
{
            new InputHide("id"),
            new InputHide("no", "计划编号"),
            new Input("name", "设备名称"),
            new Input("address", "维护地点"),
            new InputDate("planDate", "计划维护时间").SetNotRequired(),
            new InputTextarea("description", "维护内容").SetNotRequired(),
        }), "record-modal");
    }
    @Html.Partial("New/Modals/_Modal", modal)
    @Html.Partial("New/Modals/_Modal", recordModal)
    @Html.Partial("Modals/Query/_Device", "deviceNo,name|deviceName2")
    @Html.Partial("Modals/Query/_Mold", "deviceNo,name|deviceName1")

}

@section scripts
{
    <script type="text/javascript">
        var $table = $('#table');
        $(function () {
            LoadTable();
            var funs = window.funs || { none: function () { console.log("No type"); } };
            funs["btnCreate"] = function (url) {
                $("#modal .type").closest('.form-group-sm').hide();
                $('#modal #planType').off("change.planType").off("change.planType1").on("change.planType",PlanTypeChange);
                BtnCreate({ data: { id: "",no:"1" }, disabled: "no,deviceName1,deviceName2" });
            }
            funs["btnUpdate"] = function () {
                var row = $table.bootstrapTable("getSelections")[0];
                if (row) {
                    $("#modal .type").closest('.form-group-sm').hide();
                    var data = $.extend({}, row, { deviceName1: row.name, deviceName2: row.name });
                    $('#modal #planType').off("change.planType").on("change.planType1",
                        function() {
                            PlanTypeChange(row.name);
                        });
                    BtnUpdate({ disabled: "no,maintenanceDate,planType,deviceName1,deviceName2" ,data:data});
                    //$("#modal .type").removeClass('required').closest('.form-group-sm').hide();
                    //$("#modal .type3").addClass('required').closest('.form-group-sm').fadeIn();
                    $('#modal #planType').off("change.planType1").on("change.planType",PlanTypeChange);
                    //$('#modal #planType').trigger("change");
                }
            };
            funs["btnMaintain"] = function (url) {
                var row = $table.bootstrapTable("getSelections")[0];
                if (row) {
                    var data = $.extend({}, row, { name: row.deviceName });
                    OpenModal({
                        url: url,
                        disabled: "no,name",
                        modal: $('#record-modal'),
                        data: data
                    });
                }
            };
        });

        function PlanTypeChange(name) {
            if (typeof name !=="string") {
                name = "";
            }
            var type = $('#modal #planType').val();
            $('#modal #deviceName1').val(name);
            $('#modal #deviceName2').val(name);
            $('#modal #name').val(name);
            $('#modal #deviceNo').val('');
            $("#modal .type").removeClass('required').closest('.form-group-sm').hide();
            if (type) {
                $("#modal .type" + type).addClass('required').closest('.form-group-sm').fadeIn();
            }
        }
        function DeviceNameChange(that) {
            $('#modal #name').val($(that).find('option:selected').text());
            $('#modal #deviceNo').val($(that).val());
        }
    </script>


    <!--格式化-->
    <script id="formatter-script" type="text/javascript">

        function ExDateFormatter(v, r, i, f) {
            return CheckDateFormatter(v, r, i, f, 3 * 30);
        }
        function MtDateFormatter(v, r, i, f) {
            return CheckDateFormatter(v, r, i, f, 10);
        }

        function CheckDateFormatter(v, r, i, f, day) {
            var value = DateFormatter(v, r, i, f);
            if (value <= new Date().format('yyyy-MM-dd')) {
                return '<span style="color:red" class="iwb-flash2">' + value + ' [已到期]</span>';
            }
            var date = new Date(new Date(new Date().getTime() + day * 1000 * 60 * 60 * 24)).format('yyyy-MM-dd');
            if (date >= value) {
                return '<span style="color:orange" class="iwb-flash">' + value + ' [即将到期]</span>';
            }
            return value;
        }
        function PlanTypeFormatter(v) {
            var name = $('#hid-planType option[value="' + v + '"]').text();
            switch (v) {
                case 1:
                    return '<span class="label label-info">' + name + '</span>';
                case 2:
                    return '<span class="label label-warning">' + name + '</span>';
                default:
                    return '<span class="label label-danger">' + name + '</span>';
            }
        }
        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>';
            }
        }
    </script>
}


<section style="display: none">
    <select id="hid-type">
        <option value=""></option>
    </select>

    @Html.DropDownList("hid-planType", planType)
</section>