分享vue ui时间组件用法
//js code var jiaban = {
template:`
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:`
<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:`
<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
手机扫一扫
移动阅读更方便
你可能感兴趣的文章