@pisell/private-materials 3.4.81 → 3.4.83

package/es/plus/pisellSalesManagement/hooks/useBookingPerspective.js

@@ -0,0 +1,651 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { useCallback, useMemo } from 'react';
+import { PisellDateTimeDisplay, PisellTimeRangeDisplay } from '@pisell/materials';
+import { locales } from '@pisell/utils';
+import ClientName from "../../clientName";
+import { BOOKING_STATUS_COLOR_MAP, getFilterButtonList, getBookingStatusMap, getBookingPlatformMap, getBookingHeaderLabels, getSortList } from "../config/booking";
+import { getPaymentStatusMap, PAYMENT_STATUS_COLOR_MAP } from "../config/order";
+import { getBusinessLabelMap, BUSINESS_COLOR_MAP } from "../config";
+import { Tag, formatAmount, getDisplayLines, textStyles, buildDateTime, normalizeList, parseJson, formatPhone } from "./perspectiveUtils";
+import useEngineContext from "../../../hooks/useEngineContext";
+import BookingNotesPreview from "../components/BookingNotesPreview";
+import BookingFormsPreview from "../components/BookingFormsPreview";
+import { createNoteApis } from "../serve";
+function getBookingType(record) {
+  var _record$metadata;
+  if (record !== null && record !== void 0 && (_record$metadata = record.metadata) !== null && _record$metadata !== void 0 && _record$metadata.multiple_resource_flag) {
+    return 'pisell2';
+  }
+  if (record.parent_id > 0 && record.item_type !== 'recurring_booking') {
+    return 'pisell2';
+  }
+  return 'pisell1';
+}
+export var useBookingPerspective = function useBookingPerspective(params) {
+  var _context$appHelper, _context$engine;
+  var context = useEngineContext();
+  var utils = context === null || context === void 0 || (_context$appHelper = context.appHelper) === null || _context$appHelper === void 0 ? void 0 : _context$appHelper.utils;
+  /** 监听 locale，切换语言时重新计算 label/filter/sort 等文案 */
+  var locale = context === null || context === void 0 || (_context$engine = context.engine) === null || _context$engine === void 0 || (_context$engine = _context$engine.props) === null || _context$engine === void 0 ? void 0 : _context$engine.locale;
+
+  /**
+   * 静态部分：label maps、uniqueTables 等重计算量大的数据，
+   * 仅在 relationTables 变化时重新计算。
+   */
+  var staticData = useMemo(function () {
+    var BOOKING_STATUS_LABEL_MAP = getBookingStatusMap();
+    var BOOKING_PLATFORM_LABEL_MAP = getBookingPlatformMap();
+    var PAYMENT_STATUS_LABEL_MAP = getPaymentStatusMap();
+    var BUSINESS_LABEL_MAP = getBusinessLabelMap();
+    var bookingLabels = getBookingHeaderLabels();
+    var _ref = params || {},
+      relationTables = _ref.relationTables;
+    var _relationTables = (relationTables || []).filter(function (item) {
+      return ['appointment_booking', 'ticket', 'party_room', 'therapist', 'table-order', 'voucher_ticket', 'mobile_order'].includes(item.relation_type);
+    });
+    var uniqueTables = _relationTables.reduce(function (pre, cur) {
+      var exists = pre.some(function (obj) {
+        return obj.form_id === cur.form_id;
+      });
+      if (!exists) {
+        pre.push(cur);
+      }
+      return pre;
+    }, []);
+    return {
+      BOOKING_STATUS_LABEL_MAP: BOOKING_STATUS_LABEL_MAP,
+      BOOKING_PLATFORM_LABEL_MAP: BOOKING_PLATFORM_LABEL_MAP,
+      PAYMENT_STATUS_LABEL_MAP: PAYMENT_STATUS_LABEL_MAP,
+      BUSINESS_LABEL_MAP: BUSINESS_LABEL_MAP,
+      bookingLabels: bookingLabels,
+      uniqueTables: uniqueTables
+    };
+  }, [params === null || params === void 0 ? void 0 : params.relationTables, locale]);
+  var buildColumns = useCallback(function (ctx) {
+    var BOOKING_STATUS_LABEL_MAP = staticData.BOOKING_STATUS_LABEL_MAP,
+      BOOKING_PLATFORM_LABEL_MAP = staticData.BOOKING_PLATFORM_LABEL_MAP,
+      PAYMENT_STATUS_LABEL_MAP = staticData.PAYMENT_STATUS_LABEL_MAP,
+      BUSINESS_LABEL_MAP = staticData.BUSINESS_LABEL_MAP,
+      bookingLabels = staticData.bookingLabels,
+      uniqueTables = staticData.uniqueTables;
+    return [{
+      title: bookingLabels.bookingBrief,
+      key: 'booking_brief',
+      width: 225,
+      render: function render(_, record) {
+        var _record$order, _record$order2, _record$order3;
+        var startAt = buildDateTime(record === null || record === void 0 ? void 0 : record.start_date, record === null || record === void 0 ? void 0 : record.start_time) || (record === null || record === void 0 ? void 0 : record.start_at);
+        var status = record === null || record === void 0 ? void 0 : record.appointment_status;
+        var statusLabel = BOOKING_STATUS_LABEL_MAP[status] || status || '-';
+        var statusColor = BOOKING_STATUS_COLOR_MAP[status] || '';
+        var orderNote = record === null || record === void 0 || (_record$order = record.order) === null || _record$order === void 0 ? void 0 : _record$order.note;
+        var internalNotes = record === null || record === void 0 ? void 0 : record.notes;
+        var noteApis = createNoteApis(record === null || record === void 0 || (_record$order2 = record.order) === null || _record$order2 === void 0 ? void 0 : _record$order2.id);
+        return /*#__PURE__*/React.createElement("div", {
+          style: {
+            display: 'flex',
+            flexDirection: 'column'
+          }
+        }, /*#__PURE__*/React.createElement(ClientName, {
+          dataSource: record === null || record === void 0 || (_record$order3 = record.order) === null || _record$order3 === void 0 ? void 0 : _record$order3.customer
+        }), startAt ? /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
+          value: startAt,
+          layout: "inline",
+          textAlign: "left",
+          timeFormat: {
+            padHour: true
+          },
+          dateFormat: {
+            order: 'DMY',
+            showYear: false,
+            shortMonth: true,
+            showRelativeDay: true,
+            useCommaBeforeYear: false
+          },
+          fields: {
+            fieldOrder: ['time', 'weekday', 'date']
+            // inlineSeparators: [' ', ', '],
+          }
+        }) : null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Tag, {
+          style: {
+            backgroundColor: statusColor,
+            whiteSpace: 'nowrap',
+            border: 'none',
+            fontWeight: 500
+          }
+        }, statusLabel)), /*#__PURE__*/React.createElement(BookingNotesPreview, {
+          dataSource: {
+            note: orderNote,
+            internalNotes: internalNotes,
+            apis: noteApis,
+            bookingId: record === null || record === void 0 ? void 0 : record.id,
+            onChange: function onChange(value, type, noteType) {
+              ctx.refresh();
+            }
+          },
+          labels: {
+            orderNote: bookingLabels.orderNote,
+            internalNote: bookingLabels.internalNote,
+            more: bookingLabels.more
+          },
+          style: {
+            maxWidth: 160
+          }
+        }));
+      }
+    }, {
+      title: bookingLabels.serviceTime,
+      key: 'service_time',
+      align: 'center',
+      width: 165,
+      render: function render(_, record) {
+        var startAt = buildDateTime(record === null || record === void 0 ? void 0 : record.start_date, record === null || record === void 0 ? void 0 : record.start_time) || (record === null || record === void 0 ? void 0 : record.start_at);
+        var endAt = buildDateTime(record === null || record === void 0 ? void 0 : record.end_date, record === null || record === void 0 ? void 0 : record.end_time) || (record === null || record === void 0 ? void 0 : record.end_at);
+        if (!startAt || !endAt) {
+          return null;
+        }
+        return /*#__PURE__*/React.createElement("div", {
+          style: {
+            textAlign: 'center'
+          }
+        }, /*#__PURE__*/React.createElement(PisellTimeRangeDisplay, {
+          startAt: startAt,
+          endAt: endAt
+        }));
+      },
+      uniformCompare: function uniformCompare(_, record) {
+        var _record$start_date = record.start_date,
+          start_date = _record$start_date === void 0 ? '' : _record$start_date,
+          _record$start_time = record.start_time,
+          start_time = _record$start_time === void 0 ? '' : _record$start_time,
+          _record$end_date = record.end_date,
+          end_date = _record$end_date === void 0 ? '' : _record$end_date,
+          _record$end_time = record.end_time,
+          end_time = _record$end_time === void 0 ? '' : _record$end_time;
+        return "".concat(start_date).concat(start_time).concat(end_date).concat(end_time);
+      }
+    }, {
+      title: bookingLabels.customer,
+      key: 'customer',
+      align: 'center',
+      width: 150,
+      uniformCompare: function uniformCompare(_, record) {
+        var value = record.order;
+        var customer = value === null || value === void 0 ? void 0 : value.customer;
+        if (!customer) return '-';
+        var guestCode = customer === null || customer === void 0 ? void 0 : customer.guest_code;
+        if (guestCode) return "".concat(guestCode);
+        if (customer.user_id === 1) return 'walk-in'; // 返回任意固定值即可
+        return customer;
+      },
+      render: function render(_, record) {
+        var value = record.order;
+        var customer = value === null || value === void 0 ? void 0 : value.customer;
+        var guestCode = customer === null || customer === void 0 ? void 0 : customer.guest_code;
+        if (guestCode) {
+          return /*#__PURE__*/React.createElement("div", {
+            style: {
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              textAlign: 'center'
+            }
+          }, /*#__PURE__*/React.createElement("div", {
+            style: {
+              fontWeight: 'bold'
+            }
+          }, bookingLabels.guest));
+        }
+        var phone = formatPhone((customer === null || customer === void 0 ? void 0 : customer.phone) || (record === null || record === void 0 ? void 0 : record.phone), (customer === null || customer === void 0 ? void 0 : customer.country_calling_code) || (record === null || record === void 0 ? void 0 : record.country_calling_code));
+        var email = customer === null || customer === void 0 ? void 0 : customer.email;
+        var lines = getDisplayLines([phone, email]);
+        return /*#__PURE__*/React.createElement("div", {
+          style: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            textAlign: 'center'
+          }
+        }, /*#__PURE__*/React.createElement(ClientName, {
+          dataSource: customer,
+          style: {
+            fontSize: 14
+          }
+        }), lines.map(function (line, index) {
+          return /*#__PURE__*/React.createElement("div", {
+            key: "".concat(line, "-").concat(index),
+            style: textStyles.text
+          }, line);
+        }));
+      }
+    }, {
+      title: bookingLabels.contact,
+      key: 'contact',
+      align: 'center',
+      width: 150,
+      uniformCompare: function uniformCompare(_, record) {
+        var value = record.order;
+        var contactValue = value === null || value === void 0 ? void 0 : value.contacts_info;
+        if (!contactValue) return '-';
+        return contactValue;
+      },
+      render: function render(_, record) {
+        var value = record.order;
+        var contactValue = value === null || value === void 0 ? void 0 : value.contacts_info;
+        if (!contactValue) return '-';
+        var phone = formatPhone(contactValue === null || contactValue === void 0 ? void 0 : contactValue.phone);
+        var lines = getDisplayLines([phone, contactValue === null || contactValue === void 0 ? void 0 : contactValue.email]);
+        return /*#__PURE__*/React.createElement("div", {
+          style: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            textAlign: 'center'
+          }
+        }, /*#__PURE__*/React.createElement(ClientName, {
+          dataSource: contactValue,
+          style: {
+            fontSize: 14
+          }
+        }), lines.map(function (line, index) {
+          return /*#__PURE__*/React.createElement("div", {
+            key: "".concat(line, "-").concat(index),
+            style: textStyles.text
+          }, line);
+        }));
+      }
+    }, {
+      title: bookingLabels.holder,
+      dataIndex: 'holder_data',
+      key: 'holder_data',
+      align: 'center',
+      width: 110,
+      uniformCompare: function uniformCompare(value, record) {
+        if (!value) return '-';
+        return value;
+      },
+      render: function render(value, record) {
+        var _holderValue$data;
+        if (!value) return '-';
+        var holderValue = Array.isArray(value) ? value[0] : value;
+        if (!holderValue) return '-';
+        var holderPhone;
+        if (holderValue !== null && holderValue !== void 0 && (_holderValue$data = holderValue.data) !== null && _holderValue$data !== void 0 && _holderValue$data.customer_phone) {
+          holderPhone = formatPhone(holderValue === null || holderValue === void 0 ? void 0 : holderValue.phone);
+        }
+        var lines = getDisplayLines([holderPhone]);
+        return /*#__PURE__*/React.createElement("div", {
+          style: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            textAlign: 'center'
+          }
+        }, /*#__PURE__*/React.createElement(ClientName, {
+          dataSource: {
+            display_name: holderValue.main_field
+          },
+          style: {
+            fontSize: 14
+          }
+        }), lines.map(function (line, index) {
+          return /*#__PURE__*/React.createElement("div", {
+            key: "".concat(line, "-").concat(index),
+            style: textStyles.text
+          }, line);
+        }));
+      }
+    }, {
+      title: bookingLabels.services,
+      key: 'services',
+      align: 'center',
+      width: 120,
+      render: function render(_, record) {
+        var detail = parseJson(record === null || record === void 0 ? void 0 : record.order_detail);
+        var items = normalizeList(detail);
+        var displayItems = items.slice(0, 3);
+        var moreCount = items.length - displayItems.length;
+        var lines = displayItems.map(function (item) {
+          var title = utils.translation(item.product_title);
+          var qty = item === null || item === void 0 ? void 0 : item.product_quantity;
+          if (!title) return null;
+          return qty ? "".concat(title, " x").concat(qty) : String(title);
+        }).filter(function (item) {
+          return item;
+        });
+        if (moreCount > 0) {
+          lines.push("+".concat(moreCount, " ").concat(bookingLabels.more));
+        }
+        if (lines.length === 0) return null;
+        return /*#__PURE__*/React.createElement("div", {
+          style: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            textAlign: 'center'
+          }
+        }, lines.map(function (line, index) {
+          return /*#__PURE__*/React.createElement("div", {
+            key: "".concat(line, "-").concat(index),
+            style: textStyles.text
+          }, line);
+        }));
+      },
+      uniformCompare: function uniformCompare(_value, record) {
+        return (record === null || record === void 0 ? void 0 : record.order_detail) || '';
+      }
+    }, {
+      title: bookingLabels.pax,
+      dataIndex: 'number',
+      key: 'number',
+      align: 'center',
+      width: 110,
+      render: function render(_, record) {
+        var count = record === null || record === void 0 ? void 0 : record.number;
+        return /*#__PURE__*/React.createElement("span", {
+          style: _objectSpread(_objectSpread({}, textStyles.text), {}, {
+            textAlign: 'center'
+          })
+        }, count !== null && count !== void 0 ? count : '-');
+      }
+    }, {
+      title: bookingLabels.resource,
+      dataIndex: 'relation_form_name',
+      key: 'relation_form_name',
+      align: 'center',
+      width: 100,
+      render: function render(value) {
+        if (!value) return '-';
+        return /*#__PURE__*/React.createElement("div", {
+          style: textStyles.text
+        }, value);
+      }
+    }, {
+      title: bookingLabels.forms,
+      key: 'appointment_form',
+      // width: 128,
+      align: 'center',
+      render: function render(_, record) {
+        var _record$order4;
+        return /*#__PURE__*/React.createElement(BookingFormsPreview, {
+          value: record === null || record === void 0 ? void 0 : record.appointment_form,
+          uniqueTables: uniqueTables,
+          bookingLabels: bookingLabels,
+          textStyles: textStyles,
+          relationId: record.parent_id || record.id,
+          relationType: record.item_type,
+          customer: (_record$order4 = record.order) === null || _record$order4 === void 0 ? void 0 : _record$order4.customer
+        });
+      }
+    }, {
+      title: bookingLabels.orderInfo,
+      key: 'order_info',
+      width: 124,
+      align: 'center',
+      render: function render(_, record) {
+        var order = (record === null || record === void 0 ? void 0 : record.order) || {};
+        var orderCode = order === null || order === void 0 ? void 0 : order.shop_full_order_number;
+        var totalAmount = order === null || order === void 0 ? void 0 : order.total_amount;
+        var currencySymbol = order === null || order === void 0 ? void 0 : order.currency_symbol;
+        var paymentStatus = order === null || order === void 0 ? void 0 : order.payment_status;
+        var paymentLabel = PAYMENT_STATUS_LABEL_MAP[paymentStatus] || '-';
+        var paymentColor = PAYMENT_STATUS_COLOR_MAP[paymentStatus] || '';
+        return /*#__PURE__*/React.createElement("div", {
+          style: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-start'
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          style: {
+            fontWeight: 600,
+            textDecoration: 'underline',
+            color: 'var(--theme-color, #7f56d9)'
+          }
+        }, orderCode || '-'), totalAmount != null ? /*#__PURE__*/React.createElement("div", {
+          style: textStyles.text
+        }, formatAmount(totalAmount, currencySymbol)) : null, paymentLabel ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Tag, {
+          style: {
+            backgroundColor: paymentColor,
+            whiteSpace: 'nowrap',
+            border: 'none',
+            fontWeight: 500
+          }
+        }, paymentLabel)) : null);
+      }
+    }, {
+      title: bookingLabels.bookingId,
+      dataIndex: 'booking_id',
+      key: 'booking_id',
+      align: 'center',
+      width: 120,
+      render: function render(value) {
+        return /*#__PURE__*/React.createElement("span", {
+          style: _objectSpread(_objectSpread({}, textStyles.text), {}, {
+            textAlign: 'center',
+            fontSize: 14,
+            fontWeight: 400
+          })
+        }, value);
+      }
+    }, {
+      title: bookingLabels.orderOrigin,
+      key: 'order_origin',
+      width: 160,
+      align: 'center',
+      render: function render(_, record) {
+        var _record$order5, _record$order6, _record$order7, _record$order8, _record$order9, _record$order10;
+        var businessKey = (record === null || record === void 0 || (_record$order5 = record.order) === null || _record$order5 === void 0 ? void 0 : _record$order5.business_code) || (record === null || record === void 0 ? void 0 : record.business_code);
+        var businessLabel = BUSINESS_LABEL_MAP[businessKey];
+        var channel = BOOKING_PLATFORM_LABEL_MAP[record === null || record === void 0 || (_record$order6 = record.order) === null || _record$order6 === void 0 ? void 0 : _record$order6.order_sales_channel] || BOOKING_PLATFORM_LABEL_MAP[record === null || record === void 0 ? void 0 : record.order_platform] || BOOKING_PLATFORM_LABEL_MAP[record === null || record === void 0 || (_record$order7 = record.order) === null || _record$order7 === void 0 ? void 0 : _record$order7.order_platform] || (record === null || record === void 0 || (_record$order8 = record.order) === null || _record$order8 === void 0 ? void 0 : _record$order8.order_sales_channel) || (record === null || record === void 0 ? void 0 : record.order_platform);
+        var device = (record === null || record === void 0 ? void 0 : record.device_name) || (record === null || record === void 0 ? void 0 : record.device) || (record === null || record === void 0 ? void 0 : record.terminal);
+        var time = (record === null || record === void 0 ? void 0 : record.created_at) || (record === null || record === void 0 || (_record$order9 = record.order) === null || _record$order9 === void 0 ? void 0 : _record$order9.created_at);
+        var actor = (record === null || record === void 0 || (_record$order10 = record.order) === null || _record$order10 === void 0 ? void 0 : _record$order10.create_account) || (record === null || record === void 0 ? void 0 : record.create_account) || (record === null || record === void 0 ? void 0 : record.operator_name);
+        var lines = getDisplayLines([channel, device]);
+        return /*#__PURE__*/React.createElement("div", {
+          style: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-start'
+          }
+        }, businessLabel ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Tag, {
+          color: BUSINESS_COLOR_MAP[businessKey],
+          style: {
+            color: 'black',
+            fontWeight: 500
+          }
+        }, businessLabel)) : null, lines.map(function (line, index) {
+          return /*#__PURE__*/React.createElement("div", {
+            key: "".concat(line, "-").concat(index),
+            style: textStyles.text
+          }, line);
+        }), actor ? /*#__PURE__*/React.createElement("div", {
+          style: _objectSpread({
+            display: 'flex',
+            alignItems: 'center'
+          }, textStyles.text)
+        }, /*#__PURE__*/React.createElement("span", null, bookingLabels.createdBy, ":"), /*#__PURE__*/React.createElement(ClientName, {
+          dataSource: actor,
+          style: {
+            fontSize: 12
+          }
+        })) : null, /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
+          value: time,
+          layout: "inline",
+          textAlign: "left",
+          timeFormat: {
+            padHour: true
+          },
+          dateFormat: {
+            order: 'DMY',
+            showYear: false,
+            shortMonth: true,
+            showRelativeDay: true,
+            useCommaBeforeYear: false
+          },
+          fields: {
+            fieldOrder: ['time', 'weekday', 'date']
+            // inlineSeparators: [' ', ', '],
+          },
+          style: {
+            whiteSpace: 'nowrap'
+          }
+        }));
+      }
+    }, {
+      title: bookingLabels.updated,
+      key: 'updated',
+      width: 132,
+      align: 'center',
+      render: function render(_, record) {
+        var _record$order11;
+        var time = (record === null || record === void 0 ? void 0 : record.updated_at) || (record === null || record === void 0 || (_record$order11 = record.order) === null || _record$order11 === void 0 ? void 0 : _record$order11.updated_at);
+        var channel = BOOKING_PLATFORM_LABEL_MAP[record === null || record === void 0 ? void 0 : record.order_platform] || (record === null || record === void 0 ? void 0 : record.order_platform);
+        var lines = getDisplayLines([channel]);
+        return /*#__PURE__*/React.createElement("div", {
+          style: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-start'
+          }
+        }, /*#__PURE__*/React.createElement(PisellDateTimeDisplay, {
+          value: time,
+          layout: "inline",
+          textAlign: "left",
+          timeFormat: {
+            padHour: true
+          },
+          dateFormat: {
+            order: 'DMY',
+            showYear: false,
+            shortMonth: true,
+            showRelativeDay: true,
+            useCommaBeforeYear: false
+          },
+          fields: {
+            fieldOrder: ['time', 'weekday', 'date']
+            // inlineSeparators: [' ', ', '],
+          },
+          style: {
+            whiteSpace: 'nowrap'
+          }
+        }), lines.map(function (line, index) {
+          return /*#__PURE__*/React.createElement("div", {
+            key: "".concat(line, "-").concat(index),
+            style: textStyles.text
+          }, line);
+        }));
+      }
+    }];
+  }, [staticData]);
+
+  /**
+   * 最终 perspective 配置：
+   * - 使用 getChildComponentProps 工厂函数，在运行时接收 ctx 后构建完整配置。
+   * - onRow 中通过 ctx.refresh() 实现弹窗关闭后刷新列表。
+   * - columns 中通过 ctx.refresh() 实现备注编辑后刷新列表。
+   */
+  var _perspective = useMemo(function () {
+    return {
+      key: 'monitor',
+      label: 'Monitor',
+      getChildComponentProps: function getChildComponentProps(ctx) {
+        return {
+          grid: {
+            bordered: true,
+            collapseUniformColumns: true,
+            columns: buildColumns(ctx),
+            defaultHiddenColumnKeys: ['order_origin', 'updated'],
+            scroll: {
+              // x: '1800px',
+              x: 'max-content',
+              autoCalc: true,
+              scrollToFirstRowOnChange: true
+            },
+            rowSelection: false,
+            onRow: function onRow(record) {
+              return {
+                onClick: function onClick() {
+                  var _record$order12, _record$order13;
+                  if (!record.id) return;
+                  var time = new Date();
+                  utils === null || utils === void 0 || utils.action({
+                    type: 'pisell1.bookingDetail',
+                    data: {
+                      component_type: getBookingType(record),
+                      booking_id: record.order.id,
+                      type: record.parent_id === 0 ? 'list' : 'detail',
+                      id: record.id,
+                      isParallelResourcesBooking: record.relation_id === 0 && record.relation_type === '',
+                      preliminaryBookingDetail: {
+                        customer: record === null || record === void 0 || (_record$order12 = record.order) === null || _record$order12 === void 0 ? void 0 : _record$order12.customer,
+                        id: record.order.id,
+                        order_sales_channel: record === null || record === void 0 || (_record$order13 = record.order) === null || _record$order13 === void 0 ? void 0 : _record$order13.order_sales_channel,
+                        bookings: {
+                          booking_id: record === null || record === void 0 ? void 0 : record.booking_id,
+                          appointment_status: record === null || record === void 0 ? void 0 : record.appointment_status,
+                          list: [{
+                            start_date: record === null || record === void 0 ? void 0 : record.start_date,
+                            start_time: record === null || record === void 0 ? void 0 : record.start_time
+                          }]
+                        }
+                      }
+                    },
+                    callback: function callback(cbParams) {
+                      var _ref2 = cbParams || {},
+                        type = _ref2.type;
+                      // 打开弹窗前会先调用关闭，打开前调用的关闭不需要响应
+                      if (Date.now() - time.getTime() < 500) {
+                        return;
+                      }
+                      if (type === 'close') {
+                        return;
+                      }
+                      ctx.refresh();
+                    }
+                  });
+                }
+              };
+            }
+          },
+          toolBar: {
+            search: {
+              showConfirmButton: false
+            },
+            sort: {
+              list: getSortList()
+            },
+            filter: {
+              hiddenQuickFilter: true,
+              defaultFilterValue: {
+                quickFilter: [],
+                otherFilter: getFilterButtonList(),
+                values: {}
+              }
+            },
+            quickFilter: {
+              filterList: [{
+                type: 'rangePicker',
+                name: 'booking_time_start_between',
+                key: 'bookingTimeStartBetween',
+                props: {
+                  placeholder: locales.getText('pisell2.salesManagement.booking.filter.bookingDate.label'),
+                  showTime: true
+                }
+              }]
+            }
+          },
+          batchActionBar: {
+            overflowThreshold: 2
+          }
+        };
+      }
+    };
+  }, [buildColumns, utils, locale]);
+  return _perspective;
+};

package/es/plus/pisellSalesManagement/hooks/useOrderPerspective.d.ts

@@ -0,0 +1,2 @@
+import { SalesGridPerspectiveConfig } from '../../pisellSalesGrid';
+export declare const useOrderPerspective: () => SalesGridPerspectiveConfig;