回执单

杨泽宇
1 parent 3eb57e35
Showing 4 changed files with 201 additions and 14 deletions
src/api/fee/index.ts
src/views/fee/config.ts
src/views/fee/index.vue
src/views/fee/paper.vue
@@ -83,10 +83,11 @@ export const propertyFeeDelete = async (params: any) =&gt; {
  * @description 文件导出
  * @function propertyFeeExport
  */
- export const propertyFeeExport = async () => {
+ export const propertyFeeExport = async (params: any) => {
   let res: any = await request({
     method: 'post',
     responseType: 'blob',
+    params: deleteEmptyParam(params),
     url: '/housePropertyFee/exportExcel',
   })
   return res
@@ -102,4 +103,17 @@ export const propertyFeeDelete = async (params: any) =&gt; {
     url: '/housePropertyFee/importExcel',
   })
   return res
+}
+
+/**
+ * @description 回执单详情
+ * @function propertyFeePaper
+ */
+export const propertyFeePaper = async (params: any) => {
+  let res: any = await request({
+    method: 'get',
+    url: '/housePropertyFee/receiptInfo',
+    params: params
+  })
+  return res
 }
 \ No newline at end of file
@@ -34,4 +34,16 @@ export const payStatus: EnumArrayItem[] = [
     label: '已确认',
     value: 1
   }
+]
+
+// 支付平台
+export const bankType: EnumArrayItem[] = [
+  {
+    label: '支付宝',
+    value: 3
+  },
+  {
+    label: '微信',
+    value: 1
+  }
 ]
 \ No newline at end of file
@@ -9,6 +9,7 @@ import {
   propertyFeeSureFast,
   propertyFeeImport,
   propertyFeeExport,
+  propertyFeePaper,
 } from "@/api/fee";
 import { getTableList } from "@/api/community/residence";
 import { getTableList as getBuildings } from "@/api/community/housekeeper";
@@ -17,6 +18,7 @@ import { parseTime, globalFilters, exportData } from &quot;@/utils/tool&quot;;
 import { price } from "@/utils/validate";
 import Pagination from "@/components/Pagination/index.vue";
 import File from "@/components/FileUpload/index.vue";
+import Paper from "./paper.vue";
 import { statusData, payData, payStatus } from "./config";
 import { ElMessageBox, ElMessage } from "element-plus";
 import type { ElTable } from "element-plus";
