改需求

src/components/byh/componments/ApplyInfo.vue

 <template>
   <div class="page-com">
-    <block-header :title="title"></block-header>
+    <!-- <block-header :title="title"></block-header> -->
     <table class="table">
       <tr>
         <td>申请日期:</td>
@@ -51,7 +51,7 @@ export default {
   props: {
     title: {
       type: String,
-      required: true,
+      required: false,
     },
     params: {
       type: Object,
@@ -76,8 +76,8 @@ export default {
     if(this.params){
       console.log(this.params,'哈哈');
       const {applyVo} = this.params;
-      this.loanModel = applyVo
-      this.productNameFormat(this.loanModel.productName)
+      this.loanModel = applyVo;
+      this.productNameFormat(this.loanModel.productName);
     }
   },
 

src/components/byh/componments/BillList.vue

 <template>
   <div class="page-com">
-    <block-header title="账单详情"/>
+    <!-- <block-header title="账单详情"/> -->
     <div class="block-box">
       <table class="table">
         <tr>
@@ -33,7 +33,7 @@
     </div>
 
     <div class="tables">
-      <block-header :title="title"></block-header>
+      <!-- <block-header :title="title"></block-header> -->
       <el-table
           @filter-change="handleFilterChange"
           border
@@ -162,7 +162,7 @@ export default {
   props: {
     title: {
       type: String,
-      required: true,
+      required: false,
     },
     params: {
       type: Object,

src/components/byh/componments/ContractList.vue

 <template>
   <div class="page-com">
-    <block-header :title="title"></block-header>
+    <!-- <block-header :title="title"></block-header> -->
     <el-table
         border
         size="mini"
@@ -25,7 +25,7 @@ export default {
   props: {
     title: {
       type: String,
-      required: true,
+      required: false,
     },
     params: {
       type: Object,

src/components/byh/componments/LoanDetail copy.vue

+<template>
+  <el-drawer
+    :title="title"
+    size="70%"
+    :wrapperClosable="false"
+    :visible.sync="dialogVisible"
+    direction="rtl"
+    :before-close="handleClose"
+  >
+    <div class="page">
+      <div class="loan-detail">
+        <el-tabs
+          class="loan-tabs"
+          tab-position="left"
+          v-model="activeComponents"
+          @tab-click="handleTabClick"
+        >
+          <el-tab-pane name="ApplyInfo" label="申请信息"></el-tab-pane>
+          <el-tab-pane
+            v-if="$permissionUtils.rolePermission('customBoss')"
+            name="ContractList"
+            label="借款合同"
+          ></el-tab-pane>
+          <el-tab-pane name="BillList" label="账单详情"></el-tab-pane>
+          <el-tab-pane name="RePayList" label="还款情况"></el-tab-pane>
+          <el-tab-pane name="ReliefList" label="减免记录"></el-tab-pane>
+        </el-tabs>
+        
+        <div class="loan-detail-content">
+          <template v-if="visible">
+            <component
+              @handleClose="visible = false"
+              :is="activeComponents"
+              :params="items"
+              :title="dTitle"
+            />
+          </template>
+        </div>
+      </div>
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+import BlockHeader from "@/components/byh/componments/blockHeader";
+import ApplyInfo from "./ApplyInfo";
+import ContractList from "./ContractList";
+import RePayList from "./RePayList";
+import BillList from "./BillList";
+import ReliefList from "./ReliefList";
+import * as moment from "moment";
+
+export default {
+  name: "AddUserServiceDialog",
+  components: {
+    BlockHeader,
+    ApplyInfo,
+    ContractList,
+    RePayList,
+    BillList,
+    ReliefList,
+  },
+  props: {
+    dialogVisible: {
+      type: Boolean,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+    params: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      visible: false,
+      activeComponents: "",
+      dTitle: "",
+      active: "",
+      items: {},
+      loan: {},
+    };
+  },
+  async created() {
+    if (this.params) {
+      const { loanNo } = this.params;
+      this.items = this.params;
+      await this.initLoanInfo(loanNo);
+    }
+  },
+  methods: {
+    headerStyle() {
+      return "tableHeaderStyle";
+    },
+    //根据借款信息查借款所有信息
+    async initLoanInfo(loanNo) {
+      const res = await this.$$get("/detail/customer/" + loanNo);
+      const { success, result } = res.data;
+      if (success && result != null) {
+        this.loan = result;
+
+        this.handleTabClick({
+          name: "ApplyInfo",
+          label: "申请信息",
+        });
+      }
+    },
+    /*日期*/
+    dateFormats: function (row, column) {
+      let date = row[column.property];
+      if (date === undefined) return "";
+      return moment(date).format("YYYY-MM-DD");
+    },
+    handleClose() {
+      this.$emit("handleClose");
+    },
+    // 切换选项卡
+    handleTabClick(tab) {
+      this.activeComponents = tab.name;
+      this.visible = true;
+      this.dTitle = tab.label;
+      this.items = {
+        ...this.loan,
+        ...this.params,
+      };
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.page,
+.loan-detail {
+  height: 100%;
+  overflow: auto;
+}
+.page {
+  padding-right: 0;
+}
+
+.loan-detail {
+  display: flex;
+  position: relative;
+
+  .loan-tabs {
+    position: sticky;
+    top: 0;
+    right: 0;
+    width: 100px;
+  }
+
+  .loan-detail-content {
+    width: calc(100% - 100px);
+    box-sizing: border-box;
+    padding-left: 20px;
+  } .loan-detail-content {
+    width: calc(100% - 100px);
+    box-sizing: border-box;
+    padding-left: 20px;
+  }
+}
+</style>

src/components/byh/componments/LoanDetail.vue

 <template>
+  <!-- 修改内容 -->
   <el-drawer
     :title="title"
     size="70%"
     :wrapperClosable="false"
     :visible.sync="dialogVisible"
     direction="rtl"
-      :before-close="handleClose">
+    :before-close="handleClose"
+  >
   <div class="page">
     <div class="loan-detail">
-        <el-tabs
-            class="loan-tabs"
-            tab-position="left"
-            v-model="activeComponents"
-            @tab-click="handleTabClick">
-          <el-tab-pane name="ApplyInfo" label="申请信息"></el-tab-pane>
-          <el-tab-pane v-if="$permissionUtils.rolePermission('customBoss')" name="ContractList"
-                       label="借款合同"></el-tab-pane>
-          <el-tab-pane name="BillList" label="账单详情"></el-tab-pane>
-          <el-tab-pane name="RePayList" label="还款情况"></el-tab-pane>
-          <el-tab-pane name="ReliefList" label="减免记录"></el-tab-pane>
-        </el-tabs>
-        <div class="loan-detail-content">
-          <template v-if="visible">
-            <component
-                @handleClose="visible = false"
-                :is="activeComponents"
-                :params="items"
-                :title="dTitle"/>
-          </template>
-        </div>
+      <el-collapse  v-model="activeNames" @change="handleChange">
+        <el-collapse-item title="申请信息" name="1">
+          <ApplyInfo :params="items"></ApplyInfo>
+        </el-collapse-item>
+        <el-collapse-item title="借款合同" name="2">
+          <ContractList :params="items"
+            v-if="$permissionUtils.rolePermission('customBoss')"
+          ></ContractList>
+        </el-collapse-item>
+        <el-collapse-item title="账单详情" name="3">
+          <BillList  :params="items"></BillList>
+        </el-collapse-item>
+        <el-collapse-item title="还款情况" name="4">
+          <RePayList  :params="items"></RePayList>
+        </el-collapse-item>
+        <el-collapse-item title="减免记录" name="5">
+          <ReliefList  :params="items"></ReliefList>
+        </el-collapse-item>
+      </el-collapse>
     </div>
   </div>
   </el-drawer>
@@ -44,46 +44,46 @@ import ReliefList from "./ReliefList";
 import * as moment from "moment";
 
 export default {
-  name: 'AddUserServiceDialog',
+  name: "AddUserServiceDialog",
   components: {
     BlockHeader,
     ApplyInfo,
     ContractList,
     RePayList,
     BillList,
-    ReliefList
+    ReliefList,
   },
   props: {
     dialogVisible: {
       type: Boolean,
       required: true,
     },
-    title: {
-      type: String,
-      required: true,
+    title:{
+      type:String,
+      required:true,
     },
     params: {
       type: Object,
-      required: true
+      required: true,
     },
   },
   data() {
     return {
       visible: false,
-      activeComponents: '',
-      dTitle: '',
       active: "",
       items: {},
-      loan: {}
-    }
+      loan: {},
+      activeNames: ["1"],
+    };
   },
   async created() {
     if (this.params) {
-      const {loanNo} = this.params;
+      const { loanNo } = this.params;
       this.items = this.params;
-      await this.initLoanInfo(loanNo)
-    }
+      console.log(this.items,'111');
       
+      await this.initLoanInfo(loanNo);
+    }
   },
   methods: {
     headerStyle() {
@@ -91,63 +91,56 @@ export default {
     },
     //根据借款信息查借款所有信息
     async initLoanInfo(loanNo) {
-      const res = await this.$$get('/detail/customer/' + loanNo);
-      const {success, result} = res.data;
+      const res = await this.$$get("/detail/customer/" + loanNo);
+      const { success, result } = res.data;
+      console.log(res.data,'222');
       if (success && result != null) {
         this.loan = result;
-
-        this.handleTabClick({
+        this.handleChange({
           name: "ApplyInfo",
-          label: "申请信息"
+          label: "申请信息",
         });
-
       }
     },
     /*日期*/
     dateFormats: function (row, column) {
-      let date = row[column.property]
-      if (date === undefined) return '';
-      return moment(date).format("YYYY-MM-DD")
+      let date = row[column.property];
+      if (date === undefined) return "";
+      return moment(date).format("YYYY-MM-DD");
     },
     handleClose() {
       this.$emit("handleClose");
     },
     // 切换选项卡
-    handleTabClick(tab) {
-      this.activeComponents = tab.name;
-      this.visible = true;
-      this.dTitle = tab.label;
+    handleChange(val) {
+      console.log(val,'333');
       this.items = {
         ...this.loan,
-        ...this.params
+        ...this.params,
       };
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style scoped lang="less">
-.page, .loan-detail {
+.page,
+.loan-detail {
   height: 100%;
   overflow: auto;
 }
-.page{
+.page {
   padding-right: 0;
 }
-
+.el-collapse {
+  width: 100%;
+}
 .loan-detail {
   display: flex;
   position: relative;
 
-  .loan-tabs {
-    position: sticky;
-    top: 0;
-    right: 0;
-    width: 100px;
-  }
-
-  .loan-detail-content {
-    width: calc(100% - 100px);
+  .el-collapse-item {
+    width:100%;
     box-sizing: border-box;
     padding-left: 20px;
   }

src/components/byh/componments/RePayList.vue

 <template>
   <div class="page-com">
     <div class="tables">
-      <block-header :title="title"></block-header>
+      <!-- <block-header :title="title"></block-header> -->
       <el-table
           @filter-change="handleFilterChange"
           border
@@ -58,7 +58,7 @@ export default {
   props: {
     title: {
       type: String,
-      required: true,
+      required: false,
     },
     params: {
       type: Object,

src/components/byh/componments/ReliefList.vue

 <template>
   <div class="page-com">
     <div class="tables">
-      <block-header :title="title"></block-header>
+      <!-- <block-header :title="title"></block-header> -->
       <el-table
           @filter-change="handleFilterChange"
           border
@@ -53,7 +53,7 @@ export default {
   props: {
     title: {
       type: String,
-      required: true,
+      required: false,
     },
     params: {
       type: Object,