<template>
  <div class="order-tool">
    <el-button type="text" >新增订单</el-button>
    <div class="split"></div>
    <el-dropdown split-button type="text" @click="auHandle">
        审批
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>反审批</el-dropdown-item>
        <el-dropdown-item>批量审批</el-dropdown-item>
        <el-dropdown-item>批量反审批</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <el-button type="text">设快递</el-button>
    <el-dropdown split-button type="text" class="dropdown">
      设快递单号
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>批量设置快递单号</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <div class="split"></div>
    <el-button type="text">转异常</el-button>
    <el-button type="text">转正常</el-button>
    <el-button type="text">取消订单</el-button>
    <div class="split"></div>
    <el-dropdown split-button type="text" class="dropdown">
      修改
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>添加赠品</el-dropdown-item>
        <el-dropdown-item>改运费</el-dropdown-item>
        <el-dropdown-item>改标签</el-dropdown-item>
        <el-dropdown-item>改备注</el-dropdown-item>
        <el-dropdown-item>设定业务员</el-dropdown-item>
        <el-dropdown-item>拆分</el-dropdown-item>
        <el-dropdown-item>合并</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
@Component
export default class OrderTool extends Vue {
  auHandle(){
    console.log('123')
  }
}
</script>

<style lang="scss" scoped>
.order-tool{
  height: 40px;
  display: flex;
  align-items: center;
  width: 100%;
  .order-tool-btn{
    color: #333;
  }
  .split{
    height: 10px;
    width: 1px;
    background-color: #CCC;
    margin: 0 8px;
  }
  .dropdown{
    padding-left: 8px;
  }
}
</style>