生命周期:在非编辑状态下,左边的状态列表不显示,中间的图不能拖动。在编辑状态下,左边的生命周期列表不能切换选中项。
| | |
| | | |
| | | <style lang="scss" scoped> |
| | | .item-panel { |
| | | width: 100%; |
| | | width: 210px; |
| | | height: 77vh; |
| | | text-align: center; |
| | | overflow-y: scroll; |
| | |
| | | type: "warning", |
| | | }).then(() => { |
| | | this.$store.dispatch('updateMethodBtn', false); |
| | | this.$store.dispatch('typeChange', ''); |
| | | console.log(this.$s) |
| | | // this.$emit('reset-tree'); // 触发父组件重置 |
| | | }).catch(() => { |
| | | this.$message({ |
| | |
| | | </div> |
| | | <div class="vfe-chart-container"> |
| | | <!-- 左侧项目栏 --> |
| | | <div v-if="type !== 'detail'" class="vfe-chart-sidebar"> |
| | | <editor-item-panel :node-items="chartDataNodeItems"/> |
| | | <div v-if="disabledBtn" class="vfe-chart-sidebar"> |
| | | <editor-item-panel :node-items="chartDataNodeItems"/> |
| | | </div> |
| | | <!-- 主图表 --> |
| | | <div class="vfe-chart-main"> |
| | |
| | | currentSelectedLine: {} |
| | | }; |
| | | }, |
| | | computed: { |
| | | disabledBtn() { |
| | | return this.$store.state.flow.methodBtn; |
| | | } |
| | | }, |
| | | |
| | | mounted() { |
| | | // 组件挂载完成后,自动缩放画布(仅在添加模式下) |
| | |
| | | }, |
| | | // 处理图表数据更改的事件 |
| | | onAfterChange(e) { |
| | | console.log(e) |
| | | try { |
| | | if('edit' === this.$store.state.flow.type){ |
| | | this.$refs.flowChart.propsAPI.remove(e.item); |
| | | if(e.action === 'remove'){ |
| | | this.$message.error('编辑状态下不能切换选中项!'); |
| | | } |
| | | return; |
| | | } |
| | | // 如果添加了节点且节点没有被更改过 |
| | | if (e.action === "add" && e.model.type === "node") { |
| | | if (!e.model.change) { |
| | |
| | | } |
| | | } |
| | | } catch (err) { |
| | | console.log(err) |
| | | // 处理节点 ID 冲突错误 |
| | | if ( |
| | | err.message === |
| | |
| | | .vfe-chart-main { |
| | | position: relative; |
| | | flex: 1; |
| | | max-height: calc(100% - 5px); // fix scroll show |
| | | height: 80vh; // fix scroll show |
| | | width: 65%; |
| | | |
| | | .tooltip { |
| | | position: absolute; |
| | |
| | | position: relative; |
| | | display: flex; |
| | | justify-content: center; |
| | | width: 16%; |
| | | width: 210px; |
| | | background-color: #fafafa; |
| | | border-right: 1px solid #e6e9ed; |
| | | } |
| | | |
| | | .vfe-chart-panel { |
| | | position: relative; |
| | | width: 300px; |
| | | width: 260px; |
| | | background-color: #fafafa; |
| | | border-left: 1px solid #e6e9ed; |
| | | overflow-y: scroll; |
| | |
| | | const flow = { |
| | | state: { |
| | | methodBtn: false, |
| | | editMethodBtn:false, |
| | | type:"", |
| | | }, |
| | | mutations: { |
| | | setMethodBtn(state, value) { |
| | | state.methodBtn = value; |
| | | }, |
| | | |
| | | setEditMethodBtn(state, value) { |
| | | state.methodBtn = value; |
| | | }, |
| | | |
| | | setTypeChange(state,value){ |
| | | state.type = value; |
| | | } |
| | | }, |
| | | actions: { |
| | | // 更新保存 取消按钮 |
| | | updateMethodBtn({commit}, value) { |
| | | commit('setMethodBtn', value); |
| | | }, |
| | | |
| | | editNodesStatus({commit}, value){ |
| | | commit('setEditMethodBtn', value); |
| | | }, |
| | | |
| | | typeChange({commit}, value){ |
| | | commit('setTypeChange', value); |
| | | } |
| | | } |
| | | } |
| | |
| | | addClickHandler() { |
| | | this.$store.dispatch('updateMethodBtn', true); |
| | | this.handleResetTree(); |
| | | this.$store.dispatch('typeChange', 'add'); |
| | | }, |
| | | |
| | | // 修改按钮 |
| | |
| | | return; |
| | | } |
| | | this.$store.dispatch('updateMethodBtn', Object.keys(this.rowData).length > 0); |
| | | this.$store.dispatch('editNodesStatus', true); |
| | | this.$store.dispatch('typeChange', 'edit'); |
| | | }, |
| | | |
| | | // 删除按钮 |
| | |
| | | this.page.total = res.data.total; |
| | | this.loading = false; |
| | | }).catch(err => { |
| | | this.$message.error(err) |
| | | this.$message.error(err); |
| | | }); |
| | | }, |
| | | |