feat:服务排班表宽度

src/views/IM/diagnosis-admin/overviewScheduling.vue

@@ -44,11 +44,11 @@
       </div>
       <div
         class="fullCalendar-show"
-        style="width:100%"
+        style="width: 100%"
       >
         <div
           class="fullCalendar-show-out"
-          :style="{width:getWidth}"
+          :style="{ minWidth: getWidth, maxWidth: getMaxWidth }"
         >
           <FullCalendar
             ref="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,8 +219,7 @@
                 };
               }
             );
-            const dutyWorkList = res.data.dutyWorkList.map(
-              (item, index) => {
+            const dutyWorkList = res.data.dutyWorkList.map((item, index) => {
               return {
                 id: index,
                 resourceId: item.doctorId,
@@ -228,12 +227,49 @@
                 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{
+    img {
       display: flex;
     }
   }
@@ -317,10 +353,10 @@
     border: 1px solid #d9d9d9;
   }
 }
- /deep/ .fc-timegrid-col-frame{
+/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%;