1. MS前端库

static
└─plugins 第三方插件
    └─ms 铭软插件
        └─1.0.0
                compatible.js
                ms.dict.js
                ms.http.js
                ms.js
                ms.upload.js
                ms.util.js
                ms.vue.expand.js

2. compatible.js

兼容ie 重写合并js对象方法，在ie浏览器中使用es6 语法"Object.assign()"合并对象报错，可以引用该js

3. ms.dict.js 字典

//初始化
ms.dict.list("A类型,B类型,C类型","子业务类型");
//获取值
ms.dict.getDictValue("A类型标签");
ms.dict.getDictValue("C类型标签",3);

4. ms.http.js 封装http请求

封装了axios，设置前端请求头和异常的拦截

   /**
     * 封装get方法
     * @param url
     * @param data
     * @returns {Promise}
     */
   ms.http.get("**/**.do", {id:1}).then(function (res) {
           // 根据返回结果处理业务
        }).catch(function (err) {
            console.log(err);
        });

    /**
     * 封装post请求
     * @param url
     * @param data
     * @returns {Promise}
     */
   ms.http.post("**/**.do", {id:1}).then(function (res) {
            // 根据返回结果处理业务
        }).catch(function (err) {
            console.log(err);
        });
    /**
     * 封装put请求
     * @param url
     * @param data
     * @returns {Promise}
     */
   ms.http.put("**/**.do", {id:1}).then(function (res) {
            // 根据返回结果处理业务
        }).catch(function (err) {
            console.log(err);
        });
     /**
        * 封装patch请求
        * @param url
        * @param data
        * @returns {Promise}
        */
   ms.http.patch("**/**.do", {id:1}).then(function (res) {
          // 根据返回结果处理业务
       }).catch(function (err) {
           console.log(err);
       });

5. ms.js 基础变量定义

(function(window) {
    var ms = {
        base: null, //主机地址
        login:"", //登录页面
        debug:true, //测试模式
        log:function(msg) {
            console.log(msg);
        }
    }
    window.ms = ms;
})(window);

6. ms.util.js 通用工具

6.1. getParameter 地址栏获取参数

// 地址栏： localhost:8080/ms/test.do?modelId=12
ms.util.getParameter("modelId");

6.2. treeData 列表数据转化为树形结构的列表

var source = [
    {modelId:1,modelModelId:0,children:[]},
    {modelId:2,modelModelId:1,children:[]},
    {modelId:3,modelModelId:1,children:[]},
];
//传入数据源、设置 modelId 和 modelModelId 属性为对应关系，最后传入子元素需要装入的属性
console.log(ms.util.treeData(source,'modelId','modelModelId','children'));

// 输出
[{
    "modelId": 1,
    "modelModelId": 0,
    "children": [{
        "modelId": 2,
        "modelModelId": 1,
        "children": []
    }, {
        "modelId": 3,
        "modelModelId": 1,
        "children": []
    }]
}]

6.3. childValidate 验证是否为子集

var sourceList=[
    {id:1,progressId:0},
    {id:2,progressId:1},
    {id:3,progressId:1}
];
var data = {
    id:5,
    progressId:2
};
//传入数据源
console.log(ms.util.childValidate(sourceList,data.id,data.progressId,"id","progressId"))
// 输出
true

6.4. moneyFormatter 金额格式化

console.log(ms.util.moneyFormatter(100));
// 输出
¥100.00

6.5. date 日期处理

日期转字符串

console.log(ms.util.date.fmt(new Date(),"yyyy-MM-dd"))
// 输出
2020-07-04

根据具体时间返回模糊时间.根据当前时间显示：一小时前、昨天

var time = new Date();
console.log(ms.util.date.diyFmt(time));
// 输出
刚刚

6.6. array 数组工具

console.log(JSON.stringify(ms.util.array.unique([{"a":1},{"a":9},{"a":1},{"b":2}],"a")))
// 输出
[{"a":1},{"a":9},{"b":2}]

6.7. log 日志打印

重写console.log，可以通过ms.debug控制日志的打印

ms.log("hello")
// 输出
hello

6.8. convert 转化

存储单位

console.log(ms.util.convert.byte(1024));
// 输出
1 KB

经纬度转距离(米)

var lon1 = 120.0;
var lat1 = 120.0;
var lon2 = 100.0;
var lat2 = 100.0;
console.log(ms.util.convert.distance(lon1,lat1,lon2,lat2));
// 输出
2486275

6.9. exportTable 导出表格

<el-table id="efficiencyTable"  sum-text="合计" :data="tableData">
    <el-table-column label="项目名称" prop='projectName' ></el-table-column>
    <el-table-column label="成员名称" prop="managerNickName" ></el-table-column>
    <el-table-column label="种类"  prop="pdmType" ></el-table-column>
    <el-table-column label="收入金额" prop="pdmMoney"></el-table-column>
</el-table>

var tableNead ={
        column:[
            {filed: "projectName",label:"项目名称",width:50},
            {filed: "managerNickName",label:"成员名称",width:50},
            {filed: "pdmType",label:"种类",width:50},
            {filed: "pdmMoney",label:"收入金额",width:50},
        ],
        countFiled:["pdmMoney"],
    }
    var data = [{"projectName":"项目A","managerNickName":"开发","pdmMoney":200},{"projectName":"项目A","managerNickName":"测试","pdmMoney":200}];
    var dom = that.$el.querySelector('#efficiencyTable');
    ms.util.exportTable(dom, "绩效报表", data,tableNead);

6.10. store window.sessionStorage方法封装

ms.util.store.set("name",'MS');
ms.util.store.get("name");
ms.util.store.remove("name");

6.11. ms.vue.expand.js vue 扩展属性方法

表格中的数字需要格式化金钱类型或百分数

<!-- :formatter="$table.moneyFormatter" :formatter="$table.percentageFormatter"-->
<el-table>
    <el-table-column label="送审造价"   prop="projectSendFee"  :formatter="$table.moneyFormatter"></el-table-column>
</el-table>

(function() {
    Vue.prototype.$table = {}
    Vue.prototype.$table.moneyFormatter = function (row, column, cellValue, index) {
        if (cellValue != undefined) {
            return accounting.formatMoney(cellValue, '¥')
        } else {
            return ''
        }
    }
    Vue.prototype.$table.percentageFormatter = function (row, column, cellValue, index) {
        if (cellValue != undefined) {
            return cellValue+"%";
        } else {
            return '-'
        }
    }
}())

7. 常用交互

7.1. 删除提示

//确认操作提示模版
...
    var that = this;
    that.$confirm('提示信息', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(function () {
       //确认后业务代码

    }).catch(function () {
        that.$notify({
            type: 'info',
            message: '操作已取消'
        });
    });
...

7.2. 更改ms.manager的定义方式

ms.manager定义在src/main/webapp/WEB-INF/manager/include/head-file.ftl中，默认获取yml配置的ms.manager.path，开发者可以在此处修改定义规则。

前端方法