分享vue ui时间组件用法
2024-08-31 16:07:22
//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>
最新文章
- html容易犯的错误
- 记录一次Mac虚拟机安装的过程(有图有真相)
- Codeforce Round #220 Div2
- 从协议VersionedProtocol开始1
- OpenHCI - Data Transfer Types
- iOS Automation Test
- C#学习笔记(四):委托和事件
- 后台JOB&;EVENT JOB
- 存储过程实例总结(开发中的错误与总结,调试,数据库函数DATEDIFF计算当前日期是否在本周内)
- nginx和apache的优缺点比较
- WindowsAzure上把WebApp和WebService同时部署在一个WebRole中
- 重温基础之-css盒模型
- Servlet主要相关类核心类 容器调用的过程浅析 servlet解读 怎么调用 Servlet是什么 工作机制
- day19 python之re模块正则练习
- Python列表操作集合
- 用Sqoop进行Hive和MySQL之间的数据互导
- python paramiko ssh登录交换机执行命令
- 原生js的简单倒计时
- Mysql支持哪几种索引
- Python virtualenvwrapper在Win下的安装和管理