新增页面

src/components/sale/backbill-form.vue

+<!--退课表单审核信息-->
+<style>
+  .backbill-Dialog .drawerTop {
+    width: 100%;
+    height: 50px;
+    display: flex;
+    justify-content: space-between;
+    background-color: #F0F5FB;
+    padding: 5px 10px;
+    align-items: center;
+  }
+
+  .backbill-Dialog .classFirst {
+    color: #000000;
+    font-weight: bold;
+  }
+
+  .backbill-Dialog .className {
+    margin-left: 10px;
+  }
+
+  .backbill-Dialog .classStatus {
+    padding: 3px 8px;
+    background-color: #c8d7fc;
+    color: #2961FE;
+    font-size: 12px;
+    border-radius: 2px;
+    margin-left: 20px;
+  }
+
+  .backbill-Dialog .normalName {
+    color: #999999;
+  }
+
+  .backbill-Dialog .normalInner {
+    color: #111111;
+  }
+
+  .drop_NameDown {
+    margin-top: 20px;
+    width: 300px;
+  }
+
+</style>
+<template>
+  <q-dialog v-model="persistent" maximized full-height seamless position="right" @hide="closeShenheForm">
+    <q-card style="margin-top:61px;width:850px" class="no-border-radius backbill-Dialog">
+      <div class="drawerTop">
+        <div style="display:flex;align-items:center;">
+          <div class="className">
+            <div class="classFirst">退课审批</div>
+          </div>
+          <div class="classStatus">{{setingObj.AuditStatusName}}</div>
+        </div>
+      </div>
+      <q-tabs style="margin-bottom:20px;" v-model="tabCheck" narrow-indicator dense align="left" class="text-primary">
+        <q-tab :ripple="false" name="first" label="详细信息" />
+        <q-tab :ripple="false" name="second" label="审批记录" />
+      </q-tabs>
+      <div v-if="tabCheck=='first'" style="margin:0 15px;">
+         <backinfoForm :seting-obj="setingObj"></backinfoForm>
+      </div>
+      <div v-if="tabCheck=='second'">
+         <backflowForm :seting-obj="setingObj"></backflowForm>
+      </div>
+    </q-card>
+    <div class="dialog-out-close" @click="closeShenheForm"
+      style="height:40px !important;border-top-left-radius: 4px !important;border-bottom-left-radius: 4px !important;">
+      <q-icon name="iconfont icon-jujue1" size="26px" />
+    </div>
+  </q-dialog>
+</template>
+
+<script>
+  import backinfoForm from '../sale/backinfo-form';
+  import backflowForm from '../sale/backflow-form';
+  export default {
+    props: {
+      setingObj: {
+        type: Object,
+        default: null
+      }
+    },
+    components: {
+      backinfoForm,
+      backflowForm,
+    },
+    data() {
+      return {
+        persistent: true,
+        tabCheck: 'first', //默认选第一个
+        loading: false,
+      }
+    },
+    created() {
+
+    },
+    mounted() {
+      console.log("setingObj",this.setingObj)
+    },
+    methods: {
+      closeShenheForm() {
+        this.persistent = false;
+        this.$emit('close');
+      },
+    }
+  }
+
+</script>

src/components/sale/backflow-form.vue

+<template>
+  <div>
+    流程信息
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      setingObj: {
+        type: Object,
+        default: null
+      }
+    },
+    components: {
+
+    },
+    data() {
+      return {
+        persistent: true,
+      }
+    },
+    created() {},
+    mounted() {
+      console.log("setingObj", this.setingObj);
+    },
+    methods: {
+
+    },
+  }
+
+</script>

src/components/sale/backinfo-form.vue

