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("deviceNo", "设备编号"),
        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,maintenanceCycle")

}

@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", readonly:"maintenanceCycle" });
				$('#modal #deviceName1 + .input-group-addon').show();
            }
            funs["btnUpdate"] = function () {
                var row = $table.bootstrapTable("getSelections")[0];
                if (row) {
                    $("#modal .type").closest('.form-group-sm').hide();
					var data = $.extend({}, row, { deviceName1: row.deviceNo, deviceName2: row.deviceNo });
                    $('#modal #planType').off("change.planType").on("change.planType1",
                        function() {
							PlanTypeChange(row.deviceNo);
                        });
					BtnUpdate({ disabled: "no,maintenanceDate,planType,deviceName1,deviceName2", data: data, readonly: "maintenanceCycle" });
                    //$("#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 #deviceName1 + .input-group-addon').hide();
					//$('#modal #deviceName2 + .input-group-addon').hide();
                    //$('#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
                    });
                }
            };
            $("#Tool1").append(
                '<div  class="tool-radio"><input name="radioType" type="radio" id="radioType1" checked value=""/><label for="radioType1">全部</label></div>' +
                '<div  class="tool-radio"><input name="radioType" type="radio" id="radioType2" value="1"/><label for="radioType2">待维护</label></div>');

            $(".tool-radio input[type='radio']").on('click',
                function(e) {
                    document.getElementById("SearchForm").reset();
                    GetSearchList();
                    RefreshTable();
                });
        });
		function GetSearchList() {

			var count = $("#SearchForm").find(".KeyWords").length;
			window._searchList = [];
			var radioType = $('input[name="radioType"]:checked').val();
			if (radioType) {
				window._searchList.push({ KeyWords: radioType, KeyField: "mpType", FieldType: "1", ExpType: "0" });
			}
			for (var i = 1; i <= count; i++) {
				var keyWords = $("#KeyWords-" + i).val();
				if (keyWords) {
					var keyField = $("#KeyField-" + i).val();
					var fieldType = $("#FieldType-" + i).val();
					var expType = $("#ExpType-" + i).val();
					window._searchList.push({
						KeyWords: keyWords,
						KeyField: keyField,
						FieldType: fieldType,
						ExpType: expType
					});
				}
			}
		}
        function PlanTypeChange(name) {
            if (typeof name !=="string") {
                name = "";
            }
            var type = $('#modal #planType').val();
            $('#modal #deviceName1').val(name);
            $('#modal #deviceName2').val(name);
            $('#modal #name').val('');
            $('#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) {
			if (r.planType === 1) {
				value = `${r.numberOfUsers}/${r.maintenanceCycle}`
				if (r.numberOfUsers >= r.maintenanceCycle) {
					return '<span style="color:red" class="iwb-flash2">' + value + ' [已到期]</span>'
				}
				if ((r.maintenanceCycle - r.numberOfUsers) > 0 && (r.maintenanceCycle - r.numberOfUsers) <= 10000) {
					return '<span style="color:red" class="iwb-flash2">' + value + ' [即将到期]</span>'
				}
				return value
            }
			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>