修改

src/components/schedul/yueke-form.vue

+<template>
+  <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale" transition-hide="scale">
+    <q-card style="width: 400px;max-width:400px;">
+      <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
+        <q-card-section>
+          <div class="text-h6">
+            <span v-if="ChoiceType==3">请填写取消备注</span>
+            <span v-if="ChoiceType==2">请选择流单原因</span>
+          </div>
+        </q-card-section>
+        <div class="row wrap">
+          <template v-if="ChoiceType==3">
+            <q-input filled stack-label :dense="false" v-model="msg.remark" type="textarea" class="col-12" label="备注" />
+          </template>
+          <template v-if="ChoiceType==2">
+            <q-select filled stack-label option-value="Id" option-label="Name" v-model="chooseLiudan"
+              ref="remark" :options="reasonList" label="流单原因" :dense="false" class="col-12 q-pb-lg"
+              emit-value map-options multiple />
+          </template>
+        </div>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right" class="bg-white">
+        <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="closeSaveForm" />
+        <q-btn label="立即提交" color="accent q-px-md" style="font-weight:400 !important" :loading="saveLoading"
+          @click="saveYueke" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+<script>
+  export default {
+    props: {
+      ChoiceType: {
+        type: Number,
+        default: null
+      }
+    },
+    data() {
+      return {
+        persistent: true,
+        saveLoading: false,
+        msg: {
+          remark: ''
+        },
+        chooseLiudan:[],
+        reasonList: [{
+          Id: 1,
+          Name: '教学环境'
+        }, {
+          Id: 2,
+          Name: '教学内容'
+        }, {
+          Id: 3,
+          Name: '讲师'
+        }, {
+          Id: 4,
+          Name: '价格'
+        }, {
+          Id: 5,
+          Name: '销售跟进'
+        }, {
+          Id: 6,
+          Name: '同行竞争'
+        }, {
+          Id: 7,
+          Name: '其他'
+        }]
+      }
+    },
+    mounted() {},
+    methods: {
+      //关闭弹窗
+      closeSaveForm() {
+        this.$emit('close')
+        this.persistent = false
+      },
+      //保存菜单
+      saveYueke() {
+        this.saveLoading = true;
+        if(this.ChoiceType==2){
+            this.msg.remark = this.chooseLiudan.toString();
+        }
+        console.log(this.msg,'msg');
+      },
+
+    }
+  }
+
+</script>

src/pages/sale/appointManagement.vue

@@ -35,6 +35,7 @@
           :input="true" @input="changePage" />
       </template>
     </q-table>
+    <yuekeForm v-if="isShowYue" :ChoiceType="ChoiceType" @close="closeYuekeForm" @success="refreshPage"></yuekeForm>
   </div>
 </template>
 
@@ -42,11 +43,15 @@
   import {
     queryVisitorReservePage
   } from '../../api/scheduling/schedu'
+  import yuekeForm from '../../components/schedul/yueke-form'
+
   export default {
     meta: {
       title: "约课管理"
     },
-    components: {},
+    components: {
+      yuekeForm
+    },
     data() {
       return {
         msg: {
@@ -104,6 +109,8 @@
             field: 'Id'
           }
         ],
+        isShowYue:false,
+        ChoiceType:0
       }
     },
 
@@ -133,8 +140,18 @@
       //预约操作按钮
       OperateVitior(item,type)
       {
-
+        this.ChoiceType = type;
+        this.isShowYue = true;
+      },
+     //关闭弹窗
+      closeYuekeForm() {
+        this.isShowYue = false
+      },
+      //刷新页面
+      refreshPage() {
+        this.getList();
       }
+
     }
   }