//js code var jiaban = {
	    	template:`
				         <i-form v-ref:form_jb  :model="form_jb" :rules="rules_form_jb" :label-width="80">
                     <Form-item label="时间" prop="rangeTime">
                        <Date-picker type="date" :value.sync="form_jb.rangeTime" placeholder="选择日期" class="w200"></Date-picker>
                    </Form-item>
	                   <Form-item label="加班小时" prop="hour">
	                       <i-input :value.sync="form_jb.hour" placeholder="数字1到8" class="w100"></i-input>
	                  </Form-item>
                    <Form-item label="备注">
                        <i-input :value.sync="form_jb.remarks" type="textarea" :autosize="{minRows: 6,maxRows: 12}" placeholder="请输入..." class="w400"></i-input>
                    </Form-item>
	                  <Form-item>
      			            <i-button type="primary"  @click="subMess('form_jb')" >提交</i-button>
      			            <a href="goLeaveList.html"><i-button type="ghost" style="margin-left: 8px">返回</i-button></a>
			              </Form-item>
                  </i-form>`,
             data:function(){
             	return {
  	             	form_jb: {
  	                   rangeTime:'',
  	                   hour:'',
  	                   remarks:''
  	             	},
                  rules_form_jb:{
                     rangeTime:[
                          { required: true,type:'date',message: '输入正确日期格式', trigger: 'change' }
                     ],
                     hour:[
                          { required: true, message: '数字1到8', trigger: 'blur change' },
                          { message: '数字1到8', trigger: 'blur change', pattern:/^[1-8]{1}$/}
                     ]
                  }
               }
             },
             methods:{
                subMess:function(){
                  var _this = this;
                   _this.$refs['form_jb'].validate((valid) => {
                      if (valid) {
                          if(confirm("确认是否提交?")){
                              this.$Message.success('提交成功!');
                          }
                      } else {
                          this.$Message.error('表单验证失败!');
                      }
                  })
               }
           }
	    }