+<template>
+  <div>
+    基本信息
+    <br />
+    <span>
+      编号:{{setingObj.BackNum}}
+    </span>
+    <br />
+    <span>
+      申请人:{{setingObj.CreateByName}}
+    </span>
+    <br />
+    <span>
+      学员姓名:{{setingObj.GuestName}}
+    </span>
+    <br />
+    <span>
+      申请时间:{{setingObj.CreateTimeStr}}
+    </span>
+
+    <br />
+    <br />
+    教学信息
+    <br />
+    <span>
+      校区:{{setingObj.SchoolName}}
+    </span>
+    <br />
+    <span>
+      班级名称:{{setingObj.ClassName}}
+    </span>
+    <br />
+    <span>
+      代课老师:{{setingObj.TeacherName}}
+    </span>
+    <br />
+    <span>
+      学习课程:{{setingObj.CourseName}}
+    </span>
+
+    <br />
+    <br />学习信息
+    <br />
+    <span>
+      学习课时:{{setingObj.FinishHours}} 课时
+    </span>
+    <br />
+    <span>
+      缺勤次数:暂无
+    </span>
+    <br />
+    <span>
+      考试评分:暂无
+    </span>
+
+    <br />
+    <br />
+    其他信息
+    <br />
+    <span>
+      关联订单号:{{setingObj.OrderId}}
+    </span>
+    <br />
+    <span>
+      关联销售:{{setingObj.EnterName}}
+    </span>
+    <br />
+    <span>
+      语句退课费用:{{setingObj.BackMoney}}
+    </span>
+    <br />
+    
+    <span>
+      申请原因:{{setingObj.ApplyReason}}
+    </span>
+
+    <br />
+    <span>
+      退课金额:
+      <q-input filled stack-label :dense="false" v-model="backBillMsg.BackMoney" class="col-12" label="退课金额"
+        :rules="[val => !!val || '请填退课金额']" />
+    </span>
+
+    <br />
+    <span>
+      审批意见:
+      <q-radio v-model="backBillMsg.AuditStatus" ::val="2" label="通过" />
+      <q-radio v-model="backBillMsg.AuditStatus" :val="3" label="驳回" />
+      <q-input filled stack-label :dense="false" v-model="backBillMsg.Description" 
+        type="textarea"  label="审批意见" />
+    </span>
+    <div>
+      抄送:
+      RecipientIds
+      <q-btn class="q-mr-md" label="取消" @click="closeEditOrder" />
+      <q-btn color="accent" class="q-mr-md" label="确认" @click="saveOrderInfo()" />
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      setingObj: {
+        type: Object,
+        default: null
+      }
+    },
+    components: {
+
+    },
+    data() {
+      return {
+        persistent: true,
+        backBillMsg: {
+          BackMoney: 0, //实际退款金额
+          Description: "", //审批意见
+          AuditStatus: 0, //审核状态
+        },
+      }
+    },
+    created() {},
+    mounted() {
+      console.log("setingObj", this.setingObj);
+    },
+    methods: {
+      closeEditOrder() {
+
+      },
+      saveOrderInfo() {
+
+      }
+    },
+  }
+
+</script>

src/pages/user/backbill.vue

@@ -50,10 +50,12 @@
         <template v-slot:body-cell-optioned="props">
           <q-td :props="props">
             <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="审核"
-              @click="EditDept(props.row)" />
+              @click="showBillForm(props.row)" />
           </q-td>
         </template>
       </q-table>
+      <backbill-form v-if="isShowBillForm" :seting-obj="billObj" @close="closeBillForm" @success="refreshPage">
+      </backbill-form>
     </div>
   </div>
 </template>
@@ -61,13 +63,13 @@
   import {
     queryStudentBackClassPage
   } from '../../api/sale/bill'
-
+  import backbillForm from '../../components/sale/backbill-form';
   export default {
     meta: {
       title: "退课单据"
     },
     components: {
-
+      backbillForm
     },
     data() {
       return {
@@ -166,6 +168,8 @@
           QEndTime: "", //结束时间
         },
         pageCount: 0,
+        isShowBillForm: false, //是否显示单据表单
+        billObj: {}, //单据信息
       }
     },
     created() {
@@ -176,6 +180,16 @@
       this.getStuBackBill();
     },
     methods: {
+      //关闭表单
+      closeBillForm() {
+        this.isShowBillForm = false;
+        this.billObj = {};
+      },
+      //显示表单
+      showBillForm(item) {
+        this.isShowBillForm = true;
+        this.billObj = item;
+      },
       //重新查询
       resetSearch() {
         this.msg.pageIndex = 1;