车型增加富文本

This commit is contained in:
19173159168
2025-07-30 20:33:18 +08:00
parent 9088c470c3
commit c566450010
2 changed files with 81 additions and 46 deletions

View File

@ -6,6 +6,7 @@
<th:block th:include="include :: bootstrap-fileinput-css" />
<th:block th:include="include :: select2-css" />
<th:block th:include="include :: bootstrap-select-css" />
<th:block th:include="include :: summernote-css" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
@ -14,19 +15,19 @@
<input type="hidden" id="rentCarRuleIds" name="rentCarRuleIds">
<div class="form-group">
<label class="col-sm-2 control-label is-required">品牌名称:</label>
<div class="col-sm-6">
<div class="col-sm-9">
<input name="brandName" class="form-control" type="text" maxlength="20" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label is-required">车型名称:</label>
<div class="col-sm-6">
<div class="col-sm-9">
<input name="modelName" class="form-control" type="text" maxlength="20" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">支持电池类型:</label>
<div class="col-sm-6">
<div class="col-sm-9">
<select name="batteryType" class="form-control m-b select2-multiple" multiple th:with="type=${@dict.getType('key_car_battery_type')}">
<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
</select>
@ -34,25 +35,32 @@
</div>
<div class="form-group">
<label class="col-sm-2 control-label">整车重量(kg)</label>
<div class="col-sm-6">
<div class="col-sm-9">
<input name="weight" class="form-control" type="text" maxlength="10" >
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">最高时速(km/h)</label>
<div class="col-sm-6">
<div class="col-sm-9">
<input name="maxSpeed" class="form-control" type="text" maxlength="10" >
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">车型图片:</label>
<div class="col-sm-6">
<div class="col-sm-9">
<input type="hidden" name="image">
<div class="file-loading">
<input class="form-control file-upload" id="image" name="file" type="file">
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">车型介绍:</label>
<div class="col-sm-9">
<input type="hidden" id="remark" name="remark">
<div class="summernote"></div>
</div>
</div>
<h4 class="form-header h4">关联套餐</h4>
<div class="row">
<div class="col-sm-12">
@ -68,6 +76,7 @@
<th:block th:include="include :: bootstrap-fileinput-js" />
<th:block th:include="include :: select2-js" />
<th:block th:include="include :: bootstrap-select-js" />
<th:block th:include="include :: summernote-js" />
<script th:inline="javascript">
var prefix = ctx + "operation/carModel"
var rentCarRuleList = [[${rentCarRuleList}]]
@ -80,6 +89,9 @@
});
$(document).ready(function () {
$('.summernote').summernote({
lang: 'zh-CN'
});
// 单图上传
$("#image").fileinput({
uploadUrl: ctx + 'common/newUpload',
@ -211,6 +223,8 @@
});
function submitHandler() {
var rows = $.table.selectFirstColumns();
var aHTML = $('.summernote').summernote('code');
$("#remark").val(aHTML) ;
$("#rentCarRuleIds").val(rows.join())
if ($.validate.form()) {
$.operate.save(prefix + "/add", $('#form-carModel-add').serialize());

View File

@ -6,6 +6,7 @@
<th:block th:include="include :: bootstrap-fileinput-css" />
<th:block th:include="include :: select2-css" />
<th:block th:include="include :: bootstrap-select-css" />
<th:block th:include="include :: summernote-css" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
@ -14,19 +15,19 @@
<input type="hidden" id="rentCarRuleIds" name="rentCarRuleIds">
<div class="form-group">
<label class="col-sm-2 control-label is-required">品牌名称:</label>
<div class="col-sm-6">
<div class="col-sm-9">
<input name="brandName" th:field="*{brandName}" class="form-control" type="text" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label is-required">车型名称:</label>
<div class="col-sm-6">
<div class="col-sm-9">
<input name="modelName" th:field="*{modelName}" class="form-control" type="text" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">支持电池类型:</label>
<div class="col-sm-6">
<div class="col-sm-9">
<select name="batteryType" class="form-control m-b select2-multiple" multiple th:with="type=${@dict.getType('key_car_battery_type')}">
<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{batteryType}"></option>
</select>
@ -34,25 +35,32 @@
</div>
<div class="form-group">
<label class="col-sm-2 control-label">整车重量(kg)</label>
<div class="col-sm-6">
<div class="col-sm-9">
<input name="weight" th:field="*{weight}" class="form-control" type="text" maxlength="10">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">最高时速(km/h)</label>
<div class="col-sm-6">
<div class="col-sm-9">
<input name="maxSpeed" th:field="*{maxSpeed}" class="form-control" type="text" maxlength="10">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">车型图片:</label>
<div class="col-sm-6">
<div class="col-sm-9">
<input type="hidden" name="image" th:value="*{image}">
<div class="file-loading">
<input class="form-control file-upload" id="image" name="file" type="file">
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">车型介绍:</label>
<div class="col-sm-9">
<input type="hidden" id="remark" name="remark">
<div class="summernote"></div>
</div>
</div>
<h4 class="form-header h4">关联套餐</h4>
<div class="row">
<div class="col-sm-12">
@ -68,6 +76,7 @@
<th:block th:include="include :: bootstrap-fileinput-js" />
<th:block th:include="include :: select2-js" />
<th:block th:include="include :: bootstrap-select-js" />
<th:block th:include="include :: summernote-js" />
<script th:inline="javascript">
var prefix = ctx + "operation/carModel";
var rentCarRuleList = [[${rentCarRuleList}]]
@ -182,6 +191,8 @@
function submitHandler() {
var rows = $.table.selectFirstColumns();
var aHTML = $('.summernote').summernote('code');
$("#remark").val(aHTML) ;
$("#rentCarRuleIds").val(rows.join())
if ($.validate.form()) {
$.operate.save(prefix + "/edit", $('#form-carModel-edit').serialize());
@ -192,42 +203,52 @@
let initUrl = new Array();
initUrl.push([[${zcCarModel.image}]]);
$("#image").fileinput({
uploadUrl: ctx + 'common/newUpload',
uploadExtraData: {
dataType: '30'
},
maxFileCount: 1,
autoReplace: true,
showClose: false,
initialPreview: initUrl,
initialPreviewFileType: 'image',
initialPreviewAsData: true,
layoutTemplates :{
actionDelete:'', //去除上传预览的缩略图中的删除图标
actionUpload:'',//去除上传预览缩略图中的上传图片图标;
// actionZoom:'' //去除上传预览缩略图中的查看详情预览的缩略图标。
},
}).on('fileuploaded', function (event, data, previewId, index) {
$("input[name='" + event.currentTarget.id + "']").val(data.response.url)
preId = previewId;
}).on('fileremoved', function (event, id, index) {
$("input[name='" + event.currentTarget.id + "']").val('')
}).on("filebatchselected", function(event, files) {
if(preId !== ''){
document.getElementById(preId).remove()
$(document).ready(function () {
$('.summernote').summernote({
lang: 'zh-CN'
});
// 回显 remark 内容到 summernote 编辑器
var remarkContent = [[${zcCarModel.remark}]];
if (remarkContent) {
$('.summernote').summernote('code', remarkContent);
}
$("#image").fileinput("upload");
}).on('fileerror', function (event,data,msg){
$("#image").fileinput({
uploadUrl: ctx + 'common/newUpload',
uploadExtraData: {
dataType: '30'
},
maxFileCount: 1,
autoReplace: true,
showClose: false,
initialPreview: initUrl,
initialPreviewFileType: 'image',
initialPreviewAsData: true,
layoutTemplates :{
actionDelete:'', //去除上传预览的缩略图中的删除图标
actionUpload:'',//去除上传预览缩略图中的上传图片图标;
// actionZoom:'' //去除上传预览缩略图中的查看详情预览的缩略图标。
},
}).on('fileuploaded', function (event, data, previewId, index) {
$("input[name='" + event.currentTarget.id + "']").val(data.response.url)
preId = previewId;
}).on('fileremoved', function (event, id, index) {
$("input[name='" + event.currentTarget.id + "']").val('')
// 清除当前的预览图 ,并隐藏 【移除】 按钮
$(event.target).fileinput('clear').fileinput('unlock')
$(event.target).parent().siblings('.fileinput-remove').hide()
// 打开失败的信息弹窗
$.modal.alertError('上传失败,请稍后重试')
}
).on("filecleared",function(event, data, msg){
$("input[name='" + event.currentTarget.id + "']").val('')
}).on("filebatchselected", function(event, files) {
if(preId !== ''){
document.getElementById(preId).remove()
}
$("#image").fileinput("upload");
}).on('fileerror', function (event,data,msg){
$("input[name='" + event.currentTarget.id + "']").val('')
// 清除当前的预览图 ,并隐藏 【移除】 按钮
$(event.target).fileinput('clear').fileinput('unlock')
$(event.target).parent().siblings('.fileinput-remove').hide()
// 打开失败的信息弹窗
$.modal.alertError('上传失败,请稍后重试')
}
).on("filecleared",function(event, data, msg){
$("input[name='" + event.currentTarget.id + "']").val('')
});
});
</script>
</body>