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

<template>
  <div class="l-flex--col">
    <template v-if="isExact">
      <el-tabs
        v-model="active"
        class="c-tabs"
        @tab-click="onTabClick"
      >
        <el-tab-pane
          label="节目排期"
          name="normal"
        />
        <el-tab-pane
          label="默认排期"
          name="defaults"
        />
      </el-tabs>
      <c-table
        class="has-padding"
        :curr="currObj"
        @pagination="getList"
      >
        <template #header>
          <div class="l-flex__auto c-sibling-item">
            <button
              v-if="isNormal"
              class="o-button"
              @click="toAdd"
            >
              <i class="o-button__icon el-icon-circle-plus-outline" />
              新增
            </button>
          </div>
          <el-select
            v-model="currObj.params.type"
            class="l-flex__none c-sibling-item o-select"
            placeholder="请选择类型"
            @change="search"
          >
            <el-option
              v-for="item in scheduleOptions"
              :key="item.label"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select
            v-model="currObj.params.status"
            class="l-flex__none c-sibling-item o-select"
            placeholder="请选择状态"
            @change="search"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.label"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <search-input
            v-model.trim="currObj.params.name"
            class="l-flex__none c-sibling-item"
            placeholder="排期名称"
            @search="search"
          />
          <button
            class="l-flex__none c-sibling-item o-button"
            @click="search"
          >
            搜索
          </button>
        </template>
        <el-table-column
          prop="name"
          label="排期名称"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="typeName"
          label="类型"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="resolutionRatio"
          label="分辨率"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          label="审核状态"
          align="center"
          min-width="100"
        >
          <template v-slot="scope">
            <el-tag
              v-if="scope.row.status === 1"
              class="o-tag u-readonly"
              type="warning"
              size="medium"
            >
              未审核
            </el-tag>
            <el-tag
              v-else-if="scope.row.status === 2"
              class="o-tag u-readonly"
              type="success"
              size="medium"
            >
              已审核
            </el-tag>
            <el-tag
              v-else
              class="o-tag u-readonly"
              size="medium"
            >
              待提交
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          label="操作"
          align="center"
          width="180"
        >
          <template v-slot="scope">
            <template v-if="scope.row.status === 0">
              <div
                class="c-table__btn u-pointer"
                @click="toDesign(scope.row.id)"
              >
                编辑
              </div>
              <div
                class="c-table__btn u-pointer"
                @click="toSubmit(scope.row)"
              >
                提交
              </div>
              <div
                class="c-table__btn u-pointer"
                @click="toDel(scope.row)"
              >
                删除
              </div>
            </template>
            <div
              v-else
              class="c-table__btn u-pointer"
              @click="toView(scope.row.id)"
            >
              预览
            </div>
          </template>
        </el-table-column>
      </c-table>
      <el-dialog
        title="新增排期"
        :visible.sync="adding"
        custom-class="c-dialog"
        :close-on-click-modal="false"
      >
        <div class="c-form">
          <div class="c-form__section">
            <span class="c-form__label">名称：</span>
            <el-input
              v-model.trim="schedule.name"
              class="c-form__item"
              placeholder="请输入名称"
              maxlength="50"
              show-word-limit
            />
          </div>
          <div class="c-form__section">
            <span class="c-form__label">类型：</span>
            <el-select
              v-model="schedule.type"
              class="c-form__item"
              placeholder="请选择"
            >
              <el-option
                v-for="type in typeOptions"
                :key="type.value"
                :label="type.label"
                :value="type.value"
              />
            </el-select>
          </div>
          <div class="c-form__section">
            <span class="c-form__label">分辨率：</span>
            <el-select
              v-model="schedule.resolutionRatio"
              class="c-form__item"
              placeholder="请选择"
              popper-class="o-select-option"
              :loading="fetching"
            >
              <el-option
                v-for="ratio in ratios"
                :key="ratio.value"
                :label="ratio.label"
                :value="ratio.value"
              />
            </el-select>
          </div>
        </div>
        <template #footer>
          <button
            class="o-button"
            @click="add"
          >
            确定
          </button>
          <button
            class="o-button cancel"
            @click="handleCloseAddDialog"
          >
            取消
          </button>
        </template>
      </el-dialog>
      <el-dialog
        :visible.sync="isPreview"
        custom-class="c-preview schedule"
        :before-close="handleCloseScheduleDialog"
      >
        <schedule
          v-if="scheduleId"
          class="l-flex__auto has-padding"
          :schedule="scheduleId"
        />
      </el-dialog>
    </template>
    <router-view class="has-padding" />
  </div>
