feat 对账明细查看页

src/views/payment/order/reconcile/ReconcileDetailInfo.vue

@@ -1,11 +1,78 @@
+<template>
+  <basic-modal
+    title="对账明细详情"
+    v-bind="$attrs"
+    :loading="confirmLoading"
+    :width="750"
+    :visible="visible"
+    :mask-closable="showable"
+    @cancel="handleCancel"
+  >
+    <a-descriptions bordered title="" :column="{ md: 1, sm: 1, xs: 1 }">
+      <a-descriptions-item label="商品名称">
+        {{ form.title }}
+      </a-descriptions-item>
+      <a-descriptions-item label="交易金额">
+        {{ form.amount }}
+      </a-descriptions-item>
+      <a-descriptions-item label="本地订单ID">
+        {{ form.paymentId }}
+      </a-descriptions-item>
+      <a-descriptions-item label="本地退款ID">
+        {{ form.refundId }}
+      </a-descriptions-item>
+      <a-descriptions-item label="网关订单号">
+        {{ form.gatewayOrderNo }}
+      </a-descriptions-item>
+      <a-descriptions-item label="交易类型">
+        <a-tag>{{ dictConvert('PayReconcileTrade', form.type) }}</a-tag>
+      </a-descriptions-item>
+      <a-descriptions-item label="创建时间">
+        {{ form.createTime }}
+      </a-descriptions-item>
+    </a-descriptions>
+  </basic-modal>
+</template>
 <script setup lang="ts">
+  import { $ref } from 'vue/macros'
+  import useFormEdit from '/@/hooks/bootx/useFormEdit'
+  import { FormInstance } from 'ant-design-vue/lib/form'
+  import { BasicModal } from '/@/components/Modal'
+  import { useDict } from '/@/hooks/bootx/useDict'
+  import { getDetail, ReconcileDetail } from './ReconcileOrder.api'
+  const {
+    initFormEditType,
+    handleCancel,
+    search,
+    labelCol,
+    wrapperCol,
+    modalWidth,
+    title,
+    confirmLoading,
+    visible,
+    editable,
+    showable,
+    formEditType,
+  } = useFormEdit()
+  const { dictConvert } = useDict()
+  // 表单
+  const formRef = $ref<FormInstance>()
+  let form = $ref<ReconcileDetail>({})
 
+  // 事件
+  const emits = defineEmits(['ok'])
+  // 入口
+  function init(record) {
+    visible.value = true
+    confirmLoading.value = true
+    getDetail(record.id).then(({ data }) => {
+      form = data
+      confirmLoading.value = false
+    })
+  }
+  defineExpose({
+    init,
+  })
 </script>
 
-<template>
-
-</template>
-
-<style scoped lang="less">
-
-</style>
+<style scoped lang="less"></style>

src/views/payment/order/reconcile/ReconcileDetailList.vue

@@ -1,5 +1,6 @@
 <template>
   <basic-drawer forceRender v-bind="$attrs" title="字典列表" width="60%" :visible="visible" @close="visible = false">
+    <b-query :query-params="model.queryParam" :default-item-count="3" :fields="fields" @query="queryPage" @reset="resetQueryParams" />
     <vxe-toolbar ref="xToolbar" custom :refresh="{ queryMethod: queryPage }" />
     <vxe-table row-id="id" ref="xTable" :data="pagination.records" :loading="loading">
       <vxe-column type="seq" width="60" />
@@ -10,8 +11,7 @@
       <vxe-column field="gatewayOrderNo" title="网关订单号" />
       <vxe-column field="type" title="交易类型">
         <template #default="{ row }">
-          <a-tag v-if="row.type === 'pay'">支付</a-tag>
-          <a-tag v-if="row.type === 'refund'">停用</a-tag>
+          <a-tag>{{ dictConvert('PayReconcileTrade', row.type) }}</a-tag>
         </template>
       </vxe-column>
       <vxe-column field="createTime" title="创建时间" />
@@ -36,24 +36,38 @@
 </template>
 
 <script setup lang="ts">
