前端新增业务页面实战教程

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { Page } from '@vben/common-ui';
import { Button, Table, Space, Tag, Input, Select } from 'ant-design-vue';
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
import { useArticleList } from '#/api/composables/article';
import type { Article } from '@vben/api/generated/article/service/v1/article';

const router = useRouter();
const { loading, articleList, total, fetchList } = useArticleList();

// 搜索条件
const searchParams = ref({
  keyword: '',
  status: undefined as number | undefined,
  page: 1,
  page_size: 10,
});

// 表格列定义
const columns = [
  { title: 'ID', dataIndex: 'id', width: 80 },
  { title: '标题', dataIndex: 'title', ellipsis: true },
  { 
    title: '状态', 
    dataIndex: 'status',
    width: 100,
    customRender: ({ record }: { record: Article }) => {
      const statusMap: Record<number, { text: string; color: string }> = {
        0: { text: '草稿', color: 'default' },
        1: { text: '已发布', color: 'success' },
        2: { text: '已下架', color: 'error' },
      };
      const status = statusMap[record.status] || { text: '未知', color: 'default' };
      return <Tag color={status.color}>{status.text}</Tag>;
    },
  },
  { title: '作者ID', dataIndex: 'author_id', width: 100 },
  { title: '创建时间', dataIndex: 'created_at', width: 180 },
  {
    title: '操作',
    width: 200,
    customRender: ({ record }: { record: Article }) => (
      <Space>
        <Button type="link" size="small" onClick={() => handleEdit(record.id)}>
          <EditOutlined /> 编辑
        </Button>
        <Button type="link" danger size="small" onClick={() => handleDelete(record.id)}>
          <DeleteOutlined /> 删除
        </Button>
      </Space>
    ),
  },
];

// 加载数据
async function loadData() {
  await fetchList(searchParams.value);
}

// 搜索
function handleSearch() {
  searchParams.value.page = 1;
  loadData();
}

// 重置
function handleReset() {
  searchParams.value = {
    keyword: '',
    status: undefined,
    page: 1,
    page_size: 10,
  };
  loadData();
}

// 编辑
function handleEdit(id: number) {
  router.push(`/app/article/form?id=${id}`);
}

// 删除
async function handleDelete(id: number) {
  // TODO: 实现删除逻辑
}

// 新建
function handleCreate() {
  router.push('/app/article/form');
}

// 分页变化
function handlePageChange(page: number, pageSize: number) {
  searchParams.value.page = page;
  searchParams.value.page_size = pageSize;
  loadData();
}

onMounted(() => {
  loadData();
});
</script>

<template>
  <Page title="文章管理">
    <!-- 搜索栏 -->
    <div class="mb-4 flex gap-2">
      <Input
        v-model:value="searchParams.keyword"
        placeholder="搜索标题"
        style="width: 200px"
        @press-enter="handleSearch"
      />
      <Select
        v-model:value="searchParams.status"
        placeholder="选择状态"
        style="width: 120px"
        allow-clear
      >
        <Select.Option :value="0">草稿</Select.Option>
        <Select.Option :value="1">已发布</Select.Option>
        <Select.Option :value="2">已下架</Select.Option>
      </Select>
      <Button type="primary" @click="handleSearch">搜索</Button>
      <Button @click="handleReset">重置</Button>
      <Button type="primary" @click="handleCreate">
        <PlusOutlined /> 新建
      </Button>
    </div>

    <!-- 表格 -->
    <Table
      :columns="columns"
      :data-source="articleList"
      :loading="loading"
      :pagination="{
        current: searchParams.page,
        pageSize: searchParams.page_size,
        total: total,
        showSizeChanger: true,
      }"
      @change="handlePageChange"
    />
  </Page>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { Page } from '@vben/common-ui';
import { Form, Input, Select, Button, message } from 'ant-design-vue';
import { useRouter, useRoute } from 'vue-router';
import { useArticleDetail } from '#/api/composables/article';

const router = useRouter();
const route = useRoute();
const { loading, article, fetchDetail, saveArticle } = useArticleDetail();

const formRef = ref();
const formData = ref({
  id: undefined as number | undefined,
  title: '',
  content: '',
  author_id: 1, // TODO: 从当前用户获取
  status: 0,
});

