ruoyi
/
RuoYi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

典型案例，上传图片，以及一些字典值的取值和显示

This commit is contained in:
丁瑞超 2020-11-02 18:21:52 +08:00
parent 5e89d1a5f6
commit 5e7b1ebe78
4 changed files with 91 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
ruoyi-admin/src/main/resources/static/ruoyi/js/common.js
View File

@ -455,3 +455,37 @@ $.ajaxSetup({
}
}
});
//上传文件
function uploadFile(async, id) {
var formData = new FormData();
if ($('#filePath')[0].files[0] == null) {
$.modal.alertWarning("请先选择文件路径");
return false;
}
formData.append('fileName', $("#fileName").val());
formData.append('file', $('#filePath')[0].files[0]);
$.ajax({
url: "/common/upload",
type: 'post',
cache: false,
data: formData,
processData: false,
contentType: false,
dataType: "json",
async: async,
success: function(result) {
if (result.code == web_status.SUCCESS && id) {
$('#' + id).val(result.url);
} else {
$.modal.alertError(result.msg);
return;
}
},
error: function(error) {
$.modal.alertWarning("图片上传失败。");
return;
}
});
}

43
ruoyi-front/src/main/resources/templates/front/cases/add.html
View File

@ -27,41 +27,31 @@
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label is-required">案例类型(来至于字典表)：</label>
<label class="col-sm-3 control-label is-required">案例类型：</label>
<div class="col-sm-8">
<select name="type" class="form-control m-b" required>
<option value="11">所有</option>
</select>
<span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 代码生成请选择字典属性</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">点击量：</label>
<div class="col-sm-8">
<input name="hits" class="form-control" type="text">
<div class="input-group" style="width: 100%">
<select name="type" class="form-control m-b" th:with="type=${@dict.getType('classsic_cases_type')}">
<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label is-required">图片地址：</label>
<label class="col-sm-3 control-label is-required">图片：</label>
<div class="col-sm-8">
<textarea name="pictureUrl" class="form-control" required></textarea>
<input id="filePath" name="filePath" class="form-control" type="file">
<input id="pictureUrl" name="pictureUrl" type="text" hidden>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label is-required">状态：</label>
<div class="col-sm-8">
<label class="toggle-switch switch-solid">
<input type="checkbox" id="status" checked>
<span></span>
</label>
<div class="radio-box" th:each="dict : ${@dict.getType('sys_normal_disable')}">
<input type="radio" th:id="${dict.dictCode}" name="status" th:value="${dict.dictValue}" th:checked="${dict.default}">
<label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
</div>
</div>
</div>
<!-- <div class="form-group">
<label class="col-sm-3 control-label">删除标志：</label>
<div class="col-sm-8">
<input name="delFlag" class="form-control" type="text">
</div>
</div>-->
</form>
</div>
<th:block th:include="include :: footer" />
@ -74,10 +64,9 @@
function submitHandler() {
if ($.validate.form()) {
var data = $("#form-cases-add").serializeArray();
var status = $("input[id='status']").is(':checked') == true ? 0 : 1;
data.push({"name": "status", "value": status});
$.operate.save(prefix + "/add", data);
//同步上传图片，并且将上传图片返回的地址，赋值到pictureUrl对应的隐藏域上
uploadFile(false, "pictureUrl");
$.operate.save(prefix + "/add", $("#form-cases-add").serialize());
}
}

54
ruoyi-front/src/main/resources/templates/front/cases/cases.html
View File

