|
|
@@ -0,0 +1,194 @@
|
|
|
+<template>
|
|
|
+ <div class="layout">
|
|
|
+ <div class="tree-container">
|
|
|
+ <el-tree
|
|
|
+ :data="treeData"
|
|
|
+ :props="defaultProps"
|
|
|
+ lazy
|
|
|
+ :load="loadNode"
|
|
|
+ @node-click="handleNodeClick"
|
|
|
+ highlight-current
|
|
|
+ >
|
|
|
+ </el-tree>
|
|
|
+ </div>
|
|
|
+ <div class="form-container">
|
|
|
+ <el-form id="pdfDom" :model="form" :label-width="formLabelWidth">
|
|
|
+ <div class="title">
|
|
|
+ {{ form.methodName || '表单标题' }}
|
|
|
+ </div>
|
|
|
+ <experimental-desc
|
|
|
+ :step="form.step || ''"
|
|
|
+ :criterion="form.criterion || ''"
|
|
|
+ :formulas="form.formulas || []"
|
|
|
+ :references="form.references || []"
|
|
|
+ :readonly="true"
|
|
|
+ />
|
|
|
+ <basic-info :info="form" :readonly="true" />
|
|
|
+ <reagent-info :info="form.reagentPoList" :readonly="true" />
|
|
|
+ <param-info
|
|
|
+ v-if="$utils.isNotEmpty(form.params)"
|
|
|
+ :form-id="formId"
|
|
|
+ :info="form.shiYanCanShu"
|
|
|
+ :config-data="form.params || []"
|
|
|
+ :readonly="true"
|
|
|
+ />
|
|
|
+ <experimental-data
|
|
|
+ :exp="form.jiSuanJieGuo"
|
|
|
+ :form-id="formId"
|
|
|
+ :readonly="true"
|
|
|
+ />
|
|
|
+ <precision
|
|
|
+ v-if="$utils.isNotEmpty(form.jiSuanJieGuo)"
|
|
|
+ :info="form.jiSuanJieGuo"
|
|
|
+ :readonly="true"
|
|
|
+ />
|
|
|
+ <conclusion
|
|
|
+ :result="form.shiYanJieLun"
|
|
|
+ :files="form.fuJian"
|
|
|
+ :readonly="true"
|
|
|
+ />
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getExperimentalTree, getExperimental } from '@/api/business/pv'
|
|
|
+import ExperimentalDesc from './components/experimental-desc'
|
|
|
+import BasicInfo from './components/basic-info'
|
|
|
+import ReagentInfo from './components/reagent-info'
|
|
|
+import ParamInfo from './components/param-info'
|
|
|
+import ExperimentalData from './components/experimental-data'
|
|
|
+import Precision from './report/precision'
|
|
|
+import Conclusion from './components/conclusion'
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ ExperimentalDesc,
|
|
|
+ BasicInfo,
|
|
|
+ ReagentInfo,
|
|
|
+ ParamInfo,
|
|
|
+ ExperimentalData,
|
|
|
+ Precision,
|
|
|
+ Conclusion
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ treeData: [],
|
|
|
+ form: {
|
|
|
+ methodName: '',
|
|
|
+ step: '',
|
|
|
+ criterion: '',
|
|
|
+ formulas: [],
|
|
|
+ references: [],
|
|
|
+ reagentPoList: [],
|
|
|
+ params: [],
|
|
|
+ shiYanCanShu: {},
|
|
|
+ jiSuanJieGuo: {},
|
|
|
+ shiYanJieLun: '',
|
|
|
+ fuJian: ''
|
|
|
+ },
|
|
|
+ formId: null,
|
|
|
+ formLabelWidth: '110px',
|
|
|
+ defaultProps: {
|
|
|
+ label: 'name',
|
|
|
+ children: 'children',
|
|
|
+ isLeaf: 'isLeaf'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async loadNode(node, resolve) {
|
|
|
+ const level = node.level
|
|
|
+ const params = { level: level + 1 } // 要加载的是下一层
|
|
|
+
|
|
|
+ // 构建路径参数
|
|
|
+ if (level >= 1) {
|
|
|
+ const pathNames = this.getNodePathNames(node)
|
|
|
+
|
|
|
+ // 根据层级设置对应的name参数
|
|
|
+ for (let i = 0; i < level; i++) {
|
|
|
+ if (pathNames[i]) {
|
|
|
+ params[`name${i + 1}`] = pathNames[i]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ try {
|
|
|
+ const response = await getExperimentalTree(params)
|
|
|
+ const children = response.data.map((item) => ({
|
|
|
+ id: item.id || item.name,
|
|
|
+ name: item.name,
|
|
|
+ isLeaf: level + 1 === 5 // 第五层是叶子节点
|
|
|
+ }))
|
|
|
+ resolve(children)
|
|
|
+ } catch (error) {
|
|
|
+ console.error('Failed to fetch tree data:', error)
|
|
|
+ resolve([])
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取从根节点到当前节点的路径名称数组
|
|
|
+ getNodePathNames(node) {
|
|
|
+ const pathNames = []
|
|
|
+ let currentNode = node
|
|
|
+
|
|
|
+ // 从当前节点向上遍历到根节点
|
|
|
+ while (currentNode && currentNode.level > 0) {
|
|
|
+ pathNames.unshift(currentNode.data.name)
|
|
|
+ currentNode = currentNode.parent
|
|
|
+ }
|
|
|
+
|
|
|
+ return pathNames
|
|
|
+ },
|
|
|
+
|
|
|
+ async handleNodeClick(node) {
|
|
|
+ if (node.isLeaf) {
|
|
|
+ // Fetch form data for leaf nodes
|
|
|
+ try {
|
|
|
+ const response = await getExperimental({ id: node.id })
|
|
|
+ this.form = response.data
|
|
|
+ } catch (error) {
|
|
|
+ console.error('Failed to fetch form data:', error)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async created() {
|
|
|
+ try {
|
|
|
+ const response = await getExperimentalTree({ level: 1 })
|
|
|
+ this.treeData = response.data.map((item) => ({
|
|
|
+ id: item.id || item.name,
|
|
|
+ name: item.name,
|
|
|
+ isLeaf: false
|
|
|
+ }))
|
|
|
+ } catch (error) {
|
|
|
+ console.error('Failed to fetch initial tree data:', error)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.layout {
|
|
|
+ display: flex;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.tree-container {
|
|
|
+ width: 210px;
|
|
|
+ border-right: 1px solid #dcdfe6;
|
|
|
+ padding: 10px;
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+.form-container {
|
|
|
+ flex: 1;
|
|
|
+ padding: 20px;
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+.title {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+</style>
|