图纸 优化
This commit is contained in:
381
src/views/design/drawingreview/detailForm.vue
Normal file
381
src/views/design/drawingreview/detailForm.vue
Normal file
@ -0,0 +1,381 @@
|
||||
<template>
|
||||
<el-form ref="formRef" :model="formData" :rules="rules" label-width="120px" class="info-form" @validate="handleValidate">
|
||||
<!-- 基本信息区域 -->
|
||||
<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="datetime"
|
||||
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="datetime" 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="datetime"
|
||||
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 } 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 handleValidate = (prop: string, isValid: boolean, rule: any) => {
|
||||
// 可根据需要处理验证事件
|
||||
console.log(`字段 ${prop} 验证${isValid ? '通过' : '失败'}`);
|
||||
};
|
||||
|
||||
// 验证表单
|
||||
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.id = businessId;
|
||||
const res = await fillOutTheDesignVerificationForm(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>
|
||||
Reference in New Issue
Block a user