f

apps/web-antd/src/views/agent/agent-list/list.vue

@@ -6,21 +6,20 @@ import type {
 } from '#/adapter/vxe-table';
 import type { AgentApi } from '#/api/agent';
 
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
 
-import { Button, Card, Dropdown, Menu } from 'ant-design-vue';
+import { Button, Card, Dropdown, Form, Input, Menu, Modal, message } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getAgentList } from '#/api/agent';
+import { getAgentList, updateAgentMobile } from '#/api/agent';
 
 import { useColumns, useGridFormSchema } from './data';
 import CommissionModal from './modules/commission-modal.vue';
-import Form from './modules/form.vue';
+import FormDrawerContent from './modules/form.vue';
 import LinkModal from './modules/link-modal.vue';
-import MobileEditModal from './modules/mobile-edit-modal.vue';
 import OrderModal from './modules/order-modal.vue';
 import RebateModal from './modules/rebate-modal.vue';
 import UpgradeModal from './modules/upgrade-modal.vue';
@@ -31,7 +30,7 @@ const router = useRouter();
 
 // 表单抽屉
 const [FormDrawer, formDrawerApi] = useVbenDrawer({
-  connectedComponent: Form,
+  connectedComponent: FormDrawerContent,
   destroyOnClose: true,
 });
 
@@ -71,11 +70,48 @@ const [WithdrawalModalComponent, withdrawalModalApi] = useVbenModal({
   destroyOnClose: true,
 });
 
-// 修改手机号弹窗
+// 修改手机号：本页 Modal + 表单
-const [MobileEditModalComponent, mobileEditModalApi] = useVbenModal({
+const mobileEditVisible = ref(false);
-  connectedComponent: MobileEditModal,
+const mobileEditRow = ref<AgentApi.AgentListItem | null>(null);
-  destroyOnClose: true,
+const mobileEditNewMobile = ref('');
-});
+const mobileEditLoading = ref(false);
+
+function openMobileEdit(row: AgentApi.AgentListItem) {
+  mobileEditRow.value = row;
+  mobileEditNewMobile.value = row.mobile ?? '';
+  mobileEditVisible.value = true;
+}
+
+function closeMobileEdit() {
+  mobileEditVisible.value = false;
+  mobileEditRow.value = null;
+  mobileEditNewMobile.value = '';
+}
+
+async function submitMobileEdit() {
+  const row = mobileEditRow.value;
+  if (!row) return;
+  const mobile = mobileEditNewMobile.value?.trim();
+  if (!mobile) {
+    message.warning('请输入新手机号');
+    return;
+  }
+  if (!/^1[3-9]\d{9}$/.test(mobile)) {
+    message.warning('请输入正确的11位手机号');
+    return;
+  }
+  mobileEditLoading.value = true;
+  try {
+    await updateAgentMobile({ agent_id: String(row.id), mobile });
+    message.success('手机号修改成功');
+    closeMobileEdit();
+    onRefresh();
+  } catch {
+    message.error('手机号修改失败');
+  } finally {
+    mobileEditLoading.value = false;
+  }
+}
 
 // 表格配置
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -149,10 +185,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 // 更多操作菜单项
 const moreMenuItems = [
-  {
-    key: 'edit-mobile',
-    label: '修改手机号',
-  },
   {
     key: 'links',
     label: '推广链接',
@@ -199,10 +231,6 @@ function onActionClick(
       onViewCommission(e.row);
       break;
     }
-    case 'edit-mobile': {
-      onEditMobile(e.row);
-      break;
-    }
     case 'edit': {
       onEdit(e.row);
       break;
@@ -244,11 +272,6 @@ function onEdit(row: AgentApi.AgentListItem) {
   formDrawerApi.setData(row).open();
 }
 
-// 修改手机号
-function onEditMobile(row: AgentApi.AgentListItem) {
-  mobileEditModalApi.setData(row).open();
-}
-
 // 查看推广链接
 function onViewLinks(row: AgentApi.AgentListItem) {
   linkModalApi.setData({ agentId: row.id }).open();
@@ -289,7 +312,6 @@ function onRefresh() {
   <Page auto-content-height>
     <FormDrawer @success="onRefresh" />
     <LinkModalComponent />
-    <MobileEditModalComponent @success="onRefresh" />
     <CommissionModalComponent />
     <RebateModalComponent />
     <UpgradeModalComponent />
@@ -313,6 +335,9 @@ function onRefresh() {
           <Button type="link" @click="onActionClick({ code: 'view-sub-agent', row })">
             查看下级
           </Button>
+          <Button type="link" @click="openMobileEdit(row)">
+            修改手机号
+          </Button>
           <!-- <Button
             type="link"
             @click="onActionClick({ code: 'order-record', row })"
@@ -328,6 +353,38 @@ function onRefresh() {
         </div>
       </template>
     </Grid>
+
+    <!-- 修改手机号弹窗：直接表单 -->
+    <Modal
+      v-model:open="mobileEditVisible"
+      title="修改手机号"
+      width="420px"
+      :footer="null"
+      destroy-on-close
+      @cancel="closeMobileEdit"
+    >
+      <Form layout="vertical" class="pt-2">
+        <Form.Item label="当前手机号">
+          <Input :value="mobileEditRow?.mobile" disabled />
+        </Form.Item>
+        <Form.Item label="新手机号" required>
+          <Input
+            v-model:value="mobileEditNewMobile"
+            placeholder="请输入11位手机号"
+            :maxlength="11"
+            allow-clear
+          />
+        </Form.Item>
+        <Form.Item class="mb-0">
+          <div class="flex justify-end gap-2">
+            <Button @click="closeMobileEdit">取消</Button>
+            <Button type="primary" :loading="mobileEditLoading" @click="submitMobileEdit">
+              确定
+            </Button>
+          </div>
+        </Form.Item>
+      </Form>
+    </Modal>
   </Page>
 </template>