接上文，这篇会用到Vue组件里的一些知识
要实现策略里面各个按钮及其功能。如下图所示

html代码很简单如下，一个div标签下四个button按钮

<div style="display: flex;flex-direction: row;justify-content: center;margin: 8px 0;">
          <button
            :disabled="!strategy.previous"
            class="wide shadowed white"
            @click="handleClickEvent('up')">
            <i class="fa fa-caret-up"/> 上移
          </button>
          <button
            :disabled="!strategy.next"
            class="wide shadowed white"
            @click="handleClickEvent('down')">
            <i class="fa fa-caret-down"/>下移
          </button>
          <button
            class="wide warning reversed"
            @click="handleClickEvent('delete')">
            <i class="fa fa-trash-o"/> 删除策略
          </button>
          <button
            class="wide theme-primary "
            @click="handleClickEvent('update')"
          ><i class="fa fa-floppy-o"/> 保存
          </button>
</div>

这个地方js逻辑也不难，都调用handleClickEvent函数，不同按钮传入不同参数进行不同操作。

handleClickEvent(event) {
        switch (event) {
          case 'update': {
            this.$emit('update', this.id, this.convertConditionValue())
            break;
          };
          case 'delete': {
            var context = this;
            Handler.show(null, "此操作不可撤销，确定删除吗？", [
              {
                text: "确定", clazz: "wider warning", action:function () {
                  context.$emit('delete', context.strategy)
                }
              },
              {
                text: "取消", clazz: "wider white", action: function () {}
              }
            ])
            break;
          };
          case 'up': {
            this.$emit('up')
            break;
          };
          case 'down': {
            this.$emit('down')
            break;
          };
        }
      },

其余三个都是直接this.$emit()，只有保存按钮里面有convertConditionValue函数。这个最后展示代码，主要是作为参数传递用来对选择的条件进行保存。
如何传到父组件中，通过这个方法实现通信。

<StrategyCard
      v-for="(strategy , index) in allStrategy"
      :strategy="strategy"
      :key="index"
      :id="index"
      :conditions-map="strategy.validateConditionDTOS"
      @update="updateStrategy"
      @delete="deleteStrategy"
      @up="strategyUp(strategy)"
      @down="strategyDown(strategy)">
</StrategyCard>

methods:{
      loadAllStrategy,
      createStrategy,
      deleteStrategy,
      updateStrategy,
      strategyUp,
      strategyDown,
      strategyMid
    }

  let updateStrategy = async function(index , valueConditionList){
    let context = this
    let currentStrategy = context.allStrategy[index]
    let body = {
        "flightImportStrategy": {
          "id":currentStrategy.flightImportStrategy.id,
          "createTime":new Date().toISOString(),
          "priority": currentStrategy.flightImportStrategy.priority,
          "active": currentStrategy.flightImportStrategy.active,
          "imported": currentStrategy.flightImportStrategy.imported,
        },
        "validateConditionDTOS": valueConditionList
    }
    await UPDATEFLIGHTSTRATEGY(body).then(data=>{
      if(data){
        Handler.show(null, "保存成功", {
          ok: function () {}
        }, true)
        context.loadAllStrategy()
      }
    })
  }
  let deleteStrategy = async function(strategy){
    let context = this
    let id = strategy.flightImportStrategy.id

    await DELETEFLIGHTSTRATEGY(id).then(data =>{
      if(data){
        context.loadAllStrategy()
      }
    })
  }

  let strategyUp = async function (strategy) {
    let context = this
    console.log("up")
    console.log(strategy)
    let id1 = strategy.flightImportStrategy.id
    let id2 = strategy.previous
    await UPORDOWNFLIGHTSTRATEGY(id1, id2).then(
      data => {
        if(data){
          context.loadAllStrategy()
        }
      }
    )
  }

  let strategyDown = async function (strategy) {
    let context = this
    console.log("down")
    console.log(strategy)
    let id1 = strategy.flightImportStrategy.id
    let id2 = strategy.next
    await UPORDOWNFLIGHTSTRATEGY(id1, id2).then(
      data => {
        if(data){
          context.loadAllStrategy()
        }
      }
    )
  }

vue中子组件跟父组件通信this.$emit()的使用可以参考
https://www.cnblogs.com/tianku/p/12576141.html

convertConditionValue函数代码

let convertConditionValue = function () {
    let valueUpdateArray = []
    let context = this;
    for (let key in context.tempConditions) {
      if (context.conditions[key] && context.tempConditions[key].value) {
        if (context.tempConditions[key].type == 'Time') {
          let valueArray = new Array()
          valueArray.push(context.convertHourMinuteToISO(context.tempConditions[key].value))
          valueUpdateArray.push({
            "conditionType": key,
            "conditionValues": valueArray
          })
        } else if (context.tempConditions[key].type == 'Array') {
          valueUpdateArray.push({
            "conditionType": key,
            "conditionValues": context.tempConditions[key].value.split(",")
          })
        }
      }
    }