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,8 +46,27 @@
        <group-panel :status="status">
          <detail-form type="group" />
        </group-panel>
        <multi-panel :status="status" />
        <canvas-panel :status="status" />
        <node-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>
          </div>
        </node-panel>

        <!-- <multi-panel :status="status" /> -->
        <!-- <canvas-panel :status="status" /> -->
      </template>
    </detail-panel>
  </div>
@@ -74,22 +94,31 @@
    DetailPanel,
    DetailForm,
  },
  props: ["rowData", "existNodes"],
  props: ["rowData", "existNodes", "type"],
  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: [{evenName: '123123'}],
      currentActive: 0
    };
  },
  methods: {
@@ -104,6 +133,9 @@
        });
      });
    },
    editChange(row) {
      this.$set(row, 'isEdit', !row.isEdit)
    }
  },
  watch: {
    rowData: {
@@ -128,3 +160,20 @@
  },
};
</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>