ソースを参照

表单验证

大厂分支
zhichao lei 4年前
コミット
0b7dbcc632
3個のファイルの変更54行の追加48行の削除
  1. +14
    -14
      Learun.Framework.Ultimate V7/Learun.Application.Web/Areas/PersonnelManagement/Views/ADR_Restriction/Form.cshtml
  2. +20
    -17
      Learun.Framework.Ultimate V7/LearunApp-2.2.0/App.vue
  3. +20
    -17
      Learun.Framework.Ultimate V7/LearunApp-2.2.0/README.md

+ 14
- 14
Learun.Framework.Ultimate V7/Learun.Application.Web/Areas/PersonnelManagement/Views/ADR_Restriction/Form.cshtml ファイルの表示

@@ -4,19 +4,19 @@
} }
<style> <style>


.lr-form-item-title {
/* .lr-form-item-title {
width: 117px; width: 117px;
padding-right: 21px; padding-right: 21px;
} }
</style>
*/</style>
<div class="lr-form-wrap" id="form"> <div class="lr-form-wrap" id="form">
<div class="col-xs-12 lr-form-item" data-table="ADR_Restriction"> <div class="col-xs-12 lr-form-item" data-table="ADR_Restriction">
<div class="lr-form-item-title">上班时间</div>
<input id="WorkTime" type="text" class="form-control" />
<div class="lr-form-item-title">上班时间<font face="宋体">*</font></div>
<input id="WorkTime" type="text" class="form-control" isvalid="yes" checkexpession="NotNull" />
</div> </div>
<div class="col-xs-12 lr-form-item" data-table="ADR_Restriction"> <div class="col-xs-12 lr-form-item" data-table="ADR_Restriction">
<div class="lr-form-item-title">下班时间</div>
<input id="CloseTime" type="text" class="form-control" />
<div class="lr-form-item-title">下班时间<font face="宋体">*</font></div>
<input id="CloseTime" type="text" class="form-control" isvalid="yes" checkexpession="NotNull" />
</div> </div>
@*<div class="col-xs-6 lr-form-item" data-table="ADR_Restriction" > @*<div class="col-xs-6 lr-form-item" data-table="ADR_Restriction" >
<div class="lr-form-item-title">签到有效时间</div> <div class="lr-form-item-title">签到有效时间</div>
@@ -35,20 +35,20 @@
<input id="SignOutEndTime" type="text" class="form-control "/> <input id="SignOutEndTime" type="text" class="form-control "/>
</div>*@ </div>*@
<div class="col-xs-12 lr-form-item" data-table="ADR_Restriction"> <div class="col-xs-12 lr-form-item" data-table="ADR_Restriction">
<div class="lr-form-item-title">允许迟到范围(分)</div>
<input id="LateOvertime" type="text" class="form-control" />
<div class="lr-form-item-title">允许迟到(分)<font face="宋体">*</font></div>
<input id="LateOvertime" type="text" class="form-control" isvalid="yes" checkexpession="NotNull" />
</div> </div>
<div class="col-xs-12 lr-form-item" data-table="ADR_Restriction"> <div class="col-xs-12 lr-form-item" data-table="ADR_Restriction">
<div class="lr-form-item-title">允许早退范围(分)</div>
<input id="LeaveOverTime" type="text" class="form-control" />
<div class="lr-form-item-title">允许早退(分)<font face="宋体">*</font></div>
<input id="LeaveOverTime" type="text" class="form-control" isvalid="yes" checkexpession="NotNull" />
</div> </div>
<div class="col-xs-12 lr-form-item" data-table="ADR_Restriction"> <div class="col-xs-12 lr-form-item" data-table="ADR_Restriction">
<div class="lr-form-item-title">未签到,记为</div>
<div id="NoSignIn"></div>
<div class="lr-form-item-title">未签到,记为<font face="宋体">*</font></div>
<div id="NoSignIn" isvalid="yes" checkexpession="NotNull"></div>
</div> </div>
<div class="col-xs-12 lr-form-item" data-table="ADR_Restriction"> <div class="col-xs-12 lr-form-item" data-table="ADR_Restriction">
<div class="lr-form-item-title">未签退,记为</div>
<div id="NoSignOut"></div>
<div class="lr-form-item-title">未签退,记为<font face="宋体">*</font></div>
<div id="NoSignOut" isvalid="yes" checkexpession="NotNull"></div>
</div> </div>
</div> </div>
@Html.AppendJsFile("/Areas/PersonnelManagement/Views/ADR_Restriction/Form.js") @Html.AppendJsFile("/Areas/PersonnelManagement/Views/ADR_Restriction/Form.js")

+ 20
- 17
Learun.Framework.Ultimate V7/LearunApp-2.2.0/App.vue ファイルの表示

@@ -5,43 +5,46 @@ export default {
// 考虑到用户刷新网页时会丢失全局数据、页面栈、页面数据等,因此直接跳回首页即可 // 考虑到用户刷新网页时会丢失全局数据、页面栈、页面数据等,因此直接跳回首页即可


async onLaunch(param) { async onLaunch(param) {
//应用的生命周期 应用启动后触发
// #ifdef H5 || APP-VUE // #ifdef H5 || APP-VUE
// H5 刷新时获取当前页面路径 // H5 刷新时获取当前页面路径
const pagePath = '/' + param.path

const pagePath = "/" + param.path;
// 如果 H5 刷新后访问的不是首页/登录页/注册页,直接跳转回首页 // 如果 H5 刷新后访问的不是首页/登录页/注册页,直接跳转回首页
if (!['/pages/login', '/pages/home', '/pages/signup'].includes(pagePath)) {
if (!["/pages/login", "/pages/home", "/pages/signup"].includes(pagePath)) {
this.$nextTick(() => { this.$nextTick(() => {
this.TAB_TO('/pages/home')
return
})
this.TAB_TO("/pages/home");
return;
});
} }
// #endif // #endif


// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
// 小程序端,处理更新 (支付宝/钉钉暂不支持) // 小程序端,处理更新 (支付宝/钉钉暂不支持)
const updateManager = uni.getUpdateManager()
const updateManager = uni.getUpdateManager();
updateManager.onUpdateReady(() => { updateManager.onUpdateReady(() => {
this.HIDE_LOADING()
this.HIDE_LOADING();
uni.showModal({ uni.showModal({
title: '更新提示',
content: '小程序新版本已准备好,是否更新应用?',
title: "更新提示",
content: "小程序新版本已准备好,是否更新应用?",
success: ({ confirm }) => { success: ({ confirm }) => {
if (confirm) { if (confirm) {
updateManager.applyUpdate()
updateManager.applyUpdate();
} }
}
})
})
},
});
});
// #endif // #endif
}
}
},
onError(error) {
console.log(error);
},
};
</script> </script>


