VueTable
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,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