td_official/src/views/design/drawingreview/detailForm.vue

<template>
  <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px" class="info-form">
    <!-- 基本信息区域 -->
    <div class="form-section">
      <div class="section-title">
        <el-divider content-position="left">
          <span class="title-text">基本信息</span>
        </el-divider>
      </div>
      <el-row :gutter="20" class="section-content">
        <el-col :span="12">
          <el-form-item label="编号" prop="num">
            <!-- prop="num" 需与 rules 中键名一致 -->
            <el-input v-model="formData.num" placeholder="请输入编号" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="专业" prop="professional">
            <el-input v-model="formData.professional" placeholder="请输入专业" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设计阶段" prop="stage">
            <el-input v-model="formData.stage" placeholder="请输入设计阶段" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="卷册" prop="volume">
            <el-input v-model="formData.volume" placeholder="请输入卷册" />
          </el-form-item>
        </el-col>
      </el-row>
    </div>

    <!-- 项目信息区域 -->
    <div class="form-section">
      <div class="section-title">
        <el-divider content-position="left">
          <span class="title-text">项目信息</span>
        </el-divider>
      </div>
      <el-row :gutter="20" class="section-content">
        <el-col :span="12">
          <el-form-item label="项目" prop="projectName">
            <el-input disabled v-model="formData.projectName" placeholder="请输入项目ID" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="子项目" prop="subprojectId">
            <el-select v-model="formData.subprojectId" clearable placeholder="请选择子项目" style="width: 300px">
              <el-option v-for="item in subProjectList" :key="item.id" :label="item.projectName" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </div>

    <!-- 人员信息区域 -->
    <div class="form-section">
      <div class="section-title">
        <el-divider content-position="left">
          <span class="title-text">人员信息</span>
        </el-divider>
      </div>
      <el-row :gutter="20" class="section-content">
        <el-col :span="12">
          <el-form-item label="设计人" prop="designer">
            <el-input v-model="formData.designer" placeholder="请输入设计人" />
          </el-form-item>
        </el-col>
        <el-col :span="12"></el-col>
        <el-col :span="12">
          <el-form-item label="校审人员" prop="proofreading">
            <el-input v-model="formData.proofreading" placeholder="请输入校审人员" />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="校审人员ID" prop="proofreadingId">
            <el-input v-model="formData.proofreadingId" placeholder="请输入校审人员ID" />
          </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item label="校审时间" prop="proofreadingDate">
            <el-date-picker
              v-model="formData.proofreadingDate"
              type="date"
              placeholder="选择校审时间"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="审核人员" prop="audit">
            <el-input v-model="formData.audit" placeholder="请输入审核人员" />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="审核人员ID" prop="auditId">
            <el-input v-model="formData.auditId" placeholder="请输入审核人员ID" />
          </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item label="审核时间" prop="auditDate">
            <el-date-picker v-model="formData.auditDate" type="date" placeholder="选择审核时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="执行人员" prop="executor">
            <el-input v-model="formData.executor" placeholder="请输入执行人员" />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="执行人员ID" prop="executorId">
            <el-input v-model="formData.executorId" placeholder="请输入执行人员ID" />
          </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item label="执行时间" prop="executorDate">
            <el-date-picker v-model="formData.executorDate" type="date" placeholder="选择执行时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
          </el-form-item>
        </el-col>
      </el-row>
    </div>

    <!-- 意见和内容区域 -->
    <div class="form-section">
      <div class="section-title">
        <el-divider content-position="left">
          <span class="title-text">意见和内容</span>
        </el-divider>
      </div>
      <el-row :gutter="20" class="section-content">
        <el-col :span="24">
          <el-form-item label="验证内容" prop="verificationContent">
            <el-input v-model="formData.verificationContent" type="textarea" placeholder="请输入验证内容" :rows="4" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="验证意见" prop="verificationOpinion">
            <el-input v-model="formData.verificationOpinion" type="textarea" placeholder="请输入验证意见" :rows="4" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="执行意见" prop="executionOpinion">
            <el-input v-model="formData.executionOpinion" type="textarea" placeholder="请输入执行意见" :rows="4" />
          </el-form-item>
        </el-col>
      </el-row>
    </div>
  </el-form>
</template>

<script setup name="ExamineForm" lang="ts">
import { ref, watch, reactive } from 'vue';
import { fillOutTheDesignVerificationForm, drawingreviewReceipts } from '@/api/design/drawingreview';
import type { FormInstance, FormRules } from 'element-plus';
import { useUserStoreHook } from '@/store/modules/user';
import { computed } from 'vue';
import { subProjectListAll } from '@/api/design/drawingreview';

