このサンプルでは、SpreadJS と InputManJS を組み合わせて、売上一覧の表示と売上詳細の CRUD 操作を示すサンプルです。
メモ：
[詳細編集]ボタンをクリックして、モーダルウィンドウで当該行の詳細を表示することができます。
モーダルウィンドウのコントロールは InputManJS のコントロールを使用しています。
詳細情報を編集し、CRUD 操作を行うことができます。
モーダルウィンドウを閉じると、編集されたデータが売上一覧に反映されます。
<template>
<div id="container">
<div id="sample-tutorial">
<gc-spread-sheets
hostClass="sample-spreadsheets"
@workbookInitialized="initSpread"
name="demo_app_vue"
backColor="#f7f6f5"
grayAreaBackColor="#d4dcd3"
showScrollTip="GC.Spread.Sheets.ShowScrollTip.both"
showDragFillTip="true"
autoFitType="GC.Spread.Sheets.AutoFitType.cellWithHeader"
highlightInvalidData="true"
>
<gc-worksheet>
<gc-column> </gc-column>
</gc-worksheet>
</gc-spread-sheets>
</div>
<Teleport to="body">
<modal
:show="showModal"
@close="
showModal = false;
isActive = '1';
"
@update="updateData"
@delete="deleteData"
@add="addData"
>
<template #header></template>
<template #body>
<div class="tabgroup">
<ul class="tabnav">
<li
@click="changeTab('1')"
v-bind:class="{ active: isActive == '1' }"
>
基本情報
</li>
<li
@click="changeTab('2')"
v-bind:class="{ active: isActive == '2' }"
>
売上情報
</li>
</ul>
<div class="tabcontent">
<div v-if="isActive == '1'" class="tabcontent-list">
<table class="form" id="order">
<tr>
<th>カテゴリ</th>
<td>
<GcComboBoxComponent
:items="comboList1"
:selected-value="orderData.category"
@selectedchanged="changeCategory"
/>
</td>
</tr>
<tr>
<th>製品名</th>
<td>
<GcTextBoxComponent
:value="orderData.product"
:text="orderData.product"
v-model="orderData.product"
/>
</td>
</tr>
<tr>
<th>発売日</th>
<td>
<GcDateTimeComponent
:display-format-pattern="'yyy年MM月dd日'"
:format-pattern="'yyyy/MM/dd'"
:value="orderData.salesDate"
:show-drop-down-button="true"
:drop-down-config="{ dropDownType: 'calendar' }"
v-model="orderData.salesDate"
/>
</td>
</tr>
<tr>
<th>担当者</th>
<td>
<GcComboBoxComponent
:items="comboList2"
:selected-value="orderData.chargePerson"
@selectedchanged="changePerson"
/>
</td>
</tr>
<tr>
<th>評価</th>
<td>
<GcNumberComponent
:display-format-digit="'##,##0.0'"
:format-digit="'##,##0.0'"
:show-spin-button="false"
:minValue="0"
:maxValue="5"
v-model="orderData.feedback"
/>
</td>
</tr>
</table>
</div>
<div v-else-if="isActive == '2'" class="tabcontent-list">
<table class="form" id="sale">
<tr v v-for="(value, key, index) in salesData" :key="index">
<th>{{ title[index] }}</th>
<td>
<GcNumberComponent
:display-format-digit="'##,##0'"
:format-digit="'##,##0'"
:show-spin-button="true"
:text="salesData[value]"
v-bind:value="salesData[value]"
v-model="salesData[key]"
/>
</td>
</tr>
</table>
</div>
</div>
</div>
</template>
<template #footer>
© 2023 MESCIUS inc. All rights reserved.
</template>
</modal>
</Teleport>
</div>
</template>
<script setup>
import { GcSpreadSheets, GcWorksheet, GcColumn } from "@mescius/spread-sheets-vue";
import GC from "@mescius/spread-sheets";
import "@mescius/spread-sheets-resources-ja";
import { GcTextBoxComponent, GcComboBoxComponent, GcDateTimeComponent, GcNumberComponent } from "@mescius/inputman.vue";
import modal from "./detail-modal.vue";
import { ref, reactive, toRaw } from "vue";
import { getData } from "./data.js";
GC.Spread.Common.CultureManager.culture("ja-jp");
const showModal = ref(false);
const isActive = ref("1");
const orderData = reactive({
category: "",
product: "",
salesDate: "",
chargePerson: "",
feedback: 0,
});
const salesData = reactive({
January: 2038,
February: 3616,
March: 1447,
April: 2742,
May: 3667,
June: 3738,
July: 2073,
August: 913,
September: 648,
October: 3752,
November: 1982,
December: 738,
});
const comboList1 = ["乳製品", "清涼飲料水", "ビール", "焼酎"];
const comboList2 = ["山下", "佐藤", "田中"];
const title = [
"1 月",
"2 月",
"3 月",
"4 月",
"5 月",
"6 月",
"7 月",
"8 月",
"9 月",
"10 月",
"11 月",
"12 月",
];
const styleInfo = { height: "90vh", width: "100%" };
const spreadRef = ref(null);
/*
初期化処理
*/
const initSpread = (spread) => {
spreadRef.value = spread;
let sheet = spread.getActiveSheet();
sheet.setDataSource(getData());
spread.suspendPaint();
sheet.selectionUnit(GC.Spread.Sheets.SelectionUnit.row);
sheet.selectionPolicy(GC.Spread.Sheets.SelectionPolicy.single);
// シートスタイル
sheet.frozenColumnCount(3);
sheet.options.frozenlineColor = "orange";
sheet.columnOutlines.group(5, 13);
sheet.columnOutlines.direction(
GC.Spread.Sheets.Outlines.OutlineDirection.backward
);
sheet.options.gridline = {
showVerticalGridline: false,
showHorizontalGridline: true,
};
// 交互
let contentStyle = new GC.Spread.Sheets.Style();
contentStyle.backColor = "#d3d6dd";
for (let r = 0; r < sheet.getRowCount(); r++) {
if (r % 2 == 0) {
sheet.setStyle(r, -1, contentStyle);
sheet
.getRange(r, -1, 1, -1, GC.Spread.Sheets.SheetArea.viewport)
.borderBottom(
new GC.Spread.Sheets.LineBorder(
"#006eb0",
GC.Spread.Sheets.LineStyle.dashDot
)
);
}
}
sheet
.getRange(-1, 0, -1, 1, GC.Spread.Sheets.SheetArea.viewport)
.borderBottom(
new GC.Spread.Sheets.LineBorder(
"#006eb0",
GC.Spread.Sheets.LineStyle.dashDot
)
);
var colHeader = GC.Spread.Sheets.SheetArea.colHeader;
sheet.setRowCount(2, GC.Spread.Sheets.SheetArea.colHeader);
sheet.options.colHeaderAutoTextIndex = 3;
sheet.options.colHeaderAutoText = GC.Spread.Sheets.HeaderAutoText.numbers;
sheet.addSpan(0, 0, 2, 1, colHeader);
sheet.addSpan(0, 1, 2, 1, colHeader);
sheet.addSpan(0, 2, 2, 1, colHeader);
sheet.addSpan(0, 3, 2, 1, colHeader);
sheet.addSpan(0, 4, 2, 1, colHeader);
sheet.addSpan(0, 5, 2, 1, colHeader);
sheet.addSpan(0, 18, 2, 1, colHeader);
sheet.addSpan(0, 6, 1, 12, colHeader);
sheet.setValue(0, 0, "カテゴリ", colHeader);
sheet.setValue(0, 1, "製品", colHeader);
sheet.setValue(0, 2, "発売日", colHeader);
sheet.setValue(0, 3, "担当者", colHeader);
sheet.setValue(0, 4, "評価", colHeader);
sheet.setValue(0, 5, "トレンド", colHeader);
sheet.setValue(0, 6, "売上", colHeader);
sheet.setValue(0, 18, "編集", colHeader);
sheet.setValue(1, 6, "１月", colHeader);
sheet.setValue(1, 7, "２月", colHeader);
sheet.setValue(1, 8, "３月", colHeader);
sheet.setValue(1, 9, "４月", colHeader);
sheet.setValue(1, 10, "５月", colHeader);
sheet.setValue(1, 11, "６月", colHeader);
sheet.setValue(1, 12, "７月", colHeader);
sheet.setValue(1, 13, "８月", colHeader);
sheet.setValue(1, 14, "９月", colHeader);
sheet.setValue(1, 15, "１０月", colHeader);
sheet.setValue(1, 16, "１１月", colHeader);
sheet.setValue(1, 17, "１２月", colHeader);
var style = new GC.Spread.Sheets.Style();
style.font = "bold 10.5pt serif";
style.foreColor = "#fff799";
style.backColor = "#bcbace";
style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
var border = new GC.Spread.Sheets.LineBorder();
border.color = "#7FFFD4";
border.style = GC.Spread.Sheets.LineStyle.double;
sheet.setRowHeight(0, 30, GC.Spread.Sheets.SheetArea.colHeader);
sheet.setRowHeight(1, 30, GC.Spread.Sheets.SheetArea.colHeader);
for (let i = 0; i < 19; i++) {
sheet.setStyle(0, i, style, GC.Spread.Sheets.SheetArea.colHeader);
}
var style2 = new GC.Spread.Sheets.Style();
style2.font = "bold 13px serif";
style2.foreColor = "darkorange";
style2.backColor = "honeydew";
for (let j = 0; j < 18; j++) {
sheet.setStyle(1, j, style2, GC.Spread.Sheets.SheetArea.colHeader);
}
// セル初期化
sheet.name("売上情報"); // シート名
setSheetCellType(spread);
var cfs = sheet.conditionalFormats;
// ホバー
var hoverStyle = new GC.Spread.Sheets.Style("#bbdbf3");
var rowRange = new GC.Spread.Sheets.Range(-1, -1, -1, -1);
cfs.addRowStateRule(GC.Spread.Sheets.RowColumnStates.hover, hoverStyle, [
rowRange,
]);
// アクティブ
var activeStyle = new GC.Spread.Sheets.Style();
activeStyle.foreColor = "black";
activeStyle.backColor = "#fff799";
cfs.addRowStateRule(GC.Spread.Sheets.RowColumnStates.active, activeStyle, [
rowRange,
]);
// 編集
var dirtyStyle = new GC.Spread.Sheets.Style("#a4a8d4");
cfs.addRowStateRule(GC.Spread.Sheets.RowColumnStates.dirty, dirtyStyle, [
rowRange,
]);
// 評価アイコン
let iconSetRule = sheet.conditionalFormats.addIconSetRule(
GC.Spread.Sheets.ConditionalFormatting.IconSetType.fiveArrowsColored,
[new GC.Spread.Sheets.Range(-1, 4, -1, 1)]
);
iconSetRule.iconSetType();
iconSetRule.reverseIconOrder(false);
iconSetRule.showIconOnly(false);
// 自動マージ
let range = new GC.Spread.Sheets.Range(-1, 0, -1, 2);
sheet.autoMerge(
range,
GC.Spread.Sheets.AutoMerge.AutoMergeDirection.column,
GC.Spread.Sheets.AutoMerge.AutoMergeMode.restricted
);
// データバインディング
sheet.bind(GC.Spread.Sheets.Events.SelectionChanged, function (e, info) {
let row = info.newSelections[0].row;
let selectData = sheet.getDataItem(row);
orderData.category = selectData.category;
orderData.product = selectData.product;
orderData.salesDate = selectData.salesDate;
orderData.chargePerson = selectData.chargePerson;
orderData.feedback = selectData.feedback;
salesData.January = selectData.January;
salesData.February = selectData.February;
salesData.March = selectData.March;
salesData.April = selectData.April;
salesData.May = selectData.May;
salesData.June = selectData.June;
salesData.July = selectData.July;
salesData.August = selectData.August;
salesData.September = selectData.September;
salesData.October = selectData.October;
salesData.November = selectData.November;
salesData.December = selectData.December;
});
spread.resumePaint();
};
// セル型
function setSheetCellType(spread) {
let sheet = spread.getActiveSheet();
spread.suspendPaint();
// 列幅 行高
sheet.setColumnWidth(0, 90, GC.Spread.Sheets.SheetArea.viewport);
sheet.setColumnWidth(1, 180, GC.Spread.Sheets.SheetArea.viewport);
sheet.setColumnWidth(2, 100, GC.Spread.Sheets.SheetArea.viewport);
sheet.getRange("D:E").width(70);
sheet.setColumnWidth(5, 100, GC.Spread.Sheets.SheetArea.viewport);
sheet.getRange("G:R").width(70);
sheet.setColumnWidth(18, 80, GC.Spread.Sheets.SheetArea.viewport);
for (let i = 0; i < sheet.getRowCount(); i++) {
sheet.setRowHeight(i, 40, GC.Spread.Sheets.SheetArea.viewport);
}
// 和暦日付
var dateStyle = new GC.Spread.Sheets.Style();
dateStyle.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openDateTimePicker",
useButtonStyle: false,
},
];
dateStyle.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.dateTimePicker,
option: {
showTime: false,
},
},
];
// スライダー
var sliderStyle = new GC.Spread.Sheets.Style();
sliderStyle.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openSlider",
useButtonStyle: true,
},
];
sliderStyle.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.slider,
option: {
marks: [0, 2.5, 5],
min: 0,
max: 5,
step: 0.1,
direction: GC.Spread.Sheets.LayoutDirection.horizontal,
},
},
];
// コンボボックス
var combo = new GC.Spread.Sheets.CellTypes.ComboBox();
combo
.items([
{ text: "山下", value: "0" },
{ text: "佐藤", value: "1" },
{ text: "田中", value: "2" },
])
.editorValueType(GC.Spread.Sheets.CellTypes.EditorValueType.text);
combo.itemHeight(24);
combo.editable(true);
// ボタン
let style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
caption: "詳細編集",
useButtonStyle: true,
buttonBackColor: "#dbebc4",
hoverBackColor: "#fbdac8",
command: () => {
showModal.value = true;
},
},
];
// スパークライン
var setting = new GC.Spread.Sheets.Sparklines.SparklineSetting();
setting.options.showMarkers = true;
setting.options.lineWeight = 1;
setting.options.displayXAxis = true;
setting.options.showFirst = true;
setting.options.showLast = true;
setting.options.showLow = true;
setting.options.showHigh = true;
setting.options.showNegative = true;
setting.options.displayEmptyCellsAs =
GC.Spread.Sheets.Sparklines.EmptyValueStyle.Zero;
setting.options.markersColor = "Magenta";
setting.options.axisColor = "Cyan";
for (let i = 0; i < sheet.getRowCount(); i++) {
sheet.setCellType(i, 3, combo, GC.Spread.Sheets.SheetArea.viewport);
// スパークライン
var data = new GC.Spread.Sheets.Range(i, 6, 1, 12);
sheet.setSparkline(
i,
5,
data,
GC.Spread.Sheets.Sparklines.DataOrientation.horizontal,
GC.Spread.Sheets.Sparklines.SparklineType.line,
setting
);
// 和暦日付
sheet.getCell(i, 2).setStyle(dateStyle);
sheet.getCell(i, 2).formatter("yyyy/mm/dd");
// スライダー
sheet.getCell(i, 4).setStyle(sliderStyle);
// ボタン
sheet.setStyle(i, 18, style);
}
// 数値のフォーマットを設定
for (let i = 6; i < 19; i++) {
sheet.getCell(-1, i).formatter("##,##0");
}
spread.resumePaint();
}
/*
更新処理
*/
function updateData() {
let spread = toRaw(spreadRef.value);
let sheet = spread.getActiveSheet();
let r = sheet.getSelections(0)[0].row;
sheet.setValue(r, 0, orderData.category);
sheet.setValue(r, 1, orderData.product);
sheet.setValue(r, 2, orderData.salesDate);
sheet.setValue(r, 3, orderData.chargePerson);
sheet.setValue(r, 4, parseFloat(orderData.feedback));
sheet.setValue(r, 6, salesData.January);
sheet.setValue(r, 7, salesData.February);
sheet.setValue(r, 8, salesData.March);
sheet.setValue(r, 9, salesData.April);
sheet.setValue(r, 10, salesData.May);
sheet.setValue(r, 11, salesData.June);
sheet.setValue(r, 12, salesData.July);
sheet.setValue(r, 13, salesData.August);
sheet.setValue(r, 14, salesData.September);
sheet.setValue(r, 15, salesData.October);
sheet.setValue(r, 16, salesData.November);
sheet.setValue(r, 17, salesData.December);
// モーダルを閉じる
showModal.value = false;
// タブを基本情報に設定
isActive.value = "1";
setSheetCellType(spread);
}
/*
削除処理
*/
function deleteData() {
let spread = toRaw(spreadRef.value);
let sheet = spread.getActiveSheet();
// 行を削除
sheet.deleteRows(sheet.getSelections(0)[0].row, 1);
// モーダルを閉じる
showModal.value = false;
// タブを基本情報に設定
isActive.value = "1";
setSheetCellType(spread);
}
/*
追加処理
*/
function addData() {
let spread = toRaw(spreadRef.value);
let sheet = spread.getActiveSheet();
let r = sheet.getSelections(0)[0].row;
// 行を追加
sheet.addRows(r, 1);
sheet.setValue(r, 0, orderData.category);
sheet.setValue(r, 1, orderData.product);
sheet.setValue(r, 2, orderData.salesDate);
sheet.setValue(r, 3, orderData.chargePerson);
sheet.setValue(r, 4, parseFloat(orderData.feedback));
sheet.setValue(r, 6, salesData.January);
sheet.setValue(r, 7, salesData.February);
sheet.setValue(r, 8, salesData.March);
sheet.setValue(r, 9, salesData.April);
sheet.setValue(r, 10, salesData.May);
sheet.setValue(r, 11, salesData.June);
sheet.setValue(r, 12, salesData.July);
sheet.setValue(r, 13, salesData.August);
sheet.setValue(r, 14, salesData.September);
sheet.setValue(r, 15, salesData.October);
sheet.setValue(r, 16, salesData.November);
sheet.setValue(r, 17, salesData.December);
// モーダルを閉じる
showModal.value = false;
// タブを基本情報に設定
isActive.value = "1";
setSheetCellType(spread);
}
function changeCategory(sender) {
orderData.category = sender.getSelectedValue();
}
function changePerson(sender) {
orderData.chargePerson = sender.getSelectedValue();
}
function changeTab(num) {
isActive.value = num;
}
</script>
<style scoped>
#container {
width: 95%;
height: 98vh;
margin: auto;
}
.form {
width: 100%;
border-collapse: collapse;
}
.form tr > * {
height: 1rem;
padding: 0.25rem 0.5rem;
border: 1px dotted #d2d2d2;
}
.form tr > th {
width: 30%;
height: 1rem;
text-align: left;
background: #fef4f4;
font-weight: normal;
}
.form > tr > td {
padding-right: 30px;
padding-left: 30px;
}
.tabnav {
margin: auto;
padding: 0.25rem 0 0 0;
display: flex;
list-style-type: none;
}
.tabnav li {
cursor: pointer;
width: 50%;
background: #ddd;
color: #333;
padding: 10px;
text-decoration: none;
}
.tabnav li.active {
background: #405dca;
color: #fff;
}
.tabcontent {
border: 1px dotted #ccc;
}
</style>
<script setup></script>
<script>
export default {
props: {
show: Boolean,
showModal: Boolean,
},
};
</script>
<template>
<Transition name="modal">
<div v-if="show" class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header"></slot>
</div>
<div class="modal-body">
<div class="modal-body-slot"><slot name="body"></slot></div>
<div class="btnArea">
<button
class="subButton"
id="cancelBtn"
type="info"
@click="$emit('close')"
>
キャンセル
</button>
<button
class="subButton"
id="updateBtn"
type="primary"
@click="$emit('update')"
>
更新
</button>
<button
class="subButton"
id="addBtn"
type="success"
@click="$emit('add')"
>
追加
</button>
<button
class="subButton"
id="deleteBtn"
type="danger"
@click="$emit('delete')"
>
削除
</button>
</div>
</div>
<div class="modal-footer">
<slot name="footer"></slot>
</div>
</div>
</div>
</div>
</Transition>
</template>
<style>
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: table;
transition: opacity 0.3s ease;
}
.modal-wrapper {
display: table-cell;
vertical-align: middle;
}
.modal-container {
width: 500px;
height: 550px;
margin: 0px auto;
padding: 20px 30px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
transition: all 0.3s ease;
overflow: auto;
}
.modal-header {
height: 5%;
margin-top: 0;
color: #42b983;
text-align: center;
}
.modal-body {
margin: 20px 0;
overflow: scroll;
}
.modal-body::-webkit-scrollbar {
display: none;
}
.modal-footer {
font-size: 12px;
height: 5%;
}
.modal-default-button {
float: left;
}
.modal-enter-from {
opacity: 0;
}
.modal-leave-to {
opacity: 0;
}
.modal-enter-from .modal-container,
.modal-leave-to .modal-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.modal-body-slot {
height: 90%;
overflow: auto;
min-height: 300px;
}
.modal-body-slot::-webkit-scrollbar {
display: auto;
}
.btnArea {
height: 10%;
padding-top: 1em;
}
.subButton {
width: 100px;
height: 40px;
padding: 0.25rem;
margin-right: 1.25rem;
margin-top: 0.25rem;
text-align: center;
}
.subButton:hover {
border-color: #bbc8e6;
}
#cancelBtn {
background: #f8fbf8;
}
#updateBtn {
background: #a0d8ef;
}
#addBtn {
background: #a8c97f;
}
#deleteBtn {
background: #e5abbe;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SpreadJS VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/vue3/node_modules/@mescius/inputman/CSS/gc.inputman-js.css">
<link rel="stylesheet" href="./src/styles.css" type="text/css" />
<script src="$DEMOROOT$/ja/vue3/node_modules/systemjs/dist/system.src.js"></script>
<script src="./systemjs.config.js"></script>
<script src="./compiler.js" type="module"></script>
<script>
var System = SystemJS;
System.import("./src/app.js");
System.import('$DEMOROOT$/ja/lib/vue3/license.js').then(() => {
System.import('$DEMOROOT$/spread/source/js/inputman/react_vue/license.js');
});
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
export function getData() {
return [
{
category: "乳製品",
product: "酪農ミルク",
salesDate: "2021/01/03",
chargePerson: "山下",
feedback: 4,
total: "",
January: 2414,
February: 3250,
March: 941,
April: 1487,
May: 1233,
June: 1472,
July: 3732,
August: 1394,
September: 3676,
October: 1663,
November: 2650,
December: 796,
id: 0,
},
{
category: "乳製品",
product: "酪農ミルク（低脂肪）",
salesDate: "2021/03/01",
chargePerson: "佐藤",
feedback: 3,
total: "",
January: 2811,
February: 2033,
March: 2671,
April: 3844,
May: 3327,
June: 687,
July: 2815,
August: 2940,
September: 2915,
October: 2074,
November: 2377,
December: 2894,
id: 1,
},
{
category: "乳製品",
product: "牧場ミルク",
salesDate: "2021/04/06",
chargePerson: "田中",
feedback: 4.5,
total: "",
January: 1446,
February: 3882,
March: 3378,
April: 1834,
May: 1414,
June: 1460,
July: 1383,
August: 1643,
September: 1814,
October: 1946,
November: 3199,
December: 3122,
id: 2,
},
{
category: "乳製品",
product: "牧場ミルク（低脂肪）",
salesDate: "2021/10/01",
chargePerson: "田中",
feedback: 1,
total: "",
January: 2038,
February: 3616,
March: 1447,
April: 2742,
May: 3667,
June: 3738,
July: 2073,
August: 913,
September: 648,
October: 3752,
November: 1982,
December: 738,
id: 3,
},
{
category: "乳製品",
product: "チーズ酪農",
salesDate: "2021/12/01",
chargePerson: "山下",
feedback: 2.5,
total: "",
January: 2239,
February: 3096,
March: 1728,
April: 1061,
May: 2540,
June: 3080,
July: 1515,
August: 1474,
September: 1052,
October: 1078,
November: 2641,
December: 3187,
id: 4,
},
{
category: "乳製品",
product: "チーズ酪農（低脂肪）",
salesDate: "2021/03/24",
chargePerson: "田中",
feedback: 1,
total: "",
January: 1060,
February: 1876,
March: 3046,
April: 3672,
May: 1299,
June: 3853,
July: 2709,
August: 935,
September: 868,
October: 940,
November: 971,
December: 1574,
id: 5,
},
{
category: "乳製品",
product: "牧場チーズスペシャル",
salesDate: "2021/05/13",
chargePerson: "田中",
feedback: 3,
total: "",
January: 3827,
February: 3274,
March: 1719,
April: 967,
May: 1178,
June: 609,
July: 1927,
August: 1848,
September: 703,
October: 3286,
November: 1092,
December: 1002,
id: 6,
},
{
category: "乳製品",
product: "牧場チーズ（低脂肪）",
salesDate: "2021/08/24",
chargePerson: "山下",
feedback: 4,
total: "",
January: 2397,
February: 3837,
March: 3186,
April: 1969,
May: 2495,
June: 898,
July: 721,
August: 1160,
September: 646,
October: 2355,
November: 3073,
December: 1099,
id: 7,
},
{
category: "乳製品",
product: "酪農バターカロリーオフ",
salesDate: "2021/04/19",
chargePerson: "佐藤",
feedback: 2,
total: "",
January: 859,
February: 3104,
March: 2673,
April: 2696,
May: 2925,
June: 2816,
July: 620,
August: 2357,
September: 3992,
October: 3163,
November: 1390,
December: 1332,
id: 8,
},
{
category: "乳製品",
product: "酪農バター（低脂肪）",
salesDate: "2021/05/18",
chargePerson: "田中",
feedback: 2.5,
total: "",
January: 3493,
February: 2952,
March: 1308,
April: 2106,
May: 776,
June: 1830,
July: 3709,
August: 761,
September: 2845,
October: 2398,
November: 1126,
December: 1584,
id: 9,
},
{
category: "清涼飲料水",
product: "いよかんドリンク",
salesDate: "2021/09/30",
chargePerson: "山下",
feedback: 1,
total: "",
January: 3910,
February: 1596,
March: 2796,
April: 2570,
May: 533,
June: 3723,
July: 2011,
August: 1484,
September: 1736,
October: 2385,
November: 3769,
December: 3836,
id: 10,
},
{
category: "清涼飲料水",
product: "ぶどうジュース",
salesDate: "2021/03/05",
chargePerson: "田中",
feedback: 1.5,
total: "",
January: 2868,
February: 3083,
March: 780,
April: 2259,
May: 3101,
June: 3478,
July: 2978,
August: 638,
September: 870,
October: 980,
November: 2057,
December: 1929,
id: 11,
},
{
category: "清涼飲料水",
product: "マンゴードリンク",
salesDate: "2021/02/07",
chargePerson: "佐藤",
feedback: 2,
total: "",
January: 1835,
February: 3766,
March: 3039,
April: 3422,
May: 3107,
June: 950,
July: 1365,
August: 797,
September: 910,
October: 2244,
November: 3581,
December: 2310,
id: 12,
},
{
category: "清涼飲料水",
product: "みかんドリンク",
salesDate: "2021/07/25",
chargePerson: "佐藤",
feedback: 5,
total: "",
January: 3028,
February: 2302,
March: 1926,
April: 2327,
May: 918,
June: 1462,
July: 3272,
August: 2010,
September: 2787,
October: 1501,
November: 3479,
December: 2790,
id: 13,
},
{
category: "清涼飲料水",
product: "いちごジュース",
salesDate: "2021/05/22",
chargePerson: "山下",
feedback: 3,
total: "",
January: 3777,
February: 3580,
March: 956,
April: 2067,
May: 3268,
June: 1479,
July: 1480,
August: 2379,
September: 624,
October: 2301,
November: 1691,
December: 722,
id: 14,
},
{
category: "清涼飲料水",
product: "パパイヤドリンク",
salesDate: "2021/09/30",
chargePerson: "田中",
feedback: 0.5,
total: "",
January: 615,
February: 3774,
March: 1184,
April: 2129,
May: 3322,
June: 1002,
July: 530,
August: 3488,
September: 1815,
October: 1686,
November: 1582,
December: 580,
id: 15,
},
{
category: "清涼飲料水",
product: "オレンジウォーター",
salesDate: "2021/12/13",
chargePerson: "田中",
feedback: 2,
total: "",
January: 2536,
February: 2323,
March: 631,
April: 3327,
May: 3120,
June: 3066,
July: 1924,
August: 1373,
September: 2489,
October: 3854,
November: 1437,
December: 2343,
id: 16,
},
{
category: "清涼飲料水",
product: "バナナミックス",
salesDate: "2021/11/12",
chargePerson: "山下",
feedback: 1.5,
total: "",
January: 688,
February: 758,
March: 1250,
April: 2142,
May: 1920,
June: 3980,
July: 3643,
August: 2919,
September: 2481,
October: 824,
November: 2092,
December: 1466,
id: 17,
},
{
category: "清涼飲料水",
product: "梨ドリンク",
salesDate: "2021/10/04",
chargePerson: "田中",
feedback: 1,
total: "",
January: 1244,
February: 2049,
March: 1820,
April: 3091,
May: 1146,
June: 1271,
July: 565,
August: 1280,
September: 675,
October: 1967,
November: 2878,
December: 2060,
id: 18,
},
{
category: "清涼飲料水",
product: "スペシャルコーヒー",
salesDate: "2021/10/05",
chargePerson: "佐藤",
feedback: 1.5,
total: "",
January: 2929,
February: 2325,
March: 2063,
April: 1546,
May: 3166,
June: 783,
July: 3515,
August: 1747,
September: 3334,
October: 2629,
November: 3667,
December: 3851,
id: 19,
},
{
category: "ビール",
product: "激辛ビール",
salesDate: "2021/10/06",
chargePerson: "田中",
feedback: 1,
total: "",
January: 3404,
February: 2377,
March: 2912,
April: 2210,
May: 2481,
June: 2360,
July: 934,
August: 2099,
September: 1826,
October: 1316,
November: 1330,
December: 2395,
id: 20,
},
{
category: "ビール",
product: "オリエントの里",
salesDate: "2021/10/07",
chargePerson: "佐藤",
feedback: 5,
total: "",
January: 551,
February: 2070,
March: 678,
April: 1101,
May: 891,
June: 868,
July: 2734,
August: 2869,
September: 1203,
October: 3690,
November: 1122,
December: 1476,
id: 21,
},
{
category: "ビール",
product: "グレープの森",
salesDate: "2021/10/08",
chargePerson: "佐藤",
feedback: 4,
total: "",
January: 1092,
February: 530,
March: 1074,
April: 1198,
May: 509,
June: 1496,
July: 1672,
August: 3821,
September: 3270,
October: 3387,
November: 3956,
December: 2437,
id: 22,
},
{
category: "ビール",
product: "さっぱりビール",
salesDate: "2021/10/09",
chargePerson: "佐藤",
feedback: 3,
total: "",
January: 3673,
February: 1321,
March: 3850,
April: 997,
May: 1794,
June: 2313,
July: 3902,
August: 2286,
September: 3846,
October: 1739,
November: 3726,
December: 1318,
id: 23,
},
{
category: "焼酎",
product: "吟醸 ほめごろし",
salesDate: "2021/10/10",
chargePerson: "山下",
feedback: 1.5,
total: "",
January: 1162,
February: 3924,
March: 3374,
April: 3699,
May: 3504,
June: 3660,
July: 3288,
August: 1908,
September: 2190,
October: 734,
November: 3266,
December: 1904,
id: 24,
},
{
category: "焼酎",
product: "大吟醸 オリエント",
salesDate: "2021/10/11",
chargePerson: "佐藤",
feedback: 1.5,
total: "",
January: 1510,
February: 3312,
March: 527,
April: 634,
May: 1577,
June: 884,
July: 1877,
August: 2281,
September: 1120,
October: 1866,
November: 1677,
December: 2883,
id: 25,
},
{
category: "焼酎",
product: "麦焼酎 ちこちこ",
salesDate: "2021/10/12",
chargePerson: "田中",
feedback: 4.5,
total: "",
January: 2406,
February: 3020,
March: 3925,
April: 1104,
May: 2440,
June: 2096,
July: 976,
August: 2589,
September: 2503,
October: 1886,
November: 3407,
December: 2589,
id: 26,
},
];
}
#app {
height: 100%;
}
#sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: 100%;
height: 100%;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin:0;
padding:0;
}
#container {
width: 100%;
height: 100%;
margin: 0;
}
(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@grapecity/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'vue': "npm:vue/dist/vue.esm-browser.js",
'tiny-emitter': 'npm:tiny-emitter/index.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
"systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js",
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-resources-ja': 'npm:@mescius/spread-sheets-resources-ja/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js',
'@mescius/inputman': 'npm:@mescius/inputman/index.js',
'@mescius/inputman.vue': 'npm:@mescius/inputman.vue/lib/gc.inputman.plugin.vue.js'
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
