sync

README.md

@@ -2,6 +2,10 @@
 
 UI Mordern Gridview Library
 
+## 1.0.7
+* 调整: [(event) onBodyScrolled(e: Event, index: number, count: number)](Grid.html#event:onBodyScrolled) - 列滚动时触发的事件，增加显示行起始索引与一屏呈现行数
+* 新增: [`currentItem: GridRowItem | null`](Grid.html#currentItem) - 获取当前选中的行对象
+
 ## 1.0.6
 * 新增: [`col.switch`](GridColumnDefinition.html) - 列复选框样式改为 `ui-switch`
 

lib/app/communications/internal.js

@@ -1,3 +1,4 @@
+import AddWorkOrder from "../../element/addWorkorder";
 import { createElement, setTooltip, createIcon, requestAnimationFrame } from "../../ui";
 import { r as lang, nullOrEmpty, escapeHtml, escapeEmoji } from "../../utility";
 import { createBox, appendMedia } from "./lib";
@@ -115,10 +116,22 @@ export default class InternalComment {
             return;
         }
         this._var.enter.disabled = flag === true;
+        this._var.container.querySelector('.button-call-log').style.display = flag === true ? 'none' : '';
         this._var.container.querySelector('.button-send-message').style.display = flag === true ? 'none' : '';
         this._var.container.querySelector('.button-post-note').style.display = flag === true ? 'none' : '';
     }
 
+    /**
+     * @param {boolean} flag
+     */
+    set noCallLog(flag) {
+        this._var.option.noCallLog = flag;
+        if (this._var.container == null) {
+            return;
+        }
+        this._var.container.querySelector('.button-call-log').style.display = flag === true ? 'none' : '';
+    }
+
     create() {
         const option = this._var.option;
         const container = createBox(
@@ -214,6 +227,24 @@ export default class InternalComment {
                         )
                     ),
                     createElement('div', 'prompt-count'),
+                    createElement('button', button => {
+                        button.className = 'roundbtn button-call-log';
+                        button.style.backgroundImage = 'url(' + AddWorkOrder.IconWorkOrder + ')';
+                        button.style.backgroundSize = '80% 80%';
+                        button.style.backgroundPosition = 'center';
+                        button.style.backgroundRepeat = 'no-repeat';
+                        button.style.verticalAlign = 'top';//firefox图片需要设置verticalAlign
+                        if (readonly === true || option.noCallLog === true) {
+                            button.style.display = 'none';
+                        }
+                        setTooltip(button, r('P_WO_CALLLOG', 'Call Log'));
+                        button.addEventListener('click', () => {
+                            if (typeof option.onAddCallLog === 'function') {
+                                this.loading = true;
+                                option.onAddCallLog();
+                            }
+                        })
+                    }),
                     createElement('button', button => {
                         button.className = 'roundbtn button-send-message';
                         button.style.backgroundColor = 'rgb(19, 150, 204)';
@@ -293,7 +324,13 @@ export default class InternalComment {
                 }));
                 const content = createElement('div', 'item-content');
                 const mmsParts = createElement('div', div => div.style.display = 'none');
-                content.appendChild(createElement('span', span => span.innerHTML = escapeHtml(escapeEmoji(comment.Message)), mmsParts));
+                content.appendChild(createElement('span', span => {
+                    if (comment.MessageType === 2) {
+                        span.innerHTML = comment.Message;
+                    } else {
+                        span.innerHTML = escapeHtml(escapeEmoji(comment.Message));
+                    }
+                }, mmsParts));
                 if (comment.MMSParts?.length > 0) {
                     mmsParts.style.display = '';
                     for (let kv of comment.MMSParts) {

lib/element.js

@@ -1,12 +1,12 @@
 import "./element/style.scss";
 import ScheduleItem from "./element/schedule";
 import AddWorkOrder from "./element/addWorkorder";
-import AssetSelector from "./element/assetSelector";
+import InspectionWizard from "./element/inspectionWizard";
-import TemplateSelector from "./element/templateSelector";
+import Signature from "./element/signature";
 
 export {
     ScheduleItem,
     AddWorkOrder,
-    AssetSelector,
+    InspectionWizard,
-    TemplateSelector
+    Signature
 }

lib/element/assetSelector.js

@@ -1,43 +1,12 @@
-import { Dropdown, Grid, Popup, createCheckbox, createElement, createIcon } from "../ui";
+import { Dropdown, Grid, OptionBase, createCheckbox, createElement, createIcon } from "../ui";
-import { r as lang } from "../utility";
 
-let r = lang;
+export default class AssetSelector extends OptionBase {
-
-export default class AssetSelector {
     _var = {
-        option: {
-            assetFullcontrol: false,
-            /**
-             * @private
-             * @type {(hidden: boolean, search?: string, groups?: string[], jobsites?: number[], codes?: string[]) => Promise<any[]>}
-             */
-            requestAssets: null,
-            /**
-             * @private
-             * @type {() => Promise<any>}
-             */
-            requestAddAsset: null,
-            /**
-             * @private
-             * @type {() => Promise<{AssetGroups: any[], Codes: any[], Jobsites: any[]}>}
-             */
-            requestAssetParams: null,
-            dataSource: {
-                AssetGroups: [],
-                Codes: [],
-                Jobsites: []
-            }
-        },
         /**
          * @private
          * @type {HTMLElement}
          */
         container: null,
-        /**
-         * @private
-         * @type {Popup}
-         */
-        popup: null,
         el: {
             /**
              * @private
@@ -74,24 +43,60 @@ export default class AssetSelector {
 
     onSelected;
 
-    constructor(opt) {
+    constructor(opt = {
-        opt ??= {};
+        assetFullcontrol: false,
-        this._var.option = opt;
+        ignoreHidden: false,
-        const getText = opt.getText;
+        /**
-        if (typeof getText === 'function') {
+         * @private
-            r = getText;
+         * @type {(flag: boolean) => void}
-        } else if (typeof GetTextByKey === 'function') {
+         */
-            r = GetTextByKey;
+        loading: null,
+        /**
+         * @private
+         * @type {() => void}
+         */
+        close: null,
+        /**
+         * @private
+         * @type {(hidden: boolean, search?: string, groups?: string[], jobsites?: number[], codes?: string[]) => Promise<any[]>}
+         */
+        requestAssets: null,
+        /**
+         * @private
+         * @type {() => Promise<any>}
+         */
+        requestAddAsset: null,
+        /**
+         * @private
+         * @type {() => Promise<{AssetGroups: any[], Codes: any[], Jobsites: any[]}>}
+         */
+        requestAssetParams: null,
+        dataSource: {
+            AssetGroups: [],
+            Codes: [],
+            Jobsites: []
+        }
+    }) {
+        super(opt);
+    }
+
+    get title() { return this.r('P_MA_SELECTASSET', 'Select Asset') }
+
+    get currentAsset() { return this._var.el.grid.currentItem }
+
+    loading(flag) {
+        if (typeof this._option.loading === 'function') {
+            this._option.loading(flag);
         }
     }
 
     refresh() {
-        const requestAssets = this._var.option.requestAssets;
+        const requestAssets = this._option.requestAssets;
         if (typeof requestAssets !== 'function') {
             return;
         }
         const el = this._var.el;
-        this._var.popup.loading = true;
+        this.loading(true);
         requestAssets(
             el.checkHidden.querySelector('input[type="checkbox"]')?.checked,
             el.inputSearch.value,
@@ -100,23 +105,28 @@ export default class AssetSelector {
             el.dropJobsiteCode.selected?.value
         ).then(data => {
             el.grid.source = data;
-        }).finally(() => this._var.popup.loading = false);
+        }).finally(() => this.loading(false));
     }
 
     select(item) {
         if (typeof this.onSelected !== 'function') {
             return false;
         }
+        if (item == null) {
+            item = this._var.el.grid.currentItem;
+        }
+        if (item == null) {
+            return false;
+        }
         this.onSelected(item);
     }
 
-    async create() {
+    create() {
-        const option = this._var.option;
+        const option = this._option;
-        const title = r('P_MA_SELECTASSET', 'Select Asset');
         const tabIndex = Math.max.apply(null, [...document.querySelectorAll('[tabindex]')].map(e => e.tabIndex ?? 0)) + 3;
         const inputSearch = createElement('input', input => {
             input.type = 'text';
-            input.placeholder = r('P_SELECTASSETS_SEARCH', 'Search');
+            input.placeholder = this.r('P_SELECTASSETS_SEARCH', 'Search');
             input.tabIndex = tabIndex + 2;
             input.className = 'ui-input';
             input.addEventListener('keypress', e => {
@@ -127,9 +137,12 @@ export default class AssetSelector {
         });
         const checkHidden = createCheckbox({
             tabIndex: tabIndex + 3,
-            label: r('P_SELECTASSETS_SHOWHIDDEN', 'Show Hidden'),
+            label: this.r('P_SELECTASSETS_SHOWHIDDEN', 'Show Hidden'),
             onchange: () => this.refresh()
         });
+        if (option.ignoreHidden) {
+            checkHidden.style.display = 'none';
+        }
         const dropAssetGroup = new Dropdown({
             tabIndex: tabIndex + 4,
             search: true,
@@ -153,21 +166,23 @@ export default class AssetSelector {
             div.className = 'popup-selector-content';
             div.style.height = '400px';
         });
-        const grid = new Grid(gridContent, r);
+        const grid = new Grid(gridContent, this.r);
         grid.columns = [
-            { key: 'VIN', caption: r('P_SELECTASSETS_VIN', 'VIN'), width: 170 },
+            { key: 'VIN', caption: this.r('P_SELECTASSETS_VIN', 'VIN'), width: 170 },
-            { key: 'DisplayName', caption: r('P_SELECTASSETS_NAME', 'Name'), width: 190 },
+            { key: 'DisplayName', caption: this.r('P_SELECTASSETS_NAME', 'Name'), width: 190 },
-            { key: 'MakeName', caption: r('P_SELECTASSETS_MAKE', 'Make'), width: 110, allowFilter: true },
+            { key: 'MakeName', caption: this.r('P_SELECTASSETS_MAKE', 'Make'), width: 110, allowFilter: true },
-            { key: 'ModelName', caption: r('P_SELECTASSETS_MODEL', 'Model'), width: 110, allowFilter: true },
+            { key: 'ModelName', caption: this.r('P_SELECTASSETS_MODEL', 'Model'), width: 110, allowFilter: true },
-            { key: 'TypeName', caption: r('P_SELECTASSETS_TYPE', 'Type'), width: 110, allowFilter: true },
+            { key: 'TypeName', caption: this.r('P_SELECTASSETS_TYPE', 'Type'), width: 110, allowFilter: true },
-            { key: 'AcquisitionType', caption: r('P_MA_ACQUISITIONTYPE', 'Acquisition Type'), width: 130, allowFilter: true },
+            { key: 'AcquisitionType', caption: this.r('P_MA_ACQUISITIONTYPE', 'Acquisition Type'), width: 130, allowFilter: true },
-            { key: 'AssetGroups', caption: r('P_MA_ASSETGROUP', 'Asset Group'), width: 150 },
+            { key: 'AssetGroups', caption: this.r('P_MA_ASSETGROUP', 'Asset Group'), width: 150 },
-            { key: 'Jobsites', caption: r('P_SELECTASSETS_JOBSITE', 'Jobsite'), width: 180, filter: it => it.Jobsites?.map(s => s.Key) }
+            { key: 'Jobsites', caption: this.r('P_SELECTASSETS_JOBSITE', 'Jobsite'), width: 180, filter: it => it.Jobsites?.map(s => s.Key) }
         ];
         grid.onRowDblClicked = index => {
             const item = grid.source[index];
             this.select(item);
-            this._var.popup.close();
+            if (typeof this._option.close === 'function') {
+                this._option.close();
+            }
         };
         grid.init();
         grid.element.tabIndex = tabIndex + 7;
@@ -183,19 +198,21 @@ export default class AssetSelector {
         const container = createElement('div', 'popup-selector',
             createElement('div', 'popup-selector-header',
                 createElement('img', img => img.src = '../img/modules/devices.png'),
-                createElement('h3', h3 => h3.innerText = title),
+                createElement('h3', h3 => h3.innerText = this.title),
                 option.assetFullcontrol ? createElement('button', button => {
                     button.className = 'ui-popup-button';
                     button.tabIndex = tabIndex + 1;
-                    button.innerText = r('P_MA_ADDASSET', 'Add Asset');
+                    button.innerText = this.r('P_MA_ADDASSET', 'Add Asset');
                     button.addEventListener('click', async () => {
                         if (typeof option.requestAddAsset === 'function') {
-                            this._var.popup.loading = true;
+                            this.loading(true);
                             const asset = await option.requestAddAsset();
-                            this._var.popup.loading = false;
+                            this.loading(false);
                             if (asset != null) {
                                 this.select(asset);
-                                this._var.popup.close();
+                                if (typeof this._option.close === 'function') {
+                                    this._option.close();
+                                }
                             }
                         }
                     });
@@ -211,59 +228,33 @@ export default class AssetSelector {
                     )
                 ),
                 checkHidden,
-                createElement('span', span => span.innerText = r('P_WO_ASSETGROUP', 'Asset Group')),
+                createElement('span', span => span.innerText = this.r('P_WO_ASSETGROUP', 'Asset Group')),
                 dropAssetGroup.create(),
-                createElement('span', span => span.innerText = r('P_WO_JOBSITE', 'Jobsite')),
+                createElement('span', span => span.innerText = this.r('P_WO_JOBSITE', 'Jobsite')),
                 dropJobsite.create(),
-                createElement('span', span => span.innerText = r('P_SELECTASSETS_JOBSITECODE', 'Jobsite Code')),
+                createElement('span', span => span.innerText = this.r('P_SELECTASSETS_JOBSITECODE', 'Jobsite Code')),
                 dropJobsiteCode.create()
             ),
             gridContent
         );
         this._var.container = container;
-        const popup = new Popup({
+        return container;
-            title,
+    }
-            content: container,
+
-            persistent: true,
+    async init() {
-            buttons: [
+        const option = this._option;
-                {
-                    key: 'ok',
-                    text: r('P_GRID_OK', 'OK'),
-                    trigger: () => {
-                        const item = grid.source[grid.selectedIndex];
-                        if (item == null) {
-                            return false;
-                        }
-                        this.select(item);
-                    }
-                },
-                { text: r('P_WO_CANCEL', 'Cancel') }
-            ]
-        });
-        this._var.popup = popup;
-        popup.create();
-        popup.rect = { width: 1220 };
-        const mask = await popup.show();
         if (option.dataSource == null) {
             if (typeof option.requestAssetParams === 'function') {
-                popup.loading = true;
+                this.loading(true);
                 const data = await option.requestAssetParams();
                 option.dataSource = data;
             } else {
                 option.dataSource = { AssetGroups: [], Jobsites: [], Codes: [] };
             }
         }
-        dropAssetGroup.source = [{ Key: '-1', Value: '' }, ...option.dataSource.AssetGroups];
+        this._var.el.dropAssetGroup.source = [{ Key: '-1', Value: '' }, ...option.dataSource.AssetGroups];
-        dropJobsite.source = [{ ID: '-1', Name: '' }, ...option.dataSource.Jobsites];
+        this._var.el.dropJobsite.source = [{ ID: '-1', Name: '' }, ...option.dataSource.Jobsites];
-        dropJobsiteCode.source = [{ value: '-1', text: '' }, ...option.dataSource.Codes.map(c => ({ value: c, text: c }))];
+        this._var.el.dropJobsiteCode.source = [{ value: '-1', text: '' }, ...option.dataSource.Codes.map(c => ({ value: c, text: c }))];
         this.refresh();
-        return mask;
-    }
-
-    show() {
-        if (this._var.popup == null) {
-            return this.create();
-        }
-        return this._var.popup.show();
     }
 }

lib/element/inspectionWizard.js

@@ -0,0 +1,169 @@
+import { OptionBase, Popup, createElement, showAlert } from "../ui";
+import AssetSelector from "./assetselector";
+import TemplateSelector from "./templateselector";
+
+export default class InspectionWizard extends OptionBase {
+    _var = {
+        /**
+         * @private
+         * @type {number}
+         */
+        index: 0,
+        /**
+         * @private
+         * @type {HTMLElement[]}
+         */
+        containers: [],
+        /**
+         * @private
+         * @type {AssetSelector}
+         */
+        assetSelector: null,
+        asset: null,
+        template: null,
+        /**
+         * @private
+         * @type {Popup}
+         */
+        popup: null
+    };
+
+    /**
+     * @event
+     * @type {(this: InspectionWizard, asset: any, template: any) => void}
+     */
+    onSelected;
+
+    constructor(opt = {
+        /**
+         * @private
+         * @type {(assetId: number, search: string) => Promise<any[]>}
+         */
+        requestTemplates: null,
+        /**
+         * @private
+         * @type {(hidden: boolean, search?: string, groups?: string[], jobsites?: number[], codes?: string[]) => Promise<any[]>}
+         */
+        requestAssets: null,
+        /**
+         * @private
+         * @type {() => Promise<{AssetGroups: any[], Codes: any[], Jobsites: any[]}>}
+         */
+        requestAssetParams: null
+    }) {
+        super(opt);
+    }
+
+    async create() {
+        const option = this._option;
+        const loading = flag => this._var.popup.loading = flag;
+        const assetSelector = new AssetSelector({
+            ignoreHidden: true,
+            loading,
+            requestAssets: option.requestAssets,
+            requestAssetParams: option.requestAssetParams
+        });
+        this._var.assetSelector = assetSelector;
+        const templateSelector = new TemplateSelector({
+            loading,
+            requestTemplates: option.requestTemplates
+        });
+        assetSelector.onSelected = asset => {
+            this._var.asset = asset;
+            this._var.template = null;
+            this._changePage(1);
+            templateSelector.assetId = asset.Id;
+        };
+        templateSelector.onSelected = template => {
+            this._var.template = template;
+            this._select();
+            this._var.popup.close();
+        }
+        this._var.containers = [
+            assetSelector.create(),
+            templateSelector.create()
+        ];
+        const popup = new Popup({
+            title: this.r('ADDINSPECTION', 'Add Inspection'),
+            content: createElement('div', null, ...this._var.containers),
+            persistent: true,
+            buttons: [
+                {
+                    text: this.r('BACK', 'Back'),
+                    trigger: () => {
+                        this._changePage(0);
+                        return false;
+                    }
+                },
+                {
+                    text: this.r('NEXT', 'Next'),
+                    trigger: () => {
+                        const asset = assetSelector.currentAsset;
+                        if (asset == null) {
+                            showAlert(assetSelector.title, this.r('P_SELECTASSETS_SELECTASSET', 'Please select an Asset.'));
+                            return false;
+                        }
+                        this._var.asset = asset;
+                        this._var.template = null;
+                        this._changePage(1);
+                        templateSelector.assetId = asset.Id;
+                        return false;
+                    }
+                },
+                {
+                    text: this.r('P_GRID_OK', 'OK'),
+                    trigger: () => {
+                        const template = templateSelector.currentTemplate;
+                        if (template == null) {
+                            showAlert(templateSelector.title, this.r('P_WO_PLEASESELECTATEMPLATE', 'Please select a template.'));
+                            return false;
+                        }
+                        this._var.template = template;
+                        this._select();
+                    }
+                },
+                { text: this.r('P_WO_CANCEL', 'Cancel') }
+            ]
+        });
+        this._var.popup = popup;
+        popup.create();
+        this._changePage(0);
+        popup.rect = { width: 1220 };
+        const mask = await popup.show();
+        assetSelector.init();
+        return mask;
+    }
+
+    show() {
+        if (this._var.popup == null) {
+            return this.create();
+        }
+        this._changePage(0);
+        const selector = this._var.assetSelector;
+        selector._var.el.inputSearch.value = '';
+        selector._var.el.dropAssetGroup.select('-1');
+        selector._var.el.dropJobsite.select('-1');
+        selector._var.el.dropJobsiteCode.select('-1');
+        selector.refresh();
+        return this._var.popup.show();
+    }
+
+    _select() {
+        if (typeof this.onSelected === 'function') {
+            this.onSelected(this._var.asset, this._var.template);
+        }
+    }
+
+    _changePage(index) {
+        if (isNaN(index) || index < 0 || index >= 2) {
+            return;
+        }
+        this._var.index = index;
+        this._var.containers[0].style.display = index === 0 ? '' : 'none';
+        this._var.containers[1].style.display = index === 1 ? '' : 'none';
+        const footerButtons = this._var.popup.container.querySelectorAll('.ui-popup-footer>.ui-popup-button');
+        footerButtons[0].style.display = index === 0 ? 'none' : '';
+        footerButtons[1].style.display = index === 1 ? 'none' : '';
+        footerButtons[2].style.display = index === 0 ? 'none' : '';
+    }
+}

lib/element/schedule.js

@@ -1,19 +1,10 @@
-import { createElement, createCheckbox, createRadiobox, Dropdown, validation, toDateValue } from "../ui";
+import { createElement, createCheckbox, createRadiobox, Dropdown, validation, toDateValue, OptionBase } from "../ui";
-import { r as lang } from "../utility";
 
-let r = lang;
+export default class ScheduleItem extends OptionBase {
-
-export default class ScheduleItem {
     _var = {};
 
-    constructor(opt) {
+    constructor(opt = {}) {
-        this._var.option = opt ?? {};
+        super(opt);
-        const getText = opt?.getText;
-        if (typeof getText === 'function') {
-            r = getText;
-        } else if (typeof GetTextByKey === 'function') {
-            r = GetTextByKey;
-        }
     }
 
     get checkOccurOnce() { return this._var.container.querySelector('.schedule-id-box-occur-once>input'); }
@@ -99,7 +90,7 @@ export default class ScheduleItem {
     }
 
     create() {
-        const option = this._var.option;
+        const option = this._option;
         const drop = new Dropdown({ selected: '0' });
         this.dropFrequency = drop;
         drop.source = [

lib/element/signature.js

@@ -0,0 +1,151 @@
+import { OptionBase, Popup, createElement } from "../ui";
+
+export default class Signature extends OptionBase {
+    _var = {
+        /**
+         * @private
+         * @type {HTMLCanvasElement}
+         */
+        canvas: null,
+        /**
+         * @private
+         * @type {Popup}
+         */
+        popup: null,
+        isDrawing: false,
+        /**
+         * @private
+         * @type {{x: number, y: number}[]}
+         */
+        points: [],
+        /**
+         * @private
+         * @type {{x: number, y: number}[][]}
+         */
+        allPoints: []
+    };
+
+    /**
+     * @event
+     * @type {(this: Signature, singature: string) => void}
+     */
+    onSignatured;
+
+    constructor(opt = {}) {
+        super(opt);
+    }
+
+    async show() {
+        const popup = new Popup({
+            title: this.r('P_IPT_SIGNATURE', 'Signature'),
+            content: this._var.canvas = createElement('canvas', canvas => {
+                canvas.style.width = '100%';
+                canvas.style.height = '100%';
+            }),
+            resolve: result => {
+                if (result.result === 'ok' && this._var.allPoints.length > 0) {
+                    if (typeof this.onSignatured === 'function') {
+                        const data = this._var.canvas.toDataURL('image/png');
+                        this.onSignatured(data);
+                    }
+                } else {
+                    if (typeof this.onSignatured === 'function') {
+                        this.onSignatured();
+                    }
+                }
+            },
+            buttons: [
+                {
+                    text: this.r('P_GRID_OK', 'OK'),
+                    trigger: () => {
+                        if (this._var.allPoints.length === 0) {
+                            return false;
+                        }
+                        return 'ok';
+                    }
+                },
+                {
+                    text: this.r('P_GRID_RESET', 'Reset'),
+                    trigger: () => {
+                        const ctx = this._var.canvas.getContext('2d');
+                        ctx.clearRect(0, 0, this._var.canvas.width, this._var.canvas.height);
+                        return false
+                    }
+                },
+                { text: this.r('P_WO_CANCEL', 'Cancel') }
+            ]
+        });
+        this._var.popup = popup;
+        popup.create();
+        popup.container.classList.add('ui-popup-signature');
+        const mask = await popup.show();
+        this.init();
+        return mask;
+    }
+
+    init() {
+        const canvas = this._var.canvas;
+        canvas.width = canvas.clientWidth;
+        canvas.height = canvas.clientHeight;
+        const ctx = canvas.getContext('2d');
+        ctx.lineWidth = 3;
+        ctx.strokeStyle = '#000';
+
+        canvas.addEventListener('mousedown', e => this._down(ctx, e.offsetX, e.offsetY), false);
+        canvas.addEventListener('mousemove', e => this._move(ctx, e.offsetX, e.offsetY), false);
+        canvas.addEventListener('mouseup', () => this._up(ctx), false);
+    }
+
+    /**
+     * @private
+     * @param {CanvasRenderingContext2D} ctx 
+     * @param {number} x1 
+     * @param {number} y1 
+     * @param {number} x2 
+     * @param {number} y2 
+     */
+    _draw(ctx, x1, y1, x2, y2) {
+        ctx.moveTo(x1, y1);
+        ctx.lineTo(x2, y2);
+        ctx.stroke();
+    }
+
+    /**
+     * @private
+     * @param {CanvasRenderingContext2D} ctx 
+     * @param {number} x 
+     * @param {number} y 
+     */
+    _down(ctx, x, y) {
+        this._var.isDrawing = true;
+        this._var.points.push({ x, y });
+        ctx.beginPath();
+    }
+
+    /**
+     * @private
+     * @param {CanvasRenderingContext2D} ctx 
+     * @param {number} x 
+     * @param {number} y 
+     */
+    _move(ctx, x, y) {
+        if (this._var.isDrawing) {
+            const lastPoint = this._var.points.at(-1);
+            this._draw(ctx, lastPoint.x, lastPoint.y, x, y);
+            this._var.points.push({ x, y });
+        }
+    }
+
+    /**
+     * @private
+     * @param {CanvasRenderingContext2D} ctx 
+     */
+    _up(ctx) {
+        if (this._var.isDrawing) {
+            this._var.isDrawing = false;
+            ctx.closePath();
+            this._var.allPoints.push(this._var.points);
+            this._var.points = [];
+        }
+    }
+}

lib/element/style.scss

@@ -115,6 +115,10 @@
             opacity: .4;
         }
     }
+
+    .col-icon.disabled>.ui-icon {
+        cursor: inherit;
+    }
 }
 
 .open-wo-container {
@@ -137,7 +141,7 @@
         flex: 1 1 auto;
         margin: 10px;
         display: grid;
-        grid-template-columns: minmax(130px,auto) 1fr;
+        grid-template-columns: minmax(130px, auto) 1fr;
         grid-auto-rows: minmax(32px, auto);
         align-items: center;
         justify-items: start;
@@ -271,6 +275,7 @@
 
         >.search-box {
             position: relative;
+            margin-right: 8px;
 
             >span {
                 position: absolute;

lib/element/templateSelector.js

@@ -1,27 +1,18 @@
-import { Grid, Popup, createElement, createIcon } from "../ui";
+import { Grid, OptionBase, createElement, createIcon } from "../ui";
-import { r as lang, nullOrEmpty } from "../utility";
+import { nullOrEmpty } from "../utility";
 
-let r = lang;
+export default class TemplateSelector extends OptionBase {
-
-export default class TemplateSelector {
     _var = {
-        option: {
+        /**
-            /**
+         * @private
-             * @private
+         * @type {number}
-             * @type {(search: string) => Promise<any[]>}
+         */
-             */
+        assetId: -1,
-            requestTemplates: null
-        },
         /**
          * @private
          * @type {HTMLElement}
          */
         container: null,
-        /**
-         * @private
-         * @type {Popup}
-         */
-        popup: null,
         el: {
             /**
              * @private
@@ -38,30 +29,47 @@ export default class TemplateSelector {
 
     /**
      * @event
-     * @type {(this: TemplateSelector, template: string) => void}
+     * @type {(this: TemplateSelector, template: any) => void}
      */
     onSelected;
 
-    constructor(opt = {}) {
+    constructor(opt = {
-        this._var.option = opt;
+        /** @type {(flag: boolean) => void} */
-        const getText = opt.getText;
+        loading: null,
-        if (typeof getText === 'function') {
+        /** @type {() => void} */
-            r = getText;
+        close: null,
-        } else if (typeof GetTextByKey === 'function') {
+        /** @type {(assetId: number, search: string) => Promise<any[]>} */
-            r = GetTextByKey;
+        requestTemplates: null
+    }) {
+        super(opt);
+    }
+
+    get assetId() { return this._var.assetId }
+    set assetId(id) {
+        this._var.assetId = id;
+        this.refresh();
+    }
+
+    get title() { return this.r('P_MODULE_INSPECTIONTEMPLATES', 'Inspection Templates') }
+
+    get currentTemplate() { return this._var.el.grid.currentItem }
+
+    loading(flag) {
+        if (typeof this._option.loading === 'function') {
+            this._option.loading(flag);
         }
     }
 
     refresh() {
-        const requestTemplates = this._var.option.requestTemplates;
+        const requestTemplates = this._option.requestTemplates;
         if (typeof requestTemplates !== 'function') {
             return;
         }
         const el = this._var.el;
-        this._var.popup.loading = true;
+        this.loading(true);
-        requestTemplates(el.inputSearch.value)
+        requestTemplates(this._var.assetId, el.inputSearch.value)
             .then(data => el.grid.source = data)
-            .finally(() => this._var.popup.loading = false);
+            .finally(() => this.loading(false));
     }
 
     select(item) {
@@ -71,13 +79,11 @@ export default class TemplateSelector {
         this.onSelected(item);
     }
 
-    async create() {
+    create() {
-        const option = this._var.option;
-        const title = r('P_MODULE_INSPECTIONTEMPLATES', 'Inspection Templates');
         const tabIndex = Math.max.apply(null, [...document.querySelectorAll('[tabindex]')].map(e => e.tabIndex ?? 0)) + 3;
         const inputSearch = createElement('input', input => {
             input.type = 'text';
-            input.placeholder = r('P_SELECTASSETS_SEARCH', 'Search');
+            input.placeholder = this.r('P_SELECTASSETS_SEARCH', 'Search');
             input.tabIndex = tabIndex + 1;
             input.className = 'ui-input';
             input.addEventListener('keypress', e => e.key === 'Enter' && this.refresh());
@@ -86,22 +92,25 @@ export default class TemplateSelector {
             div.className = 'popup-selector-content';
             div.style.height = '400px';
         });
-        const grid = new Grid(gridContent, r);
+        const grid = new Grid(gridContent, this.r);
         grid.columns = [
             {
                 key: 'IssueId',
                 type: Grid.ColumnTypes.Icon,
                 width: 30,
+                enabled: false,
                 resizable: false,
                 filter: it => nullOrEmpty(it.IssueId) ? '' : 'cubes'
             },
-            { key: 'Name', caption: r('P_IPT_NAME', 'Name'), width: 390 },
+            { key: 'Name', caption: this.r('P_IPT_NAME', 'Name'), width: 390 },
-            { key: 'Notes', caption: r('P_IPT_NOTES', 'Notes'), width: 630 }
+            { key: 'Notes', caption: this.r('P_IPT_NOTES', 'Notes'), width: 630 }
         ];
         grid.onRowDblClicked = index => {
             const item = grid.source[index];
             this.select(item);
-            this._var.popup.close();
+            if (typeof this._option.close === 'function') {
+                this._option.close();
+            }
         };
         grid.init();
         grid.element.tabIndex = tabIndex + 2;
@@ -113,7 +122,7 @@ export default class TemplateSelector {
         // content
         const container = createElement('div', 'popup-selector',
             createElement('div', 'popup-selector-header',
-                createElement('h3', h3 => h3.innerText = r('P_WO_PLEASESELECTATEMPLATE', 'Please select a template.'))
+                createElement('h3', h3 => h3.innerText = this.r('P_WO_PLEASESELECTATEMPLATE', 'Please select a template.'))
             ),
             createElement('div', 'popup-selector-function',
                 createElement('div', 'search-box',
@@ -128,36 +137,6 @@ export default class TemplateSelector {
             gridContent
         );
         this._var.container = container;
-        const popup = new Popup({
+        return container;
-            title,
-            content: container,
-            persistent: true,
-            buttons: [
-                {
-                    text: r('P_GRID_OK', 'OK'),
-                    trigger: () => {
-                        const item = grid.source[grid.selectedIndex];
-                        if (item == null) {
-                            return false;
-                        }
-                        this.select(item);
-                    }
-                },
-                { text: r('P_WO_CANCEL', 'Cancel') }
-            ]
-        });
-        this._var.popup = popup;
-        popup.create();
-        popup.rect = { width: 1200 };
-        const mask = await popup.show();
-        this.refresh();
-        return mask;
-    }
-
-    show() {
-        if (this._var.popup == null) {
-            return this.create();
-        }
-        return this._var.popup.show();
     }
 }

lib/ui.js

@@ -46,6 +46,24 @@ function offset(e) {
   };
 }
 
+class OptionBase {
+  _option;
+
+  r;
+
+  constructor(opt) {
+    this._option = opt;
+    const getText = opt.getText;
+    if (typeof getText === 'function') {
+      this.r = getText;
+    } else if (typeof GetTextByKey === 'function') {
+      this.r = GetTextByKey;
+    } else {
+      this.r = utility.r;
+    }
+  }
+}
+
 export {
   createElement,
   // icon
@@ -99,5 +117,7 @@ export {
   utility,
   // functions
   requestAnimationFrame,
-  offset
+  offset,
+  // base classes
+  OptionBase
 }

lib/ui/dropdown.js

@@ -87,6 +87,17 @@ function filterSource(searchkeys, textkey, key, source) {
     return source;
 }
 
+function getValue(it, valuekey, textkey) {
+    if (it == null) {
+        return null;
+    }
+    const value = it[valuekey];
+    if (value == null || value === '') {
+        return it[textkey];
+    }
+    return value;
+}
+
 /**
  * 下拉列表参数对象
  * @typedef DropdownOptions
@@ -171,6 +182,7 @@ export class Dropdown {
                 const source = this.source;
                 const count = source.length;
                 const valuekey = this._var.options.valueKey;
+                const textkey = this._var.options.textKey;
                 let index = source?.indexOf(this._var.selected);
                 if (isNaN(index) || index < -1) {
                     index = -1;
@@ -192,7 +204,7 @@ export class Dropdown {
                         index = count - 1;
                     }
                 }
-                const target = source[index]?.[valuekey];
+                const target = getValue(source[index], valuekey, textkey);
                 if (target != null) {
                     this.select(target);
                 }
@@ -315,7 +327,7 @@ export class Dropdown {
         const textkey = this._var.options.textKey;
         const template = this._var.options.htmlTemplate;
         const htmlkey = this._var.options.htmlKey;
-        let item = this.source.find(it => (ignoreCase ? String(it[valuekey]).toLowerCase() : String(it[valuekey])) === selected);
+        let item = this.source.find(it => (ignoreCase ? String(getValue(it, valuekey, textkey)).toLowerCase() : String(getValue(it, valuekey, textkey))) === selected);
         if (this._var.options.input) {
             if (item == null) {
                 item = { [valuekey]: selected };
@@ -377,7 +389,7 @@ export class Dropdown {
         const htmlkey = this._var.options.htmlKey;
         const itemlist = selectedlist.map(a => {
             const v = typeof a === 'string' ? a : String(a);
-            let item = source.find(it => String(it[valuekey]) === v);
+            let item = source.find(it => String(getValue(it, valuekey, textkey)) === v);
             if (item == null) {
                 item = {
                     [valuekey]: v,
@@ -557,15 +569,16 @@ export class Dropdown {
         }
         const multiselect = this.multiSelect;
         const valuekey = this._var.options.valueKey;
+        const textkey = this._var.options.textKey;
         const allchecked = this._var.allChecked;
         const selectedlist = this.selectedList;
         source.forEach((item, i) => {
-            let val = item[valuekey];
+            let val = getValue(item, valuekey, textkey);
             if (typeof val !== 'string') {
                 val = String(val);
             }
             if (multiselect) {
-                const selected = selectedlist.some(s => String(s[valuekey]) === val);
+                const selected = selectedlist.some(s => String(getValue(s, valuekey, textkey)) === val);
                 item.__checked = allchecked || selected;
             }
         });
@@ -588,7 +601,7 @@ export class Dropdown {
         const selected = this.selected;
         let scrolled;
         array.forEach((item, i) => {
-            let val = item[valuekey];
+            let val = getValue(item, valuekey, textkey);
             if (typeof val !== 'string') {
                 val = String(val);
             }
@@ -671,9 +684,9 @@ export class Dropdown {
                     if (all != null) {
                         all.checked = false;
                     }
-                    list = this.source.filter(it => String(it[valuekey]) !== val);
+                    list = this.source.filter(it => String(getValue(it, valuekey, textkey)) !== val);
                 } else {
-                    list = this.selectedList.filter(it => String(it[valuekey]) !== val);
+                    list = this.selectedList.filter(it => String(getValue(it, valuekey, textkey)) !== val);
                 }
             }
         }

lib/ui/grid/grid.js

@@ -14,7 +14,7 @@ import { requestAnimationFrame } from '../../ui';
 /**
  * @author Tsanie Lily <tsorgy@gmail.com>
  * @license MIT
- * @version 1.0.6
+ * @version 1.0.7
  */
 
 const ScriptPath = (self.document == null ? self.location.href : self.document.currentScript?.src ?? '').replace(/ui\.min\.js\?.+$/, '');
@@ -259,7 +259,7 @@ let r = lang;
  * @property {GridItemObjectCallback} [styleFilter] - **已过时**<br/>_根据返回值填充单元格样式（填充行列数据时读取）_
  * @property {(string | GridItemStringCallback)} [background] - 设置单元格背景色（填充行列数据时读取），支持直接设置颜色字符串或调用函数返回（若赋值则忽略 [bgFilter]{@linkcode GridColumnDefinition#bgFilter}）
  * @property {GridItemStringCallback} [bgFilter] - **已过时**<br/>_根据返回值设置单元格背景色_
- * @property {boolean} [switch=false] - 复选框为 `ui-switch` 样式 `@since 1.0.6`
+ * @property {boolean} [switch=false] - 复选框为 `ui-switch` 样式 *@since* 1.0.6
  * @property {(any | GridItemObjectCallback)} [attrs] - 根据返回值设置单元格元素的附加属性，允许直接设置对象也支持调用函数返回对象
  * @property {KeyMap<Function>} [events] - 给单元格元素附加事件（事件函数上下文为数据行对象）
  * @property {boolean} [allowFilter=false] - 是否允许进行列头过滤
@@ -1065,7 +1065,9 @@ export class Grid {
     /**
      * 列滚动时触发的事件
      * @event
-     * @param {Event} e - 滚动事件对象
+     * @param {Event} [e] - 滚动事件对象
+     * @param {number} index - 起始行
+     * @param {number} count - 显示行数
      * @this Grid
      */
     onBodyScrolled;
@@ -1136,7 +1138,7 @@ export class Grid {
      * @property {boolean} [tooltipDisabled=false] - 单元格 tooltip 是否禁用
      * @property {boolean} [headerVisible=true] - 列头是否显示
      * @property {boolean} [headerWrap=true] - 列头是否允许换行
-     * @property {boolean} [rowDraggable=false] - 是否允许行间拖拽 @since 1.0.3
+     * @property {boolean} [rowDraggable=false] - 是否允许行间拖拽 *since* 1.0.3
      * @property {(Window | HTMLElement)} [window=global] - 监听事件的窗口载体
      * @property {number} [sortIndex=-1] - 排序列的索引
      * @property {GridColumnDirection} [sortDirection=GridColumnDirection.Ascending] - 排序方式，正数升序，负数倒序
@@ -1205,6 +1207,16 @@ export class Grid {
         return this.columns[this.sortIndex]?.key;
     }
 
+    /**
+     * 获取当前选中的行对象
+     * @readonly
+     * @type {GridRowItem | null}
+     * @since 1.0.7
+     */
+    get currentItem() {
+        return this.source[this.selectedIndex];
+    }
+
     /**
      * @private
      * @type {HTMLTableRowElement[]}
@@ -1526,10 +1538,10 @@ export class Grid {
 
         this._var.rendering = false;
         if (this._var.source != null) {
-            if (this.sortIndex >= 0) {
+            if (this.sortArray?.length > 0) {
-                this.sortColumn(true);
-            } else if (this.sortArray?.length > 0) {
                 this.sort(true);
+            } else if (this.sortIndex >= 0) {
+                this.sortColumn(true);
             } else {
                 this.resize(true);
             }
@@ -1575,6 +1587,14 @@ export class Grid {
         const count = truncate((height - 1) / (this.rowHeight + 1)) + (RedumCount * 2) + 1;
         if (force || count !== this._var.rowCount) {
             this._var.rowCount = count;
+            if (typeof this.onBodyScrolled === 'function') {
+                if (!this.virtual) {
+                    const tti = this._topToIndex(this._var.el.scrollTop);
+                    this.onBodyScrolled(null, tti.index, count);
+                } else {
+                    this.onBodyScrolled(null, this._var.startIndex, count);
+                }
+            }
             if (typeof callback === 'function') {
                 callback.call(this);
             } else {
@@ -1792,8 +1812,8 @@ export class Grid {
 
     /**
      * 显示多列排序设置面板
-     * @param {Function} [callback] - 更新回调函数 @since 1.0.3
+     * @param {Function} [callback] - 更新回调函数 *@since* 1.0.3
-     * @param {boolean} [layout] - 是否显示更新 layout 复选框 @since 1.0.3
+     * @param {boolean} [layout] - 是否显示更新 layout 复选框 *@since* 1.0.3
      * @since 1.0.1
      */
     showSortPanel(callback, layout) {
@@ -1989,6 +2009,8 @@ export class Grid {
                         const source = grid.source;
                         if (source == null || source.length === 0) {
                             this.sortArray = null;
+                            this.sortIndex = -1;
+                            this.sortDirection = GridColumnDirection.Ascending;
                             // arrow icon
                             [...this._headerCells].forEach((th, i) => {
                                 const arrow = th.querySelector('.arrow');
@@ -2081,10 +2103,10 @@ export class Grid {
         // FIXME: 清除缓存会导致选中状态下动态数据源下拉列表显示为空
         // delete it.source;
         it.values = item;
-        if (this.sortIndex >= 0) {
+        if (this.sortArray?.length > 0) {
-            this.sortColumn();
-        } else if (this.sortArray?.length > 0) {
             this.sort();
+        } else if (this.sortIndex >= 0) {
+            this.sortColumn();
         } else {
             this.refresh();
         }
@@ -2122,10 +2144,10 @@ export class Grid {
                 this._var.source.push(newIt);
             }
         }
-        if (this.sortIndex >= 0) {
+        if (this.sortArray?.length > 0) {
-            this.sortColumn(true);
-        } else if (this.sortArray?.length > 0) {
             this.sort(true);
+        } else if (this.sortIndex >= 0) {
+            this.sortColumn(true);
         } else {
             this.reload();
         }
@@ -2169,10 +2191,10 @@ export class Grid {
                 this._var.source.push(...items);
             }
         }
-        if (this.sortIndex >= 0) {
+        if (this.sortArray?.length > 0) {
-            this.sortColumn(true);
-        } else if (this.sortArray?.length > 0) {
             this.sort(true);
+        } else if (this.sortIndex >= 0) {
+            this.sortColumn(true);
         } else {
             this.reload();
         }
@@ -2564,10 +2586,10 @@ export class Grid {
         this._var.rowCount = -1;
 
         this.resize(true, false, () => {
-            if (this.sortIndex >= 0) {
+            if (this.sortArray?.length > 0) {
-                this.sortColumn(true);
-            } else if (this.sortArray?.length > 0) {
                 this.sort(true);
+            } else if (this.sortIndex >= 0) {
+                this.sortColumn(true);
             } else {
                 this.reload();
             }
@@ -3515,13 +3537,7 @@ export class Grid {
         }
     }
 
-    /**
+    _topToIndex(top) {
-     * @private
-     * @param {number} top 
-     * @param {boolean} [reload] 
-     * @returns {number}
-     */
-    _scrollToTop(top, reload) {
         const rowHeight = (this.rowHeight + 1);
         top -= (top % (rowHeight * 2)) + (RedumCount * rowHeight);
         if (top < 0) {
@@ -3535,10 +3551,22 @@ export class Grid {
                 top = bottomTop;
             }
         }
+        return { top, index: top / rowHeight };
+    }
+
+    /**
+     * @private
+     * @param {number} top 
+     * @param {boolean} [reload] 
+     * @returns {number}
+     */
+    _scrollToTop(top, reload) {
+        const tti = this._topToIndex(top);
+        top = tti.top;
         if (this._var.scrollTop !== top) {
             this._var.scrollTop = top;
             if (this.virtual) {
-                this._var.startIndex = top / rowHeight;
+                this._var.startIndex = tti.index;
             }
             this._fillRows(this._tableRows, this.columns);
             if (this.virtual) {
@@ -4241,21 +4269,25 @@ export class Grid {
         if (this._var.colAttrs.__filtering != null) {
             this._onCloseFilter();
         }
-        if (this.onBodyScrolled === 'function') {
-            this.onBodyScrolled(e);
-        }
         this._var.scrollLeft = e.target.scrollLeft;
+        const top = e.target.scrollTop;
         if (!this.virtual) {
             if (this.total != null) {
                 this._var.refs.footer.parentElement.style.bottom = `${this._var.footerOffset - e.target.scrollTop}px`;
             }
+            const tti = this._topToIndex(top);
+            if (this.onBodyScrolled === 'function') {
+                this.onBodyScrolled(e, tti.index, this._var.rowCount);
+            }
             return;
         }
-        const top = e.target.scrollTop;
         this._scrollToTop(top);
         if (this.total != null) {
             this._var.refs.footer.parentElement.style.bottom = `${this._var.refs.table.offsetTop + this._var.footerOffset - e.target.scrollTop}px`;
         }
+        if (this.onBodyScrolled === 'function') {
+            this.onBodyScrolled(e, this._var.startIndex, this._var.rowCount);
+        }
         if (this._var.isFirefox) {
             // 修复 firefox 下列头显示位置不正确的问题
             debounce(this._fillRows, RefreshInterval, this, this._tableRows, this.columns);

lib/ui/popup.d.ts

@@ -63,7 +63,7 @@ interface PopupOptions {
     /**
      * 弹出框关闭时的回调函数
      */
-    resolve?: () => void;
+    resolve?: (this: Popup, result: { result: any, popup: Popup }) => void;
 }
 
 export class Popup {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ui-lib",
   "private": true,
-  "version": "1.0.6",
+  "version": "1.0.7",
   "type": "module",
   "files": [
     "dist"
@@ -28,14 +28,14 @@
     "jsdoc-date": "jsdoc -c jsdoc-date.json"
   },
   "devDependencies": {
-    "@mxssfd/typedoc-theme": "^1.1.3",
+    "@mxssfd/typedoc-theme": "^1.1.6",
     "clean-jsdoc-theme": "^4.3.0",
     "docdash": "^2.0.2",
     "jsdoc": "^4.0.3",
-    "postcss-preset-env": "^9.5.14",
+    "postcss-preset-env": "^9.6.0",
-    "sass": "^1.77.6",
+    "sass": "^1.77.7",
-    "typedoc": "^0.25.13",
+    "typedoc": "^0.26.3",
-    "vite": "^5.3.1",
+    "vite": "^5.3.3",
     "vite-plugin-externals": "^0.6.2"
   }
 }