city-gather-admin/src/views/djk-manage/activity/index.vue

<script setup lang="tsx">
import { NButton, NImage, NSwitch } from 'naive-ui';
// import dayjs from 'dayjs';
import { router } from '@/router';
import {
  // fetchGetAllChannelList,
  fetchActivityList,
  fetchDelActivity
} from '@/service/api/djk-manage/activity';
import { useTable } from '@/components/zt/Table/hooks/useTable';

// const TypeName = ['企业用户', 'B端用户', 'C端用户'];
// const statusList = ['上架', '下架'];
const columns: NaiveUI.TableColumn<Api.goods.ShopSku>[] = [
  {
    key: 'activityImg',
    title: '活动封面',
    align: 'center',
    width: 120,
    render: (row: any) => {
      return <NImage src={row.activityImg} class={'h90px w90px'}></NImage>;
    }
  },
  {
    key: 'activityName',
    title: '活动名称',
    align: 'center',
    width: 100,
    ellipsis: {
      tooltip: true
    }
  },
  {
    key: 'activityType',
    title: '活动类型',
    align: 'center',
    width: 120,
    ellipsis: {
      tooltip: true
    }
  },
  {
    key: 'productAName',
    title: '商品A',
    align: 'center',
    width: 120,
    ellipsis: {
      tooltip: true
    }
  },
  {
    key: 'productBName',
    title: '商品B',
    align: 'center',
    width: 120,
    ellipsis: {
      tooltip: true
    }
  },

  {
    key: 'sales',
    title: '活动时间',
    align: 'center',
    width: 120,
    ellipsis: {
      tooltip: true
    },
    render: (row: any) => {
      return `${row.activityStartTime} ~ ${row.activityEndTime}`;
    }
  },
  {
    key: 'activityStatus',
    title: '活动状态',
    align: 'center',
    width: 120,
    ellipsis: {
      tooltip: true
    },
    render: (row: any) => {
      let status = '';
      switch (row.activityStatus) {
        case 1:
          status = '未开始';
          break;
        case 2:
          status = '进行中';
          break;
        case 3:
          status = '已结束';
          break;
        default:
          status = '未知状态';
          break;
      }
      return status;
    }
  },
  {
    key: 'price',
    title: '领取/库存',
    align: 'center',
    width: 120,
    ellipsis: {
      tooltip: true
    },
    render: (row: any) => {
      return `${row.quantityClaimed}/${row.inventory}`;
    }
  },
  {
    key: 'shelfStatus',
    title: '状态',
    align: 'center',
    width: 120,
    render: (row: any) => {
      return <NSwitch uncheckedValue={0} checkedValue={1} value={row.shelfStatus} disabled></NSwitch>;
    }
  }
];

const [registerTable, { refresh }] = useTable({
  searchFormConfig: {
    schemas: [
      {
        label: '活动名称',
        component: 'NInput',
        field: 'activityName'
      },
      {
        label: '状态',
        field: 'activityStatus',
        component: 'NSelect',
        componentProps: {
          options: [
            {
              label: '未开始',
              value: 1
            },
            {
              label: '进行中',
              value: 2
            },
            {
              label: '已结束',
              value: 3
            }
          ]
        }
      }
    ],
    inline: false,
    size: 'small',
    labelPlacement: 'left',
    isFull: false
  },
  tableConfig: {
    opWdith: 160,
    keyField: 'skuId',
    title: '活动列表',
    showAddButton: true,
    scrollX: 1800,
    fieldMapToTime: [
      ['price', ['minPrice', 'maxPrice']],
      ['createTime', ['startTime', 'endTime']]
    ]
  }
});

function handleAdd() {
  router.push({
    path: '/djk-manage/edit-activity'
  });
}
function handleDetail(row: any) {
  router.push({
    path: '/djk-manage/edit-activity',
    query: {
      id: row.id,
      mode: 'detail'
    }
  });
}
function handleEdit(row: any) {
  console.log('edit', row);
  router.push({
    path: '/djk-manage/edit-activity',
    query: {
      id: row.id,
      mode: 'edit'
    }
  });
}

function handleDelete(row: any) {
  window.$dialog?.info({
    title: '提示',
    content: `你确定要删除吗？`,
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: async () => {
      const { error } = await fetchDelActivity(row.id as string);
      if (!error) {
        refresh();
      }
    }
  });
}
</script>

<template>
  <LayoutTable>
    <ZTable :columns="columns" :api="fetchActivityList" @add="handleAdd" @register="registerTable">
      <template #op="{ row }">
        <NSpace>
          <NButton size="small" @click="handleDetail(row)">商品详情</NButton>
          <NButton size="small" @click="handleEdit(row)">编辑</NButton>
          <NButton size="small" @click="handleDelete(row)">删除</NButton>
        </NSpace>
      </template>
    </ZTable>
  </LayoutTable>
</template>

<style scoped></style>