@ -14,26 +14,26 @@
<label>标题：</label>
<input type="text" name="title"/>
</li>
<li>
<!--<li>
<label>简介：</label>
<input type="text" name="introduction"/>
</li>
</li>-->
<li>
<label>案例类型(来至于字典表)：</label>
<select name="type">
<label>案例类型：</label>
<select name="type" class="form-control m-b" th:with="type=${@dict.getType('classsic_cases_type')}">
<option value="">所有</option>
<option value="-1">代码生成请选择字典属性</option>
<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
</select>
</li>
<li>
<!-- <li>
<label>点击量：</label>
<input type="text" name="hits"/>
</li>
</li>-->
<li>
<label>状态：</label>
<select name="status">
<select name="status" th:with="type=${@dict.getType('sys_normal_disable')}">
<option value="">所有</option>
<option value="-1">代码生成请选择字典属性</option>
<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
</select>
</li>
<li>
@ -46,7 +46,7 @@
</div>
<div class="btn-group-sm" id="toolbar" role="group">
<a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="front:cases:add">
<a class="btn btn-success" onclick="$.operate.addFull()" shiro:hasPermission="front:cases:add">
<i class="fa fa-plus"></i> 添加
</a>
<a class="btn btn-primary single disabled" onclick="$.operate.edit()" shiro:hasPermission="front:cases:edit">
@ -68,6 +68,8 @@
<script th:inline="javascript">
var editFlag = [[${@permission.hasPermi('front:cases:edit')}]];
var removeFlag = [[${@permission.hasPermi('front:cases:remove')}]];
var dictStatus = [[${@dict.getType('sys_normal_disable')}]];
var dictCasesTypes = [[${@dict.getType('classsic_cases_type')}]];
var prefix = ctx + "front/cases";
$(function() {
@ -94,13 +96,17 @@
field: 'introduction',
title: '简介'
},
{
/*{
field: 'content',
title: '详情内容'
},
title: '详情内容',
hidden : true
},*/
{
field: 'type',
title: '案例类型(来至于字典表)'
title: '案例类型',
formatter: function(value, item, index) {
return $.table.selectDictLabel(dictCasesTypes, item.type);
}
},
{
field: 'hits',
@ -108,13 +114,16 @@
},
{
field: 'pictureUrl',
title: '图片地址'
title: '图片',
formatter: function(value, row, index) {
return $.table.imageView(value);
}
},
{
field: 'status',
title: '状态',
formatter: function (value, row, index) {
return statusTools(row);
formatter: function(value, item, index) {
return $.table.selectDictLabel(dictStatus, item.status);
}
},
{
@ -122,7 +131,7 @@
align: 'center',
formatter: function(value, row, index) {
var actions = [];
actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.editFull(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
return actions.join('');
}
@ -130,15 +139,6 @@
};
$.table.init(options);
});
/* 用户状态显示 */
function statusTools(row) {
if (row.status == 1) {
return '<i class=\"fa fa-toggle-off text-info fa-2x\" onclick="enable(\'' + row.id + '\')"></i> ';
} else {
return '<i class=\"fa fa-toggle-on text-info fa-2x\" onclick="disable(\'' + row.id + '\')"></i> ';
}
}
</script>
</body>
</html>

31
ruoyi-front/src/main/resources/templates/front/cases/edit.html
View File

@ -28,34 +28,29 @@
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label is-required">案例类型(来至于字典表)：</label>
<label class="col-sm-3 control-label is-required">案例类型：</label>
<div class="col-sm-8">
<select name="type" class="form-control m-b" required>
<option value="">所有</option>
</select>
<span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 代码生成请选择字典属性</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">点击量：</label>
<div class="col-sm-8">
<input name="hits" th:field="*{hits}" class="form-control" type="text">
<div class="input-group" style="width: 100%">
<select name="type" class="form-control m-b" th:with="type=${@dict.getType('classsic_cases_type')}">
<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label is-required">图片地址：</label>
<label class="col-sm-3 control-label is-required">图片：</label>
<div class="col-sm-8">
<textarea name="pictureUrl" class="form-control" required>[[*{pictureUrl}]]</textarea>
<input id="filePath" name="filePath" class="form-control" type="file">
<input id="pictureUrl" name="pictureUrl" th:field="*{pictureUrl}" type="text" hidden>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">状态：</label>
<div class="col-sm-8">
<div class="radio-box">
<input type="radio" name="status" value="">
<label th:for="status" th:text="未知"></label>
<div class="radio-box" th:each="dict : ${@dict.getType('sys_normal_disable')}">
<input type="radio" th:id="${dict.dictCode}" name="status" th:value="${dict.dictValue}" th:checked="${dict.default}">
<label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
</div>
<span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 代码生成请选择字典属性</span>
</div>
</div>
</form>
@ -70,6 +65,8 @@
function submitHandler() {
if ($.validate.form()) {
//同步上传图片，并且将上传图片返回的地址，赋值到pictureUrl对应的隐藏域上
uploadFile(false, "pictureUrl");
$.operate.save(prefix + "/edit", $('#form-cases-edit').serialize());
}
}