提交 ed6d6d84 编写于 作者: dmx_mac's avatar dmx_mac

feat:服务排班表宽度

上级 189ccc8f
<template>
<div
v-loading="loading"
style="width: 100%; position: relative; justifycontent: space-between"
style="width: 100%; position: relative; justifycontent: space-between"
>
<div class="header">
<el-breadcrumb separator="/">
......@@ -10,8 +10,8 @@
</el-breadcrumb>
</div>
<div class="agment-box">
<div
ref="agmentSelect"
<div
ref="agmentSelect"
class="serviceSchedule_select"
>
<el-cascader
......@@ -20,7 +20,7 @@
filterable
clearable
:options="interfaceOptions"
:props="props"
:props="props"
placeholder="选择科室"
:show-all-levels="false"
@expand-change="handleItemChange"
......@@ -42,15 +42,15 @@
查询
</el-button>
</div>
<div
class="fullCalendar-show"
style="width:100%"
<div
class="fullCalendar-show"
style="width: 100%"
>
<div
class="fullCalendar-show-out"
:style="{width:getWidth}"
<div
class="fullCalendar-show-out"
:style="{ minWidth: getWidth, maxWidth: getMaxWidth }"
>
<FullCalendar
<FullCalendar
ref="fullCalendar"
:options="calendarOptions"
class="FullCalendar"
......@@ -113,8 +113,8 @@
eventColor: '#fff',
eventBackgroundColor: '#fff',
events: [],
slotMinWidth:50,
resourceAreaWidth:'5%',
slotMinWidth: 50,
resourceAreaWidth: '5%',
allDaySlot: false, // 周,日视图时,all-day 不显示
slotDuration: '00:05:00',
slotMinTime: '09:00',
......@@ -134,15 +134,15 @@
loading: false,
doctorList: [],
index: 0,
getWidth:'100%'
getWidth: '100%',
getMaxWidth: '100%',
};
},
watch: {},
created() {
this.getFirstLevelLable();
},
mounted() {
},
mounted() {},
methods: {
// 通过监听expand-change事件(当展开节点发生变化时触发)获取第二层数据,组装interfaceOptions数据
handleItemChange(val) {
......@@ -188,10 +188,10 @@
this.dateTime = value;
},
search() {
if(!this.dateTime || !this.departmentId) {
if (!this.dateTime || !this.departmentId) {
return this.$message({
message: '科室和时间都需要选择哦!',
type: 'warning'
type: 'warning',
});
}
const params = {
......@@ -219,21 +219,57 @@
};
}
);
const dutyWorkList = res.data.dutyWorkList.map(
(item, index) => {
return {
id: index,
resourceId: item.doctorId,
end: item.endTime,
start: item.startTime,
color: '#E7F4F5',
};
}
);
const dutyWorkList = res.data.dutyWorkList.map((item, index) => {
return {
id: index,
resourceId: item.doctorId,
end: item.endTime,
start: item.startTime,
color: '#E7F4F5',
};
});
// this.getWidth = this.$refs.agmentSelect.scrollWidth + 'px';
this.getWidth = 3000 + 'px';
this.calendarOptions.events = [].concat(dutyRosterPreList, dutyWorkList);
this.calendarOptions.events = [].concat(
dutyRosterPreList,
dutyWorkList
);
// this.calendarOptions.resources.push(
// {id: 1000105468, title: '吴明豪1'},
// {id: 1000205468, title: '吴明豪2'},
// {id: 1000305468, title: '吴明豪3'},
// {id: 1000405468, title: '吴明豪4'},
// {id: 1000505468, title: '吴明豪5'},
// {id: 1000605468, title: '吴明豪5'},
// {id: 1000705468, title: '吴明豪5'},
// {id: 1000805468, title: '吴明豪5'},
// {id: 1000905468, title: '吴明豪5'},
// {id: 1001505468, title: '吴明豪5'},
// {id: 1002505468, title: '吴明豪5'},
// {id: 1003505468, title: '吴明豪5'},
// {id: 1004505468, title: '吴明豪5'},
// {id: 1005505468, title: '吴明豪5'},
// {id: 1006505468, title: '吴明豪5'},
// {id: 1007505468, title: '吴明豪5'},
// {id: 1008505468, title: '吴明豪5'},
// {id: 1009505468, title: '吴明豪5'},
// {id: 1017505468, title: '吴明豪5'},
// {id: 1027505468, title: '吴明豪5'},
// {id: 1037505468, title: '吴明豪5'},
// {id: 1047505468, title: '吴明豪5'},
// {id: 1057505468, title: '吴明豪5'},
// {id: 1067505468, title: '吴明豪5'},
// {id: 1077505468, title: '吴明豪5'},
// {id: 1087505468, title: '吴明豪5'},
// {id: 1097505468, title: '吴明豪5'},
// {id: 1018505468, title: '吴明豪5'},
// {id: 1009505468, title: '吴明豪5'},);
// this.calendarOptions.resources = [{id: 1000105468, title: '吴明豪1'}, {id: 1000205468, title: '吴明豪2'}, {id: 1008505468, title: '吴明豪5'}, {id: 1008505461, title: '吴明豪5'}];
const calendarApi = this.$refs.fullCalendar.getApi();
this.getWidth = `${this.calendarOptions.resources.length * 150}px`;
this.getMaxWidth = `${
this.calendarOptions.resources.length * 150 + 100
}px`;
calendarApi.gotoDate(this.dateTime);
console.log(this.calendarOptions.resources);
......@@ -256,7 +292,7 @@
border-radius: 6px;
flex: 3.8;
width: 100%;
overflow:hidden;
overflow: hidden;
.serviceSchedule_select {
width: 100%;
background: #fff;
......@@ -279,7 +315,7 @@
align-items: center;
}
}
.fullCalendar-show{
.fullCalendar-show {
width: 100%;
overflow: scroll;
// /deep/ .fc-resource{
......@@ -290,12 +326,12 @@
background: #fff;
padding: 20px;
}
.fullCalendar-nothing{
.fullCalendar-nothing {
background: #fff;
padding: 20px;
display: flex;
justify-content: center;
img{
justify-content: center;
img {
display: flex;
}
}
......@@ -309,7 +345,7 @@
// width: 100px !important;
// }
}
.w2 {
/deep/.fc-prev-button {
background: #f4f4f5;
......@@ -317,10 +353,10 @@
border: 1px solid #d9d9d9;
}
}
/deep/ .fc-timegrid-col-frame{
// width: 100px !important;
background: #fff !important;
}
/deep/ .fc-timegrid-col-frame {
// width: 100px !important;
background: #fff !important;
}
.w3 {
/deep/.fc-next-button {
background: #f4f4f5;
......@@ -332,6 +368,9 @@
// position: absolute !important;
left: 0 !important;
}
/deep/.fc-resource {
width: 150px;
}
.agment-box-left {
flex: 1;
height: 100%;
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册