WholeProcessPlatform/frontend/src/views/system/map/components/TiltPhotoManagement/index.vue

<!-- d:\wordpack\WholeProcessPlatform\frontend\src\views\system\map\components\TiltPhotoManagement\index.vue -->
<template>
  <div class="tilt-photo-management">
    <TiltPhotoManagementSearch
      ref="tiltPhotoManagementSearch"
      :handle-add="handleAdd"
      @reset="handleReset"
      @search-finish="onSearchFinish"
    />
    <BasicTable
      :columns="columns"
      :data="dataSource"
      :list-url="fetchTiltPhotoData"
      :search-params="searchParams"
      :enable-row-selection="true"
      @selection-change="handleSelectionChange"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <a-space>
            <a-button type="link" size="small" @click="handlePreview(record)"
              >预览</a-button
            >
            <a-button type="link" size="small" @click="handleEdit(record)"
              >编辑</a-button
            >
            <a-button
              type="link"
              size="small"
              danger
              @click="handleDelete(record)"
              >删除</a-button
            >
          </a-space>
        </template>
        <template v-if="column.key === 'status'">
          <a-tag :color="record.status === 'processed' ? 'green' : 'orange'">
            {{ record.status === 'processed' ? '已处理' : '待处理' }}
          </a-tag>
        </template>
      </template>
    </BasicTable>
    <TiltPhotoManagementForm
      ref="tiltPhotoManagementForm"
      v-model:visible="editModalVisible"
      :initial-values="currentRecord"
      @cancel="editModalCancel"
      @ok="handleEditSubmit"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import BasicTable from '@/components/BasicTable/index.vue';
import TiltPhotoManagementSearch from './TiltPhotoManagementSearch.vue';
import TiltPhotoManagementForm from './TiltPhotoManagementForm.vue';
import { message } from 'ant-design-vue';

// 表格列配置
const columns = [
  {
    title: '项目名称',
    dataIndex: 'projectName',
    key: 'projectName',
    width: 150
  },
  {
    title: '拍摄日期',
    dataIndex: 'captureDate',
    key: 'captureDate',
    width: 120
  },
  {
    title: '文件大小',
    dataIndex: 'fileSize',
    key: 'fileSize',
    width: 100
  },
  {
    title: '状态',
    key: 'status',
    dataIndex: 'status',
    width: 100
  },
  {
    title: '覆盖区域',
    dataIndex: 'coverageArea',
    key: 'coverageArea',
    ellipsis: true
  },
  {
    title: '操作',
    key: 'action',
    width: 200,
    fixed: 'right'
  }
];

// 搜索参数
const searchParams = ref({});
// 编辑弹窗数据
const currentRecord = ref<any | null>(null);
const editModalVisible = ref(false);

// 数据源
const dataSource = ref([]);

// 模拟数据获取函数
const fetchTiltPhotoData = (params: any) => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({
        data: {
          records: [
            {
              id: 1,
              projectName: '三峡库区倾斜摄影',
              captureDate: '2023-03-15',
              fileSize: '2.5GB',
              status: 'processed',
              coverageArea: '三峡大坝周边5公里范围'
            },
            {
              id: 2,
              projectName: '葛洲坝区域航拍',
              captureDate: '2023-04-20',
              fileSize: '1.8GB',
              status: 'processed',
              coverageArea: '葛洲坝枢纽工程区域'
            },
            {
              id: 3,
              projectName: '金沙江下游航测',
              captureDate: '2023-05-10',
              fileSize: '3.2GB',
              status: 'pending',
              coverageArea: '金沙江下游河段'
            }
          ],
          total: 3
        }
      });
    }, 500);
  });
};

const handleAdd = () => {
  currentRecord.value = null;
  editModalVisible.value = true;
};

// 预览处理
const handlePreview = (record: any) => {
  message.info(`预览倾斜摄影: ${record.projectName}`);
};

// 编辑处理
const handleEdit = (record: any) => {
  currentRecord.value = { ...record };
  editModalVisible.value = true;
};

// 删除处理
const handleDelete = (record: any) => {
  message.warning(`删除倾斜摄影: ${record.projectName}`);
};

// 搜索完成处理
const onSearchFinish = (values: any) => {
  console.log(values);
};

// 重置
const handleReset = (params: any) => {};

// 选择变化处理
const handleSelectionChange = (selectedRows: any[]) => {
  console.log('选中的行:', selectedRows);
};

// 表单取消
const editModalCancel = () => {
  editModalVisible.value = false;
};

// 表单提交
const handleEditSubmit = (values: any) => {
  console.log(values);
};
</script>

<style scoped lang="scss">
.tilt-photo-management {
  height: 100%;
  padding: 16px;
}
</style>