xiaokuaisong-Web/CampusExpressDelivery/src/view/user/UserList.vue

<template>
  <a-card>
    <!-- 搜索框 -->
    <div class="search-box">
      <a-form layout="inline">
        <a-space>
          <a-form-item label="身份">
            <a-select
                style="width: 200px;"
                placeholder="默认查询全部用户"
                allowClear
                v-model:value="searchParams.userRole"
                @change="handleChange"
            >
              <a-select-option value="user">普通用户</a-select-option>
              <a-select-option value="business">商家用户</a-select-option>
              <a-select-option value="errand">快送员</a-select-option>
              <a-select-option value="admin">管理员</a-select-option>
              <a-select-option value="ban">已封禁</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="用户昵称">
            <a-input-search
                style="width: 300px"
                placeholder="请输入用户昵称"
                enter-button
                allow-clear
                @search="onSearch"
            />
          </a-form-item>
          <a-form-item label="手机号">
            <a-input-search
                style="width: 300px"
                placeholder="请输入手机号"
                enter-button
                allow-clear
                @search="onSearchPhone"
            />
          </a-form-item>
        </a-space>
      </a-form>
    </div>
    <!-- 数据展示部分 -->
    <a-table
        :scroll="{ x: 1500, y: 1000 }"
        :data-source="tableData"
        :columns="columns"
        :pagination=false
        :loading="loading"
        bordered
        class="data-box"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'avatarUrl'">
          <a-avatar :src="record.avatarUrl"/>
        </template>
        <template v-if="column.key === 'userRole'">
          <div v-if="record.userRole === 'boss'">
            <a-tag color="purple">Boss</a-tag>
          </div>
          <div v-else-if="record.userRole === 'admin'">
            <a-tag color="blue">管理员</a-tag>
          </div>
          <div v-else-if="record.userRole === 'user'">
            <a-tag color="green">普通用户</a-tag>
          </div>
          <div v-else-if="record.userRole === 'errand'">
            <a-tag color="yellow">快送员</a-tag>
          </div>
          <div v-else-if="record.userRole === 'business'">
            <a-tag color="orange">商家</a-tag>
          </div>
          <div v-else-if="record.userRole === 'ban'">
            <a-tag color="red">已封禁</a-tag>
          </div>
        </template>
        <template v-if="column.key === '操作'">
          <a-space>
            <a-button :disabled="validRole(record.userRole)"
                      size="small" type="link" danger @click="doBan(record.id, record.userRole === 'user')">
              {{ record.userRole === 'ban' ? '解封' : '封禁' }}
            </a-button>
          </a-space>
        </template>
      </template>
    </a-table>
    <!-- 分页部分 -->
    <div class="pagination">
      <a-pagination v-model:current="searchParams.current"
                    v-model:pageSize="searchParams.pageSize"
                    show-quick-jumper
                    show-size-changer
                    :show-total="(total: any) => `共 ${total} 人`"
                    :total="total"
                    @change="onChange"
      />
    </div>
  </a-card>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import myAxios from "../../api/myAxios.ts";
import {message} from "ant-design-vue";
import {formatTime} from "../../utils/TableConfig.ts";


const tableData: any = ref([]);
const loading = ref(false)
// 分页
const total: any = ref(0);
// 请求参数
const searchParams: any = ref({
  current: 1,
  pageSize: 10,
  userRole: null,
})

const columns: any = [
  {
    title: '序号',
    width: 40,
    fixed: 'left',
    align: 'center',
    customRender: ({index}: any) => {
      return `${(searchParams.value.current - 1) * searchParams.value.pageSize + index + 1}`;
    }
  },
  {title: '用户昵称', dataIndex: 'userAccount', width: 50, key: 'userAccount', fixed: 'left', align: 'center'},
  {title: '头像', dataIndex: 'avatarUrl', key: 'avatarUrl', width: 30, align: 'center'},
  {title: '身份', dataIndex: 'userRole', key: 'userRole', width: 50, align: 'center'},
  {title: '手机号', dataIndex: 'phone', key: 'phone', width: 50, align: 'center'},
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    width: 100,
    align: 'center',
    customRender: (row: any) => {
      return formatTime(row)
    }
  },
  {title: '操作', key: '操作', fixed: 'right', width: 30, align: 'center'},
];

/**
 * 页面加载时，请求数据
 */
onMounted(() => {
  getUserList();
})

/**
 * 获取用户数据
 */
const getUserList = async () => {
  loading.value = true;
  const res: any = await myAxios.post("/user/list/page", {...searchParams.value})
  if (res.code === 0 && res.data) {
    console.log(res)
    tableData.value = res.data.records;
    total.value = parseInt(res.data.total);
    loading.value = false;
  } else {
    message.error(`获取数据失败：${res.message}`);
  }
}

/**
 * 操作
 */
const doBan = async (id: string, isBan: boolean) => {
  const res: any = await myAxios.post("/user/update", {id: id, userRole: isBan ? 'ban' : 'user'})
  if (res.code === 0 && res.data) {
    message.success(`操作成功`);
    await getUserList();
  } else {
    message.error(`封禁用户失败：${res.message}`);
  }
}

/**
 * 选择用户身份
 */
const handleChange = (userRole: string) => {
  searchParams.value.userRole = userRole;
  searchParams.value.current = 1;
  getUserList();
};

/**
 * 搜索功能
 */
const onSearch = (data: string) => {
  searchParams.value.userAccount = data;
  searchParams.value.current = 1;
  getUserList();
}
const onSearchPhone = (data: string) => {
  searchParams.value.phone = data;
  searchParams.value.current = 1;
  getUserList();
}

/**
 * 分页
 */
const onChange = (pageNumber: number) => {
  searchParams.value.current = pageNumber;
  getUserList();
}

// 判断用户权限
const validRole = (userRole: string) => {
  return !(userRole === 'user' || userRole === 'ban');
}

</script>

<style scoped>

</style>