github/magic-boot
github/magic-boot
3
0
Fork 0
mirror of https://gitee.com/ssssssss-team/magic-boot.git synced 2025-01-19 03:52:50 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

mb-search

Browse Source
This commit is contained in:
吕金泽 2022-01-30 11:14:09 +08:00
parent 6fbf5978ff
commit b59503729c
7 changed files with 177 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
magic-boot-ui/src/components/MagicBoot/mb-search.vue Normal file
View File

@ -0,0 +1,86 @@
<template>
<div class="filter-container">
<el-form :inline="true" @keyup.enter.native="search">
<el-form-item :label="it.label" v-for="it in where">
<el-input v-if="it.type == 'input'" @input="input(it.input)" v-model="it.value" :placeholder="it.placeholder || ('请输入' + it.label)" style="width: 200px;" class="filter-item" />
<mb-select v-else-if="it.type == 'select'" v-model="it.value" :placeholder="'请输入' + it.label" v-bind="it.properties" />
<el-date-picker
v-else-if="it.type == 'date' || it.type == 'datetime' || it.type == 'daterange' || it.type == 'datetimerange'"
v-model="it.value"
align="right"
:format="it.type.startsWith('datetime') ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd'"
:value-format="it.type.startsWith('datetime') ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd'"
:type="it.type"
:start-placeholder="it.type.startsWith('datetime') ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd'"
:end-placeholder="it.type.startsWith('datetime') ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd'"
:placeholder="it.type.startsWith('datetime') ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd'"
>
</el-date-picker>
<component v-else :is="it.type" v-model="it.value" v-bind="it.properties" />
</el-form-item>
<el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">
搜索
</el-button>
<el-button class="filter-item" icon="el-icon-delete" @click="reset">
清空
</el-button>
<slot name="btns" />
</el-form>
</div>
</template>
<script>
export default {
name: "MbSearch",
props: {
where: {
type: Object,
default: () => {}
}
},
data() {
return {
}
},
methods: {
input(input){
if(input){
this.$emit('search')
}
},
search(){
for(var key in this.where){
if(this.where[key] instanceof Object){
if(this.where[key].type.startsWith('date') && this.where[key].value instanceof Array){
this.where[key].value = this.where[key].value.join(',')
}
}
}
this.$nextTick(() => {
this.$emit('search')
for(var key in this.where){
if(this.where[key] instanceof Object){
if(this.where[key].type.startsWith('date')){
this.where[key].value = this.where[key].value.split(',')
}
}
}
})
},
reset() {
for(var key in this.where){
if(this.where[key] instanceof Object){
this.where[key].value = ''
}else{
this.where[key] = ''
}
}
this.$nextTick(() => this.$emit('search'))
}
}
}
</script>
<style scoped>
</style>

22
magic-boot-ui/src/components/MagicBoot/mb-table.vue
View File

