feat 对账订单相关页面

src/components/Bootx/Query/QueryItem.vue

@@ -37,7 +37,7 @@
         v-else-if="field.type === DATE"
         style="width: 100%"
         :placeholder="field.placeholder ? field.placeholder : '请选择日期'"
-        :valueFormat="field.format ? field.format : 'yyyy-MM-DD'"
+        :valueFormat="field.format ? field.format : 'YYYY-MM-DD'"
         v-model:value="queryParams[field.field]"
       />
       <!-- 时间 -->
@@ -56,7 +56,7 @@
         v-else-if="field.type === DATE_TIME"
         style="width: 100%"
         :placeholder="field.placeholder ? field.placeholder : '请选择日期时间'"
-        :valueFormat="field.format ? field.format : 'yyyy-MM-DD HH:mm:ss'"
+        :valueFormat="field.format ? field.format : 'YYYY-MM-DD HH:mm:ss'"
         v-model:value="queryParams[field.field]"
       />
       <!-- 默认文本输入 -->

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

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="less">
+
+</style>

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

@@ -0,0 +1,115 @@
+<template>
+  <basic-drawer forceRender v-bind="$attrs" title="字典列表" width="60%" :visible="visible" @close="visible = false">
+    <vxe-toolbar ref="xToolbar" custom :refresh="{ queryMethod: queryPage }">
+      <template #buttons>
+        <a-space>
+          <a-button type="primary" pre-icon="ant-design:plus-outlined" @click="add">新建</a-button>
+        </a-space>
+      </template>
+    </vxe-toolbar>
+    <vxe-table row-id="id" ref="xTable" :data="pagination.records" :loading="loading">
+      <vxe-column type="seq" width="60" />
+      <vxe-column field="title" title="商品名称" />
+      <vxe-column field="orderId" title="本地订单号" />
+      <vxe-column field="gatewayOrderNo" title="字典项名称" />
+      <vxe-column field="type" title="交易类型">
+        <template #default="{ row }">
+          <a-tag v-if="row.type" color="green">启用</a-tag>
+          <a-tag v-else color="red">停用</a-tag>
+        </template>
+      </vxe-column>
+      <vxe-column field="amount" title="交易金额" />
+      <vxe-column field="remark" title="备注" />
+      <vxe-column field="createTime" title="创建时间" />
+      <vxe-column fixed="right" width="60" :showOverflow="false" title="操作">
+        <template #default="{ row }">
+          <span>
+            <a href="javascript:" @click="show(row)">查看</a>
+          </span>
+        </template>
+      </vxe-column>
+    </vxe-table>
+    <vxe-pager
+      size="medium"
+      :loading="loading"
+      :current-page="pagination.current"
+      :page-size="pagination.size"
+      :total="pagination.total"
+      @page-change="handleTableChange"
+    />
+    <reconcile-detail-info ref="reconcileDetailInfo" />"
+  </basic-drawer>
+</template>
+
+<script setup lang="ts">
+  import { nextTick, onMounted } from 'vue'
+  import { $ref } from 'vue/macros'
+  import { page } 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 { Dict } from '/@/views/modules/system/dict/Dict.api'
+  import BasicDrawer from '/@/components/Drawer/src/BasicDrawer.vue'
+
+  // 使用hooks
+  const { handleTableChange, pageQueryResHandel, resetQueryParams, pagination, pages, model, loading } = useTablePage(queryPage)
+  const { notification, createMessage } = useMessage()
+
+  // 查询条件
+  const fields = [] as QueryField[]
+  let visible = $ref(false)
+  let dictInfo = $ref<Dict>()
+
+  const xTable = $ref<VxeTableInstance>()
+  const xToolbar = $ref<VxeToolbarInstance>()
+  const reconcileDetailInfo = $ref<any>()
+
+  nextTick(() => {
+    xTable?.connect(xToolbar as VxeToolbarInstance)
+  })
+
+  onMounted(() => {
+    initData()
+  })
+
+  /**
+   * 初始化基础数据
+   */
+  function initData() {}
+  /**
+   * 入口
+   * @param record
+   */
+  function init(record) {
+    visible = true
+    dictInfo = record
+    queryPage()
+  }
+
+  /**
+   * 分页查询
+   */
+  function queryPage() {
+    loading.value = true
+    page({
+      ...model.queryParam,
+      ...pages,
+      dictId: dictInfo?.id,
+    }).then(({ data }) => {
+      pageQueryResHandel(data)
+    })
+  }
+  /**
+   * 查看
+   */
+  function show(record) {
+    reconcileDetailInfo.init(record)
+  }
+  defineExpose({
+    init,
+  })
+</script>
+
+<style scoped lang="less"></style>

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

