smsb-web-develop/src/views/ad/automation/task/AssetTask.vue

<template>
  <wrapper
    fill
    margin
    padding
    background
    horizontal
  >
    <schema-table
      ref="table"
      class="c-sibling-item far"
      row-key="id"
      :schema="schema"
    />
    <table-dialog
      ref="contentDialog"
      size="medium"
      title="上播内容"
      :schema="contentSchema"
    />
    <asset-task-dialog
      ref="taskDialog"
      @view="onViewAsset"
      @confirm="onSubmitAssetTask"
    />
    <radio-table-dialog
      ref="contractTableDialog"
      title="新增合同任务"
      message="请选择合同"
      :schema="contractTableSchema"
      @confirm="onSubmitContractTask"
    />
    <preview-dialog ref="previewDialog" />
    <confirm-dialog
      ref="timeDialog"
      title="上播时间设置"
      @confirm="onConfirmTime"
    >
      <div class="c-grid-form auto u-align-self--center">
        <div class="c-grid-form__label">上播方式</div>
        <schema-select
          v-model="taskTime.type"
          class="u-width"
          :schema="taskTimeTypeSelectSchema"
        />
        <template v-if="taskTime.type === 2">
          <div class="c-grid-form__label">时段</div>
          <el-time-picker
            key="task-range-picker"
            v-model="taskTime.range"
            class="u-width"
            is-range
            format="HH:mm"
            value-format="HH:mm"
            :clearable="false"
          />
        </template>
        <template v-if="taskTime.type === 3">
          <div class="c-grid-form__label">时间点</div>
          <el-time-picker
            key="task-time-picker"
            v-model="taskTime.point"
            class="u-width"
            value-format="HH:mm:ss"
            :clearable="false"
          />
        </template>
      </div>
    </confirm-dialog>
    <confirm-dialog
      ref="deviceDialog"
      title="上刊设备"
      size="lg fixed"
      @confirm="onChangeDevices"
      @closed="onClosedDeviceDialog"
    >
      <template #default>
        <div class="l-flex__auto l-flex c-device-toggle">
          <div class="l-flex__fill l-flex--col">
            <schema-table
              ref="deviceTable"
              :schema="deviceSchema"
              @row-click="onDeviceRowClick"
              @selection-change="onDeviceSelectionChange"
            />
          </div>
          <div class="l-flex__none l-flex--row c-device-toggle__button">
            <el-button
              type="primary"
              :disabled="!selectedDevices.length"
              @click="onAddDevice"
            >
              <i class="el-icon-arrow-right" />
            </el-button>
          </div>
          <el-empty
            v-if="isEmpty"
            class="l-flex__none l-flex--row center c-device-toggle__list"
            description="请添加设备"
          />
          <div
            v-else
            class="l-flex__none l-flex--col c-device-toggle__list u-font-size--sm u-overflow-y--auto"
          >
            <div
              v-for="(device, index) in devices"
              :key="device.id"
              class="l-flex--row c-sibling-item--v c-device-toggle__item"
            >
              <div class="l-flex__auto c-slibing-item has-padding u-ellipsis">
                {{ device.name }}
              </div>
              <i
                class="l-flex__none c-device-toggle__del el-icon-delete has-padding--h has-active"
                @click="onDelDevice(index)"
              />
            </div>
          </div>
        </div>
      </template>
    </confirm-dialog>
  </wrapper>
</template>

<script>
import {
  TimeType,
  SCREEN_TIME_KEY,
  TaskFromType,
  TaskFromTypeInfo,
  AssetTag,
  AssetTagInfo,
  AssetType,
  AssetTypeInfo
} from '@/constant'
import {
  parseDuration,
  parseTaskTime,
  getTaskTimeInfo,
  transformToTaskTime,
  offsetDate,
  calculateDay,
  getAssetThumb
} from '@/utils'
import { getDevices } from '@/api/device'
import {
  getOrderDetail,
  getContracts,
  getContract
} from '../api'
import {
  getTasks,
  addTask,
  deleteTask,
  updateTask
} from './api'
import AssetTaskDialog from './components/AssetTaskDialog.vue'

