備品情報の管理とQRラベル印刷 No.024
QRコードを活用して備品の保管管理機能の実装を紹介していますが、前回のNo.23に続いて、今回は、備品情報を管理する業務アプリとその情報をQRラベルで印刷する機能までを紹介します。Web画面は、webixライブラリを使用し、サーバ側のアプリはPHPです。前回までに紹介した保管先情報と同じような構造で備品情報の管理が可能です。データベースのフィールドに追加する情報は、備品の状態を把握するためのステータス情報、保管先のid情報が追加となります。また、今後、スマホで該当備品の写真撮影もすることを意識して、画像情報の保管フォルダ名と画像ファイル名もテーブルのフィールドに追加しておきます。（前回までに作成した保管場所にも、保管場所の画像情報を保存できるように今後、フォルダ名と画像ファイル名のフィールドを追加します）
作成するテーブルequipmentsは、以下のとおりです。
CREATE TABLE `equipments` (
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT '備品ID',
`code` varchar(16) NOT NULL DEFAULT '' COMMENT '備品コード(EQ+ID)',
`name` varchar(255) NOT NULL COMMENT '備品名',
`location_code` varchar(16) NOT NULL DEFAULT '' COMMENT 'ロケーションコード(LC+ID)',
`status_id` int(11) NOT NULL DEFAULT 0 COMMENT 'ステータスID',
`memo` varchar(255) NOT NULL DEFAULT '' COMMENT 'メモ',
`imagefile` varchar(255) NOT NULL DEFAULT '' COMMENT '画像ファイル名',
`imagefolder` varchar(255) NOT NULL DEFAULT '' COMMENT 'ファイル格納場所',
`created_userid` varchar(16) NOT NULL DEFAULT 'admin' COMMENT '作成者ID',
`updated_userid` varchar(16) NOT NULL DEFAULT 'admin' COMMENT '更新者ID',
`created_on` datetime DEFAULT NULL COMMENT '作成日時',
`updated_on` datetime DEFAULT NULL COMMENT '更新日時',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=100000 DEFAULT CHARSET=utf8mb4;スマホのカメラをWebアプリで使用できるようにする条件の１つに、Webアプリを公開するWebサーバへのアクセスをhttpsにする必要があります。
httpsで公開するには、認証キーが必要となりますが、自宅や社内にWebサーバを構築するときには、認証局からアクセス（ローカルネットワークのため）できないので簡単にはhttps化できません。しかし、認証局を自分で構築（ローカルネットワーク内）することで、https化は可能です。（詳細な構築方法は、今後、別の記事で紹介します。）また、使用するパソコンやスマホへの認証キーの登録も、マニュアルで実施する必要があります。
スマホで撮影した写真をWebアプリで閲覧したり、スマホカメラをQRコードリーダとして使うためには、https化が必須です。本記事では、細かい説明は省略しますが、httpsでアクセスする方法に変更していますので、ご了承願います。
作成した主なソースは、以下のとおりです。
/prompt/PT0020_location_prompt.php 保管先検索プロンプト
/view/EQ0010/EQ0010_equipments_lists.php 備品情報一覧
/view/EQ0010/EQ0011_equipment_winform.php 備品詳細情報画面
/rest_api/EQ0010/EQ0012_equipments_db_selectlists.php 備品情報検索rest_api
/rest_api/EQ0010/EQ0013_equipments_db_max_info.php 備品情報最大ID検索rest_api
/rest_api/EQ0010/EQ0014_equipment_db_delete.php 備品情報削除rest_api
/rest_api/EQ0010/EQ0015_equipment_db_select.php 備品詳細情報検索rest_api
/rest_api/EQ0010/EQ0016_equipment_db_update.php 備品詳細情報更新rest_api
/rest_api/EQ0010/EQ0017_equipment_db_create.php 備品情報作成rest_api
/rest_api/EQ0010/EQ0019_print_equipmentlabels.php 備品情報QRラベル印刷rest_api
/rest_api/EQ0010/EQ001A_location_check_select.php 指定保管先に保管している備品検索rest_api
/rest_api/EQ0010/EQ001B_equipment_imagefile_update.php 備品画像情報更新rest_api
/rest_api/EQ0010/EQ001C_equipment_image_delete.php 備品画像情報削除rest_api
/rest_api/EQ0010/EQ001D_upload_action.php 備品画像情報格納rest_api
備品管理用の各画面は、PCからの操作とスマホからの操作に対応できるデザインとするために、ログイン操作時にアクセス元の端末がPCなのかスマホかを判断し、その情報(userclient)をPHPソース内で利用して画面デザインに反映しています。以下に例として備品詳細画面のPC版とスマホ版を紹介します。EQ0011_equipment_winform.phpで画面を作成していますが、作成時にPHPソースで、端末を判断してソースコードを出力しています。
この画面に実装している画像の選択と登録操作にはwebixのupload機能を利用しています。画像を選択（カメラで撮影も可能）すれば、その画像をサーバに転送して、指定フォルダに保存と、データベースに画像ファイル名と格納フォルダ名をUPDATEする処理を実施しています。
参考までに/view/EQ0010/EQ0011_equipment_winform.phpと/rest_api/EQ0010/EQ001D_upload_action.phpを紹介します。
/view/EQ0010/EQ0011_equipment_winform.php
<?php
include_once("EQ0011_equipment_validation_fn_winform.php"); //validation宣言
include_once("EQ0011_equipment_prompt_func_winform.php"); //プロンプタ宣言
include_once("../../prompt/PT0020_location_prompt.php");
?>
//======================================================================
//File Name : EQ0011_equipment_winform.php
//Encoding : UTF-8
//Creation Date : 2024-03-29
//
//Copyright © 2024 sunsunfarm. All rights reserved.
//
//This source code or any portion thereof must not be
//reproduced or used in any manner whatsoever.
//======================================================================
var EQ0011_win_job_info = "EQ0011";
<?php
if($userclient == "pc"){
?>
var EQ0011_win_resize_height=570;
var EQ0011_win_resize_width=900;
var EQ0011_win_resize_top=40;
var EQ0011_win_resize_left=240;
var EQ0011_form_minwidth = 450;
<?php
}
else{
?>
var EQ0011_win_resize_height=570;
var EQ0011_win_resize_width=900;
var EQ0011_win_resize_top=1;
var EQ0011_win_resize_left=1;
var EQ0011_form_minwidth = 450;
<?php
}
?>
<?php
//新規入力画面を開く
?>
function EQ0011_create_data_win_show(permission_info){
$$("EQ0011_equipment_win").config.modal = true;
EQ0011_equipment_win.show();
EQ0011_equipment_form_clear();
$$("EQ0011_equipment_win_form2").clearValidation();
$$("EQ0011_equipment_udate_btn").enable();
$$("EQ0011_equipment_udate_btn").define("label","登録");
$$("EQ0011_equipment_udate_btn").refresh();
$$("equipment_image_btn").enable();
$$("EQ0011_equipment_cancel_btn").define("label","キャンセル");
$$("EQ0011_equipment_cancel_btn").refresh();
$$("EQ0011_equipment_mode_btn").disable();
$$("EQ0011_equipment_mode_btn").define("label","編集モード");
$$("EQ0011_equipment_mode_btn").disable();
$$("EQ0011_equipment_mode_btn").refresh();
$$("EQ0011_equipment_delete_btn").hide();
$$("EQ0011_equipment_delete_btn").disable();
$$("equipment_QR_print_btn").hide();
$$("EQ0011_equipment_editmode").setValue("3"); //1:閲覧 2:編集 3:新規登録
EQ0011_equipment_form_readonly_cnt("create", my_permission,false);
EQ0011_equipment_form_placeholder_cnt("create", my_permission,false);
return true;
}
function EQ0011_equipment_form_clear(){
$$("equipment_id").setValue("");
$$("equipment_code").setValue("");
$$("equipment_name").setValue("");
$$("equipment_status_id").setValue("0");
$$("equipment_location_code").setValue("");
$$("equipment_location_name").setValue("");
$$("equipment_memo").setValue("");
$$("equipment_imagefile").setValue("");
$$("equipment_org_imagefile").setValue("");
$$("equipment_imagefolder").setValue("");
$$("equipment_org_imagefolder").setValue("");
$$("equipment_image").setValue("");
}
<?php
//閲覧モードで画面を開く
?>
function EQ0011_disp_win_show(permission_info,session_info,equipment_code){
$$("EQ0011_equipment_win_form2").clearValidation();
$$("EQ0011_mess").setValue("");
var access_key = Get_AccessKey();
var send_prm = Prepare_send_prm(session_info,access_key);
send_prm.fl_equipment_code = equipment_code; //備品コード
var xhr =webix.ajax().sync().get("<?php echo SUB_FOLDER; ?>/rest_api/EQ0010/EQ0015_equipment_db_select.php",send_prm);
var resp = JSON.parse(xhr.responseText);
if(resp.resp =="ok"){
//閲覧モード
$$("EQ0011_equipment_win").config.modal = false;
EQ0011_equipment_win.show();
$$("EQ0011_equipment_cancel_btn").define("label","閉じる");
$$("EQ0011_equipment_cancel_btn").refresh();
$$("EQ0011_equipment_win_form2").setValues(resp.val_array);
$$("equipment_org_imagefile").setValue(resp.val_array.equipment_imagefile); //変更前の画像ファイル名を一時保存
$$("equipment_org_imagefolder").setValue(resp.val_array.equipment_imagefolder); //変更前の画像フォルダ名を一時保存
if(CM0010_permission_check(permission_info,CM0080_PERMISSION_B3)){ //編集可能者
$$("EQ0011_equipment_udate_btn").disable();
$$("equipment_image_btn").disable();
$$("EQ0011_equipment_mode_btn").enable();
$$("EQ0011_equipment_mode_btn").define("label","編集モード");
$$("equipment_QR_print_btn").show();
$$("EQ0011_equipment_editmode").setValue("1"); //1:閲覧 2:編集 3:新規登録
}
else{
$$("EQ0011_equipment_udate_btn").disable();
$$("equipment_image_btn").disable();
$$("equipment_QR_print_btn").hide();
$$("EQ0011_equipment_mode_btn").disable();
$$("EQ0011_equipment_mode_btn").define("label","編集モード");
$$("EQ0011_equipment_editmode").setValue("1"); //1:閲覧 2:編集 3:新規登録
}
if(CM0010_permission_check(permission_info,CM0080_PERMISSION_B5)){ //削除可能者
$$("EQ0011_equipment_delete_btn").enable();
$$("EQ0011_equipment_delete_btn").show();
}
else{
$$("EQ0011_equipment_delete_btn").disable();
$$("EQ0011_equipment_delete_btn").hide();
}
$$("EQ0011_equipment_mode_btn").refresh();
EQ0011_equipment_form_readonly_cnt("show",my_permission,true);
EQ0011_equipment_form_placeholder_cnt("show",my_permission,true);
return true;
}
else{
webix.message({type:"error",text:"詳細情報検索でエラーが発生しました。code="+resp.error_code});
return false;
}
}
function EQ0011_set_disp_mode(permission_info){
if(CM0010_permission_check(permission_info,CM0080_PERMISSION_B5)){ //削除可能者
$$("EQ0011_equipment_delete_btn").enable();
$$("EQ0011_equipment_delete_btn").show();
}
else{
$$("EQ0011_equipment_delete_btn").disable();
$$("EQ0011_equipment_delete_btn").hide();
}
$$("EQ0011_equipment_cancel_btn").define("label","閉じる");
$$("EQ0011_equipment_cancel_btn").refresh();
if(CM0010_permission_check(permission_info,CM0080_PERMISSION_B3)){ //編集可能者
$$("EQ0011_equipment_udate_btn").disable();
$$("equipment_image_btn").disable();
$$("EQ0011_equipment_mode_btn").enable();
$$("EQ0011_equipment_mode_btn").define("label","編集モード");
$$("EQ0011_equipment_editmode").setValue("1"); //1:閲覧 2:編集 3:新規登録
}
else{
$$("EQ0011_equipment_udate_btn").disable();
$$("equipment_image_btn").disable();
$$("EQ0011_equipment_mode_btn").disable();
$$("EQ0011_equipment_mode_btn").define("label","編集モード");
$$("EQ0011_equipment_editmode").setValue("1"); //1:閲覧 2:編集 3:新規登録
}
$$("EQ0011_equipment_editmode").refresh();
EQ0011_equipment_form_readonly_cnt("show",my_permission,true);
EQ0011_equipment_form_placeholder_cnt("show",my_permission,true);
}
function EQ0011_equipment_image_delete(equipment_imagefolder,equipment_imagefile){
var formData = new FormData();
var access_key = Get_AccessKey();
formData.append("accesskey",access_key);
formData.append("userid",my_local_session.userid);
formData.append("job_info",EQ0011_win_job_info);
formData.append("equipment_imagefolder",equipment_imagefolder);
formData.append("equipment_imagefile",equipment_imagefile);
var xhr =webix.ajax().sync().post("<?php echo SUB_FOLDER; ?>/rest_api/EQ0010/EQ001C_equipment_image_delete.php",formData);
var resp = JSON.parse(xhr.responseText);
}
function EQ0011_print_QRlabel(){
webix.confirm({
title:"確認",
ok:"はい",
cancel:"いいえ",
text: "QRラベルを印刷しますか？"
})
.then(function(result){
var formData = new FormData();
var access_key = Get_AccessKey();
formData.append("accesskey",access_key);
formData.append("userid", my_local_session.userid);
formData.append("job_info","EQ0011");
var data_list = $$("EQ0011_equipment_win_form2").getValues();
formData.append("data_list",JSON.stringify(data_list));
var xhr =webix.ajax().sync().post("<?php echo SUB_FOLDER; ?>/rest_api/EQ0010/EQ0019_print_equipmentlabels.php",formData);
var resp = JSON.parse(xhr.responseText);
if(resp.resp =="ok"){
EQ0010_select_equipments_lists();
webix.message({type:"success",text:"QRラベルを印刷しました。"});
return;
}
else{
webix.alert("QRラベルの印刷処理でエラーしました。 code="+resp.error_code);
return;
}
})
.fail(function(){
webix.message({type:"debug",text:"印刷操作をキャンセルしました。"});
});
}
var EQ0011_equipment_form1 = [
{cols:[
{view:"label", width:10,label: ""},
{view:"label", width:600,label: "",id:"EQ0011_mess",css:"red"},
{view:"text", label: 'form_mode',id:"EQ0011_equipment_editmode",name:"EQ0011_equipment_editmode",value:"1",hidden:true}, //1:閲覧 2:編集 3:新規登録 4:削除
{},
]
}
];
var EQ0011_equipment_form2 = [
{ margin:20,cols:[
{view:"text",id:"equipment_id" ,name:"equipment_id" ,label:"備品id" ,width: 300,labelWidth:100,labelAlign:"right",inputAlign:"right",readonly:true,placeholder:"自動採番",hidden:true},
{view:"text",id:"equipment_code" ,name:"equipment_code" ,label:"備品コード",width: 300,labelWidth:100,labelAlign:"right",inputAlign:"right",readonly:true,placeholder:"EQ1xxxxx"},
]},
{ margin:20,cols:[
{view:"text",id:"equipment_name" ,name:"equipment_name" ,label:"備品名称" ,width: 400,labelWidth: 100,labelAlign:"right",invalidMessage:""},
<?php
if($userclient == "pc"){
?>
{view:"button",id:"equipment_QR_print_btn",name:"equipment_QR_print_btn",value:"QR印刷", align:"center", width: 100,
click:function(){
//QRラベル印刷
EQ0011_print_QRlabel();
}
},
<?php
}
?>
]},
<?php
if($userclient == "pc"){
?>
{ margin:20,cols:[
{view:"select",id:"equipment_status_id" ,name:"equipment_status_id" ,label:"状態" ,width: 260,labelWidth:100,labelAlign:"right",options:EQ0010_status_option_lists,value:"0",invalidMessage:""},
{view:"search",id:"equipment_location_code",name:"equipment_location_code",label:"格納先CD",width: 200,labelWidth: 100,inputAlign:"right",icon:"wxi-dots",readonly:true,invalidMessage:"",
click:function(id,event){
$$("PT0020_fl_locationcode").setValue($$("equipment_location_code").getValue());
$$("PT0020_fl_locationname").setValue("");
var return_lists = [{"equipment_location_code":"code"},{"equipment_location_name":"name"}];
$$("PT0020_return_list").setValue(JSON.stringify(return_lists));
PT0020_clear_flag = 0; //0:クリアなし 1:クリア実施
PT0020_location_prompt_win();
}
},
{view:"text",id:"equipment_location_name",name:"equipment_location_name",label:"格納場所",width: 250,labelWidth:80,labelAlign:"right",readonly:true},
]},
<?php
}
else{
?>
{ margin:20,cols:[
{view:"select",id:"equipment_status_id" ,name:"equipment_status_id" ,label:"状態" ,width: 260,labelWidth:100,labelAlign:"right",options:EQ0010_status_option_lists,value:"0",invalidMessage:""},
{view:"button",id:"equipment_QR_print_btn",name:"equipment_QR_print_btn",value:"QR印刷", align:"center", width: 100,
click:function(){
//QRラベル印刷
EQ0011_print_QRlabel();
}
},
]},
{ margin:10,cols:[
{view:"search",id:"equipment_location_code",name:"equipment_location_code",label:"格納先CD",width: 200,labelWidth: 100,inputAlign:"right",icon:"wxi-dots",readonly:true,invalidMessage:"",
click:function(id,event){
$$("PT0020_fl_locationcode").setValue($$("equipment_location_code").getValue());
$$("PT0020_fl_locationname").setValue("");
var return_lists = [{"equipment_location_code":"code"},{"equipment_location_name":"name"}];
$$("PT0020_return_list").setValue(JSON.stringify(return_lists));
PT0020_clear_flag = 0; //0:クリアなし 1:クリア実施
PT0020_location_prompt_win();
}
},
{view:"text",id:"equipment_location_name",name:"equipment_location_name",label:"格納場所",width: 200,labelWidth:60,labelAlign:"right",readonly:true},
]},
<?php
}
?>
{ margin:20,cols:[
{view:"text",id:"equipment_memo" ,name:"equipment_memo" ,label:"メモ",width: 400,labelWidth: 100,labelAlign:"right"},
]},
{ margin:20,cols:[
{view:"text",id:"equipment_imagefile" ,name:"equipment_imagefile" ,label:"画像",width: 400,labelWidth: 100,labelAlign:"right"},
<?php
if($userclient == "pc"){
?>
{view:"button",id:"equipment_image_btn",name:"equipment_image_btn",value:"画像選択", align:"center", width: 100,
click:function(){
//画像選択
$$("uploadAPI").fileDialog({});
}
},
<?php
}
?>
{view:"text",id:"equipment_imagefolder" ,name:"equipment_imagefolder" ,label:"imagefolder",width: 600,labelWidth: 100,labelAlign:"right",hidden:true},
{view:"text",id:"equipment_org_imagefolder" ,name:"equipment_org_imagefolder" ,label:"org_imagefolder",width: 600,labelWidth: 100,labelAlign:"right",hidden:true},
{view:"text",id:"equipment_org_imagefile" ,name:"equipment_org_imagefile" ,label:"org_画像",width: 600,labelWidth: 100,labelAlign:"right",hidden:true},
]},
{ margin:20,cols:[
<?php
if($userclient == "pc"){
?>
{width:150},
//label:"<img src='/webix01/image/test/yamasanFarm.png' style='height:150px;cursor: hand; cursor:pointer;'>"
{ view:"label",label:"", width: 250,height:150, id:"equipment_image", name:"equipment_image",
click:function(id,event){
webix.message({type:"debug",text:"拡大表示は、工事中です。"});
},
onFocus:function(id,event){
}
},
<?php
}
else{
?>
{width:10},
//label:"<img src='/webix01/image/test/yamasanFarm.png' style='height:150px;cursor: hand; cursor:pointer;'>"
{ view:"label",label:"", width: 250,height:150, id:"equipment_image", name:"equipment_image",
click:function(id,event){
webix.message({type:"debug",text:"拡大表示は、工事中です。"});
},
onFocus:function(id,event){
}
},
{view:"button",id:"equipment_image_btn",name:"equipment_image_btn",value:"画像選択", align:"center", width: 100,
click:function(){
//画像選択
$$("uploadAPI").fileDialog({});
}
},
<?php
}
?>
]},
];
EQ0011_equipment_win = webix.ui({
view:"window",
id: "EQ0011_equipment_win",
move:true,
resize:true,
height : EQ0011_win_resize_height,
width : EQ0011_win_resize_width,
top : EQ0011_win_resize_top,
left : EQ0011_win_resize_left,
head:{
cols:[
{template:"備品情報(EQ0011)", type:"header", borderless:true},
{view:"icon", icon:"mdi mdi-resize",tooltip:"初期画面サイズ", click: function(){
if(EQ0011_equipment_win.config.fullscreen){
webix.fullscreen.exit();
$$("EQ0011_full_icon").define({icon:"mdi mdi-fullscreen", tooltip:"フルスクリーン表示"});
$$("EQ0011_full_icon").refresh();
}
EQ0011_equipment_win.define("width",EQ0011_win_resize_width);
EQ0011_equipment_win.define("height",EQ0011_win_resize_height);
EQ0011_equipment_win.define("left",EQ0011_win_resize_left);
EQ0011_equipment_win.define("top",EQ0011_win_resize_top);
EQ0011_equipment_win.resize();
}},
{view:"icon", icon:"mdi mdi-fullscreen", tooltip:"フルスクリーン表示", id:"EQ0011_full_icon",name:"EQ0011_full_icon"
,click: function(){
if(EQ0011_equipment_win.config.fullscreen){
webix.fullscreen.exit();
this.define({icon:"mdi mdi-fullscreen", tooltip:"フルスクリーン表示"});
}
else{
webix.fullscreen.set(EQ0011_equipment_win);
this.define({icon:"mdi mdi-fullscreen-exit", tooltip:"フルスクリーン解除"});
}
this.refresh();
}},
{view:"icon", icon:"wxi-close", tooltip:"画面を閉じます", click: function(){
//閲覧モードの場合は、すぐに閉じる
var form_mode = $$("EQ0011_equipment_editmode").getValue(); //1:閲覧 2:編集 3:新規登録
if(form_mode == "1")
{
EQ0011_equipment_win.hide();
$$("EQ0011_equipment_editmode").setValue("1"); //1:閲覧 2:編集 3:新規登録
return;
}
webix.confirm({
title:"確認",
ok:"はい",
cancel:"いいえ",
text: "操作を中断して画面を閉じますか？",
})
.then(function(result){
//「はい」の場合
//画像ファイルの更新をチェックし、不要時はサーバから削除する
var equipment_org_imagefile = $$("equipment_org_imagefile").getValue();
var equipment_imagefile = $$("equipment_imagefile").getValue();
var equipment_imagefolder = $$("equipment_imagefolder").getValue();
if(equipment_org_imagefile != equipment_imagefile){
EQ0011_equipment_image_delete(equipment_imagefolder,equipment_imagefile);
}
EQ0011_equipment_win.hide();
$$("EQ0011_equipment_editmode").setValue("1"); //1:閲覧 2:編集 3:新規登録
})
.fail(function(){
//「いいえ」の場合(2枚目)
webix.message({type:"debug",text:"操作を継続できます。"});
});
}}
]
},
body:{
rows:[
{ margin:5,
type:"line",
view:"form",
id: "EQ0011_equipment_win_form1",
elements:EQ0011_equipment_form1,
elementsConfig:{
bottomPadding:14
},
},
{
margin:5,
type:"line",
view:"form",
id: "EQ0011_equipment_win_form2",
name: "EQ0011_equipment_win_form2",
elements:EQ0011_equipment_form2,
elementsConfig:{
bottomPadding:14
},
rules:EQ0011_rules,
width:EQ0011_win_resize_width,
scroll:"y",
margin:3
},
{height:40,
cols:[
{},
{ view:"button", css:"webix_danger", id:"EQ0011_equipment_delete_btn",name:"EQ0011_equipment_delete_btn",label:"削除", align:"center", width: 100,
click:function(){
var equipment_name = $$("equipment_name").getValue();
var equipment_code = $$("equipment_code").getValue();
var equipment_id = $$("equipment_id").getValue();
webix.confirm({
title:"確認",
ok:"はい",
cancel:"いいえ",
text:equipment_name+"を削除しますか？"
})
.then(function(result){
$$("EQ0011_equipment_editmode").setValue("4"); //1:閲覧 2:更新 3:新規 4:削除
var equipment_imagefile = $$("equipment_imagefile").getValue();
var equipment_imagefolder = $$("equipment_imagefolder").getValue();
var formData = new FormData();
var access_key = Get_AccessKey();
formData.append("accesskey",access_key);
formData.append("userid",my_local_session.userid);
formData.append("job_info",EQ0011_win_job_info);
formData.append("equipment_code",equipment_code);
formData.append("equipment_id",equipment_id);
if(equipment_imagefile != ""){
formData.append("equipment_imagefile",equipment_imagefile);
formData.append("equipment_imagefolder",equipment_imagefolder);
}
formData.append("edit_mode","4"); // "1":閲覧 "2":UPDATE "3":INSERT "4":DELETE
var xhr =webix.ajax().sync().post("<?php echo SUB_FOLDER; ?>/rest_api/EQ0010/EQ0014_equipment_db_delete.php",formData);
var resp = JSON.parse(xhr.responseText);
if(resp.resp =="ok"){
$$("EQ0010_table").clearAll();
EQ0010_select_equipments_lists();
webix.message({type:"success",text:equipment_name+"を削除しました。"});
EQ0011_equipment_win.hide();
}
else{
webix.message({type:"error",text:"削除処理でエラー発生 error code ="+resp.error_code});
}
})
.fail(function(){
webix.message("操作をキャンセルしました。");
});
}
},
{ view:"button", css:"webix_primary", id:"EQ0011_equipment_mode_btn",name:"EQ0011_equipment_mode_btn",label:"編集モード", align:"center", width: 100,
click:function(){
var edit_mode = $$("EQ0011_equipment_editmode").getValue(); //1:閲覧 2:編集 3:新規登録
if(edit_mode == "1"){ //1:閲覧->2:編集
$$("EQ0011_equipment_delete_btn").disable();
$$("EQ0011_equipment_delete_btn").hide();
$$("EQ0011_equipment_udate_btn").enable();
$$("EQ0011_equipment_udate_btn").define("label","更新");
$$("EQ0011_equipment_udate_btn").refresh();
$$("equipment_image_btn").enable();
$$("EQ0011_equipment_mode_btn").disable();
$$("EQ0011_equipment_mode_btn").define("label","編集モード");
$$("EQ0011_equipment_mode_btn").refresh();
$$("EQ0011_equipment_cancel_btn").define("label","キャンセル");
$$("EQ0011_equipment_cancel_btn").refresh();
$$("EQ0011_equipment_editmode").setValue("2");
EQ0011_equipment_form_readonly_cnt("edit",my_permission,false);
EQ0011_equipment_form_placeholder_cnt("edit",my_permission,false);
$$("EQ0011_equipment_win").config.modal = true;
$$("EQ0011_equipment_win").hide();
$$("EQ0011_equipment_win").show();
}
else if(edit_mode == "2"){ //2:編集ｰ>2:編集(この遷移無し)
$$("EQ0011_equipment_delete_btn").disable();
$$("EQ0011_equipment_delete_btn").hide();
$$("EQ0011_equipment_udate_btn").enable();
$$("EQ0011_equipment_udate_btn").define("label","更新");
$$("EQ0011_equipment_udate_btn").refresh();
$$("equipment_image_btn").enable();
$$("EQ0011_equipment_mode_btn").disable();
$$("EQ0011_equipment_mode_btn").define("label","編集モード");
$$("EQ0011_equipment_mode_btn").refresh();
}
else if(edit_mode == "3"){ //3:新規登録 -> 3:新規登録(この遷移無し)
$$("EQ0011_equipment_delete_btn").disable();
$$("EQ0011_equipment_delete_btn").hide();
$$("EQ0011_equipment_udate_btn").enable();
$$("EQ0011_equipment_udate_btn").define("label","登録");
$$("EQ0011_equipment_udate_btn").refresh();
$$("equipment_image_btn").enable();
$$("EQ0011_equipment_mode_btn").define("label","閲覧モード");
$$("EQ0011_equipment_mode_btn").disable();
$$("EQ0011_equipment_mode_btn").refresh();
}
}
},
// 更新,登録
{ view:"button", css:"webix_primary", id:"EQ0011_equipment_udate_btn",name:"EQ0011_equipment_udate_btn",label: "編集", align:"center", width: 100,
click:function(){
$$("EQ0011_equipment_win_form2").clearValidation();
$$("EQ0011_mess").setValue("");
var validate_rsp = $$("EQ0011_equipment_win_form2").validate();
if (validate_rsp == false ){
return;
}
var edit_mode = $$("EQ0011_equipment_editmode").getValue(); ///1:閲覧 2:編集 3:新規登録
if(edit_mode == "2"){ //2:編集
//更新処理
//edit_modeは、"EQ0011_equipment_editmode"で指定
var data_list = $$("EQ0011_equipment_win_form2").getValues();
var formData = new FormData();
var access_key = Get_AccessKey();
formData.append("accesskey",access_key);
formData.append("userid",my_local_session.userid);
formData.append("job_info",EQ0011_win_job_info);
formData.append("data_list",JSON.stringify(data_list));
formData.append("edit_mode",edit_mode); // "1":閲覧 "2":UPDATE "3":INSERT
var xhr =webix.ajax().sync().post("<?php echo SUB_FOLDER; ?>/rest_api/EQ0010/EQ0016_equipment_db_update.php",formData);
var resp = JSON.parse(xhr.responseText);
if(resp.resp =="ok"){
//更新した備品コードを検索キーにセット
$$("fl_equipment_code").setValue(data_list.equipment_code);
EQ0010_select_equipments_lists(); //検索
EQ0011_equipment_win.hide();
webix.message({type:"success",text:"更新しました。"});
}
else{
if(resp.error_code == -2){
webix.alert({
title:"更新エラー",
ok:"OK",
text: "備品コード:"+$$("equipment_code").getValue()+"は、既に、登録済です。<br>一覧で確認してください。",
width:"300px", height:"200px",
css: "pop_style_er"
}).then(function(result){
return;
});
}
else{
webix.message({type:"error",text:"更新処理でエラー発生 error code ="+resp.error_code});
}
}
}
else if(edit_mode == "3"){ //3:新規登録
//edit_modeは、"EQ0011_equipment_editmode"で指定
var data_list = $$("EQ0011_equipment_win_form2").getValues();
//EQ0011_equipment_editmodeを反映
data_list.EQ0011_equipment_editmode = edit_mode;
var equipment_name = $$("equipment_name").getValue();
webix.confirm({
title:"確認",
ok:"はい",
cancel:"いいえ",
text:"備品名称『"+equipment_name+"』<br>を新規登録しますか？"
})
.then(function(result){
var formData = new FormData();
var access_key = Get_AccessKey();
formData.append("accesskey",access_key);
formData.append("userid",my_local_session.userid);
formData.append("job_info",EQ0011_win_job_info);
formData.append("data_list",JSON.stringify(data_list));
formData.append("edit_mode",edit_mode); // "1":閲覧 "2":UPDATE "3":INSERT
var xhr =webix.ajax().sync().post("<?php echo SUB_FOLDER; ?>/rest_api/EQ0010/EQ0017_equipment_db_create.php",formData);
var resp = JSON.parse(xhr.responseText);
if(resp.resp =="ok"){
var equipment_code = resp.equipment_code;
var equipment_id = resp.equipment_id;
$$("equipment_code").setValue(equipment_code);
$$("equipment_id").setValue(equipment_id);
data_list.equipment_code = equipment_code;
data_list.equipment_id = equipment_id;
EQ0011_equipment_win.hide();
EQ0010_select_equipments_lists();
webix.modalbox({
title:"確認",
buttons:["はい"],
width:500,
text:"備品コード:"+ equipment_code +"を<br>新規登録しました。"
});
}
else{
if(resp.error_code == -2){
webix.alert({
title:"登録エラー",
ok:"OK",
text: "備品名称:"+$$("equipment_name").getValue()+"は、既に、登録済です。<br>一覧で確認してください。",
width:"300px", height:"200px",
css: "pop_style_er"
}).then(function(result){
return;
});
}
else{
webix.message({type:"error",text:"新規登録処理でエラー発生 error code ="+resp.error_code});
}
}
})
.fail(function(){
webix.message("操作をキャンセルしました。");
});
}
}
},
{ view:"button", id:"EQ0011_equipment_cancel_btn",name:"EQ0011_equipment_cancel_btn", css:"webix_primary", value: "キャンセル", align:"center", width: 100,css:"menu",
click:function(){
form_mode = $$("EQ0011_equipment_editmode").getValue(); //1:閲覧 2:編集 3:新規登録
if(form_mode == "1")
{
EQ0011_equipment_win.hide();
$$("EQ0011_equipment_editmode").setValue("1"); //1:閲覧 2:編集 3:新規登録
return;
}
webix.confirm({
title:"確認",
ok:"はい",
cancel:"いいえ",
text: "操作を中断して画面を閉じますか？",
})
.then(function(result){
//「はい」の場合
//画像ファイルの更新をチェックし、不要時はサーバから削除する
var equipment_org_imagefile = $$("equipment_org_imagefile").getValue();
var equipment_imagefile = $$("equipment_imagefile").getValue();
var equipment_imagefolder = $$("equipment_imagefolder").getValue();
if(equipment_org_imagefile != equipment_imagefile){
EQ0011_equipment_image_delete(equipment_imagefolder,equipment_imagefile);
}
EQ0011_equipment_win.hide();
$$("EQ0011_equipment_editmode").setValue("1"); //1:閲覧 2:編集 3:新規登録
})
.fail(function(){
//「いいえ」の場合(2枚目)
webix.message({type:"debug",text:"操作を継続できます。"});
});
}
}
]
}
]}
});
<?php
if($userclient != "pc"){
?>
webix.fullscreen.set(EQ0011_equipment_win);
<?php
}
?>
webix.ui({
id:"uploadAPI",
view:"uploader",
autosend:true,
formData:function(){
var editmode = $$("EQ0011_equipment_editmode").getValue(); //1:閲覧 2:編集 3:新規登録
var equipment_id=$$("equipment_id").getValue();
return {
equipment_id:equipment_id,
editmode:editmode
};
},
upload:"<?php echo SUB_FOLDER; ?>/rest_api/EQ0010/EQ001D_upload_action.php",
on:{
onBeforeFileAdd:function(item){
var type = item.type.toLowerCase();
if (type != "jpg" && type != "jpeg" && type != "png"){
webix.message("PNG または JPG フォーマットのみサポートします。");
return false;
}
},
onFileUpload:function(item){
var upd_status = item.status;
if(upd_status == "server"){
var imagefile = item.upload_filename;
var folder = item.folder;
var image = "<img src='"+folder+"/"+imagefile+"' style='height:150px;cursor: hand; cursor:pointer;'>";
$$("equipment_imagefile").setValue(imagefile);
$$("equipment_imagefolder").setValue(folder);
$$("equipment_image").setValue(image);
$$("equipment_image").refresh();
}
else{
webix.alert("画像保存に失敗しました。");
}
},
onFileUploadError:function(item){
webix.alert("Error during file upload");
}
},
apiOnly:true
});
/rest_api/EQ0010/EQ001D_upload_action.php
<?php
//======================================================================
//File Name : EQ001D_upload_action.php
//Encoding : UTF-8
//Creation Date : 2024-04-06
//
//Copyright © 2024 sunsunfarm. All rights reserved.
//
//This source code or any portion thereof must not be
//reproduced or used in any manner whatsoever.
//======================================================================
header("Content-Type: text/javascript; charset=utf-8");
$myfilename = basename(__FILE__); //自分自身のファイル名取得
$logheader = 'log:'.$myfilename.':';//ログ出力時のヘッダー情報（自ファイル名を付与）
include('../../commonlib/svr_common_lib_v2.php'); //
if($_SERVER["REQUEST_METHOD"] != "POST"){
error_log($logheader."REQUEST_METHOD NOT POST");
header("HTTP/1.0 404 Not Found");
return;
}
$userid = "";
if(isset($_POST['userid'])){
$userid = $_POST['userid'];
$error_flag = 1;
}
$editmode = "1";
if(isset($_POST['editmode'])){
$editmode = $_POST['editmode']; //1:閲覧 2:編集 3:新規登録
}
$equipment_id = "";
if(isset($_POST['equipment_id'])){
$equipment_id = $_POST['equipment_id'];
}
$ph_status = 0; //0 init 1:temp_folder copy 2:target folder move
$image_folder = '/webix01/image/equipment';
$base_folder = '/var/www/html'.$image_folder;
$destination = $base_folder; //my folder
error_log($logheader."destination =".$destination.' editmode='.$editmode.' equipment_id='.$equipment_id);
$upload_filename = "";
//同一ファイル名の場合、ファイル名を変更して返す
function unique_filename($org_path, $num=0){
if( $num > 0){
$info = pathinfo($org_path);
$path = $info['dirname'] . "/" . $info['filename'] . "_" . $num;
if(isset($info['extension'])) $path .= "." . $info['extension'];
} else {
$path = $org_path;
}
if(file_exists($path)){
$num++;
return unique_filename($org_path, $num);
} else {
return $path;
}
}
//Main
try {
$config_obj = get_config_obj();
$folder_name = $destination;
error_log($logheader."folder_name =".$folder_name);
if (!file_exists($folder_name)){
error_log($logheader." create folder:".$folder_name);
mkdir($folder_name, 0777);
}
}catch (Exception $e) {
error_log($logheader."folder conv error ");
$res = array("status" => "error","error_code" => -2,"folder" => $image_folder);
echo json_encode($res);
exit();
}
//ファイルの格納処理
if(isset($_FILES['upload'])){
$file = $_FILES['upload'];
$filename_tmp = $file["name"];
if($filename_tmp == "image.jpg"){
error_log($logheader."filename rename to".$upload_filename);
}
$upload_filename = $filename_tmp;
error_log($logheader."filename =".$upload_filename);
//移動先にファイルがあるかチェック
$moved_filepath_name = $folder_name."/".$upload_filename;
$moved_filepath_name = unique_filename($moved_filepath_name);
$file_infos = pathinfo($moved_filepath_name);
$path_info = $file_infos['dirname'];
$upload_filename = $file_infos['basename'];
error_log($logheader."moved_filepath_name=".$moved_filepath_name.' upload_filename ='.$upload_filename);
if (file_exists($moved_filepath_name )){
//ファイルがあったら、削除して上書き
error_log($logheader."same file exist: ".$moved_filepath_name);
$result = unlink($moved_filepath_name);
error_log($logheader."delete temp file:".$moved_filepath_name);
}
if($upload_filename != ""){
$filename = $destination."/".preg_replace("|[\\\/]|", "",$upload_filename);
}
else{
$filename = $destination."/".preg_replace("|[\\\/]|", "",$filename_tmp);
}
error_log($logheader."filename =".$filename);
if ($filename !== "" && file_exists($filename)){
//先にtempfileを削除する
$result = unlink($filename);
error_log($logheader."delete temp file:".$filename);
}
if ($filename !== "" && !file_exists($filename)){
error_log($logheader."move_uploaded_file:".$file["tmp_name"] );
error_log($logheader."move_size:".$file["size"] );
move_uploaded_file($file["tmp_name"], $filename);
$ph_status = 1; //0 init 1:temp_folder copy 2:target folder move
//指定フォルダに移動させる
try {
$resp = rename($filename, $moved_filepath_name);
if($resp != true){
error_log($logheader."file move error from:".$filename." to:".$moved_filepath_name);
$res = array("status" => "error","error_code" => -4,"folder" => $image_folder,"upload_filename" => $upload_filename);
echo json_encode($res);
exit();
}
}catch (Exception $e) {
error_log($logheader."file move error ");
$res = array("status" => "error","error_code" => -5,"folder" => $image_folder,"upload_filename" => $upload_filename);
echo json_encode($res);
exit();
}
$ph_status = 2; //0 init 1:temp_folder copy 2:target folder move
error_log($logheader.'$filename='.$filename.' status=server');
$res = array("status" => "server", "error_code" => 0,"folder" => $image_folder,"upload_filename" => $upload_filename);
}
else {
if(file_exists($filename)){
if($ph_status == 1){
//delete temp file
$result = unlink($filename);
error_log($logheader."delete temp file:".$filename);
}
error_log($logheader."filename =".$filename." is exists error_code:-6");
$res = array("status" => "error","error_code" => -6,"folder" => $image_folder,"upload_filename" => $upload_filename);
}
else if($filename == ""){
if($ph_status == 1){
//delete temp file
$result = unlink($filename);
error_log($logheader."delete temp file:".$filename);
}
error_log($logheader."filename is blank error_code:-7");
$res = array("status" => "error","error_code" => -7,"folder" => $image_folder,"upload_filename" => $upload_filename);
}
else{
if($ph_status == 1){
//delete temp file
$result = unlink($filename);
error_log($logheader."delete temp file:".$filename);
}
error_log($logheader."external error error_code:-8");
$res = array("status" => "error","error_code" => -8,"folder" => $image_folder,"upload_filename" => $upload_filename);
}
}
echo json_encode($res);
exit;
}
else{
error_log($logheader." not foud upload file error_code:-1");
$res = array("status" => "error","error_code" => -39,"folder" => $image_folder,"upload_filename" => $upload_filename);
echo json_encode($res);
}
?>
作成した機能には、備品情報の新規作成、更新処理、削除処理、QRコードラベル印刷なども実装しています。
備品情報を保管する保管先は、プロンプタを使って、検索する機能も実装しています。
画像情報は、同一ファイル名が使用中の場合は、番号を付与してユニークなファイル名になるように変換する機能も実装しています。
次回は、印刷したQRコードラベルを使った、備品登録操作などを紹介します。
この記事が気に入ったらサポートをしてみませんか？