Geekly articles weekly

نحن نبني واجهة لإدخال الوثائق من خلال الاختيار

صورة

في تطبيقات الأعمال المختلفة ، تنشأ مهمة إدخال المستند في الغالب. عادةً ما يتكون المستند من عنوان وبعض الخطوط ، يشير كل منها إلى كائن ما (على سبيل المثال ، منتج). في أغلب الأحيان ، يتم استخدام جدول عادي لإدخال السجلات في مستند ، حيث يمكن للمستخدم إضافة وحذف الصفوف ، وكذلك تغيير محتوياتها.

ومع ذلك ، في بعض الحالات ، لا يكون هذا المخطط مناسبًا دائمًا للمستخدمين. في هذه المقالة ، سأخبرك بكيفية إنشاء واجهة مستخدم مريحة باستخدام تقنية اختيار المنتجات.

مهمة


كقاعدة عامة ، عند إدخال المستندات للمستخدم ، هناك قيود على مجموعة الكائنات التي يمكن إضافتها إليها. في هذه الحالة ، من المنطقي أن يُظهر المستخدم قائمة بهذه الكائنات مع إمكانية تضمينها (واستبعادها) بسرعة في المستند. في الأعمدة ، من المناسب لكل كائن عرض البيانات الضرورية لاتخاذ قرار بشأن الحاجة إلى تضمينها في المستند. وأخيرًا ، مع الكائن ، غالبًا ما تكون هناك حاجة لإدخال كميته.

دعنا نفكر في ثلاثة أنواع من المستندات التي توجد غالبًا في تطبيقات الأعمال:

  1. طلب شراء . في مثل هذه المستندات ، من المنطقي أن يُظهر المستخدم قائمة بجميع السلع المتاحة للطلب من المورد. في الأعمدة ، من المريح إظهار الرصيد الحالي ، والمبيعات لفترة معينة ، والكمية المطلوبة للشراء والبيع.
  2. ترتيب المبيعات . هنا ، في معظم الأحيان ، يتم عرض قائمة بالسلع الموجودة في رصيد المستودع المحدد والمتاحة للبيع للعميل المحدد. يجب أن يتم عرض الأسعار الحالية أيضًا.
  3. التغيير في الأرصدة . يستخدم هذا المستند لضبط الأرصدة الحالية في حالة وجود أي اختلافات مع المبلغ الفعلي. تظهر جميع المنتجات عادة في الاختيار ، مع القدرة على إدخال الرصيد الفعلي لأي منها. في الوقت نفسه ، تتم إضافة منتج إلى المستند بمبلغ يساوي الفرق بين الرصيد الفعلي والرصيد الحالي.

قرار


بعد ذلك ، سأوضح كيفية تنفيذ هذا المنطق بسرعة وسهولة استنادًا إلى منصة lsFusion المفتوحة والمجانية . كمثال ، دعنا ننشئ منطقًا لإدخال أمر شراء.

للبدء ، أضف دليل المنتج من خلال واجهة CRUD القياسية:
CLASS Product '' ;
name '' = DATA STRING [ 50 ] (Product);

FORM product ''
OBJECTS p = Product PANEL
PROPERTIES (p) name

EDIT Product OBJECT p //
;

FORM products ''
OBJECTS p = Product
PROPERTIES (p) READONLY name
PROPERTIES (p) NEWSESSION NEW , EDIT , DELETE

LIST Product OBJECT p // ,
;

NAVIGATOR {
NEW products;
}

نخلق مفهوم المورد ، وفي شكل تحرير نعطي الفرصة لاختيار المنتجات التي يعمل بها:
CLASS Supplier '' ;
name '' = DATA STRING [ 50 ] (Supplier);

in '' = DATA BOOLEAN (Supplier, Product); // TRUE,

FORM supplier ''
OBJECTS s = Supplier PANEL
PROPERTIES (s) name

OBJECTS p = Product //
PROPERTIES in(s, p), name(p) READONLY //

EDIT Supplier OBJECT s
;

FORM suppliers ''
OBJECTS s = Supplier
PROPERTIES (s) READONLY name
PROPERTIES (s) NEWSESSION NEW , EDIT , DELETE

LIST Supplier OBJECT s
;

NAVIGATOR {
NEW suppliers;
}

قم بتعريف منطق الترتيب بالسطور:
CLASS Order '' ;
date '' = DATA DATE (Order);
number '' = DATA INTEGER (Order);

supplier '' = DATA Supplier (Order);
nameSupplier '' (Order o) = name(supplier(o));

CLASS OrderDetail ' ' ;
order '' = DATA Order (OrderDetail) NONULL DELETE ;

