ShWasher/src_0nline/ShwasherSys/ShwasherSys.Web/Views/ProductInfo/Standards.cshtml

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

@{
	/**/
	ViewBag.ActiveMenu = PermissionNames.PagesProductInfoStandards; //The menu item will be active for this page.
	ViewBag.Title = "标准管理";
	// List<SelectListItem> classification = ViewBag.Classification;
	var searchForm = new SearchFormViewModal(new List<SearchItem>()
	{

		new SearchItem("standardName","标准规格"),
		new SearchItem("standardFullName","标准名称"),
		new SearchItem("innerDiameter","内径",FiledType.S,ExpType.Equal),
        //new SearchItem("innerDiameter2","内径(最大)",FiledType.S,ExpType.Equal),
        new SearchItem("outDiameter","外径",FiledType.S,ExpType.Equal),
		//new SearchItem("outDiameter2","外径(最大)",FiledType.S,ExpType.Equal),

	}, false);
	var tableDetail = new TableViewModel("/api/services/app/Standards/GetDetail", null, null, "tableDetail")
		.SetFields(new List<FieldItem>()
		{
			new FieldItem("standardName", "名称"),
			new FieldItem("specs", "规格"),
			new FieldItem("innerDiameter", "内径",formatter:"InnerDiameterFormatter"),
			new FieldItem("outDiameter", "外径",formatter:"OutDiameterFormatter"),
			new FieldItem("thickness", "厚度",formatter:"ThicknessFormatter"),
			new FieldItem("height", "高度",formatter:"HeightFormatter"),
			new FieldItem("innerChamfer","内倒角",formatter:"InnerChamferFormatter"),
			new FieldItem("outChamfer", "外倒角",formatter:"OutChamferFormatter"),
			new FieldItem("thousandWeigh", "千件重"),
		}).SetPageArray(25);
}
@section css{
    <style>
		.drawing {
            width: 500px;
            height: 200px;
            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
            align-items: center;
        }
        #moreInfo {
            margin: 15px 5px;
            height: 230px;
        }
		.catalogInfo table {
			border-collapse: separate;
			border-spacing: 1px;
		}

		.catalogInfo tr td {
			border: 1px solid #ccc;
		}
			.catalogInfo tr td:nth-child(1) {
				background: #ccc;
				text-align: right;
			}
       
        .infovalue {
            width: 250px;
        }

        .infoPic {
            width: 800px;
            height: 100%;
            /* display: flex;
            justify-content: center;
            align-items: center;*/
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
        }
    </style>
}
<div class="table-box mr-4  iwb-bootstrap-table" id="table-box-table">
    <input type="hidden" id="IsLock" value="N" />
    @Html.Action("ToolMenu", "Layout", new { pageName = ViewBag.ActiveMenu ,searchForm})
    <table id="table"
           data-url="/api/services/app/Standards/GetDetailView"
           data-striped="true" data-id-field="id" data-unique-id="id"
           data-method="post"
           data-side-pagination="server"
           data-content-type="application/x-www-form-urlencoded; charset=UTF-8"
           data-cache="false"
           data-pagination="true" data-page-size="30" data-page-number="1" data-page-list="[30,50,100,200]" data-pagination-detail-h-align="right" data-pagination-h-align="left"
           data-query-params="QueryParams"
           data-response-handler="ResponseHandler"
           data-click-to-select="true"
           data-single-select="true">
        <thead>
			<tr class="row" id="header">
				<th data-field="state" data-checkbox="true"></th>
				@*<th data-align="center" data-field="standardAbbr">简写</th>*@
				@*<th data-align="center" data-field="standardAbbrName">标准简称</th>*@
				<th data-align="center" data-field="standardFullName">标准完整名称</th>
				<th data-align="center" data-field="standardName">标准规格</th>
				@*<th data-align="center" data-field="rigidity">硬度</th>
		<th data-align="center" data-field="param">参数</th>
		<th data-align="center" data-field="drawing" data-formatter="DrawingFormatter">图纸</th>
		<th data-align="center" data-field="" data-formatter="ActionFormatter">查看详情</th>*@
			<th data-align="center" data-field="specs">规格</th>
				<th data-align="center" data-field="innerDiameter" data-formatter="InnerDiameterFormatter">内径</th>
				<th data-align="center" data-field="outDiameter" data-formatter="OutDiameterFormatter">外径</th>
				<th data-align="center" data-field="thickness" data-formatter="ThicknessFormatter">厚度</th>
				<th data-align="center" data-field="height" data-formatter="HeightFormatter">高度</th>
				<th data-align="center" data-field="innerChamfer" data-formatter="InnerChamferFormatter">内倒角</th>
				<th data-align="center" data-field="outChamfer" data-formatter="OutChamferFormatter">外倒角</th>
				<th data-align="center" data-field="thousandWeigh" >千件重</th>

			</tr>
        </thead>
    </table>
