mb-search

magic-boot-ui/src/components/MagicBoot/mb-search.vue

@@ -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>

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

@@ -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.newWhere.current = this.listCurrent
-        this.where.size = this.limit
+        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()
       }

magic-boot-ui/src/scripts/common.js

@@ -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

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

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

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

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

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

@@ -1,18 +1,7 @@
 <template>
   <div class="app-container">
-    <div class="filter-container">
+
-      <el-form :inline="true" @keyup.enter.native="reloadTable">
+    <mb-search :where="tableOptions.where" @search="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>
 
     <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: [
           {

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

@@ -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">
+      <mb-search :where="tableOptions.where" @search="reloadTable">
-          <el-form-item label="登录名称">
+        <template #btns>
-            <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>
           <el-button :loading="downloadLoading" class="filter-item" icon="el-icon-download" @click="handleDownload">
             导出
           </el-button>
-        </el-form>
+        </template>
-      </div>
+      </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: '',
+          username: {
-          name: ''
+            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()