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

<template>
  <wrapper
    fill
    margin
    padding
    background
  >
    <c-table
      :curr="options"
      @pagination="getList"
    >
      <template #header>
        <div class="l-flex__auto c-sibling-item">
          <button
            class="o-button"
            @click="onAdd"
          >
            <i class="o-button__icon el-icon-circle-plus-outline" />
            新增
          </button>
        </div>
        <el-select
          v-model="options.params.resolutionRatio"
          class="l-flex__none c-sibling-item o-select"
          placeholder="请选择分辨率"
          :loading="fetching"
          @change="search"
          @visible-change="getRatios"
        >
          <el-option
            v-for="item in resolutionRatios"
            :key="item.label"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select
          v-model="options.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="options.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="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="onDesign(scope.row.id)"
            >
              编辑
            </div>
            <div
              class="c-table__btn u-pointer"
              @click="onSubmit(scope.row)"
            >
              提交
            </div>
          </template>
          <template v-else>
            <div
              class="c-table__btn u-pointer"
              @click="onView(scope.row.id)"
            >
              预览
            </div>
            <div
              class="c-table__btn u-pointer"
              @click="onCopy(scope.row)"
            >
              复制
            </div>
          </template>
          <permission
            :skip="scope.row.status === 0"
            :access="Access.DELETE_FORCE"
          >
            <div
              class="c-table__btn u-pointer"
              @click="onDel(scope.row)"
            >
              删除
            </div>
          </permission>
        </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.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="onCloseAddDialog"
        >
          取消
        </button>
      </template>
    </el-dialog>
    <el-dialog
      :visible.sync="isPreviewing"
      custom-class="c-preview schedule"
      :before-close="onCloseScheduleDialog"
    >
      <schedule
        v-if="scheduleId"
        class="l-flex__auto has-padding"
        :schedule="scheduleId"
      />
    </el-dialog>
    <el-dialog
      title="复制"
      :visible.sync="copying"
      custom-class="c-dialog mini"
      :close-on-click-modal="false"
      :before-close="onCloseCopyDialog"
    >
      <div class="c-form">
        <div class="c-form__section">
          <span class="c-form__label auto">名称：</span>
          <el-input
            v-model.trim="copySchedule.name"
            class="c-form__item"
            placeholder="请输入名称"
            maxlength="50"
            show-word-limit
          />
        </div>
      </div>
      <template #footer>
        <button
          class="o-button"
          @click="copy"
        >
          确定
        </button>
        <button
          class="o-button cancel"
          @click="onCloseCopyDialog"
        >
          取消
        </button>
      </template>
    </el-dialog>
  </wrapper>
</template>

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

export default {
  name: 'ScheduleList',
  data () {
    return {
      statusOptions: [
        { value: void 0, label: '全部状态' },
        { value: State.READY, label: '待提交' },
        { value: State.SUBMITTED, label: '未审核' },
        { value: State.RESOLVED, label: '已审核' }
      ],
      options: createListOptions({
        type: this.$route.meta.info.type,
        status: void 0,
        resolutionRatio: void 0,
        name: ''
      }),
      adding: false,
      schedule: {},
      scheduleId: null,
      fetching: false,
      ratios: [],
      isPreviewing: false,
      copying: false,
      copySchedule: {
        id: null,
        name: ''
      }
    }
  },
  computed: {
    resolutionRatios () {
      return [{ value: void 0, label: '全部分辨率' }].concat(this.ratios.map(({ value }) => {
        return { value, label: value }
      }))
    }
  },
  created () {
    this.getList()
  },
  activated () {
    if (this.$route.params.refresh) {
      const status = this.options.params.status
      if (status !== void 0) {
        this.options.params.status = void 0
      }
      this.search()
    }
  },
  methods: {
    search () {
      const options = this.options
      options.list = []
      options.totalCount = 0
      options.params.pageNum = 1
      this.getList()
    },
    getList () {
      const options = this.options
      if (!options.loading) {
        options.error = false
        options.loading = true
        getSchedules(options.params).then(({ data, totalCount }) => {
          options.list = data
          options.totalCount = totalCount
        }, () => {
          options.error = true
          options.list = []
        }).finally(() => {
          options.loading = false
        })
      }
    },
    getRatios () {
      if (!this.fetching && this.ratios.length === 0) {
        this.fetching = true
        getRatios().then(ratios => {
          this.ratios = ratios
        }).finally(() => {
          this.fetching = false
        })
      }
    },
    onAdd () {
      this.schedule = {
        type: this.$route.meta.info.type,
        name: '',
        resolutionRatio: ''
      }
      this.adding = true
      this.getRatios()
    },
    onCloseAddDialog () {
      this.adding = false
    },
    add () {
      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 }) => {
        this.onCloseAddDialog()
        const params = this.options.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.onDesign(id)
      })
    },
    onView (id) {
      this.scheduleId = id
      this.isPreviewing = true
    },
    onCloseScheduleDialog () {
      this.scheduleId = null
      this.isPreviewing = false
    },
    onDesign (id) {
      this.$router.push({
        name: this.$route.meta.info.design,
        params: { id: `${id}` }
      })
    },
    onSubmit (item) {
      submitSchedule(item).then(() => {
        this.search()
      })
    },
    onDel (item) {
      deleteSchedule(item).then(() => {
        const options = this.options
        if (options.list.length === 1 && options.params.pageNum > 1) {
          options.params.pageNum -= 1
        }
        this.getList()
      })
    },
    onCopy ({ id, name }) {
      this.copySchedule = { id, name }
      this.copying = true
    },
    copy () {
      const { id, name } = this.copySchedule
      copySchedule({ id }, name).then(() => {
        this.onCloseCopyDialog()
        const params = this.options.params
        if (params.status !== void 0 && params.status !== State.READY) {
          params.status = void 0
        }
        if (params.name && !(new RegExp(params.name).test(name))) {
          params.name = ''
        }
        this.search()
      })
    },
    onCloseCopyDialog () {
      this.copying = false
    }
  }
}
</script>