<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8"><meta http-equiv="Expires" content="0"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-control" content="no-cache"><meta http-equiv="Cache" content="no-cache">
|
<title>订单日历</title>
|
</head>
|
|
<body>
|
<script type="text/javascript">
|
var pageVue = null;
|
function loadJsCss(callback) {
|
var jscss_urls = [
|
{id: "js7", type: "js", url: "root/js/calendar.js"},
|
];
|
window.top.initJsCss(document, jscss_urls, callback);
|
}
|
|
function initVue() {
|
new BasicsVue({
|
el: "#hbody",
|
data: {
|
title: "订单日历",
|
dataname: "md_calendar",
|
dataRequest: [
|
{
|
name: "md_calendar",//植入上报
|
url: "root/data/getEntitySet",
|
paramsobj: {dataname: "md_calendar", filter: "year=" + new Date().getFullYear()},
|
isnotoption: true, //true:不是选项
|
},
|
|
{
|
name: "implant_alter_date",//植入上报
|
url: "root/data/getEntitySet",
|
paramsobj: {dataname: "md_calendar", filter: "year=" + new Date().getFullYear() + " and is_implant_open='T'"},
|
isnotoption: true, //true:不是选项
|
},
|
{
|
name: "implant_alter_cancel_date",//植入上报撤销
|
url: "root/data/getEntitySet",
|
paramsobj: {dataname: "md_calendar", filter: "year=" + new Date().getFullYear() + " and is_implant_alter_open='T'"},
|
isnotoption: true, //true:不是选项
|
},
|
// {
|
// name: "status",//植入上报
|
// url: "root/getEnvironmentVariant/statusQuery",
|
// isnotoption: true, //true:不是选项
|
// },
|
],
|
|
dayListByYear: [],
|
dayObjByYear: {},
|
|
date: new Date(),
|
implantDates: ['2023-10-07','2023-10-08'],
|
implantDateObj: {},
|
implantAlterCancelDates: [],
|
bodyHeight: 0,
|
calendarHeight: 0,
|
tableFields: [
|
{isshow: "T", field: "implant_date", name: "植入日期"},
|
],
|
tableData: [],
|
tableAttr: {},
|
|
cbuttons_r: {
|
edit: true
|
},
|
|
},
|
|
created() {
|
var me = this;
|
this.popupParames = clone(Root.popupParames);
|
let clientHeight = document.documentElement.clientHeight;
|
this.bodyHeight = clientHeight - 52;
|
this.calendarHeight = 70 * 8 + 20;
|
|
this.dateSort();
|
|
},
|
|
mounted() {
|
var me = this;
|
// this.initData();
|
|
if (window.top.tab.selected.option.page_id) {
|
getPageByPageId(window.top.tab.selected.option.page_id, function(result){
|
me.cbuttons_r = result.buttons_r;
|
// me.cbuttons_r.edit = true
|
// me.ctabs_r = result.tabs_r;
|
|
//预加载数据
|
if (me.dataRequest && me.dataRequest.length) {
|
var result = {};
|
me.loadRequestData(me.dataRequest, result, function(data) {
|
me.dataRequestObj = data;
|
|
me.dayListByYear = []
|
me.dayObjByYear = {}
|
|
me.implantDates = []
|
me.implantAlterCancelDates = []
|
if (me.dataRequestObj.md_calendar) {
|
var dayListByYear_ = []
|
var dayObjByYear_ = {}
|
me.dataRequestObj.md_calendar.data.entityset.map(r=>{
|
// var date_ = dateFormat(new Date(r.doc_date), "yyyy-MM-dd")
|
dayListByYear_.push(r)
|
dayObjByYear_[r.doc_date] = r;
|
})
|
me.dayListByYear = dayListByYear_;
|
me.dayObjByYear = dayObjByYear_;
|
}
|
|
if (me.dataRequestObj.implant_alter_date) {
|
var implantDates_ = []
|
me.dataRequestObj.implant_alter_date.data.entityset.map(r=>{
|
var date_ = dateFormat(new Date(r.doc_date), "yyyy-MM-dd")
|
implantDates_.push(date_)
|
})
|
me.implantDates = implantDates_
|
}
|
|
me.dateSort();
|
|
me.$nextTick(() => {
|
hideLoading();
|
me.initData();
|
})
|
});
|
}
|
else {
|
me.$nextTick(() => {
|
hideLoading();
|
me.initData();
|
})
|
}
|
})
|
}
|
},
|
|
methods: {
|
initData() {
|
var me = this;
|
|
this.$nextTick(() => {
|
// 点击上个月
|
let prevBtn1 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(1)');
|
prevBtn1.addEventListener('click',() => {
|
console.log('上个月');
|
})
|
// 点击今天
|
let prevBtn2 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(2)');
|
prevBtn2.addEventListener('click',() => {
|
console.log('今天');
|
})
|
// 点击下个月
|
let prevBtn3 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(3)');
|
prevBtn3.addEventListener('click',() => {
|
console.log('下个月');
|
})
|
})
|
},
|
|
setDateClass(slotDate, slotData) {
|
var class_ = "";
|
if ((this.implantDates).includes(slotData.day)) {
|
class_ = "implant";
|
}
|
else if ((this.implantAlterCancelDates).includes(slotData.day)) {
|
class_ = "implantAlterCancel";
|
}
|
return class_;
|
},
|
|
setDateTooltip(slotDate, slotData) {
|
var aa = this.$refs.ref_calendar;
|
var tooltip_ = "";
|
if ((this.implantDates).includes(slotData.day)) {
|
tooltip_ = "销售植入报告截止日期";
|
}
|
else if ((this.implantAlterCancelDates).includes(slotData.day)) {
|
tooltip_ = "允许植入调整撤销的时间";
|
}
|
return tooltip_;
|
},
|
|
onDay(slotDate, slotData){
|
if (this.cbuttons_r.edit) {
|
this.onDoDay(slotDate, slotData);
|
}
|
},
|
|
onDoDay(slotDate, slotData) {
|
if (this.implantDates.indexOf(slotData.day) != -1) {
|
var row = clone(this.dayObjByYear[slotData.day])
|
|
if (!row) {
|
var date_ = slotData.day.split("-");
|
|
let lastMon = new Date(new Date(slotData.day).getTime);
|
lastMon.setMonth(lastMon.getMonth());
|
lastMon.setDate(0);
|
|
// 上一个月日期
|
var month_implant_upmonth_ = lastMon
|
row = {
|
id: slotData.day,
|
year: date_[0],
|
month: date_[1]*1,
|
doc_date: slotData.day,
|
is_implant_open: "",
|
is_implant_alter_open: "",
|
month_implant: null, // 可植入的日期
|
month_implant_alter: null, // 可撤销的植入的日期
|
}
|
}
|
|
row.is_implant_open = "F"
|
this.dayObjByYear[slotData.day] = row
|
|
this.setDayData("del", row);
|
|
// this.implantDates.remove(slotData.day);
|
}
|
else {
|
var row = clone(this.dayObjByYear[slotData.day])
|
if (!row) {
|
var date_ = slotData.day.split("-");
|
|
let lastMon = new Date(new Date(slotData.day).getTime);
|
lastMon.setMonth(lastMon.getMonth());
|
lastMon.setDate(0);
|
|
// 上一个月日期
|
var month_implant_upmonth_ = lastMon
|
row = {
|
id: slotData.day,
|
year: date_[0],
|
month: date_[1]*1,
|
doc_date: slotData.day,
|
is_implant_open: "",
|
is_implant_alter_open: "",
|
month_implant: null, // 可植入的日期
|
month_implant_alter: null, // 可撤销的植入的日期
|
}
|
}
|
row.is_implant_open = "T"
|
this.dayObjByYear[slotData.day] = row
|
|
this.setDayData("add", row);
|
|
// this.implantDates.push(slotData.day);
|
}
|
},
|
|
// 设置一个日期的对应值
|
setDayData(type_code, row) {
|
var me = this;
|
var operator_ = "saveEntity";//保存
|
var entity_ = clone(row);
|
var entity = {};
|
for (var r in entity_) {
|
if (entity_[r] || entity_[r] == "" || entity_[r] == false || entity_[r] == 0) {
|
entity[r] = entity_[r];
|
}
|
}
|
|
let param = {
|
dataname: this.dataname,
|
data: {},
|
}
|
param.data[this.dataname] = entity;
|
Server.call("root/data/" + operator_, param, function(result) {
|
console.log(result);
|
if (result.success) {
|
if (type_code == "add") {
|
me.implantDates.push(row.doc_date);
|
}
|
else if (type_code == "del") {
|
me.implantDates.remove(row.doc_date);
|
}
|
|
me.dateSort();
|
}
|
}, function(errorresult) {
|
console.log("错误信息", errorresult);
|
|
if (errorresult.messages && errorresult.messages.count && errorresult.messages.count.error) {
|
me.iscommit = false;
|
if (errorresult.messages.list) {
|
var config = {
|
totab: false,
|
icon: "icon-product",
|
text: "错误信息",
|
url: "module/tool/page/popup_error_messages.html",
|
data: {},
|
delta: errorresult.messages.list,
|
callback: function(obj, callback) {
|
if (callback) {
|
callback();
|
}
|
}
|
};
|
me.doPopupByPublic(config);
|
}
|
}
|
else {
|
Root.message({
|
type: 'error',
|
message: '保存失败'
|
});
|
}
|
});
|
},
|
|
onImport() {
|
|
},
|
|
dateSort() {
|
var tableData_ = [];
|
var implantDates_ = this.implantDates.sort();
|
implantDates_.map(d=>{
|
var row_d = {implant_date: d}
|
tableData_.push(row_d)
|
})
|
this.tableData = tableData_;
|
}
|
|
},
|
});
|
};
|
|
loadJsCss(function() {
|
initVue();
|
});
|
</script>
|
|
<style>
|
[v-cloak] {
|
display: none !important;
|
}
|
.el-card__body, .el-main {
|
padding: 0px;
|
}
|
.el-calendar-table .el-calendar-day {
|
height: 70px;
|
}
|
.el-tooltip__popper .popper__arrow {
|
border-width: 7px;
|
}
|
|
.el-calendar-table .el-calendar-day {
|
padding: 0px;
|
}
|
.el-calendar-day>div{
|
border-radius: 6px;
|
height: 100%;
|
padding: 8px;
|
box-sizing: border-box;
|
}
|
.implant_txt {
|
display: none;
|
}
|
.current .implant {
|
background-color: #6495ed;
|
color: #fff;
|
}
|
.current .implant .implant_txt{
|
display: flex;
|
font-size: 12px;
|
}
|
.current .implantAlterCancel {
|
background-color: #c38e39;
|
color: #fff;
|
}
|
.h_table {
|
margin-top: 0px;
|
}
|
</style>
|
|
<div v-cloak id="hbody" class="h_body" style="margin: 0;padding: 0;">
|
<div id="page_root" style="padding: 0px 0px 0px 10px">
|
<div class="topbar">
|
<span>{{title}}</span>
|
<div style="float: right; margin-right: 18px">
|
<el-button v-if="cbuttons_r.import" @click="onImport" :icon="buttonsconfig.import.icon">{{buttonsconfig.import.name}}</el-button>
|
</div>
|
</div>
|
|
<div :style="{display: 'flex', width: '100%', height: bodyHeight + 'px'}">
|
|
<div style="width: 63%; height: 100%; padding:1% 0px 0% 1%">
|
<div :style="{width: '100%', height: calendarHeight + 'px', display: 'flex', opacity: '1'}">
|
<el-card class="card-box" shadow="always">
|
<el-calendar ref="ref_calendar">
|
<template slot="dateCell" slot-scope="{date, data}">
|
<div :class="setDateClass(date, data)" @click="onDay(date, data)">
|
{{ data.day.split('-').slice(2).join('-')}}
|
<div class="implant_txt">可植入上报</div>
|
</div>
|
</template>
|
</el-calendar>
|
</el-card>
|
</div>
|
</div>
|
|
<div style="width: 33%; height: 100%; padding:1% 0px 0% 1%">
|
<el-card class="card-box" shadow="always">
|
<h-table
|
:table-fields="tableFields"
|
:table-data="tableData"
|
:table-height="calendarHeight"
|
:is-pagination="false"
|
:table-attr="tableAttr"
|
:isdraggableorder="false"
|
>
|
</h-table>
|
</el-card>
|
</div>
|
|
</div>
|
</div>
|
|
<div id="page_loading" style="position: absolute; top:0px; width: 100vw; height: 50vh;">
|
<div class="spinner">
|
<div class="cube1"></div>
|
<div class="cube2"></div>
|
</div>
|
</div>
|
</div>
|
</body>
|
</html>
|
