动态溯源模块优化

riku

2025-08-20 a09f984cbe2369e13d8694e91c4f8165ec6c2ba9

 src/components/mission/MissionManage.vue

@@ -1,121 +1,173 @@
<template>
  <el-button
  <!-- <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> -->
  <CardDialog v-bind="$attrs" 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-normal"
          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"
            width="150"
          />
          <el-table-column
            prop="endTime"
            label="结束时间"
            align="center"
            :formatter="timeFormatter"
            width="150"
          />
          <el-table-column label="管理" width="160" align="center">
            <template #default="{ row }">
              <!-- <MissionEdit mode="update"></MissionEdit> -->
              <el-button
                type="primary"
                size="small"
                icon="EditPen"
                class="el-button-custom"
                @click="updateMission(row)"
              ></el-button>
              <el-button
                type="primary"
                size="small"
                icon="Delete"
                class="el-button-custom"
                @click="deleteMission(row)"
              ></el-button>
              <!-- <el-button
                :loading="row.downloadLoading"
                type="primary"
                size="small"
                icon="Document"
                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>
            </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>
              </el-button> -->
        <el-button
          type="primary"
          class="el-button-custom"
          @click="createMission"
        >
          新建任务
        </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>
  </CardDialog>
  <MessageBox
    v-model="msgBoxVisible"
    :on-confirm="onConfirm"
    title="删除走航任务"
    msg="确认是否删除该走航任务"
    confirmText="删除"
  ></MessageBox>
  <MissionEdit
    v-model="dialogVisible"
    width="30%"
    :mode="editMode"
    :mission="selectedMission"
  ></MissionEdit>
</template>
<script>
import moment from 'moment';
import { mapState } from 'pinia';
import missionApi from '@/api/missionApi';
import { mapStores } from 'pinia';
import { useMissionStore } from '@/stores/mission';
import { useFetchData } from '@/composables/fetchData';

export default {
  props: {},
  setup() {
    const { loading, fetchData } = useFetchData();
    return { loading, fetchData };
  },
  props: {
    // modelValue: Boolean
  },
  // emits: ['update:modelValue'],
  data() {
    return {
      dialogVisible: false
      dialogVisible: false,
      msgBoxVisible: false,
      onConfirm: undefined,
      // 任务编辑模式，create：创建新任务，update：编辑已有任务
      editMode: 'create',
      // 选中的待编辑任务
      selectedMission: undefined
    };
  },
  computed: {
    ...mapState(useMissionStore, ['missionList'])
    ...mapStores(useMissionStore)
  },
  methods: {
    createMission() {},
    deleteMission(row) {},
    // handleChange(value) {
    //   this.$emit('update:modelValue', value);
    // },
    createMission() {
      this.editMode = 'create';
      this.dialogVisible = true;
    },
    updateMission(row) {
      this.editMode = 'update';
      this.selectedMission = row;
      this.dialogVisible = true;
    },
    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');
    }
@@ -143,6 +195,10 @@
}

.mission-table {
  height: 60vh;
  /* height: 60vh; */
}

:deep(.t-row-normal) {
  background-color: transparent !important;
}
</style>