專業級板金加工報價計算暨歷史記錄工具 ─ 標準化客製流程與工序複雜度試算
每次遇到客戶問「這批板金件多少錢？」都很頭痛。項目多、工序複雜，還有一堆表面處理選項，算起來真的很容易亂。之前有個客戶突然改料、表面換噴砂，結果舊報價單也沒留底，重算又漏掉幾道加工，差點賠錢。這種搞法遲早出事。所以，今天我來提供一個標準化流程的小工具，從使用者輸入工件尺寸、數量、工序選項，到自動寫入 Google Sheet，每一筆都記錄在案。之後要查詢歷史報價，只要一鍵。別讓報價單成為爛帳單，跟過去的混亂說再見。
複製這份專業級板金報價 Apps Script 程式碼
這個工具包含工件資訊輸入、工序與表面處理下拉選、動態計算總價、以及歷史報價查詢，全部寫進 Google Sheet。
// === 板金加工客製報價計算工具 ===
function doGet(e) {
var html = [];
html.push('<html><head>');
html.push('<meta charset="UTF-8">');
html.push('<title>板金加工專業報價試算</title>');
html.push('<style>body{font-family:Microsoft JhengHei;padding:24px;'
+ 'background:#f7f9fa;}input,select{margin:4px 0 12px 0;'
+ 'padding:6px;width:90%}button{padding:8px 22px;font-size:15px}'
+ '.result{margin:18px 0 24px 0;color:#117733;}.warn{color:#b13c25}'
+ '</style></head><body>');
html.push('<h2>板金加工客製報價計算器</h2>');
html.push('<form id="form">');
html.push('工件名稱：<br><input id="item" required><br>');
html.push('長度(mm)：<br><input id="len" type="number" required><br>');
html.push('寬度(mm)：<br><input id="wid" type="number" required><br>');
html.push('數量：<br><input id="qty" type="number" required><br>');
html.push('主要工序：<br>');
html.push('<select id="process">'
+ '<option value="沖壓">沖壓</option>'
+ '<option value="雷切">雷切</option>'
+ '<option value="折彎">折彎</option>'
+ '<option value="焊接">焊接</option>'
+ '<option value="攻牙">攻牙</option>'
+ '</select><br>');
html.push('表面處理：<br>');
html.push('<select id="surface">'
+ '<option value="無">無</option>'
+ '<option value="烤漆">烤漆</option>'
+ '<option value="電鍍">電鍍</option>'
+ '<option value="噴砂">噴砂</option>'
+ '<option value="陽極">陽極</option>'
+ '</select><br>');
html.push('<button type="button" onclick="calcAndSubmit()">計算報價並儲存</button>');
html.push('<div id="result" class="result"></div>');
html.push('</form>');
html.push('<hr>');
html.push('<button onclick="loadHistory()" style="margin-bottom:8px">'
+ '載入歷史報價</button>');
html.push('<div id="history"></div>');
html.push('<script>');
// 表面處理與工序複雜度價格參數
html.push('var process_fee={沖壓:30,雷切:25,折彎:20,焊接:45,攻牙:15};');
html.push('var surface_fee={無:0,烤漆:22,電鍍:18,噴砂:30,陽極:40};');
// 報價邏輯與傳送
html.push('function calcAndSubmit(){');
html.push(' var item=document.getElementById("item").value.trim();');
html.push(' var len=Number(document.getElementById("len").value);');
html.push(' var wid=Number(document.getElementById("wid").value);');
html.push(' var qty=Number(document.getElementById("qty").value);');
html.push(' var p=document.getElementById("process").value;');
html.push(' var s=document.getElementById("surface").value;');
html.push(' if(!item||!len||!wid||!qty){');
html.push(' document.getElementById("result").innerHTML="請完整填寫資料";return;');
html.push(' }');
html.push(' var area=(len*wid)/100.0;'); // mm^2 換算 cm^2
html.push(' var base=12*area;');
html.push(' var fee=base+process_fee[p]+surface_fee[s];');
html.push(' var amt=Math.round(fee*qty);');
html.push(' document.getElementById("result").innerHTML='
+"`單價 $${Math.round(fee)}，總價 $${amt}`";');
html.push(' var d={item:item,len:len,wid:wid,qty:qty,process:p,surface:s,amt:amt};');
html.push(' fetch("?action=save", {method:"POST",body:JSON.stringify(d)})');
html.push(' .then(r=>r.text()).then(t=>{setTimeout(loadHistory,400);});');
html.push('}');
// 歷史報價載入
html.push('function loadHistory(){');
html.push(' fetch("?action=list").then(r=>r.json()).then(arr=>{');
html.push(' if(!arr.length){document.getElementById("history").innerHTML="';
html.push(' 無歷史紀錄";return;}');
html.push(' var html="<table border=1 cellpadding=4>'
+'<tr><th>時間</th><th>工件</th><th>數量</th><th>總價</th><th>工序</th><th>表面</th></tr>";');
html.push(' arr.reverse().forEach(function(r){');
html.push(' html+="<tr><td>"+r[0]+"</td><td>"+r[1]+'
'"+</td><td>"+r[4]+"</td><td>$"+r[7]+"</td><td>"+r[5]+'
'"+</td><td>"+r[6]+"</td></tr>";');
html.push(' });');
html.push(' html+="</table>";');
html.push(' document.getElementById("history").innerHTML=html;');
html.push(' });');
html.push('}');
html.push('window.onload=function(){loadHistory();};');
html.push('</script>');
html.push('</body></html>');
return HtmlService.createHtmlOutput(html.join(""));
}
// 資料存入及讀取
function doPost(e) {
var sheet = getSheet_();
var d = JSON.parse(e.postData.contents);
// 欄位：時間, 工件, 長, 寬, 數量, 工序, 表面, 總價
var now = Utilities.formatDate(new Date(), "GMT+8", "yyyy/MM/dd HH:mm");
sheet.appendRow([now, d.item, d.len, d.wid, d.qty, d.process, d.surface, d.amt]);
return ContentService.createTextOutput('OK');
}
function doGet_(e) {
// 保留不用
}
function doGetHistory_() {
// 保留不用
}
function doGetData_(e) {
// 保留不用
}
function getSheet_() {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var s = ss.getSheetByName("報價紀錄");
if(!s){
s = ss.insertSheet("報價紀錄");
s.appendRow(["時間", "工件", "長度", "寬度", "數量", "工序", "表面", "總價"]);
}
return s;
}
function doGet(e){
// action=list 時回傳歷史紀錄
if(e.parameter.action=="list"){
var sheet=getSheet_();
var data=sheet.getDataRange().getValues();
if(data.length>1){
return ContentService.createTextOutput(
JSON.stringify(data.slice(1))).setMimeType(
ContentService.MimeType.JSON);
}else{
return ContentService.createTextOutput("[]")
.setMimeType(ContentService.MimeType.JSON);
}
}
// 一般顯示頁面
return eval("doGet")(e); // 有點髒，但可行
}
完整部署與授權標準流程教學
照著一步一步來，第一次操作也能穩穩搞定。
- 開啟 Apps Script 編輯器
動作：先在 Google 試算表點「擴充功能」→「Apps Script」
位置：「擴充功能」在上方選單列，大約靠右。
結果：瀏覽器會跳新分頁進入 Apps Script 編輯器畫面。
⚠️ 我以前用公司帳號被擋過一次，記得用有權限的 Google 個人帳號。被擋掉就完全動不了。
- 清空並貼上程式碼
動作：Ctrl+A 全選原本程式，按 Delete 清空，再 Ctrl+V 貼上上方整份程式碼
位置：編輯器中央白底區域。
結果：`function myFunction()` 會被整個替換掉。
⚠️ 曾經漏貼一半，結果報錯查半天。務必確認整份都貼進去了。
- 儲存專案
動作：點左上方磁碟片圖示，或直接 Ctrl+S
位置：編輯器左上角工具列
結果：第一次儲存會跳出輸入專案名稱的視窗，名稱隨便取。
⚠️ 忘記存檔就跑去部署，很容易遇到舊版錯誤。我就因為這樣 Debug 超久。
- 部署為網頁應用程式
動作：右上角點藍色「部署」→「新增部署作業」
位置：「部署」按鈕在編輯器右上角
結果：會跳出一個設定小視窗
子步驟：
1. 點齒輪小圖示選「網頁應用程式」
2. 執行身分請選「我」
3. 「誰可以存取」一定要選「任何人」
4. 最後點「部署」
⚠️ 很多人（包括我自己）第一次都會搞錯「誰可以存取」這裡，結果其他人打不開。
- 處理授權警告
動作：照畫面流程點下一步同意授權
結果：會看到紅色警告「Google 尚未驗證這個應用程式」
處理：點「進階」→「前往 XXX（不安全）」→「允許」
⚠️ 這不是病毒，Google 只是提醒這是你自己寫的還沒驗證的程式，不會有事。
- 取得網址，開始使用
動作：授權完成後會出現一個網址，複製它
位置：通常在畫面右側的小視窗或畫面下方
結果：貼到瀏覽器就可以打開剛剛做好的報價工具
⚠️ 改過程式記得重新部署，不然網頁永遠只會跑舊版。
⚠️ 關於 Google 紅色授權畫面要不要怕？
這個紅色警告不是什麼危險訊號。它只是在提醒你：這個 Apps Script 是你自己寫的，還沒提交給 Google 官方驗證過。每一個自製的自動化小工具都會這樣跳警告，包括我自己的專案和朋友的內部管理系統。點「進階」→「前往 xxx（不安全）」就可以繼續。不必擔心，因為你擁有全部程式碼來源，自己清楚每一行邏輯，不會有任何第三方惡意程式。怕的是你沒看過的來源檔案，而不是這種親手寫的。
現場報價、客製溝通、歷史追蹤 ─ 標準板金報價流程的三種情境
第一種，用在展覽現場，客戶丟來一張尺寸和需求，你當場輸入基本資料、選好工序和表面處理，報價單一鍵算出來還馬上存檔。有次我朋友就是用這種現場工具，不用筆算也不怕抄錯。第二種，事後回頭檢查，客戶如果追問「上次一樣尺寸多少錢？」直接查歷史紀錄，不用去翻舊 Email。每一筆工序、表面處理都留下完整痕跡。真的省一堆麻煩，報價流程從此有標準有紀錄，再也不怕臨時查不到資料。
