页面
@{ ViewBag.Title = "Pos Banner管理"; Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml"; } <style type="text/css"> .rest-row { border: 1px solid #ccc; border-radius: 4px; line-height: 30px; align-items: center; display: inline-grid; margin-top: 5px; margin-right: 10px; background-color: #daf3e2; } .rest-row label { margin-bottom: 0px; padding-left: 5px; padding-right: 5px; } .rest-row label:hover { background-color: #f55a5a; color: #fff; text-decoration: line-through; } .rest-row i { margin: 0 10px; } div.file-drop-zone-title { padding: 10px 10px !important; } .file-details-cell { display: none !important; } span.drag-handle-init { display: none !important; } tr.kv-preview-thumb td.kv-file-content { width:260px !important; } </style> <script src="https://cdn.bootcss.com/bootstrap-fileinput/5.0.6/js/fileinput.js"></script> <script src="https://cdn.bootcss.com/bootstrap-fileinput/5.0.6/js/locales/zh.min.js"></script> <link href="https://cdn.bootcss.com/bootstrap-fileinput/5.0.6/css/fileinput.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/bootstrap-fileinput/5.0.6/themes/explorer/theme.min.js"></script> <link href="https://cdn.bootcss.com/bootstrap-fileinput/5.0.6/themes/explorer/theme.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/bootbox.js/5.3.2/bootbox.min.js"></script> <div class="page-header"> <div class="container"> <div class="row"> <div class="col-xs-6"> <label for="firstname" class="col-sm-3 control-label text-right" style="line-height:34px">城市</label> <div class="col-sm-9"> @Html.DropDownList("posCity", ViewData["pos_city"] as IEnumerable<SelectListItem>, "请选择", new { @class = "form-control" }) </div> </div> <div class="col-xs-6"> <label for="lastname" class="col-sm-3 control-label text-right" style="line-height:34px">品牌</label> <div class="col-sm-9"> @Html.DropDownList("posBrand", ViewData["pos_brand"] as IEnumerable<SelectListItem>, "请选择", new { @class = "form-control" }) </div> </div> <div class="col-xs-6"> <label for="lastname" class="col-sm-3 control-label text-right" style="line-height:34px">门店</label> <div class="col-sm-9"> @Html.DropDownList("posStore", ViewData["pos_store"] as IEnumerable<SelectListItem>, "请选择", new { @class = "form-control" }) </div> </div> <div class="col-xs-6"> <label for="lastname" class="col-sm-3 control-label text-right" style="line-height:34px;white-space: nowrap;">是否失效</label> <div class="col-sm-9"> <label class="radio-inline"> <input type="radio" name="isInvalid" id="isInvalidAll" value="" checked>所有 </label> <label class="radio-inline"> <input type="radio" name="isInvalid" id="isInvalidOn" value="0">有效 </label> <label class="radio-inline"> <input type="radio" name="isInvalid" id="isInvalidOff" value="1">失效 </label> </div> </div> </div> <div class="row" style="margin-top:15px;"> <div class="col-sm-offset-4 col-sm-2" style="margin-top:10px"> <button type="button" id="btnSearch" class="btn btn-block btn-small btn-primary">检索</button> </div> <div class="col-sm-2" style="margin-top:10px"> <button type="button" id="btnClear" class="btn btn-block btn-small btn-primary">清空</button> </div> </div> </div> </div> <div id="BannerEditToolbox"> <button class="btn btn-default" id="btnAddPicture"><span class="glyphicon glyphicon-plus"></span>新增</button> <button class="btn btn-default" id="btnDeletePicture"><span class="glyphicon glyphicon-remove"></span> 删除</button> </div> <div class="page-content"> <table id="tblPosBannerInfo" class="table bootstrap-table"> <thead> <tr> <th data-checkbox='true'></th> <th data-class='rowno'>No</th> <th data-field='brand_explain'>Banner说明</th> <th data-field='img_x' data-formatter="imageXFormatter">大图</th> <th data-field='img_s' data-formatter="imageSFormatter">小图</th> <th data-field='validity_begin'>有效开始日</th> <th data-field='validity_end'>有效结束日</th> <th data-field='sort' data-visible="false">排序</th> <th data-events="uptBannerStore" data-formatter="addBannerStoreButton" data-align="center">操作</th> </tr> </thead> </table> </div> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="popPicture"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <form id="contentForm"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="modalShow">请选择图片</h4> </div> <div class="modal-body" style="height:650px;overflow-x: auto;"> <input type="hidden" name="banner_id" id="hidBannerId" /> <div class="row"> <label for="lastname" class="col-sm-2 control-label text-right" style="line-height:34px">Banner说明</label> <div class="col-sm-8"> @Html.Editor("Description", "", new { htmlAttributes = new { @class = "form-control", maxlength = "100" } }) </div> </div> <div class="row"> <label for="lastname" class="col-sm-2 control-label text-right" style="line-height:34px">Banner图片</label> <div class="col-xs-4 img-file-area" style="padding-bottom: 5px;"> <input type="file" name="image-x[]" id="image-x" class="up-file-image" /> <input type="hidden" id="hidImgUrlx" class="file-img-url" /> </div> <div class="col-xs-4 img-file-area" style="padding-bottom: 5px;"> <input type="file" name="image-s[]" id="image-s" class="up-file-image" /> <input type="hidden" id="hidImgUrls" class="file-img-url" /> </div> </div> <div class="row"> <label for="" class="col-sm-2 control-label text-right" style="line-height:34px">有效期</label> <div class="col-sm-4"> <div class="input-group date"> <input type="text" class="form-control" id="txtValidityBegin"> <span class="input-group-addon"> <i class="glyphicon glyphicon-calendar"></i> </span> </div> </div> <div class="col-sm-4"> <div class="input-group date"> <input type="text" class="form-control" id="txtValidityEnd"> <span class="input-group-addon"> <i class="glyphicon glyphicon-calendar"></i> </span> </div> </div> </div> <div class="row"> <label for="" class="col-sm-2 control-label text-right" style="line-height:34px">选择门店</label> <div class="col-sm-4"> @Html.DropDownList("posCityId", ViewData["pos_city"] as IEnumerable<SelectListItem>, "选择城市", new { @class = "form-control" }) </div> <div class="col-sm-4"> @Html.DropDownList("posBrandId", ViewData["pos_brand"] as IEnumerable<SelectListItem>, "选择品牌", new { @class = "form-control" }) </div> </div> <div class="row"> <label for="" class="col-sm-2 control-label text-right" style="line-height:34px"> </label> <div class="col-sm-4"> @Html.DropDownList("popPosStoreId", ViewData["pos_store"] as IEnumerable<SelectListItem>, new { @class = "form-control selectpicker", @title = "选择门店", @multiple = "true" }) </div> <div class="col-sm-6" style="padding:0px;"> <button type="button" id="btnAddMd" class="btn btn-small btn-success">添加门店</button> <button type="button" id="btnAddMdAll" class="btn btn-small btn-success">添加全部门店</button> <button type="button" id="btnDelMdAll" class="btn btn-small btn-success">删除选择门店</button> </div> </div> <div id="popStoreList" class="row"> <label class="col-sm-2 control-label text-right">适用的门店列表</label> <div class="col-sm-10"> <div class="no-store-info"><span>请选择Banner适用的门店</span></div> <div class="select-rest-area hidden"></div> </div> </div> </div> <div class="modal-footer" style="text-align:center;"> @*<button type="button" class="btn btn-primary" data-dismiss="modal" id="close">关闭</button>*@ <button type="button" class="btn btn-primary" id="btnSaveBanner">保存</button> </div> </form> </div> </div> </div> <script type="text/javascript"> // 上传图片的默认设置 let defaultFileinputOptions = { language: 'zh',//设置语言 uploadUrl: "@Url.Action("UploadPic")",//上传路径 enctype: 'multipart/form-data', theme: "explorer", previewFileType: "image", browseClass: "btn btn-success btn-block", allowedFileExtensions: ['jpg', 'png', 'jpeg'], overwriteInitial: true, uploadAsync: true, // 是否为异步上传 removeFromPreviewOnError: true, //当选择的文件不符合规则时，例如不是指定后缀文件、大小超出配置等，选择的文件不会出现在预览框中，只会显示错误信息 maxFileSize: 2000,//单位为kb，如果为0表示不限制文件大小 //dropZoneTitle: zoneTitle, showCancel: false, // 不显示取消按钮 showCaption: false, //不显示标题 showRemove: false, //不显示删除按钮 showUpload: false, //不显示上传按钮 showClose: false, // 是否显示关闭按钮 autoReplace: true,//是否自动替换当前图片，设置为true时，再次选择文件，会将当前的文件替换掉。 minFileCount: 1, // 表示同时最小上传的文件个数 maxFileCount: 1,//上传图片最大数量 mainClass: "file-caption-main", //文件输入框为大型号 uploadExtraData: function (previewId, index) { //向后台传递id作为额外参数，是后台可以根据id修改对应的图片地址。 var obj = {}; obj.id = previewId; return obj; }, previewFileIcon: '<i class="fa fa-file"></i>', initialPreviewAsData: true, // defaults markup preferIconicPreview: false, // 是否优先显示图标 false 即优先显示图片 previewFileIconSettings: { // configure your icon file extensions 'jpg': '<i class="fa fa-file-photo-o text-danger"></i>', 'png': '<i class="fa fa-file-photo-o text-primary"></i>', 'jpeg': '<i class="fa fa-file-photo-o text-primary"></i>' }, layoutTemplates: { actionUpload: '',//去除上传预览缩略图中的上传图片； }, fileActionSettings: { removeClass: 'btn btn-sm btn-kv btn-default btn-outline-secondary hidden', } }; /** * 表格按钮事件绑定 */ var uptBannerStore = { /** * 编辑按钮处理 * param e * param value * param row * param index */ 'click #btnStoreEdit': function (e, value, row, index) { // 清空Popup画面的值 initPopUpPicture(); // 初期化上传按钮 initFileUpload(); $.ajax({ type: "Get", //提交的方法 url: "@Url.Action("GetBannerInfoById")", //提交的地址 data: { bannerId: row.id }, success: function (result) { var data = result.data; if (result.retCode == 0) { // Banner图ID $("#popPicture").find("#hidBannerId").val(data.banner_id); // Banner说明 $("#popPicture").find("#Description").val(data.banner_explain); // Brand图片URL(大) $("#popPicture").find("#hidImgUrlx").val(data.img_x); // 之前加载过的化，先销毁 if ($("#popPicture").find("#image-x").closest("div.file-input").length > 0) { $("#popPicture").find("#image-x").fileinput('destroy'); } var imgXOptionx = defaultFileinputOptions; imgXOptionx.dropZoneTitle = "请选择Banner的大图1(图片大小不超过2M)"; imgXOptionx.initialPreview = [data.img_x]; $("#popPicture").find("#image-x").fileinput(imgXOptionx); // Brand图片URL(小) $("#popPicture").find("#hidImgUrls").val(data.img_s); // 之前加载过的化，先销毁 if ($("#popPicture").find("#image-s").closest("div.file-input").length > 0) { $("#popPicture").find("#image-s").fileinput('destroy'); } var imgXOptions = defaultFileinputOptions; imgXOptions.dropZoneTitle = "请选择Banner的小图2(图片大小不超过2M)"; imgXOptions.initialPreview = [data.img_s]; $("#popPicture").find("#image-s").fileinput(imgXOptions); // 有效期 $("#popPicture").find("#txtValidityBegin").val(data.validity_begin); $("#popPicture").find("#txtValidityEnd").val(data.validity_end); // 选择的门店列表 for (var i = 0; i < data.store_id_list.length; i++) { var item = data.store_id_list[i]; let addRestItem = "<div class='rest-row' name='storeRow'>" + "<label>" + item.store_name + "</label>" + "<input type='hidden' class='rest-id' value='" + item.store_id + "'>" + "</div> "; $("#popStoreList div.select-rest-area").append(addRestItem); } // 设置门店区域是否可显示 storeListAreaDisplay(); // 打开PopUp画面 $("#popPicture").modal({ backdrop: 'static', //点击遮罩层不会被关闭 keyboard: false //按下esc键不会被关闭 }); } else { bootbox.alert({ size: "small", title: "错误信息", message: result.retMsg }); } } }); } }; /** * 设置门店区域是否可显示 */ var storeListAreaDisplay = function () { if ($("#popStoreList").find("div.rest-row").length > 0) { $("#popStoreList div.select-rest-area").removeClass("hidden").show(); $("#popStoreList div.no-store-info").addClass("hidden").hide(); } else { $("#popStoreList div.no-store-info").removeClass("hidden").show(); $("#popStoreList div.select-rest-area").addClass("hidden").hide(); } } /** * 添加表格里的按钮 */ var addBannerStoreButton = function (value, row, index) { return [ '<button id="btnStoreEdit" type="button" class="btn btn-default">编辑</button>', ].join('');//把数组中的所有元素放入一个字符串 }; /** * 图片格式化 */ var imageSFormatter = function (value, row, index) { return [ "<img style='width: 50px;height: 50px;' src='" + row['img_s'] + "' alt=''>" ].join(''); }; /** * 图片格式化 */ var imageXFormatter = function (value, row, index) { return [ "<img style='width: 50px;height: 50px;' src='" + row['img_x'] +"' alt=''>" ].join(''); }; /** * Popup画面的初期化 */ var initPopUpPicture = function () { // 选择的门店列表 $("#popPicture").find(".select-rest-area").html(""); // Banner图ID $("#popPicture").find("#hidBannerId").val(""); // Banner说明 $("#popPicture").find("#Description").val(""); // Brand图片URL(大) $("#popPicture").find("#hidImgUrlx").val(""); // Brand图片URL(小) $("#popPicture").find("#hidImgUrls").val(""); // 有效期 $("#popPicture").find("#txtValidityBegin").val(""); $("#popPicture").find("#txtValidityEnd").val(""); }; /** * 初期化上传控件 */ var initFileUpload = function () { var finleInputFun = function (fileItem, zoneTitle) { // 之前加载过的化，先销毁 if ($(fileItem).closest("div.file-input").length > 0) { $(fileItem).fileinput('destroy'); } defaultFileinputOptions.initialPreview = []; defaultFileinputOptions.dropZoneTitle = zoneTitle; $(fileItem).fileinput(defaultFileinputOptions).on('filebatchselected', function (event, numFiles, label) { $(fileItem).fileinput("upload"); }).on('filedeleted', function () { $(fileItem).fileinput('refresh', defaultFileinputOptions); }).on("fileuploaded", function (e, data) { // 上传成功 var res = data.response; if (res.code == 0) { // 上传成功 $(fileItem).closest("div.img-file-area").find("input.file-img-url").val(res.files[0].fileurl); } else { $(fileItem).closest("div.img-file-area").find("input.file-img-url").val(""); $(fileItem).fileinput('refresh', defaultFileinputOptions); } }); }; finleInputFun($("#popPicture #image-x"), "请选择Banner的大图(图片大小不超过2M)"); finleInputFun($("#popPicture #image-s"), "请选择Banner的小图(图片大小不超过2M)"); } $(function () { // 表格对象 var posBannerInfo = $("#tblPosBannerInfo"); // 检索处理 var searchFunc = function () { var getDetailsOptions = { // 明細情報取得のURL url: "@Url.Action("GetBannerInfo")", // 提交方式 method: 'get', toolbar: "#BannerEditToolbox", // 提交数据 postdata: function () { return { cityId: $("#posCity").val(), brandId: $("#posBrand").val(), storeId: $("#posStore").val(), isInvalid: $("input[name='isInvalid']:checked").val() }; } }; app.tables.load(posBannerInfo, getDetailsOptions); }; /** * 城市和品牌修改时，从新取得门店信息 */ var changePosStoreOptions = function () { let cityId = $("#posCityId").val(); let brandId = $("#posBrandId").val(); $.ajax({ type: "Get", //提交的方法 url: "@Url.Action("GetStoreInfo")", //提交的地址 data: { cityId: cityId, brandId: brandId }, success: function (data) { $('#popPosStoreId').selectpicker('destroy'); $('#popPosStoreId').html(""); $.each(data, function (i, item) { $('#popPosStoreId').append("<option value='" + item.Value + "'>" + item.Text + "</option>"); }); $('#popPosStoreId').selectpicker({ 'selectedText': 'cat', 'liveSearch': true, 'actionsBox': true, 'noneSelectedText': '请选择', 'deselectAllText': '全不选', 'selectAllText': '全选', }); } }); }; /** * 添加门店 */ var addRestInfo = function (selectItem) { var isChecked = true; $("#popStoreList input[type='hidden']").each(function () { if ($(selectItem).val() == $(this).val()) { isChecked = false return; } }); if (isChecked == true) { let addRestItem = "<div class='rest-row' name='storeRow'>" + "<label>" + $(selectItem).html() + "</label>" + "<input type='hidden' class='rest-id' value='" + $(selectItem).val() + "'>" + "</div> "; $("#popStoreList div.select-rest-area").append(addRestItem); // 设置门店区域是否可显示 storeListAreaDisplay(); } } /** * 删除门店 */ $("#popStoreList").on("click", "div.rest-row>label", function () { $(this).closest("div.rest-row").remove(); // 设置门店区域是否可显示 storeListAreaDisplay(); }); /** * 点击添加门店 */ $("#btnAddMd").on("click", function () { var selectVal = $("#popPosStoreId").val(); $("#popPosStoreId option").each(function () { if (selectVal.indexOf($(this).val()) > -1) { addRestInfo(this); } }) return false; }); /** * 点击添加全部门店 */ $("#btnAddMdAll").on("click", function () { $("#popPosStoreId option").each(function () { addRestInfo(this); }) return false; }); /** * 删除选择的门店 */ $("#btnDelMdAll").on("click", function () { $("div.select-rest-area").find("div.rest-row").each(function () { $(this).remove(); }); // 设置门店区域是否可显示 storeListAreaDisplay(); }); /** * 城市变更事件 */ $("#posCityId").change(function () { changePosStoreOptions(); }); /** * 品牌变更事件 */ $("#posBrandId").change(function () { changePosStoreOptions(); }); /** * 画面项目检查 */ var isSaveCheck = function () { let errMsg = []; let popForm = $("#contentForm"); if ($(popForm).find("#Description").val() == "") { errMsg.push("请输入Banner说明"); } if ($(popForm).find("#hidImgUrlx").val() == "") { errMsg.push("请选择Banner图片（大图）"); } if ($(popForm).find("#hidImgUrls").val() == "") { errMsg.push("请选择Banner图片（小图）"); } if ($(popForm).find("#txtValidityBegin").val() == "") { errMsg.push("请选择有效期开始日"); } if ($(popForm).find("#txtValidityEnd").val() == "") { errMsg.push("请选择有效期结束日"); } if ($(popForm).find("div.select-rest-area input:hidden").length == 0) { errMsg.push("请选择适用门店"); } if (errMsg.length > 0) { bootbox.alert({ size: "small", title: "错误信息", message: errMsg.join("<br>"), callback: function () { /* your callback code */ } }); return false; } else { return true; } }; /** * 保存按钮的处理 */ $("#btnSaveBanner").click(function () { if (isSaveCheck()) { // 选择的门店列表 var storeIds = []; $(".select-rest-area input:hidden").each(function () { storeIds.push($(this).val()); }); // 需要提交的数据 var postData = { // Banner图ID banner_id: $("#popPicture").find("#hidBannerId").val(), // Banner说明 brand_explain: $("#popPicture").find("#Description").val(), // Brand图片URL(大) img_x: $("#popPicture").find("#hidImgUrlx").val(), // Brand图片URL(小) img_s: $("#popPicture").find("#hidImgUrls").val(), // 有效期 validity_begin: $("#popPicture").find("#txtValidityBegin").val(), validity_end: $("#popPicture").find("#txtValidityEnd").val(), // 门店信息 store_id_list: storeIds }; $("#btnSaveBanner").prop("disabled", true).text("保存中..."); $.ajax({ type: "POST", //提交的方法 url: "@Url.Action("saveBannerInfo")", //提交的地址 data: postData, dataType: "json", success: function (data) { //成功 if (data.retCode == 0) {//后台返回参数判断 bootbox.alert({ size: "small", title: "信息", message: "上传成功!", callback: function () { $("#popPicture").modal('hide'); // 再检索处理 searchFunc(); } }); } else { bootbox.alert({ size: "small", title: "错误信息", message: data.retMsg }); alert(data.retMsg); } }, complete: function (xhr, ts) { $("#btnSaveBanner").prop("disabled", false).text("保存"); } }); } }); /** * 点击新增图片按钮 */ $("#btnAddPicture").click(function () { // 清空Popup画面的值 initPopUpPicture(); // 初期化上传按钮 initFileUpload(); // 打开PopUp画面 $("#popPicture").modal({ backdrop: 'static', //点击遮罩层不会被关闭 keyboard: false //按下esc键不会被关闭 }); }); /** * 删除按钮处理 */ $("#btnDeletePicture").click(function () { var selectRows = $("#tblPosBannerInfo").bootstrapTable('getAllSelections');//获取选中行 if (selectRows == null || selectRows.length == 0) { bootbox.alert({ size: "small", title: "错误信息", message: "请选择删除的数据！" }); } else { var bannerIds = []; for (var i = 0; i < selectRows.length; i++) { bannerIds.push(selectRows[i].id); } // 删除方法 var deleteBannerFun = function () { $.ajax({ type: "POST", //提交的方法 url: '@Url.Action("DeleteBannerInfo")', //提交的地址 data: { bannerIds: bannerIds, }, success: function (result) { //成功 if (result.retCode == 0) { bootbox.alert({ size: "small", title: "提示信息", message: result.retMsg, callback: function () { searchFunc(); } }); } else { bootbox.alert({ size: "small", title: "错误信息", message: result.retMsg }); } } }); } // 弹出删除确认信息 bootbox.dialog({ message: "确认删除选择的Banner图片信息？", title: "删除确认", buttons: { Cancel: { label: "取消", className: "btn-default", callback: function () { } } , OK: { label: "OK", className: "btn-primary", callback: function () { deleteBannerFun(); } } } }); } }); /** * 检索处理 */ $("#btnSearch").click(function () { searchFunc(); }); /** * 清空按钮处理 */ $("#btnClear").click(function () { $("#posCity").val(""); $("#posBrand").val(""); $("#posStore").val(""); $("#isInvalidAll").prop("checked", true); }); // 初期打开画面时，自动检索 searchFunc(); // 门店多选设置 $('#popPosStoreId').selectpicker({ 'selectedText': 'cat', 'liveSearch': true, 'actionsBox':true, 'noneSelectedText': '请选择', 'deselectAllText': '全不选', 'selectAllText': '全选' }); // 日期格式化 $('.date,.date>input').datetimepicker({ format: 'YYYY-MM-DD ', //时间转换为24小时制, hh:mm:ss为12小时 locale: moment.locale('zh-cn') }); }); </script>
页面
