smartai2dian0/src/modules/conversation-history/BtnHistoryItemDelete.vue

<template>
  <span @click="handleClick" class="btn-delete">
    <icon-delete />

    <!-- <template v-if="api_status === 1">
      <icon-delete color="danger" />
    </template>
    <template v-if="api_status === 2">
      <a-spin />
    </template>
    <template v-if="api_status === 3">ok</template>
    <template v-if="api_status === 4"></template>
    <template v-if="api_status === 5"></template> -->
  </span>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { Modal } from '@arco-design/web-vue';
import { Message } from '@arco-design/web-vue';

import { apiConversationHistoryDelete } from './api-conversation-history';

const props = defineProps({
  target_id: String
});

const emits = defineEmits(['deleteSuccess']);

const i18n = useI18n();

// api请求的状态
const api_status = ref(1); // api状态 1 请求未启动 2 请求进心中 3 请求已成功 4 请求失败（网络成功，但是code不等于200） 5 请求出错
const api_message = ref(''); // 请求消息 与 api_status 对应的 message 消息内容

const handleClick = () => {
  const msg = i18n.t('conversation.are_you_sure');
  const btn_yes = i18n.t('conversation.btn_yes');
  const btn_no = i18n.t('conversation.btn_no');

  Modal.info({
    title: msg,
    okText: btn_yes,
    cancelText: btn_no,
    hideCancel: false,

    'modal-class': 'history-chat-remove-modal',

    // content: '删除后无法恢复'
    onOk(e) {
      // console.log('确定');
      // handleConfirmDelete();
    },
    async onBeforeOk() {
      try {
        const result = await handleConfirmDeleteV2();

        if (result === 200) {
          return true;
        } else {
          // 异常
          return false;
        }
      } catch (err) {
        // 出错了
        return false;
      }
    },
    onCancel() {
      // console.log('取消');
    }
  });
};

const handleConfirmDeleteV2 = () => {
  // 进入加载状态
  return new Promise((resolve, reject) => {
    apiConversationHistoryDelete(props.target_id)
      .then((res) => {
        if (res.code / 1 === 200) {
          const msg = i18n.t('conversation.del_success');

          // 成功
          Message.success(msg);

          emits('deleteSuccess');

          resolve(200);
        } else {
          // 异常
          // api请求成功，但是业务失败
          Message.warning(res.msg);
        }
      })
      .catch((err) => {
        Message.warning(err.msg);

        // api请求出错
        reject(err);
      });
  });
};

const handleConfirmDelete = () => {
  // 进入加载状态
  api_status.value = 2;
  api_message.value = '';
  apiConversationHistoryDelete(props.target_id)
    .then((res) => {
      if (res.code / 1 === 200) {
        // 成功
        // api请求成功
        api_status.value = 3;
        api_message.value = 'success';

        // Message.success('删除成功');
        const msg = i18n.t('conversation.del_success');
        // 成功
        Message.success(msg);

        emits('deleteSuccess');
      } else {
        // 异常
        // api请求成功，但是业务失败
        api_status.value = 4;
        api_message.value = res.msg;
      }
    })
    .catch((err) => {
      // api请求出错
      api_status.value = 5;
      api_message.value = err.msg;
    });
};
</script>

<style lang="css" scoped>
.btn-delete {
  color: red;
}
</style>

<style>
.arco-modal.history-chat-remove-modal.arco-modal-simple {
}
.arco-modal.history-chat-remove-modal.arco-modal-simple .arco-modal-header .arco-modal-title {
  justify-content: flex-start;
  text-align: left;
}

.arco-modal.history-chat-remove-modal.arco-modal-simple .arco-modal-footer {
  text-align: right;
  margin-top: 0;
}
</style>