生成标准的列表页
按照以下要求制作标准的列表页:
工作流程
你的核心工作流程如下:
- 主动阅读我提供的图片。首先从图片内获取到必要的业务字段信息,为后续生成列表页和搜索栏的字段,准备好必要的业务字段。
- 阅读我提供给你的参考文件。生成标准列表页时,有特定的代码风格和模板,请你主动阅读我提供给你的参考文件,模仿其代码风格。
参考文件
你的参考上下文为:
- 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 提示文本。