Partials.Price = function (params) { var selectedTab = ko.observable(0); var selectedValue = ko.observable(''); var dataSource = new DevExpress.data.DataSource({ store: Partials.db.BemsNoticePriceBase, expand: ["BemsNoticePriceDetail", "BemsNoticePriceContractType"], paginate: false, map: function (item) { return item; }, filter: [ ["SiteId", "=", 1], ["FuelTypeId", "=", selectedTab() + 1], ] }); var gridOptions = [ { dataSource: dataSource, showColumnHeaders: false, columns: [ { dataField: 'BemsNoticePriceContractType', caption: '계약명', allowEditing:false, width: 200, cellTemplate: function (e, v) { $("
").text(v.value.Name).appendTo(e); if (v.data.PrimaryPrice) { $("
").text('기본요금').appendTo(e); } $("
").text(Globalize.format(v.data.PrimaryPrice, 'c')).appendTo(e); } }, { dataField: 'BemsNoticePriceDetail', caption: '상세정보', allowEditing: false, cellTemplate: function (e, v) { $("
").dxDataGrid({ dataSource: v.value, showRowLines: true, showColumnHeaders: (v.rowIndex == 0) ? true : false, height: (v.value.length > 10) ? 236 : 110, paging: { enabled: false }, showColumnLines: false, hoverStateEnabled:true, sorting: { mode: 'none' }, loadPanel: null, editing: { editMode: 'cell', editEnabled: true, }, rowUpdating: function (cellInfo) { Partials.db.BemsNoticePriceDetail.update(cellInfo.key, cellInfo.newData); }, columns: [ { dataField: 'DataId', caption: '시간', allowEditing:false, }, { dataField: 'P01', caption: '1월', format:'currency', precision: 1 }, { dataField: 'P02', caption: '2월', format: 'currency', precision: 1}, { dataField: 'P03', caption: '3월', format: 'currency', precision: 1 }, { dataField: 'P04', caption: '4월', format: 'currency', precision: 1}, { dataField: 'P05', caption: '5월', format: 'currency', precision:1 }, { dataField: 'P06', caption: '6월', format: 'currency', precision:1 }, { dataField: 'P07', caption: '7월', format: 'currency', precision: 1}, { dataField: 'P08', caption: '8월', format: 'currency', precision: 1 }, { dataField: 'P09', caption: '9월', format: 'currency', precision: 1 }, { dataField: 'P10', caption: '10월', format: 'currency', precision: 1 }, { dataField: 'P11', caption: '11월', format: 'currency', precision: 1 }, { dataField: 'P12', caption: '12월', format: 'currency', precision: 1 }, ] }).appendTo(e);; } } ] }, { dataSource: dataSource, showColumnHeaders: false, showBorders: false, columns: [ { dataField: 'BemsNoticePriceContractType', caption: '계약명', width: 200, cellTemplate: function (e, v) { $("
").text(v.value.Name).appendTo(e); if (v.data.PrimaryPrice) { $("
").text('기본요금').appendTo(e); } $("
").text(Globalize.format(v.data.PrimaryPrice, 'c')).appendTo(e); } }, { dataField: 'BemsNoticePriceDetail', caption: '상세정보', cellTemplate: function (e, v) { $("
").dxDataGrid({ dataSource: v.value, showRowLines: true, showColumnHeaders: (v.rowIndex == 0) ? true : false, height: (v.value.length > 10) ? 236 : 110, paging: { pageSize: 24 }, showColumnLines: false, sorting: { mode: 'none' }, loadPanel: null, editing: { editMode: 'cell', editEnabled: true, }, rowUpdating: function (cellInfo) { Partials.db.BemsNoticePriceDetail.update(cellInfo.key, cellInfo.newData); }, columns: [ { dataField: 'P01', caption: '1월', format: 'currency', precision: 4 }, { dataField: 'P02', caption: '2월', format: 'currency', precision: 4 }, { dataField: 'P03', caption: '3월', format: 'currency', precision: 4 }, { dataField: 'P04', caption: '4월', format: 'currency', precision: 4 }, { dataField: 'P05', caption: '5월', format: 'currency', precision: 4 }, { dataField: 'P06', caption: '6월', format: 'currency', precision: 4 }, { dataField: 'P07', caption: '7월', format: 'currency', precision: 4 }, { dataField: 'P08', caption: '8월', format: 'currency', precision: 4 }, { dataField: 'P09', caption: '9월', format: 'currency', precision: 4 }, { dataField: 'P10', caption: '10월', format: 'currency', precision: 4 }, { dataField: 'P11', caption: '11월', format: 'currency', precision: 4 }, { dataField: 'P12', caption: '12월', format: 'currency', precision: 4 }, ] }).appendTo(e);; } } ] }, { dataSource: dataSource, showColumnHeaders: false, showBorders: false, columns: [ { dataField: 'BemsNoticePriceContractType', caption: '계약명', width: 200, cellTemplate: function (e, v) { $("
").text(v.value.Name).appendTo(e); if (v.data.SecondaryPrice) { var container = $("
").appendTo(e); $("
").text('물이용부담금').appendTo(container); $("
").text(Globalize.format(v.data.SecondaryPrice, 'c')).appendTo(container); } if (v.data.PrimaryPrice) { var container = $("
").appendTo(e); $("
").text('기본요금').appendTo(container); $("
").text(Globalize.format(v.data.PrimaryPrice, 'c')).appendTo(container); } } }, { dataField: 'BemsNoticePriceDetail', caption: '상세정보', cellTemplate: function (e, v) { $("
").dxDataGrid({ dataSource: v.value, showRowLines: true, showColumnHeaders: (v.rowIndex == 0) ? true : false, height: 150, paging: { pageSize: 24 }, showColumnLines: false, sorting: { mode: 'none' }, loadPanel: null, editing: { editMode: 'cell', editEnabled: true, }, rowUpdating: function (cellInfo) { Partials.db.BemsNoticePriceDetail.update(cellInfo.key, cellInfo.newData); }, columns: [ { dataField: 'DataId', caption: '구분', customizeText: function (cellInfo) { switch (cellInfo.value) { case 0: return '상수도'; case 1: return '하수도'; } return '-'; } }, { dataField: 'P01', caption: '1 ~ 15㎥', format: 'currency', precision: 1 }, { dataField: 'P02', caption: '16 ~ 30㎥', format: 'currency', precision: 1 }, { dataField: 'P03', caption: '31 ~ 50㎥', format: 'currency', precision: 1 }, { dataField: 'P04', caption: '51 ~ 100㎥', format: 'currency', precision: 1 }, { dataField: 'P05', caption: '101 ~ 200㎥', format: 'currency', precision: 1 }, { dataField: 'P06', caption: '201 ~ 300㎥', format: 'currency', precision: 1 }, { dataField: 'P07', caption: '301 ~ 1000㎥', format: 'currency', precision: 1 }, { dataField: 'P08', caption: '1000㎥ ~', format: 'currency', precision: 1 }, ] }).appendTo(e);; } } ] } ]; var applyDataSource = new DevExpress.data.DataSource({ store: Partials.db.BemsNoticePrice, paginate: false, map: function (item) { item.DisplayDate = moment(item.ApplyDate).format('YYYY년 MM월 DD일'); return item; }, filter: [ ["SiteId", "=", 1], ["FuelTypeId", "=", selectedTab() + 1] ], sort: { field: 'ApplyDate', desc: true } }); selectedTab.subscribe(function (e) { applyDataSource.filter([ ["SiteId", "=", 1], ["FuelTypeId", "=", selectedTab() + 1] ]); applyDataSource.load().done(function (result) { $("#applyDate").dxSelectBox("instance").option({ dataSource: result }); selectedValue(result[0].ApplyDate); var date = result[0].ApplyDate dataSource.filter([ ["SiteId", "=", 1], ["FuelTypeId", "=", e + 1], ["year(ApplyDate)", "=", date.getFullYear()], ["month(ApplyDate)", "=", date.getMonth() + 1], ["day(ApplyDate)", "=", date.getDate()], ]); $("#gridContainer").dxDataGrid("instance").option(gridOptions[e]); }) }); var viewModel = { selectedValue: selectedValue, selectedTab: selectedTab, viewShown: function () { applyDataSource.load().done(function (result) { $("#applyDate").dxSelectBox("instance").option({ dataSource: result, }); selectedValue(result[0].ApplyDate); var date = result[0].ApplyDate; dataSource.filter([ ["SiteId", "=", 1], ["FuelTypeId", "=", selectedTab() + 1], ["year(ApplyDate)", "=", date.getFullYear()], ["month(ApplyDate)", "=", date.getMonth() + 1], ["day(ApplyDate)", "=", date.getDate()], ]); $("#gridContainer").dxDataGrid("instance").option(gridOptions[selectedTab()]); }) }, applyOption: { displayExpr: 'DisplayDate', valueExpr: 'ApplyDate', value: selectedValue, onSelectionChanged: function (e) { if (e.selectedItem) { var date = e.selectedItem.ApplyDate; dataSource.filter([ ["SiteId", "=", 1], ["FuelTypeId", "=", selectedTab() + 1], ["year(ApplyDate)", "=", date.getFullYear()], ["month(ApplyDate)", "=", date.getMonth() + 1], ["day(ApplyDate)", "=", date.getDate()], ]); $("#gridContainer").dxDataGrid("instance").option(gridOptions[selectedTab()]); } } }, createOption: { dataSource: [{ value: 0, subject: "복사하여 생성" }, { value: 1, subject: '새롭게 생성' }], visible: ko.observable(false), width: 300, height: 'auto', title: '어떻게 생성 하시겠습니까?', shading: true, showTitle: true, target: '#create', itemClick: function (e) { this.createOption.visible(false); this.createPopupOption.howTo = e.itemData; this.createPopupOption.visible(true); } }, createPopupOption: { visible: ko.observable(false), howTo: {}, date: ko.observable(new Date()), width: 400, height:180, shading: true, showTitle: true, dragEnabled: false, title: '시행일자를 선택해 주세요.', buttons: [ { toolbar: 'bottom', location: 'after', widget: 'button', options: { text: '확인', clickAction: function () { viewModel.createPopupOption.visible(false); var applyDate = viewModel.createPopupOption.date(); var fuelTypeId = selectedTab() + 1; // 데이터 생성 switch (viewModel.createPopupOption.howTo.value) { case 0: var refDate = moment(selectedValue()).format('YYYY-MM-DD'); Partials.api.post("BemsNoticePrice", { SiteId: 1, FuelTypeId: fuelTypeId, ApplyDate: applyDate }, { ref: refDate }).done(function (result) { viewModel.viewShown(); }); break; case 1: Partials.api.post("BemsNoticePrice", { SiteId: 1, FuelTypeId: fuelTypeId, ApplyDate: applyDate }).done(function (result) { viewModel.viewShown(); }); break; } } } } ], shownAction: function () { } } }; return viewModel; };