LQBZ_web/src/views/task/carrierFlightMission/components/aircraft/index.vue

<template>
  <div class="view-carrierListExecutionRegistrationAircraft">
    <MissionDetail :detail="detail" />
    <div class="view-missionPlane">
      <div class="view-missionPlane-btn">
        <div class="view-missionPlane-btn-left">
          <el-button type="primary" :disabled="!isButtonEnabled" @click="addRow()">添加</el-button>
          <span class="container" v-if="detail">
            <span>任务要求数量：{{ pagination.total }}/{{ detail.taskAircraftNum }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 任务要求总飞行时长：{{ detail.realDuration }}/{{ detail.taskDuration }}小时</span>
          </span>
        </div>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="aircaftCatalogCode" label="飞机编号" align="center">
          <template slot-scope="scope">
            <i v-if="isButtonEnabled" class="el-icon-edit cell-edit" @click="aircraftNumberClick(scope.$index, scope.row)"></i>
            <span>{{ scope.row.aircaftCatalogCode }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="aircaftModelName" label="机型" align="center"> </el-table-column>
        <el-table-column prop="aircaftTypeName" label="机种" align="center"> </el-table-column>
        <el-table-column prop="mechanician" label="机械师" align="center"> </el-table-column>
        <el-table-column prop="planFlyDuration" label="计划飞行时长/小时" align="center">
          <template slot-scope="scope">
            <template v-if="scope.row.planFlyDuration.value || scope.row.planFlyDuration.value == ''">
              <el-input @blur="taskLengthbBlur(scope.$index, scope.row)" type="number" v-model="scope.row.planFlyDuration.value" />
            </template>
            <template v-else>
              <i v-if="isButtonEnabled" @click="editTaskLength(scope.$index, scope.row)" class="el-icon-edit cell-edit"></i>
              <span>{{ scope.row.planFlyDuration }}</span>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="createBy" label="创建人" align="center"> </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" align="center"> </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button :disabled="!isButtonEnabled" @click="handleRemoveClick(scope.$index, scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :total="pagination.total"
        :page-size="pagination.pageSize"
        :page-sizes="[10, 20, 30, 40, 50]"
        layout="sizes,total, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleIndexChange"
        style="padding: 20px; text-align: center"
      >
      </el-pagination>
    </div>
    <FittingsModal ref="FittingsModal" @select="fittingsModalSelect" :taskId="taskId" />
  </div>
</template>

<script>
import { getFlyTaskAircraft, addFlyTaskAircraft, removeFlyTaskAircraft, updateFlyTaskAircraft } from '@/api/task/carrierFlightMission'
import vue from 'vue'
export default {
  name: 'CarrierListExecutionRegistrationAircraft',
  components: {},
  data() {
    // 这里存放数据
    return {
      detail: null,
      modelValue: '战斗机',
      modelList: [
        { label: '战斗机', value: '战斗机' },
        { label: '运输机', value: '运输机' },
        { label: '轰炸机', value: '轰炸机' }
      ],
      pagination: {
        total: 100,
        pageSize: 20,
        pageIndex: 1
      },
      tableData: [],

      activeIndex: null,
      taskId: this.$route.params.id,
      status: this.$route.params.status
    }
  },
  mounted() {
    this.getAircraftList()
  },
  watch: {
    $route() {
      this.getAircraftList()
    }
  },
  methods: {
    fittingsModalSelect(row) {
      this.tableData[this.activeIndex].aircaftModelName = row.aircaftModelName
      this.tableData[this.activeIndex].aircaftCatalogId = row.aircaftCatalogId
      this.tableData[this.activeIndex].aircaftCatalogCode = row.aircaftCatalogCode
      this.tableData[this.activeIndex].aircaftTypeName = row.aircaftTypeName
      this.tableData[this.activeIndex].mechanician = row.mechanician
      if (this.tableData[this.activeIndex].aircaftCatalogCode && this.tableData[this.activeIndex].planFlyDuration > 0) {
        if (this.tableData[this.activeIndex].flyTaskAircaftId) {
          this.updateFlyTaskAircraft(this.activeIndex)
        } else {
          this.addFlyTaskAircraft(this.activeIndex)
        }
      }
    },
    async getAircraftList() {
      let postData = {
        pageIndex: this.pagination.pageIndex,
        pageSize: this.pagination.pageSize,
        taskId: this.taskId
      }
      const { code, data } = await getFlyTaskAircraft(postData)
      if (code == 200) {
        this.detail = data
        this.$store.commit('app/updataTagsItemMetaTitle', { id: this.$route.params.id, otherTitle: '飞行任务管理-任务飞机', newTitle: `飞行任务管理-任务飞机-${this.detail.taskName}` })
        this.pagination.total = data.pageResult.totalCount
        this.tableData = data.pageResult.list
      }
    },
    handleIndexChange(val) {
      this.pagination.pageIndex = val
      this.getAircraftList()
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.getAircraftList()
    },
    addRow() {
      if (this.pagination.total < this.detail.taskAircraftNum) {
        let obj = {
          aircaftCatalogCode: '',
          aircaftModelName: '',
          planFlyDuration: {
            value: ''
          },
          mechanician: '',
          aircaftTypeName: ''
        }
        this.tableData.unshift(obj)
      } else {
        this.$message({
          type: 'warning',
          message: '添加的飞机数量不能大于任务要求数量!'
        })
      }
    },
    handleRemoveClick(index, row) {
      this.$confirm('是否删除该飞机', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const { code, data } = await removeFlyTaskAircraft([row.flyTaskAircaftId])
          if (code == 200) {
            this.getAircraftList()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }
        })
        .catch(() => {})
    },

    taskLengthbBlur(index, row) {
      if (row.planFlyDuration.value <= 0) {
        this.$message.error('时长必须大于0')
        return
      }
      row.planFlyDuration = Number(row.planFlyDuration.value)
      this.tableData[index] = row
      //获取飞行时长
      var sumPlanFlyDuration = this.tableData.reduce(function (total, item) {
        return total + item.planFlyDuration
      }, 0)
      if (sumPlanFlyDuration <= this.detail.taskDuration) {
        if (this.tableData[index].aircaftCatalogCode && this.tableData[this.activeIndex].planFlyDuration > 0) {
          if (this.tableData[this.activeIndex].flyTaskAircaftId) {
            this.updateFlyTaskAircraft(index)
          } else {
            this.addFlyTaskAircraft(index)
          }
        }
      } else {
        this.$message.warning('飞行时长不能大于总飞行时长')
        return
      }
    },

    editTaskLength(index, row) {
      this.activeIndex = index
      let value = row.planFlyDuration
      row.planFlyDuration = {}
      vue.set(row.planFlyDuration, 'value', value)
      this.tableData[index] = row
    },

    aircraftNumberClick(index, row) {
      this.activeIndex = index
      this.$refs.FittingsModal.openDittingsModal()
    },

    closefittingsVisible() {
      this.activeIndex = null
      this.activeRow = {
        aircaftCatalogCode: '',
        aircaftModelName: '',
        planFlyDuration: '',
        updateTime: ''
      }
    },
    async addFlyTaskAircraft(index) {
      let postData = {
        taskId: this.taskId,
        aircaftCatalogId: this.tableData[index].aircaftCatalogId,
        aircaftCatalogCode: this.tableData[index].aircaftCatalogCode,
        planFlyDuration: this.tableData[index].planFlyDuration
      }
      const { code, data } = await addFlyTaskAircraft([postData])
      if (code == 200) {
        this.getAircraftList()
        this.$message({
          type: 'success',
          message: '添加成功!'
        })
      }
    },
    async updateFlyTaskAircraft(index) {
      let postData = {
        taskId: this.taskId,
        aircaftCatalogId: this.tableData[index].aircaftCatalogId,
        aircaftCatalogCode: this.tableData[index].aircaftCatalogCode,
        planFlyDuration: this.tableData[index].planFlyDuration,
        flyTaskAircaftId: this.tableData[index].flyTaskAircaftId
      }
      const { code, data } = await updateFlyTaskAircraft(postData)
      if (code == 200) {
        this.getAircraftList()
        this.$message({
          type: 'success',
          message: '修改成功!'
        })
      }
    }
  },
  computed: {
    isButtonEnabled() {
      return this.status == 1
    }
  }
}
</script>

<style lang="scss">
@import './index.scss';
</style>