Vue.js

Django

Vue.jsでシフト管理表を作成中

Djangoのみで以前作成したシフト表をSPA化を目指す

友人の会社はとても人力で作業を行っています。

福祉業界なのですが、まだまだそれが一般的だそうです。

そこで、人のために役立つならということだとモチベーションが湧くタイプの私は、Excelでいろいろ改善したのですが、これがまた、操作によってちゃんと使えなかったり、式を壊しちゃったりで。

 

そこで、Djangoで以前、シフト表を作成したのですが、これがタイミング等もあって使われないまま時間が過ぎてしまいました。

その間に、プログラミングスクールに通ったり、SPAの作り方を知ってこれからのWebシステム作成にとっては、とても重要なスキルだと思い作り直しを決めました。

 

シフト表を表示する

Djangoから受け渡されたスケジュールデータを表示するところまで行けました(⌒∇⌒)

 command
<script lang="ts"> import { Component, Vue } from 'vue-property-decorator' @Component({ components: {} }) export default class Schedule extends Vue {
  get contents() {
    return this.$pageContents.Schedule
  }
  items: Schedule.Schedule[] = []
  id: ''
  // 初期表示時に呼び込み
  async created() {
    const [err, res] = await this.$api.schedule.getSchedule()
    if (!err && res) {
      this.items = res
      console.log(res)
    }
  }
</script>
<template>
  <div>
    <v-simple-table>
      <thead>
        <tr>
          <th>{{ items[0].open_flg_display }}</th>
          <template v-for="item in items">
            <th v-for="dayweek in item.dayweek" :key="dayweek.index">
              {{ dayweek.day }}
              <br />
              {{ dayweek.day_week_display }}
            </th>
          </template>
        </tr>
      </thead>
      <tbody v-for="item in items">
        <tr v-for="(emp_year_month, index) in item.emp_year_month" :key="emp_year_month.id">
          <td>
            {{ emp_year_month.emp.emp_nm }}
          </td>
          <td v-for="schedule, index) in emp_year_month.schedule" :key="schedule.id">
            {{ schedule.shift1.name }}
            <div v-if="schedule.shift2!==null">
              {{ schedule.shift2.name }}
            </div>
            <div v-if="schedule.shift3!==null">
              <v-text class="red">{{ schedule.shift3.name }}</v-text>
            </div>
          </td>
        </tr>
      </tbody>
    </v-simple-table>
  </div>
</template>
<style lang="scss" scoped></style>

悪戦苦闘すること、10時間強でしょうか。Django側からのSerializerの作成も時間がかかったのと、DjangoのTemplateで結構処理を処理をいれていたのですが、フロントエンドで同じことをするよりも、フロントエンド側で処理がなるべく少ない形でできるようにテーブル構成を変更したりしたので、時間がかかりました💦

コードの結果の画面はこんな感じです。

 

感動です!

まだまだ、これからたくさん実装しないといけないことがあるんですが、第一歩を踏み出せた気がします!

 

私の参考にしているコードが、テンプレートが下でスクリプトが上なのでそれをまねています。
上下どちらでも、そんな影響はないような気がします。
最初作り始めた時に、標準通り上にTemplateがある状態でしばらくコードを作っていたので(笑

-Django

© 2022 ごろう@縁紡ぐ