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