Browse Source

省份可单独修改

Boss
徐飞洋 2 weeks ago
parent
commit
bb8eea306d
  1. 263
      supply.html

263
supply.html

@ -2138,10 +2138,9 @@
<div id="currentRegion" style="margin-top: 10px; padding: 8px 12px; background-color: #f0f8ff; border: 1px solid #91d5ff; border-radius: 4px; font-size: 12px; color: #1890ff;">当前选择: 未选择</div> <div id="currentRegion" style="margin-top: 10px; padding: 8px 12px; background-color: #f0f8ff; border: 1px solid #91d5ff; border-radius: 4px; font-size: 12px; color: #1890ff;">当前选择: 未选择</div>
</div> </div>
<div class="select-body" style="height: 400px;"> <div class="select-body" style="height: 400px;">
<div id="regionOptionsList" style="display: flex; gap: 10px; padding: 10px; height: 100%;"> <div id="regionOptionsList" style="padding: 10px; height: 100%;">
<!-- 省市选择将通过JavaScript动态生成 --> <!-- 省份选择将通过JavaScript动态生成 -->
<div id="provinceList" style="flex: 1; overflow-y: auto; height: 350px;"></div> <div id="provinceList" style="overflow-y: auto; height: 350px;"></div>
<div id="cityList" style="flex: 1; overflow-y: auto; height: 350px;"></div>
</div> </div>
</div> </div>
<div class="select-footer" style="padding: 16px 20px; display: flex; justify-content: space-between; border-top: 1px solid #f0f0f0; background-color: #fafafa;"> <div class="select-footer" style="padding: 16px 20px; display: flex; justify-content: space-between; border-top: 1px solid #f0f0f0; background-color: #fafafa;">
@ -2579,10 +2578,9 @@
<div id="editCurrentRegion" style="margin-top: 10px; padding: 8px 12px; background-color: #f0f8ff; border: 1px solid #91d5ff; border-radius: 4px; font-size: 12px; color: #1890ff;">当前选择: 未选择</div> <div id="editCurrentRegion" style="margin-top: 10px; padding: 8px 12px; background-color: #f0f8ff; border: 1px solid #91d5ff; border-radius: 4px; font-size: 12px; color: #1890ff;">当前选择: 未选择</div>
</div> </div>
<div class="select-body" style="height: 400px;"> <div class="select-body" style="height: 400px;">
<div id="editRegionOptionsList" style="display: flex; gap: 10px; padding: 10px; height: 100%;"> <div id="editRegionOptionsList" style="padding: 10px; height: 100%;">
<!-- 省市选择将通过JavaScript动态生成 --> <!-- 省份选择将通过JavaScript动态生成 -->
<div id="editProvinceList" style="flex: 1; overflow-y: auto; height: 350px;"></div> <div id="editProvinceList" style="overflow-y: auto; height: 350px;"></div>
<div id="editCityList" style="flex: 1; overflow-y: auto; height: 350px;"></div>
</div> </div>
</div> </div>
<div class="select-footer" style="padding: 16px 20px; display: flex; justify-content: space-between; border-top: 1px solid #f0f0f0; background-color: #fafafa;"> <div class="select-footer" style="padding: 16px 20px; display: flex; justify-content: space-between; border-top: 1px solid #f0f0f0; background-color: #fafafa;">
@ -5368,7 +5366,6 @@
// 生成地区选项 // 生成地区选项
function generateRegionOptions() { function generateRegionOptions() {
const provinceList = document.getElementById('provinceList'); const provinceList = document.getElementById('provinceList');
const cityList = document.getElementById('cityList');
// 使用文档片段减少DOM重绘 // 使用文档片段减少DOM重绘
const provinceFragment = document.createDocumentFragment(); const provinceFragment = document.createDocumentFragment();
@ -5382,13 +5379,12 @@
selectedProvince = province.province; selectedProvince = province.province;
selectedCity = ''; selectedCity = '';
updateRegionDisplay(); updateRegionDisplay();
// 生成城市选项 // 直接确认选择
generateCityOptions(province.cities); const regionString = selectedProvince;
// 直接滚动城市列表到顶部 document.getElementById('regionDisplayText').textContent = regionString;
const cityList = document.getElementById('cityList'); document.getElementById('regionValue').value = regionString;
setTimeout(() => { hideRegionSelectModal();
cityList.scrollTop = 0; saveFormData();
}, 100);
}; };
provinceFragment.appendChild(option); provinceFragment.appendChild(option);
}); });
@ -5399,58 +5395,14 @@
} }
// 生成城市选项 // 生成城市选项
function generateCityOptions(cities) {
const cityList = document.getElementById('cityList');
// 使用文档片段减少DOM重绘
const cityFragment = document.createDocumentFragment();
cities.forEach(city => {
const option = document.createElement('div');
option.className = 'select-item';
option.textContent = city.city;
option.onclick = () => {
selectedCity = city.city;
updateRegionDisplay();
};
option.ondblclick = () => {
// 双击城市直接确认整个地区选择
selectedCity = city.city;
updateRegionDisplay();
// 构建完整的地区字符串
const regionString = `${selectedProvince} ${selectedCity}`;
// 设置到表单
document.getElementById('regionDisplayText').textContent = regionString;
document.getElementById('regionValue').value = regionString;
// 隐藏弹窗
hideRegionSelectModal();
saveFormData(); // 保存选择
};
cityFragment.appendChild(option);
});
// 一次性添加到DOM,减少重绘
cityList.innerHTML = '';
cityList.appendChild(cityFragment);
// 使用scrollIntoView滚动到第一个城市
setTimeout(() => {
const firstCity = cityList.querySelector('.select-item');
if (firstCity) {
firstCity.scrollIntoView({ behavior: 'auto', block: 'start' });
}
}, 50);
}
// 更新地区显示 // 更新地区显示
function updateRegionDisplay() { function updateRegionDisplay() {
const currentRegion = document.getElementById('currentRegion'); const currentRegion = document.getElementById('currentRegion');
let displayText = '当前选择: '; let displayText = '当前选择: ';
if (selectedProvince && selectedCity) { if (selectedProvince) {
displayText += `${selectedProvince} ${selectedCity}`;
} else if (selectedProvince) {
displayText += selectedProvince; displayText += selectedProvince;
} else { } else {
displayText += '未选择'; displayText += '未选择';
@ -5458,7 +5410,7 @@
currentRegion.textContent = displayText; currentRegion.textContent = displayText;
} }
// 过滤地区选项并自动填充 // 过滤地区选项
function filterRegionOptions() { function filterRegionOptions() {
const searchInput = document.getElementById('regionSearchInput'); const searchInput = document.getElementById('regionSearchInput');
const searchKeyword = searchInput.value.toLowerCase(); const searchKeyword = searchInput.value.toLowerCase();
@ -5467,68 +5419,20 @@
selectedProvince = ''; selectedProvince = '';
selectedCity = ''; selectedCity = '';
// 先尝试直接查找城市 if (!searchKeyword) {
let foundCity = false; // 如果搜索关键词为空,显示所有省份
for (let i = 0; i < allRegionOptions.length; i++) { filteredProvinces = [...allRegionOptions];
const province = allRegionOptions[i];
for (let j = 0; j < province.cities.length; j++) {
const city = province.cities[j];
if (city.city.toLowerCase().includes(searchKeyword)) {
// 找到匹配的城市,自动填充省市
selectedProvince = province.province;
selectedCity = city.city;
foundCity = true;
break;
}
}
if (foundCity) break;
}
if (foundCity) {
// 如果找到城市,只显示对应的省份
filteredProvinces = allRegionOptions.filter(province => province.province === selectedProvince);
generateRegionOptions();
// 自动生成城市选项并选择
const cityList = document.getElementById('cityList');
cityList.innerHTML = '';
const province = allRegionOptions.find(p => p.province === selectedProvince);
if (province) {
province.cities.forEach(city => {
const option = document.createElement('div');
option.className = 'select-item';
option.textContent = city.city;
if (city.city === selectedCity) {
option.classList.add('selected');
}
option.onclick = () => {
selectedCity = city.city;
updateRegionDisplay();
};
cityList.appendChild(option);
});
// 使用scrollIntoView滚动到第一个城市
setTimeout(() => {
const firstCity = cityList.querySelector('.select-item');
if (firstCity) {
firstCity.scrollIntoView({ behavior: 'auto', block: 'start' });
}
}, 50);
}
} else {
// 否则按原逻辑过滤
filteredProvinces = allRegionOptions.filter(province => {
return province.province.toLowerCase().includes(searchKeyword) ||
province.cities.some(city => city.city.toLowerCase().includes(searchKeyword));
});
generateRegionOptions(); generateRegionOptions();
// 清空城市选项 updateRegionDisplay();
const cityList = document.getElementById('cityList'); return;
cityList.innerHTML = '';
} }
// 只根据省份名称过滤
filteredProvinces = allRegionOptions.filter(province => {
return province.province.toLowerCase().includes(searchKeyword);
});
generateRegionOptions();
updateRegionDisplay(); updateRegionDisplay();
} }
@ -5537,13 +5441,9 @@
if (selectedProvince) { if (selectedProvince) {
const regionDisplayText = document.getElementById('regionDisplayText'); const regionDisplayText = document.getElementById('regionDisplayText');
const regionValue = document.getElementById('regionValue'); const regionValue = document.getElementById('regionValue');
let regionText = selectedProvince; regionDisplayText.textContent = selectedProvince;
if (selectedCity) { regionValue.value = selectedProvince;
regionText = `${selectedProvince} ${selectedCity}`; saveFormData();
}
regionDisplayText.textContent = regionText;
regionValue.value = regionText;
saveFormData(); // 保存选择
} }
hideRegionSelectModal(); hideRegionSelectModal();
} }
@ -9428,8 +9328,6 @@
// 生成编辑地区选项 // 生成编辑地区选项
function generateEditRegionOptions() { function generateEditRegionOptions() {
const provinceList = document.getElementById('editProvinceList'); const provinceList = document.getElementById('editProvinceList');
const cityList = document.getElementById('editCityList');
// 生成省份选项 // 生成省份选项
provinceList.innerHTML = ''; provinceList.innerHTML = '';
@ -9444,65 +9342,24 @@
editSelectedProvince = province.province; editSelectedProvince = province.province;
editSelectedCity = ''; editSelectedCity = '';
updateEditRegionDisplay(); updateEditRegionDisplay();
// 生成城市选项 // 直接确认选择
generateEditCityOptions(province.cities); const regionString = editSelectedProvince;
// 直接滚动城市列表到顶部
setTimeout(() => {
cityList.scrollTop = 0;
}, 100);
};
provinceList.appendChild(option);
});
}
// 生成编辑城市选项
function generateEditCityOptions(cities) {
const cityList = document.getElementById('editCityList');
cityList.innerHTML = '';
cities.forEach(city => {
const option = document.createElement('div');
option.className = 'select-item';
option.textContent = city.city;
if (city.city === editSelectedCity) {
option.classList.add('selected');
}
option.onclick = () => {
editSelectedCity = city.city;
updateEditRegionDisplay();
};
option.ondblclick = () => {
// 双击城市直接确认整个地区选择
editSelectedCity = city.city;
updateEditRegionDisplay();
// 构建完整的地区字符串
const regionString = `${editSelectedProvince} ${editSelectedCity}`;
// 设置到表单
document.getElementById('editRegionDisplayText').textContent = regionString; document.getElementById('editRegionDisplayText').textContent = regionString;
document.getElementById('editRegionValue').value = regionString; document.getElementById('editRegionValue').value = regionString;
// 隐藏弹窗
hideEditRegionSelectModal(); hideEditRegionSelectModal();
saveFormData(); // 保存选择 saveFormData();
}; };
cityList.appendChild(option); provinceList.appendChild(option);
}); });
// 使用scrollIntoView滚动到第一个城市
setTimeout(() => {
const firstCity = cityList.querySelector('.select-item');
if (firstCity) {
firstCity.scrollIntoView({ behavior: 'auto', block: 'start' });
}
}, 50);
} }
// 生成编辑城市选项
// 更新编辑地区显示 // 更新编辑地区显示
function updateEditRegionDisplay() { function updateEditRegionDisplay() {
const currentRegion = document.getElementById('editCurrentRegion'); const currentRegion = document.getElementById('editCurrentRegion');
let displayText = '当前选择: '; let displayText = '当前选择: ';
if (editSelectedProvince && editSelectedCity) { if (editSelectedProvince) {
displayText += `${editSelectedProvince} ${editSelectedCity}`;
} else if (editSelectedProvince) {
displayText += editSelectedProvince; displayText += editSelectedProvince;
} else { } else {
displayText += '未选择'; displayText += '未选择';
@ -9529,13 +9386,7 @@
// 过滤省份 // 过滤省份
const filteredProvinces = allRegionOptions.filter(province => { const filteredProvinces = allRegionOptions.filter(province => {
// 检查省份名称是否匹配 // 检查省份名称是否匹配
if (province.province.toLowerCase().includes(searchKeyword)) { return province.province.toLowerCase().includes(searchKeyword);
return true;
}
// 检查该省份下是否有匹配的城市
return province.cities.some(city => {
return city.city.toLowerCase().includes(searchKeyword);
});
}); });
// 生成省份选项 // 生成省份选项
@ -9552,46 +9403,28 @@
editSelectedProvince = province.province; editSelectedProvince = province.province;
editSelectedCity = ''; editSelectedCity = '';
updateEditRegionDisplay(); updateEditRegionDisplay();
// 生成城市选项 // 直接确认选择
generateEditCityOptions(province.cities); const regionString = editSelectedProvince;
// 直接滚动城市列表到顶部 document.getElementById('editRegionDisplayText').textContent = regionString;
setTimeout(() => { document.getElementById('editRegionValue').value = regionString;
document.getElementById('editCityList').scrollTop = 0; hideEditRegionSelectModal();
}, 100); saveFormData();
}; };
provinceList.appendChild(option); provinceList.appendChild(option);
}); });
// 自动选择第一个匹配的省份和城市
if (filteredProvinces.length > 0) {
editSelectedProvince = filteredProvinces[0].province;
// 查找第一个匹配的城市
const matchedCity = filteredProvinces[0].cities.find(city =>
city.city.toLowerCase().includes(searchKeyword)
);
if (matchedCity) {
editSelectedCity = matchedCity.city;
}
updateEditRegionDisplay();
generateEditCityOptions(filteredProvinces[0].cities);
}
} }
// 确认编辑地区选择 // 确认编辑地区选择
function confirmEditRegionSelection() { function confirmEditRegionSelection() {
if (editSelectedProvince && editSelectedCity) { if (editSelectedProvince) {
const regionDisplayText = document.getElementById('editRegionDisplayText'); const regionDisplayText = document.getElementById('editRegionDisplayText');
const regionValue = document.getElementById('editRegionValue'); const regionValue = document.getElementById('editRegionValue');
let regionText = editSelectedProvince; regionDisplayText.textContent = editSelectedProvince;
if (editSelectedCity) { regionValue.value = editSelectedProvince;
regionText = `${editSelectedProvince} ${editSelectedCity}`; saveFormData();
}
regionDisplayText.textContent = regionText;
regionValue.value = regionText;
saveFormData(); // 保存选择
hideEditRegionSelectModal(); hideEditRegionSelectModal();
} else { } else {
alert('请选择完整的地区信息'); alert('请选择省份');
} }
} }

Loading…
Cancel
Save