| | |
| | | <el-form :model="form" :rules="rules" ref="pedigreeForm" label-position="top" class="strain-form"> |
| | | <div class="card"> |
| | | <div class="form-items-row"> |
| | | <el-form-item label="菌种源" prop="strainSource" required> |
| | | <el-form-item label="菌种源" required> |
| | | <div class="flex-row"> |
| | | <div class="input-wrapper"> |
| | | <el-input v-model="form.strainSource" placeholder="请输入" class="fixed-width-input"></el-input> |
| | | <el-form-item prop="strainSourceStart" style="margin-bottom: 0;"> |
| | | <el-input v-model="form.strainSourceStart" placeholder="请输入" class="fixed-width-input"></el-input> |
| | | </el-form-item> |
| | | </div> |
| | | <span class="form-text">代—</span> |
| | | <div class="input-wrapper"> |
| | | <el-input v-model="form.generation" placeholder="请输入" class="fixed-width-input"></el-input> |
| | | <el-form-item prop="strainSourceEnd" style="margin-bottom: 0;"> |
| | | <el-input v-model="form.strainSourceEnd" placeholder="请输入" class="fixed-width-input"></el-input> |
| | | </el-form-item> |
| | | </div> |
| | | <span class="form-text">细胞库</span> |
| | | </div> |
| | |
| | | <div class="strain-flow-chart"> |
| | | <div id="mountNode"></div> |
| | | </div> |
| | | <el-button type="primary" @click="handleSubmit" style="width: 150px;">保存</el-button> |
| | | |
| | | </div> |
| | | <div class="end-btn"> |
| | | <el-button type="primary" @click="handleSubmit">提交</el-button> |
| | | <el-button @click="handleDraft">存草稿</el-button> |
| | | <el-button @click="handleCancel">取消</el-button> |
| | | <!-- <el-button @click="handleDraft">存草稿</el-button> |
| | | <el-button @click="handleCancel">取消</el-button> --> |
| | | </div> |
| | | </el-form> |
| | | |
| | |
| | | return { |
| | | signatureVisible: false, |
| | | form: { |
| | | strainSource: "", |
| | | generation: "", |
| | | strainSourceStart: "", |
| | | strainSourceEnd: "", |
| | | cellBank: "", |
| | | strainNo: "", |
| | | strainName: "", |
| | | remarks: "", |
| | | }, |
| | | rules: { |
| | | strainSource: [ |
| | | strainSourceStart: [ |
| | | { required: true, message: "请输入菌种源", trigger: "blur" }, |
| | | ], |
| | | strainSourceEnd: [ |
| | | { required: true, message: "请输入菌种源", trigger: "blur" }, |
| | | ], |
| | | strainNo: [ |
| | |
| | | }, |
| | | handleSignatureConfirm(signatureImage) { |
| | | this.confirmStorageDialogVisible = false; |
| | | console.log("submit form with signature:", signatureImage); |
| | | if (this.nodeType === 1) { |
| | | this.handleAddParent(this.nodeData) |
| | | this.handleAddParent({ ...this.nodeData, signature: signatureImage.signature }) |
| | | } else if (this.nodeType === 2) { |
| | | this.handleAddPlan(this.nodeData) |
| | | } else if (this.nodeType === 3) { |
| | |
| | | }, |
| | | initEvents() { |
| | | // 监听窗口大小变化 |
| | | window.addEventListener('resize', this.handleResize); |
| | | |
| | | // 节点点击事件 |
| | | this.graph.on('node:click', (evt) => { |
| | | window.addEventListener('resize', this.handleResize);// 添加触摸事件处理 |
| | | const handleNodeClick = (evt) => { |
| | | evt.preventDefault(); // 阻止默认触摸行为 |
| | | const node = evt.item; |
| | | const nodeModel = node.getModel(); |
| | | |
| | | // 如果节点已废弃,不允许任何操作 |
| | | if (!nodeModel.isDiscarded) { |
| | | this.$message.warning('该节点已废弃,不能进行操作'); |
| | | return; |
| | | } |
| | | |
| | | // 更新选中节点 |
| | | this.selectedNode = nodeModel; |
| | | |
| | | // 更新节点选中状态 |
| | | this.graphData.nodes.forEach(n => { |
| | | n.selected = n.id === nodeModel.id; |
| | | }); |
| | | this.graph.changeData(this.graphData); |
| | | }); |
| | | }; |
| | | this.graph.on('node:click', handleNodeClick); |
| | | this.graph.on('node:touchstart', handleNodeClick); |
| | | |
| | | // 画布点击事件,取消选中节点 |
| | | this.graph.on('canvas:click', () => { |
| | | // 画布点击事件,取消选中节点(添加触摸支持) |
| | | const handleCanvasClick = (evt) => { |
| | | evt.preventDefault(); |
| | | this.selectedNode = null; |
| | | this.graphData.nodes.forEach(n => { |
| | | n.selected = false; |
| | | }); |
| | | this.graph.changeData(this.graphData); |
| | | }); |
| | | }; |
| | | |
| | | this.graph.on('canvas:click', handleCanvasClick); |
| | | this.graph.on('canvas:touchstart', handleCanvasClick); |
| | | }, |
| | | handleResize() { |
| | | if (this.graph) { |
| | |
| | | this.$refs.parentForm.openInitData({ |
| | | strainName: this.form.strainName, |
| | | strainNo: this.form.strainNo, |
| | | strainSource: this.form.strainSource, |
| | | generation: this.form.generation, |
| | | strainSourceStart: this.form.strainSourceStart, |
| | | strainSourceEnd: this.form.strainSourceEnd, |
| | | }); |
| | | } |
| | | }) |
| | |
| | | } |
| | | }, |
| | | handleAddParent(value) { |
| | | console.log(value); |
| | | |
| | | const parentId = `parent-${++this.nodeCount}`; |
| | | this.graphData.nodes.push({ |
| | | id: parentId, |
| | |
| | | label: nodeModel.label, |
| | | strainName: this.form.strainName, |
| | | strainNo: this.form.strainNo, |
| | | strainSource: this.form.strainSource, |
| | | generation: this.form.generation, |
| | | strainSourceStart: this.form.strainSourceStart, |
| | | strainSourceEnd: this.form.strainSourceEnd, |
| | | }) |
| | | } else { |
| | | this.$refs.planForm.openInitData({ |
| | |
| | | label: nodeModel.label, |
| | | strainName: this.form.strainName, |
| | | strainNo: this.form.strainNo, |
| | | strainSource: this.form.strainSource, |
| | | generation: this.form.generation, |
| | | strainSourceStart: this.form.strainSourceStart, |
| | | strainSourceEnd: this.form.strainSourceEnd, |
| | | }) |
| | | } |
| | | }, |