若依前端APP版使用教程(uni app)
| 名称 | 网址 | 备注 |
| 图标组件 | uni-icons 图标 | uni-app官网 | |
1 增加页面流程
新增Page>新增API>新增组件(可选)>新增样式(可选)>新增路径(page.json)
（图片来源网络，侵删）
1.1 page.json添加如下代码，此文件项目根目录下
{
"path": "pages/mes/pro/feedback/index",
"style": {
"navigationBarTitleText": "工单报工"
}
}
1.2 pages的（pages/mes/pro/feedback/）下面新增index.vue文件，代码如下
提交
import { getUserProfile } from "@/api/system/user"
import { updateUserProfile } from "@/api/system/user"
import workOrder from "@/api/mes/pro/workorder"
import { listWorkorder} from "@/api/mes/pro/workorder";
export default {
data() {
return {
user: {
nickName: "",
phonenumber: "",
email: "",
sex: ""
},
sexs: [{
text: '男',
value: "0"
}, {
text: '女',
value: "1"
}],
rules: {
nickName: {
rules: [{
required: true,
errorMessage: '用户昵称不能为空'
}]
},
phonenumber: {
rules: [{
required: true,
errorMessage: '手机号码不能为空'
}, {
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
errorMessage: '请输入正确的手机号码'
}]
},
email: {
rules: [{
required: true,
errorMessage: '邮箱地址不能为空'
}, {
format: 'email',
errorMessage: '请输入正确的邮箱地址'
}]
}
},
workorderCode:123456,
workorderList: [],
// 遮罩层
loading: true,
// 查询参数
queryParams: {
workorderCode: null,
workorderName: null,
workorderType: null,
orderSource: null,
sourceCode: null,
productId: null,
productCode: null,
productName: null,
productSpc: null,
unitOfMeasure: null,
quantity: null,
quantityProduced: null,
quantityChanged: null,
quantityScheduled: null,
clientId: null,
clientCode: null,
clientName: null,
requestDate: null,
parentId: null,
ancestors: null,
status: 'CONFIRMED',
}
}
},
created() {
console.log("created 开始")
this.getListWorkOrder()
console.log("created 开始")
},
onLoad() {
this.getUser()
},
onReady() {
this.$refs.form.setRules(this.rules)
},
methods: {
getUser() {
getUserProfile().then(response => {
this.user = response.data
})
},
submit(ref) {
this.$refs.form.validate().then(res => {
updateUserProfile(this.user).then(response => {
this.$modal.msgSuccess("修改成功")
})
})
},
getListWorkOrder()
{
console.log("查询工单开始")
listWorkorder(this.queryParams).then(response => {
this.workorderList = response.rows;
this.loading = false;
console.log(response.rows);
});
console.log(this.workorderList);
console.log("查询工单结束");
}
}
}
page {
background-color: #ffffff;
}
.example {
padding: 15px;
background-color: #fff;
}
.segmented-control {
margin-bottom: 15px;
}
.button-group {
margin-top: 15px;
display: flex;
justify-content: space-around;
}
.form-item {
display: flex;
align-items: center;
flex: 1;
}
.button {
display: flex;
align-items: center;
height: 35px;
line-height: 35px;
margin-left: 10px;
}
2 APP中调用企业微信扫一扫功能
如果公众号，服务号，小程序，引用相应的artifacetId就行了，可参生作者说明文档
2.1 在pom.xml中文件引用包(主模块)
com.github.binarywang
weixin-java-cp
4.5.0
2.2 新增企业微信Service的类，需要配合企业微信的APID和应用的配置信息，如下
// 替换成自己应用的appId和secret，agentId，操作访法，百度或官方文件档
Integer agentId = 1111111;
String corpId="XXXXXXXX";
String corpSecret = "XXXXXXXX";
package com.ktg.web.controller.system;
import me.chanjar.weixin.common.bean.WxJsapiSignature;
import me.chanjar.weixin.common.error.WxErrorException;
import me.chanjar.weixin.cp.api.impl.WxCpServiceImpl;
import me.chanjar.weixin.cp.config.impl.WxCpDefaultConfigImpl;
import org.springframework.stereotype.Service;
@Service
public class QywxService {
//获取对应应用的签名
public WxJsapiSignature getJsapiSignture(String url) throws WxErrorException, WxErrorException {
// 替换成自己应用的appId和secret，agentId
Integer agentId = 1111111;
String corpId="XXXXXXXX";
String corpSecret = "XXXXXXXX";
WxCpDefaultConfigImpl config = new WxCpDefaultConfigImpl();
config.setCorpId(corpId); // 设置微信企业号的appid
config.setCorpSecret(corpSecret); // 设置微信企业号的app corpSecret
config.setAgentId(agentId); // 设置微信企业号应用ID
WxCpServiceImpl wxCpService = new WxCpServiceImpl();
wxCpService.setWxCpConfigStorage(config);
System.out.println("WxJsapiSignature===url==="+url);
WxJsapiSignature wxJsapiSignature = wxCpService.createJsapiSignature(url);
//wxJsapiSignature中可以直接获取签名信息 且方法内部添加了缓存功能
return wxJsapiSignature;
}
}
2.3 新增QywxController的类
（图片来源网络，侵删）
package com.ktg.web.controller.system;
import me.chanjar.weixin.common.bean.WxJsapiSignature;
import me.chanjar.weixin.common.error.WxErrorException;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class QywxController {
@Autowired
private QywxService qywxService;
@GetMapping(value = "/system/qywx/signature/")
public WxJsapiSignature getJsapiSignature(@RequestParam("url") String url) {
try { // 直接调用wxMpServer 接口
System.out.println("访问WxJsapiSignature=====/system/qywx/signature/" + url + "");
WxJsapiSignature wxJsapiSignature = qywxService.getJsapiSignture(url);
System.out.println("AppId===" + wxJsapiSignature.getAppId());
System.out.println("Timestamp===" + wxJsapiSignature.getTimestamp());
System.out.println("NonceStr===" + wxJsapiSignature.getNonceStr());
System.out.println("Signature===" + wxJsapiSignature.getSignature());
return wxJsapiSignature;
} catch (WxErrorException e) {
return null;
}
}
}
2.4 前端项目添加API的配置
3. 表单行内多个组件并排显示
思路：将一个View，把多个组件包在一起，在使用 display: flex 布局显示
提交
.dis-flex {
display: flex !important;
}
（图片来源网络，侵删）
文章版权声明：除非注明，否则均为主机测评原创文章，转载或复制请以超链接形式并注明出处。
还没有评论，来说两句吧...