Hi，大家好，今天是中秋佳節，祝大家烤肉吃到飽啦，今天我們要完成詳細資料顯示頁面，主要是資料的顯示機制，依照資料不同顯示不同之css，控制元素的顯示、隱藏、加上附圖顯示機制，共4項作業，那麼讓我們開始吧

資料的顯示機制

<div id="app" class="container">
    <h3>問題描述</h3>
    <div class="row dr tr">
        <div class="col-2 title txtr">問題名稱：</div>
        <div class="col-10 info">{{data.cases.casedesc}}</div>
    </div>
    <div class="row dr">
        <div class="col-2 title txtr">問題描述：</div>
        <div class="col-10 info">{{data.cases.caseinfo}}</div>
        </div>
    </div>
    <div class="row dr">
        <div class="col-2 title txtr">聯絡人：</div>
        <div class="col-6 info">{{data.cases.fromper}} <a href="mailto://{{data.cases.frommail}}">{{data.cases.frommail}}</a></div>
        <div class="col-2 title txtr">聯絡電話：</div>
        <div class="col-2 info">{{data.cases.fromtel}}</div>
    </div>
        <div class="row dr">
        <div class="col-2 title txtr">登錄時間：</div>
        <div class="col-8 info">{{data.cases.logdate}}</div>
        <div class="col-2 info">{{data.cases.casestatus_desc}}</div>
    </div>
    <hr/>
    <div>
      <h3>辦理情形</h3>
      <div class="row " v-for="(item, index) in data.cases.circuits">
          <div class="col-1 info">{{ index + 1 }}</div>
          <div class="col-2 info">{{item.flowsdate}}</div>
          <div class="col-2 info">{{item.userid}}</div>
          <div class="col-5 info">{{item.flowdesc}}</div>
          <div class="col-2 info">{{item.status_desc}}</div>
      </div>
  </div>
</div>
<script>
    const { createApp, onBeforeMount, reactive } = Vue
    createApp({
      setup() {
        const data = reactive(cases = [])
        onBeforeMount(() => {
          axios.get("/saf/jsapi/caseinfo/<%=guid %>").then(function (response) {
            let obj = response.data
            data.cases = obj
            
          }).catch(function (response, b) {
            alert(response.response.data)
          })
        })
        return { data}
      },
      methods: {

      }
    })
    .mount('#app')
  </script>

說明：如同前幾天我們在主頁上所做的動作一樣，在 script 中使用 axios 去後端抓資料後，再利用 {{xxx}}的機制顯示資料，在這邊不再贅述了

依照資料不同顯示不同之css

這是很常用的情境，以我這次為例，狀態是完成時，顯示綠色背景、其他表示處理中，顯示黃色背景，我們可以透過 v-bind:class 來達成這個目的，做法如下

<div class="col-2" v-bind:class="[item.status == '10'? 'info': 'inpcc']">{{item.status_desc}}</div>

控制元素的顯示、隱藏

這也是常用的情境，利用v-if 加判斷式的機制，可以控制元素的顯示隱藏，做法如下

    <div v-if="data.cases.circuits.length > 0">
      <h3>辦理情形</h3>
      <div class="row " v-for="(item, index) in data.cases.circuits">
          <div class="col-1 info">{{ index + 1 }}</div>
          <div class="col-2 info">{{item.flowsdate}}</div>
          <div class="col-2 info">{{item.userid}}</div>
          <div class="col-5 info">{{item.flowdesc}}</div>
          <div class="col-2" v-bind:class="[item.status == '10'? 'info': 'inpcc']">{{item.status_desc}}</div>
      </div>
  </div>

說明：若是 data.cases.circuits 為空陣列時，隱藏整個區塊，否則顯示區塊內容

結語

我們今天已經完成了詳細資料顯示頁面，除了讀出資料之外，亦可以配合狀況進行畫面的動態調整，明天預計進入到表單處理的作業，那麼，我們明天再繼續吧
PS. 本日完成之內容