11111

src/pages/stuMan/components/appointmentDetails.vue

+<style>
+
+</style>
+<!--预约详情-->
+<template>
+  <q-dialog v-model="isShowAppointmentDialog" content-class="bg-grey-1" persistent transition-show="scale"
+    transition-hide="scale">
+    <q-card style="width: 800px; max-width: 900px" class="stop">
+      <q-card-section>
+        <div class="text-h6">预约详情</div>
+      </q-card-section>
+      <div style="margin: 20px">
+        <q-table :loading="loading" :pagination="pageMsg" no-data-label="暂无相关数据" flat
+          class="sticky-column-table sticky-right-column-table" :data="DataList" :columns="columns" row-key="name"
+          hide-bottom>
+          <template v-slot:body-cell-StartTime="props">
+            <q-td :props="props">
+              {{props.row.StartTime}} - {{props.row.EndTime}}
+            </q-td>
+          </template>
+          <template v-slot:body-cell-StatusStr="props">
+            <q-td :props="props">
+              <q-badge :color="props.row.Status == 0 ? 'primary' : 'negative'" :label="props.row.StatusStr" />
+            </q-td>
+          </template>
+        </q-table>
+        <q-separator />
+      </div>
+      <q-card-actions align="right" class="bg-white">
+        <q-btn label="取消" flat color="grey-10" style="font-weight: 400 !important" @click="closeAppointmentForm" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+<script>
+  import {
+    queryPlanAppointmentDetail,
+  } from "../../../api/stuMan/index";
+
+  export default {
+    name: "appointmentDetails",
+    props: {
+      showItem: {
+        type: Object,
+        default: null,
+      },
+    },
+    data() {
+      return {
+        isShowAppointmentDialog: true,
+        loading: false,
+        columns: [{
+            name: "StuName",
+            label: "姓名",
+            field: "StuName",
+            align: "left",
+          },
+          {
+            name: "DateStr",
+            label: "预约日期",
+            field: "DateStr",
+            align: "left",
+          },
+          {
+            name: "StartTime",
+            label: "预约时段",
+            field: "StartTime",
+            align: "left",
+          },
+          {
+            name: "StatusStr",
+            label: "预约状态",
+            field: "StatusStr",
+            align: "left",
+          },
+          {
+            name: "CreateTime",
+            label: "创建时间",
+            field: "CreateTime",
+            align: "left",
+          }
+        ],
+        qMsg: {
+          PlanAppointmentId: 0,
+        },
+        pageMsg: {
+          rowsPerPage: 1000
+        },
+        DataList: [],
+      };
+    },
+    created() {
+      this.qMsg.PlanAppointmentId = this.showItem.PlanAppointmentId
+    },
+    mounted() {
+      this.getAppointmentDetailsList();
+    },
+    methods: {
+      //关闭弹窗
+      closeAppointmentForm() {
+        this.$emit("refreshpage");
+      },
+      //获取预约详情
+      getAppointmentDetailsList() {
+        this.loading = true;
+        queryPlanAppointmentDetail(this.qMsg).then(res => {
+          this.loading = false;
+          if (res.Code == 1) {
+            this.DataList = res.Data;
+          }
+        });
+      }
+    },
+  };
+</script>
\ No newline at end of file

src/pages/stuMan/components/stuAppointmentList.vue

@@ -21,7 +21,8 @@
             </q-td>
             <q-td key="Num" :props="props">
               <div v-for="item in props.row.TimeList">
-                <div class="border-bottom" style="cursor:pointer;color:blue;text-decoration:underline" @click="ShowStuAppoint(item)">
+                <div class="border-bottom" style="cursor:pointer;color:blue;text-decoration:underline"
+                  @click="ShowStuAppoint(item)">
                   {{item.StuAppointNum}}
                 </div>
               </div>
@@ -30,14 +31,13 @@
         </template>
       </q-table>
     </div>
+    <appointmentDetails v-if="isShowDetails" :showItem="showItem" @refreshpage="refreshpage"></appointmentDetails>
   </div>
 </template>
 <script>
-  import {
-    queryPlanAppointmentDetail,
-  } from "../../../api/stuMan/index";
-  export default {
 
+  import appointmentDetails from "./appointmentDetails";
+  export default {
     props: {
       tableData: {
         type: Array,
@@ -51,7 +51,9 @@
     meta: {
       title: "学员预约统计",
     },
-    components: {},
+    components: {
+      appointmentDetails
+    },
     data() {
       return {
         columns: [{
@@ -78,37 +80,23 @@
         pageMsg: {
           rowsPerPage: 1000
         },
+        //是否显示预约详情
+        isShowDetails: false,
+        showItem: {},
       };
     },
     created() {},
     mounted() {},
     methods: {
-      //翻页
-      changePage(val) {
-
-      },
-      //跳转到课程回顾
-      goCourseRecord(item) {
-        this.OpenNewUrl("../../classroom/courseInfo", {
-          id: item.Id,
-        });
-      },
-      //跳转到课程反馈
-      goFeedBack(item) {
-        this.OpenNewUrl("/teacher/feedBackList", {
-          id: item.Id,
-        });
+      //刷新页面
+      refreshpage() {
+        this.isShowDetails=false;
+        this.showItem={};
       },
       //显示预约详情
       ShowStuAppoint(item) {
-        console.log("item", item);
-        if (item.PlanAppointmentId && item.PlanAppointmentId > 0) {
-          queryPlanAppointmentDetail({
-            PlanAppointmentId: item.PlanAppointmentId
-          }).then(res => {
-            console.log("res", res);
-          });
-        }
+        this.showItem = item;
+        this.isShowDetails = true;
       }
     },
   };