Industrial-image-management-system---web/src/views/construction-operation-platform/airport-management/index.vue

<template>
  <div class="airport-management">
    <div class="page-header">
      <a-card class="general-card" title="机场管理">
        <template #extra>
          <a-button type="primary" @click="handleAdd">
            <template #icon>
              <icon-plus />
            </template>
            新建机场
          </a-button>
        </template>
        <a-row :gutter="16" style="margin-bottom: 16px">
          <a-col :span="6">
            <a-input-search 
              v-model="searchForm.name" 
              placeholder="请输入机场名称" 
              @search="search"
              allow-clear
            />
          </a-col>
          <a-col :span="6">
            <a-select 
              v-model="searchForm.status" 
              placeholder="请选择状态"
              allow-clear
              style="width: 100%"
            >
              <a-option value="1">运营中</a-option>
              <a-option value="0">停运</a-option>
            </a-select>
          </a-col>
          <a-col :span="6">
            <a-button type="primary" @click="search">
              <template #icon>
                <icon-search />
              </template>
              查询
            </a-button>
            <a-button style="margin-left: 8px" @click="reset">
              <template #icon>
                <icon-refresh />
              </template>
              重置
            </a-button>
          </a-col>
        </a-row>
      </a-card>
    </div>

    <div class="page-content">
      <a-card class="general-card">
        <a-table 
          :columns="columns" 
          :data="tableData" 
          :loading="loading"
          :pagination="pagination"
          @page-change="handlePageChange"
          @page-size-change="handlePageSizeChange"
        >
          <template #status="{ record }">
            <a-tag :color="record.status === '1' ? 'green' : 'red'">
              {{ record.status === '1' ? '运营中' : '停运' }}
            </a-tag>
          </template>
          <template #actions="{ record }">
            <a-button type="text" size="small" @click="handleEdit(record)">
              编辑
            </a-button>
            <a-button type="text" size="small" @click="handleView(record)">
              查看详情
            </a-button>
            <a-popconfirm
              content="确定要删除这个机场吗？"
              @ok="handleDelete(record)"
            >
              <a-button type="text" size="small" status="danger">
                删除
              </a-button>
            </a-popconfirm>
          </template>
        </a-table>
      </a-card>
    </div>

    <!-- 新增/编辑机场弹窗 -->
    <a-modal 
      v-model:visible="modalVisible" 
      :title="modalTitle"
      @ok="handleSave"
      @cancel="handleCancel"
      width="800px"
    >
      <a-form 
        ref="formRef"
        :model="form" 
        :rules="rules"
        layout="vertical"
      >
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="机场名称" field="name">
              <a-input v-model="form.name" placeholder="请输入机场名称" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="机场代码" field="code">
              <a-input v-model="form.code" placeholder="请输入机场代码" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="所在省份" field="province">
              <a-input v-model="form.province" placeholder="请输入所在省份" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="所在城市" field="city">
              <a-input v-model="form.city" placeholder="请输入所在城市" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="经度" field="longitude">
              <a-input-number 
                v-model="form.longitude" 
                placeholder="请输入经度"
                :precision="6"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="纬度" field="latitude">
              <a-input-number 
                v-model="form.latitude" 
                placeholder="请输入纬度"
                :precision="6"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="海拔高度(米)" field="altitude">
              <a-input-number 
                v-model="form.altitude" 
                placeholder="请输入海拔高度"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="状态" field="status">
              <a-select v-model="form.status" placeholder="请选择状态">
                <a-option value="1">运营中</a-option>
                <a-option value="0">停运</a-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item label="备注" field="remark">
          <a-textarea 
            v-model="form.remark" 
            placeholder="请输入备注信息"
            :auto-size="{ minRows: 3, maxRows: 5 }"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Message } from '@arco-design/web-vue'
import { IconPlus, IconSearch, IconRefresh } from '@arco-design/web-vue/es/icon'

// 搜索表单
const searchForm = reactive({
  name: '',
  status: ''
})

// 表格列配置
const columns = [
  {
    title: '机场名称',
    dataIndex: 'name',
    width: 150
  },
  {
    title: '机场代码',
    dataIndex: 'code',
    width: 120
  },
  {
    title: '所在地区',
    dataIndex: 'location',
    width: 200
  },
  {
    title: '经纬度',
    dataIndex: 'coordinates',
    width: 180
  },
  {
    title: '海拔高度(米)',
    dataIndex: 'altitude',
    width: 120
  },
  {
    title: '状态',
    dataIndex: 'status',
    slotName: 'status',
    width: 100
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    width: 180
  },
  {
    title: '操作',
    slotName: 'actions',
    width: 200,
    fixed: 'right'
  }
]