var tiaoxiu = {
	template:`
		  <i-form :model="form_tx" :label-width="80">
               <Form-item label="时间">
			         <Date-picker type="date" :value.sync="form_tx.startTime" :options="form_tx.startOption" @on-change="checkStartTime" placeholder="开始日期" class="w200 _inline_block"></Date-picker>
                     <span>
                         <Checkbox :checked.sync="form_tx.single01" :disabled="states01">下午开始</Checkbox> 
                     </span>
			         <Date-picker type="date" :value.sync="form_tx.endTime" :options="form_tx.endOption" placeholder="结束日期" class="w200 _inline_block"></Date-picker>
			          <span>
                         <Checkbox :checked.sync="form_tx.single02" :disabled="states02">上午结束</Checkbox> 
                     </span>
              </Form-item>

               <Form-item label="休假天数">
                   <i-input :value.sync="calc_days" placeholder="自动计算" class="w200" :disabled="true"></i-input>
               </Form-item>

               <Form-item label=""  v-if="form_tx.startTime != ''">
                    <Row>
    				        <i-col span="24">
    				             <h3>可调休加班记录(两个月内的未调休过的加班)</h3>
    				           	 <i-table :content="self" :columns="overTimeList.txColumns" :data="overTimeList.txData" no-data-text="暂无数据"></i-table>
    				        </i-col>
    			        </Row>
			         </Form-item>

    			   <Form-item label="" v-if="form_tx.startTime !='' ">
                        <Row>
    				        <i-col span="24">
    				             <h3>剩余可调休时间总额  
                             <i-input :value.sync="form_tx.total" placeholder="自动计算" class="w100" :disabled="true"></i-input>
                         </h3>
    				        </i-col>
    			        </Row>
    			    </Form-item>

               <Form-item label="备注">
                 <i-input :value.sync="form_tx.remarks" type="textarea" :autosize="{minRows: 6,maxRows: 12}" placeholder="请输入..." class="w400"></i-input>
               </Form-item>

              <Form-item>
	            <i-button type="primary" :disabled="isSave" @click="subMess">确定</i-button>
	            <a href="goLeaveList.html"><i-button type="ghost" style="margin-left: 8px">返回</i-button></a>
	          </Form-item>

	          <div style="padding-left: 46px;padding-top:15px; padding-right: 100px; line-height: 20px; color: #333;font-size:12px;">当剩余可调休时间>=休假天数时 确定按钮才会显示 否则置灰</div>
          </i-form>`,
     data:function(){
     	  return {
     	  		 form_tx: {
                 startTime:'',
                 endTime:'',
                 remarks:'',
                 total:0,
                 single01:false,
                 single02:false,
                 startOption:{
                      disabledDate:function(date) {}
                 },
                 endOption:{
                      disabledDate:function(date) {}
                 }
         	    },
              overTimeList:{
             		 txColumns:[
                    {
                        title: '加班日期',
                        key: 'overTimeDate'
                    },
                    {
                        title: '天数',
                        key: 'days'
                    },
                    {
                        title: '项目名称',
                        key: 'projectName'
                    },
                    {
                        title: '经办人',
                        key: 'Mangage'
                    },
                    {
                        title: '处理时间',
                        key: 'processTime'
                    }
                 ],
                txData:[],
             	},
              states01:false,//下午开始  默认置灰状态
              states02:false,//上午结束  默认置灰状态
             	self:this
          }
     },
     methods:{
        dateFormat:function(){//年月日格式化
            Date.prototype.Format = function (fmt) {
                var o = {
                    "M+": this.getMonth() + 1, //月份
                    "d+": this.getDate(), //日
                    "h+": this.getHours(), //小时
                    "m+": this.getMinutes(), //分
                    "s+": this.getSeconds(), //秒
                    "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                    "S": this.getMilliseconds() //毫秒
                };
                if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
                for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                return new Date(fmt);
            }
        },
        options:function(){//监听日期限制
            var _this = this;
            // _this.form_tx.endOption.disabledDate = function(date) {
            //     return date && date.valueOf() < new Date(_this.form_tx.startTime).getTime();
            // };
            // _this.form_tx.startOption.disabledDate = function(date) {
            //     return date && date.valueOf() > new Date(_this.form_tx.endTime).getTime();
            // };

            _this.form_tx.endOption.disabledDate = function(date) {
                return date && date.valueOf() < new Date(moment(_this.form_tx.startTime).format('YYYY-MM-DD')).getTime()-86400000;
            };
            _this.form_tx.startOption.disabledDate = function(date) {
                return date && date.valueOf() > new Date(moment(_this.form_tx.endTime).format('YYYY-MM-DD')).getTime();
            };
        },
        checkStartTime:function(dateStr){//调休开始时间判断
             if(dateStr){
                this.getOverTimeList();
                this.form_tx.total = 20;
             }else{
                 this.overTimeList.txData = [];
                 this.form_tx.total = 0;
             }
        },
        getOverTimeList:function(){//获取可调休加班记录
             this.overTimeList.txData =  [
                  {
                      overTimeDate: '2017-1-2',
                      days: 18,
                      projectName: 'trms',
                      Mangage: '王大锤',
                      processTime: '2017-2-08',
                      id: '001',
                  },
                  {
                      overTimeDate: '2017-1-3',
                      days: 2,
                      projectName: '杭研官网',
                      Mangage: '王大锤2',
                      processTime: '2017-2-06',
                      id: '002',
                  }

            ];
        },
        subMess:function(){
            if(confirm("确认是否提交?")){

            }
        }
     },
     computed:{
        calc_days:function(){//自动计算 休假天数
            // var d1 = new Date(this.form_tx.startTime).Format("yyyy-MM-dd").getTime();
            // var d2 = new Date(this.form_tx.endTime).Format("yyyy-MM-dd").getTime();
            // var resultDate = (d2-d1 + 86400000)/ 1000 / 60 / 60 / 24 || '';

            var d1 = new Date(moment(this.form_tx.startTime).format('YYYY-MM-DD')).getTime();
            var d2 = new Date(moment(this.form_tx.endTime).format('YYYY-MM-DD')).getTime();
            var resultDate = (d2-d1 + 86400000)/ 1000 / 60 / 60 / 24 || '';

            if(d1 == d2){ //日期为同一天 判断
               if(this.form_tx.single01 && this.form_tx.single02){
                  this.form_tx.single01 = false;
                  this.form_tx.single02 = false;
               }

               if(this.form_tx.single01){
                  this.states02 = true;
               }else{
                  this.states02 = false;
               }

               if(this.form_tx.single02){
                  this.states01 = true;
               }else{
                 this.states01 = false;
               }
            }else{
                 this.states01 = false;
                 this.states02 = false;
            }

            if(resultDate && this.form_tx.single01){
               resultDate = resultDate - 0.5;
            }
            if(resultDate && this.form_tx.single02){
               resultDate = resultDate - 0.5;
            }
            return resultDate;
        },
        isSave:function(){ // 验证按钮是否置灰
           if(this.calc_days){
              console.log(this.form_tx.total)
              return !(this.calc_days <= this.form_tx.total);
           }else{
              return true;
           }
        }
     },
     ready: function(){
         this.options();
         this.dateFormat();
     }
}

 var qingjia = {
	template:`
		  <i-form :model="form_qj" :label-width="80">
             <Form-item label="时间">
			         <Date-picker type="date" :value.sync="form_qj.startTime" :options="form_qj.startOption" placeholder="开始日期" class="w200 _inline_block"></Date-picker>
                     <span>
                         <Checkbox :checked.sync="form_qj.single01" :disabled="states01">下午开始</Checkbox> 
                     </span>
			         <Date-picker type="date" :value.sync="form_qj.endTime" :options="form_qj.endOption" placeholder="结束日期" class="w200 _inline_block"></Date-picker>
			          <span>
                         <Checkbox :checked.sync="form_qj.single02" :disabled="states02">上午开始</Checkbox> 
                     </span>
              </Form-item>

               <Form-item label="休假天数">
                   <i-input :value.sync="calc_days_qj" placeholder="自动计算" class="w200" :disabled="true"></i-input>
               </Form-item>

               <Form-item label="备注">
                 <i-input :value.sync="form_qj.remarks" type="textarea" :autosize="{minRows: 6,maxRows: 12}" placeholder="请输入..." class="w400"></i-input>
               </Form-item>

              <Form-item>
	            <i-button type="primary" @click="subMess" :disabled="isSave">确定</i-button>
	            <a href="goLeaveList.html"><i-button type="ghost" style="margin-left: 8px">返回</i-button></a>
	          </Form-item>
          </i-form>`,
     data:function(){
     	return 	{
         	form_qj:{
                 startTime:'',
                 endTime:'',
                 remarks:'',
                 total:0,
                 single01:false,
                 single02:false,
                 startOption:{
                      disabledDate:function(date) {}
                 },
                 endOption:{
                      disabledDate:function(date) {}
                 }
           },
           states01:false,//下午开始  默认置灰状态
           states02:false,//上午结束  默认置灰状态
        }
     },
     methods:{
        dateFormat:function(){//年月日格式化
            Date.prototype.Format = function (fmt) {
                var o = {
                    "M+": this.getMonth() + 1, //月份
                    "d+": this.getDate(), //日
                    "h+": this.getHours(), //小时
                    "m+": this.getMinutes(), //分
                    "s+": this.getSeconds(), //秒
                    "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                    "S": this.getMilliseconds() //毫秒
                };
                if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
                for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                return new Date(fmt);
            }
        },
        options:function(){//监听日期限制
            var _this = this;
            // _this.form_qj.endOption.disabledDate = function(date) {
            //     return date && date.valueOf() < new Date(_this.form_qj.startTime).getTime();
            // };
            // _this.form_qj.startOption.disabledDate = function(date) {
            //     return date && date.valueOf() > new Date(_this.form_qj.endTime).getTime();
            // };
            //
            _this.form_qj.endOption.disabledDate = function(date) {
                return date && date.valueOf() < new Date(moment(_this.form_qj.startTime).format('YYYY-MM-DD')).getTime()-86400000;
            };
            _this.form_qj.startOption.disabledDate = function(date) {
                return date && date.valueOf() > new Date(moment(_this.form_qj.endTime).format('YYYY-MM-DD')).getTime();
            };
        },
        subMess:function(){
            if(confirm("确认是否提交?")){

            }
        }
     },
     computed:{
         calc_days_qj:function(){//自动计算 休假天数
            // var d1 = new Date(this.form_qj.startTime).Format("yyyy-MM-dd").getTime();
            // var d2 = new Date(this.form_qj.endTime).Format("yyyy-MM-dd").getTime();
            // var resultDate = (d2-d1 + 86400000)/ 1000 / 60 / 60 / 24 || '';
            //
            var d1 = new Date(moment(this.form_qj.startTime).format('YYYY-MM-DD')).getTime();
            var d2 = new Date(moment(this.form_qj.endTime).format('YYYY-MM-DD')).getTime();
            var resultDate = (d2-d1 + 86400000)/ 1000 / 60 / 60 / 24 || '';

            if(d1 == d2){ //日期为同一天 判断
               if(this.form_qj.single01 && this.form_qj.single02){
                  this.form_qj.single01 = false;
                  this.form_qj.single02 = false;
               }

               if(this.form_qj.single01){
                  this.states02 = true;
               }else{
                  this.states02 = false;
               }

               if(this.form_qj.single02){
                  this.states01 = true;
               }else{
                 this.states01 = false;
               }
            }else{
                 this.states01 = false;
                 this.states02 = false;
            }

            if(resultDate && this.form_qj.single01){
               resultDate = resultDate - 0.5;
            }
            if(resultDate && this.form_qj.single02){
               resultDate = resultDate - 0.5;
            }
            return resultDate;
        },
        isSave:function(){ // 验证按钮是否置灰
           if(this.calc_days_qj){
              console.log(this.form_qj.total)
              return !!!(this.calc_days_qj);
           }else{
              return true;
           }
        }
     },
     ready: function(){
         this.options();
         this.dateFormat();
     }
}

