BoundLink-Plate-UI/src/views/customer-manage/service-provider-customer-review/index.vue

<template>
  <BsPageWrapper>
    <bs-table v-bind="tableOptions">
      <template #toolbarLeft>
        <a-space> 待审核客户 3 ｜审核中客户 23 </a-space>
      </template>
    </bs-table>
  </BsPageWrapper>
</template>
<script setup>
import { ref, reactive } from 'vue';
import BsTable, { useBsTable } from '/@/components/BsUi/Table/index.js';
import { DISPLAY_STATE } from '/@/components/BsUi/constant.js';
import { useRouter } from 'vue-router';
const router = useRouter();
const generateReviewCustomerData = () => {
  // 基础数据配置
  const statuses = ['待审核', '审核中', '已驳回', '已通过'];
  const customerNames = ['阿里巴巴', '腾讯科技', '百度在线', '京东集团', '字节跳动'];
  const regions = ['华东', '华北', '华南', '华中', '西南'];
  const customerTypes = ['企业客户', '政府客户', '教育客户', '金融客户'];
  const marketers = ['张经理', '李主管', '王总监', '赵专员'];
  const addresses = [
    '杭州市余杭区文一西路969号',
    '深圳市南山区科技中一路腾讯大厦',
    '北京市海淀区上地十街10号',
    '北京市亦庄经济开发区科创十一街18号'
  ];

  // 生成20条数据
  const data = [];
  for (let i = 0; i < 8; i++) {
    const isPending = Math.random() > 0.7; // 30%待审核
    const status = isPending ? '待审核' :
      Math.random() > 0.5 ? '审核中' :
        Math.random() > 0.5 ? '已驳回' : '已通过';

    data.push({
      status: status,
      customerName: customerNames[Math.floor(Math.random() * customerNames.length)],
      customerId: `CUST${20230000 + i}`,
      address: addresses[Math.floor(Math.random() * addresses.length)],
      region: regions[Math.floor(Math.random() * regions.length)],
      customerType: customerTypes[Math.floor(Math.random() * customerTypes.length)],
      operateTime: new Date(Date.now() - Math.floor(Math.random() * 7 * 24 * 60 * 60 * 1000))
        .toISOString().replace('T', ' ').substring(0, 19),
      submitCycle: `${Math.floor(Math.random() * 5) + 1}天`, // 1-5天
      marketer: marketers[Math.floor(Math.random() * marketers.length)],
      id: `REV${10000 + i}`
    });
  }

  return data;
};
const {
  tableOptions,
  setTablePropsValue: setValue,
  getTablePropsValue: getValue,
} = useBsTable({
  tableOptions: {
    // url: '/supports/customer/queryPage',
    gridOptions: {
      loading: false,
      columns: [
        {
          type: 'seq',
          width: 80,
        },
        {
          field: 'status',
          title: '状态',
          width: 200,
        },
        {
          field: 'customerName',
          title: '客户名称',
          width: 200,
        },
        {
          field: 'customerId',
          title: '客户ID',
          width: 200,
        },
        {
          field: 'address',
          title: '客户地址',
          width: 200,
        },
        {
          field: 'region',
          title: '归属区域',
          width: 200,
        },
        {
          field: 'customerType',
          title: '客户类型',
          width: 200,
        },
        {
          field: 'operateTime',
          title: '操作时间',
          width: 200,
        },
        {
          field: 'submitCycle',
          title: '提交周期',
          width: 200,
        },
        {
          field: 'marketer',
          title: '归属营销人',
          width: 200,
        },
        {
          // fixed: 'right',
          cellRender: {
            name: 'CellOption',
            extraProps: {
              buttons: [
                {
                  title: '去审核',
                  code: 'edit',
                  display: ({ row }) => {
                    return DISPLAY_STATE.VISIBLE;
                  },
                  disabled({ row }) {
                    return false;
                  },
                  onClick({ row }) { },
                  extraProps: {},
                },
                {
                  title: '查看详情',
                  code: 'view',
                  display: ({ row }) => {
                    return DISPLAY_STATE.VISIBLE;
                  },
                  disabled({ row }) {
                    return false;
                  },
                  onClick({ row }) {
                    router.push({
                      path: '/customer-manage/customer-detail',
                      query: {
                        id: row.id,
                      },
                    });
                  },
                  extraProps: {},
                },
              ],
            },
          },
        },
      ],
      data:generateReviewCustomerData(),
    },
    searchConfig: {
      enabled: true,
      fieldSpan: 4,
      fields: [
        {
          field: 'name',
          label: '客户名称',
          component: 'a-input',
          componentProps: {
            placeholder: '请输入客户名称',
          },
        },
        {
          field: 'name',
          label: '客户地址',
          component: 'a-input',
          componentProps: {
            placeholder: '请输入客户地址',
          },
        },
        {
          field: 'name',
          label: '客户类型',
          component: 'a-select',
          componentProps: {
            placeholder: '请输入客户类型',
          },
        },
      ],
      onSearch() {
        fetchTableData();
      },
      onReset() {
        fetchTableData();
      },
    },
    toolbarConfig: {
      onRefresh() {
        fetchTableData();
      },
    },
  },
});
</script>
<style lang="scss" scoped></style>