<!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>