</div>
<div class="box box-primary direct-chat direct-chat-primary" id="moreInfo">
	<div class="box-header with-border">
		<h3 class="box-title">规格详情</h3>

		<div class="box-tools pull-right">
			<button type="button" class="btn btn-box-tool" onclick="moreHide()"><i class="iconfont icon-close"></i></button>
		</div>
	</div>
	<!-- /.box-header -->
	<div class="box-body catalogInfo" style="">
		
	</div>
	
</div>
@section modal{
    
}

@section scripts
{
    <script type="text/javascript">
        var $table_height = $('body').height() - 230;
		var preHeight;
        $(function() {
            //show完毕前执行


            LoadTable(null,{
                onCheck: f_OnCheck,
                onUncheck: f_OnUncheck,
                onLoadSuccess: f_OnLoadSuccess
            });
            var funs = window.funs || { none: function() { console.log("No type"); } };
            funs["btnUpdate"] = function() { BtnUpdate({ readonly: "standardName" }); };

            //$("#Tool1").append(
            //    ` <button type="button" class="btn btn-default" onclick="importData()">
            //                   导入数据
            //       </button>
            //    `);

            $("#Tool1 button").hide();
            //initQueryTable();
            let changeHeight = function (bEle, aEle, mouseMoveAreaEle) {
				$("#table").bootstrapTable('resetView', { height: bEle.height() - 35 });
               
                preHeight = bEle.height() - 35;
                //$table.bootstrapTable('resetView', { height: bEle.height() - 35 });
                //$tableOrderItem.bootstrapTable('resetView', { height: aEle.height()-50 });
            }
          
			$("#table-box-table").SeparateBar({ move2Dom: "moreInfo", moveEvent: changeHeight });
            moreHide();
        });
        var checkStandardId;
        function moreHide() {
            // preHeight = $table_height;
           
            $("#table").bootstrapTable('resetView', { height: $table_height});
            $("#moreInfo").hide();
			$("#table-box-table").SeparateBar('isShow', false);
        }

        function moreShow(data) {
            abp.ajax({
                url: `/api/services/app/Standards/GetCatalog?id=${checkStandardId}`,
                async: true,
                type: "Post",
                contentType: 'application/json',
                isValidate: false,
                dataType: "json",
                success: function (res) {
                    $(".catalogInfo").html(formatterMore(res,data));
                    $("#table").bootstrapTable('resetView', { height: $table_height - 200 });
                    $("#moreInfo").show();
                    $("#table-box-table").SeparateBar('isShow', true);
                }
            });
        }
        function formatterMore(row,data) {
            /* <img style="width:100%;height:100%;" src="${queryFilePath('Certificate.EmployeeNo', row.employeeNo)}" />*/
            let img='';
			if (row.drawing) {
				let arrv = row.drawing.split('[>>]');
                arrv.forEach(function (value, i) {
                    img += `<img style="width:400px;height:150px" src="${value}"   />`;
                });

            }
			
			var info = `    <table>
                <tr>
                 <td>简写:</td>
                 <td class="infovalue">${row.standardAbbr}</td>
                 <td rowspan="5" class="infoPic">${img}</td>
                </tr>
                 <tr>
                 <td>标准规格:</td>
                 <td class="infovalue">${data.standardName}</td>
                </tr>
                <tr>
                 <td>标准简称:</td>
                 <td class="infovalue">${row.standardAbbrName}</td>
                </tr>
               
                <tr>
                 <td>硬度:</td>
                 <td>${row.rigidity ? row.rigidity : ""}</td>
                </tr>
                <tr>
                  <td>参数:</td>
                  <td>${ row.param ? row.param:""}</td>
                </tr>
            </table>`;
			 
			return info;
        }
        //     function initQueryTable() {
        //$tableDetail = LoadTable1(
        //             {
        //                 table: $("#tableDetail"),
        //                 height: 560,
        //                 //isPage: false,
        //                 //modal: "modalItem",
        //                 //searchForm: "itemSearch",
        //                 searchValidate: false,
        //                 searchList: tmpSearch,
        //                 onlySearchList: true
        //             });


        //     }
        //     function LoadTable1(option) {
        //         if (!option) {
        //             option = { table: "table" };
        //         }
        //         option.table = option.table ? option.table : "table";
        //         var $table = typeof option.table === 'string' ? $('#' + option.table) : $(option.table);
        //         if ($table.length < 1) {
        //             console.log('没有发现表格:', option.table);
        //         }
        //         $table.iwbTable(option);
        //         return $table;
        //     }
        function importData() {
            abp.ajax({
                url: '/api/services/app/Standards/ImportData',
                async: true,
                type: "Post",
                contentType: 'application/json',
                isValidate: false,
                dataType: "json",
                success: function(res) {
                    RefreshTable();
                }
            });
        }

        function f_OnCheck(row, ele) {
			console.table(row)
            checkStandardId = row.standardId;
           
            moreShow(row);
        }
        function f_OnUncheck(row, ele) {
            moreHide();
        }
        function f_OnLoadSuccess(data, table) {
            var $table = config.table;
            if (table) {
                if (typeof (table) === "string") {
                    $table = $("#" + table);
                } else {
                    $table = $(table);
                }
            }
            $table.find(".bs-checkbox").find("input").addClass("filled-in").after("<label></label");
            $table.find("thead th.bs-checkbox").off("click.checkOnTable").on(
                "click.checkOnTable",
                function () {
                    $(this).find("input").click();
                });
            _isSearching = false;
            abp.ui.clearBusy();
			setTimeout(function () {
				var alldata = $("#table").bootstrapTable('getData');
				if (alldata.length > 0) {
					$("#table").bootstrapTable('check', 0);
				} else {
                    moreHide();
				}
			},
				500);
        }
    </script>
    <script>
        var $tableDetail;
        var tmpSearch = [
            { KeyWords: "0", KeyField: "StandardId", FieldType: "1", ExpType: "0" }
        ];
        function InnerDiameterFormatter(v, r) {
            let v1 = r.innerDiameter1;
            let v2 = r.innerDiameter2;
            if (v1 && v2) {
                return v1 + '~' + v2;
            }
            if (v1) {
                return v1;
            }
            return '';
        }

        function OutDiameterFormatter(v, r) {
            let v1 = r.outDiameter1;
            let v2 = r.outDiameter2;
            if (v1 && v2) {
                return v1 + '~' + v2;
            }
            if (v1) {
                return v1;
            }
            return '';
        }

        function ThicknessFormatter(v, r) {
            let v1 = r.thickness1;
            let v2 = r.thickness2;
            if (v1 && v2) {
                return v1 + '~' + v2;
            }
            if (v1) {
                return v1;
            }
            return '';
        }

        function HeightFormatter(v, r) {
            let v1 = r.height1;
            let v2 = r.height2;
            if (v1 && v2) {
                return v1 + '~' + v2;
            }
            if (v1) {
                return v1;
            }
            return '';
        }

        function InnerChamferFormatter(v, r) {
            let v1 = r.innerChamfer1;
            let v2 = r.innerChamfer2;
            if (v1 && v2) {
                return v1 + '~' + v2;
            }
            if (v1) {
                return v1;
            }
            return '';
        }

        function OutChamferFormatter(v, r) {
            let v1 = r.outChamfer1;
            let v2 = r.outChamfer2;
            if (v1 && v2) {
                return v1 + '~' + v2;
            }
            if (v1) {
                return v1;
            }
            return '';
        }
    </script>
    
    <script>
        function DrawingFormatter(v, r) {
            let str = '';
            if (v) {
                let arrv = v.split('[>>]');
                arrv.forEach(function (value, i) {
                    console.log(i)
                    str += `<img width="80" height="30" src="${value}" onclick="f_showPic('${value}','${r.standardAbbrName}')" />`;
                });

            }
            return str;
        }

        let currCatalogName = '';

        function f_showPic(dataurl, sn) {
            currCatalogName = sn;

            $('#drawing_modal .drawing').empty();
            let w = $('#drawing_modal .drawing').width();
            let h = $('#drawing_modal .drawing').height();

            //$('#drawing_modal .drawing').append(`<img width="320px" height="120px" src="${dataurl}"  />`);
            $('#drawing_modal .drawing').append(`<img style="width:480px;height:170px" src="${dataurl}"  />`);
            $('#drawing_modal').modal("show", { keyboard: true });
        }



        // 保存按钮点击事件方法
        function saveImg() {

            var sampleImage = $('#drawing_modal .drawing img')[0]; // 找到图片所在的img标签
            var canvas = convertImageToCanvas(sampleImage); //创建画板
            var url = canvas.toDataURL("image/png"); //生成下载的url
            //var triggerDownload = $("#saveImg").attr("href", url).attr("download", "ewm.png"); // 把url放到我们的a标签中，并得到a标签对象
            //    triggerDownload[0].click(); //模拟点击一下a标签，即可下载啦！
            let pngName = currCatalogName ? currCatalogName + ".png" : "ewm.png";
            $("body").append(`<a id="tempLink" href="${url}" download="${pngName}"></a>`);
            $("#tempLink")[0].click();
            $("#tempLink").remove();
        }

        /**
         * 根据图片生成画布
         */
        function convertImageToCanvas(image) {
            var canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;
            canvas.getContext("2d").drawImage(image, 0, 0);
            return canvas;
        }

        function ActionFormatter(v, r) {
            let str = `<span class="table-action" onclick="f_showDetail(${r.id})"><i class="iconfont icon-right"></i>查看详情</span>`;

            return str;
        }

        function f_showDetail(id) {
            tmpSearch[0].KeyWords = id;
            $tableDetail.iwbTable('setSearchList', tmpSearch);
            $tableDetail.iwbTable('refresh');
            $("#detail_modal").modal('show');
        }
    </script>

}