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

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

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

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

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