smsb-web-develop/src/views/schedule/ScheduleDesigner.vue

<template>
  <wrapper
    fill
    margin
    padding
    background
  >
    <el-tabs
      :value="active"
      class="c-tabs has-bottom-padding"
      @tab-click="onTabClick"
    >
      <el-tab-pane name="0">
        <template #label>
          <div class="o-tab">
            <i
              class="o-tab__icon el-icon-circle-plus-outline"
              @click.stop="onAdd"
            />
            待提交
          </div>
        </template>
      </el-tab-pane>
      <el-tab-pane
        label="已审核"
        name="2"
      />
      <el-tab-pane
        label="待审核"
        name="1"
      />
      <el-tab-pane
        label="驳回"
        name="3"
      />
    </el-tabs>
    <schema-table
      ref="table"
      :schema="schema"
    />
    <confirm-dialog
      ref="addDialog"
      :title="dialogTitle"
      @confirm="onConfirmAdd"
    >
      <div class="c-grid-form u-align-self--center">
        <span class="c-grid-form__label required">名称：</span>
        <el-input
          v-model.trim="schedule.name"
          placeholder="最多50个字符"
          maxlength="50"
          clearable
        />
        <span class="c-grid-form__label required">分辨率：</span>
        <schema-select
          v-model="schedule.resolutionRatio"
          placeholder="请选择分辨率"
          :schema="resolutionRatioSelectSchema"
        />
      </div>
    </confirm-dialog>
    <confirm-dialog
      ref="copyDialog"
      title="复制"
      @confirm="onConfirmCopy"
    >
      <div class="c-grid-form u-align-self--center">
        <span class="c-grid-form__label required">名称：</span>
        <el-input
          v-model.trim="copySchedule.name"
          placeholder="最多500个字符"
          maxlength="50"
          clearable
        />
      </div>
    </confirm-dialog>
    <schedule-dialog ref="scheduleDialog" />
  </wrapper>
</template>

<script>
import { getRatiosWithUser } from '@/api/device'
import {
  addSchedule,
  submitSchedule,
  copySchedule
} from '@/api/calendar'
import { State } from '@/constant'
import mixin from './mixin'

export default {
  name: 'ScheduleDesigner',
  mixins: [mixin],
  props: {
    redirect: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      invokes: [
        { label: '编辑', render ({ status }) { return status !== State.SUBMITTED && status !== State.RESOLVED }, on: this.onDesign },
        { label: '提交', render ({ status }) { return status !== State.SUBMITTED && status !== State.RESOLVED }, on: this.onSubmit },
        { label: '查看', render ({ status }) { return status === State.SUBMITTED || status === State.RESOLVED }, on: this.onView },
        { label: '复制', render ({ status }) { return status === State.SUBMITTED || status === State.RESOLVED }, on: this.onCopy },
        { label: '删除', render ({ del }) { return del }, on: this.onDel }
      ],
      active: `${this.status}`,
      resolutionRatioSelectSchema: { remote: getRatiosWithUser },
      schedule: {},
      copySchedule: {
        id: null,
        name: ''
      }
    }
  },
  computed: {
    dialogTitle () {
      return `新增${[null, '日程', '轮播', '排期'][this.type]}`
    }
  },
  activated () {
    this.$refs.table.pageTo(1)
  },
  methods: {
    onTabClick ({ name: active }) {
      if (this.active !== active) {
        this.active = active
        this.$refs.table.mergeCondition({ status: Number(active) })
      }
    },
    onAdd () {
      this.schedule = {
        type: this.type,
        name: '',
        resolutionRatio: ''
      }
      this.$refs.addDialog.show()
    },
    onConfirmAdd (done) {
      if (!this.schedule.name) {
        this.$message({
          type: 'warning',
          message: '名称不能为空'
        })
        return
      }
      if (!this.schedule.resolutionRatio) {
        this.$message({
          type: 'warning',
          message: '请选择分辨率'
        })
        return
      }
      addSchedule(this.schedule).then(({ data: id }) => {
        done()
        this.active = `${State.READY}`
        this.$refs.table.resetCondition({ status: State.READY, name: this.schedule.name })
        this.onDesign({ id })
      })
    },
    onDesign ({ id }) {
      if (this.redirect) {
        this.$router.push({
          name: this.redirect,
          params: { id: `${id}` }
        })
      }
    },
    onSubmit (item) {
      submitSchedule(item).then(() => {
        this.$refs.table.decrease(1)
      })
    },
    onCopy ({ id, name }) {
      this.copySchedule = { id, name }
      this.$refs.copyDialog.show()
    },
    onConfirmCopy (done) {
      const { id, name } = this.copySchedule
      copySchedule({ id }, name).then(() => {
        done()
        this.active = `${State.READY}`
        this.$refs.table.resetCondition({ status: State.READY, name })
      })
    }
  }
}
</script>