var newToAddLeave = function(){
	return new Vue({
		el:'#appList',
		data:{
		   leaveVal:"jiaban",
		   leaveType:[{code:"jiaban",babel:"加班"},{code:"tiaoxiu",babel:"调休"},{code:"qingjia",babel:"请假"}]
		},
		components:{
			jiaban:jiaban,
			tiaoxiu:tiaoxiu,
			qingjia:qingjia
		}
	})
}()

 

//html code
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>TRMS</title>

</head>
<body>
	<div id="appList" v-cloak>
    	<style type="text/css">
			.vue-system-fill .ivu-table td, .vue-system-fill .ivu-table th {
			    min-width: 0;
			    height: 48px;
			    box-sizing: border-box;
			}
		</style>
		<div class="vue-system-title">
			  <Breadcrumb separator=">">
        			<Breadcrumb-item href=""><span  v-text="'主页'"></span></Breadcrumb-item>
       				<Breadcrumb-item>
       			   		<span class="ivu-breadcrumb-item-link" v-text="'申请 '"></span>
       				</Breadcrumb-item>
               </Breadcrumb>
		</div>
		<div class="vue-system-fill w1200">
		      <div class="ivu-form-item" style="margin-left:28px;">
            	 <label class="ivu-form-item-label" style="width: 80px;padding-right:2px;" v-text="'申请类型'"></label>
            	 <i-select :model.sync="leaveVal" class="w200" style="display:inline-block;" v-cloak>
		       		 <i-option v-for="item in leaveType" :value="item.code">{{item.babel}}</i-option>
		         </i-select>
             </div>
		    <Row>
		        <i-col span="24">
		           	  <component :is="leaveVal" keep-alive></component>
		        </i-col>
	        </Row>
		</div>
	</div>
	<script src="lib/boot.js"></script>
