diff --git a/src/views/modules/sampleTracking/projectProofTracking.vue b/src/views/modules/sampleTracking/projectProofTracking.vue index 63724b5..10e105f 100644 --- a/src/views/modules/sampleTracking/projectProofTracking.vue +++ b/src/views/modules/sampleTracking/projectProofTracking.vue @@ -48,7 +48,7 @@ style="margin-top: 3px; margin-left: 10px" placement="top"> - - 已完成后,双击日期选择框可回退为未完成 + - 单击日期可修改;已完成后,双击日期可回退为未完成 - 双击Comments可编辑,回车或点击✓保存 @@ -322,7 +322,10 @@ + + {{ scope.row[item.actualField] || '' }} { this.dataListLoading = false this.resetProcessTooltip() @@ -6148,6 +6167,83 @@ export default { this.$message.error('新增打样异常') }) }, + isProcessDateEditing (row, processCol) { + const editingKey = this.processDateEditingKey + if (!editingKey) { + return false + } + return this.getProcessCacheKey(row, processCol) === editingKey + }, + clearProcessDateEditClickTimer () { + if (this._processDateEditClickTimer) { + clearTimeout(this._processDateEditClickTimer) + this._processDateEditClickTimer = null + } + }, + exitProcessDateEdit () { + this.processDateEditingKey = '' + }, + openProcessDateEditPicker (retried) { + let picker = this.$refs.processDateEditPicker + // 工序列是 v-for,Vue2 即使用 v-if 只挂一个,ref 仍可能是数组。 + if (Array.isArray(picker)) { + picker = picker.filter(item => item)[0] + } + if (!picker) { + if (!retried) { + this.$nextTick(() => { + this.openProcessDateEditPicker(true) + }) + } + return + } + if (typeof picker.focus === 'function') { + picker.focus() + } + // 表格单元格内仅 focus 不一定弹出面板,显式打开保证单击即可选日期。 + picker.pickerVisible = true + }, + startProcessDateEdit (row, processCol) { + if (!row || !processCol || this.isTrackingRowProcessReadonly(row)) { + return + } + const nextKey = this.getProcessCacheKey(row, processCol) + if (!nextKey) { + return + } + this.hideProcessTooltip() + this.processDateEditingKey = nextKey + this.$nextTick(() => { + this.openProcessDateEditPicker() + }) + }, + handleProcessDateDisplayClick (row, processCol) { + if (!row || !processCol || this.isTrackingRowProcessReadonly(row)) { + return + } + this.clearProcessDateEditClickTimer() + // 已完成格才延迟:既要单击改日期,又要双击回退,不能先把日期组件挂上去。 + if (this.isProcessStatusComplete(row, processCol)) { + this._processDateEditClickTimer = setTimeout(() => { + this._processDateEditClickTimer = null + this.startProcessDateEdit(row, processCol) + }, 250) + return + } + this.startProcessDateEdit(row, processCol) + }, + handleProcessDateDisplayDblClick (row, processCol) { + this.clearProcessDateEditClickTimer() + if (this.isProcessStatusComplete(row, processCol)) { + this.handleProcessDateDoubleClick(row, processCol) + return + } + this.startProcessDateEdit(row, processCol) + }, + handleProcessDatePickerBlur () { + // pickerVisible 变为 false 时才会 blur,日历点选过程中不会把组件卸掉。 + this.exitProcessDateEdit() + }, handleProcessDateChange (row, processCol, dateVal) { if (!row || !processCol) { return @@ -7268,6 +7364,15 @@ export default { color: #8c8c8c; } +.process-cell.is-complete .process-date-display { + color: #8c8c8c; +} + +.process-cell.is-complete .process-date-display--editable:hover { + background: #ececec; + border-color: #d5d7de; +} + .process-cell.is-complete .link-date { color: #8c8c8c; } @@ -7306,6 +7411,24 @@ export default { margin-right: 32px; } +.process-date-display--editable { + min-width: 100px; + min-height: 24px; + line-height: 24px; + margin-right: 0; + padding: 0 6px; + border: 1px solid transparent; + border-radius: 4px; + cursor: pointer; + user-select: none; + box-sizing: border-box; +} + +.process-date-display--editable:hover { + border-color: #dcdfe6; + background: #fff; +} + .process-complete-btn { padding: 4px 8px; min-width: 12px;