WholeProcessPlatform/frontend-sjgl/src/views/conventionalHydropower/BasicData/DeleteConfirmModal.vue

<template>
  <!-- 第一步：输入修改依据 -->
  <a-modal
    v-model:open="dataSourceVisible"
    :title="title"
    ok-text="确定"
    cancel-text="取消"
    @ok="handleDataSourceConfirm"
  >
    <div>
      <p style="color: red; margin-bottom: 8px">请输入删除依据以继续删除操作</p>
      <a-textarea
        v-model:value="dataSource"
        placeholder="请输入删除依据"
        :rows="4"
      />
    </div>
  </a-modal>

  <!-- 第二步：确认删除 -->
  <a-modal
    v-model:open="confirmVisible"
    title="确认删除"
    ok-text="确认删除"
    cancel-text="取消"
    :ok-button-props="{ danger: true }"
    :confirm-loading="confirmLoading"
    @ok="handleFinalDelete"
  >
    <div>
      <p style="color: red; font-weight: bold">请慎重操作！</p>
      <p>{{ label }}名称：{{ deleteRecord?.stnm }}</p>
      <p>修改依据：{{ dataSource || '无' }}</p>
      <p>确定要删除该{{ label }}吗？</p>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { message } from 'ant-design-vue';
import { deletePowerInfo } from '@/api/DataQueryMenuModule';
import { useDraggable } from '@/utils/drag';

const props = withDefaults(
  defineProps<{
    /** 自定义删除函数，接收 (record, reason) 参数 */
    deleteFn?: (record: any, reason: string) => Promise<any>;
    /** 弹窗标题 */
    title?: string;
    /** 显示标签（如"电站"、"数据"） */
    label?: string;
  }>(),
  {
    title: '删除电站',
    label: '电站'
  }
);

const emit = defineEmits(['success']);

const dataSourceVisible = ref(false);
const confirmVisible = ref(false);
const confirmLoading = ref(false);
const dataSource = ref('');
const deleteRecord = ref<any>(null);
const onSuccess = ref<Function>(() => {});

// 打开删除弹窗
const open = (record: any, callback: Function) => {
  deleteRecord.value = record;
  dataSource.value = '';
  dataSourceVisible.value = true;
  onSuccess.value = callback;
};
useDraggable(dataSourceVisible, { boundary: true, resetOnOpen: true });
useDraggable(confirmVisible, { boundary: true, resetOnOpen: true });
// 修改依据确认
const handleDataSourceConfirm = () => {
  dataSourceVisible.value = false;
  confirmVisible.value = true;
};

// 最终删除
const handleFinalDelete = async () => {
  confirmLoading.value = true; // 开始加载
  try {
    let res: any;
    if (props.deleteFn) {
      // 使用外部传入的删除函数
      res = await props.deleteFn(deleteRecord.value, dataSource.value);
    } else {
      // 默认使用电站删除接口
      const params = {
        ids: [deleteRecord.value.stcd],
        source: dataSource.value
      };
      res = await deletePowerInfo(params);
    }
    if (res?.code == 0 || res?.success) {
      message.success('删除成功');
      confirmVisible.value = false;
      onSuccess.value();
    } else {
      message.error(res?.msg || '删除失败');
    }
  } catch (error) {
    message.error('删除失败，请重试');
  } finally {
    confirmLoading.value = false; // 结束加载
  }
};

defineExpose({ open });
</script>