refactor(daxpay): 重构分账配置界面, 多项配置合并为所tabs页

src/views/daxpay/common/allocation/AllocationConfigModel.vue

@@ -0,0 +1,49 @@
+<template>
+  <basic-drawer
+    v-bind="$attrs"
+    width="70%"
+    title="分账组配置"
+    :mask-closable="true"
+    :open="visible"
+    @close="visible = false"
+  >
+    <a-tabs v-model:activeKey="activeKey" type="card">
+      <a-tab-pane :key="1" tab="分账配置">
+      </a-tab-pane>
+      <a-tab-pane :key="2" tab="分账接收方">
+        <AllocationReceiverList ref="allocationReceiverList" :appId="appId"/>
+      </a-tab-pane>
+      <a-tab-pane :key="3" tab="分账组">
+        <AllocationGroupList ref="allocationGroupList" :appId="appId" />
+      </a-tab-pane>
+    </a-tabs>
+  </basic-drawer>
+</template>
+
+<script setup lang="ts">
+  import AllocationReceiverList from '@/views/daxpay/common/allocation/receiver/AllocationReceiverList.vue'
+  import AllocationGroupList from '@/views/daxpay/common/allocation/group/AllocationGroupList.vue'
+  import { ref } from 'vue'
+  import { BasicDrawer } from '@/components/Drawer'
+
+  const allocationReceiverList = ref<any>()
+  const allocationGroupList = ref<any>()
+
+  const visible = ref(false)
+  const activeKey = ref(2)
+  const appId = ref('')
+
+  /**
+   * 入口
+   * @param appid
+   */
+  function init(appid: string) {
+    visible.value = true
+    appId.value = appid
+  }
+
+
+  defineExpose({ init })
+</script>
+
+<style scoped lang="less"></style>

src/views/daxpay/common/allocation/group/AllocationGroupList.vue

@@ -1,14 +1,6 @@
 <template>
-  <basic-drawer
-    showFooter
-    v-bind="$attrs"
-    width="70%"
-    title="分账组配置"
-    :mask-closable="true"
-    :open="visible"
-    @close="visible = false"
-  >
-    <div class="m-3 p-3 pt-5 bg-white">
+  <div>
+    <div class="p-3">
       <b-query
         :query-params="model.queryParam"
         :fields="fields"
@@ -27,62 +19,65 @@
           </a-space>
         </template>
       </vxe-toolbar>
