lingji-work-fe/src/views/home/components/history-conversation-drawer/delete-chat-modal.vue

<template>
  <a-modal v-model:visible="visible" title="删除对话" width="400px" @close="onClose">
    <div class="flex items-center">
      <img :src="icon1" width="20" height="20" class="mr-12px" />
      <span>确认删除对话吗？删除后，聊天记录将不可恢复。</span>
    </div>
    <template #footer>
      <a-button size="large" @click="onClose">取消</a-button>
      <a-button type="primary" class="ml-16px !bg-#f64b31 !border-none" status="danger" size="large" @click="onDelete"
        >确定</a-button
      >
    </template>
  </a-modal>
</template>

<script setup>
import { ref } from 'vue';
import { deleteHistoryItem } from '@/api/all/chat';
import icon1 from '@/assets/img/media-account/icon-warn-1.png';

const emits = defineEmits(['update', 'close', 'batchUpdate']);

const visible = ref(false);
const chatId = ref(null);

const isBatch = computed(() => Array.isArray(taskId.value));

function onClose() {
  visible.value = false;
  chatId.value = null;
  emits('close');
}

const open = (record) => {
  console.log({record})
  const { id = null } = record;
  chatId.value = id;

  visible.value = true;
};

async function onDelete() {
  const { code } = await deleteHistoryItem(chatId.value);
  if (code === 200) {
    AMessage.success('删除成功');
    emits('delete', chatId.value);
    onClose();
  }
}

defineExpose({ open });
</script>