Отчет о движении денежных средств относится к отчету, который отражает приток и отток денежных средств и их эквивалентов предприятия в течение определенного отчетного периода. Отчет о движении денежных средств — это один из трех основных отчетов финансовой отчетности предприятия (два других — баланс и отчет о прибылях и убытках). Чтобы всесторонне и систематически раскрыть финансовое состояние, результаты деятельности и движение денежных средств предприятия в определенный период, финансовая отчетность должна быть составлена ​​в соответствии с типовым форматом стандартов бухгалтерского учета Министерства финансов. Финансовая отчетность — это частое обновление данных, множество измерений анализа и сложные источники данных, поэтому обычным инструментам отчетности трудно одновременно удовлетворить все вышеперечисленные потребности. В этом блоге вы узнаете, как создать календарь движения денежных средств во внешнем интерфейсе с помощью электронной таблицы JavaScript в стиле Excel. Этот календарь будет широко использовать следующие мощные функции:

1. Формула динамического массива — возвращает несколько результатов в диапазон ячеек на основе формулы. В этом примере используются функции SEQUENCE и FILTER.
2. RANGEBLOCKSPARKLINE(template_range, data_expr) — эта спарклайн позволяет разработчикам определить шаблон диапазона ячеек (template_range) как один тип ячейки и применить шаблон к ячейке для загрузки набора данных (data_expr) в шаблон. Шаблон может включать несколько строк и/или столбцов.

Конечный эффект показан на рисунке:

Нажмите здесь, чтобы загрузить полный пример。

Чтобы создать календарь движения денежных средств, нам нужно создать три таблицы, как описано ниже:

1. таблица источника данных
2. таблица шаблонов
3. Календарь движения денежных средств: визуализированная таблица

таблица источника данных

Источником данных для нашего примера является список транзакций.

Мы создали более динамичную таблицу, в которой мы можем ссылаться на Таблицу 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. Нажмите меню «Шаблон» на вкладке «Данные» — справа появится панель «Список полей».
2. Наведите курсор на ветку «Пуск» и добавьте поля, нажав зеленую кнопку + *Обратите внимание, что вы можете удалять поля с помощью кнопки «x» и изменять их с помощью настроек, расположенных справа от ветки.
3. Перетащите поля в нужные ячейки диапазона шаблона.

Чтобы покрасить дни с недостатком денежных средств (отрицательным конечным остатком) красным, дни с положительным конечным остатком - зеленым, а нейтральные - черным, мы можем использовать условное форматирование. Сделать это можно в конструкторе:

1. Выберите ячейки даты «A2:D2» при слиянии.
2. Условное форматирование → Новое правило
3. Обычно введите и выберите формулу, чтобы определить, какие ячейки нужно форматировать.
4. Введите формулу, в нашем случае ='Cell Template'!C6>0
5. Нажмите «Формат» → «Заливка» → «Выбрать зеленый цвет в качестве цвета шрифта».
6. Повторите те же действия, но используйте формулу: ='Cell Template'!C6<0 *Обратите внимание, что для отрицательного баланса цвет должен быть установлен на красный.

Календарь движения денежных средств: визуализированная таблица

Шаг 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)

1. Вкладка «Главная» → раскрывающееся меню «Ячейка» → «Выбор месяца».
2. Справа от команды нажмите...
3. Установите год начала, окончания и высоту сборщика.

Затем при выполнении вычислений мы даем ячейке, содержащей месяц, имя.

1. На вкладке «Формулы» выберите «Диспетчер имен».
2. Во всплывающем окне нажмите кнопку «Новый».
3. Задайте имя ячейки。В нашем примере:name: currentMonth 参考：D2。Вы также можете добавлять комментарии и изменять объекты, на которые ссылаются.

Шаг 2. Создайте календарь движения денежных средств.

Используйте функцию ПОСЛЕДОВАТЕЛЬНОСТЬ(строки,столбцы,начало,шаг) для назначения дат в нашем календаре. Это позволит нам позже получить значение ячейки с помощью CellClick. Формула в ячейке B4:

=SEQUENCE(6,7,currentMonth-WEEKDAY(currentMonth)+1,1)

JavaScript:
cashflowSheet.setFormula(3, 1, '=SEQUENCE(6,7,currentMonth-WEEKDAY(currentMonth)+1,1)');

Мы еще не использовали форматтер для этих ячеек.

Следующий шаг — использовать условное форматирование, чтобы сделать возможными дни, принадлежащие другим месяцам, но выбранный день пуст:

1. Выберите B4:H9 и выберите дату из календаря → Условное форматирование.
2. Выберите новое правило из раскрывающегося списка и выберите «Использовать формулу, чтобы определить, какие ячейки форматировать в качестве типа правила».
3. Введите формулу, в нашем случаедля“=MONTH(B4)<>MONTH(currentMonth)” - Этот формат работает только в ячейках, месяц которых отличается от месяца, выбранного в раскрывающемся списке.
4. нажмите формат
5. Номер → Пользовательский
6. Введите «;;;», поскольку форматтер сделает все правильные ячейки пустыми.

Приведенные ниже шаги включают использование RANGEBLOCKSPARKLINE, который использует диапазон ячеек в TemplateSheet как один тип ячейки, и использование функции OBJECT для применения шаблона ко всем ячейкам, представляющим даты в нашем календаре движения денежных средств.

Поскольку мы используем SEQUENCE для установки значений для этих ячеек, в качестве формата мы будем использовать RANGEBLOCKSPARKLINE.

1. Выберите диапазон ячеек B4:H9.
2. Формат→Дополнительные числовые форматы→Пользовательский
3. Установите форматтер:

=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 Получить данные из.

1. [Дата]: текущее значение ячейки.
2. [Начало]: Сумма всех предыдущих депозитов - Сумма всех предыдущих снятий
3. [Вывод средств]: общая сумма текущих выводов средств.
4. [Депозит]: общий текущий депозит
5. [конец]:[начало] + сумма всех текущих депозитов - сумма всех текущих снятий

Использование формулы привязывается к шаблону диапазона и возвращает его, что упрощает работу с шаблонами диапазонов.

Это окончательный результат:

Как показано на изображении выше, ячейки, содержащие календарные дни, предоставляют информацию о начальном/конечном балансе, общей сумме депозитов и общей сумме снятий.

Шаг 3. Получайте ежедневные предложения Если мы хотим извлечь список всех транзакций со страницы DataSource, мы можем воспользоваться событием SelectionChanged. Когда эти события происходят, рабочие листы в SpreadJS привязывают свои события к конкретным действиям.

В нашем примере мы использовали эту удобную функцию SpreadJS для получения списка всех транзакций, когда пользователь выбирает дату в календаре.

Присвояем имя ячейкам, содержащим выбранные даты, депозиты и выплаты, так как так проще производить расчеты и таблица будет содержать информацию о транзакциях. Шаги по созданию диапазона имен для currentMonth:

1. На вкладке «Формулы» выберите «Диспетчер имен».
2. Во всплывающем окне нажмите кнопку «Новый».
3. Задайте имя ячейки

В нашем примере: имя: текущий выбор; 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 начальный баланс:

1. Депозит: =ЕСЛИОШИБКА(ФИЛЬТР(текущие Депозиты,{1,0,1,1,0}),"")
2. Снятие: =ЕСЛИОШИБКА(ФИЛЬТР(currentWithdrawals,{1,0,1,0,1}),"")

![](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/.