VBDSM
/
UI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>产品产量填报</title>
		<link href="http://static.vbdsm.com/js/lib/easyui/themes/vber/easyui.css" rel="stylesheet" type="text/css" />
		<link href="http://static.vbdsm.com/js/lib/easyui/themes/icon.css" rel="stylesheet" type="text/css" />
		<link href="http://static.vbdsm.com/js/lib/loadmask/jquery.loadmask.css" rel="stylesheet" type="text/css" />
		<script src="http://static.vbdsm.com/js/lib/jquery-1.8.0.min.js" type="text/javascript"></script>
		<script src="http://static.vbdsm.com/js/lib/easyui/jquery.easyui.min.js" type="text/javascript"></script>
		<script src="http://static.vbdsm.com/js/lib/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
		<script src="http://static.vbdsm.com/js/lib/loadmask/jquery.loadmask.min.js" type="text/javascript"></script>
		<script src="http://static.vbdsm.com/js/lib/highcharts/highcharts.js?v=4.1.8" type="text/javascript"></script>
		<script src="http://static.vbdsm.com/js/lib/highcharts/modules/exporting.js?v=4.1.8" type="text/javascript"></script>
		<script src="http://static.vbdsm.com/js/util.js" type="text/javascript"></script>
		<script src="http://static.vbdsm.com/js/lib/layer/layer/layer.js" type="text/javascript"></script>
		<style type="text/css">
			#menu_left * {
				vertical-align: middle;
			}
		</style>

		<script charset="UTF-8" type="text/javascript"></script>
	</head>
	<body>
		<div class="easyui-layout" data-options="fit:true">
			<div data-options="region:'center', border:false" style="overflow: auto">
				<div id="menu_left" style="padding: 2px; background-color: #eee; border-bottom: solid 1px #ddd">
					<a class="easyui-linkbutton easyui-tooltip" data-options="plain:true, iconCls:'icon-add'" id="btnAdd" title="添加信息">新增</a>
					<a class="easyui-linkbutton easyui-tooltip" data-options="plain:true, iconCls:'icon-edit'" id="btnUpdate" title="修改信息">修改</a>
					<a class="easyui-linkbutton easyui-tooltip" data-options="plain:true, iconCls:'icon-remove'" id="btnDelete" title="删除信息">删除</a>
					<a class="easyui-linkbutton easyui-tooltip" data-options="iconCls:'icon-save', plain:true" id="btnSave" title="保存信息">保存</a>
					<a class="easyui-linkbutton easyui-tooltip" data-options="iconCls:'icon-undo', plain:true" id="btnCancel" title="取消当前操作">取消</a>
				</div>

				<!-- 客户管理表格 -->
				<div id="dgDiv" style="width: 100%; height: 100%">
					<table data-options="singleSelect:true,fit:true" id="dg"></table>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var editFlag = true,
			appendFlag = true,
			editIndex
		$(document).ready(function () {
			//initDatagrid();
			//loadDatagrid();
			loadData()
			$("#btnAdd").on("click", function () {
				if (!appendFlag || !editFlag) {
					layer.msg("请先取消正在更改或者新增的行！", {
						icon: 4,
					})
					return
				}
				$("#dg").datagrid("appendRow", {})
				editIndex = $("#dg").datagrid("getRows").length - 1
				$("#dg").datagrid("selectRow", editIndex).datagrid("beginEdit", editIndex)
				appendFlag = false
			})

			$("#btnSave").on("click", function () {
				if (appendFlag && editFlag) {
					layer.msg("没有需要保存或者更新的行！")
					return
				}
				var flag = $("#dg").datagrid("validateRow", editIndex)
				if (!flag) {
					layer.msg("请填写完整的信息！")
					return
				}
				$("#dg").datagrid("acceptChanges")
				$("#dg").datagrid("selectRow", editIndex)
				var row = $("#dg").datagrid("getSelected")
				var url = "",
					type = 1
				if (row["id"]) {
					url = "/web/custom/output/update.json"
					type = 2
				} else {
					url = "/web/custom/output/save.json"
				}
				saveOrUpdate(url, row, type)
				;(editFlag = true), (appendFlag = true)
			})

			function saveOrUpdate(url, row, type) {
				ajax({
					url: url,
					data: row,
					type: "POST",
					beforeSend: function (XHR) {
						$("#dg").mask("数据加载中...")
					},
					success: function (data) {
						$("#dg").unmask()
						if (data["status"] == 1) {
							if (type == 1) {
								layer.msg("  保存成功", {
									icon: 1,
								})
								$("#dg").datagrid("updateRow", {
									index: editIndex,
									row: data["data"],
								})
							} else {
								layer.msg("  更新成功", {
									icon: 1,
								})
								$("#dg").datagrid("updateRow", {
									index: editIndex,
									row: data["data"],
								})
							}
						} else {
							if (type == 1) {
								layer.msg("  保存失败", {
									icon: 1,
								})
							} else {
								layer.msg("  更新失败", {
									icon: 1,
								})
							}
						}
					},
					error: function () {
						$("#dg").unmask()
						if (type == 1) {
							layer.msg("  服务器发生错误，保存失败", {
								icon: 1,
							})
						} else {
							layer.msg("  服务器发生错误，更新失败", {
								icon: 1,
							})
						}
					},
				})
			}

			$("#btnCancel").on("click", function () {
				if (editIndex != undefined) {
					$("#dg").datagrid("cancelEdit", editIndex)
					if (!appendFlag) {
						$("#dg").datagrid("deleteRow", editIndex)
						appendFlag = true
					}
					editIndex = undefined
					editFlag = true
				}
			})
			$("#btnUpdate").click(function () {
				if (!appendFlag || !editFlag) {
					layer.msg("请先取消正在更改或者新增的行！", {
						icon: 4,
					})
					return
				}
				var row = $("#dg").datagrid("getSelected")
				if (row == null || row == undefined) {
					layer.msg("  请选择一条记录进行修改.", {
						icon: 4,
					})
					return
				}
				var index = $("#dg").datagrid("getRowIndex", row)
				editIndex = index
				$("#dg").datagrid("beginEdit", editIndex)
				editFlag = false
			})

			$("#btnDelete").click(function () {
				if (!appendFlag || !editFlag) {
					layer.msg("请先取消正在更改或者新增的行！", {
						icon: 4,
					})
					return
				}
				var checkedItem = $("#dg").datagrid("getSelected")
				if (checkedItem != undefined) {
					layer.confirm("删除后,将导致某些关联数据无法显示。<br/>您确定要删除选中数据吗?", function (index) {
						layer.close(index)
						ajax({
							url: "/web/custom/output/delete.json",
							data: {
								id: checkedItem.id,
							},
							success: function (data) {
								if (data["status"] == 1) {
									var rowIndex = $("#dg").datagrid("getRowIndex", checkedItem)
									$("#dg").datagrid("deleteRow", rowIndex)
									layer.msg("  删除成功", {
										icon: 1,
									})
								} else {
									layer.msg("  删除失败", {
										icon: 2,
									})
								}
							},
							error: function () {
								layer.msg("服务器存在问题,删除失败", {
									icon: 2,
								})
							},
						})
					})
				} else {
					layer.msg("  请选择一条要删除的记录!", {
						icon: 4,
					})
					return
				}
			})

			$("#month").combobox({
				width: 70,
				valueField: "id",
				textField: "text",
				data: getMonth(),
			})

			$("#year").combobox({
				width: 70,
				valueField: "id",
				textField: "text",
				data: getYear(10),
			})
		})

		var type

		function getProductData() {
			var productData = ""
			ajax({
				url: "web/custom/output/getComboboxData.json",
				type: "post",
				async: false,
				dataType: "json",
				success: function (data) {
					if (data.status == 1) {
						productData = data.data
					}
				},
			})
			return productData
		}

		function getYear(num) {
			var data = new Array()
			var currentYear = new Date().getFullYear()
			data.push({ value: currentYear, text: currentYear + "年" })
			for (var i = 1; i <= num; i++) {
				data.push({ value: currentYear - i, text: currentYear - i + "年" })
			}
			return data
		}

		function getMonth() {
			var data = new Array()
			for (var i = 1; i <= 12; i++) {
				data.push({ value: i, text: i + "月" })
			}
			return data
		}

		var tableObj = $("#dg")

		//分页控件
		function loadData() {
			//获取DataGrid分页组件对象
			var p = tableObj.datagrid("getPager")
			//设置分页组件参数
			$(p).pagination({
				pageSize: 20,
				pageNumber: 1,
				pageList: [10, 20, 50],
				onSelectPage: function (pageNumber, pageSize) {
					getData(pageNumber, pageSize)
				},
			})
			var obj = $(p).pagination("options")
			getData(obj.pageNumber, obj.pageSize)
		}

		function getData(pageNumber, pageSize) {
			if (pageNumber == 0) {
				pageNumber = 1
			}
			ajax({
				url: "/web/custom/output/getForPage.json",
				type: "post",
				dataType: "json",
				data: { pageSize: pageSize, pageNo: pageNumber },
				beforeSend: function (XHR) {
					$("#dgDiv").mask("数据加载中...")
				},
				success: function (data) {
					$("#dgDiv").unmask()
					tableObj.datagrid("loadData", data.data)
				},
			})
		}

		tableObj.datagrid({
			toolbar: "#menu_left",
			fit: true,
			fitcolumns: true,
			pagination: true,
			pageSize: 20,
			rownumbers: false,
			singleSelect: true,
			selectOnCheck: false,
			checkOnSelect: true,
			columns: [
				[
					{
						field: "id",
						hidden: true,
					},
					{
						field: "productId",
						title: "产品",
						align: "left",
						width: 150,
						type: "combobox",
						formatter: function (value, row) {
							return row.productName
						},
						editor: {
							type: "combobox",
							options: {
								valueField: "id",
								textField: "productName",
								panelHeight: "auto",
								data: getProductData(),
								required: true,
							},
						},
					},
					{
						field: "year",
						title: "年",
						width: 100,
						align: "center",
						editor: {
							type: "combobox",
							options: {
								valueField: "value",
								textField: "text",
								panelHeight: "auto",
								data: getYear(10),
								required: true,
							},
						},
					},
					{
						field: "month",
						title: "月",
						width: 100,
						align: "center",
						editor: {
							type: "combobox",
							options: {
								valueField: "value",
								textField: "text",
								panelHeight: "auto",
								data: getMonth(),
								required: true,
							},
						},
					},
					{
						field: "outputNum",
						title: "产量",
						width: 130,
						align: "left",
						editor: {
							type: "text",
							options: {
								required: true,
							},
						},
					},
					{
						field: "stockNum",
						title: "库存量",
						width: 130,
						align: "left",
						editor: {
							type: "text",
							options: {
								required: true,
							},
						},
					},
				],
			],
		})
	</script>
</html>