-      <vxe-table
-        key-field="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="groupNo" title="分组编号" :min-width="160">
-          <template #default="{ row }">
-            <a-link @click="show(row)">{{ row.groupNo }}</a-link>
-          </template>
-        </vxe-column>
-        <vxe-column field="name" title="分组名称" :min-width="160" />
-        <vxe-column field="channel" title="所属通道" :min-width="120" align="center">
-          <template #default="{ row }">
-            <a-tag>{{ dictConvert('channel', row.channel) }}</a-tag>
-          </template>
-        </vxe-column>
-        <vxe-column field="totalRate" title="分账比例" align="center" :min-width="100">
-          <template #default="{ row }"> {{ row.totalRate }}% </template>
-        </vxe-column>
-        <vxe-column field="defaultGroup" title="默认分账组" align="center" :min-width="100">
-          <template #default="{ row }">
-            <a-tag color="green" v-if="row.defaultGroup">是</a-tag>
-            <a-tag v-else>否</a-tag>
-          </template>
-        </vxe-column>
-        <vxe-column field="remark" title="备注" :min-width="160" />
-        <vxe-column fixed="right" :min-width="160" :showOverflow="false" title="操作">
-          <template #default="{ row }">
-            <a-link danger @click="config(row)">接收方配置</a-link>
-            <a-divider type="vertical" />
-            <a-dropdown>
-              <a> 更多 <icon icon="ant-design:down-outlined" :size="12" /> </a>
-              <template #overlay>
-                <a-menu>
-                  <a-menu-item v-if="!row.defaultGroup">
-                    <a-link @click="setUpDefault(row)">设为默认</a-link>
-                  </a-menu-item>
-                  <a-menu-item v-if="row.defaultGroup">
-                    <a-link @click="clearDefault(row)">取消默认</a-link>
-                  </a-menu-item>
-                  <a-menu-item>
-                    <a-link @click="edit(row)">编辑</a-link>
-                  </a-menu-item>
-                  <a-menu-item>
-                    <a-link danger :disabled="row.defaultGroup" @click="remove(row)">删除</a-link>
-                  </a-menu-item>
-                </a-menu>
-              </template>
-            </a-dropdown>
-          </template>
-        </vxe-column>
-      </vxe-table>
+      <div class="h-60vh">
+        <vxe-table
+          height="auto"
+          key-field="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="groupNo" title="分组编号" :min-width="160">
+            <template #default="{ row }">
+              <a-link @click="show(row)">{{ row.groupNo }}</a-link>
+            </template>
+          </vxe-column>
+          <vxe-column field="name" title="分组名称" :min-width="160" />
+          <vxe-column field="channel" title="所属通道" :min-width="120" align="center">
+            <template #default="{ row }">
+              <a-tag>{{ dictConvert('channel', row.channel) }}</a-tag>
+            </template>
+          </vxe-column>
+          <vxe-column field="totalRate" title="分账比例" align="center" :min-width="100">
+            <template #default="{ row }"> {{ row.totalRate }}% </template>
+          </vxe-column>
+          <vxe-column field="defaultGroup" title="默认分账组" align="center" :min-width="100">
+            <template #default="{ row }">
+              <a-tag color="green" v-if="row.defaultGroup">是</a-tag>
+              <a-tag v-else>否</a-tag>
+            </template>
+          </vxe-column>
+          <vxe-column field="remark" title="备注" :min-width="160" />
+          <vxe-column fixed="right" :min-width="160" :showOverflow="false" title="操作">
+            <template #default="{ row }">
+              <a-link danger @click="config(row)">接收方配置</a-link>
+              <a-divider type="vertical" />
+              <a-dropdown>
+                <a> 更多 <icon icon="ant-design:down-outlined" :size="12" /> </a>
+                <template #overlay>
+                  <a-menu>
+                    <a-menu-item v-if="!row.defaultGroup">
+                      <a-link @click="setUpDefault(row)">设为默认</a-link>
+                    </a-menu-item>
+                    <a-menu-item v-if="row.defaultGroup">
+                      <a-link @click="clearDefault(row)">取消默认</a-link>
+                    </a-menu-item>
+                    <a-menu-item>
+                      <a-link @click="edit(row)">编辑</a-link>
+                    </a-menu-item>
+                    <a-menu-item>
+                      <a-link danger :disabled="row.defaultGroup" @click="remove(row)">删除</a-link>
+                    </a-menu-item>
+                  </a-menu>
+                </template>
+              </a-dropdown>
+            </template>
+          </vxe-column>
+        </vxe-table>
+      </div>
       <vxe-pager
         size="medium"
         :loading="loading"
@@ -94,7 +89,7 @@
     </div>
     <AllocationGroupEdit ref="allocationGroupEdit" @ok="queryPage" />
     <AllocationGroupConfig ref="allocationGroupConfig" />
-  </basic-drawer>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -113,8 +108,10 @@
   import AllocationGroupConfig from './AllocationGroupConfig.vue'
   import { FormEditType } from '@/enums/formTypeEnum'
   import { findChannels } from '../receiver/AllocationReceiver.api'
-  import { BasicDrawer } from '@/components/Drawer'
 