إضافة المنتجات والكمية إلى الخطوط:
product '' = DATA Product (OrderDetail);
nameProduct '' (OrderDetail d) = name(product(d));

quantity '-' = DATA NUMERIC [ 14 , 3 ] (OrderDetail);

ننتقل مباشرة إلى بناء نموذج تحرير الطلب الذي نحتاجه. أولاً ، أضف الترتيب نفسه وخطوطه إليه:
FORM order ''
OBJECTS o = Order PANEL
PROPERTIES (o) date, number, nameSupplier

OBJECTS d = OrderDetail
PROPERTIES (d) nameProduct, quantity, NEW , DELETE
FILTERS order(d) = o

EDIT Order OBJECT o
;

وبالتالي ، نحصل على واجهة قياسية للعمل مع خطوط الطلب من خلال الإضافة والإزالة.
بعد ذلك نضيف وظيفة الاختيار التي نحتاجها في هذا النموذج. للقيام بذلك ، قم أولاً بإنشاء كائن في النموذج مع قائمة بجميع السلع ، حيث نقوم فقط بتصفية تلك المسموح بها للطلب من المورد المحدد:
EXTEND FORM order
OBJECTS p = Product
PROPERTIES name(p) READONLY
FILTERS in(supplier(o), p) //
;

قمنا بإعداد التصميم بحيث يتم عرض خطوط الطلب والاختيار كعلامات تبويب في حاوية واحدة:
DESIGN order {
OBJECTS {
NEW pane { //
fill = 1 ; //
type = TABBED ; // ,
MOVE BOX (d); //
MOVE BOX (p) { //
caption = '' ;
}
}
}
}

نحن نبني خصائص مساعدة لعرض وإدخال الكمية من قبل المستخدم في العمود المقابل:
quantity '-' (Order o, Product p) =
GROUP SUM quantity(OrderDetail d) BY order(d), product(d);
lastOrderDetail ' ' (Order o, Product p) =
GROUP LAST OrderDetail d ORDER d BY order(d), product(d);

تأخذ الخاصية الأولى في الاعتبار كمية هذا الطلب والمنتج في هذا المستند. يعثر الثاني على السطر الأخير (يمكن للمستخدم إدخال عدة أسطر بمنتج واحد).
بعد ذلك ، نقوم بإنشاء إجراء سيعالج المستخدم الذي يدخل القيمة في العمود المقابل في علامة تبويب التحديد:
changeQuantity ' -' (Order o, Product p) {
INPUT q = NUMERIC [ 14 , 3 ] DO { //
IF lastOrderDetail(o, p) THEN { // ,
IF q THEN //
quantity(OrderDetail d) <- q IF d = lastOrderDetail(o, p)
WHERE order(d) = o AND product(d) = p; //
ELSE // -
DELETE OrderDetail d WHERE order(d) = o AND product(d) == p;
} ELSE
IF q THEN
NEW d = OrderDetail { //
order(d) <- o;
product(d) <- p;
quantity(d) <- q;
}
}
}

أخيرًا ، نضيف عمودًا إلى النموذج ، مع الإشارة إلى الإجراء الذي يجب تنفيذه عندما يحاول المستخدم تغيير قيمته:
EXTEND FORM order
PROPERTIES (o, p) quantity ON CHANGE changeQuantity(o, p)
;

يبقى فقط رسم نموذج مع قائمة الطلبات وإضافته إلى لوحة التجول:
FORM orders ''
OBJECTS o = Order
PROPERTIES (o) READONLY date, number
PROPERTIES (o) NEWSESSION NEW , EDIT , DELETE
;

NAVIGATOR {
NEW orders;
}

سيبدو النموذج الناتج كما يلي:

صورة

أي تغييرات يتم إجراؤها على أي من علامات التبويب سوف تنعكس تلقائيًا على الآخر.

في أنظمة ERP الحقيقية ، تتم إضافة المزيد من الأعمدة والعناصر الأخرى إلى النموذج. على سبيل المثال ، في أحد هذه التطبيقات ، يبدو كما يلي:

صورة


دعونا نرى كيف يتم تنفيذ هذه الوظيفة في تطبيقات الأعمال الأخرى.

1C


في التكوينات المختلفة لـ 1C ، يكون لمنطق التحديد اختلافات معينة ، لكن المبدأ هو نفسه إلى حد ما. يوجد زر تحديد في نموذج تحرير المستند ، والذي يعرض مربع حوار مع اختيار البضائع:

صورة

في مربع الحوار هذا ، يمكنك تحديد البضائع كما يلي:

صورة

يوجد على الأقل إزعاجان في هذه الآلية.

