飞行器设备接口问题修复,涉及的飞行员,景区,区域均接入接口

2025-07-23 15:33:43 +08:00 · 2025-07-23 15:33:43 +08:00 · d671fecf5b
commit d671fecf5b
parent 465960a281
6 changed files with 508 additions and 262 deletions
--- 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 }
--- 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 }

--- 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%;
--- 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,
--- 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) {
--- 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>