日期控件点击时再加载

src/views/modules/sampleTracking/projectProofTracking.vue

@@ -48,7 +48,7 @@
             style="margin-top: 3px; margin-left: 10px"
             placement="top">
             <template slot="content">
-              <div>- 已完成后，双击日期选择框可回退为未完成</div>
+              <div>- 单击日期可修改；已完成后，双击日期可回退为未完成</div>
               <div>- 双击Comments可编辑，回车或点击✓保存</div>
             </template>
             <i class="el-icon-question default-process-tip-icon"></i>
@@ -322,7 +322,10 @@
                 </div>
               </template>
               <template v-else>
+                <!-- 默认只渲染文本，避免每行每列都挂 el-date-picker；同一时刻最多一个日期组件。 -->
                 <el-date-picker
+                  v-if="isProcessDateEditing(scope.row, item)"
+                  ref="processDateEditPicker"
                   class="proof-process-date-picker"
                   v-model="scope.row[item.actualField]"
                   type="date"
@@ -331,8 +334,15 @@
                   placeholder=""
                   style="width: 100px"
                   @change="handleProcessDateChange(scope.row, item, $event)"
+                  @blur="handleProcessDatePickerBlur"
                   @dblclick.native.stop="handleProcessDateDoubleClick(scope.row, item)"
                 />
+                <span
+                  v-else
+                  class="process-date-display process-date-display--editable"
+                  @click.stop="handleProcessDateDisplayClick(scope.row, item)"
+                  @dblclick.stop="handleProcessDateDisplayDblClick(scope.row, item)"
+                >{{ scope.row[item.actualField] || '' }}</span>
                 <el-button
                   v-if="!isProcessStatusComplete(scope.row, item)"
                   class="process-complete-btn"
@@ -1870,6 +1880,8 @@ export default {
       commentsEditingTrackingId: null,
       commentsDraft: '',
       commentsSaveLoading: false,
+      // 工序日期按需编辑：空字符串表示未打开日期组件。
+      processDateEditingKey: '',
 
       oneKeyDialogVisible: false,
       oneKeyDialogMode: 'create',
@@ -1930,6 +1942,8 @@ export default {
   deactivated () {
     this.unbindTrackingTableResize()
     this.destroyDefaultProcessConfigSortable()
+    this.clearProcessDateEditClickTimer()
+    this.exitProcessDateEdit()
   },
   beforeDestroy () {
     if (this.$store.state.common.contentIsNeedRefresh) {
@@ -1939,6 +1953,8 @@ export default {
         buNo: this.searchData.buNo
       }
     }
+    this.clearProcessDateEditClickTimer()
+    this.exitProcessDateEdit()
     this.unbindTrackingTableResize()
   },
   watch: {
@@ -4319,6 +4335,9 @@ export default {
       inData.proofingStatusList = normalizedProofingStatusList
       this.applyProofTrackingSearchFilters(inData)
       this.dataListLoading = true
+      // 列表会整表换行数据，未提交的工序日期编辑态不能带到新行上。
+      this.clearProcessDateEditClickTimer()
+      this.exitProcessDateEdit()
       searchProofTracking(inData).then(({ data }) => {
         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;