</body>
</html>

  

 

分享vue ui时间组件用法的更多相关文章

  1. vue 自定义过度组件用法

    HTML: <div id="example-1"> <button @click="show = !show"> Toggle ren ...

  2. vue 专题 vue2.0各大前端移动端ui框架组件展示

    Vue 专题 一个数据驱动的组件,为现代化的 Web 界面而生.具有可扩展的数据绑定机制,原生对象即模型,简洁明了的 API 组件化 UI 构建 多个轻量库搭配使用 请访问链接: https://ww ...

  3. Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例

    Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 ...

  4. 为公司架构一套高质量的 Vue UI 组件库

    有没有曾遇过,产品要我们实现一个功能,但是 iview 或者 elementui 不支持,我们然后义正言辞的说,不好意思,组件库不支持,没法做到. 有没有曾和设计师争论得面红耳赤,其实也是因为组件库暂 ...

  5. 16款优秀的Vue UI组件库推荐

    16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...

  6. ElementUI(vue UI库)、iView(vue UI库)、ant design(react UI库)中组件的区别

    ElementUI(vue UI库).iView(vue UI库).ant design(react UI库)中组件的区别: 事项 ElementUI iView ant design 全局加载进度条 ...

  7. [转]vue Element UI走马灯组件重写

    https://blog.csdn.net/u013750989/article/details/82885482 1.element ui走马灯组件 -- carousel分析一波源代码:carou ...

  8. 强烈推荐优秀的Vue UI组件库

    Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正 ...

  9. 关于vue ui组件

    一.vue ui  组件 1: vue 当前很火前端框架vue 针对PC用户 pc 端与移动端区别 (1)屏幕宽度:992px > (2)操作方式:鼠标 事件   手指:触碰操作 -饿了么:基于 ...

