From d671fecf5b7340525b03d7ec0503dd5c75a42f9d Mon Sep 17 00:00:00 2001
From: hr121 <568127468@qq.com>
Date: Wed, 23 Jul 2025 15:33:43 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A3=9E=E8=A1=8C=E5=99=A8=E8=AE=BE=E5=A4=87?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D,?=
 =?UTF-8?q?=E6=B6=89=E5=8F=8A=E7=9A=84=E9=A3=9E=E8=A1=8C=E5=91=98,?=
 =?UTF-8?q?=E6=99=AF=E5=8C=BA,=E5=8C=BA=E5=9F=9F=E5=9D=87=E6=8E=A5?=
 =?UTF-8?q?=E5=85=A5=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/aircraft.js                           |  10 +-
 src/api/system/pilot.js                       |  20 +-
 .../aircraftDetail/components/BasicInfo.vue   |  45 +-
 .../components/InsuranceRecord.vue            |   9 +-
 src/views/aircraft/aircraftDetail/index.vue   |  57 +-
 src/views/aircraft/index.vue                  | 629 ++++++++++++------
 6 files changed, 508 insertions(+), 262 deletions(-)

diff --git a/src/api/aircraft.js b/src/api/aircraft.js
index 605e086..3989119 100644
--- a/src/api/aircraft.js
+++ b/src/api/aircraft.js
@@ -35,6 +35,14 @@ export function edit(data) {
   })
 }
 
