Qxnw-utility NPM

utility

前端web一站式js工具包,提供枚举、http请求、配置文件加载、消息提示、常用工具函数及filter、统一服务注入 等服务及功能，一次引入随时调用各功能js：

1. 枚举

使用enum.js可实现字典数据、省市数据及自定义类型相关数据的保存、获取及filter过滤功能的使用。通过回调函数获取对应字典类型的数据并保存，使用时直接获取保存的数据。

2. 配置文件（env.conf.json）

对基础数据进行配置，存放在vue项目的public文件夹中打包时不会被编译混淆。有当前文件中可对菜单、系统信息、版权、api等相关数据进行配置，实现项目的快速运行。

3. 配置文件加载

实现配置文件（env.conf.json）的数据读取，同时可根据配置加载网络配置数据，网络数据将覆盖本地配置数据及合并。

4. http请求

对http网络请求进行封装，通过配置实现请求结果是否消息提示，同步或异步获取网络数据，使用简单方便。同时实现自定义不同状态码的处理，header头拦截处理。

5. 消息提示

提供success、fail、warning、info不同状态的消息提示，适配vant及element-ui组件提示框，可自定义消息模板。

6. 系统业务函数（sso）

处理业务系统相关的业务逻辑，提供code登录验证、菜单获取、系统信息获取、系统列表获取、修改密码、退出登录、获取路由title等功能。

7. 常用功能函数及filter

提供vue开发中常用的功能函数与filter，日期格式化、金额千分位、卡号格式化、手机号隐藏、字符串去空格、字体颜色、背景颜色、字符串截取等功能。

8. 统一js注入

提供对js的引入及将不同js注入到Vue.prototype中，以便全局使用。添加默认http403业务逻辑，405权限操作，本地配置文件的加载。

一、示例

1. utility工具包的引用（sso需对403操作）

import Vue from 'vue'
import App from './App'
import router from './router'
import ViewUI from 'view-design';
import ElementUI from 'element-ui';
Vue.use(ElementUI);
Vue.use(ViewUI);
Vue.config.productionTip = false

import utility from './utility'
Vue.use(utility);

router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  Vue.prototype.$sys.checkAuthCode(to)
  if (to.path != "/") {
      document.title = Vue.prototype.$sys.getTitle(to.path)
  }
  next()
})

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

2. utility工具包的引用（普通项目不带sso无需处理403状态码）

import Vue from 'vue'
import App from './App'
import router from './router'
import ViewUI from 'view-design';
import ElementUI from 'element-ui';
Vue.use(ElementUI);
Vue.use(ViewUI);
Vue.config.productionTip = false

import utility from './utility'
Vue.use(utility, false);

router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  Vue.prototype.$sys.checkAuthCode(to)
  if (to.path != "/") {
      document.title = Vue.prototype.$sys.getTitle(to.path)
  }
  next()
})

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

二、 main.js说明

main.js进行utility工具包中相关js的注入工作，预处理配置文件的加载，对http状态码403、405的拦截处理。同时根据配置处理相关加载功能

import { Enum } from './enum'
import { Http } from './http'
import { Env } from './env'
import { Utility } from './utility'
import { Sys } from './sys'
import { Message } from './message'

import packageData from '../../package.json'

/*
* 初始化注入
* import utility from './utility'
* Vue.use(utility);
* 或传入加载配置文件路径
* Vue.use(utility, "../static/env.conf.json");
*/
export default {
    install: function(Vue, inject403Code = true, path){
        Vue.prototype.$msg = new Message(Vue);
        Vue.prototype.$enum = new Enum();
        Vue.prototype.$http = new Http(Vue);
        Vue.prototype.$env = new Env(getConf(Vue, path))
        Vue.prototype.$sys = new Sys(Vue);
        Vue.prototype.$utility = new Utility();

        let that = Vue.prototype

        //设置http请求的服务器地址
        if (that.$env.conf.api && that.$env.conf.api.host){
            that.$http.setBaseURL(that.$env.conf.api.host);
        }

        //处理接口返回403时自动跳转到指定的地址
        if(inject403Code){ //注入时可配置是否默认处理403
            that.$http.addStatusCodeHandle(res => {
                var header=res.headers || {}
                var url = header.location || header["x-location"] || ""
                if(url){
                    window.location = url
                    return
                }
                return;
            }, 403);

            inject405CodeHandle(that) //405权限处理
        }

        //拉到服务器配置信息
        if (that.$env.conf.api.confURL){
            that.$env.load(function(){
                return that.$http.xget(that.$env.conf.api.confURL);  
            });
        }

        //拉取enum数据
        if (that.$env.conf.api.enumURL){
            that.$enum.callback(function(type){
                return that.$http.xget(that.$env.conf.api.enumURL, { dic_type: type || "" }, "")
            })
        }

        //保存初始数据
        if (that.$env.conf.enums){
            that.$enum.set(that.$env.conf.enums)
        }
    }
}