export default {
  name: 'AdAssetTask',
  components: {
    AssetTaskDialog
  },
  data () {
    const canEdit = this.$store.getters.isOperator
    const canAudit = this.$store.getters.isGroupAdmin

    return {
      schema: {
        buttons: canEdit
          ? [
            { type: 'add', label: '素材任务', on: this.onAddAssetTask },
            { type: 'add', label: '合同任务', on: this.onAddContractTask }
          ]
          : null,
        list: getTasks,
        transform: this.transform,
        cols: [
          { prop: 'type', type: 'refresh', width: 80 },
          { render: (data, h) => data.allowed
            ? h(
              'div',
              {
                staticClass: 'u-ellipsis has-active',
                on: {
                  click: () => this.onViewTask(data)
                }
              },
              data.name
            )
            : data.name },
          { label: '上刊设备', render: (data, h) => h(
            'div',
            {
              staticClass: 'u-ellipsis has-active',
              on: {
                click: () => this.onEditDevices(data)
              }
            },
            data.devices.length > 1
              ? `${data.devices[0].name}等`
              : data.devices.length === 1
                ? data.devices[0].name
                : '暂未绑定'
          ), 'min-width': 100 },
          { label: '上刊日期', render: (data, h) => canEdit && data.allowed && data.from === TaskFromType.ASSET
            ? h('el-date-picker', {
              staticClass: 'o-date-picker',
              props: {
                value: [data.startDate, data.endDate],
                type: 'daterange',
                rangeSeparator: '至',
                valueFormat: 'yyyy-MM-dd',
                editable: false,
                clearable: false
              },
              on: {
                input: val => this.onDateEdit(data, val)
              }
            })
            : `${data.startDate} 至 ${data.endDate}`, width: 220, align: 'center' },
          { label: '上播时间', render: (data, h) => canEdit && data.allowed && data.from === TaskFromType.ASSET
            ? h('div', {
              staticClass: 'o-date-picker jc',
              on: {
                click: () => this.onEditTime(data)
              }
            }, data.range)
            : data.range, 'min-width': 100, align: 'center' },
          { label: '上播时长(s)', render: (data, h) => canEdit && this.canEditDuration(data)
            ? h('edit-input', {
              staticClass: 'border',
              props: {
                value: `${data.duration}`,
                align: 'center'
              },
              on: {
                edit: val => this.onSimpleEdit(data, 'duration', val)
              }
            })
            : data.duration, 'min-width': 100, align: 'center' },
          { label: '上播次数', render: (data, h) => canEdit && data.allowed && data.from === TaskFromType.ASSET
            ? h('edit-input', {
              staticClass: 'border',
              props: {
                value: `${data.count}`,
                align: 'center'
              },
              on: {
                edit: val => this.onSimpleEdit(data, 'count', val)
              }
            })
            : data.count, 'min-width': 100, align: 'center' },
          { label: '审核次数', render: (data, h) => canAudit && data.allowed
            ? h('edit-input', {
              staticClass: 'border',
              props: {
                value: `${data.auditCount}`,
                align: 'center'
              },
              on: {
                edit: val => this.onAuditEdit(data, val)
              }
            })
            : '-', 'min-width': 100, align: 'center' },
          { prop: 'tag', type: 'tag', on: canAudit && this.onAudit },
          { type: 'invoke', render: [
            { label: '查看', allow: ({ allowed }) => allowed, on: this.onViewTask },
            { label: '删除', allow: ({ from }) => from !== TaskFromType.ORDER, on: this.onDel }
          ], width: 92 }
        ]
      },
      contentSchema: {
        list: this.getContentAssets,
        cols: [
          { prop: 'tagType', label: '文件', width: 100, align: 'center' },
          { prop: 'fileType', label: '', width: 80 },
          { prop: 'file', label: '', type: 'asset', on: this.onViewAsset },
          { prop: 'name', label: '' },
          { prop: 'adDuration', label: '上播时长', align: 'center' },
          { type: 'invoke', render: [
            { label: '查看', allow: ({ file }) => !!file, on: this.onViewAsset }
          ] }
        ]
      },
      contractTableSchema: {
        condition: { name: '' },
        list: getContracts,
        transform: this.transformContract,
        filters: [
          { key: 'name', type: 'search', placeholder: '合同名称' }
        ],
        cols: [
          { prop: 'name', label: '名称' },
          { prop: 'dateRange', label: '上刊日期', 'width': 200 },
          { prop: 'timeRange', label: '上播时间' },
          { prop: 'count', label: '上播次数' },
          { prop: 'durationInfo', label: '上播时长' }
        ]
      },
      taskTimeTypeSelectSchema: {
        options: [
          { value: TimeType.SCREEN, label: '开机期间' },
          { value: TimeType.RANGE, label: '时段' },
          { value: TimeType.POINT, label: '时间点' }
        ]
      },
      taskTime: {},
      deviceSchema: {
        list: getDevices,
        filters: [
          { key: 'name', type: 'search', placeholder: '设备名称' }
        ],
        cols: [
          { type: 'selection' },
          { prop: 'name', label: '名称' }
        ],
        pagination: { small: true, layout: 'prev,pager,next' }
      },
      devices: [],
      selectedDevices: []
    }
  },
  computed: {
    isEmpty () {
      return this.devices.length === 0
    }
  },
  methods: {
    canEditDuration ({ allowed, from, fromInfo }) {
      return allowed && from === TaskFromType.ASSET && fromInfo?.type === AssetType.IMAGE
    },
    transform (task) {
      const { id, devices, from, fromId, fromInfo, startDate, startTime, endTime, day, duration, count, auditCount, enable } = task
      const allowed = this.isValidTask(from, fromInfo)
      return {
        id,
        devices,
        from,
        fromId,
        fromInfo,
        type: this.getDataType(task),
        name: this.getDataName(task),
        startDate,
        endDate: offsetDate(startDate, day),
        startTime,
        endTime,
        range: getTaskTimeInfo({ startTime, endTime }),
        count,
        duration,
        auditCount,
        enable,
        tag: allowed
          ? this.getEnableTag(enable)
          : {
            type: 'danger',
            label: '异常',
            msg: '源数据丢失'
          },
        allowed
      }
    },
    isValidTask (from, fromInfo) {
      switch (from) {
        case TaskFromType.ORDER:
          return true
        default:
          return !!fromInfo
      }
    },
    getDataType ({ from, fromInfo }) {
      if (from === TaskFromType.ASSET && fromInfo) {
        return AssetTypeInfo[fromInfo.type]
      }
      return TaskFromTypeInfo[from]
    },
    getDataName ({ from, fromInfo }) {
      switch (from) {
        case TaskFromType.ORDER:
          return '自助广告'
        default:
          return fromInfo?.name || '-'
      }
    },
    getEnableTag (enable) {
      return {
        type: enable ? 'success' : 'primary',
        label: enable ? '已审核' : '待审核'
      }
    },
    transformContract (contract) {
      contract.durationInfo = parseDuration(contract.duration)
      contract.dateRange = `${contract.startDate} 至 ${offsetDate(contract.startDate, contract.day)}`
      contract.timeRange = getTaskTimeInfo(contract)
      return contract
    },
    onViewTask (task) {
      switch (task.from) {
        case TaskFromType.ORDER:
          getOrderDetail(task.fromId).then(({ data }) => {
            this.showContentDialog(data.assets.map(this.transformOrderAsset))
          })
          break
        case TaskFromType.ASSET:
          this.onViewAsset({
            file: {
              type: task.fromInfo.type,
              url: task.fromId
            }
          })
          break
        case TaskFromType.CONTRACT:
          getContract(task.fromId).then(({ data }) => {
            this.showContentDialog(data.assets.map(this.transformContractAsset))
          })
          break
        default:
          break
      }
    },
    showContentDialog (assets) {
      if (assets.length === 1) {
        assets[0].adDuration = '独占'
      }
      this.$assets = assets
      this.$refs.contentDialog.show()
    },
    getContentAssets () {
      const assets = this.$assets
      return Promise.resolve({
        data: assets,
        totalCount: assets.length
      })
    },
    transformOrderAsset ({ keyName, type, adDuration, thumb }) {
      const isImage = type === AssetType.IMAGE
      return type
        ? {
          tagType: AssetTagInfo[AssetTag.AD],
          fileType: AssetTypeInfo[type],
          file: {
            type,
            url: keyName,
            thumb: isImage ? keyName : thumb,
            origin: !isImage
          },
          adDuration: parseDuration(adDuration)
        }
        : {
          tagType: '素材已删除',
          adDuration: parseDuration(adDuration)
        }
    },
    transformContractAsset ({ duration, minioData }) {
      if (minioData) {
        const { tag, type, keyName } = minioData
        return {
          tagType: AssetTagInfo[tag],
          fileType: AssetTypeInfo[type],
          file: {
            type,
            url: keyName,
            thumb: getAssetThumb(minioData)
          },
          name: minioData.originalName,
          adDuration: parseDuration(duration)
        }
      }
      return {
        tagType: '素材已删除',
        adDuration: parseDuration(duration)
      }
    },
    onViewAsset ({ file }) {
      this.$refs.previewDialog.show(file)
    },
    onDel ({ id, type, name }) {
      deleteTask(id, `${type} ${name}`).then(() => {
        this.$refs.table.decrease(1)
      })
    },
    onAddAssetTask () {
      this.$refs.taskDialog.show()
    },
    onSubmitAssetTask ({ value, done }) {
      this.addTask(value).then(done)
    },
    onAddContractTask () {
      this.$refs.contractTableDialog.show()
    },
    onSubmitContractTask ({ value, done }) {
      this.addTask({
        from: TaskFromType.CONTRACT,
        fromId: value.id,
        startDate: value.startDate,
        day: value.day,
        startTime: value.startTime,
        endTime: value.endTime,
        count: value.count,
        duration: value.duration
      }).then(done)
    },
    addTask (task) {
      return addTask({
        ...task,
        auditCount: task.count,
        enable: false
      }).then(() => {
        this.$refs.table.pageTo(1)
      })
    },
    onAudit (task) {
      const { allowed, devices, enable, startTime, endTime, duration, auditCount } = task
      if (!allowed) {
        return
      }
      if (!devices.length) {
        this.$message({
          type: 'warning',
          message: '请先添加上刊设备'
        })
        return
      }
      if (!enable) {
        const totalDuration = duration * auditCount * 1000
        if (startTime && endTime && endTime !== SCREEN_TIME_KEY) {
          const remind = new Date(`2000-01-01 ${endTime}`) - new Date(`2000-01-01 ${startTime}`)
          if (remind < totalDuration) {
            this.$message({
              type: 'warning',
              message: '所选时段无法满足上播次数'
            })
            return
          }
        }
      }
      this.$confirm(
        enable ? '停止使用后将不可参与自动编单' : '启用后将可参与自动编单',
        enable ? '停用任务' : '启用任务',
        { type: 'warning' }
      ).then(() => {
        this.onUpdateEnable(task)
      })
    },
    onUpdateEnable (task) {
      const { id, enable } = task
      updateTask({
        id,
        enable: !enable
      }).then(() => {
        task.enable = !enable
        task.tag = this.getEnableTag(!enable)
      })
    },
    onSimpleEdit (task, key, { newVal, oldVal }) {
      if (!newVal || !/^\d+$/.test(newVal) || Number(newVal) < 1) {
        return
      }
      if (newVal !== oldVal) {
        task[key] = Number(newVal)
        updateTask({
          id: task.id,
          enable: false,
          [key]: newVal
        }).then(
          () => {
            if (task.enable) {
              task.enable = false
              task.tag = this.getEnableTag(false)
            }
          },
          () => {
            task[key] = oldVal
          }
        )
      }
    },
    onDateEdit (task, val) {
      const { id, enable, startDate, endDate } = task
      if (startDate !== val[0] || endDate !== val[1]) {
        const day = calculateDay(val[0], val[1]) + 1
        updateTask({
          id,
          enable: false,
          startDate: val[0],
          day
        }).then(
          () => {
            if (enable) {
              task.enable = false
              task.tag = this.getEnableTag(false)
            }
            task.startDate = val[0]
            task.endDate = val[1]
            task.day = day
          }
        )
      }
    },
    onAuditEdit (task, { newVal, oldVal }) {
      if (!newVal || !/^\d+$/.test(newVal) || Number(newVal) < 1) {
        return
      }
      if (newVal !== oldVal) {
        const auditCount = Number(newVal)
        if (task.from === TaskFromType.ORDER && auditCount < task.count) {
          this.$message({
            type: 'warning',
            message: '订单的审核次数不能小于上播次数'
          })
          return
        }
        if (task.from === TaskFromType.CONTRACT && auditCount < task.count) {
          this.$message({
            type: 'warning',
            message: '合同的审核次数不能小于上播次数'
          })
          return
        }
        task.auditCount = auditCount
        updateTask({
          id: task.id,
          enable: false,
          auditCount
        }).then(
          () => {
            if (task.enable) {
              task.enable = false
              task.tag = this.getEnableTag(false)
            }
          },
          () => {
            task.auditCount = oldVal
          }
        )
      }
    },
    onEditTime (task) {
      this.$task = task
      this.taskTime = parseTaskTime(task)
      this.$refs.timeDialog.show()
    },
    onConfirmTime (done) {
      const { id, enable, startTime, endTime } = this.$task
      const { startTime: targetStartTime, endTime: targetEndTime } = transformToTaskTime(this.taskTime)
      if (!targetStartTime) {
        this.$message({
          type: 'warning',
          message: '请选择上播时间'
        })
        return
      }
      if (startTime !== targetStartTime || endTime !== targetEndTime) {
        updateTask({
          id,
          enable: false,
          startTime: targetStartTime,
          endTime: targetEndTime
        }).then(
          () => {
            if (enable) {
              this.$task.enable = false
              this.$task.tag = this.getEnableTag(false)
            }
            this.$task.startTime = targetStartTime
            this.$task.endTime = targetEndTime
            this.$task.range = getTaskTimeInfo({ startTime: targetStartTime, endTime: targetEndTime })
            done()
          }
        )
      } else {
        done()
      }
    },
    onEditDevices (task) {
      if (!task.allowed) {
        return
      }
      this.$task = task
      this.$deviceMap = {}
      this.$currDeviceMap = {}
      const deviceArray = []
      task.devices.forEach(({ id, name }) => {
        this.$deviceMap[id] = 1
        this.$currDeviceMap[id] = 1
        deviceArray.push({ id, name })
      })
      this.devices = deviceArray
      this.$refs.deviceDialog.show()
    },
    onDeviceRowClick (row) {
      this.$refs.deviceTable.getInst().toggleRowSelection(row)
    },
    onDeviceSelectionChange (devices) {
      this.selectedDevices = devices
    },
    onAddDevice () {
      this.selectedDevices.forEach(({ id, name }) => {
        if (!this.$deviceMap[id]) {
          this.$deviceMap[id] = 1
          this.devices.push({ id, name })
        }
      })
      this.$refs.deviceTable.getInst().clearSelection()
    },
    onDelDevice (index) {
      const { id } = this.devices.splice(index, 1)[0]
      delete this.$deviceMap[id]
    },
    onChangeDevices (done) {
      let change = false
      if (this.$task.enable) {
        if (this.devices.length) {
          change = this.devices.some(({ id }) => !this.$currDeviceMap[id])
        } else {
          change = true
        }
      }
      if (change && this.devices.length) {
        this.$confirm(
          '新增上刊设备需重新审核，将影响其他设备的节目单生成',
          '操作确认',
          { type: 'warning' }
        ).then(() => this.onSubmitDevices(change)).then(done)
        return
      }
      this.onSubmitDevices(change).then(done)
    },
    onSubmitDevices (change) {
      const data = {
        id: this.$task.id,
        deviceIdList: this.devices.map(({ id }) => id)
      }
      if (change) {
        data.enable = false
      }
      return updateTask(data).then(() => {
        this.$task.devices = this.devices
        if (change) {
          this.$task.enable = false
          this.$task.tag = this.getEnableTag(false)
        }
      })
    },
    onClosedDeviceDialog () {
      this.$task = null
      this.$deviceMap = null
      this.devices = []
      this.selectedDevices = []
    }
  }
}
</script>

