修改

src/api/sale/contract.js

@@ -164,4 +164,16 @@ export function GetBackClassProtocolPage(data) {
     method: 'post',
     data
   })
+}
+
+/**
+ * 获取退课详情
+ *
+ */
+export function GetBackClassProtocol(data) {
+  return request({
+    url: '/EducationContract/GetBackClassProtocol',
+    method: 'post',
+    data
+  })
 }
\ No newline at end of file

src/components/course/courserefund-form.vue

@@ -52,7 +52,7 @@
                   " icon="iconfont icon-qianming" color="accent" style="font-weight: 400" @click="CopyUrl(props.row)"
                 label="获取合同链接" />
             </el-tooltip>
-            <q-btn flat size="xs" icon="iconfont icon-View" color="accent" @click="goContract(props.row)"
+            <q-btn flat size="xs" icon="iconfont icon-View" color="accent" @click="goContract(props.row.Id)"
               style="font-weight: 400" label="查看" />
           </div>
         </q-td>
@@ -138,7 +138,12 @@
     },
     mounted() {},
     methods: {
-
+      //跳转至详情
+      goContract(Id){
+        this.OpenNewUrl('/courseRefund',{
+            Id:Id
+        })
+      }
     }
   }
 

src/pages/courseRefund.vue

@@ -29,19 +29,22 @@
   .TuiContract {
     position: absolute;
     bottom: 28px;
-    right: 130px;
+    right: 70px;
   }
