smsb-web-develop/src/views/realm/ai-timing/components/DeviceServiceConfigDialog.vue

<template>
  <confirm-dialog
    ref="configDialog"
    :title="title"
    @confirm="onSave"
  >
    <div class="c-grid-form mini u-align-self--center">
      <span class="c-grid-form__label u-bold">开启</span>
      <div class="l-flex--row c-grid-form__option">
        <el-switch
          v-model="deviceServiceConfig.enabled"
          active-color="#13ce66"
          inactive-color="#ff4949"
        />
      </div>
      <span class="c-grid-form__label">抽帧间隔</span>
      <div class="c-grid-form__option">
        <el-input-number
          v-model="deviceServiceConfig.offset"
          :min="10"
          :max="3600"
          step-strictly
        />
        秒（10~3600）
      </div>
      <span class="c-grid-form__label required">开始时间</span>
      <el-time-picker
        v-model="deviceServiceConfig.startTime"
        value-format="HH:mm:ss"
        :clearable="false"
      />
      <span class="c-grid-form__label required">结束时间</span>
      <el-time-picker
        v-model="deviceServiceConfig.endTime"
        value-format="HH:mm:ss"
        :clearable="false"
      />
    </div>
  </confirm-dialog>
</template>

<script>
import {
  getDeviceServiceConfig,
  addDeviceServiceConfig,
  updateDeviceServiceConfig
} from '../api'

export default {
  name: 'DeviceServiceConfigDialog',
  data () {
    return {
      title: '',
      deviceServiceConfig: {}
    }
  },
  methods: {
    show (deviceId, name) {
      this.title = name ? `${name}服务配置` : '设备服务配置'
      getDeviceServiceConfig(deviceId).then(({ data }) => {
        this.deviceServiceConfig = data || {
          deviceId,
          enabled: false,
          offset: 10,
          startTime: '08:00:00',
          endTime: '23:59:59'
        }
        this.$refs.configDialog.show()
      })
    },
    onSave (done) {
      const { startTime, endTime } = this.deviceServiceConfig
      if (!startTime) {
        this.$message({
          type: 'warning',
          message: '请选择开始时间'
        })
        return
      }
      if (!endTime) {
        this.$message({
          type: 'warning',
          message: '请选择结束时间'
        })
        return
      }
      (this.deviceServiceConfig.id ? updateDeviceServiceConfig : addDeviceServiceConfig)(this.deviceServiceConfig).then(done)
    }
  }
}
</script>