olons_admin/web/src/views/product-task/product/index.vue

<template>
  <div>
    <n-card :bordered="false" class="proCard">
      <BasicForm ref="searchRef" @register="register" @submit="reload" @keyup.enter="reload" />
      <BasicTable
        ref="tableRef"
        openChecked
        :columns="columns"
        :request="loadTable"
        :row-key="(row) => row.id"
        :action-column="actionColumn"
        :scroll-x="914"
        :pagination="pagination"
        :checked-row-keys="checkedIds"
        @update:checked-row-keys="onCheckedRow"
      >
        <template #tableTitle>
          <n-button
            v-if="hasPermission(['/product/delete'])"
            type="error"
            class="min-left-space"
            @click="batchRemove"
          >
            删除
          </n-button>
          <n-button
            v-if="hasPermission(['/product/edit'])"
            type="primary"
            class="min-left-space"
            @click="editRef.open()"
          >
            添加
          </n-button>
        </template>
      </BasicTable>
    </n-card>
    <Edit ref="editRef" @reload="reload" />
  </div>
</template>

<script setup lang="ts">
  import { h, onMounted, reactive, ref } from 'vue';
  import { useDialog, useMessage } from 'naive-ui';
  import { BasicForm, useForm } from '@/components/Form';
  import { BasicTable, TableAction } from '@/components/Table';
  import { usePermission } from '@/hooks/web/usePermission';
  import { ProductDelete, ProductList, ProductRecommend, ProductStatus } from '@/api/productTask';
  import { columns, loadOptions, schemas } from './model';
  import Edit from './edit.vue';

  const { hasPermission } = usePermission();
  const dialog = useDialog();
  const message = useMessage();
  const searchRef = ref();
  const tableRef = ref();
  const editRef = ref();
  const checkedIds = ref<number[]>([]);
  const pagination = { pageSize: 30, pageSizes: [10, 20, 30, 40, 50, 60, 70, 80, 90] };

  const [register] = useForm({
    gridProps: { cols: 3 },
    labelWidth: 80,
    schemas,
    showResetButton: false,
    showAdvancedButton: false,
  });

  const loadTable = (params) => ProductList({ ...searchRef.value?.formModel, ...params });

  const actionColumn = reactive({
    width: 180,
    title: '操作',
    key: 'action',
    fixed: 'right',
    render: (row) =>
      h(TableAction as any, {
        style: 'button',
        actions: [
          {
            label: '编辑',
            auth: ['/product/edit'],
            onClick: () => editRef.value.open(row),
          },
          {
            label: row.publishStatus === 3 ? '下架' : '发布',
            type: row.publishStatus === 3 ? 'warning' : 'success',
            auth: ['/product/status'],
            onClick: () => changeStatus(row),
          },
          {
            label: row.isRecommended === 1 ? '不推荐' : '推荐',
            auth: ['/product/recommend'],
            onClick: () => recommend(row),
          },
          {
            label: '删除',
            auth: ['/product/delete'],
            onClick: () => remove(row),
          },
        ],
      }),
  });

  function onCheckedRow(rowKeys: number[]) {
    checkedIds.value = rowKeys;
  }

  function reload() {
    tableRef.value?.reload();
  }

  async function recommend(row) {
    const next = row.isRecommended === 1 ? 2 : 1;
    await ProductRecommend({ id: row.id, version: row.version, isRecommended: next });
    message.success(next === 1 ? '推荐成功' : '已取消推荐');
    reload();
  }

  function changeStatus(row) {
    const publishing = row.publishStatus !== 3;
    dialog.warning({
      title: publishing ? '发布商品' : '下架商品',
      content: publishing
        ? `确定发布商品“${row.name}”吗？发布后可用于订单匹配。`
        : `确定下架商品“${row.name}”吗？下架后将不能用于新订单匹配。`,
      positiveText: publishing ? '确认发布' : '确认下架',
      negativeText: '取消',
      onPositiveClick: async () => {
        await ProductStatus({
          id: row.id,
          version: row.version,
          publishStatus: publishing ? 3 : 4,
        });
        message.success(publishing ? '商品已发布' : '商品已下架');
        reload();
      },
    });
  }

  function remove(row) {
    dialog.warning({
      title: '警告',
      content: row.referenced ? '该商品已被订单引用，只允许下架，不能删除。' : '你确定要删除？',
      positiveText: '确定',
      negativeText: '取消',
      positiveButtonProps: { disabled: row.referenced },
      onPositiveClick: async () => {
        await ProductDelete({ id: row.id });
        message.success('删除成功');
        reload();
      },
    });
  }

  function batchRemove() {
    if (checkedIds.value.length < 1) {
      message.error('请至少选择一项要删除的数据');
      return;
    }
    dialog.warning({
      title: '警告',
      content: '你确定要删除选中的商品？已被订单引用的商品不会被删除。',
      positiveText: '确定',
      negativeText: '取消',
      onPositiveClick: async () => {
        let successCount = 0;
        let failedCount = 0;
        for (const id of checkedIds.value) {
          try {
            await ProductDelete({ id });
            successCount++;
          } catch (_error) {
            failedCount++;
          }
        }
        checkedIds.value = [];
        if (successCount > 0) message.success(`成功删除 ${successCount} 个商品`);
        if (failedCount > 0) message.warning(`${failedCount} 个商品未删除，请检查是否已被订单引用`);
        reload();
      },
    });
  }

  onMounted(loadOptions);
</script>