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="content">
    <TiltPhotoManagementSearch
      ref="tiltPhotoManagementSearch"
      :handle-add="handleAdd"
      @reset="handleReset"
      @search-finish="onSearchFinish"
    />
    <BasicTable
      ref="basicTable"
      :columns="columns"
      :list-url="getAllTiltPhotoTree"
      :search-params="searchParams"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <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>
      </template>
    </BasicTable>
    <TiltPhotoManagementForm
      ref="tiltPhotoManagementForm"
      v-model:visible="editModalVisible"
      :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";
// 表格列配置
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: 120,
  },
  {
    title: "所属电站",
    key: "ennm",
    dataIndex: "ennm",
    width: 140,
  },
  {
    title: "创建人",
    key: "recordUser",
    dataIndex: "recordUser",
  },
  {
    title: "创建时间",
    key: "recordTime",
    dataIndex: "recordTime",
    width: 150,
  },
  {
    title: "更新时间",
    key: "modifyTime",
    dataIndex: "modifyTime",
    width: 150,
  },
  {
    title: "操作",
    key: "action",
    width: 80,
    fixed: "right",
  },
];

// 表格实例
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,
      {
        field: "stnm",
        operator: "contains",
        dataType: "string",
        value: values.stnm,
      },
    ].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,
    });
    message.success(`保存成功`);

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

    editModalVisible.value = false;
    return;
  }
};
const initOption = async () => {};
onMounted(() => {
  initOption();
});
</script>

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