<style lang="less"> <style lang="less">
// 现在 CSS 必须在 <style> 中引入,参考:https://ask.dcloud.net.cn/question/86907 // 现在 CSS 必须在 <style> 中引入,参考:https://ask.dcloud.net.cn/question/86907
// 后续 uni-app 升级后可能会支持直接 import 样式,到时候可以省略下行代码 // 后续 uni-app 升级后可能会支持直接 import 样式,到时候可以省略下行代码
@import '~@/components/learun-mpui/styles/index.css';
@import "~@/components/learun-mpui/styles/index.css";


page { page {
background-color: #f3f3f3; background-color: #f3f3f3;


+ 20
- 17
Learun.Framework.Ultimate V7/LearunApp-2.2.0/README.md ファイルの表示

@@ -5,7 +5,7 @@ HBuilderX 版本不低于:2.7.9


(本文档只是对初次使用框架做简单的介绍,对于框架 API、组件、平台差异等,您可查看 **/docs** 目录下的详细说明文档) (本文档只是对初次使用框架做简单的介绍,对于框架 API、组件、平台差异等,您可查看 **/docs** 目录下的详细说明文档)
(本文档格式为 markdown,您可以使用浏览器等工具来打开,获取更佳的阅读体验) (本文档格式为 markdown,您可以使用浏览器等工具来打开,获取更佳的阅读体验)
# 文档目录 # 文档目录
- **/README.md** : 二次开发手册(本文档); - **/README.md** : 二次开发手册(本文档);
- **/docs/api.md** : 框架 API 文档; - **/docs/api.md** : 框架 API 文档;
@@ -15,9 +15,9 @@ HBuilderX 版本不低于:2.7.9
# 开发前的准备 # 开发前的准备
力软框架移动端使用 uni-app 技术来开发。 力软框架移动端使用 uni-app 技术来开发。
使用 uni-app,您只需编写一套 Vue 代码,就能编译输出成手机 App、各小程序平台、H5 网页端等多个平台的成品。 使用 uni-app,您只需编写一套 Vue 代码,就能编译输出成手机 App、各小程序平台、H5 网页端等多个平台的成品。
力软框架移动端支持 H5、安卓 App/iOS App、微信/支付宝/钉钉小程序。 力软框架移动端支持 H5、安卓 App/iOS App、微信/支付宝/钉钉小程序。
需要下载安装以下工具: 需要下载安装以下工具:
- 【必装工具】:[HBuilderX](https://www.dcloud.io/hbuilderx.html) ,uni-app 的官方开发工具,**注意请下载App开发版** - 【必装工具】:[HBuilderX](https://www.dcloud.io/hbuilderx.html) ,uni-app 的官方开发工具,**注意请下载App开发版**
- 开发微信小程序:[微信小程序开发工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html) - 开发微信小程序:[微信小程序开发工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)
@@ -25,10 +25,10 @@ HBuilderX 版本不低于:2.7.9
- 开发 iOS /安卓 App / H5:HBuilderX 内置网页版调试工具,也可以连接手机真机调试,无需安装其他软件。 - 开发 iOS /安卓 App / H5:HBuilderX 内置网页版调试工具,也可以连接手机真机调试,无需安装其他软件。


**注意:**请使用最新版 HBuilderX。如果您已安装,可以点击菜单栏的「帮助」>「检查更新」来升级到最新版。请确保您的 HBuilderX 版本不低于本文档开头所标注的HBuilderX 开发工具版本。 **注意:**请使用最新版 HBuilderX。如果您已安装,可以点击菜单栏的「帮助」>「检查更新」来升级到最新版。请确保您的 HBuilderX 版本不低于本文档开头所标注的HBuilderX 开发工具版本。
HBuilderX 下载后是个压缩包,将它解压到硬盘上,运行 HBuilderX.exe 即可启动; HBuilderX 下载后是个压缩包,将它解压到硬盘上,运行 HBuilderX.exe 即可启动;
小程序开发工具则按照指引,依次点击下一步即可完成安装。 小程序开发工具则按照指引,依次点击下一步即可完成安装。
**本文档只负责提示您开发过程中易错点,以及对力软框架提供的 API、工具类等给出说明,不是使用 uni-app 开发移动应用的教程。** **本文档只负责提示您开发过程中易错点,以及对力软框架提供的 API、工具类等给出说明,不是使用 uni-app 开发移动应用的教程。**
学习 uni-app 移动端开发,或是在以上工具的安装、使用过程中遇到问题时,可以参考以下文档: 学习 uni-app 移动端开发,或是在以上工具的安装、使用过程中遇到问题时,可以参考以下文档:
- [uni-app 介绍与文档](https://uniapp.dcloud.io/) - [uni-app 介绍与文档](https://uniapp.dcloud.io/)
@@ -39,7 +39,7 @@ HBuilderX 下载后是个压缩包,将它解压到硬盘上,运行 HBuilderX
# 起步 # 起步
启动 HBuilderX,点击左上角菜单:「文件」>「打开目录」,然后选择本项目的文件夹,即可打开本项目。 启动 HBuilderX,点击左上角菜单:「文件」>「打开目录」,然后选择本项目的文件夹,即可打开本项目。
安装后**首次**运行 HBuilderX 时,需要的操作: 安装后**首次**运行 HBuilderX 时,需要的操作:
- 【必做】 点击左上角菜单>「工具」>「插件安装」,在打开的插件列表中安装「less 编译」; - 【必做】 点击左上角菜单>「工具」>「插件安装」,在打开的插件列表中安装「less 编译」;
- 【必做】 找到 /config.js 文件,修改公司名称、后台接口地址等相关配置; - 【必做】 找到 /config.js 文件,修改公司名称、后台接口地址等相关配置;
@@ -49,14 +49,14 @@ HBuilderX 下载后是个压缩包,将它解压到硬盘上,运行 HBuilderX
## 小程序主体注册 ## 小程序主体注册
如果是开发小程序,您需要在对应的平台来申请注册自己的小程序主体账号,然后提交小程序名称、图标、类目,并申请小程序 AppID; 如果是开发小程序,您需要在对应的平台来申请注册自己的小程序主体账号,然后提交小程序名称、图标、类目,并申请小程序 AppID;
后续提交审核、发布小程序,均需要在小程序公众平台上进行操作。 后续提交审核、发布小程序,均需要在小程序公众平台上进行操作。
请先申请小程序 AppID: 请先申请小程序 AppID:
[微信小程序后台](https://mp.weixin.qq.com/) [微信小程序后台](https://mp.weixin.qq.com/)
[钉钉小程序后台](https://open-dev.dingtalk.com/) [钉钉小程序后台](https://open-dev.dingtalk.com/)
[支付宝小程序后台](https://openhome.alipay.com/) [支付宝小程序后台](https://openhome.alipay.com/)


申请了小程序 AppID,打开项目根目录下的 manifest.json,请在其中「微信/支付宝小程序配置」页面填入 AppID。 申请了小程序 AppID,打开项目根目录下的 manifest.json,请在其中「微信/支付宝小程序配置」页面填入 AppID。
## 项目目录介绍 ## 项目目录介绍
打开本项目后,可以在左侧的浏览项目目录和文件,点击文件即可进行编辑。 打开本项目后,可以在左侧的浏览项目目录和文件,点击文件即可进行编辑。
本项目的目录文件介绍: 本项目的目录文件介绍:
@@ -70,6 +70,7 @@ HBuilderX 下载后是个压缩包,将它解压到硬盘上,运行 HBuilderX
- /node_modules: 使用到的 npm 库 - /node_modules: 使用到的 npm 库
- /unpackage (从未运行过的项目没有此文件夹): 运行项目时会自动把编译生成的代码放在此目录下 - /unpackage (从未运行过的项目没有此文件夹): 运行项目时会自动把编译生成的代码放在此目录下

(文件): (文件):
- App.vue: 【重要】 运行时的全局 Vue 对象,可以用来设置应用生命周期钩子、导入全局样式等 - App.vue: 【重要】 运行时的全局 Vue 对象,可以用来设置应用生命周期钩子、导入全局样式等
- config.js: 【重要】 多个页面的配置文件,可以控制页面显示的内容和方式 - config.js: 【重要】 多个页面的配置文件,可以控制页面显示的内容和方式
@@ -81,10 +82,10 @@ HBuilderX 下载后是个压缩包,将它解压到硬盘上,运行 HBuilderX
- index.html: 编译到 H5 端时的页面模板 - index.html: 编译到 H5 端时的页面模板
## uni-app 页面开发 ## uni-app 页面开发
uni-app 中,每一个页面都是一个 .vue 文件,它包含了模板、JS、CSS 代码; uni-app 中,每一个页面都是一个 .vue 文件,它包含了模板、JS、CSS 代码;
文件中可以引入其他 JS、CSS,引入安装好的 npm 库,也可以引入图片视频音乐等媒体。 文件中可以引入其他 JS、CSS,引入安装好的 npm 库,也可以引入图片视频音乐等媒体。
**需要注意的是,所有页面必须放置于 /pages 目录中, 且每个页面都必须在 /pages.json 中添加一条对应的记录,否则页面无法导航。** **需要注意的是,所有页面必须放置于 /pages 目录中, 且每个页面都必须在 /pages.json 中添加一条对应的记录,否则页面无法导航。**
**当您向力软框架中添加新的页面时,请及时修改 /pages.json 文件,确保所有页面都登记在该文件中。** **当您向力软框架中添加新的页面时,请及时修改 /pages.json 文件,确保所有页面都登记在该文件中。**
例如: 例如:
@@ -92,20 +93,22 @@ uni-app 中,每一个页面都是一个 .vue 文件,它包含了模板、JS
`/pages/mypage/index.vue` `/pages/mypage/index.vue`
那么在 /pages.json 里,需要在 pages 列表中添加一条记录: 那么在 /pages.json 里,需要在 pages 列表中添加一条记录:
`{ "path": "pages/mypage/index", "style": { "navigationBarTitleText": "我是页面的标题" } }` `{ "path": "pages/mypage/index", "style": { "navigationBarTitleText": "我是页面的标题" } }`
# 使用力软代码生成器 # 使用力软代码生成器
请先确保代码生成器的版本和 App 版本相同,不同版本可能会引发错误。 请先确保代码生成器的版本和 App 版本相同,不同版本可能会引发错误。
以下是使用力软代码生成器创建页面的流程: 以下是使用力软代码生成器创建页面的流程:
- 【自动】 使用力软代码生成器发布功能时,会在 /pages 目录下生成相应的页面文件; - 【自动】 使用力软代码生成器发布功能时,会在 /pages 目录下生成相应的页面文件;
- 【手动】 您需要在 /pages.json 页面配置文件中,手动把这些页面添加到 pages 字段中。 - 【手动】 您需要在 /pages.json 页面配置文件中,手动把这些页面添加到 pages 字段中。

例如: 例如:
假设您使用代码生成器时,设置的输出目录名为 LR_Codedemo,功能类名为 wxtest,那么代码生成器会自动生成两个文件: 假设您使用代码生成器时,设置的输出目录名为 LR_Codedemo,功能类名为 wxtest,那么代码生成器会自动生成两个文件:
`/pages/LR_Codedemo/wxtest/list.vue` (移动页面主页面); `/pages/LR_Codedemo/wxtest/list.vue` (移动页面主页面);
`/pages/LR_Codedemo/wxtest/single.vue` (移动表单页)。 `/pages/LR_Codedemo/wxtest/single.vue` (移动表单页)。
然后,需要配置 /pages.json 文件: 然后,需要配置 /pages.json 文件:
在 pages 数组里添加以下两条(navigationStyle 是页面的标题,可以自行更改): 在 pages 数组里添加以下两条(navigationStyle 是页面的标题,可以自行更改):

``` ```
{ {
"pages": [ "pages": [
@@ -117,16 +120,16 @@ uni-app 中,每一个页面都是一个 .vue 文件,它包含了模板、JS
} }
``` ```
这样就完成了新自定义页面的生成。 这样就完成了新自定义页面的生成。
按照小程序和 uni-app 的规范, 每个页面均需要单独建立一个文件夹;但是这样将使得工程目录过于复杂,因此力软框架中,每个页面使用单个 .vue 文件,和传统 Web 开发相同,请知悉。 按照小程序和 uni-app 的规范, 每个页面均需要单独建立一个文件夹;但是这样将使得工程目录过于复杂,因此力软框架中,每个页面使用单个 .vue 文件,和传统 Web 开发相同,请知悉。
也因为以上原因,新建页面时,请不要勾选「创建同名目录」这一项。 也因为以上原因,新建页面时,请不要勾选「创建同名目录」这一项。
----- -----
# 二次开发指南 # 二次开发指南
**注意:** 小程序端不同于常规 Web 端,它没有浏览器上的 DOM 、BOM,也就是说没有 document、window 对象,因此也无法使用 jQuery 等工具;但是有同类的工具和 API 可以替代。 **注意:** 小程序端不同于常规 Web 端,它没有浏览器上的 DOM 、BOM,也就是说没有 document、window 对象,因此也无法使用 jQuery 等工具;但是有同类的工具和 API 可以替代。
**注意:** 本框架中的每个页面为单个 .vue 文件,无需按照小程序或 uni-app 的要求,为每个页面单独建一个文件夹,因为这样会导致目录结构过于复杂。 **注意:** 本框架中的每个页面为单个 .vue 文件,无需按照小程序或 uni-app 的要求,为每个页面单独建一个文件夹,因为这样会导致目录结构过于复杂。
每个 .vue 文件的格式如下: 每个 .vue 文件的格式如下:
``` html ``` html
<template> <template>
@@ -144,7 +147,7 @@ export default {
/* 页面样式 */ /* 页面样式 */
</style> </style>
``` ```
## 页面模板相关注意事项: ## 页面模板相关注意事项:
- 模板遵循 Vue 模板写法,[uni-app 页面模板文档](https://uniapp.dcloud.io/component/README); - 模板遵循 Vue 模板写法,[uni-app 页面模板文档](https://uniapp.dcloud.io/component/README);
- 网页中的 `<div>`、`<span>`、`<img>` 等标签,在 uni-app 中需要分别写成 `<view>`、`<text>`、`<image>` 等; - 网页中的 `<div>`、`<span>`、`<img>` 等标签,在 uni-app 中需要分别写成 `<view>`、`<text>`、`<image>` 等;


読み込み中…
キャンセル
保存