guilixu-admin/src/views/shop/shopGoodsBrowse/index.vue

<template>
  <a-card :bordered="false" :body-style="{ padding: '16px' }">
    <ele-pro-table
      ref="tableRef"
      row-key="id"
      :columns="columns"
      :datasource="datasource"
      tool-class="ele-toolbar-form"
      class="shop-goods-browse-table"
    >
      <template #toolbar>
        <search @search="reload" />
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'goodsImage'">
          <a-image
            v-if="record.goodsImage"
            :src="getCompressedImageUrl(record.goodsImage)"
            :width="50"
            :height="50"
            style="border-radius: 4px; object-fit: cover"
          />
          <span v-else class="ele-text-placeholder">无图</span>
        </template>
        <template v-if="column.key === 'browseSource'">
          <a-tag v-if="record.browseSource === 'detail'" color="blue">商品详情</a-tag>
          <a-tag v-else-if="record.browseSource === 'home'" color="green">首页</a-tag>
          <a-tag v-else-if="record.browseSource === 'category'" color="cyan">分类</a-tag>
          <a-tag v-else-if="record.browseSource === 'search'" color="orange">搜索</a-tag>
          <a-tag v-else-if="record.browseSource === 'share'" color="purple">分享</a-tag>
          <span v-else>{{ record.browseSource || '-' }}</span>
        </template>
        <template v-if="column.key === 'visitCount'">
          <a-tag color="red">{{ record.visitCount || 1 }}</a-tag>
        </template>
        <template v-if="column.key === 'lastVisitTime'">
          {{ toDateString(record.lastVisitTime, 'yyyy-MM-dd HH:mm') }}
        </template>
        <template v-if="column.key === 'createTime'">
          {{ toDateString(record.createTime, 'yyyy-MM-dd HH:mm') }}
        </template>
        <template v-if="column.key === 'action'">
          <a-popconfirm
            title="确定要删除此浏览记录吗？"
            @confirm="remove(record)"
          >
            <a class="ele-text-danger">删除</a>
          </a-popconfirm>
        </template>
      </template>
    </ele-pro-table>
  </a-card>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { message } from 'ant-design-vue';
  import type { EleProTable } from 'ele-admin-pro';
  import { toDateString } from 'ele-admin-pro';
  import { getCompressedImageUrl } from '@/utils/image';
  import type {
    DatasourceFunction,
    ColumnItem
  } from 'ele-admin-pro/es/ele-pro-table/types';
  import Search from './components/search.vue';
  import {
    pageShopGoodsBrowse,
    removeShopGoodsBrowse
  } from '@/api/shop/shopGoodsBrowse';
  import type {
    ShopGoodsBrowse,
    ShopGoodsBrowseParam
  } from '@/api/shop/shopGoodsBrowse/model';

  // 表格实例
  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);

  // 表格数据源
  const datasource: DatasourceFunction = ({
    page,
    limit,
    where,
    orders
  }) => {
    return pageShopGoodsBrowse({
      ...where,
      ...orders,
      page,
      limit
    });
  };

  // 表格列配置
  const columns = ref<ColumnItem[]>([
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      align: 'center',
      width: 70
    },
    {
      title: '用户ID',
      dataIndex: 'userId',
      key: 'userId',
      align: 'center',
      width: 90
    },
    {
      title: '商品图片',
      key: 'goodsImage',
      align: 'center',
      width: 80
    },
    {
      title: '商品名称',
      dataIndex: 'goodsName',
      key: 'goodsName',
      ellipsis: true
    },
    {
      title: '商城价',
      dataIndex: 'price',
      key: 'price',
      align: 'center',
      width: 100,
      customRender: ({ text }) => (text ? `¥${text}` : '-')
    },
    {
      title: '浏览次数',
      dataIndex: 'visitCount',
      key: 'visitCount',
      align: 'center',
      width: 90,
      sorter: true
    },
    {
      title: '浏览来源',
      dataIndex: 'browseSource',
      key: 'browseSource',
      align: 'center',
      width: 100
    },
    {
      title: '最后浏览时间',
      dataIndex: 'lastVisitTime',
      key: 'lastVisitTime',
      align: 'center',
      width: 160,
      sorter: true
    },
    {
      title: '首次浏览',
      dataIndex: 'createTime',
      key: 'createTime',
      align: 'center',
      width: 160
    },
    {
      title: '操作',
      key: 'action',
      width: 100,
      fixed: 'right',
      align: 'center',
      hideInSetting: true
    }
  ]);

  /* 搜索 */
  const reload = (where?: ShopGoodsBrowseParam) => {
    tableRef?.value?.reload({ where: where });
  };

  /* 删除单条 */
  const remove = (row: ShopGoodsBrowse) => {
    const hide = message.loading('请求中..', 0);
    removeShopGoodsBrowse(row.id)
      .then((msg) => {
        hide();
        message.success(msg);
        reload();
      })
      .catch((e) => {
        hide();
        message.error(e.message);
      });
  };
</script>

<script lang="ts">
  export default {
    name: 'ShopGoodsBrowse'
  };
</script>

<style lang="less" scoped></style>