ccdi/ruoyi-ui/src/views/ccdiProject/components/ArchiveConfirmDialog.vue

<template>
  <el-dialog
    :visible.sync="dialogVisible"
    title="归档确认"
    width="500px"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <div class="archive-confirm-content">
      <!-- 警告图标 -->
      <div class="warning-icon">
        <i class="el-icon-warning"></i>
      </div>

      <!-- 确认文字 -->
      <div class="confirm-text">
        确定要归档项目"<span class="project-name-highlight">{{ projectData && projectData.projectName }}</span>"吗？
      </div>

      <!-- 归档说明 -->
      <div class="archive-info">
        <div class="info-title">归档后将：</div>
        <ul class="info-list">
          <li>
            <i class="el-icon-check"></i>
            <span>项目状态变为"已归档"</span>
          </li>
          <li>
            <i class="el-icon-check"></i>
            <span>自动生成项目报告PDF</span>
          </li>
          <li>
            <i class="el-icon-check"></i>
            <span>移入归档库，可随时查看</span>
          </li>
        </ul>
      </div>

      <!-- 删除选项 -->
      <div class="delete-option">
        <el-checkbox v-model="deleteData">同时删除项目相关数据（不可恢复）</el-checkbox>
      </div>

      <!-- 提示信息 -->
      <div class="archive-hint">
        <i class="el-icon-info"></i>
        <span>归档后可从"归档库"中查看和恢复</span>
      </div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button
        type="primary"
        :loading="submitting"
        @click="handleConfirm"
      >
        <i v-if="!submitting" class="el-icon-folder-checked"></i>
        确认归档
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'ArchiveConfirmDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    projectData: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      submitting: false,
      deleteData: false
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        if (!val) {
          this.handleClose()
        }
      }
    }
  },
  watch: {
    visible(val) {
      if (!val) {
        this.deleteData = false
      }
    }
  },
  methods: {
    handleConfirm() {
      if (this.deleteData) {
        this.$confirm('删除后数据将无法恢复，是否确认删除？', '警告', {
          confirmButtonText: '确认删除',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.doArchive()
        }).catch(() => {
          // 取消删除，但仍归档
          this.deleteData = false
          this.doArchive()
        })
      } else {
        this.doArchive()
      }
    },
    doArchive() {
      this.submitting = true
      setTimeout(() => {
        this.submitting = false
        this.$emit('confirm', {
          projectId: this.projectData.projectId,
          deleteData: this.deleteData
        })
      }, 500)
    },
    handleClose() {
      this.$emit('close')
      this.deleteData = false
    }
  }
}
</script>

<style lang="scss" scoped>
.archive-confirm-content {
  padding: 20px 0;
}

.warning-icon {
  text-align: center;
  margin-bottom: 20px;

  i {
    font-size: 64px;
    color: #E6A23C;
  }
}

.confirm-text {
  text-align: center;
  font-size: 16px;
  color: #303133;
  line-height: 1.6;
  margin-bottom: 24px;

  .project-name-highlight {
    color: #409EFF;
    font-weight: 600;
  }
}

.archive-info {
  background-color: #f5f7fa;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 16px;

  .info-title {
    font-size: 14px;
    font-weight: 600;
    color: #606266;
    margin-bottom: 12px;
  }

  .info-list {
    margin: 0;
    padding-left: 0;
    list-style: none;

    li {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #606266;
      margin-bottom: 8px;

      &:last-child {
        margin-bottom: 0;
      }

      i {
        color: #67C23A;
        margin-right: 8px;
        font-size: 16px;
        font-weight: bold;
      }
    }
  }
}

.delete-option {
  margin-bottom: 16px;
  padding: 12px;
  background-color: #fef0f0;
  border-radius: 6px;
  border: 1px solid #fde2e2;

  :deep(.el-checkbox__label) {
    color: #F56C6C;
  }

  :deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
    color: #F56C6C;
  }
}

.archive-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #909399;
  padding: 12px;
  background-color: #ecf5ff;
  border-radius: 6px;
  border: 1px solid #d9ecff;

  i {
    margin-right: 6px;
    font-size: 14px;
    color: #409EFF;
  }
}

.dialog-footer {
  text-align: right;

  .el-button + .el-button {
    margin-left: 8px;
  }
}
</style>