tsanie/ui-lib
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

sync

Browse Source
This commit is contained in:
lchen committed 2024-07-10 12:19:52 +08:00
1 parent 5baf00de64
commit adbf4750cc
16 files changed
+1176 -722
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

lib/app/communications/internal.js
+38 -1
View File
@@ -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
+4 -4
View File
@@ -1,12 +1,12 @@
import "./element/style.scss";
import ScheduleItem from "./element/schedule";
import AddWorkOrder from "./element/addWorkorder";
import AssetSelector from "./element/assetSelector";
import TemplateSelector from "./element/templateSelector";
import InspectionWizard from "./element/inspectionWizard";
import Signature from "./element/signature";
export {
ScheduleItem,
AddWorkOrder,
AssetSelector,
TemplateSelector
InspectionWizard,
Signature
}
lib/element/addworkorder.js
+148 -126
View File
@@ -1,9 +1,7 @@
import { createElement, Dropdown, Popup, showAlert, createIcon, DateSelector, showConfirm, Grid } from "../ui";
import { r as lang, nullOrEmpty } from "../utility";
import { createElement, Dropdown, Popup, showAlert, createIcon, DateSelector, showConfirm, Grid, OptionBase } from "../ui";
import { nullOrEmpty } from "../utility";
import AssetSelector from "./assetSelector";
let r = lang;
const iconWorkOrder = 'data:image/png;base64,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 Line truncated
/**
@@ -51,58 +49,18 @@ function getOdometerUnit(uom) {
}
}
export default class AddWorkOrder {
export default class AddWorkOrder extends OptionBase {
_var = {
option: {
allowCustomer: false,
assetFullcontrol: false,
/**
* @private
* @type {(assetId: number) => Promise<{Id: number, VIN: string, DisplayName: string, OnRoad: boolean, Hide: boolean, EngineHours?: number, Odometer?: number, OdometerUOM?: string}>}
*/
requestAssetInfo: null,
/**
* @private
* @type {() => Promise<{Statuses: any[], Jobsites: any[], Codes: any[], Advisors: any[], Locations: any[], Departments: any[], OrderTypes: any[], AssetId: null}>}
*/
requestWorkOrderParams: 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<{Customer: any, Contacts: any[], Followers: any[]}>}
*/
requestCustomers: null,
/**
* @private
* @type {(assetId: number, locationId: number, departmentId: number) => Promise<any[]>}
*/
requestAssignedTo: null,
/**
* @private
* @type {(assetId: number) => Promise}
*/
requestHideAsset: null,
/**
* @private
* @type {(assetId: number) => Promise<any[]>}
*/
requestOpenedWorkorder: null,
zIndex: 999
},
/**
* @private
* @type {HTMLElement}
*/
container: null,
/**
* @private
* @type {Popup}
*/
assetSelectorPopup: null,
/**
* @private
* @property {number} Id
@@ -196,19 +154,58 @@ export default class AddWorkOrder {
onAssetSelected;
onSave;
constructor(opt) {
opt ??= {};
this._var.option = opt;
const getText = opt.getText;
if (typeof getText === 'function') {
r = getText;
} else if (typeof GetTextByKey === 'function') {
r = GetTextByKey;
}
static IconWorkOrder = iconWorkOrder;
constructor(opt = {
allowCustomer: false,
assetFullcontrol: false,
/**
* @private
* @type {(assetId: number) => Promise<{Id: number, VIN: string, DisplayName: string, OnRoad: boolean, Hide: boolean, EngineHours?: number, Odometer?: number, OdometerUOM?: string}>}
*/
requestAssetInfo: null,
/**
* @private
* @type {() => Promise<{Statuses: any[], Jobsites: any[], Codes: any[], Advisors: any[], Locations: any[], Departments: any[], OrderTypes: any[], AssetId: null}>}
*/
requestWorkOrderParams: 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<{Customer: any, Contacts: any[], Followers: any[]}>}
*/
requestCustomers: null,
/**
* @private
* @type {(assetId: number, locationId: number, departmentId: number) => Promise<any[]>}
*/
requestAssignedTo: null,
/**
* @private
* @type {(assetId: number) => Promise}
*/
requestHideAsset: null,
/**
* @private
* @type {(assetId: number) => Promise<any[]>}
*/
requestOpenedWorkorder: null,
zIndex: 999
}) {
super(opt);
}
async getItem() {
const title = r('P_WO_OPENWORKORDER', 'Open Work Order');
const title = this.r('P_WO_OPENWORKORDER', 'Open Work Order');
const el = this._var.el;
let status = el.dropStatus.selected;
if (status != null) {
@@ -226,7 +223,7 @@ export default class AddWorkOrder {
}
let machine = this._var.asset;
if (machine == null) {
showAlert(title, r('P_WO_ASSETNOTEMPTY', 'Asset cannot be empty.')).then(() => this._var.container.querySelector('.wo-asset>svg')?.focus());
showAlert(title, this.r('P_WO_ASSETNOTEMPTY', 'Asset cannot be empty.')).then(() => this._var.container.querySelector('.wo-asset>svg')?.focus());
return null;
}
const item = {
@@ -259,24 +256,24 @@ export default class AddWorkOrder {
item.Contacts = this._var.contacts ?? [];
item.Followers = this._var.followers ?? [];
if (nullOrEmpty(el.textComplaint?.value)) {
showAlert(title, r('P_WO_COMPLAINTREQUIRED', 'Complaint is required.')).then(() => el.textComplaint.focus());
showAlert(title, this.r('P_WO_COMPLAINTREQUIRED', 'Complaint is required.')).then(() => el.textComplaint.focus());
return null;
}
if (el.dropStatus.selected?.Completed) {
if (!el.dateCompleted.element.validity.valid) {
showAlert(title, r('P_WO_COMPLETEDDATECANNOTBEEMPTY', 'Completed Date cannot be empty.')).then(() => el.dateCompleted.element.focus());
showAlert(title, this.r('P_WO_COMPLETEDDATECANNOTBEEMPTY', 'Completed Date cannot be empty.')).then(() => el.dateCompleted.element.focus());
return null;
}
if (machine.OnRoad) {
item.MeterType = 'Odometer';
if (nullOrEmpty(item.Odometer) || isNaN(item.Odometer) || item.Odometer < 0) {
showAlert(title, r('P_WO_ODOMETERFORMATERROR', 'Odometer format error.')).then(() => el.inputOdometer.focus());
showAlert(title, this.r('P_WO_ODOMETERFORMATERROR', 'Odometer format error.')).then(() => el.inputOdometer.focus());
return null;
}
} else {
item.MeterType = 'HourMeter';
if (nullOrEmpty(item.HourMeter) || isNaN(item.HourMeter) || item.HourMeter < 0) {
showAlert(title, r('P_WO_HOURMETERFORMATERROR', 'Hour Meter format error.')).then(() => el.inputHours.focus());
showAlert(title, this.r('P_WO_HOURMETERFORMATERROR', 'Hour Meter format error.')).then(() => el.inputHours.focus());
return null;
}
}
@@ -285,14 +282,14 @@ export default class AddWorkOrder {
}
async show() {
const option = this._var.option;
const option = this._option;
const allowCustomer = option.allowCustomer === true;
const title = r('P_WO_OPENWORKORDER', 'Open Work Order');
const title = this.r('P_WO_OPENWORKORDER', 'Open Work Order');
const tabIndex = Math.max.apply(null, [...document.querySelectorAll('[tabindex]')].map(e => e.tabIndex ?? 0)) + 3;
const textComplaint = createElement('textarea', textarea => {
textarea.tabIndex = tabIndex + 2;
textarea.className = 'ui-text wo-complaint';
textarea.placeholder = r('P_WO_ENTERCOMPLAINT', 'Enter Complaint');
textarea.placeholder = this.r('P_WO_ENTERCOMPLAINT', 'Enter Complaint');
});
const baseOption = {
search: true,
@@ -388,47 +385,72 @@ export default class AddWorkOrder {
createElement('div', 'wo-combined wo-asset',
createElement('span', span => {
span.className = 'wo-title wo-title-required';
span.innerText = r('P_WO_ASSET_COLON', 'Asset:');
span.innerText = this.r('P_WO_ASSET_COLON', 'Asset:');
}),
createIcon('fa-light', 'search', svg => {
svg.tabIndex = tabIndex + 1;
svg.addEventListener('click', () => {
const selector = new AssetSelector({
assetFullcontrol: option.assetFullcontrol,
requestAssets: option.requestAssets,
requestAddAsset: option.requestAddAsset,
dataSource: this._var.params
});
selector.onSelected = async it => {
const el = this._var.el;
if (typeof option.requestAssetInfo === 'function') {
const a = await option.requestAssetInfo(it.Id);
if (a != null) {
it = a;
if (it.OnRoad) {
el.inputHours.value = '';
el.inputOdometer.value = it.Odometer;
el.dropOdometerUnit.select(getOdometerUnit(it.OdometerUOM));
} else {
el.inputHours.value = it.EngineHours;
el.inputOdometer.value = '';
el.dropOdometerUnit.select('Mile');
svg.addEventListener('click', async () => {
let popup = this._var.assetSelectorPopup;
if (popup == null) {
const selector = new AssetSelector({
assetFullcontrol: option.assetFullcontrol,
loading: flag => this._var.assetSelectorPopup.loading = flag,
close: () => this._var.assetSelectorPopup.close(),
requestAssets: option.requestAssets,
requestAddAsset: option.requestAddAsset,
dataSource: this._var.params
});
selector.onSelected = async it => {
const el = this._var.el;
if (typeof option.requestAssetInfo === 'function') {
const a = await option.requestAssetInfo(it.Id);
if (a != null) {
it = a;
if (it.OnRoad) {
el.inputHours.value = '';
el.inputOdometer.value = it.Odometer;
el.dropOdometerUnit.select(getOdometerUnit(it.OdometerUOM));
} else {
el.inputHours.value = it.EngineHours;
el.inputOdometer.value = '';
el.dropOdometerUnit.select('Mile');
}
}
}
}
this._var.asset = it;
if (typeof this.onAssetSelected === 'function') {
this.onAssetSelected(it);
}
this._var.container.querySelector('.wo-asset-name').innerText = it.DisplayName;
// get assigned to
if (typeof option.requestAssignedTo === 'function') {
const data = await option.requestAssignedTo(it.Id, el.dropLocation.selected?.ID ?? -1, el.dropDepartment.selected?.Id ?? -1)
el.dropAssignedTo.source = [{ IID: '', DisplayName: '' }, ...data];
el.dropStatus.onSelected(el.dropStatus.selected);
}
};
selector.show().then(mask => mask.style.zIndex = option.zIndex ?? 999);
this._var.asset = it;
if (typeof this.onAssetSelected === 'function') {
this.onAssetSelected(it);
}
this._var.container.querySelector('.wo-asset-name').innerText = it.DisplayName;
// get assigned to
if (typeof option.requestAssignedTo === 'function') {
const data = await option.requestAssignedTo(it.Id, el.dropLocation.selected?.ID ?? -1, el.dropDepartment.selected?.Id ?? -1)
el.dropAssignedTo.source = [{ IID: '', DisplayName: '' }, ...data];
el.dropStatus.onSelected(el.dropStatus.selected);
}
};
popup = new Popup({
title: this.r('P_MA_SELECTASSET', 'Select Asset'),
content: selector.create(),
persistent: true,
buttons: [
{
key: 'ok',
text: this.r('P_GRID_OK', 'OK'),
trigger: () => selector.select()
},
{ text: this.r('P_WO_CANCEL', 'Cancel') }
]
});
this._var.assetSelectorPopup = popup;
popup.create();
popup.rect = { width: 1220 };
const mask = await popup.show();
mask.style.zIndex = option.zIndex ?? 999;
await selector.init();
} else {
await popup.show();
}
});
})
),
@@ -436,7 +458,7 @@ export default class AddWorkOrder {
createElement('div', 'wo-line wo-combined',
createElement('span', span => {
span.className = 'wo-title wo-title-required';
span.innerText = r('P_WO_COMPLAINTCOLON', 'Complaint:');
span.innerText = this.r('P_WO_COMPLAINTCOLON', 'Complaint:');
})
),
createElement('div', div => {
@@ -448,7 +470,7 @@ export default class AddWorkOrder {
),
createElement('span', span => {
span.className = 'wo-title';
span.innerText = r('P_WO_WORKORDERTYPE_COLON', 'Work Order Type:');
span.innerText = this.r('P_WO_WORKORDERTYPE_COLON', 'Work Order Type:');
}),
dropWorkOrderType.create(),
createElement('div', div => {
@@ -459,7 +481,7 @@ export default class AddWorkOrder {
},
createElement('span', span => {
span.className = 'wo-title';
span.innerText = r('P_WO_COMPANYNAME_COLON', 'Company Name:');
span.innerText = this.r('P_WO_COMPANYNAME_COLON', 'Company Name:');
}),
createIcon('fa-light', 'search', svg => {
svg.tabIndex = tabIndex + 4;
@@ -485,18 +507,18 @@ export default class AddWorkOrder {
displayElement(createElement('span', 'wo-company-name'), allowCustomer),
createElement('span', span => {
span.className = 'wo-title';
span.innerText = r('P_WO_STATUS_COLON', 'Status:');
span.innerText = this.r('P_WO_STATUS_COLON', 'Status:');
}),
dropStatus.create(),
createElement('span', span => {
span.className = 'wo-title wo-title-required wo-sub-line wo-status-closed';
span.innerText = r('P_WO_COMPLETEDDATE_COLON', 'Completed Date:');
span.innerText = this.r('P_WO_COMPLETEDDATE_COLON', 'Completed Date:');
displayElement(span, false);
}),
displayElement(dateCompleted.create(), false),
createElement('span', span => {
span.className = 'wo-title wo-title-required wo-sub-line wo-hours';
span.innerText = r('P_WO_HOURS_COLON', 'Hours:');
span.innerText = this.r('P_WO_HOURS_COLON', 'Hours:');
displayElement(span, false);
}),
displayElement(
@@ -505,7 +527,7 @@ export default class AddWorkOrder {
),
createElement('span', span => {
span.className = 'wo-title wo-title-required wo-sub-line wo-odometer';
span.innerText = r('P_WO_ODOMETER_COLON', 'Odometer:');
span.innerText = this.r('P_WO_ODOMETER_COLON', 'Odometer:');
displayElement(span, false);
}),
createElement('div', div => {
@@ -517,12 +539,12 @@ export default class AddWorkOrder {
),
createElement('span', span => {
span.className = 'wo-title';
span.innerText = r('P_WO_ASSIGNEDTO_COLON', 'Assigned Tech:');
span.innerText = this.r('P_WO_ASSIGNEDTO_COLON', 'Assigned Tech:');
}),
dropAssignedTo.create(),
createElement('span', span => {
span.className = 'wo-title wo-customer-record';
span.innerText = r('P_WO_ADVISOR_COLON', 'Advisor:');
span.innerText = this.r('P_WO_ADVISOR_COLON', 'Advisor:');
if (!allowCustomer) {
displayElement(span, false);
}
@@ -530,7 +552,7 @@ export default class AddWorkOrder {
displayElement(dropAdvisor.create(), allowCustomer),
createElement('span', span => {
span.className = 'wo-title wo-customer-record';
span.innerText = r('P_WO_LOCATION_COLON', 'Location:');
span.innerText = this.r('P_WO_LOCATION_COLON', 'Location:');
if (!allowCustomer) {
displayElement(span, false);
}
@@ -538,7 +560,7 @@ export default class AddWorkOrder {
displayElement(dropLocation.create(), allowCustomer),
createElement('span', span => {
span.className = 'wo-title wo-customer-record';
span.innerText = r('P_WO_DEPARTMENT_COLON', 'Department:');
span.innerText = this.r('P_WO_DEPARTMENT_COLON', 'Department:');
if (!allowCustomer) {
displayElement(span, false);
}
@@ -594,12 +616,12 @@ export default class AddWorkOrder {
}
if (this._var.asset.Hide) {
if (!option.assetFullcontrol) {
await showAlert(title, r('P_WO_HIDDENCANNOTCREATE', 'The selected asset is hidden and a work order cannot be created.') + '\n\n' + r('P_WO_CONTACTTOUNHIDE', 'Please contact your Fleet Manager to Unhide the asset if you require a work order.'));
await showAlert(title, this.r('P_WO_HIDDENCANNOTCREATE', 'The selected asset is hidden and a work order cannot be created.') + '\n\n' + this.r('P_WO_CONTACTTOUNHIDE', 'Please contact your Fleet Manager to Unhide the asset if you require a work order.'));
return false;
}
const next = await showConfirm(title, r('P_WO_HIDDENCANNOTCREATE', 'The selected asset is hidden and a work order cannot be created.') + '\n\n' + r('P_WO_PROMPTUNHIDE', 'Do you wish to "Un-Hide" the asset?'), [
{ key: 'unhide', text: r('P_WO_UNHIDE', 'Unhide') },
{ key: 'cancel', text: r('P_WO_CANCELWO', 'Cancel Work Order') }
const next = await showConfirm(title, this.r('P_WO_HIDDENCANNOTCREATE', 'The selected asset is hidden and a work order cannot be created.') + '\n\n' + this.r('P_WO_PROMPTUNHIDE', 'Do you wish to "Un-Hide" the asset?'), [
{ key: 'unhide', text: this.r('P_WO_UNHIDE', 'Unhide') },
{ key: 'cancel', text: this.r('P_WO_CANCELWO', 'Cancel Work Order') }
]);
if (next.result !== 'unhide') {
return false;
@@ -620,21 +642,21 @@ export default class AddWorkOrder {
const popWorkorders = new Popup({
title,
content: createElement('div', 'wo-opened-workorder',
createElement('header', header => header.innerText = r('P_WO_ASSETOPENEDWORKORDER', 'The selected asset has the following open work orders:')),
createElement('header', header => header.innerText = this.r('P_WO_ASSETOPENEDWORKORDER', 'The selected asset has the following open work orders:')),
createElement('div', 'wo-grid-opened')
),
resolve,
buttons: [
{ key: 'create', text: r('P_WO_CREATEWO', 'Create Work Order'), trigger: () => resolve('create') },
{ key: 'cancel', text: r('P_WO_CANCELWO', 'Cancel Work Order'), trigger: () => resolve('cancel') }
{ key: 'create', text: this.r('P_WO_CREATEWO', 'Create Work Order'), trigger: () => resolve('create') },
{ key: 'cancel', text: this.r('P_WO_CANCELWO', 'Cancel Work Order'), trigger: () => resolve('cancel') }
]
});
popWorkorders.show().then(mask => {
const grid = new Grid(mask.querySelector('.wo-grid-opened'), r);
const grid = new Grid(mask.querySelector('.wo-grid-opened'), this.r);
grid.columns = [
{ key: 'WorkOrderNumber', caption: 'WO #', width: 100 },
{ key: 'CreateDateStr', caption: r('P_WO_CREATEDDATE', 'Created Date'), width: 120 },
{ key: 'Description', caption: r('P_WO_COMPLAINT', 'Complaint'), width: 360 }
{ key: 'CreateDateStr', caption: this.r('P_WO_CREATEDDATE', 'Created Date'), width: 120 },
{ key: 'Description', caption: this.r('P_WO_COMPLAINT', 'Complaint'), width: 360 }
];
grid.init();
grid.source = wos.map(w => ({
@@ -660,7 +682,7 @@ export default class AddWorkOrder {
}
}
},
{ text: r('P_WO_CANCEL', 'Cancel') }
{ text: this.r('P_WO_CANCEL', 'Cancel') }
]
});
popup.create();
lib/element/assetSelector.js
+93 -102
View File
@@ -1,43 +1,12 @@
import { Dropdown, Grid, Popup, createCheckbox, createElement, createIcon } from "../ui";
import { r as lang } from "../utility";
import { Dropdown, Grid, OptionBase, createCheckbox, createElement, createIcon } from "../ui";
let r = lang;
export default class AssetSelector {
export default class AssetSelector extends OptionBase {
_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) {
opt ??= {};
this._var.option = opt;
const getText = opt.getText;
if (typeof getText === 'function') {
r = getText;
} else if (typeof GetTextByKey === 'function') {
r = GetTextByKey;
constructor(opt = {
assetFullcontrol: false,
ignoreHidden: false,
/**
* @private
* @type {(flag: boolean) => void}
*/
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() {
const option = this._var.option;
const title = r('P_MA_SELECTASSET', 'Select Asset');
create() {
const option = this._option;
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: 'DisplayName', caption: r('P_SELECTASSETS_NAME', 'Name'), width: 190 },
{ key: 'MakeName', caption: r('P_SELECTASSETS_MAKE', 'Make'), width: 110, allowFilter: true },
{ key: 'ModelName', caption: r('P_SELECTASSETS_MODEL', 'Model'), width: 110, allowFilter: true },
{ key: 'TypeName', caption: r('P_SELECTASSETS_TYPE', 'Type'), width: 110, allowFilter: true },
{ key: 'AcquisitionType', caption: r('P_MA_ACQUISITIONTYPE', 'Acquisition Type'), width: 130, allowFilter: true },
{ key: 'AssetGroups', caption: 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: 'VIN', caption: this.r('P_SELECTASSETS_VIN', 'VIN'), width: 170 },
{ key: 'DisplayName', caption: this.r('P_SELECTASSETS_NAME', 'Name'), width: 190 },
{ key: 'MakeName', caption: this.r('P_SELECTASSETS_MAKE', 'Make'), width: 110, allowFilter: true },
{ key: 'ModelName', caption: this.r('P_SELECTASSETS_MODEL', 'Model'), width: 110, allowFilter: true },
{ key: 'TypeName', caption: this.r('P_SELECTASSETS_TYPE', 'Type'), width: 110, allowFilter: true },
{ key: 'AcquisitionType', caption: this.r('P_MA_ACQUISITIONTYPE', 'Acquisition Type'), width: 130, allowFilter: true },
{ key: 'AssetGroups', caption: this.r('P_MA_ASSETGROUP', 'Asset Group'), width: 150 },
{ 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({
title,
content: container,
persistent: true,
buttons: [
{
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();
return container;
}
async init() {
const option = this._option;
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];
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.dropAssetGroup.source = [{ Key: '-1', Value: '' }, ...option.dataSource.AssetGroups];
this._var.el.dropJobsite.source = [{ ID: '-1', Name: '' }, ...option.dataSource.Jobsites];
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
+169
View File
@@ -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
+5 -14
View File
@@ -1,19 +1,10 @@
import { createElement, createCheckbox, createRadiobox, Dropdown, validation, toDateValue } from "../ui";
import { r as lang } from "../utility";
import { createElement, createCheckbox, createRadiobox, Dropdown, validation, toDateValue, OptionBase } from "../ui";
let r = lang;
export default class ScheduleItem {
export default class ScheduleItem extends OptionBase {
_var = {};
constructor(opt) {
this._var.option = opt ?? {};
const getText = opt?.getText;
if (typeof getText === 'function') {
r = getText;
} else if (typeof GetTextByKey === 'function') {
r = GetTextByKey;
}
constructor(opt = {}) {
super(opt);
}
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
+151
View File
@@ -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
+6 -1
View File
@@ -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
+48 -69
View File
@@ -1,27 +1,18 @@
import { Grid, Popup, createElement, createIcon } from "../ui";
import { r as lang, nullOrEmpty } from "../utility";
import { Grid, OptionBase, createElement, createIcon } from "../ui";
import { nullOrEmpty } from "../utility";
let r = lang;
export default class TemplateSelector {
export default class TemplateSelector extends OptionBase {
_var = {
option: {
/**
* @private
* @type {(search: string) => Promise<any[]>}
*/
requestTemplates: null
},
/**
* @private
* @type {number}
*/
assetId: -1,
/**
* @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 = {}) {
this._var.option = opt;
const getText = opt.getText;
if (typeof getText === 'function') {
r = getText;
} else if (typeof GetTextByKey === 'function') {
r = GetTextByKey;
constructor(opt = {
/** @type {(flag: boolean) => void} */
loading: null,
/** @type {() => void} */
close: null,
/** @type {(assetId: number, search: string) => Promise<any[]>} */
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;
requestTemplates(el.inputSearch.value)
this.loading(true);
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() {
const option = this._var.option;
const title = r('P_MODULE_INSPECTIONTEMPLATES', 'Inspection Templates');
create() {
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: 'Notes', caption: r('P_IPT_NOTES', 'Notes'), width: 630 }
{ key: 'Name', caption: this.r('P_IPT_NAME', 'Name'), width: 390 },
{ 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({
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();
return container;
}
}
lib/ui.js
+21 -1
View File
@@ -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
+21 -8
View File
@@ -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
+65 -33
View File
@@ -14,7 +14,7 @@ import { requestAnimationFrame } from '../../ui';
/**
* @author Tsanie Lily <[email protected]>
* @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) {
this.sortColumn(true);
} else if (this.sortArray?.length > 0) {
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 {boolean} [layout] - 是否显示更新 layout 复选框 @since 1.0.3
* @param {Function} [callback] - 更新回调函数 *@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) {
this.sortColumn();
} else if (this.sortArray?.length > 0) {
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) {
this.sortColumn(true);
} else if (this.sortArray?.length > 0) {
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) {
this.sortColumn(true);
} else if (this.sortArray?.length > 0) {
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) {
this.sortColumn(true);
} else if (this.sortArray?.length > 0) {
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 {
}
}
/**
* @private
* @param {number} top
* @param {boolean} [reload]
* @returns {number}
*/
_scrollToTop(top, reload) {
_topToIndex(top) {
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
Vendored
+1 -1
View File
@@ -63,7 +63,7 @@ interface PopupOptions {
/**
* 弹出框关闭时的回调函数
*/
resolve?: () => void;
resolve?: (this: Popup, result: { result: any, popup: Popup }) => void;
}
export class Popup {