@layout("/common/_container.html"){
|
<div class="ibox float-e-margins">
|
<div class="ibox-content">
|
<div class="form-horizontal" id="carInfoForm">
|
<input type="hidden" id="id" name="id" value="${item.id}">
|
<input type="hidden" id="roleType" name="roleType" value="${roleType}">
|
<input type="hidden" id="bindDriverId" name="bindDriverId" value="${item.bindDriverId}">
|
<div class="row">
|
<div class="col-sm-11">
|
<div class="form-group">
|
<label class="col-sm-3 control-label">所属机构：</label>
|
<div class="col-sm-9" style="display: flex;align-items: center;">
|
@if(roleType == 1){
|
<div class="radio radio-info radio-inline">
|
<input type="radio" id="companyType1" value="1" name="companyType" ${1 == companyType ? 'checked=checked' : ''} onclick="TCarInfoDlg.companyTypeClick(1)">
|
<label for="companyType1"> 平台车辆 </label>
|
</div>
|
<div class="radio radio-success radio-inline">
|
<input type="radio" id="companyTyp2" value="2" name="companyType" ${2 == companyType ? 'checked=checked' : ''} onclick="TCarInfoDlg.companyTypeClick(2)">
|
<label for="companyTyp2"> 加盟车辆 </label>
|
</div>
|
<select class="form-control companyDiv" id="oneId" onchange="TCarInfoDlg.oneChange(this)" style="width: 200px">
|
<option value="">选择所属分公司</option>
|
@for(obj in companyList!){
|
<option value="${obj.id}" ${obj.id == item.companyId ? 'selected=selected' : ''}>${obj.name}</option>
|
@}
|
</select>
|
<select class="form-control companyDiv" id="twoId" style="width: 200px;margin-left: 30px;">
|
<option value="">选择所属加盟商</option>
|
@for(obj in franchiseeList!){
|
<option value="${obj.id}" ${obj.id == item.franchiseeId ? 'selected=selected' : ''}>${obj.name}</option>
|
@}
|
</select>
|
@}else if(roleType == 2){
|
|
<select class="form-control companyDiv" id="oneId" onchange="TCarInfoDlg.oneChange(this)" style="width: 200px;display: none;">
|
<option value="${objectId}">${objectName}</option>
|
</select>
|
<span class="control-label">${objectName!}</span>
|
<select class="form-control" id="franchiseeId" style="width: 200px;margin-left: 30px;">
|
<option value="">选择所属加盟商</option>
|
@for(obj in franchiseeList!){
|
<option value="${obj.id}" ${obj.id == item.franchiseeId ? 'selected=selected' : ''}>${obj.name}</option>
|
@}
|
</select>
|
@}else if(roleType == 3){
|
<span class="control-label">${objectName!}</span>
|
@}
|
</div>
|
</div>
|
<div class="form-group">
|
<fieldset>
|
<label class="col-sm-3 control-label">服务模式：</label>
|
<div class="col-sm-9">
|
<div class="checkbox checkbox-success checkbox-inline">
|
<input type="checkbox" name="serverBox" id="serverBox1" value="1" ${2 == one ? 'checked=checked' : ''} onclick="TCarInfoDlg.zcServerClick()">
|
<label for="serverBox1"> 快车 </label>
|
</div>
|
<div class="checkbox checkbox-success checkbox-inline">
|
<input type="checkbox" name="serverBox" id="serverBox2" value="2" ${2 == two ? 'checked=checked' : ''}>
|
<label for="serverBox2"> 出租车 </label>
|
</div>
|
<div class="checkbox checkbox-success checkbox-inline">
|
<input type="checkbox" name="serverBox" id="serverBox3" value="3" ${2 == three ? 'checked=checked' : ''} onclick="TCarInfoDlg.kcServerClick()">
|
<label for="serverBox3"> 跨城出行 </label>
|
</div>
|
<!-- <div class="checkbox checkbox-success checkbox-inline">-->
|
<!-- <input type="checkbox" name="serverBox" id="serverBox4" value="4" ${2 == four ? 'checked=checked' : ''}>-->
|
<!-- <label for="serverBox4"> 小件物流-同城 </label>-->
|
<!-- </div>-->
|
<!-- <div class="checkbox checkbox-success checkbox-inline">-->
|
<!-- <input type="checkbox" name="serverBox" id="serverBox5" value="5" ${2 == five ? 'checked=checked' : ''}>-->
|
<!-- <label for="serverBox5"> 小件物流-跨城 </label>-->
|
<!-- </div>-->
|
<!-- <div class="checkbox checkbox-success checkbox-inline">-->
|
<!-- <input type="checkbox" name="serverBox" id="serverBox6" value="6" ${2 == six ? 'checked=checked' : ''}>-->
|
<!-- <label for="serverBox6"> 包车 </label>-->
|
<!-- </div>-->
|
</div>
|
</fieldset>
|
</div>
|
<div class="form-group" id="zcModelDiv">
|
<label class="col-sm-3 control-label">快车车型：</label>
|
<div class="col-sm-9">
|
<select class="form-control" id="zcModel" name="zcModel">
|
<option value="">选择车型</option>
|
@for(obj in zcModelList){
|
<option value="${obj.id}" ${obj.id == zcModel ? 'selected=selected' : ''}>${obj.name}</option>
|
@}
|
</select>
|
</div>
|
</div>
|
<div class="form-group" id="kcModelDiv">
|
<label class="col-sm-3 control-label">跨城出行车型：</label>
|
<div class="col-sm-9">
|
<select class="form-control" id="kcModel" name="kcModel">
|
<option value="">选择车型</option>
|
@for(obj in kcModelList){
|
<option value="${obj.id}" ${obj.id == kcModel ? 'selected=selected' : ''}>${obj.name}</option>
|
@}
|
</select>
|
</div>
|
</div>
|
|
|
<div class="form-group">
|
<label class="col-sm-3 control-label">车辆品牌：</label>
|
<div class="col-sm-3">
|
<select class="form-control" id="carBrandId" name="carBrandId" onchange="TCarInfoDlg.brandChange(this)">
|
<option value="">选择车辆品牌</option>
|
@for(obj in brandList){
|
<option value="${obj.id}" ${obj.id == item.carBrandId ? 'selected=selected' : ''}>${obj.name}</option>
|
@}
|
</select>
|
</div>
|
|
<label class="col-sm-2 control-label">授权司机：</label>
|
<div class="col-sm-3">
|
<div id="driverMultiSelect" class="driver-multiselect" tabindex="0" style="position:relative; width:320px;">
|
<div id="driverTags" class="driver-tags" style="min-height:38px; border:1px solid #d9d9d9; border-radius:4px; padding:4px 8px; display:flex; align-items:center; flex-wrap:wrap; cursor:pointer; background:#fff;"></div>
|
<input type="text" id="driverSearchInput" class="form-control" placeholder="搜索司机" style="margin-top:2px; display:none; position:absolute; left:0; top:40px; width:100%; z-index:2;" autocomplete="off">
|
<div id="driverDropdown" class="driver-dropdown" style="display:none; position:absolute; left:0; top:40px; width:100%; max-height:220px; overflow:auto; border:1px solid #d9d9d9; background:#fff; border-radius:0 0 4px 4px; z-index:10;"></div>
|
</div>
|
</div>
|
</div>
|
|
|
<div class="form-group">
|
<label class="col-sm-3 control-label">车辆类型：</label>
|
<div class="col-sm-3">
|
<select class="form-control" id="carModelId" name="carModelId">
|
<option value="">选择车辆类型</option>
|
@for(obj in modelList){
|
<option value="${obj.id}" ${obj.id == item.carModelId ? 'selected=selected' : ''}>${obj.name}</option>
|
@}
|
</select>
|
</div>
|
</div>
|
|
<div class="form-group has-feedback">
|
<label class="col-sm-3 control-label">车辆颜色：</label>
|
<div class="col-sm-3">
|
<select class="form-control" id="carColor" name="carColor" data-bv-field="carColor">
|
<option value="黑色" ${'黑色' == item.carColor ? 'selected=selected' : ''}>黑色</option>
|
<option value="银色" ${'银色' == item.carColor ? 'selected=selected' : ''}>银色</option>
|
<option value="白色" ${'白色' == item.carColor ? 'selected=selected' : ''}>白色</option>
|
<option value="红色" ${'红色' == item.carColor ? 'selected=selected' : ''}>红色</option>
|
<option value="黄色" ${'黄色' == item.carColor ? 'selected=selected' : ''}>黄色</option>
|
<option value="橙色" ${'橙色' == item.carColor ? 'selected=selected' : ''}>橙色</option>
|
<option value="蓝色" ${'蓝色' == item.carColor ? 'selected=selected' : ''}>蓝色</option>
|
|
</select><i class="form-control-feedback" data-bv-icon-for="carColor" style="display: none;"></i>
|
<small class="help-block" data-bv-validator="notEmpty" data-bv-for="carColor" data-bv-result="NOT_VALIDATED" style="display: none;">车辆颜色不能为空</small></div>
|
</div>
|
|
<#input id="carLicensePlate" name="车牌号" value="${item.carLicensePlate}"/>
|
<#avatar id="carPhoto" name="车辆照片：" avatarImg="${item.carPhoto}"/>
|
<#input id="drivingLicenseNumber" name="行驶证编号" value="${item.drivingLicenseNumber}"/>
|
<#avatar id="drivingLicensePhoto" name="行驶证照片：" avatarImg="${item.drivingLicensePhoto}"/>
|
<#input id="annualInspectionTime" name="年检到期时间" type="text" value="${item.annualInspectionTime}"/>
|
<#input id="commercialInsuranceTime" name="商业保险到期时间" type="text" value="${item.commercialInsuranceTime}"/>
|
<#input id="plateColor" name="车牌颜色" value="${item.plateColor}"/>
|
<#input id="vehicleType" name="车辆类型" value="${item.vehicleType}"/>
|
<#input id="ownerName" name="车辆所有人" value="${item.ownerName}"/>
|
<#input id="engineId" name="发动机号" value="${item.engineId}"/>
|
<#input id="VIN" name="车辆VIN码" value="${item.VIN}"/>
|
<#input id="certifyDateA" name="车辆注册日期" type="text" value="${item.certifyDateA}"/>
|
<#input id="fuelType" name="车辆燃料类型" value="${item.fuelType}"/>
|
<#input id="engineDisplace" name="发动机排量" value="${item.engineDisplace}"/>
|
<#input id="certificate" name="运输证字号" value="${item.certificate}"/>
|
<#input id="transAgency" name="车辆运输证发证机构" value="${item.transAgency}"/>
|
<#input id="transArea" name="车辆经营区域" value="${item.transArea}"/>
|
<#input id="transDateStart" name="车辆运输证有效期起" type="text" value="${item.transDateStart}"/>
|
<#input id="transDateStop" name="车辆运输证有效期止" type="text" value="${item.transDateStop}"/>
|
<#input id="certifyDateB" name="车辆初次登记日期" type="text" value="${item.certifyDateB}"/>
|
<#select id="fixState" name="车辆维修状态：">
|
<option value="0" ${0 == item.fixState ? 'selected=selected' : ''}>未检修</option>
|
<option value="1" ${1 == item.fixState ? 'selected=selected' : ''}>已检修</option>
|
<option value="2" ${2 == item.fixState ? 'selected=selected' : ''}>未知</option>
|
</#select>
|
<#input id="nextFixDate" name="车辆下次年检时间" type="text" value="${item.nextFixDate}"/>
|
<#input id="checkState" name="车辆年度审核状态" value="${item.checkState}"/>
|
<#input id="feePrintId" name="发票打印设备序列号" value="${item.feePrintId}"/>
|
<#input id="GPSBrand" name="卫星定位装置品牌" value="${item.GPSBrand}"/>
|
<#input id="GPSModel" name="卫星定位装置型号" value="${item.GPSModel}"/>
|
<#input id="GPSIMEI" name="卫星定位装置IMEI号" value="${item.GPSIMEI}"/>
|
<#input id="GPSInstallDate" name="卫星定位装置安装时间" type="text" value="${item.GPSInstallDate}"/>
|
<#input id="registerDate" name="平台车辆报备日期" type="text" value="${item.registerDate}"/>
|
<#select id="commercialType" name="服务类型：">
|
<option value="1" ${1 == item.commercialType ? 'selected=selected' : ''}>网络预约出租车</option>
|
<option value="2" ${2 == item.commercialType ? 'selected=selected' : ''}>巡游出租汽车</option>
|
<option value="3" ${3 == item.commercialType ? 'selected=selected' : ''}>私人小客车合乘</option>
|
</#select>
|
</div>
|
</div>
|
|
<div class="row btn-group-m-t">
|
<div class="col-sm-10 col-sm-offset-5">
|
<#button btnCss="info" name="提交" id="ensure" icon="fa-check" clickFun="editSubmit()"/>
|
<#button btnCss="danger" name="取消" id="cancel" icon="fa-eraser" clickFun="TCarInfoDlg.close()"/>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
<script src="${ctxPath}/static/modular/system/tCar/tCar_info.js"></script>
|
<script>
|
laydate.render({
|
elem: '#annualInspectionTime'
|
});
|
laydate.render({
|
elem: '#commercialInsuranceTime'
|
});
|
laydate.render({
|
elem: '#certifyDateA'
|
});
|
laydate.render({
|
elem: '#transDateStart'
|
});
|
laydate.render({
|
elem: '#transDateStop'
|
});
|
laydate.render({
|
elem: '#certifyDateB'
|
});
|
laydate.render({
|
elem: '#nextFixDate'
|
});
|
laydate.render({
|
elem: '#GPSInstallDate'
|
});
|
laydate.render({
|
elem: '#registerDate'
|
});
|
</script>
|
<script type="application/javascript">
|
$(function() {
|
var companyType = $("input[name='companyType']:checked").val();
|
if (1 == companyType){
|
$(".companyDiv").hide();
|
} else if (2 == companyType){
|
$(".companyDiv").show();
|
}
|
|
// 1. 初始化 selectedDrivers
|
let bindDriverId = $("#bindDriverId").val();
|
selectedDrivers = bindDriverId ? bindDriverId.split(",").filter(Boolean) : [];
|
|
// 2. 触发 change 拉取司机
|
$('#oneId').trigger('change');
|
|
TCarInfoDlg.zcServerClick();
|
TCarInfoDlg.kcServerClick();
|
});
|
|
|
|
|
|
var allDrivers = [];
|
var selectedDrivers = []; // 选中司机id数组
|
var driverMap = {}; // id->name
|
|
// 监听分公司选择，拉取司机
|
$('#oneId').on('change', function() {
|
var companyId = $(this).val();
|
if (!companyId) {
|
allDrivers = [];
|
selectedDrivers = [];
|
driverMap = {};
|
renderDriverTags();
|
renderDriverDropdown();
|
return;
|
}
|
selectDriverFromCompanyId(companyId, function(driverList) {
|
allDrivers = driverList || [];
|
driverMap = {};
|
allDrivers.forEach(function(d) { driverMap[d.id] = d.name; });
|
// 只保留当前司机列表中存在的已选司机
|
selectedDrivers = selectedDrivers.filter(function(id) {
|
return allDrivers.some(function(d) { return d.id == id; });
|
});
|
renderDriverTags();
|
renderDriverDropdown();
|
});
|
});
|
|
// 渲染下拉选项
|
function renderDriverDropdown(keyword) {
|
var $dropdown = $('#driverDropdown');
|
$dropdown.empty();
|
var filter = (keyword || '').trim();
|
var filtered = allDrivers.filter(function(driver) {
|
return !filter || driver.name.indexOf(filter) !== -1;
|
});
|
if (filtered.length === 0) {
|
$dropdown.append('<div style="padding:8px;color:#aaa;">无匹配司机</div>');
|
return;
|
}
|
filtered.forEach(function(driver) {
|
var checked = selectedDrivers.indexOf(driver.id+'') !== -1;
|
$dropdown.append('<div class="driver-option" data-id="'+driver.id+'" style="padding:6px 12px;cursor:pointer;display:flex;align-items:center;'+(checked?'background:#f5f5f5;':'')+'">'
|
+'<span style="flex:1;'+(checked?'color:#1890ff;':'')+'">'+driver.name+'</span>'
|
+(checked?'<span style="color:#1890ff;">✔</span>':'')
|
+'</div>');
|
});
|
}
|
|
// 渲染已选标签
|
function renderDriverTags() {
|
var $tags = $('#driverTags');
|
$tags.empty();
|
if (selectedDrivers.length === 0) {
|
$tags.append('<span style="color:#aaa;">请选择司机</span>');
|
return;
|
}
|
var firstId = selectedDrivers[0];
|
var firstName = driverMap[firstId] || '';
|
$tags.append('<span class="driver-tag" style="background:#f0f0f0;border-radius:2px;padding:2px 8px;margin-right:4px;display:flex;align-items:center;">'
|
+firstName+'<span class="remove-tag" data-id="'+firstId+'" style="margin-left:4px;cursor:pointer;">×</span></span>');
|
if (selectedDrivers.length > 1) {
|
$tags.append('<span class="driver-tag" style="background:#f0f0f0;border-radius:2px;padding:2px 8px;">+'
|
+(selectedDrivers.length-1)+'</span>');
|
}
|
}
|
|
// 展示/隐藏下拉和搜索
|
function showDriverDropdown() {
|
$('#driverDropdown').show();
|
$('#driverSearchInput').show().val('').focus();
|
renderDriverDropdown('');
|
}
|
function hideDriverDropdown() {
|
$('#driverDropdown').hide();
|
$('#driverSearchInput').hide();
|
}
|
|
// 点击tags区域显示下拉
|
$('#driverTags').on('click', function() {
|
if (allDrivers.length === 0) return;
|
showDriverDropdown();
|
});
|
// 输入搜索
|
$('#driverSearchInput').on('input', function() {
|
renderDriverDropdown($(this).val());
|
});
|
// 选中/取消选中
|
$('#driverDropdown').on('click', '.driver-option', function() {
|
var id = $(this).data('id').toString();
|
var idx = selectedDrivers.indexOf(id);
|
if (idx === -1) {
|
selectedDrivers.push(id);
|
} else {
|
selectedDrivers.splice(idx,1);
|
}
|
renderDriverTags();
|
renderDriverDropdown($('#driverSearchInput').val());
|
});
|
// 删除标签
|
$('#driverTags').on('click', '.remove-tag', function(e) {
|
var id = $(this).data('id').toString();
|
selectedDrivers = selectedDrivers.filter(function(did) { return did !== id; });
|
renderDriverTags();
|
renderDriverDropdown($('#driverSearchInput').val());
|
e.stopPropagation();
|
});
|
// 失焦隐藏
|
$('#driverSearchInput').on('blur', function() {
|
setTimeout(hideDriverDropdown, 200);
|
});
|
// 保证点击下拉不失焦
|
$('#driverDropdown').on('mousedown', function(e) { e.preventDefault(); });
|
|
// 初始化时禁用
|
$(function(){
|
renderDriverTags();
|
renderDriverDropdown();
|
});
|
|
// 你需要实现的接口调用方法
|
function selectDriverFromCompanyId(companyId, callback) {
|
// 这里你自己实现ajax
|
var ajax = new $ax(Feng.ctxPath + "/tCar/selectDriverFromCompanyId", function(data){
|
callback(data)
|
});
|
ajax.set("companyId",companyId);
|
ajax.start();
|
}
|
|
function editSubmit(){
|
TCarInfoDlg.editSubmit(selectedDrivers.join(','))
|
}
|
</script>
|
@}
|
