8 changed files with 632 additions and 59 deletions
@ -0,0 +1,237 @@ |
|||||
|
<template> |
||||
|
<el-dialog |
||||
|
title="导出航线" |
||||
|
:visible.sync="visible" |
||||
|
width="720px" |
||||
|
top="52vh" |
||||
|
append-to-body |
||||
|
class="export-routes-dialog" |
||||
|
@close="handleClose" |
||||
|
> |
||||
|
<div v-if="routes.length === 0" class="empty-tip"> |
||||
|
<i class="el-icon-warning-outline"></i> |
||||
|
<p>暂无航线可导出，请先创建航线。</p> |
||||
|
</div> |
||||
|
<div v-else> |
||||
|
<div class="select-actions"> |
||||
|
<el-button type="text" size="small" @click="selectAll">全选</el-button> |
||||
|
<el-button type="text" size="small" @click="selectNone">全不选</el-button> |
||||
|
</div> |
||||
|
<div class="tree-list"> |
||||
|
<div |
||||
|
v-for="plan in plansWithRoutes" |
||||
|
:key="plan.id" |
||||
|
class="tree-item plan-item" |
||||
|
> |
||||
|
<div class="tree-item-header" @click="togglePlan(plan.id)"> |
||||
|
<i :class="expandedPlans.includes(plan.id) ? 'el-icon-folder-opened' : 'el-icon-folder'" class="tree-icon"></i> |
||||
|
<div class="tree-item-info"> |
||||
|
<div class="tree-item-name">{{ plan.name }}</div> |
||||
|
<div class="tree-item-meta">{{ planRoutes(plan.id).length }} 个航线</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div v-if="expandedPlans.includes(plan.id)" class="tree-children route-children"> |
||||
|
<div |
||||
|
v-for="route in planRoutes(plan.id)" |
||||
|
:key="route.id" |
||||
|
class="tree-item route-item" |
||||
|
:class="{ selected: selectedIds.includes(route.id) }" |
||||
|
@click.stop="toggleRouteSelect(route.id)" |
||||
|
> |
||||
|
<el-checkbox |
||||
|
:value="selectedIds.includes(route.id)" |
||||
|
@change="(v) => setRouteSelected(route.id, v)" |
||||
|
@click.native.stop |
||||
|
> |
||||
|
<span class="route-name">{{ route.name }}</span> |
||||
|
<span class="route-meta">{{ route.points || (route.waypoints && route.waypoints.length) || 0 }} 个航点</span> |
||||
|
</el-checkbox> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="visible = false">取 消</el-button> |
||||
|
<el-button type="primary" :disabled="selectedIds.length === 0" @click="handleExport"> |
||||
|
导出 {{ selectedIds.length > 0 ? `(${selectedIds.length} 条)` : '' }} |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'ExportRoutesDialog', |
||||
|
props: { |
||||
|
value: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
routes: { |
||||
|
type: Array, |
||||
|
default: () => [] |
||||
|
}, |
||||
|
plans: { |
||||
|
type: Array, |
||||
|
default: () => [] |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
selectedIds: [], |
||||
|
expandedPlans: [] |
||||
|
}; |
||||
|
}, |
||||
|
computed: { |
||||
|
visible: { |
||||
|
get() { |
||||
|
return this.value; |
||||
|
}, |
||||
|
set(v) { |
||||
|
this.$emit('input', v); |
||||
|
} |
||||
|
}, |
||||
|
/** 有航线的方案列表（用于展示） */ |
||||
|
plansWithRoutes() { |
||||
|
return this.plans.filter(p => this.planRoutes(p.id).length > 0); |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
value(v) { |
||||
|
if (v) { |
||||
|
this.selectedIds = this.routes.map(r => r.id); |
||||
|
this.expandedPlans = this.plansWithRoutes.map(p => p.id); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
planRoutes(planId) { |
||||
|
return this.routes.filter(r => r.scenarioId === planId); |
||||
|
}, |
||||
|
togglePlan(planId) { |
||||
|
const idx = this.expandedPlans.indexOf(planId); |
||||
|
if (idx >= 0) { |
||||
|
this.expandedPlans.splice(idx, 1); |
||||
|
} else { |
||||
|
this.expandedPlans.push(planId); |
||||
|
} |
||||
|
}, |
||||
|
toggleRouteSelect(routeId) { |
||||
|
const idx = this.selectedIds.indexOf(routeId); |
||||
|
if (idx >= 0) { |
||||
|
this.selectedIds.splice(idx, 1); |
||||
|
} else { |
||||
|
this.selectedIds.push(routeId); |
||||
|
} |
||||
|
}, |
||||
|
setRouteSelected(routeId, selected) { |
||||
|
if (selected) { |
||||
|
if (!this.selectedIds.includes(routeId)) this.selectedIds.push(routeId); |
||||
|
} else { |
||||
|
this.selectedIds = this.selectedIds.filter(id => id !== routeId); |
||||
|
} |
||||
|
}, |
||||
|
selectAll() { |
||||
|
this.selectedIds = this.routes.map(r => r.id); |
||||
|
}, |
||||
|
selectNone() { |
||||
|
this.selectedIds = []; |
||||
|
}, |
||||
|
handleExport() { |
||||
|
this.$emit('export', this.selectedIds); |
||||
|
}, |
||||
|
handleClose() { |
||||
|
this.selectedIds = []; |
||||
|
this.expandedPlans = []; |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.export-routes-dialog .empty-tip { |
||||
|
text-align: center; |
||||
|
padding: 32px 0; |
||||
|
color: #909399; |
||||
|
} |
||||
|
.export-routes-dialog .empty-tip i { |
||||
|
font-size: 48px; |
||||
|
margin-bottom: 12px; |
||||
|
display: block; |
||||
|
} |
||||
|
.export-routes-dialog .select-actions { |
||||
|
margin-bottom: 12px; |
||||
|
} |
||||
|
.export-routes-dialog .tree-list { |
||||
|
max-height: 360px; |
||||
|
overflow-y: auto; |
||||
|
border: 1px solid #ebeef5; |
||||
|
border-radius: 4px; |
||||
|
padding: 8px; |
||||
|
} |
||||
|
.export-routes-dialog .tree-item { |
||||
|
user-select: none; |
||||
|
} |
||||
|
.export-routes-dialog .tree-item-header { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 8px 12px; |
||||
|
border-radius: 4px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.export-routes-dialog .tree-item-header:hover { |
||||
|
background: #f5f7fa; |
||||
|
} |
||||
|
.export-routes-dialog .plan-item .tree-item-header { |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
.export-routes-dialog .tree-icon { |
||||
|
margin-right: 8px; |
||||
|
color: #909399; |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
.export-routes-dialog .tree-item-info { |
||||
|
flex: 1; |
||||
|
min-width: 0; |
||||
|
} |
||||
|
.export-routes-dialog .tree-item-name { |
||||
|
font-size: 14px; |
||||
|
color: #303133; |
||||
|
} |
||||
|
.export-routes-dialog .tree-item-meta { |
||||
|
font-size: 12px; |
||||
|
color: #909399; |
||||
|
margin-top: 2px; |
||||
|
} |
||||
|
.export-routes-dialog .tree-children { |
||||
|
padding-left: 24px; |
||||
|
} |
||||
|
.export-routes-dialog .route-children { |
||||
|
margin-bottom: 4px; |
||||
|
} |
||||
|
.export-routes-dialog .route-item { |
||||
|
padding: 6px 12px; |
||||
|
border-radius: 4px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.export-routes-dialog .route-item:hover { |
||||
|
background: #f5f7fa; |
||||
|
} |
||||
|
.export-routes-dialog .route-item .route-name { |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
.export-routes-dialog .route-item .route-meta { |
||||
|
margin-left: 8px; |
||||
|
font-size: 12px; |
||||
|
color: #909399; |
||||
|
} |
||||
|
.export-routes-dialog >>> .route-item .el-checkbox { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
width: 100%; |
||||
|
} |
||||
|
.export-routes-dialog >>> .route-item .el-checkbox__label { |
||||
|
flex: 1; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,240 @@ |
|||||
|
<template> |
||||
|
<el-dialog |
||||
|
title="导入航线" |
||||
|
:visible.sync="visible" |
||||
|
width="520px" |
||||
|
append-to-body |
||||
|
class="import-routes-dialog" |
||||
|
:modal-append-to-body="true" |
||||
|
@close="handleClose" |
||||
|
> |
||||
|
<div v-if="!parsedData" class="empty-tip"> |
||||
|
<i class="el-icon-upload"></i> |
||||
|
<p>请选择要导入的航线 JSON 文件</p> |
||||
|
<el-button type="primary" size="small" @click="triggerFileInput">选择文件</el-button> |
||||
|
<input |
||||
|
ref="fileInput" |
||||
|
type="file" |
||||
|
accept=".json" |
||||
|
style="display:none" |
||||
|
@change="onFileChange" |
||||
|
/> |
||||
|
</div> |
||||
|
<div v-else> |
||||
|
<div class="import-preview"> |
||||
|
<div class="preview-header"> |
||||
|
<i class="el-icon-document"></i> |
||||
|
<span>共 {{ routeItems.length }} 条航线待导入</span> |
||||
|
</div> |
||||
|
<div class="route-preview-list"> |
||||
|
<div v-for="(item, idx) in routeItems" :key="idx" class="route-preview-item"> |
||||
|
<span class="route-name">{{ item.callSign || item.name || `航线${idx + 1}` }}</span> |
||||
|
<span class="route-meta">{{ (item.waypoints || []).length }} 个航点</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<el-form label-width="100px" size="small" class="import-form"> |
||||
|
<el-form-item label="目标方案" required> |
||||
|
<el-select v-model="targetScenarioId" placeholder="请选择方案" style="width:100%" clearable> |
||||
|
<el-option v-for="p in plans" :key="p.id" :label="p.name" :value="p.id" /> |
||||
|
</el-select> |
||||
|
<div v-if="plans.length === 0" class="el-form-item__error" style="margin-top:4px;">暂无方案，请先创建方案后再导入。</div> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="默认平台"> |
||||
|
<el-select v-model="targetPlatformId" placeholder="导入时使用的平台（可后续在编辑中修改）" style="width:100%" clearable> |
||||
|
<el-option |
||||
|
v-for="p in allPlatforms" |
||||
|
:key="p.id" |
||||
|
:label="p.name" |
||||
|
:value="p.id" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button v-if="parsedData" @click="resetFile">重新选择</el-button> |
||||
|
<el-button @click="visible = false">取 消</el-button> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
:disabled="!canImport" |
||||
|
:loading="importing" |
||||
|
@click="handleImport" |
||||
|
> |
||||
|
导入 |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'ImportRoutesDialog', |
||||
|
props: { |
||||
|
value: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
plans: { |
||||
|
type: Array, |
||||
|
default: () => [] |
||||
|
}, |
||||
|
allPlatforms: { |
||||
|
type: Array, |
||||
|
default: () => [] |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
parsedData: null, |
||||
|
targetScenarioId: null, |
||||
|
targetPlatformId: null, |
||||
|
importing: false |
||||
|
}; |
||||
|
}, |
||||
|
computed: { |
||||
|
visible: { |
||||
|
get() { |
||||
|
return this.value; |
||||
|
}, |
||||
|
set(v) { |
||||
|
this.$emit('input', v); |
||||
|
} |
||||
|
}, |
||||
|
routeItems() { |
||||
|
if (!this.parsedData) return []; |
||||
|
const d = this.parsedData; |
||||
|
if (Array.isArray(d.routes)) return d.routes; |
||||
|
if (d.route && d.waypoints) return [{ ...d.route, waypoints: d.waypoints }]; |
||||
|
return []; |
||||
|
}, |
||||
|
canImport() { |
||||
|
return this.parsedData && this.targetScenarioId && this.routeItems.length > 0; |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
value(v) { |
||||
|
if (v && !this.parsedData) { |
||||
|
this.targetScenarioId = this.plans[0] && this.plans[0].id; |
||||
|
this.targetPlatformId = this.allPlatforms[0] && this.allPlatforms[0].id; |
||||
|
} |
||||
|
}, |
||||
|
plans: { |
||||
|
immediate: true, |
||||
|
handler(plans) { |
||||
|
if (plans.length > 0 && !this.targetScenarioId) { |
||||
|
this.targetScenarioId = plans[0].id; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
allPlatforms: { |
||||
|
immediate: true, |
||||
|
handler(platforms) { |
||||
|
if (platforms.length > 0 && !this.targetPlatformId) { |
||||
|
this.targetPlatformId = platforms[0].id; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
triggerFileInput() { |
||||
|
this.$refs.fileInput && this.$refs.fileInput.click(); |
||||
|
}, |
||||
|
onFileChange(e) { |
||||
|
const file = e.target.files && e.target.files[0]; |
||||
|
if (!file) return; |
||||
|
const reader = new FileReader(); |
||||
|
reader.onload = (ev) => { |
||||
|
try { |
||||
|
const text = ev.target.result; |
||||
|
const data = JSON.parse(text); |
||||
|
if (!data.routes && !(data.route && data.waypoints)) { |
||||
|
this.$message.error('文件格式不正确，缺少 routes 或 route/waypoints 数据'); |
||||
|
return; |
||||
|
} |
||||
|
this.parsedData = data; |
||||
|
if (this.plans.length > 0 && !this.targetScenarioId) { |
||||
|
this.targetScenarioId = this.plans[0].id; |
||||
|
} |
||||
|
if (this.allPlatforms.length > 0 && !this.targetPlatformId) { |
||||
|
this.targetPlatformId = this.allPlatforms[0].id; |
||||
|
} |
||||
|
} catch (err) { |
||||
|
this.$message.error('JSON 解析失败：' + (err.message || '格式错误')); |
||||
|
} |
||||
|
e.target.value = ''; |
||||
|
}; |
||||
|
reader.readAsText(file, 'UTF-8'); |
||||
|
}, |
||||
|
resetFile() { |
||||
|
this.parsedData = null; |
||||
|
this.triggerFileInput(); |
||||
|
}, |
||||
|
handleImport() { |
||||
|
if (!this.canImport) return; |
||||
|
this.$emit('import', { |
||||
|
routeItems: this.routeItems, |
||||
|
targetScenarioId: this.targetScenarioId, |
||||
|
targetPlatformId: this.targetPlatformId |
||||
|
}); |
||||
|
}, |
||||
|
handleClose() { |
||||
|
this.parsedData = null; |
||||
|
this.targetScenarioId = null; |
||||
|
this.targetPlatformId = null; |
||||
|
}, |
||||
|
setImporting(v) { |
||||
|
this.importing = v; |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.import-routes-dialog >>> .el-dialog__body { |
||||
|
min-height: 180px; |
||||
|
} |
||||
|
.import-routes-dialog .empty-tip { |
||||
|
text-align: center; |
||||
|
padding: 32px 0; |
||||
|
color: #606266; |
||||
|
min-height: 120px; |
||||
|
} |
||||
|
.import-routes-dialog .empty-tip i { |
||||
|
font-size: 48px; |
||||
|
margin-bottom: 12px; |
||||
|
display: block; |
||||
|
} |
||||
|
.import-routes-dialog .empty-tip p { |
||||
|
margin-bottom: 16px; |
||||
|
} |
||||
|
.import-routes-dialog .import-preview { |
||||
|
margin-bottom: 16px; |
||||
|
border: 1px solid #ebeef5; |
||||
|
border-radius: 4px; |
||||
|
padding: 12px; |
||||
|
} |
||||
|
.import-routes-dialog .preview-header { |
||||
|
margin-bottom: 8px; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
.import-routes-dialog .preview-header i { |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
.import-routes-dialog .route-preview-list { |
||||
|
max-height: 160px; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
.import-routes-dialog .route-preview-item { |
||||
|
padding: 6px 0; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
.import-routes-dialog .route-preview-item .route-name { |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
.import-routes-dialog .route-preview-item .route-meta { |
||||
|
font-size: 12px; |
||||
|
color: #909399; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue