【ECCS-商保-1213】账单明细-添加费用支付明细接口

src/api/apis_moudles/charge-query.js

@@ -3,4 +3,5 @@ export default {
   getChargeList: "/backstage/auth/receiptList",
   getCompanyOptions: "/backstage/auth/payorListNopage", 
   getChargeListDetail:"/backstage/auth/receiptDetailList",//账单明细
+  getReceiptPaymentDetail:"/backstage/auth/receiptPaymentDetail",//账单明细
 };

src/api/funcs_modules/charge-query.js

@@ -13,9 +13,14 @@ const GETCOMPANYOPTIONS = function (data) {
 const GETCHARGELISTDETAIL = function (data) {
   return req.post(apis.getChargeListDetail, data);
 };
+// 获取费用支付明细
+const GETRECEIPTPAYMENTDETAIL= function (data) {
+  return req.post(apis.getReceiptPaymentDetail, data);
+};
 // 对象数组
 export default {
   GETCHARGELIST,
   GETCOMPANYOPTIONS,
-  GETCHARGELISTDETAIL
+  GETCHARGELISTDETAIL,
+  GETRECEIPTPAYMENTDETAIL
 };

src/views/charge-query/detail.vue

@@ -18,13 +18,17 @@
             <a-input
               v-model="form.patientName"
               placeholder="请输入客户姓名"
-               allow-clear
+              allow-clear
             ></a-input>
           </a-form-model-item>
         </a-col>
         <a-col :xl="4" :lg="6" :sm="12">
           <a-form-model-item label="客户类型">
-            <a-select v-model="form.patientType" placeholder="请选择客户类型" allowClear>
+            <a-select
+              v-model="form.patientType"
+              placeholder="请选择客户类型"
+              allowClear
+            >
               <a-select-option
                 v-for="item in patientTypeOptions"
                 :key="item.code"
@@ -37,7 +41,11 @@
         </a-col>
         <a-col :xl="4" :lg="6" :sm="12">
           <a-form-model-item label="保险公司">
-            <a-select v-model="form.payorId" placeholder="请选择保险公司" allowClear>
+            <a-select
+              v-model="form.payorId"
+              placeholder="请选择保险公司"
+              allowClear
+            >
               <a-select-option
                 v-for="item in companyOptions"
                 :key="item.corpCode"
@@ -50,7 +58,11 @@
         </a-col>
         <a-col :xl="4" :lg="6" :sm="12">
           <a-form-model-item label="看诊医生">
-            <a-select v-model="form.doctorCode" placeholder="请选择看诊医生" allowClear>
+            <a-select
+              v-model="form.doctorCode"
+              placeholder="请选择看诊医生"
+              allowClear
+            >
               <a-select-option
                 v-for="item in doctorOptions"
                 :key="item.code"
@@ -63,17 +75,26 @@
         </a-col>
         <a-col :xl="5" :lg="6" :sm="12">
           <a-form-model-item label="就诊时间">
-            <a-range-picker format="YYYY-MM-DD" v-model="form.dateRange" :placeholder="['开始时间','结束时间']"  @change="onSelectVisitTime" />
+            <a-range-picker
+              format="YYYY-MM-DD"
+              v-model="form.dateRange"
+              :placeholder="['开始时间', '结束时间']"
+              @change="onSelectVisitTime"
+            />
           </a-form-model-item>
         </a-col>
         <a-col :xl="3" :lg="6" :sm="12">
           <a-form-model-item label="支付方式">
-            <a-select v-model="form.paymentCode" placeholder="请选择支付方式" allowClear>
+            <a-select
+              v-model="form.paymentCode"
+              placeholder="请选择支付方式"
+              allowClear
+            >
               <a-select-option
                 v-for="item in paymentOptions"
                 :key="item.code"
                 :value="item.code"
-                 allow-clear
+                allow-clear
               >
                 {{ item.name }}
               </a-select-option>
@@ -137,7 +158,11 @@
       row-key="id"
       :scroll="{ x: true }"
       :pagination="false"
+      class="payTable"
     >
+      <template slot="paymentType" slot-scope="text">
+        <a-button class="danger">{{ text | payStyleFilters }}</a-button>
+      </template>
     </a-table>
   </div>
 </template>
@@ -179,15 +204,20 @@ export default {
       },
     ];
     const payColumns = [
-      { title: "免赔额", dataIndex: "", width: 180 },
-      { title: "自付额", dataIndex: "", width: 180 },
-      { title: "其他费用", dataIndex: "", width: 180 },
-      { title: "个人支付", dataIndex: "", width: 180 },
-      { title: "商报支付", dataIndex: "", width: 180 },
-      { title: "支付方式", dataIndex: "", width: 180 },
-    ]
+      { title: "免赔额", dataIndex: "deductible", width: 180 },
+      { title: "自付额", dataIndex: "selfPaid", width: 180 },
+      { title: "其他费用", dataIndex: "otherPaid", width: 180 },
+      { title: "个人支付", dataIndex: "personalPaid", width: 180 },
+      { title: "商保支付", dataIndex: "ciPaid", width: 180 },
+      {
+        title: "支付方式",
+        dataIndex: "paymentType",
+        width: 180,
+        scopedSlots: { customRender: "paymentType" },
+      },
+    ];
     return {
-      receiptNo:'',
+      receiptNo: "",
       columns,
       payColumns,
       form: {},
@@ -206,9 +236,7 @@ export default {
           code: 1,
         },
       ], //客户类型
