smsb-web-develop/src/views/broadcast/deploy/components/BroadcasDeployPanel.vue

<template>
  <div class="l-flex__auto l-flex--col">
    <div class="l-flex__none l-flex--row c-step has-padding">
      <button
        class="l-flex__none c-sibling-item o-button"
        :class="{ hidden: active === 0 }"
        @click="onPresent"
      >
        上一步
      </button>
      <el-steps
        :active="active"
        class="l-flex__fill"
        finish-status="success"
        align-center
      >
        <el-step title="选择模板" />
        <el-step title="选择设备" />
        <el-step title="信息确认" />
      </el-steps>
      <button
        class="l-flex__none c-sibling-item o-button"
        :class="{ hidden: hideNext }"
        @click="onNext"
      >
        {{ btnMsg }}
      </button>
    </div>
    <div class="l-flex__auto l-flex--col has-padding">
      <div
        v-show="active === 0"
        class="c-grid-form u-align-self--center"
      >
        <span class="c-grid-form__label required">位置</span>
        <el-select v-model="position">
          <el-option
            v-for="option in positionOptions"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
        <span class="c-grid-form__label required">模板</span>
        <schema-select
          v-model="templateId"
          :schema="templateSelectSchema"
          placeholder="请选择"
          @change="onTemplateChange"
        />
        <span class="c-grid-form__label">失效时间</span>
        <el-date-picker
          v-model="endDateTime"
          type="datetime"
          placeholder="请选择失效时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="endDatePickerOptions"
          @change="onEndDateTimeChange"
        />
        <div
          v-if="templateId && !templateContent"
          class="c-grid-form__row u-text-center"
        >
          <i class="el-icon-loading" />
        </div>
        <template v-if="templateContent">
          <span class="c-grid-form__label">内容</span>
          <div class="l-flex--row c-grid-form__option c-grid-form__text">{{ templateContent }}</div>
          <div
            v-for="(value, key) in keywordMap"
            :key="key"
            class="c-grid-form__row"
          >
            <span class="c-grid-form__label required c-grid-form__text">{{ value.keywordName }}</span>
            <el-input
              v-model.trim="value.content"
              clearable
            />
          </div>
        </template>
      </div>
      <device-group-tree
        v-show="active === 1"
        ref="tree"
        class="l-flex__fill has-padding"
        @change="onChange"
      />
      <div
        v-if="active === 2"
        class="c-grid-form u-align-self--center"
      >
        <span class="c-grid-form__label">位置：</span>
        <div class="l-flex--row c-grid-form__option c-grid-form__text">{{ positionDesc }}</div>
        <span class="c-grid-form__label">内容：</span>
        <div class="l-flex--row c-grid-form__option c-grid-form__text">{{ targetContent }}</div>
        <span class="c-grid-form__label">目标设备：</span>
        <div class="l-flex--row c-grid-form__option c-grid-form__text">{{ selectedDeviceName }}</div>
        <span class="c-grid-form__label">失效时间：</span>
        <div class="l-flex--row c-grid-form__option c-grid-form__text">{{ endDateTime || '不限定' }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils'
import {
  getBroadcastTemplates,
  getBroadcastTemplate,
  publishBroadcast
} from '@/api/broadcast'

export default {
  name: 'BrodcastDeployPanel',
  props: {
    tenant: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      active: 0,
      position: 1,
      positionOptions: [
        { label: '屏幕顶部', value: 0 },
        { label: '屏幕底部', value: 1 }
      ],
      templateSelectSchema: {
        remote: getBroadcastTemplates,
        pagination: true,
        value: 'templateId',
        label: 'templateName'
      },
      templateId: '',
      templateContent: '',
      targetContent: '',
      endDateTime: '',
      keywordMap: [],
      selectedDevices: []
    }
  },
  computed: {
    minDate () {
      const now = new Date()
      return new Date(now.getFullYear(), now.getMonth(), now.getDate())
    },
    endDatePickerOptions () {
      return {
        disabledDate: this.isDisableDate
      }
    },
    hideNext () {
      switch (this.active) {
        case 0:
          return !this.templateContent || this.keywordMap.some(({ content }) => !content)
        case 1:
          return this.selectedDevices.length === 0
        default:
          return false
      }
    },
    btnMsg () {
      return this.active < 2 ? '下一步' : '发布'
    },
    positionDesc () {
      return this.positionOptions[this.position].label
    },
    selectedDeviceName () {
      return this.selectedDevices.map(device => device.name).join(', ')
    }
  },
  methods: {
    onEndDateTimeChange () {
      if (this.endDateTime && new Date(this.endDateTime).getTime() < Date.now()) {
        this.endDateTime = parseTime(Date.now(), '{y}-{m}-{d} {h}:{i}:{s}')
      }
    },
    isDisableDate (date) {
      return date < this.minDate
    },
    onTemplateChange (templateId) {
      this.templateContent = ''
      this.keywordMap = []
      getBroadcastTemplate(templateId).then(({ data }) => {
        const { templateName, templateContent, keywordMap, optionalNumbers } = data
        const arr = []
        let content = templateContent
        for (let i = 0; i < optionalNumbers; i++) {
          content = content.replace(new RegExp(`\\{${i}\\}`, 'g'), `{${keywordMap[i].keywordName}}`)
          arr.push({
            ...keywordMap[i],
            content: ''
          })
        }
        this.templateContent = content
        this.$templateData = {
          templateName,
          templateContent,
          optionalNumbers
        }
        this.keywordMap = arr
      })
    },
    onPresent () {
      if (this.active > 0) {
        this.active -= 1
      }
    },
    onNext () {
      switch (this.active) {
        case 0:
          this.active += 1
          break
        case 1:
          this.collectInfo()
          this.active += 1
          break
        case 2:
          this.publish().then(() => {
            this.active = 0
            this.position = 1
            this.templateId = ''
            this.templateContent = ''
            this.keywordMap = []
            this.endDateTime = ''
            this.$refs.tree.reset()
          })
          break
        default:
          break
      }
    },
    onChange (devices) {
      this.selectedDevices = devices
    },
    collectInfo () {
      const { templateContent, optionalNumbers } = this.$templateData
      let content = templateContent
      for (let i = 0; i < optionalNumbers; i++) {
        content = content.replace(new RegExp(`\\{${i}\\}`, 'g'), this.keywordMap[i].content)
      }
      this.targetContent = content
    },
    publish () {
      if (this.endDateTime && new Date(this.endDateTime).getTime() < Date.now()) {
        this.$message({
          type: 'warning',
          message: '失效时间已过期'
        })
        return Promise.reject()
      }
      return this.$confirm(
        `立即发布？`,
        { type: 'warning' }
      ).then(() => {
        const keywordMap = {}
        this.keywordMap.forEach(({ content }, key) => {
          keywordMap[key] = { content }
        })
        return publishBroadcast({
          tenant: this.tenant,
          position: this.position,
          name: this.$templateData.templateName,
          templateId: this.templateId,
          keywordMap,
          startTime: parseTime(Date.now(), '{y}-{m}-{d} {h}:{i}:{s}'),
          endTime: this.endDateTime,
          deviceIds: this.selectedDevices.map(device => device.id)
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.c-step {
  border-bottom: 1px solid $gray--light;

  .hidden {
    visibility: hidden;
  }
}
</style>