<!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: [],
|
|
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: "doc_date", name: "日期"},
|
{isshow: "T", field: "is_implant_open", name: "允许植入"},
|
{isshow: "T", field: "is_order_open", name: "允许下单"},
|
{isshow: "T", field: "order_open_time", name: "关账时间"},
|
],
|
tableAttr: {},
|
|
cbuttons_r: {
|
edit: true
|
},
|
calendar_month: new Date(), // 日历的月份
|
load_loading: true,
|
load_year: "", // 点击的年份
|
load_month: "", // 点击的月份
|
load_data: [],
|
load_data_map: {},
|
endtime: "",
|
},
|
|
created() {
|
var me = this;
|
this.popupParames = clone(Root.popupParames);
|
let clientHeight = document.documentElement.clientHeight;
|
this.bodyHeight = clientHeight - 52;
|
this.calendarHeight = 70 * 8 + 20;
|
|
this.getCalendarByMonth();
|
},
|
watch: {
|
calendar_month() {
|
this.getCalendarByMonth();
|
}
|
},
|
mounted() {
|
var me = this;
|
if (window.top.tab.selected.option.page_id) {
|
getPageByPageId(window.top.tab.selected.option.page_id, function(result){
|
me.cbuttons_r = result.buttons_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.$nextTick(() => {
|
hideLoading();
|
})
|
});
|
}
|
else {
|
me.$nextTick(() => {
|
hideLoading();
|
})
|
}
|
})
|
}
|
},
|
|
methods: {
|
getCalendarByMonth(callback) {
|
var me = this;
|
var active_month = dateFormat(this.calendar_month, "yyyy-MM");
|
var active_month_list = active_month.split("-");
|
var click_year_ = active_month_list[0];
|
var click_month_ = active_month_list[1];
|
|
if (!(this.load_year == click_year_ && this.load_month == click_month_)) {
|
this.load_loading = true;
|
if (this.load_data.length) { // 有数据需要先保存，再加载新数据
|
this.saveCalendarByMonth(function(){
|
me.loadCalendarByMonth(click_year_, click_month_, callback)
|
})
|
}
|
else {
|
this.loadCalendarByMonth(click_year_, click_month_, callback)
|
}
|
}
|
},
|
saveCalendarByMonth(callback) { // 如果需要联动保存则需要补齐此方法，目前是单条保存可以不用另外保存
|
// 保存当前加载的数据
|
var me = this;
|
this.load_data
|
this.load_data_map
|
|
// 保存后callback
|
callback();
|
},
|
loadCalendarByMonth(click_year, click_month, callback) {
|
var me = this;
|
|
this.load_year = click_year
|
this.load_month = click_month
|
this.load_data = []
|
this.load_data_map = {}
|
|
let param_ = {
|
dataname: "md_calendar",
|
filter: "year='"+ click_year +"' and month='"+ click_month +"'",
|
orderby: ""
|
}
|
Server.call("root/data/getEntitySet", param_, function(result) {
|
var tabledata_ = []
|
var load_data_map_ = {}
|
|
if (result && result.data && result.data.entityset) {
|
tabledata_ = result.data.entityset;
|
tabledata_.map(r=>{
|
load_data_map_[r.doc_date] = r
|
})
|
}
|
me.load_data = clone(tabledata_);
|
me.load_data_map = clone(load_data_map_);
|
me.load_loading = false;
|
|
if (callback) {
|
callback()
|
}
|
});
|
},
|
|
setDateClass(slotDate, slotData) {
|
// prev-month（上月），current-month（当月），next-month（下月）
|
var class_ = "";
|
if (slotData.type == "current-month") {
|
if (!this.load_data_map[slotData.day]) {
|
var slotData_day = slotData.day.split("-")
|
var r_ = {
|
id: slotData.day,
|
year: slotData_day[0],
|
month: slotData_day[1],
|
day: slotData_day[2],
|
doc_date: slotData.day,
|
is_implant_open: false,
|
is_implant_alter_open: false,
|
is_order_open: false,
|
is_order_close: false,
|
is_implant_close: false,
|
order_open_time: "",
|
implant_open_time: "",
|
month_implant: "",
|
month_implant_alter: "",
|
}
|
this.load_data.push(r_);
|
this.load_data_map[slotData.day] = r_;
|
}
|
if (this.load_data_map[slotData.day] && this.load_data_map[slotData.day].is_order_close) {
|
class_ += " orderclose";
|
}
|
if (this.load_data_map[slotData.day] && this.load_data_map[slotData.day].is_implant_close) {
|
class_ += " implantclose";
|
}
|
if (this.load_data_map[slotData.day] && this.load_data_map[slotData.day].is_implant_open) {
|
class_ += " implant";
|
}
|
if (this.load_data_map[slotData.day] && this.load_data_map[slotData.day].is_order_open) {
|
class_ += " order";
|
}
|
|
// if (this.load_data_map[slotData.day] && this.load_data_map[slotData.day].is_implant_alter_open) {
|
// class_ += " implantAlterCancel";
|
// }
|
}
|
|
return class_;
|
},
|
|
onDay(slotDate, slotData, type){
|
if (this.cbuttons_r.edit && slotData.type == "current-month") {
|
this.onDoDay(slotDate, slotData, type);
|
}
|
else {
|
this.calendar_month = clone(slotDate)
|
this.getCalendarByMonth();
|
}
|
},
|
|
onTempDay() {},
|
|
onDoDay(slotDate, slotData, type) {
|
var row = clone(this.load_data_map[slotData.day])
|
var action = ""
|
if (type == "is_implant_open") { // 植入设置
|
if (row.is_implant_open) { // 如果是可植入日期
|
row.is_implant_open = false // 设置不可植入
|
action = "del"
|
}
|
else {
|
row.is_implant_open = true
|
action = "add"
|
}
|
}
|
else if (type == "is_order_open") { // 订单设置
|
if (row.is_order_open) { // 如果是可下单日期
|
row.is_order_open = false // 设置不可下单
|
action = "del"
|
}
|
else {
|
row.is_order_open = true
|
action = "add"
|
}
|
}
|
else if (type == "is_order_close") { // 关账日
|
if (row.is_order_close) { // 如果是关账日期
|
row.is_order_close = false // 设置不是关账日
|
row.is_order_open = true // 设置可下单
|
// row.is_implant_open = true // 设置可植入
|
row.order_open_time = ""
|
action = "del"
|
}
|
else {
|
row.is_order_close = true
|
row.is_order_open = false // 设置不可下单
|
// row.is_implant_open = false // 设置不可植入
|
row.order_open_time = "00:00" // 关账日中从几点开始关账
|
|
action = "add"
|
}
|
}
|
else if (type == "order_open_time") { // 关账日从几点开始关账
|
action = "add"
|
}
|
else if (type == "is_implant_close") { // 关账日
|
if (row.is_implant_close) { // 如果是关账日期
|
row.is_implant_close = false // 设置不是关账日
|
// row.is_order_open = true // 设置可下单
|
row.is_implant_open = true // 设置可植入
|
row.implant_open_time = ""
|
action = "del"
|
}
|
else {
|
row.is_implant_close = true
|
// row.is_order_open = false // 设置不可下单
|
row.is_implant_open = false // 设置不可植入
|
row.implant_open_time = "00:00" // 关账日中从几点开始关账
|
|
action = "add"
|
}
|
}
|
else if (type == "implant_open_time") { // 关账日从几点开始关账
|
action = "add"
|
}
|
|
|
this.load_data_map[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) {
|
|
}
|
}, 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: '保存失败'
|
});
|
}
|
});
|
},
|
|
|
},
|
});
|
};
|
|
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: 2px;
|
box-sizing: border-box;
|
}
|
/*
|
公用：button_div
|
|
订单：order orderclose
|
按键：button_order_open
|
文本：order_txt orderclose_txt
|
|
*/
|
|
.button_implantclose, .button_orderclose{
|
display: inline;
|
width: 45%;
|
height: 100%;
|
background-color: #f1f1f1;
|
border-radius: 5px;
|
font-size: 12px;
|
}
|
|
.button_div {
|
display: flex;
|
height: 45%;
|
align-items: center; /* 垂直居中 */
|
justify-content: center; /* 水平居中 */
|
}
|
|
.button_implant_open, .button_order_open{
|
display: flex;
|
width: 100%;
|
height: 50%;
|
background-color: #d8d8d8;
|
align-items: center; /* 垂直居中 */
|
justify-content: center; /* 水平居中 */
|
border-radius: 5px;
|
}
|
.orderclose_txt {
|
display: flex;
|
color: #fff;
|
}
|
.order_txt {
|
display: flex;
|
height: 45%;
|
color: #fff;
|
align-items: center; /* 垂直居中 */
|
justify-content: center; /* 水平居中 */
|
}
|
.current .order .button_order_open {
|
background-color: #55aa7f;
|
border-radius: 5px;
|
}
|
/* .current .order .order_txt{
|
display: flex;
|
color: #fff;
|
} */
|
|
.current .implantclose .button_implant_open, .current .orderclose .button_order_open {
|
display: none;
|
}
|
.current .orderclose .button_orderclose{
|
background-color: #d5726b;
|
color: #fff;
|
}
|
/* .current .orderclose .orderclose_txt{
|
display: flex;
|
} */
|
.current .orderclose .close_endtime{
|
display: flex;
|
}
|
|
|
.implantclose_txt {
|
display: flex;
|
color: #fff;
|
}
|
.implant_txt {
|
display: flex;
|
height: 45%;
|
color: #fff;
|
align-items: center; /* 垂直居中 */
|
justify-content: center; /* 水平居中 */
|
}
|
.current .implant .button_implant_open {
|
background-color: #6495ed;
|
border-radius: 5px;
|
}
|
/* .current .implant .implant_txt{
|
display: flex;
|
color: #fff;
|
} */
|
.current .implantclose .button_implantclose{
|
background-color: #d5726b;
|
color: #fff;
|
}
|
/* .current .implantclose .implantclose_txt{
|
display: flex;
|
} */
|
.current .implantclose .close_endtime{
|
display: flex;
|
}
|
|
|
.current .close_endtime .el-input--prefix .el-input__inner, .current .close_endtime .el-input--prefix .el-input__inner{
|
padding-left: 5px !important;
|
padding-right: 5px !important;
|
}
|
.el-input__prefix {
|
display: none;
|
}
|
|
.h_table {
|
margin-top: 0px;
|
}
|
|
.card-box table {
|
border-collapse: collapse !important;
|
border: none !important;
|
}
|
|
.h_c_table td {
|
border: none !important
|
}
|
|
</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>
|
|
<div :style="{display: 'flex', width: '100%', height: bodyHeight + 'px'}">
|
<div v-loading="load_loading" style="width: 95%; 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 v-model="calendar_month" ref="ref_calendar">
|
<template slot="dateCell" slot-scope="{date, data}">
|
<div :class="setDateClass(date, data)">
|
<table class="h_c_table" style="width: 100%; height: 100%;">
|
<tr>
|
<td style="width: 22px;">
|
{{ data.day.split('-').slice(2).join('-')}}
|
</td>
|
<td>
|
<div style="height: 100%; display: flex; justify-content: space-around;">
|
<div class="button_implantclose" @click.stop="onDay(date, data, 'is_implant_close')">
|
<div class="button_div">
|
<span class="implantclose_txt">植入关账</span>
|
</div>
|
<div class="button_implant_open" @click.stop="onDay(date, data, 'is_implant_open')">
|
<div class="implant_txt">可植入</div>
|
</div>
|
<div v-if="load_data_map[data.day] && load_data_map[data.day].is_implant_close" class="close_endtime" @click.stop="onTempDay(date, data, 'is_implant_open')">
|
<el-time-select :readonly="!cbuttons_r.edit" v-model="load_data_map[data.day].implant_open_time" style="width: 100%;" :clearable="false" size="mini" @change="onDay(date, data, 'implant_open_time')" :picker-options="{
|
start: '00:00',
|
step: '00:30',
|
end: '24:00'
|
}"
|
placeholder="选择时间">
|
</el-time-select>
|
</div>
|
</div>
|
<div class="button_orderclose" @click.stop="onDay(date, data, 'is_order_close')">
|
<div class="button_div">
|
<span class="orderclose_txt">订单关账</span>
|
</div>
|
<div class="button_order_open" @click.stop="onDay(date, data, 'is_order_open')">
|
<div class="order_txt">可下单</div>
|
</div>
|
<div v-if="load_data_map[data.day] && load_data_map[data.day].is_order_close" class="close_endtime" @click.stop="onTempDay(date, data, 'is_order_open')">
|
<el-time-select :readonly="!cbuttons_r.edit" v-model="load_data_map[data.day].order_open_time" style="width: 100%;" :clearable="false" size="mini" @change="onDay(date, data, 'order_open_time')" :picker-options="{
|
start: '00:00',
|
step: '00:30',
|
end: '24:00'
|
}"
|
placeholder="选择时间">
|
</el-time-select>
|
</div>
|
</div>
|
|
</div>
|
</td>
|
</tr>
|
</table>
|
|
</div>
|
</template>
|
</el-calendar>
|
</el-card>
|
</div>
|
</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>
|
