Django

Vuejsでモーダルウインドウを起動させる(Total:28day85h)

モーダルウインドウでシフト編集

2日間、リフレッシュで外出していてプログラミングをしなかった。
何か、少し休んだことで、プログラミングへの気持ちが冷めたり何かかわるかなぁ?って思ったんですが、特になにも変わらず(笑)

やっぱ、プログラミングで誰かの役に立ちたいって気持ちは変わらずです。

先に実装途中の画面。これから何日かかけて色々機能追加していきます。

モーダルウインドウの流れ

親コンポーネントから子コーポネントのdailog(表示非表示)をTrueにする

子コーポぽネントの表示がTrueになり画面に表示される

表示の際に、スケジュールにあるクリックされたセルの情報を渡す

  // セルをクリックするとスケジュールを変更画面を起動する
  clickCell(useryear, schedule, index) {
    this.$refs.scheduledetail.dialogChange(useryear, schedule, index)
  }

これだけなんですね…実は、これだけでも2時間以上格闘してました(笑)

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component({
  components: {
  }
})
export default class ScheduleDetail extends Vue {
  dialog = false
  schedule = []
  useryearmonth = []
  selectShisetsu = []
  selectShift = []
  shisetsu1 =""
  shift1=""
  work_time=0
  paid_break_time=0
  dialogChange(useryear, schedule: any, index) {
    console.log(schedule)
    this.selectShisetsu = useryear.user.shisetsu //施設選択
    this.selectShift = useryear.user.shisetsu[0].shift //シフト選択
    this.useryearmonth = useryear //ユーザー年月オブジェクト
    this.schedule = schedule //スケジュールオブジェクト
    this.shisetsu1 = schedule.shisetsu1.name //施設1
    this.shift1 = schedule.shift1.name //シフト1
    this.work_time = schedule.work_time //労働時間
    this.paid_break_time = schedule.paid_break_time //有給時間
    this.dialog = true
  }
  async handleRecord() {
    const [response, error] = await this.$api.schedule.doUpdate(
      this.schedule[0].schedule_id,
      {
        version: this.schedule[0].version
      }
    )
  }
}
</script>

<template>
  <v-row justify="center">
    <v-dialog
      v-model="dialog"
      persistent
      max-width="500"
    >
      <v-card>
        <v-card-title class="text-h5">
          {{ useryearmonth.user.get_full_name }}
          <br>{{ schedule.date }}
        </v-card-title>
        <!-- 入力フォーム -->
        <v-card-text>
          <tr>
            <td>
              <v-select
                :items="selectShisetsu"
                label="施設1"
                item-text="name"
                item-value="shisetsu-id"
                v-model="shisetsu1"
              >
              </v-select>
            </td>
            <td>
              <v-select
                :items="selectShift"
                label="シフト1"
                item-text="name"
                item-value="shift-id"
                v-model="shift1"
              >
              </v-select>
            </td>
          </tr>
          <tr>
            <td>
              <v-text-field
                label="労動時間"
                outlined
                v-model="work_time"
              ></v-text-field>
            </td>
            <td>
              <v-text-field
                label="有給時間"
                outlined
                v-model="paid_break_time"
              ></v-text-field>
            </td>
          </tr>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="green darken-1"
            text
            @click="dialog = false"
          >
            Disagree
          </v-btn>
          <v-btn
            color="green darken-1"
            text
            @click="handleRecord"
          >
            Agree
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-row>
</template>

<style lang="scss" scoped></style>

親コンポーネントからdialogChangeがTrueになることで、処理が走ります。子コーポネントのボタンを押下した時に、処理を走らせたりした後に、Falseに変更することでモーダルウインドウが閉じられます。

ごろう
1回理解したら、実装スピードはあがりそう!Djangoも苦労したなぁ

-Django

© 2022 ごろう@縁紡ぐ