//获取配置数据
function getConf(Vue, path){
    if(path)
        return Vue.prototype.$http.xget(path) || {};

    if(!packageData)
        return

    path = packageData.scripts.serve ? "/env.conf.json" : "/static/env.conf.json"
    return Vue.prototype.$http.xget(path) || {}
}

function inject405CodeHandle(that){
    that.$http.addStatusCodeHandle(res => {
        that.$msg.fail("请求的接口与页面不匹配或未配置权限")
        return
    }, 405);
}

三、使用

1. enum.js的使用

<template>
    <div id="app">
        <el-form ref="form" :inline="true" class="form-inline pull-left">
            <el-form-item>
                <el-select size="medium" v-model="queryData.down_channel_no" class="input-cos" placeholder="请选择下游渠道编号">
                    <el-option value="" label="全部"></el-option>
                    <el-option v-for="(item, index) in downChannelNo" :key="index" :value="item.value" :label="item.name"></el-option>
                </el-select>
            </el-form-item>
        </el-form>

        <el-table>
            <el-table-column prop="down_channel_no" label="下游渠道编号" align="center">
                <template slot-scope="scope">
                    <span >{{scope.row.down_channel_no | fltrEnum("down_channel_no")}}</span>
                </template>
            </el-table-column>
        </el-table>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
        queryData:{},
        downChannelNo: this.$enum.get("down_channel_no"),  //获取相type数据
    }
  },
  mounted(){},
  methods:{}
}
</script>

2. env.js的使用

<template>
    <div id="app">
        {{ systemName }}
    </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
        systemName: this.$env.conf.name, //获取配置系统信息
        menus: this.$env.conf.menus  //获取配置菜单数据
    }
  },
  mounted(){},
  methods:{}
}

3. http.js的使用

<template>
    <div id="app">
        {{ systemInfo.systemName }}
    </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
        queryData: {},
        systemInfo: {}
    }
  },
  mounted(){
      this.query()
  },
  methods:{
      query(){ //异步获取
          this.$http.get("/system/info/get").then(res=>{
              this.systemInfo = res
          })
      },
      async query(){ //同步获取
          this.systemInfo = this.$http.get("/system/info/get")
      },
      queryShowTip(){ //带消息提示
          this.systemInfo = this.$http.get("/system/info/get", this.queryData, {}, true, true)
      },
      queryShowTipWithMsg(){ //自定义消息提示
          this.$http.get("/system/info/get", this.queryData, {}, "执行成功", "执行失败").then(res=>{
              this.systemInfo = res
          })
      },
      queryShowTipWithMsg(){ //自定义消息提示
          var sucMsg = { title: "成功", message: "执行成功", offset: 50, duration: 5000, position: "top-right" }
          var failMsg = { title: "失败", message: "执行失败，请稍候重试", offset: 50, duration: 5000, position: "top-right" }
          this.$http.get("/system/info/get", this.queryData, {}, sucMsg, failMsg).then(res=>{
              this.systemInfo = res
          })
      }
  }
}

4. message.js的使用

<template>
    <div id="app">
        {{ systemInfo.systemName }}
    </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
        systemInfo: {}
    }
  },
  mounted(){
      this.query()
  },
  methods:{
      query(){
          this.$http.get("/system/info/get").then(res=>{
              this.systemInfo = res
              this.$msg.success("数据获取成功")
          }).catch(err => {
              this.$msg.fail("数据获取失败，请稍候重试")
          })
      },
      query(){
          this.$http.get("/system/info/get").then(res=>{
              this.systemInfo = res
              var sucMsg = { title: "成功", message: "执行成功", offset: 50, duration: 5000, position: "top-right" }
              this.$msg.success(sucMsg)
          }).catch(err => {
              var failMsg = { title: "失败", message: "执行失败，请稍候重试", offset: 50, duration: 5000, position: "top-right" }
              this.$msg.fail(failMsg)
          })
      }
  }
}

5. sys.js的使用

