お世話になっております。
テーブルにボタンを用意し、
商品番号のルックアップ項目を入力し、
商品番号から反映されたJANコードが入力されたタイミングで、
ボタンが作成されます。
ボタンをクリックすると、JANコードの在庫アプリのデータをモーダルウィンドウに表示します。
・ルックアップ項目のクリアをクリックすると、前のボタンが残ってしまう
→常にボタンは一つだけ表示されるようにしたい
・一行目のJANと違うJANの行を追加してもポップアップのJANは一行目の在庫情報が表示されてしまう
→ボタンをクリックすると、クリックした行のJANの商品情報を確認できるようにしたい
コードは下記のとおりです。
kintone.events.on(['app.record.create.change.jan', 'app.record.edit.change.jan'], (event) => {
//ボタンを置きたいフィールドの情報を取ってくる
const sp = document.getElementsByClassName("field-5525974");
// 入力欄非表示
const hide = document.getElementsByClassName("value-5525974");
let record = event.record
let jans = []
var zaikoBtncols= $("[id^='zaikoBtn']");
for (var i in record['order_items'].value) {
var jan = record.order_items.value[i].value.jan.value;
jans.push([jan])
var zaikoBtnID = "zaikoBtn" + jan;
// janが入力されている場合
if (jan !== undefined) {
//ボタンがない場合
if (document.getElementById(zaikoBtnID) === null) {
hide[i].style.display = "none";
//ボタンを作る
const btn = document.createElement("button");
btn.textContent = "開く";
sp[i].appendChild(btn);
btn.setAttribute("id", zaikoBtnID);
}
}
}
//在庫アプリのID
var appID = 398;
var query = 'code = "' + jan + '"order by deliStore asc';
var body = {
'app': appID,
'query': query
};
kintone.api(kintone.api.url('/k/v1/records', true), 'GET', body, function (resp) {
// success
var CD102 = "-";
var CD103 = "-";
var CD104 = "-";
for (let j = 0; j < resp.records.length; j++) {
var deliStore = resp.records[j].deliStore.value;
var zaiko = resp.records[j].zaiko.value;
if (deliStore == "102") {
CD102 = zaiko;
} else if (deliStore == "103") {
CD103 = zaiko;
} else if (deliStore == "104") {
CD104 = zaiko;
}
}
//モーダルの内容
//ダイアログを表示する関数を作成
var showDialog = function () {
$('.dialog_content').dialogModal({
topOffset: 0,
top: '10%',
type: '',
onOkBut: function () { },
onCancelBut: function () { },
onLoad: function (el, current) { },
onClose: function () { },
onChange: function (el, current) { }
});
};
//ダイアログと表示内容を用意
var createDialogContent = function () {
var dialog_1 =
$('<div id="dialog_content_1" class="dialog_content" style="display:none;">' +
'<div class="dialogModal_header">JAN:' + jan + '</div>' +
'<div class="dialogModal_content">' +
'<table border="1px">' +
'<tr><td>店舗</td><td>在庫数</td></tr>' +
'<tr><td>102 XX</td><td>' + CD102 + '</td></tr>' +
'<tr><td>103 XX</td><td>' + CD103 + '</td></tr>' +
'<tr><td>104 XX</td><td>' + CD104 + '</td></tr></table></br>' +
'</div>' +
'<div class="dialogModal_footer">' +
'<button class="btn btn-default" data-dialogmodal-but="cancel" type="button">Cancel</button>' +
'</div>' +
'</div>');
$("#" + zaikoBtnID).append(dialog_1);
};
createDialogContent();
var zaikoBtn = $("#" + zaikoBtnID);
//マウスをボタンに当てるときのボタン色を指定
zaikoBtn.hover(function () {
$(this).css({ 'color': '#ececec', 'background': '#3498db' });
}, function () {
$(this).css({ 'color': '', 'background': '' });
});
//ボタンをクリックしたときの動作
zaikoBtn.on('click', showDialog);
return event;
}, function (error) {
// error
console.log(error);
});
});
修正のアドバイスをご教授いただければ幸いです。
以上、よろしくお願いします。