@ -102,16 +102,24 @@ export default {
total: 0,
list: [],
listLoading: false,
tableKey: 0
tableKey: 0,
newWhere: {}
}
},
watch: {
data() {
this.listCurrent = 1
this.handlerData()
},
where: {
handler(){
this.newWhere = this.$common.renderWhere(this.where)
},
deep: true
}
},
created() {
this.newWhere = this.$common.renderWhere(this.where)
},
mounted() {
if (this.data) {
@ -125,15 +133,15 @@ export default {
getList() {
this.listLoading = true
if (this.page) {
this.where.current = this.listCurrent
this.where.size = this.limit
this.newWhere.current = this.listCurrent
this.newWhere.size = this.limit
} else {
this.where.size = 99999999
this.newWhere.size = 99999999
}
request({
url: this.url,
method: this.method,
params: this.where
params: this.newWhere
}).then(res => {
const { data } = res
this.total = data.total
@ -150,7 +158,7 @@ export default {
} else {
order = null
}
this.where.orderBy = order
this.newWhere.orderBy = order
this.reloadList()
},
selectionChange(columns) {
@ -158,7 +166,7 @@ export default {
},
reloadList() {
if (this.url) {
this.where.current = 1
this.newWhere.current = 1
this.listCurrent = 1
this.getList()
}

15
magic-boot-ui/src/scripts/common.js
View File

@ -60,8 +60,21 @@ const formatJson = (list, filterVal) => {
}))
}
common.renderWhere = (where) => {
var newWhere = {}
for(var key in where) {
if(where[key] instanceof Object){
newWhere[key] = where[key].value
}else{
newWhere[key] = where[key]
}
}
return newWhere
}
common.exportExcel = (options) => {
const where = options.where || {}
var where = options.where || {}
where = common.renderWhere(where)
where.current = 1
where.size = 99999999
const url = options.url

36
magic-boot-ui/src/views/system/dict/dict-items.vue
View File

@ -1,21 +1,13 @@
<template>
<div class="app-container">
<div class="filter-container">
<el-form :inline="true">
<el-form-item label="标签">
<el-input v-model="tableOptions.where.label" placeholder="标签" style="width: 200px;" class="filter-item" />
</el-form-item>
<el-form-item label="值">
<el-input v-model="tableOptions.where.value" placeholder="值" style="width: 200px;" class="filter-item" />
</el-form-item>
<el-button class="filter-item" type="primary" icon="el-icon-search" @click="reloadTable">
搜索
</el-button>
<el-button v-permission="'dict:items:save'" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
添加
</el-button>
</el-form>
</div>
<mb-search :where="tableOptions.where" @search="reloadTable" />
<el-row class="toolbar-container">
<el-button v-permission="'dict:items:save'" class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">
添加
</el-button>
</el-row>
<mb-table ref="table" v-bind="tableOptions" />
@ -57,8 +49,16 @@ export default {
url: 'dict/items/list',
page: true,
where: {
label: '',
value: ''
label: {
type: 'input',
label: '标签',
value: ''
},
value: {
type: 'input',
label: '值',
value: ''
}
},
cols: [
{

40
magic-boot-ui/src/views/system/dict/dict-list.vue
View File

@ -1,21 +1,13 @@
<template>
<div class="app-container">
<div class="filter-container">
<el-form :inline="true">
<el-form-item label="类型">
<el-input v-model="tableOptions.where.type" placeholder="请输入类型" style="width: 200px;" class="filter-item" />
</el-form-item>
<el-form-item label="字典类型">
<mb-select v-model="tableOptions.where.dictType" :all-option="true" type="dict_type" width="185px" />
</el-form-item>
<el-button class="filter-item" type="primary" icon="el-icon-search" @click="reloadTable">
搜索
</el-button>
<el-button v-permission="'dict:save'" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
添加
</el-button>
</el-form>
</div>
<mb-search :where="tableOptions.where" @search="reloadTable" />
<el-row class="toolbar-container">
<el-button v-permission="'dict:save'" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
添加
</el-button>
</el-row>
<mb-table ref="table" v-bind="tableOptions" />
@ -64,8 +56,20 @@ export default {
url: 'dict/list',
page: true,
where: {
username: '',
name: ''
type: {
type: 'input',
label: '类型',
value: ''
},
dictType: {
type: 'select',
label: '字典类型',
value: '',
properties: {
'all-option': true,
type: 'dict_type'
}
}
},
cols: [
{

21
magic-boot-ui/src/views/system/role/role-list.vue
View File

@ -1,18 +1,7 @@
<template>
<div class="app-container">
<div class="filter-container">
<el-form :inline="true" @keyup.enter.native="reloadTable">
<el-form-item label="角色名称">
<el-input v-model="tableOptions.where.name" placeholder="请输入角色名称" style="width: 200px;" class="filter-item" />
</el-form-item>
<el-button class="filter-item" type="primary" icon="el-icon-search" @click="reloadTable">
搜索
</el-button>
<el-button class="filter-item" icon="el-icon-delete" @click="tableOptions.where = {}">
清空
</el-button>
</el-form>
</div>
<mb-search :where="tableOptions.where" @search="reloadTable" />
<el-row class="toolbar-container">
<el-button v-permission="'role:save'" class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">
@ -99,7 +88,11 @@ export default {
tableOptions: {
url: 'role/list',
where: {
name: ''
name: {
type: 'input',
label: '角色名称',
value: ''
}
},
cols: [
{

37
magic-boot-ui/src/views/system/user/user-list.vue
View File

@ -16,25 +16,14 @@
<mb-tree url="office/tree" :el="{ 'expand-on-click-node': false,'show-checkbox': true }" :expand="false" :search="true" search-width="100%" :checked="false" @check-change="checkChange" />
</div>
<div class="right">
<div class="filter-container">
<el-form :inline="true" @keyup.enter.native="reloadTable">
<el-form-item label="登录名称">
<el-input v-model="tableOptions.where.username" placeholder="登录名称" style="width: 200px;" class="filter-item" />
</el-form-item>
<el-form-item label="姓名/昵称">
<el-input v-model="tableOptions.where.name" placeholder="姓名/昵称" style="width: 200px;" class="filter-item" />
</el-form-item>
<el-button class="filter-item" type="primary" icon="el-icon-search" @click="reloadTable">
搜索
</el-button>
<el-button :loading="downloadLoading" class="filter-item" icon="el-icon-delete" @click="reset">
清空
</el-button>
<mb-search :where="tableOptions.where" @search="reloadTable">
<template #btns>
<el-button :loading="downloadLoading" class="filter-item" icon="el-icon-download" @click="handleDownload">
导出
</el-button>
</el-form>
</div>
</template>
</mb-search>
<el-row style="margin-bottom: 15px">
<el-button v-permission="'user:save'" class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">
@ -70,8 +59,16 @@ export default {
page: true,
selection: true,
where: {
username: '',
name: ''
username: {
type: 'input',
label: '登录名称',
value: ''
},
name: {
type: 'input',
label: '姓名/昵称',
value: ''
}
},
cols: [
{
@ -146,10 +143,6 @@ export default {
}
},
methods: {
reset() {
this.tableOptions.where = {}
this.$nextTick(() => this.reloadTable())
},
checkChange(values) {
this.tableOptions.where.officeId = values
this.reloadTable()