aircraft-admin/src/views/aircraft/aircraftDetail/index.vue

<template>
  <div class="app-container">
    <!-- 基本信息 -->
    <basic-info :form="form" />

    <!-- 维护记录 -->
    <maintenance-record
      :data="maintenanceData"
      :page="maintenancePage"
      @size-change="handleMaintenanceSizeChange"
      @current-change="handleMaintenanceCurrentChange"
    />

    <!-- 保险记录 -->
    <insurance-record
      :data="insuranceData"
      :page="insurancePage"
      :aircraft-id="Number($route.query.id)"
      @size-change="handleInsuranceSizeChange"
      @current-change="handleInsuranceCurrentChange"
      @view="handleInsuranceView"
      @edit="handleInsuranceEdit"
      @delete="handleInsuranceDelete"
      @refresh="loadInsuranceRecords"
    />

    <!-- API模块入口 -->
    <api-links @click="handleApiClick" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getMaintenanceRecords, getInsuranceRecords } from '@/api/aircraft'
import BasicInfo from './components/BasicInfo'
import MaintenanceRecord from './components/MaintenanceRecord'
import InsuranceRecord from './components/InsuranceRecord'
import ApiLinks from './components/ApiLinks'
export default {
  name: 'aircraftDetail',
  components: {
    BasicInfo,
    MaintenanceRecord,
    InsuranceRecord,
    ApiLinks
  },
  data() {
    return {
      form: {
        name: '大疆',
        model: 'T100',
        type: '载人飞行',
        region: '北京',
        scenicArea: '白云山',
        manager: '小明',
        remarks: '设备状态良好',
        imageUrls: Array(6).fill('https://axure-file.lanhuapp.com/md5__f344f816278c2a3f5164e4571c580ad9.png')
      },
      maintenanceData: [],
      insuranceData: [],
      maintenancePage: {
        current: 1,
        size: 10,
        total: 0
      },
      insurancePage: {
        current: 1,
        size: 10,
        total: 0
      }
    }
  },
  computed: {
    ...mapGetters([
      'fileUploadApi',
      'baseApi'
    ])
  },
  created() {
    const id = this.$route.query.id
    if (id) {
      this.getDetail(id)
    }
    this.loadMaintenanceRecords()
    this.loadInsuranceRecords()
  },
  methods: {
    getDetail(id) {
      console.log('获取详情:', id)
      // this.loadInsuranceRecords()
    },
    async loadInsuranceRecords() {
      try {
        const params = {
          aircraftId: this.$route.query.id || 0,// 0只是暂时测试用
          current: this.insurancePage.current,
          size: this.insurancePage.size
        }
        const response = await getInsuranceRecords(params)
        console.log('保险记录:', response)
        this.insuranceData = response.records
        this.insurancePage.total = response.total
      } catch (error) {
        console.error('Failed to load insurance records:', error)
        this.$message.error('获取保险记录失败')
      }
    },
    async loadMaintenanceRecords() {
      try {
        const params = {
          aircraftId: this.$route.query.id,
          current: this.maintenancePage.current,
          size: this.maintenancePage.size
        }
        const response = await getMaintenanceRecords(params)
        this.maintenanceData = response.records
        this.maintenancePage.total = response.total
      } catch (error) {
        console.error('Failed to load maintenance records:', error)
        this.$message.error('获取维护记录失败')
      }
    },
    handleMaintenanceSizeChange(val) {
      this.maintenancePage.size = val
      this.loadMaintenanceRecords()
    },
    handleMaintenanceCurrentChange(val) {
      this.maintenancePage.current = val
      this.loadMaintenanceRecords()
    },
    handleInsuranceSizeChange(val) {
      this.insurancePage.size = val
      this.loadInsuranceRecords()
    },
    handleInsuranceCurrentChange(val) {
      this.insurancePage.current = val
      this.loadInsuranceRecords()
    },
    handleInsuranceView(row) {
      console.log('查看保险详情:', row)
    },
    handleInsuranceEdit(row) {
      this.handleAdd()
      this.dialogTitle = '编辑保险'
      this.form = {
        name: row.name,
        insuranceType: row.insuranceType,
        deadlineTime: row.deadlineTime ? row.deadlineTime.split('T')[0] : '',
        files: row.insuranceAttachment ? row.insuranceAttachment.map(attachment => ({
          name: attachment.sourceFileName,
          url: attachment.fileFullPath
        })) : []
      }
    },
    handleInsuranceDelete(row) {
      console.log('删除保险记录:', row)
    },
    handleInsuranceSubmit(form) {
      console.log('保存保险记录:', {
        ...form,
        aircraftId: this.$route.query.id
      })
      this.$message.success('保存成功')
      this.loadInsuranceRecords()
    },
    handleApiClick(type) {
      console.log('跳转到API模块:', type)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 0;
  margin-bottom: 33px;
}
</style>