Vue--我的便携封装

基于eladmin使用，有些引用如果有问题，可以评论说明（有些引用我就是没贴）

混入

表格查询基本功能

import Pagination from '@/components/Pagination'
import {
  downFileExcel // 根据路径导出文件
} from '@/utils/download/download.js'

/**
 * 混入--分页表格
 * 
 * 部分功能需要在使用页面传参：
 * 1.调用查询接口 fetchList()
 * 需要重命名查询接口为getList，如
 *  import {
 *    searchPurOrder as getList // 查询
 *  } from '@/api/LD/logistics.js'
 * 2.调用批量删除接口 handleDelete()
 * 需要重命名批量删除接口为deletes，如
 *  import {
 *    deletes // 批量删除
 *  } from '@/api/BD/warehouseperson.js'
 * 3.调用导出接口 handleExport()
 * 需要重命名导出接口为exportData，如
 *  import {
 *    exportList as exportData // 导出
 *  } from '@/api/BD/warehouseperson.js'
 * 
 * 暴露参数：
 * loadTime
 * => 默认为true,在当前页面有时间选择框时,获取一个月内为默认选择时间
 * 
 * 暴露方法：
 * disposeFetchListQuery()
 * => 查询条件特殊处理,获取查询条件,进行处理后return条件
 * fetchListCallBack()
 * => 查询列表完成触发,获取返回的res,表格加载数据已拦截
 * fetchListFinish()
 * => 加载数据完成触发,获取返回的res.data,表格加载数据已完成
 * disposeExportQuery()
 * => 导出条件特殊处理,获取导出条件,进行处理后return条件
 */
