YD_Event.Web/src/views/match/manage/Steps/Step3ProjectConfig.vue

<template>
  <el-form
    ref="formRef"
    :model="localFormData"
    :rules="rules"
    label-position="top"
    class="step-config"
  >
    <el-row :gutter="20">
      <!-- 项目类型 -->
      <el-col :span="24" :md="12">
        <el-form-item label="项目类型" prop="projectType">
          <el-select
            v-model="localFormData.projectType"
            placeholder="请选择项目类型"
            style="width: 100%"
          >
            <el-option label="科研类项目" value="research">
              <el-icon><Search /></el-icon>
              科研类项目
            </el-option>
            <el-option label="开发类项目" value="development">
              <el-icon><Edit /></el-icon>
              开发类项目
            </el-option>
            <el-option label="产业化类项目" value="production">
              <el-icon><Goods /></el-icon>
              产业化类项目
            </el-option>
            <el-option label="创新创业类项目" value="innovation">
              <el-icon><Aim /></el-icon>
              创新创业类项目
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <!-- 限报数量 -->
      <el-col :span="24" :md="12">
        <el-form-item label="限报数量" prop="maxDeclarations">
          <el-input-number
            v-model="localFormData.maxDeclarations"
            :min="1"
            :max="100"
            :step="1"
            style="width: 100%"
          />
          <div class="input-hint">单个项目最多可申报 {{ localFormData.maxDeclarations }} 项</div>
        </el-form-item>
      </el-col>

      <!-- 是否公开 -->
      <el-col :span="24" :md="12">
        <el-form-item label="是否公开" prop="isPublic">
          <el-switch
            v-model="localFormData.isPublic"
            active-text="公开"
            inactive-text="不公开"
            active-value="true"
            inactive-value="false"
          />
          <div class="switch-hint">
            {{ localFormData.isPublic ? '项目信息将对所有人可见' : '项目信息仅对参与单位可见' }}
          </div>
        </el-form-item>
      </el-col>

      <!-- 申报截止日期 -->
      <el-col :span="24" :md="12">
        <el-form-item label="申报截止日期" prop="deadline">
          <el-date-picker
            v-model="localFormData.deadline"
            type="date"
            placeholder="请选择申报截止日期"
            style="width: 100%"
            :disabled-date="disabledDate"
            format="YYYY年MM月DD日"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
      </el-col>

      <!-- 项目类型说明 -->
      <el-col :span="24">
        <el-card class="type-info-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <el-icon><InfoFilled /></el-icon>
              <span>项目类型说明</span>
            </div>
          </template>
          <div class="type-list">
            <div class="type-item">
              <span class="type-name">科研类项目</span>
              <span class="type-desc">以科学研究为主的创新性研究项目</span>
            </div>
            <div class="type-item">
              <span class="type-name">开发类项目</span>
              <span class="type-desc">以技术研发和产品开发为主的项目</span>
            </div>
            <div class="type-item">
              <span class="type-name">产业化类项目</span>
              <span class="type-desc">以成果转化和产业推广为主的项目</span>
            </div>
            <div class="type-item">
              <span class="type-name">创新创业类项目</span>
              <span class="type-desc">鼓励创新创业的孵化型项目</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import { Search, Edit, Goods, Aim, InfoFilled } from '@element-plus/icons-vue'

// 定义 props
const props = defineProps({
  modelValue: {
    type: Object,
    required: true
  }
})

// 定义 emits
const emit = defineEmits(['update:modelValue'])

// 表单引用
const formRef = ref(null)

// 本地表单数据副本
const localFormData = reactive({
  projectType: '',
  maxDeclarations: 1,
  isPublic: true,
  deadline: ''
})

// 初始化本地数据
Object.keys(localFormData).forEach(key => {
  localFormData[key] = props.modelValue[key] !== undefined ? props.modelValue[key] : localFormData[key]
})

// 监听本地数据变化，同步到父组件
watch(localFormData, (newVal) => {
  emit('update:modelValue', { ...props.modelValue, ...newVal })
}, { deep: true })

// 监听父组件数据变化，同步到本地
watch(() => props.modelValue, (newVal) => {
  Object.keys(localFormData).forEach(key => {
    if (newVal[key] !== undefined) {
      localFormData[key] = newVal[key]
    }
  })
}, { deep: true })

// 禁用过去的日期
const disabledDate = (time) => {
  return time.getTime() < Date.now() - 8.64e7
}

// 表单验证规则
const rules = reactive({
  projectType: [
    { required: true, message: '请选择项目类型', trigger: 'change' }
  ],
  maxDeclarations: [
    { required: true, message: '请设置限报数量', trigger: 'blur' },
    { type: 'number', min: 1, max: 100, message: '限报数量必须在1-100之间', trigger: 'blur' }
  ],
  deadline: [
    { required: true, message: '请选择申报截止日期', trigger: 'change' }
  ]
})

// 暴露验证方法给父组件
const validate = async () => {
  if (!formRef.value) return false
  return await formRef.value.validate()
}

defineExpose({
  validate
})
</script>

<style scoped>
.step-config {
  padding: 0 20px;
}

.step-config .el-form-item {
  margin-bottom: 24px;
}

.input-hint {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

.switch-hint {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

.type-info-card {
  margin-top: 20px;
  background: #f5f7fa;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.type-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.type-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px 15px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #e4e7ed;
}

.type-name {
  font-weight: 600;
  color: #409eff;
  min-width: 120px;
}

.type-desc {
  color: #606266;
  font-size: 14px;
}
</style>