预约列表

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

 <template>
-    <div>
-      <h1>预约管理-预约列表</h1>
+  <div class="resident-list">
+    <bread-crumb
+      :curmbFirst="curmbFirst"
+      :curmbSecond="curmbSecond">
+    </bread-crumb>
+    <div class="resident-content f-main-content screenSet">
+      <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-item>
+            <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.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-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 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>
+        <el-button class="button-green" type="primary">发送预约</el-button>
+        <el-table
+          :data="reservationData"
+          center
+          style="width: 100%;margin-top: 20px;">
+          <el-table-column
+            type="selection"
+            align="center">
+          </el-table-column>
+          <el-table-column
+            prop="patientName"
+            label="姓名"
+            align="center">
+          </el-table-column>
+          <el-table-column
+            prop="sexName"
+            label="手机"
+            align="center">
+          </el-table-column>
+          <el-table-column
+            prop="mobilePhone"
+            label="随访计划名称"
+            align="center">
+          </el-table-column>
+          <el-table-column
+            prop="time"
+            label="随访计划时间"
+            align="center">
+          </el-table-column>
+          <el-table-column
+            prop="time"
+            label="随访预约时间"
+            align="center">
+          </el-table-column>
+          <el-table-column
+            fixed="right"
+            label="操作"
+            align="center">
+            <template slot-scope="scope">
+              <el-button class="btn-right-class" type="text" >发送预约</el-button>|
+              <el-button class="btn-right-class" type="text" >变更预约</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-pagination
+          background
+          v-if="reservationData.length"
+          @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">
+        </el-pagination>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
-  export default {}
+  import api from '../../../utils/followup/followapis';
+  import BreadCrumb from '@/components/breadcrumb'
+  export default {
+    name: "reservation-list",
+    components: {
+      BreadCrumb
+    },
+    data() {
+      return {
+        /*面包屑配置*/
+        curmbFirst: '随访管理',
+        curmbSecond: '预约管理',
+        /*面包屑配置*/
+        labelWidth: '96px',  //标题长度
+        searchData: {}, //查询数据
+        groupOption: [{ // 分组选项
+          value: '全部',
+          label: '全部'
+        }],
+        tableType: 0, //列表筛选条件
+        reservationData: [
+
+        ], //居民列表
+        pageNum: 1,
+        pageSize: 15,
+        total: 100,
+
+      }
+    },
+    created() {
+      console.log('api',api)
+    },
+    mounted() {},
+    methods: {
+      handleSizeChangePre() {
+
+      },
+      handleCurrentChangePre() {
+
+      },
+      goPatientDetail(patientId) { //居民详情页
+        alert(1+patientId)
+        this.$router.push('/followup/plan-manage/resident-detail')
+
+      }
+    }
+  }
 </script>
+<style lang="scss" scoped>
 
-<style scoped lang="scss">
+  @import '../../../style/followup/followup-common';
+  @import '../../../style/followup/element-reset.css';
 
+  .reservation-table {
+    .button-green {
+      float: right;
+    }
+  }
 </style>