feat: develop appointment page

ittpc/src/views/modules/appointment/appointment.vue

@@ -1,26 +1,128 @@
 <template>
-    <div>
-      appointment ,anage
-    </div>
+  <div class="user-page-query" v-loading="loading" element-loading-text="加载中" element-loading-spinner="el-icon-loading">
+    <el-row>
+      <el-col :span="24" class="padding20">
+        <el-form :inline="true" :model="searchForm" class="demo-form-inline" size="small">
+          <el-form-item label="预约时间">
+            <el-date-picker
+              v-model="date"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期">
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item label="预约姓名">
+            <el-input v-model="searchForm.name" placeholder="请输入预约姓名"></el-input>
+          </el-form-item>
+          <el-form-item label="状态">
+            <el-select v-model="searchForm.status" placeholder="请选择">
+              <el-option label="等待服务" value="1"></el-option>
+              <el-option label="已取消" value="0"></el-option>
+              <el-option label="已完成" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary">查询</el-button>
+            <el-button>重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24" class="padding20">
+        <el-button type="primary" size="small" style="width: 100px">导出</el-button>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24" class="padding20">
+        <el-table :data="tableData" border stripe style="width: 100%" size="small" max-height="700">
+          <el-table-column prop="name" label="账户昵称"></el-table-column>
+          <el-table-column prop="phone" label="用户手机号"></el-table-column>
+          <el-table-column prop="time" label="检测人姓名"></el-table-column>
+          <el-table-column prop="times" label="预约时间"></el-table-column>
+          <el-table-column prop="count" label="状态"></el-table-column>
+          <el-table-column label="操作">
+            <template slot-scope="scope">
+              <!-- 若产生报告 则显示已完成 -->
+              <el-button type="text" size="small">已完成</el-button>
+              <el-button type="text" size="small" @click="handleCancelAppoint(scope.row)">取消预约</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24" class="padding20 flexend" >
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          :page-sizes="[100, 200, 300, 400]"
+          :page-size="100"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="400"
+          size="small"
+          >
+        </el-pagination>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
 <script>
 export default {
-    name: 'appointment',
-    data() {
-        return {
+  name: 'appointment',
+  data() {
+    return {
+      loading: false,
+      date: '',
+      searchForm: {
+        name: '',
+        status: ''
+      },
+      tableData: [
+        {
+          name: '范一岚',
+          phone: '18626576880',
+          time: '1995-12-27',
+          times: 100,
+          count: 227,
+          admin: '是'
+        }
+      ],
+      currentPage: 1
+    };
+  },
+  mounted() {
+    console.log('appointment mounted');
+  },
+  methods: {
+    handleSizeChange () {
 
-        };
     },
-    mounted() {
-
-    },
-    methods: {
-
+    handleCurrentChange () {
+      
     },
+    handleCancelAppoint () {
+      this.$confirm('确定取消预约吗？').then( _=> {
+        console.log('ok');
+      }).catch(_ => {});
+    }
+  }
 };
 </script>
 
-<style scoped>
-
-</style>
+<style scoped lang="scss">
+.user-page-query {
+  width: 100%;
+  height: 100%;
+  .padding20 {
+    padding: 20px;
+  }
+  .flexend {
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+</style>