班组

src/views/group/base/groupTeamScheduling/components/topTab.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="topTab">
+    <div class="arr leftArr" @click='toLeft'></div>
+    <div class="arr rightArr" @click='toRight'></div>
+    <el-scrollbar ref="groupTeamScroll" :vertical="false"  class="scrollTab">
+      <ul class="tabBox">
+        <li :class="{'active':roomNameDict===item.value}" v-for="(item, index) in getDictDatas('workshop')" :key='index' @click='toggleName(item.value)'>{{item.label}}</li>
+      </ul>
+    </el-scrollbar>
+  </div>
+</template>
+<script>
+export default {
+  name: 'TopTab',
+  data() {
+    return {
+      
+    }
+  },
+  props:['roomNameDict'],
+  computed: {
+    scrollWrapper() {
+      return this.$refs.groupTeamScroll.$refs.wrap
+    }
+  },
+  methods:{
+    toLeft() {
+      const container = this.scrollWrapper
+      container.scrollLeft-=100
+    },
+    toRight() {
+      const container = this.scrollWrapper
+      container.scrollLeft+=100
+    },
+    toggleName(val) {
+      this.$emit('emitFun',val)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.topTab {
+  height: 56px;
+  padding: 0px 48px 0px 56px;
+  position: relative;
+  .arr {
+    position: absolute;
+    width: 48px;
+    height: 48px;
+    line-height: 48px;
+    background-color: #fff;
+    border-radius: 8px;
+    cursor: pointer;
+  }
+  .leftArr{
+    left: 0;
+    padding-left: 10px;
+  }
+  .leftArr::before{
+    display: inline-block;
+    content: '';
+    width: 0;
+    height: 0;
+    border-width: 8px;
+    border-style: solid;
+    border-color: transparent #0B58FF transparent transparent;
+  }
+  .rightArr{
+    right: 0;
+    top:0;
+    padding-left: 22px;
+  }
+  .rightArr::before{
+    display: inline-block;
+    content: '';
+    width: 0;
+    height: 0;
+    border-width: 8px;
+    border-style: solid;
+    border-color: transparent transparent transparent #0B58FF;
+  }
+  .scrollTab{
+    white-space: nowrap;
+    overflow: hidden;
+    font-size: 16px;
+    width: 100%;
+    height: 100%;
+    ul,li{
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+    .tabBox >.active {
+      border-bottom: 4px solid #0B58FF;
+    }
+    .tabBox>li {
+      display: inline-block;
+      height: 48px;
+      line-height: 48px;
+      background: #FFFFFF;
+      border-radius: 8px;
+      padding: 0px 10px;
+      margin-right: 8px;
+      cursor: pointer;
+    }
+  }
+}
+</style>

src/views/group/base/groupTeamScheduling/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="groupTeamScheduling">
+    <TopTab :roomNameDict='roomNameDict' @emitFun='toggleName'/>
     <div class="operationArea">
       <el-form :inline="true" class="demo-form-inline">
         <span class="blue-block"></span>
@@ -87,13 +88,15 @@
 
 <script>
 import { getPreset, createOrUpdateList, autoSet } from "@/api/base/groupTeamScheduling";
-import { listEnabled } from "@/api/base/groupTeam";
+import { listEnabledByRoom } from "@/api/base/groupTeam";
 import moment from 'moment';
+import TopTab from './components/topTab'
 
 export default {
   name: "GroupTeamScheduling",
   data() {
     return {
+      roomNameDict:null,
       startDay: '',// 查询参数
       year: '',// 2023
       month: '',// 九月
@@ -108,7 +111,9 @@ export default {
       autoScheduling: false // 只有在当前日期后的月份才生效
     };
   },
+  components:{ TopTab },
   created() {
+    this.roomNameDict = this.getDictDatas('workshop')[0].value
     this.startDay = new Date()
     // 设置按钮是否置灰
     this.settingBtn()
@@ -117,6 +122,22 @@ export default {
     this.getList()
   },
   methods: {
+    // 切换车间
+    toggleName(val) {
+      this.roomNameDict = val
+      // 如果当前在设置，则取消设置
+      if (this.showSetting) {
+        this.showSetting = !this.showSetting
+      }
+      // 如果红框选中，清除红框选中
+      if (!this.jumpDisabled) {
+        this.clearChoose()
+      }
+      // 获取班组列表
+      this.getTeamList()
+      // 重新获取日历数据
+      this.getList()
+    },
     // 切换月份
     selectMonth() {
       if (this.startDay) {
@@ -133,7 +154,10 @@ export default {
     },
     // 获取班组列表
     getTeamList() {
-      listEnabled().then(res => {
+      console.log(this.roomNameDict)
+      listEnabledByRoom({
+        room: this.roomNameDict
+      }).then(res => {
         this.teamList = res.data || []
       })
     },
@@ -143,7 +167,8 @@ export default {
       let month = moment(this.startDay).format('M')
       getPreset({
         year: year,
-        month: month
+        month: month,
+        roomNameDict: this.roomNameDict
       }).then(res => {
         let obj = res.data || {}
         if (obj) {
@@ -156,6 +181,7 @@ export default {
           }
         }
         this.list = obj
+        this.settingBtnDis = false
       }).catch(() => {
         this.list = {}
         this.settingBtnDis = true // 禁用设置按钮
@@ -246,7 +272,8 @@ export default {
         // console.log(moment(this.startDay).format("YYYY-MM-DD"))
         autoSet({
           year: this.year,
-          month: moment(this.startDay).month() + 1
+          month: moment(this.startDay).month() + 1,
+          roomNameDict: this.roomNameDict
         }).then(res => {
           this.list = res.data || {}
         })
@@ -350,6 +377,8 @@ export default {
     padding: 14px 10px 0 20px;
     background-color: #fff;
     border-radius: 8px;
+    height: calc(100vh - 255px);
+    overflow-y: auto;
     .el-calendar__body {
       padding: 10px 16px 16px 0;
     }