zoukankan      html  css  js  c++  java
  • 封装工具系列---【封装H5页面管理机构和证件类型下拉框数据处理的方法】

    摘要:开发情景:在工作中,看到前辈们的代码比较好的我会记录下来 方便以后查阅
    下面大概是H5页面封装的一些函数和方法,对页面的管理机构、数据来源、证件类型下拉框进行处理
    以下对目录进行说明:
    1.发送请求的写在api文件夹
    2.对于公共的的方法写在mixins中
    3.vue页面是b.vue

    api/gettype: 

    /**
    * @parems {String} carId需要查询的内容,certType 查询证件类型 outDataSourceType 查询外部数据来源
    * @return {Promise}
    */
    export function getType(catId = "") {
        return Request({
            url: `url/${catId}`,//`/page/rest/dict/${catId}`
            method: "get"
        })
    }

    api/getorginzatain:

    import Request from '@utils/request'
    import qs from "qs"
    //获取当前登陆用户的所有组织机构
    export function getOriganzationCode(flag){
        if(flag){
            return Request({
                url:"/page/res/org/..",
                method:"get",
                params:{
                    flag
                }
            })
        }else{
            return request({
                url:"/page/res/org/..",
                method:"get",
            })
        }
    
    }

    mixins/a.js:  (封装的方法)

    import {getOriganzationCode} from "@/api/getorginzatain"
    export default{
        methods:{
            /*获取组织机构代码*/
            async xhrGetOrg(){
                const res= await getOriganzationCode()
                if(res&&res.code==200){
                    this.popups.manageorCode.columns=res.data.map(item=>({
                        text:item.manageorgFullname,
                        value:item.id 
                    }))
                }
            },
    
            /*处理数据*/
            setColumns(list=[],trpe=""){
                const columns=list.map(item =>{
                    return {
                        text: item.text,
                        value:item.code
                    }
                })
                this.popups[type].columns=columns;
            }
        }
    }
       

    b.vue: (页面应用)

    <template>
      
    </template>
    
    <script>
    import search from "@/mixins/a.js"
    import {getType} from "@/api/gettype"
    export default { 
        data(){
            return {
                popups:{
                    manageorCode:{
                        columns:[],
                    }
                },
    
                forVals:{
                    manageorCode:""
                }
            }
    
        },
        mixins:[search],
        async mounted(){
            try {
                await this.xhrGetOrg()
                await this.xhrgetType()
            } catch(e){
                console.log(e);
            }
    
            for(var i=0; i<this.manageorCode.columns.length;i++){
                if(this.manageorCode.columns[i].value==this.userinfo.manageOrgId){
                   this.forVals. manageorCode=this.popups.manageorCode.columns[i]
                   this.i=i
                   break
                }
    
            }
        },
    
        methods:{
            //获取组织机构代码
            async xhrgetType(){
                try{
                    const auditStatusRes=await getType('outdataAuditStatus')
                    if(auditStatusRes&&auditStatusRes.code==200){
                        this.setColumns(auditStatusRes.data.items,'auditStatus')
                    }
                } catch(e){
                    console.log(e);
                }
            }
    
        }
    }
    </script>
    
    <style>
    
    </style>
  • 相关阅读:
    nodejs安装express及ejs模板
    nodejs开启服务器
    php 汉字转拼音
    使PHP像js一样链式写法
    apache出现\xef\xbb\xbf
    更改CI自定义类构造函数的传参方式
    DEV ComBoxEdit实现模糊检索数据
    微软一站式示例代码库(中文版)20110924版本, 新添加ASP.NET, Windows Base, Silverlight, WinForm等20个Sample
    Windows Azure 系列分享一:开始基于Windows Azure的开发与部署所需的概念和软件
    Windows Azure 系列分享二: Worker Role & Web Role
  • 原文地址:https://www.cnblogs.com/chenhaiyun/p/15267349.html
Copyright © 2011-2022 走看看