Pu Zhibing
2025-07-30 d04bcbfa85b97e4444bac2a66bbee611d05f0f0e
ManagementQYTTravel/guns-admin/src/main/webapp/WEB-INF/view/system/tCar/tCar_add.html
@@ -3,6 +3,7 @@
    <div class="ibox-content">
        <div class="form-horizontal" id="carInfoForm">
            <input type="hidden" id="roleType" name="roleType" value="${roleType}">
            <input type="hidden" name="driverIds" id="driverIdsHidden">
            <div class="row">
                <div class="col-sm-11">
                    <div class="form-group">
@@ -94,25 +95,55 @@
                            </select>
                        </div>
                    </div>
                    <#select id="carBrandId" name="车辆品牌:" onchange="TCarInfoDlg.brandChange(this)">
                        <option value="">选择车辆品牌</option>
                        @for(obj in brandList){
                        <option value="${obj.id}">${obj.name}</option>
                        @}
                    </#select>
                    <#select id="carModelId" name="车辆类型:">
                        <option value="">选择车辆类型</option>
                    </#select>
                    <#select id="carColor" name="车辆颜色:">
                        <option value="">选择车辆颜色</option>
                        <option value="黑色">黑色</option>
                        <option value="银色">银色</option>
                        <option value="白色">白色</option>
                        <option value="红色">红色</option>
                        <option value="黄色">黄色</option>
                        <option value="橙色">橙色</option>
                        <option value="蓝色">蓝色</option>
                    </#select>
                    <div class="form-group" style="display: flex; align-items: center;">
                        <label class="col-sm-3 control-label">车辆品牌:</label>
                        <div class="col-sm-3" style="padding-right:0;">
                            <select class="form-control" id="carBrandId" name="carBrandId" onchange="TCarInfoDlg.brandChange(this)">
                                <option value="">选择车辆品牌</option>
                                @for(obj in brandList){
                                <option value="${obj.id}">${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>
                            </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="">选择车辆颜色</option>
                                <option value="黑色">黑色</option>
                                <option value="银色">银色</option>
                                <option value="白色">白色</option>
                                <option value="红色">红色</option>
                                <option value="黄色">黄色</option>
                                <option value="橙色">橙色</option>
                                <option value="蓝色">蓝色</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="车牌号" />
                    <#avatar id="carPhoto" name="车辆照片:" />
                    <#input id="drivingLicenseNumber" name="行驶证编号" />
@@ -156,7 +187,7 @@
            <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="TCarInfoDlg.addSubmit()"/>
                    <#button btnCss="info" name="提交" id="ensure" icon="fa-check" clickFun="addSubmit()"/>
                    <#button btnCss="danger" name="取消" id="cancel" icon="fa-eraser" clickFun="TCarInfoDlg.close()"/>
                </div>
            </div>
@@ -165,6 +196,7 @@
    </div>
</div>
<script src="${ctxPath}/static/modular/system/tCar/tCar_info.js"></script>
<script>
    laydate.render({
        elem: '#annualInspectionTime'
@@ -193,5 +225,137 @@
    laydate.render({
        elem: '#registerDate'
    });
    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 = [];
        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 addSubmit(){
    $('#driverIdsHidden').val(selectedDrivers.join(','));
    TCarInfoDlg.addSubmit()
}
</script>
@}