| | |
| | | <div class="header"> |
| | | <div class="title">菌种传代生产谱系图</div> |
| | | <div class="option-btn"> |
| | | <el-button type="primary" class="el-icon-plus" @click="addNode" :disabled="editBoolean" v-if="roleType == 3 || roleType == 1"> |
| | | <el-button type="primary" class="el-icon-plus" @click="addNode" :disabled="editBoolean" v-if="!isReadOnly && (roleType == 3 || roleType == 1)"> |
| | | <!-- v-if="$route.query.type != 1" --> |
| | | 新增</el-button> |
| | | <el-button type="primary" v-if="roleType == 3 || roleType == 1" :disabled="editBoolean" |
| | | <el-button type="primary" v-if="!isReadOnly && (roleType == 3 || roleType == 1)" :disabled="editBoolean" |
| | | @click="setGenerationPlan">设置传代计划数</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> |
| | | <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> |
| | | |
| | | <AddAncestor ref="addAncestor" @addNodeSign="addNodeSign" /> |
| | | <PlanForm ref="planForm" @addNodeSign="addNodeSign" /> |
| | | <AddSublevelForm ref="addSublevelForm" @addNodeSign="addNodeSign" /> |
| | | <ConfirmStorageDialog name="接种操作人签字" :visible.sync="confirmStorageDialogVisible" |
| | | <AddAncestor :key="pageInstanceKey" ref="addAncestor" @addNodeSign="addNodeSign" /> |
| | | <PlanForm :key="pageInstanceKey" ref="planForm" @addNodeSign="addNodeSign" /> |
| | | <AddSublevelForm :key="pageInstanceKey" ref="addSublevelForm" @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" /> |
| | | <chooseProject @submit="getProjectData" :show="showChoose" @close="showChoose = false"></chooseProject> |
| | | <ApprovalCount :key="`approval-${pageInstanceKey}`" ref="approvalCount" @addNodeSign="sureApprovalCountSign" /> |
| | | <chooseProject :key="`project-${pageInstanceKey}`" @submit="getProjectData" :show="showChoose" @close="showChoose = false"></chooseProject> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | pageSize: 10, |
| | | pageNum: 1, |
| | | }, |
| | | activeRouteKey: "", |
| | | graphLoadId: 0, |
| | | pageInstanceKey: 0, |
| | | }; |
| | | }, |
| | | computed: { |
| | | isReadOnly() { |
| | | return this.$route.path.includes('detail') || this.$route.query.mode === 'detail'; |
| | | }, |
| | | canAddNode() { |
| | | // 如果没有节点,可以新增母代 |
| | | if (this.graphData.nodes.length === 0) { |
| | |
| | | '$route': { |
| | | immediate: true, |
| | | handler(to) { |
| | | if (!["AddProgenitor", "DetailProgenitor"].includes(to.name)) { |
| | | return; |
| | | } |
| | | console.log('变动'); |
| | | if (to.query.id) { |
| | | const routeKey = to.fullPath; |
| | | const routeChanged = this.activeRouteKey && this.activeRouteKey !== routeKey; |
| | | this.activeRouteKey = routeKey; |
| | | if (routeChanged || !to.query.id) { |
| | | this.resetPageState(); |
| | | } |
| | | if (this.graph && to.query.id) { |
| | | this.reloadData(); |
| | | } |
| | | |
| | | this.editBoolean = |
| | | this.roleType != 1 && |
| | | to.query.status != 1; |
| | | this.editBoolean = this.shouldDisableEditing(to.query); |
| | | } |
| | | } |
| | | }, |
| | | created() { |
| | | if (this.$route.query.status !== undefined && this.$route.query.status != 1 && this.roleType != 1){ |
| | | this.editBoolean = true |
| | | }else { |
| | | this.editBoolean = false |
| | | } |
| | | mounted() { |
| | | this.resetMountNode(); |
| | | if (this.$route.query.id) { |
| | | this.reloadData(); |
| | | } |
| | | }, |
| | | mounted() { |
| | | this.initGraph(); |
| | | this.initEvents(); |
| | | }, |
| | | 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 = { |
| | | strainCode: "", |
| | | strainName: "", |
| | | generationType: "2", |
| | | }; |
| | | 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.editBoolean = this.shouldDisableEditing(); |
| | | this.resetGraphData(); |
| | | this.$nextTick(() => { |
| | | this.$refs.pedigreeForm && this.$refs.pedigreeForm.clearValidate(); |
| | | }); |
| | | }, |
| | | resetGraphData() { |
| | | this.graphLoadId += 1; |
| | | this.graphData = { |
| | | nodes: [], |
| | | edges: [], |
| | | }; |
| | | 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; |
| | |
| | | } |
| | | }, |
| | | async reloadData() { |
| | | this.resetPageState(); |
| | | this.resetMountNode(); |
| | | const graphLoadId = this.graphLoadId; |
| | | const routeKey = this.$route.fullPath; |
| | | await this.getList(); |
| | | await this.getNewList(); |
| | | if (graphLoadId !== this.graphLoadId || routeKey !== this.$route.fullPath) { |
| | | return; |
| | | } |
| | | if (!this.$route.query.id) { |
| | | return |
| | | } |
| | | getDetail({ id: this.$route.query.id }).then((res) => { |
| | | if (graphLoadId !== this.graphLoadId || routeKey !== this.$route.fullPath) { |
| | | return; |
| | | } |
| | | this.projectData = res.tprojectTeamList |
| | | const detailData = res.pedigreeChartParentAllDetailDTO; |
| | | // 设置基础表单数据 |
| | |
| | | // 递归处理节点数据,构建树形结构 |
| | | function processNode(node, parentType = null) { |
| | | // label 逻辑与新增时保持一致 |
| | | let roleType= JSON.parse(sessionStorage.getItem("userInfo")).roleType || 1 |
| | | let roleType= Number(JSON.parse(sessionStorage.getItem("userInfo")).roleType || 1) |
| | | let label = ""; |
| | | if (node.type === 2) { |
| | | label = "传代计划数"; |
| | |
| | | } |
| | | |
| | | if (node.children && node.children.length > 0) { |
| | | // 根据子节点的 codeStatus 和 roleType 决定是否处理子节点 |
| | | // codeStatus == 2: 处理 |
| | | // codeStatus == 1 且 roleType == 3: 处理 |
| | | // codeStatus == 1 且 roleType != 3: 不处理(过滤掉) |
| | | // 审批人需要查看完整谱系,包括仍处于保存状态的节点。 |
| | | processedNode.children = node.children |
| | | .filter((child) => child.codeStatus == 2 || (child.codeStatus == 1 && roleType == 3)) |
| | | .filter((child) => roleType === 2 || child.codeStatus == 2 || (child.codeStatus == 1 && roleType === 3)) |
| | | .map((child) => processNode(child, node.type)); |
| | | } |
| | | return processedNode; |
| | |
| | | edit({ ...baseData, id: this.$route.query.id }).then((res) => { |
| | | if (res.code == 200) { |
| | | this.$message.success("编辑成功"); |
| | | this.$router.back(); |
| | | this.$closeCurrentView('/strain/pedigree-vhart'); |
| | | } |
| | | }); |
| | | return; |
| | |
| | | add(baseData).then((res) => { |
| | | if (res.code == 200) { |
| | | this.$message.success("保存成功"); |
| | | 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; |