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

<!-- d:\wordpack\WholeProcessPlatform\frontend\src\views\system\map\components\TiltPhotoManagement\index.vue -->
<template>
  <div class="content">
    <TiltPhotoManagementSearch
      ref="tiltPhotoManagementSearch"
      :river-options="riverOptions"
      :river-options-load="riverOptionsLoad"
      :handle-add="handleAdd"
      @reset="handleReset"
      @search-finish="onSearchFinish"
    />
    <BasicTable
      ref="basicTable"
      :columns="columns"
      :list-url="getAllTiltPhotoTree"
      :search-params="searchParams"
    >
      <template #action="{ column, record }">
        <div class="flex gap-[6px]">
          <a-button
            class="!p-0"
            type="link"
            size="small"
            @click="handleEdit(record)"
            >编辑</a-button
          >
          <a-button
            class="!p-0"
            type="link"
            size="small"
            danger
            @click="handleDelete(record)"
            >删除</a-button
          >
        </div>
      </template>
    </BasicTable>
    <TiltPhotoManagementForm
      ref="tiltPhotoManagementForm"
      v-model:visible="editModalVisible"
      :river-options="riverOptions"
      :river-options-load="riverOptionsLoad"
      :initial-values="currentRecord"
      @cancel="editModalCancel"
      @ok="handleEditSubmit"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, onMounted } from 'vue';
import BasicTable from '@/components/BasicTable/index.vue';
import TiltPhotoManagementSearch from './TiltPhotoManagementSearch.vue';
import TiltPhotoManagementForm from './TiltPhotoManagementForm.vue';
import { message, Modal } from 'ant-design-vue';
import {
  getAllTiltPhotoTree,
  saveTiltPhoto,
  deleteTiltPhoto
} from '@/api/system/map/TiltPhotoManagement';
import { getRvcdDropdown } from '@/api/select';
// 表格列配置
const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    width: 60,
    align: 'center',
    customRender: ({ text, record, index }) => index + 1
  },
  {
    title: '倾斜影像名称',
    dataIndex: 'stnm',
    key: 'stnm',
    width: 150
  },
  {
    title: 'URL',
    dataIndex: 'url',
    key: 'url'
    // width: 360
  },
  {
    title: '所在河段',
    dataIndex: 'hbrvcdName',
    key: 'hbrvcdName',
    width: 280
  },
  {
    title: '所属电站',
    key: 'ennm',
    dataIndex: 'ennm',
    width: 140
  },
  {
    title: '创建人',
    key: 'recordUser',
    dataIndex: 'recordUser',
    width: 150
  },
  {
    title: '创建时间',
    key: 'recordTime',
    dataIndex: 'recordTime',
    width: 150
  },
  {
    title: '更新时间',
    key: 'modifyTime',
    dataIndex: 'modifyTime',
    width: 150
  },
  {
    title: '操作',
    key: 'action',
    width: 120,
    fixed: 'right',
    slots: { customRender: 'action' }
  }
];

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

// 添加处理
const handleAdd = () => {
  currentRecord.value = null;
  editModalVisible.value = true;
};

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

// 删除处理
const handleDelete = (record: any) => {
  Modal.confirm({
    title: '确认删除',
    content: '确定要删除选中的记录吗？',
    zIndex: 2002,
    onOk: async () => {
      try {
        let res = await deleteTiltPhoto({ id: record.id });
        message.success('删除成功');
        basicTable.value.refresh();
      } catch (error) {
        message.error('删除失败');
        return;
      }
    }
  });
};

// 搜索完成处理
const onSearchFinish = (values: any) => {
  const params = {
    logic: 'and',
    filters: [
      values.parentId
        ? {
            field: 'parentId',
            operator: 'eq',
            dataType: 'string',
            value: values.parentId
          }
        : null,
      values.stnm
        ? {
            field: 'stnm',
            operator: 'contains',
            dataType: 'string',
            value: values.stnm
          }
        : null,
      values.rvcd
        ? {
            field: 'hbrvcd',
            operator: 'contains',
            dataType: 'string',
            value: values.rvcd
          }
        : null
    ].filter(Boolean)
  };
  basicTable.value.getList(params);
};

// 重置
const handleReset = () => {
  nextTick(() => {
    basicTable.value.getList({
      logic: 'and',
      filters: []
    });
  });
};

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

// 表单提交
const handleEditSubmit = async (values: any) => {
  try {
    let res = await saveTiltPhoto({
      ...currentRecord.value,
      ...values,
      recordTime:currentRecord.value.recordTime != '-' ? currentRecord.value.recordTime : null
    });
    message.success(`保存成功`);

    editModalVisible.value = false;
    basicTable.value.refresh();
  } catch (error) {
    message.error(`保存失败`);

    editModalVisible.value = false;
    return;
  }
};
const riverOptions = ref<any>([]);
const riverOptionsLoad = ref(false);
const initOption = () => {
  const params = {};
  riverOptionsLoad.value = true;
  getRvcdDropdown(params).then((res: any) => {
    res.data.forEach((item: any) => {
      item.value = item.rvcd;
      item.label = item.rvnm;
    });
    riverOptions.value = res.data || [];
    riverOptionsLoad.value = false;
  });
};
onMounted(() => {
  initOption();
});
</script>

<style scoped lang="scss">
.tilt-photo-management {
  height: 100%;
  padding: 16px;
}
.content {
  position: relative;
  z-index: 900;
  pointer-events: all;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  overflow: hidden;
  padding: 16px;
}
</style>