ここでは、社員情報管理を作成する際のポイントを紹介します。
社員登録のタブ
このタブではInputManJSを利用して、社員情報の新規登録を行います。
各入力項目に応じたInputManJSコントロール（GcNumber、GcTextBox、GcMask、GcDateTime、GcComboBox、GcMultiLineTextBox）を配置しています。
必須項目には検証コントロール（GcValidator）を設定しています。
従業員一覧のタブ
このタブでは、MultiRowで登録したデータの確認および修正を行います。
cellTemplateを利用して、グリッド2列目3列目にセルテンプレートを配置して「〒」や「℡」を配置しています。
社員評価のタブ
FlexChartとGcRichTextEditorで社員評価の登録を行います。
GcNumberに連動してFlexChartを同期的に更新したり、GcRichTextEditorの内容を保存したり、FlexChartとGcRichTextEditorの内容を合わせてPDFでエクスポートすることができます。
import 'bootstrap.css';
import "@mescius/wijmo.styles/wijmo.css";
import "./styles.css";
import * as wjNav from "@mescius/wijmo.nav";
import * as wjMultiRow from '@mescius/wijmo.grid.multirow';
import * as input from '@mescius/wijmo.input';
import * as wjGridXlsx from '@mescius/wijmo.grid.xlsx';
import * as wjGridPdf from '@mescius/wijmo.grid.pdf';
import * as wjPdf from '@mescius/wijmo.pdf';
import { FlexGridSearch } from '@mescius/wijmo.grid.search';
import * as chart from '@mescius/wijmo.chart';
import * as radar from '@mescius/wijmo.chart.radar';
import * as animation from '@mescius/wijmo.chart.animation';
import { generateAppData, department as items, getemployeeData } from './data';
import '@mescius/inputman/CSS/gc.inputman-js.css';
import '@mescius/inputman.richtexteditor/CSS/gc.inputman.richtexteditor.css';
import './styles.css';
import { InputMan } from '@mescius/inputman';
import * as GcRichtexteditor from '@mescius/inputman.richtexteditor';
import * as wjGrid from '@mescius/wijmo.grid';
import * as wjStyle from "@mescius/wijmo.grid.style";
import '@mescius/wijmo.chart.render';
import * as pdf from '@mescius/wijmo.pdf';
InputMan.appearanceStyle = InputMan.AppearanceStyle.Modern;
let theTabPanel = new wjNav.TabPanel('#theTabPanel', {
isAnimated: true
});
const defaultfeedback = "<p>*社員へのフィードバックを記載してください</p><p><br><strong>パフォーマンス</strong><br><br><br><strong>ポジティブさ</strong><br><br><br><strong>専門性</strong><br><br><br><strong>協調性</strong><br><br><br><strong>総評</strong><br><br><br></p>";
let appData = generateAppData();
let employeeData = getemployeeData();
let multirow = new wjMultiRow.MultiRow('#groupMultirow', {
itemsSource: appData,
layoutDefinition: appData.ldThreeLines,
headersVisibility: 'Column',
alternatingRowStep: 0
});
let gridStyle = new wjStyle.FlexGridStyle(multirow);
gridStyle.toggleClass(new wjGrid.CellRange(0, 0, 2, 8), 'myStyle1', multirow.columnHeaders);
new FlexGridSearch('#theSearch', {
placeholder: '検索',
grid: multirow
});
// 社員番号
const id = new InputMan.GcNumber(document.getElementById('id'), {
formatDigit: '00000',
displayFormatDigit: '00000',
showNumericPad: true,
exitOnLeftRightKey: InputMan.ExitOnLeftRightKey.Both,
exitOnEnterKey: InputMan.ExitKey.Both,
floatingLabelText: '社員番号',
floatingLabelDirection: InputMan.FloatingLabelDirection.ThroughBorder,
width: 200,
value: 5,
minValue: 0
});
// 氏名漢字
const fullname = new InputMan.GcTextBox(document.getElementById('fullname'), {
IMEReadingStringKanaMode: InputMan.KanaMode.Katakana,
exitOnLeftRightKey: InputMan.ExitOnLeftRightKey.Both,
exitOnEnterKey: InputMan.ExitKey.Both,
floatingLabelText: '氏名漢字',
floatingLabelDirection: InputMan.FloatingLabelDirection.ThroughBorder,
width: 200
});
// フリガナ
const kana = new InputMan.GcTextBox(document.getElementById('kana'), {
exitOnLeftRightKey: InputMan.ExitOnLeftRightKey.Both,
exitOnEnterKey: InputMan.ExitKey.Both,
floatingLabelText: 'フリガナ',
floatingLabelDirection: InputMan.FloatingLabelDirection.ThroughBorder,
width: 200
});
fullname.onIMEReadingStringOutput((sender, args) => {
kana.text = args.readingString;
});
// 郵便番号
const postal = new InputMan.GcMask(document.getElementById('postal'), {
formatPattern: '\\D{3}-\\D{4}',
exitOnLastChar: true,
exitOnLeftRightKey: InputMan.ExitOnLeftRightKey.Both,
exitOnEnterKey: InputMan.ExitKey.Both,
floatingLabelText: '郵便番号',
floatingLabelDirection: InputMan.FloatingLabelDirection.ThroughBorder,
width: 200
});
// 住所
const address = new InputMan.GcTextBox(document.getElementById('address'), {
exitOnLeftRightKey: InputMan.ExitOnLeftRightKey.Both,
exitOnEnterKey: InputMan.ExitKey.Both,
floatingLabelText: '住所',
floatingLabelDirection: InputMan.FloatingLabelDirection.ThroughBorder,
width: 400
});
// 電話番号
const tel = new InputMan.GcMask(document.getElementById('tel'), {
formatPattern: '\\D{2,4}-\\D{2,4}-\\D{4}',
exitOnLastChar: true,
exitOnLeftRightKey: InputMan.ExitOnLeftRightKey.Both,
exitOnEnterKey: InputMan.ExitKey.Both,
floatingLabelText: '電話番号',
floatingLabelDirection: InputMan.FloatingLabelDirection.ThroughBorder,
width: 200
});
// メールアドレス
const mail = new InputMan.GcMask(document.getElementById('mail'), {
formatPattern: '[\\W_.+-]+@[\\W]+.[\\W.]+',
floatingLabelText: 'メールアドレス',
floatingLabelDirection: InputMan.FloatingLabelDirection.ThroughBorder,
exitOnLeftRightKey: InputMan.ExitOnLeftRightKey.Both,
exitOnEnterKey: InputMan.ExitKey.Both,
});
// 生年月日
const birthday = new InputMan.GcDateTime(document.getElementById('birthday'), {
displayFormatPattern: 'ggg E年M月d日',
formatPattern: 'yyyy/MM/dd',
exitOnLastChar: true,
exitOnLeftRightKey: InputMan.ExitOnLeftRightKey.Both,
exitOnEnterKey: InputMan.ExitKey.Both,
value: null,
showDropDownButton: true,
floatingLabelText: '生年月日',
floatingLabelDirection: InputMan.FloatingLabelDirection.ThroughBorder,
dropDownConfig: {
dropDownType: InputMan.DateDropDownType.Calendar
},
width: 200
});
// 入社日
const joinDate = new InputMan.GcDateTime(document.getElementById('joinDate'), {
displayFormatPattern: 'ggg E年M月d日',
formatPattern: 'yyyy/MM/dd',
exitOnLastChar: true,
exitOnLeftRightKey: InputMan.ExitOnLeftRightKey.Both,
exitOnEnterKey: InputMan.ExitKey.Both,
value: null,
showDropDownButton: true,
floatingLabelText: '入社日',
floatingLabelDirection: InputMan.FloatingLabelDirection.ThroughBorder,
dropDownConfig: {
dropDownType: InputMan.DateDropDownType.Calendar
},
width: 200
});
// 部署名
const department = new InputMan.GcComboBox(document.getElementById('department'), {
items: items,
exitOnLeftRightKey: InputMan.ExitOnLeftRightKey.Both,
exitOnEnterKey: InputMan.ExitKey.Both,
floatingLabelText: '部署名',
floatingLabelDirection: InputMan.FloatingLabelDirection.ThroughBorder,
width: 200,
isEditable: false,
});
// 内線
const extension = new InputMan.GcNumber(document.getElementById('extension'), {
formatDigit: '000',
displayFormatDigit: '000',
showNumericPad: true,
exitOnLeftRightKey: InputMan.ExitOnLeftRightKey.Both,
exitOnEnterKey: InputMan.ExitKey.Both,
floatingLabelText: '内線',
floatingLabelDirection: InputMan.FloatingLabelDirection.ThroughBorder,
width: 200,
minValue: 0
});
// 備考
const note = new InputMan.GcMultiLineTextBox(document.getElementById('note'), {
floatingLabelText: '備考',
floatingLabelDirection: InputMan.FloatingLabelDirection.ThroughBorder,
width: 400
});
const validator = new InputMan.GcValidator({
items: [
{
control: id,
ruleSet: [
{
rule: InputMan.ValidateType.Required,
failMessage: '社員番号を入力してください'
}
],
validateWhen: InputMan.ValidateWhen.Manual
},
{
control: fullname,
ruleSet: [
{
rule: InputMan.ValidateType.Required,
failMessage: '氏名を入力してください'
}
],
validateWhen: InputMan.ValidateWhen.Manual
},
{
control: postal,
ruleSet: [
{
rule: InputMan.ValidateType.Required,
failMessage: '郵便番号を入力してください'
}
],
validateWhen: InputMan.ValidateWhen.Manual
},
{
control: address,
ruleSet: [
{
rule: InputMan.ValidateType.Required,
failMessage: '住所を入力してください'
}
],
validateWhen: InputMan.ValidateWhen.Manual
},
{
control: tel,
ruleSet: [
{
rule: InputMan.ValidateType.Required,
failMessage: '電話番号を入力してください'
}
],
validateWhen: InputMan.ValidateWhen.Manual
},
{
control: mail,
ruleSet: [
{
rule: InputMan.ValidateType.Required,
failMessage: 'メールアドレスを入力してください'
}
],
validateWhen: InputMan.ValidateWhen.Manual
},
{
control: birthday,
ruleSet: [
{
rule: InputMan.ValidateType.Required,
failMessage: '生年月日を入力してください'
}
],
validateWhen: InputMan.ValidateWhen.Manual
},
{
control: joinDate,
ruleSet: [
{
rule: InputMan.ValidateType.Required,
failMessage: '入社日を入力してください'
}
],
validateWhen: InputMan.ValidateWhen.Manual
},
{
control: department,
ruleSet: [
{
rule: InputMan.ValidateType.Required,
failMessage: '所属部署名を入力してください'
}
],
validateWhen: InputMan.ValidateWhen.Manual
}
],
defaultNotify: {
icon: {
direction: InputMan.IconDirection.Inside
},
fail: {
toast: {
title: '必須項目未入力',
position: InputMan.ToastPosition.TopCenter,
showProgress: true
},
},
}
});
const successValidator = new InputMan.GcValidator({
items: [
{
control: id,
ruleSet: [
{
rule: InputMan.ValidateType.Required,
successMessage: (control) => `登録された 社員番号 ${control.displayText} は社員一覧のタブから確認できます。`,
}
],
validateWhen: InputMan.ValidateWhen.Manual
}
],
defaultNotify: {
success: {
toast: {
title: 'データが登録されました。',
position: InputMan.ToastPosition.TopCenter,
showProgress: true
},
},
}
});
// JSONデータを取得
const fields = [
{ name: 'id', control: id },
{ name: 'fullname', control: fullname },
{ name: 'kana', control: kana },
{ name: 'postal', control: postal },
{ name: 'address', control: address },
{ name: 'tel', control: tel },
{ name: 'mail', control: mail },
{ name: 'birthday', control: birthday },
{ name: 'joinDate', control: joinDate },
{ name: 'department', control: department },
{ name: 'extension', control: extension },
{ name: 'note', control: note }
];
let feedbackData = [];
for (let i = 0; i < employeeData.items.length; i++) {
feedbackData.push({
fullname: employeeData.items[i].fullname,
feedback: defaultfeedback
});
}
document.getElementById('getData').addEventListener('click', () => {
if (!validator.validate()) {
return;
}
var user = {};
for (var i = 0; i < fields.length; i++) {
var name = fields[i].name;
var control = fields[i].control;
if (name === 'department' || name === 'mail' || name === 'postal' || name === 'tel' || name === "extension") {
user[name] = control.displayText;
}
else if (name === 'id') {
user[name] = control.value.toString().padStart(5, '0');
}
else {
user[name] = control.text;
}
}
employeeData.items.push({
fullname: user.fullname,
feedbacks: [
{ field: 'パフォーマンス', performance: 0 },
{ field: '専門性', performance: 0 },
{ field: '協調性', performance: 0 },
{ field: 'ポジティブさ', performance: 0 },
]
});
feedbackData.push({
fullname: user.fullname,
feedback: defaultfeedback,
});
multirow.itemsSource.addNew(user, true);
successValidator.validate();
id.value = 0;
fullname.text = '';
kana.text = '';
postal.value = '';
address.text = '';
tel.value = '';
mail.value = '';
//wokaround for null value
birthday.value = birthday.value;
birthday.value = null;
//wokaround for null value
joinDate.value = joinDate.value;
joinDate.value = null;
department.setSelectedIndex(-1);
extension.value = 0;
note.text = '';
});
document.querySelector('#exportXlsx').addEventListener('click', () => {
wjGridXlsx.FlexGridXlsxConverter.saveAsync(multirow, null, 'employeeData.xlsx');
});
document.querySelector('#exportPdf').addEventListener('click', () => {
let doc = new wjPdf.PdfDocument({
header: {
declarative: {
text: '\t&[Page] / &[Pages]'
}
},
footer: {
declarative: {
text: '\t&[Page] / &[Pages]'
}
},
ended: function (sender, args) {
wjPdf.saveBlob(args.blob, 'employeeData.pdf');
}
}), settings = {
styles: {
cellStyle: {
font: { family: 'ipaexg' },
backgroundColor: '#ffffff',
borderColor: '#c6c6c6'
},
altCellStyle: {
backgroundColor: '#C0FFC0'
},
headerCellStyle: {
backgroundColor: '#eaeaea'
}
}
};
doc.registerFont({ source: `https://${window.location.host}/wijmo/demos/fonts/ipaexg.ttf`, name: 'ipaexg' });
doc.setFont(new wjPdf.PdfFont('ipaexg'));
wjGridPdf.FlexGridPdfConverter.draw(multirow, doc, doc.width, null, settings);
doc.end();
});
var r = new radar.FlexRadar('#chart', {
palette: chart.Palettes.cocoa,
bindingX: 'field',
series: [
{ name: '評価値', binding: 'performance' },
],
axisY: {
min: 0,
max: 10
}
});
r.chartType = radar.RadarChartType.Area;
let ani = new animation.ChartAnimation(r, {
animationMode: animation.AnimationMode.Series,
easing: animation.Easing.Linear,
duration: 500
});
//
setTimeout(function () {
r.itemsSource = employeeData.items[0].feedbacks;
}, 200);
var employeeCombobox = new input.ComboBox('#combobox', {
itemsSource: multirow.itemsSource,
displayMemberPath: 'fullname',
selectedValuePath: 'fullname',
selectedIndexChanged: () => {
let selectedEmployee = employeeCombobox.selectedValue;
if (selectedEmployee) {
let data = employeeData.items.filter(emp => emp.fullname === selectedEmployee);
r.itemsSource = data[0].feedbacks;
gcNumber1.value = data[0].feedbacks[0].performance;
gcNumber2.value = data[0].feedbacks[1].performance;
gcNumber3.value = data[0].feedbacks[2].performance;
gcNumber4.value = data[0].feedbacks[3].performance;
let index = employeeData.items.findIndex(emp => emp.fullname === employeeCombobox.selectedValue);
if (index !== -1) {
feedback.setContent(feedbackData[index].feedback, GcRichtexteditor.InputMan.ContentFormat.Html);
}
}
else {
r.itemsSource = [];
}
}
});
const changeChartData = (value, feedbackindex) => {
let index = employeeData.items.findIndex(emp => emp.fullname === employeeCombobox.selectedValue);
employeeData.items[index].feedbacks[feedbackindex].performance = value;
r.itemsSource = employeeData.items[index].feedbacks;
r.collectionView.refresh();
};
const gcNumber1 = new InputMan.GcNumber(document.getElementById('gcNumber1'), {
minValue: 0,
maxValue: 10,
formatDigit: '#',
value: employeeData.items[0].feedbacks[0].performance,
sliderConfig: {
visible: true,
}
});
const gcNumber2 = new InputMan.GcNumber(document.getElementById('gcNumber2'), {
minValue: 0,
maxValue: 10,
formatDigit: '#',
value: employeeData.items[0].feedbacks[1].performance,
sliderConfig: {
visible: true,
},
});
const gcNumber3 = new InputMan.GcNumber(document.getElementById('gcNumber3'), {
minValue: 0,
maxValue: 10,
formatDigit: '#',
value: employeeData.items[0].feedbacks[2].performance,
sliderConfig: {
visible: true,
},
});
const gcNumber4 = new InputMan.GcNumber(document.getElementById('gcNumber4'), {
minValue: 0,
maxValue: 10,
formatDigit: '#',
value: employeeData.items[0].feedbacks[3].performance,
sliderConfig: {
visible: true,
},
});
gcNumber1.onInput((s, e) => (changeChartData(s.value, 0)));
gcNumber2.onInput((s, e) => (changeChartData(s.value, 1)));
gcNumber3.onInput((s, e) => (changeChartData(s.value, 2)));
gcNumber4.onInput((s, e) => (changeChartData(s.value, 3)));
const feedback = new GcRichtexteditor.InputMan.GcRichTextEditor(document.getElementById('feedback'), {
baseUrl: '$DEMOROOT$/lib/purejs/node_modules/@mescius/inputman.richtexteditor/JS',
plugins: [GcRichtexteditor.InputMan.GcRichTextEditorPluginItem.All],
menubar: [],
toolbar: ["customButton", 'separateline', "undo", "redo", 'forecolor', 'backcolor', 'bold', 'italic', 'underline', 'separateline', "outdent", "indent", 'bulList', 'numList', 'separateLine', 'Link'],
toolbarMode: GcRichtexteditor.InputMan.GcRichTextEditorToolbarMode.Wrap,
height: 400,
width: 800,
});
feedback.registerToolbarItem("customButton", {
text: "内容を保存",
tooltip: "入力中のフィードバックを保存します。",
enabled: true,
onAction: () => {
let index = employeeData.items.findIndex(emp => emp.fullname === employeeCombobox.selectedValue);
if (index !== -1) {
feedbackData[index].feedback = feedback.getContent(GcRichtexteditor.InputMan.ContentFormat.Html);
alert('フィードバックが保存されました。');
}
else {
alert('社員が選択されていません。');
}
}
});
feedback.addEventListener(GcRichtexteditor.InputMan.GcRichTextEditorEvent.Init, (editor, e) => {
editor.setContent(feedbackData[0].feedback, GcRichtexteditor.InputMan.ContentFormat.Html);
});
document.querySelector('#btnExport').addEventListener('click', () => {
let doc = new pdf.PdfDocument({
ended: (sender, args) => pdf.saveBlob(args.blob, 'feedbackreport.pdf')
});
doc.registerFont({ source: `https://${window.location.host}/wijmo/demos/fonts/ipaexg.ttf`, name: 'ipaexg' });
doc.setFont(new pdf.PdfFont('ipaexg'));
r.saveImageToDataUrl(chart.ImageFormat.Png, (url) => {
doc.header.drawText(employeeCombobox.selectedValue + 'さんの評価');
doc.drawImage(url);
doc.moveDown();
let font = new pdf.PdfFont('ipaexg');
doc.drawText(feedback.getContent(GcRichtexteditor.InputMan.ContentFormat.Text), null, null, { font: font });
doc.end();
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>実用例 - 従業員管理</title>
<!-- SystemJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.5/system.src.js"
integrity="sha512-skZbMyvYdNoZfLmiGn5ii6KmklM82rYX2uWctBhzaXPxJgiv4XBwJnFGr5k8s+6tE1pcR1nuTKghozJHyzMcoA=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="systemjs.config.js"></script>
<script>
if (!window.GCIM) {
window.GCIM = {};
}
window.GCIM.LicenseKey = "GrapeCity-Internal-Use-Only,935368846199268#B1135ayQUW44kQXhnViFHV7YmNX3iQjdnMk9EOIlnb0xWbxoVO6hlTxNzLQRTemZHWldEd8YFe59kVItCchlDaPVXc7YVUw2SV9Z6M0NTN03kaww4LVFWeTpndGZlaNh4TqpXQt94L6dURzxkNmNWQvITQrgjZwE6K9UzaWVlcRJEV7FUQEdzTPB5aChzZ5F7MxEWRrEVWwMlbTp6RQlmNaNEZIlVe8AnV9pHcIx6TmJkMjdkMGtkRFR5cuFEZotibRplMtJVbCB7VKp5QGJmNS56Mwd4LUNDSvRUNuJzbxcmI0IyUiwiIFFkR4UjM7UjI0ICSiwCO4kTOzATNxQTM0IicfJye#4Xfd5nIGh5SEJiOiMkIsISNWByUKBibh5Ed5BnbJJiOi8kI1tlOiQmcQJCLiUjM8IzNwACOwQDM5IDMyIiOiQncDJCLiAnauMXdpN6cl5mLqIiOiMXbEJCLiMbul1qukDClSiOt6muI0ISYONkIsICO6ITO9EjN4gDO6MTNzkjI0ICZJJye0ICRiwiI34zZ9FVRvhmM7Zka9IFUnZWMOJkSIV4S9UlYrlWezZXcrc4cLpWc9h6M5V6csFlVrp7dBRDZ9tGV79ET4FWeYRFTuFFeXd7KwkES9pldM3yLNhHT5RzUqNVTxQWWrUWQYNESLpUSwkFR5VFcrAlVKVkQqJFZMtkc";
</script>
<script>
window.onload = function () {
System.import('./src/app');
}
</script>
</head>
<body>
<div class="container-fluid">
<div id="theTabPanel" class="custom-tab">
<div>
<a>社員登録</a>
<div>
<table class="form">
<tr>
<th colspan="2">社員番号<span class="required">必須</span></th>
<td><input id="id"></td>
</tr>
<tr>
<th rowspan="2">氏名</th>
<th>漢字<span class="required">必須</span></th>
<td><input id="fullname"></td>
</tr>
<tr>
<th>フリガナ<span class="optional">任意</span></th>
<td><input id="kana"></td>
</tr>
<tr>
<th rowspan="2">自宅住所</th>
<th>郵便番号<span class="required">必須</span></th>
<td><input id="postal"></td>
</tr>
<tr>
<th>住所<span class="required">必須</span></th>
<td><input id="address" class="wide-input"></td>
</tr>
<tr>
<th rowspan="2">連絡先</th>
<th>電話番号<span class="required">必須</span></th>
<td><input id="tel"></td>
</tr>
<tr>
<th>メールアドレス<span class="required">必須</span></th>
<td><input id="mail"></td>
</tr>
<tr>
<th colspan="2">生年月日<span class="required">必須</span></th>
<td><input id="birthday"></td>
</tr>
<tr>
<th colspan="2">入社日<span class="required">必須</span></th>
<td><input id="joinDate"></td>
</tr>
<tr>
<th rowspan="2">所属部署</th>
<th>部署名<span class="required">必須</span></th>
<td><select id="department"></select></td>
</tr>
<tr>
<th>内線<span class="optional">任意</span></th>
<td><input id="extension"></td>
</tr>
<tr>
<th colspan="2">備考<span class="optional">任意</span></th>
<td><textarea id="note" class="wide-input"></textarea></td>
</tr>
</table><br>
<button id="getData" class="btn btn-default">データを登録</button><br>
</div>
</div>
<div>
<a>社員一覧</a>
<div>
<div id="theSearch"></div>
<div id="groupMultirow"></div>
<div class="btn-group">
<button class="btn btn-default" id="exportXlsx">
Excelにエクスポート
</button>
<button class="btn btn-default" id="exportPdf">
PDFにエクスポート
</button>
</div>
</div>
</div>
<div>
<a>社員評価</a>
<div>
<div id="combobox"></div>
<button class="btn btn-default" id="btnExport">結果をPDFにエクスポートする</button>
<hr>
<div class="flexItems">
<div>
<table class="form">
<tbody>
<tr>
<th>パフォーマンス</th>
<td><input id="gcNumber1"></td>
</tr>
<tr>
<th>専門性</th>
<td><input id="gcNumber2"></td>
</tr>
<tr>
<th>協調性</th>
<td><input id="gcNumber3"></td>
</tr>
<tr>
<th>ポジティブさ</th>
<td><input id="gcNumber4"></td>
</tr>
</tbody>
</table>
</div>
<div id="chart"></div>
</div>
<textarea id="feedback"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
import * as wjCore from '@mescius/wijmo';
import { InputDate, ComboBox, InputMask } from '@mescius/wijmo.input';
import '@mescius/wijmo.cultures/wijmo.culture.ja';
export const department = ['総務部', '企画部', '情報システム部', '営業部', '経理部', '人事部', '開発部', 'マーケティング部', 'サポート部'];
const customers = [];
customers.push({
id: "00000",
fullname: "泉 太郎",
kana: "イズミ タロウ",
postal: "981-3205",
address: "宮城県仙台市泉区紫山 X-X-X",
tel: "050-5490-XXXX",
mail: "izumi.taro@mescius.com",
birthday: "1990/01/01",
joinDate: "2010/04/01",
department: "総務部",
extension: "006",
note: "とくに連絡は不要です。",
}, {
id: "00001",
fullname: "仙台 花子",
kana: "センダイ ハナコ",
postal: "980-0021",
address: "宮城県仙台市青葉区中央 X-X-X",
tel: "050-5490-XXXX",
mail: "sendai.hanako@mescius.com",
birthday: "1982/10/10",
joinDate: "2000/07/01",
department: "人事部",
extension: "010",
note: "",
}, {
id: "00002",
fullname: "富沢 二郎",
kana: "トミザワ ジロウ",
postal: "332-0012",
address: "埼玉県川口市本町 X-X-X",
tel: "050-5490-XXXX",
mail: "tomizawa.jiro@mescius.com",
birthday: "1985/05/05",
joinDate: "2013/04/01",
department: "営業",
extension: "201",
note: "個別に連絡が必要です。",
});
const field = ['パフォーマンス', "専門性", "協調性", "ポジティブさ"];
const feedbackData = () => {
let feedbackData = [];
for (let i = 0; i < field.length; i++) {
feedbackData.push({
id: i,
field: field[i],
performance: Math.floor(1.0 + Math.random() * 9),
});
}
return feedbackData;
};
export function getemployeeData() {
let employeeData = [];
for (let i = 0; i < customers.length; i++) {
let feedback = feedbackData();
employeeData.push({
fullname: customers[i].fullname,
feedbacks: feedback
});
}
return new wjCore.CollectionView(employeeData);
}
export function generateAppData() {
// create some data
let appData = {};
// expose orders CollectionView to the app
appData = new wjCore.CollectionView(customers);
appData.ldThreeLines = [
{
header: '社員番号', cells: [
{ binding: 'id', header: '社員番号' },
]
},
{
header: '氏名', width: 180, cells: [
{ binding: 'fullname', header: '氏名', width: 180 },
{ binding: 'kana', header: 'フリガナ', width: 180 },
]
},
{
header: '自宅住所', colspan: 2, cells: [
{
binding: 'postal', header: '郵便番号', colspan: 2, cellTemplate: '<span}>〒 ${text}</span>', editor: new InputMask(document.createElement('div'), {
mask: '000-0000'
})
},
{ binding: 'address', header: '住所', colspan: 2 },
]
},
{
header: '連絡先', colspan: 2, cells: [
{
binding: 'tel', header: '電話番号', colspan: 2, cellTemplate: '<span}>℡ ${text}</span>', editor: new InputMask(document.createElement('div'), {
mask: '000-0000-0000'
})
},
{ binding: 'mail', header: 'メールアドレス', colspan: 2 },
]
},
{
header: '生年月日', cells: [
{
binding: 'birthday', header: '生年月日', format: 'd',
editor: new InputDate(document.createElement('div'))
},
{
binding: 'joinDate', header: '入社日', format: 'd',
editor: new InputDate(document.createElement('div'))
}
]
},
{
header: '所属部署', width: 180, cells: [
{
binding: 'department', header: '部署名', width: 180, editor: new ComboBox(document.createElement('div'), {
itemsSource: department,
isEditable: false,
})
},
{
binding: 'extension', header: '内線', width: 180, editor: new InputMask(document.createElement('div'), {
mask: '000'
})
}
]
},
{
header: '備考', cells: [
{ binding: 'note', header: '備考', wordWrap: true }
]
},
];
return appData;
}
.wj-tabpanes{
height: 800px;
}
table.form {
border-collapse: collapse;
}
table.form>tbody>tr>* {
padding: 0.25rem 0.5rem;
border: 1px solid #c3c9e6;
}
table.form>tbody>tr>th {
text-align: left;
background: #d4e4ed;
color: #257fc9;
font-weight: normal;
}
.required {
background-color: rgb(14, 56, 172);
color: white;
font-size: 12px;
margin-left: 0.5rem;
padding: 0 5px;
float: right;
}
.optional {
background-color: rgb(30, 148, 222);
color: white;
font-size: 12px;
margin-left: 0.5rem;
padding: 0 5px;
float: right;
}
.gcim {
border-color: #c3d2e6;
;
}
.gcim-floating-label__container[label-state] {
color: rgba(128, 132, 136, 0.65) !important;
}
.wj-multirow {
height: 400px;
margin: 6px 0;
}
.wj-tabpanel {
padding: 0 12px;
}
.wj-tabpane {
padding: 12px;
}
.wj-tabheader:hover {
outline: 2px solid rgba(90, 160, 215, .5);
}
/* custom-headers */
.wj-tabpanel.custom-headers .wj-tabpanes {
border: none;
}
.wj-tabpanel.custom-headers>div>.wj-tabheaders {
background: black;
color: white;
border: none;
}
.wj-tabpanel.custom-headers .wj-tabheaders .wj-tabheader.wj-state-active {
background: white;
color: black;
}
.wj-tabpanel.custom-headers .wj-tabheaders .wj-tabheader:not(.wj-state-active) {
font-weight: normal;
}
.wj-tabpanel.custom-headers .wj-tabheaders .wj-tabheader.wj-state-active:after {
display: none;
/* hide underline */
}
/* tabs on the left */
.wj-tabpanel.tabs-left>div {
display: flex;
align-items: center;
}
.wj-tabpanel.tabs-left .wj-tabheaders {
display: flex;
flex-direction: column;
min-width: 8em;
border-right: 1px solid #ddd;
}
.wj-tabpanel.tabs-left .wj-tabheaders .wj-tabheader {
text-align: right;
}
.wj-tabpanel.tabs-left .wj-tabpanes {
display: flex;
flex-grow: 1;
border-top: none;
overflow-x: hidden;
}
/* tabs on the right */
.wj-tabpanel.tabs-right>div {
display: flex;
align-items: center;
}
.wj-tabpanel.tabs-right .wj-tabheaders {
display: flex;
flex-direction: column;
min-width: 8em;
border-left: 1px solid #ddd;
order: 1;
}
.wj-tabpanel.tabs-right .wj-tabheaders .wj-tabheader {
text-align: left;
}
.wj-tabpanel.tabs-right .wj-tabpanes {
display: flex;
flex-grow: 1;
border-top: none;
overflow-x: hidden;
order: 0;
}
/* tabs below */
.wj-tabpanel.tabs-below>div {
display: flex;
flex-direction: column;
align-items: stretch;
}
.wj-tabpanel.tabs-below .wj-tabheaders {
order: 1;
/* headers after panes */
}
.wj-tabpanel.tabs-below .wj-tabpanes {
order: 0;
}
.wj-tabpanel.tabs-below .wj-tabheaders .wj-tabheader.wj-state-active:after {
top: 0;
bottom: unset;
}
label {
width: 10em;
text-align: right;
margin-right: 6px;
}
body {
margin-bottom: 48pt;
}
.flexItems {
display: flex;
flex-direction: row;
}
.wj-flexchart {
width: 600px;
}
#chart {
margin-left: 10px;
}
.myStyle1 {
background: #d4e4ed !important;
color: #257fc9 !important;
}
.gcim__richtexteditor-tbtn__select-label {
user-select: none;
}
.gcim-floating-label__container[label-state='floating'][label-direction] {
top: -4px !important;
}
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@mescius/inputman': 'npm:@mescius/inputman/index.js',
'@mescius/inputman/CSS': 'npm:@mescius/inputman/CSS',
'@mescius/inputman.richtexteditor': 'npm:@mescius/inputman.richtexteditor/index.js',
"@mescius/inputman.richtexteditor/CSS": "npm:@mescius/inputman.richtexteditor/CSS",
'@mescius/inputman.richtexteditor/JS/plugins/advlist': 'npm:@mescius/inputman.richtexteditor/JS/plugins/advlist/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/all': 'npm:@mescius/inputman.richtexteditor/JS/plugins/all/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/autosave': 'npm:@mescius/inputman.richtexteditor/JS/plugins/autosave/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/charmap': 'npm:@mescius/inputman.richtexteditor/JS/plugins/charmap/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/directionality': 'npm:@mescius/inputman.richtexteditor/JS/plugins/directionality/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/emoticons': 'npm:@mescius/inputman.richtexteditor/JS/plugins/emoticons/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/fullscreen': 'npm:@mescius/inputman.richtexteditor/JS/plugins/fullscreen/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/htmlcode': 'npm:@mescius/inputman.richtexteditor/JS/plugins/htmlcode/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/image': 'npm:@mescius/inputman.richtexteditor/JS/plugins/image/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/link': 'npm:@mescius/inputman.richtexteditor/JS/plugins/link/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/lists': 'npm:@mescius/inputman.richtexteditor/JS/plugins/lists/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/media': 'npm:@mescius/inputman.richtexteditor/JS/plugins/media/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/pagebreak': 'npm:@mescius/inputman.richtexteditor/JS/plugins/pagebreak/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/preview': 'npm:@mescius/inputman.richtexteditor/JS/plugins/preview/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/save': 'npm:@mescius/inputman.richtexteditor/JS/plugins/save/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/searchreplace': 'npm:@mescius/inputman.richtexteditor/JS/plugins/searchreplace/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/table': 'npm:@mescius/inputman.richtexteditor/JS/plugins/table/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/template': 'npm:@mescius/inputman.richtexteditor/JS/plugins/template/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/wordcount': 'npm:@mescius/inputman.richtexteditor/JS/plugins/wordcount/plugin.js',
'@mescius/inputman.comment': 'npm:@mescius/inputman.comment/index.js',
'@mescius/inputman.comment/CSS': 'npm:@mescius/inputman.comment/CSS',
'jszip': 'npm:jszip/dist/jszip.js',
'@mescius/wijmo': 'npm:@mescius/wijmo/index.js',
'@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js',
'@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles',
'@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures',
'@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js',
'@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js',
'@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js',
'@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js',
'@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js',
'@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js',
'@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js',
'@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js',
'@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js',
'@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js',
'@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js',
'@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js',
'@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js',
'@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js',
'@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js',
'@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js',
'@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js',
'@mescius/wijmo.grid.style': 'npm:@mescius/wijmo.grid.style/index.js',
'@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js',
'@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js',
'@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js',
'@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js',
'@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js',
'@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js',
'@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js',
'@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js',
'@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js',
'@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js',
'@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js',
'@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js',
'@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js',
'@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js',
'@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js',
'@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js',
'@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js',
'@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js',
'@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js',
'@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js',
'@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js',
'@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js',
'@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js',
'@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js',
'@mescius/wijmo.barcode.specialized': 'npm:@mescius/wijmo.barcode.specialized/index.js',
'jszip': 'npm:jszip/dist/jszip.js',
'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
