feat: add web application

2026-10-10 20:55:59 +08:00
parent 3eb5d78875
commit 50fcfd2d3d
571 changed files with 73992 additions and 135 deletions
@@ -0,0 +1,158 @@
+<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 } 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: '删除',
+            auth: ['/product/delete'],
+            onClick: () => remove(row),
+          },
+          {
+            label: row.isRecommended === 1 ? '不推荐' : '推荐',
+            auth: ['/product/recommend'],
+            onClick: () => recommend(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 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>