smsb-web-develop/src/components/service/DraggableItem/index.vue

<template>
  <div class="o-draggable-item">
    <div class="l-flex__fill l-flex--row c-sibling-item mover">
      <i class="l-flex__none o-draggable-item__mover el-icon-sort u-color--info u-font-size--md has-active" />
      <auto-text
        class="l-flex__auto has-active"
        :text="label"
        @click.native="onView"
      />
    </div>
    <div
      v-if="item.disabled"
      class="l-flex__none c-sibling-item near u-color--info u-font-size--xs"
    >
      {{ duration }}
    </div>
    <el-input-number
      v-else
      v-model="item.duration"
      class="l-flex__none c-sibling-item near o-draggable-item__seconds"
      size="small"
      title="上播时长(s)"
      :disabled="item.disabled"
      controls-position="right"
      :min="1"
      :max="86400"
      step-strictly
    />
    <i
      class="l-flex__none el-icon-delete has-padding--h u-color--info u-font-size--md has-active"
      @click="onDel"
    />
  </div>
</template>

<script>
import { parseDuration } from '@/utils'

export default {
  name: 'DraggableItem',
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  computed: {
    label () {
      const { info, name } = this.item
      return info ? `${info} ${name}` : name
    },
    duration () {
      return parseDuration(this.item.duration)
    }
  },
  methods: {
    onView () {
      this.$emit('view', this.item)
    },
    onDel () {
      this.$emit('del', this.item)
    }
  }
}
</script>

<style lang="scss" scoped>
.o-draggable-item {
  &__seconds {
    width: 92px;
  }

  ::v-deep {
    .el-input-number.is-controls-right .el-input__inner {
      padding-left: 4px;
      padding-right: 36px;
    }
  }
}
</style>