|
|
@@ -123,35 +123,6 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <transition name="fade">
|
|
|
- <div class="lock-time" v-if="showLockTime">
|
|
|
- <div class="lock-time-label-wrap glow-header">
|
|
|
- <div class="lock-time-label">锁定时间</div>
|
|
|
- <div class="lock-time-close" @click="showLockTime = false">✕</div>
|
|
|
- </div>
|
|
|
- <div class="lock-time-options">
|
|
|
- <div class="lock-time-option">
|
|
|
- <label>
|
|
|
- <input type="radio" v-model="lockTimeType" value="continuous" /> 持续放行
|
|
|
- </label>
|
|
|
- </div>
|
|
|
- <div class="lock-time-option">
|
|
|
- <label>
|
|
|
- <input type="radio" v-model="lockTimeType" value="timer" /> 放行
|
|
|
- <DropdownSelect placeholder="锁定时间" v-model="currentLocktime"
|
|
|
- :options="locktimeOptions" size="auto" @click.native.prevent />
|
|
|
- 秒解锁
|
|
|
- </label>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="lock-time-actions" v-if="currentMethod === 'step'">
|
|
|
- <button type="button" class="btn btn-cancel"
|
|
|
- @click="onCancel()">取消</button>
|
|
|
- <button type="button" class="btn btn-confirm"
|
|
|
- @click="onConfirm()">确认</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </transition>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -165,6 +136,38 @@
|
|
|
</div>
|
|
|
</form>
|
|
|
</div>
|
|
|
+ <!-- 步进锁定时间居中弹窗 -->
|
|
|
+ <transition name="fade">
|
|
|
+ <div class="lock-time-overlay" v-if="showLockTime" @click.self="showLockTime = false">
|
|
|
+ <div class="lock-time-modal">
|
|
|
+ <div class="lock-time-label-wrap glow-header">
|
|
|
+ <div class="lock-time-label">锁定时间</div>
|
|
|
+ <div class="lock-time-close" @click="showLockTime = false">✕</div>
|
|
|
+ </div>
|
|
|
+ <div class="lock-time-options">
|
|
|
+ <div class="lock-time-option">
|
|
|
+ <label>
|
|
|
+ <input type="radio" v-model="lockTimeType" value="continuous" /> 持续放行
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ <div class="lock-time-option">
|
|
|
+ <label>
|
|
|
+ <input type="radio" v-model="lockTimeType" value="timer" /> 放行
|
|
|
+ <DropdownSelect placeholder="锁定时间" v-model="currentLocktime"
|
|
|
+ :options="locktimeOptions" size="auto" @click.native.prevent />
|
|
|
+ 秒解锁
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="lock-time-actions">
|
|
|
+ <button type="button" class="btn btn-cancel"
|
|
|
+ @click="onLockTimeCancel">取消</button>
|
|
|
+ <button type="button" class="btn btn-confirm"
|
|
|
+ @click="onLockTimeConfirm">确认</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </transition>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -478,11 +481,28 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
|
|
|
- // 取消按钮
|
|
|
+ // 取消按钮(退出手动控制)
|
|
|
onCancel() {
|
|
|
this.isManualMode = false;
|
|
|
this.showLockTime = false;
|
|
|
- // 可以在此添加回滚初始数据的逻辑
|
|
|
+ },
|
|
|
+
|
|
|
+ // 步进锁定时间弹窗:取消(不退出手动控制)
|
|
|
+ onLockTimeCancel() {
|
|
|
+ this.showLockTime = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 步进锁定时间弹窗:确认(不退出手动控制)
|
|
|
+ onLockTimeConfirm() {
|
|
|
+ this.showLockTime = false;
|
|
|
+ const submitData = {
|
|
|
+ method: 'step',
|
|
|
+ stage: this.currentStage,
|
|
|
+ lockTimeType: this.lockTimeType,
|
|
|
+ locktime: this.lockTimeType === 'timer' ? this.currentLocktime : null,
|
|
|
+ };
|
|
|
+ console.log('步进指令:', submitData);
|
|
|
+ this.$emit('confirm', submitData);
|
|
|
},
|
|
|
|
|
|
// 需求5:点击确认按钮提交 + 表单验证
|
|
|
@@ -750,11 +770,33 @@ export default {
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
|
|
|
+/* 步进锁定时间居中弹窗遮罩 */
|
|
|
+.lock-time-overlay {
|
|
|
+ position: absolute;
|
|
|
+ inset: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: rgba(0, 0, 0, 0.45);
|
|
|
+ z-index: 200;
|
|
|
+ border-radius: inherit;
|
|
|
+}
|
|
|
+
|
|
|
+.lock-time-modal {
|
|
|
+ background: linear-gradient(135deg, rgba(10, 25, 60, 0.97) 0%, rgba(20, 40, 90, 0.97) 100%);
|
|
|
+ border: 1px solid rgba(161, 190, 255, 0.3);
|
|
|
+ border-radius: 6px;
|
|
|
+ min-width: 220px;
|
|
|
+ max-width: 320px;
|
|
|
+ width: 70%;
|
|
|
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
|
|
|
+}
|
|
|
+
|
|
|
.lock-time-actions {
|
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
|
- gap: clamp(4px, calc(var(--s) * 8px), 8px);
|
|
|
- padding: clamp(4px, calc(var(--s) * 8px), 8px) clamp(4px, calc(var(--s) * 10px), 10px);
|
|
|
+ gap: 8px;
|
|
|
+ padding: 8px 12px;
|
|
|
border-top: 1px solid rgba(161, 190, 255, 0.15);
|
|
|
}
|
|
|
|