对照列表字段

src/assets/css/case-app.scss

 .case-app {
-  a {
+  a[class='client'] {
     cursor: pointer;
     color: white;
   }
 
+  .color-dc3545 {
+    color: #dc3545;
+  }
+
   .border-17a2b8 {
     border-color: #17a2b8;
     color: #17a2b8;
   }
+
+  .border-dc3545 {
+    border-color: #dc3545;
+    color: #dc3545;
+  }
 }

src/components/case_list/caseHome.vue

@@ -10,6 +10,11 @@
         @update:headerAdd="() => addSch()"
         @update:headerClear="() => searchClear()">
       </search-header>
+      <time-search-form
+        ref="timeSearchForm"
+        form-search-key="projectSearch"
+        @update:list="search => timeSearchForm(search)">
+      </time-search-form>
       <search-form
         ref="clientForm"
         :filter="filter"
@@ -78,6 +83,7 @@ import LeaveMessage from '../common/leaveMessage'
 import Pagenation from './casePagenation'
 import clickOutside from '@/lib/bind'
 import SetParams from '../common/setParams'
+import TimeSearchForm from './timeSearchForm'
 import {
   requestAPI,
   api
@@ -93,7 +99,8 @@ export default {
     Item,
     FormModal,
     LeaveMessage,
-    Pagenation
+    Pagenation,
+    TimeSearchForm
   },
 
   directives: {

src/components/case_list/caseItem.vue

@@ -7,7 +7,7 @@
             Case编号：<span>{{ item.case_no }}</span>
           </el-col>
           <el-col :span="24">
-            <a>
+            <a class="client">
               <i class="fa fa-star" aria-hidden="true"></i>{{ item.client.name }}
             </a>
           </el-col>
@@ -21,7 +21,7 @@
       <el-col :span="20" :xs="24" class="obear-schedule-right">
         <el-row :gutter="10">
           <el-col :span="6" :xs="24">
-            <span>Case类型：</span><span class="obear-schedule-right__content border-17a2b8">{{ item.case_type }}</span>
+            <span>Case类型：</span><span class="obear-schedule-right__content border-17a2b8">{{ item.case_type_display }}</span>
           </el-col>
           <el-col :span="6" :xs="24">
             <span>Case状态：</span><span class="obear-schedule-right__content" :style="{color: item.bgcolor, 'border-color': item.bgcolor }">{{ item.case_status_display }}</span>
@@ -35,46 +35,50 @@
         </el-row>
         <el-row :gutter="10">
           <el-col :span="24" :xs="24">
-            <span>服务目录：</span><span class="obear-schedule-right__content">{{ item.documentType }}</span>
+            <span>服务目录：</span><span>{{ item.services.map(i => i.name).join(',') }}</span>
           </el-col>
         </el-row>
         <el-row :gutter="10">
           <el-col :span="6" :xs="24">
-            <span>计划时间：</span><span class="obear-schedule-right__content">{{ item.start_at }}</span>
+            <span>计划时间：</span><span>{{ item.start_at }}</span>
           </el-col>
           <el-col :span="6" :xs="24">
-            <span>关单时间：</span><span class="obear-schedule-right__content">{{ isEmptyCloseAt ? '(未设置)' : item.close_at }}</span>
+            <span>关单时间：</span><span>{{ isEmptyCloseAt ? '(未设置)' : item.closed_at }}</span>
           </el-col>
           <el-col :span="6" :xs="24">
             <span>创建时间：</span><span>{{ item.created_at }}</span>
           </el-col>
           <el-col :span="6" :xs="24">
-            <span>创建人：{{ item.createdBy }}</span>
+            <span>创建人：{{ item.createdBy.name }}</span>
           </el-col>
         </el-row>
         <el-row :gutter="10">
           <el-col :span="6" :xs="24">
-            <span>回访内容：</span><span class="obear-schedule-right__content">{{ item.start_at }}</span>
+            <span class="obear-schedule-right__content border-dc3545">回访内容</span><span>：{{ formatCallbackQnas }}</span>
           </el-col>
           <el-col :span="6" :xs="24">
-            <div v-if="item">
-              <span>回访尚未完成</span>
+            <div v-if="!item.callback.satisfaction_score">
+              <span class="color-dc3545">回访尚未完成</span>
             </div>
             <div v-else>
-              <span>服务满意度得分：</span><span class="obear-schedule-right__content">{{ item.close_at }}</span>
-              <span>工程师技能得分：</span><span class="obear-schedule-right__content">{{ item.close_at }}</span>
+              <div>
+                <span class="obear-schedule-right__content border-dc3545">服务满意度得分</span><span>：{{ item.callback.satisfaction_score }}</span>
+              </div>
+              <div style="margin-top: 5px">
+                <span class="obear-schedule-right__content border-dc3545">工程师技能得分</span><span>：{{ item.callback.skill_score }}</span>
+              </div>
             </div>
           </el-col>
           <el-col :span="6" :xs="24">
-            <span>客户经理：</span><span>{{ item.created_at }}</span>
+            <span>客户经理：</span><span>{{ item.salesRep.name }}</span>
           </el-col>
           <el-col :span="6" :xs="24">
-            <span>工程师：{{ item.createdBy }}</span>
+            <span>工程师：{{ item.lastEngineer.name }}</span>
           </el-col>
         </el-row>
         <el-row :gutter="10">
           <el-col :span="6" :xs="24">
-            <span class="obear-schedule-right__content">Case说明</span><span>：{{ item.description }}</span>
+            <span class="obear-schedule-right__content border-dc3545">Case说明</span><span>：{{ item.description }}</span>
           </el-col>
           <el-col :span="6" :xs="24">
           </el-col>
@@ -109,7 +113,11 @@ export default {
     },
 
     isEmptyCloseAt () {
-      return !!this.item.close_at
+      return !this.item.closed_at
+    },
+
+    formatCallbackQnas () {
+      return this.item.callback.callbackQnas && this.item.callback.callbackQnas.map(i => i.question.question + i.answer).join('\r\n')
     }
   },
 

src/components/case_list/timeSearchForm.vue

+<template>
+  <section>
+    <el-row class="form-content-time-top">
+      <el-form ref="clientTimeForm" :model="clientTimeForm" size="mini">
+        <el-col :span="8" :xs="24">
+          <el-form-item label="提交时间:" label-width="42">
+            <el-radio-group v-model="clientTimeForm[formSearchKey + '[period]']" size="mini">
+              <el-radio-button label="all">全部</el-radio-button>
+              <el-radio-button label="thismonth">本月</el-radio-button>
+              <el-radio-button label="lastmonth">上月</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+      </el-form>
+      <el-form ref="clientTimeRange" :model="clientTimeRange" size="mini">
+        <el-col :span="8" :offset="8" :xs="{span: 24, offset: 0}" class="form-content-time-range">
+          <el-form-item label-width="0">
+            <el-date-picker
+              size="mini"
+              v-model="clientTimeRange.from"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="开始时间">
+            </el-date-picker>
+            至
+            <el-date-picker
+              size="mini"
+              v-model="clientTimeRange.to"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="结束时间">
+            </el-date-picker>
+            <el-button type="primary" size="mini" @click="setSearchTime">确定</el-button>
+          </el-form-item>
+        </el-col>
+      </el-form>
+    </el-row>
+  </section>
+</template>
+<script>
+import setParams from '../common/setParams'
+export default {
+  name: 'timeSearchForm',
+
+  mixins: [setParams],
+
+  props: ['formSearchKey'],
+
+  data () {
+    return {
+      clientTimeForm: {},
+      clientTimeRange: {
+        from: '',
+        to: ''
+      }
+    }
+  },
+
+  created () {
+    this.initParams()
+    this.init()
+  },
+
+  methods: {
+    init () {
+      this.$watch('clientTimeForm', (val) => {
+        let perid = val[this.formSearchKey + '[period]']
+        this.$emit('update:list', Object.assign({}, {[this.formSearchKey + '[period]']: perid}))
+      }, {deep: true})
+    },
+
+    initParams () {
+      this.setInitParams((ret) => {
+        this.$set(this.clientTimeForm, this.formSearchKey + '[period]', ret[this.formSearchKey + '[period]'] || '')
+      })
+    },
+
+    setSearchTime () {
+      let from = this.clientTimeRange.from
+      let to = this.clientTimeRange.to
+      this.$emit('update:list', Object.assign({}, {
+        [this.formSearchKey + '[from]']: from,
+        [this.formSearchKey + '[to]']: to
+      }, this.clientTimeForm))
+    }
+  },
+
+  watch: {
+    'formSearchKey': {
+      handler (val) {
+        this.$set(this.clientTimeForm, val + '[period]', '')
+      }
+    },
+    'clientTimeRange.from' (val) {
+      if (new Date(val) >= new Date(this.clientTimeRange.to)) {
+        this.clientTimeRange.to = val
+      }
+    },
+    'clientTimeRange.to' (val) {
+      if (new Date(val) <= new Date(this.clientTimeRange.from)) {
+        this.clientTimeRange.from = val
+      }
+    }
+  }
+}
+</script>
+<style scoped>
+  .form-content-time-top {
+    background: #FFF;
+  }
+
+  .form-content-time-top .el-form-item {
+    margin: 7px 0 9px;
+  }
+
+  .form-content-time-top .el-col {
+    padding: 0 15px;
+  }
+</style>

src/components/common/searchForm.vue

@@ -32,6 +32,7 @@
             ></el-cascader>
           </el-form-item>
         </el-col>
+        <slot name="next"></slot>
       </el-form>
     </el-row>
   </div>