370 lines
11 KiB
Vue
370 lines
11 KiB
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">
|
||
<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-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) => {
|
||
try {
|
||
// 先验证表单
|
||
const isValid = await validate();
|
||
if (isValid) {
|
||
formData.subprojectName = subProjectMap.get(formData.subprojectId);
|
||
formData.drawingreviewId = businessId;
|
||
const res = await drawingreviewReceipts(formData);
|
||
if (res.code === 200) {
|
||
// // 提交成功处理逻辑
|
||
// console.log('提交成功');
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('提交失败:', error);
|
||
}
|
||
};
|
||
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>
|