VueTable
This commit is contained in:
parent
eb781109e1
commit
38b8332c91
|
|
@ -0,0 +1,108 @@
|
|||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2020-10-21 14:22:25
|
||||
* @LastEditTime: 2021-02-04 15:46:01
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: \dbadmin\src\components\HeaderQueryForm.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="header-query__component">
|
||||
<el-form
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-position="left"
|
||||
:label-width="labelWidth"
|
||||
:size="size"
|
||||
@keydown.enter.native.prevent="request"
|
||||
inline
|
||||
v-bind="$attrs"
|
||||
>
|
||||
<slot></slot>
|
||||
<el-button v-if="btn" type="primary" :size="size" @click="request">
|
||||
{{ queryLabel }}
|
||||
</el-button>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Component, Prop, Emit } from 'vue-property-decorator'
|
||||
import Vue from 'vue'
|
||||
import { getModule } from 'vuex-module-decorators'
|
||||
import QueryStore, { DEFAULT_TAG as DEFAULT_QUERY_TAG } from '@/store/modules/query'
|
||||
|
||||
import store from '@/store'
|
||||
const queryStore = getModule(QueryStore, store)
|
||||
|
||||
@Component({
|
||||
name: 'HeaderQuery'
|
||||
})
|
||||
export default class HeaderQuery extends Vue {
|
||||
@Prop({ type: String, default: DEFAULT_QUERY_TAG })
|
||||
tag
|
||||
|
||||
@Prop({ type: Object, required: true })
|
||||
form
|
||||
|
||||
@Prop({ type: Object, default: () => ({}) })
|
||||
rules
|
||||
|
||||
@Prop({ type: String, default: 'mini' })
|
||||
size
|
||||
|
||||
@Prop({ type: String, default: '查询' })
|
||||
queryLabel
|
||||
|
||||
@Prop({ type: Boolean, default: true })
|
||||
btn
|
||||
|
||||
@Prop({ type: Boolean, default: true })
|
||||
cache
|
||||
|
||||
@Prop({ type: String, default: undefined })
|
||||
labelWidth
|
||||
|
||||
pageData = null
|
||||
|
||||
get storeData() {
|
||||
return queryStore.data[this.path][this.tag] || {}
|
||||
}
|
||||
|
||||
set storeData(data) {
|
||||
queryStore.setData({ path: this.path, data, tag: this.tag })
|
||||
}
|
||||
|
||||
get path() {
|
||||
return this.$route.path
|
||||
}
|
||||
|
||||
get fetch() {
|
||||
return queryStore.fetchs[this.path][this.tag]
|
||||
}
|
||||
|
||||
created() {
|
||||
queryStore.init({ tag: this.tag, path: this.path, initData: Object.assign({}, this.form) })
|
||||
this.pageData = queryStore.pageData[this.path][this.tag]
|
||||
this.emitUpdateQuery()
|
||||
}
|
||||
|
||||
/**
|
||||
* 触发外部更新值
|
||||
*/
|
||||
@Emit('update:form')
|
||||
emitUpdateQuery() {
|
||||
return Object.assign({}, this.storeData)
|
||||
}
|
||||
|
||||
@Emit('submit')
|
||||
async request() {
|
||||
this.pageData.page = 1
|
||||
this.storeData = this.form
|
||||
this.fetch()
|
||||
return this.storeData
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -0,0 +1,556 @@
|
|||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2020-09-08 16:22:26
|
||||
* @LastEditTime: 2021-02-04 16:52:15
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: \dbadmin\src\components\TableForm\Table.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="table__component" ref="root" :style="rootStyle">
|
||||
<el-button-group>
|
||||
<!-- 普通功能按钮插槽 -->
|
||||
<slot
|
||||
name="btns"
|
||||
:selectable="multiselect && selectedRows.length > 0"
|
||||
:disabled="!multiselect || selectedRows.length === 0"
|
||||
:selectrows="selectedRows"
|
||||
:multiStepAction="multiStepReq"
|
||||
></slot>
|
||||
|
||||
<!-- 数据导出按钮插槽 -->
|
||||
<slot v-if="allowExport" name="export-btn" :disabled="selectedRows.length === 0" :action="exportData" :loading="exporting"></slot>
|
||||
</el-button-group>
|
||||
|
||||
<el-table
|
||||
:data="list"
|
||||
@selection-change="onSelectionChange"
|
||||
@current-change="$emit('current-change', $event)"
|
||||
ref="table"
|
||||
:height="tableHeight"
|
||||
v-loading="loading"
|
||||
:span-method="SpanMethod"
|
||||
:default-expand-all="expandAll"
|
||||
:class="tableClass"
|
||||
v-bind="tableOptions"
|
||||
>
|
||||
<el-table-column v-if="enableDrag" v-bind="dragColumnOptions">
|
||||
<i slot-scope="{ row }" class="el-icon-s-fold handle" style="font-size: 16px; cursor: move"></i>
|
||||
</el-table-column>
|
||||
<el-table-column type="selection" v-if="multiselect || allowExport" />
|
||||
<slot></slot>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div v-if="visiblePage" class="page">
|
||||
<el-pagination
|
||||
:total="total"
|
||||
:page-size="size"
|
||||
background
|
||||
layout="sizes, prev, pager, next"
|
||||
:current-page.sync="currentPage"
|
||||
:page-sizes="[...(isDev ? [1, 2, 5] : []), 10, 20, 50, 100, 200]"
|
||||
@size-change="onSizeChange"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { get, del as RequestDelete } from '@/utils/request'
|
||||
import Vue from 'vue'
|
||||
import { Component, Prop, Watch, Ref, ProvideReactive, Provide } from 'vue-property-decorator'
|
||||
import { toTime, toDateTime, toDate } from '@/utils/util'
|
||||
import { downloadXlsx } from '@/utils/excel'
|
||||
import { debounce } from 'underscore'
|
||||
import { getModule } from 'vuex-module-decorators'
|
||||
import QueryStore, { DEFAULT_TAG as DEFAULT_QUERY_TAG } from '@/store/modules/query'
|
||||
import Sortable from 'sortablejs'
|
||||
|
||||
// Table组件只读取不写vuex里面的查询参数，但会修改分页参数（入currentPage，pageSize）
|
||||
import store from '@/store'
|
||||
const queryStore = getModule(QueryStore, store)
|
||||
|
||||
@Component({
|
||||
name: 'Table'
|
||||
})
|
||||
export default class Table extends Vue {
|
||||
@Prop({ type: Boolean, default: false })
|
||||
enableDrag
|
||||
|
||||
@Prop({ type: Object, default: () => ({}) })
|
||||
dragColumnOptions
|
||||
|
||||
@Prop({ type: Object, default: () => ({}) })
|
||||
tableOptions
|
||||
|
||||
@Prop({ type: Boolean, default: false })
|
||||
expandAll
|
||||
|
||||
@Prop({ type: String })
|
||||
tableClass
|
||||
|
||||
@Prop({ type: Boolean, default: false })
|
||||
multiselect
|
||||
|
||||
@Prop({ type: Boolean, default: true })
|
||||
visiblePage
|
||||
|
||||
@Prop({ type: Function })
|
||||
responseHandler
|
||||
|
||||
/**
|
||||
* 是否允许导出数据
|
||||
*/
|
||||
@Prop({ type: Boolean, default: false })
|
||||
allowExport
|
||||
|
||||
/**
|
||||
* 导出数据时需要特殊处理的字段
|
||||
* {
|
||||
* [字段名]:处理方式
|
||||
* }
|
||||
*/
|
||||
@Prop({ type: Object, default: () => ({}) })
|
||||
exportSpecialField
|
||||
|
||||
@Prop({ type: String, required: true })
|
||||
api
|
||||
|
||||
@Prop({ type: Function })
|
||||
SpanMethod
|
||||
|
||||
@Prop({ type: [String, Number] })
|
||||
height
|
||||
|
||||
@Prop({ type: String, default: DEFAULT_QUERY_TAG })
|
||||
tag
|
||||
|
||||
@Ref('table')
|
||||
tableRef
|
||||
|
||||
@Ref('root')
|
||||
rootRef
|
||||
|
||||
/**
|
||||
* 当前页码
|
||||
*/
|
||||
// currentPage = 1
|
||||
|
||||
get currentPage() {
|
||||
if (!this.pageData) return 1
|
||||
if (!this.pageData.page) this.pageData.page = 1
|
||||
return this.pageData.page
|
||||
}
|
||||
|
||||
set currentPage(page) {
|
||||
if (!this.pageData) return
|
||||
this.pageData.page = page
|
||||
return page
|
||||
}
|
||||
|
||||
// size = 20
|
||||
|
||||
get size() {
|
||||
if (!this.pageData) return 20
|
||||
if (!this.pageData.size) this.pageData.size = 20
|
||||
return this.pageData.size
|
||||
}
|
||||
|
||||
set size(size) {
|
||||
if (!this.pageData) return
|
||||
this.pageData.size = size
|
||||
return size
|
||||
}
|
||||
|
||||
/**
|
||||
* 列表数据
|
||||
*/
|
||||
@ProvideReactive('table_data')
|
||||
list = []
|
||||
|
||||
/**
|
||||
* 列表数据是否加载中
|
||||
*/
|
||||
loading = false
|
||||
|
||||
/**
|
||||
* 列表数据总长度
|
||||
*/
|
||||
total = 1
|
||||
|
||||
/**
|
||||
* 选中的行
|
||||
*/
|
||||
selectedRows = []
|
||||
|
||||
/**
|
||||
* 数据导出处理中
|
||||
*/
|
||||
exporting = false
|
||||
|
||||
rootHeight = null
|
||||
|
||||
tableHeightData = 50
|
||||
|
||||
get tableHeight() {
|
||||
if (this.propHeightOk) {
|
||||
return this.height
|
||||
}
|
||||
|
||||
return this.tableHeightData
|
||||
}
|
||||
|
||||
get propHeightOk() {
|
||||
return ['string', 'number'].includes(typeof this.height)
|
||||
}
|
||||
|
||||
get rootStyle() {
|
||||
const style = {}
|
||||
if (this.rootHeight) {
|
||||
style.height = `${this.rootHeight}px`
|
||||
}
|
||||
|
||||
return style
|
||||
}
|
||||
|
||||
pageData = {}
|
||||
|
||||
get path() {
|
||||
return this.$route.path
|
||||
}
|
||||
|
||||
async created() {
|
||||
queryStore.init({ path: this.path, tag: this.tag })
|
||||
queryStore.registerFetch({ path: this.path, func: this.fetch, tag: this.tag })
|
||||
|
||||
this.$set(this, 'pageData', queryStore.pageData[this.$route.path][this.tag])
|
||||
await this.fetch()
|
||||
this.resizeHeight()
|
||||
}
|
||||
|
||||
async mounted() {
|
||||
this.initSortable()
|
||||
window.addEventListener('resize', this.resizeHeight)
|
||||
await this.$nextTick()
|
||||
}
|
||||
|
||||
initSortable() {
|
||||
if (!this.enableDrag) return
|
||||
const tbody = this.tableRef.$el.querySelector('.el-table__body-wrapper table tbody')
|
||||
if (!tbody) return
|
||||
|
||||
const onEnd = async event => {
|
||||
const list = this.list.splice(0)
|
||||
await this.$nextTick()
|
||||
const { oldIndex, newIndex } = event
|
||||
const oldObj = list[oldIndex]
|
||||
const newObj = list[newIndex]
|
||||
oldObj.sort = newIndex
|
||||
newObj.sort = oldIndex
|
||||
list[oldIndex] = newObj
|
||||
list[newIndex] = oldObj
|
||||
this.list.push(...list)
|
||||
this.$emit('sort', this.list)
|
||||
this.$emit('sort-change', { newObj, oldObj })
|
||||
}
|
||||
|
||||
new Sortable(tbody, {
|
||||
group: `TableComponent:${this._uid}`,
|
||||
handle: '.el-icon-s-fold.handle',
|
||||
draggable: 'tr.el-table__row',
|
||||
onEnd
|
||||
})
|
||||
}
|
||||
|
||||
@Watch('api')
|
||||
onWatchApiChange(api) {
|
||||
this.currentPage = 1
|
||||
this.fetch()
|
||||
}
|
||||
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.resizeHeight)
|
||||
queryStore.unregisterFetch(this.path, this.tag)
|
||||
}
|
||||
|
||||
async setHeight() {
|
||||
if (this.propHeightOk) return
|
||||
if (!this.tableRef) await this.$nextTick()
|
||||
if (!this.tableRef || !this.tableRef.$el) return
|
||||
this.rootHeight = document.body.clientHeight - this.tableRef.$el.offsetTop - 60
|
||||
this.tableHeightData = this.rootHeight - 85
|
||||
}
|
||||
|
||||
resizeHeight = debounce(this.setHeight.bind(this), 300)
|
||||
|
||||
@Watch('currentPage')
|
||||
/**
|
||||
* 页码有变化时获取数据
|
||||
*/
|
||||
onWatchCurrentPageChange(page) {
|
||||
this.fetch()
|
||||
}
|
||||
|
||||
onSizeChange(size) {
|
||||
this.size = size
|
||||
this.currentPage = 1
|
||||
this.fetch()
|
||||
}
|
||||
|
||||
onSelectionChange(rows) {
|
||||
this.$emit('selection-change', rows)
|
||||
this.$set(this, 'selectedRows', rows)
|
||||
}
|
||||
|
||||
/**
|
||||
* 导出数据
|
||||
* @param {string} name 工作薄名
|
||||
* @param {string} filename 文件名
|
||||
* @param {Array} 英文字段-中文转换表
|
||||
*/
|
||||
exportData(name, filename, fields) {
|
||||
if (this.exporting) return
|
||||
this.exporting = true
|
||||
const data = this.selectedRows.map(item => {
|
||||
const result = {}
|
||||
|
||||
fields.forEach(([en, cn]) => {
|
||||
result[cn] = item[en]
|
||||
|
||||
// 特殊处理的字段
|
||||
if (en in this.exportSpecialField) {
|
||||
const type = this.exportSpecialField[en]
|
||||
switch (type) {
|
||||
case 'time':
|
||||
result[cn] = toTime(result[cn])
|
||||
return
|
||||
case 'date-time':
|
||||
result[cn] = toDateTime(result[cn])
|
||||
return
|
||||
case 'date':
|
||||
result[cn] = toDate(result[cn])
|
||||
return
|
||||
default:
|
||||
break
|
||||
}
|
||||
} else if (typeof result[cn] === 'boolean') {
|
||||
result[cn] = result[cn] ? '是' : '否'
|
||||
}
|
||||
})
|
||||
|
||||
return result
|
||||
})
|
||||
downloadXlsx(
|
||||
{
|
||||
[name]: data
|
||||
},
|
||||
filename
|
||||
)
|
||||
this.exporting = false
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取列表数据
|
||||
*/
|
||||
@Provide('fetch')
|
||||
async fetch(query) {
|
||||
if (this.loading) return
|
||||
this.loading = true
|
||||
let data, params
|
||||
|
||||
if (query) {
|
||||
this.currentPage = 1
|
||||
params = query
|
||||
} else {
|
||||
params = queryStore.data[this.path][this.tag]
|
||||
}
|
||||
|
||||
Object.entries(params).forEach(([key, value]) => {
|
||||
if ([undefined, NaN, null, ''].includes(value) || key === '__ob__') {
|
||||
delete params[key]
|
||||
}
|
||||
})
|
||||
|
||||
const page_params = {}
|
||||
|
||||
if (this.visiblePage) {
|
||||
page_params.limit = this.size
|
||||
page_params.page = this.currentPage
|
||||
}
|
||||
|
||||
try {
|
||||
data = await get(this.api, {
|
||||
params: {
|
||||
...params,
|
||||
...page_params
|
||||
}
|
||||
})
|
||||
this.$emit('response', data)
|
||||
} catch (err) {
|
||||
this.loading = false
|
||||
return
|
||||
}
|
||||
this.total = data.count
|
||||
this.currentPage = data.page || data.currentPage
|
||||
const list = data.results.map(detail => {
|
||||
if (detail.created_time) {
|
||||
detail.created_time = toDateTime(detail.created_time)
|
||||
}
|
||||
if (detail.date_joined) {
|
||||
detail.date_joined = toDateTime(detail.date_joined)
|
||||
}
|
||||
if (detail.release_time) {
|
||||
detail.release_time = toDateTime(detail.release_time)
|
||||
}
|
||||
if (this.responseHandler) return this.responseHandler(detail)
|
||||
return detail
|
||||
})
|
||||
this.$emit('fetch-success', list)
|
||||
this.list.splice(0)
|
||||
this.$set(this, 'list', list)
|
||||
await this.$nextTick()
|
||||
this.$emit('get-table-ref', this.$refs.table)
|
||||
this.loading = false
|
||||
}
|
||||
|
||||
/**
|
||||
* 下一页
|
||||
*/
|
||||
nextPage() {
|
||||
this.currentPage++
|
||||
}
|
||||
|
||||
/**
|
||||
* 上一页
|
||||
*/
|
||||
prevPage() {
|
||||
this.currentPage--
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置当前页码
|
||||
*/
|
||||
resetPage() {
|
||||
this.currentPage = 1
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换某行某列的布尔值
|
||||
* @param {number} rowIndex 行
|
||||
* @param {string} name 字段
|
||||
* @param {boolean} status 修改的布尔值
|
||||
*/
|
||||
toggleColumnBoolean(rowIndex, name, status) {
|
||||
const detail = this.list[rowIndex]
|
||||
if (!detail) throw new Error(`列${rowIndex}不存在`)
|
||||
if (typeof detail[name] !== 'boolean') throw new Error(`列${rowIndex}-键${name}不是布尔值`)
|
||||
const oldValue = detail[name]
|
||||
detail[name] = status
|
||||
this.$emit('column-bool-change', {
|
||||
row: rowIndex,
|
||||
name,
|
||||
value: status,
|
||||
oldValue
|
||||
})
|
||||
return status
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置某行某列的值
|
||||
* @param {number} rowIndex 行
|
||||
* @param {string} name 字段
|
||||
* @param {any} value 修改的值
|
||||
*/
|
||||
setColumnValue(rowIndex, name, value) {
|
||||
const detail = this.list[rowIndex]
|
||||
if (!detail) throw new Error(`列${rowIndex}不存在`)
|
||||
const oldValue = detail[name]
|
||||
detail[name] = value
|
||||
this.$emit('column-value-change', {
|
||||
row: rowIndex,
|
||||
name,
|
||||
value,
|
||||
oldValue
|
||||
})
|
||||
return value
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化日期对象
|
||||
* @param {string|Date} date 日期对象/字符串
|
||||
* @returns {string}
|
||||
*/
|
||||
formatDate(date, time = true) {
|
||||
return time ? toDateTime(date) : toDate(date)
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化日期对象
|
||||
* @param {string|Date} date 日期对象/字符串
|
||||
* @returns {string}
|
||||
*/
|
||||
formatTime(date) {
|
||||
return toTime(date)
|
||||
}
|
||||
|
||||
/**
|
||||
* 调用删除接口
|
||||
* @param {string} api 接口地址
|
||||
* @param {string} message 提示消息
|
||||
* @returns {Promise<boolean>} 是否删除成功
|
||||
*/
|
||||
async del(api, message = '是否确认删除') {
|
||||
await this.$confirm(message)
|
||||
try {
|
||||
await RequestDelete(api)
|
||||
} catch (err) {
|
||||
console.error(`
|
||||
Table组件调用删除接口失败
|
||||
接口地址 ${api}
|
||||
原因：
|
||||
${err.message || err}
|
||||
`)
|
||||
return false
|
||||
}
|
||||
this.fetch()
|
||||
return true
|
||||
}
|
||||
|
||||
async multiStepReq(ids, req, options = {}) {
|
||||
const baseOptions = {
|
||||
confirmMessage: '是否确认此操作？',
|
||||
successMessage: '批量操作成功'
|
||||
}
|
||||
options = Object.assign({}, baseOptions, options)
|
||||
await this.$confirm(options.confirmMessage)
|
||||
for (const id of ids) {
|
||||
await req(id, this.selectedRows)
|
||||
}
|
||||
this.$message.success(options.successMessage)
|
||||
this.fetch()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.mo3 {
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
display: -webkit-box;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.el-tooltip__popper {
|
||||
max-width: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2020-09-07 10:17:01
|
||||
* @LastEditTime: 2021-02-18 14:51:58
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit,
|
||||
* @FilePath: \dbadmin\src\store\index.js
|
||||
*/
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
import query from './modules/query'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
const store = new Vuex.Store({
|
||||
modules: {
|
||||
app,
|
||||
api,
|
||||
user,
|
||||
tagsView,
|
||||
permission,
|
||||
query
|
||||
},
|
||||
getters
|
||||
})
|
||||
|
||||
export default store
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2020-10-28 14:40:52
|
||||
* @LastEditTime: 2020-12-29 14:33:05
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: \dbadmin\src\store\modules\query.js
|
||||
*/
|
||||
import { Module, VuexModule, Mutation } from 'vuex-module-decorators'
|
||||
|
||||
export const DEFAULT_TAG = 'default'
|
||||
|
||||
function nullObj() {
|
||||
return Object.create(null)
|
||||
}
|
||||
|
||||
@Module({ name: 'query', namespaced: true })
|
||||
class Query extends VuexModule {
|
||||
data = nullObj()
|
||||
|
||||
pageData = nullObj()
|
||||
|
||||
fetchs = nullObj()
|
||||
|
||||
@Mutation
|
||||
init(data) {
|
||||
let path = ''
|
||||
let initData = nullObj()
|
||||
let tag = DEFAULT_TAG
|
||||
if (typeof data === 'string') {
|
||||
path = data
|
||||
} else if (typeof data === 'object') {
|
||||
if (data.path) path = data.path
|
||||
if (data.initData) initData = data.initData
|
||||
if (data.tag) tag = data.tag
|
||||
}
|
||||
if (!path) throw new Error('path不能为空')
|
||||
initPath.call(this, path)
|
||||
if (!this.data[path][tag]) {
|
||||
this.data[path][tag] = initData
|
||||
}
|
||||
if (!this.pageData[path][tag]) {
|
||||
this.pageData[path][tag] = {
|
||||
page: 1,
|
||||
size: 20
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Mutation
|
||||
setData({ path, data, tag = DEFAULT_TAG }) {
|
||||
initPath.call(this, path)
|
||||
this.data[path][tag] = data
|
||||
}
|
||||
|
||||
@Mutation
|
||||
registerFetch({ path, func, tag = DEFAULT_TAG }) {
|
||||
initPath.call(this, path)
|
||||
this.fetchs[path][tag] = func
|
||||
}
|
||||
|
||||
@Mutation
|
||||
unregisterFetch(path, tag = DEFAULT_TAG) {
|
||||
initPath.call(this, path)
|
||||
delete this.fetchs[path][tag]
|
||||
}
|
||||
}
|
||||
|
||||
function initPath(path) {
|
||||
if (this instanceof Window) {
|
||||
throw new Error('initPath this对象没有绑定')
|
||||
}
|
||||
if (!this.data[path]) this.data[path] = nullObj()
|
||||
if (!this.pageData[path]) this.pageData[path] = nullObj()
|
||||
if (!this.fetchs[path]) this.fetchs[path] = nullObj()
|
||||
}
|
||||
|
||||
// function initTag(path, tag) {
|
||||
// if (this instanceof Window) {
|
||||
// throw new Error('initPath this对象没有绑定')
|
||||
// }
|
||||
// initTag.call(path)
|
||||
// if (!this.data[path][tag]) this.data[path][tag] = nullObj()
|
||||
// if (!this.pageData[path][tag]) this.pageData[path][tag] = nullObj()
|
||||
// if (!this.fetchs[path][tag]) this.fetchs[path][tag] = nullObj()
|
||||
// }
|
||||
|
||||
export default Query
|
||||
Loading…
Reference in New Issue