若依前端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文件，代码如下

<template>
  <view class="container">
    <view class="example">
      <uni-forms ref="form" :model="user" labelWidth="80px">
		
		<uni-forms-item label="工单号码" name="workorderCode">
		   <uni-data-select collection="workorderList" field="workorderCode as value, workorderCode as text"   @change="change"></uni-data-select>
		</uni-forms-item>  
		  
        <uni-forms-item label="用户昵称" name="nickName">
          <uni-easyinput v-model="user.nickName" placeholder="请输入昵称" />
        </uni-forms-item>
        <uni-forms-item label="手机号码" name="phonenumber">
          <uni-easyinput v-model="user.phonenumber" placeholder="请输入手机号码" />
        </uni-forms-item>
        <uni-forms-item label="邮箱" name="email">
          <uni-easyinput v-model="user.email" placeholder="请输入邮箱" />
        </uni-forms-item>
        <uni-forms-item label="性别" name="sex" required>
          <uni-data-checkbox v-model="user.sex" :localdata="sexs" />
        </uni-forms-item>
      </uni-forms>
      <button type="primary" @click="submit">提交</button>
    </view>
  </view>
</template>

<script>
  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("查询工单结束");
	  }
    }
  }
</script>

<style lang="scss">
  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;
  }
</style>

2 APP中调用企业微信扫一扫功能

        如果公众号，服务号，小程序，引用相应的artifacetId就行了，可参生作者说明文档，企业微信调用接口显示

2.1  在pom.xml中文件引用包(主模块)

           <dependency>
                <groupId>com.github.binarywang</groupId>
                <artifactId>weixin-java-cp</artifactId>
                <version>4.5.0</version>
            </dependency>

 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 布局显示

		<uni-forms-item label="工单号码" name="workorderCode" >
			
			<view class="dis-flex">
				<uni-data-select collection="getListWorkOrder()" field="workorderCode as value, workorderCode as text"   @change="change"></uni-data-select>
				<button type="primary" @click="submit">提交</button>						
			</view>
		  
		</uni-forms-item>  

  .dis-flex {
	  display: flex !important;
  }