store初始化&居民列表页fixed

src/store/index.js

 import Vue from 'vue'
 import Vuex from 'vuex'
 import common from './modules/common'
+//随访
+import followModules from './modules/followup/index'
+
 import getters from './getters'  
 
 
@@ -8,7 +11,8 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   modules: {
-    common
+    common,
+    ...followModules
   },
   getters
 })

src/store/modules/followup/index.js

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

src/store/modules/followup/planManage.js

+import followApi from '../../../utils/followup/followapis'
+
+export default {
+  namespaced: true,
+  state: {
+    residentList: { //居民列表
+      pageNum: 1, //当前页码
+      pageSize: 10, //每页数据大小
+      total: null,  //总数
+    },
+    groupList: [],  //分组列表
+
+  },
+  mutations: {
+    GET_RESIDENT_LIST(state, payload) {
+      state.residentList = payload
+    },
+    GET_GROUP_LIST(state, payload) {
+      state.groupList = payload.labelDtoList
+    }
+  },
+  actions: {
+    getResidentList(context, payload) {
+      const { pageSize, pageNum } = context.state.residentList;
+      followApi.getResidentList({
+        pageSize,
+        pageNum,
+        ...payload
+      }).then(({data}) => {
+        context.commit('GET_RESIDENT_LIST', data);
+      });
+    },
+    getGroupList(context, payload) {
+      followApi.getGroupList({}).then(({data}) => {
+        context.commit('GET_GROUP_LIST', data);
+      });
+    }
+  },
+}

src/utils/followup/followapis.js

@@ -14,6 +14,13 @@ const  planManageApi = [
     name: 'getResidentList',
     description: '获取居民列表',
   },
+  {
+    url: '/followup/planPatient/group',
+    method: 'get',
+    params: 'params',
+    name: 'getGroupList',
+    description: '获取分组列表',
+  },
 ]
 
 

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

@@ -10,48 +10,47 @@
       <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="patientName">
+              <el-input v-model="searchData.patientName" placeholder="请输入姓名"></el-input>
             </el-form-item>
-            <el-form-item label="手机号：">
-              <el-input v-model="searchData.phoneNumber" placeholder="请输入手机号"></el-input>
+            <el-form-item label="手机号：" prop="mobile">
+              <el-input v-model="searchData.mobile" placeholder="请输入手机号"></el-input>
             </el-form-item>
-            <el-form-item label="分组：">
-              <el-select v-model="searchData.group" >
+            <el-form-item label="分组：" prop="labelId">
+              <el-select v-model="searchData.labelId" >
                 <el-option
-                  v-for="item in groupOption"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value">
+                  v-for="item in groupList"
+                  :key="item.labelId"
+                  :label="item.labelName"
+                  :value="item.labelId">
                 </el-option>
               </el-select>
             </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="startDate">
+              <el-date-picker
+                v-model="searchData.startDate"
+                type="datetime"
+                format="yyyy-MM-dd hh:mm:ss"
+                value-format="yyyy-MM-dd hh:mm:ss"
+                placeholder="选择随访开始时间">
+              </el-date-picker>
             </el-form-item>
           </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="searchResidentList">查询</el-button>
+          <el-button class="button-white" plain @click="resetSearchData('searchData')">重置</el-button>
         </div>
       </div>
       <div class="resident-table table-content">
-        <el-radio-group v-model="tableType">
-          <el-radio-button label="0">未完成({{typeNums.notCount}})</el-radio-button>
-          <el-radio-button label="1">进行中({{typeNums.handCount}})</el-radio-button>
-          <el-radio-button label="2">已结束({{typeNums.yesCount}})</el-radio-button>
+        <el-radio-group v-model="status">
+          <el-radio-button label="0">未完成({{residentList.notCount}})</el-radio-button>
+          <el-radio-button label="1">进行中({{residentList.handCount}})</el-radio-button>
+          <el-radio-button label="2">已结束({{residentList.yesCount}})</el-radio-button>
         </el-radio-group>
         <el-table
-          :data="residentData"
+          :data="residentList.fPlanPatientInfoDtoList"
           center
           style="width: 100%;margin-top: 20px;">
           <el-table-column
@@ -98,14 +97,14 @@
         </el-table>
         <el-pagination
           background
-          v-if="residentData.length"
+          v-if="residentList.fPlanPatientInfoDtoList"
           @size-change="handleSizeChangePre"
           @current-change="handleCurrentChangePre"
           layout="total, sizes, prev, pager, next, jumper"
-          :current-page="pageNum"
+          :current-page="residentList.pageNum"
           :page-sizes="[10, 20, 50, 100]"
-          :page-size="pageSize"
-          :total="total">
+          :page-size="residentList.pageSize"
+          :total="residentList.total">
         </el-pagination>
       </div>
     </div>
@@ -113,8 +112,9 @@
 </template>
 
 <script>
-  import api from '../../../utils/followup/followapis';
   import BreadCrumb from '@/components/breadcrumb'
+
+  import { mapState, mapActions } from 'vuex'
   export default {
     name: "residentList",
     components: {
@@ -134,64 +134,55 @@
           value: '全部',
           label: '全部'
         }],
-        tableType: 0, //列表筛选条件
-        typeNums: {
-
-        },
-        residentData: [], //居民列表
-        pageNum: 1,
-        pageSize: 10,
-        total: '',
-
+        status: 0, //列表筛选条件
       }
     },
     created() {
 
     },
     mounted() {
-      this.getResidentList({
-        pageNum: 1,
-        pageSize: 10,
-        status: 0,
+      this.getResidentList();
+      this.getGroupList(); //获取分组列表
+    },
+    computed: {
+      ...mapState('planManage',{
+        residentList: state => state.residentList,
+        groupList: state => state.groupList
       })
     },
     methods: {
-      handleSizeChangePre() {
+      ...mapActions('planManage', ['getResidentList', 'getGroupList']),
+      handleSizeChangePre(pageSize) {
         this.getResidentList({
-          pageNum: 1,
-          pageSize: 10,
-          status: 0,
+          pageSize,
+          status: this.status
         })
       },
-      handleCurrentChangePre() {
-
+      handleCurrentChangePre(pageNum) {
+        this.getResidentList({
+          pageNum,
+          status: this.status
+        })
       },
       goPatientDetail(patientId) { //居民详情页
         this.$router.push('/followup/plan-manage/resident-detail')
 
       },
-      getResidentList(param) {   //获取居民列表
-        api.getResidentList({
-          ...param,
-          planId: 123//从路由里获取
-
-        }).then(({data}) => {
-          this.residentData = data.fPlanPatientInfoDtoList;
-          this.total = data.total
-          this.typeNums = {
-            notCount: data.notCount,
-            handCount: data.handCount,
-            yesCount: data.yesCount,
-          }
-        });
+      searchResidentList() { //查询居民列表
+        this.getResidentList({
+          ...this.searchData,
+          status: this.status
+        })
+      },
+      resetSearchData(formName) {
+        this.$refs[formName].resetFields();
       }
     },
     watch: {
-      tableType(val) {
+      status(val) {
         this.getResidentList({
-          pageNum: 1,
-          pageSize: 10,
           status: val,
+          ...this.searchData
         })
       }
     }
@@ -202,10 +193,4 @@
   @import '../../../style/followup/followup-common';
   @import '../../../style/followup/element-reset.css';
 
-  .resident-list {
-    .resident-content {
-
-    }
-  }
-
 </style>