页面修改

src/api/sale/sale.js

@@ -214,4 +214,16 @@ export function quertClassOrderList(data) {
       method: 'post',
       data
     })
+  }
+
+/**
+ *  学员退课申请
+ *
+ */
+export function SetBackClassApply(data) {
+    return request({
+      url: '/order/BackClassApply',
+      method: 'post',
+      data
+    })
   }
\ No newline at end of file

src/components/sale/backclass-form.vue

@@ -2,15 +2,29 @@
 <template>
   <q-dialog v-model="IsShowBackClassDialog" content-class="bg-grey-1" persistent transition-show="scale"
     transition-hide="scale">
-    <q-card style="width: 400px;max-width:500px;">
+    <q-card style="width: 800px;max-width:900px;">
       <q-card-section>
         <div class="text-h6">退课申请</div>
       </q-card-section>
-
+      <q-table :loading="loading" no-data-label="暂无相关学员数据" flat class="sticky-column-table" separator="none"
+        :data="studentList" :columns="columns" hide-bottom row-key="Id">
+        <template v-slot:body-cell-optioned="props">
+          <q-td :props="props">
+            <div style="min-width:190px;width:100%">
+              <q-btn v-if="props.row.GuestState==1" flat size="xs" icon="iconfont icon-shenhe" color="info"
+                style="font-weight:400" class="q-mr-xs" label="申请" @click="clickItem(props.row,1)" />
+              <q-btn v-if="props.row.AuditStatus==3" flat size="xs" icon="iconfont icon-ziyuan" color="warning"
+                style="font-weight:400" class="q-mr-xs" label="重新申请" @click="clickItem(props.row,2)" />
+            </div>
+          </q-td>
+        </template>
+      </q-table>
+      <q-input filled stack-label :dense="false" v-model="applyReason" style="margin-top: 20px" type="textarea"
+        class="col-12" label="申请理由" />
       <q-separator />
       <q-card-actions align="right" class="bg-white">
         <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="closeBackClassForm" />
-        <q-btn label="立即提交" color="accent" class="q-px-md" style="font-weight:400 !important"
+        <q-btn label="确认申请" color="accent" class="q-px-md" style="font-weight:400 !important"
           @click="saveOrderBackClass" />
       </q-card-actions>
     </q-card>
@@ -37,7 +51,52 @@
           pageIndex: 1,
           pageSize: 1000,
         },
+        applyReason: "", //申请理由
+        loading: false,
+        columns: [{
+            name: 'GuestName',
+            label: '姓名',
+            field: 'GuestName',
+            align: 'left',
+          },
+          {
+            name: 'SexStr',
+            label: '性别',
+            field: 'SexStr',
+            align: 'left',
+          },
+          {
+            name: 'Age',
+            label: '年龄',
+            field: 'Age',
+            align: 'left',
+          },
+          {
+            name: 'Mobile',
+            label: '联系电话',
+            align: 'left',
+            field: 'Mobile'
+          },
+          {
+            name: 'ClassHours',
+            label: '已上课时',
+            field: 'ClassHours',
+            align: 'left',
+          },
+          {
+            name: 'GuestStateStr',
+            label: '状态',
+            field: 'GuestStateStr',
+            align: 'left'
+          },
+          {
+            name: 'optioned',
+            label: '操作',
+            field: 'Id'
+          }
+        ],
         studentList: [], //学员列表
+        chooseItem: {}, //当前选择项
       }
     },
     created() {
@@ -46,9 +105,17 @@
       this.getStudentList();
     },
     methods: {
+      //当前点击项
+      clickItem(item, type) {
+        this.chooseItem = item;
+      },
       //关闭弹窗
       closeBackClassForm() {
         this.IsShowBackClassDialog = false;
+        this.applyReason = "";
+        this.backClassMsg.OrderId = 0;
+        this.backClassMsg.ClassId = 0;
+        this.chooseItem = {};
         this.$emit('close');
       },
       //获取订单学员列表
@@ -57,12 +124,17 @@
         getOrderGuestPageList(this.backClassMsg).then(res => {
           if (res.Code == 1) {
             this.studentList = res.Data.PageData;
-            console.log("res", this.studentList);
           }
         })
       },
       //获取学员退课申请
       saveOrderBackClass() {
+        var applyMsg = {
+          GuestId: this.chooseItem.Id,
+          OrderId: this.chooseItem.OrderId,
+          applyReason: this.applyReason
+        };
+        console.log("item", applyMsg);
         // updateOrderRemark(this.OrderRemarkMsg).then(res => {
         //   if (res.Code == 1) {
         //     this.$q.notify({