今回やること

　本連載の⑯から「Element UI」を導入しましたが、既存画面のコントロールはそのままにしていました。
　折角、新しいコンポーネントライブラリを導入しましたので、既存画面のコントロールを「Element UI」のコンポーネントに置き換えたいと思います。

プログラムの修正

　各画面の表示を修正します。

メイン画面の修正

　画面下部の「鑑賞年」プルダウンリスト、〔記録追加〕〔カレンダー登録〕ボタンを修正します。
　プルダウンリストは<el-select>を、ボタンは<el-button>を使用します。

現行の表示
修正後の表示

Index.html

現行のソース

    <div style="text-align: center;">
      <select v-model="selectedYear" @change="doChangeYear">
        <option disabled value="">鑑賞年</option>
        <option v-for="year in optionYear" 
          v-bind:value="year.year" 
          v-bind:key="year.id">
        {{ year.year }}
        </option>
      </select>&nbsp;&nbsp;&nbsp;&nbsp;
      <button type="button" class="btn btn-primary" id="show-modal" @click="doShowModal">記録追加</button>&nbsp;&nbsp;&nbsp;&nbsp;
      <!-- <button type="button" class="btn btn-warning" id="test-test" onClick="getTheaters('2021年')">テスト</button> -->
      <button type="button" class="btn btn-primary" id="show-calendar" @click="doShowCalendar">カレンダー登録</button>&nbsp;&nbsp;&nbsp;&nbsp;
      <el-button @click="doShowTheater">映画館メンテナンス</el-button>
    </div>

修正後のソース

    <div style="text-align: center;">
      <el-select v-model="selectedYear" placeholder="鑑賞年" @change="doChangeYear">
        <el-option v-for="year in optionYear" 
          v-bind:value="year.year" 
          v-bind:key="year.id"
          v-bind:label="year.year">
        </el-option>
      </el-select>
      <el-button type="primary" @click="doShowModal">記録追加</el-button>
      <el-button type="primary" @click="doShowCalendar">カレンダー登録</el-button>
      <el-button @click="doShowTheater">映画館メンテナンス</el-button>
    </div>

［記録追加］ダイアログボックスの修正

　「鑑賞日」カレンダー、「タイトル」テキストボックス、「初見」ラジオボタン、〔閉じる〕〔追　加〕ボタンを修正します。
　カレンダーは<el-date-picker>を、テキストボックスは<el-input>を、ラジオボタンは<el-radio-group>と<el-radio>を、ボタンは<el-button>を使用します。

現行の画面
修正後の画面

modalScript.html

現行のソース

          <div class="modal-body">
            <slot name="body">
              default body {{ message }}
            </slot>
            <form>
              <div class="form-group" id="data-id-group" v-if="cond.id !== 0">
              <div class="input-group">
                <label for="data-id" class="col-form-label">ID：</label>
                <input type="text" class="form-control" id="data-id" v-model="cond.id" readonly>
              </div>
              </div>
              <div class="form-group">
              <div class="input-group">
                <label for="viewing-date" class="col-form-label">鑑賞日：</label>
                <!-- <input type="text" class="form-control" id="viewing-date" v-model="cond.viewingDate"> -->
                <vuejs-datepicker input-class="form-control" id="viewing-date" v-model="cond.viewingDate" :format="datepicker.format"></vuejs-datepicker>
              </div>
              </div>
              <div class="form-group">
                <label for="movie-name" class="col-form-label">タイトル：</label>
                <input type="text" class="form-control" id="movie-name" v-model="cond.movieName">
              </div>
              <div class="form-group">
                <label for="theater-name" class="col-form-label">映画館：</label>
                <!-- <input type="text" class="form-control" id="theater-name" v-model="cond.theaterName"> -->
                <vue-select class="form-control" id="theater-name" :options="vueselect.options" v-model="cond.theaterName" style="border: 0px;"></vue-select>
              </div>
              <div class="form-group">
              <div class="input-group">
                <label for="first-look" class="col-form-label">初見：</label>
                <!-- <input type="text" class="form-control" id="first-look" v-model="cond.firstLook"> -->
                <input type="radio" name="first-look" class="form-control" id="first-look-yes" v-model="cond.firstLook" value="1">
                <label for="first-look-yes" class="form-control" style="border: 0px;">はい</label>
                <input type="radio" name="first-look" class="form-control" id="first-look-no" v-model="cond.firstLook" value="0">
                <label for="first-look-no" class="form-control" style="border: 0px;">いいえ</label>
              </div>
              </div>
              <div class="form-group">
              <div class="input-group">
                <label for="my-rate" class="col-form-label">評価：</label>
                <el-rate class="form-control" id="my-rate" v-model="cond.rate" style="border: 0px;"></el-rate>
                <el-button type="text" class="form-control" @click="clrRate">クリア</el-button>
              </div>
              </div>
            </form>
          </div>

          <div class="modal-footer">
            <slot name="footer">
              default footer
              <button type="button" class="modal-default-button btn btn-primary" @click="addData">{{ subject }}</button>
              <button type="button" class="modal-default-button btn btn-secondary" @click="$emit('close-modal')">閉じる</button>
            </slot>
          </div>

