jsm-mall-front/src/views/userManagement/masterElectronicPaymentQuiry/index.vue

<template>
  <template-page
    v-if="showTableBool"
    ref="pageRef"
    :get-list="getList"
    :table-attributes="tableAttributes"
    :table-events="tableEvents"
    :options-evens-group="optionsEvensGroup"
    :moreParameters="moreParameters"
    :column-parsing="columnParsing"
    :exportList="exportList"
  >
    <div slot="moreSearch">
      <div style="margin-bottom: 10px">
        <span
          style="
            font-size: 12px;
            font-weight: 400;
            text-align: left;
            color: #666;
            line-height: 28px;
            margin-right: 10px;
          "
          >选择范围</span
        >
        <el-date-picker
          size="mini"
          v-model="value1"
          value-format="yyyy-MM-dd"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </div>
    </div>
  </template-page>
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
import import_mixin from '@/components/template/import_mixin.js'
import operation_mixin from '@/components/template/operation_mixin.js'
import { settlementOrderNewListPageV3, settlementOrderNewPageV3Export } from '@/api/masterElectronicPaymentQuiry.js'
export default {
  components: { TemplatePage },
  mixins: [import_mixin, operation_mixin],
  data() {
    return {
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: false
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      // 勾选选中行
      recordSelected: [],
      value1: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }
        ],
        onPick: obj => {
          this.pickerMinDate = new Date(obj.minDate).getTime()
        },
        disabledDate: time => {
          if (this.pickerMinDate) {
            const day1 = 31 * 24 * 3600 * 1000
            let maxTime = this.pickerMinDate + day1
            let minTime = this.pickerMinDate - day1
            return time.getTime() > maxTime || time.getTime() < minTime
          }
        }
      },
      pickerMinDate: null,
      showTableBool: true
    }
  },
  watch: {
    value1() {
      if (!this.value1) {
        this.pickerMinDate = null
      }
      this.showTableBool = false
      this.$nextTick(() => {
        this.showTableBool = true
      })
    }
  },
  computed: {
    // 事件组合
    optionsEvensGroup() {
      return []
    },
    // 更多参数
    moreParameters() {
      return []
    }
  },
  methods: {
    // 列表请求函数
    getList(p, cb) {
      var pam = JSON.parse(JSON.stringify(p))
      try {
        if (this.value1 && this.value1.length) {
          pam.overTime = `${this.value1?.[0]} 00:00:00`
          pam.overEndTime = `${this.value1?.[1]} 23:59:59`
          pam.params.push({ param: 'a.pay_time', compare: '>=', value: pam.overTime })
          pam.params.push({ param: 'a.pay_time', compare: '<=', value: pam.overEndTime })
          cb && cb(pam)
          return settlementOrderNewListPageV3(pam)
        }
      } catch (err) {}
    },
    // 列表导出函数
    exportList(...p) {
      if (this.value1) {
        return settlementOrderNewPageV3Export(...p)
      }
    },
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      return defaultData
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    }
  }
}
</script>

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