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

@@ -11,13 +11,14 @@
        <el-form-item label="名称" prop="name">
          <el-input v-model.trim="newRowData.name" :maxLength="20" clearable />
        </el-form-item>
        <el-form-item label="标签" prop="id">
        <el-form-item label="编号" prop="id">
          <el-input v-model.trim="newRowData.id" clearable />
        </el-form-item>
        <el-form-item label="起始状态" prop="startStatus">
          <el-select
            v-model="newRowData.startStatus"
            placeholder="请选择起始状态"
            :disabled="type === 'edit'"
            style="width: 100%"
          >
            <el-option
@@ -45,14 +46,34 @@
        <group-panel :status="status">
          <detail-form type="group" />
        </group-panel>
        <multi-panel :status="status" />
        <canvas-panel :status="status" />
        <!-- <edge-panel :status="status">
          <div class="event">
            <hr />
            <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>
        </edge-panel> -->
      </template>
    </detail-panel>
  </div>
</template>

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

import {
  NodePanel,
  EdgePanel,
@@ -74,23 +95,37 @@
    DetailPanel,
    DetailForm,
  },
  props: ["rowData", "existNodes"],
  props: ["rowData", "existNodes", "existEdges", "type", "currentSelectedLine"],
  data() {
    return {
      newRowData: {
        startStatus: undefined,
        name: undefined,
        id: undefined,
        remark: undefined
        remark: undefined,
      },
      rules: {
        name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
        id: [{ required: true, message: "标签不能为空", trigger: "blur" }],
        id: [
          { required: true, message: "标签不能为空", trigger: "blur" },
          {
            pattern: /^[A-z]+$/g,
            message: "标签只能输入英文",
            trigger: "blur",
          },
        ],
        startStatus: [
          { required: true, message: "起始状态不能为空", trigger: "change" },
        ],
      },
      eventList: [],
      saveEventList: [],
      edgeEventList: {},
      currentActive: 0,
    };
  },
  created() {
    this.getEventList();
  },
  methods: {
    getNewRowDate() {
@@ -102,6 +137,13 @@
            resolve(this.newRowData);
          }
        });
      });
    },
    getEventList() {
      API.getEventList().then((res) => {
        if (res.data.code === 200) {
          this.eventList = res.data.data;
        }
      });
    },
  },
@@ -125,6 +167,42 @@
        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>
<style lang="scss" scoped>
.event {
  margin-top: 20px;
  text-align: center;
}
.flex {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}
.red {
  color: red;
}
.active {
  // box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4)
}
</style>