<template>
|
<!-- <el-button
|
type="primary"
|
icon="Memo"
|
class="el-button-custom p-events-auto"
|
@click="dialogVisible = !dialogVisible"
|
>
|
任务管理
|
</el-button> -->
|
<CardDialog
|
:model-value="modelValue"
|
@changed="handleChange"
|
title="走航任务管理"
|
>
|
<el-row class="mission-table">
|
<el-col :span="20">
|
<el-table
|
:data="missionStore.missionList"
|
table-layout="fixed"
|
size="small"
|
:show-overflow-tooltip="true"
|
border
|
height="64vh"
|
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="140" align="center">
|
<template #default="{ row }">
|
<el-button
|
type="primary"
|
size="small"
|
class="el-button-custom"
|
@click="deleteMission(row)"
|
>删除</el-button
|
>
|
<el-button
|
:loading="row.downloadLoading"
|
type="primary"
|
size="small"
|
class="el-button-custom"
|
@click="downloadReport(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> -->
|
<MissionCreate></MissionCreate>
|
</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>
|
</CardDialog>
|
<MessageBox
|
v-model="msgBoxVisible"
|
:on-confirm="onConfirm"
|
title="删除走航任务"
|
msg="确认是否删除该走航任务"
|
confirmText="删除"
|
></MessageBox>
|
</template>
|
<script>
|
import moment from 'moment';
|
import missionApi from '@/api/missionApi';
|
import { mapStores } from 'pinia';
|
import { useMissionStore } from '@/stores/mission';
|
import { useFetchData } from '@/composables/fetchData';
|
|
export default {
|
setup() {
|
const { loading, fetchData } = useFetchData();
|
return { loading, fetchData };
|
},
|
props: {
|
modelValue: Boolean
|
},
|
emits: ['update:modelValue'],
|
data() {
|
return {
|
dialogVisible: false,
|
msgBoxVisible: false,
|
onConfirm: undefined
|
};
|
},
|
computed: {
|
...mapStores(useMissionStore)
|
},
|
methods: {
|
handleChange(value) {
|
this.$emit('update:modelValue', value);
|
},
|
deleteMission(row) {
|
this.onConfirm = () => {
|
this.missionStore.deleteMission(row.missionCode);
|
};
|
this.msgBoxVisible = true;
|
},
|
downloadReport(row) {
|
row.downloadLoading = true;
|
missionApi
|
.downloadReport(row.missionCode)
|
.finally(() => (row.downloadLoading = false));
|
},
|
// eslint-disable-next-line no-unused-vars
|
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>
|
