Django

Vuetify コンポーネントを2つ使って表示する

VuecliのComponentを使う

SPAは、ブロックごとに作っていくことで、ひとつひとつの部品の開発範囲を小さくすることで、開発しやすくします。

同じ部品を複数人で触ると、トラブルになることが多いです。

画面毎の開発ではなく、部品ごとに開発することで生産性があがるということです。

私の場合は、個人で開発しているので影響はありませんが、長くなったコードを分析するより短いコードで部品ごとに分かれている方が、変化には対応しやすくなります。

目指いる完成形のイメージはこちら

VuecliのViewで最初に呼ばれるコンポーネントを指定

まだ、作りかけなので、不要なタグがありますが、今回は、ScheduleHeaderだけを呼び込みしています。

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import AppDefaultSidebar from '@/common/components/ui/AppDefaultSidebar.vue'

@Component({
  components: {
    ScheduleHeader,
    AppDefaultSidebar
  }
})
export default class ScheduleYearMonth extends Vue {}
</script>
<template>
  <div class="app-sidebar">
    <div class="wrap-schedule">
      <div class="wrap-schedulelist">
        <ScheduleHeader />
      </div>
    </div>
  </div>
</template>
<style lang="scss"></style>

ScheduleHeaderコンポーネント

ScheduleHeaderには上記だけを設定しようと思ってたのですが、今は、ScheduleHeaderの中にScheduleTableがあるので少しタイトルが変です💦

今は、勉強がてら作っているのですが、流用しながらまた再構築するときに修正もしようと思っています。

ScheduleHeaderの中は、こちらです。

ScheduleHeader

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import moment from 'moment'
import ScheduleTable from '@/modules/schedule/ScheduleTable.vue'
@Component({
  components: {
    ScheduleTable
  }
})
export default class ScheduleHeader extends Vue {
  get contents() {
    return this.$pageContents.STORE_NAME
  }
  // items: Schedule.Schedule[] = []
  // // 初期表示時に呼び込み
  // async created() {
  //   const [err, res] = await this.$api.schedule.getSchedule(this.today)
  //   if (!err && res) {
  //     this.items = res
  //     console.log(res)
  //   }
  // }
}
</script>
<template>
  <div class="container">
    <div class="row">
      <v-btn class="ma-2" color="orange darken-2" dark>
        <v-icon dark left>mdi-arrow-left</v-icon>
        前月
      </v-btn>
      <v-btn class="ma-2" color="primary darken-2" dark>夜間CK</v-btn>
      <v-checkbox
        v-model="checkbox1"
        :label="contents.CHECK_KAITAKU"
      ></v-checkbox>
      <v-checkbox
        v-model="checkbox2"
        :label="contents.CHECK_ENTAKU"
      ></v-checkbox>
      <v-checkbox
        v-model="checkbox3"
        :label="contents.CHECK_PUAPU"
      ></v-checkbox>
      <v-btn class="ma-2" color="primary darken-2" dark>翌月シフト作成</v-btn>
      <v-btn class="ma-2" color="orange darken-2" dark>
        <v-icon dark left>mdi-arrow-right</v-icon>
        翌月
      </v-btn>
    </div>
    <ScheduleTable />
  </div>
</template>
<style lang="scss" scoped></style>

Componetを入れるのは簡単

コンポーネントを呼び出すのは、本当に単純ですね。

データの受渡しがあったら、複雑になっていくんでしょうが、今はまだ見た目だけの調整ですので簡単です。

Headerの各項目の変更により、ScheduleTableの表示を変更するとなると難易度があがると思います。

まぁ、コンポーネント開発には必須のことなので、やっていけば覚えれるでしょう✊

今の表示画面は、こんな感じです。

vuejs

-Django

© 2022 ごろう@縁紡ぐ