</template>

<script>
import { getRatios } from '@/api/device'
import {
  getSchedules,
  addSchedule,
  deleteSchedule,
  submitSchedule
} from '@/api/calendar'
import { State } from '@/constant'
import { createListOptions } from '@/utils'
import { ScheduleType } from '@/constant'
import Schedule from '@/components/Schedule'

export default {
  name: 'ScheduleList',
  components: {
    Schedule
  },
  data () {
    return {
      scheduleOptions: [
        { value: void 0, label: '全部类型' },
        { value: ScheduleType.CALENDAR, label: '日程' },
        { value: ScheduleType.RECUR, label: '轮播' }
      ],
      statusOptions: [
        { value: void 0, label: '全部状态' },
        { value: State.READY, label: '待提交' },
        { value: State.SUBMITTED, label: '未审核' },
        { value: State.RESOLVED, label: '已审核' }
      ],
      typeOptions: [
        { value: ScheduleType.CALENDAR, label: '日程' },
        { value: ScheduleType.RECUR, label: '轮播' }
      ],
      active: 'normal',
      normal: createListOptions({
        type: void 0,
        status: void 0,
        name: ''
      }),
      defaults: createListOptions(),
      adding: false,
      schedule: {},
      scheduleId: null,
      fetching: false,
      ratios: [],
      isPreview: false
    }
  },
  computed: {
    isExact () {
      return this.$route.name === 'schedule'
    },
    currObj () {
      return this[this.active]
    },
    isNormal () {
      return this.active === 'normal'
    },
    proxy () {
      return this.isNormal ? {
        list: getSchedules,
        add: addSchedule,
        del: deleteSchedule
      } : {
        list: () => Promise.resolve({ data: [], totalCount: 0 })
      }
    }
  },
  created () {
    this.isExact && this.getList()
  },
  methods: {
    search () {
      const currObj = this.currObj
      currObj.list = []
      currObj.totalCount = 0
      currObj.params.pageNum = 1
      this.getList()
    },
    onTabClick () {
      this.getList()
    },
    transform (schedule) {
      let typeName
      switch (schedule.type) {
        case ScheduleType.RECUR:
          typeName = '轮播'
          break
        default:
          typeName = '日程'
          break
      }
      schedule.typeName = typeName
      return schedule
    },
    getList () {
      const currObj = this.currObj
      if (!currObj.loading) {
        currObj.error = false
        currObj.loading = true
        this.proxy.list(currObj.params).then(({ data, totalCount }) => {
          currObj.list = data.map(this.transform)
          currObj.totalCount = totalCount
        }, () => {
          currObj.error = true
          currObj.list = []
        }).finally(() => {
          currObj.loading = false
        })
      }
    },
    getRatios () {
      if (!this.fetching && this.ratios.length === 0) {
        this.fetching = true
        getRatios().then(ratios => {
          this.ratios = ratios
        }).finally(() => {
          this.fetching = false
        })
      }
    },
    toAdd () {
      this.schedule = {
        name: '',
        type: 1,
        resolutionRatio: ''
      }
      this.adding = true
      this.getRatios()
    },
    handleCloseAddDialog () {
      this.adding = false
    },
    add () {
      if (!this.schedule.name) {
        this.$message({
          type: 'warning',
          message: '名称不能为空'
        })
        return
      }
      if (!this.schedule.resolutionRatio) {
        this.$message({
          type: 'warning',
          message: '请选择分辨率'
        })
        return
      }
      this.proxy.add(this.schedule).then(({ data: id }) => {
        this.handleCloseAddDialog()
        const params = this.currObj.params
        if (params.status && params.status !== State.READY) {
          params.status = void 0
        }
        if (params.name && !(new RegExp(params.name).test(this.schedule.name))) {
          params.name = ''
        }
        this.search()
        this.toDesign(id)
      })
    },
    toView (id) {
      this.scheduleId = id
      this.isPreview = true
    },
    handleCloseScheduleDialog () {
      this.scheduleId = null
      this.isPreview = false
    },
    toDesign (id) {
      this.$router.push({
        name: 'schedule-design',
        params: { id: `${id}` }
      })
    },
    toSubmit (item) {
      submitSchedule(item).then(() => {
        this.search()
      })
    },
    toDel (item) {
      const currObj = this.currObj
      this.proxy.del(item).then(() => {
        if (currObj.list.length === 1 && currObj.params.pageNum > 1) {
          currObj.params.pageNum -= 1
        }
        this.getList()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>