代码拉取完成，页面将自动刷新
# 克隆项目
git clone https://gitee.com/codelm/ruoyi-vue3-lmw.git
# 进入项目目录
cd ruoyi-vue3-lmw
# 安装依赖
pnpm install
# 启动服务
pnpm dev
# 打包项目
pnpm build:prod
 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
├── BaseComponent //脱离所有业务的组件
├── api //网络请求
├── assets //静态资源
├── components //全局业务组件
├── directive //全局指令
├── hooks //hooks
├── layout //布局
├── plugins //通用方法
├── router //路由
├── store //全局 store管理
├── utils //全局公用方法
├── views //所有页面
├── App.vue // 入口页面
└── main.js // 入口 加载组件 初始化等
参考 ruoyi-generator 文件夹
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| elFormConfig | element-plus 的 Form 组件参数 | Object |
{} |
| allDisabled | 是否禁用所有操作框 | boolean |
false |
| formItems | 需要渲染的 form 项，具体参考下方的 formItem | Array |
[] |
| v-model:data | 表单数据 | Object |
必填 |
| itemStyle | 每个 formItem 的样式 | Object |
{ padding: '20px 20px 0px 0px' } |
| colLayout | 单个 formItem 布局配置，参考 element-plus 的 Layout 组件 | Object |
{ xl: 4, //1920 lg: 6, //1200 md: 8, //992 sm: 12, //768 xs: 24, //<768 } |
| footerLayout | footer 插槽的布局配置，参数同上 | Object |
{ xl: 3, //1920 lg: 4, //1200 md: 4, //992 sm: 12, //768 xs: 24, //<768 } |
| rowConfig | 所有 formItem 的布局配置，参考 element-plus 的 Layout 组件 | Object |
{} |
| rules | 表单正则校验，参考 element-plus 的表单校验 | Object |
{} |
| hideItems | 需要隐藏的列(需要用 ref 包裹) | ref(Array) |
[] |
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| field | data 的键名 | String |
— |
| isHidden | 是否隐藏该列 | Boolean |
false |
| hideLabel | 是否隐藏 label | Boolean |
false |
| label | 标签文本 | String |
— |
| formItemConfig | 参考 element-plus 的 formItem 配置 | Object |
— |
| type | 参考下方的 type | String |
— |
| config | 根据 type 的选择配置不同的 config，可以根据 type 的类型去查看 element-plus 的文档 | Object |
— |
| eventFunction | 组件的监听事件，根据 type 的类型去查看 element-plus 的文档 | Object |
— |
| slotNames | 根据 type 类型去查看对应 element-plus 组件的插槽配置，对外暴露的插槽名称为 field+驼峰的 slotName | Array |
| 属性名称 | 说明 |
|---|---|
| input | 参考 element-plus 的 input，下面所有的 type 都可参考 element-plus |
| password | Input |
| inputNumber | Input Number |
| textarea | Input |
| cascader | cascader |
| select | select |
| tree | Tree |
| treeSelect | TreeSelect |
| datepicker | DatePicker |
| checkBox | checkbox 组件，具体使用可以查看 BaseForm 的源代码，很容易看懂 |
| radio | radio，具体使用可以查看 BaseForm 的源代码，很容易看懂 |
| custom | 自定义类型，如何 type='custom'时会向外部暴露一个插槽，插槽名称为 field+Custom |
| 插槽名 | 说明 |
|---|---|
| field+Before | 每个 formItem 的前置插槽 |
| field+After | 每个 formItem 的后置插槽 |
| footer | 最尾部的插槽 |
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| dataList | 表数据 | Array |
[] |
| tableItem | 参考下方的 tableItem | Array |
[] |
| tableListener | table 的监听事件参考 element-plus 的 table 组件的监听事件 | Object |
{} |
| showChoose | 是否展示复选框 | Boolean |
false |
| showIndex | 是否展示序号 | Boolean |
false |
| pagination | 是否显示分页 | Boolean |
true |
| listCount | 总条数 | Number |
0 |
| paginationInfo | 分页的页码和偏移 | Object |
{ pageNum: 1, pageSize: 50 } |
| elTableConfig | element-plus 的 table 组件的参数配置 | Object |
{} |
| showExpand | 列表是否可展开 | Boolean |
false |
| align | 列布局，参考 element-plus 的 align | String |
center |
| paginationLayout | 参考 element 的 pagination | String |
'total, sizes, prev, pager, next, jumper' |
| hideItems | 需要隐藏的列(需要用 ref 包裹) | ref(Array) |
[] |
| maxHeight | 参考 element-plus 的 table 的 max-height | Number, String |
|
| selectionConfig | element-plus 的 table 复选框的配置 | Object |
{} |
| 属性名 | 说明 |
|---|---|
| 参考 element-plus | 与 element-plus 的 table-column 参数一致 |
| slotName | 对应 element-plus 中 Table-column 的 default 插槽 |
| useOwn | 是否使用 element-plus 的 Table-column 的 header 插槽，如果为 true 时会向外暴露一个名称为 slotName+Header 的插槽 |
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| searchConfig | 参考 BaseForm 组件的所有属性 | Object |
{} |
| initSearch | 搜索参数初始化的值 | Object |
{} |
| otherRequestOption | 需要另外携带的查询条件 | Object |
{} |
| showSearch | 是否展示检索和充值按钮 | Boolean |
true |
| pageName | 点击搜索时会使用 mitt 库发送一个名称为 search+pageName+Info 的事件，用于查询 | String |
必填 |
| 方法名 | 说明 | 类型 |
|---|---|---|
| formData | 搜索参数 | Object |
| search | 检索按钮的方法 | Function |
| setFormData | 设置 formData 搜索条件的方法 | Function |
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| contentConfig | 参考 BaseTable 组件的所有属性 | Object |
{} |
| tableListener | table 的监听事件参考 element-plus 的 table 组件的监听事件 | Object |
{} |
| firstSendOption | 页面第一次进入的查询条件 | Object |
— |
| autoSend | 页面加载是否自动发送查询请求 | Boolean |
true |
| autoDesc | 是否自动加入排序的查询条件 | Boolean |
true |
| descConfig | 排序的参数 | Object |
{ orderByColumn: 'createTime', isAsc: 'desc' } |
| otherRequestOption | 其他查询条件 | Object |
{} |
| showEdit | 列表的列是否展示编辑按钮 | Boolean |
true |
| handleEditShow | 返回一个 true 或 false 用户控制编辑按钮的显示 | Function |
() => { return true } |
| showDelete | 列表的列是否展示编辑按钮 | Boolean |
true |
| handleDeleteShow | 返回一个 true 或 false 用户控制删除按钮的显示 | Function |
() => { return true } |
| headerButtons | 列表上方需要展示的按钮[刷新，添加，编辑，删除，隐藏列，搜索栏显示隐藏按钮] | Array |
[ 'refresh', 'add', 'edit', 'delete', 'columnDisplay', 'comSearch' ] |
| tableSelected | table 被选中的项，用于控制按钮的 disabled | Array |
[] |
| permission | 按钮权限控制 add，edit，del | Object |
{} |
| idKey | 删除按钮和编辑按钮点击时查询详情接口需要使用的列表的键 | String |
— |
| pageName | 组件会使用 mitt 库监听 search+pageName+Search 事件 | String |
— |
| requestBaseUrl | 页面会根据此配置发送请求 | String |
/ |
| requestUrl | 页面会根据此配置发送请求 | ||
| 发送请求的规则 | url 为 requestBaseUrl+pageName+requestUrl | ||
| 数据存储位置 | 列表数据统一用 pinia 存储，src/store/business/businessStore.js，存储在 listInfo 中，键为 pageName+List，所以务必让 pageName 唯一，以免出现数据错乱的问题。如果两个界面的请求接口相同，请在此 pinia 文件中的 interceptor 函数进行 url 配置修改。 | ||
| dictMap | 数据字典对象，当 tableItem 中的 item 的键 isDict 为 true 且 slotName 有值时，会自动反显数据字典 | Object |
{} |
| 插槽名 | 说明 |
|---|---|
| item.slotName+Header | 每一列的头部插槽 |
| handleLeft | 列表上方按钮的左边插槽 |
| handleRight | 列表上方按钮的右边插槽 |
| 方法名 | 说明 | 类型 |
|---|---|---|
| finalSearchData | 搜索参数 | Object |
| refresh | 刷新方法 | Function |
| baseTabelRef | BaseTable 的实例 | |
| deleteRow | 列表删除的方法 | Function |
| editClick | 列表编辑的方法 | Function |
| dataList | 列表数据 | Array |
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| infoInit | form 表单的初始化值 | Object |
{} |
| otherInfo | 编辑或者新建时除了 formData 还要传的参数 | Object |
{} |
| idKey | 编辑按钮需要使用的列表的键 | String |
— |
| width | 弹出层宽度 | String |
600px |
| top | 弹出层距离顶部的距离 | String |
10vh |
| dialogConfig | 参考 BaseForm 组件的所有属性 | Object |
{} |
| defaultData | formData 默认值 | Object |
{} |
| sendIdKey | 发送请求时 id 的键名 | String |
— |
| requestBaseUrl | 同 pageContent | String |
— |
| pageName | 同 pageContent | String |
必填 |
| 请求 url 说明 | requestBaseUrl+pageName 需要修改可以在 pinia 文件中修改 |
| 方法名 | 说明 | 类型 |
|---|---|---|
| formData | 表单数据 | Object |
| setFormData | 设置表单数据 | Function |
| formRef | BaseForm 的实例 | Function |
本人微信：lmwcoder，欢迎大家提供建议， 无需捐赠，如果觉得项目不错，或者已经在使用了，希望你可以去帮我点个 ⭐ Star。
非常感谢BuildAdmin提供的 ui 界面
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手