Hi，大家好，昨天我們完成了主頁之客服項目清單，今天我們接續下去，製作詳細資料的檢視頁面，那讓我們開始吧

增加連結功能與 click 事件

首先先接續昨天的作業，加入 click 事件

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<style>
  .showblock {
    border: 3px solid #bfbfbf;
    text-align: left;
    padding: 10px;
    padding-top: 20px;
    margin: 5px;
    border-radius: 50px;
    cursor: pointer
  }
  /* 增加 hilight 樣式 */
  .showblock:hover {
    background-color: rgb(207, 207, 207);
    border: 5px solid #bfbfbf;
  }
</style>
<div id="app" class="container">
  <h2>目前客服紀錄</h2>
  <div class="row">
     <!-- 增加 click 事件，將caseid 傳送至 vue.js 的 function 中執行 -->
    <div v-for="obj in data.cases" class="showblock col-3" @click="gotopage(obj.caseid)">
      {{obj.casedesc}}
      <hr>
      提出人：{{obj.fromper}}
    </div>
  </div>
</div>

<script>
  const { createApp, onBeforeMount, reactive } = Vue
  createApp({
    setup() {
      const data = reactive({
        cases: null,
      })
      onBeforeMount(() => {
        axios.get("/saf/jsapi/listCases").then(function (response) {
          data.cases = response.data
        }).catch(function (response) {
          console.log(response);
        })
      })
      return { data }
    },
    /* 事件宣告 */
    methods: {
      gotopage(caseid) {
         // 結合網址後執行換頁
        window.location.href = "/saf/viewcase/" + caseid
      }
    }
  }).mount('#app')
</script>

說明：
增加 click事件，並透過 css 之方式將 div 模擬成為超連結的效果

設定 Sequelize 的關聯

依照ER Model，每個客服紀錄均有對應的處理情形，平常使用時，可以用自己寫程式分次抓，也可以透過 Sequelize 本身的機制，設定完畢後就將 master / detial 一併抓出，不用自己寫程式一個表一個表抓出來，設定方法如下

1. 打開 /model/db/cases.js

'use strict';
const Sequelize = require("sequelize");
const db = require("./database");
const circuit = require("./circuit")
const object = db.define("cases", {
    caseid: {
        field: "caseid",
        type: Sequelize.STRING(40),
        primaryKey: true
    },
    casedesc: {
        field: "casedesc",
        type: Sequelize.STRING(100),
    },
    // 中間省略
}, {
    freezeTableName: true,
    timestamps: false
});
//設定本表有多個 circuit （處理情形） 資料，其外部鍵為 mainid，刪除與修改時，會連同 detial 一併處理
object.hasMany(circuit, {
    foreignKey: 'mainid',
    onDelete: 'CASCADE',
    onUpdate: 'CASCADE'
})

module.exports = object;

2. 打開 /model/casedao.js

'use strict';
const cases = require("./db/cases")
const circuit = require("./db/circuit")
const Sequelize = require("sequelize");
const op = Sequelize.Op

module.exports = {

    /**
     * 取得客服案件詳細資料
     * @param {string} guid 客服紀錄編號
     */
    getSingleCase: async(guid)=> {
        return new Promise((resolve, reject) => {
            cases.findOne({
                where: {
                    caseid: guid
                },
                //include 表示需包含 circuit 之 detial 資料，sequelize 會解析成為 left join
                include : [circuit] 
            }).then((data) => {
                let result = {}
                if(data) {
                    result = data.dataValues
                }
                resolve(result)
            }).catch((err) => {
                reject(err.message)
            })
        })
    },
    // 中間省略
}

說明：
新增傳入客服紀錄編號後，取出客服資料，取出之過程中並利用 include 之機制將 detial 資料一併取出，並以物件陣列之型態存放，其結果如下圖

結語

今天完成了 sequelize 的 hasMany 的設定與程式撰寫，可以看出來 sequelize 在處理後端資料庫是很輕鬆的，目前我們將後端的資料庫模組處理完畢，明天開始處理系統使用者交叉查詢的機制，透過前端與後端的交互使用，完成使用者查詢的功能，我們明天再繼續吧