<!-- 标准装置台账信息详情 --> <script name="StandardBookInfoDetail" lang="ts" setup> import type { Ref } from 'vue' import type { FormInstance, FormRules, TabPaneName, TabsPaneContext, UploadProps, UploadUserFile } from 'element-plus' import { ElLoading, ElMessage, ElMessageBox } from 'element-plus' import type { IForm } from './book-interface' import bookBasic from './components/basic.vue' import bookStandard from './components/standard.vue' import bookPerson from './components/person.vue' import bookProject from './components/project.vue' import bookGrade from './components/grade.vue' import bookCertificate from './components/certificate.vue' import bookCheckRecord from './components/checkRecord.vue' import bookChangeRecord from './components/changeRecord.vue' import bookApprovalRecord from './components/approvalRecord.vue' const textMap: { [key: string]: string } = { edit: '编辑', add: '新建', detail: '详情', }// 页面类型字典 const $router = useRouter() // 路由实例 const ruleFormRef = ref<FormInstance>() // 表单ref const loading = ref(false) // 表单加载状态 const pageType = ref('add') // 页面类型: add, edit, detail const infoId = ref('') // id // -------------------------------------标签-------------------------------------------------- const radioMenus = ref([ // 标签内容 { name: '基本信息', value: 'book-basic' }, { name: '标准配套设备', value: 'book-standard' }, { name: '计量人员', value: 'book-person' }, { name: '开展的检定或校准项目', value: 'book-project' }, { name: '量值溯源与传递等级', value: 'book-grade' }, { name: '标准证书', value: 'book-certificate' }, { name: '核查记录', value: 'book-check-record' }, { name: '技术指标修改记录', value: 'book-change-record' }, { name: '审批记录', value: 'book-approval-record' }, ]) const current = ref('book-basic') // 选择的tab 默认基本信息 // 点击标签 const clickTab = () => { console.log(current.value) } // -----------------------------------路由参数------------------------------------------------- // 从路由中获取页面类型参数 const $route = useRoute() if ($route.params && $route.params.type) { pageType.value = $route.params.type as string if ($route.params.id) { infoId.value = $route.params.id as string } } // ---------------------------------右上角按钮(操作表单)------------------------------------------ // 点击关闭 const close = () => { $router.back() } // 点击提交 const handleSubmit = () => {} /** * 点击保存 * @param ruleFormRef 基本信息表单ref */ function saveForm(ruleFormRef: FormInstance | undefined) { if (!ruleFormRef) { return } ruleFormRef.validate((valid, fields) => { if (valid) { // 基本信息表单通过校验 ElMessageBox.confirm( '确认保存吗?', '提示', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning', }, ).then(() => { // 调保存接口 }) } }) } // ------------------------------------------------------------------------------------------- </script> <template> <app-container> <detail-page v-loading="loading" :title="`标准装置台账信息--${textMap[pageType]}`"> <template #btns> <el-button v-if="pageType !== 'detail'" type="primary"> 提交 </el-button> <el-button v-if="pageType !== 'detail'" type="primary"> 保存 </el-button> <el-button type="info" @click="close"> 关闭 </el-button> </template> <el-radio-group v-model="current"> <el-radio-button v-for="item in radioMenus" :key="item.value" :label="item.value"> {{ item.name }} </el-radio-button> </el-radio-group> <!-- <el-tabs v-model="current" type="card" @tab-change="clickTab"> <el-tab-pane v-for="item in tabMenus" :key="item.value" :label="item.name" :name="item.value" /> </el-tabs> --> </detail-page> <!-- 基本信息 --> <book-basic v-if="current === 'book-basic'" :page-type="pageType" /> <!-- 标准配套设备 --> <book-standard v-if="current === 'book-standard'" :page-type="pageType" /> <!-- 计量人员 --> <book-person v-if="current === 'book-person'" :page-type="pageType" /> <!-- 开展的检定或校准项目 --> <book-project v-if="current === 'book-project'" :page-type="pageType" /> <!-- 量值溯源与传递等级 --> <book-grade v-if="current === 'book-grade'" :page-type="pageType" /> <!-- 标准证书 --> <book-certificate v-if="current === 'book-certificate'" :page-type="pageType" /> <!-- 核查记录 --> <book-check-record v-if="current === 'book-check-record'" :page-type="pageType" /> <!-- 技术指标修改记录 --> <book-change-record v-if="current === 'book-change-record'" :page-type="pageType" /> <!-- 审批记录 --> <book-approval-record v-if="current === 'book-approval-record'" :page-type="pageType" /> </app-container> </template>