أولاً ، من أجل إضافة كمية المنتج إلى المستند (وغالبًا ما يعرف المستخدم بالفعل الكمية التي يريد إضافتها) ، يجب أولاً النقر نقرًا مزدوجًا على المنتج وإضافته إلى الأسطر ، ثم تغيير الكمية في الأسطر. علاوة على ذلك ، لا يرى المستخدم في قائمة المنتجات ما إذا كان قد تم بالفعل إضافة هذا المنتج وبأي كمية. بالإضافة إلى ذلك ، فإن هذا المخطط "يأكل" مساحة إضافية ، حيث يتعين عليك عرض جدولين على شاشة واحدة بدلاً من شاشة واحدة.

ثانياً ، بعد إضافة السطور مباشرة إلى المستند ، إذا قمت بالنقر فوق الزر تحديد مرة أخرى ، سيبدأ التحديد "من نقطة الصفر". لن تظهر أي صفوف في الجدول السفلي ، وفي وقت إعادة التحديد ، لن يكون واضحًا ما هو موجود بالفعل في المستند وما هو غير موجود. كما أنه ينتهك إحدى القواعد المهمة عند إنشاء الواجهة: إذا أخطأ المستخدم ، فيجب إعطاؤه الفرصة للعودة وإصلاح الخطأ. اتضح هنا أنه لن يكون قادرًا على الرجوع إلى اختيار البضائع التي لها نفس البيانات كما كان قبل الضغط على زر الإضافة إلى المستند.

ومع ذلك ، فمن الممكن في 1C تطبيق المخطط أعلاه ، ولكن لسبب ما ، في التكوينات النموذجية المتوفرة على الموقع مع العروض ، يتم استخدام تكوين آخر.

Microsoft Dynamics 365


