【招生用户端】 新增# 子账号管理：对接设置组长接口

src/views/account_center/sub_account/components/organization/groupLeader-dialog.vue

@@ -3,20 +3,20 @@
         <el-space direction="vertical" alignment="normal">
             <el-form :model="searchForm" ref="userFormRef" :inline="true" label-width="auto" @submit.native.prevent>
                 <el-form-item label="账号名称">
-                    <el-input class="ls-input" v-model="searchForm.accountName" placeholder="请输入账号名称" clearable></el-input>
+                    <el-input class="ls-input" v-model="searchForm.username" placeholder="请输入账号名称" clearable></el-input>
                 </el-form-item>
                 <el-form-item>
-                    <el-button type="primary">搜索</el-button>
+                    <el-button type="primary" @click="handleSearch">搜索</el-button>
-                    <el-button>重置</el-button>
+                    <el-button @click="handleReset">重置</el-button>
                 </el-form-item>
             </el-form>
             <ProTable ref="proTableRef" :columns="columns" :tableData="tableData" :loading="loading" :maxHeight="530">
                 <template #radio="{ row }">
                     <el-radio v-model="radio" :label="row.id">&nbsp;</el-radio>
                 </template>
-                <template #accountName="{ row }">
+                <template #username="{ row }">
                     <el-space>
-                        <span>{{ row.accountName }}</span>
+                        <span>{{ row.username }}</span>
                         <span
                             v-if="isGroupLeader(row.groupLeader)"
                             class="px-[6px] text-green border border-solid border-green rounded-[4px] text-center text-xs"
@@ -29,79 +29,100 @@
                     <el-switch v-model="row.accountStatus" disabled :active-value="1" :inactive-value="0" />
                 </template>
             </ProTable>
-            <!-- <pagination v-model="pager" @change="getLists" layout="total, prev, pager, next, jumper" class="mb-[10px]" /> -->
+            <div class="flex justify-end mt-[10px]">
+                <pagination v-model="pager" @change="fetchAccountList" layout="total, prev, pager, next, jumper" class="mb-[10px]" />
+            </div>
         </el-space>
     </ProDialog>
 </template>
 
 <script setup lang="ts">
+import { subAccountEdit, subAccountList } from '@/api/account_center/sub_account'
 import ProDialog, { type IParams } from '@/components/ProDialog/index.vue'
-const proDialogRef = ref<InstanceType<typeof ProDialog>>()
+import { groupLeaderEnum } from '@/enums'
+import feedback from '@/utils/feedback'
 
 const emit = defineEmits(['refreshList'])
-const searchForm = ref({
-    accountName: ''
-})
 
+const proDialogRef = ref<InstanceType<typeof ProDialog>>()
+const searchForm = ref({
+    username: ''
+})
+const pager = ref({
+    page: 1,
+    size: 10,
+    count: 0
+})
 const loading = ref(false)
 const proTableRef = ref()
 const tableData = ref<any[]>([])
 const columns = reactive([
     { prop: 'radio', label: '单选', width: 70 },
-    { prop: 'accountName', label: '账号名称' },
+    { prop: 'username', label: '账号名称' },
     { prop: 'mobile', label: '联系电话' },
-    { prop: 'organization', label: '所属组织' },
+    { prop: 'organizationName', label: '所属组织' },
-    { prop: 'position', label: '岗位' },
+    { prop: 'postName', label: '岗位' },
-    { prop: 'accountStatus', label: '账号状态' }
+    { prop: 'status', label: '账号状态' }
 ])
 const radio = ref()
-const isGroupLeader = computed(() => (groupLeader: number) => groupLeader == 1)
+const organizationId = ref()
+const selectedAccount = ref()
+const isGroupLeader = computed(() => (groupLeader: number) => groupLeader == groupLeaderEnum.YES)
 
