vue+ElementUI使用笔记

1，使用表单验证：

//定义验证规则
window.varifyUtil = {
    //验证数字
    validateNumber: function(rule, value, callback){
        if (!isGreaterZero(value)) {
            return callback(new Error("请输入数字类型"));
        }
        callback();
    },
    //验证身份证号
    validateIdcard: function(rule, value, callback){//身份证验证
        var reg = /^(\d{})(\d{})(\d{})(\d{})(\d{})([-]|X)$/
        if (value && !reg.test(value)) {
            return callback(new Error('身份证号码格式有误'));
        }
        callback();
    },
    validateIdcardRequired: function(rule, value, callback){//身份证验证
        var reg = /^(\d{})(\d{})(\d{})(\d{})(\d{})([-]|X)$/
        if (!value || !reg.test(value)) {
            return callback(new Error('身份证号码格式有误'));
        }
        callback();
    },
    //验证手机
    validateMobile: function(rule, value, callback){
        var reg = /^\d{}$/
        if (value && !reg.test(value)) {
            return callback(new Error('电话号码格式有误'));
        }
        callback()
    },
    //验证手机
    validateMobileRequired: function(rule, value, callback){
        var reg = /^\d{}$/
        if (!reg.test(value)) {
            return callback(new Error('电话号码格式有误'));
        }
        callback()
    },
    //验证电话号码
    validateTel: function(rule, value, callback){
        var reg = /^[\d\+\*-]+$/
        if (value && !reg.test(value)) {
            return callback(new Error('电话号码格式有误'));
        }
        callback()
    },
    //验证电话号码
    validateTelRequired: function(rule, value, callback){
        var reg = /^[\d\+\*-]+$/
        if (!reg.test(value)) {
            return callback(new Error('电话号码格式有误'));
        }
        callback()
    },
    //验证邮箱
    validateEmail: function(rule, value, callback){
        var reg = /^[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?$/
        if (value && !reg.test(value)) {
            return callback(new Error('Email地址格式有误'));
        }
        callback()
    },
    //验证密码
    validatePwd: function(rule, value, callback){
        var reg = /^(\w){,}$/    //'[A-Za-z0-9_]'
        if(!value){
            return callback(new Error('请输入密码'));
        }else if (!reg.test(value)) {
            return callback(new Error('密码由字母、数字、下划线组成，长度为6～16个字符'));
        }
        callback()
    },
    validateBankNo: function(rule, value, callback){
        var reg = /^\d{,}$/
        if(value && !reg.test(value)) {
            return callback(new Error('银行卡号格式有误'))
        }
        callback();
    }
}

定义验证规则

<!--from表单：-->
<el-dialog title="补全机构信息" :visible.sync="dialogEnterpriseVisible">
    <el-form :model="enterpriseForm" :rules="enterpriseFormRules" ref="enterpriseForm">
    <el-form-item label="机构类型：" prop="func_type">
        <el-select v-model="enterpriseForm.func_type" placeholder="机构类型">
          <el-option v-for="ft in functypes" :key="ft.name" :value="ft.name" :value="ft.name"></el-option>
        </el-select>
    </el-form-item>
      <el-form-item label="机构名称：" prop="name">
        <el-input v-model="enterpriseForm.name" placeholder="机构名称"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogEnterpriseVisible = false">取 消</el-button>
      <el-button type="primary" @click="AddEnterprise">继续</el-button>
    </div>
</el-dialog>

<!--数据：-->
functypes:[],
enterpriseForm:{
    func_type:'',
    name:''
},
enterpriseFormRules:{
    func_type:[{required: true, message: '请选择机构类型', trigger: 'change'}],
    name:[{required: true, message: '请输入机构名称', trigger: 'blur'}]
},

<!--方法：-->
AddEnterprise:function(){
    var vm = this
    vm.$refs['enterpriseForm'].validate(function (valid) {
        if(valid){

        }else{

        }
    })
}

单独对一个input验证： vm.$refs['user'].validateField("name")

vm.$refs['user'].validateField("mobile",function(msg){
                        if(msg!=null&&msg!="")return
                        else
                        {
                            alert("asdasd")
                        }

                    })

①文本验证 {required: true, message: '请输入项目名称', trigger: 'blur'}

②下拉框验证 {required: true, message: '请选择项目类型', trigger: 'change'}

③自定义验证

{ required: true, validator: validateRegion, trigger: 'change' }

function validateRegion(rule, value, callback) {
            if (!VM.selectedProvince || !VM.selectedCity || !VM.selectedArea) {
                return callback(new Error('请选择省市区'));
            }
            callback();
        };

④长度验证 {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}

⑤日期选择验证 { type: 'date', required: true, message: '请选择时间', trigger: 'change' }

⑥金额验证（可有小数点）：

function validatorApplyAmountRequired(rule, value, callback) {
            if (value == '' || value == null) {
                return callback(new Error("输入不能为空"));
            }
            if (!isGreaterZeroNumber(value)) {
                return callback(new Error("请输入格式有误"));
            }
            callback();
        };

//验证V是否是大于0
function isGreaterZeroNumber(v) {
    if (isNaN(v) || !v) {
        return false;
    }
    if (v <) {
        return false;
    }
    return true;
}

⑦值下拉框验证：

[{required: true,type:"number",message: '请选择项目', trigger: 'change'}]

2，返回上一级

handleBack: function(obj){
            window.location.href = document.referrer;
            //window.history.go(-1) 不刷新
        }

3，调用子iframe里面的方法

 <!-- page content begin -->
            <div class="main" id="main">
                <iframe id="mainFrame" name="mainFrame" src="" width="100%" height="100%" frameborder=0 style="background-color: transparent;"></iframe>
            </div>
            <!-- page content end -->

//调用子页面flushSubData方法
                    try{
                        $(window.parent.document).contents().find("#mainFrame")[0].contentWindow.flushSubData();
                    }catch(err){}

3，input效果

 <el-input class="input-m" type="number" min="" v-model.trim="formProject.months">
                            <template slot="append">
                                    月
                              </template>
                    </el-input>

4，使用Echarts

①快速使用Echarts

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>

引入jse

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [, , , , , ]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

绘制一个简单的图表

②使用主题

下载主题：http://echarts.baidu.com/download-theme.html

<script src="echarts.js"></script>
<!-- 引入 vintage 主题 -->
<script src="theme/vintage.js"></script>
<script>
// 第二个参数可以指定前面引入的主题
var chart = echarts.init(document.getElementById('main'), 'vintage');
chart.setOption({
    ...
});
</script>

实例

③vue使用Echarts案例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta content="瓯云" name="description">
    <meta content="瓯云" name="author">
    <link href="/favicon.ico" rel="icon" type="image/x-icon" />
    <title>劳动力分析</title>
    <link rel="stylesheet" href="../../lib/elementui/elementui-1.4.1.css">
    <link rel="stylesheet" href="../../css/common.css?v=20171219001" />
    <link rel="stylesheet" href="../../css/console.css?v=20171219001" />
    <script src="../../lib/jquery-1.9.1.min.js"></script>
    <script language="javascript" src="../../lib/jquery.base64.js"></script>
    <script src="../../lib/jquery.cookie.js"></script>
    <script src="../../lib/elementui/vue-2.4.2.js"></script>
    <script src="../../lib/elementui/elementui-1.4.1.js"></script>
    <script src="../../lib/echarts/echarts-3.6.2.min.js"></script>
    <script src="../../lib/echarts/macarons.js"></script>
    <script src="../../lib/JSLINQ.js"></script>
    <script src="../../js/console.js?v=20171219001"></script>
    <script src="../../js/utils.js?v=20171219001"></script>

</head>

<body class="frame-body">

    <div class="wrap" id="oyunVue" v-loading.fullscreen.lock="loading" element-loading-text="">
        <!-- 导航条 -->
        <div class="breadcrumb clearfix"><h2>劳动力分析</h2></div>
         <!-- 搜索条件 start -->
        <div class="clearfix">
            <el-form :model="searchForm" :inline="true" class="demo-form-inline">
                <el-form-item>
                        <el-select v-model="searchForm.org_name" clearable placeholder="请选择">
                            <el-option
                                v-for="item in groupData"
                                :key="item.ent_name"
                                :label="item.ent_name"
                                :value="item.ent_name">
                            </el-option>
                        </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button :loading="searchLoading" type="primary" icon="search" @click="fnSearch">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-tabs v-model="activeName">
            <el-tab-pane label="工种分布表" name="first">
                <div id="worktype" style="width: 800px;height:400px;margin-left: 100px;margin-top: 20px"></div>
            </el-tab-pane>
            <el-tab-pane label="籍贯分布表" name="second">
                <div id="native" style="width: 800px;height:400px;margin-left: 100px;margin-top: 20px"></div>
            </el-tab-pane>
            <el-tab-pane label="年龄段分布表" name="third">
                <div id="age" style="width: 800px;height:400px;margin-left: 100px;margin-top: 20px"></div>
            </el-tab-pane>
          </el-tabs>

    </div>
    <script>
    var vueOptions = {
        data: {
            activeName: 'first',
            getGroupDataApi:"ProjectEnterprise/GetList",
            groupData:[],
            searchForm: {
                    prj_id: '',
                    org_name: '',
                },
           worktypeData:[],
           worktypeChart:{},
           nativeChart:{}
        },
        mounted: function() {
            this.pageAuth(747981802455041)
            this.projectAuth()
            this.getgroups()
            this.fnSearch()
            this.worktypeChart = echarts.init(document.getElementById('worktype'),"macarons");
            this.nativeChart = echarts.init(document.getElementById('native'),"macarons");
            this.ageChart = echarts.init(document.getElementById('age'),"macarons");

        },
        methods: {
           //查询班组
                getgroups:function(){
                    var vm=this
                    var option={
                        data:{
                            pageindex:1,
                            pagesize:9999,
                            parameter:{
                                prj_id:getCurrentProjectId()
                            }
                        },
                        route:vm.getGroupDataApi,
                        success:function(res){
                            vm.groupData=res.data
                        }
                    }
                    $.ajaxExt(option)
                },
                fnSearch:function(){
                    this.getgroups()
                    this.fnGetWorktype()
                    this.fnNative()
                    this.fnAge()
                },
                fnAge:function(){
                    var vm=this
                    vm.searchForm.prj_id=getCurrentProjectId()
                    var option={
                        data:{
                            parameter:vm.searchForm
                        },
                        route:'UsrEmployee/GetEmployeeAgeStatistics',
                        success:function(res)
                        {
                            if(res.ret!=0||res.data==''||res.data==null||res.data.length<=0)
                            {
                                vm.ageChart.setOption(vm.fnAgeChart("年龄段分布统计",[],[]))
                                return;
                            }

                            var fullnames= JSLINQ(res.data).Select(x=>x.fullname).ToArray();
                            var data= JSLINQ(res.data).Select(x=>x.age).ToArray();
                            // var data= new Array()
                            // for(var i=0;i<res.data.length;i++)
                            // {
                            //     data.push({value:res.data[i].age,name:res.data[i].fullname})
                            // }                            

                            vm.ageChart.setOption(vm.fnAgeChart("年龄段分布统计",fullnames,data))
                        }
                    }
                    $.ajaxExt(option)
                },
                fnNative:function(){
                    var vm=this
                    vm.searchForm.prj_id=getCurrentProjectId()
                    var option={
                        data:{
                            parameter:vm.searchForm
                        },
                        route:'UsrEmployee/GetEmployeeNativeStatistics',
                        success:function(res)
                        {
                            if(res.ret!=0||res.data==''||res.data==null||res.data.length<=0){
                                vm.nativeChart.setOption(vm.fnPieChart("籍贯分布统计",[],[]))
                                return;
                            }

                            var natives= JSLINQ(res.data).Select(x=>x.native).ToArray();
                            var data= new Array()
                            for(var i=0;i<res.data.length;i++)
                            {
                                data.push({value:res.data[i].count,name:res.data[i].native})
                            }                            

                            vm.nativeChart.setOption(vm.fnPieChart("籍贯分布统计",natives,data))
                        }
                    }
                    $.ajaxExt(option)
                },
                fnGetWorktype:function(){
                    var vm=this
                    vm.searchForm.prj_id=getCurrentProjectId()
                    var option={
                        data:{
                            parameter:vm.searchForm
                        },
                        route:'UsrEmployee/GetEmployeeWorktypeStatistics',
                        success:function(res)
                        {
                            if(res.ret!=0||res.data==''||res.data==null||res.data.length<=0)
                            {
                                vm.worktypeChart.setOption(vm.fnPieChart("工种分布统计",[],[]))
                                return;
                            }

                            var worktypes= JSLINQ(res.data).Select(x=>x.worktype).ToArray();
                            var data= new Array()
                            for(var i=0;i<res.data.length;i++)
                            {
                                data.push({value:res.data[i].icount,name:res.data[i].worktype})
                            }                            

                            vm.worktypeChart.setOption(vm.fnPieChart("工种分布统计",worktypes,data))
                        }
                    }
                    $.ajaxExt(option)
                },
                fnPieChart:function(title,names,datas){
                  var  option = {
                                title : {
                                    text: title,
                                    x:'center'
                                },
                                tooltip : {
                                    trigger: 'item',
                                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                                },
                                legend: {
                                    orient : 'vertical',
                                    x : 'left',
                                    data:names
                                },
                                calculable : true,
                                series : [
                                    {
                                        name:'访问来源',
                                        type:'pie',
                                        radius : '55%',
                                        center: ['50%', '60%'],
                                        data:datas
                                    }
                                ]
                            };
                    return option;
                },
                fnAgeChart:function(title,names,datas)
                {
                   var option = {
                        title : {
                            text: title,
                        },
                        tooltip : {
                            trigger: 'axis'
                        },
                        legend: {
                            data:['年龄']
                        },
                        calculable : true,
                        xAxis : [
                            {
                                type : 'category',
                                boundaryGap : false,
                                data : names
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value',
                                axisLabel : {
                                    formatter: '{value}岁'
                                }
                            }
                        ],
                        series : [
                            {
                                name:'年龄',
                                type:'line',
                                data:datas,
                                markPoint : {
                                    data : [
                                        {type : 'max', name: '最大值'},
                                        {type : 'min', name: '最小值'}
                                    ]
                                },
                                markLine : {
                                    data : [
                                        {type : 'average', name: '平均值'}
                                    ]
                                }
                            }
                        ]
                    };
                    return option;
                }
        }
    }
    var VM = createVue(vueOptions);
    $(function(){
        $('#advancedSearch').on('keypress',function(e){
            if(e.keyCode == '13') {
                VM.fnSearch();
                return false;
            }
        })
    })

     function flushSubData(){
            VM.fnSearch()
            VM.projectAuth()
        }

    </script>
</body>

</html>

案例

④设置x、y轴字体颜色

 xAxis : [
                            {
                                type : 'category',
                                data : ['木工', '水泥工', '瓦工', '钢筋工', '油漆工', '塔吊工', '后勤人员'],
                                axisTick: {
                                    alignWithLabel: true
                                },
                                axisLabel: {
                                    show: true,
                                    textStyle: {
                                        color: '#fff'
                                    }
                                }

                            }
                        ],
                        yAxis : [
                            {
                                type : 'value',
                                splitLine: {
                                    show: false
                                },
                                axisLabel : {
                                    formatter: '{value}',
                                    textStyle: {
                                        color: '#fff'
                                    }
                                }
                            }
                        ],

demo

5，JSLINQ使用

官网：https://archive.codeplex.com/?p=jslinq

包/案例下载：https://pan.baidu.com/s/14QZvQ7gcEmhxoFV1fT-Mvw

①引入js

<script src="../../lib/JSLINQ.js"></script>

②简单使用

var natives= JSLINQ(res.data).Select(x=>x.native).ToArray();