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.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()
       }