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

<template>
  <el-dialog
    :visible.sync="dialogVisible"
    title="导入历史项目"
    width="700px"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <!-- 搜索区 -->
    <div class="search-section">
      <el-input
        v-model="searchKeyword"
        placeholder="搜索历史项目名称"
        prefix-icon="el-icon-search"
        clearable
        size="small"
        style="width: 300px"
      >
        <el-button slot="append" icon="el-icon-search" @click="handleSearch" />
      </el-input>
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        size="small"
        style="width: 240px; margin-left: 12px"
      />
    </div>

    <!-- 历史项目列表 -->
    <div class="project-list-section">
      <div class="section-title">历史项目列表</div>
      <el-radio-group v-model="selectedProjectId" class="project-radio-group">
        <div
          v-for="item in filteredProjects"
          :key="item.projectId"
          class="project-item-wrapper"
        >
          <el-radio :label="item.projectId" class="project-radio">
            <div class="project-item">
              <div class="project-header">
                <span class="name">{{ item.projectName }}</span>
                <el-tag
                  :type="getStatusType(item.projectStatus)"
                  size="mini"
                >{{ getStatusLabel(item.projectStatus) }}</el-tag>
              </div>
              <div class="project-info">
                <span class="info-item">
                  <i class="el-icon-time"></i>
                  创建时间: {{ item.createTime }}
                </span>
                <span class="info-item">
                  <i class="el-icon-user"></i>
                  目标人数: {{ item.targetCount }}
                </span>
                <span class="info-item warning">
                  <i class="el-icon-warning"></i>
                  预警人数: {{ item.warningCount }}
                </span>
              </div>
            </div>
          </el-radio>
        </div>
      </el-radio-group>

      <el-empty
        v-if="filteredProjects.length === 0"
        description="暂无历史项目"
        :image-size="100"
      />
    </div>

    <!-- 新项目配置 -->
    <div class="new-project-config">
      <el-divider />
      <el-form
        ref="configForm"
        :model="configForm"
        :rules="configRules"
        label-width="100px"
        label-position="right"
      >
        <el-form-item label="新项目名称" prop="newProjectName">
          <el-input
            v-model="configForm.newProjectName"
            placeholder="新项目名称（可自动生成）"
            maxlength="50"
          />
        </el-form-item>

        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="开始日期" prop="startDate">
              <el-date-picker
                v-model="configForm.startDate"
                type="date"
                placeholder="选择开始日期"
                value-format="yyyy-MM-dd"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束日期" prop="endDate">
              <el-date-picker
                v-model="configForm.endDate"
                type="date"
                placeholder="选择结束日期"
                value-format="yyyy-MM-dd"
                :picker-options="endDatePickerOptions"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button
        type="primary"
        :loading="submitting"
        :disabled="!selectedProjectId"
        @click="handleSubmit"
      >
        <i v-if="!submitting" class="el-icon-download"></i>
        导 入
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import {getMockHistoryProjects} from '@/api/ccdiProject'

