<template>
|
<el-button
|
type="primary"
|
icon="Memo"
|
class="el-button-custom p-events-auto"
|
@click="dialogVisible = !dialogVisible"
|
>
|
任务管理
|
</el-button>
|
<el-dialog v-model="dialogVisible" :show-close="false" align-center>
|
<template #header="{ close, titleId, titleClass }">
|
<BaseCard direction="top-left" borderless="t">
|
<template #content>
|
<el-row justify="space-between" align="middle">
|
<el-row align="middle">
|
<font-awesome-icon icon="fa fa-list" class="m-r-4" />
|
<span :id="titleId" :class="titleClass">走航任务管理</span>
|
</el-row>
|
<font-awesome-icon
|
icon="fa fa-times"
|
class="cursor-p m-r-4"
|
@click="close"
|
/>
|
</el-row>
|
</template>
|
</BaseCard>
|
</template>
|
<BaseCard size="medium">
|
<template #content>
|
<el-row class="mission-table">
|
<el-col :span="20">
|
<el-table
|
:data="missionList"
|
table-layout="fixed"
|
size="small"
|
:show-overflow-tooltip="true"
|
border
|
row-class-name="t-row"
|
cell-class-name="t-cell"
|
header-row-class-name="t-header-row"
|
header-cell-class-name="t-header-cell"
|
>
|
<el-table-column
|
type="index"
|
label="序号"
|
align="center"
|
width="50"
|
/>
|
<el-table-column
|
prop="missionCode"
|
label="任务编号"
|
align="center"
|
/>
|
<el-table-column
|
prop="startTime"
|
label="开始时间"
|
align="center"
|
:formatter="timeFormatter"
|
/>
|
<el-table-column
|
prop="endTime"
|
label="结束时间"
|
align="center"
|
:formatter="timeFormatter"
|
/>
|
<el-table-column label="管理" width="70" align="center">
|
<template #default="{ row }">
|
<el-button
|
type="primary"
|
size="small"
|
class="el-button-custom"
|
@click="deleteMission(row)"
|
>删除</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-col>
|
<el-col :span="4" class="flex-col">
|
<div>
|
<el-button type="primary" class="el-button-custom">
|
新建任务
|
</el-button>
|
</div>
|
<div>
|
<el-button type="primary" class="el-button-custom">
|
数据导入
|
</el-button>
|
</div>
|
<div>
|
<el-button type="primary" class="el-button-custom">
|
下载模板
|
</el-button>
|
</div>
|
</el-col>
|
</el-row>
|
</template>
|
</BaseCard>
|
</el-dialog>
|
</template>
|
<script>
|
import moment from 'moment';
|
import { mapState } from 'pinia';
|
import { useMissionStore } from '@/stores/mission';
|
|
export default {
|
props: {},
|
data() {
|
return {
|
dialogVisible: false
|
};
|
},
|
computed: {
|
...mapState(useMissionStore, ['missionList'])
|
},
|
methods: {
|
createMission() {},
|
deleteMission(row) {},
|
timeFormatter(row, col, cellValue, index) {
|
return moment(cellValue).format('YYYY-MM-DD HH:mm:ss');
|
}
|
}
|
};
|
</script>
|
<style>
|
.el-dialog {
|
--el-dialog-bg-color: transparent !important;
|
--el-dialog-title-font-size: var(--el-font-size-medium);
|
--el-dialog-content-font-size: 14px;
|
--el-dialog-padding-primary: 0px !important;
|
}
|
|
.el-dialog__title {
|
color: var(--font-color);
|
}
|
</style>
|
<style scoped>
|
.flex-col {
|
display: flex;
|
flex-direction: column;
|
gap: 4px;
|
align-items: flex-end;
|
}
|
|
.mission-table {
|
height: 60vh;
|
}
|
</style>
|