-  import { nextTick, onMounted } from 'vue'
+  import { computed, nextTick, onMounted } from 'vue'
   import { $ref } from 'vue/macros'
-  import { pageDetail, ReconcileOrder } from "./ReconcileOrder.api";
+  import { pageDetail, ReconcileDetail } from './ReconcileOrder.api'
   import useTablePage from '/@/hooks/bootx/useTablePage'
   import ReconcileDetailInfo from './ReconcileDetailInfo.vue'
   import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
   import { useMessage } from '/@/hooks/web/useMessage'
-  import { QueryField } from '/@/components/Bootx/Query/Query'
+  import { LIST, QueryField, STRING } from '/@/components/Bootx/Query/Query'
   import BasicDrawer from '/@/components/Drawer/src/BasicDrawer.vue'
+  import BQuery from '/@/components/Bootx/Query/BQuery.vue'
+  import { LabeledValue } from 'ant-design-vue/lib/select'
+  import { useDict } from '/@/hooks/bootx/useDict'
 
   // 使用hooks
   const { handleTableChange, pageQueryResHandel, resetQueryParams, pagination, pages, model, loading } = useTablePage(queryPage)
   const { notification, createMessage } = useMessage()
+  const { dictDropDown, dictConvert } = useDict()
+
+  let reconcileTradeList = $ref<LabeledValue[]>([])
 
   // 查询条件
-  const fields = [] as QueryField[]
+  const fields = computed(() => {
+    return [
+      { field: 'title', type: STRING, name: '订单名称', placeholder: '请输入订单名称' },
+      { field: 'paymentId', type: STRING, name: '本地支付ID', placeholder: '请输入本地支付ID' },
+      { field: 'refundId', type: STRING, name: '本地退款ID', placeholder: '请输入本地退款ID' },
+      { field: 'gatewayOrderNo', type: STRING, name: '网关订单号', placeholder: '请输入网关订单号' },
+      { field: 'type', type: LIST, name: '交易类型', placeholder: '请选择交易类型', selectList: reconcileTradeList },
+    ] as QueryField[]
+  })
   let visible = $ref(false)
-  let reconcileOrder = $ref<ReconcileOrder>()
+  let reconcileDetail = $ref<ReconcileDetail>()
 
   const xTable = $ref<VxeTableInstance>()
   const xToolbar = $ref<VxeToolbarInstance>()
@@ -70,14 +84,16 @@
   /**
    * 初始化基础数据
    */
-  function initData() {}
+  async function initData() {
+    reconcileTradeList = await dictDropDown('PayReconcileTrade')
+  }
   /**
    * 入口
    * @param record
    */
   function init(record) {
     visible = true
-    reconcileOrder = record
+    reconcileDetail = record
     queryPage()
   }
 
@@ -89,7 +105,7 @@
     pageDetail({
       ...model.queryParam,
       ...pages,
-      recordOrderId: reconcileOrder?.id,
+      recordOrderId: reconcileDetail?.id,
     }).then(({ data }) => {
       pageQueryResHandel(data)
     })

src/views/payment/order/reconcile/ReconcileOrder.api.ts

@@ -86,12 +86,12 @@ export interface ReconcileOrder extends BaseEntity {
 export interface ReconcileDetail extends BaseEntity {
   // 关联对账订单ID
   recordOrderId?: string
-  // 交易状态
-  status?: string
   // 交易类型
   type?: string
   // 订单id
-  orderId?: string
+  paymentId?: string
+  // 订单id
+  refundId?: string
   // 网关订单号
   gatewayOrderNo?: string
   // 交易金额

src/views/payment/order/reconcile/ReconcileOrderList.vue

@@ -33,7 +33,7 @@
           </template>
         </vxe-column>
         <vxe-column field="errorMsg" title="错误信息" />
-        <vxe-column fixed="right" width="150" :showOverflow="false" title="操作">
+        <vxe-column fixed="right" width="140" :showOverflow="false" title="操作">
           <template #default="{ row }">
             <a-link @click="show(row)">查看</a-link>
             <a-divider type="vertical" />