居民列表

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

+<template>
+  <div class="resident-list">
+    <bread-crumb
+      :curmbFirst="curmbFirst"
+      :curmbSecond="curmbSecond"
+      :curmbThird="curmbThird"
+      :jumPathThird="jumPathThird">
+    </bread-crumb>
+    <div class="resident-content screenSet">
+      <p class="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-item>
+            <el-form-item label="手机号：">
+              <el-input v-model="searchData.phoneNumber" placeholder="请输入手机号"></el-input>
+            </el-form-item>
+            <el-form-item label="分组：">
+              <el-select v-model="searchData.group" >
+                <el-option
+                  v-for="item in groupOption"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </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>
+          </el-form>
+        </div>
+        <div class="search-btn">
+          <el-button class="button-green" type="primary">查询</el-button>
+          <el-button class="button-white" plain>重置</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import BreadCrumb from '@/components/breadcrumb'
+  export default {
+    name: "residentList",
+    components: {
+      BreadCrumb
+    },
+    data() {
+      return {
+        curmbFirst: '随访管理',
+        curmbSecond: '计划管理',
+        curmbThird: '查看居民',
+        jumPathThird: '/followUp/plan-manage',
+        labelWidth: '96px',
+        searchData: {},
+        groupOption: [{
+          value: '全部',
+          label: '全部'
+        }]
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  $borderStyle: 1px solid #efefef;
+  .resident-list {
+    .resident-content {
+      background: #ffffff;
+      padding: 30px;
+      .title {
+        font-size: 20px;
+        padding-bottom: 10px;
+        border-bottom: $borderStyle;
+      }
+      .search-div {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        padding: 30px 0 10px 0;
+        border-bottom: $borderStyle;
+        .search-input {
+          max-width: 650px;
+          .el-input {
+            width: 205px;
+          }
+        }
+        .search-btn {
+          min-width: 205px;
+          button {
+            width: 95px;
+            height: 40px;
+          }
+        }
+      }
+    }
+  }
+</style>