売上明細

次のサンプルは、Vue を利用した場合、SpreadJS のスプレッドシートを使用して、売上一覧表示とモーダルウィンドウで売上明細管理を想定したサンプルです。

このサンプルでは、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 "@grapecity/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, "1月", colHeader); sheet.setValue(1, 7, "2月", colHeader); sheet.setValue(1, 8, "3月", colHeader); sheet.setValue(1, 9, "4月", colHeader); sheet.setValue(1, 10, "5月", colHeader); sheet.setValue(1, 11, "6月", colHeader); sheet.setValue(1, 12, "7月", colHeader); sheet.setValue(1, 13, "8月", colHeader); sheet.setValue(1, 14, "9月", colHeader); sheet.setValue(1, 15, "10月", colHeader); sheet.setValue(1, 16, "11月", colHeader); sheet.setValue(1, 17, "12月", 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/@grapecity/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/@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', '@grapecity/inputman': 'npm:@grapecity/inputman/index.js', '@grapecity/inputman.vue': 'npm:@grapecity/inputman.vue/lib/gc.inputman.plugin.vue.js' }, meta: { '*.css': { loader: 'systemjs-plugin-css' }, '*.vue': { loader: "../plugin-vue/index.js" } } }); })(this);