New file |
| | |
| | | @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" disabled 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" disabled 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)" disabled 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" disabled 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){ |
| | | <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" disabled 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" disabled 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" disabled 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" disabled 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" disabled 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" disabled 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" disabled 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" disabled 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}" readonly="true"/> |
| | | <#avatar id="carPhoto" name="车辆照片:" avatarImg="${item.carPhoto}" readonly="true"/> |
| | | <#input id="drivingLicenseNumber" name="行驶证编号" value="${item.drivingLicenseNumber}" readonly="true"/> |
| | | <#avatar id="drivingLicensePhoto" name="行驶证照片:" avatarImg="${item.drivingLicensePhoto}" readonly="true"/> |
| | | <#input id="annualInspectionTime" name="年检到期时间" type="text" value="${item.annualInspectionTime}" readonly="true"/> |
| | | <#input id="commercialInsuranceTime" name="商业保险到期时间" type="text" value="${item.commercialInsuranceTime}" readonly="true"/> |
| | | <#input id="plateColor" name="车牌颜色" value="${item.plateColor}" readonly="true"/> |
| | | <#input id="vehicleType" name="车辆类型" value="${item.vehicleType}" readonly="true"/> |
| | | <#input id="ownerName" name="车辆所有人" value="${item.ownerName}" readonly="true"/> |
| | | <#input id="engineId" name="发动机号" value="${item.engineId}" readonly="true"/> |
| | | <#input id="VIN" name="车辆VIN码" value="${item.VIN}" readonly="true"/> |
| | | <#input id="certifyDateA" name="车辆注册日期" type="text" value="${item.certifyDateA}" readonly="true"/> |
| | | <#input id="fuelType" name="车辆燃料类型" value="${item.fuelType}" readonly="true"/> |
| | | <#input id="engineDisplace" name="发动机排量" value="${item.engineDisplace}" readonly="true"/> |
| | | <#input id="certificate" name="运输证字号" value="${item.certificate}" readonly="true"/> |
| | | <#input id="transAgency" name="车辆运输证发证机构" value="${item.transAgency}" readonly="true"/> |
| | | <#input id="transArea" name="车辆经营区域" value="${item.transArea}" readonly="true"/> |
| | | <#input id="transDateStart" name="车辆运输证有效期起" type="text" value="${item.transDateStart}" readonly="true"/> |
| | | <#input id="transDateStop" name="车辆运输证有效期止" type="text" value="${item.transDateStop}" readonly="true"/> |
| | | <#input id="certifyDateB" name="车辆初次登记日期" type="text" value="${item.certifyDateB}" readonly="true"/> |
| | | <#select id="fixState" name="车辆维修状态:"> |
| | | <option disabled value="0" ${0 == item.fixState ? 'selected=selected' : ''}>未检修</option> |
| | | <option disabled value="1" ${1 == item.fixState ? 'selected=selected' : ''}>已检修</option> |
| | | <option disabled value="2" ${2 == item.fixState ? 'selected=selected' : ''}>未知</option> |
| | | </#select> |
| | | <#input id="nextFixDate" name="车辆下次年检时间" type="text" value="${item.nextFixDate}" readonly="true"/> |
| | | <#input id="checkState" name="车辆年度审核状态" value="${item.checkState}" readonly="true"/> |
| | | <#input id="feePrintId" name="发票打印设备序列号" value="${item.feePrintId}" readonly="true"/> |
| | | <#input id="GPSBrand" name="卫星定位装置品牌" value="${item.GPSBrand}" readonly="true"/> |
| | | <#input id="GPSModel" name="卫星定位装置型号" value="${item.GPSModel}" readonly="true"/> |
| | | <#input id="GPSIMEI" name="卫星定位装置IMEI号" value="${item.GPSIMEI}" readonly="true"/> |
| | | <#input id="GPSInstallDate" name="卫星定位装置安装时间" type="text" value="${item.GPSInstallDate}" readonly="true"/> |
| | | <#input id="registerDate" name="平台车辆报备日期" type="text" value="${item.registerDate}" readonly="true"/> |
| | | <#select id="commercialType" name="服务类型:"> |
| | | <option disabled value="1" ${1 == item.commercialType ? 'selected=selected' : ''}>网络预约出租车</option> |
| | | <option disabled value="2" ${2 == item.commercialType ? 'selected=selected' : ''}>巡游出租汽车</option> |
| | | <option disabled 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.editSubmit1(selectedDrivers.join(',')) |
| | | } |
| | | </script> |
| | | @} |