Отчет о движении денежных средств относится к отчету, который отражает приток и отток денежных средств и их эквивалентов предприятия в течение определенного отчетного периода. Отчет о движении денежных средств — это один из трех основных отчетов финансовой отчетности предприятия (два других — баланс и отчет о прибылях и убытках). Чтобы всесторонне и систематически раскрыть финансовое состояние, результаты деятельности и движение денежных средств предприятия в определенный период, финансовая отчетность должна быть составлена в соответствии с типовым форматом стандартов бухгалтерского учета Министерства финансов. Финансовая отчетность — это частое обновление данных, множество измерений анализа и сложные источники данных, поэтому обычным инструментам отчетности трудно одновременно удовлетворить все вышеперечисленные потребности. В этом блоге вы узнаете, как создать календарь движения денежных средств во внешнем интерфейсе с помощью электронной таблицы JavaScript в стиле Excel. Этот календарь будет широко использовать следующие мощные функции:
Конечный эффект показан на рисунке:
Нажмите здесь, чтобы загрузить полный пример。
Чтобы создать календарь движения денежных средств, нам нужно создать три таблицы, как описано ниже:
Источником данных для нашего примера является список транзакций.
Мы создали более динамичную таблицу, в которой мы можем ссылаться на Таблицу 1, когда нам нужны данные, а не диапазоны ячеек.
Эта таблица содержит информацию об идентификаторе транзакции, типе транзакции, дате транзакции, названии компании, имени счета, сумме депозита и снятии средств.
Эта страница содержит ряд шаблонов, которые мы будем использовать для представления транзакций, происходящих в календаре движения денежных средств.
Этот диапазон ячеек будет использоваться в качестве шаблона для ячеек, содержащих необходимую информацию в вашем календаре движения денежных средств.
Первое, что нам нужно сделать, это расположить ячейки, а затем установить путь привязки для ячеек.
Это можно сделать с помощью Javascript, используя метод setBindingPath SpreadJS.
templateSheet.setBindingPath(0, 1, "month");
templateSheet.setBindingPath(1, 2, "date");
templateSheet.setBindingPath(2, 2, "start");
templateSheet.setBindingPath(3, 2, "withdrawals");
templateSheet.setBindingPath(4, 2, "deposits");
templateSheet.setBindingPath(5, 2, "end");
Конечно, есть способ выполнить описанный выше шаг без написания кода — воспользуйтесь дизайнером SpreadJS, загрузите установочный пакет SpreadJS и в скачанном установочном пакете найдите дизайнер по пути «\SpreadJS.Release.x.x.x\Designer\». Пакет установки Designer Runtime», после завершения установки выполните следующие действия:
Чтобы покрасить дни с недостатком денежных средств (отрицательным конечным остатком) красным, дни с положительным конечным остатком - зеленым, а нейтральные - черным, мы можем использовать условное форматирование. Сделать это можно в конструкторе:
Шаг 1. Добавьте элемент MonthPicker. Первым элементом нашего календаря является переменный элемент месяца. Чтобы добавить его, используйте MonthPicker, стиль раскрывающегося списка в SpreadJS.
JavaScript:
var monthPickerStyle = new GC.Spread.Sheets.Style();
monthPickerStyle.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.monthPicker,
option: {
startYear: 2019,
stopYear: 2021,
height: 300,
}
}
];
sheet.setStyle(2, 5, monthPickerStyle);
Дизайнер: Выберите ячейку (в нашем случае B2)
Затем при выполнении вычислений мы даем ячейке, содержащей месяц, имя.
Используйте функцию ПОСЛЕДОВАТЕЛЬНОСТЬ(строки,столбцы,начало,шаг) для назначения дат в нашем календаре. Это позволит нам позже получить значение ячейки с помощью CellClick. Формула в ячейке B4:
=SEQUENCE(6,7,currentMonth-WEEKDAY(currentMonth)+1,1)
JavaScript:
cashflowSheet.setFormula(3, 1, '=SEQUENCE(6,7,currentMonth-WEEKDAY(currentMonth)+1,1)');
Мы еще не использовали форматтер для этих ячеек.
Следующий шаг — использовать условное форматирование, чтобы сделать возможными дни, принадлежащие другим месяцам, но выбранный день пуст:
Приведенные ниже шаги включают использование RANGEBLOCKSPARKLINE, который использует диапазон ячеек в TemplateSheet как один тип ячейки, и использование функции OBJECT для применения шаблона ко всем ячейкам, представляющим даты в нашем календаре движения денежных средств.
Поскольку мы используем SEQUENCE для установки значений для этих ячеек, в качестве формата мы будем использовать RANGEBLOCKSPARKLINE.
=RANGEBLOCKSPARKLINE('Cell Template'!$A$2:$D$7,OBJECT("date",@,"start",IFERROR(SUM(FILTER(Table1[Deposit],Table1[Date]<@))-SUM(FILTER(Table1[Withdrawal],Table1[Date]<@)),0),"withdrawals",IFERROR(SUM(FILTER(Table1[Withdrawal],Table1[Date]=@)),0),"deposits",IFERROR(SUM(FILTER(Table1[Deposit],Table1[Date]=@)),0),"month",MONTH($A$2)))
В качестве первого аргумента он принимает диапазон ячеек в качестве шаблона в TemplateSheet.
В качестве второго параметра он принимает ОБЪЕКТ, OBJECT Из расположенной в таблице источника данныхиз Table1 Получить данные из.
Использование формулы привязывается к шаблону диапазона и возвращает его, что упрощает работу с шаблонами диапазонов.
Это окончательный результат:
Как показано на изображении выше, ячейки, содержащие календарные дни, предоставляют информацию о начальном/конечном балансе, общей сумме депозитов и общей сумме снятий.
Шаг 3. Получайте ежедневные предложения Если мы хотим извлечь список всех транзакций со страницы DataSource, мы можем воспользоваться событием SelectionChanged. Когда эти события происходят, рабочие листы в SpreadJS привязывают свои события к конкретным действиям.
В нашем примере мы использовали эту удобную функцию SpreadJS для получения списка всех транзакций, когда пользователь выбирает дату в календаре.
Присвояем имя ячейкам, содержащим выбранные даты, депозиты и выплаты, так как так проще производить расчеты и таблица будет содержать информацию о транзакциях. Шаги по созданию диапазона имен для currentMonth:
В нашем примере: имя: текущий выбор; to: ='Cash-Flow'!B11
имя: текущий депозит; to: =FILTER(tblTransactions[Type]:tblTransactions[Withdrawal],(tblTransactions[Date]=CurrentSelection)*(tblTransactions[Deposit]>0))
имя: текущий вывод; to: =FILTER(tblTransactions[Type]:tblTransactions[Withdrawal],(tblTransactions[Date]=CurrentSelection)*(tblTransactions[Withdrawal]>0))
Настройте различные формулы, чтобы получить список всех депозитов, список всех снятий, конечных и начальных балансов.
1. Стартовый баланс (сумма всех предыдущих депозитов) - Все предыдущие выплатыизобщийи):=IFERROR((SUM(FILTER(tblTransactions[Deposit],tblTransactions[Date]<$B$11))-SUM(FILTER(tblTransactions[Withdrawal],tblTransactions [дата]<$B$11))),0)
2. конечный баланс (начальный баланс + Текущие депозитывсего - Текущий вывод (общий вывод): =ЕСЛИОШИБКА(D13+(СУММА(ФИЛЬТР(tblTransactions[Депозит],tblTransactions[Дата]=$B$11))-SUM(ФИЛЬТР(tblTransactions[Вывод]) ,tblTransactions[date]=$B$11))),0)```
в D13 начальный баланс:
![](https://img2022.cnblogs.com/blog/139239/202210/139239-20221018232814572-876221459.png)
В настоящее время добавлено вручную текущий выбор. Чтобы внести изменения на основе даты пользователя, перейдите к следующему шагу.
существовать JavaScript Создайте функцию обработчика событий (см. ниже):
// on day selection, update a cell used in filtering the data to show detailed transaction list cashflowSheet.bind(GC.Spread.Sheets.Events.SelectionChanged, function (sender, args) { const sheet = args.sheet; const row = args.newSelections[0].row; const col = args.newSelections[0].col;
if ((row < 3 || row >= 3 + 6)
|| (col < 1 || col >= 1 + 7))
return;
// set the current date cell so that FILTER would update.
sheet.setValue(10, 1, sheet.getValue(row, col));
});
Как только пользователь нажимает на ячейку,Приведенный выше код проверит, находится ли ячейка в границах календаря. (Б4:Н9). В противном случае он обновится currentSelection,поэтому,Все используется для достижения балансаи Информация о транзакцияхиз Все формулысуществоватьони указывают на измененияиз选定дата时给出正确изрезультат。
Узнать больше демонстрационных примеров :https://demo.grapecity.com.cn/spreadjs/gc-sjs-samples/index.html
Мобильная версия: http://demo.grapecity.com.cn/spreadjs/mobilesample/.