smsb-web-develop/src/views/device/detail/components/DeviceInvoke/ScreenVolume.vue

<template>
  <div :class="defaultClass">
    <slot
      name="trigger"
      :invoke="invoke"
    >
      <i
        class="o-icon lg u-pointer"
        @click="invoke"
      />
      <div class="has-padding u-color--black u-bold">{{ type }}</div>
    </slot>
    <c-dialog
      ref="dialog"
      size="medium"
      :title="settings"
    >
      <template #default>
        <tabbar
          :items="tabs"
          :active.sync="active"
        />
        <template v-if="isImmediate">
          <div class="l-flex__auto l-flex--col jcenter center has-bottom-padding">
            <div class="c-sibling-item--v c-grid-form auto">
              <span class="c-grid-form__label u-required">{{ tip }}</span>
              <div class="l-flex--row">
                <el-input-number
                  v-model="taskValue"
                  :min="0"
                  :max="100"
                  step-strictly
                />&nbsp;%
              </div>
            </div>
            <button
              class="c-sibling-item--v o-button"
              @click="onInvoke"
            >
              应用
            </button>
          </div>
        </template>
        <schema-table
          v-else
          ref="table"
          :schema="schema"
          :proxy.sync="options"
        />
      </template>
    </c-dialog>
    <task-dialog
      ref="taskDialog"
      :title="dialogTitle"
      @confirm="onSave"
    >
      <span class="c-grid-form__label u-required">{{ tip }}</span>
      <div class="l-flex--row">
        <el-input-number
          v-model="task"
          :min="0"
          :max="100"
          step-strictly
        />&nbsp;%
      </div>
    </task-dialog>
  </div>
</template>

<script>
import simpleTaskMixin from './mixins/simple-task'

export default {
  name: 'ScreenVolumn',
  mixins: [simpleTaskMixin],
  data () {
    return {
      type: '音量',
      functionKey: 'volumeControl',
      valueKey: 'volume',
      schema: this.createSchema([
        { label: '音量值（%）', render ({ inputs }) { return inputs[0]?.value } }
      ])
    }
  },
  computed: {
    defaultClass () {
      return this.$scopedSlots.trigger
        ? ''
        : 'l-flex--col center has-border radius has-padding'
    }
  }
}
</script>

<style lang="scss" scoped>
.o-icon {
  background-image: url("~@/assets/icon_screen_volume.png");
}
</style>