feat(walmart-account): add group management and UI enhancements

- Added a new route for Walmart group management - Replaced radio buttons with tabs for better UI experience in account and order views - Updated form handling and API calls to reflect group changes - Improved layout and styling in the group management view
2025-03-20 23:26:23 +08:00
parent f6c21be39f
commit 50cefe0fbf
5 changed files with 150 additions and 81 deletions
--- a/.env.development
+++ b/.env.development
@@ -1,2 +1,2 @@
-# VITE_API_BASE_URL= 'http://127.0.0.1:12401'
-VITE_API_BASE_URL='http://partial2.kkknametrans.buzz'
+VITE_API_BASE_URL= 'http://127.0.0.1:12401'
+# VITE_API_BASE_URL='http://partial2.kkknametrans.buzz'
--- a/src/router/routes/modules/walmart-account.ts
+++ b/src/router/routes/modules/walmart-account.ts
@@ -12,6 +12,16 @@ const Walmart: AppRouteRecordRaw = {
    order: 1
  },
  children: [
+    {
+      path: 'group',
+      name: 'walmartGroup',
+      component: () => import('@/views/card-walmart-info/group/index.vue'),
+      meta: {
+        locale: '沃尔玛分组',
+        requiresAuth: true,
+        roles: ['*']
+      }
+    },
    {
      path: 'account',
      name: 'walmartAccount',
--- a/src/views/card-walmart-info/account/index.vue
+++ b/src/views/card-walmart-info/account/index.vue
@@ -58,7 +58,7 @@
          </a-col>
        </a-row>
        <a-divider style="margin-top: 0" />
-        <a-row style="justify-content: space-around; margin-bottom: 16px">
+        <a-row style="justify-content: space-between; margin-bottom: 16px">
          <a-space>
            <a-button
              v-if="checkTokenFromLogin()"
@@ -79,7 +79,21 @@
            </a-button>
            <batchImportModel @close="() => search()" />
          </a-space>
-          <a-radio-group type="button" :onChange="onChangeRadio">
+          <a-tabs
+            default-active-key=""
+            type="capsule"
+            :onChange="onChangeRadio"
+            animation
+          >
+            <a-tab-pane key="" title="全部" />
+            <a-tab-pane
+              v-for="item in groupList"
+              :key="item.id"
+              :title="item.name"
+              :value="item.id"
+            />
+          </a-tabs>
+          <!-- <a-radio-group type="button" :onChange="onChangeRadio">
            <a-radio value="">全部</a-radio>
            <a-radio
              v-for="(item, index) in groupList"
@@ -88,7 +102,7 @@
            >
              {{ item.name }}
            </a-radio>
-          </a-radio-group>
+          </a-radio-group> -->
        </a-row>
        <a-table
          :loading="loading"
@@ -341,11 +355,11 @@ const fetchData = async (
    const res = await apiClient.apiCardInfoWalmartAccountGetListGet(
      params.current,
      params.pageSize as ApiCardInfoWalmartAccountGetListGetPageSizeEnum,
-      params.name,
-      params.nickname,
-      params.cookie,
-      params.createdUserName,
-      params.groupId
+      formModel.value.name,
+      formModel.value.nickname,
+      formModel.value.cookie,
+      formModel.value.createdUserName,
+      formModel.value.groupId
    );
    renderData.value = res.data.list;
    pagination.current = params.current;
@@ -421,6 +435,9 @@ const showAddModel = (record: walmartCardUpdateRecord) => {
  state.addModalVisible = true;
  state.accountId = record.id;
  state.account = record;
+  if (state.account.groupId === 0) {
+    state.account.groupId = null;
+  }
 };
 const showDetailModel = (record: walmartCardUpdateRecord) => {
  state.accountDetailVisible = true;
@@ -476,7 +493,7 @@ onMounted(() => {

 const onChangeRadio = (value: string | number | boolean) => {
  formModel.value.groupId = value as number;
-  fetchData();
+  // fetchData();
 };
 const download = () => {
  downloadDataList();
--- a/src/views/card-walmart-info/group/index.vue
+++ b/src/views/card-walmart-info/group/index.vue
@@ -1,56 +1,90 @@
 <template>
-  <div class="group-container">
-    <div class="search-container">
-      <a-form :model="searchForm" layout="inline">
-        <a-form-item field="name" label="分组名称">
-          <a-input
-            v-model="searchForm.name"
-            placeholder="请输入分组名称"
-            allow-clear
-          />
-        </a-form-item>
-        <a-form-item>
-          <a-space>
-            <a-button type="primary" @click="handleSearch">查询</a-button>
-            <a-button @click="resetSearch">重置</a-button>
-            <a-button type="primary" status="success" @click="handleAdd">
-              新增分组
+  <div class="container">
+    <Breadcrumb :items="['充值账户管理', '充值流水']" />
+    <a-card class="general-card" title="流水记录">
+      <a-row>
+        <a-col :flex="1">
+          <a-form
+            :model="searchForm"
+            :label-col-props="{ span: 6 }"
+            :wrapper-col-props="{ span: 18 }"
+            label-align="left"
+          >
+            <a-row :gutter="16">
+              <a-col :span="8">
+                <a-form-item field="name" label="分组名称">
+                  <a-input
+                    v-model="searchForm.name"
+                    placeholder="请输入分组名称"
+                    allow-clear
+                  />
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </a-form>
+        </a-col>
+        <a-divider style="height: 42px" direction="vertical" />
+        <a-col flex="172px" style="text-align: right">
+          <a-space direction="horizontal" :size="18">
+            <a-button type="primary" @click="handleSearch">
+              <template #icon>
+                <icon-search />
+              </template>
+              查询
+            </a-button>
+            <a-button @click="resetSearch">
+              <template #icon>
+                <icon-refresh />
+              </template>
+              重置
            </a-button>
          </a-space>
-        </a-form-item>
-      </a-form>
-    </div>
-
-    <a-table
-      :data="tableData"
-      :loading="loading"
-      :pagination="pagination"
-      @page-change="onPageChange"
-      @page-size-change="onPageSizeChange"
-    >
-      <template #columns>
-        <a-table-column title="ID" data-index="id" :width="80" />
-        <a-table-column title="分组名称" data-index="name" />
-        <a-table-column title="描述" data-index="description" />
-        <a-table-column title="创建时间" data-index="createTime" :width="180" />
-        <a-table-column title="更新时间" data-index="updateTime" :width="180" />
-        <a-table-column title="操作" :width="200" fixed="right">
-          <template #cell="{ record }">
-            <a-space>
-              <a-button type="text" @click="handleEdit(record)">编辑</a-button>
-              <a-button
-                type="text"
-                status="danger"
-                @click="handleDelete(record)"
-              >
-                删除
-              </a-button>
-            </a-space>
+        </a-col>
+      </a-row>
+      <a-divider style="margin-top: 0" />
+      <a-space direction="vertical" fill>
+        <a-button type="primary" @click="handleAdd">新增分组</a-button>
+        <a-table
+          :data="tableData"
+          :loading="loading"
+          :pagination="pagination"
+          @page-change="onPageChange"
+          @page-size-change="onPageSizeChange"
+        >
+          <template #columns>
+            <a-table-column title="ID" data-index="id" :width="80" />
+            <a-table-column title="分组名称" data-index="name" />
+            <a-table-column title="描述" data-index="notes" />
+            <a-table-column
+              title="创建时间"
+              data-index="createdAt"
+              :width="180"
+            />
+            <a-table-column
+              title="更新时间"
+              data-index="updatedAt"
+              :width="180"
+            />
+            <a-table-column title="操作" :width="200" fixed="right">
+              <template #cell="{ record }">
+                <a-space>
+                  <a-button type="text" @click="handleEdit(record)">
+                    编辑
+                  </a-button>
+                  <a-button
+                    type="text"
+                    status="danger"
+                    @click="handleDelete(record)"
+                  >
+                    删除
+                  </a-button>
+                </a-space>
+              </template>
+            </a-table-column>
          </template>
-        </a-table-column>
-      </template>
-    </a-table>
-
+        </a-table>
+      </a-space>
+    </a-card>
    <!-- 新增/编辑对话框 -->
    <a-modal
      v-model:visible="dialogVisible"
@@ -237,10 +271,6 @@ fetchData();
 </script>

 <style scoped>
-.group-container {
-  padding: 20px;
-}
-
 .search-container {
  margin-bottom: 20px;
 }
--- a/src/views/card-walmart-info/order/index.vue
+++ b/src/views/card-walmart-info/order/index.vue
@@ -81,9 +81,9 @@
      </a-row>
      <a-divider style="margin-top: 0" />
      <a-space direction="vertical" fill>
-        <a-row style="justify-content: space-around">
+        <a-row>
          <config v-if="state.showConfig" />
-          <a-radio-group type="button" :onChange="onChangeRadio">
+          <!-- <a-radio-group type="button" :onChange="onChangeRadio">
            <a-radio value="">全部</a-radio>
            <a-radio
              v-for="(item, index) in groupList"
@@ -92,8 +92,22 @@
            >
              {{ item.name }}
            </a-radio>
-          </a-radio-group>
+          </a-radio-group> -->
        </a-row>
+        <a-tabs
+          default-active-key=""
+          type="capsule"
+          :onChange="onChangeRadio"
+          animation
+        >
+          <a-tab-pane key="" title="全部" />
+          <a-tab-pane
+            v-for="item in groupList"
+            :key="item.id"
+            :title="item.name"
+            :value="item.id"
+          />
+        </a-tabs>
        <a-table
          :loading="loading"
          :pagination="{
@@ -185,10 +199,7 @@ import { onMounted, reactive, ref } from 'vue';
 import config from './components/config.tsx';
 import OrderHistory from './components/history.vue';
 import { checkTokenFromIframe } from '@/utils/auth';
-import {
-  queryWalmartCardOrderList,
-  walmartCardOrderParams
-} from '@/api/card-walmart-order.ts';
+import { walmartCardOrderParams } from '@/api/card-walmart-order.ts';
 import {
  ApiCardInfoWalmartOrderListGetPageSizeEnum,
  KamiInternalModelEntityV1CardRedeemAccountGroup,
@@ -203,7 +214,8 @@ const basePagination: Pagination = {
 const state = reactive({
  orderHistoryModalVisible: false,
  selectedOrderNo: '',
-  showConfig: false
+  showConfig: false,
+  activeTableKey: 0
 });
 const pagination = reactive({
  ...basePagination
@@ -315,15 +327,15 @@ const fetchData = async (
  setLoading(true);
  try {
    const res = await apiClient.apiCardInfoWalmartOrderListGet(
-      params.current,
-      params.pageSize as ApiCardInfoWalmartOrderListGetPageSizeEnum,
-      params.giftCardPwd,
-      params.merchantId,
-      params.attach,
-      params.accountNickName,
-      params.groupId,
-      params.cookie,
-      params.dateRange
+      pagination.current,
+      pagination.pageSize as ApiCardInfoWalmartOrderListGetPageSizeEnum,
+      formModel.value.giftCardPwd,
+      formModel.value.merchantId,
+      formModel.value.attach,
+      formModel.value.accountNickName,
+      formModel.value.groupId,
+      formModel.value.accountCk,
+      formModel.value.dateRange
    );
    renderData.value = res.data.list;
    pagination.current = params.current;