更新查询方式

src/apis/element.js

@@ -4,6 +4,10 @@ export default {
   getScheduleList: {
     url: '/vue/schedule/list' + urlEnd
   },
+  // 获取查询条件
+  getScheduleFilter: {
+    url: '/vue/schedule/get-filter' + urlEnd
+  },
 
   // 新建待办事项获取下拉列表配置项
   getSaveNew: {

src/components/common/searchForm.vue

+<template>
+  <div>
+    <el-row class="form-content">
+      <el-form ref="clientForm" size="mini" :model="clientForm" label-width="0" label-position="top">
+        <el-col :span="4" v-for="(item, key) in filter" :key="key">
+          <el-form-item>
+              <span slot="label" v-if="item.key !== 'Filter[sort]'">
+                <a @click.prevent="timeSort" v-if="item.key === 'Filter[name]'">
+                  {{item.name}}
+                  <i :class="['fa', setSortIcon()]"></i>
+                </a>
+                <span v-else>
+                  {{item.name}}
+                </span>
+              </span>
+            <el-select v-model="clientForm[item.key]" placeholder="请选择" v-if="item.key !== 'Filter[sort]'">
+              <el-option v-for="(option, optKey) in item.value"
+                         :key="optKey"
+                         :label="option.name"
+                         :value="option.key"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-form>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'client-form',
+    data () {
+      return {
+        clientForm: {
+        }
+      }
+    },
+    props: ['filter'],
+    methods: {
+      setSortIcon () {
+        if (this.clientForm['Filter[sort]'] === '') {
+          return 'fa-sort-amount-desc'
+        } else if (this.clientForm['Filter[sort]'] === 'DESC') {
+          return 'fa-sort-amount-desc'
+        } else {
+          return 'fa-sort-amount-asc'
+        }
+      },
+      timeSort () {
+        if (this.clientForm['Filter[sort]'] === '') {
+          this.clientForm['Filter[sort]'] = 'ASC'
+        } else if (this.clientForm['Filter[sort]'] === 'ASC') {
+          this.clientForm['Filter[sort]'] = 'DESC'
+        } else {
+          this.clientForm['Filter[sort]'] = 'ASC'
+        }
+      }
+    },
+    created () {
+    },
+    watch: {
+      'filter' (val) {
+        val.forEach(item => {
+          this.$set(this.clientForm, item.key, '')
+        })
+      },
+      'clientForm': {
+        handler (val) {
+          this.$emit('update:clientList', val)
+        },
+        deep: true
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/common/searchHeader.vue

+<template>
+  <el-row :gutter="10" class="header-title">
+    <el-col :span="6">
+      <h2>{{title}}</h2>
+    </el-col>
+    <el-col :span="18" class="header-search">
+      <el-form ref="form" :model="search" size="mini" label-width="0">
+        <div class="pull-right search-form">
+          <el-form-item v-if="searchKey">
+            <el-input size="small" v-model="search['ClientSearch[keyword]']" placeholder="关键词">
+              <el-button slot="append" type="primary" @click="searchKeyword">搜索</el-button>
+            </el-input>
+          </el-form-item>
+          <el-form-item v-if="searchKey">
+            <el-button type="primary" size="mini" @click="addNew">
+              <i class="fa fa-plus faa-pulse animated"></i> {{addTitle}}
+            </el-button>
+          </el-form-item>
+          <el-form-item v-if="searchKey">
+            <a class="btn">
+              <i class="fa fa-fw fa-refresh faa-spin animated-hover"></i>
+            </a>
+          </el-form-item>
+        </div>
+      </el-form>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+  export default {
+    name: 'client-header',
+    data () {
+      return {
+        search: {}
+      }
+    },
+    methods: {
+      searchKeyword () {
+        this.$emit('update:headerSearch', this.search)
+      },
+      addNew () {
+        this.$emit('update:headerAdd')
+      }
+    },
+    props: ['title', 'searchKey', 'addTitle'],
+    created () {
+    },
+    watch: {
+      'searchKey' (val) {
+        this.$set(this.search, val + '[keyword]', '')
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/schedule_list/scheduleHome.vue

 <template>
   <section>
     <div class="content">
-      <ScheduleForm></ScheduleForm>
+      <search-header
+        ref="searchHeader"
+        :title="'客户关系'"
+        :search-key="'ClientSearch'"
+        :add-title="'新建客户'"
+        @update:headerSearch="search => searchKeyword(search)"
+        @update:headerAdd="addNewUser">
+      </search-header>
+      <search-form
+        ref="clientForm"
+        :filter="filter"
+        @update:clientList="form =>{ updateForm(form) }">
+      </search-form>
       <div class="page-body-content">
         <ScheduleItem
           v-for="item in result.list"
@@ -18,7 +30,8 @@
 </template>
 
 <script>
-import ScheduleForm from './scheduleForm'
+import SearchHeader from '../common/searchHeader'
+import SearchForm from '../common/SearchForm'
 import ScheduleItem from '../common/scheduleItem'
 import Pagenation from './schedulePagenation'
 import {
@@ -29,13 +42,15 @@ export default {
   name: '',
 
   components: {
-    ScheduleForm,
+    SearchHeader,
+    SearchForm,
     ScheduleItem,
     Pagenation
   },
 
   data () {
     return {
+      filter: [],
       result: {
         list: [],
         pagenation: {
@@ -53,10 +68,34 @@ export default {
   },
 
   mounted () {
-    this.getScheduleList()
+    this.init()
   },
 
   methods: {
+    init () {
+      this.getFilter()
+      this.getScheduleList()
+    },
+
+    addNewUser () {
+      this.$router.push({path: '/clientAdd'})
+    },
+
+    searchKeyword (search) {
+      this.updateForm(search)
+    },
+
+    updateForm (form) {
+      // Object.assign(this.form, form)
+      // this.getList()
+    },
+
+    getFilter () {
+      requestWithJsonAPI(api.getScheduleFilter).then(res => {
+        this.filter = res
+      })
+    },
+
     show () {
       this.$refs.scheduleModal.show()
     },

static/vupVueSdk.css

@@ -12716,6 +12716,12 @@ input[type=file] {
   height: 100%;
   position: absolute;
   width: calc(100% - 200px);
+  padding-bottom: 15px;
+}
+@media only screen and (max-width: 880px) {
+  .content {
+    width: 100%;
+  }
 }
 .page-content-fixed .content {
   width: calc(100% - 60px);
@@ -12726,9 +12732,6 @@ input[type=file] {
   background: #ffffff;
   height: 50px;
 }
-.header-title > div {
-  margin-bottom: 16px;
-}
 .header-title h2 {
   margin: 0;
   padding-left: 10px;
@@ -12738,12 +12741,67 @@ input[type=file] {
   font-weight: 400;
   font-size: 1.5em;
 }
+.header-search {
+  min-height: 50px;
+}
 .page-body-content {
   flex-grow: 1;
   height: 100%;
   overflow: auto;
   padding: 15px 15px 0;
 }
+.el-form--label-top .el-form-item__label {
+  font-size: .875rem;
+  line-height: 14px!important;
+  font-weight: normal;
+}
+.el-form--label-top .el-form-item__label {
+  padding: 0!important;
+}
+.content .btn {
+  display: inline-block;
+  font-weight: 400;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border: 1px solid transparent;
+  padding: .1rem .25rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  border-radius: .25rem;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+.content .btn:hover {
+  -webkit-animation: spin 1.5s linear infinite;
+  animation: spin 1.5s linear infinite;
+}
+.content .el-button--primary {
+  color: #fff!important;
+  background-color: #333744!important;
+  border-color: #282b35!important;
+}
+.content .fa-fw {
+  color: #333744;
+  font-size: 28px;
+}
+.search-form {
+  display: flex;
+  flex-wrap: wrap;
+}
+.search-form .el-form-item__content > .el-button {
+  margin: 0 3px;
+}
+.form-content {
+  background: #FFF;
+  border-bottom: solid 1px #B8BAC1;
+}
+.form-content .el-col {
+  padding: 0 15px;
+}
 /*--------Page Components--------*/
 /*#region navbar*/
 .navbar {