基于ruoyi框架增加查看数据功能的定制修改

ruoyi框架在默认情况下只提供了添加和编辑页面，并没有提供查看功能的页面和相关功能，这样在一些特殊的场景下是不满足业务需要的，增加数据查看功能包括以下步骤，下面以框架自带的通知公告为例进行说明：

1. 添加查看页面

查看页面，可以从编辑页面拷贝过来，进行一定的定制修改即可。

对于内容中存在html需要页面直接解析的，可以使用th:utext进行处理。

<div class="form-group">	
	<label class="col-sm-2 control-label">公告内容：</label>
	<div class="col-sm-10">
		<div th:utext="*{noticeContent}"></div>
	</div>
</div>

这里的noticeContent内容可以包括文字和图片，只要符合html编码规则都可以。注意这里只能使用th:utext，如果使用th:text，则只能解析文本，不会解析其中的html标签。

function submitHandler() {
	if ($.validate.form()) {
		var sHTML = $('.summernote').summernote('code');
		$("#noticeContent").val(sHTML);
		// $.operate.save(prefix + "/edit", $('#form-notice-edit').serialize());
		$.modal.close();
	}
}

默认的提交保存修改为关闭窗口即可。 

2. 添加controller方法

/**
 * 查看公告
 */
@RequiresPermissions("system:notice:view")
@GetMapping("/view/{noticeId}")
public String view(@PathVariable("noticeId") Long noticeId, ModelMap mmap)
{
	mmap.put("notice", noticeService.selectNoticeById(noticeId));
	return prefix + "/view";
}

这个基本上，也可以从编辑拷贝过来，修改一下即可。

3. 在列表页面添加查看

// 添加权限
var viewFlag = [[${@permission.hasPermi('system:notice:view')}]];

// 添加url
var options = {
                url: prefix + "/list",
                createUrl: prefix + "/add",
                updateUrl: prefix + "/edit/{id}",
				viewUrl: prefix + "/view/{id}",
...


// 添加按钮
actions.push('<a class="btn btn-info btn-xs ' + viewFlag + '" href="javascript:void(0)" onclick="$.operate.view(\'' + row.noticeId + '\')"><i class="fa fa-edit"></i>查看</a> ');

4. 在公共框架添加查看方法

// 查看信息
view: function(id) {
	table.set();
	if($.common.isEmpty(id) && table.options.type == table_type.bootstrapTreeTable) {
		var row = $("#" + table.options.id).bootstrapTreeTable('getSelections')[0];
		if ($.common.isEmpty(row)) {
			$.modal.alertWarning("请至少选择一条记录");
			return;
		}
		var url = table.options.viewUrl.replace("{id}", row[table.options.uniqueId]);
		$.modal.open("查看" + table.options.modalName, url);
	} else {
		$.modal.open("查看" + table.options.modalName, $.operate.viewUrl(id));
	}
},



// 查看访问地址
viewUrl: function(id) {
	var url = "/404.html";
	if ($.common.isNotEmpty(id)) {
		url = table.options.viewUrl.replace("{id}", id);
	} else {
		var id = $.common.isEmpty(table.options.uniqueId) ? $.table.selectFirstColumns() : $.table.selectColumns(table.options.uniqueId);
		if (id.length == 0) {
			$.modal.alertWarning("请至少选择一条记录");
			return;
		}
		url = table.options.viewUrl.replace("{id}", id);
	}
	return url;
},

在ry-ui.js文件中，参考编辑js添加上述的公共方法。

经过上述步骤，查看功能就实现了。