@@ -2,12 +2,22 @@ import { defHttp } from '/@/utils/http/axios'
 import { PageResult, Result } from '/#/axios'
 import { BaseEntity } from '/#/web'
 
+/**
+ * 创建对账订单
+ */
+export function create(params: any) {
+  return defHttp.post<ReconcileOrder>({
+    url: '/order/reconcile/create',
+    data: params,
+  })
+}
+
 /**
  * 分页
  */
 export function page(params: any) {
-  return defHttp.get<PageResult<ReconcileOrder>>({
-    url: '/reconcile/page',
+  return defHttp.get<Result<PageResult<ReconcileOrder>>>({
+    url: '/order/reconcile/page',
     params,
   })
 }
@@ -16,8 +26,38 @@ export function page(params: any) {
  * 查看单条
  */
 export function get(id: string) {
-  return defHttp.get<ReconcileOrder>({
-    url: '/reconcile/get',
+  return defHttp.get<Result<ReconcileOrder>>({
+    url: '/order/reconcile/findById',
+    params: { id },
+  })
+}
+
+/**
+ * 明细分页
+ */
+export function pageDetail(params) {
+  return defHttp.get<Result<PageResult<ReconcileDetail>>>({
+    url: '/order/reconcile/pageDetail',
+    params,
+  })
+}
+
+/**
+ * 明细详情
+ */
+export function getDetail(id: string) {
+  return defHttp.get<Result<ReconcileDetail>>({
+    url: '/order/reconcile/findDetailById',
+    params: { id },
+  })
+}
+
+/**
+ * 下载对账单
+ */
+export function downAndSave(id: any) {
+  return defHttp.post<any>({
+    url: '/order/reconcile/downAndSave',
     params: { id },
   })
 }

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

@@ -0,0 +1,118 @@
+<template>
+  <basic-modal
+    title="对账订单详情"
+    v-bind="$attrs"
+    :loading="confirmLoading"
+    :width="modalWidth"
+    :visible="visible"
+    :mask-closable="showable"
+    @cancel="handleCancel"
+  >
+    <a-form class="small-from-item" ref="formRef" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
+      <a-form-item label="对账日期" name="date">
+        <a-date-picker
+          style="width: 100%"
+          valueFormat="YYYY-MM-DD"
+          placeholder="请选择对账日期"
+          v-model:value="form.date"
+          :defaultPickerValue="form.date"
+          :disabled-date="disabledDate"
+          :show-today="false"
+        />
+      </a-form-item>
+      <a-form-item label="对账通道" name="channel">
+        <a-select style="width: 100%" v-model:value="form.channel" :options="channels" placeholder="请选择对账通道" />
+      </a-form-item>
+    </a-form>
+    <template #footer>
+      <a-button key="cancel" @click="handleCancel">取消</a-button>
+      <a-button key="forward" :loading="confirmLoading" type="primary" @click="handleOk">提交</a-button>
+    </template>
+  </basic-modal>
+</template>
+
+<script setup lang="ts">
+  import { BasicModal } from '/@/components/Modal'
+  import { nextTick, onMounted, reactive } from 'vue'
+  import useFormEdit from '/@/hooks/bootx/useFormEdit'
+  import { useMessage } from '/@/hooks/web/useMessage'
+  import { FormInstance, Rule } from 'ant-design-vue/lib/form'
+  import { LabeledValue } from 'ant-design-vue/lib/select'
+  import { useDict } from '/@/hooks/bootx/useDict'
+  import { $ref } from 'vue/macros'
+  import dayjs, { Dayjs } from 'dayjs'
+  import XEUtils from 'xe-utils'
+  import { create } from './ReconcileOrder.api'
+
+  const { handleCancel, labelCol, wrapperCol, modalWidth, confirmLoading, visible, editable, showable, formEditType } = useFormEdit()
+  const { createMessage } = useMessage()
+  const { dictConvert, dictDropDown } = useDict()
+
+  let form = reactive({
+    date: '',
+    channel: null,
+  })
+
+  const rules = {
+    date: [{ required: true, message: '请选择对账日期' }],
+    channel: [{ required: true, message: '请选择对账通道' }],
+  } as Record<string, Rule[]>
+
+  let channels = $ref<LabeledValue[]>([])
+  const formRef = $ref<FormInstance>()
+
+  const emits = defineEmits(['ok'])
+
+  onMounted(() => {
+    initData()
+  })
+
+  /**
+   * 初始化数据
+   */
+  async function initData() {
+    channels = await dictDropDown('AsyncPayChannel')
+  }
+
+  /**
+   * 入口
+   */
+  function init() {
+    visible.value = true
+    resetForm()
+    const date = XEUtils.getWhatDay(new Date(), -1)
+    form.date = XEUtils.toDateString(date, 'yyyy-MM-dd')
+    confirmLoading.value = false
+  }
+
+  /**
+   * 提交
+   */
+  async function handleOk() {
+    formRef?.validate().then(async () => {
+      confirmLoading.value = true
+      await create(form)
+      visible.value = false
+      confirmLoading.value = false
+      emits('ok')
+    })
+  }
+
+  /**
+   * 禁用今天及以后的日期
+   */
+  function disabledDate(current: Dayjs) {
+    return current && current >= dayjs().startOf('day')
+  }
+  /**
+   * 重置表单
+   */
+  function resetForm() {
+    nextTick(() => {
+      formRef?.resetFields()
+    })
+  }
+  defineExpose({ init })
+</script>
+
+<style scoped lang="less"></style>

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

@@ -0,0 +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.date }}
+      </a-descriptions-item>
+      <a-descriptions-item label="批次号">
+        {{ form.batchNo }}
+      </a-descriptions-item>
+      <a-descriptions-item label="支付通道">
+        <a-tag>{{ dictConvert('PayChannel', form.channel) }}</a-tag>
+      </a-descriptions-item>
+      <a-descriptions-item label="对账单下载">
+        <a-tag v-if="form?.down" color="green">已下载</a-tag>
+        <a-tag v-else color="red">未下载</a-tag>
+      </a-descriptions-item>
+      <a-descriptions-item label="对账单比对">
+        <a-tag v-if="form?.compare" color="green">已比对</a-tag>
+        <a-tag v-else color="red">未比对</a-tag>
+      </a-descriptions-item>
+      <a-descriptions-item label="错误信息">
+        {{ form.errorMsg }}
+      </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 { get, ReconcileOrder } 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<ReconcileOrder>({})
+
+  // 事件
+  const emits = defineEmits(['ok'])
+  // 入口
+  function init(record) {
+    visible.value = true
+    confirmLoading.value = true
+    get(record.id).then(({ data }) => {
+      form = data
+      confirmLoading.value = false
+    })
+  }
+  defineExpose({
+    init,
+  })
+</script>
+
+<style scoped lang="less"></style>

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

@@ -0,0 +1,176 @@
+<template>
+  <div>
+    <div class="m-3 p-3 pt-5 bg-white">
+      <b-query :query-params="model.queryParam" :default-item-count="3" :fields="fields" @query="queryPage" @reset="resetQueryParams" />
+    </div>
+    <div class="m-3 p-3 bg-white">
+      <vxe-toolbar ref="xToolbar" custom :refresh="{ queryMethod: queryPage }">
+        <template #buttons>
+          <a-space>
+            <a-button type="primary" pre-icon="ant-design:plus-outlined" @click="add">新建</a-button>
+          </a-space>
+        </template>
+      </vxe-toolbar>
+      <vxe-table row-id="id" ref="xTable" :data="pagination.records" :loading="loading">
+        <vxe-column type="seq" title="序号" width="60" />
+        <vxe-column field="date" title="对账日期" />
+        <vxe-column field="batchNo" title="批次号" />
+        <vxe-column field="channel" title="支付通道">
+          <template #default="{ row }">
+            <a-tag>{{ dictConvert('PayChannel', row.channel) }}</a-tag>
+          </template>
+        </vxe-column>
+        <vxe-column field="down" title="对账单下载">
+          <template #default="{ row }">
+            <a-tag v-if="row.down" color="green">已下载</a-tag>
+            <a-link v-else color="red" @click="down(row)">下载</a-link>
+          </template>
+        </vxe-column>
+        <vxe-column field="compare" title="对账单比对">
+          <template #default="{ row }">
+            <a-tag v-if="row.compare" color="green">已比对</a-tag>
+            <a-link v-else :disabled="!row.down" color="red" @click="compare(row)">比对</a-link>
+          </template>
+        </vxe-column>
+        <vxe-column field="errorMsg" title="错误信息" />
+        <vxe-column fixed="right" width="150" :showOverflow="false" title="操作">
+          <template #default="{ row }">
+            <a-link @click="show(row)">查看</a-link>
+            <a-divider type="vertical" />
+            <a-link @click="show(row)">对账明细</a-link>
+          </template>
+        </vxe-column>
+      </vxe-table>
+      <vxe-pager
+        size="medium"
+        :loading="loading"
+        :current-page="pagination.current"
+        :page-size="pagination.size"
+        :total="pagination.total"
+        @page-change="handleTableChange"
+      />
+    </div>
+    <reconcile-order-create ref="reconcileOrderCreate" @ok="queryPage" />
+    <reconcile-detail-list ref="reconcileDetailList" />
+    <reconcile-order-info ref="reconcileOrderInfo" />
+  </div>
+</template>
+<script setup lang="ts">
+  import BQuery from '/@/components/Bootx/Query/BQuery.vue'
+  import useTablePage from '/@/hooks/bootx/useTablePage'
+  import { useMessage } from '/@/hooks/web/useMessage'
+  import { useDict } from '/@/hooks/bootx/useDict'
+  import { LabeledValue } from 'ant-design-vue/lib/select'
+  import { computed, onMounted } from 'vue'
+  import { DATE, LIST, QueryField, STRING } from '/@/components/Bootx/Query/Query'
+  import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
+  import { downAndSave, page } from './ReconcileOrder.api'
+  import ReconcileOrderInfo from './ReconcileOrderInfo.vue'
+  import ReconcileDetailList from './ReconcileDetailList.vue'
+  import ReconcileOrderCreate from '/@/views/payment/order/reconcile/ReconcileOrderCreate.vue'
+
+  // 使用hooks
+  const { handleTableChange, pageQueryResHandel, resetQueryParams, pagination, pages, model, loading } = useTablePage(queryPage)
+  const { notification, createMessage, createConfirm } = useMessage()
+  const { dictConvert, dictDropDown } = useDict()
+
+  let payChannelList = $ref<LabeledValue[]>([])
+
+  // 查询条件
+  const fields = computed(() => {
+    return [
+      { field: 'date', type: DATE, name: '对账日期', placeholder: '请选择对账日期' },
+      { field: 'batchNo', type: STRING, name: '批次号', placeholder: '请输入对账批次号' },
+      {
+        field: 'channel',
+        type: LIST,
+        name: '对账通道',
+        placeholder: '请选择对账通道',
+        selectList: payChannelList,
+      },
+    ] as QueryField[]
+  })
+
+  const xTable = $ref<VxeTableInstance>()
+  const xToolbar = $ref<VxeToolbarInstance>()
+  const reconcileOrderCreate = $ref<any>()
+  const reconcileOrderInfo = $ref<any>()
+  const reconcileDetailList = $ref<any>()
+
+  onMounted(() => {
+    initData()
+    vxeBind()
+    queryPage()
+  })
+  function vxeBind() {
+    xTable?.connect(xToolbar as VxeToolbarInstance)
+  }
+
+  /**
+   * 初始化数据
+   */
+  async function initData() {
+    payChannelList = await dictDropDown('AsyncPayChannel')
+  }
+
+  /**
+   * 分页查询
+   */
+  function queryPage() {
+    loading.value = true
+    page({
+      ...model.queryParam,
+      ...pages,
+    }).then(({ data }) => {
+      pageQueryResHandel(data)
+    })
+    return Promise.resolve()
+  }
+  /**
+   * 查看详情
+   */
+  function show(record) {
+    reconcileOrderInfo.init(record)
+  }
+
+  /**
+   * 下载对账单
+   */
+  function down(record) {
+    createConfirm({
+      iconType: 'info',
+      title: '提示',
+      content: '确定要下载对账单吗？',
+      onOk: () => {
+        createMessage.info('对账单下载保存中.....')
+        downAndSave(record.id).then(() => {
+          createMessage.info('对账单下载完成')
+          queryPage()
+        })
+      },
+    })
+  }
+
+  /**
+   * 对账明显比对
+   */
+  function compare(record) {
+    createMessage.warn('下个版本支持...')
+  }
+
+  /**
+   * 创建对账订单
+   */
+  function add() {
+    reconcileOrderCreate.init()
+  }
+
+  /**
+   * 查看明细列表
+   */
+  function showDetailPage(record) {
+    reconcileDetailList.init(record)
+  }
+</script>
+
+<style scoped lang="less"></style>