perf 对账页面优化

src/views/daxpay/admin/reconcile/discrepancy/ReconcileDiscrepancyList.vue

@@ -11,65 +11,69 @@
     </div>
     <div class="m-3 p-3 bg-white">
       <vxe-toolbar ref="xToolbar" custom :refresh="{ queryMethod: queryPage }" />
-      <vxe-table
-        row-id="id"
-        ref="xTable"
-        :data="pagination.records"
-        :loading="loading"
-        :sort-config="{ remote: true, trigger: 'cell' }"
-        @sort-change="sortChange"
-      >
-        <vxe-column type="seq" title="序号" width="60" />
-        <vxe-column field="title" title="订单标题" :min-width="120" />
-        <vxe-column field="reconcileDate" title="对账日期" sortable :min-width="120" />
-        <vxe-column field="channel" title="通道" :min-width="120">
-          <template #default="{ row }">
-            <a-tag>{{ dictConvert('channel', row.channel) }}</a-tag>
-          </template>
-        </vxe-column>
-        <vxe-column field="tradeType" title="交易类型" :min-width="120">
-          <template #default="{ row }">
-            <a-tag>{{ dictConvert('trade_type', row.tradeType) }}</a-tag>
-          </template>
-        </vxe-column>
-        <vxe-column field="discrepancyType" title="差异类型" :min-width="120">
-          <template #default="{ row }">
-            <a-tag>{{ dictConvert('reconcile_discrepancy_type', row.discrepancyType) }}</a-tag>
-          </template>
-        </vxe-column>
-
-        <vxe-colgroup title="平台信息">
-          <vxe-column field="tradeNo" title="交易号" :min-width="230">
+      <div class="h-65vh">
+        <vxe-table
+          row-id="id"
+          height="auto"
+          align="center"
+          ref="xTable"
+          :data="pagination.records"
+          :loading="loading"
+          :sort-config="{ remote: true, trigger: 'cell' }"
+          @sort-change="sortChange"
+        >
+          <vxe-column type="seq" title="序号" width="60" />
+          <vxe-column field="title" title="订单标题" :min-width="120" />
+          <vxe-column field="reconcileDate" title="对账日期" sortable :min-width="120" />
+          <vxe-column field="channel" title="通道" :min-width="120">
             <template #default="{ row }">
-              <a-link @click="showTrade(row)">{{ row.tradeNo }}</a-link>
+              <a-tag>{{ dictConvert('channel', row.channel) }}</a-tag>
             </template>
           </vxe-column>
-          <vxe-column field="amount" title="交易金额(元)" sortable :min-width="130">
+          <vxe-column field="tradeType" title="交易类型" :min-width="120">
             <template #default="{ row }">
-              {{ row.amount ? (row.amount / 100).toFixed(2) : '无' }}
+              <a-tag>{{ dictConvert('trade_type', row.tradeType) }}</a-tag>
+            </template>
+          </vxe-column>
+          <vxe-column field="discrepancyType" title="差异类型" :min-width="120">
+            <template #default="{ row }">
+              <a-tag>{{ dictConvert('reconcile_discrepancy_type', row.discrepancyType) }}</a-tag>
             </template>
           </vxe-column>
-          <vxe-column field="tradeTime" title="交易时间" sortable :min-width="150" />
-          <vxe-column field="tradeStatus" title="交易状态" :min-width="150" />
-        </vxe-colgroup>
-        <vxe-colgroup title="通道信息">
-          <vxe-column field="channelTradeNo" title="交易号" :min-width="230" />
-          <vxe-column field="channelTradeAmount" title="交易金额(元)" sortable :min-width="150" />
-          <vxe-column field="channelTradeTime" title="交易时间" sortable :min-width="150" />
-          <vxe-column field="channelTradeStatus" title="交易状态" :min-width="150" />
-        </vxe-colgroup>
 
-        <vxe-column field="reconcileNo" title="对账单号" :min-width="230">
-          <template #default="{ row }">
-            <a-link @click="showReconcile(row)">{{ row.reconcileNo }}</a-link>
-          </template>
-        </vxe-column>
-        <vxe-column fixed="right" width="100" :showOverflow="false" title="操作">
-          <template #default="{ row }">
-            <a-link @click="show(row)">查看</a-link>
-          </template>
-        </vxe-column>
-      </vxe-table>
+          <vxe-colgroup title="平台信息">
+            <vxe-column field="tradeNo" title="交易号" :min-width="230">
+              <template #default="{ row }">
+                <a-link @click="showTrade(row)">{{ row.tradeNo }}</a-link>
+              </template>
+            </vxe-column>
+            <vxe-column field="amount" title="交易金额(元)" sortable :min-width="130">
+              <template #default="{ row }">
+                {{ row.amount ? (row.amount / 100).toFixed(2) : '无' }}
+              </template>
+            </vxe-column>
+            <vxe-column field="tradeTime" title="交易时间" sortable :min-width="150" />
+            <vxe-column field="tradeStatus" title="交易状态" :min-width="150" />
+          </vxe-colgroup>
+          <vxe-colgroup title="通道信息">
+            <vxe-column field="channelTradeNo" title="交易号" :min-width="230" />
+            <vxe-column field="channelTradeAmount" title="交易金额(元)" sortable :min-width="150" />
+            <vxe-column field="channelTradeTime" title="交易时间" sortable :min-width="150" />
+            <vxe-column field="channelTradeStatus" title="交易状态" :min-width="150" />
+          </vxe-colgroup>
+
+          <vxe-column field="reconcileNo" title="对账单号" :min-width="230">
+            <template #default="{ row }">
+              <a-link @click="showReconcile(row)">{{ row.reconcileNo }}</a-link>
+            </template>
+          </vxe-column>
+          <vxe-column fixed="right" width="100" :showOverflow="false" title="操作">
+            <template #default="{ row }">
+              <a-link @click="show(row)">查看</a-link>
+            </template>
+          </vxe-column>
+        </vxe-table>
+      </div>
       <vxe-pager
         size="medium"
         :loading="loading"

