Django

VuejsでモーダルウインドウをからDjangoへリクエスト送信(Total:29day87.5h)

モーダルウインドウからDjangoへリクエスト送信

出張等が重なり2日間プログラミングができなかった💦
『仕事って当たり前のことを当たり前にやる』ってことが、結構価値があることなんだなぁって思います。


コンサルさんって当たり前のことを順序だてて分析することを何度もしていて、資料作りもそのため早く、スピード感もってする意識が高い。
別に特殊な能力じゃないってことを感じた…

正直、社内での軋轢がないなら自分にもやれる…
ってことは、コンサルって外部やから、他の会社に「いつまでに提出できますか?」「できていない原因はなんですか?」とか、そういったことを言っても、内部攻撃がない。

コンサルって本当にこれが魅力的。


シフトの選択を変更した時に、シフトに設定されている時間を表示したりしたいなぁーとは、思っています。
今後実装をしようと思いますが、今は、とりあえずDjangoへリクエスト送信して単純な更新ができるようにしていくためのフロントエンド側の実装です。

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

@Component({
  components: {
  }
})
export default class ScheduleDetail extends Vue {
  dialog = false
  schedule = []
  useryearmonth = []
  selectShisetsu = []
  selectShift = []
  shisetsu1 =""
  shift1=""
  shisetsu2=""
  shift2=""
  shisetsu3 =""
  shift3=""
  work_time=0
  paid_break_time=0
  //ダイアログ表示
  dialogChange(useryear, schedule: any, index) {
    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
    // console.log(schedule.shisetsu2)
    if (schedule.shift2) {
      this.shisetsu2 = schedule.shisetsu2.name //施設2
      this.shift2 = schedule.shift2.name //シフト2
    }
    if (schedule.shift3) {
      this.shisetsu3 = schedule.shisetsu3.name //施設2
      this.shift3 = schedule.shift3.name //シフト2
    }
    this.work_time = schedule.work_time //労働時間
    this.paid_break_time = schedule.paid_break_time //有給時間
    this.dialog = true
  }
  //編集結果リクエスト
  async handleRecord() {
    const [res, err] = await $api.schedule.doUpdate(
      this.schedule.schedule_id,
      {
        version: this.schedule.version,
        shisetsu1: this.shisetsu1
      }
    )
  }
}
</script>

<template>
  <div v-if="useryearmonth.user">
    <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-select
                  :items="selectShisetsu"
                  label="施設2"
                  item-text="name"
                  item-value="shisetsu-id"
                  v-model="shisetsu2"
                  clearable
                >
                </v-select>
              </td>
              <td>
                <v-select
                  :items="selectShift"
                  label="シフト2"
                  item-text="name"
                  item-value="shift-id"
                  v-model="shift2"
                  clearable
                >
                </v-select>
              </td>
            </tr>
            <tr>
              <td>
                <v-select
                  :items="selectShisetsu"
                  label="施設3"
                  item-text="name"
                  item-value="shisetsu-id"
                  v-model="shisetsu3"
                  clearable
                >
                </v-select>
              </td>
              <td>
                <v-select
                  :items="selectShift"
                  label="シフト3"
                  item-text="name"
                  item-value="shift-id"
                  v-model="shift3"
                  clearable
                >
                </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>
  </div>
</template>

<style lang="scss" scoped></style>
import api from '@/services/api'

export function doUpdate(
  schedule_id: number,
  data: {
    version: number
    shisetsu1: string
  }
  ) {
  return (
    api.request({
      method: 'put',
      url: `api/schedule/update/${schedule_id}`,
      data
    })
  )
}

ごろう
やっぱり新たなものが作れるようになることは楽しいなぁ


これが誰かの役に立つと思うとテンションがあがる!

-Django

© 2022 ごろう@縁紡ぐ