改修後のソース

          <div class="modal-body">
            <slot name="body">
              default body {{ message }}
            </slot>
            <el-form label-position="left" label-width="70px">
              <el-form-item label="ID：" v-if="cond.id !== 0">
                <el-input v-model="cond.id" disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="鑑賞日：">
                <!-- <vuejs-datepicker v-model="cond.viewingDate" :format="datepicker.format"></vuejs-datepicker> -->
                <el-date-picker v-model="cond.viewingDate" type="date" placeholder="日付を選択してください"></el-date-picker>
              </el-form-item>
            </el-form>
            <el-form label-position="top">
              <el-form-item label="タイトル：">
                <el-input v-model="cond.movieName" style="position: relative; top: -10px;"></el-input>
              </el-form-item>
              <el-form-item label="映画館：">
                <vue-select :options="vueselect.options" v-model="cond.theaterName" style="position: relative; top: -10px;"></vue-select>
              </el-form-item>
            </el-form>
            <el-form>
              <el-form-item label="初見：">
                <el-radio-group v-model="cond.firstLook">
                  <el-radio :label="1" border>はい</el-radio>
                  <el-radio :label="0" border>いいえ</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
            <el-form :inline="true">
              <el-form-item label="評価：">
                <el-rate v-model="cond.rate" style="position: relative; top: 10px;"></el-rate>
              </el-form-item>
              <el-form-item>
                <el-button type="text" class="form-control" @click="clrRate">クリア</el-button>
              </el-form-item>
            </el-form>
          </div>

          <div class="modal-footer">
            <slot name="footer">
              default footer
            </slot>
            <span style="float: right;">
              <el-button type="info" @click="$emit('close-modal')">閉じる</el-button>
              <el-button type="primary" @click="addData">{{ subject }}</el-button>
            </span>
          </div>

　【重要】 上記の修正だけでは、カレンダーの表示が正しく日本語で表示されません。
　　　　　日本語化する為に、次の記述を追加する必要があります。

Index.html

  <script src="https://unpkg.com/element-ui@2.14.0/lib/umd/locale/ja.js"></script>

Vuejs.html

<script>
ELEMENT.locale(ELEMENT.lang.ja)

　《修正前》　　　　　　　　　　　　　　　　　　《修正後》
　　
　　◆参考サイト [Vue.js]Element UIをCDN利用環境で日本語化する方法

　【重要】 このままでは、プルダウンリストが正しく表示されませんので、次の修正も必要です。

modalStyle.html

現行のソース

<style>
.modal-mask {
  position: fixed;
  z-index: 9998;

修正後のソース

<style>
.modal-mask {
  position: fixed;
  z-index: 2;

［カレンダー登録］ダイアログボックスの修正

　「鑑賞日」カレンダー、〔閉じる〕〔追　加〕ボタンを修正します。
　カレンダーは<el-date-picker>を、ボタンは<el-button>を使用します。

現行の画面
修正後の画面

calendarScript.html

現行のソース

          <div class="modal-body">
            <slot name="body">
              {{ message }}
            </slot>
            <form>
              <div class="form-group">
              <div class="input-group">
                <label for="viewing-date" class="col-form-label">鑑賞日：</label>
                <vuejs-datepicker input-class="form-control" id="viewing-date" v-model="cond.viewingDate" :format="datepicker.format"></vuejs-datepicker>
              </div>
              </div>
            </form>
          </div>

修正後のソース

          <div class="modal-body">
            <slot name="body">
              {{ message }}
            </slot>
            <el-form>
              <el-form-item label="鑑賞日：">
                <el-date-picker v-model="cond.viewingDate" type="date" placeholder="日付を選択してください"></el-date-picker>
              </el-form-item>
            </el-form>
          </div>

◆前の記事 GASでWebアプリ｢映画鑑賞記録｣を作る⑰

◆索引 GASでWebアプリ｢映画鑑賞記録｣を作る《索引》