-  .Tui_Jiafang{
-    display:flex;
-    font-size:20px;
-    margin-bottom:20px;
+
+  .Tui_Jiafang {
+    display: flex;
+    font-size: 20px;
+    margin-bottom: 20px;
   }
-  .Tui_Inner{
+
+  .Tui_Inner {
     text-indent: 40px;
-    font-size:20px;
+    font-size: 20px;
     line-height: 35px;
-    margin-bottom:10px;
+    margin-bottom: 10px;
   }
+
   .TuitractInput {
     border: 0;
     display: inline-block;
@@ -51,82 +54,146 @@
     text-align: center;
     text-indent: 0;
   }
-  .Tui_SignZhang{
+
+  .Tui_SignZhang {
     display: flex;
-    font-size:20px;
+    font-size: 20px;
     justify-content: space-between;
-    margin-bottom:20px;
+    margin-bottom: 20px;
   }
+
 </style>
 <template>
   <div class="TuitractView">
     <div class="firstPage">
       <div class="operationTitle">
         <div class="operationAgree">培训课程退款协议</div>
-        <div class="TuiContract">合约编号:123</div>
+        <div class="TuiContract">合约编号:{{dataList.ProtocolNum}}</div>
       </div>
       <div class="Tui_Jiafang">
-        <div style="margin-right:100px;">甲方：</div>
-        <div>（家长/监护人）：</div>
+        <div style="margin-right:100px;">甲方：{{dataList.PartyAName}}</div>
+        <div>（家长/监护人）：{{dataList.PartyAGuardian}}</div>
       </div>
       <div class="Tui_Jiafang">
-        <div style="margin-right:150px;">乙方：</div>
-        <div>法定代表人：</div>
+        <div style="margin-right:150px;">乙方：{{dataList.PartyBName}}</div>
+        <div>法定代表人：{{dataList.PartyBLegal}}</div>
       </div>
       <div class="Tui_Inner">
-        甲乙双方经平等友好协商就 <div class="TuitractInput" style="width: 90px;">1988</div> 年
-        <div class="TuitractInput" style="width: 80px;">12</div> 月 <div class="TuitractInput" style="width: 80px;">12</div> 日
+        甲乙双方经平等友好协商就 <div class="TuitractInput" style="width: 90px;">{{getData(dataList.CreateTimeStr,1)}}</div> 年
+        <div class="TuitractInput" style="width: 80px;">{{getData(dataList.CreateTimeStr,2)}}</div> 月 
+        <div class="TuitractInput" style="width: 80px;">{{getData(dataList.CreateTimeStr,3)}}</div> 日
         签订的《培训课程协议》解除合作关系。
       </div>
       <div class="Tui_Inner">第一条：原协议内容</div>
       <div class="Tui_Inner">
-        原协议报名人员：<div class="TuitractInput" style="width: 300px;">1988</div>
+        原协议报名人员：<div class="TuitractInput" style="width: 300px;">{{dataList.OldSaleMan}}</div>
       </div>
       <div class="Tui_Inner">
-        原报名项目：<div class="TuitractInput" style="width: 300px;">1988</div>
+        原报名项目：<div class="TuitractInput" style="width: 300px;">{{dataList.CNMoneyStr}}</div>
       </div>
       <div class="Tui_Inner">
-        原报名项目原价：<div class="TuitractInput" style="width: 100px;">1988</div>
-        折后（优惠）价：<div class="TuitractInput" style="width: 100px;">1988</div>
+        原报名项目原价：<div class="TuitractInput" style="width: 100px;">{{dataList.OldSellPrice}}</div>
+        折后（优惠）价：<div class="TuitractInput" style="width: 100px;">{{dataList.OldDiscountMoney}}</div>
       </div>
       <div class="Tui_Inner">
         原协议已收学费：<div class="TuitractInput" style="width: 300px;text-align:left;">
-            大写：
+          大写：{{dataList.OldIncomeStr}}
         </div>
-        （¥<div class="TuitractInput" style="width: 100px;">12</div>元整）。
+        （¥<div class="TuitractInput" style="width: 100px;">{{dataList.OldIncome}}</div>元整）。
       </div>
       <div class="Tui_Inner">
-        原收据编号：<div class="TuitractInput" style="width: 150px;"></div>
+        原收据编号：<div class="TuitractInput" style="width: 150px;">{{dataList.OldFinaceNum}}</div>
       </div>
       <div class="Tui_Inner">
-        原收款人：<div class="TuitractInput" style="width: 150px;"></div>
+        原收款人：<div class="TuitractInput" style="width: 150px;">{{dataList.OldReceiveMan}}</div>
       </div>
       <div class="Tui_Inner">
-        第二条：乙方共计课时<div class="TuitractInput" style="width: 80px;"></div>节；已销课时
-        <div class="TuitractInput" style="width: 80px;"></div>节：剩余课时
-        <div class="TuitractInput" style="width: 80px;"></div>节
+        第二条：乙方共计课时<div class="TuitractInput" style="width: 80px;">{{dataList.TotalClassHours}}</div>节；已销课时
+        <div class="TuitractInput" style="width: 80px;">{{dataList.CompleteHours}}</div>节：剩余课时
+        <div class="TuitractInput" style="width: 80px;">{{dataList.SurplusHours}}</div>节
       </div>
       <div class="Tui_Inner">
-        甲方应退还乙方未上课时费用<div class="TuitractInput" style="width: 200px;">五千六百八十元整</div>
-        （¥<div class="TuitractInput" style="width: 80px;"></div>元整），原协
-        议自动终止、收据自动失效。退还帐户名<div class="TuitractInput" style="width: 200px;"></div>，退还帐号：<div class="TuitractInput" style="width: 300px;"></div>
+        甲方应退还乙方未上课时费用<div class="TuitractInput" style="width: 200px;">{{dataList.CNMoneyStr}}</div>
+        （¥<div class="TuitractInput" style="width: 150px;">{{dataList.BackMoney}}</div>），原协
+        议自动终止、收据自动失效。退还帐户名<div class="TuitractInput" style="width: 200px;">{{dataList.BackAccountName}}</div>，退还帐号：<div class="TuitractInput"
+          style="width: 200px;">{{dataList.BackAccount}}</div>
         退还学费=乙方已缴总学费-已上课程学费-（乙方已缴学费-已上课程学费）*10%，其中“（乙方已缴课程学费）*10%”为违约金。
       </div>
       <div class="Tui_Inner">
-        第三条：乙方应将原协议和收据原件交还甲方，若原件无法交还，请乙方<br/>在此声明：
-        <div class="TuitractInput" style="width: 300px;"></div>
+        第三条：乙方应将原协议和收据原件交还甲方，若原件无法交还，请乙方<br />在此声明：
+        <div class="TuitractInput" style="width: 750px;">{{dataList.StateMent}}</div>
       </div>
       <div class="Tui_Inner">
         第四条：本协议自签订之日起正式生效。
       </div>
       <div class="Tui_SignZhang">
-        <div>甲方(家长/监护人)签字（盖章）： </div>
-        <div>甲方(家长/监护人)签字（盖章）： </div>
+        <div>甲方(家长/监护人)签字（盖章）： {{dataList.PartyASign}}</div>
+        <div>乙方签字（盖章）：{{dataList.PartyBSign}}</div>
       </div>
       <div class="Tui_SignZhang">
-        <div>签署日期：</div>
-        <div>签署日期：</div>
+        <div>签署日期：{{dataList.PartyASignDate}}</div>
+        <div>签署日期：{{dataList.PartyBSignDate}}</div>
       </div>
     </div>
   </div>
 </template>
+<script>
+  import {
+    GetBackClassProtocol
+  } from "../api/sale/contract";
+
+  export default {
+    meta: {
+      title: "退课协议管理",
+    },
+    data() {
+      return {
+        msg: {
+          Id: 0
+        },
+        dataList: {},
+      };
+    },
+    created() {
+
+    },
+    mounted() {
+      if(this.$route.query.Id){
+        this.msg.Id = this.$route.query.Id;
+      }
+      this.getList();
+    },
+    methods: {
+      //获取校区列表
+      getList() {
+        this.loading = true;
+        GetBackClassProtocol(this.msg).then((res) => {
+          this.loading = false;
+          if (res.Code == 1) {
+            this.dataList = res.Data;
+            console.log(this.dataList, "this.dataList ");
+          }
+        });
+      },
+      //获取日期
+      getData(dateStr,type){
+        if(dateStr){
+          let timeOne = dateStr.split(' ')[0];
+          let Year = timeOne.split('-')[0];
+          let Month = timeOne.split('-')[1];
+          let day = timeOne.split('-')[2];
+          if(type==1){
+            return Year
+          }
+          if(type==2){
+            return Month
+          }
+          if(type==3){
+            return day
+          }
+        }
+      }
+    },
+  };
+
+</script>

src/pages/courseRefundH5.vue

@@ -204,7 +204,7 @@
     display: inline-block;
     border-bottom: 1px solid #c0c0c0;
     width: 2rem;
-    font-size: 20px;
+    font-size: 1rem;
     text-align: center;
     text-indent: 0;
   }
@@ -259,9 +259,26 @@
             折后（优惠）价：<div class="TuitractInput" style="width:14rem;text-align:left;">1234</div>
           </div>
           <div class="conReFund_Suojin">
-            原收据：<div class="TuitractInput" style="width:14rem;text-align:left;">1234</div>
+            原协议已收学费：<div class="TuitractInput" style="width:14rem;text-align:left;">
+              大写：
+            </div>
+            （¥<div class="TuitractInput" style="width:4rem;"></div>元整）
+          </div>
+          <div class="conReFund_Suojin">
+            原收据编号：<div class="TuitractInput" style="width:16rem;text-align:left;">1234</div>
+          </div>
+          <div class="conReFund_Suojin">
+            原收款人：<div class="TuitractInput" style="width:17rem;text-align:left;">1234</div>
+          </div>
+          <div class="conReFund_Suojin">
+            第二条：乙方共计课时<div class="TuitractInput" style="width:3rem;"></div>节；已销课时
+            <div class="TuitractInput" style="width:3rem;"></div>节：剩余课时<div class="TuitractInput" style="width:3rem;"></div>节；
+          </div>
+          <div class="conReFund_Suojin">
+            甲方应退还乙方未上课时费用<div class="TuitractInput" style="width:17rem;text-align:left;">
+              
+            </div>
           </div>
-
         </div>
       </div>
     </div>

src/pages/sale/contractRefund.vue

+<style>
+</style>
+<template>
+  <div class="page-body">
+    <div class="page-search row items-center">
+      <div class="col row wrap q-mr-lg q-col-gutter-md">
+        <div class="col-3">
+          <q-input @change="resetSearch" clearable standout="bg-primary text-white" v-model="msg.QOrderId" label="订单编号"
+            @clear="resetSearch" maxlength="30" />
+        </div>
+        <div class="col-3">
+          <q-select @input="resetSearch" standout="bg-primary text-white" v-model="msg.AuditStatus"
+            :options="StatusOpts" option-value="Id" option-label="Name" label="状态" emit-value map-options />
+        </div>
+        <div class="col-3">
+          <q-input @change="resetSearch" clearable standout="bg-primary text-white" v-model="msg.ProtocolNum"
+            label="合同编号" @clear="resetSearch" maxlength="30" />
+        </div>
+        <div class="col-3">
+          <q-input @change="resetSearch" clearable standout="bg-primary text-white" v-model="msg.PartyAName"
+            label="学生姓名" @clear="resetSearch" maxlength="30" />
+        </div>
+      </div>
+    </div>
+    <courserefund-form :loading="loading" :dataList="dataList"></courserefund-form>
+    <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount" :input="true"
+      @input="changePage" />
+  </div>
+</template>
+<script>
+  import {
+    GetBackClassProtocolPage
+  } from "../../api/sale/contract";
+  import courserefundForm from "../../components/course/courserefund-form"
+  export default {
+    meta: {
+      title: "退课协议管理",
+    },
+    components: {
+      courserefundForm
+    },
+    data() {
+      return {
+        loading: true,
+        msg: {
+          pageIndex: 1,
+          pageSize: 12,
+          PartyAName: '',
+          AuditStatus: -1,
+          QOrderId: '',
+          ProtocolNum: '',
+          IsQueryAll: 0
+        },
+        pageCount: 0,
+        dataList: [],
+        //状态下拉
+        StatusOpts: [{
+            Id: -1,
+            Name: "不限",
+          },
+          {
+            Id: 1,
+            Name: "审核中",
+          },
+          {
+            Id: 2,
+            Name: "审核通过",
+          },
+          {
+            Id: 3,
+            Name: "驳回",
+          },
+        ],
+      };
+    },
+    created() {
+
+    },
+    mounted() {
+      this.getList();
+    },
+    methods: {
+      //获取校区列表
+      getList() {
+        this.loading = true;
+        GetBackClassProtocolPage(this.msg).then((res) => {
+          this.loading = false;
+          if (res.Code == 1) {
+            this.dataList = res.Data.PageData;
+            this.pageCount = res.Data.PageCount;
+            console.log(this.dataList ,"this.dataList ");
+          }
+        });
+      },
+      //重新查询
+      resetSearch() {
+        this.msg.pageIndex = 1;
+        this.getList();
+      },
+      //分页改变
+      changePage(val) {
+        this.msg.pageIndex = val;
+        this.getList();
+      },
+    },
+  };
+
+</script>
+<style lang="sass">
+  @import url('~assets/css/table.sass')
+
+</style>

src/router/routes.js

@@ -745,6 +745,11 @@ const routes = [{
     component: () =>
       import("pages/sale/contractManage.vue")
   },
+  {
+    path: "/sale/contractRefund", //销售 退课管理
+    component: () =>
+      import("pages/sale/contractRefund.vue")
+  },
   {
     path: "/sale/contractEdit", //销售 新增-编辑-查看合同
     component: () =>