diff --git a/app/src/assets/scss/business/_custom.scss b/app/src/assets/scss/business/_custom.scss index 922482428..bc9ae08a9 100644 --- a/app/src/assets/scss/business/_custom.scss +++ b/app/src/assets/scss/business/_custom.scss @@ -54,15 +54,6 @@ } } - .custom-attr__avarrow { - height: 12px; - width: 12px; - color: var(--b3-theme-on-surface); - margin: 0 5px; - flex-shrink: 0; - align-self: center; - } - .custom-attr__avvalue { cursor: pointer; transition: var(--b3-transition); diff --git a/app/src/protyle/render/av/blockAttr.ts b/app/src/protyle/render/av/blockAttr.ts index 1dba14585..e8a22a2e3 100644 --- a/app/src/protyle/render/av/blockAttr.ts +++ b/app/src/protyle/render/av/blockAttr.ts @@ -32,12 +32,14 @@ export const genAVValueHTML = (value: IAVCellValue) => { }); break; case "date": - if (value[value.type].isNotEmpty) { - html = `${dayjs(value[value.type].content).format(value[value.type].isNotTime ? "YYYY-MM-DD" : "YYYY-MM-DD HH:mm")}`; + html = ``; + if (value[value.type] && value[value.type].isNotEmpty) { + html += dayjs(value[value.type].content).format(value[value.type].isNotTime ? "YYYY-MM-DD" : "YYYY-MM-DD HH:mm"); } - if (value[value.type].hasEndDate && value[value.type].isNotEmpty2 && value[value.type].isNotEmpty) { - html += `${dayjs(value[value.type].content2).format(value[value.type].isNotTime ? "YYYY-MM-DD" : "YYYY-MM-DD HH:mm")}`; + if (value[value.type] && value[value.type].hasEndDate && value[value.type].isNotEmpty && value[value.type].isNotEmpty2) { + html += `${dayjs(value[value.type].content2).format(value[value.type].isNotTime ? "YYYY-MM-DD" : "YYYY-MM-DD HH:mm")}`; } + html += ""; break; case "created": case "updated": diff --git a/app/src/protyle/render/av/date.ts b/app/src/protyle/render/av/date.ts index 77f971989..31c6b1719 100644 --- a/app/src/protyle/render/av/date.ts +++ b/app/src/protyle/render/av/date.ts @@ -3,6 +3,7 @@ import * as dayjs from "dayjs"; import {updateAttrViewCellAnimation} from "./action"; import {genAVValueHTML} from "./blockAttr"; import {hasClosestByClassName} from "../../util/hasClosest"; +import {genCellValueByElement, getTypeByCellElement} from "./cell"; export const getDateHTML = (data: IAVTable, cellElements: HTMLElement[]) => { let hasEndDate = true; @@ -63,6 +64,7 @@ export const bindDateEvent = (options: { protyle: IProtyle, data: IAV, menuElement: HTMLElement, + blockElement: Element, cellElements: HTMLElement[] }) => { const inputElements: NodeListOf = options.menuElement.querySelectorAll("input"); @@ -72,6 +74,7 @@ export const bindDateEvent = (options: { cellElements: options.cellElements, data: options.data, protyle: options.protyle, + blockElement: options.blockElement, value: { isNotEmpty: inputElements[0].value !== "", content: new Date(inputElements[0].dataset.value).getTime(), @@ -85,6 +88,7 @@ export const bindDateEvent = (options: { cellElements: options.cellElements, data: options.data, protyle: options.protyle, + blockElement: options.blockElement, value: { isNotEmpty2: inputElements[1].value !== "", content2: new Date(inputElements[1].dataset.value).getTime(), @@ -101,6 +105,7 @@ export const bindDateEvent = (options: { setDateValue({ cellElements: options.cellElements, data: options.data, + blockElement: options.blockElement, protyle: options.protyle, value: { hasEndDate: inputElements[2].checked, @@ -127,6 +132,7 @@ export const bindDateEvent = (options: { setDateValue({ cellElements: options.cellElements, data: options.data, + blockElement: options.blockElement, protyle: options.protyle, value: { isNotTime: !inputElements[3].checked @@ -139,73 +145,54 @@ export const setDateValue = (options: { cellElements: HTMLElement[], data: IAV protyle: IProtyle, - value: IAVCellDateValue + value: IAVCellDateValue, + blockElement: Element }) => { - let cellIndex: number; - Array.from((hasClosestByClassName(options.cellElements[0], "av__row") as HTMLElement).querySelectorAll(".av__cell")).find((item: HTMLElement, index) => { - if (item.dataset.id === options.cellElements[0].dataset.id) { - cellIndex = index; - return true; - } - }); const colId = options.cellElements[0].dataset.colId; const cellDoOperations: IOperation[] = []; const cellUndoOperations: IOperation[] = []; - options.cellElements.forEach(item => { - let cellData: IAVCell; - let oldValue; + options.cellElements.forEach((item, elementIndex) => { + if (!options.blockElement.contains(item)) { + item = options.cellElements[elementIndex] = options.blockElement.querySelector(`.av__cell[data-id="${item.dataset.id}"]`) as HTMLElement; + } + const cellValue = genCellValueByElement(getTypeByCellElement(item) || item.dataset.type as TAVCol, item); + const oldValue = JSON.parse(JSON.stringify(cellValue)) const rowID = (hasClosestByClassName(item, "av__row") as HTMLElement).dataset.id; - options.data.view.rows.find(row => { - if (row.id === rowID) { - if (typeof cellIndex === "number") { - cellData = row.cells[cellIndex]; - // 为空时 cellId 每次请求都不一致 - cellData.id = item.dataset.id; - if (!cellData.value) { - cellData.value = { - type: cellData.valueType - }; - } else { - cellData.value.id = item.dataset.id; - } - } else { - cellData = row.cells.find(cellItem => { - if (item.dataset.id === cellItem.id) { - return true; - } - }); - } - oldValue = Object.assign({}, cellData.value.date); - cellData.value.date = Object.assign(cellData.value.date || { - isNotEmpty2: false, - isNotEmpty: false - }, options.value); - return true; - } - }); - + cellValue.date = Object.assign(cellValue.date || { + isNotEmpty2: false, + isNotEmpty: false + }, options.value); cellDoOperations.push({ action: "updateAttrViewCell", - id: cellData.id, + id: cellValue.id, keyID: colId, rowID, avID: options.data.id, - data: cellData.value + data: cellValue }); cellUndoOperations.push({ action: "updateAttrViewCell", - id: cellData.id, + id: cellValue.id, keyID: colId, rowID, avID: options.data.id, - data: { - date: oldValue + data: oldValue + }); + options.data.view.rows.find(row => { + if (row.id === rowID) { + row.cells.find(cell => { + if (cell.id === cellValue.id) { + cell.value = cellValue; + return true; + } + }); + return true; } }); if (item.classList.contains("custom-attr__avvalue")) { - item.innerHTML = genAVValueHTML(cellData.value); + item.innerHTML = genAVValueHTML(cellValue); } else { - updateAttrViewCellAnimation(item, cellData.value); + updateAttrViewCellAnimation(item, cellValue); } }); transaction(options.protyle, cellDoOperations, cellUndoOperations); diff --git a/app/src/protyle/render/av/openMenuPanel.ts b/app/src/protyle/render/av/openMenuPanel.ts index f06e92203..0d9ef21fc 100644 --- a/app/src/protyle/render/av/openMenuPanel.ts +++ b/app/src/protyle/render/av/openMenuPanel.ts @@ -93,7 +93,13 @@ export const openMenuPanel = (options: { if (options.type === "select") { bindSelectEvent(options.protyle, data, menuElement, options.cellElements, options.blockElement); } else if (options.type === "date") { - bindDateEvent({protyle: options.protyle, data, menuElement, cellElements: options.cellElements}); + bindDateEvent({ + protyle: options.protyle, + data, + menuElement, + cellElements: options.cellElements, + blockElement: options.blockElement + }); } else if (options.type === "asset") { bindAssetEvent({protyle: options.protyle, data, menuElement, cellElements: options.cellElements}); setTimeout(() => { @@ -999,6 +1005,7 @@ export const openMenuPanel = (options: { cellElements: options.cellElements, data, protyle: options.protyle, + blockElement: options.blockElement, value: { isNotEmpty2: false, isNotEmpty: false, diff --git a/app/src/protyle/render/av/select.ts b/app/src/protyle/render/av/select.ts index 4870f85e1..b06da6ea2 100644 --- a/app/src/protyle/render/av/select.ts +++ b/app/src/protyle/render/av/select.ts @@ -60,7 +60,7 @@ export const removeCellOption = (protyle: IProtyle, data: IAV, cellElements: HTM } const rowID = (hasClosestByClassName(item, "av__row") as HTMLElement).dataset.id; const cellValue = genCellValueByElement(getTypeByCellElement(item) || item.dataset.type as TAVCol, item); - const oldValue = Object.assign({}, cellValue.mSelect); + const oldValue = JSON.parse(JSON.stringify(cellValue)); if (elementIndex === 0) { cellValue.mSelect?.find((item: { content: string }, index: number) => { if (item.content === target.dataset.content) { @@ -450,7 +450,7 @@ export const addColOptionOrCell = (protyle: IProtyle, data: IAV, cellElements: H return; } const cellValue = genCellValueByElement(colData.type, item); - const oldValue = Object.assign({}, cellValue); + const oldValue = JSON.parse(JSON.stringify(cellValue)); if (index === 0) { if (colData.type === "mSelect") { let hasOption = false;