UAP 从前端到后端详细教程 (四) WebLet里的代码

比眉伴天荒 2022-05-18 03:11 344阅读 0赞

### DetailView.js ###

$ns("holiday.views");
    
    $import("mx.controls.ToolBar");
    $import("mx.datacontrols.DataForm");
    
    holiday.views.DetailView = function() {
    	var me = $extend(mx.views.View);
    	var base = {};
    
    	me.objID = null;
    
    	me.form = null;
    
    	base.init = me.init;
    	me.init = function() {
    		base.init();
    
    		_initControls();
    	};
    	
    	function _initControls() {
    		// 表单的 工具栏 ,我只添加了一条 保存的工具
    		var toolBar = new mx.controls.ToolBar({
    			width : "100%",
    			items : [ {
    				name : "save",
    				text : mx.msg("SAVE"),
    				imageKey : "save",
    				toolTip : mx.msg("SAVE"),
    				// _btnSave_onclick 这个方法 DetailViewController 要有
    				// 具体实现自己 编写
    				onclick : me.controller._btnSave_onclick
    			} ]
    		});
    		
    		me.addControl(toolBar);
    		/** 获取下面字段的 值传给后台 */
    		//var all_data = me.view.form.entityContainer.data;
    		//console.log(me.view.form.entityContainer.dicts);
    		var deFormEntity = new mx.datacontainers.FormEntityContainer({
    			baseUrl : holiday.mappath("~/rest/holiday/info"),
    			primaryKey : "ID",
    			// 根据 FieldsName,自动赋值到本地
    			// 从后端,加载 表单的数据
    			type: "remote",
    			// 表示当前数据容器是否有元数据信息
    			// true 的话,弹出此表单会 额外发送一条 url 请求
    			loadMeta:false
    		})
    		me.form = new mx.datacontrols.DataForm({
    			entityContainer : deFormEntity,
    			// TODO 指定主键列名
    			// TODO 指定显示列数组
    			fields : [ {
    				name : "ID",
    				caption : "编号",
    				editorType : "NumberEditor",
    				colSpan: "2",
    				readOnly : false
    			},{
    				name : "USERID",
    				caption : "请求人编号",
    				colSpan: "2",
    				editorType : "NumberEditor",
    				readOnly : false
    			},{
    				name : "REQUEST_DATE",
    				caption : "请假发起日期",
    				editorType : "DateTimeEditor",
    				colSpan: "2",
    				readOnly : false
    			},{
    				name : "REQUEST_REASON",
    				caption : "请假原因",
    				editorType : "TextEditor",
    				colSpan: "5",
    				readOnly : false
    			},{
    				name : "REQUEST_DAYS",
    				caption : "请假天数",
    				editorType : "NumberEditor",
    				colSpan: "2",
    				readOnly : false
    			},{
    				name : "APPROVER_UID",
    				caption : "审批人编号",
    				colSpan: "2",
    				editorType : "NumberEditor",
    				readOnly : false
    			},{
    				name : "STATE",
    				caption : "状态",
    				colSpan: "2",
    				// 下拉选的类型
    				editorType : "DropDownEditor",
    				allowEditing: false, 
    				// 指定显示的 是 name
    				displayMember: "name",
    				// 指定实际值 是 name
    				valueMember: "name",
    				// 下拉选里面的元素
    				items: [ { name: "待批准" }, { name:"已批准"},{ name: "不批准"}] ,
    				readOnly : false
    			} ]
    		});
    
    		me.addControl(me.form);
    
    		me.on("activate", me.controller._onactivate);
    	}
    
    	return me.endOfClass(arguments);
    };

### DetailViewController.js ###

$ns("holiday.views");
    $import("holiday.views.DetailView");
    
    holiday.views.DetailViewController = function(selectValues) {
    	var me = $extend(mx.views.ViewController);
    	var base = {};
    
    	me.getView = function() {
    		if (me.view == null) {
    			me.view = new holiday.views.DetailView({
    				controller : me
    			});
    		}
    		return me.view;
    	};
    
    	me._onactivate = function(e) {
    		// TODO: 窗体激活时的逻辑。
    		if (me.view != null && typeof (me.view.form) != "undefined") {
    			me.view.form.load(me.view.objID);
    		}
    	};
    	// 创建 一个RESTClient,利用这个 向后台发送请求 (这个就是框架封装的 Ajax)
    	var client_edit = new mx.rpc.RESTClient({
    		baseUrl : holiday.mappath("~/rest/holiday")
    	});
    	// 回掉函数
    	var call_backFun =  function(obj) {
    		if (obj.successful) {
    			mx.indicate("info", "修改成功");
    			// dataGrid.load();
    		} else {
    			mx.indicate("info", "sorry,修改失败");
    		}
    	}
    
    	/** 编辑时点击保存的逻辑 */
    	me._btnSave_onclick = function() {
    		var all_data = me.view.form.entityContainer.data;
    		// me.view.form.save();
    		// 这里 给  view的objID 赋值,是因为向后台发送请求时,会把 这个 objID 拼上去
    		// 这个 view 其实 就是 DetailView me就是 DetailViewController 对象
    		// me 也就是本身
    		if (me.view.objID == 'new') {
    			client_edit.get("/new",all_data,call_backFun);
    		} else {
    			client_edit.get("/saveEdit", all_data,call_backFun);
    		}
    		console.log("保存-调用over!");
    
    		// 重新加载数据,不然修改完 需要手动刷新页面 才看得到效果
    		// me.view.form.load();
    	};
    
    	return me.endOfClass(arguments);
    };

### **然后贴两张 表单弹出的视图.**  ###

### **新建和 编辑 弹出的是同一个表单,但是传递的参数不同** ###

### **所以,执行的 功能有点不同**. ###

![70][]

![70 1][]

[70]: /images/20220518/1bd78c312e284a92843b796406131f08.png
[70 1]: /images/20220518/589796181fcb4ad48a64ff64f43c1ce8.png