xiaokuaisong-Web/CampusExpressDelivery/src/view/errand/errandList.vue

<template>
  <a-card>
    <!-- 搜索框 -->
    <div class="search-box">
      <a-form layout="inline">
        <a-space>
          <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-select
                style="width: 200px;"
                placeholder="默认查询全部状态"
                allowClear
                v-model:value="searchParams.state"
                @change="handleChange"
            >
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="0">未审核</a-select-option>
              <a-select-option value="1">已审核</a-select-option>
            </a-select>
          </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 === 'errandAvatarUrl'">
          <a-avatar :src="record.errandAvatarUrl"/>
        </template>
        <template v-if="column.key === 'state'">
          <div v-if="record.state === 0">
            <a-tag color="orange">未审核</a-tag>
          </div>
          <div v-else-if="record.state === 1">
            <a-tag color="green">已审核</a-tag>
          </div>
          <div v-else-if="record.state === 2">
            <a-tag color="red">封禁</a-tag>
          </div>
        </template>
        <template v-if="column.key === '操作'">
          <a-space>
            <a-button v-if="record.state === 0" size="small" type="link" @click="toInfoPage(record.id)">审核</a-button>
            <a-button v-else size="small"
                      type="link"
                      style="color: rgba(255, 141, 26, 1);"
                      @click="toInfoPage(record.id)">查看
            </a-button>
            <a-button :disabled="record.state === 0" size="small" type="link" danger
                      @click="doBan(record.id, record.state === 1)">
              {{ record.state === 1 ? '禁用' : '启用' }}
            </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";
import { formatTime } from "../../utils/TableConfig";
import { message } from "ant-design-vue";
import router from "../../router";

const tableData: any = ref([]);
const loading = ref(false);
// 分页
const total: any = ref(0);
// 请求参数
const searchParams: any = ref({
  sortField: "createTime",
  sortOrder: "descend",
  current: 1,
  pageSize: 10,
  errandName: "",
  state: "", // 默认为空，表示查询所有状态
  errandPhone:""
});

const columns: any = [
  {
    title: '序号',
    width: 60,
    fixed: 'left',
    align: 'center',
    customRender: ({ index }: any) => {
      return `${(searchParams.value.current - 1) * searchParams.value.pageSize + index + 1}`;
    }
  },
  { title: '快送员名称', dataIndex: 'errandName', width: 100, fixed: 'left', align: 'center' },
  { title: '快送员头像', key: 'errandAvatarUrl', width: 50, align: 'center' },
  { title: '手机号', dataIndex: 'errandPhone', width: 150, align: 'center' },
  { title: '状态', key: 'state', width: 70, align: 'center' },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    width: 150,
    align: 'center',
    customRender: (row: any) => {
      return formatTime(row);
    }
  },
  { title: '操作', key: '操作', fixed: 'right', width: 100, align: 'center' },
];

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

/**
 * 获取快送员数据
 */
const getErrandList = async (current: number) => {
  searchParams.value.current = current;
  loading.value = true;
  const res: any = await myAxios.post("/errand/page", { ...searchParams.value });
  if (res.code === 0 && res.data) {
    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("/errand/update", { id: id, state: isBan ? 2 : 1 });
  if (res.code === 0 && res.data) {
    message.success(`操作成功`);
    await getErrandList(1);
  } else {
    message.error(`封禁商家失败：${res.message}`);
  }
};

/**
 * 搜索功能
 */
const onSearch = (errandName: string) => {
  searchParams.value.errandName = errandName;
  searchParams.value.current = 1;
  getErrandList(1);
};
/**
 * 搜索功能
 */
const onSearchPhone = (errandPhone: string) => {
  searchParams.value.errandPhone = errandPhone;
  searchParams.value.current = 1;
  getErrandList(1);
};
/**
 * 分页
 */
const onChange = (pageNumber: number) => {
  searchParams.value.current = pageNumber;
  getErrandList(pageNumber);
};

/**
 * 跳转到快送员信息
 */
const toInfoPage = (id: string) => {
  console.log(id); // 打印传递的ID值
  router.push({
    name: '快送员审核',
    // path: '/errandInfo',
    query: {
      id: String(id) // 确保ID值是字符串类型
    }
  });
};

/**
 * 当状态选择器值改变时触发
 */
const handleChange = () => {
  getErrandList(1);
};
</script>

<style scoped>
</style>