wuye / webui

Blame view

src/components/org/scheduleClassesMonth.vue 2.44 KB
Edit Raw Normal View History
b25b036d   wuxw   v1.9 优化日期 
1
 
  <template>
03f63ab4   wuxw   优化到商户信息 
2
3
 
    <div>
      <el-form-item :label="$t('scheduleClassesMonth.scheduleCycle')">
9fc8656f   wuxw   优化排版功能 
4
5
6
 
        <el-select v-model="scheduleCycle" :placeholder="$t('scheduleClassesMonth.scheduleCyclePlaceholder')"
          @change="changeInspectionPeriod" style="width:100%">
          <el-option :label="`1${$t('scheduleClassesMonth.month')}`" value="1" />
03f63ab4   wuxw   优化到商户信息 
7
8
9
10
11
 
        </el-select>
      </el-form-item>
  
      <el-form-item :label="$t('scheduleClassesMonth.scheduleInfo')">
        <div class="schedule-days-container">
9fc8656f   wuxw   优化排版功能 
12
 
          <div v-for="(item, index) in days" :key="index" class="schedule-day-item" @click="changeWorkdayInfo(item)">
03f63ab4   wuxw   优化到商户信息 
13
14
 
            <div class="day-number">{{ item.day }}</div>
            <div class="workday-name">{{ item.workdayName }}</div>
9fc8656f   wuxw   优化排版功能 
15
 
            <div v-for="(time, timeIndex) in item.times" :key="timeIndex" class="time-range">
03f63ab4   wuxw   优化到商户信息 
16
17
18
19
20
21
22
23
24
25
26
 
              {{ time.startTime }}-{{ time.endTime }}
            </div>
          </div>
        </div>
      </el-form-item>
    </div>
  </template>
  
  <script>
  export default {
    name: 'ScheduleClassesMonth',
03f63ab4   wuxw   优化到商户信息 
27
28
29
30
31
32
 
    data() {
      return {
        scheduleCycle: 1,
        days: []
      }
    },
03f63ab4   wuxw   优化到商户信息 
33
34
35
36
37
 
    methods: {
      initData(scheduleCycle) {
        this.scheduleCycle = scheduleCycle
        this.changeInspectionPeriod()
      },
9fc8656f   wuxw   优化排版功能 
38
39
40
41
42
43
44
45
 
      notify(_params) {
        this.days = _params.days;
        this.scheduleCycle = _params.scheduleCycle;
        if (_params.days && _params.days.length > 0) {
          return;
        }
        this.changeInspectionPeriod();
      },
03f63ab4   wuxw   优化到商户信息 
46
 
      changeInspectionPeriod() {
257e836f   wuxw   v1.9 优化排版英文bug 
47
48
 
        let _days = this.days;
        _days.splice(0, _days.length);
03f63ab4   wuxw   优化到商户信息 
49
 
        for (let cycleIndex = 0; cycleIndex < 31; cycleIndex++) {
257e836f   wuxw   v1.9 优化排版英文bug 
50
 
          _days.push({
03f63ab4   wuxw   优化到商户信息 
51
52
53
54
55
56
57
58
 
            day: cycleIndex + 1,
            workday: '2002',
            workdayName: this.$t('scheduleClassesMonth.rest'),
            times: []
          })
        }
      },
      changeWorkdayInfo(item) {
9fc8656f   wuxw   优化排版功能 
59
 
        this.$emit('editDay', item)
03f63ab4   wuxw   优化到商户信息 
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
 
      },
      getDaysData() {
        return this.days
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .schedule-days-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .schedule-day-item {
    width: calc(16.66% - 10px);
    padding: 10px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s;
  
    &:hover {
      border-color: #409eff;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
  
    .day-number {
      font-weight: bold;
      margin-bottom: 5px;
    }
  
    .workday-name {
      margin-bottom: 5px;
    }
  
    .time-range {
      font-size: 12px;
      color: #666;
    }
  }
  </style>