feat:空域录入完善，增删改查

shuishen

2025-09-12 ea6e49ccb4d3bdb510ccf87844490823a96ebf08

 src/views/airspace/airspaceEntering.vue

@@ -1,9 +1,9 @@
<template>
  <basic-container>
    <avue-crud :option="option" :table-loading="loading" :data="data" v-model:page="page" :permission="permissionList"
      v-model="form" ref="crud" @row-update="rowUpdate" @row-save="rowSave" @row-del="rowDel" :before-open="beforeOpen"
      @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
      @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
      v-model="form" ref="crud" @row-update="rowUpdate" @row-save="rowSave" :before-open="beforeOpen"
      @search-change="searchChange" @search-reset="searchReset" @current-change="currentChange"
      @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
      <template #menu-left>
        <el-button type="primary" icon="el-icon-plus" @click="addAirspace">新增空域</el-button>
      </template>
@@ -14,10 +14,16 @@
      <template #category="{ row }">
        <el-tag>{{ row.categoryName }}</el-tag>
      </template>

      <template #menu="{ row }">
        <el-button type="text" icon="el-icon-edit" @click="handleEdit(row)">编辑</el-button>
        <el-button type="text" icon="el-icon-delete" @click="rowDel(row)">删除</el-button>
      </template>
    </avue-crud>
  </basic-container>

  <AirspaceMap v-model:show="airspaceMapShow" @submitClick="searchReset" />
  <AirspaceMap :title="dialogTitle" :type="dialogType" :curEditRow="curEditRow" v-model:show="airspaceMapShow"
    @submitClick="searchReset" />
</template>

<script setup>
@@ -28,6 +34,12 @@
  editSpotTypeApi,
  deleteSpotTypeApi,
} from '@/api/patchManagement/index'

import {
  airspaceEnteringPage,
  airspaceEnteringDel
} from '@/api/airspace/airspace'

import { ref, computed, watch } from 'vue'
import { enable, disable } from '@/api/resource/oss'
import { useStore } from 'vuex'
@@ -46,22 +58,21 @@
  pageSize: 10,
  currentPage: 1,
  total: 0,
  lotValue: '',
  userName: '',
})
const selectionList = ref([])

const option = ref({
  addBtn: false,
  editBtn: false,
  delBtn: false,
  tip: false,
  searchShow: true,
  searchMenuSpan: 8,
  searchMenuSpan: 16,
  searchMenuPosition: 'right',
  border: true,
  index: true,
  indexLabel: '序号',
  indexWidth: 60,
  selection: true,
  selection: false,
  grid: false,
  menuWidth: 180,
  labelWidth: 100,
@@ -73,10 +84,11 @@
  gridBtn: false,
  searchShowBtn: false,
  columnBtn: false,
  align: 'center',
  column: [
    {
      label: '名称',
      prop: 'patches_type',
      prop: 'name',
      search: true,
      searchSpan: 4,
      searchLabelWidth: 54,
@@ -84,12 +96,15 @@
    },
    {
      label: '类型',
      prop: 'patches_type',
      prop: 'flight_type',
      type: 'select',
      dicUrl: `/blade-system/dict/dictionary?code=flow`,
      dicUrl: `/drone-device-core/airspace/page?current=1&size=10000&typeName=`,
      props: {
        label: 'dictValue',
        value: 'dictKey',
        label: 'type_name',
        value: 'id',
      },
      dicFormatter (res) {
        return res.data.records
      },
      search: true,
      searchSpan: 4,
@@ -98,34 +113,31 @@
    },
    {
      label: '高度',
      prop: 'patches_type',
      prop: 'height',
      rules: [{ required: true, message: '请输入高度', trigger: 'blur' }],
    },
    {
      label: '面积',
      prop: 'patches_type',
      label: '面积(㎡)',
      prop: 'area',
      rules: [{ required: true, message: '请输入面积', trigger: 'blur' }],
    },
    {
      label: '管控时段',
      prop: 'daterange',
      prop: 'time_period',
      type: 'daterange',
      format: 'YYYY-MM-DD',
      valueFormat: 'YYYY-MM-DD',
      startPlaceholder: '开始日期',
      endPlaceholder: '结束日期',
      search: true,
      searchSpan: 8,
      searchRange: true,
    },
    {
      label: '创建人',
      prop: 'patches_type',
      prop: 'nick_name',
      rules: [{ required: true, message: '请输入创建人', trigger: 'blur' }],
    },
    {
      label: '创建时间',
      prop: 'patches_type',
      prop: 'create_time',
      rules: [{ required: true, message: '请输入创建时间', trigger: 'blur' }],
    },
  ],
@@ -170,15 +182,23 @@
  editBtn: validData(permission.value.oss_edit),
}))

const ids = computed(() => {
  return selectionList.value.map(ele => ele.id).join(',')
})

const airspaceMapShow = ref(false)
const curEditRow = ref({})
const dialogTitle = ref('新增空域')
const dialogType = ref('add')

// ---------------- methods ----------------
const addAirspace = () => {
  form.value = {}
  dialogTitle.value = '新增空域'
  dialogType.value = 'add'
  airspaceMapShow.value = true
}

const handleEdit = (row) => {
  curEditRow.value = row
  dialogTitle.value = '编辑空域'
  dialogType.value = 'edit'
  airspaceMapShow.value = true
}

@@ -219,16 +239,14 @@
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => deleteSpotTypeApi([row.id]))
    .then(() => airspaceEnteringDel(row.id))
    .then(() => {
      onLoad(page.value)
      ElMessage.success('操作成功!')
      onLoad(page.value)
    })
}

const searchReset = () => {
  page.value.userName = ''
  page.value.lotValue = ''
  page.value.currentPage = 1
  page.value.pageSize = 10
  onLoad(page.value)
@@ -236,19 +254,8 @@

const searchChange = (params, done) => {
  page.value.currentPage = 1
  page.value.lotValue = params.patches_type
  page.value.userName = params.user_name
  onLoad(page.value)
  onLoad(page.value, params)
  done()
}

const selectionChange = list => {
  // selectionList.value = list
}

const selectionClear = () => {
  selectionList.value = []
  // crudRef.value.toggleSelection()
}

const handleEnable = row => {
@@ -300,19 +307,20 @@
}

const onLoad = (pageParam, params = {}) => {
  const searchparams = {
  loading.value = true
  airspaceEnteringPage({
    current: pageParam.currentPage,
    size: pageParam.pageSize,
    lotValue: pageParam.lotValue,
    userName: pageParam.userName,
  }
  loading.value = true
  listOfSpotTypesApi(searchparams).then(res => {
    name: params.name || '',
    flightType: params.flight_type || '',
  }).then(res => {
    const resData = res.data.data
    page.value.total = resData.total
    data.value = resData.records
    data.value = resData.records.map(item => ({
      ...item,
      time_period: item.time_period.split('~'),
    }))
    loading.value = false
    selectionClear()
  })
}