trade: 分销业务后台功能：推广用户列表

owen118z · owen118z · commit 2aa372d8f431 · 2023-09-10T22:32:38.000+08:00
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
@@ -299,3 +299,20 @@ export const BrokerageEnabledConditionEnum = {
     name: '指定分销'
   }
 }
+/**
+ * 分销用户类型枚举
+ */
+export const BrokerageUserTypeEnum = {
+  ALL: {
+    type: 0,
+    name: '全部'
+  },
+  FIRST: {
+    type: 1,
+    name: '一级推广人'
+  },
+  SECOND: {
+    type: 2,
+    name: '二级推广人'
+  }
+}
diff --git a/src/views/mall/trade/brokerage/user/BrokerageUserListDialog.vue b/src/views/mall/trade/brokerage/user/BrokerageUserListDialog.vue
@@ -0,0 +1,145 @@
+<template>
+  <Dialog v-model="dialogVisible" title="推广人列表" width="75%">
+    <ContentWrap>
+      <!-- 搜索工作栏 -->
+      <el-form
+        class="-mb-15px"
+        :model="queryParams"
+        ref="queryFormRef"
+        :inline="true"
+        label-width="85px"
+      >
+        <el-form-item label="用户类型" prop="userType">
+          <el-radio-group v-model="queryParams.userType" @change="handleQuery">
+            <el-radio-button
+              v-for="item in BrokerageUserTypeEnum"
+              :key="item.type"
+              :label="item.type"
+            >
+              {{ item.name }}
+            </el-radio-button>
+            <!--            <el-radio-button :label="0">全部</el-radio-button>-->
+            <!--            <el-radio-button :label="1">一级推广人</el-radio-button>-->
+            <!--            <el-radio-button :label="2">二级推广人</el-radio-button>-->
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="绑定时间" prop="bindUserTime">
+          <el-date-picker
+            v-model="queryParams.bindUserTime"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            type="daterange"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+            class="!w-240px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+          <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        </el-form-item>
+      </el-form>
+    </ContentWrap>
+
+    <!-- 列表 -->
+    <ContentWrap>
+      <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+        <el-table-column label="用户编号" align="center" prop="id" min-width="80px" />
+        <el-table-column label="头像" align="center" prop="avatar" width="70px">
+          <template #default="scope">
+            <el-avatar :src="scope.row.avatar" />
+          </template>
+        </el-table-column>
+        <el-table-column label="昵称" align="center" prop="nickname" min-width="80px" />
+        <el-table-column
+          label="推广人数（一级）"
+          align="center"
+          prop="brokerageUserCount"
+          min-width="110px"
+        />
+        <el-table-column
+          label="推广订单数量"
+          align="center"
+          prop="brokerageOrderCount"
+          min-width="110px"
+        />
+        <el-table-column label="推广资格" align="center" prop="brokerageEnabled" min-width="80px">
+          <template #default="scope">
+            <el-tag v-if="scope.row.brokerageEnabled">有</el-tag>
+            <el-tag v-else type="info">无</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="绑定时间"
+          align="center"
+          prop="bindUserTime"
+          :formatter="dateFormatter"
+          width="170px"
+        />
+      </el-table>
+      <!-- 分页 -->
+      <Pagination
+        :total="total"
+        v-model:page="queryParams.pageNo"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </ContentWrap>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { dateFormatter } from '@/utils/formatTime'
+import * as BrokerageUserApi from '@/api/mall/trade/brokerage/user'
+import { BrokerageUserTypeEnum } from '@/utils/constants'
+
+/** 推广人列表 */
+defineOptions({ name: 'BrokerageUserListDialog' })
+
+const message = useMessage() // 消息弹窗
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  bindUserId: null,
+  userType: BrokerageUserTypeEnum.ALL.type,
+  bindUserTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+
+/** 打开弹窗 */
+const dialogVisible = ref(false) // 弹窗的是否展示
+const open = async (bindUserId: number) => {
+  dialogVisible.value = true
+  queryParams.bindUserId = bindUserId
+  resetQuery()
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await BrokerageUserApi.getBrokerageUserPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields()
+  handleQuery()
+}
+</script>
diff --git a/src/views/mall/trade/brokerage/user/index.vue b/src/views/mall/trade/brokerage/user/index.vue
@@ -57,10 +57,10 @@
       </el-table-column>
       <el-table-column label="昵称" align="center" prop="nickname" min-width="80px" />
       <el-table-column
-        label="推广用户数量（一级）"
+        label="推广人数（一级）"
         align="center"
         prop="brokerageUserCount"
-        min-width="110px"
+        min-width="140px"
       />
       <el-table-column
         label="推广订单数量"
@@ -183,6 +183,7 @@
   </ContentWrap>
   <!-- 修改上级推广人表单 -->
   <UpdateBindUserForm ref="updateBindUserFormRef" @success="getList" />
+  <BrokerageUserListDialog ref="brokerageUserListDialogRef" />
 </template>
 
 <script setup lang="ts">
@@ -191,6 +192,7 @@ import * as BrokerageUserApi from '@/api/mall/trade/brokerage/user'
 import { checkPermi } from '@/utils/permission'
 import { fenToYuanFormat } from '@/utils/formatter'
 import UpdateBindUserForm from '@/views/mall/trade/brokerage/user/UpdateBindUserForm.vue'
+import BrokerageUserListDialog from '@/views/mall/trade/brokerage/user/BrokerageUserListDialog.vue'
 
 defineOptions({ name: 'TradeBrokerageUser' })
 
@@ -250,7 +252,10 @@ const handleCommand = (command: string, row: BrokerageUserApi.BrokerageUserVO) =
 }
 
 /** 打开推广人列表 */
-const openBrokerageUserTable = (id: number) => {}
+const brokerageUserListDialogRef = ref()
+const openBrokerageUserTable = (id: number) => {
+  brokerageUserListDialogRef.value.open(id)
+}
 
 /** 打开推广订单列表 */
 const openBrokerageOrderTable = (id: number) => {}
