1320 lines
64 KiB
JavaScript
1320 lines
64 KiB
JavaScript
// 【重要】必须使用 const Component 作为组件变量名
|
||
// 停车场管理 - 车辆资产管理后台模块
|
||
// 设计变量参考 Arco Design Token: https://arco.design/react/docs/token
|
||
var ARCO_TOKEN = {
|
||
// 主色 / 品牌色
|
||
primary: '#165DFF',
|
||
primaryHover: '#4080FF',
|
||
primaryActive: '#0E42D2',
|
||
// 功能色
|
||
danger: '#F53F3F',
|
||
success: '#00B42A',
|
||
warning: '#FF7D00',
|
||
link: '#165DFF',
|
||
// 中性色 (Neutral)
|
||
neutral1: '#FFFFFF',
|
||
neutral2: '#F7F8FA',
|
||
neutral3: '#F2F3F5',
|
||
neutral4: '#E5E6EB',
|
||
neutral5: '#C9CDD4',
|
||
neutral6: '#86909C',
|
||
neutral7: '#4E5969',
|
||
neutral8: '#1D2129',
|
||
// 边框
|
||
border: '#E5E6EB',
|
||
borderSecondary: '#C9CDD4',
|
||
// 填充/背景
|
||
fill: '#F2F3F5',
|
||
fillSecondary: '#F7F8FA',
|
||
// 阴影
|
||
shadowLight: '0 1px 2px rgba(0,0,0,0.05)',
|
||
shadowMedium: '0 2px 8px rgba(0,0,0,0.08)',
|
||
// 圆角
|
||
radiusSmall: '2px',
|
||
radiusMedium: '4px',
|
||
radiusLarge: '8px',
|
||
// 间距
|
||
spacing4: '4px',
|
||
spacing8: '8px',
|
||
spacing12: '12px',
|
||
spacing16: '16px',
|
||
spacing24: '24px',
|
||
// 字体
|
||
fontSize14: '14px',
|
||
fontSize16: '16px',
|
||
fontFamily: '-apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif'
|
||
};
|
||
|
||
const Component = function () {
|
||
var _useState = React.useState('list');
|
||
var currentView = _useState[0];
|
||
var setCurrentView = _useState[1];
|
||
|
||
var _useState2 = React.useState([]);
|
||
var regionProvince = _useState2[0];
|
||
var setRegionProvince = _useState2[1];
|
||
|
||
var _useState3 = React.useState('');
|
||
var regionCity = _useState3[0];
|
||
var setRegionCity = _useState3[1];
|
||
|
||
var _useState4 = React.useState('');
|
||
var filterParkingName = _useState4[0];
|
||
var setFilterParkingName = _useState4[1];
|
||
|
||
var _useState5 = React.useState('');
|
||
var filterManager = _useState5[0];
|
||
var setFilterManager = _useState5[1];
|
||
|
||
var _useState5b = React.useState(false);
|
||
var parkingNameInputFocused = _useState5b[0];
|
||
var setParkingNameInputFocused = _useState5b[1];
|
||
|
||
var _useState5d = React.useState(false);
|
||
var managerInputFocused = _useState5d[0];
|
||
var setManagerInputFocused = _useState5d[1];
|
||
|
||
var _useState6 = React.useState(false);
|
||
var showColumnSettings = _useState6[0];
|
||
var setShowColumnSettings = _useState6[1];
|
||
|
||
var _useState6b = React.useState(false);
|
||
var columnIconHover = _useState6b[0];
|
||
var setColumnIconHover = _useState6b[1];
|
||
|
||
var _useState6c = React.useState(false);
|
||
var regionCascaderOpen = _useState6c[0];
|
||
var setRegionCascaderOpen = _useState6c[1];
|
||
|
||
var _useState6d = React.useState(false);
|
||
var formRegionCascaderOpen = _useState6d[0];
|
||
var setFormRegionCascaderOpen = _useState6d[1];
|
||
|
||
var _useState6e = React.useState('');
|
||
var regionCascaderHover = _useState6e[0];
|
||
var setRegionCascaderHover = _useState6e[1];
|
||
var _useState6f = React.useState('');
|
||
var formRegionCascaderHover = _useState6f[0];
|
||
var setFormRegionCascaderHover = _useState6f[1];
|
||
|
||
var _useState7 = React.useState(null);
|
||
var vehicleDetailParkingId = _useState7[0];
|
||
var setVehicleDetailParkingId = _useState7[1];
|
||
|
||
var _useState8 = React.useState(null);
|
||
var viewParking = _useState8[0];
|
||
var setViewParking = _useState8[1];
|
||
|
||
var _useState9 = React.useState(null);
|
||
var editParking = _useState9[0];
|
||
var setEditParking = _useState9[1];
|
||
|
||
var _useState10 = React.useState(null);
|
||
var deleteConfirmParking = _useState10[0];
|
||
var setDeleteConfirmParking = _useState10[1];
|
||
|
||
var _useState11 = React.useState('');
|
||
var toastMessage = _useState11[0];
|
||
var setToastMessage = _useState11[1];
|
||
|
||
var _useState11b = React.useState(false);
|
||
var showRequirementModal = _useState11b[0];
|
||
var setShowRequirementModal = _useState11b[1];
|
||
|
||
// 分页状态
|
||
var _useState12 = React.useState(1);
|
||
var currentPage = _useState12[0];
|
||
var setCurrentPage = _useState12[1];
|
||
var _useState13 = React.useState(10);
|
||
var pageSize = _useState13[0];
|
||
var setPageSize = _useState13[1];
|
||
|
||
// 新建表单状态
|
||
var _useState12 = React.useState({
|
||
regionProvince: '',
|
||
regionCity: '',
|
||
parkingName: '',
|
||
parkingSpaces: '',
|
||
address: '',
|
||
manager: '',
|
||
managerPhone: '',
|
||
contactName: '',
|
||
contactPhone: '',
|
||
leaseStart: '',
|
||
leaseEnd: '',
|
||
rentFee: '',
|
||
contractFile: null
|
||
});
|
||
var formData = _useState12[0];
|
||
var setFormData = _useState12[1];
|
||
|
||
// 列显示配置
|
||
var defaultColumnsVisible = {
|
||
region: true,
|
||
parkingName: true,
|
||
parkedVehicles: true,
|
||
parkingSpaces: true,
|
||
address: true,
|
||
leaseStart: true,
|
||
leaseEnd: true,
|
||
manager: true,
|
||
managerPhone: true,
|
||
contactName: true,
|
||
contactPhone: true
|
||
};
|
||
var _useState13 = React.useState(defaultColumnsVisible);
|
||
var columnsVisible = _useState13[0];
|
||
var setColumnsVisible = _useState13[1];
|
||
|
||
// 模拟省-市数据
|
||
var provinceList = [
|
||
{ code: 'gd', name: '广东省' },
|
||
{ code: 'zj', name: '浙江省' },
|
||
{ code: 'bj', name: '北京市' }
|
||
];
|
||
var cityMap = {
|
||
gd: [{ code: 'gz', name: '广州市' }, { code: 'sz', name: '深圳市' }],
|
||
zj: [{ code: 'hz', name: '杭州市' }, { code: 'nb', name: '宁波市' }],
|
||
bj: [{ code: 'bj', name: '北京市' }]
|
||
};
|
||
|
||
// 模拟停车场列表数据
|
||
var mockParkingList = [
|
||
{
|
||
id: '1',
|
||
regionProvince: '广东省',
|
||
regionCity: '广州市',
|
||
parkingName: '天河智慧停车场',
|
||
parkedCount: 12,
|
||
parkingSpaces: 50,
|
||
address: '广州市天河区体育西路123号',
|
||
leaseStart: '2023-01-01',
|
||
leaseEnd: '2025-12-31',
|
||
manager: '张明',
|
||
managerPhone: '13800138001',
|
||
contactName: '李华',
|
||
contactPhone: '13900139001',
|
||
vehicles: [
|
||
{ city: '广州', frameNo: 'LGW123456', plateNo: '粤A12345', code: 'V001', brand: '比亚迪', model: '秦', color: '白色', status: '正常', mileage: 12000, location: '天河区体育西路', gpsTime: '2025-02-06 10:30:00' },
|
||
{ city: '广州', frameNo: 'LGW789012', plateNo: '粤A67890', code: 'V002', brand: '特斯拉', model: 'Model 3', color: '黑色', status: '正常', mileage: 8000, location: '天河区体育西路', gpsTime: '2025-02-06 10:28:00' }
|
||
]
|
||
},
|
||
{
|
||
id: '2',
|
||
regionProvince: '广东省',
|
||
regionCity: '深圳市',
|
||
parkingName: '南山科技园停车场',
|
||
parkedCount: 0,
|
||
parkingSpaces: 80,
|
||
address: '深圳市南山区科技园南路88号',
|
||
leaseStart: '2022-06-01',
|
||
leaseEnd: '2025-05-31',
|
||
manager: '王芳',
|
||
managerPhone: '13700137001',
|
||
contactName: '赵强',
|
||
contactPhone: '13600136001',
|
||
vehicles: []
|
||
},
|
||
{
|
||
id: '3',
|
||
regionProvince: '浙江省',
|
||
regionCity: '杭州市',
|
||
parkingName: '西湖景区停车场',
|
||
parkedCount: 5,
|
||
parkingSpaces: 30,
|
||
address: '杭州市西湖区杨公堤1号',
|
||
leaseStart: '2024-01-01',
|
||
leaseEnd: '2026-12-31',
|
||
manager: '陈静',
|
||
managerPhone: '13500135001',
|
||
contactName: '刘洋',
|
||
contactPhone: '13400134001',
|
||
vehicles: [
|
||
{ city: '杭州', frameNo: 'HZ111', plateNo: '浙A11111', code: 'V003', brand: '小鹏', model: 'P7', color: '灰色', status: '维修', mileage: 15000, location: '西湖区杨公堤', gpsTime: '2025-02-05 18:00:00' }
|
||
]
|
||
}
|
||
];
|
||
|
||
// 获取所有唯一的停车场名称和负责人
|
||
var getAllParkingNames = function () {
|
||
var names = [];
|
||
var seen = {};
|
||
mockParkingList.forEach(function (item) {
|
||
if (item.parkingName && !seen[item.parkingName]) {
|
||
seen[item.parkingName] = true;
|
||
names.push(item.parkingName);
|
||
}
|
||
});
|
||
return names.sort();
|
||
};
|
||
var getAllManagers = function () {
|
||
var managers = [];
|
||
var seen = {};
|
||
mockParkingList.forEach(function (item) {
|
||
if (item.manager && !seen[item.manager]) {
|
||
seen[item.manager] = true;
|
||
managers.push(item.manager);
|
||
}
|
||
});
|
||
return managers.sort();
|
||
};
|
||
var allParkingNames = getAllParkingNames();
|
||
var allManagers = getAllManagers();
|
||
|
||
var getFilteredList = function () {
|
||
var list = mockParkingList;
|
||
if (regionProvince && regionProvince.length > 0) {
|
||
var p = provinceList.find(function (x) { return x.code === regionProvince; });
|
||
var pName = p ? p.name : '';
|
||
list = list.filter(function (item) { return item.regionProvince === pName; });
|
||
}
|
||
if (regionCity) {
|
||
var cities = cityMap[regionProvince];
|
||
var c = cities && cities.find(function (x) { return x.code === regionCity; });
|
||
var cName = c ? c.name : '';
|
||
list = list.filter(function (item) { return item.regionCity === cName; });
|
||
}
|
||
if (filterParkingName) {
|
||
list = list.filter(function (item) {
|
||
return item.parkingName && item.parkingName.indexOf(filterParkingName) >= 0;
|
||
});
|
||
}
|
||
if (filterManager) {
|
||
list = list.filter(function (item) {
|
||
return item.manager && item.manager.indexOf(filterManager) >= 0;
|
||
});
|
||
}
|
||
return list;
|
||
};
|
||
|
||
var filteredList = getFilteredList();
|
||
var totalItems = filteredList.length;
|
||
var totalPages = Math.ceil(totalItems / pageSize) || 1;
|
||
var validPage = currentPage > totalPages && totalPages > 0 ? 1 : (currentPage < 1 ? 1 : currentPage);
|
||
if (validPage !== currentPage && totalPages > 0) {
|
||
setCurrentPage(1);
|
||
validPage = 1;
|
||
}
|
||
var startIndex = (validPage - 1) * pageSize;
|
||
var endIndex = startIndex + pageSize;
|
||
var paginatedList = filteredList.slice(startIndex, endIndex);
|
||
|
||
var handleExport = function () {
|
||
setToastMessage('导出功能为原型演示');
|
||
setTimeout(function () { setToastMessage(''); }, 2000);
|
||
};
|
||
|
||
var handleDeleteConfirm = function () {
|
||
if (!deleteConfirmParking) return;
|
||
if (deleteConfirmParking.parkedCount > 0) {
|
||
setToastMessage('该停车场存在车辆，无法删除');
|
||
setDeleteConfirmParking(null);
|
||
setTimeout(function () { setToastMessage(''); }, 2000);
|
||
return;
|
||
}
|
||
setToastMessage('删除成功');
|
||
setDeleteConfirmParking(null);
|
||
setTimeout(function () { setToastMessage(''); }, 2000);
|
||
};
|
||
|
||
var handleFormChange = function (field, value) {
|
||
var next = {};
|
||
for (var k in formData) { next[k] = formData[k]; }
|
||
next[field] = value;
|
||
setFormData(next);
|
||
};
|
||
|
||
var handleSubmitNew = function () {
|
||
if (!formData.regionProvince || !formData.regionCity) {
|
||
setToastMessage('请选择地区');
|
||
setTimeout(function () { setToastMessage(''); }, 2000);
|
||
return;
|
||
}
|
||
if (!formData.parkingName || !formData.parkingName.trim()) {
|
||
setToastMessage('请填写停车场名称');
|
||
setTimeout(function () { setToastMessage(''); }, 2000);
|
||
return;
|
||
}
|
||
if (!formData.leaseStart) {
|
||
setToastMessage('请选择租赁开始时间');
|
||
setTimeout(function () { setToastMessage(''); }, 2000);
|
||
return;
|
||
}
|
||
if (!formData.leaseEnd) {
|
||
setToastMessage('请选择租赁到期时间');
|
||
setTimeout(function () { setToastMessage(''); }, 2000);
|
||
return;
|
||
}
|
||
if (formData.leaseEnd < formData.leaseStart) {
|
||
setToastMessage('租赁到期时间不能早于租赁开始时间');
|
||
setTimeout(function () { setToastMessage(''); }, 2000);
|
||
return;
|
||
}
|
||
if (!formData.rentFee || formData.rentFee.trim() === '') {
|
||
setToastMessage('请填写租赁费');
|
||
setTimeout(function () { setToastMessage(''); }, 2000);
|
||
return;
|
||
}
|
||
setToastMessage('提交成功');
|
||
setTimeout(function () { setToastMessage(''); }, 1500);
|
||
setCurrentView('list');
|
||
setFormData({
|
||
regionProvince: '',
|
||
regionCity: '',
|
||
parkingName: '',
|
||
parkingSpaces: '',
|
||
address: '',
|
||
manager: '',
|
||
managerPhone: '',
|
||
contactName: '',
|
||
contactPhone: '',
|
||
leaseStart: '',
|
||
leaseEnd: '',
|
||
rentFee: '',
|
||
contractFile: null
|
||
});
|
||
};
|
||
|
||
var handleCancelNew = function () {
|
||
setCurrentView('list');
|
||
setFormData({
|
||
regionProvince: '',
|
||
regionCity: '',
|
||
parkingName: '',
|
||
parkingSpaces: '',
|
||
address: '',
|
||
manager: '',
|
||
managerPhone: '',
|
||
contactName: '',
|
||
contactPhone: '',
|
||
leaseStart: '',
|
||
leaseEnd: '',
|
||
rentFee: '',
|
||
contractFile: null
|
||
});
|
||
};
|
||
|
||
var t = ARCO_TOKEN;
|
||
var styles = {
|
||
page: { padding: t.spacing24, fontFamily: t.fontFamily, backgroundColor: t.fill, minHeight: '100vh' },
|
||
breadcrumb: { marginBottom: t.spacing16, fontSize: t.fontSize14, color: t.neutral6, display: 'flex', alignItems: 'center', justifyContent: 'space-between' },
|
||
breadcrumbLeft: { display: 'flex', alignItems: 'center' },
|
||
breadcrumbLink: { color: t.link, textDecoration: 'none', marginRight: t.spacing8 },
|
||
breadcrumbCurrent: { color: t.neutral8 },
|
||
breadcrumbRight: { display: 'flex', alignItems: 'center' },
|
||
requirementLink: { color: t.link, textDecoration: 'none', fontSize: t.fontSize14, cursor: 'pointer' },
|
||
card: { backgroundColor: t.neutral1, borderRadius: t.radiusLarge, boxShadow: t.shadowLight, marginBottom: t.spacing16, padding: t.spacing16 },
|
||
filterRow: { display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', gap: t.spacing12 },
|
||
filterRowLeft: { display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: t.spacing12 },
|
||
filterRowRight: { display: 'flex', alignItems: 'center', gap: t.spacing8, marginLeft: 'auto' },
|
||
label: { marginRight: t.spacing8, fontSize: t.fontSize14, color: t.neutral8 },
|
||
select: { padding: '0 10px', height: '32px', borderRadius: '2px', border: '1px solid ' + t.border, fontSize: t.fontSize14, boxSizing: 'border-box' },
|
||
input: { padding: '0 10px', height: '32px', width: '100%', borderRadius: '2px', border: '1px solid ' + t.border, fontSize: t.fontSize14, boxSizing: 'border-box' },
|
||
toolbar: { display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: t.spacing12, marginBottom: t.spacing16 },
|
||
btn: { padding: t.spacing8 + ' ' + t.spacing16, borderRadius: t.radiusMedium, cursor: 'pointer', fontSize: t.fontSize14, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: '6px', boxSizing: 'border-box' },
|
||
btnFixed: { width: '100px', height: '32px', padding: 0, borderRadius: '2px', lineHeight: '1' },
|
||
btnIcon: { width: '14px', height: '14px', flexShrink: 0, display: 'block' },
|
||
btnPrimary: { backgroundColor: t.primary, color: t.neutral1, border: 'none' },
|
||
btnFillBlue: { backgroundColor: t.primary, color: t.neutral1, border: 'none' },
|
||
btnOutlineBlue: { backgroundColor: t.neutral1, color: t.primary, border: '1px solid ' + t.primary },
|
||
btnDefault: { backgroundColor: t.neutral1, color: t.neutral8, border: '1px solid ' + t.border },
|
||
btnDanger: { backgroundColor: t.danger, color: t.neutral1, border: 'none' },
|
||
tableWrap: { overflowX: 'auto', backgroundColor: t.neutral1, borderRadius: t.radiusMedium, border: '1px solid ' + t.neutral4 },
|
||
table: { width: '100%', borderCollapse: 'separate', borderSpacing: 0, fontSize: t.fontSize14 },
|
||
th: { textAlign: 'left', padding: '12px 16px', backgroundColor: t.fillSecondary, borderBottom: '1px solid ' + t.neutral4, fontWeight: 600, color: t.neutral8, fontSize: t.fontSize14, whiteSpace: 'nowrap' },
|
||
td: { padding: '12px 16px', borderBottom: '1px solid ' + t.neutral4, color: t.neutral8, fontSize: t.fontSize14 },
|
||
trHover: { backgroundColor: t.fillSecondary },
|
||
pagination: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '16px', borderTop: '1px solid ' + t.neutral4, backgroundColor: t.neutral1 },
|
||
paginationLeft: { display: 'flex', alignItems: 'center', gap: '8px', fontSize: t.fontSize14, color: t.neutral7 },
|
||
paginationRight: { display: 'flex', alignItems: 'center', gap: '8px' },
|
||
paginationSelect: { padding: '4px 8px', height: '28px', borderRadius: '2px', border: '1px solid ' + t.border, fontSize: t.fontSize14, backgroundColor: t.neutral1 },
|
||
paginationBtn: { minWidth: '28px', height: '28px', padding: '0 8px', borderRadius: '2px', border: '1px solid ' + t.border, backgroundColor: t.neutral1, color: t.neutral8, cursor: 'pointer', fontSize: t.fontSize14, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' },
|
||
paginationBtnActive: { backgroundColor: t.primary, color: t.neutral1, borderColor: t.primary },
|
||
paginationBtnDisabled: { opacity: 0.5, cursor: 'not-allowed' },
|
||
paginationInput: { width: '50px', height: '28px', padding: '0 8px', borderRadius: '2px', border: '1px solid ' + t.border, fontSize: t.fontSize14, textAlign: 'center' },
|
||
linkBlue: { color: t.link, cursor: 'pointer', textDecoration: 'none' },
|
||
actionLink: { color: t.link, cursor: 'pointer', marginRight: t.spacing12, fontSize: t.fontSize14 },
|
||
modalMask: { position: 'fixed', left: 0, top: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.45)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center' },
|
||
modalBox: { backgroundColor: t.neutral1, borderRadius: t.radiusLarge, maxWidth: '90%', maxHeight: '90%', overflow: 'auto', padding: t.spacing24, minWidth: '500px', position: 'relative' },
|
||
modalTitle: { fontSize: t.fontSize16, fontWeight: 600, marginBottom: t.spacing16, color: t.neutral8 },
|
||
modalHeader: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: t.spacing16 },
|
||
modalCloseBtn: { position: 'absolute', right: t.spacing16, top: t.spacing16, width: '24px', height: '24px', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', borderRadius: t.radiusMedium, backgroundColor: 'transparent', border: 'none', color: t.neutral6, fontSize: '18px', lineHeight: '1', padding: 0 },
|
||
modalCloseBtnHover: { backgroundColor: t.fill, color: t.neutral8 },
|
||
modalContent: { fontSize: t.fontSize14, color: t.neutral8, lineHeight: '1.6', whiteSpace: 'pre-wrap' },
|
||
requirementSection: { marginBottom: t.spacing16 },
|
||
requirementSectionTitle: { fontSize: t.fontSize16, fontWeight: 600, color: t.neutral8, marginBottom: t.spacing8 },
|
||
requirementItem: { marginBottom: t.spacing8, paddingLeft: t.spacing16 },
|
||
requirementSubItem: { marginBottom: t.spacing4, paddingLeft: t.spacing16, fontSize: t.fontSize14, color: t.neutral7 },
|
||
modalFooter: { marginTop: t.spacing24, display: 'flex', justifyContent: 'flex-end', gap: t.spacing8 },
|
||
toast: { position: 'fixed', top: t.spacing24, left: '50%', transform: 'translateX(-50%)', backgroundColor: 'rgba(0,0,0,0.75)', color: t.neutral1, padding: '10px 20px', borderRadius: t.radiusMedium, zIndex: 2000, fontSize: t.fontSize14 },
|
||
formRow: { marginBottom: t.spacing16 },
|
||
formLabel: { display: 'block', marginBottom: '6px', fontSize: t.fontSize14, color: t.neutral8 },
|
||
formLabelReq: { color: t.danger, marginLeft: '2px' },
|
||
vehicleCard: { border: '1px solid ' + t.neutral4, borderRadius: '6px', padding: t.spacing12, backgroundColor: t.fillSecondary, fontSize: '13px', color: t.neutral8 },
|
||
vehicleCardRow: { marginBottom: t.spacing4 },
|
||
vehicleModalBox: { backgroundColor: t.neutral1, borderRadius: t.radiusLarge, maxWidth: '1200px', width: '90%', maxHeight: '80vh', overflow: 'auto', padding: t.spacing24, boxShadow: t.shadowMedium },
|
||
vehicleModalTitle: { fontSize: t.fontSize16, fontWeight: 600, marginBottom: t.spacing16, color: t.neutral8 },
|
||
columnSettingsBox: { position: 'absolute', right: 0, top: '100%', marginTop: t.spacing4, backgroundColor: t.neutral1, border: '1px solid ' + t.border, borderRadius: t.radiusMedium, padding: 0, minWidth: '220px', boxShadow: t.shadowMedium, zIndex: 100 },
|
||
columnSettingsHeader: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: t.spacing12, borderBottom: '1px solid ' + t.neutral4, fontSize: t.fontSize14, fontWeight: 600, color: t.neutral8 },
|
||
columnSettingsBody: { padding: t.spacing12, maxHeight: '320px', overflowY: 'auto' },
|
||
checkboxRow: { marginBottom: '6px', fontSize: t.fontSize14 },
|
||
iconBtn: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: '32px', height: '32px', padding: 0, margin: 0, backgroundColor: 'transparent', border: 'none', borderRadius: t.radiusMedium, cursor: 'pointer', color: t.neutral6, transition: 'background-color 0.2s, color 0.2s' },
|
||
newPageLayout: { display: 'flex', gap: t.spacing24, flexWrap: 'wrap' },
|
||
newPageForm: { flex: '2', minWidth: '400px' },
|
||
newPageMap: { flex: '1', minWidth: '300px', height: '400px', backgroundColor: t.neutral4, borderRadius: t.radiusLarge, display: 'flex', alignItems: 'center', justifyContent: 'center', color: t.neutral6, fontSize: t.fontSize14 },
|
||
cascaderWrap: { position: 'relative', width: '300px' },
|
||
cascaderInput: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%', height: '32px', padding: '0 10px', borderRadius: '2px', border: '1px solid ' + t.border, backgroundColor: t.neutral1, fontSize: t.fontSize14, color: t.neutral8, cursor: 'pointer', boxSizing: 'border-box' },
|
||
cascaderInputFocus: { borderColor: t.primary, outline: 'none' },
|
||
cascaderPlaceholder: { color: t.neutral6 },
|
||
cascaderChevron: { marginLeft: '8px', color: t.neutral6, transition: 'transform 0.2s' },
|
||
cascaderPanel: { position: 'absolute', left: 0, top: '100%', marginTop: '4px', backgroundColor: t.neutral1, borderRadius: t.radiusMedium, border: '1px solid ' + t.border, boxShadow: t.shadowMedium, zIndex: 100, display: 'flex', minWidth: '280px', maxHeight: '280px' },
|
||
cascaderColumn: { minWidth: '120px', maxHeight: '280px', overflowY: 'auto', borderRight: '1px solid ' + t.neutral4 },
|
||
cascaderColumnLast: { borderRight: 'none' },
|
||
cascaderOption: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', fontSize: t.fontSize14, color: t.neutral8, cursor: 'pointer', whiteSpace: 'nowrap' },
|
||
cascaderOptionHover: { backgroundColor: t.fill },
|
||
autocompleteWrap: { position: 'relative', width: '300px' },
|
||
autocompletePanel: { position: 'absolute', left: 0, top: '100%', marginTop: '4px', backgroundColor: t.neutral1, borderRadius: t.radiusMedium, border: '1px solid ' + t.border, boxShadow: t.shadowMedium, zIndex: 100, minWidth: '100%', maxHeight: '240px', overflowY: 'auto' },
|
||
autocompleteOption: { padding: '8px 12px', fontSize: t.fontSize14, color: t.neutral8, cursor: 'pointer' },
|
||
autocompleteOptionHover: { backgroundColor: t.fill }
|
||
};
|
||
|
||
return (
|
||
<div style={styles.page}>
|
||
{/* 面包屑 */}
|
||
<div style={styles.breadcrumb}>
|
||
<div style={styles.breadcrumbLeft}>
|
||
<a href="#" style={styles.breadcrumbLink} onClick={function (e) { e.preventDefault(); setCurrentView('list'); }}>基本数据维护</a>
|
||
<span style={{ marginRight: '8px' }}>/</span>
|
||
<span style={styles.breadcrumbCurrent}>停车场</span>
|
||
</div>
|
||
<div style={styles.breadcrumbRight}>
|
||
<a href="#" style={styles.requirementLink} onClick={function (e) { e.preventDefault(); setShowRequirementModal(true); }}>查看需求说明</a>
|
||
</div>
|
||
</div>
|
||
|
||
{currentView === 'list' && (
|
||
<React.Fragment>
|
||
{/* 筛选栏 - 单独卡片 */}
|
||
<div style={styles.card}>
|
||
<div style={styles.filterRow}>
|
||
<div style={styles.filterRowLeft}>
|
||
<span style={styles.label}>地区：</span>
|
||
<div style={styles.cascaderWrap}>
|
||
<div
|
||
style={Object.assign({}, styles.cascaderInput, regionCascaderOpen ? styles.cascaderInputFocus : {})}
|
||
onClick={function () { setRegionCascaderOpen(!regionCascaderOpen); }}
|
||
>
|
||
<span style={regionProvince && regionCity ? {} : styles.cascaderPlaceholder}>
|
||
{regionProvince && regionCity
|
||
? (function () {
|
||
var p = provinceList.find(function (x) { return x.code === regionProvince; });
|
||
var cities = cityMap[regionProvince];
|
||
var c = cities && cities.find(function (x) { return x.code === regionCity; });
|
||
return (p ? p.name : '') + (p && c ? ' - ' : '') + (c ? c.name : '');
|
||
}())
|
||
: '请选择省/市'}
|
||
</span>
|
||
<span style={Object.assign({}, styles.cascaderChevron, regionCascaderOpen ? { transform: 'rotate(180deg)' } : {})}>
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M7 10l5 5 5-5z" /></svg>
|
||
</span>
|
||
</div>
|
||
{regionCascaderOpen && (
|
||
<React.Fragment>
|
||
<div style={{ position: 'fixed', left: 0, top: 0, right: 0, bottom: 0, zIndex: 99 }} onClick={function () { setRegionCascaderOpen(false); }} />
|
||
<div style={styles.cascaderPanel} onClick={function (e) { e.stopPropagation(); }}>
|
||
<div style={styles.cascaderColumn}>
|
||
{provinceList.map(function (p) {
|
||
var isSelected = regionProvince === p.code;
|
||
var isHovered = regionCascaderHover === 'p-' + p.code;
|
||
return React.createElement('div', {
|
||
key: p.code,
|
||
style: Object.assign({}, styles.cascaderOption, (isSelected || isHovered) ? styles.cascaderOptionHover : {}),
|
||
onClick: function () {
|
||
setRegionProvince(p.code);
|
||
setRegionCity('');
|
||
},
|
||
onMouseEnter: function () { setRegionCascaderHover('p-' + p.code); },
|
||
onMouseLeave: function () { setRegionCascaderHover(''); }
|
||
}, p.name, React.createElement('span', { style: { color: t.neutral6 } }, '>'));
|
||
})}
|
||
</div>
|
||
<div style={Object.assign({}, styles.cascaderColumn, styles.cascaderColumnLast)}>
|
||
{(cityMap[regionProvince] || []).map(function (c) {
|
||
var isSelected = regionCity === c.code;
|
||
var isHovered = regionCascaderHover === 'c-' + c.code;
|
||
return React.createElement('div', {
|
||
key: c.code,
|
||
style: Object.assign({}, styles.cascaderOption, (isSelected || isHovered) ? styles.cascaderOptionHover : {}),
|
||
onClick: function () {
|
||
setRegionCity(c.code);
|
||
setRegionCascaderOpen(false);
|
||
},
|
||
onMouseEnter: function () { setRegionCascaderHover('c-' + c.code); },
|
||
onMouseLeave: function () { setRegionCascaderHover(''); }
|
||
}, c.name);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</React.Fragment>
|
||
)}
|
||
</div>
|
||
<span style={styles.label}>停车场名称：</span>
|
||
<div style={styles.autocompleteWrap}>
|
||
<input
|
||
style={Object.assign({}, styles.input, parkingNameInputFocused ? { borderColor: t.primary } : {})}
|
||
placeholder="支持模糊搜索"
|
||
value={filterParkingName}
|
||
onChange={function (e) { setFilterParkingName(e.target.value); }}
|
||
onFocus={function () { setParkingNameInputFocused(true); }}
|
||
onBlur={function () { setTimeout(function () { setParkingNameInputFocused(false); }, 200); }}
|
||
/>
|
||
{(parkingNameInputFocused || filterParkingName) && allParkingNames.filter(function (name) {
|
||
return !filterParkingName || name.indexOf(filterParkingName) >= 0;
|
||
}).length > 0 && (
|
||
<React.Fragment>
|
||
<div style={{ position: 'fixed', left: 0, top: 0, right: 0, bottom: 0, zIndex: 99 }} onClick={function () { setParkingNameInputFocused(false); }} />
|
||
<div style={styles.autocompletePanel} onClick={function (e) { e.stopPropagation(); }}>
|
||
{allParkingNames.filter(function (name) {
|
||
return !filterParkingName || name.indexOf(filterParkingName) >= 0;
|
||
}).map(function (name) {
|
||
var isSelected = filterParkingName === name;
|
||
return React.createElement('div', {
|
||
key: name,
|
||
style: Object.assign({}, styles.autocompleteOption, isSelected ? styles.autocompleteOptionHover : {}),
|
||
onMouseDown: function (e) { e.preventDefault(); },
|
||
onClick: function () {
|
||
setFilterParkingName(name);
|
||
setParkingNameInputFocused(false);
|
||
},
|
||
onMouseEnter: function (e) { e.currentTarget.style.backgroundColor = t.fill; },
|
||
onMouseLeave: function (e) { if (!isSelected) e.currentTarget.style.backgroundColor = 'transparent'; }
|
||
}, name);
|
||
})}
|
||
</div>
|
||
</React.Fragment>
|
||
)}
|
||
</div>
|
||
<span style={styles.label}>负责人：</span>
|
||
<div style={styles.autocompleteWrap}>
|
||
<input
|
||
style={Object.assign({}, styles.input, managerInputFocused ? { borderColor: t.primary } : {})}
|
||
placeholder="支持模糊搜索"
|
||
value={filterManager}
|
||
onChange={function (e) { setFilterManager(e.target.value); }}
|
||
onFocus={function () { setManagerInputFocused(true); }}
|
||
onBlur={function () { setTimeout(function () { setManagerInputFocused(false); }, 200); }}
|
||
/>
|
||
{(managerInputFocused || filterManager) && allManagers.filter(function (manager) {
|
||
return !filterManager || manager.indexOf(filterManager) >= 0;
|
||
}).length > 0 && (
|
||
<React.Fragment>
|
||
<div style={{ position: 'fixed', left: 0, top: 0, right: 0, bottom: 0, zIndex: 99 }} onClick={function () { setManagerInputFocused(false); }} />
|
||
<div style={styles.autocompletePanel} onClick={function (e) { e.stopPropagation(); }}>
|
||
{allManagers.filter(function (manager) {
|
||
return !filterManager || manager.indexOf(filterManager) >= 0;
|
||
}).map(function (manager) {
|
||
var isSelected = filterManager === manager;
|
||
return React.createElement('div', {
|
||
key: manager,
|
||
style: Object.assign({}, styles.autocompleteOption, isSelected ? styles.autocompleteOptionHover : {}),
|
||
onMouseDown: function (e) { e.preventDefault(); },
|
||
onClick: function () {
|
||
setFilterManager(manager);
|
||
setManagerInputFocused(false);
|
||
},
|
||
onMouseEnter: function (e) { e.currentTarget.style.backgroundColor = t.fill; },
|
||
onMouseLeave: function (e) { if (!isSelected) e.currentTarget.style.backgroundColor = 'transparent'; }
|
||
}, manager);
|
||
})}
|
||
</div>
|
||
</React.Fragment>
|
||
)}
|
||
</div>
|
||
</div>
|
||
<div style={styles.filterRowRight}>
|
||
<button
|
||
style={Object.assign({}, styles.btn, styles.btnFillBlue, styles.btnFixed)}
|
||
onClick={function () {
|
||
setCurrentPage(1);
|
||
setToastMessage('查询成功');
|
||
setTimeout(function () { setToastMessage(''); }, 1500);
|
||
}}
|
||
>
|
||
<svg style={styles.btnIcon} viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
|
||
</svg>
|
||
<span>查询</span>
|
||
</button>
|
||
<button
|
||
style={Object.assign({}, styles.btn, styles.btnOutlineBlue, styles.btnFixed)}
|
||
onClick={function () {
|
||
setRegionProvince('');
|
||
setRegionCity('');
|
||
setFilterParkingName('');
|
||
setFilterManager('');
|
||
setParkingNameInputFocused(false);
|
||
setManagerInputFocused(false);
|
||
setCurrentPage(1);
|
||
}}
|
||
>
|
||
<svg style={styles.btnIcon} viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" />
|
||
</svg>
|
||
<span>重置</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 列表区 - 单独卡片 */}
|
||
<div style={styles.card}>
|
||
<div style={styles.toolbar}>
|
||
<button
|
||
style={Object.assign({}, styles.btn, styles.btnFillBlue, styles.btnFixed)}
|
||
onClick={function () { setCurrentView('new'); }}
|
||
>
|
||
<svg style={styles.btnIcon} viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
|
||
</svg>
|
||
<span>新建</span>
|
||
</button>
|
||
<button style={Object.assign({}, styles.btn, styles.btnDefault, styles.btnFixed)} onClick={handleExport}>
|
||
<svg style={styles.btnIcon} viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2z" />
|
||
</svg>
|
||
<span>导出</span>
|
||
</button>
|
||
<div style={{ position: 'relative' }}>
|
||
<button
|
||
style={Object.assign(
|
||
{},
|
||
styles.iconBtn,
|
||
(columnIconHover || showColumnSettings) ? { backgroundColor: t.neutral3, color: t.neutral7 } : {}
|
||
)}
|
||
onClick={function () { setShowColumnSettings(!showColumnSettings); }}
|
||
onMouseEnter={function () { setColumnIconHover(true); }}
|
||
onMouseLeave={function () { setColumnIconHover(false); }}
|
||
title="列展示"
|
||
aria-label="列展示"
|
||
>
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
||
<path d="M12.22 2h-.44a2 2 0 00-2 2v.18a2 2 0 01-1 1.73l-.43.25a2 2 0 01-2 0l-.15-.08a2 2 0 00-2.73.73l-.22.38a2 2 0 00.73 2.73l.15.1a2 2 0 011 1.72v.51a2 2 0 01-1 1.74l-.15.09a2 2 0 00-.73 2.73l.22.38a2 2 0 002.73.73l.15-.08a2 2 0 012 0l.43.25a2 2 0 011 1.73V20a2 2 0 002 2h.44a2 2 0 002-2v-.18a2 2 0 011-1.73l.43-.25a2 2 0 012 0l.15.08a2 2 0 002.73-.73l.22-.39a2 2 0 00-.73-2.73l-.15-.08a2 2 0 01-1-1.74v-.5a2 2 0 011-1.74l.15-.09a2 2 0 00.73-2.73l-.22-.38a2 2 0 00-2.73-.73l-.15.08a2 2 0 01-2 0l-.43-.25a2 2 0 01-1-1.73V4a2 2 0 00-2-2z" />
|
||
<circle cx="12" cy="12" r="3" />
|
||
</svg>
|
||
</button>
|
||
{showColumnSettings && (
|
||
<React.Fragment>
|
||
<div
|
||
style={{ position: 'fixed', left: 0, top: 0, right: 0, bottom: 0, zIndex: 99 }}
|
||
onClick={function () { setShowColumnSettings(false); }}
|
||
/>
|
||
<div
|
||
style={styles.columnSettingsBox}
|
||
onClick={function (e) { e.stopPropagation(); }}
|
||
>
|
||
<div style={styles.columnSettingsHeader}>
|
||
<span>列展示</span>
|
||
<button
|
||
style={Object.assign({}, styles.btn, styles.btnOutlineBlue, { padding: '2px 8px', fontSize: '12px' })}
|
||
onClick={function () { setColumnsVisible(defaultColumnsVisible); }}
|
||
>
|
||
重置
|
||
</button>
|
||
</div>
|
||
<div style={styles.columnSettingsBody}>
|
||
{Object.keys(columnsVisible).map(function (key) {
|
||
var labels = {
|
||
region: '地区',
|
||
parkingName: '停车场名称',
|
||
parkedVehicles: '停放车辆',
|
||
parkingSpaces: '车位数',
|
||
address: '地址',
|
||
leaseStart: '租赁开始时间',
|
||
leaseEnd: '租赁结束时间',
|
||
manager: '负责人',
|
||
managerPhone: '负责人联系方式',
|
||
contactName: '停车场联系人',
|
||
contactPhone: '停车场电话'
|
||
};
|
||
return React.createElement(
|
||
'div',
|
||
{ key: key, style: styles.checkboxRow },
|
||
React.createElement('label', { style: { display: 'flex', alignItems: 'center', cursor: 'pointer' }},
|
||
React.createElement('input', {
|
||
type: 'checkbox',
|
||
checked: columnsVisible[key],
|
||
onChange: function () {
|
||
var next = {};
|
||
for (var k in columnsVisible) { next[k] = columnsVisible[k]; }
|
||
next[key] = !columnsVisible[key];
|
||
setColumnsVisible(next);
|
||
}
|
||
}),
|
||
React.createElement('span', { style: { marginLeft: '8px' } }, labels[key] || key)
|
||
)
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</React.Fragment>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 表格 */}
|
||
<div style={styles.tableWrap}>
|
||
<table style={styles.table}>
|
||
<thead>
|
||
<tr>
|
||
{columnsVisible.region && React.createElement('th', { style: styles.th }, '地区')}
|
||
{columnsVisible.parkingName && React.createElement('th', { style: styles.th }, '停车场名称')}
|
||
{columnsVisible.parkedVehicles && React.createElement('th', { style: styles.th }, '停放车辆')}
|
||
{columnsVisible.parkingSpaces && React.createElement('th', { style: styles.th }, '车位数')}
|
||
{columnsVisible.address && React.createElement('th', { style: styles.th }, '地址')}
|
||
{columnsVisible.leaseStart && React.createElement('th', { style: styles.th }, '租赁开始时间')}
|
||
{columnsVisible.leaseEnd && React.createElement('th', { style: styles.th }, '租赁结束时间')}
|
||
{columnsVisible.manager && React.createElement('th', { style: styles.th }, '负责人')}
|
||
{columnsVisible.managerPhone && React.createElement('th', { style: styles.th }, '负责人联系方式')}
|
||
{columnsVisible.contactName && React.createElement('th', { style: styles.th }, '停车场联系人')}
|
||
{columnsVisible.contactPhone && React.createElement('th', { style: styles.th }, '停车场电话')}
|
||
<th style={styles.th}>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{paginatedList.length === 0 ? (
|
||
React.createElement('tr', {},
|
||
React.createElement('td', {
|
||
colSpan: Object.keys(columnsVisible).filter(function (k) { return columnsVisible[k]; }).length + 1,
|
||
style: Object.assign({}, styles.td, { textAlign: 'center', color: t.neutral6, padding: '40px' })
|
||
}, '暂无数据')
|
||
)
|
||
) : paginatedList.map(function (row) {
|
||
return React.createElement(
|
||
'tr',
|
||
{ key: row.id, style: { transition: 'background-color 0.2s' }, onMouseEnter: function (e) { e.currentTarget.style.backgroundColor = t.fillSecondary; }, onMouseLeave: function (e) { e.currentTarget.style.backgroundColor = 'transparent'; } },
|
||
columnsVisible.region && React.createElement('td', { style: styles.td }, row.regionProvince + '-' + row.regionCity),
|
||
columnsVisible.parkingName && React.createElement('td', { style: styles.td }, row.parkingName),
|
||
columnsVisible.parkedVehicles && React.createElement('td', { style: styles.td },
|
||
React.createElement('span', {
|
||
style: styles.linkBlue,
|
||
onClick: function () {
|
||
if (row.parkedCount > 0 && row.vehicles && row.vehicles.length > 0) {
|
||
setVehicleDetailParkingId(row.id);
|
||
} else {
|
||
setToastMessage('该停车场暂无车辆');
|
||
setTimeout(function () { setToastMessage(''); }, 2000);
|
||
}
|
||
}
|
||
}, row.parkedCount)
|
||
),
|
||
columnsVisible.parkingSpaces && React.createElement('td', { style: styles.td }, row.parkingSpaces),
|
||
columnsVisible.address && React.createElement('td', { style: styles.td }, row.address),
|
||
columnsVisible.leaseStart && React.createElement('td', { style: styles.td }, row.leaseStart),
|
||
columnsVisible.leaseEnd && React.createElement('td', { style: styles.td }, row.leaseEnd),
|
||
columnsVisible.manager && React.createElement('td', { style: styles.td }, row.manager),
|
||
columnsVisible.managerPhone && React.createElement('td', { style: styles.td }, row.managerPhone),
|
||
columnsVisible.contactName && React.createElement('td', { style: styles.td }, row.contactName),
|
||
columnsVisible.contactPhone && React.createElement('td', { style: styles.td }, row.contactPhone),
|
||
React.createElement('td', { style: styles.td },
|
||
React.createElement('a', {
|
||
style: styles.actionLink,
|
||
onClick: function (e) { e.preventDefault(); setViewParking(row); }
|
||
}, '查看'),
|
||
React.createElement('a', {
|
||
style: styles.actionLink,
|
||
onClick: function (e) { e.preventDefault(); setEditParking(row); }
|
||
}, '编辑'),
|
||
React.createElement('a', {
|
||
style: Object.assign({}, styles.actionLink, { color: t.danger }),
|
||
onClick: function (e) { e.preventDefault(); setDeleteConfirmParking(row); }
|
||
}, '删除')
|
||
)
|
||
);
|
||
})}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
{/* 分页 */}
|
||
{totalItems > 0 && (
|
||
<div style={styles.pagination}>
|
||
<div style={styles.paginationLeft}>
|
||
<span>共 {totalItems} 条</span>
|
||
<span style={{ marginLeft: '16px' }}>每页显示</span>
|
||
<select
|
||
style={styles.paginationSelect}
|
||
value={pageSize}
|
||
onChange={function (e) {
|
||
var newPageSize = parseInt(e.target.value, 10);
|
||
setPageSize(newPageSize);
|
||
setCurrentPage(1);
|
||
}}
|
||
>
|
||
<option value="10">10</option>
|
||
<option value="20">20</option>
|
||
<option value="50">50</option>
|
||
<option value="100">100</option>
|
||
</select>
|
||
<span>条</span>
|
||
</div>
|
||
<div style={styles.paginationRight}>
|
||
<button
|
||
style={Object.assign({}, styles.paginationBtn, currentPage === 1 ? styles.paginationBtnDisabled : {})}
|
||
onClick={function () { if (currentPage > 1) setCurrentPage(currentPage - 1); }}
|
||
disabled={currentPage === 1}
|
||
onMouseLeave={function (e) { if (currentPage > 1) { e.currentTarget.style.borderColor = t.border; e.currentTarget.style.color = t.neutral8; } }}
|
||
>
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
|
||
</svg>
|
||
</button>
|
||
{(function () {
|
||
var pages = [];
|
||
var showPages = 5;
|
||
var startPage = Math.max(1, currentPage - Math.floor(showPages / 2));
|
||
var endPage = Math.min(totalPages, startPage + showPages - 1);
|
||
if (endPage - startPage < showPages - 1) {
|
||
startPage = Math.max(1, endPage - showPages + 1);
|
||
}
|
||
if (startPage > 1) {
|
||
pages.push(React.createElement('button', {
|
||
key: 1,
|
||
style: styles.paginationBtn,
|
||
onClick: function () { setCurrentPage(1); },
|
||
onMouseLeave: function (e) { e.currentTarget.style.borderColor = t.border; e.currentTarget.style.color = t.neutral8; }
|
||
}, '1'));
|
||
if (startPage > 2) {
|
||
pages.push(React.createElement('span', { key: 'ellipsis1', style: { padding: '0 4px', color: t.neutral7 } }, '...'));
|
||
}
|
||
}
|
||
for (var i = startPage; i <= endPage; i++) {
|
||
var isActive = i === currentPage;
|
||
pages.push(React.createElement('button', {
|
||
key: i,
|
||
style: Object.assign({}, styles.paginationBtn, isActive ? styles.paginationBtnActive : {}),
|
||
onClick: function (page) { return function () { setCurrentPage(page); }; }(i),
|
||
onMouseLeave: function (e) { if (!isActive) { e.currentTarget.style.borderColor = t.border; e.currentTarget.style.color = t.neutral8; } }
|
||
}, i));
|
||
}
|
||
if (endPage < totalPages) {
|
||
if (endPage < totalPages - 1) {
|
||
pages.push(React.createElement('span', { key: 'ellipsis2', style: { padding: '0 4px', color: t.neutral7 } }, '...'));
|
||
}
|
||
pages.push(React.createElement('button', {
|
||
key: totalPages,
|
||
style: styles.paginationBtn,
|
||
onClick: function () { setCurrentPage(totalPages); },
|
||
onMouseLeave: function (e) { e.currentTarget.style.borderColor = t.border; e.currentTarget.style.color = t.neutral8; }
|
||
}, totalPages));
|
||
}
|
||
return pages;
|
||
})()}
|
||
<button
|
||
style={Object.assign({}, styles.paginationBtn, currentPage === totalPages ? styles.paginationBtnDisabled : {})}
|
||
onClick={function () { if (currentPage < totalPages) setCurrentPage(currentPage + 1); }}
|
||
disabled={currentPage === totalPages}
|
||
>
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
|
||
</svg>
|
||
</button>
|
||
<span style={{ marginLeft: '8px', fontSize: t.fontSize14, color: t.neutral7 }}>跳至</span>
|
||
<input
|
||
type="number"
|
||
style={styles.paginationInput}
|
||
min="1"
|
||
max={totalPages}
|
||
value={currentPage}
|
||
onChange={function (e) {
|
||
var page = parseInt(e.target.value, 10);
|
||
if (page >= 1 && page <= totalPages) {
|
||
setCurrentPage(page);
|
||
}
|
||
}}
|
||
onKeyDown={function (e) {
|
||
if (e.key === 'Enter') {
|
||
var page = parseInt(e.target.value, 10);
|
||
if (page >= 1 && page <= totalPages) {
|
||
setCurrentPage(page);
|
||
}
|
||
}
|
||
}}
|
||
/>
|
||
<span style={{ fontSize: t.fontSize14, color: t.neutral7 }}>页</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
</div>
|
||
</React.Fragment>
|
||
)}
|
||
|
||
{/* 新建停车场页面 */}
|
||
{currentView === 'new' && (
|
||
<div style={styles.card}>
|
||
<div style={styles.modalTitle}>新建停车场</div>
|
||
<div style={styles.newPageLayout}>
|
||
<div style={styles.newPageForm}>
|
||
<div style={styles.formRow}>
|
||
<span style={styles.formLabel}>地区 <span style={styles.formLabelReq}>*</span></span>
|
||
<div style={styles.cascaderWrap}>
|
||
<div
|
||
style={Object.assign({}, styles.cascaderInput, formRegionCascaderOpen ? styles.cascaderInputFocus : {})}
|
||
onClick={function () { setFormRegionCascaderOpen(!formRegionCascaderOpen); }}
|
||
>
|
||
<span style={formData.regionProvince && formData.regionCity ? {} : styles.cascaderPlaceholder}>
|
||
{formData.regionProvince && formData.regionCity
|
||
? (function () {
|
||
var p = provinceList.find(function (x) { return x.code === formData.regionProvince; });
|
||
var cities = cityMap[formData.regionProvince];
|
||
var c = cities && cities.find(function (x) { return x.code === formData.regionCity; });
|
||
return (p ? p.name : '') + (p && c ? ' - ' : '') + (c ? c.name : '');
|
||
}())
|
||
: '请选择省/市'}
|
||
</span>
|
||
<span style={Object.assign({}, styles.cascaderChevron, formRegionCascaderOpen ? { transform: 'rotate(180deg)' } : {})}>
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M7 10l5 5 5-5z" /></svg>
|
||
</span>
|
||
</div>
|
||
{formRegionCascaderOpen && (
|
||
<React.Fragment>
|
||
<div style={{ position: 'fixed', left: 0, top: 0, right: 0, bottom: 0, zIndex: 99 }} onClick={function () { setFormRegionCascaderOpen(false); }} />
|
||
<div style={styles.cascaderPanel} onClick={function (e) { e.stopPropagation(); }}>
|
||
<div style={styles.cascaderColumn}>
|
||
{provinceList.map(function (p) {
|
||
var isSelected = formData.regionProvince === p.code;
|
||
var isHovered = formRegionCascaderHover === 'p-' + p.code;
|
||
return React.createElement('div', {
|
||
key: p.code,
|
||
style: Object.assign({}, styles.cascaderOption, (isSelected || isHovered) ? styles.cascaderOptionHover : {}),
|
||
onClick: function () {
|
||
handleFormChange('regionProvince', p.code);
|
||
handleFormChange('regionCity', '');
|
||
},
|
||
onMouseEnter: function () { setFormRegionCascaderHover('p-' + p.code); },
|
||
onMouseLeave: function () { setFormRegionCascaderHover(''); }
|
||
}, p.name, React.createElement('span', { style: { color: t.neutral6 } }, '>'));
|
||
})}
|
||
</div>
|
||
<div style={Object.assign({}, styles.cascaderColumn, styles.cascaderColumnLast)}>
|
||
{(cityMap[formData.regionProvince] || []).map(function (c) {
|
||
var isSelected = formData.regionCity === c.code;
|
||
var isHovered = formRegionCascaderHover === 'c-' + c.code;
|
||
return React.createElement('div', {
|
||
key: c.code,
|
||
style: Object.assign({}, styles.cascaderOption, (isSelected || isHovered) ? styles.cascaderOptionHover : {}),
|
||
onClick: function () {
|
||
handleFormChange('regionCity', c.code);
|
||
setFormRegionCascaderOpen(false);
|
||
},
|
||
onMouseEnter: function () { setFormRegionCascaderHover('c-' + c.code); },
|
||
onMouseLeave: function () { setFormRegionCascaderHover(''); }
|
||
}, c.name);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</React.Fragment>
|
||
)}
|
||
</div>
|
||
</div>
|
||
<div style={styles.formRow}>
|
||
<span style={styles.formLabel}>停车场名称 <span style={styles.formLabelReq}>*</span></span>
|
||
<input style={styles.input} value={formData.parkingName} onChange={function (e) { handleFormChange('parkingName', e.target.value); }} placeholder="请输入" />
|
||
</div>
|
||
<div style={styles.formRow}>
|
||
<span style={styles.formLabel}>车位数</span>
|
||
<input style={styles.input} type="number" value={formData.parkingSpaces} onChange={function (e) { handleFormChange('parkingSpaces', e.target.value); }} placeholder="选填" />
|
||
</div>
|
||
<div style={styles.formRow}>
|
||
<span style={styles.formLabel}>地址</span>
|
||
<input
|
||
style={styles.input}
|
||
value={formData.address}
|
||
onChange={function (e) { handleFormChange('address', e.target.value); }}
|
||
placeholder="选填，与地图联动"
|
||
/>
|
||
</div>
|
||
<div style={styles.formRow}>
|
||
<span style={styles.formLabel}>负责人</span>
|
||
<input style={styles.input} value={formData.manager} onChange={function (e) { handleFormChange('manager', e.target.value); }} placeholder="选填" />
|
||
</div>
|
||
<div style={styles.formRow}>
|
||
<span style={styles.formLabel}>负责人电话</span>
|
||
<input style={styles.input} value={formData.managerPhone} onChange={function (e) { handleFormChange('managerPhone', e.target.value); }} placeholder="选填" />
|
||
</div>
|
||
<div style={styles.formRow}>
|
||
<span style={styles.formLabel}>停车场联系人</span>
|
||
<input style={styles.input} value={formData.contactName} onChange={function (e) { handleFormChange('contactName', e.target.value); }} placeholder="选填" />
|
||
</div>
|
||
<div style={styles.formRow}>
|
||
<span style={styles.formLabel}>停车场电话</span>
|
||
<input style={styles.input} value={formData.contactPhone} onChange={function (e) { handleFormChange('contactPhone', e.target.value); }} placeholder="选填" />
|
||
</div>
|
||
<div style={styles.formRow}>
|
||
<span style={styles.formLabel}>租赁开始时间 <span style={styles.formLabelReq}>*</span></span>
|
||
<input
|
||
style={styles.input}
|
||
type="date"
|
||
value={formData.leaseStart}
|
||
onChange={function (e) { handleFormChange('leaseStart', e.target.value); }}
|
||
/>
|
||
</div>
|
||
<div style={styles.formRow}>
|
||
<span style={styles.formLabel}>租赁到期时间 <span style={styles.formLabelReq}>*</span></span>
|
||
<input
|
||
style={styles.input}
|
||
type="date"
|
||
value={formData.leaseEnd}
|
||
onChange={function (e) { handleFormChange('leaseEnd', e.target.value); }}
|
||
/>
|
||
</div>
|
||
<div style={styles.formRow}>
|
||
<span style={styles.formLabel}>租赁费 <span style={styles.formLabelReq}>*</span></span>
|
||
<span style={{ display: 'inline-flex', alignItems: 'center' }}>
|
||
<input
|
||
style={styles.input}
|
||
type="number"
|
||
value={formData.rentFee}
|
||
onChange={function (e) { handleFormChange('rentFee', e.target.value); }}
|
||
placeholder="请输入"
|
||
/>
|
||
<span style={{ marginLeft: '8px' }}>元</span>
|
||
</span>
|
||
</div>
|
||
<div style={styles.formRow}>
|
||
<span style={styles.formLabel}>租赁合同</span>
|
||
<input type="file" accept=".pdf" onChange={function (e) { handleFormChange('contractFile', e.target.files[0] || null); }} />
|
||
<span style={{ marginLeft: '8px', fontSize: '12px', color: '#999' }}>支持上传PDF</span>
|
||
</div>
|
||
</div>
|
||
<div style={styles.newPageMap}>
|
||
地图区域（输入地址可定位，拖动反写地址）
|
||
{formData.address && React.createElement('div', { style: { marginTop: '8px', fontSize: '12px' } }, '当前地址：' + formData.address)}
|
||
</div>
|
||
</div>
|
||
<div style={styles.modalFooter}>
|
||
<button style={Object.assign({}, styles.btn, styles.btnDefault)} onClick={handleCancelNew}>取消</button>
|
||
<button style={Object.assign({}, styles.btn, styles.btnPrimary)} onClick={handleSubmitNew}>提交</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 编辑弹窗 - 与新增相同可编辑 */}
|
||
{editParking && (
|
||
<div style={styles.modalMask} onClick={function () { setEditParking(null); }}>
|
||
<div style={Object.assign({}, styles.modalBox, { minWidth: '520px' })} onClick={function (e) { e.stopPropagation(); }}>
|
||
<div style={styles.modalTitle}>编辑停车场</div>
|
||
<div style={styles.formRow}>
|
||
<span style={styles.formLabel}>地区 <span style={styles.formLabelReq}>*</span></span>
|
||
<span>{editParking.regionProvince}-{editParking.regionCity}</span>
|
||
</div>
|
||
<div style={styles.formRow}>
|
||
<span style={styles.formLabel}>停车场名称</span>
|
||
<input style={styles.input} defaultValue={editParking.parkingName} placeholder="请输入" />
|
||
</div>
|
||
<div style={styles.formRow}>
|
||
<span style={styles.formLabel}>车位数</span>
|
||
<input style={styles.input} type="number" defaultValue={editParking.parkingSpaces} placeholder="选填" />
|
||
</div>
|
||
<div style={styles.formRow}>
|
||
<span style={styles.formLabel}>地址</span>
|
||
<input style={styles.input} defaultValue={editParking.address} placeholder="选填" />
|
||
</div>
|
||
<div style={styles.formRow}>
|
||
<span style={styles.formLabel}>负责人 / 负责人电话</span>
|
||
<input style={styles.input} defaultValue={editParking.manager} placeholder="负责人" />
|
||
<input style={Object.assign({}, styles.input, { marginLeft: '8px' })} defaultValue={editParking.managerPhone} placeholder="电话" />
|
||
</div>
|
||
<div style={styles.formRow}>
|
||
<span style={styles.formLabel}>停车场联系人 / 停车场电话</span>
|
||
<input style={styles.input} defaultValue={editParking.contactName} placeholder="联系人" />
|
||
<input style={Object.assign({}, styles.input, { marginLeft: '8px' })} defaultValue={editParking.contactPhone} placeholder="电话" />
|
||
</div>
|
||
<div style={styles.formRow}>
|
||
<span style={styles.formLabel}>租赁开始时间 / 租赁结束时间</span>
|
||
<span>{editParking.leaseStart} / {editParking.leaseEnd}</span>
|
||
</div>
|
||
<div style={styles.modalFooter}>
|
||
<button style={Object.assign({}, styles.btn, styles.btnDefault)} onClick={function () { setEditParking(null); }}>取消</button>
|
||
<button style={Object.assign({}, styles.btn, styles.btnPrimary)} onClick={function () { setToastMessage('保存成功'); setEditParking(null); setTimeout(function () { setToastMessage(''); }, 2000); }}>保存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 查看弹窗 - 与新增相同但只读 */}
|
||
{viewParking && (
|
||
<div style={styles.modalMask} onClick={function () { setViewParking(null); }}>
|
||
<div style={styles.modalBox} onClick={function (e) { e.stopPropagation(); }}>
|
||
<div style={styles.modalTitle}>查看停车场</div>
|
||
<div style={styles.formRow}>
|
||
<span style={styles.formLabel}>地区</span>
|
||
<span>{viewParking.regionProvince}-{viewParking.regionCity}</span>
|
||
</div>
|
||
<div style={styles.formRow}>
|
||
<span style={styles.formLabel}>停车场名称</span>
|
||
<span>{viewParking.parkingName}</span>
|
||
</div>
|
||
<div style={styles.formRow}>
|
||
<span style={styles.formLabel}>车位数</span>
|
||
<span>{viewParking.parkingSpaces}</span>
|
||
</div>
|
||
<div style={styles.formRow}>
|
||
<span style={styles.formLabel}>地址</span>
|
||
<span>{viewParking.address}</span>
|
||
</div>
|
||
<div style={styles.formRow}>
|
||
<span style={styles.formLabel}>负责人 / 负责人电话</span>
|
||
<span>{viewParking.manager} / {viewParking.managerPhone}</span>
|
||
</div>
|
||
<div style={styles.formRow}>
|
||
<span style={styles.formLabel}>停车场联系人 / 停车场电话</span>
|
||
<span>{viewParking.contactName} / {viewParking.contactPhone}</span>
|
||
</div>
|
||
<div style={styles.formRow}>
|
||
<span style={styles.formLabel}>租赁开始时间 / 租赁结束时间</span>
|
||
<span>{viewParking.leaseStart} / {viewParking.leaseEnd}</span>
|
||
</div>
|
||
<div style={styles.modalFooter}>
|
||
<button style={Object.assign({}, styles.btn, styles.btnDefault)} onClick={function () { setViewParking(null); }}>关闭</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 删除确认弹窗 */}
|
||
{deleteConfirmParking && (
|
||
<div style={styles.modalMask} onClick={function () { setDeleteConfirmParking(null); }}>
|
||
<div style={Object.assign({}, styles.modalBox, { minWidth: '360px' })} onClick={function (e) { e.stopPropagation(); }}>
|
||
<div style={styles.modalTitle}>确认删除</div>
|
||
<p style={{ margin: '0 0 16px', fontSize: '14px' }}>是否确认删除该停车场？</p>
|
||
<div style={styles.modalFooter}>
|
||
<button style={Object.assign({}, styles.btn, styles.btnDefault)} onClick={function () { setDeleteConfirmParking(null); }}>取消</button>
|
||
<button style={Object.assign({}, styles.btn, styles.btnDanger)} onClick={handleDeleteConfirm}>确认删除</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 车辆信息弹框 */}
|
||
{vehicleDetailParkingId && (function () {
|
||
var row = mockParkingList.find(function (r) { return r.id === vehicleDetailParkingId; });
|
||
if (!row || !row.vehicles || row.vehicles.length === 0) {
|
||
return null;
|
||
}
|
||
return React.createElement(
|
||
'div',
|
||
{ style: styles.modalMask, onClick: function () { setVehicleDetailParkingId(null); } },
|
||
React.createElement('div', {
|
||
style: styles.vehicleModalBox,
|
||
onClick: function (e) { e.stopPropagation(); }
|
||
},
|
||
React.createElement('div', { style: styles.vehicleModalTitle }, row.parkingName + ' - 车辆明细'),
|
||
React.createElement('div', { style: styles.tableWrap },
|
||
React.createElement('table', { style: styles.table },
|
||
React.createElement('thead', {},
|
||
React.createElement('tr', {},
|
||
React.createElement('th', { style: styles.th }, '运营城市'),
|
||
React.createElement('th', { style: styles.th }, '车架号'),
|
||
React.createElement('th', { style: styles.th }, '车牌号'),
|
||
React.createElement('th', { style: styles.th }, '车辆编号'),
|
||
React.createElement('th', { style: styles.th }, '品牌'),
|
||
React.createElement('th', { style: styles.th }, '型号'),
|
||
React.createElement('th', { style: styles.th }, '车身颜色'),
|
||
React.createElement('th', { style: styles.th }, '整备状态'),
|
||
React.createElement('th', { style: styles.th }, '行驶公里数'),
|
||
React.createElement('th', { style: styles.th }, '当前位置'),
|
||
React.createElement('th', { style: styles.th }, 'GPS最后上传时间')
|
||
)
|
||
),
|
||
React.createElement('tbody', {},
|
||
row.vehicles.map(function (v, i) {
|
||
return React.createElement('tr', { key: i },
|
||
React.createElement('td', { style: styles.td }, v.city),
|
||
React.createElement('td', { style: styles.td }, v.frameNo),
|
||
React.createElement('td', { style: styles.td }, v.plateNo),
|
||
React.createElement('td', { style: styles.td }, v.code),
|
||
React.createElement('td', { style: styles.td }, v.brand),
|
||
React.createElement('td', { style: styles.td }, v.model),
|
||
React.createElement('td', { style: styles.td }, v.color),
|
||
React.createElement('td', { style: styles.td }, v.status),
|
||
React.createElement('td', { style: styles.td }, v.mileage),
|
||
React.createElement('td', { style: styles.td }, v.location),
|
||
React.createElement('td', { style: styles.td }, v.gpsTime)
|
||
);
|
||
})
|
||
)
|
||
)
|
||
),
|
||
React.createElement('div', { style: styles.modalFooter },
|
||
React.createElement('button', {
|
||
style: Object.assign({}, styles.btn, styles.btnDefault),
|
||
onClick: function () { setVehicleDetailParkingId(null); }
|
||
}, '关闭')
|
||
)
|
||
)
|
||
);
|
||
})()}
|
||
|
||
{/* 需求说明弹窗 */}
|
||
{showRequirementModal && (
|
||
<div style={styles.modalMask} onClick={function () { setShowRequirementModal(false); }}>
|
||
<div style={Object.assign({}, styles.modalBox, { minWidth: '600px', maxWidth: '800px' })} onClick={function (e) { e.stopPropagation(); }}>
|
||
<button
|
||
style={styles.modalCloseBtn}
|
||
onClick={function () { setShowRequirementModal(false); }}
|
||
onMouseEnter={function (e) { e.currentTarget.style.backgroundColor = t.fill; e.currentTarget.style.color = t.neutral8; }}
|
||
onMouseLeave={function (e) { e.currentTarget.style.backgroundColor = 'transparent'; e.currentTarget.style.color = t.neutral6; }}
|
||
title="关闭"
|
||
>
|
||
×
|
||
</button>
|
||
<div style={styles.modalContent}>
|
||
<div style={styles.requirementSection}>
|
||
<div style={styles.requirementSectionTitle}>筛选：</div>
|
||
<div style={styles.requirementItem}>包括地区（级联选择器，省-市）、停车场名称（选择器，支持输入框中模糊搜索）、负责人（选择器，支持输入框中模糊搜索）</div>
|
||
</div>
|
||
<div style={styles.requirementSection}>
|
||
<div style={styles.requirementSectionTitle}>停车场列表：</div>
|
||
<div style={styles.requirementItem}>支持新建、导出、列设置</div>
|
||
<div style={styles.requirementItem}>字段显示依次为地区、停车场名称、停放车辆、车位数、地址、租赁开始时间、租赁结束时间、负责人、负责人联系方式、停车场联系人、停车场联系方式</div>
|
||
<div style={styles.requirementSubItem}>1. 地区字段显示精确至省-市即可</div>
|
||
<div style={styles.requirementSubItem}>2. 停车场名称字段显示实际停车场名称</div>
|
||
<div style={styles.requirementSubItem}>3. 停放车辆显示停车场当前停放车辆数，车辆数标注为重点色（如蓝色），点击车辆数以卡片模式展开对应车辆明细，车辆明细显示运营城市、车架号、车牌号、车辆编号、品牌、型号、车身颜色、整备状态、行驶公里数、当前位置、GPS最后上传时间</div>
|
||
<div style={styles.requirementSubItem}>4. 车位数显示停车场实际车位数</div>
|
||
<div style={styles.requirementSubItem}>5. 地址显示停车场实际地址</div>
|
||
<div style={styles.requirementSubItem}>6. 租赁开始时间显示停车场合同实际租赁时间，显示格式为年月日</div>
|
||
<div style={styles.requirementSubItem}>7. 租赁结束时间显示停车场合同实际租赁时间，显示格式为年月日</div>
|
||
<div style={styles.requirementSubItem}>8. 负责人显示停车场实际负责人姓名</div>
|
||
<div style={styles.requirementSubItem}>9. 负责人联系方式显示停车场实际负责人手机号</div>
|
||
<div style={styles.requirementSubItem}>10. 停车场联系人显示停车场联系人姓名</div>
|
||
<div style={styles.requirementSubItem}>11. 停车场电话显示停车场联系人手机号</div>
|
||
<div style={styles.requirementSubItem}>12. 操作列支持查看、编辑、删除</div>
|
||
<div style={Object.assign({}, styles.requirementItem, { marginTop: t.spacing12 })}>查看与新增页面相同，只是所有信息输入为禁用状态</div>
|
||
<div style={styles.requirementItem}>点击删除进行二次确认，提示"是否确认删除该停车场"，同时判断停车场是否有车辆数据，如有车辆数据则提示"该停车场存在车辆，无法删除"，如停车场无车辆，则toast提示删除成功</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{toastMessage && React.createElement('div', { style: styles.toast }, toastMessage)}
|
||
</div>
|
||
);
|
||
};
|
||
if (typeof window !== 'undefined') {
|
||
window.Component = Component;
|
||
function mount() {
|
||
var rootEl = document.getElementById('root');
|
||
if (rootEl && window.ReactDOM && window.React) {
|
||
var root = ReactDOM.createRoot(rootEl);
|
||
root.render(React.createElement(Component));
|
||
}
|
||
}
|
||
if (document.readyState === 'loading') {
|
||
document.addEventListener('DOMContentLoaded', mount);
|
||
} else {
|
||
setTimeout(mount, 0);
|
||
}
|
||
}
|