sczx_group/sczx_web
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

车型与套餐

Browse Source
This commit is contained in:
19173159168
2025-07-14 22:02:16 +08:00
parent f0812d0cba
commit e81e401407
23 changed files with 2030 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

239
ruoyi-admin/src/main/resources/templates/operation/car/add.html Normal file
View File

@ -0,0 +1,239 @@
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
<th:block th:include="include :: header('新增车型管理')" />
<th:block th:include="include :: datetimepicker-css" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
<form class="form-horizontal m" id="form-car-add">
<div class="form-group">
<label class="col-sm-3 control-label">车架号(VIN)：</label>
<div class="col-sm-8">
<input name="vin" class="form-control" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">车牌号码：</label>
<div class="col-sm-8">
<input name="licensePlate" class="form-control" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label is-required">车辆品牌：</label>
<div class="col-sm-8">
<select name="brandName" id="brand-select" class="form-control m-b" required>
<option value="">请选择品牌</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label is-required">车辆型号：</label>
<div class="col-sm-8">
<select name="modelName" id="model-select" class="form-control m-b" required disabled>
<option value="">请先选择品牌</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">LOT识别号：</label>
<div class="col-sm-8">
<input name="lotNumber" class="form-control" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">采购日期：</label>
<div class="col-sm-8">
<div class="input-group date">
<input name="purchaseDate" class="form-control" placeholder="yyyy-MM-dd" type="text">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">采购价格(元)：</label>
<div class="col-sm-8">
<input name="purchasePrice" class="form-control" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">车辆归属：</label>
<div class="col-sm-8">
<select name="belongType" class="form-control m-b" th:with="type=${@dict.getType('key_car_belong_type')}">
<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">IoT识别码：</label>
<div class="col-sm-8">
<input name="iotCode" class="form-control" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label is-required">所属运营商：</label>
<div class="col-sm-8">
<input name="operatorName" id="operatorName" class="form-control" type="hidden" >
<select name="operatorId" id="operator-select" class="form-control m-b" required>
<option value="">请选择运营商</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">所属门店：</label>
<div class="col-sm-8">
<input name="storeName" id="storeName" class="form-control" type="hidden" >
<select name="storeId" id="store-select" class="form-control m-b" disabled>
<option value="">请先选择运营商</option>
</select>
</div>
</div>
<!-- <div class="form-group"> -->
<!-- <label class="col-sm-3 control-label">应用套餐：</label>-->
<!-- <div class="col-sm-8">-->
<!-- <input name="packageId" class="form-control" type="text">-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="form-group"> -->
<!-- <label class="col-sm-3 control-label">应用套餐名称：</label>-->
<!-- <div class="col-sm-8">-->
<!-- <input name="packageName" class="form-control" type="text">-->
<!-- </div>-->
<!-- </div>-->
<div class="form-group">
<label class="col-sm-3 control-label">备注信息：</label>
<div class="col-sm-8">
<input name="remark" class="form-control" type="text">
</div>
</div>
</form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<script th:inline="javascript">
var prefix = ctx + "operation/car"
$("#form-car-add").validate({
focusCleanup: true
});
$(function () {
// 加载品牌列表
$.ajax({
url: ctx + 'operation/carModel/brands',
type: 'GET',
success: function (brands) {
var brandSelect = $('#brand-select');
brands.forEach(function (brand) {
brandSelect.append('<option value="' + brand + '">' + brand + '</option>');
});
}
});
// 品牌选择变化时加载对应车型
$('#brand-select').on('change', function () {
var brandName = $(this).val();
var modelSelect = $('#model-select');
modelSelect.empty().append('<option value="">加载中...</option>').prop('disabled', true);
if (!brandName) {
modelSelect.empty().append('<option value="">请先选择品牌</option>').prop('disabled', true);
return;
}
$.ajax({
url: ctx + 'operation/carModel/getModels',
type: 'POST',
data: { brandName: brandName },
success: function (models) {
modelSelect.empty();
if (models.length === 0) {
modelSelect.append('<option value="">暂无车型</option>').prop('disabled', true);
} else {
models.forEach(function (model) {
modelSelect.append('<option value="' + model + '">' + model + '</option>');
});
modelSelect.prop('disabled', false);
}
}
});
});
// 加载运营商列表
$.ajax({
url: ctx + 'operation/company/companyAll',
type: 'GET',
success: function (companies) {
var operatorSelect = $('#operator-select');
companies.forEach(function (company) {
operatorSelect.append('<option value="' + company.id + '">' + company.companyName + '</option>');
});
}
});
// 运营商选择变化时加载对应门店
$('#operator-select').on('change', function () {
var companyId = $(this).val();
var operatorName = $('#operator-select option:selected').text(); // 获取 text 值（公司名称）
$("#operatorName").val(operatorName);
var storeSelect = $('#store-select');
storeSelect.empty().append('<option value="">加载中...</option>').prop('disabled', true);
if (!companyId) {
storeSelect.empty().append('<option value="">请先选择运营商</option>').prop('disabled', true);
return;
}
$.ajax({
url: ctx + 'operation/store/storesByCompanyId',
type: 'POST',
data: { companyId: companyId },
success: function (stores) {
storeSelect.empty();
if (stores.length === 0) {
storeSelect.append('<option value="">暂无门店</option>').prop('disabled', true);
} else {
stores.forEach(function (store) {
storeSelect.append('<option value="' + store.id + '">' + store.name + '</option>');
});
storeSelect.prop('disabled', false);
// 设置默认选中第一个门店，并赋值给 storeName
storeSelect.val(stores[0].id); // 默认选中第一个门店ID
$("#storeName").val(stores[0].name); // 将第一个门店名称赋值给 storeName
}
}
});
});
// 运营商选择变化时加载对应门店
$('#store-select').on('change', function () {
var storeId = $(this).val(); // 获取选中项的 value（门店ID）
var storeName = $('#store-select option:selected').text(); // 获取选中项的 text（门店名称）
// 将门店名称赋值给隐藏输入框
$("#storeName").val(storeName);
});
});
function submitHandler() {
if ($.validate.form()) {
$.operate.save(prefix + "/add", $('#form-car-add').serialize());
}
}
$("input[name='purchaseDate']").datetimepicker({
format: "yyyy-mm-dd",
minView: "month",
autoclose: true
});
</script>
</body>
</html>

