178 lines
7.4 KiB
Vue
178 lines
7.4 KiB
Vue
|
|
|||
|
|
<template>
|
|||
|
|
<el-col :sm="24" :md="pzoption.mdwidth">
|
|||
|
|
<i class="iconfont icon-shezhi pull-right widgetset hidden-print" @click.stop="dialogInputVisible = true"></i>
|
|||
|
|
<i class="iconfont icon-shanchu pull-right widgetdel hidden-print" @click.stop="delWid(pzoption.wigdetcode)"></i>
|
|||
|
|
<el-form-item :label="pzoption.title">
|
|||
|
|
<el-input v-model="pzoption.value" style="display:none">
|
|||
|
|
</el-input>
|
|||
|
|
<el-date-picker v-model="childpro.chivalue" v-if="childpro.datetype=='d'"
|
|||
|
|
align="right"
|
|||
|
|
size="small"
|
|||
|
|
type="daterange"
|
|||
|
|
range-separator="-"
|
|||
|
|
:value-format="childpro.dateformat"
|
|||
|
|
format="yy 年 MM 月 dd 日"
|
|||
|
|
start-placeholder="开始日期"
|
|||
|
|
end-placeholder="结束日期"
|
|||
|
|
:picker-options="childpro.pickerOptionsd"
|
|||
|
|
unlink-panels >
|
|||
|
|
</el-date-picker>
|
|||
|
|
|
|||
|
|
<el-date-picker v-model="childpro.chivalue" v-if="childpro.datetype=='m'"
|
|||
|
|
type="monthrange"
|
|||
|
|
align="right"
|
|||
|
|
size="small"
|
|||
|
|
unlink-panels
|
|||
|
|
:value-format="childpro.dateformat"
|
|||
|
|
range-separator="-"
|
|||
|
|
start-placeholder="开始月份"
|
|||
|
|
end-placeholder="结束月份"
|
|||
|
|
:picker-options="childpro.pickerOptionsd1">
|
|||
|
|
</el-date-picker>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-dialog title="组件属性" :visible.sync="dialogInputVisible">
|
|||
|
|
<el-form :model="childpro">
|
|||
|
|
<el-form-item label="默认当前时间">
|
|||
|
|
<el-switch v-model="childpro.ishasdefault"></el-switch>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="起止类型">
|
|||
|
|
<el-radio-group v-model="childpro.datetype" size="mini" style="width:100%">
|
|||
|
|
<el-radio-button label="d">日</el-radio-button>
|
|||
|
|
<el-radio-button label="m">月</el-radio-button>
|
|||
|
|
</el-radio-group>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
</el-dialog>
|
|||
|
|
</el-col>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
module.exports = {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
dialogInputVisible: false,
|
|||
|
|
childpro: {
|
|||
|
|
placeholder: "占位符",
|
|||
|
|
dateformat: "yyyy-MM-dd",
|
|||
|
|
ishasdefault: true,
|
|||
|
|
disabled: false,
|
|||
|
|
chivalue: [],
|
|||
|
|
datetype: "d",
|
|||
|
|
pickerOptionsd: {
|
|||
|
|
shortcuts: [{
|
|||
|
|
text: '最近一周',
|
|||
|
|
onClick(picker) {
|
|||
|
|
const end = new Date();
|
|||
|
|
const start = new Date();
|
|||
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
|||
|
|
picker.$emit('pick', [start, end]);
|
|||
|
|
}
|
|||
|
|
}, {
|
|||
|
|
text: '最近一个月',
|
|||
|
|
onClick(picker) {
|
|||
|
|
const end = new Date();
|
|||
|
|
const start = new Date();
|
|||
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
|||
|
|
picker.$emit('pick', [start, end]);
|
|||
|
|
}
|
|||
|
|
}, {
|
|||
|
|
text: '最近三个月',
|
|||
|
|
onClick(picker) {
|
|||
|
|
debugger;
|
|||
|
|
alert(1)
|
|||
|
|
const end = new Date();
|
|||
|
|
const start = new Date();
|
|||
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
|||
|
|
picker.$emit('pick', [start, end]);
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
},
|
|||
|
|
pickerOptionsd1: {
|
|||
|
|
shortcuts: [{
|
|||
|
|
text: '本月',
|
|||
|
|
onClick(picker) {
|
|||
|
|
picker.$emit('pick', [new Date(), new Date()]);
|
|||
|
|
}
|
|||
|
|
}, {
|
|||
|
|
text: '今年至今',
|
|||
|
|
onClick(picker) {
|
|||
|
|
const end = new Date();
|
|||
|
|
const start = new Date(new Date().getFullYear(), 0);
|
|||
|
|
picker.$emit('pick', [start, end]);
|
|||
|
|
}
|
|||
|
|
}, {
|
|||
|
|
text: '最近六个月',
|
|||
|
|
onClick(picker) {
|
|||
|
|
debugger;
|
|||
|
|
alert(1)
|
|||
|
|
const end = new Date();
|
|||
|
|
const start = new Date();
|
|||
|
|
start.setMonth(start.getMonth() - 6);
|
|||
|
|
picker.$emit('pick', [start, end]);
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
props: ['pzoption', 'index'],
|
|||
|
|
methods: {
|
|||
|
|
delWid: function (wigdetcode) {
|
|||
|
|
this.$root.nowwidget = {};
|
|||
|
|
_.remove(this.$root.FormData.wigetitems, function (obj) {
|
|||
|
|
return obj.wigdetcode == wigdetcode;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
senddata: function () {
|
|||
|
|
this.pzoption.childpro = JSON.parse(JSON.stringify(this.childpro));
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted: function () {
|
|||
|
|
var chi = this;
|
|||
|
|
chi.$nextTick(function () {
|
|||
|
|
chi.childpro.disabled = app.isview;
|
|||
|
|
if (chi.$root.addchildwig) {
|
|||
|
|
chi.$root.addchildwig();//不能缺少
|
|||
|
|
}
|
|||
|
|
if (chi.pzoption.childpro.dateformat) {
|
|||
|
|
chi.childpro = chi.pzoption.childpro;
|
|||
|
|
|
|||
|
|
} else {
|
|||
|
|
chi.senddata();
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
if (chi.childpro.ishasdefault && app.isview) {
|
|||
|
|
var nowdate = ComFunJS.getnowdate('yyyy-mm') + "-01";
|
|||
|
|
chi.childpro.chivalue = [nowdate, nowdate];
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
childpro: { //深度监听，可监听到对象、数组的变化
|
|||
|
|
handler(newV, oldV) {
|
|||
|
|
this.senddata();
|
|||
|
|
},
|
|||
|
|
deep: true
|
|||
|
|
},
|
|||
|
|
"childpro.chivalue": {
|
|||
|
|
handler(newV, oldV) {
|
|||
|
|
|
|||
|
|
if (newV && newV.length > 0) {
|
|||
|
|
var sdate = newV[0];
|
|||
|
|
var temp = this.childpro.datetype;
|
|||
|
|
var edate = ComFunJS.format(ComFunJS.DateAdd(ComFunJS.StringToDate(newV[1]), temp, 1), 'yyyy-MM-dd');
|
|||
|
|
this.pzoption.value = sdate + "," + edate;
|
|||
|
|
}
|
|||
|
|
if (newV == null) {
|
|||
|
|
//清空日期时不能为null
|
|||
|
|
this.childpro.chivalue = "";
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
deep: true
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|