建行支付账单记录对接

src/api/elderly/fee/construction-bank-pay/index.ts

@@ -0,0 +1,9 @@
+import request from '@/config/axios'
+
+// 获得建行支付账单记录分页
+export const getCcbPayOrderRecordPage = (query) => {
+  return request.get({
+    url: '/elderly/ccb-pay-order-record/page',
+    params: query
+  })
+}

src/views/elderly/fee/construction-bank-pay/index.vue

@@ -0,0 +1,120 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+    >
+      <TenantSelect v-model="queryParams.tenantIds" placeholder="请选择机构名称" prop="tenantIds" />
+      <el-form-item label="长者姓名" prop="elderName">
+        <el-input
+          v-model="queryParams.elderName"
+          placeholder="请输入长者姓名"
+          class="!w-240px"
+          @keyup.enter="handleQuery"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item label="账单月" prop="billingMonth">
+        <el-date-picker
+          v-model="billingMonth"
+          type="monthrange"
+          value-format="YYYY-MM"
+          range-separator="至"
+          start-placeholder="开始月"
+          end-placeholder="结束月"
+          class="!w-340px"
+          clearable
+          @change="handleBillingMonthChange"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery">
+          <Icon icon="ep:search" class="mr-5px" /> 搜索
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon icon="ep:refresh" class="mr-5px" /> 重置
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <Table2 v-loading="loading" :data="list" :columns="columns" :queryParams="queryParams" />
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+</template>
+
+<script lang="ts" setup>
+import { useUserStore } from '@/store/modules/user'
+import { getCcbPayOrderRecordPage } from '@/api/elderly/fee/construction-bank-pay'
+
+defineOptions({ name: 'ConstructionBankPay' })
+
+const userStore = useUserStore()
+const loading = ref(true)
+const total = ref(0)
+const list = ref([])
+const billingMonth = ref<string[]>([])
+
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  tenantIds: userStore.orgTenantId,
+  elderName: undefined as string | undefined,
+  beginBillingMonth: undefined as string | undefined,
+  endBillingMonth: undefined as string | undefined,
+})
+
+const queryFormRef = ref()
+
+const columns = [
+  { field: 'elderName', label: '长者姓名' },
+  { field: 'billingMonth', label: '账单月' },
+  { field: 'payTime', label: '支付时间' },
+  { field: 'payAmount', label: '金额' },
+]
+
+const handleBillingMonthChange = (value: string[]) => {
+  const [begin, end] = value || []
+  queryParams.beginBillingMonth = begin
+  queryParams.endBillingMonth = end
+}
+
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await getCcbPayOrderRecordPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+const resetQuery = () => {
+  queryFormRef.value?.resetFields()
+  billingMonth.value = []
+  queryParams.beginBillingMonth = undefined
+  queryParams.endBillingMonth = undefined
+  handleQuery()
+}
+
+onMounted(() => {
+  getList()
+})
+</script>