封装搜索表单

src/components/SearchCom/index.vue

@@ -0,0 +1,67 @@
+<template>
+  <a-form layout="inline" :model="form" ref="queryForm">
+    <a-row :gutter="48">
+      <a-col :md="6" :sm="24" v-for="(item, index) in list" :key="index">
+        <a-form-item :label="item.placeholder">
+          <!-- input -->
+          <a-input v-if="item.type === 'input'" v-model="form[item.key]" :type="item.type || 'text'" :placeholder="item.placeholder || '请输入'"/>
+
+          <!-- select-common -->
+          <a-select v-if="item.type === 'select'" v-model="form[item.key]" placeholder="请选择">
+            <a-select-option v-for="(j, k) in item.options" :key="`${index}-${k}`" :value="j.id">{{ j.name }}</a-select-option>
+          </a-select>
+
+          <!-- select-dictionary -->
+          <a-select v-if="item.type === 'select-dic'" v-model="form[item.key]" placeholder="请选择">
+            <a-select-option v-for="(j, k) in item.options" :key="`${index}-${k}`" :value="j.value">{{ j.name }}</a-select-option>
+          </a-select>
+
+          <!-- date -->
+          <a-date-picker
+            v-if="item.type === 'date'"
+            v-model="form[item.key]"
+            style="width: 100%"
+            :format="item.format"
+            :valueFormat="item.format"
+            :placeholder="item.placeholder || '请输入日期'"/>
+
+        </a-form-item>
+      </a-col>
+      <a-col :md="6" :sm="24">
+        <a-button type="primary" @click="handleQuery">查询</a-button>
+        <a-button @click="resetQuery">重置</a-button>
+      </a-col>
+    </a-row>
+  </a-form>
+</template>
+
+<script>
+export default {
+  props: {
+    form: {
+      type: Object,
+      required: true,
+      default: () => ({})
+    },
+    list: {
+      type: Array,
+      required: true,
+      default: () => []
+    }
+  },
+  data () {
+    return {}
+  },
+  methods: {
+    handleQuery () {
+      this.$emit('search')
+    },
+    resetQuery () {
+      this.$emit('reset')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/index.js

@@ -26,6 +26,7 @@ import StandardFormRow from '@/components/StandardFormRow'
 import ArticleListContent from '@/components/ArticleListContent'
 
 import Dialog from '@/components/Dialog'
+import SearchCom from '@/components/SearchCom'
 
 export {
   AvatarList,
@@ -52,5 +53,6 @@ export {
   StandardFormRow,
   ArticleListContent,
 
-  Dialog
+  Dialog,
+  SearchCom
 }

src/views/sys/dictionary/DictionaryList.vue

@@ -2,27 +2,12 @@
   <page-header-wrapper :title="false">
     <a-card :bordered="false">
       <div class="table-page-search-wrapper">
-        <a-form layout="inline">
+        <SearchCom
-          <a-row :gutter="48">
+          :form="queryParam"
-            <a-col :md="6" :sm="24">
+          :list="queryOptions"
-              <a-form-item label="词典名称">
+          @search="handleRefresh"
-                <a-input v-model="queryParam.dictionaryName" placeholder="请输入词典名称" @pressEnter="handleRefresh"/>
+          @reset="() => {queryParam = {}, handleRefresh()}" >
-              </a-form-item>
+        </SearchCom>
-            </a-col>
-            <a-col :md="6" :sm="24">
-              <a-form-item label="词典编码">
-                <a-input v-model="queryParam.dictionaryCode" placeholder="请输入词典编码" @pressEnter="handleRefresh"/>
-              </a-form-item>
-            </a-col>
-            <a-col :md="6" :sm="24">
-              <a-button type="primary" @click="handleRefresh">查询</a-button>
-              <a-button @click="() => {queryParam = {}, handleRefresh()}">重置</a-button>
-            </a-col>
-            <a-col :md="6" :sm="24" align="right" >
-              <a-button type="primary" @click="handleCreate">新增</a-button>
-            </a-col>
-          </a-row>
-        </a-form>
       </div>
       <s-table
         ref="table"
@@ -50,18 +35,19 @@
 
 <script>
 import { dictionaryPage, dictionaryDel } from '@/api/sys/dictionary'
-import { STable } from '@/components'
+import { STable, SearchCom } from '@/components'
 import DictionaryForm from './DictionaryForm'
 
 export default {
   name: 'DictionaryList',
   components: {
     STable,
+    SearchCom,
     DictionaryForm
   },
   data () {
     return {
-      queryParam: { dictionaryName: null, dictionaryCode: null },
+      queryParam: { dictionaryName: null, dictionaryCode: null, status: null, createTime: null },
       selectedRowKeys: [], // 选中行的key 出选择框时需要配置
       selectedRows: [], // 选中行的数据
       columns: [
@@ -84,6 +70,14 @@ export default {
     }
   },
   computed: {
+    queryOptions: function () {
+      const list = [{ 'value': 1, 'name': '类型1' }, { 'value': 2, 'name': '类型2' }]
+      return [
+        { type: 'input', placeholder: '词典名称', key: 'dictionaryName' },
+        { type: 'date', placeholder: '请选择开始时间', key: 'createTime', format: 'YYYY-MM-DD HH:mm:ss' },
+        { type: 'select', placeholder: '请选择类型', key: 'status', options: [{ name: '类型', id: undefined }, ...list] }
+      ]
+    },
     rowSelection () {
       return {
         selectedRowKeys: this.selectedRowKeys,
@@ -106,7 +100,7 @@ export default {
     },
     // 删
     handleDelete (record) {
-      dictionaryDel({ ids: record.id, deleteReason: "" }).then(() => {
+      dictionaryDel({ ids: record.id, deleteReason: '' }).then(() => {
         this.$refs.table.refresh()
       })
     },