| | |
| | | <div class="header"> |
| | | <div class="title">菌种传代生产谱系图</div> |
| | | <div class="option-btn"> |
| | | <el-button type="primary" v-if="roleType == 3 || roleType == 1" class="el-icon-plus" @click="addNode" :disabled="editBoolean"> |
| | | <el-button type="primary" v-if="!isReadOnly && (roleType == 3 || roleType == 1)" class="el-icon-plus" @click="addNode" :disabled="editBoolean"> |
| | | 新增</el-button> |
| | | |
| | | <el-button type="primary" v-if="roleType == 3 || roleType == 1" |
| | | <el-button type="primary" v-if="!isReadOnly && (roleType == 3 || roleType == 1)" |
| | | @click="setGenerationPlan" :disabled="editBoolean">设置传代计划数</el-button> |
| | | <el-button type="primary" @click="showDetail">详情</el-button> |
| | | <el-button type="primary" @click="handleEdit" v-if="roleType == 1 || roleType == 3" :disabled="editBoolean">编辑</el-button> |
| | | <el-button type="primary" @click="handleDelete" v-if="roleType == 1 || roleType == 3" :disabled="editBoolean">删除</el-button> |
| | | <el-button type="primary" @click="handleEdit" v-if="!isReadOnly && (roleType == 1 || roleType == 3)" :disabled="editBoolean">编辑</el-button> |
| | | <el-button type="primary" @click="handleDelete" v-if="!isReadOnly && (roleType == 1 || roleType == 3)" :disabled="editBoolean">删除</el-button> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="strain-flow-chart"> |
| | | <div id="mountNode"></div> |
| | | <div ref="mountNode" class="mount-node"></div> |
| | | </div> |
| | | <!-- v-if="!$route.query.id || (roleType == 1 && $route.query.id)" --> |
| | | <div v-if="roleType == 1 || roleType == 3"> |
| | | <div v-if="!isReadOnly && (roleType == 1 || roleType == 3)"> |
| | | <el-button type="primary" @click="handleSubmit('1')" style="width: 150px" :disabled="editBoolean">保存</el-button> |
| | | <el-button type="primary" @click="handleSubmit('2')" style="width: 150px; margin-left: 20px" :disabled="editBoolean">提交</el-button> |
| | | </div> |
| | |
| | | </div> |
| | | </el-form> |
| | | |
| | | <ParentForm ref="parentForm" @addNodeSign="addNodeSign" /> |
| | | <PlanForm ref="planForm" @addNodeSign="addNodeSign" /> |
| | | <AddSublevelForm ref="addSublevelForm" @addNodeSign="addNodeSign" /> |
| | | <AddSublevelPlan ref="addSublevelPlan" @addNodeSign="addNodeSign" /> |
| | | <ConfirmStorageDialog name="接种操作人签字" :visible.sync="confirmStorageDialogVisible" |
| | | <ParentForm :key="pageInstanceKey" ref="parentForm" @addNodeSign="addNodeSign" /> |
| | | <PlanForm :key="pageInstanceKey" ref="planForm" @addNodeSign="addNodeSign" /> |
| | | <AddSublevelForm :key="pageInstanceKey" ref="addSublevelForm" @addNodeSign="addNodeSign" /> |
| | | <AddSublevelPlan :key="pageInstanceKey" ref="addSublevelPlan" @addNodeSign="addNodeSign" /> |
| | | <ConfirmStorageDialog :key="`signature-${pageInstanceKey}`" name="接种操作人签字" :visible.sync="confirmStorageDialogVisible" |
| | | @confirm="handleSignatureConfirm" /> |
| | | <!-- 菌种工程师 --> |
| | | <ConfirmStorageDialog name="菌种保藏人签字" text="是否确认该项菌种信息入库" :visible.sync="storageVisible" |
| | | <ConfirmStorageDialog :key="`storage-${pageInstanceKey}`" name="菌种保藏人签字" text="是否确认该项菌种信息入库" :visible.sync="storageVisible" |
| | | @confirm="handleSignatureConfirm1" /> |
| | | |
| | | <!-- 传代数审批 --> |
| | | <ApprovalCount ref="approvalCount" @addNodeSign="sureApprovalCountSign" /> |
| | | <ApprovalCount :key="`approval-${pageInstanceKey}`" ref="approvalCount" @addNodeSign="sureApprovalCountSign" /> |
| | | |
| | | <chooseProject @submit="getProjectData" :show="showChoose" @close="showChoose = false"></chooseProject> |
| | | <chooseProject :key="`project-${pageInstanceKey}`" @submit="getProjectData" :show="showChoose" @close="showChoose = false"></chooseProject> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | nodeType: "", //1母代 2计划数 3子孙代 |
| | | tableData: [], |
| | | cacheData: null, // 👈 添加这一行 |
| | | activeRouteKey: "", |
| | | graphLoadId: 0, |
| | | pageInstanceKey: 0, |
| | | confirmStorageDialogVisible: false, |
| | | storageVisible: false, |
| | | editBoolean: false, |
| | |
| | | }; |
| | | }, |
| | | computed: { |
| | | isReadOnly() { |
| | | return this.$route.path.includes('detail') || this.$route.query.mode === 'detail'; |
| | | }, |
| | | canAddNode() { |
| | | // 如果没有节点,可以新增母代 |
| | | if (this.graphData.nodes.length === 0) { |
| | |
| | | }, |
| | | }, |
| | | mounted() { |
| | | this.initGraph(); |
| | | this.initEvents(); |
| | | this.resetMountNode(); |
| | | }, |
| | | deactivated() { |
| | | // 缓存数据 |
| | |
| | | newTotal: this.newTotal, |
| | | projectData: JSON.parse(JSON.stringify(this.projectData)), |
| | | treeData: JSON.parse(JSON.stringify(this.treeData)), |
| | | nodeTreeStatus: this.nodeTreeStatus |
| | | nodeTreeStatus: this.nodeTreeStatus, |
| | | routeKey: this.activeRouteKey |
| | | }; |
| | | }, |
| | | activated() { |
| | | if (this.cacheData) { |
| | | if (this.cacheData && this.cacheData.routeKey === this.$route.fullPath) { |
| | | // 恢复数据 |
| | | this.form = JSON.parse(JSON.stringify(this.cacheData.form)); |
| | | this.graphData = JSON.parse(JSON.stringify(this.cacheData.graphData)); |
| | |
| | | this.nodeTreeStatus = this.cacheData.nodeTreeStatus || 1; |
| | | |
| | | // 更新图表 |
| | | this.resetMountNode(); |
| | | if (this.graphData.nodes.length > 0) { |
| | | this.updateGraphData(); |
| | | } |
| | | return; |
| | | } |
| | | this.cacheData = null; |
| | | if (this.$route.query.id) { |
| | | this.reloadData(); |
| | | } else { |
| | | this.resetPageState(); |
| | | } |
| | | if (this.$route.query.status !== undefined && this.$route.query.status != 1 && this.roleType != 1){ |
| | | this.editBoolean = true |
| | |
| | | '$route': { |
| | | immediate: true, |
| | | handler(to) { |
| | | if (!["AddPedigree", "DetailPedigree"].includes(to.name)) { |
| | | return; |
| | | } |
| | | console.log('变动'); |
| | | const routeKey = to.fullPath; |
| | | const routeChanged = this.activeRouteKey && this.activeRouteKey !== routeKey; |
| | | this.activeRouteKey = routeKey; |
| | | if (routeChanged || !to.query.id) { |
| | | this.cacheData = null; |
| | | this.resetPageState(); |
| | | } |
| | | if (to.query.id) { |
| | | this.reloadData(); |
| | | } |
| | | |
| | | this.editBoolean = |
| | | this.roleType != 1 && |
| | | to.query.status != 1; |
| | | this.editBoolean = this.shouldDisableEditing(to.query); |
| | | } |
| | | } |
| | | }, |
| | | beforeDestroy() { |
| | | this.graph?.destroy(); |
| | | window.removeEventListener("resize", this.handleResize); |
| | | this.destroyGraph(); |
| | | }, |
| | | methods: { |
| | | shouldDisableEditing(query = this.$route.query) { |
| | | const status = query && query.status; |
| | | return Number(this.roleType) !== 1 |
| | | && status !== undefined |
| | | && status !== null |
| | | && status !== "" |
| | | && Number(status) !== 1; |
| | | }, |
| | | destroyGraph() { |
| | | window.removeEventListener("resize", this.handleResize); |
| | | if (this.graph && !this.graph.get("destroyed")) { |
| | | this.graph.destroy(); |
| | | } |
| | | this.graph = null; |
| | | |
| | | const container = this.$refs.mountNode; |
| | | if (container) { |
| | | while (container.firstChild) { |
| | | container.removeChild(container.firstChild); |
| | | } |
| | | } |
| | | }, |
| | | resetMountNode() { |
| | | this.destroyGraph(); |
| | | if (!this.$refs.mountNode) return; |
| | | this.initGraph(); |
| | | this.initEvents(); |
| | | }, |
| | | resetPageState() { |
| | | this.pageInstanceKey += 1; |
| | | this.form = { |
| | | strainSourceStart: "", |
| | | strainSourceEnd: "", |
| | | cellBank: "", |
| | | strainCode: "", |
| | | strainName: "", |
| | | remarks: "", |
| | | }; |
| | | this.projectData = []; |
| | | this.tableData = []; |
| | | this.newTableData = []; |
| | | this.total = 0; |
| | | this.current = 1; |
| | | this.size = 10; |
| | | this.newTotal = 0; |
| | | this.newCurrent = 1; |
| | | this.newSize = 10; |
| | | this.queryForm = { pageSize: 10, pageNum: 1 }; |
| | | this.newQueryForm = { pageSize: 10, pageNum: 1 }; |
| | | this.showChoose = false; |
| | | this.dialogVisible = false; |
| | | this.confirmStorageDialogVisible = false; |
| | | this.storageVisible = false; |
| | | this.nodeData = {}; |
| | | this.nodeType = ""; |
| | | this.isAddingNode = false; |
| | | this.showDiscarded = false; |
| | | this.nodeTreeStatus = 1; |
| | | this.editBoolean = this.shouldDisableEditing(); |
| | | this.resetGraphData(); |
| | | this.$nextTick(() => { |
| | | this.$refs.pedigreeForm && this.$refs.pedigreeForm.clearValidate(); |
| | | }); |
| | | }, |
| | | resetGraphData() { |
| | | this.graphLoadId += 1; |
| | | this.graphData = { |
| | | nodes: [], |
| | | edges: [], |
| | | }; |
| | | this.treeData = []; |
| | | this.selectedNode = null; |
| | | this.nodeCount = 0; |
| | | |
| | | if (this.graph) { |
| | | this.graph.changeData({ nodes: [], edges: [] }); |
| | | this.graph.render(); |
| | | } |
| | | }, |
| | | getProjectData(data) { |
| | | this.projectData = [data]; // 将选中的项目组数据存储到数组中 |
| | | this.showChoose = false; |
| | |
| | | ); |
| | | if (this.graphData.nodes[nodeIndex - 1].label === "子代") { |
| | | this.$refs.addSublevelPlan.openInitData({ |
| | | ...nodeModel.data, |
| | | strainSourceStart: this.form.strainSourceStart, |
| | | strainCode1: this.form.strainCode, |
| | | strainName1: this.form.strainName, |
| | | strainSourceEnd: this.form.strainSourceEnd, |
| | | confirmTime: this.form.confirmTime, |
| | | parentId: nodeModel.id, |
| | | formStatus: "editCount", |
| | | generationCount: nodeModel.data.generationCount || nodeModel.planCount, |
| | | formStatus: "edit", |
| | | }); |
| | | } else { |
| | | this.$refs.planForm.openInitData({ |
| | |
| | | strainCode1: this.form.strainCode, |
| | | strainName1: this.form.strainName, |
| | | ...nodeModel.data, |
| | | formStatus: "editCount", |
| | | generationCount: nodeModel.data.generationCount || nodeModel.planCount, |
| | | formStatus: "edit", |
| | | }); |
| | | } |
| | | } |
| | |
| | | } |
| | | }, |
| | | reloadData() { |
| | | this.resetPageState(); |
| | | this.resetMountNode(); |
| | | const graphLoadId = this.graphLoadId; |
| | | const routeKey = this.$route.fullPath; |
| | | this.getList(); |
| | | this.getNewList() |
| | | if (!this.$route.query.id) { |
| | | return |
| | | } |
| | | getDetail({ id: this.$route.query.id }).then((res) => { |
| | | if (graphLoadId !== this.graphLoadId || routeKey !== this.$route.fullPath) { |
| | | return; |
| | | } |
| | | const nodeMap = new Map(); |
| | | const calculateLevel = (node) => { |
| | | if (node.parentId === "0") return 0; |
| | |
| | | // 处理所有节点 |
| | | const processAllNodes = (nodes) => { |
| | | nodes.forEach((node) => { |
| | | if (node.codeStatus == 2 || (node.codeStatus == 1 && this.roleType == 3)) { |
| | | if (Number(this.roleType) === 2 || node.codeStatus == 2 || (node.codeStatus == 1 && Number(this.roleType) === 3)) { |
| | | const processedNode = processNode(node); |
| | | this.graphData.nodes.push(processedNode); |
| | | |
| | |
| | | if (res.code == 200) { |
| | | this.$message.success("编辑成功"); |
| | | this.cacheData = null; // 👈 添加这一行 |
| | | this.$router.back(); |
| | | this.$closeCurrentView('/strain/pedigree-vhart'); |
| | | } |
| | | }); |
| | | return; |
| | |
| | | if (res.code == 200) { |
| | | this.$message.success("保存成功"); |
| | | this.cacheData = null; |
| | | this.$router.back(); |
| | | this.$closeCurrentView('/strain/pedigree-vhart'); |
| | | } |
| | | }); |
| | | } |
| | |
| | | // 实现存草稿逻辑 |
| | | }, |
| | | handleCancel() { |
| | | this.$router.back(); |
| | | this.$closeCurrentView('/strain/pedigree-vhart'); |
| | | }, |
| | | handleSignatureConfirm(signatureImage) { |
| | | this.confirmStorageDialogVisible = false; |
| | |
| | | // 处理提交逻辑 |
| | | }, |
| | | initGraph() { |
| | | const container = document.getElementById("mountNode"); |
| | | const container = this.$refs.mountNode; |
| | | if (!container) return; |
| | | const width = container.scrollWidth; |
| | | const height = container.scrollHeight || 600; |
| | | |
| | |
| | | }); |
| | | |
| | | this.graph = new G6.Graph({ |
| | | container: "mountNode", |
| | | container, |
| | | width, |
| | | height, |
| | | fitView: true, |
| | |
| | | }, |
| | | handleResize() { |
| | | if (this.graph) { |
| | | const container = document.getElementById("mountNode"); |
| | | const container = this.$refs.mountNode; |
| | | if (!container) return; |
| | | const width = container.scrollWidth; |
| | | const height = container.scrollHeight || 600; |
| | | this.graph.changeSize(width, height); |
| | |
| | | } |
| | | } |
| | | |
| | | #mountNode { |
| | | .mount-node { |
| | | flex: 1; |
| | | width: 100%; |
| | | min-height: 500px; |