store fixed&预约列表

src/store/modules/followup/index.js

 import planManage from './planManage'
+import reservationManage from './reservationManage'
 const followModules = {
-  planManage
+  planManage,
+  reservationManage
 }
 
 export default followModules

src/store/modules/followup/reservationManage.js

+import followApi from '../../../utils/followup/followapis'
+
+export default {
+  namespaced: true,
+  state: {
+    reservationList: { //居民列表
+      pageNum: 1, //当前页码
+      pageSize: 10, //每页数据大小
+      total: null,  //总数
+    },
+
+  },
+  mutations: {
+    GET_RESERVATION_LIST(state, payload) {
+      state.reservationList = payload
+    },
+  },
+  actions: {
+    getReservationList(context, payload) {
+      const { pageSize, pageNum } = context.state.reservationList;
+      followApi.getReservationList({
+        pageSize,
+        pageNum,
+        ...payload
+      }).then(({data}) => {
+        context.commit('GET_RESERVATION_LIST', data);
+      });
+    }
+  },
+}

src/utils/followup/followapis.js

@@ -21,13 +21,23 @@ const  planManageApi = [
     name: 'getGroupList',
     description: '获取分组列表',
   },
-]
+];
 
+/*预约管理API*/
+const reservationManageApi = [
+  {
+    url: '/followup/appointmentPatient/',
+    method: 'get',
+    params: 'params',
+    name: 'getReservationList',
+    description: '获取预约列表',
+  },
+]
 
 
 
 const api = {};
