rex0220 計算式プラグイン スペース項目で見積書の印刷

[計算式プラグイン](https://qiita.com/rex0220/items/ae83c6d5ce50ff7a9a73)と[項目検証プラグイン](https://qiita.com/rex0220/items/be20fd879f5e1bc9e035)でスペース項目に見積書を表示・印刷してみます。

# 概要

スペース項目に見積書を作成して、印刷してみます。
PDFにすると、罫線の表示がいまいち。(太くなったり細くなったり)
昔よりはよくなったと思いますが、ちょっと気になります。
kintone 標準の印刷機能ではなく、スペース項目を画像データとして、PDFを作るともう少しましかもしれません。そうするとPDFにテキストが残らなくなりますが、見積書であればテキストは不要かも。

- html 見積書のメリットとしては、
    - 折り返しや行数増加に対応できる
    - 印刷回数の制限が無い
- デメリットとしては、
    - 計算式作成が面倒
    - html と css の基礎知識が必要
    - 罫線の表示品質がいまいち
    - 定型フォーマットが使え無い
    - 添付ファイル項目には、マニュアルでアップロードが必要

タブ表示プラグインで、スペース項目をプレビューとしています。

![2025-02-12_04h02_55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/a365888b-e538-8db7-f7db-02626915d6fb.png)

- 印刷画面

![2025-02-12_04h03_12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/5a29d3a9-93c8-3675-6c90-d0a2c03c6edd.png)


- 印刷画面：　行数が多いケース

![2025-02-12_04h04_48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/5e051d17-4290-141a-80c3-737843b06d39.png)

- PDF例：　印刷時「背景のグラフィック」を無し

![2025-02-12_04h05_32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/96024745-03d0-894f-4a3b-f3d725f9bf28.png)

# アプリ設定

項目検証プラグインで非表示にできない「ラベル」、「罫線」などは、配置しないようにします。
スペース項目は、要素IDを付与してください。

![2025-02-12_04h12_50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/a1b08037-b205-3a17-9997-f59e85bbde59.png)

# 計算式プラグイン設定

明細行をデフォルト１０行とし、明細が少ないときは行数を足します。


![2025-02-12_04h15_31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/e08e0410-67eb-beb7-2db5-bbd2d380d287.png)

```.js
OPTION: 

// 見積有効期限日 DATE
DATE_ENDOF(DATE_ADD(見積日,1,"month"),"month")

// sp1:(sp1) SPACER
LET(
  fields, ARRAY("型番","商品名","単価","数量","金額"),
  table, JSON_P(OTVAL(見積明細)),
  drows, 10-ARRAY_COUNT(table),
  label, TAGS_HTML(
    TAG("style", JOIN(ARRAY(
      ".body-record-print .showlayout-gaia .row-gaia .control-value-gaia { border: initial; background: initial; }",
      ".custom-layout-div { color:blue; }",
      ".custom-layout-row { height: 10px; }",
      ".custom-layout-row div { display: inline-block; font-size: 20px; }",
      ".custom-layout-destination { font-size:24px !important; border-bottom: 2px solid darkgray; }",
      ".custom-layout-no { float: right; }",
      ".custom-table { width: 100%; table-layout: auto; border-collapse: collapse; font-size: 16px;}",
      ".custom-table td { height: 24px; }",
      ".custom-table th { background-color: lightgray; }",
      ".custom-table th, .custom-table td { border: 2px solid darkgray; padding: 4px 6px; }",
    ), NEWLINE(), 1)),
  ),
  body, TAGS_HTML(
    TAG("div", ATTR("class","custom-layout-row"), STYLE("font-size:32px; margin:10px; text-align: center;"),
      TAG("span", "お見積書"),
    ),    
    TAG("div", ATTR("class","custom-layout-row"),
      TAG("div", ATTR("class","custom-layout-destination"),
        TAG("span", 宛名&" 様")),
      TAG("div", ATTR("class","custom-layout-no"),
        TAG("span", "見積番号 "),
        TAG("span", 見積番号)
      )
    ),
    TAG("div", ATTR("class","custom-layout-row"),
      TAG("div", ATTR("class","custom-layout-no"),
        TAG("span", "見積日 "),
        TAG("span", DATE_FORMAT(見積日,"YYYY年MM月DD日"))
      )
    ),
    TAG("div", ATTR("class","custom-layout-row")),
    TAG("div", ATTR("class","custom-layout-row"),
      TAG("div",
        TAG("span", "お見積り有効期限："&DATE_FORMAT(見積有効期限日,"YYYY年MM月DD日"),
          STYLE("font-size:18px;"))
      ),
      TAG("div",
        STYLE("font-size:24px; float: right; margin-right:10px;"),
        TAG("span", "ｘｘｘｘ株式会社")
      ),
    ),
    TAG("div", ATTR("class","custom-layout-row"),
      TAG("div",
        TAG("span", "下記のとおりお見積申し上げます。",
          STYLE("font-size:18px;"))
      ),
      TAG("div",
        STYLE("position: absolute; right: 18px; margin-right:10px; font-size:20px;"),        
        TAG("span", "ＹＹＹＹ部")
      ),
    ),
    TAG("div", ATTR("class","custom-layout-row"),
      STYLE("margin-top:10px; margin-bottom:16px;"),
      TAG("div",
        TAG("span", "お見積り金額：　￥"&FIXED(合計金額),
          STYLE("font-size:20px; border-bottom: 2px solid darkgray;"))
      )
    ),
    TAG("table", ATTR("class", "custom-table"),
      TAG("thead", TAG("tr",
        TAG("th", "型番", STYLE("width:80px;")),
        TAG("th", "商品名"),
        TAG("th", "単価", STYLE("width:120px;")),
        TAG("th", "数量", STYLE("width:120px;")),
        TAG("th", "金額", STYLE("width:120px;")),
      )),
      TAG("tbody",
        ARRAY_MAP(table, row,
          TAG("tr", 
            TAG("td", DIC_ITEM(row, "型番")),
            TAG("td", DIC_ITEM(row, "商品名")),
            TAG("td", "￥"&FIXED(DIC_ITEM(row, "単価")), STYLE("text-align:right;")),
            TAG("td", FIXED(DIC_ITEM(row, "数量")), STYLE("text-align:right;")),
            TAG("td", "￥"&FIXED(DIC_ITEM(row, "金額")), STYLE("text-align:right;")),
        )),
        ARRAY_FOR(drows, TAG("tr", ARRAY_MAP(fields, fc, TAG("td"))))
      )
    ),
    TAG("table", ATTR("class", "custom-table"), STYLE("position: absolute; right: 16px; width: auto;"),
      TAG("tr", 
        TAG("td", "小計", STYLE("width:120px;")),
        TAG("td", "￥"&FIXED(小計), STYLE("width:120px; text-align:right;")),
      ),
      TAG("tr", 
        TAG("td", "消費税 (10%)", STYLE("width:120px;")),
        TAG("td", "￥"&FIXED(消費税), STYLE("width:120px; text-align:right;")),
      ),
      TAG("tr", 
        TAG("td", "合計金額", STYLE("width:120px;")),
        TAG("td", "￥"&FIXED(合計金額), STYLE("width:120px; text-align:right;")),
      ),
    ),
    TAG("div", STYLE("max-width: 560px; min-height: 110px; margin: -20px 10px 20px 10px;"),
      TAG("dic", "備考：", STYLE("font-size:18px; display: block;")),
      TAG("dic", 備考, STYLE("font-size:18px; max-width: 300px;"))
    )
  ),
  ARRAY(label,"",body,"")
)
```

# 項目検証プラグイン設定

スペース項目以外の項目を印刷時は非表示にします。
EV_INFO("cate")="print"

※非表示にする項目欄をまとめて選択して、「EV_INFO("cate")="print"」をコピペできます。

![2025-02-12_04h18_58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/39db28b7-9297-59f0-fcb5-268c2e5c1174.png)