提交 d1424303 编写于 作者: xiaoping.di's avatar xiaoping.di

修改日历

上级 02d0be13
.agment-box {
height: 100%;
background: #fff;
overflow: hidden;
padding: 20px;
border-radius: 6px;
flex: 3.8;
}
.agment-box-left {
flex: 1;
height: 100%;
padding: 20px;
margin-left: 12px;
background: #fff;
border-radius: 6px;
}
.agment-left-con {
margin-top: 70px;
background: #f0f2f5;
height: auto;
padding: 20px;
overflow: hidden;
border-radius: 8px;
}
.agment-head {
border-radius: 5px;
display: flex;
justify-content: flex-start;
align-items: flex-end;
}
.agment-head-name {
font-size: 20px;
color: #02120f;
font-weight: 600;
}
.agment-head-phone {
font-size: 18px;
margin-left: 16px;
}
.agment-hospital {
color: #89888b;
font-size: 16px;
margin-top: 14px;
line-height: 24px;
}
.agment-hospital-ks {
margin-top: 8px;
}
.agment-head-title {
font-size: 14px;
color: #02120f;
margin-top: 19px;
}
.agment-head-priority {
padding-top: 20px;
display: flex;
justify-content: space-between;
align-items: center;
.item {
width: 42px;
height: 32px;
border: 1px solid #d9d9d9;
border-radius: 8px;
text-align: center;
line-height: 32px;
cursor: pointer;
}
.active {
color: #fff;
background: #0d9078;
border: none;
}
}
.agment-left-button {
margin-top: 34px;
display: flex;
justify-content: space-around;
}
/deep/.fc-timegrid-event {
border-radius: 1px !important;
}
/deep/thead .fc-scroller-harness {
background: #fcfbff;
}
/deep/.fc-col-header-cell-cushion {
color: #333;
height: 45px;
line-height: 45px;
}
/deep/.fc .fc-highlight {
background: transparent;
}
/deep/.fc-header-toolbar {
position: absolute;
right: 0;
top: 25px;
width: 20%;
display: flex;
}
/deep/.fc-toolbar-title {
font-size: 6px;
}
/deep/.fc-button-primary {
background: #fff;
color: #02120f;
border-color: #d9d9d9;
border-radius: 8px;
padding: 1.3px 5px;
}
/deep/.fc-button-primary:hover {
background: #fff;
color: #02120f;
}
<template> <template>
<div>新增排班</div> <div
</template> style="
width: 100%;
height: auto;
position: relative;
display: flex;
justifycontent: space-between;
"
>
<div class="agment-box">
<FullCalendar :options="calendarOptions" />
</div>
<div class="agment-box-left">
<div class="agment-left-con">
<div class="agment-head">
<div class="agment-head-name">
纵横
</div>
<div class="agment-head-phone">
1897653426
</div>
</div>
<div class="agment-hospital">
上海瑞金医院
</div>
<div class="agment-hospital agment-hospital-ks">
普外科
</div>
</div>
<div style="margin-top: 24px">
<p class="agment-head-title">
选择匹配优先级
</p>
<div class="agment-head-priority">
<!-- <el-button type="primary" plain style="color:#FFF;background:#0D9078">1</el-button>
<el-button type="primary" plain style="color:#FFF;background:#0D9078">2</el-button>
<el-button type="primary" plain style="color:#FFF;background:#0D9078">3</el-button>
<el-button type="primary" plain style="color:#FFF;background:#0D9078">4</el-button>
<el-button type="primary" plain style="color:#FFF;background:#0D9078">5</el-button> -->
<p class="item active">
1
</p>
<p class="item">
2
</p>
<p class="item">
3
</p>
<p class="item">
4
</p>
<p class="item">
5
</p>
</div>
</div>
<div class="agment-left-button">
<el-button
type="primary"
round
style="width: 110px"
>
重置
</el-button>
<el-button
type="primary"
round
style="width: 110px"
>
保存
</el-button>
</div>
</div>
</div>
</template>
<script> <script>
export default {}; // import '@fullcalendar/core/vdom'
import FullCalendar from '@fullcalendar/vue';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
export default {
name: 'Index',
components: {
FullCalendar,
},
data() {
return {
listDate: [],
nextBtn: 0,
calendarOptions: {
// 引入的插件,比如fullcalendar/daygrid,fullcalendar/timegrid引入后才可显示月,周,日
plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
initialView: 'timeGridWeek', // 默认为那个视图(月:dayGridMonth,周:timeGridWeek,日:timeGridDay)
selectable: true,
selectMirror: true,
selectAllow: this.selectAllow,
selectOverlap: false,
select: this.selectInfo,
selectMinDistance: 0,
eventResize: this.eventResize,
eventDragStop: this.eventDrop,
editable: true,
overlap: false,
defaultDate: new Date(),
datesSet: this.handleDatesSet,
// unselect:this.unSelectInfo,
events: [
{
title: '黄娇变电站3020开关综合检修',
start: '2021-10-18 09:30:00',
end: '2021-10-18 12:30:00',
color: '#FFEDE9',
editable: false,
}, // 可以拖动但不能缩放,但在周、日视图中是可以进行缩放的
// {
// title : '黄娇变电站3020开关综合检修',
// start : '2021-10-19 00:30',
// end : '2021-10-19 04:30',
// color:'#5580EE',
// editable: true
// }, //可以拖动、缩放
// {
// title : '准备公司资料',
// start : '2021-10-21 04:00',
// end : '2021-10-21 07:00',
// color: '#EDB378',
// editable: true,
// // overlap: true,
// // display: 'background',
// },
// {
// title : '准备公司资料',
// start: '2021-10-23 04:00',
// end: '2021-10-23 05:00',
// overlap: false,
// // display: 'background',
// color: '#797979'
// }
// 背景色 (添加相同时间的背景色时颜色会重叠) 一点要初始化日期时间 initialDate: '2020-07-10',
],
header: {
center: 'month,agendaFourDay', // buttons for switching between views
},
views: {
agendaFourDay: {
type: 'agenda',
duration: { days: 4 },
buttonText: '4 day',
},
},
firstDay: new Date().getDay(), // 设置一周中显示的第一天是哪天,周日是0,周一是1,类推
locale: 'zh-cn', // 切换语言,当前为中文
eventColor: '#fff', // 全部日历日程背景色3BB2E3
eventBackgroundColor: '#3788d8',
// themeSystem: 'bootstrap', // 主题色(本地测试未能生效)
// initialDate: moment().format('YYYY-MM-DD'), // 自定义设置背景颜色时一定要初始化日期时间
timeGridEventMinHeight: '40', // 设置事件的最小高度
aspectRatio: 1.35, // 设置日历单元格宽度与高度的比例。
// displayEventTime: false, // 是否显示时间
allDaySlot: false, // 周,日视图时,all-day 不显示
eventLimit: true, // 设置月日程,与all-day slot的最大显示数量,超过的通过弹窗显示
customButtons: {
myCustomButton: {
text: '本周',
},
},
headerToolbar: {
// 日历头部按钮位置
left: '',
center: 'prev myCustomButton next',
right: '',
},
footerToolbar: {
start: 'nni',
},
buttonText: {
// today: '今天',
// month: '月',
// week: '周',
// day: '日'
},
expandRows: true,
slotMinWidth: 50,
slotDuration: '00:30:00',
slotMinTime: '09:30',
slotMaxTime: '19:30',
slotLabelInterval: '',
dateClick: this.dateClick,
scrollTime: false,
slotLabelFormat: {
hour: 'numeric',
minute: '2-digit',
meridiem: 'short',
hour12: false, // 设置时间为24小时
},
eventLimitNum: {
// 事件显示数量限制(本地测试未能生效)
dayGrid: {
eventLimit: 5,
},
timeGrid: {
eventLimit: 4, // adjust to 6 only for timeGridWeek/timeGridDay
},
},
eventClick: this.handleEventClick,
},
workingTicketVisible: false, // 工作表票详情页面
};
},
mounted() {
// this.handleEventClick();
},
methods: {
/**
* 点击日历日程事件
*
* info: 事件信息
* event是日程(事件)对象
* jsEvent是个javascript事件
* view是当前视图对象。
*/
handleDatesSet(dataInfo) {
console.log(dataInfo);
},
prevCustom(mouseEvent, htmlElement) {
alert(1234);
console.log(mouseEvent, htmlElement, 'mouseEvent, htmlElement');
// this.defaultDate=;
},
eventResize(event) {
const index = this.getIdDeleteData(event.event.id);
const oldData = this.calendarOptions.events;
const keyAll = Object.keys(oldData[index]);
const dataObj = {};
keyAll.forEach((item) => {
dataObj[item] = event.event[item];
});
oldData.splice(index, 1, dataObj);
this.getHandleTime(dataObj);
},
handleEventClick(event) {
const index = this.getIdDeleteData(event.event.id);
return this.calendarOptions.events.splice(index, 1);
// alert("你要取消日期吗");
},
unSelectInfo(info) {
console.log(info, '0000');
console.log(99);
},
selectInfo(info) {
const id = (this.calendarOptions.events.length + 1) * 10;
info.id = id;
const keyAll = ['end', 'endStr', 'id', 'start', 'startStr'];
const dataObj = {};
keyAll.forEach((item) => {
dataObj[item] = info[item];
});
this.calendarOptions.events.push(dataObj);
console.log(this.calendarOptions.events, '10000');
},
selectAllow(info) {
const currentDate = new Date();
const start = info.start;
const end = info.end;
return start <= end && start >= currentDate;
},
getIdDeleteData(eventId) {
// 删除现有排班
const data = this.calendarOptions.events;
const index = data.findIndex((event) => event.id == eventId);
return index;
},
getHandleTime(info) {
// 对于排班交叉部分处理
const infoStart = new Date(info.start).getTime();
const infoEnd = new Date(info.end).getTime();
let indexObj = false;
const data = this.calendarOptions.events;
const newDate = [];
data.forEach((item) => {
const d = new Date(item.end).getTime();
const s = new Date(item.start).getTime();
if (s > infoStart && infoEnd >= d) {
indexObj = true;
} else if (s > infoStart && infoEnd >= s) {
indexObj = true;
} else {
const id = (newDate.length + 1) * 10;
item.id = id;
newDate.push(item);
}
});
this.calendarOptions.events = newDate;
console.log(this.calendarOptions.events.length, 'len', indexObj);
},
dateClick(info) {
console.log(info, 'info');
},
},
};
</script> </script>
<style></style> <style lang="scss" scoped>
@import 'index';
</style>
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
clearable clearable
> >
<el-option <el-option
v-for="(item,index) of createList" v-for="(item, index) of createList"
:key="index" :key="index"
:label="item" :label="item"
:value="item" :value="item"
...@@ -142,7 +142,14 @@ ...@@ -142,7 +142,14 @@
</template> </template>
<script> <script>
import { getFirstLevelLable, childLabelList, workQuery, switchOpen, workInStep, getLevel} from '@/api/serviceSchedule'; import {
getFirstLevelLable,
childLabelList,
workQuery,
switchOpen,
workInStep,
getLevel,
} from '@/api/serviceSchedule';
import { SERVICESCHEDUle_TABLE } from '@/utils/GeneralData/serviceSchedule-table'; import { SERVICESCHEDUle_TABLE } from '@/utils/GeneralData/serviceSchedule-table';
import TableServiceSchedule from '@/components/list/table-serviceSchedule'; import TableServiceSchedule from '@/components/list/table-serviceSchedule';
import NewScheduling from '../diagnosis-admin/modal/newScheduling.vue'; import NewScheduling from '../diagnosis-admin/modal/newScheduling.vue';
...@@ -164,36 +171,36 @@ ...@@ -164,36 +171,36 @@
departmentId: '', departmentId: '',
createType: '', createType: '',
idNamePhone: '', idNamePhone: '',
ScheduleStatus:'', ScheduleStatus: '',
startRangeTime:'', startRangeTime: '',
endRangeTime:'', endRangeTime: '',
serviceOpen:'', serviceOpen: '',
pageSize: 15, pageSize: 15,
pageNo: 1, pageNo: 1,
sort:'', sort: '',
createRangeTime:[] createRangeTime: [],
}, },
ScheduleStatusList:[ ScheduleStatusList: [
{ {
value:'已排班', value: '已排班',
id:1 id: 1,
}, },
{ {
value:'未排班', value: '未排班',
id:2 id: 2,
}, },
], ],
serviceOpenList:[ serviceOpenList: [
{ {
value:'开通', value: '开通',
id:1 id: 1,
}, },
{ {
value:'未开通', value: '未开通',
id:2 id: 2,
}, },
], ],
createList:[], createList: [],
interfaceOptions: [], interfaceOptions: [],
createRangeTime: [], createRangeTime: [],
pickerOptions: { pickerOptions: {
...@@ -202,18 +209,18 @@ ...@@ -202,18 +209,18 @@
}, },
}, },
ScheduleListShow: true, ScheduleListShow: true,
showTableData:SERVICESCHEDUle_TABLE, showTableData: SERVICESCHEDUle_TABLE,
tableData:[], tableData: [],
loading: false, loading: false,
newCreateList:[], newCreateList: [],
// newCreateObj:{} // newCreateObj:{}
}; };
}, },
watch: {}, watch: {},
created() { created() {
this.getFirstLevelLable(); this.getFirstLevelLable();
this.getLevel(); this.getLevel();
this.search(); this.search();
}, },
methods: { methods: {
// 通过监听expand-change事件(当展开节点发生变化时触发)获取第二层数据,组装interfaceOptions数据 // 通过监听expand-change事件(当展开节点发生变化时触发)获取第二层数据,组装interfaceOptions数据
...@@ -261,16 +268,22 @@ ...@@ -261,16 +268,22 @@
const params = { const params = {
departmentId: this.searchParam.departmentId || null, departmentId: this.searchParam.departmentId || null,
workStatus: String(this.searchParam.ScheduleStatus) || null, workStatus: String(this.searchParam.ScheduleStatus) || null,
startTime: this.searchParam.createRangeTime.length > 0 ? this.searchParam.createRangeTime[0] : null, startTime:
endTime: this.searchParam.createRangeTime.length > 0 ? this.searchParam.createRangeTime[1] : null, this.searchParam.createRangeTime.length > 0
? this.searchParam.createRangeTime[0]
: null,
endTime:
this.searchParam.createRangeTime.length > 0
? this.searchParam.createRangeTime[1]
: null,
condition: this.searchParam.idNamePhone || null, condition: this.searchParam.idNamePhone || null,
level: this.searchParam.createType || null, level: this.searchParam.createType || null,
sort:this.searchParam.sort || null, sort: this.searchParam.sort || null,
serviceOpen: String(this.searchParam.serviceOpen) || null, serviceOpen: String(this.searchParam.serviceOpen) || null,
pageNo: this.searchParam.pageNo, pageNo: this.searchParam.pageNo,
pageSize: this.searchParam.pageSize, pageSize: this.searchParam.pageSize,
}; };
workQuery(params).then(res => { workQuery(params).then((res) => {
this.loading = false; this.loading = false;
if (res.code === '000000') { if (res.code === '000000') {
this.tableData = res.data.list || []; this.tableData = res.data.list || [];
...@@ -291,18 +304,17 @@ ...@@ -291,18 +304,17 @@
changeSwitch(value, val) { changeSwitch(value, val) {
console.log(value, val, '12321'); console.log(value, val, '12321');
switchOpen({ switchOpen({
id:val.id, id: val.id,
switchOpen:val.delivery ? '1' : '2' switchOpen: val.delivery ? '1' : '2',
}).then(res => { }).then((res) => {
if (res.code === '000000') { if (res.code === '000000') {
console.log(res); console.log(res);
this.search(); this.search();
} }
}); });
}, },
searchInStep() { searchInStep() {
workInStep().then(res => { workInStep().then((res) => {
if (res.code === '000000') { if (res.code === '000000') {
this.search(); this.search();
} }
...@@ -317,14 +329,14 @@ ...@@ -317,14 +329,14 @@
this.search(); this.search();
}, },
getLevel() { getLevel() {
getLevel().then(res => { getLevel().then((res) => {
if (res.code === '000000') { if (res.code === '000000') {
console.log(res, 'getLevel'); console.log(res, 'getLevel');
this.createList = res.data || []; this.createList = res.data || [];
this.createList.forEach(item => { this.createList.forEach((item) => {
const newCreateObj = { const newCreateObj = {
value:'', value: '',
text:'' text: '',
}; };
newCreateObj.value = item; newCreateObj.value = item;
newCreateObj.text = item; newCreateObj.text = item;
...@@ -338,7 +350,7 @@ ...@@ -338,7 +350,7 @@
console.log(data, 'data'); console.log(data, 'data');
if (data.prop === '"modifiedTime"' && data.order === 'descending') { if (data.prop === '"modifiedTime"' && data.order === 'descending') {
this.searchParam.sort = '1'; this.searchParam.sort = '1';
} else{ } else {
this.searchParam.sort = '2'; this.searchParam.sort = '2';
} }
this.search(); this.search();
...@@ -346,7 +358,7 @@ ...@@ -346,7 +358,7 @@
addSchedule(value, val) { addSchedule(value, val) {
console.log(value, val, 'value,val'); console.log(value, val, 'value,val');
this.ScheduleListShow = false; this.ScheduleListShow = false;
} },
}, },
}; };
</script> </script>
...@@ -365,7 +377,6 @@ ...@@ -365,7 +377,6 @@
.serviceSchedule-containerInfo { .serviceSchedule-containerInfo {
position: relative; position: relative;
min-width: 1200px; min-width: 1200px;
background: #ffffff;
height: 73px; height: 73px;
border-radius: 8px; border-radius: 8px;
display: flex; display: flex;
...@@ -400,35 +411,34 @@ ...@@ -400,35 +411,34 @@
display: flex; display: flex;
align-items: center; align-items: center;
} }
.synchro-btn-icon{ .synchro-btn-icon {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: absolute; position: absolute;
right: 20px; right: 20px;
.synchro-btn{ .synchro-btn {
width: 110px; width: 110px;
height: 32px; height: 32px;
border-radius: 18px; border-radius: 18px;
border: 1px solid #0D9078; border: 1px solid #0d9078;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: #FFFFFF; background: #ffffff;
font-size: 14px; font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #0D9078; color: #0d9078;
} }
.el-icon-s-question{ .el-icon-s-question {
margin-left:10px; margin-left: 10px;
width: 16px; width: 16px;
height: 16px; height: 16px;
} }
} }
} }
.serviceSchedule-table{ .serviceSchedule-table {
min-width: 1200px; min-width: 1200px;
padding-top: 15px; padding-top: 15px;
} }
...@@ -445,12 +455,11 @@ ...@@ -445,12 +455,11 @@
width: 100%; width: 100%;
padding: 0 14px; padding: 0 14px;
.serviceSchedule-containerInfo { .serviceSchedule-containerInfo {
background: #ffffff;
border-radius: 8px; border-radius: 8px;
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 21px 18px 20px 18px; //padding: 21px 18px 20px 18px;
} }
} }
} }
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册