添加计划列表页面

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

 <template>
-    <div>
-      <h1>计划管理-计划列表</h1>
+  <div class="plan-list-wrapper">
+    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
+    <div class="plan-list-content f-main-content screenSet">
+      <div class="page-title">计划管理</div>
+      <div class="search-div">
+        <div class="search-input">
+          <el-form ref="serchForm" :model="searchData" :inline="true" label-suffix=":" label-width="125px">
+            <el-form-item label="随访计划名称">
+              <el-input v-model="searchData.name" placeholder="请输入关键词" maxlength="20" style="width: 250px" clearable></el-input>
+            </el-form-item>
+            <el-form-item label="开始年份">
+              <el-select v-model="searchData.timeRange" placeholder="请选择时间范围" style="width: 250px" clearable>
+                <el-option
+                  v-for="(item,index) in timeRangeList"
+                  :key="index"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div class="search-btn">
+          <el-button class="button-green" type="primary" @click="search">查询</el-button>
+          <el-button class="button-white" plain @click="reseat">重置</el-button>
+        </div>
+      </div>
+      <div class="table-content">
+        <div class="content-group-btn"><el-button type="primary">新建随访计划</el-button></div>
+        <div>
+          <el-table :data="planListData" style="width: 100%;margin-top: 20px;">
+            <el-table-column prop="name" label="随访计划名称" min-width="100" align="center" :show-overflow-tooltip="true">
+              <template slot-scope="scope">
+                <span style="cursor: pointer" @click="visitDetail(scope.row)">{{scope.row.name}}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="startYear" label="开始年份" min-width="100" align="center"></el-table-column>
+            <el-table-column prop="totalNum" label="总人数" min-width="150" align="center"></el-table-column>
+            <el-table-column label="操作" fixed="right" align="center" min-width="240">
+              <template slot-scope="scope">
+                <el-button class="btn-right-class" type="text" @click="visitRow(scope.row)">查看居民</el-button>|
+                <el-button class="btn-right-class" type="text" @click="changeRow(scope.row)"> 修改</el-button>|
+                <el-button type="text" @click="deleteRow(scope.row)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-row type="flex" justify="end" class="margin-top20">
+            <el-pagination
+              background
+              v-if="planListData.length"
+              @size-change="handleSizeChangePre"
+              @current-change="handleCurrentChangePre"
+              layout="total, sizes, prev, pager, next, jumper"
+              :current-page="paginationSet.pageNum"
+              :page-sizes="paginationSet.pageSizes"
+              :page-size="paginationSet.pageSize"
+              :total="paginationSet.total">
+            </el-pagination>
+          </el-row>
+        </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
-  export default {}
+  import BreadCrumb from "@/components/breadcrumb";
+  export default {
+    components:{
+      BreadCrumb,
+    },
+    data(){
+      return{
+        curmbFirst: '随访管理',
+        curmbSecond: '计划管理',
+        searchData: {
+          name: '',
+          timeRange: '',
+        },
+        timeRangeList:[{
+          label: '10:00~11:00',
+          value: 1
+        },{
+          label: '11:00~12:00',
+          value: 2
+        }],
+        planListData: [
+          {
+          name: '糖尿病高危随访',
+          startYear: '2018',
+          totalNum: '39',
+        }
+        ],
+        paginationSet: {
+          pageNum: 1,
+          pageSize: 10,
+          total: 0,
+          pageSizes: [10,20,50,100]
+        },
+      }
+    },
+    methods: {
+      search(){
+        console.log('搜索')
+      },
+      reseat(){
+        this.searchData.name = '';
+        this.searchData.timeRange = '';
+      },
+      visitDetail(row){
+        this.dialogDetailShow = true;
+      },
+      visitRow(row){},
+      changeRow(row){
+        // this.statusForm = row;
+        // this.dialogFormVisible = true;
+        // if (this.$refs['statusForm']) {
+        //   this.$refs['statusForm'].resetFields();
+        // }
+      },
+      deleteRow(row){},
+
+      handleSizeChangePre(pageSize){
+        this.paginationSet['pageSize'] = pageSize;
+        this.paginationSet['pageNum'] = 1;
+      },
+      handleCurrentChangePre(pageNum){
+        this.paginationSet['pageNum'] = pageNum
+      },
+    },
+    filters: {},
+  }
 </script>
 
 <style scoped lang="scss">
 
+  @import '../../../style/followup/followup-common';
+  @import '../../../style/followup/element-reset.css';
+  .plan-list-wrapper{
+    .plan-list-content{
+      .search-input{
+        max-width: none;
+        flex: 1;
+      }
+      .margin-top20{
+        margin-top: 20px;
+      }
+      .status-span{
+        color: $picaGreen;
+      }
+    }
+    .content-group-btn{
+      text-align: right;
+    }
+  }
 </style>

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

@@ -10,14 +10,23 @@
                 <el-input v-model="searchData.name" placeholder="请输入关键词" style="width: 250px" clearable></el-input>
               </el-form-item>
               <el-form-item label="随访时间范围">
-                <el-select v-model="searchData.timeRange" placeholder="请选择时间范围" style="width: 250px" clearable>
-                  <el-option
-                    v-for="(item,index) in timeRangeList"
-                    :key="index"
-                    :label="item.label"
-                    :value="item.value">
-                  </el-option>
-                </el-select>
+                <!--<el-select v-model="searchData.timeRange" placeholder="请选择时间范围" style="width: 250px" clearable>-->
+                  <!--<el-option-->
+                    <!--v-for="(item,index) in timeRangeList"-->
+                    <!--:key="index"-->
+                    <!--:label="item.label"-->
+                    <!--:value="item.value">-->
+                  <!--</el-option>-->
+                <!--</el-select>-->
+                <el-date-picker
+                  v-model="searchData.timeRange"
+                  type="daterange"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                  clearable
+                  style="width:380px;">
+                </el-date-picker>
               </el-form-item>
               <el-form-item label="姓名">
                 <el-input v-model="searchData.nickname" placeholder="请输入姓名" clearable></el-input>
@@ -88,7 +97,7 @@
             <span>{{statusForm.status==1 ? '未完成' : '已完成'}}</span>
           </el-form-item>
           <el-form-item label="变更原因" prop="reason">
-            <el-input type="textarea" v-model="statusForm.reason" placeholder="请输入变更原因" rows="3" style="width:60%;"></el-input>
+            <el-input type="textarea" v-model="statusForm.reason" placeholder="请输入变更原因" maxlength="30" rows="3" style="width:60%;"></el-input>
           </el-form-item>
         </el-form>
         <!--<div class="form-content">-->