-watch(
+const fetchAccountList = async () => {
-    () => proDialogRef.value?.dialogVisible,
+    loading.value = true
-    val => {
+    try {
-        if (val) {
+        const params = {
-            loading.value = true
+            organizationId: organizationId.value,
-            setTimeout(() => {
+            ...searchForm.value
-                tableData.value = [
-                    {
-                        id: 1,
-                        accountName: '张三',
-                        mobile: '18138952909',
-                        organization: '广州团队-A组',
-                        position: '电销老师',
-                        accountStatus: 1,
-                        groupLeader: 1
-                    },
-                    {
-                        id: 2,
-                        accountName: '李四',
-                        mobile: '18138952909',
-                        organization: '广州团队-A组',
-                        position: '电销老师',
-                        accountStatus: 1,
-                        groupLeader: 0
-                    }
-                ]
-                loading.value = false
-                // 如果已设置组长，则需要默认回显
-                if (tableData.value.length > 0) {
-                    radio.value = tableData.value.find(item => item.groupLeader == 1)?.id
-                }
-            }, 500)
         }
-    }
+        const result = await subAccountList(params)
-)
+        tableData.value = result
+        // 如果已设置组长，则需要默认回显
+        if (tableData.value.length > 0) {
+            radio.value = tableData.value.find(item => item.groupLeader == groupLeaderEnum.YES)?.id
+        }
+    } catch (error) {}
+    loading.value = false
+}
+const handleSearch = () => {
+    fetchAccountList()
+}
+const handleReset = () => {
+    searchForm.value.username = ''
+    fetchAccountList()
+}
 const openDialog = (params: IParams) => {
+    const { id } = params.data
+    organizationId.value = id
+    fetchAccountList()
     proDialogRef.value?.openDialog(params)
 }
 const handleCancel = (callback: () => void) => {
     callback()
 }
-const handleConfirm = (callback: () => void) => {
+const handleConfirm = async (callback: () => void) => {
-    callback()
+    const { id, groupLeader } = selectedAccount.value
-    emit('refreshList')
+    try {
+        const params = {
+            id,
+            groupLeader: isGroupLeader.value(groupLeader) ? groupLeaderEnum.NO : groupLeaderEnum.YES
+        }
+        await subAccountEdit(params)
+        feedback.msgSuccess('设置成功')
+        callback()
+        emit('refreshList')
+    } catch (error) {}
 }
+
+watch(
+    () => radio.value,
+    newVal => {
+        if (newVal) {
+            selectedAccount.value = tableData.value.find(item => item.id == newVal)
+        }
+    }
+)
 defineExpose({
     openDialog
 })

src/views/account_center/sub_account/modules/account-list.vue

@@ -51,6 +51,9 @@
                 <el-button link type="primary" @click="handleDelete(row)">删除</el-button>
             </template>
         </ProTable>
+        <div class="flex justify-end bg-white mt-[20px]">
+            <pagination v-model="pager" @change="fetchTableList" />
+        </div>
     </div>
     <account-dialog ref="accountDialogRef" @confirm-after="confirmAfter" />
 </template>
@@ -73,6 +76,11 @@ const props = defineProps({
 })
 const emit = defineEmits(['refreshSubAccountNumber'])
 
+const pager = ref({
+    page: 1,
+    size: 10,
+    count: 0
+})
 const selectKey = ref('username')
 const searchOptions = shallowRef([
     { field: 'username', label: '账号名称' },
@@ -127,7 +135,7 @@ const setGroupLeader = async row => {
     try {
         const params = {
             id,
-            groupLeader: isGroupLeader.value(groupLeader) ? groupLeaderEnum.YES : groupLeaderEnum.NO
+            groupLeader: isGroupLeader.value(groupLeader) ? groupLeaderEnum.NO : groupLeaderEnum.YES
         }
         await subAccountEdit(params)
         feedback.msgSuccess('设置成功')

src/views/clue/index.vue

@@ -6,6 +6,9 @@
                 <el-button type="primary" link @click="handleDetail(row.id)">详情</el-button>
             </template>
         </clue-list>
+        <div class="flex justify-end bg-white pb-[20px]">
+            <pagination v-model="pager" @change="getLists" />
+        </div>
     </div>
     <clue-detail ref="clueDetailRef" />
 </template>