-      companyOptions: [
-
-      ], //保险公司
+      companyOptions: [], //保险公司
       doctorOptions: [
         {
           name: "医生1",
@@ -226,37 +254,78 @@ export default {
         pageNum: 1,
         pageSize: 10,
       },
-      payDataList:[]
+      payDataList: [],
+      payPager: [
+        {
+          pageNum: 1,
+          pageSize: 10,
+        },
+      ],
     };
   },
   components: {
     BurtPagination,
   },
+  filters: {
+    payStyleFilters(value) {
+      const styleMap = {
+        1: "支付宝",
+        2: "微信",
+        3: "现金",
+      };
+      return styleMap[value];
+    },
+  },
   created() {
-    const { receiptNo } = this.$route.query
-    this.receiptNo = receiptNo || ''
+    const { receiptNo } = this.$route.query;
+    this.receiptNo = receiptNo || "";
 
     this._getChargeListDetail();
     this._getCompanyOptions();
+    this._getReceiptPaymentDetail(); //费用支付明细
   },
   methods: {
     // 获取列表数据
     _getChargeListDetail() {
       const data = {
-       "receiptNo": this.receiptNo,
-       ...this.pager
+        receiptNo: this.receiptNo,
+        ...this.pager,
       };
       this.$apis.GETCHARGELISTDETAIL(data).then((res) => {
         console.log("11111111111获取table信息=", res);
-        this.dataList = (res.content && res.content.list) || [];
-        // this.pager.total = (res.content && res.content.total) || 0;
+        if (res.returnCode == "0000") {
+          this.dataList = (res.content && res.content.list) || [];
+          // this.pager.total = (res.content && res.content.total) || 0;
+        } else {
+          this.$message.error(res.returnMsg);
+        }
       });
     },
     // 获取保险公司下拉选项
     _getCompanyOptions() {
       this.$apis.GETCOMPANYOPTIONS().then((res) => {
         console.log("获取保险公司下拉选项", res);
-        this.companyOptions = res.content || [];
+        if (res.returnCode == "0000") {
+          this.companyOptions = res.content || [];
+        } else {
+          this.$message.error(res.returnMsg);
+        }
+      });
+    },
+    // 获取费用支付明细
+    _getReceiptPaymentDetail() {
+      const params = {
+        receiptNo: this.receiptNo,
+        ...this.payPager,
+      };
+      this.$apis.GETRECEIPTPAYMENTDETAIL(params).then((res) => {
+        console.log("获取费用支付明细", res);
+        if (res.returnCode == "0000") {
+          let content = res.content || {};
+          this.payDataList = content;
+        } else {
+          this.$message.error(res.returnMsg);
+        }
       });
     },
 
@@ -266,19 +335,19 @@ export default {
     },
     // 重置
     handlerReset() {
-      this.form = {}
+      this.form = {};
     },
-    
-    //设置行属性 
+
+    //设置行属性
     handlerRowClick(record) {
       const { receiptNo } = record;
-      console.log('receiptNo=',receiptNo);
+      console.log("receiptNo=", receiptNo);
       return {
         style: {
           color: record.isEdit ? "#2B63FF" : "#252631",
         },
         on: {
-      // 点击行
+          // 点击行
           click: () => {
             if (record.isEdit) {
               return true;
@@ -335,4 +404,10 @@ export default {
   font-weight: bold;
   border-bottom: 1px solid #eee;
 }
+.payTable{
+  .ant-btn{
+    border-color: #1890ff;
+    color: #1890ff;
+  }
+}
 </style>