<template>
  <div id="app">
    <nav-menu
      :menus="menus"
      :copyright="copyright"
      :copyrightcode="copyrightcode"
      :themes="system.themes"
      :logo="system.logo"
      :systemName="system.systemName"
      :userinfo="userinfo"
      :items="items"
      :pwd="pwd"
      :signOut="signOutM"
      ref="NewTap"
    >
    </nav-menu>
  </div>
</template>

<script>
import navMenu from 'nav-menu'; // 引入
export default {
  name: 'app',
  data() {
    return {
      system: {
        logo: "",
        systemName: "",  //系统名称
        themes: "", //顶部左侧背景颜色,顶部右侧背景颜色,右边菜单背景颜色
      },
      copyright: (this.$env.conf.copyright.company || "") + "Copyright©" + new Date().getFullYear() + "版权所有",
      copyrightcode: this.$env.conf.copyright.code,
      menus: [{}],  //菜单数据
      userinfo: {},
      items: []
    }
  },
  components: { //注册插件
    navMenu
  },
  mounted() {
    this.getMenu();
    this.getSystemInfo();
    this.userinfo = this.$sys.getUserInfo()  //获取用户信息
  },
  methods: {
    pwd() {
      this.$sys.changePwd() //修改密码
    },
    signOutM() {
      this.$sys.logout() //退出登录
    },
    getMenu() {
      this.$sys.getMenus().then(res => { //获取菜单
        this.menus = res;
        this.getUserOtherSys();
        var cur = this.$sys.findMenuItem(res);
        this.$refs.NewTap.open(cur.name, cur.path);  //设置默认打开路由
      });
    },
    //获取系统的相关数据
    getSystemInfo() {
      this.$sys.getSystemInfo().then(res => {
        this.system = res;
      })
    },
    //用户可用的其他系统
    getUserOtherSys() {
      this.$sys.getSystemList().then(res => {
        this.items = res;
      })
    },
  }
}
</script>

6. utility.js的使用

<template>
    <div id="app">
        <el-form ref="form" :inline="true" class="form-inline pull-left">
            <el-form-item>
                <el-select size="medium" v-model="queryData.down_channel_no" class="input-cos" placeholder="请选择下游渠道编号">
                    <el-option value="" label="全部"></el-option>
                    <el-option v-for="(item, index) in downChannelNo" :key="index" :value="item.value" :label="item.name"></el-option>
                </el-select>
            </el-form-item>
        </el-form>

        <el-table>
            <el-table-column prop="down_channel_no" label="下游渠道编号" align="center">
                <template slot-scope="scope">
                    <span >{{scope.row.down_channel_no | fltrEnum("down_channel_no")}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="split_order_face" label="拆单面值" align="center">
                <template slot-scope="scope">
                    <span>{{scope.row.split_order_face | fltrNumberFormat(2)}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="create_time" label="创建时间" align="center">
                <template slot-scope="scope">
                    <span>{{scope.row.create_time | fltrDate }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="phone_no" label="手机号" align="center">
                <template slot-scope="scope">
                    <span>{{scope.row.phone_no | fltrPhoneNumberFormat }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" align="center">
                <template slot-scope="scope">
                    <span :class="scope.row.status | fltrTextColor">{{scope.row.status | fltrEnum("status") }}</span>
                </template>
            </el-table-column>
        </el-table>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
        queryData:{
            phone: ""
        },
        downChannelNo: this.$enum.get("down_channel_no"),
    }
  },
  mounted(){
      var data = this.$utility.dateFormat(new Date())   //日期格式化
      var phone = this.$utility.trim(this.queryData.phone) //空格删除
  },
  methods:{}
}
</script>

7. 数据配置

{
    "name": "用户系统",
    "copyright": { //版权信息
        "company": "四川千行你我科技股份有限公司",
        "code": "蜀ICP备20003360号"
    },
    "system": {}, //系统信息
    "api": { //api相关信息
        "host": "http://192.168.5.108:6677",
        "confURL": "/system/webconfig",
        "enumURL": "/dds/dictionary/get"
    },
    "menus": [], //菜单数据
    "sysList": [], //系统列表
    "enums": [ //默认枚举
        {
            "name": "全国",
            "type": "province",
            "value": "*",
            "group": "fltr"
        },
        {
            "name": "全市",
            "type": "city",
            "value": "*",
            "group": "fltr"
        }
    ],
    "textColor": {}, //字符颜色样式
    "bgColor": {} //背景颜色样式
}

@infinitebrahmanuniverse/nolb-qx @everything-registry/sub-chunk-2518

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago