lixin-web/webapp/js/mixins/lottoReport.js

vue and bootstrap

import {AsyncComp,ajax} from '_Will'
import {mapActions,mapGetters} from 'vuex'
import {valToText,betsModel,statusArr} from './dataTables'

export default {
  data(){
    return {
      loadingLotto: true,
      cascader:[{label:'全部游戏',value:''}],
      lottoCascader:[],
//        lottoCode: '',
      status: statusArr[0][1],
      statusArr,
      betsModel,
      // the filter is for some special column
//          webapp/component/data-tables/components/DataTables.vue:267
      searchDef: {
        props: ['issue']
      },
      issue: '',
      selectFilterDef: {},
      statusType: ['primary', 'info', 'danger', 'muted'],
      view:'',
      detailVisible:false,
      detail:{},
      oLoading:{}
    }
  },
  components: {
    OrderDetail: AsyncComp('admin/report','OrderDetail')
  },
  created(){
//      this.getData();
//        ['lottoCode','status','date'].forEach(i => this.$watch(i,this.getData))
    // lottoCode => this.getData(lottoCode),,bug!
    ['lottoCode', 'status', 'dateTime'].forEach(i => this.$watch(i, () => {
      this.pageData = []
      this.getData()
    }))
  },
  methods:{
    getLotto(){
      if (!this.loadingLotto) return
//        if(this.lottoList.length <= 1) {
//          //加载中...,delay 500
//          setTimeout(() => {
//            this.getLottoList(() => this.loadingLotto = false)
//            }, 500)
//        }else{
//          this.getLottoList(() => this.loadingLotto = false)
//        }
      this.getLottoList(() => {
        this.cascader = this.cascader.concat(Object.keys(this.lottoNavList).map(value => {
          let lotto = this.lottoNavList[value]
          return {
            value,
            label: this.lottoGroup[value],
            children:lotto.map(v => {
              return {
                value:v.code,
                label:v.label,
              }
            })
          }
        }))
        this.loadingLotto = false
      })

    },
    getData(loading = true){
      if (!this.dateTime) return
      this.loading = loading
      const [sTime, eTime] = this.dateRange
      const {lottoCode, dateTime, status, issue, pageSize, currentPage} = this
      ajax(
        `game-lottery/search-${this.isChase ? 'chase' : 'order'}`,
        {
          order: 'asc',
          sTime, eTime, time: dateTime,
          lottery: lottoCode,
          status,
          expect: issue,
          size: pageSize,
          page: currentPage - 1,
        },
        data => {
          const {list, totalCount} = data
          this.pageData[currentPage - 1] = this.tableData = list.map(item => this.formatRowData(item))
          this.loading = false
          this.pageTotal = totalCount

        })
    },
    getRowActionsDef(row) {
      const {allowCancel,expand} = row
      const self = this
      return [{
        type: 'text',
        disabled: !allowCancel,
        handler(row) {
          self.cancelOrder(row)
        },
        name: allowCancel ? `${self.isChase && expand ? '全部' : ''}撤单` : '无'
      }]
    },
    cancelOrder(row,isChase = this.isChase,callback,chaseListRow){
      this.$swal.wrap('warning',`确定要撤销该${isChase ? '追号' : ''}订单？`,null,{
        preConfirm: () => {
            return new Promise(resolve => {
              ajax(`game-lottery/cancel-${isChase ? 'chase' : 'order'}`,{billno:row.billno,type:isChase ? 'chase' : 'general'},() => {
                this.$swalProto.insertQueueStep({
                  text:`操作成功，该${isChase ? '追号' : ''}订单已成功撤销`,
                  type:'success',
                  timer:1500,
                  onClose:() => {
                    Object.assign(row,{allowCancel:false,status:-1})
                    if(row.chaseList && row.chaseList.length) row.chaseList.forEach(i => i.allowCancel = false)
                    row.expand && this.toggleRowExpanded(row)
                    if(typeof callback == 'function') {
                      callback()
                      if (!chaseListRow.chaseList.find(i => i.allowCancel)){
                        Object.assign(chaseListRow,{allowCancel:false,status:-1})
                        chaseListRow.expand ? this.toggleRowExpanded(chaseListRow) : this.detailVisible = false

                      }
                    }else if(callback) {
                      this.detailVisible = false

                    }
                  }
                })
                resolve()
              })
            })
        }
      },{isQueue:true})
    },
    statusClass(status){
      return `text-${this.statusType.slice(status)[0]}`

    },
    statusText(value){
      return valToText(statusArr,value)
    },
    expandRow(row, column){
      //@cell-click other td
      if(column.id && column.label !== '订单号') return
      if(typeof column === 'boolean') {
        row.expand = column
      }
      if(column === false) return
      //expand close,false
      !this.view && (this.view = 'OrderDetail')
      const isExpand = this.expand
      if(!isExpand){
        this.detailVisible = true
      }
      // else{
      //   //formatRowData expand -> false
      //   row.expand = column
      // }

      if (!row.content || row.status === 0) {
        isExpand ? this.oLoading[row.id] = true : this.oLoading = true
        ajax(`game-lottery/get-${this.isChase ? 'chase' : 'order'}`, {billno: row.billno}, data => {
          const detail = Object.assign(row,this.formatRowData(data),{expand:isExpand ? column : false})
          if(isExpand) {
            // this.detail[row.id] = detail
            this.oLoading[row.id] = false
          }else{
            this.detail = detail
            this.oLoading = false
          }
        })
      }else if(this.isPortrait){
        this.detail = row
      }
    },
    toggleRowExpanded(row){
      this.$elTable.store.commit('toggleRowExpanded', row)
    },
    ...mapActions([
      'getLottoList'
    ])
  },
  filters: {
    statusText(value){
      //can't use this.valToText, filters this -> undefined
      return valToText(statusArr,value)
    },
  },
  computed:{
    lottoCode(){
      return this.lottoCascader[1] || ''
    },
    expand(){
      return location.pathname.includes('lottery') && !this.isPortrait
    },
    showForm(){
      return !location.pathname.includes('lottery') || !this.isPortrait
    },
    ...mapGetters([
      'isPortrait',
      'lottoGroup',
      'lottoNavList'
    ]),
  },
  mounted(){
    this.$elTable = this.$refs.dataTable.$children[0]
    this.$elTable.$on('expand', this.expandRow)
  }
}