<style lang="scss" scoped>
.c-task {
  line-height: 1;
  border-radius: $radius--sm;
  border: 1px solid #dcdfe6;

  &:hover {
    border-color: #c0c4cc;
  }

  &__name {
    position: absolute;
    width: 100%;
    height: 100%;
  }
}

::v-deep .o-date-picker {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: auto;
  min-height: $height;
  padding: 3px 0;
  border: 1px solid $primary;
  border-radius: $radius--sm;
  background-color: $blue--light;

  &.jc {
    justify-content: center;
  }

  &:hover {
    border-color: $gray--dark;
  }

  .el-range-input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    background-color: $blue--light;
  }

  .el-range-separator {
    flex: 0 0 auto;
    min-width: 0;
    width: auto;
    padding: 0;
    font-size: $font-size--xs;
  }

  .el-input__icon {
    display: none;
  }
}

.c-device-toggle {
  &__button {
    padding: 0 $spacing $spacing;
    margin: 0 $spacing;
    border-left: 1px solid $border;
    border-right: 1px solid $border;
  }

  &__list {
    width: 400px;
  }

  &__item {
    border: 1px solid $gray;
    border-radius: $radius--sm;
  }

  &__del {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: $height;
    color: $gray;
    font-size: $font-size--md;
  }
}
</style>