abb-antd/src/views/check/checkjob/CheckJobCalendar.vue

<template>
  <a-calendar class="custom" @select="onSelect" @panelChange="onPanelChange">
    <ul slot="dateCellRender" slot-scope="value" class="events">
      <li v-for="item in getListData(value)" :key="item.id">
        <a-badge :status="item.status" :text="item.name" />
      </li>
    </ul>
    <template slot="monthCellRender" slot-scope="value">
      <div v-if="getMonthData(value)" class="notes-month">
        <section>{{ getMonthData(value) }}</section>
        <span>Backlog number</span>
      </div>
    </template>
  </a-calendar>
</template>

<script>
import { STable, Ellipsis } from '@/components'
import BaseForm from './modules/BaseForm'
import Detail from './modules/Detail'
import { queryCheckJob, getCheckJobPage, deleteCheckJobs, fetchCheckJob, exportCheckJob, executeJob } from '@/api/check/checkjob'
import BaseTool from '@/utils/tool'

export default {
  name: 'CheckJobList',
  components: {
    STable,
    Ellipsis,
    BaseForm,
    Detail
  },
  props: {
    /**
     * 检查类型： 1-负责 2-巡检
     */
    checkType: {
      type: Number,
      default: 2
    },
    filter: {
      type: Number,
      default: -1
    }
  },
  data () {
    return {
      panelChange: true,
      // 查询参数
      queryParam: {
        type: this.checkType,
        filter: this.filter
      },
      data: [],
      // 下拉框map
      statusMap: {},
      sbStatusMap: {},
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        parameter = {
          ...parameter,
          ...this.queryParam,
          dataScope: {
            sortBy: 'desc',
            sortName: 'update_time'
          }
        }
        return getCheckJobPage(Object.assign(parameter, this.queryParam))
          .then(res => {
            return res.data
          })
      },
      selectedRowKeys: [],
      selectedRows: [],
      preListData: [],
      options: {
        alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
        rowSelection: {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange
        }
      },
      optionAlertShow: false
    }
  },
  created () {
    // 下拉框map
    this.statusMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.CHECK_JOB_STATUS)
    this.sbStatusMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.YES_NO)
    // this.tableOption()
    queryCheckJob(this.queryParam)
      .then(res => {
        this.data = res.data
        for (var i = 0; i < this.data.length; i++) {
          if (this.data[i].status === 1) {
            this.data[i].status = 'warning'
          } else if (this.data[i].status === 2) {
            this.data[i].status = 'processing'
          } else if (this.data[i].status === 3) {
            this.data[i].status = 'success'
          } else {
            this.data[i].status = 'error'
          }
        }
      })
  },
  methods: {
    onSelect (value) {
      this.panelChange = false
      console.log('onSelect: ' + BaseTool.Date.formatter(value, BaseTool.Date.PICKER_NORM_DATE_PATTERN))
      this.value = value
      this.selectedValue = value
      // this.queryParam.searchDay = BaseTool.Date.formatter(value, BaseTool.Date.PICKER_NORM_DATE_PATTERN)
    },
    onPanelChange (value) {
      this.panelChange = true
      console.log('onPanelChange: ' + BaseTool.Date.formatter(value, BaseTool.Date.PICKER_NORM_DATE_PATTERN))
      this.value = value
      this.queryParam.searchMonth = BaseTool.Date.formatter(value, BaseTool.Date.PICKER_NORM_DATE_PATTERN)
      queryCheckJob(this.queryParam)
        .then(res => {
          this.data = res.data
          for (var i = 0; i < this.data.length; i++) {
            if (this.data[i].status === 1) {
              this.data[i].status = 'warning'
            } else if (this.data[i].status === 2) {
              this.data[i].status = 'processing'
            } else if (this.data[i].status === 3) {
              this.data[i].status = 'success'
            } else {
              this.data[i].status = 'error'
            }
          }
        })
    },
    getListData (value) {
      console.log('getListData: ' + BaseTool.Date.formatter(value, this.BaseTool.Date.PICKER_NORM_DATE_PATTERN))
      const listData = []
      for (var i = 0; i < this.data.length; i++) {
        console.log('value: ' + BaseTool.Date.formatter(value, this.BaseTool.Date.PICKER_NORM_DATE_PATTERN))
        console.log('this.data[i]: ' + BaseTool.Date.formatter(this.data[i].startTime, this.BaseTool.Date.PICKER_NORM_DATE_PATTERN))
        if (BaseTool.Date.formatter(value, this.BaseTool.Date.PICKER_NORM_DATE_PATTERN) === BaseTool.Date.formatter(this.data[i].startTime, this.BaseTool.Date.PICKER_NORM_DATE_PATTERN)) {
          console.log('this.data[i].name: ' + this.data[i].name)
          listData.push(this.data[i])
        }
      }
      this.preListData = listData
      return listData || []
    },
    getMonthData (value) {
      if (value.month() === 8) {
        return 1394
      }
    },
    tableOption () {
      if (!this.optionAlertShow) {
        this.options = {
          alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
          rowSelection: {
            selectedRowKeys: this.selectedRowKeys,
            onChange: this.onSelectChange,
            getCheckboxProps: record => ({
              props: {
                disabled: false,
                name: record.id
              }
            })
          }
        }
        this.optionAlertShow = true
      } else {
        this.options = {
          alert: false,
          rowSelection: null
        }
        this.optionAlertShow = false
      }
    },
    batchDelete (id) {
      let ids = []
      if (this.BaseTool.String.isBlank(id)) {
        const length = this.selectedRows.length
        if (length === 0) {
          this.$message.info('请选择要删除的记录')
          return
        }
        ids = this.selectedRows.map(item => item.id)
      } else {
        ids = [id]
      }
      deleteCheckJobs(ids).then(res => {
        this.$message.info('删除成功')
        this.handleOk()
        this.$refs.table.clearSelected()
      })
    },
    handleEdit (record) {
      fetchCheckJob({ id: record.id }).then(res => {
        const modal = this.$refs.baseModal
        modal.base(res.data)
      })
    },
    handleFinish (record) {
      fetchCheckJob({ id: record.id }).then(res => {
        const modal = this.$refs.baseModal
        modal.base(res.data)
      })
    },
    handleExecute (record) {
      executeJob({ id: record.id }).then(res => {
        this.handleOk()
      })
    },
    handleView (record) {
      fetchCheckJob({ id: record.id }).then(res => {
        const modal = this.$refs.detailModal
        modal.base(res.data)
      })
    },
    handleOk () {
      this.$refs.table.refresh()
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    resetSearchForm () {
      this.queryParam = {
      }
      this.$refs.table.refresh(true)
    },
    doExport () {
      const parameter = {
        ...this.queryParam
      }
      exportCheckJob(parameter).then(file => {
        this.BaseTool.UPLOAD.downLoadExportExcel(file)
      })
    }
  }
}
</script>
<style scoped>
.events {
  list-style: none;
  margin: 0;
  padding: 0;
}
.events .ant-badge-status {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  font-size: 12px;
}
.notes-month {
  text-align: center;
  font-size: 28px;
}
.notes-month section {
  font-size: 28px;
}
.ant-fullcalendar-header .ant-radio-group-default {
  display:none !important
}

.custom .ant-fullcalendar-header .ant-radio-group-default {
  display:none !important
}
</style>