-const apis = [...planManageApi];
+const apis = [...planManageApi, ...reservationManageApi];
 
 apis.forEach(item => api[item.name] = (params = {}, extraConfig = {}) => {
   const config = {

src/views/followup/plan-manage/resident-list.vue

@@ -155,12 +155,14 @@
       handleSizeChangePre(pageSize) {
         this.getResidentList({
           pageSize,
+          ...this.searchData,
           status: this.status
         })
       },
       handleCurrentChangePre(pageNum) {
         this.getResidentList({
           pageNum,
+          ...this.searchData,
           status: this.status
         })
       },

src/views/followup/reservation-manage/reservation-list.vue

@@ -8,30 +8,32 @@
       <p class="page-title">预约管理</p>
       <div class="search-div">
         <div class="search-input">
-          <el-form :model="searchData" :inline="true" :label-width="labelWidth">
-            <el-form-item label="随访计划名称：">
-              <el-input v-model="searchData.residentName" placeholder="请输入随访计划名称"></el-input>
+          <el-form :model="searchData" ref="searchData" :inline="true" :label-width="labelWidth">
+            <el-form-item label="随访计划名称：" prop="planName">
+              <el-input v-model="searchData.planName" placeholder="请输入随访计划名称"></el-input>
             </el-form-item>
-            <el-form-item label="姓名：">
-              <el-input v-model="searchData.residentName" placeholder="请输入姓名"></el-input>
+            <el-form-item label="姓名：" prop="nickName">
+              <el-input v-model="searchData.nickName" placeholder="请输入姓名"></el-input>
             </el-form-item>
-            <el-form-item label="手机号：">
-              <el-input v-model="searchData.phoneNumber" placeholder="请输入手机号"></el-input>
+            <el-form-item label="手机号：" prop="mobilePhone">
+              <el-input v-model="searchData.mobilePhone" placeholder="请输入手机号"></el-input>
             </el-form-item>
-            <el-form-item label="随访计划时间：">
-              <el-select v-model="searchData.startTime">
-                <el-option
-                  v-for="item in groupOption"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value">
-                </el-option>
-              </el-select>
+            <el-form-item label="随访时间范围：" prop="planTimes">
+              <el-date-picker
+                v-model="searchData.planTimes"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                format="yyyy-MM-dd"
+                value-format="yyyy-MM-dd"
+                style="width: 380px;">
+              </el-date-picker>
             </el-form-item>
-            <el-form-item label="居民预约状态：">
-              <el-select v-model="searchData.startTime">
+            <el-form-item label="居民预约状态：" prop="timeStatus">
+              <el-select v-model="searchData.timeStatus">
                 <el-option
-                  v-for="item in groupOption"
+                  v-for="item in statusOptions"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
@@ -41,21 +43,21 @@
           </el-form>
         </div>
         <div class="search-btn">
-          <el-button class="button-green" type="primary">查询</el-button>
-          <el-button class="button-white" plain>重置</el-button>
+          <el-button class="button-green" type="primary" @click="searchReservationList">查询</el-button>
+          <el-button class="button-white" plain @click="resetSearchData('searchData')">重置</el-button>
         </div>
       </div>
       <div class="reservation-table table-content">
-        <el-radio-group v-model="tableType">
-          <el-radio-button label="0">全部(200)</el-radio-button>
-          <el-radio-button label="1">未发送(200)</el-radio-button>
-          <el-radio-button label="2">待确认(100)</el-radio-button>
-          <el-radio-button label="1">已接受(200)</el-radio-button>
-          <el-radio-button label="2">已拒绝(100)</el-radio-button>
+        <el-radio-group v-model="status">
+          <el-radio-button label="0">全部({{reservationList.total}})</el-radio-button>
+          <el-radio-button label="1">未发送({{reservationList.notCount}})</el-radio-button>
+          <el-radio-button label="2">待确认({{reservationList.handCount}})</el-radio-button>
+          <el-radio-button label="3">已接受({{reservationList.yesCount}})</el-radio-button>
+          <el-radio-button label="4">已拒绝({{reservationList.refuseCount }})</el-radio-button>
         </el-radio-group>
         <el-button class="button-green" type="primary">发送预约</el-button>
         <el-table
-          :data="reservationData"
+          :data="reservationList.fPlanAppointmentDtoList"
           center
           style="width: 100%;margin-top: 20px;">
           <el-table-column
@@ -63,30 +65,30 @@
             align="center">
           </el-table-column>
           <el-table-column
-            prop="patientName"
+            prop="nickName"
             label="姓名"
             align="center">
             <template slot-scope="scope">
-              <el-button type="text" @click="goPatientDetail(scope.row.patientId)" >{{scope.row.patientName}}</el-button>
+              <el-button type="text" @click="goPatientDetail(scope.row.planId, scope.row.nickId)" >{{scope.row.nickName}}</el-button>
             </template>
           </el-table-column>
           <el-table-column
-            prop="sexName"
+            prop="mobilePhone"
             label="手机"
             align="center">
           </el-table-column>
           <el-table-column
-            prop="mobilePhone"
+            prop="planName"
             label="随访计划名称"
             align="center">
           </el-table-column>
           <el-table-column
-            prop="time"
+            prop="planTime"
             label="随访计划时间"
             align="center">
           </el-table-column>
           <el-table-column
-            prop="time"
+            prop="appointmentTime"
             label="随访预约时间"
             align="center">
           </el-table-column>
@@ -102,14 +104,14 @@
         </el-table>
         <el-pagination
           background
-          v-if="reservationData.length"
+          v-if="reservationList.fPlanAppointmentDtoList"
           @size-change="handleSizeChangePre"
           @current-change="handleCurrentChangePre"
           layout="total, sizes, prev, pager, next, jumper"
-          :current-page="pageNum"
-          :page-sizes="[100, 200, 300, 400]"
-          :page-size="pageSize"
-          :total="total">
+          :current-page="reservationList.pageNum"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="reservationList.pageSize"
+          :total="reservationList.total">
         </el-pagination>
       </div>
     </div>
@@ -119,6 +121,9 @@
 <script>
   import api from '../../../utils/followup/followapis';
   import BreadCrumb from '@/components/breadcrumb'
+
+  import { mapState, mapActions } from 'vuex'
+
   export default {
     name: "reservation-list",
     components: {
@@ -132,43 +137,95 @@
         /*面包屑配置*/
         labelWidth: '96px',  //标题长度
         searchData: {}, //查询数据
-        groupOption: [{ // 分组选项
-          value: '全部',
-          label: '全部'
-        }],
-        tableType: 0, //列表筛选条件
-        reservationData: [
+        status: 0, //列表筛选条件
+        statusOptions: [
           {
-            "patientId": "居民ID",
-            "patientName": "居民姓名",
-            "sex": "性别",
-            "sexName": "性别名字",
-            "time": "随访开始时间",
-            "labelId": "分组ID",
-            "labelName": "分组名字"
+            value: 1,
+            label: '未完成'
+          },
+          {
+            value: 2,
+            label: '已完成'
+          },
+          {
+            value: 3,
+            label: '已过期'
           }
-        ], //居民列表
-        pageNum: 1,
-        pageSize: 15,
-        total: 100,
-
+        ],  //居民预约状态
       }
     },
     created() {
-      console.log('api',api)
+
+    },
+    mounted() {
+      this.getReservationList()
+    },
+    computed: {
+      ...mapState('reservationManage',{
+        reservationList: state => state.reservationList,
+      })
     },
-    mounted() {},
     methods: {
-      handleSizeChangePre() {
-
+      ...mapActions('reservationManage', ['getReservationList']),
+      handleSizeChangePre(pageSize) {
+        this.getReservationList({
+          pageSize,
+          status: this.status,
+          ...this.setSearchData()
+        })
       },
-      handleCurrentChangePre() {
-
+      handleCurrentChangePre(pageNum) {
+        this.getReservationList({
+          pageNum,
+          status: this.status,
+          ...this.setSearchData()
+        })
+      },
+      searchReservationList() { //查询预约列表
+        this.getReservationList({
+          ...this.setSearchData(),
+          status: this.status,
+        })
       },
-      goPatientDetail(patientId) { //居民详情页
+      resetSearchData(formName) {
+        this.$refs[formName].resetFields();
+      },
+      goPatientDetail(patientId) { //预约详情页
         alert(1+patientId)
         this.$router.push('/followup/plan-manage/resident-detail')
 
+      },
+      setSearchData() {
+        const { planName, mobilePhone, timeStatus, nickName } = this.searchData;
+        let para = {}
+        if(this.searchData.planTimes) {
+          para = {
+            planName,
+            mobilePhone,
+            timeStatus,
+            nickName,
+            planFromTime: this.searchData.planTimes[0],
+            planToTime: this.searchData.planTimes[1],
+            status: this.status
+          }
+        } else {
+          para = {
+            planName,
+            mobilePhone,
+            timeStatus,
+            nickName,
+            status: this.status
+          }
+        }
+        return para;
+      }
+    },
+    watch: {
+      status(val) {
+        this.getReservationList({
+          status: val,
+          ...this.setSearchData()
+        })
       }
     }
   }