// 表格数据
const tableData = ref([
  {
    id: 1,
    name: '北京首都国际机场',
    code: 'PEK',
    province: '北京市',
    city: '北京市',
    location: '北京市朝阳区',
    longitude: 116.584556,
    latitude: 40.080111,
    coordinates: '116.584556, 40.080111',
    altitude: 35,
    status: '1',
    remark: '中国最大的国际机场之一',
    createTime: '2024-01-01 10:00:00'
  },
  {
    id: 2,
    name: '上海浦东国际机场',
    code: 'PVG',
    province: '上海市',
    city: '上海市',
    location: '上海市浦东新区',
    longitude: 121.805214,
    latitude: 31.143378,
    coordinates: '121.805214, 31.143378',
    altitude: 4,
    status: '1',
    remark: '华东地区重要的国际航空枢纽',
    createTime: '2024-01-02 14:30:00'
  },
  {
    id: 3,
    name: '广州白云国际机场',
    code: 'CAN',
    province: '广东省',
    city: '广州市',
    location: '广州市白云区',
    longitude: 113.298889,
    latitude: 23.392436,
    coordinates: '113.298889, 23.392436',
    altitude: 15,
    status: '1',
    remark: '华南地区最大的民用机场',
    createTime: '2024-01-03 09:15:00'
  }
])

const loading = ref(false)

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 3,
  showTotal: true,
  showPageSize: true
})

// 弹窗相关
const modalVisible = ref(false)
const modalTitle = ref('新增机场')
const formRef = ref()

// 表单数据
const form = reactive({
  id: null,
  name: '',
  code: '',
  province: '',
  city: '',
  longitude: null,
  latitude: null,
  altitude: null,
  status: '1',
  remark: ''
})

// 表单验证规则
const rules = {
  name: [{ required: true, message: '请输入机场名称' }],
  code: [{ required: true, message: '请输入机场代码' }],
  province: [{ required: true, message: '请输入所在省份' }],
  city: [{ required: true, message: '请输入所在城市' }],
  longitude: [{ required: true, message: '请输入经度' }],
  latitude: [{ required: true, message: '请输入纬度' }],
  status: [{ required: true, message: '请选择状态' }]
}

// 搜索
const search = () => {
  loading.value = true
  // 这里应该调用实际的API
  setTimeout(() => {
    loading.value = false
    Message.success('查询成功')
  }, 1000)
}

// 重置搜索
const reset = () => {
  searchForm.name = ''
  searchForm.status = ''
  search()
}

// 新增
const handleAdd = () => {
  modalTitle.value = '新增机场'
  modalVisible.value = true
  resetForm()
}

// 编辑
const handleEdit = (record: any) => {
  modalTitle.value = '编辑机场'
  modalVisible.value = true
  Object.assign(form, record)
}

// 查看详情
const handleView = (record: any) => {
  Message.info(`查看机场详情: ${record.name}`)
  // 这里可以跳转到详情页面或打开详情弹窗
}

// 删除
const handleDelete = (record: any) => {
  Message.success(`删除机场: ${record.name}`)
  // 这里应该调用删除API
}

// 保存
const handleSave = async () => {
  const valid = await formRef.value?.validate()
  if (valid) return

  try {
    loading.value = true
    // 这里应该调用保存API
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    Message.success(form.id ? '更新成功' : '新增成功')
    modalVisible.value = false
    search()
  } catch (error) {
    Message.error('操作失败')
  } finally {
    loading.value = false
  }
}

// 取消
const handleCancel = () => {
  modalVisible.value = false
  resetForm()
}

// 重置表单
const resetForm = () => {
  Object.keys(form).forEach(key => {
    if (key === 'status') {
      form[key] = '1'
    } else {
      form[key] = null
    }
  })
  formRef.value?.clearValidate()
}

// 分页改变
const handlePageChange = (page: number) => {
  pagination.current = page
  search()
}

const handlePageSizeChange = (pageSize: number) => {
  pagination.pageSize = pageSize
  pagination.current = 1
  search()
}

onMounted(() => {
  search()
})
</script>

<style scoped lang="scss">
.airport-management {
  .page-header {
    margin-bottom: 16px;
  }
  
  .general-card {
    border-radius: 8px;
  }
}</style>