方式2：CPS网页标签模板 · .Net 开发代码规范

## **添加模板样式** **栏目位置** ： CPS后台 - “基础数据” - “标签样式” ![](https://img.kancloud.cn/11/63/1163e294358dc9b19123ce19c3545045_1353x588.png) **添加内容**： ![](https://img.kancloud.cn/41/dd/41ddb428c4c3ef5c977eaf0a90d6926f_1023x577.png) ## **标记值修改（添加参数）** 需要直接在代码中修改，因为所谓标记值，其实就是一个html的id值或 class 值，用来标记位置用 ![](https://img.kancloud.cn/a4/8b/a48bd28d6071121917428c7d806f35c0_372x412.png) 或 ![](https://img.kancloud.cn/6c/b7/6cb7b09f9c3d473544fd740d4b47f7ae_388x408.png) 参数添加位置 ![](https://img.kancloud.cn/cc/5f/cc5f83dd41529d8dc3c9c37ec7cf4452_1081x625.png) ## 添加标记值 labelStyles/styleModal.js 文件中修改代码 ``` vm.flagValueOptions = { autoBind: true, dataTextField: "displayText", dataValueField: "value", optionLabel: abp.localization.localize("OptionLabel", "SRMBaseData"), dataSource: [ { value: 'addCode', displayText:'图号' }, { value: 'cartonSN', displayText: '箱号' }, { value: 'subIndxStr', displayText: '送货行号' }, { value: 'asnQty', displayText: '送货总数' }, { value: 'tenancyName', displayText: abp.localization.localize("ReceiveCompay", "SRMASNManage") }, { value: 'asnCode', displayText: abp.localization.localize("ASNCode", "SRMASNManage") }, { value: 'deliveryAddress', displayText: abp.localization.localize("DeliveryAddress", "SRMASNManage") }, { value: 'supplierCode', displayText: abp.localization.localize("SupplierCode", "SRMBasic") }, { value: 'supplierName', displayText: abp.localization.localize("SupplierName", "SRMBasic") }, { value: 'poCode', displayText: abp.localization.localize("POCode", "SRMASNManage") }, { value: 'materialCode', displayText: abp.localization.localize("MCode", "SRMBaseData") }, { value: 'materialName', displayText: abp.localization.localize("MName", "SRMBaseData") }, { value: 'materialDesc', displayText: abp.localization.localize("MDesc", "SRMBaseData") }, { value: 'materialSpec', displayText: abp.localization.localize("MSpec", "SRMASNManage") }, { value: 'materialUnit', displayText: abp.localization.localize("MUnit", "SRMBaseData") }, { value: 'packingQty', displayText: abp.localization.localize("ASNQtyPrint", "SRMASNManage") }, { value: 'printDate', displayText: abp.localization.localize("PrintDate", "SRMBaseData") }, { value: 'mfgDate', displayText: abp.localization.localize("MFGDate", "SRMASNManage") }, { value: 'lotNo', displayText: abp.localization.localize("LotNo", "SRMASNManage") }, { value: 'mRemart', displayText: abp.localization.localize("MRemart", "SRMASNManage") }, { value: 'mqrCode', displayText: abp.localization.localize("MQRCode", "SRMASNManage") }, ] } }; ``` ## **标签使用（打印标签）** html 代码添加一个打印按钮 ~~~ <button type="button" class="btn btn-sm btn-default purple-plum" ng-click="vm.printCartonSN()" ><i class="fa fa-print"></i>打印</button> ~~~ js 添加打印事件头部添加打印声明 appPrinter ``` angular.module('app').controller('mould.views.xxx.index', [ '$scope', 'appPrinter', '$uibModal', function ($scope, appPrinter,$uibModal) { ``` ~~~ vm.printCartonSN = function () { // 通过接口从后台获取标签 html 内容 xxxxService.getLabelStyleByCode("GOLDCartonBarCode").then(function (result) { if (result.data != null) { var nLabelStyle = result.data.labelContent; var nLabelHtml = ''; // 添加固定的 html 外部结构 nLabelHtml += "<div style='margin-top:21px;margin-left:21px;margin-right:21px;'>"; for (var i = 0; i < vm.asnCartonSNDetails.length; i++) { if (i !== 0) nLabelHtml += '<p style="margin:14px;"></p><div style="margin-top: 28px;">'; // 构建表格html 对象 nTable = $(nLabelStyle); // 对 HTML 标签模块中的标志参数用实际的变量值代替 $('.tenancyName', nTable).html(vm.asn.tenancyName); $('.asnCode', nTable).html(vm.asn.asnCode); $('.deliveryAddress', nTable).html(vm.asn.deliveryAddress); $('.supplierName', nTable).html(vm.asn.supplierName); $('.supplierCode', nTable).html(vm.asn.supplierCode); $('.poCode', nTable).html(vm.asnCartonSNDetails[i].poCode); $('.materialCode', nTable).html(vm.asnCartonSNDetails[i].materialCode); $('.materialName', nTable).html(vm.asnCartonSNDetails[i].materialName); $('.materialDesc', nTable).html(vm.asnCartonSNDetails[i].materialDesc); $('.materialUnit', nTable).html(vm.asnCartonSNDetails[i].materialUnit); $('.packingQty', nTable).html(vm.asnCartonSNDetails[i].packingQty); $('.printDate', nTable).html(moment().format("YYYY-MM-DD")); $('.lotNo', nTable).html(vm.asnCartonSNDetails[i].lotNo); $('.materialSpec', nTable).html(""); $('.mRemart', nTable).html(vm.asnCartonSNDetails[i].remark); var mfgDate = new Date(vm.asnCartonSNDetails[i].mfDate); $('.mfgDate', nTable).html(mfgDate.getFullYear() + "-" + (mfgDate.getMonth() + 1) + "-" + mfgDate.getDate()); $("#barCode", nTable).html(''); // 将barcode 转为一维码方式 //var nBarCode = $("#barCode", nTable).kendoBarcode({ // type: "code128", // value: vm.asnCartonSNDetails[i].cartonSN, // width: 300, // height: 50, // text: { // visible: true // } //}); // 将barcode 转为二维码方式 var nBarCode = $("#barCode", nTable).kendoQRCode({ value: vm.asnCartonSNDetails[i].cartonSN, //errorCorrection: "H", size: 80, //color: "#166a83" }); $('.barCode', nTable).css("padding-top", "1px").html(nBarCode); // 输出 qr 二维码方式 $(".mqrCode", nTable).html(''); $(".mqrCode", nTable).html("<img style='margin:3px;float:left;' src='" + vm.asnCartonSNDetails[i].dmCode + "'/>"); nLabelHtml += nTable.get(0).outerHTML; if (i !== 0) nLabelHtml += "</div>"; } nLabelHtml += "</div>"; var nPrintHtml = nLabelHtml; // 弹出打印框 appPrinter.print(nPrintHtml, true); } }); }; ~~~ 后台代码 ~~~ /// <summary> /// 根据标签编码获取标签样式 /// </summary> /// <returns></returns> Task<LabelStyle> GetLabelStyleByCode(string labelCode); ~~~ ~~~ public async Task<LabelStyle> GetLabelStyleByCode(string labelCode) { if (labelCode.IsNullOrEmpty()) { throw new UserFriendlyException("标签码不能为空"); } var nLabelStyle = await _labelStyleRepository.FirstOrDefaultAsync(t => t.LabelTypeCode == labelCode); if (nLabelStyle == null) { throw new UserFriendlyException(L("NoDefaultLabelStyle")); } return nLabelStyle; } ~~~ 点击打印的效果 ![](https://img.kancloud.cn/ae/24/ae244db85a9a1d269bae407735d37db6_1069x897.png) ## **数据库表** CFG_LABEL_STYLE （CPS） SRMLABELSTYLE (SRM)