<!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: "order_date",// 可下单日期
|
url: "root/data/getEntitySet",
|
paramsobj: {dataname: "md_calendar", filter: "year=" + new Date().getFullYear() + " and is_order_open='T'"},
|
isnotoption: true, //true:不是选项
|
},
|
{
|
name: "close_date",// 关账日期
|
url: "root/data/getEntitySet",
|
paramsobj: {dataname: "md_calendar", filter: "year=" + new Date().getFullYear() + " and is_order_close='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'],
|
orderDates: ['2023-10-07','2023-10-08'],
|
closeDates: ['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.orderDates = []
|
me.closeDates = []
|
|
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_
|
}
|
if (me.dataRequestObj.order_date) {
|
var orderDates_ = []
|
me.dataRequestObj.order_date.data.entityset.map(r=>{
|
var date_ = dateFormat(new Date(r.doc_date), "yyyy-MM-dd")
|
orderDates_.push(date_)
|
})
|
me.orderDates = orderDates_
|
}
|
if (me.dataRequestObj.close_date) {
|
var closeDates_ = []
|
me.dataRequestObj.close_date.data.entityset.map(r=>{
|
var date_ = dateFormat(new Date(r.doc_date), "yyyy-MM-dd")
|
closeDates_.push(date_)
|
})
|
me.closeDates = closeDates_
|
}
|
|
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.closeDates).includes(slotData.day)) {
|
class_ += " close";
|
}
|
if ((this.implantDates).includes(slotData.day)) {
|
class_ += " implant";
|
}
|
if ((this.orderDates).includes(slotData.day)) {
|
class_ += " order";
|
}
|
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, type){
|
if (this.cbuttons_r.edit) {
|
this.onDoDay(slotDate, slotData, type);
|
}
|
},
|
|
onDoDay(slotDate, slotData, type) {
|
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_order_open: "",
|
is_order_close: "",
|
is_implant_alter_open: "",
|
month_implant: null, // 可植入的日期
|
month_implant_alter: null, // 可撤销的植入的日期
|
}
|
}
|
|
var action = ""
|
if (type == "is_implant_open") { // 植入设置
|
if (this.implantDates.indexOf(slotData.day) != -1) { // 如果是可植入日期
|
row.is_implant_open = "F" // 设置不可植入
|
action = "del"
|
}
|
else {
|
row.is_implant_open = "T"
|
action = "add"
|
}
|
}
|
else if (type == "is_order_open") { // 订单设置
|
if (this.orderDates.indexOf(slotData.day) != -1) { // 如果是可下单日期
|
row.is_order_open = "F" // 设置不可下单
|
action = "del"
|
}
|
else {
|
row.is_order_open = "T"
|
action = "add"
|
}
|
}
|
else if (type == "is_order_close") { // 关账日
|
if (this.closeDates.indexOf(slotData.day) != -1) { // 如果是关账日
|
row.is_order_close = "F" // 设置不是关账日
|
action = "del"
|
}
|
else {
|
row.is_order_close = "T" // 关账日，不可植入，不可下单（可保存订单）
|
action = "add"
|
}
|
}
|
this.dayObjByYear[slotData.day] = row
|
this.setDayData(action, row, type);
|
},
|
|
// 设置一个日期的对应值
|
setDayData(action, row, type) {
|
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 (action == "add") {
|
if (type == "is_implant_open") {
|
me.implantDates.push(row.doc_date);
|
}
|
else if (type == "is_order_open") {
|
me.orderDates.push(row.doc_date);
|
}
|
else if (type == "is_order_close") {
|
me.closeDates.push(row.doc_date);
|
}
|
}
|
else if (action == "del") {
|
if (type == "is_implant_open") {
|
me.implantDates.remove(row.doc_date);
|
}
|
else if (type == "is_order_open") {
|
me.orderDates.remove(row.doc_date);
|
}
|
else if (type == "is_order_close") {
|
me.closeDates.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;
|
}
|
.order_txt {
|
display: none;
|
}
|
.close_txt {
|
display: none;
|
}
|
.button_implant_open, .button_order_open, .button_order_close{
|
display: inline-flex;
|
width: 45%;
|
height: 100%;
|
background-color: #d8d8d8;
|
align-items: center; /* 垂直居中 */
|
justify-content: center; /* 水平居中 */
|
border-radius: 5px;
|
}
|
.current .implant .button_implant_open {
|
background-color: #6495ed;
|
color: #fff;
|
border-radius: 5px;
|
}
|
.current .implant .implant_txt{
|
display: flex;
|
font-size: 12px;
|
}
|
.current .order .button_order_open {
|
background-color: #55aa7f;
|
color: #fff;
|
border-radius: 5px;
|
}
|
.current .order .order_txt{
|
display: flex;
|
font-size: 12px;
|
}
|
|
.current .close .button_order_close {
|
background-color: #d5726b;
|
color: #fff;
|
border-radius: 5px;
|
}
|
.current .close .close_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)" >
|
{{ data.day.split('-').slice(2).join('-')}}
|
<div style="height: 60%; display: flex; justify-content: space-around;">
|
<div class="button_implant_open" @click="onDay(date, data, 'is_implant_open')">
|
<div class="implant_txt">可植入</div>
|
</div>
|
<div class="button_order_open" @click="onDay(date, data, 'is_order_open')">
|
<div class="order_txt">可下单</div>
|
<!-- <div class="order_txt">
|
<el-time-select v-model="date.endtime" size="mini" :picker-options="{
|
start: '08:00',
|
step: '00:15',
|
end: '20:00'
|
}"
|
placeholder="选择时间">
|
</el-time-select>
|
</div> -->
|
</div>
|
<!-- <div class="button_order_close" @click="onDay(date, data, 'is_order_close')">
|
<div class="close_txt">关账日</div>
|
</div> -->
|
</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>
|