167
ruoyi-admin/src/main/resources/templates/operation/car/car.html Normal file
View File

@ -0,0 +1,167 @@
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<th:block th:include="include :: header('车型管理列表')" />
</head>
<body class="gray-bg">
<div class="container-div">
<div class="row">
<div class="col-sm-12 search-collapse">
<form id="formId">
<div class="select-list">
<ul>
<li>
<label>车架号：</label>
<input type="text" name="vin"/>
</li>
<li>
<label>车牌号码：</label>
<input type="text" name="licensePlate"/>
</li>
<li>
<label>车辆归属：</label>
<select name="belongType" th:with="type=${@dict.getType('key_car_belong_type')}">
<option value="">所有</option>
<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
</select>
</li>
<li>
<label>所属运营商名称：</label>
<input type="text" name="operatorName"/>
</li>
<li>
<label>所属门店名称：</label>
<input type="text" name="storeName"/>
</li>
<li>
<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
</li>
</ul>
</div>
</form>
</div>
<div class="btn-group-sm" id="toolbar" role="group">
<a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="operation:car:add">
<i class="fa fa-plus"></i> 添加
</a>
<a class="btn btn-primary single disabled" onclick="$.operate.edit()" shiro:hasPermission="operation:car:edit">
<i class="fa fa-edit"></i> 修改
</a>
<a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()" shiro:hasPermission="operation:car:remove">
<i class="fa fa-remove"></i> 删除
</a>
<!-- <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="operation:car:export">-->
<!-- <i class="fa fa-download"></i> 导出-->
<!-- </a>-->
</div>
<div class="col-sm-12 select-table table-striped">
<table id="bootstrap-table"></table>
</div>
</div>
</div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
var editFlag = [[${@permission.hasPermi('operation:car:edit')}]];
var removeFlag = [[${@permission.hasPermi('operation:car:remove')}]];
var statusDatas = [[${@dict.getType('key_car_status')}]];
var batteryTypeDatas = [[${@dict.getType('key_car_battery_type')}]];
var belongTypeDatas = [[${@dict.getType('key_car_belong_type')}]];
var prefix = ctx + "operation/car";
$(function() {
var options = {
url: prefix + "/list",
createUrl: prefix + "/add",
updateUrl: prefix + "/edit/{id}",
removeUrl: prefix + "/remove",
exportUrl: prefix + "/export",
modalName: "车型管理",
columns: [{
checkbox: true
},
{
field: 'id',
title: '主键ID',
visible: false
},
{
field: 'vin',
title: '车架号(VIN)'
},
{
field: 'licensePlate',
title: '车牌号码'
},
{
field: 'brandName',
title: '车辆品牌'
},
{
field: 'modelName',
title: '车辆型号'
},
{
field: 'lotNumber',
title: 'LOT识别号'
},
{
field: 'purchaseDate',
title: '采购日期'
},
{
field: 'purchasePrice',
title: '采购价格(元)'
},
{
field: 'belongType',
title: '车辆归属',
formatter: function(value, row, index) {
return $.table.selectDictLabel(belongTypeDatas, value);
}
},
{
field: 'brsStatus',
title: 'BRS车辆状态'
},
{
field: 'iotStatus',
title: 'IoT设备状态'
},
{
field: 'iotCode',
title: 'IoT识别码'
},
{
field: 'operatorName',
title: '所属运营商'
},
{
field: 'storeName',
title: '所属门店'
},
{
field: 'status',
title: '状态',
formatter: function(value, row, index) {
return $.table.selectDictLabel(statusDatas, value);
}
},
{
title: '操作',
align: 'center',
formatter: function(value, row, index) {
var actions = [];
actions.push('<a class="btn btn-success btn-xs ' + editFlag + ' btnOption" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + ' btnOption" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
return actions.join('');
}
}]
};
$.table.init(options);
});
</script>
</body>
</html>

279
ruoyi-admin/src/main/resources/templates/operation/car/edit.html Normal file
View File

@ -0,0 +1,279 @@
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
<th:block th:include="include :: header('修改车型管理')" />
<th:block th:include="include :: datetimepicker-css" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
<form class="form-horizontal m" id="form-car-edit" th:object="${zcCar}">
<input name="id" th:field="*{id}" type="hidden">
<div class="form-group">
<label class="col-sm-3 control-label">车架号(VIN)：</label>
<div class="col-sm-8">
<input name="vin" th:field="*{vin}" class="form-control" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">车牌号码：</label>
<div class="col-sm-8">
<input name="licensePlate" th:field="*{licensePlate}" class="form-control" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label is-required">车辆品牌：</label>
<div class="col-sm-8">
<select name="brandName" id="brand-select" class="form-control m-b" required>
<option value="">请选择品牌</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label is-required">车辆型号：</label>
<div class="col-sm-8">
<select name="modelName" id="model-select" class="form-control m-b" required disabled>
<option value="">请先选择品牌</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">LOT识别号：</label>
<div class="col-sm-8">
<input name="lotNumber" th:field="*{lotNumber}" class="form-control" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">采购日期：</label>
<div class="col-sm-8">
<div class="input-group date">
<input name="purchaseDate" th:value="${#dates.format(zcCar.purchaseDate, 'yyyy-MM-dd')}" class="form-control" placeholder="yyyy-MM-dd" type="text">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">采购价格(元)：</label>
<div class="col-sm-8">
<input name="purchasePrice" th:field="*{purchasePrice}" class="form-control" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">车辆归属：</label>
<div class="col-sm-8">
<select name="belongType" class="form-control m-b" th:with="type=${@dict.getType('key_car_belong_type')}">
<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{belongType}"></option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">IoT识别码：</label>
<div class="col-sm-8">
<input name="iotCode" th:field="*{iotCode}" class="form-control" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label is-required">所属运营商：</label>
<div class="col-sm-8">
<input name="operatorName" id="operatorName" class="form-control" type="hidden" >
<select name="operatorId" id="operator-select" class="form-control m-b" required>
<option value="">请选择运营商</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">所属门店：</label>
<div class="col-sm-8">
<input name="storeName" id="storeName" class="form-control" type="hidden" >
<select name="storeId" id="store-select" class="form-control m-b" disabled>
<option value="">请先选择运营商</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">备注信息：</label>
<div class="col-sm-8">
<input name="remark" th:field="*{remark}" class="form-control" type="text">
</div>
</div>
</form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<script th:inline="javascript">
var prefix = ctx + "operation/car";
$("#form-car-edit").validate({
focusCleanup: true
});
$(function () {
// 获取品牌与车型下拉框
var brandSelect = $('#brand-select');
var modelSelect = $('#model-select');
// 保存当前车辆的品牌与车型值
var savedBrand = [[${zcCar.brandName}]];
var savedModel = [[${zcCar.modelName}]];
// 加载品牌列表
$.ajax({
url: ctx + 'operation/carModel/brands',
type: 'GET',
success: function (brands) {
var brandSelect = $('#brand-select');
brands.forEach(function (brand) {
var option = $('<option>').val(brand).text(brand);
if (brand === savedBrand) {
option.attr('selected', 'selected');
}
brandSelect.append(option);
// var option = '<option value="' + brand + '">' + brand + '</option>';
// if (brand === [[${zcCar.brandName}]]) {
// option = '<option value="' + brand + '" selected>' + brand + '</option>';
// }
// brandSelect.append(option);
});
// 如果有已选品牌，则触发加载车型
if (savedBrand) {
modelSelect.prop('disabled', false).empty().append('<option value="">加载中...</option>');
loadModels(savedBrand, savedModel);
}
}
});
// =================== 品牌选择变化事件 ===================
brandSelect.on('change', function () {
var selectedBrand = $(this).val();
if (!selectedBrand) {
modelSelect.empty().append('<option value="">请先选择品牌</option>').prop('disabled', true);
return;
}
loadModels(selectedBrand);
});
// =================== 加载车型方法封装 ===================
function loadModels(brandName, savedModel = null) {
$.ajax({
url: ctx + 'operation/carModel/getModels',
type: 'POST',
data: { brandName: brandName },
success: function (models) {
modelSelect.empty();
if (models.length === 0) {
modelSelect.append('<option value="">暂无车型</option>').prop('disabled', true);
} else {
models.forEach(function (model) {
modelSelect.append($('<option>').val(model).text(model));
});
modelSelect.prop('disabled', false);
// 回显车型
if (savedModel) {
modelSelect.val(savedModel);
}
}
}
});
}
// 获取运营商与门店下拉框
var operatorSelect = $('#operator-select');
var storeSelect = $('#store-select');
// 保存当前车辆的运营商与门店值
var savedOperatorId = [[${zcCar.operatorId}]];
var savedStoreId = [[${zcCar.storeId}]];
// =================== 加载运营商列表 ===================
$.ajax({
url: ctx + 'operation/company/companyAll',
type: 'GET',
success: function (companies) {
companies.forEach(function (company) {
var option = $('<option>').val(company.id).text(company.companyName);
if (company.id == savedOperatorId) {
option.attr('selected', 'selected');
}
operatorSelect.append(option);
});
// 如果有已选运营商，则触发加载门店
if (savedOperatorId) {
storeSelect.prop('disabled', false).empty().append('<option value="">加载中...</option>');
loadStores(savedOperatorId, savedStoreId);
}
}
});
// =================== 运营商选择变化事件 ===================
operatorSelect.on('change', function () {
var selectedOperatorId = $(this).val();
if (!selectedOperatorId) {
storeSelect.empty().append('<option value="">请先选择运营商</option>').prop('disabled', true);
return;
}
// 设置隐藏域 operatorName
var selectedOperatorName = operatorSelect.find('option:selected').text();
$('#operatorName').val(selectedOperatorName);
loadStores(selectedOperatorId);
});
// =================== 加载门店方法封装 ===================
function loadStores(operatorId, savedStoreId = null) {
$.ajax({
url: ctx + 'operation/store/storesByCompanyId',
type: 'POST',
data: { companyId: operatorId },
success: function (stores) {
storeSelect.empty();
if (stores.length === 0) {
storeSelect.append('<option value="">暂无门店</option>').prop('disabled', true);
} else {
stores.forEach(function (store) {
storeSelect.append($('<option>').val(store.id).text(store.name));
});
storeSelect.prop('disabled', false);
// 回显门店
if (savedStoreId) {
storeSelect.val(savedStoreId);
// 设置隐藏域 storeName
var selectedStoreName = storeSelect.find('option:selected').text();
$('#storeName').val(selectedStoreName);
}
}
}
});
}
// =================== 门店选择变化事件 ===================
storeSelect.on('change', function () {
var selectedStoreId = $(this).val();
var selectedStoreName = $(this).find('option:selected').text();
$('#storeName').val(selectedStoreName);
});
});
function submitHandler() {
if ($.validate.form()) {
$.operate.save(prefix + "/edit", $('#form-car-edit').serialize());
}
}
$("input[name='purchaseDate']").datetimepicker({
format: "yyyy-mm-dd",
minView: "month",
autoclose: true
});
</script>
</body>
</html>

76
ruoyi-admin/src/main/resources/templates/operation/carModel/add.html
View File

@ -2,6 +2,10 @@
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
<th:block th:include="include :: header('新增车型管理')" />
<th:block th:include="include :: datetimepicker-css" />
<th:block th:include="include :: bootstrap-fileinput-css" />
<th:block th:include="include :: select2-css" />
<th:block th:include="include :: bootstrap-select-css" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
@ -20,7 +24,35 @@
<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">
<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>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">整车重量(kg)：</label>
<div class="col-sm-6">
<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">
<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">
<input type="hidden" name="image">
<div class="file-loading">
<input class="form-control file-upload" id="image" name="file" type="file">
</div>
</div>
</div>
<h4 class="form-header h4">关联套餐</h4>
<div class="row">
<div class="col-sm-12">
@ -32,6 +64,10 @@
</form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<th:block th:include="include :: bootstrap-fileinput-js" />
<th:block th:include="include :: select2-js" />
<th:block th:include="include :: bootstrap-select-js" />
<script th:inline="javascript">
var prefix = ctx + "operation/carModel"
var rentCarRuleList = [[${rentCarRuleList}]]
@ -43,6 +79,44 @@
focusCleanup: true
});
$(document).ready(function () {
// 单图上传
$("#image").fileinput({
uploadUrl: ctx + 'common/newUpload',
uploadExtraData: {
dataType: '30'
},
maxFileCount: 1,
autoReplace: true,
showClose: false,
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()
}
$("#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('')
});
});
$(function() {
var options = {
data: rentCarRuleList,

16
ruoyi-admin/src/main/resources/templates/operation/carModel/carModel.html
View File

@ -56,6 +56,7 @@
var editFlag = [[${@permission.hasPermi('operation:carModel:edit')}]];
var removeFlag = [[${@permission.hasPermi('operation:carModel:remove')}]];
var statusDatas = [[${@dict.getType('key_company_status')}]];
var batteryTypeDatas = [[${@dict.getType('key_car_battery_type')}]];
var prefix = ctx + "operation/carModel";
$(function() {
@ -85,6 +86,21 @@
title: '车型名称',
width: '400'
},
{
field: 'batteryType',
title: '支持电池类型',
formatter: function(value, row, index) {
return $.table.selectDictLabel(batteryTypeDatas, value);
}
},
{
field: 'weight',
title: '整车重量(kg)'
},
{
field: 'maxSpeed',
title: '最高时速(km/h)'
},
{
field: 'status',
title: '状态',

88
ruoyi-admin/src/main/resources/templates/operation/carModel/edit.html
View File

@ -2,6 +2,10 @@
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
<th:block th:include="include :: header('修改车型管理')" />
<th:block th:include="include :: datetimepicker-css" />
<th:block th:include="include :: bootstrap-fileinput-css" />
<th:block th:include="include :: select2-css" />
<th:block th:include="include :: bootstrap-select-css" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
@ -20,7 +24,35 @@
<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">
<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>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">整车重量(kg)：</label>
<div class="col-sm-6">
<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">
<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">
<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>
<h4 class="form-header h4">关联套餐</h4>
<div class="row">
<div class="col-sm-12">
@ -32,6 +64,10 @@
</form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<th:block th:include="include :: bootstrap-fileinput-js" />
<th:block th:include="include :: select2-js" />
<th:block th:include="include :: bootstrap-select-js" />
<script th:inline="javascript">
var prefix = ctx + "operation/carModel";
var rentCarRuleList = [[${rentCarRuleList}]]
@ -44,6 +80,14 @@
});
$(function() {
// 初始化 select2
$('.select2-multiple').select2();
// 设置默认选中值（假设 batteryType 是一个逗号分隔的字符串）
var selectedValues = [[${zcCarModel.batteryType}]].split(',');
$('.select2-multiple').val(selectedValues).trigger('change');
var options = {
data: rentCarRuleList,
sidePagination: "client",
@ -143,6 +187,48 @@
$.operate.save(prefix + "/edit", $('#form-carModel-edit').serialize());
}
}
let preId = '';
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()
}
$("#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>
</html>