Source/UBCS-WEB/src/components/flow-cycle/components/DetailPanel.vue

@@ -46,33 +46,34 @@
        <group-panel :status="status">
          <detail-form type="group" />
        </group-panel>
        <node-panel :status="status">
        <!-- <edge-panel :status="status">
          <div class="event">
            <hr />
            <div class="btn_box">
              <el-button type="primary" size="mini">新增</el-button>
              <el-button type="danger" size="mini">删除</el-button>
              <el-button type="primary" size="mini">保存</el-button>
            </div>
              <div  class="flex" v-for="(item, index) in eventList" :key="index" :class="{active: index === currentActive}">
                <el-select size="mini" style="width: 70%" v-if="item.isEdit">
                  <el-option></el-option>
                </el-select>
                <span v-else style="width: 70%">{{item.evenName}}</span>
                <el-button size="mini" type="text" class="red">删除</el-button>
                <el-button size="mini" type="text" @click="editChange(item)">{{item.isEdit ? '暂存' : '编辑'}}</el-button>
              </div>
            <h4>跃迁事件</h4>
            <el-select
              size="mini"
              style="width: 100%"
              value-key="oid"
              v-model="saveEventList"
              multiple
            >
              <el-option
                v-for="itm in eventList"
                :key="itm.oid"
                :value="itm"
                :label="itm.eventShowName"
              ></el-option>
            </el-select>
          </div>
        </node-panel>

        <!-- <multi-panel :status="status" /> -->
        <!-- <canvas-panel :status="status" /> -->
        </edge-panel> -->
      </template>
    </detail-panel>
  </div>
</template>

<script>
import API from "@/api/modeling/cycle";

import {
  NodePanel,
  EdgePanel,
@@ -94,7 +95,7 @@
    DetailPanel,
    DetailForm,
  },
  props: ["rowData", "existNodes", "type"],
  props: ["rowData", "existNodes", "existEdges", "type", "currentSelectedLine"],
  data() {
    return {
      newRowData: {
@@ -117,9 +118,14 @@
          { required: true, message: "起始状态不能为空", trigger: "change" },
        ],
      },
      eventList: [{evenName: '123123'}],
      currentActive: 0
      eventList: [],
      saveEventList: [],
      edgeEventList: {},
      currentActive: 0,
    };
  },
  created() {
    this.getEventList();
  },
  methods: {
    getNewRowDate() {
@@ -133,9 +139,13 @@
        });
      });
    },
    editChange(row) {
      this.$set(row, 'isEdit', !row.isEdit)
    }
    getEventList() {
      API.getEventList().then((res) => {
        if (res.data.code === 200) {
          this.eventList = res.data.data;
        }
      });
    },
  },
  watch: {
    rowData: {
@@ -157,6 +167,25 @@
        this.newRowData.startStatus = undefined;
      }
    },
    currentSelectedLine: {
      deep: true,
      handler(newV) {
        if (newV.id) {
          if (this.edgeEventList[newV.id]) {
            this.saveEventList = this.edgeEventList[newV.id]
          } else {
            this.edgeEventList[newV.id] = []
            this.saveEventList = []
          }
        }
      }
    },
    saveEventList: {
      deep: true,
      handler(newV) {
        this.edgeEventList[this.currentSelectedLine.id] = newV
      }
    }
  },
};
</script>
@@ -174,6 +203,6 @@
  color: red;
}
.active {
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4)
  // box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4)
}
</style>