كحل ، أخذت البيع بالتجزئة (فقط وجدت أنه يوجد وظائف مماثلة متوفرة من https://trials.dynamics.com ). في ذلك ، يمكنك الاتصال التحديد في نموذج أوامر الشراء بطريقتين:

صورة

يتم تنفيذ الزر الأول وفقًا لنظام 1C (على الرغم من وجود عدد أقل من الأعمدة) ، لذلك لن أتطرق إليه.

يعرض الزر الثاني مربع حوار مع قائمة بالمنتجات حيث يمكن إدخال الكمية بالفعل في أعمدة. ولكن يتم ذلك بطريقة غريبة للغاية.

أولاً ، بشكل افتراضي ، يتم عرض رموز المنتج فقط هناك (حتى بدون أسماء). بالطبع ، أفهم أنه يمكنك إنشاء ملحقات وتضمين أعمدة أخرى هناك ، ولكن رؤية هذا السلوك في الإصدار الأساسي أمر غريب بعض الشيء.

ثانياً ، يبدو أن مايكروسوفت قد ابتعدت عن التصميم لدرجة أنها لسبب ما سجلتها في المعالجة المعتادة لبيانات التمرير ومعالجة الحيل والأحداث. يبدو شيء مثل هذا:

صورة

أثناء تشغيل لوحة المفاتيح العادية ، يتم تبديل السلسلة الحالية باستمرار عند إعادة قراءة البيانات. في الوقت نفسه ، يمكنك البدء في الدخول فقط بعد انتظار معالجة الحدث بالكامل ، وإلا فإن الكمية لم يتم إدخالها على الإطلاق ، أو تم إدخالها في سلسلة خاطئة. كيف يعمل المستخدمون الحقيقيون مع هذا يبقى لغزا بالنسبة لي. على ما يبدو ، قلة من الناس يستخدمون هذه الوظيفة على وجه التحديد. حسنًا ، أو أنها حدود العرض التوضيحي ، ولكن في كل شيء يعمل بشكل جيد.

استنتاج


كان مخطط إدخال المستند الموضح من خلال علامة تبويب تحديد منفصلة موضع تقدير جيد من قبل مستخدمينا.

في الممارسة العملية ، يمكن أن يكون هذا المفهوم معقد بطرق مختلفة. على سبيل المثال ، بدلاً من قائمة المنتجات ، قم بعرض قائمة بالمقالات مع القدرة على إدخال كميات مختلفة للخصائص الفردية. أو في إحدى المستندات توجد مستودعات في الصفوف ، وكان مطلوبًا تعيين الكميات لكل من هذه المستودعات في الأعمدة.

يمكن تنفيذ مثل هذا المخطط ، على سبيل المثال ، في نفس الرد ، باستخدام الأسطر الحالية للوثيقة كحالة وعرضها بمكونين في تبويبتين مختلفتين. ولكن يجب أن نتذكر أنه يمكن أن يكون هناك الكثير من الإدخالات في الجدول مع البضائع ، وسيكون عليك تنفيذ ما يسمى "التمرير اللانهائي". بالإضافة إلى ذلك ، يُنصح بإضافة القدرة على فرز المنتجات وتصفيتها في هذه القائمة (ويجب أن يتم ذلك على الخادم وليس على العميل ، حتى لا يتم سحب بيانات إضافية هناك). كل هذا يصبح مهمة غير تافهة للمطور.

في النظام الأساسي lsFusion ، يتم تنفيذ هذه الوظيفة خارج الصندوق وتتطلب فقط الرمز الموضح أعلاه. يمكنك تجربة كيفية عمله ، وإذا كنت ترغب في ذلك ، يمكنك تعديل التعليمات البرمجية عبر الإنترنت على الصفحة المقابلة. فيما يلي رمز المصدر بالكامل ، والذي يمكن إدراجه في علامة تبويب النظام الأساسي ثم النقر فوق تشغيل:

شفرة المصدر
CLASS Product '' ;
name '' = DATA STRING [ 50 ] (Product);

FORM product ''
OBJECTS p = Product PANEL
PROPERTIES (p) name

EDIT Product OBJECT p //
;

FORM products ''
OBJECTS p = Product
PROPERTIES (p) READONLY name
PROPERTIES (p) NEWSESSION NEW , EDIT , DELETE

LIST Product OBJECT p // ,
;

NAVIGATOR {
NEW products;
}

CLASS Supplier '' ;
name '' = DATA STRING [ 50 ] (Supplier);

in '' = DATA BOOLEAN (Supplier, Product); // TRUE,

FORM supplier ''
OBJECTS s = Supplier PANEL
PROPERTIES (s) name

OBJECTS p = Product //
PROPERTIES in(s, p), name(p) READONLY //

EDIT Supplier OBJECT s
;

FORM suppliers ''
OBJECTS s = Supplier
PROPERTIES (s) READONLY name
PROPERTIES (s) NEWSESSION NEW , EDIT , DELETE

LIST Supplier OBJECT s
;

NAVIGATOR {
NEW suppliers;
}

CLASS Order '' ;
date '' = DATA DATE (Order);
number '' = DATA INTEGER (Order);

supplier '' = DATA Supplier (Order);
nameSupplier '' (Order o) = name(supplier(o));

CLASS OrderDetail ' ' ;
order '' = DATA Order (OrderDetail) NONULL DELETE ;

product '' = DATA Product (OrderDetail);
nameProduct '' (OrderDetail d) = name(product(d));

quantity '-' = DATA NUMERIC [ 14 , 3 ] (OrderDetail);

FORM order ''
OBJECTS o = Order PANEL
PROPERTIES (o) date, number, nameSupplier

OBJECTS d = OrderDetail
PROPERTIES (d) nameProduct, quantity, NEW , DELETE
FILTERS order(d) = o

EDIT Order OBJECT o
;

EXTEND FORM order
OBJECTS p = Product
PROPERTIES name(p) READONLY
FILTERS in(supplier(o), p) //
;

DESIGN order {
OBJECTS {
NEW pane { //
fill = 1 ; //
type = TABBED ; // ,
MOVE BOX (d); //
MOVE BOX (p) { //
caption = '' ;
}
}
}
}

quantity '-' (Order o, Product p) =
GROUP SUM quantity(OrderDetail d) BY order(d), product(d);
lastOrderDetail ' ' (Order o, Product p) =
GROUP LAST OrderDetail d ORDER d BY order(d), product(d);

changeQuantity ' -' (Order o, Product p) {
INPUT q = NUMERIC [ 14 , 3 ] DO { //
IF lastOrderDetail(o, p) THEN { // ,
IF q THEN //
quantity(OrderDetail d) <- q IF d = lastOrderDetail(o, p)
WHERE order(d) = o AND product(d) = p; //
ELSE // -
DELETE OrderDetail d WHERE order(d) = o AND product(d) == p;
} ELSE
IF q THEN
NEW d = OrderDetail { //
order(d) <- o;
product(d) <- p;
quantity(d) <- q;
}
}
}

EXTEND FORM order
PROPERTIES (o, p) quantity ON CHANGE changeQuantity(o, p)
;

FORM orders ''
OBJECTS o = Order
PROPERTIES (o) READONLY date, number
PROPERTIES (o) NEWSESSION NEW , EDIT , DELETE
;

NAVIGATOR {
NEW orders;
}

Source: https://habr.com/ru/post/ar464487/

More articles:


All Articles