export default {
  name: 'ImportHistoryDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    // 结束日期验证规则
    const validateEndDate = (rule, value, callback) => {
      if (value && this.configForm.startDate && value < this.configForm.startDate) {
        callback(new Error('结束日期不能早于开始日期'))
      } else {
        callback()
      }
    }

    return {
      submitting: false,
      searchKeyword: '',
      dateRange: null,
      selectedProjectId: null,
      historyProjects: [],
      configForm: {
        newProjectName: '',
        startDate: '',
        endDate: ''
      },
      configRules: {
        newProjectName: [
          { required: true, message: '请输入新项目名称', trigger: 'blur' }
        ],
        startDate: [
          { required: true, message: '请选择开始日期', trigger: 'change' }
        ],
        endDate: [
          { required: true, message: '请选择结束日期', trigger: 'change' },
          { validator: validateEndDate, trigger: 'change' }
        ]
      },
      endDatePickerOptions: {
        disabledDate: (time) => {
          if (this.configForm.startDate) {
            return time.getTime() < new Date(this.configForm.startDate).getTime()
          }
          return false
        }
      }
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        if (!val) {
          this.handleClose()
        }
      }
    },
    filteredProjects() {
      let result = [...this.historyProjects]
      if (this.searchKeyword) {
        result = result.filter(item =>
          item.projectName.toLowerCase().includes(this.searchKeyword.toLowerCase())
        )
      }
      if (this.dateRange && this.dateRange.length === 2) {
        const [start, end] = this.dateRange
        result = result.filter(item => {
          const createTime = new Date(item.createTime)
          return createTime >= new Date(start) && createTime <= new Date(end)
        })
      }
      return result
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.loadHistoryProjects()
      }
    },
    selectedProjectId(val) {
      if (val) {
        const project = this.historyProjects.find(p => p.projectId === val)
        if (project) {
          // 自动生成新项目名称
          const now = new Date()
          const year = now.getFullYear()
          const month = String(now.getMonth() + 1).padStart(2, '0')
          const day = String(now.getDate()).padStart(2, '0')
          this.configForm.newProjectName = `${project.projectName}（${year}-${month}-${day}复制）`
        }
      }
    }
  },
  methods: {
    /** 加载历史项目 */
    loadHistoryProjects() {
      getMockHistoryProjects().then(response => {
        this.historyProjects = response.data
      })
    },
    /** 获取状态类型 */
    getStatusType(status) {
      const statusMap = {
        '0': 'primary',
        '1': 'success',
        '2': 'info'
      }
      return statusMap[status] || 'info'
    },
    /** 获取状态标签 */
    getStatusLabel(status) {
      const statusMap = {
        '0': '进行中',
        '1': '已完成',
        '2': '已归档'
      }
      return statusMap[status] || '未知'
    },
    /** 搜索 */
    handleSearch() {
      // 搜索逻辑在 computed 中处理
    },
    /** 提交导入 */
    handleSubmit() {
      if (!this.selectedProjectId) {
        this.$message.warning('请选择要导入的历史项目')
        return
      }
      this.$refs.configForm.validate(valid => {
        if (valid) {
          this.submitting = true
          const selectedProject = this.historyProjects.find(p => p.projectId === this.selectedProjectId)
          setTimeout(() => {
            this.submitting = false
            this.$emit('submit', {
              sourceProjectId: this.selectedProjectId,
              sourceProject: selectedProject,
              ...this.configForm
            })
          }, 500)
        }
      })
    },
    /** 关闭对话框 */
    handleClose() {
      this.$emit('close')
      this.selectedProjectId = null
      this.searchKeyword = ''
      this.dateRange = null
      this.configForm = {
        newProjectName: '',
        startDate: '',
        endDate: ''
      }
      this.$refs.configForm?.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.search-section {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.project-list-section {
  margin-bottom: 16px;

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

.project-radio-group {
  width: 100%;
  max-height: 300px;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #dcdfe6;
    border-radius: 3px;

    &:hover {
      background-color: #c0c4cc;
    }
  }
}

.project-item-wrapper {
  margin-bottom: 12px;

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

.project-radio {
  display: block;
  width: 100%;

  :deep(.el-radio__label) {
    width: calc(100% - 24px);
    padding-left: 8px;
  }

  :deep(.el-radio__input) {
    margin-top: 20px;
  }
}

.project-item {
  padding: 12px;
  background-color: #f5f7fa;
  border-radius: 8px;
  transition: all 0.3s;

  &:hover {
    background-color: #ecf5ff;
  }

  .project-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;

    .name {
      font-size: 15px;
      font-weight: 500;
      color: #303133;
    }
  }

  .project-info {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;

    .info-item {
      font-size: 13px;
      color: #909399;
      display: flex;
      align-items: center;
      gap: 4px;

      i {
        font-size: 14px;
      }

      &.warning {
        color: #E6A23C;
      }
    }
  }
}

.new-project-config {
  :deep(.el-divider) {
    margin: 16px 0;
  }
}

.dialog-footer {
  text-align: right;

  .el-button + .el-button {
    margin-left: 8px;
  }
}

:deep(.el-empty) {
  padding: 20px 0;
}
</style>