diff --git a/README.md b/README.md index 669f547..4d4ffcc 100644 --- a/README.md +++ b/README.md @@ -8,18 +8,18 @@

- - gitee star + + gitee star

- 👉 https://maimengcloud.com 👈 + 👉 https://maimengcloud.com 👈

## 快速导航 -- [唛盟-后端开发底座](https://gitee.com/qingqinkj/mdp-core) -- [前端组件](https://e.gitee.com/qingqinkj/repos/qingqinkj/mdp-lcode-ui-web/sources) -- [后端服务](https://e.gitee.com/qingqinkj/repos/qingqinkj/mdp-lcode-backend/sources) +- [唛盟-后端开发底座](https://gitee.com/maimengcloud/mdp-core) +- [前端组件](https://gitee.com/maimengcloud/mdp-lcode-ui-web) +- [后端服务](https://gitee.com/maimengcloud/mdp-lcode-backend) - [体验环境](https://maimengcloud.com/lcode/m1/) 登陆界面上选择演示账号登陆或者直接扫码登陆，无须注册 @@ -30,25 +30,30 @@ ### 唛盟主体工程 唛盟属于前后端严格分离的一套系统，分为前端工程、后端工程两部分 -- [mdp-lcode-ui-web](https://gitee.com/qingqinkj/mdp-lcode-ui-web) +- [mdp-lcode-ui-web](https://gitee.com/maimengcloud/mdp-lcode-ui-web) 唛盟的前端工程,以vue.js为主 -- [mdp-lcode-backend](https://gitee.com/qingqinkj/mdp-lcode-backend) +- [mdp-lcode-backend](https://gitee.com/maimengcloud/mdp-lcode-backend) 唛盟的后端工程，java语言为主 ### 配套工程 -- [mdp-code-generator](https://gitee.com/qingqinkj/mdp-code-generator) 代码生成器 +- [mdp-code-generator](https://gitee.com/maimengcloud/mdp-code-generator) 代码生成器 生成代码两种方式， 一、使用代码生成器本地工程，好处是代码可以直接覆盖到本地业务工程，避免复制黏贴出错。 二、如果不需要本地生成代码，也可以在低代码平台在线生成。[在线生成代码](https://maimengcloud.com/lcode/m1/#/mdp/lcode/gen) -- [mdp-sys-backend](https://gitee.com/qingqinkj/mdp-sys-backend) +- [mdp-sys-backend](https://gitee.com/maimengcloud/mdp-sys-backend) 登陆、角色管理、权限管理、组织、人员、菜单、部门、元数据等管理功能的服务接口，默认打包合并到mdp-lcode-backend中，如果不涉及改动，无须关注该工程 -- [mdp-core](https://gitee.com/qingqinkj/mdp-core) +- [mdp-core](https://gitee.com/maimengcloud/mdp-core) 该工程作为所有后端的公共封装，不包含任何的业务功能，仅作为后端系统的技术底座，包含一些公共工具、服务类抽象、dao层抽象等。 默认打包进mdp-lcode-backend中，一般无须理会 + +- [mdp-cloud-backend](https://gitee.com/maimengcloud/mdp-cloud-backend) + 该工程作为spring cloud的扩展工程，如果需要将系统发布到spring cloud环境，需要下载该工程重新打包，不包含任何的业务功能，仅作为后端接入cloud环境使用 +- [mdp-oauth2-backend](https://gitee.com/maimengcloud/mdp-oauth2-backend) + 该工程为统一认证中心，作为spring oauth2的扩展工程，如果需要将系统接入oauth2环境，需要下载该工程重新打包，该工程实现分布式单点登陆；支持微信、支付宝、短信、账户密码等多种登陆方式 ->⚠️注意：企业可以单独使用mdp-lcode-ui-web作为前端，单独开发后端系统；也可以使用**唛盟团队** 配套开源的后端系统[mdp-lcode-backend](https://gitee.com/qingqinkj/mdp-lcode-backend)作为后端服务。 +>⚠️注意：企业可以单独使用mdp-lcode-ui-web作为前端，单独开发后端系统；也可以使用**唛盟团队** 配套开源的后端系统[mdp-lcode-backend](https://gitee.com/maimengcloud/mdp-lcode-backend)作为后端服务。 ## 😭 日常开发中，您是否有以下痛点？ @@ -68,7 +73,7 @@ - 缺乏项目管理工具，项目计划、任务委派、质量管理、需求管理、持续集成等完全没概念 - **让 唛盟-mdp 来帮你解决这些痛点吧！然而，这些只是 唛盟-mdp 解决的最基础的功能。** -## 😁 为什么要使用 [唛盟-mdp](https://gitee.com/qingqinkj/mdp-core) +## 😁 为什么要使用 [唛盟-mdp](https://gitee.com/maimengcloud/mdp-core) - 完全开源、永久免费的企业级开发底座 1. 使用mdp能够带来开发效率的大幅提升，代码行数大幅减少，质量提升明显 @@ -353,14 +358,14 @@ vue全家桶 + element-ui + axios - 你的本地环境需要安装 [node](http://nodejs.org/) 和 [git](https://git-scm.com/)。我们的技术栈基于 [ES2015+](http://es6.ruanyifeng.com/)、[vue](https://cn.vuejs.org/index.html)、[vuex](https://vuex.vuejs.org/zh-cn/)、[vue-router](https://router.vuejs.org/zh-cn/) and [element-ui](https://github.com/ElemeFE/element)，提前了解和学习这些知识会对使用本项目有很大的帮助。 -- 该项目属于网页版前端项目，所有api由 [mdp-lcode-backend](https://gitee.com/qingqinkj/mdp-lcode-backend)提供，请下载该项目 +- 该项目属于网页版前端项目，所有api由 [mdp-lcode-backend](https://gitee.com/maimengcloud/mdp-lcode-backend)提供，请下载该项目 -- 代码生成器下载 [mdp-code-generator](https://gitee.com/qingqinkj/mdp-code-generator) 也可以在低代码平台在线生成 +- 代码生成器下载 [mdp-code-generator](https://gitee.com/maimengcloud/mdp-code-generator) 也可以在低代码平台在线生成 ### 开发 ```bash # 克隆项目 -git clone https://gitee.com/qingqinkj/mdp-lcode-ui-web.git +git clone https://gitee.com/maimengcloud/mdp-lcode-ui-web.git # 安装依赖 npm install @@ -410,43 +415,43 @@ mdp 3.0 版本已经开始规划更新了，尽请期待新版本的诞生吧 >⚠️ 注意：以下拓展的框架或者子系统，由mdp开源团队基于项目经验进行总结抽取，可用可不用，可以以jar包方式合并到现有工程进行发布，也可单独发布成单体应用、微服务应用 - 第三方支付框架,整合了微信支付、支付宝支付、paypal支付 - 1. [mdp-tpa-pay-backend](https://gitee.com/qingqinkj/mdp-tpa-pay-backend) 后端 + 1. [mdp-tpa-pay-backend](https://gitee.com/maimengcloud/mdp-tpa-pay-backend) 后端 - 即时通讯框架 - 1. [mdp-im-uniapp](https://gitee.com/qingqinkj/mdp-im-uniapp) 前端app - 2. [mdp-im-web](https://gitee.com/qingqinkj/mdp-im-web) 前端浏览器 - 3. [mdp-im-backend](https://gitee.com/qingqinkj/mdp-im-backend) 后端 + 1. [mdp-im-uniapp](https://gitee.com/maimengcloud/mdp-im-uniapp) 前端app + 2. [mdp-im-web](https://gitee.com/maimengcloud/mdp-im-web) 前端浏览器 + 3. [mdp-im-backend](https://gitee.com/maimengcloud/mdp-im-backend) 后端 - 统一认证中心框架 - 2. [mdp-oauth2-backend](https://gitee.com/qingqinkj/mdp-oauth2-backend) 后端 + 2. [mdp-oauth2-backend](https://gitee.com/maimengcloud/mdp-oauth2-backend) 后端 - 微服务框架 - 1. [mdp-cloud-backend](https://gitee.com/qingqinkj/mdp-cloud-backend) 后端 + 1. [mdp-cloud-backend](https://gitee.com/maimengcloud/mdp-cloud-backend) 后端 - 工作流管理子系统 - 1. [mdp-workflow-ui-web](https://gitee.com/qingqinkj/mdp-workflow-ui-web) 前端 - 2. [mdp-workflow-backend](https://gitee.com/qingqinkj/mdp-workflow-backend) 后端 + 1. [mdp-workflow-ui-web](https://gitee.com/maimengcloud/mdp-workflow-ui-web) 前端 + 2. [mdp-workflow-backend](https://gitee.com/maimengcloud/mdp-workflow-backend) 后端 - 低代码平台 - 1. [mdp-lcode-ui-web](https://gitee.com/qingqinkj/mdp-lcode-ui-web) 前端 - 2. [mdp-lcode-backend](https://gitee.com/qingqinkj/mdp-lcode-backend) 后端 + 1. [mdp-lcode-ui-web](https://gitee.com/maimengcloud/mdp-lcode-ui-web) 前端 + 2. [mdp-lcode-backend](https://gitee.com/maimengcloud/mdp-lcode-backend) 后端 - 内容管理子系统 - 1. [mdp-arc-ui-web](https://gitee.com/qingqinkj/mdp-arc-ui-web) 前端 - 2. [mdp-arc-backend](https://gitee.com/qingqinkj/mdp-arc-backend) 后端 + 1. [mdp-arc-ui-web](https://gitee.com/maimengcloud/mdp-arc-ui-web) 前端 + 2. [mdp-arc-backend](https://gitee.com/maimengcloud/mdp-arc-backend) 后端 - 短信子系统 - 1. [mdp-sms-ui-web](https://gitee.com/qingqinkj/mdp-sms-ui-web) 前端 - 2. [mdp-sms-backend](https://gitee.com/qingqinkj/mdp-sms-backend) 后端 + 1. [mdp-sms-ui-web](https://gitee.com/maimengcloud/mdp-sms-ui-web) 前端 + 2. [mdp-sms-backend](https://gitee.com/maimengcloud/mdp-sms-backend) 后端 - 项目管理子系统 - 1. [xm-crowd-ui-web](https://gitee.com/qingqinkj/xm-crowd-ui-web) 前端众包 - 2. [xm-ui-web](https://gitee.com/qingqinkj/xm-ui-web) 前端管理端 - 3. [xm-backend](https://gitee.com/qingqinkj/xm-backend) 后端 + 1. [xm-crowd-ui-web](https://gitee.com/maimengcloud/xm-crowd-ui-web) 前端众包 + 2. [xm-ui-web](https://gitee.com/maimengcloud/xm-ui-web) 前端管理端 + 3. [xm-backend](https://gitee.com/maimengcloud/xm-backend) 后端 - 财务管理子系统 - 1. [ac-core-ui-web](https://gitee.com/qingqinkj/ac-core-ui-web) 前端管理端 - 2. [ac-backend](https://gitee.com/qingqinkj/ac-backend) 后端 + 1. [ac-core-ui-web](https://gitee.com/maimengcloud/ac-core-ui-web) 前端管理端 + 2. [ac-backend](https://gitee.com/maimengcloud/ac-backend) 后端 ## 📝 常见问题、操作说明 @@ -471,7 +476,7 @@ mdp 作为开源项目，离不开社区的支持，欢迎任何人修改和提 为了保证项目代码的质量与规范，以及帮助你更快的了解项目的结构，请在贡献之前阅读： -- [mdp 贡献说明](https://gitee.com/qingqinkj/mdp-core/blob/master/docs/CONTRIBUTE.md) +- [mdp 贡献说明](https://gitee.com/maimengcloud/mdp-core/blob/master/docs/CONTRIBUTE.md) ### 贡献步骤 @@ -516,7 +521,7 @@ mdp 作为开源项目，离不开社区的支持，欢迎任何人修改和提 2. 唛盟微信公众号查看一些基础教程 drawing -3. 反馈 BUG、提出建议，欢迎新建：[issues](https://gitee.com/qingqinkj/mdp-lcode-ui-web/issues)，开发人员会不定时查看回复。 +3. 反馈 BUG、提出建议，欢迎新建：[issues](https://gitee.com/maimengcloud/mdp-lcode-ui-web/issues)，开发人员会不定时查看回复。 4. 参与贡献，请查看[贡献指南](#🔨贡献指南)。 ## 💲 打赏 @@ -528,9 +533,9 @@ mdp 作为开源项目，离不开社区的支持，欢迎任何人修改和提 序号|合作项目| 详细介绍 | 费用说明| ----------------------|------------|----------------------|-----| 1.| 打赏获得赞助商名额| 在赞助商列表展示（添加微信沟通） |不限额度| -2.| 新组件开发| 提供组件扩展、优化服务 |500元/每个组件起步，视复杂程度而定| -3.| 开发问题解答|如果使用该产品遇到棘手问题需要解决，添加微信进行沟通解决 |250元/一次 限一个小时的工作时长，超过1个小时无法解决，退款一半或者延时1个小时，还不能解决，全额退款| -4.| 开发培训|提供开发流程介绍、技术介绍、功能介绍、部署流程介绍，仅限线上培训 |500元/课程 时长2小时 -5.| 扩展问题解答|如果需要使用该产品进行自有业务系统研发，需要我方提供意见建议，我方收取一定费用后提供相应服务 |2000元/一次 限8小时的工作时长，超出8个小时双方无法达成一致意见，退500元，如需加时处理按250/小时计算加时费用。| +2.| 新组件开发| 提供组件扩展、优化服务 |视复杂程度而定| +3.| 开发问题解答|如果使用该产品遇到棘手问题需要解决，添加微信进行沟通解决 |免费| +4.| 开发培训|提供开发流程介绍、技术介绍、功能介绍、部署流程介绍，仅限线上培训 |加微信详聊| +5.| 扩展问题解答|如果需要使用该产品进行自有业务系统研发，需要我方提供意见建议，我方收取一定费用后提供相应服务 |加微信详聊| 6.| 广告合作|广告位(精品项目推荐、赞助商展位) |加微信沟通| diff --git a/src/api/mdp_pub/mdp_config.js b/src/api/mdp_pub/mdp_config.js index cee6e2c..9096b69 100644 --- a/src/api/mdp_pub/mdp_config.js +++ b/src/api/mdp_pub/mdp_config.js @@ -9,7 +9,7 @@ var sysName="唛盟智能开发";//系统名称，用于展示 export default { //登录相关 getOauth2LoginContext:function(){ - return "oauth2client" + return "lcode" }, //短信相关 getSmsContext: function() { @@ -17,7 +17,7 @@ export default { }, // 图片内容服务api路径 getArcContext: function() { - return 'arc' + return 'lcode' }, // 图片内容服务api路径 diff --git a/src/components/mdp-ui/mdp-date-range/README.md b/src/components/mdp-ui/mdp-date-range/README.md index 494b244..80e7fa7 100644 --- a/src/components/mdp-ui/mdp-date-range/README.md +++ b/src/components/mdp-ui/mdp-date-range/README.md @@ -1,8 +1,154 @@ ### mdp-date-range 该组件相对于el-date-range，进行了以下两项优化： + +#### 一、showStyle + - 提供origin\tag\x三种样式 - 可以直接传入一个对象，指定start-key,end-key，自动更新对象对应的属性。免去一堆的转换过程 + +1. `origin` + +```vue + +... + data() { + return { + formData: + [ '2024-01-09 00:00:00','2024-03-09 00:00:00'] + } + }, +``` + +image-20240111103632183 + +2. `x` + +```vue + + + + +``` + +image-20240111110136191 + +image-20240111110148521 + +3. tag + +```vue + + + + +``` + +image-202401111059022269 + +image-202401111105909638 + +#### 二、value + @change事件 + + + +```vue + +``` + +```js +data() { + return { + status: "login", + formData: + ['2024-01-09 00:00:00', '2024-03-09 00:00:00'] // 初始化值 + } +}, + +methods: { + change(dates) { + this.formData = dates + } +}, +``` + +#### 三、startKey 和 endKey + +当传入的value是一个对象时，可以设置starKey和endKey来指定key + +```vue + +``` + +```js +data() { + return { + formData: { + account:'xxxxx', + .... + startDate: '2024-01-09 00:00:00', + endDate: '2024-03-09 00:00:00' + } + } +}, + +methods: { + change(dates) { + this.formData = dates + } +}, +``` + +#### 四、styleObj + +组件的样式 + +```vue + +``` + +image-20240111144543586 + +#### 五、autoDefault 和 defaultRange + +autoDefault 是否根据 defaultRange 生成一个时间跨度 + +defaultRange = [-1, 1] = [ 当前时间 -1, 当前时间 +1 ] + +```vue + +``` + +image-20240111150728697 + +#### 六 icon + +与Attributes表的 prefix-icon 想同，自定义头部图标，只有 x 和 tag 样式下 + +```vue + + + +``` + + + + + +showavater Disabled label type + + + +#### 自定义属性 + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| --------- | ---------------------- | ------- | ------ | ------ | +| showStyle | 设置组件的样式 | String | — | origin | +| disabled | 是否禁止鼠标事件的触发 | Boolean | — | false | + + + ### 用法 #### 对象的方式 ```js @@ -18,3 +164,68 @@ var dates=[] ```html ``` + + + +#### element ui + +### Attributes + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| ----------------- | ---------------------------------------------- | ----------------------------------------- | ------------------------------------------------------------ | -------------------- | +| value / v-model | 绑定值 | date(DatePicker) / array(DateRangePicker) | — | — | +| readonly | 完全只读 | boolean | — | false | +| disabled | 禁用 | boolean | — | false | +| editable | 文本框可输入 | boolean | — | true | +| clearable | 是否显示清除按钮 | boolean | — | true | +| size | 输入框尺寸 | string | large, small, mini | — | +| placeholder | 非范围选择时的占位内容 | string | — | — | +| start-placeholder | 范围选择时开始日期的占位内容 | string | — | 开始日期 | +| end-placeholder | 范围选择时结束日期的占位内容 | string | — | 结束日期 | +| type | 显示类型 | string | year/month/date/dates/months/years week/datetime/datetimerange/ daterange/monthrange | date | +| format | 显示在输入框中的格式 | string | 见[日期格式](https://element.eleme.cn/#/zh-CN/component/date-picker#ri-qi-ge-shi) | yyyy-MM-dd | +| align | 对齐方式 | string | left, center, right | left | +| popper-class | DatePicker 下拉框的类名 | string | — | — | +| picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | [{...略...}}] | +| range-separator | 选择范围时的分隔符 | string | — | '~' | +| default-value | 可选，选择器打开时默认显示的时间 | Date | 可被`new Date()`解析 | — | +| default-time | 范围选择时选中日期所使用的当日内具体时刻 | string[] | 数组，长度为 2，每项值为字符串，形如`12:00:00`，第一项指定开始日期的时刻，第二项指定结束日期的时刻，不指定会使用时刻 `00:00:00` | — | +| value-format | 可选，绑定值的格式。不指定则绑定值为 Date 对象 | string | 见[日期格式](https://element.eleme.cn/#/zh-CN/component/date-picker#ri-qi-ge-shi) | yyyy-MM-dd HH:mm:ss | +| name | 原生属性 | string | — | — | +| unlink-panels | 在范围选择器里取消两个日期面板之间的联动 | boolean | — | false | +| prefix-icon | 自定义头部图标的类名 | string | — | el-icon-date | +| clear-icon | 自定义清空图标的类名 | string | — | el-icon-circle-close | +| validate-event | 输入时是否触发表单的校验 | boolean | - | true | +| append-to-body | DetePicker 自身是否插入至 body 元素上。 | boolean | — | true | + +### Picker Options + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| -------------- | ------------------------------------------------------------ | ------------------------------ | ------ | ------ | +| shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | — | — | +| disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | — | — | +| cellClassName | 设置日期的 className | Function(Date) | — | — | +| firstDayOfWeek | 周起始日 | Number | 1 到 7 | 7 | +| onPick | 选中日期后会执行的回调，只有当 `daterange` 或 `datetimerange` 才生效 | Function({ maxDate, minDate }) | — | — | + +### Shortcuts + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| ------- | ------------------------------------------------------------ | -------- | ------ | ------ | +| text | 标题文本 | string | — | — | +| onClick | 选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date()) | function | — | — | + +### Events + +| 事件名称 | 说明 | 回调参数 | | | +| -------- | ----------------------- | ------------------------------------------------------ | ---- | ---- | +| change | 用户确认选定的值时触发 | 组件绑定值。格式与绑定值一致，可受 `value-format` 控制 | | | +| blur | 当 input 失去焦点时触发 | 组件实例 | | | +| focus | 当 input 获得焦点时触发 | 组件实例 | | | + +### Methods + +| 方法名 | 说明 | 参数 | +| ------ | ----------------- | ---- | +| focus | 使 input 获取焦点 | — | + diff --git a/src/components/mdp-ui/mdp-date/README.md b/src/components/mdp-ui/mdp-date/README.md index 1d5b1c9..9430544 100644 --- a/src/components/mdp-ui/mdp-date/README.md +++ b/src/components/mdp-ui/mdp-date/README.md @@ -1,10 +1,126 @@ -### mdp-date +## mdp-date 该组件除了提供origin\tag\x三种样式，其它同element-ui中的el-date一致 -### 用法 -```js -var formData={startDate:'',endDate:''} +##### 一、showStyle + +1. `showStyle="origin"` + +```vue + +``` + +image-20240110173240185 + +2. `showStyle="x"` + +```vue + + + + ``` -```html - -``` \ No newline at end of file + +3 + +image-20240110174700696 + + + + +3. `showStyle="tag"` + +```vue + + + +``` + +50 + +image-20240110175446637 + +#### `pickerOptions` + +格式：[{ text: '今天', onClick(picker) { picker.$emit('pick', new Date() ); } }] + +new Date() 是 选择'今天' 时得到的数据 + +image-20240110183450741 + + + + + + +#### 自定义属性 + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| --------- | ---- | ------ | ------ | ------ | +| showStyle | | String | — | origin | + + + +#### elementUI属性 + +### Attributes + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| ----------------- | ---------------------------------------------- | ----------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | +| value / v-model | 绑定值 | date(DatePicker) / array(DateRangePicker) | — | — | +| readonly | 完全只读 | boolean | — | false | +| disabled | 禁用 | boolean | — | false | +| editable | 文本框可输入 | boolean | — | true | +| clearable | 是否显示清除按钮 | boolean | — | true | +| size | 输入框尺寸 | string | large, small, mini | — | +| placeholder | 非范围选择时的占位内容 | string | — | — | +| start-placeholder | 范围选择时开始日期的占位内容 | string | — | — | +| end-placeholder | 范围选择时结束日期的占位内容 | string | — | — | +| type | 显示类型 | string | year/month/date/dates/months/years week/datetime/datetimerange/ daterange/monthrange | date | +| format | 显示在输入框中的格式 | string | 见[日期格式](https://element.eleme.cn/#/zh-CN/component/date-picker#ri-qi-ge-shi) | yyyy-MM-dd | +| align | 对齐方式 | string | left, center, right | left | +| popper-class | DatePicker 下拉框的类名 | string | — | — | +| picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | [{ text: '今天', onClick(picker) { picker.$emit('pick', new Date()); } }, '昨天', ......] | +| range-separator | 选择范围时的分隔符 | string | — | '-' | +| default-value | 可选，选择器打开时默认显示的时间 | Date | 可被`new Date()`解析 | — | +| default-time | 范围选择时选中日期所使用的当日内具体时刻 | string[] | 数组，长度为 2，每项值为字符串，形如`12:00:00`，第一项指定开始日期的时刻，第二项指定结束日期的时刻，不指定会使用时刻 `00:00:00` | — | +| value-format | 可选，绑定值的格式。不指定则绑定值为 Date 对象 | string | 见[日期格式](https://element.eleme.cn/#/zh-CN/component/date-picker#ri-qi-ge-shi) | yyyy-MM-dd HH:mm:ss | +| name | 原生属性 | string | — | — | +| unlink-panels | 在范围选择器里取消两个日期面板之间的联动 | boolean | — | false | +| prefix-icon | 自定义头部图标的类名 | string | — | el-icon-date | +| clear-icon | 自定义清空图标的类名 | string | — | el-icon-circle-close | +| validate-event | 输入时是否触发表单的校验 | boolean | - | true | +| append-to-body | DetePicker 自身是否插入至 body 元素上。 | boolean | — | true | +| | | | | | +| | | | | | + +### Picker Options + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| :------------: | :----------------------------------------------------------: | :----------------------------: | :----: | :----: | +| shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | — | — | +| disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | — | — | +| cellClassName | 设置日期的 className | Function(Date) | — | — | +| firstDayOfWeek | 周起始日 | Number | 1 到 7 | 7 | +| onPick | 选中日期后会执行的回调，只有当 `daterange` 或 `datetimerange` 才生效 | Function({ maxDate, minDate }) | — | — | + +### Shortcuts + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| ------- | ------------------------------------------------------------ | -------- | ------ | ------ | +| text | 标题文本 | string | — | — | +| onClick | 选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date()) | function | — | — | + +### Events + +| 事件名称 | 说明 | 回调参数 | +| -------- | ----------------------- | ------------------------------------------------------ | +| change | 用户确认选定的值时触发 | 组件绑定值。格式与绑定值一致，可受 `value-format` 控制 | +| blur | 当 input 失去焦点时触发 | 组件实例 | +| focus | 当 input 获得焦点时触发 | 组件实例 | + +### Methods + +| 方法名 | 说明 | 参数 | +| ------ | ----------------- | ---- | +| focus | 使 input 获取焦点 | — | + diff --git a/src/components/mdp-ui/mdp-dialog/README.md b/src/components/mdp-ui/mdp-dialog/README.md index bf07adc..78e78bd 100644 --- a/src/components/mdp-ui/mdp-dialog/README.md +++ b/src/components/mdp-ui/mdp-dialog/README.md @@ -13,7 +13,7 @@ -``` +``` ```js // 打开弹框 this.$refs['xxFormDialog'].open({subOpType:'add',formData:this.formData}) @@ -31,8 +31,22 @@ this.$refs['xxFormDialog'].close() -``` +``` ```js //打开弹框 this.$refs['xxFormDialog'].open({subOpType:'add',formData:this.formData}) ``` + + + +#### `Attributes` + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| -------------------- | ----------------------------------------------- | ------- | ------ | ------ | +| title | Dialog 的标题，也可通过具名 slot （见下表）传入 | string | — | '' | +| width | Dialog 的宽度 | string | — | 70% | +| fullscreen | 是否为全屏 Dialog | boolean | — | false | +| close-on-click-modal | 是否可以通过点击 modal 关闭 Dialog | boolean | — | False | + + + diff --git a/src/components/mdp-ui/mdp-field/README.md b/src/components/mdp-ui/mdp-field/README.md new file mode 100644 index 0000000..266eaa8 --- /dev/null +++ b/src/components/mdp-ui/mdp-field/README.md @@ -0,0 +1,102 @@ +### mdp-Field + +#### 基本用法 + +```vue + + +``` + +```js +data() { + return { + obj: '' + } +}, + +methods: { + change(currentVal, oldVal) { + this.obj = currentVal + }, +}, +``` + + + +#### 自定义 + +下列是 mdp-field 的插槽层次结构 + +```js + + ├── + ├── + │ ├── + │ │ ├── + │ │ │ ├──
+ │ │ │ │ └── + │ │ │ ├──
+ │ │ │ │ └── + │ │ │ └──
+ │ │ ├── + │ │ └── + │ │ └──
+ │ │ └── + │ │
+ │ │ + │ └── + │── + ├── + │ └── + └── + +``` + +例子 + +```js +data() { + return { + obj: '' + } +} +``` + +```vue + + + + + +``` + +image-20240111190935618 image-20240111191052830 + + + +### Attributes + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| ----------- | -------------------------- | -------------- | ------------------------------- | ------ | +| disabled | css: pointer-events: none; | Boolean | - | false | +| value | 文本框的内容 | String, Number | - | '' | +| label | 标签字段 | String | - | '' | +| placeholder | 占位符 | String | - | '' | +| color | 背景色 | String | - | '' | +| icon | 图标 | String | - | '' | +| showStyle | 控制组件的布局 | String | x / 不是x的任意值 | x | +| size | 设置头像的大小 | number/string | number / large / medium / small | small | + +### Events + +| 事件名 | 说明 | 回调参数 | +| ------ | -------------------------------------- | --------------------------------------------------------- | +| change | 仅在输入框失去焦点或用户按下回车时触发 | (currentVal: string \|number , oldVal: string \| number ) | + diff --git a/src/components/mdp-ui/mdp-input/README.md b/src/components/mdp-ui/mdp-input/README.md new file mode 100644 index 0000000..f007dc5 --- /dev/null +++ b/src/components/mdp-ui/mdp-input/README.md @@ -0,0 +1,137 @@ +### mdp-input + + + +#### 基本使用 + +```vue +
+ +
+``` + +```css +.c1 { + display: flex; + height: 100vh; + justify-content: center; + align-items: center; +} +.c1 > * { + max-width: 200px; +} +``` + +image-20240112102727553 + +#### 自定义 + +mdp-input 结构如下 + +```html + + ├── + ├── + │ ├── + │ │ ├── + │ │ │ ├──
+ │ │ │ │ └── + │ │ │ ├──
+ │ │ │ │ └── + │ │ │ └──
+ │ │ ├── + │ │ └── + │ │ └──
+ │ │ └── + │ │
+ │ │ + │ └── + │── + └── + └── + + +``` + +```js +data() { + return { + status: "", + } +} +``` + +```vue + + + +``` + +image-20240112105047494 + +----- + +```js +data() { + return { + obj: '' + } +} +``` + +```vue + + + + + +``` + +image-20240111190935618 image-20240111191052830 + + + + + +### Autocomplete Attributes + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| :---------: | :----------------------------------------: | :-----: | :-------------------: | :------: | +| disabled | 禁用 | boolean | — | false | +| label | 标签字段 | String | — | '' | +| placeholder | 占位符 | String | — | '' | +| color | showStyle=='x'时生效，设置avatar部分的样式 | String | — | — | +| icon | showStyle=='x'时生效，设置avatar部分的Icon | String | — | — | +| showStyle | 控制组件的布局 | String | origin/x/{other} | 'origin' | +| size | 输入框尺寸，只在 `type!="textarea"` 时有效 | string | medium / small / mini | small | + + + +### Input Attributes + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| :------: | :----------------------------------------------------------: | :--------------: | :----------------------------------------------------------: | :----: | +| type | 类型 | String | text，textarea 和其他 [原生 input 的 type 值](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form__types) | text | +| min | 原生属性，设置最小值 | Number | — | null | +| rows | 输入框行数，只对 `type="textarea"` 有效 | Number | — | 2 | +| max | 原生属性，设置最大值 | Number | — | null | +| step | 原生属性，设置输入字段的合法数字间隔 | Number | — | null | +| autosize | 自适应内容高度，只对 `type="textarea"` 有效，可传入对象，如，{ minRows: 2, maxRows: 6 } | boolean / object | — | false | +| readonly | 原生属性，是否只读 | boolean | — | false | +| resize | 控制是否能被用户缩放 | string | none, both, horizontal, vertical | null | + +### Events + +| 事件名 | 说明 | 回调参数 | +| :----: | :------------------------------------: | :-------------------------------------------------------: | +| change | 仅在输入框失去焦点或用户按下回车时触发 | (currentVal: string \|number , oldVal: string \| number ) | \ No newline at end of file diff --git a/src/components/mdp-ui/mdp-number/README.md b/src/components/mdp-ui/mdp-number/README.md new file mode 100644 index 0000000..04f1b15 --- /dev/null +++ b/src/components/mdp-ui/mdp-number/README.md @@ -0,0 +1,114 @@ +### Mdp-number + +`计数器` + +#### 基本使用 + +```vue + +``` + +```js +data() { + return { + num: 4, + } +}, +methods: { + handleChange(value1, value2) { + console.log(value1, value2); + } +}, +``` + +image-20240112114302491 + +#### 自定义 + +show-style !=='origin' 时的结构如下 + +```html + + ├── + ├── + │ ├── + │ │ ├── + │ │ │ ├── + │ │ │ │ └── + │ │ │ ├── + │ │ │ │ └── + │ │ │ └── + │ │ ├── + │ │ └── + │ │ └── + │ │ + │ └── + └── + └── + └── + + +``` + +例子1 + +```vue + + + +``` + +```js +data() { + return { + num: 1, + } +} +``` + +例子2 + +```vue + + + + + +``` + +image-20240112115454303image-20240112115522071 + + + +### Attributes + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| :---------------: | :--------------------------------: | :-----: | :----------: | :-------------: | +| min | 设置计数器允许的最小值 | number | — | -Infinity | +| max | 设置计数器允许的最大值 | number | — | Infinity | +| step | 计数器步长 | number | — | 1 | +| step-strictly | 是否只能输入 step 的倍数 | boolean | — | false | +| precision | 数值精度 | number | — | 2 | +| controls | 是否使用控制按钮 | boolean | — | true | +| controls-position | 控制按钮位置 | string | — | right | +| disabled | 是否禁用计数器 | boolean | — | false | +| style-obj | 设置showStyle=='x'时，avatar的样式 | Object | — | marginTop:'5px' | +| label | 标签字段 | String | — | '' | +| placeholder | 输入框默认 placeholder | string | — | — | +| color | 设置showStyle=='x'时，直接指定颜色 | string | — | — | +| icon | 设置showStyle=='x'时，指定图标 | string | — | — | +| showStyle | 控制组件的布局 | String | origin/x/tag | 'origin' | + +### Events + +| 事件名 | 说明 | 回调参数 | +| :----: | :------------------------------------: | :-------------------------------------------------------: | +| change | 仅在输入框失去焦点或用户按下回车时触发 | (currentVal: string \|number , oldVal: string \| number ) | \ No newline at end of file diff --git a/src/components/mdp-ui/mdp-table/README.md b/src/components/mdp-ui/mdp-table/README.md new file mode 100644 index 0000000..1fda575 --- /dev/null +++ b/src/components/mdp-ui/mdp-table/README.md @@ -0,0 +1,180 @@ +## mdp-table + + + +#### 简单使用 + +后端必须是该系统的后端项目 + +```vue + +``` + +```js +data() { + return { + crudApis: { + // list: params => { + // return axios.get(``, {params}); + // } + list: params => { + config.params = params + return axios.request(config) + } + }, + columnConfigs: [ + // {property: 【需要显示的数据，返回的单个数据的key】, label: 【表头】, isCommon: 【是否可查询】}, + {property: 'rolename', label: 'rolename', isCommon: true}, + {property: 'branchId', label: 'branchId', isCommon: true}, + {property: 'dataLvl', label: 'dataLvl', isCommon: true}, + // 可以根据需要添加其他列配置 + ] + } +``` + +config配置文件是 [体验环境](https://maimengcloud.com/lcode/m1/) 中的角色管理页的接口 + +返回的单个`数据格式`： + +```json + { + "branchId": "", + "roleend": null, + "roleid": "", + "rolename": "", + "sortOrder": null, + "crdate": null, + "deptid": "", + "remark": "", + "roletype": "", + "dataLvl": 5, + "enabled": "", + "rolebeg": null + } +``` + + + +```js +const axios = require('axios'); + +let config = { + method: 'get', + maxBodyLength: Infinity, + url: 'https://maimengcloud.com/api/m1/lcode/mdp/sys/role/list', + headers: { + ..... + }, +}; + +export default config +``` + +image-20240113175843075 + +image-20240113175907878 + +模糊查询 + +image-20240113180009654 + +支持>、<、 >=、<=、!=、*陈*、$IS NULL、$IN 1,2,3、between 1,5等操作符 + +----- + +#### 自定义 + +测试接口：https://reqres.in/api/users + +接口首页: https://reqres.in + +响应数据： + +```json +{ + "page":1, + "per_page":6, + "total":12, + "total_pages":2, + "data":[ + { + "id":1, + "email":"george.bluth@reqres.in", + "first_name":"George", + "last_name":"Bluth", + "avatar":"https://reqres.in/img/faces/1-image.jpg" + } + ] +``` + + + +Mdp-table： + +```js +preQueryParamCheck(params) { + //处理参数以满足调用后台接口 + params.per_page = params.pageSize; + params.page = params.pageNum; + let arr = ['pageSize', 'pageNum', 'total', 'count'] // 需要删除内部实现的分页 + for (let item in params) { + if (params[item] === undefined || params[item] === '' || arr.includes(item)) { // 判断查询条件是否存在 + delete params[item] + } + } + if (!isNaN(params.id)) { + params.id = parseInt(params.id, 10); + } else { + delete params.id + } + return true; +}, +``` + +Mdp-table: + +```js +getResult(res, apiName) { + // 请求结果处理 + let data = res.data + if (res.status === 200) { + this.pageInfo.total = data.total; + this.pageInfo.pageNum = data.page; + this.pageInfo.pageSize = data.per_page; + let tableDatas = Array.isArray(data.data) ? data.data : new Array(data.data); + this.tableDatas = tableDatas + this.parseExpand(tableDatas, this.expandFieldName) + this.afterList(tableDatas, res.status, apiName) + } else { + this.$notify({title: data.support.url, message: data.support.text, type: 'success',}); + } +}, +``` + +父组件： + +```vue + +``` + +```js +data() { + return { + crudApis: { + list: params => { + return axios.get(`https://reqres.in/api/users`, {params}); + } + }, + columnConfigs: [ + {property: 'avatar', label: '头像', isCommon: false}, + {property: 'email', label: '邮箱', isCommon: false}, + {property: 'first_name', label: '名字', isCommon: false}, + {property: 'last_name', label: '姓', isCommon: false}, + {property: 'id', label: 'Id', isCommon: true}, + // 可以根据需要添加其他列配置 + ] + } +} +``` + +image-20240113184113330