Django

表示はできた!あとは、細かい設定をやっていく(Total:17day57.5h)

スケジュール表の表示や処理をいれていくー

処理を入れようと色々していった中で、データの取得の処理についてたまたまいい記事を見つけて参考にして修正したりしました。

https://qiita.com/shisama/items/61cdcc09dc69fd8d3127

もともとはこんな感じ

    $api.yearmonth.getSchedule(this.today).then(response => {
      this.items =response.data;
    })

修正後はこちら。

  async created() {
    const res = await $api.yearmonth.getSchedule(this.today)
    this.items = res.data
  }

responoseってresって感じで、errorは、errって省略することが多いのも知れてよかったです☺

スケジュールを表示させる

色々、やっててメモもせずにすすめちゃったので、苦難な道のりをなかなかアピールすることができないのが残念…
とりあえず今の画面

うえのボタンの配置がまだうまくいってませんが、

『とりあえず先に機能実装だ!』

っていうことで進めていこうと思う。

<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 {
  // get contents() {
  //   return this.$pageContents.Schedule
  // }
  items = []
  today = [moment().format('YYYYMMDD')]
  nextmonth = []
  // 初期表示時に呼び込み
  async created() {
    const res = await $api.yearmonth.getSchedule(this.today)
    this.items = res.data
    this.getNextOpenFlag(this.items[0].start_date)
  }
  async getLastMonth(date) {
    const res = await $api.yearmonth.getSchedule(moment(date).subtract(1, 'months').format('YYYYMMDD'))
    this.items = res.data
    this.getNextOpenFlag(moment(date).subtract(1, 'months').format('YYYYMMDD'))
  }
  async getNextMonth(date) {
    const res = await $api.yearmonth.getSchedule(moment(date).add(1, 'months').format('YYYYMMDD'))
    this.items = res.data
    this.getNextOpenFlag(moment(date).add(1, 'months'))
  }
  async getNextOpenFlag(date) {
    console.log(date)
    const res = await $api.yearmonth.getNextOpenFlag(moment(date).add(1, 'months').format('YYYYMMDD'))
    this.nextmonth = res.data
  }
    // $api.yearmonth.getSchedule(this.today).then(response => {
    //   this.items =response.data;
    //   console.log(this.items[0])
    // })
  // @Watch('checkbox_kaitaku') onBooleanCheanged() {
  //   console.log(this.checkbox_kaitaku)
  // }
}
</script>

<template>
  <div>
    <v-btn
      class="ma-2"
      color="orange darken-2"
      dark
      @click="getLastMonth(items[0].start_date)"
    >
      <v-icon dark left>mdi-arrow-left</v-icon>
      前月
    </v-btn>
    <v-btn
      class="ma-2"
      color="primary darken-2"
      dark
    >
      公開/非公開
    </v-btn>
    <!-- 翌月のデータがなければ翌月ボタン非表示 -->
    <p v-if="nextmonth.length !==0">
      <v-btn
        class="ma-2"
        color="orange darken-2"
        dark
        @click="getNextMonth(items[0].start_date)"
      >
        <v-icon dark left>mdi-arrow-right</v-icon>
        翌月
      </v-btn>
    </p>
    <!-- 翌月のデータがなければ翌月シフト作成ボタンを表示する -->
    <p v-else>
        <v-btn class="ma-2" color="primary darken-2" dark>翌月シフト作成</v-btn>
    </p>
    <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>

シングルページアプリケーションでの作成について

9月終わりぐらいにSPAという技術を知って、少しづつ勉強しながら知識を増やしてきました。
DjangoとVuejsでのプログラミングについて思うこと…

  • バックエンドでなるべくs処理をする
  • フロントエンドは難しい(不慣れなため)
  • Vuetifyは、Bootstrapみたいで使いやすい

まだまだ、SPAで作る本当の便利さを理解できていないところもありますが…(笑)
色んな記事を見てると、SPAは期間システムでは向いていないとかの記事もちらほら。毎回、画面を読み込みすることで最新のデータをちゃんと確認できることや、排他制御もきちんとできるとのことです。

SPAに対する批判記事も一定数あるけど挑戦する

なんで挑戦するかというと、出始めの技術には必ず保守派がいて批判する人がいるのが世の常だから。

両方の技術を知っていて、今回はこっちが最適と選択することが1番だと思う。

ごろう
たくさん知っている知識からチョイスできることは、それだけしか知らなくてチョイスするのとは違うよね

今日は、プログラミングをお休みするかもです

-Django

© 2022 ごろう@縁紡ぐ