+// 获取飞行器设备详情
+export function getDeviceDetail(id) {
+  return request({
+    url: `aerocraftAdminApi/aircraft/device/${id}`,
+    method: 'get'
+  })
+}
+
 // 分页查询飞行器维保记录
 export function getMaintenanceRecords(params) {
   return request({
@@ -87,4 +95,4 @@ export function editInsurance(data) {
   })
 }
 
-export default { get, del, add, edit, getMaintenanceRecords, getInsuranceRecords, addInsurance, getInsuranceDetail, deleteInsurance, editInsurance }
+export default { get, del, add, edit, getMaintenanceRecords, getInsuranceRecords, addInsurance, getInsuranceDetail, deleteInsurance, editInsurance, getDeviceDetail }
diff --git a/src/api/system/pilot.js b/src/api/system/pilot.js
index fe0f276..5d78a71 100644
--- a/src/api/system/pilot.js
+++ b/src/api/system/pilot.js
@@ -4,7 +4,7 @@ import { encrypt } from '@/utils/rsaEncrypt'
 export function add(data) {
   data.password = encrypt(data.password)
   console.log(data);
-  
+
   return request({
     url: 'api/emEmployees',
     method: 'post',
@@ -41,5 +41,21 @@ export function updatePass(user) {
   })
 }
 
-export default { add, edit, del }
+// 查询飞行员，飞行器管理要用到
+export function getList(params) {
+  return request({
+    url: 'api/emEmployees/findByPage',
+    method: 'get',
+    params
+  })
+}
+
+export function getDetail(id) {
+  return request({
+    url: `api/emEmployees/${id}`,
+    method: 'get'
+  })
+}
+
+export default { add, edit, del, getList, getDetail }
 
diff --git a/src/views/aircraft/aircraftDetail/components/BasicInfo.vue b/src/views/aircraft/aircraftDetail/components/BasicInfo.vue
index 6bb8a43..783479c 100644
--- a/src/views/aircraft/aircraftDetail/components/BasicInfo.vue
+++ b/src/views/aircraft/aircraftDetail/components/BasicInfo.vue
@@ -1,7 +1,7 @@
 <template>
   <el-card class="box-card">
     <div slot="header" class="clearfix">
-      <span style="color: #027db4;">飞行器基本信息</span>
+      <span style="color: #027db4">飞行器基本信息</span>
     </div>
     <el-form :model="form" label-width="100px" class="detail-form">
       <el-row :gutter="20">
@@ -17,31 +17,31 @@
         </el-col>
         <el-col :span="8">
           <el-form-item label="类型">
-            <el-input v-model="form.type" disabled />
+            <el-input v-model="form.useType" disabled />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="8">
           <el-form-item label="区域">
-            <el-input v-model="form.region" disabled />
+            <el-input v-model="form.areaName" disabled />
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="景区">
-            <el-input v-model="form.scenicArea" disabled />
+            <el-input v-model="form.scenicName" disabled />
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="负责人">
-            <el-input v-model="form.manager" disabled />
+            <el-input v-model="form.username" disabled />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row>
         <el-col :span="8">
           <el-form-item label="备注">
-            <el-input type="textarea" v-model="form.remarks" disabled />
+            <el-input type="textarea" v-model="form.remark" disabled />
           </el-form-item>
         </el-col>
       </el-row>
@@ -49,8 +49,13 @@
         <el-col :span="24">
           <el-form-item label="无人机图片">
             <div class="image-preview">
-              <div v-for="(url, index) in form.imageUrls" :key="index" class="image-item" @click="handlePreview(url)">
-                <img :src="url" class="preview-image">
+              <div
+                v-for="image in form.deviceImages"
+                :key="image.id"
+                class="image-item"
+                @click="handlePreview(image.fileFullPath || image)"
+              >
+                <img :src="image.fileFullPath || image" class="preview-image" />
               </div>
             </div>
           </el-form-item>
@@ -60,33 +65,33 @@
 
     <!-- 图片预览 -->
     <el-dialog :visible.sync="previewVisible" append-to-body>
-      <img :src="previewUrl" alt="Preview" style="width: 100%">
+      <img :src="previewUrl" alt="Preview" style="width: 100%" />
     </el-dialog>
   </el-card>
 </template>
 
 <script>
 export default {
-  name: 'BasicInfo',
+  name: "BasicInfo",
   props: {
     form: {
       type: Object,
-      required: true
-    }
+      required: true,
+    },
   },
   data() {
     return {
       previewVisible: false,
-      previewUrl: ''
-    }
+      previewUrl: "",
+    };
   },
   methods: {
     handlePreview(url) {
-      this.previewUrl = url
-      this.previewVisible = true
-    }
-  }
-}
+      this.previewUrl = url;
+      this.previewVisible = true;
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -115,7 +120,7 @@ export default {
     border-radius: 4px;
     overflow: hidden;
     &:hover {
-      border-color: #409EFF;
+      border-color: #409eff;
     }
     .preview-image {
       width: 100%;
diff --git a/src/views/aircraft/aircraftDetail/components/InsuranceRecord.vue b/src/views/aircraft/aircraftDetail/components/InsuranceRecord.vue
index 35e6092..1c1e1ca 100644
--- a/src/views/aircraft/aircraftDetail/components/InsuranceRecord.vue
+++ b/src/views/aircraft/aircraftDetail/components/InsuranceRecord.vue
@@ -140,13 +140,13 @@ export default {
       required: true,
     },
     aircraftId: {
-      type: [String, Number],
+      type: String,
       required: true
     }
   },
   computed: {
     ...mapGetters([
-      'fileUploadApi'
+      's3UploadApi'
     ])
   },
   data() {
@@ -288,7 +288,7 @@ export default {
 
       this.loading = true;
       try {
-        const res = await upload(this.fileUploadApi, file.raw);
+        const res = await upload(this.s3UploadApi, file.raw);
         if (res.status === 200) {
           const data = res.data;
           // 更新文件列表显示
@@ -302,7 +302,6 @@ export default {
             fileFullPath: data.fileFullPath || `/file/${data.newFileName}`,
             fileSize: file.raw.size,
             fileType: file.raw.name.split('.').pop(),
-            id: 0,
             newFileName: data.newFileName,
             sourceFileName: file.raw.name
           });
@@ -341,7 +340,7 @@ export default {
         if (valid) {
           try {
             const baseData = {
-              aircraftId: this.aircraftId || 0, // 设置为0是测试使用
+              aircraftId: this.aircraftId,
               name: this.form.name,
               insuranceType: this.form.insuranceType,
               deadlineTime: this.form.deadlineTime,
diff --git a/src/views/aircraft/aircraftDetail/index.vue b/src/views/aircraft/aircraftDetail/index.vue
index ff6e363..90dd8e8 100644
--- a/src/views/aircraft/aircraftDetail/index.vue
+++ b/src/views/aircraft/aircraftDetail/index.vue
@@ -15,7 +15,7 @@
     <insurance-record
       :data="insuranceData"
       :page="insurancePage"
-      :aircraft-id="Number($route.query.id)"
+      :aircraft-id="String($route.query.id)"
       @size-change="handleInsuranceSizeChange"
       @current-change="handleInsuranceCurrentChange"
       @view="handleInsuranceView"
@@ -31,7 +31,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import { getMaintenanceRecords, getInsuranceRecords } from '@/api/aircraft'
+import { getDeviceDetail, getMaintenanceRecords, getInsuranceRecords } from '@/api/aircraft'
 import BasicInfo from './components/BasicInfo'
 import MaintenanceRecord from './components/MaintenanceRecord'
 import InsuranceRecord from './components/InsuranceRecord'
@@ -49,12 +49,14 @@ export default {
       form: {
         name: '大疆',
         model: 'T100',
-        type: '载人飞行',
-        region: '北京',
-        scenicArea: '白云山',
-        manager: '小明',
-        remarks: '设备状态良好',
-        imageUrls: Array(6).fill('https://axure-file.lanhuapp.com/md5__f344f816278c2a3f5164e4571c580ad9.png')
+        useType: '载人飞行',
+        areaName: '北京',
+        scenicName: '白云山',
+        username: '小明',
+        remark: '设备状态良好',
+        deviceImages: [
+          'https://axure-file.lanhuapp.com/md5__f344f816278c2a3f5164e4571c580ad9.png'
+        ]
       },
       maintenanceData: [],
       insuranceData: [],
@@ -72,32 +74,57 @@ export default {
   },
   computed: {
     ...mapGetters([
-      'fileUploadApi',
+      's3UploadApi',
       'baseApi'
     ])
   },
   created() {
     const id = this.$route.query.id
-    if (id) {
+    const rowData = this.$route.query.data ? JSON.parse(this.$route.query.data) : null
+    if (rowData) {
+      this.getDetail(id, rowData)
+    }else {
       this.getDetail(id)
     }
     this.loadMaintenanceRecords()
     this.loadInsuranceRecords()
   },
   methods: {
-    getDetail(id) {
-      console.log('获取详情:', id)
-      // this.loadInsuranceRecords()
+    getDetail(id, rowData = null) {
+      getDeviceDetail(id).then(response => {
+        this.form = response
+        if (rowData) {
+          this.form.areaName = rowData.areaName
+          this.form.scenicName = rowData.scenicName
+          this.form.username = rowData.username
+        }
+        this.form.useType = this.form.useType === 0 ? '载物飞行' : this.form.useType === 1 ? '载人飞行' : '其他'
+        // 确保设备图片数据格式统一
+        this.form.deviceImages = this.form.deviceImages.map((image, index) => {
+          if (typeof image === 'string') {
+            return {
+              id: String(index),
+              fileFullPath: image
+            }
+          }
+          return {
+            ...image,
+            id: String(image.id || index)
+          }
+        });
+      }).catch(error => {
+        console.error('获取设备详情失败:', error)
+        this.$message.error('获取设备详情失败')
+      })
     },
     async loadInsuranceRecords() {
       try {
         const params = {
-          aircraftId: this.$route.query.id || 0,// 0只是暂时测试用
+          aircraftId: this.$route.query.id,
           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) {
diff --git a/src/views/aircraft/index.vue b/src/views/aircraft/index.vue
index 428b5d9..d7ae6d1 100644
--- a/src/views/aircraft/index.vue
+++ b/src/views/aircraft/index.vue
@@ -3,61 +3,125 @@
     <!--工具栏-->
     <div class="head-container">
       <div class="filter-container">
-        <el-input v-model="query.name" clearable size="small" placeholder="请输入飞行器名称" style="width: 200px;" class="filter-item" />
-        <el-select v-model="query.employeesId" placeholder="请选择负责人" clearable size="small" style="width: 200px" class="filter-item">
-          <el-option v-for="employee in employeeOptions"
+        <el-input
+          v-model="query.name"
+          clearable
+          size="small"
+          placeholder="请输入飞行器名称"
+          style="width: 200px"
+          class="filter-item"
+        />
+        <el-select
+          v-model="query.employeesId"
+          placeholder="请选择负责人"
+          clearable
+          size="small"
+          style="width: 200px"
+          class="filter-item"
+        >
+          <el-option
+            v-for="employee in employeeOptions"
             :key="employee.id"
             :label="employee.name"
-            :value="employee.id" />
+            :value="employee.id"
+          />
         </el-select>
-        <el-select v-model="query.areaId" placeholder="请选择区域" clearable size="small" style="width: 200px" class="filter-item">
-          <el-option v-for="area in areaOptions"
+        <el-select
+          v-model="query.areaId"
+          placeholder="请选择区域"
+          size="small"
+          style="width: 200px"
+          class="filter-item"
+        >
+          <el-option
+            v-for="area in areaOptions"
             :key="area.id"
             :label="area.name"
-            :value="area.id" />
+            :value="area.id"
+          />
         </el-select>
-        <el-button class="filter-item" size="small" type="primary" icon="el-icon-search" @click="crud.toQuery">查询</el-button>
-        <el-button v-permission="permission.add" class="filter-item" size="small" type="success" icon="el-icon-plus" @click="crud.toAdd" v-if="checkPer(permission.add)">新增飞行器</el-button>
+        <el-button
+          class="filter-item"
+          size="small"
+          type="primary"
+          icon="el-icon-search"
+          @click="crud.toQuery"
+          >查询</el-button
+        >
+        <el-button
+          v-permission="permission.add"
+          class="filter-item"
+          size="small"
+          type="success"
+          icon="el-icon-plus"
+          @click="crud.toAdd"
+          v-if="checkPer(permission.add)"
+          >新增飞行器</el-button
+        >
       </div>
     </div>
     <!--表单渲染-->
-    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="580px">
-      <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="100px">
+    <el-dialog
+      append-to-body
+      :close-on-click-modal="false"
+      :before-close="crud.cancelCU"
+      :visible.sync="crud.status.cu > 0"
+      :title="crud.status.title"
+      width="580px"
+    >
+      <el-form
+        ref="form"
+        :inline="true"
+        :model="form"
+        :rules="rules"
+        size="small"
+        label-width="100px"
+      >
         <el-form-item label="飞行器名称" prop="name">
-          <el-input v-model="form.name" style="width: 150px;" />
+          <el-input v-model="form.name" style="width: 150px" />
         </el-form-item>
         <el-form-item label="型号" prop="model">
-          <el-input v-model="form.model" style="width: 150px;" />
+          <el-input v-model="form.model" style="width: 150px" />
         </el-form-item>
         <el-form-item label="类型" prop="useType">
-          <el-select v-model="form.useType" style="width: 150px;">
+          <el-select v-model="form.useType" style="width: 150px">
             <el-option :value="0" label="载物飞行" />
             <el-option :value="1" label="载人飞行" />
             <el-option :value="2" label="其他" />
           </el-select>
         </el-form-item>
         <el-form-item label="区域" prop="areaId">
-          <el-select v-model="form.areaId" style="width: 150px;">
-            <el-option v-for="area in areaOptions"
+          <el-select
+            v-model="form.areaId"
+            @change="changeArea"
+            style="width: 150px"
+          >
+            <el-option
+              v-for="area in areaOptions"
               :key="area.id"
               :label="area.name"
-              :value="area.id" />
+              :value="area.id"
+            />
           </el-select>
         </el-form-item>
         <el-form-item label="景区" prop="scenicId">
-          <el-select v-model="form.scenicId" style="width: 150px;">
-            <el-option v-for="scenic in scenicOptions"
+          <el-select v-model="form.scenicId" style="width: 150px">
+            <el-option
+              v-for="scenic in scenicOptions"
               :key="scenic.id"
               :label="scenic.name"
-              :value="scenic.id" />
+              :value="scenic.id"
+            />
           </el-select>
         </el-form-item>
-        <el-form-item label="角色" prop="employeesId">
-          <el-select v-model="form.employeesId" style="width: 150px;">
-            <el-option v-for="employee in employeeOptions"
+        <el-form-item label="负责人" prop="employeesId">
+          <el-select v-model="form.employeesId" style="width: 150px">
+            <el-option
+              v-for="employee in employeeOptions"
               :key="employee.id"
               :label="employee.name"
-              :value="employee.id" />
+              :value="employee.id"
+            />
           </el-select>
         </el-form-item>
         <el-form-item label="备注" prop="remarks" :label-width="'100px'">
@@ -66,41 +130,73 @@
             :rows="2"
             placeholder="请输入备注"
             v-model="form.remarks"
-            style="width: 150px;">
+            style="width: 150px"
+          >
           </el-input>
         </el-form-item>
-        <el-form-item label="设备图片" prop="deviceImages" style="width: 100%;">
+        <el-form-item label="设备图片" prop="deviceImages" style="width: 100%">
           <div class="upload-container">
-            <el-upload ref="uploadRef" action="#" list-type="picture-card"
-                :show-file-list="false" :on-change="handleChange" :auto-upload="false" accept="image/*"
-                :class="{ 'upload-item': true }">
-                <div style="display: flex;flex-direction: column;align-items: center;justify-content: center;margin-top: -20px;">
-                    <i class="el-icon-plus" style="font-size: 30px;" />
-                    <span style="margin: 5px 0 -20px;line-height: 20px">上传</span>
-                </div>
+            <el-upload
+              ref="uploadRef"
+              action="#"
+              list-type="picture-card"
+              :show-file-list="false"
+              :on-change="handleChange"
+              :auto-upload="false"
+              accept="image/*"
+              :class="{ 'upload-item': true }"
+            >
+              <div
+                style="
+                  display: flex;
+                  flex-direction: column;
+                  align-items: center;
+                  justify-content: center;
+                  margin-top: -20px;
+                "
+              >
+                <i class="el-icon-plus" style="font-size: 30px" />
+                <span style="margin: 5px 0 -20px; line-height: 20px">上传</span>
+              </div>
             </el-upload>
-            <div v-for="(image, index) in form.deviceImages" :key="index" class="preview-item">
-                <img :src="image.fileFullPath" class="preview-image" alt="">
-                <span class="preview-actions">
-                    <span class="preview-action" @click="handlePictureCardPreview(image.fileFullPath)">
-                        <i class="el-icon-zoom-in" />
-                    </span>
-                    <span class="preview-action" @click="handleRemoveImage(index)">
-                        <i class="el-icon-delete" />
-                    </span>
+            <div
+              v-for="(image, index) in form.deviceImages"
+              :key="index"
+              class="preview-item"
+            >
+              <img :src="image.fileFullPath" class="preview-image" alt="" />
+              <span class="preview-actions">
+                <span
+                  class="preview-action"
+                  @click="handlePictureCardPreview(image.fileFullPath)"
+                >
+                  <i class="el-icon-zoom-in" />
                 </span>
+                <span class="preview-action" @click="handleRemoveImage(index)">
+                  <i class="el-icon-delete" />
+                </span>
+              </span>
             </div>
           </div>
           <el-dialog append-to-body :visible.sync="dialogVisible" top="20vh">
-              <div>
-                  <img :src="dialogImageUrl" style="width: 100%" alt="Preview Image">
-              </div>
+            <div>
+              <img
+                :src="dialogImageUrl"
+                style="width: 100%"
+                alt="Preview Image"
+              />
+            </div>
           </el-dialog>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="text" @click="crud.cancelCU">取消</el-button>
-        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
+        <el-button
+          :loading="crud.status.cu === 2"
+          type="primary"
+          @click="crud.submitCU"
+          >确认</el-button
+        >
       </div>
     </el-dialog>
     <!--表格渲染-->
@@ -118,20 +214,22 @@
       <el-table-column label="型号" prop="model" />
       <el-table-column label="类型" prop="useType">
         <template slot-scope="scope">
-          {{ scope.row.useType === 0 ? '载物' : scope.row.useType === 1 ? '载人' : '其他' }}
+          {{
+            scope.row.useType === 0
+              ? "载物行动"
+              : scope.row.useType === 1
+              ? "载人行动"
+              : "其他"
+          }}
         </template>
       </el-table-column>
-      <el-table-column label="负责人" prop="employeeName" />
+      <el-table-column label="负责人" prop="username" />
       <el-table-column label="区域" prop="areaName" />
       <el-table-column label="景区" prop="scenicName" />
       <el-table-column label="创建时间" prop="createTime" width="180" />
       <el-table-column label="操作" width="150" align="center" fixed="right">
         <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            @click="handleView(scope.row)"
-          >
+          <el-button size="mini" type="text" @click="handleView(scope.row)">
             查看
           </el-button>
           <el-button
@@ -172,18 +270,18 @@
 </template>
 
 <script>
-import CRUD, { presenter, header, form, crud } from '@crud/crud'
-import udOperation from '@crud/UD.operation'
-import crudAircraft from '@/api/aircraft'
-import { allAreas } from '@/api/system/area'
-import { getAll } from '@/api/system/role'
-import { allScenic } from '@/api/system/scenic'
-import { upload } from '@/utils/upload'
-import { mapGetters } from 'vuex'
-import rrOperation from '@crud/RR.operation'
+import CRUD, { presenter, header, form, crud } from "@crud/crud";
+import udOperation from "@crud/UD.operation";
+import crudAircraft from "@/api/aircraft";
+import { allAreas } from "@/api/system/area";
+import { getList, getDetail } from "@/api/system/pilot";
+import { allScenic } from "@/api/system/scenic";
+import { upload } from "@/utils/upload";
+import { mapGetters } from "vuex";
+import rrOperation from "@crud/RR.operation";
 // crud交由presenter持有
 const defaultForm = {
-  id: 0,
+  id: 1,
   name: null,
   brand: null,
   model: null,
@@ -192,268 +290,359 @@ const defaultForm = {
   scenicId: null,
   employeesId: null,
   deviceImages: [],
-  remark: '',
-  createTime: null
-}
+  remark: "",
+  createTime: null,
+};
 export default {
-  name: 'aircraft',
+  name: "aircraft",
   components: { udOperation },
   cruds() {
     return CRUD({
-      title: '飞行器',
-      url: 'aerocraftAdminApi/aircraft/device',
+      title: "飞行器",
+      url: "aerocraftAdminApi/aircraft/device/page",
       crudMethod: {
         ...crudAircraft,
-        getList: crudAircraft.getDevicePage
+        getList: crudAircraft.getDevicePage,
       },
       optShow: {
-        search: true
+        search: true,
       },
-      queryOnPresenterCreated: false,  // 禁止初始化时自动查询
+      queryOnPresenterCreated: true, // 启用初始化时自动查询
+      page: {
+        // 配置分页参数名称
+        page: "current",
+        size: "size",
+      },
+      // 配置查询参数
       query: {
-        current: 1,
-        size: 10,
         employeesId: undefined,
         areaId: undefined,
-        name: undefined
-      }
-    })
+        name: undefined,
+      },
+      initData: (crud, data) => {
+        crud.page.total = data.total;
+        // 确保每条记录的id是字符串类型
+        const records = data.records || [];
+        crud.data = records.map(item => ({
+          ...item,
+          id: item.id ? item.id.toString() : ''
+        }));
+        // username字段需要通过getList()获取
+        crud.data.forEach((item) => {
+          if (item.employeesId) {
+            getList().then((res) => {
+              res.content.forEach((employee) => {
+                if (employee.id === item.employeesId) {
+                  item.username = employee.username;
+                }
+              });
+            });
+          } else {
+            item.username = "未知";
+          }
+        });
+      },
+    });
   },
   mixins: [presenter(), header(), form(defaultForm), crud()],
   data() {
     return {
       dialogVisible: false,
-      dialogImageUrl: '',
+      dialogImageUrl: "",
       uploadDisabled: false,
       // ini
       page: {
         page: 1,
         size: 10,
-        total: 5
+        total: 5,
       },
       areaOptions: [],
       scenicOptions: [],
       employeeOptions: [],
       // 默认数据
       query: {
-        name: '',
+        name: "",
         employeesId: undefined,
         areaId: undefined,
         current: 1,
-        size: 10
+        size: 10,
       },
-      defaultData: [{
-        id: 1,
-        name: '无人机01',
-        brand: 'DJI',
-        model: 'Mavic Air 2',
-        useType: 0,
-        employeesId: 1,
-        employeeName: '张三',
-        areaId: 1,
-        areaName: '北京',
-        scenicId: 1,
-        scenicName: '故宫',
-        createTime: '2025-07-17 08:50:08',
-        deviceImages: [{
-          fileFullPath: 'https://example.com/image1.jpg',
-          fileSize: 102400,
-          fileType: 'jpg',
-          id: 1,
-          newFileName: 'drone_20250717.jpg',
-          sourceFileName: 'DJI_0001.jpg'
-        }]
-      }],
+      defaultData: [],
       permission: {
-        add: ['admin', 'aircraft:add'],
-        edit: ['admin', 'aircraft:edit'],
-        del: ['admin', 'aircraft:del']
+        add: ["admin", "aircraft:add"],
+        edit: ["admin", "aircraft:edit"],
+        del: ["admin", "aircraft:del"],
       },
       rules: {
         name: [
-          { required: true, message: '请输入飞行器名称', trigger: 'blur' }
-        ],
-        brand: [
-          { required: true, message: '品牌不能为空', trigger: 'blur' }
-        ],
-        model: [
-          { required: true, message: '请输入型号', trigger: 'blur' }
-        ],
-        useType: [
-          { required: true, message: '请选择类型', trigger: 'change' }
-        ],
-        areaId: [
-          { required: true, message: '请选择区域', trigger: 'change' }
+          { required: true, message: "请输入飞行器名称", trigger: "blur" },
         ],
+        brand: [{ required: true, message: "品牌不能为空", trigger: "blur" }],
+        model: [{ required: true, message: "请输入型号", trigger: "blur" }],
+        useType: [{ required: true, message: "请选择类型", trigger: "change" }],
+        areaId: [{ required: true, message: "请选择区域", trigger: "change" }],
         scenicId: [
-          { required: true, message: '请选择景区', trigger: 'change' }
+          { required: true, message: "请选择景区", trigger: "change" },
         ],
         employeesId: [
-          { required: true, message: '请选择负责人', trigger: 'change' }
+          { required: true, message: "请选择负责人", trigger: "change" },
         ],
         deviceImages: [
-          { required: true, message: '请上传设备图片', trigger: 'change', type: 'array' }
-        ]
-      }
-    }
+          {
+            required: true,
+            message: "请上传设备图片",
+            trigger: "change",
+            type: "array",
+          },
+        ],
+      },
+    };
   },
   computed: {
-    ...mapGetters([
-      'imagesUploadApi',
-      'baseApi'
-    ])
+    ...mapGetters(["imagesUploadApi", "baseApi"]),
   },
   created() {
     // 获取区域列表
-    this.getAreas()
-    // 获取景区列表
-    this.getScenics()
+    this.getAreas();
     // 获取飞行员列表
-    this.getEmployees()
+    this.getEmployees();
   },
   methods: {
     // 获取区域列表
     async getAreas() {
       try {
-        const res = await allAreas()
+        const res = await allAreas();
         if (res) {
-          this.areaOptions = res
+          this.areaOptions = res.map((area) => ({
+            id: area.id,
+            name: area.name,
+          }));
         }
       } catch (error) {
-        this.$message.error('获取区域列表失败')
-        console.error('获取区域列表失败:', error)
-        this.areaOptions = []
+        this.$message.error("获取区域列表失败");
+        console.error("获取区域列表失败:", error);
+        this.areaOptions = [];
       }
     },
 
-    // 获取景区列表
-    async getScenics() {
-      try {
-        const res = await allScenic()
+    // 切换区域时获取景区列表
+    changeArea(value) {
+      // 清空景区选择
+      this.query.scenicId = undefined;
+      // 获取对应区域的景区列表
+      allScenic({ areaId: value }).then((res) => {
         if (res) {
-          this.scenicOptions = res
+          this.scenicOptions = (res || []).map((scenic) => ({
+            id: scenic.id,
+            name: scenic.name,
+          }));
+        } else {
+          this.scenicOptions = [];
         }
-      } catch (error) {
-        this.$message.error('获取景区列表失败')
-        console.error('获取景区列表失败:', error)
-        this.scenicOptions = []
-      }
+      });
     },
 
-    // 获取角色列表
+    // 获取负责人列表
     async getEmployees() {
       try {
-        const res = await getAll()
+        const res = await getList();
         if (res) {
-          this.employeeOptions = res
+          this.employeeOptions = res.content.map((employee) => ({
+            id: employee.id,
+            name: employee.username,
+          }));
         }
       } catch (error) {
-        this.$message.error('获取角色列表失败')
-        console.error('获取角色列表失败:', error)
-        this.employeeOptions = []
+        this.$message.error("获取负责人列表失败");
+        console.error("获取负责人列表失败:", error);
+        this.employeeOptions = [];
       }
     },
+
+    [CRUD.HOOK.beforeToEdit](crud, form) {
+      // 获取对应的景区列表
+      if (form.areaId) {
+        allScenic({ areaId: form.areaId }).then((res) => {
+          if (res) {
+            this.scenicOptions = (res || []).map((scenic) => ({
+              id: scenic.id,
+              name: scenic.name,
+            }));
+          } else {
+            this.scenicOptions = [];
+          }
+        });
+      } else {
+        this.scenicOptions = [];
+      }
+      // 获取对应的负责人列表
+      if (form.employeesId) {
+        getList().then((res) => {
+          if (res) {
+            this.employeeOptions = res.content.map((employee) => ({
+              id: employee.id,
+              name: employee.username,
+            }));
+          } else {
+            this.employeeOptions = [];
+          }
+        });
+      } else {
+        this.employeeOptions = [];
+      }
+    },
+
     [CRUD.HOOK.beforeSubmit]() {
       // 设置brand的值与name相同
-      this.form.brand = this.form.name
-      return true
+      this.form.brand = this.form.name;
+      return true;
     },
+
     [CRUD.HOOK.beforeRefresh]() {
-      // 检查是否选择了负责人
-      // if (!this.query.employeesId) {
-      //   this.$message.warning('请先选择负责人')
-      //   return false
-      // }
       // 设置分页参数
-      this.query.current = this.page.page
-      this.query.size = this.page.size
-      return true
+      this.crud.params.current = this.page.page;
+      this.crud.params.size = this.page.size;
+
+      // 设置查询参数
+      this.crud.params.employeesId = this.query.employeesId;
+      this.crud.params.areaId = this.query.areaId;
+      this.crud.params.name = this.query.name;
+      return true;
     },
+
     [CRUD.HOOK.afterRefresh]() {
       // 更新分页数据
-      if (this.crud.data.total) {
-        this.page.total = this.crud.data.total
-      }
-      // 将默认数据添加到表格数据中
-      if (Array.isArray(this.crud.data)) {
-        this.crud.data = [...this.defaultData, ...this.crud.data]
-        // 更新总数以包含默认数据
-        this.page.total += this.defaultData.length
-      } else if (this.crud.data && this.crud.data.records) {
-        this.crud.data.records = [...this.defaultData, ...this.crud.data.records]
-        // 更新总数以包含默认数据
-        this.page.total += this.defaultData.length
+      const response = this.crud.data;
+
+      if (response) {
+        // 确保有total字段
+        if (response.total !== undefined) {
+          this.page.total = response.total;
+        }
+        // 确保records数组存在且是数组类型
+        if (response && Array.isArray(response)) {
+          // 创建一个Promise数组来存储所有的详情请求
+          const detailPromises = response.map(item => {
+            if (!item || !item.id) return Promise.resolve(null);
+            const stringId = item.id.toString();
+            return crudAircraft.getDeviceDetail(stringId).then(res => {
+              if (!res) return null;
+              return {
+                ...item,
+                ...res,
+                id: stringId
+              };
+            });
+          });
+
+          // 等待所有详情请求完成后再更新数据
+          Promise.all(detailPromises).then(detailedData => {
+            // 过滤掉空值并确保每个项都有一个有效的字符串id
+            this.crud.data = detailedData.filter(item => item && item.id && typeof item.id === 'string');
+          }).catch(error => {
+            console.error('获取设备详情失败:', error);
+            this.$message.error('获取设备详情失败');
+          });
+        } else {
+          // 如果没有records字段或不是数组,设置为空数组避免报错
+          this.crud.data = [];
+        }
+      } else {
+        // 如果响应为空,也设置为空数组
+        this.crud.data = [];
+        this.page.total = 0;
       }
     },
+
     handleView(row) {
-      this.$router.push({ path: '/aircraft/aircraftDetail', query: { id: row.id }})
+      const tempRow = { areaName: row.areaName, scenicName: row.scenicName, username: row.username };
+      this.$router.push({
+        path: "/system/aircraftDetail/index",
+        query: {
+          id: row.id,
+          data: JSON.stringify(tempRow)
+        },
+      });
     },
+
+    // 预览图片
     handlePictureCardPreview(url) {
-      this.dialogImageUrl = url
-      this.dialogVisible = true
+      this.dialogImageUrl = url;
+      this.dialogVisible = true;
     },
+
     // 删除图片
     handleRemoveImage(index) {
-      this.form.deviceImages.splice(index, 1)
+      this.form.deviceImages.splice(index, 1);
     },
+
     // 触发图片上传
     handleChange(file, uploadFiles) {
-      if (file.raw.type.includes('image')) {
-        this.loading = true
+      if (file.raw.type.includes("image")) {
+        this.loading = true;
         try {
-          upload(this.imagesUploadApi, file.raw).then(res => {
-            if(res.status === 200){
+          upload(this.imagesUploadApi, file.raw).then((res) => {
+            if (res.status === 200) {
               const data = res.data;
               // 构造deviceImages对象
               const deviceImage = {
-                fileFullPath: this.baseApi + `/file/图片/` + data.newFileName,
+                fileFullPath: data.fileFullPath,
                 fileSize: file.raw.size,
-                fileType: file.raw.type.split('/')[1],
-                id: 0,
+                fileType: file.raw.type.split("/")[1],
                 newFileName: data.newFileName,
-                sourceFileName: file.raw.name
+                sourceFileName: file.raw.name,
               };
               // 将新图像添加到现有数组
               if (!this.form.deviceImages) {
                 this.form.deviceImages = [];
               }
               this.form.deviceImages.push(deviceImage);
-              this.$message.success('图片上传成功！')
+              this.$message.success("图片上传成功！");
               this.loading = false;
-            }else{
-              this.$message.error('图片上传失败！');
+            } else {
+              this.$message.error("图片上传失败！");
               this.loading = false;
               return;
             }
           });
         } catch (error) {
-          this.loading = false
-          this.$message.error('图片上传失败！')
+          this.loading = false;
+          this.$message.error("图片上传失败！");
         }
       } else {
-        this.$confirm('图片的格式不正确，请重新选择！', '提示', {
-          confirmButtonText: '确定',
-          type: 'warning'
-        })
-        uploadFiles.pop()
+        this.$confirm("图片的格式不正确，请重新选择！", "提示", {
+          confirmButtonText: "确定",
+          type: "warning",
+        });
+        uploadFiles.pop();
       }
     },
+
     handleDelete(row) {
-      this.$confirm(`此操作将永久删除飞行器"${row.name}"，是否继续？`, '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.crud.toDelete(row.id)
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: '已取消删除'
-        })
+      this.$confirm(`此操作将永久删除飞行器"${row.name}"，是否继续？`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
       })
-    }
-  }
-}
+        .then(() => {
+          crudAircraft.del(row.id).then(() => {
+            this.$notify({
+              title: "成功",
+              type: "success",
+              message: "删除成功!",
+            });
+            this.crud.refresh();
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+  },
+};
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
@@ -537,11 +726,13 @@ export default {
 .app-container {
   padding-bottom: 60px;
 }
- ::v-deep .el-input-number .el-input__inner {
-    text-align: left;
-  }
- ::v-deep .vue-treeselect__control,::v-deep .vue-treeselect__placeholder,::v-deep .vue-treeselect__single-value {
-    height: 30px;
-    line-height: 30px;
-  }
+::v-deep .el-input-number .el-input__inner {
+  text-align: left;
+}
+::v-deep .vue-treeselect__control,
+::v-deep .vue-treeselect__placeholder,
+::v-deep .vue-treeselect__single-value {
+  height: 30px;
+  line-height: 30px;
+}
 </style>