SeqList.vue

<template>
<div>
  <c-row class="m-swf-message-content-seq-title" >
    <c-col v-if="pattern.cyccnt == 1" :span="1">
      <i class="el-icon-circle-plus-outline" @click="handleAdd"></i>
    </c-col>
    <c-col :span="24">
      {{pattern.desp}}
    </c-col>
  </c-row>
  <div v-for="(item, index) in pattern.seqs" :key="index">
    <message-area :pattern="item" v-bind="$attrs" :seqlist="[...seqlist,{seqlist: pattern.seqlist, status: pattern.status}]">
      <template v-slot:icon>
        <i v-if="index !== 0" class="el-icon-circle-close" @click="handleDelete(index)"></i>
      </template>
    </message-area>
  </div>
  <c-row class="m-swf-message-content-seq-title" >
    <c-col>
      {{pattern.cyccnt==0?`End Of ${pattern.desp}`:pattern.desp.replace(/^[-]+>/,'------|')}}
    </c-col>
  </c-row>
</div>
</template>
<script>
export default {
  name: 'seq-list',
  props: {
    pattern: {
      type: Object,
      default: () => {}
    },
    seqlist: {
      type: Array,
      default: () => []
    }
  },
  data: function () {
    return {}
  },
  methods: {
    handleAdd: function () {
      this.pattern.seqs.push(this.pattern.pattern)
    },
    handleDelete: function (index) {
      this.pattern.seqs.splice(index, 1)
    }
  }
}
</script>
<style>
.m-swf-message-content-seq-title {
  line-height: 30px;
  font-weight: 600;
}
</style>