@@ -82,7 +84,9 @@ let data = reactive({
   neighborhoods: [],
   buildings: [],
   units: [],
+  paperData: [],
   loading: false,
+  paperVisible: false,
   totals: 0, // 一键确认按钮上的总金额数
   params: {
     total: 0, // 分页数据总条数
@@ -154,7 +158,12 @@ const handleChange = (value: number, pageSize: number) =&gt; {
  * @param {object} obj 一条表格对象
  */
 const paper = (obj: any) => {
-  console.log("查看回执");
+  propertyFeePaper({
+    id: obj.id,
+  }).then((res) => {
+    data.paperData = res?.data?.data;
+    data.paperVisible = true;
+  });
 };
 /**
  * 楼宇改变获取单元数
@@ -676,7 +685,7 @@ onMounted(() =&gt; {
         </template>
       </el-table-column>
       <el-table-column
-        prop="payUserid"
+        prop="residentName"
         label="缴费人"
         align="center"
       ></el-table-column>
@@ -706,7 +715,7 @@ onMounted(() =&gt; {
           <el-button
             type="text"
             @click="paper(scope.row)"
-            v-show="~~scope.row.payStatus === 1"
+            v-show="~~scope.row.payStatus === 1 && ~~scope.row.payType === 2"
             >回执单</el-button
           >
           <el-button
@@ -730,6 +739,9 @@ onMounted(() =&gt; {
       v-model:pageSize="data.params.query.pageSize"
       @pageChange="getList"
     ></Pagination>
+    <el-dialog v-model="data.paperVisible" title="回执单">
+      <Paper :paperData="data.paperData"></Paper>
+    </el-dialog>
     <el-dialog v-model="form.visible" title="编辑" @close="handleClose">
       <el-form
         :model="form.data"
@@ -757,16 +769,6 @@ onMounted(() =&gt; {
           </el-input>
         </el-form-item>
         <el-form-item label="费用周期">
-          <!-- <el-date-picker
-            v-model="form.data.period"
-            type="datetimerange"
-            format="YYYY-MM"
-            range-separator="至"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            @change="handleTimeChange($event, 'form')"
-          > -->
-          <!-- </el-date-picker> -->
           <el-date-picker
             v-model="form.data.period"
             type="monthrange"
+<script setup lang="ts">
+import { reactive, ref, getCurrentInstance } from "vue";
+import { parseTime, globalFilters } from "@/utils/tool";
+import { bankType } from "./config";
+/**
+ * @description 组件属性
+ * @prop {string | null} paperData 回单详情数据
+ */
+interface Props {
+  paperData: {};
+}
+const props = withDefaults(defineProps<Props>(), {
+  paperData: {
+    type: Object,
+    default: {
+      value: {},
+    },
+  },
+});
+</script>
+
+<template>
+  <p>电子回执单号码：{{ paperData.receiptId }}</p>
+  <div class="paper-table">
+    <el-row class="paper-table-line">
+      <el-col :span="12">
+        <el-col :span="8">
+          <div class="paper-table-label">回单类型</div>
+        </el-col>
+        <el-col :span="16">
+          <div class="paper-table-content">{{ paperData.receiptType }}</div>
+        </el-col>
+      </el-col>
+      <el-col :span="12">
+        <el-col :span="8" class="paper-table-content-right">
+          <div class="paper-table-label">缴费项目</div>
+        </el-col>
+        <el-col :span="16">
+          <div class="paper-table-content">{{ paperData.receiptName }}</div>
+        </el-col>
+      </el-col>
+    </el-row>
+    <el-row class="paper-table-line">
+      <el-col :span="24">
+        <el-col :span="4">
+          <div class="paper-table-label">收费单位</div>
+        </el-col>
+        <el-col :span="20">
+          <div class="paper-table-content">
+            {{ paperData.propertyName }}
+          </div>
+        </el-col>
+      </el-col>
+    </el-row>
+    <el-row class="paper-table-line">
+      <el-col :span="12">
+        <el-col :span="8">
+          <div class="paper-table-label">缴费房屋</div>
+        </el-col>
+        <el-col :span="16">
+          <div class="paper-table-content">{{ paperData.locality }}</div>
+        </el-col>
+      </el-col>
+      <el-col :span="12">
+        <el-col :span="8" class="paper-table-content-right">
+          <div class="paper-table-label">缴费人</div>
+        </el-col>
+        <el-col :span="16">
+          <div class="paper-table-content">{{ paperData.payerName }}</div>
+        </el-col>
+      </el-col>
+    </el-row>
+    <el-row class="paper-table-line">
+      <el-col :span="12">
+        <el-col :span="8">
+          <div class="paper-table-label">金额(大写)</div>
+        </el-col>
+        <el-col :span="16">
+          <div class="paper-table-content">{{ paperData.rmb }}</div>
+        </el-col>
+      </el-col>
+      <el-col :span="12">
+        <el-col :span="8" class="paper-table-content-right">
+          <div class="paper-table-label">金额(小写)</div>
+        </el-col>
+        <el-col :span="16">
+          <div class="paper-table-content">
+            {{ (paperData.totalFee / 100).toFixed(2) }}
+          </div>
+        </el-col>
+      </el-col>
+    </el-row>
+    <el-row class="paper-table-line">
+      <el-col :span="24">
+        <el-col :span="4">
+          <div class="paper-table-label">支付方式</div>
+        </el-col>
+        <el-col :span="20">
+          <div class="paper-table-content">
+            {{ globalFilters(paperData.bankPayType, bankType) }}
+          </div>
+        </el-col>
+      </el-col>
+    </el-row>
+    <el-row class="paper-table-line">
+      <el-col :span="24">
+        <el-col :span="4">
+          <div class="paper-table-label">账单周期</div>
+        </el-col>
+        <el-col :span="20">
+          <div class="paper-table-content">
+            {{
+              parseTime(new Date(paperData.beginTime).getTime()).slice(0, 7)
+            }}
+            ~ {{ parseTime(new Date(paperData.endTime).getTime()).slice(0, 7) }}
+          </div>
+        </el-col>
+      </el-col>
+    </el-row>
+    <el-row class="paper-table-line">
+      <el-col :span="24">
+        <el-col :span="4">
+          <div class="paper-table-label">支付时间</div>
+        </el-col>
+        <el-col :span="20">
+          <div class="paper-table-content">
+            {{ parseTime(new Date(paperData.payTime).getTime()) }}
+          </div>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.paper-table {
+  border: 1px solid #ebeef5;
+  &-line {
+    border-bottom: 1px solid #ebeef5;
+    display: flex;
+  }
+  &-content-right {
+    border-left: 1px solid #ebeef5;
+    flex-grow: 1;
+  }
+}
+.paper-table-label {
+  background-color: #f5f7fa;
+  line-height: 30px;
+  padding: 10px;
+  width: 100px;
+  border-right: 1px solid #ebeef5;
+  text-align: center;
+}
+.paper-table-content {
+  line-height: 30px;
+  padding: 10px;
+}
+</style>