From 24fa2e63f7c155c87457980e6c656f3891132a47 Mon Sep 17 00:00:00 2001 From: ludc Date: 星期三, 14 八月 2024 16:28:26 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- Source/plt-web/plt-web-ui/src/views/modelingMenu/modeling/lifeCycle/index.vue | 451 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 448 insertions(+), 3 deletions(-) diff --git a/Source/plt-web/plt-web-ui/src/views/modelingMenu/modeling/lifeCycle/index.vue b/Source/plt-web/plt-web-ui/src/views/modelingMenu/modeling/lifeCycle/index.vue index d3ee2bc..719c75d 100644 --- a/Source/plt-web/plt-web-ui/src/views/modelingMenu/modeling/lifeCycle/index.vue +++ b/Source/plt-web/plt-web-ui/src/views/modelingMenu/modeling/lifeCycle/index.vue @@ -1,13 +1,458 @@ <template> - <p>鐢熷懡鍛ㄦ湡</p> + <el-container> + <el-aside width="15.7%"> + <basic-container> + <div ref="TreeBox" style="height: calc(100vh - 144px);!important;"> + <div class="headerCon"> + <el-button icon="el-icon-plus" plain size="small" type="primary" @click="addClickHandler">鍒涘缓 + </el-button> + <el-button icon="el-icon-edit" plain size="small" type="primary" @click="editClickHandler">淇敼 + </el-button> + <el-button icon="el-icon-delete" plain size="small" type="danger" @click="delClickHandler">鍒犻櫎 + </el-button> + <el-button icon="el-icon-download" plain size="small" type="primary" @click="exportClickHandler">瀵煎嚭 + </el-button> + <el-button icon="el-icon-upload2" plain size="small" type="primary" @click="uploadClickHandler">瀵煎叆 + </el-button> + <el-button class="smallBtn" plain size="small" type="primary" + @click="checkViewClickHandler">鏌ョ湅浣跨敤鑼冨洿 + </el-button> + </div> + <!-- 宸︿晶鏍� --> + <div style="height: calc(100vh - 300px);"> + <avue-tree ref="tree" :data="treeData" :option="treeOption" @node-click="nodeClick"> + <span slot-scope="{ node, data }" class="el-tree-node__label"> + <span style="font-size: 15px"> + <i class="el-icon-s-promotion"></i> + {{ (node || {}).label }} + </span> + </span> + </avue-tree> + </div> + </div> + </basic-container> + </el-aside> + <el-main> + <basic-container> + <CycleFlow + :key="Reload" + ref="vueFlowchartEditor" + :chart-data="nodesEdgesData" + :chart-data-node-items="flowChartNodeItems" + :rowData="rowData" + :type="type" + class="cycle_flow" + @save-data="save" + @reset-tree="handleResetTree" + @handler-save="handlerSave" + /> + </basic-container> + </el-main> + <upload-file ref="upload" :fileType="upFileType" :fileUrl="fileUrl" :tipList="tipList" title="瀵煎叆" + @updata="getTableList"></upload-file> + + <el-dialog + v-dialogDrag + v-loading="checkViewLoading" + :visible.sync="checkViewVisible" + append-to-body="true" + class="avue-dialog" + title="鏌ョ湅浣跨敤鑼冨洿" + width="60%" + > + <avue-crud + ref="checkViewCrud" + :data="checkViewData" + :option="checkViewOption" + @search-change="checkHandleSearch" + @search-reset="checkHandleReset" + > + + </avue-crud> + </el-dialog> + </el-container> </template> <script> +import { + gridLifeCycle, + getLCEventKeys, + addLifeCycle, + updateLifeCycle, + deleteLifeCycles, + exportLifeCycles, + getUsedLifeCycleList +} from '@/api/modeling/lifeCycle/api'; +import {gridStatus} from '@/api/modeling/statusPool/api' +import CycleFlow from "@/components/flow-cycle/flowchartEditor.vue"; +import func from "@/util/func"; +import basicOption from "@/util/basic-option"; + export default { - name: "index" + name: "index", + components: {CycleFlow}, + data() { + return { + checkViewOption: { + ...basicOption, + addBtn: false, + menu: false, + searchMenuSpan: 8, + refreshBtn: false, + selection: false, + column: [ + { + label: '鍚嶇О', + prop: 'lifeCycleName', + sortable: true, + }, + { + label: '鏉ユ簮', + prop: 'source', + sortable: true, + search: true + }, + { + label: '璇存槑', + prop: 'desc', + } + ] + }, + checkViewData: [], + checkViewDataSearch: [], + checkViewVisible: false, + checkViewLoading: false, + tipList: [ + "鍚嶇О銆佹爣绛俱�佽捣濮嬬姸鎬佷笉鑳戒负绌猴紝涓斿悕绉板彧鑳戒负鑻辨枃瀛楃", + "娉ㄦ剰閰嶇疆杩炴帴绾胯捣濮嬬姸鎬佷互鍙婄洰鏍囩姸鎬佸悕绉�", + ], + upFileType: ['xls', 'xlsx'], + fileUrl: 'api/lifeCycleController/importLifeCycles', + eventList: [], + Reload: Math.random(), + flowKey: null, + visible: false, + type: 'edit', + nodesEdgesData: {}, + flowChartNodeItems: [], // 娴佺▼鑺傜偣鏁版嵁 + rowData: {}, + treeData: [], + treeOption: { + height: 'auto', + defaultExpandAll: false, + menu: false, + addBtn: false, + props: { + label: 'id', + value: 'id', + children: 'children' + } + }, + } + }, + created() { + this.createdHandler(); + }, + methods: { + // 宸︿晶鏍戞煡璇� + getTreeList() { + gridLifeCycle().then(res => { + const data = res.data.data; + this.treeData = data; + }).catch(err => { + this.$message.error(err) + }); + }, + + // 鐢熷懡鍛ㄦ湡鐘舵�佹煡璇� + getStatusList() { + gridStatus().then(res => { + const data = res.data.data.map(item => { + return { + id: item.id, + name: item.name + } + }) + this.flowChartNodeItems = data; + }).catch(err => { + this.$message.error(err) + }); + }, + + // 璺冭縼浜嬩欢鏌ヨ + getEventsSelect() { + getLCEventKeys().then(res => { + const data = res.data.data; + this.eventList = data; + }).catch(err => { + this.$message.error(err) + }); + }, + + // 鍒锋柊鏁翠釜椤甸潰鏁版嵁 + createdHandler() { + this.getTreeList(); // 鏍戞煡璇� + this.getStatusList(); // tag鐘舵�佹睜鏌ヨ + this.getEventsSelect(); // 璺冭縼浜嬩欢鏌ヨ + }, + + // 琛岀偣鍑� + nodeClick(row) { + console.log(row); + this.nodesEdgesData = { + nodes: this.transformNodeData(row.bounds), + edges: this.transformEdgeData(row.lines) + }; + this.rowData = {...row, eventList: {...this.eventList}}; + this.$store.dispatch('updateMethodBtn', false); + this.Reload = Math.random(); // 鍒锋柊flow鍥捐〃 + }, + + // node鑺傜偣鏁版嵁杞崲 + transformNodeData(nodes) { + return nodes.map(item => ({ + ...item, + label: item.name, + id: item.name, + color: '#1890FF', + shape: "flow-rect", + x: Number(item.cellx), + y: Number(item.celly), + width: Number(item.cellw), + height: Number(item.cellh) + })); + }, + + // line杩炴帴绾挎暟鎹浆鎹� + transformEdgeData(edges) { + return edges.map(item => ({ + ...item, + events: item.events.map(item => item.oid), // 璺冭縼浜嬩欢涓嬫媺妗嗙粦瀹氾紝鍦‵lowchartEditor缁勪欢onAfterItemSelected鏂规硶閲屾煡鎵惧埌瀵瑰簲杩炴帴绾跨殑淇℃伅 + label: item.name, // 鐢ㄤ簬鍙充晶璇︾粏淇℃伅鍚嶇О + source: item.sourceLifeStatus, + target: item.targetLifeStatus + })); + }, + + // 鍒涘缓鎸夐挳 + addClickHandler() { + this.$store.dispatch('updateMethodBtn', true); + this.handleResetTree(); + this.$store.dispatch('typeChange', 'add'); + }, + + // 淇敼鎸夐挳 + editClickHandler() { + if (func.isEmptyObject(this.rowData)) { + this.$message.error('璇疯嚦灏戦�夋嫨涓�鏉℃暟鎹�'); + return; + } + this.$store.dispatch('updateMethodBtn', Object.keys(this.rowData).length > 0); + this.$store.dispatch('editNodesStatus', true); + this.$store.dispatch('typeChange', 'edit'); + }, + + // 鍒犻櫎鎸夐挳 + delClickHandler() { + if (func.isEmptyObject(this.rowData)) { + this.$message.error('璇疯嚦灏戦�夋嫨涓�鏉℃暟鎹�'); + return; + } + const {id, oid, ts} = this.rowData; + + const data = [{id, oid, ts}]; + deleteLifeCycles(data).then(res => { + if (res.data.code === 200) { + this.$message.success(res.data.obj); + this.handleResetTree(); + this.createdHandler(); + this.$store.dispatch('updateMethodBtn', Object.keys(this.rowData).length > 0); + } + }); + }, + + // 瀵煎嚭鎸夐挳 + exportClickHandler(){ + if (func.isEmptyObject(this.rowData)) { + this.$message.error('璇疯嚦灏戦�夋嫨涓�鏉℃暟鎹�'); + return; + } + exportLifeCycles({lcNames:this.rowData.id}).then(res => { + func.downloadFileByBlobHandler(res); + this.$message.success('瀵煎嚭鎴愬姛'); + }).catch(err => { + this.$message.error(err); + }) + }, + + // 瀵煎叆鎸夐挳 + uploadClickHandler(){ + this.$refs.upload.visible = true; + }, + + // 鏌ョ湅浣跨敤鑼冨洿鎸夐挳 + checkViewClickHandler(){ + if (func.isEmptyObject(this.rowData)) { + this.$message.error('璇疯嚦灏戦�夋嫨涓�鏉℃暟鎹�'); + return; + } + + getUsedLifeCycleList({lifeCycleName:this.rowData.id}).then(res => { + if (res.data.code === 200) { + this.checkViewVisible = true; + this.checkViewData = res.data.data; + this.checkViewDataSearch = res.data.data; + } + }) + }, + + // 鏌ョ湅浣跨敤鑼冨洿鏌ヨ + checkHandleSearch(params, done) { + const {source} = params; + + if (!params.source) { + this.checkViewData = this.checkViewDataSearch; + return done(); + } + ; + + this.checkViewData = this.checkViewData.filter(item => { + return item.source && item.source.includes(source); + }); + + done(); + + }, + + // 鏌ョ湅浣跨敤鑼冨洿閲嶇疆 + checkHandleReset() { + this.checkViewData = this.checkViewDataSearch; + }, + + // 瀛愮粍浠跺洖璋冧繚瀛� + async handlerSave() { + const newRowData = await this.$refs.vueFlowchartEditor.getNewRowData(); + if (!newRowData) { + return; + } + + const flowData = await this.$refs.vueFlowchartEditor.getFlowData() || {}; + + const nodes = flowData.nodes || []; + const edges = flowData.edges || []; + + // 妫�鏌ユ槸鍚︾粯鍒朵簡鑷冲皯涓�涓浘褰� + if (nodes.length <= 0) { + this.$message.error('璇疯嚦灏戠粯鍒朵竴涓浘褰紒'); + return; + } + + // 妫�鏌ユ槸鍚︾粯鍒朵簡杩炴帴绾� + if (nodes.length > 1 && !edges.length) { + this.$message.error('璇锋鏌ユ槸鍚︾粯鍒惰繛鎺ョ嚎锛�'); + return; + } + + // 妫�鏌ユ墍鏈夎繛鎺ョ嚎鐨勫悕绉版槸鍚﹀~鍐� + const hasValidLabels = edges.every(item => item.label && item.label.trim() !== ""); + if (!hasValidLabels) { + this.$message.error('璇锋鏌ユ槸鍚︽湁杩炴帴绾垮悕绉版湭濉啓锛�'); + return; + } + + // 妫�鏌ユ槸鍚︽湁閬楁紡鐨勮繛鎺ョ嚎 + if (edges.length + 1 < nodes.length) { + this.$message.error('璇锋鏌ユ槸鍚﹀叏閮ㄧ粯鍒惰繛鎺ョ嚎锛�'); + return; + } + + + let params = {...newRowData, ...flowData}; + const transformedData = { + id: params.id, + name: params.name, + startStatus: params.startStatus, + startStatusName: params.startStatusName, + description: params.description, + bounds: params.nodes.map(node => ({ + name: node.id, + cellx: String(node.x), + celly: String(node.y), + cellw: String(node.width), + cellh: String(node.height), + })), + lines: !params.edges ? [] : params.edges.map(edge => ({ + sourceLifeStatus: edge.source, + targetLifeStatus: edge.target, + saveEventList: edge.saveEventList, + name: edge.label + })) + }; + const getFunction = Object.keys(this.rowData).length > 0 ? () => updateLifeCycle(transformedData) + : () => addLifeCycle(transformedData); + + getFunction().then(res => { + if (res.data.code === 200) { + this.$message.success(res.data.obj); + this.createdHandler(); + // this.handleResetTree(); + this.$store.dispatch('updateMethodBtn', Object.keys(this.rowData).length > 0); + } + }); + }, + + // 閲嶇疆鏍戝拰鍥捐〃 + handleResetTree() { + this.$refs.tree.setCurrentKey(null); + this.rowData = {}; + this.nodesEdgesData = {}; + this.Reload = Math.random(); + } + } } </script> -<style scoped> +<style lang="scss" scoped> +::v-deep { + .el-scrollbar__wrap { + overflow: auto !important; + } + .headerCon{ + .el-button { + width: 65px; + padding-left: 9.5px; + } + } +} + +.headerCon { + display: flex; + flex-wrap: wrap; + margin-bottom: 5px; + + .el-button + .el-button { + margin-left: 5px; + } + + .el-button { + margin-top: 5px; + } +} + +.headerCon > .el-button:nth-child(4) { + margin-left: 0; +} + +//.headerCon > .el-button:nth-child(6) { +// margin-left: 0; +//} + +.smallBtn { + width: 77px !important; + //font-size: 11px !important; + text-align: center !important; + padding-left: 1px !important; +} </style> + -- Gitblit v1.9.3