src/views/daxpay/admin/reconcile/statement/ReconcileStatement.api.ts

@@ -38,7 +38,7 @@ export function create(params: ReconcileCreatParam) {
  */
 export function downAndSave(id: any) {
   return defHttp.post<any>({
-    url: '/order/reconcile/downAndSave',
+    url: '/reconcile/statement/downAndSave',
     params: { id },
   })
 }
@@ -48,7 +48,7 @@ export function downAndSave(id: any) {
  */
 export function compare(id: any) {
   return defHttp.post<any>({
-    url: '/order/reconcile/compare',
+    url: '/reconcile/statement/compare',
     params: { id },
   })
 }

src/views/daxpay/admin/reconcile/statement/ReconcileStatementCreate.vue

@@ -4,7 +4,7 @@
     v-bind="$attrs"
     :loading="confirmLoading"
     :width="modalWidth"
-    :visible="visible"
+    :open="visible"
     :mask-closable="showable"
     @cancel="handleCancel"
   >
@@ -16,24 +16,24 @@
       :label-col="labelCol"
       :wrapper-col="wrapperCol"
     >
-      <a-form-item label="标题" name="name">
+      <a-form-item label="标题" name="title">
         <a-input v-model:value="form.title" placeholder="请输入对账名称" />
       </a-form-item>
       <a-form-item label="商户" name="mchNo">
         <a-select
           :filter-option="search"
+          :options="merchantList"
           v-model:value="form.mchNo"
-          :disabled="showable"
           placeholder="请选择商户"
+          @change="merchantChange"
         />
       </a-form-item>
       <a-form-item label="商户应用" name="appId" v-show="form.mchNo">
         <a-select
           :filter-option="search"
-          :disabled="showable"
+          :options="mchAppList"
           v-model:value="form.appId"
           placeholder="请选择商户应用"
-          @change="merchantChange"
         />
       </a-form-item>
       <a-form-item label="对账日期" name="date">
@@ -122,6 +122,7 @@
     // 商户
     merchantDropdown().then(({ data }) => {
       merchantList.value = data
+      console.log(merchantList)
     })
   }
 

src/views/daxpay/admin/reconcile/statement/ReconcileStatementList.vue

@@ -23,6 +23,8 @@
         <vxe-table
           row-id="id"
           ref="xTable"
+          height="auto"
+          align="center"
           :data="pagination.records"
           :loading="loading"
           :sort-config="{ remote: true, trigger: 'cell' }"
@@ -37,7 +39,7 @@
               </a>
             </template>
           </vxe-column>
-          <vxe-column field="channel" title="对账通道" :min-width="100">
+          <vxe-column field="channel" title="对账通道" :min-width="150">
             <template #default="{ row }">
               <a-tag>{{ dictConvert('channel', row.channel) }}</a-tag>
             </template>
@@ -79,7 +81,7 @@
           </vxe-colgroup>
           <vxe-column field="errorMsg" title="错误信息" :min-width="160" />
           <vxe-column field="createTime" title="创建时间" :min-width="160" />
-          <vxe-column fixed="right" width="100" :showOverflow="false" title="操作">
+          <vxe-column fixed="right" width="120" :showOverflow="false" title="操作">
             <template #default="{ row }">
               <a-link @click="show(row)">查看</a-link>
               <a-divider type="vertical" />
@@ -111,7 +113,7 @@
         :total="pagination.total"
         @page-change="handleTableChange"
       />
-      <ReconcileStatementCreate ref="reconcileStatementCreate" />
+      <ReconcileStatementCreate ref="reconcileStatementCreate" @ok="queryPage"/>
     </div>
   </div>
 </template>
@@ -122,14 +124,13 @@
   import useTablePage from '@/hooks/bootx/useTablePage'
   import { VxeTable, VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
   import { useMessage } from '@/hooks/web/useMessage'
-  import { LIST, QueryField, STRING } from '@/components/Bootx/Query/Query'
+  import { QueryField, STRING } from '@/components/Bootx/Query/Query'
   import BQuery from '/@/components/Bootx/Query/BQuery.vue'
   import { LabeledValue } from 'ant-design-vue/lib/select'
   import { useDict } from '@/hooks/bootx/useDict'
   import { Icon } from '@/components/Icon'
   import ALink from '@/components/Link/Link.vue'
   import ReconcileStatementCreate from './ReconcileStatementCreate.vue'
-  import { useUpload } from '@/hooks/bootx/useUpload'
 
   // 使用hooks
   const {