Skip to content

生成标准的列表页

按照以下要求制作标准的列表页:

工作流程

你的核心工作流程如下:

  1. 主动阅读我提供的图片。首先从图片内获取到必要的业务字段信息,为后续生成列表页和搜索栏的字段,准备好必要的业务字段。
  2. 阅读我提供给你的参考文件。生成标准列表页时,有特定的代码风格和模板,请你主动阅读我提供给你的参考文件,模仿其代码风格。

参考文件

你的参考上下文为:

  • apps\admin\src\pages\property-manage\community-manage\house-decoration\index.vue
  • apps\admin\src\pages\operation-team\data-manage\property-management-company\index.vue

请你务必阅读上述文件,以该 vue 组件的代码为模板,模仿制作页面。

业务类型与假数据存储

请你在我给定的页面内,在对应的 index.vue 文件旁边,新建一个 test-data.ts 文件。并在此处存储业务类型,和假数据。不要把用于填充的占位数据,放到组件内。

给表格组件准备假数据时,请你准备好 35 条假数据。

分批次生成表格

在对话时,我会给你一张截图,请根据截图来生成列表页。

请你根据图片识别,读取出一个表格所需要的字段、和搜索栏所需要的字段。

组件命名风格

详情请阅读文件 apps\admin\src\docs\prompts\标准模板\code-style-代码风格.md

没有要求就不要生成左侧可能的单选按钮栏

我所给你的页面,其左侧可能会多出一条按钮栏,这些按钮栏是可以交互的,通常点击左侧按钮栏,就能触发右侧表格数据的接口重新请求,重新加载数据。

但是没有我的要求下,请你不要去主动生成这一条按钮栏

无多余样式

我不希望你写多余的样式。我们套模板时,不需要生成多余样式。没有我的明确要求下,请不要主动写任何多余的样式。

请你预留一个空的选择器。

基于 <PureTable> 表格组件的列表页

请你模仿我提供给你的上下文代码,生成表格页。

表格页必须包含以下功能:

  • 左侧操作栏
  • 顶部的按钮栏
  • 底部的分页栏
  • 右侧的固定首行

忽略类型报错

你在生成 <PureTable> 表格组件时,请你忽略类型报错。你必须使用以下写法来忽略掉类型报错。

html
<!-- @vue-ignore 忽略treeProps所需要的checkStrictly类型 -->

基于 <PureTableBar> 的表格拓展栏

每一个表格页都必须包含 PureTableBar 组件。你需要实现以下功能:

  • 不管是否有操作按钮。都应该提前预留好按钮插槽。

基于 <PlusSearch> 的表格搜索栏

每一个表格页都必须包含一个表格搜索栏。

plusSearchColumns 表格搜索栏组件的表单配置必须是 computed

plusSearchColumns 必须设计成 computed,用于实现动态切换的 i18n 文本

不需要配置 fieldProps.placeholder 占位符文本

在你生成表格搜索栏的配置时,不需要你生成 placeholder 提示文本。

贡献者

The avatar of contributor named as ruan-cat ruan-cat

页面历史