Django

Componentsが読み込みされない続き2(Total:16day54.5h)

なかなかうまくいかないので、たくさん試していきます。

Componentsをするときにエラーが発生することがわからん!

なかなかエラーが修正できず、微妙に修正をしながらどうなるかをずっとためしていきました。
1時間半ぐらいかかって表示させることに成功できました!

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import moment from 'moment'
import $api from "@/services/index";

@Component({
  components: {}
})
export default class ScheduleTable extends Vue {
  items = []
  today = [moment().format('YYYYMMDD')]
  async created() {
    $api.yearmonth.getSchedule(this.today).then(response => {
      this.items =response.data;
      console.log(this.items)
    })
  }
</script>

なにが、解決に至ったのかが完全に理解できていません( ノД`)シクシク…

とりあえず自分なりに整理

メモ

  1. $apiでtokenをheaderに付けてリクエスト
  2. yearmonth.getScheduleでリクエストするURLを呼び出す
  3. this.todayでリクエストするときに、日付を一緒に送るようにする(どの年月トランを取得するか判断のため)
  4. レスポンスがあったら、items に Djangoから帰ってきた、responseのなかにあるdataを代入

こんな流れですかねー

Serializerを修正する

最終の表示イメージがこんな感じ

表示するための修正を入れていきます。

from rest_framework import serializers
from ..models import *
from .dayweek import *
from .schedule import *
from .useryearmonth import *

class YearMonthSerializer(serializers.ModelSerializer):
    open_flg_display = serializers.CharField(
        source='get_open_flg_display'
    )
    dayweek = DayWeekSerializer(many=True, read_only=True)
    user_year_month = UserYearMonthSerializer(many=True)
    """
    年月トランSrializer
    """
    class Meta:
        model = YearMonth
        fields = [
            'year_month_id',
            'year_month',
            'start_date',
            'end_date',
            'days',
            'open_flg',
            'open_flg_display',
            'dayweek',
            'user_year_month',
        ]

from rest_framework import serializers
from ..models import *

class DayWeekSerializer(serializers.ModelSerializer):
    """
    日にち曜日Srializer
    """
    day_week_display = serializers.CharField(
        source='get_day_week_display'
    )
    class Meta:
        model = DayWeek
        fields = [
            'day_week_id',
            'yearmonth',
            'date',
            'day',
            'day_week',
            'day_week_display',
        ]

from rest_framework import serializers
from ..models import *
from users.serializers.users import *
from .schedule import *

class UserYearMonthSerializer(serializers.ModelSerializer):
    """
    社員年月トランSrializer
    """
    schedule = ScheduleSerializer(many=True, read_only=True)
    user = UserDetailSerializer()
    class Meta:
        model = UserYearMonth
        fields = [
            'user_year_month_id',
            'year_month',
            'user',
            'memo',
            'total_work_time',
            'paid_break_time',
            'min_work_time',
            'user',
            'schedule',
        ]

from rest_framework import serializers
from ..models import *
from .shift import *
from shisetsu.serializers.shisetsu import *

class ScheduleSerializer(serializers.ModelSerializer):
    """
    スケジュールSrializer
    """
    shisetsu1 = ShisetsuSerializer()
    shisetsu2 = ShisetsuSerializer()
    shisetsu3 = ShisetsuSerializer()
    shift1 = ShiftSerializer(default=None)
    shift2 = ShiftSerializer(default=None)
    shift3 = ShiftSerializer(default=None)
    class Meta:
        model = Schedule
        fields = [
            'schedule_id',
            'user_yearmonth',
            'date',
            'shisetsu1',
            'shift1',
            'shisetsu2',
            'shift2',
            'shisetsu3',
            'shift3',
            'hope',
            'work_time',
            'paid_break_time',
            'memo',
        ]

from rest_framework import serializers
from ..models import *

class ShiftSerializer(serializers.ModelSerializer):
    """
    シフトマスタSrializer
    """
    class Meta:
        model = Shift
        fields = [
            'shift_id',
            'name',
            'start_time',
            'end_time',
            'work_time',
            'night_shift',
            'common_shift',
            'display_num',
            'shisetsu',
            'is_active',
        ]

Serializerの逆参照はmodelsにrelated_nameを設定しよう

逆参照ってなに????
ここから最初ははじまった…

めっちゃ分かりやすい記事を見つけて、めっちゃ理解がすすみました✊
ありがたいことです。みんな、自分の苦労を誰かの役に立てばって、奉仕の精神に感動です!

https://qiita.com/RZQiita/items/0fa9eba377e522b464e6

年月トランからしたら自分を参照しにきているのが何があるかなんてしったこっちゃないから、教えてあげるって感じですね

今回は、スケジュールモデルにrelated_nameを設定

class Schedule(TimeStampedModel):
    '''
    スケジュールトラン
    '''
    schedule_id = models.BigAutoField(primary_key=True, verbose_name='スケジュールID')
    user_yearmonth = models.ForeignKey(UserYearMonth, verbose_name='社員年月トラン', on_delete=models.CASCADE, related_name='schedule')
    date = models.DateField(verbose_name='日付')
    shisetsu1 = models.ForeignKey(Shisetsu, verbose_name='勤務地1', on_delete=models.SET_NULL, null=True, blank=True, related_name='schedule_shisesu1')
    shift1 = models.ForeignKey(Shift, verbose_name='シフト1', on_delete=models.PROTECT, null=False, blank=False, related_name='schedule_shift1')
    shisetsu2 = models.ForeignKey(Shisetsu, verbose_name='勤務地2', on_delete=models.SET_NULL, null=True, blank=True, related_name='schedule_shisetsu2')
    shift2 = models.ForeignKey(Shift, verbose_name='シフト2', on_delete=models.PROTECT, null=True, blank=True, related_name='schedule_shift2')
    shisetsu3 = models.ForeignKey(Shisetsu, verbose_name='勤務地3', on_delete=models.SET_NULL, null=True, blank=True, related_name='schedule_shisetsu3')
    shift3 = models.ForeignKey(Shift, verbose_name='シフト3', on_delete=models.PROTECT, null=True, blank=True, related_name='schedule_shift3')
    hope = models.BooleanField(verbose_name='希望', default=False)
    work_time = models.FloatField(verbose_name='労働時間', default=0)
    paid_break_time = models.FloatField(verbose_name='有給取得時間', default=0)
    memo = models.CharField(verbose_name='メモ', max_length=50, null=True, blank=True)
    created_by = CurrentUserField(verbose_name='登録者', related_name='schedule_create')
    update_by = CurrentUserField(verbose_name='更新者', on_update=True, related_name='schedule_update')

user_yearmonthに設定しているrelated_nameがポイントです。これをシリアライザーで年月トランで呼び出すことで逆参照されているものの中で、名前から探し出しくれるようになりますねー

表示部分を作る Vueだー

<template>
  <div>
    <v-simple-table>
      <thead>
        <tr>
          <!-- 日付の期間を表示 -->
          <th>{{ items[0].start_date + '~' + items[0].end_date }}</th>
          <!-- 取得した日付曜日リストを取り出し表示する -->
          <template v-for="item in items">
            <th v-for="dayweek in item.dayweek" :key="dayweek.index">
              <div v-if="dayweek.day_week_display === '土'">
                <span class="sat">
                  {{ dayweek.day }}
                  <br />
                  {{ dayweek.day_week_display }}
                </span>
              </div>
              <div v-else-if="dayweek.day_week_display === '日'">
                <span class="sun">
                  {{ dayweek.day }}
                  <br />
                  {{ dayweek.day_week_display }}
                </span>
              </div>
              <div v-else>
                <span>
                  {{ dayweek.day }}
                  <br />
                  {{ dayweek.day_week_display }}
                </span>
              </div>
            </th>
          </template>
        </tr>
      </thead>
      <tbody v-for="(item, key, index) in items" :key="index">
        <!-- 社員ごとのスケジュールを処理 -->
        <tr v-for="(useryear, index) in item.user_year_month" :key="index">
          <td>
            <p>
              {{ useryear.user.get_full_name +
              ' 労' +
              useryear.total_work_time +
              ' 有' +
              useryear.paid_break_time }}
            </p>
          </td>
          <td v-for="(schedule, index) in useryear.schedule" :key="index">
            <div v-bind:class="schedule.shisetsu1.color">
              {{ schedule.shift1.name }}
            </div>
            <div v-if="schedule.shift2 !== null">
              <div v-bind:class="schedule.shisetsu1.color">
                {{ schedule.shift2.name }}
              </div>
            </div>
            <div v-if="schedule.shift3 !== null">
              <div v-bind:class="schedule.shisetsu1.color">
                {{ schedule.shift3.name }}
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </v-simple-table>
  </div>
</template>

<style lang="scss" scoped>
.sat {
  text-align: center;
  color: #0d47a1;
}
.sun {
  text-align: center;
  color: #b71c1c;
}
td {
  text-align: center;
}
</style>

これで表示はされるようになりました!

まだちょっと体裁の整えが必要かもしれませんが、何とかなっていく感じですね!

エラーが治らんし、労働時間合計が処理されてなーい

表示されて喜んでいたけど、実はエラーが治っていない & 月間労働時間が0になっている。
エラーはこちら

エラー解消は、また明日ー

メリークリスマス🎄

-Django

© 2022 ごろう@縁紡ぐ