【ERP】采购订单商品表格选择公共化修改

erp/src/main/resources/template/js/erpcommon/calculatePrice.js

 
 //计算总价
-function calculatedTotalPrice(){
-	var rowTr = $("#useTable tr");
+function calculatedTotalPrice() {
 	var allPrice = 0, taxLastMoneyPrice = 0;
-	$.each(rowTr, function(i, item) {
+	$.each(initTableChooseUtil.getDataRowIndex('productList'), function(i, item) {
 		//获取行坐标
-		var rowNum = $(item).attr("trcusid").replace("tr", "");
+		var rowNum = item;
 		//获取数量
 		var rkNum = parseInt(isNull($("#rkNum" + rowNum).val()) ? 0 : $("#rkNum" + rowNum).val());
 		//获取单价

erp/src/main/resources/template/js/purchaseorder/purchaseorderadd.js

@@ -25,7 +25,6 @@ layui.config({
 	layedit = layui.layedit,
 	form = layui.form;
 
-	var usetableTemplate = $("#usetableTemplate").html();
 	var selOption = getFileContent('tpl/template/select-option.tpl');
 	// 已经选择的商品集合key：表格的行trId，value：商品信息
 	var allChooseProduct = {};
@@ -34,32 +33,44 @@ layui.config({
 	var submitType = erpOrderUtil.getSubmitTypeByOrderType(systemOrderType["purchaseOrder"]["orderType"]);
 
 	// 单据时间
-	laydate.render({
-		elem: '#operTime',
-		type: 'datetime',
-		value: getFormatDate(),
-		trigger: 'click'
-	});
+	laydate.render({elem: '#operTime', type: 'datetime', value: getFormatDate(), trigger: 'click'});
 
 	// 计划完成日期
-	laydate.render({
-		elem: '#planComplateTime',
-		type: 'datetime',
-		trigger: 'click'
-	});
+	laydate.render({elem: '#planComplateTime', type: 'datetime', trigger: 'click'});
 
-	textool.init({
-		eleId: 'remark',
-		maxlength: 200,
-		tools: ['count', 'copy', 'reset']
-	});
+	textool.init({eleId: 'remark', maxlength: 200});
 
 	// 初始化账户
 	systemCommonUtil.getSysAccountListByType(function(json){
 		// 加载账户数据
 		$("#accountId").html(getDataUseHandlebars(selOption, json));
-		// 初始化一行数据
-		addRow();
+	});
+
+	initTableChooseUtil.initTable({
+		id: "productList",
+		cols: [
+			{id: 'materialId', title: '商品(型号)', formType: 'chooseInput', width: '150', iconClassName: 'chooseProductBtn', verify: 'required'},
+			{id: 'unitId', title: '单位', formType: 'select', width: '50', verify: 'required', layFilter: 'selectUnitProperty', saveKey: 'mUnitId'},
+			{id: 'currentTock', title: '库存', formType: 'detail', width: '80'},
+			{id: 'rkNum', title: '数量', formType: 'input', width: '80', className: 'change-input rkNum', verify: 'required|number', value: '1', saveKey: 'rkNum'},
+			{id: 'unitPrice', title: '单价', formType: 'input', width: '80', className: 'change-input unitPrice', verify: 'required|money', saveKey: 'unitPrice'},
+			{id: 'amountOfMoney', title: '金额', formType: 'input', width: '80', className: 'change-input amountOfMoney', verify: 'required|money'},
+			{id: 'taxRate', title: '税率(%)', formType: 'input', width: '80', className: 'change-input taxRate', verify: 'required|double', value: '0.00', saveKey: 'taxRate'},
+			{id: 'taxMoney', title: '税额', formType: 'input', width: '80', className: 'change-input taxMoney', verify: 'required|money', saveKey: 'taxMoney'},
+			{id: 'taxUnitPrice', title: '含税单价', formType: 'input', width: '80', className: 'change-input taxUnitPrice', verify: 'required|money', saveKey: 'taxUnitPrice'},
+			{id: 'taxLastMoney', title: '合计价税', formType: 'input', width: '80', className: 'change-input taxLastMoney', verify: 'required|money', saveKey: 'taxLastMoney'},
+			{id: 'remark', title: '备注', formType: 'input', width: '100', saveKey: 'remark'}
+		],
+		deleteRowCallback: function (trId) {
+			allChooseProduct[trId] = undefined;
+			// 计算价格
+			calculatedTotalPrice();
+		},
+		addRowCallback: function (rowIndexStr) {
+			// 设置根据某列变化的颜色
+			$("." + showTdByEdit).parent().css({'background-color': '#e6e6e6'});
+		},
+		form: form
 	});
 
 	// 加载动态表单
@@ -191,58 +202,6 @@ layui.config({
 		}});
 	}
 
-	//新增行
-	$("body").on("click", "#addRow", function() {
-		addRow();
-	});
-
-	//删除行
-	$("body").on("click", "#deleteRow", function() {
-		deleteRow();
-		//计算价格
-		calculatedTotalPrice();
-	});
-
-	//新增行
-	function addRow() {
-		var par = {
-			id: "row" + rowNum.toString(), //checkbox的id
-			trId: "tr" + rowNum.toString(), //行的id
-			materialId: "materialId" + rowNum.toString(), //商品id
-			unitId: "unitId" + rowNum.toString(), //规格id
-			currentTock: "currentTock" + rowNum.toString(), //库存id
-			rkNum: "rkNum" + rowNum.toString(), //数量id
-			unitPrice: "unitPrice"  + rowNum.toString(), //单价id
-			amountOfMoney: "amountOfMoney"  + rowNum.toString(), //金额id
-			taxRate: "taxRate"  + rowNum.toString(), //税率id
-			taxMoney: "taxMoney"  + rowNum.toString(), //税额id
-			taxUnitPrice: "taxUnitPrice"  + rowNum.toString(), //含税单价id
-			taxLastMoney: "taxLastMoney"  + rowNum.toString(), //含税合计id
-			remark: "remark" + rowNum.toString() //备注id
-		};
-		$("#useTable").append(getDataUseHandlebars(usetableTemplate, par));
-		form.render();
-		rowNum++;
-		//设置根据某列变化的颜色
-		$("." + showTdByEdit).parent().css({'background-color': '#e6e6e6'});
-	}
-
-	//删除行
-	function deleteRow() {
-		var checkRow = $("#useTable input[type='checkbox'][name='tableCheckRow']:checked");
-		if(checkRow.length > 0) {
-			$.each(checkRow, function(i, item) {
-				// 删除allChooseProduct已选择的商品信息
-				var trId = $(item).parent().parent().attr("trcusid");
-				allChooseProduct[trId] = undefined;
-				// 移除界面上的信息
-				$(item).parent().parent().remove();
-			});
-		} else {
-			winui.window.msg('请选择要删除的行', {icon: 2, time: 2000});
-		}
-	}
-
 	// 供应商选择
 	$("body").on("click", "#supplierNameSel", function(e){
 		sysSupplierUtil.openSysSupplierChoosePage(function (supplierMation){

erp/src/main/resources/template/tpl/purchaseorder/purchaseorderadd.html

@@ -41,8 +41,8 @@
 			</div>
 		    <div class="layui-form-item layui-col-xs12">
 		        <label class="layui-form-label">列表项<i class="red">*</i></label>
-		        <div class="layui-input-block">
-		        	<div class="winui-toolbar">
+		        <div class="layui-input-block" id="productList">
+		        	<!--<div class="winui-toolbar">
 				        <div class="winui-tool" style="text-align: left;">
 				            <button id="addRow" class="winui-toolbtn" type="button"><i class="fa fa-plus" aria-hidden="true"></i>新增行</button>
 				            <button id="deleteRow" class="winui-toolbtn" type="button"><i class="fa fa-trash-o" aria-hidden="true"></i>删除行</button>
@@ -67,7 +67,7 @@
 		                </thead>
 		                <tbody id="useTable" class="insurance-table">
 		                </tbody>
-					</table>
+					</table>-->
 		        </div>
 		    </div>
 		    <div class="layui-form-item layui-col-xs4">

web/src/main/resources/template/assets/lib/layui/custom.js

@@ -35,6 +35,7 @@ var customerJS = {
 	"schoolUtil": "../../assets/lib/layui/customer/schoolUtil.js", // 学校模块工具类
 	"checkWorkUtil": "../../assets/lib/layui/customer/checkWorkUtil.js", // 考勤模块工具类
 	"arrayUtil": "../../assets/lib/layui/customer/arrayUtil.js", // 集合工具类
+	"initTableChooseUtil": "../../assets/lib/layui/customer/tableUtil/initTableChooseUtil.js", // 加载表格选择的表格插件
 };
 
 //系统基础信息

web/src/main/resources/template/assets/lib/layui/customer/tableUtil/initTableChooseUtil.js

+
+// 加载表格选择的表格插件
+var initTableChooseUtil = {
+
+    setting: {}, // 支出多个一个页面多个配置文件的加载
+
+    options: {
+        id: "", // 表格加载的位置
+        indexRow: 0, // 表格行计数器
+        cols: [], // 列属性，{id: 'materialId',
+                            // title: '商品',
+                            // formType: 'input', formType展示方式 select：下拉框 input：普通输入框 chooseInput：选择输入框 detail：展示,只加载<td></td>
+                            // width: '150',
+                            // iconClassName: 'chooseProductBtn', 当formType为chooseInput时，指定的icon图标的class属性
+                            // className: '额外的class属性',
+                            // verify: 'required|number',
+                            // value: '默认值',
+                            // valueKey: '回显时要展示数据里面的那个key',
+                            // layFilter: '可以方便指定监听事件',
+                            // saveKey: '保存数据时指定的那个key'}
+        deleteRowCallback: function () {trId}, // 删除行之后的回调函数
+        addRowCallback: function (rowIndexStr) {}, // 新增行之后的回调函数
+        form: null, // form表单对象
+    }, // 表格参数数据
+
+    /**
+     * 初始化表格
+     *
+     * @param _options 表格属性
+     */
+    initTable: function (_options) {
+        if (isNull(_options.id)) {
+            winui.window.msg('id 不能为空', {icon: 2, time: 2000});
+            return false;
+        }
+        var newOptions = $.extend(true, initTableChooseUtil.options, _options);
+        initTableChooseUtil.setting[_options.id] = newOptions;
+        initTableChooseUtil.initTableHtml(newOptions);
+        initTableChooseUtil.initEvent(_options.id);
+        initTableChooseUtil.addRow(_options.id);
+    },
+
+    /**
+     * 初始化表格
+     */
+    initTableHtml: function (newOptions) {
+        var table = '<div class="winui-toolbar">' +
+            '        <div class="winui-tool" style="text-align: left;">' +
+            '            <button id="addRow' + newOptions.id + '" class="winui-toolbtn" type="button"><i class="fa fa-plus" aria-hidden="true"></i>新增行</button>' +
+            '            <button id="deleteRow' + newOptions.id + '" class="winui-toolbtn" type="button"><i class="fa fa-trash-o" aria-hidden="true"></i>删除行</button>' +
+            '        </div>' +
+            '    </div>' +
+            '    <table class="layui-table">' +
+            '         <thead>' +
+            '             <tr id="header' + newOptions.id + '"></tr>' +
+            '         </thead>' +
+            '         <tbody id="table' + newOptions.id + '" class="insurance-table">' +
+            '         </tbody>' +
+            '    </table>';
+        $("#" + newOptions.id).html(table);
+        var headerStr = '<th style="width: 30px;"></th>';
+        $.each(newOptions.cols, function (i, item) {
+            headerStr += '<th style="width: ' + item.width + 'px; white-space: nowrap;">' + item.title + '</th>';
+        });
+        $("#header" + newOptions.id).html(headerStr);
+    },
+
+    /**
+     * 初始化点击事件
+     *
+     * @param id
+     */
+    initEvent: function (id) {
+        // 新增行
+        $("body").on("click", "#addRow" + id, function() {
+            var pointBtnBoxId = $(this).attr("id").replace("addRow", "");
+            initTableChooseUtil.addRow(pointBtnBoxId);
+        });
+
+        // 删除行
+        $("body").on("click", "#deleteRow" + id, function() {
+            var pointBtnBoxId = $(this).attr("id").replace("addRow", "");
+            initTableChooseUtil.deleteRow(pointBtnBoxId);
+        });
+    },
+
+    /**
+     * 新增行
+     *
+     * @param id
+     */
+    addRow: function (id) {
+        // 获取配置
+        var options = initTableChooseUtil.setting[id];
+        var rowIndexStr = id + options.indexRow.toString();
+        var tbodyStr = '<tr trcusid="tr' + rowIndexStr + '"><td><input type="checkbox" rowId="row' + rowIndexStr + '" name="tableCheckRow"/></td>';
+        $.each(options.cols, function (i, item) {
+            var tdId = item.id + rowIndexStr;
+            var value = isNull(item.value) ? "" : item.value;
+            var className = isNull(item.className) ? "" : item.className;
+            var verify = isNull(item.verify) ? "" : item.verify;
+            if (item.formType == 'input') {
+                tbodyStr += '<td><input type="text" class="layui-input ' + className + '" value="' + value + '" id="' + tdId + '" win-verify="' + verify + '"/></td>';
+            } else if (item.formType == 'chooseInput') {
+                tbodyStr += '<td><input type="text" class="layui-input ' + className + '" value="' + value + '" id="' + tdId + '" win-verify="' + verify + '" readonly="readonly"/>' +
+                    '<i class="fa fa-plus-circle input-icon ' + item.iconClassName + '" style="top: 12px;"></i></td>';
+            } else if (item.formType == 'select') {
+                tbodyStr += '<td><select id="' + tdId + '" lay-filter="' + item.layFilter + '" lay-search win-verify="' + verify + '"></select></td>';
+            } else if (item.formType == 'detail') {
+                tbodyStr += '<td id="' + tdId + '" class="' + className + '"></td>';
+            }
+        });
+        tbodyStr += '</tr>';
+        $("#table" + id).append(tbodyStr);
+        options.form.render();
+        options.indexRow = options.indexRow + 1;
+        initTableChooseUtil.setting[id] = options;
+        if(typeof(initTableChooseUtil.addRowCallback) == "function") {
+            initTableChooseUtil.addRowCallback(rowIndexStr);
+        }
+    },
+
+    /**
+     * 删除行
+     *
+     * @param id
+     */
+    deleteRow: function (id) {
+        var checkRow = $("#table" + id + " input[type='checkbox'][name='tableCheckRow']:checked");
+        if (checkRow.length > 0) {
+            $.each(checkRow, function (i, item) {
+                var trId = $(item).parent().parent().attr("trcusid");
+                if (typeof (initTableChooseUtil.deleteRowCallback) == "function") {
+                    initTableChooseUtil.deleteRowCallback(trId);
+                }
+                // 移除界面上的信息
+                $(item).parent().parent().remove();
+            });
+        } else {
+            winui.window.msg('请选择要删除的行', {icon: 2, time: 2000});
+        }
+    },
+
+    /**
+     * 获取数据
+     *
+     * @param id
+     */
+    getDataList: function (id) {
+        // 获取配置
+        var options = initTableChooseUtil.setting[id];
+        var result = [];
+        var rowTr = $("#table" + id + " tr");
+        $.each(rowTr, function (i, item) {
+            var trId = $(item).attr("trcusid");
+            var rowIndexStr = trId.replace("tr", "");
+            var row = {};
+            $.each(options.cols, function (j, bean) {
+                if (!isNull(bean.saveKey)) {
+                    // saveKey不为空时，指定key-value
+                    var tdId = bean.id + rowIndexStr;
+                    var value = "";
+                    if (bean.formType == 'input') {
+                        value = $("#" + tdId).val();
+                    } else if (bean.formType == 'select') {
+                        value = $("#" + tdId).val();
+                    } else if (bean.formType == 'detail') {
+                        value = $("#" + tdId).html();
+                    }
+                    row[bean.saveKey] = value;
+                }
+            });
+            result.push(row);
+        });
+        return result;
+    },
+
+    /**
+     * 获取指定表格每一行的rowIndex
+     *
+     * @param id
+     */
+    getDataRowIndex: function (id) {
+        // 获取配置
+        var result = [];
+        var rowTr = $("#table" + id + " tr");
+        $.each(rowTr, function (i, item) {
+            var trId = $(item).attr("trcusid");
+            var rowIndexStr = trId.replace("tr", "");
+            result.push(rowIndexStr);
+        });
+        return result;
+    }
+
+}
\ No newline at end of file