随机推荐

  1. 嵌入式(C)笔试题

    1 读程序段,回答问题 (a) int main(int argc,char *argv[]) { int c=9,d=0; c=c++%5; d=c; printf("d=%d\n&quo ...

  2. Spring学习总结(14)——Spring10种常见异常解决方法

    在程序员生涯当中,提到最多的应该就是SSH三大框架了.作为第一大框架的Spring框架,我们经常使用. 然而在使用过程中,遇到过很多的常见异常,我在这里总结一下,大家共勉. 一.找不到配置文件的异常 ...

  3. POJ——T 3041 Asteroids

    http://poj.org/problem?id=3041 Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 23565   ...

  4. Fragmen直接来回切换deno

    思路: 第一步.建立一个activity.用来管理fragment. 第二步'获取fragmentManger 和fragmentTraction. private FragmentManager f ...

  5. Windows下VS2013+Caffe无GPU配置

    Windows版本的caffe工具包下载地址: 点击打开链接 1. 将下载的caffe-master.zip解压到 D:\Software\Caffe 文件夹下,把 D:\Software\Caffe ...

  6. ItemTouchHelper(实现RecyclerView上添加拖动排序与滑动删除的所有事情)

    简单介绍: ItemTouchHelper是一个强大的工具,它处理好了关于在RecyclerView上添加拖动排序与滑动删除的所有事情.它是RecyclerView.ItemDecoration的子类 ...

  7. healthcheck

    -- ============================================================================= -- USAGE  : sqlplus ...

  8. 关于 nginx 的配置的 location

    精准匹配和普通匹配:    server{            location =/index.htm{                                       ////精准匹 ...

  9. iOS——扬声器与听筒的切换

    1.扬声器模式:  NSError *error; [[AVAudioSession sharedInstance] overrideOutputAudioPort:AVAudioSessionPor ...

  10. HTML5按键打开摄像头和拍照

    HTML5实现按键打开摄像头和拍照 步骤: 1.创建一个打开摄像头按钮的标签.video标签.拍照的按钮标签.画布 2.实现打开摄像头的功能 3.实现拍照功能   具体实现代码: <!DOCTY ...