export default {
  components: {
    Pagination
  },
  data() {
    return {
      // 基础表格数据
      table: {
        loading: false,
        data: [],
        total: 0
      },
      // 筛选条件(包含分页)
      query: {
        curpage: 1,
        pagesize: 10
      },
      // 默认分页
      pageSizes: [5, 10, 20, 30, 50],
      // 编辑数据
      editData: {},
      // 多选选中集合
      multipleSelection: [],
      /**
       * 是否使用默认时间（使用一个月内）
       */
      loadTime: true, // 加载默认时间（一个月内）
      /**
       * 自适应高度
       * selfHeight => 计算参数（根据不同页面获取）
       * tableHeight => 计算表格高度
       */
      selfHeight: 0,
      tableHeight: 0
    }
  },
  computed: {
    // 不选
    noneFlag() {
      return this.multipleSelection.length !== 0
    },
    // 单选
    singleFlag() {
      return this.multipleSelection.length !== 1
    },
    // 多选
    multipleFlag() {
      return this.multipleSelection.length <= 0
    }
  },
  created() {
    // 页面初始化
    this.moduleInit()
    // 表格初始化
    this.tableInit()
  },
  mounted() {
    if (this.selfHeight) {
      // 计算表格高度
      this.$nextTick(() => {
        this.tableHeight = window.innerHeight - this.selfHeight
        console.log('通过', this.selfHeight, '计算高度1')
        window.onresize = () => {
          console.log('通过', this.selfHeight, '计算高度2')
          this.tableHeight = window.innerHeight - this.selfHeight
        }
      })
    }
  },
  methods: {
    /**
     * 周期--私有初始化
     */
    moduleInit() {
      // 使用默认时间范围
      if (this.loadTime && this.query.date) {
        const date = [
          this.$JointTime(this.$moment()
            .subtract(1, 'months')
            .format('YYYY-MM-DD'), ' 00:00:00'),
          this.$JointTime(this.$moment().format('YYYY-MM-DD'), ' 23:59:59')
        ]
        this.query = Object.assign({}, this.query, {
          date: date
        })
      }
    },
    /**
     * 周期--表格初始化
     */
    tableInit() {
      this.query.curpage = 1
      this.multipleSelection = []
    },
    /**
     * 点击--行点击事件
     * 多选状态切换
     * @param row
     * @param column
     * @param event
     */
    handleTableRowClick(row, column, event) {
      if (this.$refs.multipleTable) this.$refs.multipleTable.toggleRowSelection(row)
    },
    /**
     * 多选内容
     * @param {*} val
     */
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    /**
     * 基本--查询
     */
    fetchList(type) {
      if (type === 0) {
        this.query.curpage = 1
      }
      let query = Object.assign({}, this.query)
      // 时间判断
      if (this.query.date) {
        query = Object.assign({}, query, {
          date: '',
          startdate: this.$JointTime(this.$moment(this.$getsub(this.query.date, 0)).format('YYYY-MM-DD'), ' 00:00:00'),
          enddate: this.$JointTime(this.$moment(this.$getsub(this.query.date, 1)).format('YYYY-MM-DD'), ' 23:59:59')
        })
      }
      // 查询条件特殊处理
      if (this.disposeFetchListQuery) query = this.disposeFetchListQuery(query)
      this.table.loading = true
      this.getList(query).then(res => {
        this.table.loading = false
        // 回调接管,停止自动后续操作
        if (this.fetchListCallBack) {
          this.fetchListCallBack(res)
          return
        }
        if (res.code === 2000) {
          // 有无分页判断
          if (Number.isFinite(res.data.total)) {
            this.table.total = res.data.total
            this.table.data = res.data.rows
          } else {
            this.table.data = res.data
          }
          if (this.fetchListFinish) {
            this.fetchListFinish(res.data)
          }
        } else {
          this.$log(0, res.msg || '查询失败')
        }
      })
    },
    /**
     * 基本--新增数据
     */
    insert() {},
    /**
     * 基本--修改数据
     */
    updata() {},
    /**
     * 基本--批量删除
     */
    handleDelete() {
      const ids = this.multipleSelection.map(item => item.id).join(',')
      this.deletes({
        id: ids
      }).then(res => {
        if (res.code === 2000) {
          this.$log(1, res.msg || '删除成功')
          this.fetchList(0)
        }
      })
    },
    /**
     * 基本--导出
     * @param {*} arr 忽略字段
     */
    handleExport(arr = []) {
      const query = this.query
      const noKeys = ['curpage', 'pagesize'].concat(arr) // 不计入的查询条件
      let newQuery = {} // 查询条件
      for (let key in query) {
        if (key === 'date') { // 时间条件特殊处理
          newQuery['startdate'] = this.$JointTime(this.$moment(this.$getsub(this.query.date, 0)).format('YYYY-MM-DD'), ' 00:00:00')
          newQuery['enddate'] = this.$JointTime(this.$moment(this.$getsub(this.query.date, 1)).format('YYYY-MM-DD'), ' 23:59:59')
        } else {
          const boo = noKeys.find(e => e === key)
          if (!boo) newQuery[key] = query[key]
        }
      }
      // 导出条件额外处理
      if (this.disposeExportQuery) newQuery = this.disposeExportQuery(newQuery)
      // 调用导出
      this.exportData(newQuery).then(res => {
        if (res.code === 2000) {
          downFileExcel(res.data.url)
          this.$log(1, res.msg || '导出成功')
        } else {
          this.$log(0, res.msg || '导出失败')
        }
      })
    }
  }
}

原型链

公共方法

import Vue from 'vue'
/**Vue原型链方法 */
/**
 * 全局弹窗
 * @param {Number} tp 提示类型
 * @param {String} msg 提示文本
 * @param {Number} duration 弹窗时间
 */
Vue.prototype.$log = function (tp, msg, duration = 4000) {
  const title = {
    success: '成功',
    warning: '警告',
    error: '失败'
  }
  if (tp === 1) tp = 'success'
  if (tp === 2) tp = 'warning'
  if (tp === 0) tp = 'error'
  this.$notify({
    title: title[tp],
    message: msg,
    type: tp,
    duration: duration
  })
}

/**
 * 通过下标获取数组元素
 * 如果下表不存在，则返回空
 * @param {Array} arr 
 * @param {Number} sub 
 */
Vue.prototype.$getsub = (arr, sub = 0) => {
  if (Array.isArray(arr)) {
    if (sub > arr.length + 1) {
      return ''
    } else {
      return arr[sub]
    }
  } else {
    return ''
  }
}

/**
 * 自动拼接时间字符串
 * @param {*} time 需要拼接时间
 * @param {*} suffix 时间后拼接字段
 */
Vue.prototype.$JointTime = (time, suffix) => {
  return (new Date(time)).getTime() ? (time + suffix) : ''
}