// 获取用户 store
const userStore = useUserStoreHook();
// 从 store 中获取当前选中的项目
const currentProject = computed(() => userStore.selectedProject);
console.log(currentProject.value);
const subProjectList = ref([]);
let subProjectMap = new Map();
// 定义表单数据类型
interface FormData {
  num: string;
  professional: string;
  stage: string;
  volume: string;
  projectId: string;
  projectName: string;
  subprojectId: string;
  subprojectName: string;
  designer: string;
  proofreading: string;
  proofreadingId: string;
  proofreadingDate: string;
  audit: string;
  auditId: string;
  auditDate: string;
  executor: string;
  executorId: string;
  executorDate: string;
  verificationContent: string;
  verificationOpinion: string;
  executionOpinion: string;
}

// 定义表单验证规则
const rules: FormRules = {
  num: [{ required: true, message: '请输入编号', trigger: 'blur' }],
  professional: [{ required: true, message: '请输入专业', trigger: 'blur' }]
};

// 表单数据 - 直接在组件内定义，不再通过Props接收
const formData = reactive<FormData>({
  num: '',
  professional: '',
  stage: '',
  volume: '',
  projectId: currentProject.value?.id || '',
  projectName: currentProject.value?.name || '',
  subprojectId: '',
  subprojectName: '',
  designer: '',
  proofreading: '',
  proofreadingId: '',
  proofreadingDate: '',
  audit: '',
  auditId: '',
  auditDate: '',
  executor: '',
  executorId: '',
  executorDate: '',
  verificationContent: '',
  verificationOpinion: '',
  executionOpinion: ''
});

// 表单引用
const formRef = ref<FormInstance | null>(null);

// 监听项目变化，可自动填充表单项目信息
watch(
  currentProject,
  (newVal) => {
    if (newVal) {
      // 根据实际项目结构调整赋值字段
      formData.projectId = newVal.id || '';
      formData.projectName = newVal.name || '';
    }
  },
  { immediate: true, deep: true }
);
// 通过项目获取子项目 - 监听项目 id 变化，可自动获取子项目
const getSubProject = async () => {
  let res = await subProjectListAll(currentProject.value?.id);
  subProjectList.value = res.data;
  subProjectList.value.forEach((item: any) => {
    subProjectMap.set(item.id, item.projectName);
  });
};
// 验证表单
const validate = async () => {
  if (formRef.value) {
    return await formRef.value.validate();
  }
  return false;
};

// 重置表单
const resetFields = () => {
  if (formRef.value) {
    formRef.value.resetFields();
  }
};

// 获取表单数据
const getFormData = (): FormData => {
  return { ...formData };
};

// 设置表单数据
const setFormData = (data: Partial<FormData>) => {
  Object.assign(formData, data);
};

// 提交表单
const submit = async (businessId, cb) => {
  // 先验证表单
  await formRef.value?.validate();
  cb();
  formData.subprojectName = subProjectMap.get(formData.subprojectId);
  formData.drawingreviewId = businessId;
  const res = await drawingreviewReceipts(formData);
  if (res.code === 200) {
    // // 提交成功处理逻辑
    // console.log('提交成功');
  }
};
onMounted(() => {
  getSubProject();
});
// 暴露方法给父组件（如果需要）
defineExpose({
  validate,
  resetFields,
  getFormData,
  setFormData,
  submit
});
</script>

<style scoped>
/* 表单整体样式 */
.info-form {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

/* 模块容器样式 */
.form-section {
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

/* 最后一个模块去掉底部边框 */
.form-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* 模块标题样式 */
.section-title {
  margin-bottom: 20px;
}

.title-text {
  font-size: 16px;
  font-weight: 600;
  color: #1f2329;
  padding: 0 10px;
  background-color: #fff;
  position: relative;
}

/* 模块内容区域 */
.section-content {
  margin-left: 10px;
}

/* 表单项间距调整 */
::v-deep .el-form-item {
  margin-bottom: 18px;
}

/* 文本域样式优化 */
::v-deep .el-textarea__inner {
  min-height: 100px;
  resize: vertical;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .info-form {
    padding: 15px;
  }

  .form-section {
    margin-bottom: 20px;
  }

  .title-text {
    font-size: 14px;
  }
}
</style>