+  const props = defineProps({
+    appId: String,
+  })
   // 使用hooks
   const {
     handleTableChange,
@@ -130,13 +127,11 @@
   const { createMessage, createConfirm } = useMessage()
   const { dictConvert } = useDict()
 
-  const appId = ref('')
   const allocationGroupEdit = ref<any>()
   const allocationGroupConfig = ref<any>()
   const xTable = ref<VxeTableInstance>()
   const xToolbar = ref<VxeToolbarInstance>()
 
-  const visible = ref(false)
   let payChannelList = ref<LabeledValue[]>([])
 
   const fields = computed(() => {
@@ -155,6 +150,7 @@
   onMounted(() => {
     vxeBind()
     initData()
+    queryPage()
   })
 
   /**
@@ -164,15 +160,6 @@
     xTable.value?.connect(xToolbar.value as VxeToolbarInstance)
   }
 
-  /**
-   * 入口
-   */
-  function init(mchAppId) {
-    appId.value = mchAppId
-    visible.value = true
-    queryPage()
-  }
-
   /**
    * 初始化数据
    */
@@ -184,7 +171,7 @@
    * 新建
    */
   function add() {
-    allocationGroupEdit.value.init(null, FormEditType.Add, appId.value)
+    allocationGroupEdit.value.init(null, FormEditType.Add, props.appId)
   }
 
   /**
@@ -215,7 +202,7 @@
     loading.value = true
     page({
       ...model.queryParam,
-      appId: appId.value,
+      appId: props.appId,
       ...pages,
       ...sortParam,
     }).then(({ data }) => {
@@ -277,7 +264,6 @@
       },
     })
   }
-  defineExpose({ init })
 </script>
 
 <style scoped lang="less"></style>

src/views/daxpay/common/allocation/receiver/AllocationReceiverList.vue

@@ -1,14 +1,6 @@
 <template>
-  <basic-drawer
-    showFooter
-    v-bind="$attrs"
-    width="70%"
-    title="接收方配置"
-    :mask-closable="true"
-    :open="visible"
-    @close="visible = false"
-  >
-    <div class="m-3 p-3 pt-5 bg-white">
+  <div>
+    <div class="p-3">
       <b-query
         :query-params="model.queryParam"
         :fields="fields"
@@ -27,45 +19,48 @@
           </a-space>
         </template>
       </vxe-toolbar>
-      <vxe-table
-        key-field="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="receiverNo" title="接收方编号" :min-width="180">
-          <template #default="{ row }">
-            <a-link @click="show(row)">{{ row.receiverNo }}</a-link>
-          </template>
-        </vxe-column>
-        <vxe-column field="channel" title="所属通道" :min-width="150" align="center">
-          <template #default="{ row }">
-            <a-tag>{{ dictConvert('channel', row.channel) }}</a-tag>
-          </template>
-        </vxe-column>
-        <vxe-column field="receiverType" title="接收方类型" :min-width="100" align="center">
-          <template #default="{ row }">
-            <a-tag>{{ dictConvert('alloc_receiver_type', row.receiverType) }}</a-tag>
-          </template>
-        </vxe-column>
-        <vxe-column field="receiverAccount" title="接收方账号" :min-width="230" />
-        <vxe-column field="receiverName" title="接收方姓名" :min-width="160" />
-        <vxe-column field="relationType" title="分账关系" :min-width="100" align="center">
-          <template #default="{ row }">
-            <a-tag>{{ dictConvert('alloc_relation_type', row.relationType) }}</a-tag>
-          </template>
-        </vxe-column>
-        <vxe-column fixed="right" min-width="100" :showOverflow="false" title="操作">
-          <template #default="{ row }">
-            <a-link @click="show(row)">查看</a-link>
-            <a-divider type="vertical" />
-            <a-link @click="remove(row)">删除</a-link>
-          </template>
-        </vxe-column>
-      </vxe-table>
+      <div class="h-60vh">
+        <vxe-table
+          height="auto"
+          key-field="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="receiverNo" title="接收方编号" :min-width="180">
+            <template #default="{ row }">
+              <a-link @click="show(row)">{{ row.receiverNo }}</a-link>
+            </template>
+          </vxe-column>
+          <vxe-column field="channel" title="所属通道" :min-width="150" align="center">
+            <template #default="{ row }">
+              <a-tag>{{ dictConvert('channel', row.channel) }}</a-tag>
+            </template>
+          </vxe-column>
+          <vxe-column field="receiverType" title="接收方类型" :min-width="100" align="center">
+            <template #default="{ row }">
+              <a-tag>{{ dictConvert('alloc_receiver_type', row.receiverType) }}</a-tag>
+            </template>
+          </vxe-column>
+          <vxe-column field="receiverAccount" title="接收方账号" :min-width="230" />
+          <vxe-column field="receiverName" title="接收方姓名" :min-width="160" />
+          <vxe-column field="relationType" title="分账关系" :min-width="100" align="center">
+            <template #default="{ row }">
+              <a-tag>{{ dictConvert('alloc_relation_type', row.relationType) }}</a-tag>
+            </template>
+          </vxe-column>
+          <vxe-column fixed="right" min-width="100" :showOverflow="false" title="操作">
+            <template #default="{ row }">
+              <a-link @click="show(row)">查看</a-link>
+              <a-divider type="vertical" />
+              <a-link @click="remove(row)">删除</a-link>
+            </template>
+          </vxe-column>
+        </vxe-table>
+      </div>
       <vxe-pager
         size="medium"
         :loading="loading"
@@ -76,7 +71,7 @@
       />
     </div>
     <AllocationReceiverEdit ref="allocationReceiverEdit" @ok="queryPage" />
-  </basic-drawer>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -92,7 +87,10 @@
   import { LabeledValue } from 'ant-design-vue/lib/select'
   import AllocationReceiverEdit from './AllocationReceiverEdit.vue'
   import { FormEditType } from '@/enums/formTypeEnum'
-  import { BasicDrawer } from '@/components/Drawer'
+
+  const props = defineProps({
+    appId: String,
+  })
 
   // 使用hooks
   const {
@@ -109,8 +107,6 @@
   const { createMessage, createConfirm } = useMessage()
   const { dictConvert, dictDropDown } = useDict()
 
-  const appId = ref('')
-  const visible = ref(false)
   const allocationReceiverEdit = ref<any>()
   const xTable = ref<VxeTableInstance>()
   const xToolbar = ref<VxeToolbarInstance>()
@@ -148,13 +144,8 @@
   onMounted(() => {
     vxeBind()
     initData()
-  })
-
-  function init(mchAppId: string) {
-    visible.value = true
-    appId.value = mchAppId
     queryPage()
-  }
+  })
 
   /**
    * 绑定
@@ -176,7 +167,7 @@
    * 新建
    */
   function add() {
-    allocationReceiverEdit.value.init(null, FormEditType.Add, appId)
+    allocationReceiverEdit.value.init(null, FormEditType.Add, props.appId)
   }
 
   /**
@@ -193,7 +184,7 @@
     loading.value = true
     page({
       ...model.queryParam,
-      appId: appId.value,
+      appId: props.appId,
       ...pages,
       ...sortParam,
     }).then(({ data }) => {
@@ -219,7 +210,6 @@
       },
     })
   }
-  defineExpose({ init })
 </script>
 
 <style scoped lang="less"></style>

src/views/daxpay/common/merchant/app/MchAppList.vue

@@ -67,14 +67,8 @@
                     <a-menu-item>
                       <a-link @click="showCashierCode(row)">码牌配置</a-link>
                     </a-menu-item>
-                    <!--                    <a-menu-item>-->
-                    <!--                      <a-link @click="showAllocConfig(row)">分账配置</a-link>-->
-                    <!--                    </a-menu-item>-->
                     <a-menu-item>
-                      <a-link @click="showAllocReceiver(row)">分账接收方</a-link>
-                    </a-menu-item>
-                    <a-menu-item>
-                      <a-link @click="showAllocGroup(row)">分账组</a-link>
+                      <a-link @click="showAllocConfig(row)">分账配置</a-link>
                     </a-menu-item>
                     <a-menu-item>
                       <a-link danger @click="remove(row)">删除应用</a-link>
@@ -99,8 +93,7 @@
       <MerchantNotifyConfigList ref="merchantNotifyConfigList" />
       <CashierCodeConfigList ref="cashierCodeConfigList" />
       <CheckoutConfigModel ref="checkoutConfigModel" />
-      <AllocationReceiverList ref="allocationReceiverList" />
-      <AllocationGroupList ref="allocationGroupList" />
+      <AllocationConfigModel ref="allocationConfigModel" />
     </div>
   </div>
 </template>
@@ -120,10 +113,9 @@
   import ChannelConfigList from '@/views/daxpay/common/merchant/channel/ChannelConfigList.vue'
   import MerchantNotifyConfigList from '@/views/daxpay/common/merchant/notify/MerchantNotifyConfigList.vue'
   import Icon from '@/components/Icon/Icon.vue'
-  import AllocationReceiverList from '@/views/daxpay/common/allocation/receiver/AllocationReceiverList.vue'
-  import AllocationGroupList from '@/views/daxpay/common/allocation/group/AllocationGroupList.vue'
   import CashierCodeConfigList from '@/views/daxpay/common/config/cashier/code/CashierCodeConfigList.vue'
   import CheckoutConfigModel from '@/views/daxpay/common/config/checkout/CheckoutConfigModel.vue'
+  import AllocationConfigModel from '@/views/daxpay/common/allocation/AllocationConfigModel.vue'
 
   // 使用hooks
   const {
@@ -152,8 +144,7 @@
   const merchantNotifyConfigList = ref<any>()
   const cashierCodeConfigList = ref<any>()
   const checkoutConfigModel = ref<any>()
-  const allocationReceiverList = ref<any>()
-  const allocationGroupList = ref<any>()
+  const allocationConfigModel = ref<any>()
 
   onMounted(() => {
     vxeBind()
@@ -222,19 +213,7 @@
    * 分账配置
    */
   function showAllocConfig(record) {
-    createMessage.warn('暂未开放')
-  }
-  /**
-   * 分账接收方
-   */
-  function showAllocReceiver(record) {
-    allocationReceiverList.value.init(record.appId)
-  }
-  /**
-   * 分账组
-   */
-  function showAllocGroup(record) {
-    allocationGroupList.value.init(record.appId)
+    allocationConfigModel.value.init(record.appId)
   }
   /**
    * 删除