const rules = {
  title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
};

// 加载详情
async function loadDetail() {
  const id = Number(route.query.id);
  if (id) {
    await fetchDetail(id);
    if (article.value) {
      formData.value = {
        id: article.value.id,
        title: article.value.title,
        content: article.value.content || '',
        author_id: article.value.author_id,
        status: article.value.status,
      };
    }
  }
}

// 提交
async function handleSubmit() {
  try {
    await formRef.value.validate();
    await saveArticle(formData.value);
    router.back();
  } catch (error) {
    console.error(error);
  }
}

// 取消
function handleCancel() {
  router.back();
}

onMounted(() => {
  loadDetail();
});
</script>

<template>
  <Page :title="formData.id ? '编辑文章' : '新建文章'">
    <Form
      ref="formRef"
      :model="formData"
      :rules="rules"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 16 }"
    >
      <Form.Item label="标题" name="title">
        <Input v-model:value="formData.title" placeholder="请输入标题" />
      </Form.Item>

      <Form.Item label="内容" name="content">
        <Input.TextArea
          v-model:value="formData.content"
          placeholder="请输入内容"
          :rows="10"
        />
      </Form.Item>

      <Form.Item label="状态" name="status">
        <Select v-model:value="formData.status">
          <Select.Option :value="0">草稿</Select.Option>
          <Select.Option :value="1">已发布</Select.Option>
          <Select.Option :value="2">已下架</Select.Option>
        </Select>
      </Form.Item>

      <Form.Item :wrapper-col="{ offset: 4 }">
        <Space>
          <Button type="primary" :loading="loading" @click="handleSubmit">
            提交
          </Button>
          <Button @click="handleCancel">取消</Button>
        </Space>
      </Form.Item>
    </Form>
  </Page>
</template>

<script setup>
import { useAccess } from '@vben/access';

const { hasAccessByCodes } = useAccess();
</script>

<template>
  <Button 
    v-if="hasAccessByCodes(['article:create'])"
    type="primary" 
    @click="handleCreate"
  >
    新建
  </Button>
</template>

<template>
  <ProPage :config="pageConfig" />
</template>

<script setup lang="ts">
import { ProPage, type ProPageConfig } from "@/components/Pro";
import { fetchListTenants, createTenant, updateTenant, useDeleteTenant } from "@/api/composables";

const { mutateAsync: deleteTenant } = useDeleteTenant();

const pageConfig: ProPageConfig = {
  engine: "element",  // 切换表格引擎：vxe / element
  search: {
    grid: true,
    fields: [
      { type: "input", label: "租户名称", field: "name", attrs: { clearable: true } },
      { type: "select", label: "状态", field: "status", options: [{ label: "启用", value: 1 }, { label: "禁用", value: 0 }] },
    ]
  },
  table: {
    listAction: async (query) => {
      const { page, pageSize, ...params } = query;
      const res = await fetchListTenants({ page, pageSize, ...params });
      return { items: res.items || [], total: res.total || 0 };
    },
    deleteAction: async (ids) => await deleteTenant({ id: ids as number }),
    toolbar: ["add", "delete"],
    defaultToolbar: ["refresh", "filter"],
    columns: [
      { type: "selection", label: "", width: 50 },
      { type: "index", label: "序号", width: 60 },
      { prop: "name", label: "租户名称", minWidth: 140 },
      { prop: "status", label: "状态", width: 100, cellType: "tag", labelMap: { 1: "启用", 0: "禁用" } },
      { prop: "createdAt", label: "创建时间", minWidth: 180, cellType: "date", dateFormat: "YYYY-MM-DD HH:mm:ss" },
      { prop: "action", label: "操作", fixed: "right", width: 180, cellType: "tool", buttons: [{ name: "edit" }, { name: "delete", attrs: { type: "danger" } }] },
    ]
  },
  modal: {
    component: "drawer",
    drawer: { title: "租户维护", size: "520px" },
    fields: [
      { type: "input", label: "租户名称", field: "name", rules: [{ required: true, message: "请输入租户名称" }] },
      { type: "switch", label: "启用状态", field: "status" },
    ],
    submitAction: async (data, mode) => {
      if (mode === "add") return await createTenant({ data });
      return await updateTenant({ data });
    },
  },
};
</script>