封装工具系列---【封装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>
原文地址:https://www.cnblogs.com/chenhaiyun/p/15267349.html