# 出口報表

更新時間: 2024/04/25
## 相關技術
* HTML
* Javascript
* CSS
* [Tailwindcss](https://tailwindcss.com/docs/installation)(非必要使用)
* npm(非必要使用)
## 程式目錄

│  package-lock.json    # 非必要可不用調整
│  package.json         # 非必要可不用調整
│  tailwind.config.js   # 非必要可不用調整
└─src
   │──── index.html     # 主檔  
   │──── input.css      # 放置@tailwind directive，非必要可不用調整
   │──── script.js      # 控制"Inert Goodsitem"與"特定欄位換行動態字型大小調整"
   └──── styles.css     # 樣式檔，使用Tailwindcss CLI建立後，也可直接新增樣式

## 開發說明
此出口報單套表使用[Tailwindcss](https://tailwindcss.com/docs/installation)的方式撰寫HTML，簡單來說，在每個區塊中class中加入特定關鍵字可完成css效果
下方範例，相當於{text-align: center}的效果

<div class='text-center' />

## 塞值位置
可直接點開index.html，如下圖顯示，若想要塞{(1)}的位置，可在下方程式碼的第三行修改，{報單運別(2)}位置在第五行修改，以此類推~

<div class="border-black border-t-2 border-r-2 grid grid-cols-[17mm_10mm_17mm_31mm_10mm_25mm_10mm_22mm]">
  <div class="cell-header">海空運別(1)</div>
  <div class="cell-content" id="transType">{(1)}</div>
  <div class="cell-header">報單運別(2)</div>
  <div class="cell-content" id="boetype">{報單運別(2)}</div>
  <div class="cell-header">聯別</div>
  <div class="cell-content">{聯別}</div>
  <div class="cell-header">頁次</div>
  <div
    id="pageNumber"
    class="text-xxs text-center content-center border-b border-black"
  ></div>
</div>

## Insert Goodsitem
在script.js裡，有預設goodsitem的測試資料，可以根據每個預設的key與value，從畫面上呈現的修改欲塞入的值，每個key都有使用到，從有使用到的地方修改即可~

let goodsitemList = Array.from({ length: 21 }, (v, i) => {
    return {
      item: i + 1,
      buyerordernum: "68.3D100.554",
      sellordernum: "CDP-B753T12SL",
      brand: "NO BRAND",
      goodsList: [
        "CDP-B753T12SL",
        "68.3D100.554",
        "COLOR RESIST B753T12SL",
        "PO NO.220001056476",
        "核准文號:111L0835",
      ],
      primal_boenum: null,
      primal_item: null,
      permit_no: "{輸出入許可文件號碼、項次}",
      goodsstandardnum: "{輸出入貨品分類號列}",
      is_bond_snum: "{保稅貨物註記|主管機關指定代號}",
      price: "{單價}",
      currency: "{幣別}",
      amt: "{金額}",
    };
  });